From: soufiane Date: Fri, 26 May 2023 10:46:24 +0000 (+0200) Subject: wip #5941 @0:10 ajout images resolutions X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9b85b0802f147a34c0511959561e4a1d15077dae;p=pomerleau.git wip #5941 @0:10 ajout images resolutions --- diff --git a/.idea/deployment.xml b/.idea/deployment.xml new file mode 100644 index 0000000..2e00962 --- /dev/null +++ b/.idea/deployment.xml @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/.idea/sshConfigs.xml b/.idea/sshConfigs.xml new file mode 100644 index 0000000..20189f1 --- /dev/null +++ b/.idea/sshConfigs.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/webServers.xml b/.idea/webServers.xml new file mode 100644 index 0000000..8f5f3a1 --- /dev/null +++ b/.idea/webServers.xml @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/app.css b/app.css index 00c20a1..0d6f652 100644 --- a/app.css +++ b/app.css @@ -584,6 +584,7 @@ b { position: absolute; z-index: -1; left: calc((-100vw + 100%) / 2); + top: 0.5ch; } .app-intro .container { position: relative; diff --git a/app.css.map b/app.css.map index 1f7a382..4593982 100644 --- a/app.css.map +++ b/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":"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ACE;EACA;EACA;EACA,kBFvUJ;EEwUI;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFxVD;;AE0VD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AACA;EACE;EACA;EACA;EACA;;AFjWJ;EE6VE;IAOI;IACA;IACA;IACA;;;AFvWN;EE6VE;IAaI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;;AFxXJ;EEqXE;IAKI;IACA;;;AAGF;EACE;;AACF;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFvZJ;EE+YE;IAUI;IACA;IACA;;EACA;IACE;;;AAEJ;EACE,OFxaJ;;AE0aA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,OFtcF;EEucE;;AACA;EACE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":"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ACE;EACA;EACA;EACA,kBFvUJ;EEwUI;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFzVD;;AE2VD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AACA;EACE;EACA;EACA;EACA;;AFlWJ;EE8VE;IAOI;IACA;IACA;IACA;;;AFxWN;EE8VE;IAaI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;;AFzXJ;EEsXE;IAKI;IACA;;;AAGF;EACE;;AACF;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFxZJ;EEgZE;IAUI;IACA;IACA;;EACA;IACE;;;AAEJ;EACE,OFzaJ;;AE2aA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,OFvcF;EEwcE;;AACA;EACE","file":"app.css"} \ No newline at end of file diff --git a/app.min.css b/app.min.css new file mode 100644 index 0000000..5d5a74a --- /dev/null +++ b/app.min.css @@ -0,0 +1 @@ +@charset "UTF-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-Book.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Book.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Bold.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-BookItalic.woff2") format("woff2"),url("assets/fonts/MaisonNeue-BookItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Medium.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}:root{--space-3xs:clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);--space-2xs:clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);--space-xs:clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);--space-s:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--space-m:clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);--space-l:clamp(2.25rem, calc(2.25rem + 0.00vw), 2.25rem);--space-xl:clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);--space-2xl:clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);--space-3xl:clamp(5.25rem, calc(5.25rem + 0.00vw), 5.25rem);--space-4xl:clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);--space-3xs-2xs:clamp(0.25rem, calc(0.18rem + 0.30vw), 0.50rem);--space-2xs-xs:clamp(0.50rem, calc(0.43rem + 0.30vw), 0.75rem);--space-xs-s:clamp(0.75rem, calc(0.68rem + 0.30vw), 1.00rem);--space-s-m:clamp(1.00rem, calc(0.86rem + 0.61vw), 1.50rem);--space-m-l:clamp(1.50rem, calc(1.30rem + 0.91vw), 2.25rem);--space-l-xl:clamp(2.25rem, calc(2.05rem + 0.91vw), 3.00rem);--space-xl-2xl:clamp(3.00rem, calc(2.73rem + 1.21vw), 4.00rem);--space-2xl-3xl:clamp(4.00rem, calc(3.66rem + 1.52vw), 5.25rem);--space-3xl-4xl:clamp(5.25rem, calc(5.05rem + 0.91vw), 6.00rem);--space-l-xl-custom:clamp(2.00rem, calc(1.73rem + 1.21vw), 3.00rem);--space-l-3xl:clamp(2.25rem, calc(1.43rem + 3.64vw), 5.25rem);--space-2xl-5xl:clamp(3.38rem, calc(0.03rem + 14.85vw), 15.63rem);--space-4xs-6xl:clamp(2.25rem, calc(-2.86rem + 12.73vw), 10.50rem);--space-xl-6xl:clamp(3.00rem, calc(0.95rem + 9.09vw), 10.50rem);--space-m-xl:clamp(1.50rem, calc(1.09rem + 1.82vw), 3.00rem);--space-custom-title-1:clamp(3.94rem, calc(2.91rem + 4.55vw), 7.69rem);--space-custom-title-3:clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem);--step--2:clamp(0.64rem, calc(0.71rem + -0.07vw), 0.69rem);--step--1:clamp(0.80rem, calc(0.84rem + -0.04vw), 0.83rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--step-1:clamp(1.20rem, calc(1.19rem + 0.06vw), 1.25rem);--step-2:clamp(1.44rem, calc(1.41rem + 0.15vw), 1.56rem);--step-3:clamp(1.73rem, calc(1.67rem + 0.27vw), 1.95rem);--step-4:clamp(2.07rem, calc(1.97rem + 0.45vw), 2.44rem);--step-5:clamp(2.49rem, calc(2.33rem + 0.68vw), 3.05rem);--step-7:clamp(3.58rem, calc(3.26rem + 1.44vw), 4.77rem);--step-10:clamp(3.00rem, calc(0.65rem + 10.45vw), 11.63rem)}@keyframes line-first{0%{width:0}100%{width:100%}}@keyframes line-second{0%{width:0}100%{width:100vw}}@keyframes overlay{0%{width:100%}100%{width:0}}body{background-color:#07090a;font-family:"Maison Neue Book",sans-serif;color:#fff;line-height:1.25;overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bg-blue{background-color:#0a7dff}.color-blue{color:#0a7dff}.italic{font-style:italic}.container{width:100%;margin:0 auto}@media screen and (min-width:1680px){.container{width:100%;max-width:1680px}}.container:not(.full){padding:0 var(--space-l-3xl);box-sizing:border-box}.grid{display:grid;gap:32px}@media screen and (min-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}.grid .grid{grid-template-columns:repeat(1,1fr)}@media screen and (min-width:1024px){.grid .grid{grid-template-columns:repeat(1,358px)}}@media screen and (min-width:1344px){.grid .grid{grid-template-columns:repeat(2,278px)}}.grid-item{overflow:hidden}@media screen and (min-width:1024px){.grid-item{width:100%}}@media screen and (min-width:1024px){.grid-reverse .grid-item:first-child{grid-column:2;grid-row:1}.grid-reverse .grid-item:nth-child(2){grid-column:1;grid-row:1}}@media screen and (min-width:1024px){.grid-reverse .grid{margin-left:var(--space-4xs-6xl)!important}}.gap-xl{gap:0 var(--space-4xs-6xl)}.flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.wrap{flex-wrap:wrap}@media screen and (min-width:1680px){body>.app-section{margin-top:var(--space-4xs-6xl)}}@media screen and (min-width:1680px){body>.app-section~.app-section{margin-top:0}}.border-title{width:100%;font-size:var(--step-3);margin-bottom:var(--space-l-xl-custom);padding:18px 0;position:relative}@media screen and (max-width:1680px){.border-title{margin-top:var(--space-xl-6xl)}}.border-title.active:after,.border-title.active:before{width:100%}.border-title:after,.border-title:before{content:"";position:absolute;width:0;height:1px;background-color:#0a7dff;left:0;transition:width cubic-bezier(.82, 0, .65, .93) .9s}.border-title:before{top:0}.border-title:after{bottom:0}.text-center{text-align:center}.text-right{text-align:right}.text-md{font-size:var(--step-2)}.text-xl{font-size:var(--step-7)}.font-neue{font-family:"Maison Neue",sans-serif}.font-book{font-family:"Maison Neue Book",sans-serif}b{font-weight:700}@media screen and (min-width:1024px){.max-content{width:-moz-max-content;width:max-content}}.relative{position:relative}.app-header{padding-top:var(--space-l-3xl);padding-bottom:100px}@media screen and (max-width:1024px){.app-header{padding-bottom:288px}}.app-header .logo{position:relative;z-index:1;max-width:100px;display:inline-block}@media screen and (min-width:1024px){.app-header .logo{max-width:160px}}.app-header .logo img{width:100%}.app-header .video-container-mobile{width:288px;height:288px;position:absolute;top:0;right:0}@media screen and (min-width:1024px){.app-header .video-container-mobile{display:none}}.app-header .video-container-mobile svg,.app-header .video-container-mobile video{position:absolute;width:100%}.app-header .video-container-mobile video{height:100%;-o-object-fit:cover;object-fit:cover}.app-banner{overflow:hidden;padding-bottom:169px}.app-banner .container{box-sizing:border-box;padding:0 var(--space-l-3xl);max-width:100%}.app-banner p{font-size:var(--step-10);position:relative}.app-banner p.first{padding-left:var(--space-custom-title-1)}.app-banner p.second{width:-moz-max-content;width:max-content;position:relative}@media screen and (min-width:1024px){.app-banner p.second:after{display:none}}.app-banner p.second:after{content:"";width:0;position:absolute;height:1px;left:calc(100% + 24px);background-color:#fff;top:45%;animation-name:line-second;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}@media screen and (min-width:768px){.app-banner p.third{padding-left:var(--space-custom-title-3)}}@media screen and (max-width:768px){.app-banner .last-phrase{flex-direction:column-reverse;padding-left:var(--space-custom-title-3)}}.app-banner span{font-size:var(--step-3);transform:translateY(25%)}@media screen and (max-width:1024px){.app-banner span{width:100%;max-width:200px;font-size:18px}}@media screen and (max-width:768px){.app-banner span{font-size:16px}}.app-banner .video-container{height:0;padding-bottom:24.52%;width:24.52%;position:absolute;top:2.2vw;right:var(--space-l-3xl);display:none}@media screen and (min-width:1024px){.app-banner .video-container{display:block}}@media screen and (min-width:1680px){.app-banner .video-container{right:145px}}.app-banner .video-container:after,.app-banner .video-container:before{content:"";height:1px;background-color:#fff;position:absolute;bottom:29%;z-index:4}.app-banner .video-container:before{width:93%;left:-117%}@media screen and (min-width:1024px){.app-banner .video-container:before{animation-name:line-first;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}}@media screen and (min-width:1680px){.app-banner .video-container:before{width:0}}.app-banner .video-container:after{width:100vw;left:80%}@media screen and (min-width:1024px){.app-banner .video-container:after{width:0;animation-name:line-second;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:1s;animation-duration:1s}}.app-banner .video-container .overlay{position:absolute;width:100%;height:100%;top:0;right:0;background:#0a7dff;z-index:3;transform:skewX(-35deg);animation-name:overlay;animation-fill-mode:forwards;animation-duration:.8s;animation-delay:.7s}.app-banner .video-container svg,.app-banner .video-container video{position:absolute;width:100%}.app-banner .video-container video{height:100%;-o-object-fit:cover;object-fit:cover}.app-intro{padding:var(--space-2xl-5xl);position:relative;overflow:hidden}@media screen and (min-width:768px){.app-intro{font-size:var(--step-4)}}.app-intro.active .line:before{animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.6,0,0.3,1);animation-duration:.75s;animation-name:line-second}.app-intro .line{position:relative}.app-intro .line:before{content:"";width:0;height:1px;background-color:#fff;position:absolute;z-index:-1;left:calc((-100vw + 100%)/ 2);top:.5ch}.app-intro .container{position:relative;z-index:1}.app-intro .container:after,.app-intro .container:before{content:"";width:calc(100% + 84px);position:absolute;height:100%;background-color:#0a7dff}.app-intro .container:before{content:"";width:110%;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.app-intro .container:after{height:0}.app-section{margin-bottom:var(--space-4xs-6xl)}.app-section .image{height:0;padding-bottom:100%;margin-bottom:36px;position:relative}@media screen and (min-width:1024px){.app-section .image{padding-bottom:0;position:sticky;height:80vh;top:0}}@media screen and (min-width:1680px){.app-section .image{height:72vh;top:15vh}}.app-section .image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-o-object-position:0 38%;object-position:0 38%}.app-section .text{width:100%;max-width:85%;margin:auto}@media screen and (min-width:1024px){.app-section .text{margin:initial;width:-moz-max-content;width:max-content}}.app-section .content p:not(:last-of-type){margin:0 0 1.73rem}.app-section .content h3{margin-bottom:1rem}.app-section .signature{margin-top:32px}.app-section .signature.pp img{max-width:80px}.app-section .signature.fp img{max-width:60px}.app-section .signature img{flex-shrink:0}.app-section .signature p{font-size:12px}.app-footer .block{width:100%;height:0;padding-bottom:100%;background-repeat:no-repeat;background-size:cover;background-position:0 50%;position:relative;overflow:hidden}@media screen and (min-width:1024px){.app-footer .block{width:50%;height:100vh;padding:0}.app-footer .block:hover img{transform:scale(1.05)}}.app-footer .block *{color:#fff}.app-footer img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;left:0;top:0;-o-object-position:left center;object-position:left center;transition:all .5s cubic-bezier(.19, 1, .22, 1)}.app-footer .text{padding:var(--space-xl-6xl) 0;position:relative;z-index:2}.app-footer .title{margin-bottom:var(--space-m-xl)}.app-footer .subtitle{font-size:25px;margin-bottom:var(--space-l-xl)}.app-footer .link-block{display:inline-block;width:100%;height:100%}.app-footer .link{color:#fff;font-size:var(--step-4)}.app-footer .link svg{margin-left:18px} \ No newline at end of file diff --git a/assets/images/Pomerleau_PDG_1500.jpg b/assets/images/Pomerleau_PDG_1500.jpg new file mode 100644 index 0000000..939549f Binary files /dev/null and b/assets/images/Pomerleau_PDG_1500.jpg differ diff --git a/assets/images/Pomerleau_PDG_500.jpg b/assets/images/Pomerleau_PDG_500.jpg new file mode 100644 index 0000000..73e289c Binary files /dev/null and b/assets/images/Pomerleau_PDG_500.jpg differ diff --git a/assets/images/Pomerleau_PDG_720.jpg b/assets/images/Pomerleau_PDG_720.jpg new file mode 100644 index 0000000..7e1c26a Binary files /dev/null and b/assets/images/Pomerleau_PDG_720.jpg differ diff --git a/assets/images/grue_1500x1500.jpg b/assets/images/grue_1500x1500.jpg new file mode 100644 index 0000000..92c32bc Binary files /dev/null and b/assets/images/grue_1500x1500.jpg differ diff --git a/assets/images/grue_500x500.jpg b/assets/images/grue_500x500.jpg new file mode 100644 index 0000000..2af143f Binary files /dev/null and b/assets/images/grue_500x500.jpg differ diff --git a/assets/images/grue_720.jpg b/assets/images/grue_720.jpg new file mode 100644 index 0000000..1b06244 Binary files /dev/null and b/assets/images/grue_720.jpg differ diff --git a/assets/images/rapport-activite_1500.jpg b/assets/images/rapport-activite_1500.jpg new file mode 100644 index 0000000..fc857b5 Binary files /dev/null and b/assets/images/rapport-activite_1500.jpg differ diff --git a/assets/images/rapport-activite_500.jpg b/assets/images/rapport-activite_500.jpg new file mode 100644 index 0000000..b7a81a2 Binary files /dev/null and b/assets/images/rapport-activite_500.jpg differ diff --git a/assets/images/rapport-activite_720.jpg b/assets/images/rapport-activite_720.jpg new file mode 100644 index 0000000..4a15783 Binary files /dev/null and b/assets/images/rapport-activite_720.jpg differ diff --git a/assets/images/rapport-esg_1500.jpg b/assets/images/rapport-esg_1500.jpg new file mode 100644 index 0000000..2672849 Binary files /dev/null and b/assets/images/rapport-esg_1500.jpg differ diff --git a/assets/images/rapport-esg_500.jpg b/assets/images/rapport-esg_500.jpg new file mode 100644 index 0000000..914a68a Binary files /dev/null and b/assets/images/rapport-esg_500.jpg differ diff --git a/assets/images/rapport-esg_720.jpg b/assets/images/rapport-esg_720.jpg new file mode 100644 index 0000000..c6fd1dc Binary files /dev/null and b/assets/images/rapport-esg_720.jpg differ diff --git a/index.html b/index.html index 6543db1..c5bdf23 100644 --- a/index.html +++ b/index.html @@ -88,7 +88,11 @@
- + + + + +

@@ -148,7 +152,11 @@
- + + + + +
@@ -219,7 +227,11 @@
- + + + + +
@@ -237,7 +249,11 @@
- + + + + +

diff --git a/output.css b/output.css new file mode 100644 index 0000000..40e494f --- /dev/null +++ b/output.css @@ -0,0 +1,740 @@ +@charset "UTF-8"; +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + text-decoration: none; +} + +@font-face { + font-family: "Maison Neue Book"; + src: url("assets/fonts/MaisonNeue-Book.woff2") format("woff2"), url("assets/fonts/MaisonNeue-Book.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Maison Neue"; + src: url("assets/fonts/MaisonNeue-Bold.woff2") format("woff2"), url("assets/fonts/MaisonNeue-Bold.woff") format("woff"); + font-weight: bold; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Maison Neue Book"; + src: url("assets/fonts/MaisonNeue-BookItalic.woff2") format("woff2"), url("assets/fonts/MaisonNeue-BookItalic.woff") format("woff"); + font-weight: normal; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: "Maison Neue"; + src: url("assets/fonts/MaisonNeue-Medium.woff2") format("woff2"), url("assets/fonts/MaisonNeue-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; +} +:root { + /* Space 3xs: 4px → 4px */ + --space-3xs: clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem); + /* Space 2xs: 8px → 8px */ + --space-2xs: clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem); + /* Space xs: 12px → 12px */ + --space-xs: clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem); + /* Space s: 16px → 16px */ + --space-s: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem); + /* Space m: 24px → 24px */ + --space-m: clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem); + /* Space l: 36px → 36px */ + --space-l: clamp(2.25rem, calc(2.25rem + 0.00vw), 2.25rem); + /* Space xl: 48px → 48px */ + --space-xl: clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem); + /* Space 2xl: 64px → 64px */ + --space-2xl: clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem); + /* Space 3xl: 84px → 84px */ + --space-3xl: clamp(5.25rem, calc(5.25rem + 0.00vw), 5.25rem); + /* Space 4xl: 96px → 96px */ + --space-4xl: clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem); + /* One-up pairs */ + /* Space 3xs-2xs: 4px → 8px */ + --space-3xs-2xs: clamp(0.25rem, calc(0.18rem + 0.30vw), 0.50rem); + /* Space 2xs-xs: 8px → 12px */ + --space-2xs-xs: clamp(0.50rem, calc(0.43rem + 0.30vw), 0.75rem); + /* Space xs-s: 12px → 16px */ + --space-xs-s: clamp(0.75rem, calc(0.68rem + 0.30vw), 1.00rem); + /* Space s-m: 16px → 24px */ + --space-s-m: clamp(1.00rem, calc(0.86rem + 0.61vw), 1.50rem); + /* Space m-l: 24px → 36px */ + --space-m-l: clamp(1.50rem, calc(1.30rem + 0.91vw), 2.25rem); + /* Space l-xl: 36px → 48px */ + --space-l-xl: clamp(2.25rem, calc(2.05rem + 0.91vw), 3.00rem); + /* Space xl-2xl: 48px → 64px */ + --space-xl-2xl: clamp(3.00rem, calc(2.73rem + 1.21vw), 4.00rem); + /* Space 2xl-3xl: 64px → 84px */ + --space-2xl-3xl: clamp(4.00rem, calc(3.66rem + 1.52vw), 5.25rem); + /* Space 3xl-4xl: 84px → 96px */ + --space-3xl-4xl: clamp(5.25rem, calc(5.05rem + 0.91vw), 6.00rem); + /* Custom pairs */ + --space-l-xl-custom: clamp(2.00rem, calc(1.73rem + 1.21vw), 3.00rem); + /* Space l-3xl: 36px → 84px */ + --space-l-3xl: clamp(2.25rem, calc(1.43rem + 3.64vw), 5.25rem); + /* Space 2xl-5xl: 54px → 250px */ + --space-2xl-5xl: clamp(3.38rem, calc(0.03rem + 14.85vw), 15.63rem); + /* Space 4xs-6xl: 0px → 168px */ + --space-4xs-6xl: clamp(2.25rem, calc(-2.86rem + 12.73vw), 10.50rem); + /* Space 4xs-6xl: 48px → 168px */ + --space-xl-6xl: clamp(3.00rem, calc(0.95rem + 9.09vw), 10.50rem); + /* Space m-xl: 24px → 48px */ + --space-m-xl: clamp(1.50rem, calc(1.09rem + 1.82vw), 3.00rem); + --space-custom-title-1: clamp(3.94rem, calc(2.91rem + 4.55vw), 7.69rem); + --space-custom-title-3: clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem); + /* * + * * + * * + * Step -2: 11.11px → 10.24px */ + --step--2: clamp(0.64rem, calc(0.71rem + -0.07vw), 0.69rem); + /* Step -1: 13.33px → 12.80px */ + --step--1: clamp(0.80rem, calc(0.84rem + -0.04vw), 0.83rem); + /* Step 0: 16.00px → 16.00px */ + --step-0: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem); + /* Step 1: 19.20px → 20.00px */ + --step-1: clamp(1.20rem, calc(1.19rem + 0.06vw), 1.25rem); + /* Step 2: 23.04px → 25.00px */ + --step-2: clamp(1.44rem, calc(1.41rem + 0.15vw), 1.56rem); + /* Step 3: 27.65px → 31.25px */ + --step-3: clamp(1.73rem, calc(1.67rem + 0.27vw), 1.95rem); + /* Step 4: 33.18px → 39.06px */ + --step-4: clamp(2.07rem, calc(1.97rem + 0.45vw), 2.44rem); + /* Step 5: 39.81px → 48.83px */ + --step-5: clamp(2.49rem, calc(2.33rem + 0.68vw), 3.05rem); + /* Step 7: 57.33px → 76.29px */ + --step-7: clamp(3.58rem, calc(3.26rem + 1.44vw), 4.77rem); + --step-10: clamp(3.00rem, calc(0.65rem + 10.45vw), 11.63rem); +} + +@keyframes line-first { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} +@keyframes line-second { + 0% { + width: 0vw; + } + 100% { + width: 100vw; + } +} +@keyframes overlay { + 0% { + width: 100%; + } + 100% { + width: 0; + } +} +body { + background-color: #07090A; + font-family: "Maison Neue Book", sans-serif; + color: #ffffff; + line-height: 1.25; + overflow-x: hidden; + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.bg-blue { + background-color: #0A7DFF; +} + +.color-blue { + color: #0A7DFF; +} + +.italic { + font-style: italic; +} + +.container { + width: 100%; + margin: 0 auto; +} +@media screen and (min-width: 1680px) { + .container { + width: 100%; + max-width: 1680px; + } +} +.container:not(.full) { + padding: 0 var(--space-l-3xl); + box-sizing: border-box; +} + +.grid { + display: grid; + gap: 32px; +} +@media screen and (min-width: 1024px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} +.grid .grid { + grid-template-columns: repeat(1, 1fr); +} +@media screen and (min-width: 1024px) { + .grid .grid { + grid-template-columns: repeat(1, 358px); + } +} +@media screen and (min-width: 1344px) { + .grid .grid { + grid-template-columns: repeat(2, 278px); + } +} +.grid-item { + overflow: hidden; +} +@media screen and (min-width: 1024px) { + .grid-item { + width: 100%; + } +} +@media screen and (min-width: 1024px) { + .grid-reverse .grid-item:nth-child(1) { + grid-column: 2; + grid-row: 1; + } + .grid-reverse .grid-item:nth-child(2) { + grid-column: 1; + grid-row: 1; + } +} +@media screen and (min-width: 1024px) { + .grid-reverse .grid { + margin-left: var(--space-4xs-6xl) !important; + } +} + +.gap-xl { + gap: 0 var(--space-4xs-6xl); +} + +.flex { + display: flex; +} + +.justify-between { + justify-content: space-between; +} + +.align-center { + align-items: center; +} + +.wrap { + flex-wrap: wrap; +} + +@media screen and (min-width: 1680px) { + body > .app-section { + margin-top: var(--space-4xs-6xl); + } +} + +@media screen and (min-width: 1680px) { + body > .app-section ~ .app-section { + margin-top: 0; + } +} + +.border-title { + width: 100%; + font-size: var(--step-3); + margin-bottom: var(--space-l-xl-custom); + padding: 18px 0; + position: relative; +} +@media screen and (max-width: 1680px) { + .border-title { + margin-top: var(--space-xl-6xl); + } +} +.border-title.active:before, .border-title.active:after { + width: 100%; +} +.border-title:before, .border-title:after { + content: ""; + position: absolute; + width: 0; + height: 1px; + background-color: #0A7DFF; + left: 0; + transition: width cubic-bezier(0.82, 0, 0.65, 0.93) 0.9s; +} +.border-title:before { + top: 0; +} +.border-title:after { + bottom: 0; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-md { + font-size: var(--step-2); +} + +.text-xl { + font-size: var(--step-7); +} + +.font-neue { + font-family: "Maison Neue", sans-serif; +} + +.font-book { + font-family: "Maison Neue Book", sans-serif; +} + +b { + font-weight: bold; +} + +@media screen and (min-width: 1024px) { + .max-content { + width: -moz-max-content; + width: max-content; + } +} + +.relative { + position: relative; +} + +.app-header { + padding-top: var(--space-l-3xl); + padding-bottom: 100px; +} +@media screen and (max-width: 1024px) { + .app-header { + padding-bottom: 288px; + } +} +.app-header .logo { + position: relative; + z-index: 1; + max-width: 100px; + display: inline-block; +} +@media screen and (min-width: 1024px) { + .app-header .logo { + max-width: 160px; + } +} +.app-header .logo img { + width: 100%; +} +.app-header .video-container-mobile { + width: 288px; + height: 288px; + position: absolute; + top: 0; + right: 0; +} +@media screen and (min-width: 1024px) { + .app-header .video-container-mobile { + display: none; + } +} +.app-header .video-container-mobile video, +.app-header .video-container-mobile svg { + position: absolute; + width: 100%; +} +.app-header .video-container-mobile video { + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.app-banner { + overflow: hidden; + padding-bottom: 169px; +} +.app-banner .container { + box-sizing: border-box; + padding: 0 var(--space-l-3xl); + max-width: 100%; +} +.app-banner p { + font-size: var(--step-10); + position: relative; +} +.app-banner p.first { + padding-left: var(--space-custom-title-1); +} +.app-banner p.second { + width: -moz-max-content; + width: max-content; + position: relative; +} +@media screen and (min-width: 1024px) { + .app-banner p.second:after { + display: none; + } +} +.app-banner p.second:after { + content: ""; + width: 0; + position: absolute; + height: 1px; + left: calc(100% + 24px); + background-color: #ffffff; + top: 45%; + animation-name: line-second; + animation-timing-function: cubic-bezier(0.82, 0, 0.65, 0.93); + animation-fill-mode: forwards; + animation-duration: 0.8s; +} +@media screen and (min-width: 768px) { + .app-banner p.third { + padding-left: var(--space-custom-title-3); + } +} +@media screen and (max-width: 768px) { + .app-banner .last-phrase { + flex-direction: column-reverse; + padding-left: var(--space-custom-title-3); + } +} +.app-banner span { + font-size: var(--step-3); + transform: translateY(25%); +} +@media screen and (max-width: 1024px) { + .app-banner span { + width: 100%; + max-width: 200px; + font-size: 18px; + } +} +@media screen and (max-width: 768px) { + .app-banner span { + font-size: 16px; + } +} +.app-banner .video-container { + height: 0; + padding-bottom: 24.52%; + width: 24.52%; + position: absolute; + top: 2.2vw; + right: var(--space-l-3xl); + display: none; +} +@media screen and (min-width: 1024px) { + .app-banner .video-container { + display: block; + } +} +@media screen and (min-width: 1680px) { + .app-banner .video-container { + right: 145px; + } +} +.app-banner .video-container:before, .app-banner .video-container:after { + content: ""; + height: 1px; + background-color: #ffffff; + position: absolute; + bottom: 29%; + z-index: 4; +} +.app-banner .video-container:before { + width: 93%; + left: -117%; +} +@media screen and (min-width: 1024px) { + .app-banner .video-container:before { + animation-name: line-first; + animation-timing-function: cubic-bezier(0.82, 0, 0.65, 0.93); + animation-fill-mode: forwards; + animation-duration: 0.8s; + } +} +@media screen and (min-width: 1680px) { + .app-banner .video-container:before { + width: 0; + } +} +.app-banner .video-container:after { + width: 100vw; + left: 80%; +} +@media screen and (min-width: 1024px) { + .app-banner .video-container:after { + width: 0; + animation-name: line-second; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-delay: 1s; + animation-duration: 1s; + } +} +.app-banner .video-container .overlay { + position: absolute; + width: 100%; + height: 100%; + top: 0; + right: 0; + background: #0A7DFF; + z-index: 3; + transform: skewX(-35deg); + animation-name: overlay; + animation-fill-mode: forwards; + animation-duration: 0.8s; + animation-delay: 0.7s; +} +.app-banner .video-container video, +.app-banner .video-container svg { + position: absolute; + width: 100%; +} +.app-banner .video-container video { + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.app-intro { + padding: var(--space-2xl-5xl); + position: relative; + overflow: hidden; +} +@media screen and (min-width: 768px) { + .app-intro { + font-size: var(--step-4); + } +} +.app-intro.active .line:before { + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); + animation-duration: 0.75s; + animation-name: line-second; +} +.app-intro .line { + position: relative; +} +.app-intro .line:before { + content: ""; + width: 0; + height: 1px; + background-color: #ffffff; + position: absolute; + z-index: -1; + left: calc((-100vw + 100%) / 2); + top: 0.5ch; +} +.app-intro .container { + position: relative; + z-index: 1; +} +.app-intro .container:before, .app-intro .container:after { + content: ""; + width: calc(100% + 84px); + position: absolute; + height: 100%; + background-color: #0A7DFF; +} +.app-intro .container:before { + content: ""; + width: 110%; + height: 100%; + position: absolute; + left: 50%; + transform: translateX(-50%); +} +.app-intro .container:after { + height: 0; +} +.app-section { + margin-bottom: var(--space-4xs-6xl); +} +.app-section .image { + height: 0; + padding-bottom: 100%; + margin-bottom: 36px; + position: relative; +} +@media screen and (min-width: 1024px) { + .app-section .image { + padding-bottom: 0; + position: sticky; + height: 80vh; + top: 0; + } +} +@media screen and (min-width: 1680px) { + .app-section .image { + height: 72vh; + top: 15vh; + } +} +.app-section .image img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + -o-object-position: 0 38%; + object-position: 0 38%; +} +.app-section .text { + width: 100%; + max-width: 85%; + margin: auto; +} +@media screen and (min-width: 1024px) { + .app-section .text { + margin: initial; + width: -moz-max-content; + width: max-content; + } +} +.app-section .content p:not(:last-of-type) { + margin: 0 0 1.73rem; +} +.app-section .content h3 { + margin-bottom: 1rem; +} +.app-section .signature { + margin-top: 32px; +} +.app-section .signature.pp img { + max-width: 80px; +} +.app-section .signature.fp img { + max-width: 60px; +} +.app-section .signature img { + flex-shrink: 0; +} +.app-section .signature p { + font-size: 12px; +} +.app-footer .block { + width: 100%; + height: 0; + padding-bottom: 100%; + background-repeat: no-repeat; + background-size: cover; + background-position: 0 50%; + position: relative; + overflow: hidden; +} +@media screen and (min-width: 1024px) { + .app-footer .block { + width: 50%; + height: 100vh; + padding: 0; + } + .app-footer .block:hover img { + transform: scale(1.05); + } +} +.app-footer .block * { + color: #ffffff; +} +.app-footer img { + position: absolute; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + left: 0; + top: 0; + -o-object-position: left center; + object-position: left center; + transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); +} +.app-footer .text { + padding: var(--space-xl-6xl) 0; + position: relative; + z-index: 2; +} +.app-footer .title { + margin-bottom: var(--space-m-xl); +} +.app-footer .subtitle { + font-size: 25px; + margin-bottom: var(--space-l-xl); +} +.app-footer .link-block { + display: inline-block; + width: 100%; + height: 100%; +} +.app-footer .link { + color: #ffffff; + font-size: var(--step-4); +} +.app-footer .link svg { + margin-left: 18px; +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jc3MiLCJzYXNzL3Jlc2V0LnNhc3MiLCJzYXNzL2ZvbnRmYWNlLnNhc3MiLCJzYXNzL2hlbHBlcnMuc2FzcyIsInNhc3MvYW5pbWF0aW9ucy5zYXNzIiwic2Fzcy9hcHAuc2FzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxnQkFBZ0I7QUNBaEI7Ozs7Ozs7Ozs7Ozs7RUFhRSxTQUFBO0VBQ0EsVUFBQTtFQUNBLFNBQUE7RUFDQSxlQUFBO0VBQ0EsYUFBQTtFQUNBLHdCQUFBO0FERUY7O0FDQUEsZ0RBQUE7QUFDQTs7RUFFRSxjQUFBO0FER0Y7O0FDREE7RUFDRSxjQUFBO0FESUY7O0FDRkE7RUFDRSxnQkFBQTtBREtGOztBQ0hBO0VBQ0UsWUFBQTtBRE1GOztBQ0pBOztFQUVFLGFBQUE7QURPRjs7QUNMQTtFQUNFLHlCQUFBO0VBQ0EsaUJBQUE7QURRRjs7QUNOQTtFQUNFLHFCQUFBO0FEU0Y7O0FFcERBO0VBQ0UsK0JBQUE7RUFDQSx1SEFBQTtFQUNBLG1CQUFBO0VBQ0Esa0JBQUE7RUFDQSxrQkFBQTtBRnVERjtBRXBEQTtFQUNFLDBCQUFBO0VBQ0EsdUhBQUE7RUFDQSxpQkFBQTtFQUNBLGtCQUFBO0VBQ0Esa0JBQUE7QUZzREY7QUVuREE7RUFDRSwrQkFBQTtFQUNBLG1JQUFBO0VBQ0EsbUJBQUE7RUFDQSxrQkFBQTtFQUNBLGtCQUFBO0FGcURGO0FFbERBO0VBQ0UsMEJBQUE7RUFDQSwySEFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSxrQkFBQTtBRm9ERjtBR3BFQztFQUNDLHlCQUFBO0VBQ0EsNERBQUE7RUFFQSx5QkFBQTtFQUNBLDREQUFBO0VBRUEsMEJBQUE7RUFDQSwyREFBQTtFQUVBLHlCQUFBO0VBQ0EsMERBQUE7RUFFQSx5QkFBQTtFQUNBLDBEQUFBO0VBRUEseUJBQUE7RUFDQSwwREFBQTtFQUVBLDBCQUFBO0VBQ0EsMkRBQUE7RUFFQSwyQkFBQTtFQUNBLDREQUFBO0VBRUEsMkJBQUE7RUFDQSw0REFBQTtF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 */ \ No newline at end of file diff --git a/sass/app.sass b/sass/app.sass index 23344c8..e935903 100644 --- a/sass/app.sass +++ b/sass/app.sass @@ -331,6 +331,7 @@ b position: absolute z-index: -1 left: calc((-100vw + 100%) / 2) + top: 0.5ch .container