@if not-imported("import_once_func") { @import "inc/import_once_func"; }
//@import "inc/normalize.css"; // Normalize browser defaults
@if not-imported("framework") { @import "inc/framework"; } // Load framework
/* ------ COMMON CLASSES ------ */
@if not-imported("common") { @import "inc/common"; }
/* ------ BASE FONT STYLING ------ */
@if not-imported("font") { @import "inc/font"; }
/* ------ BASE FORM STYLING ------ */
@if not-imported("form") { @import "inc/form"; }
/* ------ CUSTOM ELEMENTS ------ */
@if not-imported("custom-elements") { @import "inc/custom-elements"; }
html {
height: 100%;
}
#logo {
position: absolute;
max-width: 35%;
left: 35px;
top: 25px;
width: 215px;
svg {
width: 100%;
vertical-align: middle;
}
@include for-mobile {
max-width: 20%;
left: 25px;
top: 15px;
}
}
.background-wrapper {
display: flex;
align-items: center;
height: 100%;
.background-wrapper-helper,
.background-wrapper-inner {
width: 100%;
}
.background-wrapper-inner {
width: 100%;
text-align: center;
padding: 100px 0;
/*flex: 0 0 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;*/
}
}
.teaser,
.form {
max-width: 100%;
margin: 0 auto;
&.form {
//background: rgba(#fff,0.1);
padding: 40px 0 20px;
text-align: right;
}
@include for-max-size(1400px) {
width: 66%;
}
@include for-mobile {
width: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
.more,
.goto {
margin-top: 3em;
font-size: $font-size-default;
padding-bottom: 1.5em;
a {
@include button($color: $color-text-invert, $border-color: $color-text-invert, $background-color: transparent, $background-color-hover: transparent);
letter-spacing: 0.1em;
font-weight: 400;
height: 30px;
line-height: 20px;
padding: 3px 10px;
overflow: hidden;
z-index: 0;
text-transform: none;
}
}
}
.slideMeta {
.number {
position: absolute;
font-family: $font-family-alternate;
font-size: 535px;
left: 0;
top: 50%;
@include transform(translate(-33%, -50%));
opacity: .1;
@include for-max-size(1200px) {
font-size: 42vw;
}
}
.display {
position: absolute;
font-family: $font-family-handwriting;
font-size: 54px;
left: 0;
bottom: 50%;
@include transform(translateY(35vh));
opacity: .4;
@include for-max-size(1200px) {
font-size: 5vw;
}
@include for-mobile {
font-size: 30px;
}
}
}
.content-modal,
.content-modal-transparent {
color: $color-text-invert;
font-family: $font-family;
font-size: font-size(18px);
font-weight: 300;
line-height: 1.3;
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
padding: 15px;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.25);
@include box-sizing(border-box);
@include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
body > & {
z-index: 1000;
}
h1,h2,h3,h4,h5,h6 {
color: $color-headline;
line-height: 1;
}
&.-show {
opacity: 1;
visibility: visible;
@include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
.full-content {
@include transform(translateX(0));
@include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
}
}
.image_container {
&.float_above {
margin: 0 0 2rem 0;
}
}
.full-content {
@include box-sizing(border-box);
@include transform(translateX(100%));
@include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
position: absolute;
max-width: 100vw;
:not(.content-modal-transparent)& {
top: 0;
right: 0;
bottom: 0;
width: 650px;
text-align: center;
background-color: #000;
padding: 50px 45px 50px 60px;
overflow: hidden;
}
.content-modal-transparent& {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: 1200px;
max-height: 100vh;
//max-height: -webkit-fill-available;
max-height: calc(100vh - 80px);
background-color: rgba(#000,0.8);
@include box-shadow(0 0 50px 10px #000);
padding: 80px 40px 60px;
overflow: hidden;
@include transform(translate(-50%,-50%));
}
.scrollcontent {
:not(.content-modal-transparent)& {
position: absolute;
top: 60px;
right: 60px;
bottom: 60px;
left: 60px;
padding: 10px 15px 10px 0;
max-height: calc(100vh - 100px);
}
@include box-sizing(border-box);
max-height: 100vh;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.close-modal {
position: absolute;
top: 15px;
left: 15px;
width: 30px;
height: 30px;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
//border: 1px $color-text solid;
cursor: pointer;
&:hover {
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BA0C2F' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
}
.content-modal-transparent& {
left: 50%;
@include transform(translateX(-50%));
}
}
}
.ce_hyperlink {
font-size: font-size(14px);
font-family: $font-family;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
a {
display: inline-block;
color: $color-text;
padding: 10px 30px 10px 20px;
position: relative;
@include transition(all 0.25s ease);
border: 1px $color-link solid;
background-color: #000;
&:before {
position: absolute;
right: 0.5em;
top: 50%;
margin-top: -0.5em;
font-size: 1.25em;
width: 1em;
height: 1em;
content: '';
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
}
&:hover {
color: $color-link;
}
}
&.alternate {
font-size: font-size(20px);
letter-spacing: normal;
font-family: $font-family-alternate;
text-transform: none;
font-weight: 700;
a {
background: none;
border: none;
padding: 0;
border-bottom: 2px $color-text solid;
&:before {
display: none;
}
}
}
}
}
#vertical-navigation {
opacity: 1;
visibility: visible;
@include transition(all 0.25s ease-out);
.mod_articlelist {
position: fixed;
right: 25px;
top: 50%;
width: 30px;
height: 50vh;
margin-top: -25vh;
z-index: 1000;
ul {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
li.-hide {
display: none;
}
li:not(.-hide) {
flex: 3 3 0;
padding: 5px 0;
&.-small {
flex: 1 1 0;
}
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background: #fff;
line-height: 1;
font-size: 0;
opacity: .35;
@include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
@include transition(none);
div {
opacity: 0;
visibility: hidden;
position: absolute;
right: 100%;
top: 2px;
color: $color-text-invert;
text-transform: lowercase;
font-size: font-size(16px);
font-weight: 400;
padding-top: 3px;
padding-right: 2px;
@include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
@include transform(translate(0, 15px));
&:before {
position: absolute;
left: 0;
bottom: 100%;
right: -10px;
height: 2px;
background-color: $color-link;
content: '';
}
.label-holder {
line-height: 1.3;
color: $color-text;
width: 150px;
min-height: 2.6em;
display: flex;
align-items: center;
background-color: $color-bg-senary;
padding: 5px;
.label {
flex: 1 0 0;
text-align: center;
}
}
}
&:hover,
&.active {
background: $color-bg-secondary;
&:before {
background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;}
&:after {
background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;}
}
&:hover {
div {
opacity: 1;
visibility: visible;
@include transform(translate(0,0));
}
}
&:before {
position: absolute;
left:0;
right: 0;
bottom: 100%;
height: 10px;
content: '';
background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
&:after {
position: absolute;
left:0;
right: 0;
top: 100%;
height: 10px;
content: '';
background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
&:first-child {
a {
&:before {
display: none;
}
}
}
}
@include for-mobile {
right: 15px;
top: 50%;
width: 20px;
}
}
}
/**
* CURTAIN
*/
#curtainstage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
/*background-color: rgb(0,0,0);
box-shadow: 0 0 0 2px white inset;*/
}
#curtain {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
#curtain .left,
#curtain .right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
//filter: brightness(120%);
background-image: url("/files/pub/Landingpage/Wein/curtain_rot.svg");
background-size: cover;
background-repeat: no-repeat;
}
#curtain .left {
left: 0;
transform-origin: top right;
}
#curtain .right {
left: 50%;
transform-origin: top left;
}
/* **********
opening
********** */
#curtainstage {
animation-name: curtain-remove;
animation-duration: 4s;
animation-fill-mode: forwards;
}
#curtain.open .left,
#curtain.open .right {
filter: brightness(100%);
}
#curtain.open .left {
animation-fill-mode: forwards;
animation-name: curtain-opening, left-curtain-opening;
animation-duration: 2s, 4s;
animation-timing-function: ease-in-out, ease-in-out;
animation-delay: 0s, 0s;
animation-iteration-count: 1, 1;
animation-direction: normal, normal;
}
#curtain.open .right {
animation-fill-mode: forwards;
animation-name: curtain-opening, right-curtain-opening;
animation-duration: 2s, 4s;
animation-timing-function: ease-in-out, ease-in-out;
animation-delay: 0s, 0s;
animation-iteration-count: 1, 1;
animation-direction: normal, normal;
}
/* **********
animations
********** */
@keyframes curtain-remove { /* 2s */
from { visibility: visible; }
to { visibility: hidden; }
}
@keyframes curtain-opening { /* 2s */
from { filter: brightness(100%); }
to { filter: brightness(100%); }
}
@keyframes left-curtain-opening { /* 4s */
from { transform: translate(0) rotate(0) scale(1,1); }
to { transform: translate(-100%) rotate(20deg) scale(0,2); }
}
@keyframes right-curtain-opening { /* 4s */
from { transform: translate(0) rotate(0) scale(1,1); }
to { transform: translate(100%) rotate(-20deg) scale(0,2); }
}
.ce_gallery {
&.-references {
ul {
justify-content: center;
> li {
flex: 0 1 31.666%;
margin-bottom: 25px;
min-width: 150px;
figure {
text-align: center;
}
}
}
}
}
.background-wrapper{
.fp-section:not(:last-child) & {
.overlay {
&:before {
background-image: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' stroke='none' fill='%23FFFFFF' viewBox='0 0 64 64'%3E%3Cpath d='M45.5,13.5c0,-7.451 -6.049,-13.5 -13.5,-13.5c-7.451,0 -13.5,6.049 -13.5,13.5l0,21c0,7.451 6.049,13.5 13.5,13.5c7.451,0 13.5,-6.049 13.5,-13.5l0,-21Zm-1.047,0l-0,21c-0,6.873 -5.58,12.453 -12.453,12.453c-6.873,-0 -12.453,-5.58 -12.453,-12.453l0,-21c0,-6.873 5.58,-12.453 12.453,-12.453c6.873,0 12.453,5.58 12.453,12.453Z'/%3E%3Cpath d='M34,8.5c0,-1.104 -0.896,-2 -2,-2c-1.104,0 -2,0.896 -2,2l0,6c0,1.104 0.896,2 2,2c1.104,0 2,-0.896 2,-2l0,-6Zm-1.047,0l-0,6c-0,0.526 -0.427,0.953 -0.953,0.953c-0.526,-0 -0.953,-0.427 -0.953,-0.953c0,-0 0,-6 0,-6c0,-0.526 0.427,-0.953 0.953,-0.953c0.526,0 0.953,0.427 0.953,0.953Z'/%3E%3Cpath d='M18.318,50.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3Cpath d='M18.318,55.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3C/svg%3E");
width: 64px;
height: 64px;
content: '';
position: absolute;
bottom: 2rem;
left: 50%;
margin-left: -32px;
opacity: 0;
}
}
}
.fp-section:not(:last-child).active & {
.overlay {
&:before {
-webkit-animation: scroll-indicator 5s linear 6s infinite;
-moz-animation: scroll-indicator 5s linear 6s infinite;
animation: scroll-indicator 5s linear 6s infinite;
}
}
}
}
@-webkit-keyframes scroll-indicator {
0% {
opacity: 0;
-webkit-transform: translateY(-0.5rem);
-moz-transform: translateY(-0.5rem);
-ms-transform: translateY(-0.5rem);
-o-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
35% {
/*-webkit-transform: translateY(0.5rem);
-moz-transform: translateY(0.5rem);
-ms-transform: translateY(0.5rem);
-o-transform: translateY(0.5rem);
transform: translateY(0.5rem);*/
}
75% {
opacity: 0.5;
/*-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);*/
}
100% {
opacity: 0;
-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);
}
}
@-moz-keyframes scroll-indicator {
0% {
opacity: 0;
-webkit-transform: translateY(-0.5rem);
-moz-transform: translateY(-0.5rem);
-ms-transform: translateY(-0.5rem);
-o-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
35% {
/*-webkit-transform: translateY(0.5rem);
-moz-transform: translateY(0.5rem);
-ms-transform: translateY(0.5rem);
-o-transform: translateY(0.5rem);
transform: translateY(0.5rem);*/
}
75% {
opacity: 0.5;
/*-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);*/
}
100% {
opacity: 0;
-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);
}
}
@keyframes scroll-indicator {
0% {
opacity: 0;
-webkit-transform: translateY(-0.5rem);
-moz-transform: translateY(-0.5rem);
-ms-transform: translateY(-0.5rem);
-o-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
35% {
/*-webkit-transform: translateY(0.5rem);
-moz-transform: translateY(0.5rem);
-ms-transform: translateY(0.5rem);
-o-transform: translateY(0.5rem);
transform: translateY(0.5rem);*/
}
75% {
opacity: 0.5;
/*-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);*/
}
100% {
opacity: 0;
-webkit-transform: translateY(1rem);
-moz-transform: translateY(1rem);
-ms-transform: translateY(1rem);
-o-transform: translateY(1rem);
transform: translateY(1rem);
}
}