diff --git a/js/color.js b/js/color.js new file mode 100644 index 0000000..91844c4 --- /dev/null +++ b/js/color.js @@ -0,0 +1,51 @@ +var controller = new ScrollMagic.Controller(); + +var backgroundColor = new TweenMax.to(".bg-beige-to-black", 1, { + backgroundColor: "#000", + ease: Power1.easeOut +}); + +var backgroundColorScene = new ScrollMagic.Scene({ + triggerElement: "#work", + duration: 256 +}) +.setTween(backgroundColor) +.addTo(controller); + +var textColor = new TweenMax.to(".black-to-beige", 1, { + color: "#f7eee0", + ease: Power1.easeOut +}); + +var textColorScene = new ScrollMagic.Scene({ + triggerElement: "#work", + duration: 256 +}) +.setTween(textColor) +.addTo(controller); + + +var reverseBackgroundColor = new TweenMax.to(".bg-beige-to-black", 1, { + backgroundColor: "#f7eee0", + ease: Power1.easeOut +}); + +var reverseBackgroundColorScene = new ScrollMagic.Scene({ + triggerElement: "#rental", + duration: 256 +}) +.setTween(reverseBackgroundColor) +.addTo(controller); + +var reverseTextColor = new TweenMax.to(".black-to-beige", 1, { + color: "#000", + ease: Power1.easeOut +}); + +var reverseTextColorScene = new ScrollMagic.Scene({ + triggerElement: "#rental", + duration: 256 +}) +.setTween(reverseTextColor) +.addTo(controller); + diff --git a/js/hero.js b/js/hero.js deleted file mode 100644 index 7ca40d0..0000000 --- a/js/hero.js +++ /dev/null @@ -1,17 +0,0 @@ -var x = window.screen.width > 512 ? 160 : 80; - -var controller = new ScrollMagic.Controller(); - -var hero = new TweenMax.to("#hero", 1, { - x: this.x, - ease: Power1.easeOut -}); - -var heroScene = new ScrollMagic.Scene({ - triggerElement: "#start", - triggerHook: 0, - duration: 320 -}) -.setTween(hero) -.addTo(controller); - diff --git a/static/1.jpeg b/static/1.jpeg deleted file mode 100644 index 4e26985..0000000 Binary files a/static/1.jpeg and /dev/null differ diff --git a/static/1.jpg b/static/1.jpg new file mode 100644 index 0000000..95fdb04 Binary files /dev/null and b/static/1.jpg differ diff --git a/static/Schnittfest_Rental_Preisliste.pdf b/static/Schnittfest_Rental_Preisliste.pdf new file mode 100644 index 0000000..23ed515 Binary files /dev/null and b/static/Schnittfest_Rental_Preisliste.pdf differ diff --git a/static/main.css b/static/main.css index 52180fe..08dcb8c 100644 --- a/static/main.css +++ b/static/main.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,input,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,button,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,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font:inherit;color:var(--black-100);text-decoration:none;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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:'';content:none}table{border-collapse:collapse;border-spacing:0}textarea:focus,input:focus,button:focus{outline:none}.container{max-width:1600px;width:100%;margin-right:auto;margin-left:auto;padding:0 32px;position:relative;box-sizing:border-box}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (max-width: 511px){.hide-xs{display:none !important}}@media only screen and (min-width: 512px){.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-xs{display:none !important}}@media only screen and (max-width: 767px){.hide-sm{display:none !important}}@media only screen and (min-width: 768px){.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-sm{display:none !important}}@media only screen and (max-width: 1023px){.hide-md{display:none !important}}@media only screen and (min-width: 1024px){.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-md{display:none !important}}html{background-color:black;font-family:"Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--beige: #F7EEE0;--yellow: #FEBB28;--orange: #FE6732;--red: #F5303C;--pink: #CE2867;--purple: #571B47;--grey: #3d3d3d}body{overflow-x:hidden}section{width:100vw}h1,h2,h3,p{margin-block-start:0;margin-block-end:0}h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-2%}h1{font-size:64px}h2{font-size:40px}h3{font-size:32px}p{font-size:18px;font-weight:500;line-height:1.4}button{font-size:18px;font-weight:600;padding:23px 32px;cursor:pointer;transition:background-color 0.2s ease-in-out}[data-aos="fade-in"]{opacity:0;transition-property:opacity}[data-aos="fade-in"].aos-animate{opacity:1}.bg-white{background-color:white}.bg-beige{background-color:var(--beige)}.bg-yellow{background-color:var(--yellow)}.bg-orange{background-color:var(--orange)}.bg-red{background-color:var(--red)}.bg-pink{background-color:var(--pink)}.bg-purple{background-color:var(--purple)}.bg-grey{background-color:var(--grey)}.bg-black{background-color:black}.header{position:sticky;top:0;left:0;right:0;height:96px;color:white;z-index:100}.header .container{height:100%;display:flex;align-items:center}.header .container img{width:100px;cursor:pointer}.header .container ul{display:flex;flex:1;justify-content:flex-end;text-align:right}.header .container ul li{display:inline-flex;margin-left:64px;font-size:18px;font-weight:600;cursor:pointer;transition:color 0.2s ease-in-out}.header .container ul li:nth-of-type(1):hover{color:var(--yellow)}.header .container ul li:nth-of-type(2):hover{color:var(--orange)}.header .container ul li:nth-of-type(3):hover{color:var(--red)}.header .container ul li:nth-of-type(4):hover{color:var(--pink)}.mobile-menu{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.8);z-index:1000;animation:fade-in 0.2s ease-in-out}@keyframes fade-in{from{opacity:0}to{opacity:1}}.mobile-menu li{color:white;font-size:24px;line-height:64px;font-weight:600;text-align:center;cursor:pointer}.section-start .container{padding:0;overflow:hidden}.section-start .hero{position:relative;width:100%;max-width:100%;display:flex;justify-content:center;overflow:hidden;z-index:1}.section-start .hero video{width:100%;max-width:100%;transform:scale(1.004)}.section-start .stripe{position:absolute;top:0;bottom:0;left:0;width:160px;display:flex;z-index:-1}.section-start .stripe>div{width:20%}.section-service{padding:96px 0 128px}.section-service .container{padding:0}.section-service .square{padding:32px}.section-service h1{color:white;margin-bottom:96px;margin-left:32px}.section-service h2{color:white;margin-bottom:32px}.section-service button{display:inline-flex;color:white;background-color:var(--purple);margin-top:64px}.section-service button:hover{background-color:black}.section-image{width:100vw;max-height:80vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.section-image img{width:100%;display:block}.section-work{padding:128px 0}.section-work h1{position:sticky;top:128px;margin-left:64px;color:black;writing-mode:vertical-lr;-webkit-text-orientation:mixed;text-orientation:mixed}.section-work .videos>div{margin-bottom:64px}.section-work .videos>div:last-of-type{margin:0}.section-instagram{padding:64px 0}.section-rental{padding:128px 0}.section-rental .square{position:sticky;top:128px;padding:32px}.section-rental .square h2{margin-bottom:32px;color:white}.section-rental .square p{color:black}.section-rental .square button{display:inline-flex;color:black;background-color:var(--yellow);margin-top:48px}.section-rental .square button:hover{background-color:var(--beige)}.section-rental .parts{position:relative;max-width:720px;min-height:256px;margin:0 auto}.section-rental .parts img:not(#part0){position:absolute;filter:contrast(1.3) saturate(0.6)}.section-rental .parts #part0{width:100%}.section-rental .parts #part1{width:29%;left:34%}.section-rental .parts #part2{width:8.5%;left:24%;margin-top:2%}.section-rental .parts #part3{width:19%;left:0;margin-top:2%}.section-rental .parts #part4{width:17%;left:2%;margin-top:15%}.section-rental .parts #part5{width:5.5%;left:70%;margin-top:9%}.section-rental .parts #part6{width:22%;left:64%;margin-top:1%}.section-rental .parts #part7{width:12.5%;left:87.5%;margin-top:1%}.section-rental .parts #part8{width:37%;left:30%;margin-top:28%}.section-rental .parts #part9{width:22.5%;left:0;margin-top:28%}.section-rental .parts #part10{width:49%;left:20%;margin-top:40%}.section-rental .parts #part11{width:14%;left:2%;margin-top:36%}.section-rental .parts #part12{width:27%;left:72%;margin-top:31%}.section-rental .parts #part13{width:24%;left:48%;margin-top:48%}.section-rental .parts #part14{width:19%;left:24%;margin-top:48%}.section-rental .parts #part15{width:4.5%;left:15%;margin-top:47%}.section-rental .parts #part16{width:24%;left:75%;margin-top:48%}.section-rental .parts #part17{width:7.5%;left:2%;margin-top:44%}.section-rental .parts #part18-1{width:14%;left:46%;margin-top:72%}.section-rental .parts #part18-2{width:14%;left:46%;margin-top:86%}.section-rental .parts #part19-1{width:17%;left:22%;margin-top:70%}.section-rental .parts #part19-2{width:17%;left:22%;margin-top:84%}.section-rental .parts #part20{width:13.5%;left:66%;margin-top:73%}.section-rental .parts #part21{width:11.5%;left:6%;margin-top:73%}.section-rental .parts #part22{width:13.5%;left:84%;margin-top:73%}.section-rental .parts #part23{width:28%;left:22%;margin-top:102%}.section-rental .parts #part24{width:37.5%;left:60%;margin-top:100%}.section-rental .parts #part25{width:20%;left:14%;margin-top:105%}.section-rental .parts #part26{width:40%;left:43%;margin-top:106%}.section-rental .parts #part27{width:22.5%;left:20%;margin-top:115%}.section-rental .parts #part28{width:22%;left:47%;margin-top:130%}.section-rental .parts #part29-1{width:3%;left:4%;margin-top:106%}.section-rental .parts #part29-2{width:3%;left:8%;margin-top:106%}.section-rental .parts #part30{width:19%;left:70%;margin-top:116%}.section-rental .parts #part31-1{width:2.5%;left:13%;margin-top:125.5%}.section-rental .parts #part31-2{width:2.5%;left:16%;margin-top:125.5%}.section-rental .parts #part32-1{width:2.75%;left:20%;margin-top:126%}.section-rental .parts #part32-2{width:2.75%;left:24%;margin-top:126%}@media only screen and (max-width: 1023px){h1{font-size:48px}h2{font-size:36px}.section-work h1{writing-mode:initial;margin-left:0;margin-bottom:32px}.section-work .videos>div{margin-bottom:16px}.section-rental .container{padding:0}.section-rental .square{position:static}.section-rental .parts{overflow:hidden}}@media only screen and (max-width: 767px){.section-service{padding-bottom:0}}@media only screen and (max-width: 511px){h1{font-size:40px}h2{font-size:32px}.container{padding:0 16px}.header{height:64px}.section-start .stripe{width:80px}.section-service{padding-top:32px}.section-service h1{margin-left:16px;margin-bottom:64px}.section-service h2{margin-bottom:16px}.section-service button{margin-top:32px}.section-service .square{padding:32px 16px}.section-rental .square{padding:32px 16px}.section-rental .square h2{margin-bottom:16px}.section-rental .square button{margin-top:32px}} +html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,input,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,button,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,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font:inherit;text-decoration:none;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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:'';content:none}table{border-collapse:collapse;border-spacing:0}textarea:focus,input:focus,button:focus{outline:none}.container{max-width:1600px;width:100%;margin-right:auto;margin-left:auto;position:relative;box-sizing:border-box}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (max-width: 511px){.hide-xs{display:none !important}}@media only screen and (min-width: 512px){.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-xs{display:none !important}}@media only screen and (max-width: 767px){.hide-sm{display:none !important}}@media only screen and (min-width: 768px){.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-sm{display:none !important}}@media only screen and (max-width: 1023px){.hide-md{display:none !important}}@media only screen and (min-width: 1024px){.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.show-md{display:none !important}}*{color:var(--black);box-sizing:border-box}html{color:var(--black);font-family:"Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--white: #fff;--beige: #f7eee0;--yellow: #febb28;--orange: #fe6732;--red: #f5303c;--pink: #ce2867;--purple: #571b47;--grey: #3d3d3d;--black: #000}body{background-color:var(--beige);padding:0 16px;overflow-x:hidden}section{width:100%}h1,h2,h3,p{margin-block-start:0;margin-block-end:0;line-height:1.5}h1,h2,h3{font-weight:500}h1{font-size:96px}h2{font-size:48px}h3{font-size:32px}p{font-size:18px;font-weight:500}p a{color:var(--red)}p a:hover{text-decoration:underline}button,a.button{font-size:18px;font-weight:600;padding:23px 32px;cursor:pointer}[data-aos="fade-in"]{opacity:0;transition-property:opacity}[data-aos="fade-in"].aos-animate{opacity:1}.header{position:sticky;top:0;left:0;height:64px;width:100%;background-color:var(--beige);z-index:100;-webkit-backface-visibility:hidden}.header .container{height:100%;display:flex;align-items:center}.header .container .wordmark{font-size:24px;font-weight:700;cursor:pointer}.header .container ul{display:flex;flex:1;justify-content:flex-end;text-align:right}.header .container ul li{position:relative;display:inline-flex;margin-left:48px;font-size:18px;line-height:1.5;font-weight:500;color:inherit;cursor:pointer}.header .container ul li:nth-of-type(1):hover::before{background-color:var(--pink)}.header .container ul li:nth-of-type(2):hover::before{background-color:var(--red)}.header .container ul li:nth-of-type(3):hover::before{background-color:var(--orange)}.header .container ul li:nth-of-type(4):hover::before{background-color:var(--yellow)}.header .container ul li::before{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;z-index:-1}.mobile-menu{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.8);z-index:1000;animation:fade-in 0.2s ease-in-out}@keyframes fade-in{from{opacity:0}to{opacity:1}}.mobile-menu li{color:white;font-size:24px;line-height:64px;font-weight:600;text-align:center;cursor:pointer}.section-start{padding:128px 0}.section-start .headline{display:flex;margin-bottom:96px}.section-start .headline h1{flex:1}.section-start .headline h1 a{color:var(--red)}.section-start .headline img{cursor:pointer}.section-start .hero{width:100%;max-width:100%;overflow:hidden;z-index:1}.section-start .hero video{height:100%;min-height:384px;width:100%;object-fit:cover;transform:scale(1.004)}.section-service{padding:128px 0}.section-service h2{margin:0 96px 24px 0;padding-bottom:12px;border-bottom:8px solid}.section-service h2:nth-of-type(1){border-color:var(--red)}.section-service h2:nth-of-type(2){border-color:var(--orange)}.section-service h2:nth-of-type(3){border-color:var(--yellow)}.section-service p{margin:0 96px 64px 0}.section-service p:last-of-type{margin-bottom:16px}.section-service .img{min-height:512px;background-image:url("1.jpg");background-position:center 33%;overflow:hidden}.section-work{padding:128px 0}.section-work .video{margin-bottom:128px}.section-work .video:nth-of-type(4n+1) h2{border-color:var(--pink)}.section-work .video:nth-of-type(4n+2) h2{border-color:var(--red)}.section-work .video:nth-of-type(4n+3) h2{border-color:var(--orange)}.section-work .video:nth-of-type(4n+4) h2{border-color:var(--yellow)}.section-work .video:last-of-type{margin-bottom:0}.section-work h2{margin:0 0 24px 96px;padding-bottom:12px;border-bottom:8px solid}.section-work p{margin-left:96px}.section-rental{padding:128px 0}.section-rental .square{position:sticky;top:128px;padding:32px 0}.section-rental .square h2{margin-bottom:32px;padding-bottom:16px;border-bottom:8px solid var(--red)}.section-rental .square button,.section-rental .square a.button{display:inline-flex;color:var(--black);background-color:var(--yellow);margin-top:48px}.section-rental .square button:hover,.section-rental .square a.button:hover{box-shadow:inset 0 0 0 2px var(--black)}.section-rental .parts{position:relative;max-width:720px;min-height:256px;margin:0 auto}.section-rental .parts img:not(#part0){position:absolute;filter:contrast(1.3) saturate(0.6)}.section-rental .parts #part0{width:100%}.section-rental .parts #part1{width:29%;left:34%}.section-rental .parts #part2{width:8.5%;left:24%;margin-top:2%}.section-rental .parts #part3{width:19%;left:0;margin-top:2%}.section-rental .parts #part4{width:17%;left:2%;margin-top:15%}.section-rental .parts #part5{width:5.5%;left:70%;margin-top:9%}.section-rental .parts #part6{width:22%;left:64%;margin-top:1%}.section-rental .parts #part7{width:12.5%;left:87.5%;margin-top:1%}.section-rental .parts #part8{width:37%;left:30%;margin-top:28%}.section-rental .parts #part9{width:22.5%;left:0;margin-top:28%}.section-rental .parts #part10{width:49%;left:20%;margin-top:40%}.section-rental .parts #part11{width:14%;left:2%;margin-top:36%}.section-rental .parts #part12{width:27%;left:72%;margin-top:31%}.section-rental .parts #part13{width:24%;left:48%;margin-top:48%}.section-rental .parts #part14{width:19%;left:24%;margin-top:48%}.section-rental .parts #part15{width:4.5%;left:15%;margin-top:47%}.section-rental .parts #part16{width:24%;left:75%;margin-top:48%}.section-rental .parts #part17{width:7.5%;left:2%;margin-top:44%}.section-rental .parts #part18-1{width:14%;left:46%;margin-top:72%}.section-rental .parts #part18-2{width:14%;left:46%;margin-top:86%}.section-rental .parts #part19-1{width:17%;left:22%;margin-top:70%}.section-rental .parts #part19-2{width:17%;left:22%;margin-top:84%}.section-rental .parts #part20{width:13.5%;left:66%;margin-top:73%}.section-rental .parts #part21{width:11.5%;left:6%;margin-top:73%}.section-rental .parts #part22{width:13.5%;left:84%;margin-top:73%}.section-rental .parts #part23{width:28%;left:22%;margin-top:102%}.section-rental .parts #part24{width:37.5%;left:60%;margin-top:100%}.section-rental .parts #part25{width:20%;left:14%;margin-top:105%}.section-rental .parts #part26{width:40%;left:43%;margin-top:106%}.section-rental .parts #part27{width:22.5%;left:20%;margin-top:115%}.section-rental .parts #part28{width:22%;left:47%;margin-top:130%}.section-rental .parts #part29-1{width:3%;left:4%;margin-top:106%}.section-rental .parts #part29-2{width:3%;left:8%;margin-top:106%}.section-rental .parts #part30{width:19%;left:70%;margin-top:116%}.section-rental .parts #part31-1{width:2.5%;left:13%;margin-top:125.5%}.section-rental .parts #part31-2{width:2.5%;left:16%;margin-top:125.5%}.section-rental .parts #part32-1{width:2.75%;left:20%;margin-top:126%}.section-rental .parts #part32-2{width:2.75%;left:24%;margin-top:126%}.section-instagram{padding:64px 0}footer{padding:128px 0}footer ul{display:flex;justify-content:space-between}footer ul li{font-size:18px;line-height:1.5;font-weight:500}footer ul li:first-of-type{flex:1}footer ul li:not(:first-of-type){margin-left:48px}footer ul li:nth-of-type(4n+1):hover a::before{background-color:var(--pink)}footer ul li:nth-of-type(4n+2):hover a::before{background-color:var(--red)}footer ul li:nth-of-type(4n+3):hover a::before{background-color:var(--orange)}footer ul li:nth-of-type(4n+4):hover a::before{background-color:var(--yellow)}footer ul li a{position:relative}footer ul li a::before{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;z-index:-1}@media only screen and (max-width: 1023px){h1{font-size:64px}h2{font-size:36px}.section-start{padding:64px 0}.section-start .headline{margin-bottom:64px}.section-service{padding:64px 0}.section-service h2{margin:0 32px 24px 0}.section-service p{margin:0 32px 32px 0}.section-service .img{margin-top:64px}.section-work{padding:64px 0}.section-work h2{margin:0 0 24px 0}.section-work p{margin:0 0 32px 0}.section-work .video{margin-bottom:64px}.section-rental{padding:64px 0}.section-rental .square{padding:0}.section-rental .parts{margin:64px -16px 0 -16px;overflow:hidden}footer{padding:64px 0}footer ul{display:block}footer ul li{margin:12px 0 !important}}@media only screen and (max-width: 767px){.section-service h2,.section-service p{margin:0 0 16px 0}.section-service p{margin:0 0 24px 0}}@media only screen and (max-width: 511px){h1{font-size:40px}h2{font-size:32px}} diff --git a/style/sass/_grid.scss b/style/sass/_grid.scss index d5babbd..78421bf 100644 --- a/style/sass/_grid.scss +++ b/style/sass/_grid.scss @@ -3,7 +3,6 @@ width: 100%; margin-right: auto; margin-left: auto; - padding: 0 32px; position: relative; box-sizing: border-box; } diff --git a/style/sass/_reset.scss b/style/sass/_reset.scss index b79117a..83b4bc1 100644 --- a/style/sass/_reset.scss +++ b/style/sass/_reset.scss @@ -16,7 +16,6 @@ time, mark, audio, video { border: 0; outline: none; font: inherit; - color: var(--black-100); text-decoration: none; vertical-align: baseline; text-rendering: optimizeLegibility; diff --git a/style/sass/main.scss b/style/sass/main.scss index 4fa4b68..21bea91 100644 --- a/style/sass/main.scss +++ b/style/sass/main.scss @@ -1,44 +1,52 @@ @import "_reset.scss"; @import "_grid.scss"; -html { - background-color: black; - font-family: "Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +* { + color: var(--black); + box-sizing: border-box; +} - --beige: #F7EEE0; - --yellow: #FEBB28; - --orange: #FE6732; - --red: #F5303C; - --pink: #CE2867; - --purple: #571B47; +html { + color: var(--black); + font-family: "Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + --white: #fff; + --beige: #f7eee0; + --yellow: #febb28; + --orange: #fe6732; + --red: #f5303c; + --pink: #ce2867; + --purple: #571b47; --grey: #3d3d3d; + --black: #000; } body { + background-color: var(--beige); + padding: 0 16px; overflow-x: hidden; } section { - width: 100vw; + width: 100%; } h1, h2, h3, p { margin-block-start: 0; margin-block-end: 0; + line-height: 1.5; } h1, h2, h3 { - font-weight: 700; - line-height: 1.1; - letter-spacing: -2%; + font-weight: 500; } h1 { - font-size: 64px; + font-size: 96px; } h2 { - font-size: 40px; + font-size: 48px; } h3 { @@ -48,15 +56,21 @@ h3 { p { font-size: 18px; font-weight: 500; - line-height: 1.4; + + a { + color: var(--red); + + &:hover { + text-decoration: underline; + } + } } -button { +button, a.button { font-size: 18px; font-weight: 600; padding: 23px 32px; cursor: pointer; - transition: background-color 0.2s ease-in-out; } [data-aos="fade-in"] { @@ -68,60 +82,24 @@ button { } } -.bg { // background - &-white { - background-color: white; - } - - &-beige { - background-color: var(--beige); - } - - &-yellow { - background-color: var(--yellow); - } - - &-orange { - background-color: var(--orange); - } - - &-red { - background-color: var(--red); - } - - &-pink { - background-color: var(--pink); - } - - &-purple { - background-color: var(--purple); - } - - &-grey { - background-color: var(--grey); - } - - &-black { - background-color: black; - } -} - .header { position: sticky; top: 0; left: 0; - right: 0; - height: 96px; - color: white; + height: 64px; + width: 100%; + background-color: var(--beige); z-index: 100; + -webkit-backface-visibility: hidden; /* Correct fixed positioning on mobile */ .container { height: 100%; display: flex; align-items: center; - img { - width: 100px; + .wordmark { + font-size: 24px; + font-weight: 700; cursor: pointer; } @@ -132,27 +110,39 @@ button { text-align: right; li { + position: relative; display: inline-flex; - margin-left: 64px; + margin-left: 48px; font-size: 18px; - font-weight: 600; + line-height: 1.5; + font-weight: 500; + color: inherit; cursor: pointer; - transition: color 0.2s ease-in-out; - - &:nth-of-type(1):hover { - color: var(--yellow); + + &:nth-of-type(1):hover::before { + background-color: var(--pink); } - &:nth-of-type(2):hover { - color: var(--orange); + &:nth-of-type(2):hover::before { + background-color: var(--red); } - &:nth-of-type(3):hover { - color: var(--red); + &:nth-of-type(3):hover::before { + background-color: var(--orange); } - &:nth-of-type(4):hover { - color: var(--pink); + &:nth-of-type(4):hover::before { + background-color: var(--yellow); + } + + &::before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 2px; + z-index: -1; } } } @@ -192,114 +182,114 @@ button { } .section-start { - .container { - padding: 0; - overflow: hidden; + padding: 128px 0; + + .headline { + display: flex; + margin-bottom: 96px; + + h1 { + flex: 1; + + a { + color: var(--red); + } + } + + img { + cursor: pointer; + } } .hero { - position: relative; width: 100%; max-width: 100%; - display: flex; - justify-content: center; overflow: hidden; z-index: 1; video { + height: 100%; + min-height: 384px; width: 100%; - max-width: 100%; + object-fit: cover; transform: scale(1.004); } } - - .stripe { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 160px; - display: flex; - z-index: -1; - - & > div { - width: 20%; - } - } } .section-service { - padding: 96px 0 128px; - - .container { - padding: 0; - } - - .square { - padding: 32px; - } - - h1 { - color: white; - margin-bottom: 96px; - margin-left: 32px; - } + padding: 128px 0; h2 { - color: white; - margin-bottom: 32px; - } + margin: 0 96px 24px 0; + padding-bottom: 12px; + border-bottom: 8px solid; - button { - display: inline-flex; - color: white; - background-color: var(--purple); - margin-top: 64px; + &:nth-of-type(1) { + border-color: var(--red); + } - &:hover { - background-color: black; + &:nth-of-type(2) { + border-color: var(--orange); + } + + &:nth-of-type(3) { + border-color: var(--yellow); } } -} -.section-image { - width: 100vw; - max-height: 80vh; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; + p { + margin: 0 96px 64px 0; - img { - width: 100%; - display: block; + &:last-of-type { + margin-bottom: 16px; + } + } + + .img { + min-height: 512px; + background-image: url("1.jpg"); + background-position: center 33%; + overflow: hidden; } } .section-work { padding: 128px 0; - h1 { - position: sticky; - top: 128px; - margin-left: 64px; - color: black; - writing-mode: vertical-lr; - -webkit-text-orientation: mixed; - text-orientation: mixed; - } + .video { + margin-bottom: 128px; - .videos > div { - margin-bottom: 64px; + &:nth-of-type(4n+1) h2 { + border-color: var(--pink); + } + + &:nth-of-type(4n+2) h2 { + border-color: var(--red); + } + + &:nth-of-type(4n+3) h2 { + border-color: var(--orange); + } + + &:nth-of-type(4n+4) h2 { + border-color: var(--yellow); + } &:last-of-type { - margin: 0; + margin-bottom: 0; } } -} -.section-instagram { - padding: 64px 0; + h2 { + margin: 0 0 24px 96px; + padding-bottom: 12px; + border-bottom: 8px solid; + } + + p { + margin-left: 96px; + } } .section-rental { @@ -308,25 +298,22 @@ button { .square { position: sticky; top: 128px; - padding: 32px; + padding: 32px 0; h2 { margin-bottom: 32px; - color: white; + padding-bottom: 16px; + border-bottom: 8px solid var(--red); } - p { - color: black; - } - - button { + button, a.button { display: inline-flex; - color: black; + color: var(--black); background-color: var(--yellow); margin-top: 48px; &:hover { - background-color: var(--beige); + box-shadow: inset 0 0 0 2px var(--black); } } } @@ -569,45 +556,147 @@ button { } } +.section-instagram { + padding: 64px 0; +} + +footer { + padding: 128px 0; + + ul { + display: flex; + justify-content: space-between; + + li { + font-size: 18px; + line-height: 1.5; + font-weight: 500; + + &:first-of-type { + flex: 1; + } + + &:not(:first-of-type) { + margin-left: 48px; + } + + &:nth-of-type(4n+1):hover a::before { + background-color: var(--pink); + } + + &:nth-of-type(4n+2):hover a::before { + background-color: var(--red); + } + + &:nth-of-type(4n+3):hover a::before { + background-color: var(--orange); + } + + &:nth-of-type(4n+4):hover a::before { + background-color: var(--yellow); + } + + a { + position: relative; + + &::before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 2px; + z-index: -1; + } + } + } + } +} + @media only screen and (max-width: 1023px) { h1 { - font-size: 48px; + font-size: 64px; } h2 { font-size: 36px; } - .section-work { - h1 { - writing-mode: initial; - margin-left: 0; - margin-bottom: 32px; + .section-start { + padding: 64px 0; + + .headline { + margin-bottom: 64px; + } + } + + .section-service { + padding: 64px 0; + + h2 { + margin: 0 32px 24px 0; } - .videos > div { - margin-bottom: 16px; + p { + margin: 0 32px 32px 0; + } + + .img { + margin-top: 64px; + } + } + + .section-work { + padding: 64px 0; + + h2 { + margin: 0 0 24px 0; + } + + p { + margin: 0 0 32px 0; + } + + .video { + margin-bottom: 64px; } } .section-rental { - .container { + padding: 64px 0; + + .square { padding: 0; } - .square { - position: static; - } - .parts { + margin: 64px -16px 0 -16px; overflow: hidden; } } + + footer { + padding: 64px 0; + + ul { + display: block; + + li { + margin: 12px 0 !important; + } + } + } } @media only screen and (max-width: 767px) { .section-service { - padding-bottom: 0; + h2, p { + margin: 0 0 16px 0; + } + + p { + margin: 0 0 24px 0; + } } } @@ -619,53 +708,4 @@ button { h2 { font-size: 32px; } - - .container { - padding: 0 16px; - } - - .header { - height: 64px; - } - - .section-start { - .stripe { - width: 80px; - } - } - - .section-service { - padding-top: 32px; - - h1 { - margin-left: 16px; - margin-bottom: 64px; - } - - h2 { - margin-bottom: 16px; - } - - button { - margin-top: 32px; - } - - .square { - padding: 32px 16px; - } - } - - .section-rental { - .square { - padding: 32px 16px; - - h2 { - margin-bottom: 16px; - } - - button { - margin-top: 32px; - } - } - } } diff --git a/template/index.html b/template/index.html new file mode 100644 index 0000000..d90b1cc --- /dev/null +++ b/template/index.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Schnittfest - AGB + + + + +
+
+

Allgemeine Geschäftsbedingungen

+
+
+ + + + + + diff --git a/template/landing_page.html b/template/landing_page.html index 83c04b1..5fbe201 100644 --- a/template/landing_page.html +++ b/template/landing_page.html @@ -30,121 +30,153 @@ Schnittfest - -
-
-
-
-
-
-
-
-
-
-
-
-
- - - -