Tɛmplet:WLXpage/styles.scss
// Variables ////
$color-red: #900000; $color-orange: #D47100; $color-blue: #005290; $color-green: #3B8801; $color-beige: #e0e0d8; $color-black: #000; $color-white: #FFF;
$color-primary: $color-red; $color-secondary: $color-orange; $color-tertiary: $color-blue; $color-quaternary: $color-green;
$colors: ($color-primary, $color-secondary, $color-tertiary, $color-quaternary);
$font-antiqua: 'Linux Libertine', Georgia, serif; $font-grotesk: Arial, sans-serif;
$page-marginal-width:176px;
$mobile: 'body.skin-minerva';
// Code ////
.wlx-outer {
width: 100%; min-height: calc(100vh - 8em); padding-top: 1.6rem; background-color: #FFF; position: relative;
}
.wlx {
max-width: 76em; min-height: 19em; margin: 0 auto 5em; position: relative; width: 100%;
&, *{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6{ color:$color-primary; } sup, sub{ font-size: .55em; font-weight: bolder; }
}
.wlx-with-marginal{
display: flex; margin-left:1rem;
} .wlx-marginal a{
flex: 0 0 auto; min-width: 11rem; white-space: nowrap;
}
/* Navi */ .wlx-navi{} .wlx-navi a, .wlx-marginal .wlx-button{
margin-left:auto; text-align: right; position: relative; display: block;
} .wlx-navi-item{
color: $color-primary; text-transform: uppercase; display:block; font-weight: bolder;
&:hover{ color:#000; } &::after{ content:' »'; }
}
.wlx-navi{
a:not(:last-child){ margin-bottom: .2rem; padding: .2rem; &::before{ content:; display: block; position: absolute; bottom: 0; left:0; right: 0; height: 2px; background-color: #FFF; } }
}
/* Hero */
.wlx-hero{
background-color:$color-beige;
}
.wlx-hero-image{
background-color:#333; overflow: hidden; position: relative; display: flex; max-height: 32rem; align-items: flex-end; flex-direction: row;
}
.wlx-hero-image>a{
position: absolute; top:0; left:0; right:0; bottom:0;
&>img{ height: 100%!important; width: 100%!important; display: block; object-fit:cover; /*position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);*/ }
}
.wlx-hero-label{
position: relative; background-color: rgba(255,255,255,.88); padding: 1.8em; margin:8rem auto 2rem 0; max-width: 57rem;
}
.wlx-hero-label-logo>a{
display: block; max-width: 9.25rem; margin-right:1.8rem; &>img{ max-width: 100%; height:auto; }
}
.wlx-hero-pretitle{
font-size: 1.125rem; line-height: 1.3em; text-transform: uppercase;
}
.wlx-hero-title{
font-size: calc(1rem + .03 * (100vw - #{$page-marginal-width})); font-family: $font-antiqua; color:$color-primary; line-height: 1.04em;
}
- {$mobile}{
.wlx-hero-title{ font-size: calc(1rem + 3vw); }
}
/* process */
.wlx-process{
display: flex; flex-direction: row; flex-wrap: wrap;
} .wlx-process>p{
display: none;
}
.wlx-process-item{
text-align: center; line-height:1.3; flex-basis: 11rem; flex-grow: 1; margin: 1.6rem 0;
}
.wlx-process-item>a{
width: 100%; display: block; position: relative;
} .wlx-process-item>a img{
width: 100%; max-width:6rem!important; height: auto;
}
.wlx-process-item h5{
display: block; font-weight: bold; color:$color-primary;
} .wlx-process-item h5>*{
display: block;
} .wlx-process-item:hover>a img{
filter: grayscale(100%);
}
.wlx-process-item:not(:last-child){
margin-right:1.6rem;
}
.wlx-process-item:not(:first-child)>a::after{
content:; display:block; width:1rem; height: 1rem; border: 3.6px solid $color-primary; border-left:transparent; border-bottom: transparent; position: absolute; right: calc(100% + .8rem); top:50%; transform: translate(50%, -50%) rotate(45deg);
}
@media screen and (min-width:440px) and (max-width:1023px){
.wlx-process-item{ flex-basis: 40%; }
}
@media screen and (min-width:1640px){
.wlx{ transform: translateX(-4rem); } .wlx-process{ position: absolute; display: block; left: calc(100% + 1.5rem); flex-direction: column; width: 10.5rem; top:0; } .wlx-process-item{ text-align: left; } .wlx-process-item:first-child{ margin-top: 0; } .wlx-process-item:not(:first-child)>a::after{ top: -1.5rem; right: auto; left: 2rem; transform: translate(50%, -50%) rotate(135deg); }
}
@media screen and (min-width:1800px){
.wlx{ transform: translateX(-9rem); } .wlx-process{ width: 24.5rem; } .wlx-process-item{ display: flex; flex-direction: row; } .wlx-process-item>a.image{ flex: 0 0 7rem; }
}
/* Boxes */
[class*=wlx-box-bg-]{
color: $color-white;
h2,h3,h4,h5,h6{ color:currentColor; }
a{ color: currentColor; text-decoration: underline; }
}
.wlx-box-bg{
padding: 1.2rem 1.8rem;
@for $i from 1 through length($colors){ &-#{$i}{ background-color: nth($colors, $i); } }
}
/* BreakPoints Desktop */
@media screen and (min-width:480px){
.wlx-hero-image.wlx-hero-image{ height: 56vw; } .wlx-hero-label{ position: relative; background-color: rgba(255,255,255,.88); padding: 1.8em; margin:8rem auto 2rem 0; max-width: 57rem; display: flex; align-items: center; }
}
@media screen and (min-width:1244px){
.wlx-hero-title{ font-size: 3rem; }
}
/* BreakPoints Mobile */
- {$mobile}{
@media screen and (max-width:719px){ .wlx{ width: 100vw; margin: 0 -1rem; } .wlx-process{ padding: 0 0.8rem; } }
@media screen and (min-width:1068px){ .wlx-hero-title{ font-size: 3rem; } }
}
/* Grid */
$grid-gap: 1rem; $breakpoints: ("s": 450px, "m": 640px, "l": 940px, "xl": 1200px); $columns: 12; $grid-gaps: $grid-gap * ($columns - 1);
.wlx-grid{
display: flex; margin-right: -$grid-gap; flex-wrap: wrap;
}
.wlx-grid>*{
flex: 0 0 100%; margin-right: $grid-gap;
}
@for $i from 1 through $columns {
.wlx-grid-w#{$i} { flex-basis: calc( #{$i} / #{$columns} * (100% - #{$grid-gaps}) + #{$grid-gap * ($i - 1)} ); }
}
@each $breakpoint, $viewport-width in $breakpoints {
@media screen and (min-width:#{$viewport-width}){ @for $i from 1 through $columns { .wlx-grid-#{$breakpoint}-w#{$i} { flex-basis: calc( #{$i} / #{$columns} * (100% - #{$grid-gaps}) + #{$grid-gap * ($i - 1)} ); } } }
}