SCSS
// Variables
$global-bg: #313131;
$global-theme: #ee3d41;
$global-wht: #fff;
$global-shadow: #f8d9d9;
$global-br: 7px;
// Mixins
@mixin trans($rotZ) {
transform: rotateZ(#{$rotZ}deg);
}
// Placeholders
%abs {
position: absolute;
}
%rel {
position: relative;
}
%p-el {
&::before,
&::after {
content: "";
display: block;
@extend %abs;
}
}
%v {
@extend %abs;
@extend %p-el;
width: 36px;
height: 146px;
background: $global-wht;
border-radius: 42px;
@include trans(-30);
z-index: 10;
}
%bg {
background: $global-theme;
width: 100%;
height: 100%;
left: 0;
border-radius: inherit;
z-index: -1;
}
// Main Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: $global-bg;
}
.logo {
@extend %rel;
@extend %p-el;
margin: 100px auto 0;
width: 193.5px;
height: 194px;
background: $global-theme;
box-shadow: inset 0 -4px rgba(0,0,0, .13);
border-radius: $global-br;
&::before {
@extend %bg;
@include trans(-6);
opacity: .5;
}
&::after {
@extend %bg;
@include trans(-12);
opacity: .3;
}
}
.v {
@extend %v;
top: 12.5%;
left: 25.8%;
box-shadow: inset -3px 0 0 0 $global-shadow;
&::before {
@extend %v;
@include trans(60);
top: 18.9%;
left: 134%;
}
&::after {
width: 80px;
height: 58px;
background: $global-theme;
@include trans(90);
border-radius: 20px 38px 34px 0;
box-shadow: 0 7px 0 -4px $global-shadow,
10px 20px 0 0 white;
top: 20.5%;
left: 68.5%;
z-index: 20;
}
}
.h-light {
@extend %v;
@include trans(30);
box-shadow: inset -1px 0 0 -1px $global-wht,
inset -3px 0 0 0 $global-shadow;
top: 12.8%;
background: transparent;
right: 26.8%;
z-index: 200;
}
.mask {
@extend %abs;
@extend %p-el;
top: 16.5%;
right: 32.2%;
&::before {
display: block;
width: 37px;
height: 37px;
background: $global-wht;
border-radius: 50%;
z-index: 40;
}
&::after {
width: 10px;
height: 10px;
background: $global-theme;
z-index: 35;
top: 14px;
left: -5px;
}
}
.longshadow {
@extend %abs;
@extend %p-el;
width: 74px;
height: 145px;
background: linear-gradient(to right, rgba(0,0,0, .3), transparent);
bottom: 4.5%;
right: 3%;
@include trans(30);
&::before {
width: 30px;
height: 25px;
top: 55%;
left: -48%;
background: $global-wht;
}
&::after {
width: 40px;
height: 35px;
@include trans(150);
top: -9%;
right: -22.5%;
background: $global-bg;
}
}
