-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.css
1 lines (1 loc) · 4.24 KB
/
app.css
1
body,html{margin:0;min-height:100vh;font-size:10px}body{font-size:1.5rem;font-family:Muli,Helvetica Neue,Segoe UI,Helvetica,Arial,sans-serif;background:#fff}hr{width:100%;height:1px;background:rgba(102,127,134,.2);margin:5rem 0 3rem;border:none}.top-polygons{position:relative;overflow:hidden;height:26rem}.top-polygons div{width:130%;height:400px;position:absolute;top:0;left:-10%;outline:1px solid transparent}.top-polygons .dark{z-index:1;background:rgba(102,127,134,.8);margin-top:-380px;animation:a 9s ease-in-out infinite}.top-polygons .blue{background:#2baece;margin-top:-300px;animation:b 11s ease-in-out infinite}.top-polygons .light{background:rgba(164,237,255,.24);margin-top:-300px;animation:c 8s ease-in-out infinite}.body{max-width:660px;margin:0 auto;display:flex;align-items:center;flex-direction:column;padding:0 1rem}@media (max-width:768px){.body{padding:0 2rem}}.body .logo{text-align:center}.body .logo img{width:212px}.body .logo .slogan{font-size:2rem;color:#667f86;font-weight:400}.body .logo .slogan strong{color:#2baece;background:url(imgs/underline.svg) no-repeat 0 100%;background-size:100% 7px;padding-bottom:10px}.body .main-text{max-width:570px;margin:10rem 0}.body .main-text .text,.body .main-text p{font-size:1.8rem;line-height:4.5rem;text-align:justify;font-weight:300}.body .main-links{width:100%;display:flex;justify-content:space-between;margin-bottom:5rem}@media (max-width:768px){.body .main-links{flex-direction:column;align-items:center;margin-top:-2rem}}.body .main-links .link{display:block;text-align:center;width:145px;background:url(imgs/underline.svg) no-repeat 0 100%;background-size:100% auto;padding-bottom:2rem;text-decoration:none}@media (max-width:768px){.body .main-links .link{margin-bottom:9rem}}.body .main-links .link h3{margin:0;font-size:2rem;font-weight:300;color:#2baece}.body .main-links .link p{margin:2rem 0;font-size:1.4rem;font-weight:300;color:#667f86}.body .main-links .link:hover{display:block;text-align:center;width:145px;background:url(imgs/underline.svg) no-repeat 0 100%;background-size:100% auto;padding-bottom:2rem;text-decoration:none;background-color:#a4edff}@media (max-width:768px){.body .main-links .link:hover{margin-bottom:9rem}}.body .main-links .link:hover h3{margin:0;font-size:2rem;font-weight:300;color:#2baece}.body .main-links .link:hover p{margin:2rem 0;font-size:1.4rem;font-weight:300;color:#667f86}.body .hero-text{text-align:center;margin:13rem 0;font-size:2rem;color:#383838;font-weight:300}@media (max-width:768px){.body .hero-text{margin:5rem 0;font-size:1.6rem;padding:0 2rem}}.footer{position:relative;background:url(imgs/bg-logo.svg) no-repeat bottom -50px center;background-size:290px auto;padding-top:4rem;margin-top:-10rem}.footer .logo{width:74px;position:absolute;bottom:8%;left:50%;margin-top:-50px;margin-left:-37px;z-index:2}.footer .bottom-polygons{position:relative;overflow:hidden;height:26rem}.footer .bottom-polygons div{width:130%;height:400px;position:absolute;bottom:0;left:-10%}.footer .bottom-polygons .blue{background:#2baece;margin-bottom:-300px;transform:rotate(4deg)}.footer .bottom-polygons .light{background:#a4edff;margin-bottom:-300px;transform:rotate(-6deg)}.founders-advisors{margin:5rem 0}.founders-advisors .title{margin-top:0;text-align:center;font-size:2.4rem;color:#667f86}.founders-advisors .person-list{display:flex;justify-content:center;padding:0;margin:0;list-style:none}.founders-advisors .person-list .person{margin-right:2rem;border-right:1px solid #a4edff;padding-right:2rem}.founders-advisors .person-list .person:last-child{margin-right:0;padding-right:0;border-right:none}.founders-advisors .person-list .person a{font-size:1.9rem;color:#2baece;text-decoration:none;padding:.5rem 0;transition:all .15s linear}.founders-advisors .person-list .person a:hover{color:#667f86;box-shadow:0 3px #2baece}.founders-advisors p{margin:2rem 0;font-size:1.8rem;font-weight:300;line-height:3rem;text-align:justify;color:#667f86}@keyframes a{0%{transform:rotate(1deg)}50%{transform:rotate(0)}to{transform:rotate(1deg)}}@keyframes b{0%{transform:rotate(10deg) translateZ(0)}50%{transform:rotate(8deg) translate3d(0,20px,0)}to{transform:rotate(10deg) translateZ(0)}}@keyframes c{0%{transform:rotate(-10deg) translateZ(0)}50%{transform:rotate(-8deg) translate3d(0,20px,0)}to{transform:rotate(-10deg) translateZ(0)}}