mp-design-system 1.2.22 → 1.2.24
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/build/js/app.js +1 -1
- package/dist/build/js/app.js.map +1 -1
- package/dist/build/scss/library.css +1 -1
- package/dist/build/scss/library.css.map +1 -1
- package/dist/build/scss/main.css +1 -1
- package/dist/build/scss/main.css.map +1 -1
- package/package.json +1 -1
- package/src/_includes/components/hero/hero.njk +11 -7
- package/src/_includes/components/hero/hero.scss +58 -3
- package/src/_includes/components/product-signpost/product-signpost.scss +2 -1
- package/src/_includes/components/usp/usp.scss +7 -2
- package/src/assets/js/imports/hero-video.js +1 -1
- package/src/assets/scss/objects/grid.scss +4 -0
- package/src/assets/scss/utilities/display.scss +5 -0
- package/src/patterns/usps.njk +9 -9
package/package.json
CHANGED
|
@@ -33,12 +33,14 @@
|
|
|
33
33
|
</header>
|
|
34
34
|
|
|
35
35
|
{% if params.cta %}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
<div class="c-hero__button-wrap">
|
|
37
|
+
{{ button({
|
|
38
|
+
link: params.cta.link,
|
|
39
|
+
inline: true,
|
|
40
|
+
label: params.cta.label,
|
|
41
|
+
color: 'green'
|
|
42
|
+
}) }}
|
|
43
|
+
</div>
|
|
42
44
|
{% endif %}
|
|
43
45
|
</div>
|
|
44
46
|
</div>
|
|
@@ -70,7 +72,9 @@
|
|
|
70
72
|
{% endif %}
|
|
71
73
|
|
|
72
74
|
{% if params.longvideo %}
|
|
73
|
-
|
|
75
|
+
<div class="c-hero__video-button-wrap">
|
|
76
|
+
{{ button({ link: '', label: 'Play video', colour: 'outline-white', attrs: 'id=playVideo' }) }}
|
|
77
|
+
</div>
|
|
74
78
|
{% endif %}
|
|
75
79
|
</figure>
|
|
76
80
|
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--body-width: min(100vw, calc(78.75rem + var(--gutter) + var(--gutter) ) );
|
|
3
|
+
--gutter-width: calc( (100vw - var(--body-width)) / 2 );
|
|
4
|
+
--text-width: min(100vw, 51.75rem);
|
|
5
|
+
--hero-gap: calc( var(--body-width) - var(--text-width));
|
|
6
|
+
--stop: calc( ( var(--hero-gap) + var(--gutter-width) ) *.8 );
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
.c-hero {
|
|
2
10
|
background-color: color('blue', 'step-2');
|
|
3
11
|
background: linear-gradient(to top right, color('petrol', 'step-3'), color('blue', 'step-2'));
|
|
@@ -59,6 +67,16 @@
|
|
|
59
67
|
p {
|
|
60
68
|
line-height: lh('prose');
|
|
61
69
|
}
|
|
70
|
+
|
|
71
|
+
.c-hero__button-wrap {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-wrap: wrap;
|
|
74
|
+
gap: var(--space-s);
|
|
75
|
+
|
|
76
|
+
&> .c-button {
|
|
77
|
+
margin: 0 !important;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
62
80
|
}
|
|
63
81
|
|
|
64
82
|
&--image {
|
|
@@ -97,6 +115,12 @@
|
|
|
97
115
|
background: radial-gradient(circle farthest-side at top right, rgba(color('grey', 'step--1'), 30%), color('grey', 'step--1'));
|
|
98
116
|
}
|
|
99
117
|
}
|
|
118
|
+
|
|
119
|
+
@media (min-width:70em) {
|
|
120
|
+
&:after {
|
|
121
|
+
background: linear-gradient(270deg, rgba(color('grey','step--1'),0%) var(--gutter-width), rgba(color('grey','step--1'),62%) var(--stop), color('grey','step--1'));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
100
124
|
}
|
|
101
125
|
|
|
102
126
|
&--homepage {
|
|
@@ -179,6 +203,17 @@
|
|
|
179
203
|
}
|
|
180
204
|
}
|
|
181
205
|
|
|
206
|
+
.u-wrap {
|
|
207
|
+
&::before,
|
|
208
|
+
&::after {
|
|
209
|
+
display: none;
|
|
210
|
+
|
|
211
|
+
@media (min-width: 38em) {
|
|
212
|
+
display: inline;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
182
217
|
.c-hero {
|
|
183
218
|
&__video-bg {
|
|
184
219
|
width: 100%;
|
|
@@ -203,14 +238,15 @@
|
|
|
203
238
|
}
|
|
204
239
|
}
|
|
205
240
|
|
|
206
|
-
&
|
|
241
|
+
&__video-button-wrap {
|
|
207
242
|
position: absolute;
|
|
208
243
|
z-index: 2;
|
|
209
244
|
right: 0;
|
|
210
245
|
bottom: calc(56.25% / 2 - 25px);
|
|
211
246
|
left: 0;
|
|
212
|
-
background: rgba(black, 0.2);
|
|
213
247
|
margin: 0 auto;
|
|
248
|
+
display: flex;
|
|
249
|
+
justify-content: center;
|
|
214
250
|
|
|
215
251
|
@media (min-width: 38em) {
|
|
216
252
|
position: absolute;
|
|
@@ -219,6 +255,21 @@
|
|
|
219
255
|
bottom: unset;
|
|
220
256
|
left: unset;
|
|
221
257
|
}
|
|
258
|
+
|
|
259
|
+
.c-button {
|
|
260
|
+
position: relative;
|
|
261
|
+
|
|
262
|
+
&::before {
|
|
263
|
+
content: '';
|
|
264
|
+
position: absolute;
|
|
265
|
+
background: rgba(black, 0.2);
|
|
266
|
+
height: 100%;
|
|
267
|
+
width: 100%;
|
|
268
|
+
top: 0;
|
|
269
|
+
left: 0;
|
|
270
|
+
border-radius: inherit;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
222
273
|
}
|
|
223
274
|
}
|
|
224
275
|
}
|
|
@@ -250,10 +301,14 @@
|
|
|
250
301
|
|
|
251
302
|
&__canvas {
|
|
252
303
|
position: absolute;
|
|
253
|
-
z-index: 1;
|
|
304
|
+
z-index: -1;
|
|
254
305
|
height: 100%;
|
|
255
306
|
width: 100%;
|
|
256
307
|
left: 0;
|
|
257
308
|
top: 0;
|
|
309
|
+
|
|
310
|
+
@media (min-width: 38em) {
|
|
311
|
+
z-index: 1;
|
|
312
|
+
}
|
|
258
313
|
}
|
|
259
314
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
&__image {
|
|
19
19
|
margin-bottom: 0;
|
|
20
|
-
@include padding-right("s");
|
|
20
|
+
// @include padding-right("s");
|
|
21
21
|
flex-shrink: 0;
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
&__wrapper {
|
|
29
29
|
display: flex;
|
|
30
30
|
flex-direction: column;
|
|
31
|
+
@include space('gap', 'xs-s');
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
.o-prose p {
|
|
@@ -40,8 +40,13 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&__icon {
|
|
43
|
-
@include space('height','
|
|
44
|
-
@include space('width','
|
|
43
|
+
@include space('height','l');
|
|
44
|
+
@include space('width','l');
|
|
45
|
+
|
|
46
|
+
.c-usp--center & {
|
|
47
|
+
@include space('height','2xl');
|
|
48
|
+
@include space('width','2xl');
|
|
49
|
+
}
|
|
45
50
|
}
|
|
46
51
|
|
|
47
52
|
&__eyebrow {
|
|
@@ -4,7 +4,7 @@ function HeroVideo() {
|
|
|
4
4
|
if(typeof(videoBackground) != 'undefined' && videoBackground != null) {
|
|
5
5
|
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
6
6
|
if(!reducedMotion || reducedMotion.matches) {
|
|
7
|
-
videoBackground.
|
|
7
|
+
videoBackground.pause();
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
const lightboxTrigger = document.getElementById('playVideo');
|
package/src/patterns/usps.njk
CHANGED
|
@@ -52,25 +52,25 @@ tags: 'patterns'
|
|
|
52
52
|
<div class="o-grid o-grid--of-four">
|
|
53
53
|
{{ usp({
|
|
54
54
|
title: "Handles the toughest conditions",
|
|
55
|
-
content: "FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity
|
|
55
|
+
content: "<p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>",
|
|
56
56
|
size: "c-h--step-1",
|
|
57
57
|
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 67 55"><path stroke="#333" stroke-width="3" d="M2.16 22.49a2.5 2.5 0 0 1 2.5-2.5h41.27a2.5 2.5 0 0 1 2.5 2.5v28.15a2.5 2.5 0 0 1-2.5 2.5H44c-.44 0-.86-.19-1.15-.51a4.54 4.54 0 0 0-3.37-1.5H11.14c-1.28 0-2.51.54-3.38 1.5l1.08.97-1.08-.98c-.3.33-.71.52-1.16.52H4.66a2.5 2.5 0 0 1-2.5-2.5V22.49Z"/><path stroke="#333" stroke-linecap="round" stroke-width="4" d="M2.82 49.7h44.84"/><path stroke="#333" stroke-linejoin="round" stroke-width="3" d="M11.66 20H34.1v18.88a2 2 0 0 1-2 2H13.66a2 2 0 0 1-2-2V20Z"/><path fill="#333" stroke="#333" stroke-linejoin="round" stroke-width="3" d="M38.99 24.88h4.56v3.05h-4.56z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-width="3" d="M43.87 11.88V3.31M56.87 24.88h8.58M54.51 18.85l8.03-4.78M49.93 14.21l4.79-8.02"/></svg>'
|
|
58
58
|
}) }}
|
|
59
59
|
{{ usp({
|
|
60
60
|
title: "Results you can count on",
|
|
61
|
-
content: "Consistent heating between positions, homogeneous melt, and contamination-free heating - ensuring superior, repeatable results
|
|
61
|
+
content: "<p>Consistent heating between positions, homogeneous melt, and contamination-free heating - ensuring superior, repeatable results.</p>",
|
|
62
62
|
size: "c-h--step-1",
|
|
63
63
|
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 56"><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 9.6h17.7m6 0h9"/><path fill="#333" d="M13.2 3.5a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1H11l2.2-2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 8.1 3.2 3.2L17 3.5"/><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 29.1h7.6m6.1 0h19"/><path fill="#333" d="M13.2 23a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1h6l.3.1 2.2-2.2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 27.7 3.2 3.1L17 23"/><path stroke="#333" stroke-linecap="round" stroke-width="3" d="M20.1 48.6H31m17.6 0h4.2m-10.2 0h-5.7"/><path fill="#333" d="M13.2 42.5a4 4 0 0 0-2.5-.9h-6a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3l-3 3c0 .6-.5 1-1 1h-6a1 1 0 0 1-1-1v-6c0-.5.4-1 1-1H11l2.2-2Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 47.1 3.2 3.2 7.8-7.8"/></svg>'
|
|
64
64
|
}) }}
|
|
65
65
|
{{ usp({
|
|
66
66
|
title: "World-leading speed",
|
|
67
|
-
content: "The fastest fusion sample-prep on the market. Boost your productivity by up to 25% with the same compact footprint
|
|
67
|
+
content: "<p>The fastest fusion sample-prep on the market. Boost your productivity by up to 25% with the same compact footprint.</p>",
|
|
68
68
|
size: "c-h--step-1",
|
|
69
69
|
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55"><circle cx="27.7" cy="30.6" r="22.5" stroke="#333" stroke-width="3"/><path stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M21.7 2.6h6m6 0h-6m0 0V7"/><path fill="#00A2C2" d="m40.3 21-14.1 5a4.9 4.9 0 1 0 4.7 8.3l11.5-9.7a2 2 0 0 0-2-3.5Z"/><circle cx="27.7" cy="13.5" r="1.5" fill="#333"/><circle cx="27.7" cy="48.1" r="1.5" fill="#333"/><circle cx="45.2" cy="30.6" r="1.5" fill="#333"/><circle cx="10.2" cy="30.6" r="1.5" fill="#333"/><circle cx="19" cy="15.9" r="1.5" fill="#333" transform="rotate(-30 19 15.9)"/><circle cx="36.3" cy="45.8" r="1.5" fill="#333" transform="rotate(-30 36.3 45.8)"/><circle cx="12.4" cy="39.4" r="1.5" fill="#333" transform="rotate(-30 12.4 39.4)"/><circle cx="12.7" cy="22.2" r="1.5" fill="#333" transform="rotate(-60 12.7 22.2)"/><circle cx="42.6" cy="39.5" r="1.5" fill="#333" transform="rotate(-60 42.6 39.5)"/><circle cx="36.2" cy="15.6" r="1.5" fill="#333" transform="rotate(-60 36.2 15.6)"/><circle cx="18.7" cy="45.9" r="1.5" fill="#333" transform="rotate(-60 18.7 45.9)"/></svg>'
|
|
70
70
|
}) }}
|
|
71
71
|
{{ usp({
|
|
72
72
|
title: "Hassle-free handling",
|
|
73
|
-
content: "Suitable for full-lab integration, FORJ is easy to install and provides a safe and user-friendly interface, so you can quickly get up and running
|
|
73
|
+
content: "<p>Suitable for full-lab integration, FORJ is easy to install and provides a safe and user-friendly interface, so you can quickly get up and running.</p>",
|
|
74
74
|
size: "c-h--step-1",
|
|
75
75
|
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 55 55"><path stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.3 5 20.6 27.3c-9-15-16.6-12.8-17.7-9.5-.2.5 0 1 .4 1.4l5.9 6.2c3.5 3.5 1.9 12.2 5.2 15.6l9.6 9.6c2.7 2.6 8.8 3.2 12 0L49.5 37c2.8-3-.6-7.4-4.9-4.8 5.3-3.6.9-10-3.4-6 4.4-4.6-.7-8.6-3.7-6.2L48.1 10c3-3.2-1.3-8.4-4.8-4.9Z"/><path stroke="#00A2C2" stroke-linecap="round" stroke-width="3" d="M15.2 10.4 11 6.2M28 10.4 32 6.2M23.8 8.6l1.6-6.3M19.3 8.6l-1.6-6.3"/></svg>'
|
|
76
76
|
}) }}
|
|
@@ -89,19 +89,19 @@ tags: 'patterns'
|
|
|
89
89
|
title: "Compliance standards",
|
|
90
90
|
classes: 'c-usp c-usp--center',
|
|
91
91
|
size: "c-h--step-1",
|
|
92
|
-
icon: '<svg
|
|
92
|
+
icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2321 61.8166V12.3395H42.0331V24.978C42.0331 26.819 43.5255 28.3114 45.3664 28.3114H58.0049V32.4505H62.0049V26.3114C62.0049 25.7809 61.7942 25.2722 61.4191 24.8971L45.4473 8.9253C45.0722 8.55023 44.5635 8.33952 44.0331 8.33952H13.5654C11.7245 8.33952 10.2321 9.8319 10.2321 11.6729V62.4833C10.2321 64.3243 11.7245 65.8166 13.5654 65.8166H37.3049C36.0491 64.6232 34.7219 63.1755 33.9949 61.8166H14.2321ZM55.1765 24.3114L46.0331 15.1679V24.3114H55.1765Z" fill="#333333"/><path d="M60.6725 39.4727H42.0449C41.3085 39.4727 40.7116 40.0661 40.7116 40.8024V57.3984C40.7116 61.9447 51.3587 66.6757 51.3587 66.6757C51.3587 66.6757 62.0059 61.9447 62.0059 57.3984V40.8024C62.0059 40.0661 61.4089 39.4727 60.6725 39.4727Z" fill="#00A2C2" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>'
|
|
93
93
|
}) }}
|
|
94
94
|
{{ usp({
|
|
95
95
|
title: "Instant monitoring",
|
|
96
96
|
classes: 'c-usp c-usp--center',
|
|
97
97
|
size: "c-h--step-1",
|
|
98
|
-
icon: '<svg
|
|
98
|
+
icon: '<svg viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.99997 16.1327C5.99997 14.66 7.19388 13.4661 8.66664 13.4661H63.3333C64.8061 13.4661 66 14.66 66 16.1327V50.7994C66 52.2722 64.8061 53.4661 63.3333 53.4661H8.66664C7.19388 53.4661 5.99997 52.2722 5.99997 50.7994V16.1327Z" stroke="#333333" stroke-width="4" stroke-linejoin="round"/><path d="M10.3844 37.3932H20.5234L22.1246 43.1309L26.6614 28.3195L31.732 47.0004L39.3378 20.3134L45.209 41.9299L48.5239 32.0863L50.2785 37.3932H61.757" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="30.3997" y="53.4661" width="11.2086" height="11.0145" fill="#333333" stroke="#333333" stroke-width="4" stroke-linejoin="round"/><path d="M25.7255 64.4806H46.2745" stroke="#333333" stroke-width="4" stroke-linecap="round"/></svg>'
|
|
99
99
|
}) }}
|
|
100
100
|
{{ usp({
|
|
101
101
|
title: "Peerless quality control",
|
|
102
102
|
classes: 'c-usp c-usp--center',
|
|
103
103
|
size: "c-h--step-1",
|
|
104
|
-
icon: '<svg
|
|
104
|
+
icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.1035 27.9854C24.1035 34.6127 29.4761 39.9854 36.1035 39.9854C42.7308 39.9854 48.1035 34.6127 48.1035 27.9854C48.1035 21.3579 42.7308 15.9854 36.1035 15.9854C29.4761 15.9854 24.1035 21.3579 24.1035 27.9854Z" fill="#00A2C2"/><circle cx="36.1035" cy="27.9854" r="22" stroke="#333333" stroke-width="4"/><path d="M22.3356 45.4453V67.5621C22.3356 67.5726 22.3471 67.579 22.356 67.5735L35.1829 59.5477C35.6155 59.277 36.1647 59.277 36.5974 59.5477L49.4243 67.5735C49.4331 67.579 49.4447 67.5726 49.4447 67.5621V45.4453" stroke="#333333" stroke-width="4"/></svg>'
|
|
105
105
|
}) }}
|
|
106
106
|
{{ usp({
|
|
107
107
|
title: "Expert support on hand",
|
|
@@ -113,13 +113,13 @@ tags: 'patterns'
|
|
|
113
113
|
title: "Industry-leading solutions",
|
|
114
114
|
classes: 'c-usp c-usp--center',
|
|
115
115
|
size: "c-h--step-1",
|
|
116
|
-
icon: '<svg
|
|
116
|
+
icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="36.1035" cy="36.9854" r="27.3333" stroke="#333333" stroke-width="4"/><path d="M42.0824 42.4073L48.8164 25.5725C49.1429 24.7561 48.3328 23.9461 47.5165 24.2726L30.6817 31.0065C30.4276 31.1082 30.2262 31.3095 30.1246 31.5636L23.3907 48.3984C23.0641 49.2147 23.8742 50.0248 24.6905 49.6983L41.5253 42.9644C41.7794 42.8627 41.9808 42.6614 42.0824 42.4073Z" fill="#00A2C2"/></svg>'
|
|
117
117
|
}) }}
|
|
118
118
|
{{ usp({
|
|
119
119
|
title: "Training and consultancy",
|
|
120
120
|
classes: 'c-usp c-usp--center',
|
|
121
121
|
size: "c-h--step-1",
|
|
122
|
-
icon: '<svg
|
|
122
|
+
icon: '<svg viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.1102 56.0754L66.3828 47.1023L69.6554 56.0754H63.1102Z" fill="#00A2C2" stroke="#00A2C2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M63.3137 27.7098L34.7403 10.9539C34.3238 10.7096 33.8079 10.7096 33.3914 10.9539L6.77935 26.5597C5.90087 27.0748 5.90087 28.3448 6.77935 28.86L12.2957 32.0949M63.3137 27.7098L55.4893 32.4095M63.3137 27.7098L65.7256 29.1286C66.1329 29.3682 66.3829 29.8054 66.3829 30.2778V46.097M12.2957 32.0949L33.3944 44.4675C33.8093 44.7108 34.323 44.7118 34.7389 44.4701L55.4893 32.4095M12.2957 32.0949V52.871C12.2957 53.2848 12.4942 53.6807 12.8237 53.9311C29.4027 66.5294 39.8245 66.7397 55.0152 53.93C55.3131 53.6788 55.4893 53.3029 55.4893 52.9132V32.4095" stroke="#333333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
|
|
123
123
|
}) }}
|
|
124
124
|
</div>
|
|
125
125
|
</div>
|