@vigilkids/section-renderer-vue 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/sections/article/visiva/ArticleCta.vue +46 -170
- package/dist/sections/article/visiva/ArticleFaq.vue +7 -31
- package/dist/sections/article/visiva/ArticleFeature.vue +6 -21
- package/dist/sections/article/visiva/ArticleNotice.vue +7 -31
- package/dist/sections/article/visiva/ArticleProsCons.vue +3 -38
- package/dist/sections/article/visiva/ArticleQuestion.vue +6 -6
- package/dist/sections/article/visiva/ArticleQuote.vue +4 -7
- package/dist/sections/article/visiva/ArticleTable.vue +18 -26
- package/dist/styles/products/visiva.css +1 -1
- package/package.json +2 -2
|
@@ -38,111 +38,46 @@ const { editableAttrs } = useInlineEdit({
|
|
|
38
38
|
</script>
|
|
39
39
|
|
|
40
40
|
<template>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
width="16"
|
|
51
|
-
height="16"
|
|
52
|
-
viewBox="0 0 16 16"
|
|
53
|
-
fill="none"
|
|
54
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
55
|
-
>
|
|
56
|
-
<path
|
|
57
|
-
d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
|
|
58
|
-
fill="currentColor"
|
|
59
|
-
/>
|
|
60
|
-
</svg>
|
|
61
|
-
<span class="blog-button-single-text" v-bind="editableAttrs('button_text')">{{
|
|
62
|
-
s.button_text
|
|
63
|
-
}}</span>
|
|
64
|
-
</a>
|
|
65
|
-
</div>
|
|
41
|
+
<a
|
|
42
|
+
v-if="variant === 'button'"
|
|
43
|
+
:href="editorMode ? undefined : primaryUrl"
|
|
44
|
+
class="blog-btn"
|
|
45
|
+
:class="{ disabled: editorMode }"
|
|
46
|
+
v-bind="editableAttrs('button_text')"
|
|
47
|
+
>
|
|
48
|
+
{{ s.button_text }}
|
|
49
|
+
</a>
|
|
66
50
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<div class="blog-button-group-item">
|
|
51
|
+
<div v-else-if="variant === 'button-group'" class="blog-btn-row">
|
|
52
|
+
<div>
|
|
70
53
|
<a
|
|
71
54
|
:href="editorMode ? undefined : primaryUrl"
|
|
72
|
-
class="blog-
|
|
73
|
-
:class="{
|
|
55
|
+
class="blog-btn black"
|
|
56
|
+
:class="{ disabled: editorMode }"
|
|
57
|
+
v-bind="editableAttrs('button_text')"
|
|
74
58
|
>
|
|
75
|
-
|
|
76
|
-
<svg
|
|
77
|
-
width="16"
|
|
78
|
-
height="16"
|
|
79
|
-
viewBox="0 0 16 16"
|
|
80
|
-
fill="none"
|
|
81
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
82
|
-
>
|
|
83
|
-
<path
|
|
84
|
-
d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
|
|
85
|
-
fill="currentColor"
|
|
86
|
-
/>
|
|
87
|
-
</svg>
|
|
88
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
|
|
89
|
-
s.button_text
|
|
90
|
-
}}</span>
|
|
59
|
+
{{ s.button_text }}
|
|
91
60
|
</a>
|
|
92
|
-
<p v-if="s.button_caption" class="blog-
|
|
61
|
+
<p v-if="s.button_caption" class="blog-btn-note" v-bind="editableAttrs('button_caption')">
|
|
93
62
|
<img src="https://cdn.visiva.ai/blog/coupon.svg" alt="Coupon" class="blog-icon-17">
|
|
94
|
-
|
|
95
|
-
s.button_caption
|
|
96
|
-
}}</span>
|
|
63
|
+
{{ s.button_caption }}
|
|
97
64
|
</p>
|
|
98
65
|
</div>
|
|
99
66
|
|
|
100
|
-
<div
|
|
67
|
+
<div>
|
|
101
68
|
<a
|
|
102
69
|
:href="editorMode ? undefined : secondaryUrl"
|
|
103
|
-
class="blog-
|
|
104
|
-
:class="{
|
|
70
|
+
class="blog-btn green cart"
|
|
71
|
+
:class="{ disabled: editorMode }"
|
|
72
|
+
v-bind="editableAttrs('secondary_button_text')"
|
|
105
73
|
>
|
|
106
|
-
|
|
107
|
-
<svg
|
|
108
|
-
width="16"
|
|
109
|
-
height="16"
|
|
110
|
-
viewBox="0 0 16 16"
|
|
111
|
-
fill="none"
|
|
112
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
113
|
-
>
|
|
114
|
-
<mask
|
|
115
|
-
id="market-mask0"
|
|
116
|
-
style="mask-type: alpha"
|
|
117
|
-
maskUnits="userSpaceOnUse"
|
|
118
|
-
x="0"
|
|
119
|
-
y="0"
|
|
120
|
-
width="16"
|
|
121
|
-
height="16"
|
|
122
|
-
>
|
|
123
|
-
<rect width="16" height="16" fill="#D9D9D9" />
|
|
124
|
-
</mask>
|
|
125
|
-
<g mask="url(#market-mask0)">
|
|
126
|
-
<path
|
|
127
|
-
d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z"
|
|
128
|
-
fill="black"
|
|
129
|
-
/>
|
|
130
|
-
<path
|
|
131
|
-
d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z"
|
|
132
|
-
fill="black"
|
|
133
|
-
/>
|
|
134
|
-
<path
|
|
135
|
-
d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z"
|
|
136
|
-
fill="black"
|
|
137
|
-
/>
|
|
138
|
-
</g>
|
|
139
|
-
</svg>
|
|
140
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{
|
|
141
|
-
s.secondary_button_text
|
|
142
|
-
}}</span>
|
|
74
|
+
{{ s.secondary_button_text }}
|
|
143
75
|
</a>
|
|
144
|
-
<p
|
|
145
|
-
|
|
76
|
+
<p
|
|
77
|
+
v-if="s.secondary_button_caption"
|
|
78
|
+
class="blog-btn-note"
|
|
79
|
+
v-bind="editableAttrs('secondary_button_caption')"
|
|
80
|
+
>
|
|
146
81
|
<svg
|
|
147
82
|
width="17"
|
|
148
83
|
height="17"
|
|
@@ -156,90 +91,31 @@ const { editableAttrs } = useInlineEdit({
|
|
|
156
91
|
/>
|
|
157
92
|
<path d="M8.5 12L11.5 9.5L12 11L8.5 12Z" fill="#005128" />
|
|
158
93
|
</svg>
|
|
159
|
-
|
|
160
|
-
class="blog-button-group-note-text"
|
|
161
|
-
v-bind="editableAttrs('secondary_button_caption')"
|
|
162
|
-
>{{ s.secondary_button_caption }}</span>
|
|
94
|
+
{{ s.secondary_button_caption }}
|
|
163
95
|
</p>
|
|
164
96
|
</div>
|
|
165
97
|
</div>
|
|
166
98
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<path
|
|
185
|
-
d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
|
|
186
|
-
fill="currentColor"
|
|
187
|
-
/>
|
|
188
|
-
</svg>
|
|
189
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
|
|
190
|
-
s.button_text
|
|
191
|
-
}}</span>
|
|
192
|
-
</a>
|
|
193
|
-
</div>
|
|
194
|
-
<div>
|
|
195
|
-
<a
|
|
196
|
-
:href="editorMode ? undefined : secondaryUrl"
|
|
197
|
-
class="blog-button-group-button-green"
|
|
198
|
-
:class="{ 'blog-button-group--disabled': editorMode }"
|
|
199
|
-
>
|
|
200
|
-
<!-- #market -->
|
|
201
|
-
<svg
|
|
202
|
-
width="16"
|
|
203
|
-
height="16"
|
|
204
|
-
viewBox="0 0 16 16"
|
|
205
|
-
fill="none"
|
|
206
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
207
|
-
>
|
|
208
|
-
<mask
|
|
209
|
-
id="market-mask1"
|
|
210
|
-
style="mask-type: alpha"
|
|
211
|
-
maskUnits="userSpaceOnUse"
|
|
212
|
-
x="0"
|
|
213
|
-
y="0"
|
|
214
|
-
width="16"
|
|
215
|
-
height="16"
|
|
216
|
-
>
|
|
217
|
-
<rect width="16" height="16" fill="#D9D9D9" />
|
|
218
|
-
</mask>
|
|
219
|
-
<g mask="url(#market-mask1)">
|
|
220
|
-
<path
|
|
221
|
-
d="M5.14284 13.7144C4.50998 13.7144 4 14.2243 4 14.8572C4 15.4901 4.50998 16 5.14284 16C5.77571 16 6.28569 15.4901 6.28569 14.8572C6.28569 14.2243 5.77571 13.7144 5.14284 13.7144Z"
|
|
222
|
-
fill="black"
|
|
223
|
-
/>
|
|
224
|
-
<path
|
|
225
|
-
d="M13.1463 13.7144C12.5134 13.7144 12.0034 14.2243 12.0034 14.8572C12.0034 15.4901 12.5134 16 13.1463 16C13.7791 16 14.2891 15.4901 14.2891 14.8572C14.2891 14.2243 13.7761 13.7144 13.1463 13.7144Z"
|
|
226
|
-
fill="black"
|
|
227
|
-
/>
|
|
228
|
-
<path
|
|
229
|
-
d="M15.5789 2.22449C15.2871 1.8927 14.8846 1.71451 14.4484 1.71451H2.99843L2.95849 1.48103C2.85711 0.648471 2.12594 0.000244141 1.29338 0.000244141H0.571422C0.25499 0.000244141 0 0.255234 0 0.571666C0 0.888099 0.25499 1.14309 0.571422 1.14309H1.29031C1.53915 1.14309 1.79414 1.37043 1.82486 1.64692L2.37785 4.83583L3.34866 11.6591C3.45004 12.4917 4.172 13.143 4.99841 13.143H14.2886C14.6051 13.143 14.8601 12.888 14.8601 12.5715C14.8601 12.2551 14.6051 12.0001 14.2886 12.0001H4.99534C4.75264 12.0001 4.51301 11.7758 4.47921 11.5086L4.38398 10.8419L13.4499 10.2828C14.2733 10.2828 14.9983 9.63147 15.0935 8.82964L15.9998 3.6807C16.0643 3.13078 15.9138 2.59929 15.5789 2.22449Z"
|
|
230
|
-
fill="black"
|
|
231
|
-
/>
|
|
232
|
-
</g>
|
|
233
|
-
</svg>
|
|
234
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('secondary_button_text')">{{
|
|
235
|
-
s.secondary_button_text
|
|
236
|
-
}}</span>
|
|
237
|
-
</a>
|
|
238
|
-
</div>
|
|
239
|
-
</div>
|
|
99
|
+
<div v-else-if="variant === 'button-group-dark'" class="blog-btn-row dark">
|
|
100
|
+
<a
|
|
101
|
+
:href="editorMode ? undefined : primaryUrl"
|
|
102
|
+
class="blog-btn dark"
|
|
103
|
+
:class="{ disabled: editorMode }"
|
|
104
|
+
v-bind="editableAttrs('button_text')"
|
|
105
|
+
>
|
|
106
|
+
{{ s.button_text }}
|
|
107
|
+
</a>
|
|
108
|
+
<a
|
|
109
|
+
:href="editorMode ? undefined : secondaryUrl"
|
|
110
|
+
class="blog-btn green cart"
|
|
111
|
+
:class="{ disabled: editorMode }"
|
|
112
|
+
v-bind="editableAttrs('secondary_button_text')"
|
|
113
|
+
>
|
|
114
|
+
{{ s.secondary_button_text }}
|
|
115
|
+
</a>
|
|
240
116
|
</div>
|
|
241
117
|
</template>
|
|
242
118
|
|
|
243
119
|
<style scoped>
|
|
244
|
-
.blog-
|
|
120
|
+
.blog-btn{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;font-size:16px;font-weight:700;gap:8px;height:60px;justify-content:center;line-height:24px;min-width:270px;text-decoration:none}.blog-btn:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.disabled{pointer-events:none}.blog-btn:before{background-color:currentColor;content:"";flex:0 0 16px;height:16px;mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;width:16px}.blog-btn.cart:before{mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg)}.blog-btn.black{background:#000;color:#fff}.blog-btn.black:hover{background:rgba(0,0,0,.8)}.blog-btn.green{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.blog-btn.green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.dark{background:#000;border:1px solid #fff;color:#fff}.blog-btn.dark:hover{background:#fff;color:#000}.blog-btn-row{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.blog-btn-row.dark{background:#000;border-radius:20px;gap:16px;padding:40px 16px}.blog-btn-note{align-items:center;color:#666262;display:flex;font-size:14px;font-weight:500;gap:6px;justify-content:center;line-height:20px;margin-top:16px}@media (min-width:768px){.blog-btn{min-width:220px}.blog-btn.green{min-width:260px}.blog-btn-row{flex-direction:row;gap:24px}.blog-btn-row.dark{gap:24px}.blog-btn-note{margin-top:20px}}.blog-icon-17{height:17px;width:17px}
|
|
245
121
|
</style>
|
|
@@ -39,33 +39,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
<template>
|
|
42
|
-
<div class="blog-qa-
|
|
43
|
-
<div class="blog-qa-
|
|
44
|
-
|
|
45
|
-
<svg
|
|
46
|
-
width="20"
|
|
47
|
-
height="20"
|
|
48
|
-
viewBox="0 0 20 20"
|
|
49
|
-
fill="none"
|
|
50
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
-
>
|
|
52
|
-
<g clip-path="url(#faq-clip0)">
|
|
53
|
-
<path
|
|
54
|
-
d="M10 0.9375C4.995 0.9375 0.9375 4.995 0.9375 10L0.939583 10.1971C0.970862 11.7478 1.40154 13.2643 2.19 14.6L2.2975 14.7771L1.76417 16.2446L1.73583 16.3308C1.52417 17.1 1.92333 17.8767 2.64833 18.14L2.74667 18.1721C2.87917 18.2096 3.01625 18.2292 3.15417 18.2292L6.20125 18.2296L6.04542 18.1562C7.27779 18.7544 8.63012 19.0643 10 19.0625C15.005 19.0625 19.0625 15.005 19.0625 10C19.0625 4.995 15.005 0.9375 10 0.9375Z"
|
|
55
|
-
fill="#1FB04F"
|
|
56
|
-
/>
|
|
57
|
-
<path
|
|
58
|
-
d="M10 12.846C9.77992 12.846 9.56886 12.9334 9.41325 13.089C9.25763 13.2446 9.17021 13.4557 9.17021 13.6758C9.17021 13.8958 9.25763 14.1069 9.41325 14.2625C9.56886 14.4181 9.77992 14.5056 10 14.5056C10.2201 14.5056 10.4311 14.4181 10.5867 14.2625C10.7424 14.1069 10.8298 13.8958 10.8298 13.6758C10.8298 13.4557 10.7424 13.2446 10.5867 13.089C10.4311 12.9334 10.2201 12.846 10 12.846ZM10.0008 5.49514C9.26375 5.49514 8.56708 5.77555 8.03875 6.28472C7.76853 6.5439 7.55376 6.85525 7.40743 7.19989C7.26111 7.54454 7.18629 7.9153 7.1875 8.28972V8.4318L7.19041 8.47764C7.17499 8.56833 7.17912 8.66126 7.20253 8.75022C7.22593 8.83919 7.26807 8.92212 7.32613 8.99348C7.38418 9.06484 7.45681 9.12297 7.53915 9.16399C7.62149 9.205 7.71164 9.22795 7.80357 9.23131C7.8955 9.23466 7.98708 9.21834 8.07219 9.18343C8.1573 9.14852 8.23397 9.09583 8.29707 9.02889C8.36016 8.96195 8.40823 8.88231 8.43806 8.79528C8.46788 8.70826 8.47877 8.61588 8.47 8.52431L8.47833 8.45764L8.47958 8.29014L8.48166 8.21347C8.52333 7.48306 9.19083 6.89931 10.0008 6.89931C10.8408 6.89931 11.5221 7.52556 11.5221 8.28972C11.5221 8.80097 11.2096 9.27389 10.7154 9.51597L10.5362 9.59764C10.1943 9.76873 9.9069 10.0318 9.70625 10.3572C9.47583 10.726 9.35333 11.1697 9.35333 11.6251V12.0268L9.35625 12.0664C9.37958 12.1926 9.47625 12.2806 9.59291 12.2806H10.4054L10.4442 12.2768C10.5014 12.2648 10.5527 12.2333 10.5893 12.1877C10.6259 12.1421 10.6456 12.0853 10.645 12.0268V11.6026L10.6479 11.5335C10.6704 11.2347 10.8508 10.9693 11.105 10.8618C11.611 10.6485 12.0429 10.2907 12.3466 9.83323C12.6503 9.37574 12.8124 8.83885 12.8125 8.28972C12.8144 7.91532 12.7399 7.54447 12.5938 7.19976C12.4477 6.85505 12.2329 6.54371 11.9625 6.28472C11.4367 5.77566 10.7327 5.4923 10.0008 5.49514Z"
|
|
59
|
-
fill="white"
|
|
60
|
-
/>
|
|
61
|
-
</g>
|
|
62
|
-
<defs>
|
|
63
|
-
<clipPath id="faq-clip0">
|
|
64
|
-
<rect width="20" height="20" fill="white" />
|
|
65
|
-
</clipPath>
|
|
66
|
-
</defs>
|
|
67
|
-
</svg>
|
|
68
|
-
<h2 class="blog-qa-card3-title" v-bind="editableAttrs('title')">
|
|
42
|
+
<div class="blog-qa-card2">
|
|
43
|
+
<div class="blog-qa-card2-header">
|
|
44
|
+
<h2 class="blog-qa-card2-title" v-bind="editableAttrs('title')">
|
|
69
45
|
{{ title }}
|
|
70
46
|
</h2>
|
|
71
47
|
</div>
|
|
@@ -73,17 +49,17 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
73
49
|
<div
|
|
74
50
|
v-for="(item, index) in items"
|
|
75
51
|
:key="blockOrder[index]"
|
|
76
|
-
:class="index === items.length - 1 ? 'blog-qa-
|
|
52
|
+
:class="index === items.length - 1 ? 'blog-qa-card2-item-last' : 'blog-qa-card2-item'"
|
|
77
53
|
>
|
|
78
|
-
<h3 class="blog-qa-
|
|
54
|
+
<h3 class="blog-qa-card2-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
|
|
79
55
|
{{ item.settings.question }}
|
|
80
56
|
</h3>
|
|
81
57
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
-
<div class="blog-qa-
|
|
58
|
+
<div class="blog-qa-card2-answer" v-bind="blockEditableAttrs(blockOrder[index], 'answer')" v-html="item.settings.answer" />
|
|
83
59
|
</div>
|
|
84
60
|
</div>
|
|
85
61
|
</template>
|
|
86
62
|
|
|
87
63
|
<style scoped>
|
|
88
|
-
.blog-qa-
|
|
64
|
+
.blog-qa-card2{background:#f8fffb;border-radius:10px;font-size:14px;margin-top:40px;padding:28px 16px}.blog-qa-card2-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-qa-card2-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bb8010e4ebd03eb9/faq.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:20px;width:20px}.blog-qa-card2-title{color:#1fb04f;font-size:18px;font-weight:700;margin:0}.blog-qa-card2-item{margin-bottom:16px}.blog-qa-card2-item-last{margin-bottom:0}.blog-qa-card2-question{font-weight:700;margin:0 0 6px}.blog-qa-card2-answer{line-height:1.625;margin:0}@media (min-width:768px){.blog-qa-card2{border-radius:15px;font-size:16px;padding:28px 20px}.blog-qa-card2-title{font-size:20px}.blog-qa-card2-item{margin-bottom:24px}.blog-qa-card2-question{margin-bottom:12px}}
|
|
89
65
|
</style>
|
|
@@ -37,14 +37,13 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
37
37
|
</script>
|
|
38
38
|
|
|
39
39
|
<template>
|
|
40
|
-
|
|
41
|
-
<div :class="isDark ? 'blog-features-card-dark' : 'blog-features-card'">
|
|
40
|
+
<div class="blog-features-card" :class="{ dark: isDark }">
|
|
42
41
|
<div class="blog-features-card-content">
|
|
43
42
|
<h2 class="blog-features-card-title" v-bind="editableAttrs('title')">
|
|
44
43
|
{{ s.title }}
|
|
45
44
|
</h2>
|
|
46
45
|
|
|
47
|
-
<ul
|
|
46
|
+
<ul class="blog-features-card-list">
|
|
48
47
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
49
48
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
50
49
|
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
@@ -53,26 +52,12 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
53
52
|
|
|
54
53
|
<a
|
|
55
54
|
:href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
|
|
56
|
-
:class="isDark ? 'blog-
|
|
55
|
+
:class="isDark ? 'blog-btn green inverse' : 'blog-btn green'"
|
|
57
56
|
target="_blank"
|
|
58
57
|
rel="noopener noreferrer"
|
|
58
|
+
v-bind="editableAttrs('button_text')"
|
|
59
59
|
>
|
|
60
|
-
|
|
61
|
-
<svg
|
|
62
|
-
width="16"
|
|
63
|
-
height="16"
|
|
64
|
-
viewBox="0 0 16 16"
|
|
65
|
-
fill="none"
|
|
66
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
-
>
|
|
68
|
-
<path
|
|
69
|
-
d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
|
|
70
|
-
fill="currentColor"
|
|
71
|
-
/>
|
|
72
|
-
</svg>
|
|
73
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
|
|
74
|
-
s.button_text
|
|
75
|
-
}}</span>
|
|
60
|
+
{{ s.button_text }}
|
|
76
61
|
</a>
|
|
77
62
|
</div>
|
|
78
63
|
|
|
@@ -87,5 +72,5 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
87
72
|
</template>
|
|
88
73
|
|
|
89
74
|
<style scoped>
|
|
90
|
-
.blog-features-card{
|
|
75
|
+
.blog-features-card{align-items:center;background:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.blog-features-card.dark{background:#2e2e2e;color:#fff}.blog-features-card-content{max-width:426px}.blog-features-card-title{font-size:18px;font-weight:700;margin:0 0 16px;text-align:center}.blog-features-card-list{color:#666262;font-size:14px;font-weight:300;list-style-position:outside;list-style-type:disc;margin:0 0 20px;padding-left:16px}.blog-features-card.dark .blog-features-card-list{color:inherit}.blog-features-card-list li+li{margin-top:8px}.blog-btn{align-items:center;border-radius:40px;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:8px;height:60px;justify-content:center;line-height:24px;margin:0 auto;min-width:270px;text-decoration:none}.blog-btn:before{background-color:currentColor;content:"";flex:0 0 16px;height:16px;mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;width:16px}.blog-btn.green{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.blog-btn.green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.green.inverse{color:#fff}.blog-features-card-image-wrapper{max-width:411px}.blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:768px){.blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.blog-features-card-title{font-size:20px;text-align:left}.blog-features-card-list{margin-bottom:28px}.blog-btn{margin:0;min-width:260px}.blog-features-card-image{border-radius:20px;min-height:239px}}@media (max-width:767px){.blog-btn{margin-left:auto;margin-right:auto;width:-moz-fit-content;width:fit-content}}
|
|
91
76
|
</style>
|
|
@@ -35,34 +35,15 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<template>
|
|
38
|
-
<!-- tips 变体: blog-note-style -->
|
|
38
|
+
<!-- tips/note 变体: blog-note-style -->
|
|
39
39
|
<div
|
|
40
|
-
v-if="variant === 'tips'"
|
|
40
|
+
v-if="variant === 'tips' || variant === 'note'"
|
|
41
41
|
class="blog-note-style"
|
|
42
|
+
:class="{ note: variant === 'note' }"
|
|
42
43
|
>
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</div>
|
|
47
|
-
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
48
|
-
<div
|
|
49
|
-
v-for="id in blockOrder"
|
|
50
|
-
:key="id"
|
|
51
|
-
class="blog-note-style-text"
|
|
52
|
-
v-bind="blockEditableAttrs(id, 'text')"
|
|
53
|
-
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
54
|
-
/>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<!-- note 变体: blog-note-style2 -->
|
|
58
|
-
<div
|
|
59
|
-
v-else-if="variant === 'note'"
|
|
60
|
-
class="blog-note-style2"
|
|
61
|
-
>
|
|
62
|
-
<div class="blog-note-style-badge">
|
|
63
|
-
<img src="https://cdn.visiva.ai/blog/temp/note.png" alt="Note" class="blog-note-style-badge-icon">
|
|
64
|
-
<span class="blog-note-style-badge-text">{{ title || 'Tips' }}</span>
|
|
65
|
-
</div>
|
|
44
|
+
<span class="blog-note-style-badge">
|
|
45
|
+
{{ variant === 'note' ? title || 'Tips' : 'Tips' }}
|
|
46
|
+
</span>
|
|
66
47
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
67
48
|
<div
|
|
68
49
|
v-for="id in blockOrder"
|
|
@@ -79,11 +60,6 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
79
60
|
class="blog-note-style3"
|
|
80
61
|
>
|
|
81
62
|
<div class="blog-note-style3-header">
|
|
82
|
-
<!-- #info -->
|
|
83
|
-
<svg class="blog-note-style3-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
|
-
<path d="M11 0.5C16.799 0.5 21.5 5.20101 21.5 11C21.5 16.799 16.799 21.5 11 21.5C5.20101 21.5 0.5 16.799 0.5 11C0.5 5.20101 5.20101 0.5 11 0.5Z" fill="white" stroke="#CDD2D7" />
|
|
85
|
-
<path d="M12.5847 7.37917C12.9571 7.39087 13.3202 7.27513 13.5986 7.05598C13.8657 6.84097 14 6.5525 14 6.19058C14 5.82733 13.8657 5.53887 13.5986 5.32386C13.3242 5.10586 12.9653 4.99007 12.5968 5.00067C12.2282 4.99007 11.8693 5.10586 11.5949 5.32386C11.3278 5.53887 11.1935 5.82733 11.1935 6.18925C11.1935 6.5525 11.3278 6.84097 11.5949 7.05598C11.8654 7.27259 12.22 7.38837 12.5847 7.37917ZM12.8684 14.8913C12.8684 14.8071 12.8759 14.6963 12.891 14.5574C12.9061 14.4185 12.9061 14.2863 12.891 14.1608L11.6416 15.4335C11.5164 15.559 11.3851 15.6565 11.2524 15.7259C11.1181 15.7954 11.0049 15.8168 10.9114 15.7887C10.7695 15.7326 10.7061 15.6351 10.7227 15.4962L12.7974 9.71627C12.8744 9.3263 12.805 8.99243 12.5847 8.71465C12.3644 8.43687 12.0113 8.26993 11.524 8.21384C10.9732 8.2272 10.3727 8.43286 9.71935 8.8295C9.06752 9.22614 8.49717 9.73096 8.01132 10.3426V10.6551C7.99623 10.7953 7.99623 10.9276 8.01132 11.0531L9.25915 9.77903C9.38589 9.65483 9.51565 9.55734 9.64843 9.48656C9.78423 9.41712 9.88985 9.39708 9.96831 9.42513C10.1252 9.49324 10.1796 9.60542 10.1328 9.759L8.08072 15.5176C8.02381 15.673 8.00918 15.838 8.03802 15.9993C8.06686 16.1606 8.13837 16.3136 8.2467 16.4458C8.46699 16.7182 8.85175 16.9025 9.40249 17C10.1871 16.9866 10.848 16.7837 11.3821 16.3937C11.9593 15.9612 12.4603 15.4548 12.8684 14.8913Z" fill="#121212" />
|
|
86
|
-
</svg>
|
|
87
63
|
<h3 class="blog-note-style3-title" v-bind="editableAttrs('title')">
|
|
88
64
|
{{ title || 'Note' }}
|
|
89
65
|
</h3>
|
|
@@ -100,5 +76,5 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
100
76
|
</template>
|
|
101
77
|
|
|
102
78
|
<style scoped>
|
|
103
|
-
.blog-note-style{
|
|
79
|
+
.blog-note-style{background:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.blog-note-style-badge{align-items:center;background:#02a967;border-radius:5px 0 10px 0;color:#fff;display:flex;font-size:14px;font-weight:700;gap:4px;height:24px;left:0;padding:0 8px;position:absolute;top:0}.blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/idea.png);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:14px;width:14px}.blog-note-style.note .blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/note.png)}.blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}.blog-note-style3{background:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.blog-note-style3-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/94606ff0f6690ec6/info.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:22px;width:22px}.blog-note-style3-title{color:#000;font-weight:600;margin:0}.blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}@media (min-width:768px){.blog-note-style{padding:36px 16px 20px}.blog-note-style-text{font-size:16px}.blog-note-style3{border-radius:15px;padding:24px}.blog-note-style3-text{font-size:16px}}
|
|
104
80
|
</style>
|
|
@@ -39,22 +39,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
39
39
|
<template>
|
|
40
40
|
<div class="blog-pros-cons">
|
|
41
41
|
<!-- Pros -->
|
|
42
|
-
<div v-if="prosBlocks.length > 0" class="blog-pros-cons-card">
|
|
42
|
+
<div v-if="prosBlocks.length > 0" class="blog-pros-cons-card pros">
|
|
43
43
|
<div class="blog-pros-cons-header">
|
|
44
|
-
<!-- #like -->
|
|
45
|
-
<svg
|
|
46
|
-
width="28"
|
|
47
|
-
height="28"
|
|
48
|
-
viewBox="0 0 28 28"
|
|
49
|
-
fill="none"
|
|
50
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
-
>
|
|
52
|
-
<circle cx="14" cy="14" r="13" fill="#02A967" />
|
|
53
|
-
<path
|
|
54
|
-
d="M8.70457 11.3571C8.8854 11.3571 9.05883 11.4324 9.1867 11.5664C9.31456 11.7003 9.3864 11.882 9.3864 12.0714V20.2857C9.3864 20.4752 9.31456 20.6568 9.1867 20.7908C9.05883 20.9247 8.8854 21 8.70457 21H8.1932C7.87674 21 7.57325 20.8683 7.34948 20.6339C7.12571 20.3995 7 20.0815 7 19.75V12.6071C7 12.2756 7.12571 11.9577 7.34948 11.7233C7.57325 11.4888 7.87674 11.3571 8.1932 11.3571H8.70457ZM15.1871 6C15.5491 6 15.8963 6.15066 16.1523 6.41884C16.4083 6.68701 16.5521 7.05074 16.5521 7.43V10.6429C16.5521 10.8323 16.6239 11.014 16.7518 11.1479C16.8796 11.2819 17.0531 11.3571 17.2339 11.3571H19.9527C20.2711 11.357 20.5852 11.4347 20.8699 11.5841C21.1546 11.7334 21.4021 11.9503 21.5927 12.2175C21.7833 12.4847 21.9118 12.7948 21.968 13.1232C22.0241 13.4515 22.0063 13.789 21.916 14.1089L20.399 19.4661C20.2733 19.9092 20.0143 20.298 19.6605 20.5744C19.3068 20.8509 18.8773 21.0001 18.436 21H11.0917C11.0021 21 10.9134 20.9816 10.8306 20.9457C10.7478 20.9099 10.6726 20.8573 10.6092 20.7909C10.5458 20.7246 10.4955 20.6459 10.4612 20.5592C10.4269 20.4725 10.4092 20.3796 10.4091 20.2857V12.0714C10.4091 11.882 10.481 11.7003 10.6088 11.5664C10.7367 11.4324 10.9101 11.3571 11.091 11.3571H11.4329C11.7266 11.3572 12.0121 11.2556 12.245 11.0681C12.4779 10.8807 12.6452 10.618 12.7209 10.3207L13.4699 7.38143C13.5709 6.98517 13.794 6.63495 14.1045 6.38515C14.415 6.13535 14.7956 5.99996 15.1871 6Z"
|
|
55
|
-
fill="white"
|
|
56
|
-
/>
|
|
57
|
-
</svg>
|
|
58
44
|
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('pros_title')">
|
|
59
45
|
{{ prosTitle }}
|
|
60
46
|
</h3>
|
|
@@ -68,29 +54,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
68
54
|
</div>
|
|
69
55
|
|
|
70
56
|
<!-- Cons -->
|
|
71
|
-
<div v-if="consBlocks.length > 0" class="blog-pros-cons-card">
|
|
57
|
+
<div v-if="consBlocks.length > 0" class="blog-pros-cons-card cons">
|
|
72
58
|
<div class="blog-pros-cons-header">
|
|
73
|
-
<!-- #unlike -->
|
|
74
|
-
<svg
|
|
75
|
-
width="28"
|
|
76
|
-
height="28"
|
|
77
|
-
viewBox="0 0 28 28"
|
|
78
|
-
fill="none"
|
|
79
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
80
|
-
>
|
|
81
|
-
<g clip-path="url(#unlike-clip0)">
|
|
82
|
-
<circle cx="14" cy="14" r="13" fill="#F3455C" />
|
|
83
|
-
<path
|
|
84
|
-
d="M8.70457 16.6429C8.8854 16.6429 9.05883 16.5676 9.1867 16.4336C9.31456 16.2997 9.3864 16.118 9.3864 15.9286V7.71429C9.3864 7.52485 9.31456 7.34317 9.1867 7.20921C9.05883 7.07526 8.8854 7 8.70457 7H8.1932C7.87674 7 7.57325 7.1317 7.34948 7.36612C7.12571 7.60054 7 7.91848 7 8.25V15.3929C7 15.7244 7.12571 16.0423 7.34948 16.2767C7.57325 16.5112 7.87674 16.6429 8.1932 16.6429H8.70457ZM15.1871 22C15.5491 22 15.8963 21.8493 16.1523 21.5812C16.4083 21.313 16.5521 20.9493 16.5521 20.57V17.3571C16.5521 17.1677 16.6239 16.986 16.7518 16.8521C16.8796 16.7181 17.0531 16.6429 17.2339 16.6429H19.9527C20.2711 16.643 20.5852 16.5653 20.8699 16.4159C21.1546 16.2666 21.4021 16.0497 21.5927 15.7825C21.7833 15.5153 21.9118 15.2052 21.968 14.8768C22.0241 14.5485 22.0063 14.211 21.916 13.8911L20.399 8.53393C20.2733 8.09076 20.0143 7.70199 19.6605 7.42557C19.3068 7.14915 18.8773 6.99988 18.436 7H11.0917C11.0021 6.99995 10.9134 7.01839 10.8306 7.05426C10.7478 7.09013 10.6726 7.14274 10.6092 7.20906C10.5458 7.27539 10.4955 7.35415 10.4612 7.44083C10.4269 7.52752 10.4092 7.62044 10.4091 7.71429V15.9286C10.4091 16.118 10.481 16.2997 10.6088 16.4336C10.7367 16.5676 10.9101 16.6429 11.091 16.6429H11.4329C11.7266 16.6428 12.0121 16.7444 12.245 16.9319C12.4779 17.1193 12.6452 17.382 12.7209 17.6793L13.4699 20.6186C13.5709 21.0148 13.794 21.365 14.1045 21.6148C14.415 21.8646 14.7956 22 15.1871 22Z"
|
|
85
|
-
fill="white"
|
|
86
|
-
/>
|
|
87
|
-
</g>
|
|
88
|
-
<defs>
|
|
89
|
-
<clipPath id="unlike-clip0">
|
|
90
|
-
<rect width="28" height="28" fill="white" transform="matrix(1 0 0 -1 0 28)" />
|
|
91
|
-
</clipPath>
|
|
92
|
-
</defs>
|
|
93
|
-
</svg>
|
|
94
59
|
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('cons_title')">
|
|
95
60
|
{{ consTitle }}
|
|
96
61
|
</h3>
|
|
@@ -106,5 +71,5 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
106
71
|
</template>
|
|
107
72
|
|
|
108
73
|
<style scoped>
|
|
109
|
-
.blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.blog-pros-cons-card{background:#f7f8fa;border-radius:10px;flex:1;padding:20px 12px}.blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;margin:0}.blog-pros-cons-list{color:#000;font-size:14px;list-style-position:inside;list-style-type:disc;margin:0;padding:0}.blog-pros-cons-list li+li{margin-top:12px}@media (min-width:768px){.blog-pros-cons{flex-direction:row;gap:24px}.blog-pros-cons-card{border-radius:20px;padding:26px 30px}}
|
|
74
|
+
.blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.blog-pros-cons-card{background:#f7f8fa;border-radius:10px;flex:1;padding:20px 12px}.blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-pros-cons-header:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:28px;width:28px}.blog-pros-cons-card.pros .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bad8fe2f52dffa98/pros.svg)}.blog-pros-cons-card.cons .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/fe7765e509abfda1/cons.svg)}.blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;margin:0}.blog-pros-cons-list{color:#000;font-size:14px;list-style-position:inside;list-style-type:disc;margin:0;padding:0}.blog-pros-cons-list li+li{margin-top:12px}@media (min-width:768px){.blog-pros-cons{flex-direction:row;gap:24px}.blog-pros-cons-card{border-radius:20px;padding:26px 30px}}
|
|
110
75
|
</style>
|
|
@@ -58,22 +58,22 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
58
58
|
</div>
|
|
59
59
|
</div>
|
|
60
60
|
|
|
61
|
-
<!-- blog-qa-
|
|
61
|
+
<!-- blog-qa-card: titled -->
|
|
62
62
|
<template v-else-if="variant === 'titled'">
|
|
63
|
-
<h2 class="blog-qa-
|
|
63
|
+
<h2 class="blog-qa-title">
|
|
64
64
|
{{ s.title }}
|
|
65
65
|
</h2>
|
|
66
|
-
<p v-if="s.intro" class="blog-qa-
|
|
66
|
+
<p v-if="s.intro" class="blog-qa-intro">
|
|
67
67
|
{{ s.intro }}
|
|
68
68
|
</p>
|
|
69
|
-
<div class="blog-qa-
|
|
69
|
+
<div class="blog-qa-card">
|
|
70
70
|
<div
|
|
71
71
|
v-for="(item, index) in items"
|
|
72
72
|
:key="blockOrder[index]"
|
|
73
73
|
:class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
|
|
74
74
|
>
|
|
75
75
|
<h3
|
|
76
|
-
class="blog-qa-question
|
|
76
|
+
class="blog-qa-question"
|
|
77
77
|
v-bind="blockEditableAttrs(blockOrder[index], 'question')"
|
|
78
78
|
>
|
|
79
79
|
{{ item.settings.question }}
|
|
@@ -86,5 +86,5 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
86
86
|
</template>
|
|
87
87
|
|
|
88
88
|
<style scoped>
|
|
89
|
-
.blog-qa-card{background:#f7f8fa;border-radius:10px;font-size:14px;margin-top:40px;padding:20px 16px}.blog-qa-item{margin-bottom:24px}.blog-qa-item-last{margin-bottom:0}.blog-qa-question
|
|
89
|
+
.blog-qa-card{background:#f7f8fa;border-radius:10px;font-size:14px;margin-top:40px;padding:20px 16px}.blog-qa-item{margin-bottom:24px}.blog-qa-item-last{margin-bottom:0}.blog-qa-question{font-weight:600;margin:0 0 8px}.blog-qa-answer{color:#666262;line-height:1.625;margin:0}.blog-qa-answer :deep(span){color:#000;font-weight:600}.blog-qa-title{font-size:24px;font-weight:700;margin-bottom:0;margin-top:40px}.blog-qa-intro{font-size:14px;margin-top:20px}@media (min-width:768px){.blog-qa-card{border-radius:20px;font-size:16px;padding:24px 20px}.blog-qa-title{font-size:28px}.blog-qa-intro{font-size:16px}}
|
|
90
90
|
</style>
|
|
@@ -40,15 +40,12 @@ const { editableAttrs } = useInlineEdit({
|
|
|
40
40
|
{{ s.title }}
|
|
41
41
|
</h3>
|
|
42
42
|
<div class="blog-quote-text" v-html="renderedContent" />
|
|
43
|
-
<
|
|
44
|
-
<span
|
|
45
|
-
|
|
46
|
-
by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span>
|
|
47
|
-
</p>
|
|
48
|
-
</div>
|
|
43
|
+
<p v-if="s.attribution" class="blog-quote-author">
|
|
44
|
+
_____ by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span>
|
|
45
|
+
</p>
|
|
49
46
|
</div>
|
|
50
47
|
</template>
|
|
51
48
|
|
|
52
49
|
<style scoped>
|
|
53
|
-
.blog-quote{background:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.blog-quote-title{font-size:16px;font-weight:600;margin:0 0 16px}.blog-quote-text{font-size:12px;font-style:italic;line-height:1.625;margin:0 0 8px}.blog-quote-
|
|
50
|
+
.blog-quote{background:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.blog-quote-title{font-size:16px;font-weight:600;margin:0 0 16px}.blog-quote-text{font-size:12px;font-style:italic;line-height:1.625;margin:0 0 8px}.blog-quote-author{color:#666262;font-size:12px;margin:0}@media (min-width:768px){.blog-quote{border-radius:20px;padding:30px 28px}.blog-quote-title{font-size:20px}.blog-quote-text{font-size:14px;margin-bottom:16px}.blog-quote-author{font-size:14px}}
|
|
54
51
|
</style>
|
|
@@ -92,16 +92,16 @@ const expanded = ref(false)
|
|
|
92
92
|
</div>
|
|
93
93
|
</div>
|
|
94
94
|
|
|
95
|
-
<!-- blog-table
|
|
95
|
+
<!-- blog-table: collapsible -->
|
|
96
96
|
<div v-else-if="variant === 'collapsible'" class="blog-table-scroll">
|
|
97
|
-
<div class="blog-table-
|
|
97
|
+
<div class="blog-table-wrapper collapsible" :class="{ expanded }">
|
|
98
98
|
<div
|
|
99
|
-
class="blog-table-
|
|
100
|
-
:class="{
|
|
99
|
+
class="blog-table-content"
|
|
100
|
+
:class="{ expanded }"
|
|
101
101
|
>
|
|
102
102
|
<table class="blog-table">
|
|
103
103
|
<thead>
|
|
104
|
-
<tr class="blog-table-
|
|
104
|
+
<tr class="blog-table-header">
|
|
105
105
|
<th
|
|
106
106
|
v-for="(col, idx) in columns"
|
|
107
107
|
:key="idx"
|
|
@@ -116,16 +116,16 @@ const expanded = ref(false)
|
|
|
116
116
|
</tr>
|
|
117
117
|
</thead>
|
|
118
118
|
<tbody>
|
|
119
|
-
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-
|
|
119
|
+
<tr v-for="(row, rowIdx) in rows" :key="rowIdx" class="blog-table-row">
|
|
120
120
|
<td
|
|
121
121
|
v-for="(cell, cellIdx) in row"
|
|
122
122
|
:key="cellIdx"
|
|
123
123
|
:class="
|
|
124
124
|
cellIdx === 0
|
|
125
|
-
? 'blog-table-
|
|
125
|
+
? 'blog-table-cell-first'
|
|
126
126
|
: cellIdx === row.length - 1
|
|
127
|
-
? 'blog-table-
|
|
128
|
-
: 'blog-table-
|
|
127
|
+
? 'blog-table-cell-last'
|
|
128
|
+
: 'blog-table-cell'
|
|
129
129
|
"
|
|
130
130
|
v-html="cell"
|
|
131
131
|
/>
|
|
@@ -133,27 +133,19 @@ const expanded = ref(false)
|
|
|
133
133
|
</tbody>
|
|
134
134
|
</table>
|
|
135
135
|
</div>
|
|
136
|
-
<div
|
|
137
|
-
<button
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
145
|
-
>
|
|
146
|
-
<path
|
|
147
|
-
d="M10.884 17.3698L10.944 17.4348C11.0833 17.5742 11.2487 17.6847 11.4308 17.7602C11.6129 17.8356 11.808 17.8745 12.005 17.8745C12.2021 17.8745 12.3972 17.8356 12.5793 17.7602C12.7613 17.6847 12.9267 17.5742 13.066 17.4348L20.844 9.65678C21.1173 9.37387 21.2685 8.99497 21.2651 8.60167C21.2616 8.20838 21.1039 7.83216 20.8258 7.55405C20.5477 7.27594 20.1714 7.11818 19.7782 7.11477C19.3849 7.11135 19.006 7.26254 18.723 7.53578L12.007 14.2508L5.28205 7.52578C5.14361 7.38258 4.97804 7.26838 4.795 7.18986C4.61195 7.11133 4.4151 7.07005 4.21594 7.06841C4.01677 7.06677 3.81927 7.10482 3.63496 7.18033C3.45065 7.25584 3.28323 7.36729 3.14245 7.5082C3.00168 7.6491 2.89038 7.81663 2.81505 8.00101C2.73971 8.18539 2.70185 8.38293 2.70368 8.5821C2.7055 8.78126 2.74697 8.97807 2.82567 9.16104C2.90437 9.34401 3.01872 9.50947 3.16205 9.64778L10.884 17.3698Z"
|
|
148
|
-
fill="#2C2C2C"
|
|
149
|
-
/>
|
|
150
|
-
</svg>
|
|
151
|
-
</button>
|
|
136
|
+
<div class="blog-table-overlay">
|
|
137
|
+
<button
|
|
138
|
+
class="blog-table-toggle"
|
|
139
|
+
type="button"
|
|
140
|
+
aria-label="Toggle table"
|
|
141
|
+
:aria-expanded="expanded"
|
|
142
|
+
@click="expanded = !expanded"
|
|
143
|
+
/>
|
|
152
144
|
</div>
|
|
153
145
|
</div>
|
|
154
146
|
</div>
|
|
155
147
|
</template>
|
|
156
148
|
|
|
157
149
|
<style scoped>
|
|
158
|
-
.blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;margin-top:40px;min-width:0;overflow-x:auto;text-align:center}.blog-table{border-collapse:collapse;min-width:800px;width:100%}.blog-table-header{background:#292929;color:#fff;font-size:18px}.blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.blog-table-header-cell-last{font-size:14px;font-weight:600;padding:17px 16px}.blog-table-row{background:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.blog-table-cell
|
|
150
|
+
.blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;margin-top:40px;min-width:0;overflow-x:auto;text-align:center}.blog-table{border-collapse:collapse;min-width:800px;width:100%}.blog-table-header{background:#292929;color:#fff;font-size:18px}.blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.blog-table-header-cell-last{font-size:14px;font-weight:600;padding:17px 16px}.blog-table-row{background:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;transition:background-color .2s ease}.blog-table-row:hover .blog-table-cell,.blog-table-row:hover .blog-table-cell-first,.blog-table-row:hover .blog-table-cell-last{background:#f7fff9}.blog-table-cell,.blog-table-cell-first{border-right:1px solid #d9d9d9;padding:17px 16px}.blog-table-cell-first{background:#f4f4f4;font-size:15px}.blog-table-cell-last{font-size:14px;padding:17px 16px}.blog-table-wrapper.collapsible{background:#fff;overflow:hidden;position:relative}.blog-table-content{max-height:500px;min-width:0;overflow-y:hidden;position:relative;transition:max-height .3s ease-in-out}.blog-table-content.expanded{max-height:3000px;padding-bottom:80px}.blog-table-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.blog-table-wrapper.collapsible.expanded .blog-table-overlay{background:transparent;bottom:0;height:80px;pointer-events:none}.blog-table-toggle{align-items:center;background:#fff;border:1px solid #d4d4d4;border-radius:50%;box-shadow:0 4px 14.1px 0 rgba(0,0,0,.13);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;margin-left:-25px;position:absolute;transform:translateY(-50%);transition:all .3s;width:50px;z-index:10}.blog-table-toggle:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/2458f67aa6069b33/arrow.down.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;height:20px;transition:transform .3s ease;width:20px}.blog-table-toggle:hover{background:#f2f4f3;border-color:#bfc7c2}.blog-table-wrapper.collapsible.expanded .blog-table-toggle{bottom:16px;pointer-events:auto;transform:none}.blog-table-wrapper.collapsible.expanded .blog-table-toggle:before{transform:rotate(180deg)}.blog-table :deep(a){color:#1fb04f;font-weight:400}
|
|
159
151
|
</style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "../utilities.css";.article-content--visiva p{color:#1a1a1a;font-size:16px;line-height:1.7;margin-top:10px}.article-content--visiva a{color:#1fb04f;transition:all .3s ease}.article-content--visiva a:hover{text-decoration:underline}.article-content--visiva .font-bold,.article-content--visiva b,.article-content--visiva strong{font-weight:700}.article-content--visiva .underline{text-decoration:underline}.article-content--visiva>h2{font-size:30px;font-weight:900;line-height:1.2;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:24px;font-weight:900;line-height:1.2;margin-top:16px}.article-content--visiva ul{margin-top:10px}.article-content--visiva .disc-list{font-size:14px;line-height:1.8;list-style-type:disc;margin-top:10px;padding-left:20px}.article-content--visiva>img:not(.hot-icon):not(.icon):not([width]):not([height]){border-radius:24px;display:block;margin:10px auto 30px;max-width:100%}.article-content--visiva .article-custom-html__sized-image{border-radius:24px;display:block;margin:10px auto 30px}.article-content--visiva .btn{align-items:center;border:none;border-radius:40px;box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:60px;justify-content:center;line-height:24px;margin:20px auto 30px;min-width:220px;padding:10px 20px;text-decoration:none;transition:all .3s ease}.article-content--visiva .btn.btn-primary{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.article-content--visiva .btn.btn-primary:hover{opacity:.9}.article-content--visiva .btn.outline-btn{background:#fff;border:2px solid #1fb04f;color:#1fb04f}.article-content--visiva .btn.outline-btn:hover{background:#1fb04f;color:#fff}.article-content--visiva .btn-group{align-items:center;display:flex;gap:24px;justify-content:center;margin-bottom:30px}.article-content--visiva .btn-group .btn{margin:0}.article-content--visiva .contrast-table{border:1px solid #d4d4d4;border-radius:20px;margin-top:40px;overflow:hidden}.article-content--visiva .contrast-table table{border-collapse:collapse;min-width:600px;width:100%}.article-content--visiva .contrast-table thead tr{background:#292929;color:#fff}.article-content--visiva .contrast-table th{font-size:14px;font-weight:600;padding:17px 16px}.article-content--visiva .contrast-table td{border-top:1px solid #d9d9d9;font-size:14px;padding:17px 16px}.article-content--visiva .sticky-table{overflow-x:auto}@media (max-width:768px){.article-content--visiva p{font-size:14px}.article-content--visiva>h2{font-size:22px;margin-bottom:16px;margin-top:16px}.article-content--visiva>h3{font-size:18px}.article-content--visiva .btn-group{flex-direction:column;gap:10px}.article-content--visiva>img:not(.hot-icon):not(.icon){max-width:100%}}.article-content--visiva .blog-paragraph,.article-content--visiva .blog-paragraph-normal{margin-top:20px}.article-content--visiva .blog-paragraph-large{font-size:20px;margin-top:40px}.article-content--visiva .blog-paragraph-highlight{color:var(--primary-1000,#1fb04f);text-decoration:underline}.article-content--visiva .blog-paragraph-bg-highlight{background-color:#ecffb9}.article-content--visiva .blog-paragraph-bold{font-weight:700}@media (max-width:640px){.article-content--visiva .blog-paragraph{font-size:14px}}.article-content--visiva .blog-intro-text{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-intro-list{font-weight:300;list-style-position:inside;list-style-type:disc;padding-left:20px}.article-content--visiva .blog-intro-list-item{margin-top:8px}.article-content--visiva .blog-intro-text-secondary{font-size:16px;line-height:24px;margin-top:8px}.article-content--visiva .blog-toc{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-toc-title{color:#000;font-size:16px;font-weight:600;line-height:24px}.article-content--visiva .blog-toc-list{color:#000}.article-content--visiva .blog-toc-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.article-content--visiva .blog-toc-numbered-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:decimal;margin-top:8px;padding-left:36px}.article-content--visiva .blog-toc-numbered-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-numbered-list>li{display:list-item;list-style-position:outside;list-style-type:decimal}.article-content--visiva .blog-toc-numbered-item{align-items:center;display:flex;gap:8px}.article-content--visiva .blog-toc-hot-tag-wrapper{align-items:center;display:flex;gap:4px;position:relative}.article-content--visiva .blog-toc-hot-tag-text{color:#fff;font-family:Roboto,sans-serif;font-size:12px;font-style:italic;font-weight:900;line-height:16px;transform:scale(.75);transform-origin:center}.article-content--visiva .blog-toc-icon{flex-shrink:0;height:16px;width:16px}.article-content--visiva .blog-toc-link{color:inherit;text-decoration:none}.article-content--visiva .blog-toc-hot-tag-bg{min-height:12px;min-width:22px;position:absolute;width:100%}.article-content--visiva .blog-h2-style1{font-size:22px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h2-style1-text{margin-top:16px}.article-content--visiva .blog-h2-style2{font-size:22px;font-weight:900;gap:8px;line-height:1;margin-top:16px;padding-left:8px;position:relative}.article-content--visiva .blog-h2-style2-indicator{background-color:#1fb04f;display:block;height:18px;left:0;position:absolute;top:2px;width:4px}.article-content--visiva .blog-h2-style2-link{color:#1fb04f}.article-content--visiva .blog-h3-style1{font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style1-text{margin-top:4px}.article-content--visiva .blog-h3-style1-list{font-size:12px;font-weight:300;line-height:16px;list-style-position:inside;list-style-type:disc;margin-top:16px;padding-left:20px}.article-content--visiva .blog-h3-style1-list>*+*{margin-top:8px}.article-content--visiva .blog-h3-style2{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style2>*+*{margin-left:8px}.article-content--visiva .blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:9999px;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;line-height:28px;transform:translateY(0);width:24px}.article-content--visiva .blog-h3-style3{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style3>*+*{margin-left:4px}.article-content--visiva .blog-h3-style3-badge{background-color:#1fb04f;border-radius:20px;color:#fff;display:inline-block;font-size:16px;font-weight:600;height:22px;line-height:22px;line-height:24px;padding-left:8px;padding-right:8px;transform:translateY(4px)}.article-content--visiva .blog-h3-style4{display:flex;font-size:18px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style4>*+*{margin-left:4px}.article-content--visiva .blog-h3-style4-icon-wrapper{align-items:center;display:inline-flex;flex-shrink:0;font-size:16px;font-weight:500;height:24px;justify-content:center;line-height:24px;position:relative;width:24px}.article-content--visiva .blog-h3-style4-icon{left:0;position:absolute;top:1px}.article-content--visiva .blog-h3-style4-number{color:#000;font-size:16px;font-weight:600;line-height:24px;position:relative;z-index:10}.article-content--visiva .blog-placeholder-image{background-color:#d9d9d9;border-radius:24px;height:300px;margin-top:40px;width:100%}.article-content--visiva .blog-button-single-wrapper{margin-top:40px;text-align:center}.article-content--visiva .blog-button-single{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-single:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-single-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.article-content--visiva .blog-button-group-button-black{align-items:center;background-color:#000;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-black:hover{background-color:rgba(0,0,0,.8)}.article-content--visiva .blog-button-group-button-green{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-button-green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-button-group-text{font-size:16px;font-weight:700;line-height:24px}.article-content--visiva .blog-button-group-note{align-items:center;display:flex;gap:6px;justify-content:center;margin-top:16px}.article-content--visiva .blog-button-group-note-text{color:#666262;font-size:14px;font-weight:500;line-height:20px}.article-content--visiva .blog-button-group-dark{background-color:#000;border-radius:20px;margin-top:40px;padding:40px 16px}.article-content--visiva .blog-button-group-dark-inner{align-items:center;display:flex;flex-direction:column;gap:16px}.article-content--visiva .blog-button-group-dark-button{align-items:center;background-color:#000;border:1px solid #fff;border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-button-group-dark-button:hover{background-color:#fff;color:#000}.article-content--visiva .blog-quote{background-color:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.article-content--visiva .blog-quote-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:16px}.article-content--visiva .blog-quote-text{font-size:12px;font-style:italic;line-height:16px;line-height:1.625;margin-bottom:8px}.article-content--visiva .blog-quote-footer{align-items:flex-end;display:flex;gap:8px}.article-content--visiva .blog-quote-divider{background-color:#666262;display:inline-block;height:1px;margin-bottom:4px;width:48px}.article-content--visiva .blog-quote-author{color:#666262;font-size:12px;line-height:16px}.article-content--visiva .blog-table-wrapper{border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;min-width:0;overflow-x:auto;scrollbar-width:none;text-align:center;-ms-overflow-style:none}.article-content--visiva .blog-table-wrapper::-webkit-scrollbar{display:none}.article-content--visiva .blog-table{border-collapse:collapse;min-width:800px;width:100%}.article-content--visiva .blog-table-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px}.article-content--visiva .blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:17px 16px}.article-content--visiva .blog-table-header-cell:last-child{border-right:none}.article-content--visiva .blog-table-header-cell-last{font-size:14px;font-weight:600;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300}.article-content--visiva .blog-table-cell{border-right:1px solid #d9d9d9;padding:17px 16px}.article-content--visiva .blog-table-cell:last-child{border-right:none}.article-content--visiva .blog-table-cell:hover{font-weight:400}.article-content--visiva .blog-table-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;padding:17px 16px}.article-content--visiva .blog-table-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-cell-last{font-size:14px;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-plus-container{background-color:#fff;border:1px solid #d4d4d4;border-radius:20px;font-size:14px;line-height:20px;margin-top:40px;overflow:hidden;position:relative;text-align:center}.article-content--visiva .blog-table-plus-content{max-height:500px;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none;transition:max-height .3s ease-in-out;-ms-overflow-style:none}.article-content--visiva .blog-table-plus-content::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-plus-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.article-content--visiva .blog-table-plus-toggle{align-items:center;background-color:#fff;border:1px solid #d4d4d4;border-radius:9999px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;position:absolute;transform:translateY(-50%) translateX(-50%);transition:all .3s;width:50px;z-index:10}.article-content--visiva .blog-table-plus-toggle:hover{background-color:#f9fafb}.article-content--visiva .blog-table-plus-header{background-color:#292929;color:#fff;font-size:18px;line-height:28px;position:sticky;top:0;z-index:10}.article-content--visiva .blog-table-plus-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;min-height:80px}.article-content--visiva .blog-table-plus-cell{border-right:1px solid #d9d9d9;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell:last-child{border-right:none}.article-content--visiva .blog-table-plus-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;font-size:15px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-table-plus-cell-first:hover{font-weight:400}.article-content--visiva .blog-table-plus-cell-last{font-size:14px;line-height:20px;min-height:80px;padding:17px 16px}.article-content--visiva .blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.article-content--visiva .blog-pros-cons-card{background-color:#f7f8fa;border-radius:10px;flex:1 1 0%;padding:20px 12px}.article-content--visiva .blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.article-content--visiva .blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-pros-cons-list{color:#000;font-size:14px;line-height:20px;list-style-position:inside;list-style-type:disc}.article-content--visiva .blog-pros-cons-list>*+*{margin-top:12px}.article-content--visiva .blog-step{font-size:16px;font-weight:400;line-height:24px;margin-top:20px}.article-content--visiva .blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.article-content--visiva .blog-step-link{color:#1fb04f;font-weight:900}.article-content--visiva .blog-note-style{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 16px 20px;position:relative}.article-content--visiva .blog-note-style-badge{align-items:center;background-color:#02a967;border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding-left:8px;padding-right:8px;position:absolute;top:0}.article-content--visiva .blog-note-style-badge-text{color:#fff;font-size:14px;font-weight:700;line-height:20px}.article-content--visiva .blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-note-style2{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;padding:36px 12px 20px;position:relative}.article-content--visiva .blog-features-card{align-items:center;background-color:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-content{max-width:426px}.article-content--visiva .blog-features-card-title{font-size:18px;font-weight:700;line-height:28px;margin-bottom:16px;text-align:center}.article-content--visiva .blog-features-card-list{color:#666262;font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-features-card-image-wrapper{max-width:411px}.article-content--visiva .blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--visiva .blog-features-card-dark{align-items:center;background-color:#2e2e2e;border-radius:10px;color:#fff;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.article-content--visiva .blog-features-card-dark-list{font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:20px;padding-left:16px}.article-content--visiva .blog-features-card-dark-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card-dark-button{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#fff;cursor:pointer;display:flex;gap:8px;height:60px;justify-content:center;min-width:270px}.article-content--visiva .blog-features-card-dark-button:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.article-content--visiva .blog-note-style3{background-color:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.article-content--visiva .blog-note-style3-title{color:#000;font-weight:600}.article-content--visiva .blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;line-height:20px}.article-content--visiva .blog-qa-card{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:20px 16px}.article-content--visiva .blog-qa-item{margin-bottom:24px}.article-content--visiva .blog-qa-question{font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-question-black{color:#000;font-weight:600;margin-bottom:8px}.article-content--visiva .blog-qa-answer{color:#666262;line-height:1.625}.article-content--visiva .blog-qa-answer-label{color:#000;font-weight:600}.article-content--visiva .blog-qa-card2-title{font-size:24px;font-weight:700;line-height:32px;margin-top:40px}.article-content--visiva .blog-qa-card2-intro{font-size:14px;line-height:20px;margin-top:20px}.article-content--visiva .blog-qa-card2-container{background-color:#f7f8fa;border-radius:10px;font-size:14px;line-height:20px;margin-top:20px;padding:20px 16px}.article-content--visiva .blog-qa-card3{background-color:#f8fffb;border-radius:10px;font-size:14px;line-height:20px;margin-top:40px;padding:28px 16px}.article-content--visiva .blog-qa-card3-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-qa-card3-title{color:#1fb04f;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-qa-card3-item{margin-bottom:16px}.article-content--visiva .blog-qa-card3-question{font-weight:700;margin-bottom:6px}.article-content--visiva .blog-qa-card3-answer{line-height:1.625}@media (min-width:768px){.article-content--visiva .blog-intro-text,.article-content--visiva .blog-intro-text-secondary{font-size:20px;line-height:28px}.article-content--visiva .blog-toc{border-radius:20px;padding:40px 32px}.article-content--visiva .blog-toc-title{font-size:20px;line-height:28px}.article-content--visiva .blog-h2-style1{font-size:30px}.article-content--visiva .blog-h2-style2{font-size:30px;padding-left:16px}.article-content--visiva .blog-h2-style2-indicator{height:25px;width:5px}.article-content--visiva .blog-h3-style1{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style1-text{margin-top:16px}.article-content--visiva .blog-h3-style1-list{font-size:14px;line-height:20px;margin-top:8px}.article-content--visiva .blog-h3-style2,.article-content--visiva .blog-h3-style3{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style3>*+*{margin-left:12px}.article-content--visiva .blog-h3-style4{font-size:24px;line-height:1}.article-content--visiva .blog-h3-style4>*+*{margin-left:12px}.article-content--visiva .blog-button-single-wrapper{text-align:left}.article-content--visiva .blog-button-single{min-width:220px}.article-content--visiva .blog-button-group{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-button-black{min-width:220px}.article-content--visiva .blog-button-group-button-green{min-width:260px}.article-content--visiva .blog-button-group-note{margin-top:20px}.article-content--visiva .blog-button-group-dark-inner{flex-direction:row;gap:24px}.article-content--visiva .blog-button-group-dark-button{min-width:220px}.article-content--visiva .blog-quote{border-radius:20px;padding:30px 28px}.article-content--visiva .blog-quote-title{font-size:20px;line-height:1}.article-content--visiva .blog-quote-text{font-size:14px;line-height:20px;margin-bottom:16px}.article-content--visiva .blog-quote-author{font-size:14px;line-height:20px}.article-content--visiva .blog-pros-cons{flex-direction:row;gap:24px}.article-content--visiva .blog-pros-cons-card{border-radius:20px;padding:26px 30px}.article-content--visiva .blog-step{font-size:20px;line-height:1}.article-content--visiva .blog-note-style-text{font-size:16px;line-height:24px}.article-content--visiva .blog-note-style2{padding-left:16px;padding-right:16px}.article-content--visiva .blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-title{font-size:20px;line-height:1;text-align:left}.article-content--visiva .blog-features-card-list{margin-bottom:28px}.article-content--visiva .blog-features-card-button{min-width:260px}.article-content--visiva .blog-features-card-image{border-radius:20px;min-height:239px}.article-content--visiva .blog-features-card-dark{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.article-content--visiva .blog-features-card-dark-list{margin-bottom:28px}.article-content--visiva .blog-features-card-dark-button{min-width:260px}.article-content--visiva .blog-note-style3{border-radius:15px;padding:24px}.article-content--visiva .blog-note-style3-text{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card2-title{font-size:28px}.article-content--visiva .blog-qa-card2-intro{font-size:16px;line-height:24px}.article-content--visiva .blog-qa-card2-container{border-radius:20px;font-size:16px;line-height:24px;padding:24px 20px}.article-content--visiva .blog-qa-card3{border-radius:15px;font-size:16px;line-height:24px;padding-left:20px;padding-right:20px}.article-content--visiva .blog-qa-card3-title{font-size:20px;line-height:1}.article-content--visiva .blog-qa-card3-item{margin-bottom:24px}.article-content--visiva .blog-qa-card3-question{margin-bottom:12px}}@media (max-width:640px){.article-content--visiva .blog-h2-style1-text,.article-content--visiva .blog-h3-style1-text,.article-content--visiva .blog-toc-list{font-size:14px;line-height:20px}.article-content--visiva .blog-toc-numbered-list{font-size:12px;line-height:16px}}@media (max-width:768px){.article-content--visiva .blog-h2-style2-text,.article-content--visiva .blog-intro-list{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card-button,.article-content--visiva .blog-features-card-dark-button{margin-left:auto;margin-right:auto}.article-content--visiva .blog-table-scroll{margin-right:-16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:#fff}.article-content--visiva .blog-table-scroll::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-scroll>.blog-table-plus-container,.article-content--visiva .blog-table-scroll>.blog-table-wrapper{margin-right:16px;overflow:hidden;width:-moz-max-content;width:max-content}}
|
|
1
|
+
@import "../utilities.css";.article-content--visiva{--visiva-module-margin:40px 0;--visiva-card-radius:20px;--visiva-card-radius-soft:15px;--visiva-article-gutter:16px;max-width:100%;overflow-wrap:break-word;width:100%}.article-content--visiva p{font-size:16px;line-height:24px;margin:10px 0}.article-content--visiva a{cursor:pointer;transition:color .3s ease,text-decoration-color .3s ease,background-color .3s ease}.article-content--visiva a:hover{color:#1fb04f;text-decoration:underline}.article-content--visiva .font-bold,.article-content--visiva b,.article-content--visiva strong{font-weight:700}.article-content--visiva .underline{text-decoration:underline}.article-content--visiva>h2{font-size:30px;font-weight:900;margin-bottom:16px;margin-top:30px}.article-content--visiva>h3{font-size:24px;font-weight:900;margin:16px 0}.article-content--visiva ul{margin:10px 0}.article-content--visiva>img:not(.hot-icon):not([width]):not([height]){border-radius:var(--visiva-card-radius);display:block;margin:24px 0;max-width:100%}.article-content--visiva .contrast-table{border:1px solid #d4d4d4;border-radius:var(--visiva-card-radius);margin:var(--visiva-module-margin);overflow:hidden}.article-content--visiva .contrast-table table{border-collapse:collapse;min-width:600px;width:100%}.article-content--visiva .contrast-table thead tr{background:#292929;color:#fff}.article-content--visiva .contrast-table th{font-size:14px;font-weight:600;padding:17px 16px}.article-content--visiva .contrast-table td{border-top:1px solid #d9d9d9;font-size:14px;padding:17px 16px}.article-content--visiva .sticky-table{overflow-x:auto}.article-content--visiva .blog-paragraph-highlight{color:var(--primary-1000,#1fb04f);text-decoration:underline}.article-content--visiva .blog-paragraph-bg-highlight{background-color:#ecffb9}.article-content--visiva .blog-intro-list{font-weight:300;list-style-position:inside;list-style-type:disc;padding-left:20px}.article-content--visiva .blog-intro-list-item{margin-top:8px}.article-content--visiva .blog-toc{background-color:#f7f8fa;border-radius:var(--visiva-card-radius);margin:var(--visiva-module-margin);padding:40px 32px}.article-content--visiva .blog-toc-header{align-items:center;display:flex;gap:8px;margin-bottom:8px}.article-content--visiva .blog-toc-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/30dd1b58c6d487c7/arrow-down-fill.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";flex:0 0 20px;height:20px;transition:transform .3s ease;width:20px}.article-content--visiva .blog-toc.blog-toc--collapsed .blog-toc-header:before{transform:rotate(180deg)}.article-content--visiva .blog-toc-title{font-size:20px;font-weight:600}.article-content--visiva .blog-toc-list{margin:0}.article-content--visiva .blog-toc-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-list-item{list-style-position:inside;list-style-type:disc;padding-left:8px}.article-content--visiva .blog-toc-numbered-list{font-size:14px;list-style-position:outside;list-style-type:decimal;margin-top:8px;padding-left:36px}.article-content--visiva .blog-toc-numbered-list>*+*{margin-top:8px}.article-content--visiva .blog-toc-numbered-list>li{display:list-item;list-style-position:outside;list-style-type:decimal}.article-content--visiva .blog-toc-numbered-list>.blog-toc-list-item{padding-left:0}.article-content--visiva .blog-toc-numbered-item{align-items:center;display:inline-flex;gap:8px;vertical-align:middle}.article-content--visiva .blog-toc-list-item.hot:after{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/0ff0daee3ff768c0/hot-icon.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:inline-block;flex:0 0 23px;height:12px;margin-left:8px;vertical-align:-1px;width:23px}.article-content--visiva .blog-h2-style2{gap:8px;line-height:1;padding-left:16px;position:relative}.article-content--visiva .blog-h2-style2:before{background-color:#1fb04f;content:"";display:block;height:25px;left:0;position:absolute;top:2px;width:5px}.article-content--visiva .link{color:#1fb04f}.article-content--visiva .blog-h3-style2{display:flex;font-size:24px;font-weight:900;line-height:1}.article-content--visiva .blog-h3-style2>*+*{margin-left:8px}.article-content--visiva .blog-h3-style2-number{align-items:center;border:1px solid #1fb04f;border-radius:9999px;color:#1fb04f;display:inline-flex;flex-shrink:0;font-size:18px;height:24px;justify-content:center;line-height:28px;transform:translateY(0);width:24px}.article-content--visiva .blog-h3-style3{display:flex;font-size:24px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style3>*+*{margin-left:12px}.article-content--visiva .blog-h3-style3-badge{background-color:#1fb04f;border-radius:20px;color:#fff;display:inline-block;font-size:16px;font-weight:600;height:22px;line-height:22px;padding-left:8px;padding-right:8px;transform:translateY(4px)}.article-content--visiva .blog-h3-style4{display:flex;font-size:24px;font-weight:900;line-height:1;margin-top:16px}.article-content--visiva .blog-h3-style4>*+*{margin-left:12px}.article-content--visiva .blog-h3-style4-number{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/28cff450cf7db118/dotted-circle.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;font-weight:600;height:24px;line-height:1;position:relative;width:24px}.article-content--visiva .blog-btn,.article-content--visiva .blog-h3-style4-number{align-items:center;color:#000;display:inline-flex;font-size:16px;justify-content:center}.article-content--visiva .blog-btn{background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;cursor:pointer;font-weight:700;gap:8px;height:60px;line-height:24px;min-width:220px;text-decoration:none}.article-content--visiva .blog-btn:hover{background:linear-gradient(270deg,#33ff78,#caff33);color:#000;text-decoration:none}.article-content--visiva .blog-btn:before{background-color:currentColor;content:"";flex:0 0 16px;height:16px;mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;width:16px}.article-content--visiva .blog-btn.cart:before{mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg)}.article-content--visiva>.blog-btn{margin-top:25px}.article-content--visiva .blog-btn.black{background:#000;color:#fff;min-width:220px}.article-content--visiva .blog-btn.black:hover{background:rgba(0,0,0,.8);color:#fff}.article-content--visiva .blog-btn.green{background:linear-gradient(90deg,#33ff78,#caff33);color:#000;min-width:260px}.article-content--visiva .blog-btn.green:hover{background:linear-gradient(270deg,#33ff78,#caff33);color:#000}.article-content--visiva .blog-btn.dark{background:#000;border:1px solid #fff;color:#fff;min-width:220px}.article-content--visiva .blog-btn.dark:hover{background:#fff;color:#000}.article-content--visiva .blog-btn-row{align-items:center;display:flex;flex-direction:row;gap:24px;margin:var(--visiva-module-margin)}.article-content--visiva .blog-btn-row.dark{align-items:center;background-color:#000;border-radius:var(--visiva-card-radius);display:flex;justify-content:center;max-width:100%;padding:35px 24px;width:-moz-fit-content;width:fit-content}.article-content--visiva .blog-btn-note{align-items:center;color:#666262;display:flex;font-size:14px;font-weight:500;gap:6px;justify-content:center;line-height:20px;margin-top:20px}.article-content--visiva .blog-quote{background-color:#fff;border:1px solid #d4d4d4;border-radius:var(--visiva-card-radius);margin:var(--visiva-module-margin);padding:30px 28px}.article-content--visiva .blog-quote-title{font-size:20px;font-weight:600;line-height:1;margin-bottom:6px}.article-content--visiva .blog-quote-text{font-size:14px;font-style:italic;line-height:22px;margin-bottom:8px;margin-top:6px}.article-content--visiva .blog-quote-author{color:#666262;font-size:14px;line-height:20px;margin:0}.article-content--visiva .blog-table-wrapper{border:1px solid #d4d4d4;border-radius:var(--visiva-card-radius);font-size:14px;line-height:20px;margin:var(--visiva-module-margin);max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;text-align:center;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.article-content--visiva .blog-table-wrapper::-webkit-scrollbar{display:none}.article-content--visiva .blog-table{border-collapse:collapse;min-width:800px;width:100%}.article-content--visiva .blog-table-header{background-color:#292929;color:#fff;font-size:18px;height:80px;line-height:28px}.article-content--visiva .blog-table-header-cell{border-right:1px solid #5e5e68;font-weight:600;padding:16px}.article-content--visiva .blog-table-header-cell:last-child{border-right:none}.article-content--visiva .blog-table-header-cell-last{font-weight:600;line-height:20px;padding:16px}.article-content--visiva .blog-table-row{background-color:#fff;border-top:1px solid #d9d9d9;color:#000;font-weight:300;height:80px;transition:background-color .2s ease}.article-content--visiva .blog-table-cell{border-right:1px solid #d9d9d9;padding:16px}.article-content--visiva .blog-table-cell:last-child{border-right:none}.article-content--visiva .blog-table-cell-first{background-color:#f4f4f4;border-right:1px solid #d9d9d9;padding:16px}.article-content--visiva .blog-table-cell-last{font-size:14px;line-height:20px;padding:17px 16px}.article-content--visiva .blog-table-row:hover .blog-table-cell,.article-content--visiva .blog-table-row:hover .blog-table-cell-first,.article-content--visiva .blog-table-row:hover .blog-table-cell-last{background-color:#f7fff9}.article-content--visiva .blog-table-wrapper.collapsible{background-color:#fff;overflow:hidden;position:relative}.article-content--visiva .blog-table-content{max-height:500px;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none;transition:max-height .3s ease-in-out;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.article-content--visiva .blog-table-content::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-content.expanded,.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-content{max-height:3000px;padding-bottom:80px}.article-content--visiva .blog-table-overlay{background:linear-gradient(180deg,hsla(0,0%,100%,.72),#fff);bottom:0;height:80px;left:0;position:absolute;right:0;z-index:10}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-overlay{background:transparent;bottom:0;height:80px;pointer-events:none}.article-content--visiva .blog-table-toggle{align-items:center;background-color:#fff;border:1px solid #d4d4d4;border-radius:9999px;bottom:16px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;display:flex;height:50px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);transition:all .3s;width:50px;z-index:10}.article-content--visiva .blog-table-toggle:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/2458f67aa6069b33/arrow.down.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;height:20px;transition:transform .3s ease;width:20px}.article-content--visiva .blog-table-toggle:hover{background-color:#f2f4f3;border-color:#bfc7c2}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-toggle{bottom:16px;pointer-events:auto;transform:translateX(-50%)}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-toggle:before{transform:rotate(180deg)}.article-content--visiva .blog-pros-cons{display:flex;flex-direction:row;gap:24px;margin:var(--visiva-module-margin)}.article-content--visiva .blog-pros-cons-card{background-color:#f7f8fa;border-radius:var(--visiva-card-radius);flex:1 1 0%;padding:26px 30px}.article-content--visiva .blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.article-content--visiva .blog-pros-cons-header:before{background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:28px;width:28px}.article-content--visiva .blog-pros-cons-card.pros .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bad8fe2f52dffa98/pros.svg)}.article-content--visiva .blog-pros-cons-card.cons .blog-pros-cons-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/fe7765e509abfda1/cons.svg)}.article-content--visiva .blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;line-height:28px}.article-content--visiva .blog-pros-cons-list{color:#000;font-size:14px;line-height:20px;list-style-position:inside;list-style-type:disc}.article-content--visiva .blog-pros-cons-list>*+*{margin-top:12px}.article-content--visiva .blog-step{font-size:18px;margin:24px 0}.article-content--visiva .blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.article-content--visiva .blog-note-style{background-color:#f7f8fa;border-radius:0 0 5px 5px;margin:var(--visiva-module-margin);padding:26px 16px 10px;position:relative}.article-content--visiva .blog-note-style-badge{align-items:center;background-color:#02a967;border-radius:5px 0 10px 0;color:#fff;display:flex;font-size:14px;font-weight:700;gap:4px;height:24px;left:0;line-height:20px;padding-left:8px;padding-right:8px;position:absolute;top:0}.article-content--visiva .blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/idea.png);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:14px;width:14px}.article-content--visiva .blog-note-style.note .blog-note-style-badge:before{background-image:url(https://cdn.visiva.ai/blog/temp/note.png)}.article-content--visiva .blog-note-style-text{color:#666262;font-size:16px;font-weight:300;line-height:24px}.article-content--visiva .blog-features-card{align-items:center;background-color:#f7f8fa;border-radius:var(--visiva-card-radius);display:flex;flex-direction:row;gap:16px;justify-content:space-between;margin:var(--visiva-module-margin);padding:40px}.article-content--visiva .blog-features-card.dark{background-color:#2e2e2e;color:#fff}.article-content--visiva .blog-features-card-content{flex:1 1 0;max-width:426px}.article-content--visiva .blog-features-card-title{font-size:20px;font-weight:700;margin-bottom:16px;text-align:left}.article-content--visiva .blog-features-card-list{color:#666262;font-size:14px;font-weight:300;line-height:20px;list-style-position:outside;list-style-type:disc;margin-bottom:28px;padding-left:16px}.article-content--visiva .blog-features-card-list>*+*{margin-top:8px}.article-content--visiva .blog-features-card.dark .blog-features-card-list{color:inherit}.article-content--visiva .blog-features-card .blog-btn{min-width:260px}.article-content--visiva .blog-features-card-image-wrapper{flex:0 1 411px;max-width:411px;width:100%}.article-content--visiva .blog-features-card-image{border-radius:var(--visiva-card-radius-soft);height:100%;min-height:239px;-o-object-fit:cover;object-fit:cover;width:100%}.article-content--visiva .blog-note-style3{background-color:#f7f8fa;border-radius:var(--visiva-card-radius-soft);margin:var(--visiva-module-margin);padding:24px}.article-content--visiva .blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.article-content--visiva .blog-note-style3-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/94606ff0f6690ec6/info.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:22px;width:22px}.article-content--visiva .blog-note-style3-title{color:#000;font-weight:600}.article-content--visiva .blog-note-style3-text{color:#666262;font-weight:300}.article-content--visiva .blog-qa-card{background-color:#f7f8fa;border-radius:var(--visiva-card-radius-soft);margin:var(--visiva-module-margin);padding:24px 20px}.article-content--visiva .blog-qa-item{margin-bottom:33px}.article-content--visiva .blog-qa-question{color:#000;font-weight:600;margin-bottom:16px}.article-content--visiva .blog-qa-answer{color:#666262;font-weight:300}.article-content--visiva .blog-qa-answer-label{color:#000;font-weight:600}.article-content--visiva .blog-qa-card2{background-color:#f8fffb;border-radius:var(--visiva-card-radius-soft);margin:var(--visiva-module-margin);padding:28px 20px}.article-content--visiva .blog-qa-card2-header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.article-content--visiva .blog-qa-card2-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bb8010e4ebd03eb9/faq.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:20px;width:20px}.article-content--visiva .blog-qa-card2-title{color:#1fb04f;font-size:20px;font-weight:700;line-height:1}.article-content--visiva .blog-qa-card2-item{margin-bottom:24px}.article-content--visiva .blog-qa-card2-question{font-weight:700;margin-bottom:12px}@media (max-width:1200px){.article-content--visiva{--visiva-card-radius:16px;--visiva-card-radius-soft:12px}.article-content--visiva .blog-toc{padding:32px 24px}.article-content--visiva .blog-btn-row.dark{padding:28px 20px;width:100%}.article-content--visiva .blog-quote{padding:26px 24px}.article-content--visiva .blog-table{min-width:720px}.article-content--visiva .blog-table-header,.article-content--visiva .blog-table-row{height:68px}.article-content--visiva .blog-pros-cons{gap:20px}.article-content--visiva .blog-pros-cons-card{padding:24px}.article-content--visiva .blog-features-card{align-items:stretch;gap:20px;padding:32px}.article-content--visiva .blog-features-card-content{max-width:none}.article-content--visiva .blog-features-card-image-wrapper{max-width:360px}}@media (max-width:768px){.article-content--visiva{--visiva-module-margin:24px 0;--visiva-card-radius:10px;--visiva-card-radius-soft:10px;--visiva-article-gutter:10px}.article-content--visiva li,.article-content--visiva p,.article-content--visiva td,.article-content--visiva th{font-size:14px;line-height:20px}.article-content--visiva>h2{font-size:22px;line-height:30px;margin-bottom:10px;margin-top:24px}.article-content--visiva>h3{font-size:18px;line-height:26px;margin:24px 0 12px}.article-content--visiva ul{margin:8px 0}.article-content--visiva>img:not(.hot-icon):not([width]):not([height]){margin:24px 0}.article-content--visiva .contrast-table{border-radius:8px 0 0 8px;box-sizing:border-box;margin:24px calc(var(--visiva-article-gutter)*-1) 24px 0;overflow-x:auto;padding-right:var(--visiva-article-gutter);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.article-content--visiva .contrast-table::-webkit-scrollbar{display:none}.article-content--visiva .contrast-table table{min-width:560px}.article-content--visiva .contrast-table td,.article-content--visiva .contrast-table th{font-size:14px;line-height:20px;padding:12px}.article-content--visiva .blog-intro-list,.article-content--visiva .blog-intro-text,.article-content--visiva .blog-intro-text-secondary{font-size:14px;line-height:20px}.article-content--visiva .blog-toc{padding:20px 16px}.article-content--visiva .blog-toc-title{font-size:16px;line-height:24px}.article-content--visiva .blog-toc-list,.article-content--visiva .blog-toc-numbered-list{font-size:14px;line-height:20px}.article-content--visiva .blog-toc-list-item{padding-left:0}.article-content--visiva .blog-toc-numbered-list{padding-left:28px}.article-content--visiva .blog-h2-style1{font-size:22px}.article-content--visiva .blog-h2-style2{font-size:22px;line-height:30px;padding-left:8px}.article-content--visiva .blog-h2-style2:before{height:18px;top:4px;width:4px}.article-content--visiva .blog-h3-style1{font-size:18px;line-height:1}.article-content--visiva .blog-h3-style1-text{margin-top:4px}.article-content--visiva .blog-h3-style1-list{font-size:14px;line-height:20px;margin-top:16px}.article-content--visiva .blog-h3-style2,.article-content--visiva .blog-h3-style3{align-items:flex-start;font-size:18px;line-height:26px}.article-content--visiva .blog-h3-style3>*+*{margin-left:4px}.article-content--visiva .blog-h3-style4{align-items:flex-start;font-size:18px;line-height:26px}.article-content--visiva .blog-h3-style4>*+*{margin-left:4px}.article-content--visiva>.blog-btn{display:flex;margin-left:auto;margin-right:auto;width:-moz-fit-content;width:fit-content}.article-content--visiva .blog-btn,.article-content--visiva .blog-btn.black,.article-content--visiva .blog-btn.dark,.article-content--visiva .blog-btn.green,.article-content--visiva .blog-features-card .blog-btn{flex-direction:row;font-size:16px;height:56px;line-height:20px;max-width:270px;min-width:0;width:min(270px,100%)}.article-content--visiva .blog-btn-row{align-items:center;flex-direction:column;gap:20px;width:100%}.article-content--visiva .blog-btn-row>:not(.blog-btn){align-items:center;display:flex;flex-direction:column;width:100%}.article-content--visiva .blog-btn-row.dark{box-sizing:border-box;gap:24px;width:100%}.article-content--visiva .blog-btn-note{margin-top:16px}.article-content--visiva .blog-quote{padding:20px 12px}.article-content--visiva .blog-quote-title{font-size:16px;line-height:24px}.article-content--visiva .blog-quote-text{font-size:12px;line-height:18px;margin-bottom:8px}.article-content--visiva .blog-quote-author{font-size:12px;line-height:18px}.article-content--visiva .blog-pros-cons{flex-direction:column;gap:12px}.article-content--visiva .blog-pros-cons-card{padding:20px 12px}.article-content--visiva .blog-step{font-size:16px;line-height:24px}.article-content--visiva .blog-note-style-text{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card{flex-direction:column;gap:20px;padding:28px 12px}.article-content--visiva .blog-features-card-content,.article-content--visiva .blog-features-card-image-wrapper{flex:auto;max-width:unset;width:100%}.article-content--visiva .blog-features-card-title{font-size:18px;line-height:28px;text-align:center}.article-content--visiva .blog-features-card-list{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto 20px;width:-moz-fit-content;width:fit-content}.article-content--visiva .blog-features-card-image{border-radius:8px;min-height:auto}.article-content--visiva .blog-note-style3{padding:20px 16px}.article-content--visiva .blog-note-style3-text{font-size:14px;line-height:20px}.article-content--visiva .blog-qa-card{font-size:14px;line-height:20px;padding:20px 16px}.article-content--visiva .blog-qa-title{font-size:24px}.article-content--visiva .blog-qa-intro{font-size:14px;line-height:20px}.article-content--visiva .blog-qa-card2{font-size:14px;line-height:20px;padding-left:16px;padding-right:16px}.article-content--visiva .blog-qa-card2-title{font-size:18px;line-height:28px}.article-content--visiva .blog-qa-card2-item{margin-bottom:16px}.article-content--visiva .blog-qa-card2-question{margin-bottom:6px}.article-content--visiva .blog-features-card-list,.article-content--visiva .blog-h3-style1-text,.article-content--visiva .blog-pros-cons-list,.article-content--visiva .blog-qa-answer{font-size:14px;line-height:20px}.article-content--visiva .blog-features-card .blog-btn{display:flex;margin-left:auto;margin-right:auto;max-width:270px;width:min(270px,100%)}.article-content--visiva .blog-table-scroll{margin:24px calc(var(--visiva-article-gutter)*-1) 24px 0;max-width:none;scrollbar-width:none;width:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;background:#fff;box-sizing:border-box;overflow-x:auto;padding-right:var(--visiva-article-gutter)}.article-content--visiva .blog-table-scroll::-webkit-scrollbar,.article-content--visiva .blog-table-wrapper.collapsible::-webkit-scrollbar{display:none}.article-content--visiva .blog-table-scroll>.blog-table-wrapper{border-radius:14px;margin:0;max-width:none;min-width:100%;overflow:hidden;width:-moz-max-content;width:max-content}.article-content--visiva .blog-table-wrapper.collapsible{border:1px solid #d4d4d4;border-radius:14px 0 0 14px;border-right-width:0;margin:24px calc(var(--visiva-article-gutter)*-1) 24px 0;max-width:none;overflow:hidden;scrollbar-width:none;width:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;background:#fff}.article-content--visiva .blog-table-wrapper.collapsible.expanded{background:transparent;border:0;border-radius:0;box-sizing:border-box;overflow-x:auto;padding-bottom:22px;padding-right:var(--visiva-article-gutter)}.article-content--visiva .blog-table-wrapper.collapsible .blog-table-content{background:#fff;border:0;border-radius:0;box-sizing:border-box;max-width:none;min-width:100%;overflow:hidden;padding-right:0;width:-moz-max-content;width:max-content}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-content{border:1px solid #d4d4d4;border-radius:14px}.article-content--visiva .blog-table{min-width:720px}.article-content--visiva .blog-table-header{font-size:14px;line-height:20px}.article-content--visiva .blog-table-cell,.article-content--visiva .blog-table-cell-first,.article-content--visiva .blog-table-cell-last,.article-content--visiva .blog-table-header-cell,.article-content--visiva .blog-table-header-cell-last{padding:12px}.article-content--visiva .blog-table-content.expanded,.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-content{padding-bottom:0}.article-content--visiva .blog-table-overlay{height:64px}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-overlay{bottom:0;height:0;left:0;position:sticky;right:auto;width:100%}.article-content--visiva .blog-table-toggle{bottom:10px;height:44px;width:44px}.article-content--visiva .blog-table-wrapper.collapsible.expanded .blog-table-toggle{bottom:-22px}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vigilkids/section-renderer-vue",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"description": "Vue 3 adapter for OneX Section Renderer SDK",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"repository": {
|
|
46
46
|
"type": "git",
|
|
47
|
-
"url": "https://github.com/
|
|
47
|
+
"url": "https://github.com/vigikids/onex.git",
|
|
48
48
|
"directory": "packages/section-renderer-vue"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|