9 lines
10 KiB
CSS
9 lines
10 KiB
CSS
/*!
|
|
* Wikimedia Entdecke Wikipedia
|
|
*
|
|
* Copyright (c) 2017 Atelier Disko - All rights reserved.
|
|
*
|
|
* Use of this source code is governed by the AGPL v3
|
|
* license that can be found in the LICENSE file.
|
|
*/
|
|
@charset "UTF-8";:root{}.serif{font-family:"Times New Roman",Times,serif;line-height:1.3}.t--alpha{font-size:36px}.t--beta{font-size:20px}.t--gamma{font-size:18px}@media (max-width:700px){.t--alpha,.t--beta{font-size:18px}}.cp--h{padding-left:160px;padding-right:160px}.cp--v{padding-top:100px;padding-bottom:100px}.limit--l{max-width:1440px;margin:0 auto;position:relative}.limit--block{max-width:600px;min-width:500px;width:55%}@media (max-width:1300px){.cp--h{padding-left:100px;padding-right:100px}}@media (max-width:1200px){.cp--h{padding-left:50px;padding-right:50px}.limit--block{width:50%;min-width:450px}}@media (max-width:950px){.cp--v{padding-top:50px;padding-bottom:50px}.limit--block{width:100%;max-width:none;min-width:0}}@media (max-width:700px){.cp--h{padding-left:20px;padding-right:20px}}body{font-size:16px;font-family:Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-feature-settings:"kern" 1,"liga" 1;-moz-font-feature-settings:"kern" 1,"liga" 1;font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;background-image:url('../img/paper.jpg');background-color:#fff;color:#1C1C1C;line-height:1.2}*{box-sizing:border-box}a{color:inherit}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.invis{visibility:hidden;overflow:hidden;max-height:0!important}.visible{opacity:1!important}.video__embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.video__embed-container iframe,.video__embed-container object,.video__embed-container embed{position:absolute;top:0;left:0;width:100%;height:100%}h1,h2,h3{font-size:inherit}a{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip:ink}a:focus{outline:none}.block{position:relative;width:100%;overflow:hidden}.block *{position:relative;z-index:10}.block--green{background-image:url('../img/paper_turquoise.jpg')}.teaser__text{display:inline-block;vertical-align:top;color:#fff}.teaser__text a:hover{color:#1C1C1C}.home hr{box-sizing:content-box;margin-top:70px;margin-bottom:70px;border:0;height:2px;background-color:#fff;opacity:0.5;clear:both}.block--animate.come-in .bubble{top:40px;width:50%;opacity:1}.block--animate.come-in .question{top:0}.bubble{position:absolute;top:40px;width:50%;left:40px;z-index:0}.block--animate .bubble{width:40%;top:250px;opacity:0;-webkit-transition:all 1s ease;transition:all 1s ease}.bubble__image{width:100%}@media (max-width:950px){.home hr{margin-bottom:60px;margin-top:60px}.imprint .bubble,.block--animate.come-in .bubble{width:75%}}.imprint-close{position:absolute;top:50px;right:50px;width:48px;height:48px;background-image:url(../ico/close.svg);z-index:20}.imprint.invis{opacity:0;padding:0}.imprint{max-height:2000px;-webkit-transition:all 1s;transition:all 1s}.main-footer .imprint a{text-decoration:underline}.imprint h2{font-family:Helvetica,Arial,sans-serif;font-weight:bold;margin-bottom:5px}.imprint h2 + p{margin-top:0}.imprint__content{float:right}.imprint__content:first-child{margin-top:0}@media (max-width:950px){.imprint__content{padding-top:75px}}.question{position:relative;display:inline-block;max-width:400px;width:45%;margin-top:0;margin-bottom:70px;-webkit-transition:all 0.6s ease;transition:all 0.6s ease}.block--animate .question{top:25px}.question:before{content:"";position:absolute;left:0;bottom:-36px;height:5px;width:90px;border-bottom:6px solid}.block .block__text{float:right}.block .question{color:#F29400}.block--green .question{color:#fff}@media (max-width:950px){.question{width:auto;margin-bottom:96px}.block__text{padding-left:35px}}@media (max-width:700px){.question{margin-bottom:60px}.question:before{bottom:-18px}}.wikipedia-logo{position:absolute;top:40px;left:50px;width:130px;height:auto}.teaser .cp--v{padding-top:0}.teaser__head{position:relative;height:185px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.teaser__headline{margin:auto 20px -12px 20px;padding:0 70px;display:block;height:130px;background:url('../img/teaser_head.svg') no-repeat bottom center;background-size:contain}.teaser__video-wrapper{position:relative;margin:45px auto 60px auto;max-width:900px}.teaser__text{line-height:1.4;text-align:left;font-weight:bold}.teaser__text + .action-button{margin-left:90px;top:-1em}@media (max-width:1200px){.teaser__text + .action-button{top:1em;margin-left:40px}}@media (max-width:950px){.teaser__headline{margin-left:100px}.wikipedia-logo{top:0;margin-top:40px}.teaser{text-align:center}.teaser__video-wrapper{margin:30px 0 60px 0}.teaser__text + .action-button{margin-left:0;top:2em}}@media (max-width:700px){.teaser__headline{font-size:18px;padding:0;margin:27px 20px 20px 20px}.teaser__head{text-align:center;display:block;height:auto}.wikipedia-logo{width:90px;height:auto;position:relative;display:inline-block;left:0}.teaser__video-wrapper{margin-top:0;margin-bottom:20px}}.block--1 .block__text{margin-top:3em}.banner{position:relative;width:100%;height:300px;background:#9EF1D1 url('../img/banner.png') no-repeat center top;background-size:cover}@media (max-width:950px){.banner{height:250px;background-position:42% 0%}.block--1 .block__text{margin-top:0}}@media (max-width:700px){.block--1,.block--3{background-position:0 25px}}.block--2 .tutorial-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.block--2 .tutorial-link{position:relative;display:inline-block;text-align:center;text-decoration:none;color:#fff;font-weight:bold}.block--2 .tutorial-link{background-position:center center;background-repeat:no-repeat;-webkit-transition:background 1s ease;transition:background 1s ease}.block--2 .tutorial-link--create:hover{background-image:url('../img/link_create_hover.png')}.block--2 .tutorial-link--update:hover{background-image:url('../img/link_update_hover.png')}.block--2 .tutorial-link--insert:hover{background-image:url('../img/link_insert_hover.png')}.block--2 .tutorial-link--create:hover .tutorial-link__image{-webkit-transform:translateY(-10px) rotate(-3deg);transform:translateY(-10px) rotate(-3deg)}.block--2 .tutorial-link--update:hover .tutorial-link__image{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.block--2 .tutorial-link--insert:hover .tutorial-link__image{-webkit-transform:translateY(-10px) rotate(3deg);transform:translateY(-10px) rotate(3deg)}.block--2 .tutorial-link__image{position:relative;height:320px;width:auto;-webkit-transition:all 0.5s ease-out;transition:all 0.5s ease-out}.block--2 .tutorial-link__text{margin-top:10px;display:block}@media (max-width:950px){.block--2 .tutorial-link--create:hover,.block--2 .tutorial-link--update:hover,.block--2 .tutorial-link--insert:hover{background-image:none}.block--2 .tutorial-nav,.block--2 .tutorial-link{display:block}.block--2 .tutorial-link + .tutorial-link{margin-top:40px}.block--2 .tutorial-link--update{padding-right:0}.block--2 .tutorial-link__image{height:25vw;min-height:160px}}.block--3 .tutorial{clear:both}.block--3 a:hover{color:#F29400}.block--3 .tutorial__video{position:relative;overflow:visible}.block--3 .tutorial__video + .tutorial__headline{margin-top:35px;margin-bottom:15px}.block--3 .tutorial__video:before{content:"";position:absolute;right:-10px;bottom:-10px;height:100%;width:100%;background-color:#F29400}.block--3 .tutorial + .tutorial{padding-top:100px}.block--3 .tutorial:nth-of-type(even){float:right}.block--3 .tutorial:nth-of-type(odd) .tutorial__video{left:-10px}.block--3 .tutorial:nth-of-type(even) .tutorial__video:before{right:auto;left:-10px}@media (max-width:1200px){.block--3 .tutorial + .tutorial{padding-top:75px}}@media (max-width:950px){.block--3 .tutorial + .tutorial{padding-top:60px}}@media (max-width:700px){.block--3 .tutorial__video:before{bottom:-5px;right:-5px}.block--3 .tutorial:nth-of-type(odd) .tutorial__video{left:-5px}.block--3 .tutorial:nth-of-type(even) .tutorial__video:before{left:-5px}}.block--4{line-height:1.4}@media (max-width:1200px){.block--4 .teaser__text + .action-button{top:-1em}}@media (max-width:950px){.block--4{text-align:center}.block--4 .teaser__text + .action-button{top:2em}}.main-footer__upper{background-color:#153123;padding:50px;font-size:18px;color:#FFF;line-height:1.4}.main-footer a{text-decoration:none}.main-footer__info-block{float:left;margin:0 0 40px 0;max-width:550px}.main-footer__info-block:first-child{padding-right:100px}.main-footer__nav{display:block;text-align:right;clear:both}.main-footer__link{font-family:Helvetica,Arial,sans-serif;font-weight:bold}@media (max-width:800px){.main-footer__nav{padding-top:0}.main-footer__info-block,.main-footer__info-block:first-child{float:none;display:block;padding:0}.main-footer__nav{text-align:left}}@media (max-width:600px){.main-footer__upper{padding:40px 15px}}.action-button{position:relative;width:277px;height:194px;display:inline-block;color:#F29400;overflow:visible;font-size:16px;font-weight:bold;-webkit-transform:scale(1.0);transform:scale(1.0);-webkit-transition:-webkit-transform 1s ease;transition:transform 1s ease;line-height:1.3;-webkit-backface-visibility:hidden;backface-visibility:hidden}.action-button *{-webkit-transition:-webkit-transform 1s ease;transition:transform 1s ease}.action-button svg,.action-button__graphic{overflow:visible}.action-button__text{display:block;text-align:center;top:67px;left:0;position:absolute;padding-left:55px;padding-right:65px;font-weight:normal}.action-button__text strong{position:relative;top:3px}.action-button .ellipse-1{-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:143.947px 131.068px;transform-origin:143.947px 131.068px}.action-button .ellipse-2{-webkit-transform:rotate(-6deg);transform:rotate(-6deg);-webkit-transform-origin:165.197px 127.827px;transform-origin:165.197px 127.827px}.action-button .ellipse-3{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-transform-origin:148.018px 127.976px;transform-origin:148.018px 127.976px}.action-button:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.action-button:hover .ellipse-1{-webkit-transform:rotate(20deg);transform:rotate(20deg)}.action-button:hover .ellipse-2{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}.action-button:hover .ellipse-3{-webkit-transform:rotate(30deg);transform:rotate(30deg)} |