1 line
14 KiB
CSS
1 line
14 KiB
CSS
html{width:100%;overflow-x:hidden;scroll-behavior:smooth}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:"Titillium Web",Helvetica;font-size:18px;line-height:1.5;color:#222;position:relative}:root{--main-color:#747bef;--base-color:#222;--sec-color-1:#ed7d71;--sec-color-2:#faa096;--sec-color-3:#75F0E6;--dark-color:#1c3766}body{width:100%;margin:0;overflow:hidden;display:flex;flex-direction:column;align-items:center}header{position:fixed;left:0;top:0;width:100%;z-index:1000;padding:40px;display:flex;align-items:center;justify-content:space-between;height:140px;overflow:hidden;perspective:500px;transition:all .3s ease}header>div:nth-of-type(1){position:relative;transform-style:preserve-3d}header.scrolled{padding:20px;background-color:#fff;height:80px}#header-controller{position:absolute;width:100%;height:15vh;top:0;left:0;background:lightgray}header img:not(#linkedin img){width:40px;margin-right:10px;position:relative;top:0}header>a{font-family:"Titillium Web";border:none;color:inherit;display:flex;align-items:center;font-weight:900;position:relative;perspective:500px;transform-style:preserve-3d;z-index:10}header>a>div{line-height:16px;font-size:24px;color:var(--dark-color)}nav{display:flex;align-items:center;color:inherit;height:100%}.nav-link{font-size:17px;font-weight:600;padding:10px 15px;background-size:100%;background-repeat:no-repeat;background-position:-200px 43px;background-image:linear-gradient(90deg,var(--main-color),var(--sec-color-1));color:inherit;transition:background .3s ease}.nav-link:hover{color:var(--sec-color-2);background-position:0 43px}.active-anchor{color:var(--sec-color-1);background-position:0 43px}.hamburger-button{width:40px;height:40px;padding:10px 0;display:none;flex-direction:column;align-items:center;justify-content:space-around}.hamburger-button div{width:25px;height:3px;background-color:#fff}section{display:flex;position:relative;width:100%;perspective:500px;padding:0;margin:0;height:100vh;overflow:hidden;align-items:stretch}section>div{width:50%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;perspective:500px;transform-style:preserve-3d;padding:15%;position:relative}section>div p{width:350px;color:inherit}a{text-decoration:none;color:var(--dark-color);border:none;cursor:pointer;font-size:inherit}a:hover{border:none}h1,h2,h3,h4{font-family:"Titillium Web";margin-top:0;margin-bottom:15px;width:100%;line-height:1.2;color:inherit;font-weight:700}h1{font-size:46px}h2{font-size:50px;width:auto;line-height:1}p{font-size:20px;line-height:1.5;margin-top:0;margin-bottom:20px;width:100%;font-weight:400;letter-spacing:.5px}span{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}span>a{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;border:inherit;border-color:inherit}span>a:hover{border:inherit;border-color:inherit}button{border:none;background-color:var(--dark-color);padding:10px 20px;color:#fff;cursor:pointer;background-image:linear-gradient(var(--main-color),var(--main-color));background-repeat:no-repeat;background-position:0 67px;transition:background .3s ease}button:hover{background-position:0 0}input,textarea{padding:15px;border-radius:5px;border:1px solid rgba(0,0,0,.2);margin-bottom:15px;width:100%;font-size:14px}input:focus{border:1px solid blue;box-shadow:0 0 15px 0 rgba(0,0,0,.2)}.social-media-links{width:40px;height:40px;border-radius:50%;margin:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;background-color:var(--sec-color-1);padding:0;overflow:hidden}#linkedin img{width:20px;height:20px}#mail{background-color:var(--main-color)}#linkedin{background-color:var(--dark-color)}#linkedin:hover{background-color:var(--main-color)}.scroll-into-view{padding:0;width:0;transition:all .7s cubic-bezier(.93,0,.09,1)}.scrolled-into-view{width:50%;padding:40px}.scroll-into-view-content,.scroll-into-view-content-2{transform:translateY(80px) rotateX(5deg) translateZ(20px);opacity:0;transform-style:preserve-3d}.hero-section{background-color:#1b239b;justify-content:space-between}.hero-section>div:nth-child(2){background-color:#fff;padding:25vh 40px 40px 6.1vw;font-size:2.8vw;display:inline;z-index:100;transform-style:preserve-3d;perspective:600px;z-index:100}.main-text-block{font-size:inherit;max-width:80%;transform-style:preserve-3d;z-index:100;transform:translateZ(10px);font-weight:500}.main-text-block h1 a{color:var(--main-color);background-image:linear-gradient(var(--main-color),var(--main-color));background-position:0 5vw;background-repeat:no-repeat;transition:all .3s ease}.main-text-block h1 a:hover{color:var(--dark-color);background-position:0 4.8vw;background-image:linear-gradient(var(--dark-color),var(--dark-color));padding:5px 10px}.hero-text-section-graphic{position:absolute;top:0;right:5vw;width:15vw;height:90%;background-color:rgba(28,55,102,.05);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;perspective:600px;padding-bottom:30px}.hero-text-section-graphic img,.hero-text-section-graphic a{position:relative;transform-style:preserve-3d}.hero-text-section-graphic a{width:20px;height:20px}.hero-text-section-graphic img{width:100%}.main-hero-text{font-size:inherit;font-weight:500;width:auto;display:inline}.hero-section img{position:absolute;z-index:-1}#clouds{min-width:110%;min-height:110vh;left:-5%;top:-5%;opacity:.2}#mountains{width:100%;min-height:100vh;bottom:-20vh}.benjamin-image-block-wrapper{width:15vw;height:80vh;position:absolute;bottom:-10px;background-color:transparent;left:15vw;background-size:cover;opacity:1;padding:0;transform-style:preserve-3d}.benjamin-image-block{width:100%;height:100%;background-color:var(--sec-color-2);background-image:url(images/hero-image-ben.jpg);background-size:cover;opacity:.8;transform-style:preserve-3d;transition:all 1s cubic-bezier(.1,.63,.355,1)}.benjamin-image-block-overlay{width:100%;height:100%;opacity:1;transform-style:preserve-3d;z-index:10;transition:all 1.5s cubic-bezier(.1,.63,.355,1)}.benjamin-big-text-block{position:absolute;font-size:10.5vw;bottom:0;left:5%;font-weight:900;line-height:.8;color:#fff;mix-blend-mode:overlay;filter:drop-shadow(0 0 20px rgba(0,0,0,.4));padding:40px;transform-style:preserve-3d}.main-cta-button{font-size:24px;padding:0;margin-top:20px;background-color:var(--sec-color-1);transition:all .3s ease-out;background-image:linear-gradient(var(--dark-color),var(--dark-color));padding:15px 0;transform:translateZ(10px)}.main-cta-button a{padding:15px 40px;color:#fff}.main-cta-button:hover{background-image:linear-gradient(var(--dark-color),var(--dark-color));background-position:0 0;background-repeat:no-repeat}.main-cta-button a:hover{padding:15px 40px}.hero-scroll-down-block{position:absolute;right:7vw;bottom:10vh;height:auto}.hero-scroll-down-block>a{display:flex;flex-direction:column;height:auto;align-items:center}.hero-scroll-down-block div{transform:rotate(-90deg);font-size:70px}.rotating-text-image{position:absolute;width:120px;height:120px;opacity:.3;top:50%;left:50%;transform:translate(-50%,-50%)}.service-display-block{width:300px;height:200px;position:absolute;background-color:#fff;border-radius:20px;z-index:200;top:-20px;right:-200px;box-shadow:0 0 30px -5px rgba(0,0,0,.2);transition:all .8s cubic-bezier(.075,.82,.165,1);opacity:0;transform-style:preserve-3d}.my-work-section>div:nth-child(1){color:rgba(0,0,0,.6);align-items:flex-end}.my-work-section>div:nth-child(2){background-color:var(--sec-color-2);display:flex;align-items:center;justify-content:center;perspective:600px;transform-style:preserve-3d}.my-work-section h2{text-align:right;color:rgba(0,0,0,.8)}.my-work-section p{text-align:right}.portfolio-items-container{width:70%;height:70%;background-color:#fff;box-shadow:0 10px 20px -5px rgba(0,0,0,.2);transform-style:preserve-3d}.about-me-section{justify-content:flex-end}.about-me-section>div:nth-child(1){background-color:var(--sec-color-3)}.about-me-section>div:nth-child(2) p{color:rgba(0,0,0,.7)}.my-specialties-section{justify-content:flex-start;align-items:center;flex-direction:column;background-color:var(--dark-color);color:#fff;text-align:center;padding:150px 80px 120px 80px;height:auto}.my-specialties-section p{color:rgba(255,255,255,.7);max-width:800px}.my-specialties-section>div{max-width:960px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row;padding:0;margin-bottom:30px}.my-specialties-section>div>div{width:80px;height:80px;background-color:var(--main-color);margin:10px;border-radius:50%;transform-style:preserve-3d;padding:20px;transition:all .8s cubic-bezier(.075,.82,.165,1);position:relative}.my-specialties-section>div>div:hover{background-color:rgba(99,105,176,.6)}.my-specialties-section>div img{width:100%;height:100%}.my-specialties-section>div>div>div{padding:20px;border-radius:10px;background-color:var(--sec-color-1);color:#fff;position:absolute;top:-70px;left:50%;box-shadow:0 10px 20px -5px rgba(0,0,0,.3);white-space:nowrap;transition:all .4s cubic-bezier(.075,.82,.165,1);opacity:0;pointer-events:none;transform:translateX(-50%)}.my-specialties-section>div>div:hover>div{opacity:1;top:-80px}.my-specialties-section>button{background:transparent;border:2px solid rgba(255,255,255,.4)}.my-specialties-section>button:hover{background:var(--sec-color-1);border:2px solid transparent}.contact-section{position:relative;justify-content:flex-start}.contact-section>div:nth-of-type(1){align-items:flex-end;text-align:right}.contact-section>div:nth-of-type(1) a{color:var(--main-color);border-bottom:1px solid var(--main-color);display:flex;align-items:center}.contact-section>div:nth-of-type(1)>div{display:flex;align-items:center;height:50px;border:1px solid #efefef;padding:10px;color:#777;margin-top:20px}.contact-section>div:nth-of-type(1)>div>div{font-size:14px;color:inherit}.contact-section>div:nth-of-type(2){background-color:var(--sec-color-1);height:100%;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d}.contact-section>div:nth-of-type(2)>div{transform-style:preserve-3d;perspective:600px}.contact-section-controller{width:100%;height:80px;position:absolute;bottom:0;left:0;padding:0}.footer-bar{position:absolute;display:flex;flex-direction:row;align-items:flex-end;width:960px;height:240px;padding:0;bottom:40px;pointer-events:none;left:50%;transform:translateX(-50%)}.main-cta-form{max-width:500px;transform-style:preserve-3d}.main-cta-form input{background-color:transparent;border:none;border-bottom:2px solid #fff;height:50px;color:#fff;border-radius:0;margin-bottom:0;font-size:20px}.main-cta-form input:focus{outline:2px solid #fff;box-shadow:none}.main-cta-form textarea{background-color:transparent;border:none;border-bottom:2px solid #fff;color:#fff;border-radius:0;margin-bottom:20px;font-size:20px}.main-cta-form textarea::placeholder,.main-cta-form input::placeholder{color:rgba(255,255,255,.7)}.main-cta-form textarea:focus{outline:2px solid #fff}.main-cta-form button{width:100%}@media (max-width:1200px){section{height:auto}section>div{padding:100px 60px}.hero-section>div:nth-child(2){padding:140px 30px 60px 60px;font-size:36px}.hero-section{height:600px}.hero-text-section-graphic{height:100%;width:40%}.main-text-block h1 a{background-position:0 60px}.main-text-block h1 a:hover{background-position:0 50px}.benjamin-image-block-wrapper{height:80%;width:200px}.contact-section{height:100vh}section>div p{width:100%}}@media (max-width:800px){.hamburger-button{display:flex}section>div p{width:100%;text-align:center}section{flex-direction:column}section>div{width:100%;align-items:center}h1,h2,h3,h4,h4{text-align:center;width:100%}section{height:auto}section>div{padding:60px 40px}.scrolled-into-view{width:100%}header{overflow:visible}nav{flex-direction:column;width:100%;position:relative}header>div:nth-of-type(1){position:fixed;top:0;opacity:0;left:0;width:100%;pointer-events:none;overflow:hidden;height:0;background-color:#fff;border-bottom:2px solid #ddd;z-index:0;padding-top:120px;box-shadow:0 10px 20px rgba(0,0,0,.5)}.hero-section{flex-direction:row;transition:all .5s ease;height:500px}.hero-text-section-graphic{height:100%;width:50%}#clouds{height:100%;min-height:auto;top:auto;bottom:0;min-width:auto}#mountains{height:auto;min-height:auto;width:1200px}.hero-section>div:nth-child(1){width:20%}.hero-section>div:nth-child(2){padding:120px 40px 120px 60px;font-size:30px}.main-text-block{padding:0;max-width:100%}.benjamin-big-text-block{position:absolute;font-size:8.5vw;bottom:0;left:-25%}.benjamin-image-block-wrapper{height:70%}.my-work-section{height:auto;padding:60px 0}.my-work-section>div:nth-child(2){width:100%;height:auto;padding:80px}.my-work-section h2{text-align:center}.my-work-section p{text-align:center}.portfolio-items-container{height:400px}.about-me-section{justify-content:flex-start;flex-direction:column-reverse}.about-me-section>div:nth-child(1){height:500px}.contact-section{height:auto}.contact-section>div:nth-of-type(1){align-items:center}.contact-section-controller{height:0;display:none}}@media (max-width:600px){h1{font-size:36px}h2{font-size:36px}section>div{padding:60px 20px}header{padding:20px}.hero-section{flex-direction:column;align-items:center;overflow:visible;z-index:100;height:auto}.hero-section>div:nth-child(2){padding:40px;width:100%}.hero-section>div:nth-child(1){width:100%;height:400px}.hero-text-section-graphic{height:120%;width:40%}.benjamin-image-block-wrapper{top:0;bottom:auto;left:auto;right:auto;margin-left:80px}#clouds{height:100%;min-height:auto;top:-100px;bottom:0;min-width:auto}#mountains{top:-200px;bottom:auto}.main-text-block{padding:0}.benjamin-big-text-block{top:190px;font-size:100px;bottom:auto;left:0}.benjamin-image-block-wrapper{height:70%}.my-work-section>div:nth-child(2){padding:40px}.portfolio-items-container{height:300px;width:300px}.contact-section{height:auto}.contact-section>div:nth-of-type(1){align-items:center}.contact-section-controller{height:0;display:none}.my-specialties-section{padding:100px 20px}}@media (max-width:430px){p{font-size:16px}.hero-section>div:nth-child(2){padding:60px 40PX;font-size:24PX}.hero-section>div:nth-child(1){width:100%;height:400px}.benjamin-image-block-wrapper{width:50%;top:0;bottom:auto;left:auto;right:0;margin-left:0}#clouds{height:100%;min-height:auto;top:-100px;bottom:0;min-width:auto}#mountains{top:-200px;bottom:auto;left:-500px}.benjamin-big-text-block{top:235px;font-size:75px;bottom:auto;left:0}.benjamin-image-block-wrapper{height:70%}} |