ecomlab-components-next 0.1.323 → 0.1.325
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/components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2.module.scss +1 -1
- package/dist/components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2.scss +1 -1
- package/dist/components/ConstructorComponents/BlocksInfoV2/BlocksInfoV2.scss +1 -1
- package/dist/components/ConstructorComponents/CardsServicesV2/CardsServicesV2.scss +1 -1
- package/dist/components/ConstructorComponents/CardsServicesV3/CardsServicesV3.scss +1 -1
- package/dist/components/ConstructorComponents/CardsV2/CardsV2.scss +1 -1
- package/dist/components/ConstructorComponents/CardsWithButton/CardsWithButton.scss +1 -1
- package/dist/components/ConstructorComponents/CardsWithButtonV2/CardsWithButtonV2.scss +2 -1
- package/dist/components/ConstructorComponents/ClientsAboutUsV2/ClientsAboutUsV2.scss +1 -1
- package/dist/components/ConstructorComponents/FeaturesGridV2/FeaturesGridV2.scss +1 -1
- package/dist/components/ConstructorComponents/FeaturesGridV3/FeaturesGridV3.scss +1 -1
- package/dist/components/ConstructorComponents/FormV2/FormV2.scss +1 -1
- package/dist/components/ConstructorComponents/FormV3/FormV3.scss +1 -1
- package/dist/components/ConstructorComponents/HeaderMain/Header.scss +1 -1
- package/dist/components/ConstructorComponents/HeaderV2/HeaderV2.scss +1 -1
- package/dist/components/ConstructorComponents/HeaderV3/HeaderV3.scss +1 -1
- package/dist/components/ConstructorComponents/LogosStrip/LogosStrip.scss +1 -1
- package/dist/components/ConstructorComponents/PointsListV2/PointsListV2.scss +1 -1
- package/dist/components/ConstructorComponents/QuestionsV2/QuestionsV2.scss +1 -1
- package/dist/components/ConstructorComponents/SmartReplies/SmartReplies.scss +1 -1
- package/dist/components/ConstructorComponents/StatisticCardV2/StatisticCardV2.module.scss +1 -1
- package/dist/components/ConstructorComponents/StatisticCardV2/StatisticCardV2.scss +1 -1
- package/dist/components/ConstructorComponents/StepsV2/StepsV2.module.scss +1 -1
- package/dist/components/ConstructorComponents/StepsV2/StepsV2.scss +1 -1
- package/dist/components/ConstructorComponents/TariffPlanV2/TariffPlanV2.scss +1 -1
- package/dist/components/ConstructorComponents/VideoBlockV2/VideoBlockV2.scss +1 -1
- package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.js +3 -1
- package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.scss +58 -448
- package/dist/components/ConstructorComponents/VideoBlockV3/img/play.png +0 -0
- package/dist/components/ConstructorComponents/VideoBlockV3/img/play.svg +4 -0
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ $services-grid-bg: linear-gradient(135deg, #1A1A2E 0%, #047857 100%);
|
|
|
14
14
|
font-family: 'Manrope', sans-serif;
|
|
15
15
|
background: $services-bg;
|
|
16
16
|
width: 100%;
|
|
17
|
-
padding:
|
|
17
|
+
padding: 74px 40px;
|
|
18
18
|
|
|
19
19
|
* {
|
|
20
20
|
font-family: 'Manrope', 'Golos Text', sans-serif !important;
|
|
@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
require("./VideoBlockV3.scss");
|
|
11
11
|
var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
|
|
12
12
|
var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
|
|
13
|
+
var _play = _interopRequireDefault(require("./img/play.svg"));
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -61,7 +62,8 @@ var VideoBlockV3 = function VideoBlockV3(_ref) {
|
|
|
61
62
|
}, description), /*#__PURE__*/_react["default"].createElement("div", {
|
|
62
63
|
className: "video-block-v3__action"
|
|
63
64
|
}, /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
|
|
64
|
-
|
|
65
|
+
icon: _play["default"],
|
|
66
|
+
green: true,
|
|
65
67
|
onClick: handlePlay,
|
|
66
68
|
text: buttonText,
|
|
67
69
|
size: "44px"
|
|
@@ -1,576 +1,186 @@
|
|
|
1
1
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
2
|
@import '../variables.scss';
|
|
3
3
|
|
|
4
|
+
// Ноутбук: стартовый поворот и "ровное" положение
|
|
5
|
+
$laptop-tilt: perspective(1200px) rotateY(-20deg) rotateZ(1deg);
|
|
6
|
+
$laptop-flat: perspective(1200px) rotateY(0deg) rotateZ(0deg);
|
|
7
|
+
|
|
8
|
+
// Скорость и плавность поворота (больше время — медленнее)
|
|
9
|
+
$laptop-speed: 0.7s;
|
|
10
|
+
$laptop-ease: cubic-bezier(0.45, 0, 0.2, 1);
|
|
11
|
+
|
|
4
12
|
.video-block-v3 {
|
|
5
13
|
font-family: 'Manrope', sans-serif;
|
|
6
14
|
background: $white;
|
|
7
15
|
width: 100%;
|
|
8
|
-
padding:
|
|
16
|
+
padding: 74px 0px;
|
|
9
17
|
|
|
10
|
-
* {
|
|
11
|
-
font-family: 'Manrope', 'Golos Text', sans-serif !important;
|
|
12
|
-
}
|
|
18
|
+
* { font-family: 'Manrope', 'Golos Text', sans-serif !important; }
|
|
13
19
|
|
|
14
|
-
// ========================================
|
|
15
20
|
// CARD
|
|
16
|
-
// ========================================
|
|
17
|
-
|
|
18
21
|
&__card {
|
|
19
22
|
position: relative;
|
|
20
|
-
|
|
21
23
|
max-width: 1280px;
|
|
22
24
|
min-height: 360px;
|
|
23
|
-
|
|
24
25
|
margin: 0 auto;
|
|
25
|
-
|
|
26
|
-
// ====================================
|
|
27
|
-
// ДОПОЛНИТЕЛЬНЫЙ ЗЕЛЁНЫЙ ГРАДИЕНТ
|
|
28
|
-
// (справа, мягкое свечение)
|
|
29
|
-
// ====================================
|
|
30
|
-
|
|
31
|
-
background:
|
|
32
|
-
radial-gradient(
|
|
33
|
-
ellipse 640px 460px at 98% 112%,
|
|
34
|
-
rgba(22, 185, 129, 0.34) 0%,
|
|
35
|
-
rgba(44, 207, 164, 0.18) 40%,
|
|
36
|
-
rgba(44, 207, 164, 0) 75%
|
|
37
|
-
),
|
|
38
|
-
radial-gradient(
|
|
39
|
-
ellipse 460px 320px at 88% -14%,
|
|
40
|
-
rgba(110, 231, 183, 0.28) 0%,
|
|
41
|
-
rgba(110, 231, 183, 0) 70%
|
|
42
|
-
),
|
|
43
|
-
#f8fcfb;
|
|
44
|
-
|
|
45
26
|
border-radius: 24px;
|
|
46
|
-
|
|
47
27
|
display: flex;
|
|
48
28
|
align-items: center;
|
|
49
29
|
justify-content: space-between;
|
|
50
|
-
|
|
51
30
|
gap: 48px;
|
|
52
|
-
|
|
53
|
-
// Отступы сохраняем
|
|
54
31
|
padding: 56px;
|
|
55
32
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
// ====================================
|
|
59
|
-
// ШИРОКИЙ РАСПЛЫВЧАТЫЙ ГРАДИЕНТ
|
|
60
|
-
// ====================================
|
|
61
|
-
|
|
33
|
+
// Градиент только справа, рядом с ноутбуком
|
|
62
34
|
&::before {
|
|
63
35
|
content: '';
|
|
64
|
-
|
|
65
36
|
position: absolute;
|
|
66
|
-
|
|
67
|
-
width: 820px;
|
|
68
|
-
height: 620px;
|
|
69
|
-
|
|
70
|
-
right: -60px;
|
|
71
|
-
top: 50%;
|
|
72
|
-
|
|
73
|
-
transform: translateY(-50%);
|
|
74
|
-
|
|
75
|
-
border-radius: 50%;
|
|
76
|
-
|
|
77
|
-
background:
|
|
78
|
-
radial-gradient(
|
|
79
|
-
closest-side at 42% 50%,
|
|
80
|
-
#16b981 0%,
|
|
81
|
-
#38bdf8 22%,
|
|
82
|
-
#bef264 60%,
|
|
83
|
-
rgba(69, 84, 220, 0.6) 62%,
|
|
84
|
-
rgba(69, 204, 232, 0.25) 80%,
|
|
85
|
-
rgba(69, 204, 232, 0) 100%
|
|
86
|
-
);
|
|
87
|
-
|
|
88
|
-
// Чем больше blur — тем мягче края
|
|
89
|
-
filter: blur(36px);
|
|
90
|
-
|
|
91
|
-
z-index: 0;
|
|
92
|
-
|
|
93
|
-
pointer-events: none;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// Широкая мягкая подсветка вокруг основного градиента
|
|
97
|
-
&::after {
|
|
98
|
-
content: '';
|
|
99
|
-
|
|
100
|
-
position: absolute;
|
|
101
|
-
|
|
102
37
|
width: 1000px;
|
|
103
|
-
height:
|
|
104
|
-
|
|
105
|
-
right: -160px;
|
|
38
|
+
height: 540px;
|
|
39
|
+
right: -164px;
|
|
106
40
|
top: 50%;
|
|
107
|
-
|
|
108
41
|
transform: translateY(-50%);
|
|
109
|
-
|
|
110
42
|
border-radius: 50%;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
closest-side,
|
|
115
|
-
rgba(45, 212, 191, 0.16) 0%,
|
|
116
|
-
rgba(56, 189, 248, 0.10) 50%,
|
|
117
|
-
transparent 100%
|
|
118
|
-
);
|
|
119
|
-
|
|
120
|
-
filter: blur(60px);
|
|
121
|
-
|
|
43
|
+
background: linear-gradient(120deg, rgba(125, 200, 235, 0.60), rgba(190, 225, 130, 0.55));
|
|
44
|
+
-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
|
|
45
|
+
mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
|
|
122
46
|
z-index: 0;
|
|
123
|
-
|
|
124
47
|
pointer-events: none;
|
|
125
48
|
}
|
|
126
49
|
|
|
127
|
-
|
|
128
|
-
&--center {
|
|
129
|
-
justify-content: center;
|
|
130
|
-
}
|
|
50
|
+
&--center { justify-content: center; }
|
|
131
51
|
}
|
|
132
52
|
|
|
133
|
-
|
|
134
|
-
// ========================================
|
|
135
53
|
// CONTENT
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
&__content {
|
|
139
|
-
position: relative;
|
|
140
|
-
|
|
141
|
-
z-index: 3;
|
|
142
|
-
|
|
143
|
-
flex: 1;
|
|
144
|
-
|
|
145
|
-
max-width: 480px;
|
|
146
|
-
}
|
|
54
|
+
&__content { position: relative; z-index: 3; flex: 1; max-width: 480px; }
|
|
147
55
|
|
|
148
56
|
&__title {
|
|
149
57
|
font-size: 30px;
|
|
150
58
|
font-weight: 800;
|
|
151
59
|
line-height: 1.2;
|
|
152
|
-
|
|
153
60
|
letter-spacing: -1px;
|
|
154
|
-
|
|
155
61
|
color: $green-dark;
|
|
156
|
-
|
|
157
|
-
margin: 0 0 16px 0;
|
|
62
|
+
margin: 0 0 16px;
|
|
158
63
|
}
|
|
159
64
|
|
|
160
65
|
&__description {
|
|
161
66
|
font-size: 15px;
|
|
162
67
|
line-height: 1.5;
|
|
163
|
-
|
|
164
68
|
color: #66817a;
|
|
165
|
-
|
|
166
69
|
max-width: 420px;
|
|
167
|
-
|
|
168
|
-
margin: 0 0 28px 0;
|
|
70
|
+
margin: 0 0 28px;
|
|
169
71
|
}
|
|
170
72
|
|
|
171
|
-
&__action {
|
|
172
|
-
position: relative;
|
|
73
|
+
&__action { position: relative; z-index: 3; }
|
|
173
74
|
|
|
174
|
-
z-index: 3;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
// ========================================
|
|
179
75
|
// LAPTOP
|
|
180
|
-
// ========================================
|
|
181
|
-
|
|
182
76
|
&__laptop {
|
|
183
77
|
position: relative;
|
|
184
|
-
|
|
185
78
|
z-index: 2;
|
|
186
|
-
|
|
187
79
|
flex-shrink: 0;
|
|
188
|
-
|
|
189
80
|
width: 560px;
|
|
190
|
-
|
|
191
|
-
/*
|
|
192
|
-
* В обычном состоянии ноутбук немного
|
|
193
|
-
* повернут, как в референсе.
|
|
194
|
-
*/
|
|
195
|
-
transform:
|
|
196
|
-
perspective(1400px)
|
|
197
|
-
rotateY(-10deg)
|
|
198
|
-
rotateZ(-1deg);
|
|
199
|
-
|
|
81
|
+
transform: $laptop-tilt;
|
|
200
82
|
transform-origin: center center;
|
|
201
|
-
|
|
202
|
-
transition:
|
|
203
|
-
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
// ========================================
|
|
208
|
-
// VIDEO PLAYING
|
|
209
|
-
// ========================================
|
|
210
|
-
|
|
211
|
-
/*
|
|
212
|
-
* Когда видео включено —
|
|
213
|
-
* ноутбук становится прямым.
|
|
214
|
-
*/
|
|
215
|
-
|
|
216
|
-
&__laptop--playing {
|
|
217
|
-
transform:
|
|
218
|
-
perspective(1400px)
|
|
219
|
-
rotateY(0deg)
|
|
220
|
-
rotateZ(0deg);
|
|
83
|
+
transition: transform $laptop-speed $laptop-ease;
|
|
221
84
|
}
|
|
222
85
|
|
|
223
|
-
|
|
224
|
-
// ========================================
|
|
225
|
-
// SCREEN
|
|
226
|
-
// ========================================
|
|
227
|
-
|
|
228
86
|
&__screen {
|
|
229
87
|
position: relative;
|
|
230
|
-
|
|
88
|
+
z-index: 2;
|
|
231
89
|
background: #102b25;
|
|
232
|
-
|
|
233
90
|
border-radius: 14px 14px 0 0;
|
|
234
|
-
|
|
235
91
|
padding: 10px 10px 12px;
|
|
236
|
-
|
|
237
|
-
box-shadow:
|
|
238
|
-
0 24px 45px rgba(0, 0, 0, 0.18),
|
|
239
|
-
0 10px 20px rgba(0, 0, 0, 0.10);
|
|
240
|
-
|
|
241
|
-
z-index: 2;
|
|
92
|
+
box-shadow: 0 24px 45px rgba(0, 0, 0, 0.18), 0 10px 20px rgba(0, 0, 0, 0.10);
|
|
242
93
|
}
|
|
243
94
|
|
|
244
95
|
&__video {
|
|
245
96
|
display: block;
|
|
246
|
-
|
|
247
97
|
width: 100%;
|
|
248
|
-
|
|
249
98
|
aspect-ratio: 16 / 10;
|
|
250
|
-
|
|
251
99
|
object-fit: cover;
|
|
252
|
-
|
|
253
100
|
border-radius: 6px;
|
|
254
|
-
|
|
255
101
|
background: #000;
|
|
256
102
|
}
|
|
257
103
|
|
|
258
|
-
|
|
259
|
-
// ========================================
|
|
260
|
-
// LAPTOP BASE
|
|
261
|
-
// ========================================
|
|
262
|
-
|
|
263
104
|
&__base {
|
|
264
105
|
position: relative;
|
|
265
|
-
|
|
106
|
+
z-index: 2;
|
|
266
107
|
height: 12px;
|
|
267
|
-
|
|
268
108
|
width: calc(100% + 56px);
|
|
269
|
-
|
|
270
109
|
margin: 0 -28px;
|
|
271
|
-
|
|
272
|
-
background:
|
|
273
|
-
linear-gradient(
|
|
274
|
-
180deg,
|
|
275
|
-
#e7f0ed 0%,
|
|
276
|
-
#c2d5cf 100%
|
|
277
|
-
);
|
|
278
|
-
|
|
110
|
+
background: linear-gradient(180deg, #e7f0ed 0%, #c2d5cf 100%);
|
|
279
111
|
border-radius: 0 0 16px 16px;
|
|
280
|
-
|
|
281
|
-
box-shadow:
|
|
282
|
-
0 10px 22px rgba(0, 0, 0, 0.18);
|
|
283
|
-
|
|
284
|
-
z-index: 2;
|
|
112
|
+
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
|
|
285
113
|
|
|
286
114
|
&::after {
|
|
287
115
|
content: '';
|
|
288
|
-
|
|
289
116
|
position: absolute;
|
|
290
|
-
|
|
291
117
|
left: 50%;
|
|
292
118
|
top: 0;
|
|
293
|
-
|
|
294
119
|
width: 80px;
|
|
295
120
|
height: 4px;
|
|
296
|
-
|
|
297
121
|
transform: translateX(-50%);
|
|
298
|
-
|
|
299
122
|
background: rgba(0, 0, 0, 0.10);
|
|
300
|
-
|
|
301
123
|
border-radius: 0 0 6px 6px;
|
|
302
124
|
}
|
|
303
125
|
}
|
|
304
126
|
|
|
305
|
-
|
|
306
|
-
// ========================================
|
|
307
|
-
// HOVER
|
|
308
|
-
// ========================================
|
|
309
|
-
|
|
310
|
-
&__card:hover {
|
|
311
|
-
.video-block-v3__laptop:not(.video-block-v3__laptop--playing) {
|
|
312
|
-
transform:
|
|
313
|
-
perspective(1400px)
|
|
314
|
-
rotateY(-13deg)
|
|
315
|
-
rotateZ(-1.5deg)
|
|
316
|
-
translateY(-3px);
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
// ========================================
|
|
322
|
-
// ANIMATION
|
|
323
|
-
// ========================================
|
|
324
|
-
|
|
325
127
|
@keyframes fadeUp {
|
|
326
|
-
from {
|
|
327
|
-
|
|
328
|
-
transform: translateY(24px);
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
to {
|
|
332
|
-
opacity: 1;
|
|
333
|
-
transform: translateY(0);
|
|
334
|
-
}
|
|
128
|
+
from { opacity: 0; transform: translateY(24px); }
|
|
129
|
+
to { opacity: 1; transform: translateY(0); }
|
|
335
130
|
}
|
|
336
131
|
}
|
|
337
132
|
|
|
338
|
-
|
|
339
|
-
// ========================================
|
|
340
133
|
// TABLET
|
|
341
|
-
// ========================================
|
|
342
|
-
|
|
343
134
|
@media (max-width: 1100px) {
|
|
344
135
|
.video-block-v3 {
|
|
345
136
|
padding: 72px 24px;
|
|
346
|
-
|
|
347
|
-
&
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
&__title {
|
|
353
|
-
font-size: 26px;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
&__laptop {
|
|
357
|
-
width: 460px;
|
|
358
|
-
|
|
359
|
-
transform:
|
|
360
|
-
perspective(1200px)
|
|
361
|
-
rotateY(-8deg)
|
|
362
|
-
rotateZ(-1deg);
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
&__laptop--playing {
|
|
366
|
-
transform:
|
|
367
|
-
perspective(1200px)
|
|
368
|
-
rotateY(0deg)
|
|
369
|
-
rotateZ(0deg);
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
&__base {
|
|
373
|
-
width: calc(100% + 40px);
|
|
374
|
-
margin: 0 -20px;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
&__card::before {
|
|
378
|
-
width: 680px;
|
|
379
|
-
height: 520px;
|
|
380
|
-
|
|
381
|
-
right: -40px;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
&__card::after {
|
|
385
|
-
width: 820px;
|
|
386
|
-
height: 640px;
|
|
387
|
-
|
|
388
|
-
right: -120px;
|
|
389
|
-
}
|
|
137
|
+
&__card { padding: 48px 40px; gap: 32px; }
|
|
138
|
+
&__title { font-size: 26px; }
|
|
139
|
+
&__laptop { width: 460px; transform: perspective(1200px) rotateY(-16deg) rotateZ(1deg); }
|
|
140
|
+
&__base { width: calc(100% + 40px); margin: 0 -20px; }
|
|
141
|
+
&__card::before { width: 820px; height: 450px; right: -135px; }
|
|
390
142
|
}
|
|
391
143
|
}
|
|
392
144
|
|
|
393
|
-
|
|
394
|
-
// ========================================
|
|
395
145
|
// MOBILE
|
|
396
|
-
// ========================================
|
|
397
|
-
|
|
398
146
|
@media (max-width: 900px) {
|
|
399
147
|
.video-block-v3 {
|
|
400
148
|
padding: 60px 24px;
|
|
401
|
-
|
|
402
|
-
&
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
radial-gradient(
|
|
407
|
-
ellipse 520px 360px at 50% 110%,
|
|
408
|
-
rgba(22, 185, 129, 0.28) 0%,
|
|
409
|
-
rgba(44, 207, 164, 0.12) 45%,
|
|
410
|
-
rgba(44, 207, 164, 0) 75%
|
|
411
|
-
),
|
|
412
|
-
#f8fcfb;
|
|
413
|
-
|
|
414
|
-
gap: 32px;
|
|
415
|
-
|
|
416
|
-
padding: 40px 32px 48px;
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
&__content {
|
|
420
|
-
max-width: 100%;
|
|
421
|
-
|
|
422
|
-
text-align: center;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
&__description {
|
|
426
|
-
font-size: 14px;
|
|
427
|
-
|
|
428
|
-
margin-left: auto;
|
|
429
|
-
margin-right: auto;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
&__laptop {
|
|
433
|
-
width: 100%;
|
|
434
|
-
max-width: 520px;
|
|
435
|
-
|
|
436
|
-
transform:
|
|
437
|
-
perspective(1100px)
|
|
438
|
-
rotateY(-5deg)
|
|
439
|
-
rotateZ(-1deg);
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
&__laptop--playing {
|
|
443
|
-
transform:
|
|
444
|
-
perspective(1100px)
|
|
445
|
-
rotateY(0deg)
|
|
446
|
-
rotateZ(0deg);
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
&__card::before {
|
|
450
|
-
width: 760px;
|
|
451
|
-
height: 560px;
|
|
452
|
-
|
|
453
|
-
right: 50%;
|
|
454
|
-
top: 65%;
|
|
455
|
-
|
|
456
|
-
transform: translate(50%, -50%);
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
&__card::after {
|
|
460
|
-
width: 900px;
|
|
461
|
-
height: 680px;
|
|
462
|
-
|
|
463
|
-
right: 50%;
|
|
464
|
-
top: 65%;
|
|
465
|
-
|
|
466
|
-
transform: translate(50%, -50%);
|
|
467
|
-
}
|
|
149
|
+
&__card { flex-direction: column; gap: 32px; padding: 40px 32px 48px; }
|
|
150
|
+
&__content { max-width: 100%; text-align: center; }
|
|
151
|
+
&__description { font-size: 14px; margin-left: auto; margin-right: auto; }
|
|
152
|
+
&__laptop { width: 100%; max-width: 520px; transform: $laptop-flat; }
|
|
153
|
+
&__card::before { width: 860px; height: 500px; right: 50%; top: 65%; transform: translate(50%, -50%); }
|
|
468
154
|
}
|
|
469
155
|
}
|
|
470
156
|
|
|
471
|
-
|
|
472
|
-
// ========================================
|
|
473
157
|
// 600px
|
|
474
|
-
// ========================================
|
|
475
|
-
|
|
476
158
|
@media (max-width: 600px) {
|
|
477
159
|
.video-block-v3 {
|
|
478
|
-
|
|
479
|
-
&
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
padding: 32px 24px 40px;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
&__title {
|
|
486
|
-
font-size: 24px;
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
&__description {
|
|
490
|
-
font-size: 13px;
|
|
491
|
-
|
|
492
|
-
margin-bottom: 20px;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
&__laptop {
|
|
496
|
-
transform:
|
|
497
|
-
perspective(900px)
|
|
498
|
-
rotateY(-3deg)
|
|
499
|
-
rotateZ(-1deg);
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
&__laptop--playing {
|
|
503
|
-
transform:
|
|
504
|
-
perspective(900px)
|
|
505
|
-
rotateY(0deg)
|
|
506
|
-
rotateZ(0deg);
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
// На мобильных blur поменьше — легче для слабых устройств
|
|
510
|
-
&__card::before {
|
|
511
|
-
width: 640px;
|
|
512
|
-
height: 480px;
|
|
513
|
-
|
|
514
|
-
filter: blur(24px);
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
&__card::after {
|
|
518
|
-
width: 760px;
|
|
519
|
-
height: 560px;
|
|
520
|
-
|
|
521
|
-
filter: blur(36px);
|
|
522
|
-
}
|
|
160
|
+
&__card { border-radius: 20px; padding: 32px 24px 40px; }
|
|
161
|
+
&__title { font-size: 24px; }
|
|
162
|
+
&__description { font-size: 13px; margin-bottom: 20px; }
|
|
163
|
+
&__card::before { width: 720px; height: 420px; }
|
|
523
164
|
}
|
|
524
165
|
}
|
|
525
166
|
|
|
526
|
-
|
|
527
|
-
// ========================================
|
|
528
167
|
// 430px
|
|
529
|
-
// ========================================
|
|
530
|
-
|
|
531
168
|
@media (max-width: 430px) {
|
|
532
169
|
.video-block-v3 {
|
|
533
170
|
padding: 40px 20px;
|
|
534
|
-
|
|
535
|
-
&
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
&__title {
|
|
542
|
-
font-size: 20px;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
&__description {
|
|
546
|
-
font-size: 12px;
|
|
547
|
-
}
|
|
548
|
-
|
|
549
|
-
&__screen {
|
|
550
|
-
padding: 6px 6px 8px;
|
|
551
|
-
|
|
552
|
-
border-radius: 10px 10px 0 0;
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
&__base {
|
|
556
|
-
width: calc(100% + 24px);
|
|
557
|
-
|
|
558
|
-
margin: 0 -12px;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
&__card::before {
|
|
562
|
-
width: 520px;
|
|
563
|
-
height: 400px;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
&__card::after {
|
|
567
|
-
width: 620px;
|
|
568
|
-
height: 470px;
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
&__action > * {
|
|
572
|
-
max-width: 100% !important;
|
|
573
|
-
width: 100% !important;
|
|
574
|
-
}
|
|
171
|
+
&__card { border-radius: 16px; padding: 28px 16px 32px; }
|
|
172
|
+
&__title { font-size: 20px; }
|
|
173
|
+
&__description { font-size: 12px; }
|
|
174
|
+
&__screen { padding: 6px 6px 8px; border-radius: 10px 10px 0 0; }
|
|
175
|
+
&__base { width: calc(100% + 24px); margin: 0 -12px; }
|
|
176
|
+
&__card::before { width: 560px; height: 340px; }
|
|
177
|
+
&__action > * { max-width: 100% !important; width: 100% !important; }
|
|
575
178
|
}
|
|
576
179
|
}
|
|
180
|
+
|
|
181
|
+
// Ровное положение: при наведении на карточку и когда видео играет.
|
|
182
|
+
// Стоит ПОСЛЕ медиазапросов, чтобы перекрывать их на любом экране.
|
|
183
|
+
.video-block-v3__laptop--playing,
|
|
184
|
+
.video-block-v3__card:hover .video-block-v3__laptop {
|
|
185
|
+
transform: $laptop-flat;
|
|
186
|
+
}
|
|
Binary file
|