1313 Start a migration <span aria-hidden =" true" >→ ; </span >
1414 </button >
1515 </div >
16- <div class =" hero-highlights" aria-label =" WPM Pulse benefits" >
17- <div v-for =" highlight in heroHighlights" :key =" highlight.title" class =" hero-highlight" >
18- <span class =" hero-highlight__icon" aria-hidden =" true" ><mc-icon :icon =" highlight.icon" size =" 18" /></span >
19- <span >
20- <strong >{{ highlight.title }}</strong >
21- <small >{{ highlight.description }}</small >
22- </span >
23- </div >
24- </div >
2516 </div >
2617 <div class =" hero-image" role =" img" aria-label =" Colleagues collaborating around a table" />
2718 </section >
@@ -155,13 +146,6 @@ onMounted(() => {
155146
156147onBeforeUnmount (() => exploreResizeObserver? .disconnect ())
157148
158- const heroHighlights = [
159- { icon: ' mi-shield-check' , title: ' Govern' , description: ' Toll gates, approvals & audit-ready evidence' },
160- { icon: ' mi-arrow-right' , title: ' Execute' , description: ' One standard lifecycle for every migration' },
161- { icon: ' mi-users' , title: ' Engage' , description: ' Business, MSPs & partners connected' },
162- { icon: ' mi-chart-bars-vertical' , title: ' Measure' , description: ' Portfolio insight & value realised' }
163- ]
164-
165149const exploreCards = [
166150 {
167151 kicker: ' Track your migrations' ,
@@ -250,16 +234,15 @@ const go = (route) => router.push(route)
250234
251235.welcome - scroll { display: flex; flex: 1 1 auto; flex- direction: column; min- height: 0 ; overflow- x: hidden; overflow- y: auto; padding- bottom: 0 ; }
252236.hero - section, .hub - section { margin: 0 ; width: 100 % ; }
253- .hero - section { background: linear- gradient (120deg , #eaf6fa 0 % , #f8fcfd 50 % , #edf7fa 100 % ); border- bottom: 1px solid var (-- line); display: grid; flex- shrink: 0 ; grid- template- columns: repeat ( 2 , minmax (0 , 1fr ) ); min- height: clamp (290px , 33vh , 350px ); }
254- .hero - copy { align- self : center; background: transparent; min- width: 0 ; padding: 16px clamp ( 24px , 2vw , 32px ) 16px 24px ; }
237+ .hero - section { background: linear- gradient (120deg , #eaf6fa 0 % , #f8fcfd 50 % , #edf7fa 100 % ); border- bottom: 1px solid var (-- line); display: grid; flex- shrink: 0 ; grid- template- columns: minmax ( 0 , 1 . 08fr ) minmax (0 , 1fr ); min- height: clamp (290px , 33vh , 350px ); }
238+ .hero - copy { align- self : center; background: transparent; min- width: 0 ; padding: 32px ; }
255239.eyebrow , .card - kicker { color: var (-- blue); font- size: 10px ; font- weight: 800 ; letter- spacing: .14em ; margin: 0 ; text- transform: uppercase; }
256- .hero - title { color: var (-- navy); font- family: ' Maersk Headline' , ' Maersk Text' , sans- serif; font- size: clamp (28px , 4vw , 40px ); font- weight: 700 ; letter- spacing: - .02em ; line- height: 1.15 ; margin: 0 0 12px ; }
257- .hero - title { position: relative; top: - 20px ; }
240+ .hero - title { color: var (-- navy); font- family: ' Maersk Headline' , ' Maersk Text' , sans- serif; font- size: 40px ; font- weight: 700 ; letter- spacing: 0 ; line- height: 1.15 ; margin: 0 0 28px ; }
258241.hero - title span { color: inherit; }
259242.eyebrow span { color: var (-- cyan); }
260- .hero - slogan { color: var (-- blue); font- family: ' Maersk Headline' , ' Maersk Text' , sans- serif; font- size: clamp ( 18px , 2vw , 24px ) ; font- weight: 700 ; letter- spacing: - . 025em ; line- height: 1.08 ; margin: 0 0 13px 12px ; white - space : nowrap ; }
261- .hero - description { color: #60758a ; font- size: 15px ; line- height: 1.55 ; margin: 0 ; max- width: 430px ; }
262- .hero - actions { display: flex; flex- wrap: wrap; gap: 8px ; margin- top: 14px ; }
243+ .hero - slogan { color: var (-- blue); font- family: ' Maersk Headline' , ' Maersk Text' , sans- serif; font- size: 22px ; font- weight: 700 ; letter- spacing: 0 ; line- height: 1.4 ; margin: 0 0 24px ; text - wrap : balance ; }
244+ .hero - description { color: #60758a ; font- size: 15px ; line- height: 1.55 ; margin: 0 ; max- width: 460px ; }
245+ .hero - actions { display: flex; flex- wrap: wrap; gap: 8px ; margin- top: 22px ; }
263246.button { border: 1px solid var (-- navy); border- radius: 3px ; cursor: pointer; font: 700 12px ' Maersk Text' , sans- serif; padding: 11px 16px ; transition: transform .2s ease, box- shadow .2s ease; }
264247.button : hover { box- shadow: 0 5px 12px rgba (11 , 43 , 75 , .16 ); transform: translateY (- 2px ); }
265248.button -- primary { background: var (-- navy); color: #fff; }
@@ -316,11 +299,11 @@ const go = (route) => router.push(route)
316299@keyframes reveal { from { opacity: 0 ; } to { opacity: 1 ; } }
317300@media (min - width : 821px ) {
318301 .hero - section { min- height: calc (clamp (290px , 33vh , 350px ) + 50px ); }
319- .hero - copy { padding- top: 37px ; padding- bottom: 37px ; }
320- .hero - title { font- size: clamp ( 28px , 3vw , 34px ) ; margin- bottom: 8px ; }
321- .hero - slogan { font- size: 20px ; margin- bottom: 8px ; }
322- .hero - description { font- size: 13px ; line- height: 1.35 ; }
323- .hero - actions { margin- top: 10px ; }
302+ .hero - copy { padding- top: 32px ; padding- bottom: 32px ; }
303+ .hero - title { font- size: 40px ; margin- bottom: 28px ; }
304+ .hero - slogan { font- size: 22px ; margin- bottom: 24px ; }
305+ .hero - description { font- size: 15px ; line- height: 1.55 ; }
306+ .hero - actions { margin- top: 22px ; }
324307 .hero - highlights { gap: 10px ; margin- top: 14px ; }
325308 .hero - highlight { gap: 4px ; }
326309 .hero - highlight__icon { height: 28px ; width: 28px ; }
@@ -337,15 +320,15 @@ const go = (route) => router.push(route)
337320@media (prefers - reduced - motion : reduce ) { .explore - card { animation: none; } .button : hover, .explore - card: hover { transform: none; } }
338321@media (max - width : 820px ) { .hero - section { grid- template- columns: 1fr ; } .hero - copy { padding: 40px 24px 34px ; } .hero - image { clip- path: none; min- height: 230px ; } .hero - highlights { gap: 14px 20px ; } .explore - grid { grid- auto- columns: min (340px , calc (100vw - 104px )); grid- template- rows: minmax (290px , auto); } .section - heading { align- items: start; grid- template- columns: 1fr ; } .section - note { text- align: left; } }
339322@media (max - width : 820px ) { .hub - principles { grid- template- columns: repeat (2 , minmax (0 , 1fr )); } }
340- @media (min- width: 821px ) and (max - width : 1100px ) { .hero - slogan { font- size: clamp ( 14px , 1 . 7vw , 18px ) ; } }
341- @media (max - width : 520px ) { .hero - title { font- size: 26px ; } .hero - slogan { font- size: clamp ( 11px , 3 . 4vw , 18px ) ; margin- left: 0 ; } .hero - highlights { grid- template- columns: repeat (2 , minmax (0 , 1fr )); } .hub - principles { grid- template- columns: 1fr ; } }
323+ @media (min- width: 821px ) and (max - width : 1100px ) { .hero - title { font- size: 32px ; } . hero - slogan { font - size : 18px ; } }
324+ @media (max - width : 520px ) { .hero - title { font- size: 28px ; } .hero - slogan { font- size: 18px ; margin- left: 0 ; } .hero - highlights { grid- template- columns: repeat (2 , minmax (0 , 1fr )); } .hub - principles { grid- template- columns: 1fr ; } }
342325@media (min- width: 821px ) and (max - height : 850px ) {
343326 .hero - section { min- height: 280px ; }
344- .hero - copy { padding: 35px 20px 35px 24px ; }
345- .hero - title { font- size: 30px ; line- height: 1.05 ; margin- bottom: 6px ; }
346- .hero - slogan { font- size: 16px ; line- height: 1.02 ; margin- bottom: 7px ; }
347- .hero - description { font- size: 13px ; line- height: 1.35 ; }
348- .hero - actions { margin- top: 8px ; }
327+ .hero - copy { padding: 28px 24px ; }
328+ .hero - title { font- size: 34px ; line- height: 1.15 ; margin- bottom: 24px ; }
329+ .hero - slogan { font- size: 20px ; line- height: 1.4 ; margin- bottom: 20px ; }
330+ .hero - description { font- size: 14px ; line- height: 1.5 ; }
331+ .hero - actions { margin- top: 18px ; }
349332 .button { padding: 8px 12px ; }
350333 .hero - highlights { gap: 8px ; margin- top: 10px ; }
351334 .hero - highlight { gap: 4px ; }
@@ -377,11 +360,11 @@ const go = (route) => router.push(route)
377360}
378361@media (min- width: 821px ) and (max - height : 700px ) {
379362 .hero - section { min- height: 240px ; }
380- .hero - copy { padding- top: 31px ; padding- bottom: 31px ; }
381- .hero - title { font- size: 26px ; margin- bottom: 4px ; }
382- .hero - slogan { font- size: 14px ; line- height: 1 ; margin- bottom: 5px ; }
383- .hero - description { font- size: 11px ; line- height: 1.25 ; }
384- .hero - actions { margin- top: 5px ; }
363+ .hero - copy { padding- top: 24px ; padding- bottom: 24px ; }
364+ .hero - title { font- size: 32px ; margin- bottom: 20px ; }
365+ .hero - slogan { font- size: 18px ; line- height: 1.35 ; margin- bottom: 16px ; }
366+ .hero - description { font- size: 13px ; line- height: 1.45 ; }
367+ .hero - actions { margin- top: 16px ; }
385368 .button { padding: 6px 10px ; }
386369 .hero - highlights { gap: 6px ; margin- top: 7px ; }
387370 .hero - highlight { gap: 2px ; }
0 commit comments