Tɛmpileti: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)} );
}
}
}
}