$blue: #59B3F0;
$orange: #fe562b;
$green: #00cb72;
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
body{
font-size: 10px;
// border:1px solid red;
height:100vh;
background: linear-gradient(to right, #ece9e6, #ffffff);
}
#art {
// opacity: 70%;
font-size: 1.2vmin;
@media only screen and (max-width: 980px) {
font-size:.9vmin;
}
width: 100.25em;
height: 36em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-49.5%, -50%);
background-repeat: no-repeat;
background-color: #DADADA;
background:
// right
linear-gradient(
to right,
rgba(#fff,.08) 45%,
rgba(#000,.1) 49%,
rgba(#000,0),
)
100% 00% /.4em 100% ,
// top
linear-gradient(
rgba(#000,.08) 45%,
rgba(#fff,.1) 49%,
rgba(#000,0),
)
00% 00% / 100% .3em,
// btm
linear-gradient(
rgba(#fff,.08) 45%,
rgba(#000,.1) 49%,
rgba(#000,0),
)
00% 100% / 100% .3em,
// left
linear-gradient(
to right,
rgba(#000,.08) 45%,
rgba(#fff,.1) 49%,
rgba(#000,0),
)
00% 00% /.4em 100% ,
linear-gradient(-45deg, rgba(#000,.075), rgba(#000,.0)),
#E0DEEB;
background-repeat: no-repeat;
border-radius: 2em;
display: flex;
.main-block{
width: 91.8em;
height: 32.7em;
border-radius: .5em;
position: absolute;
top:49.8%;
transform: translateY(-50%);
left:1.9em;
background: #0C0A17;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap:.2em;
padding: 0.16em;
.row{
color:#7D7E8A;
border-radius: .06em;
overflow: hidden;
display: grid;
gap:.06em;
gap:.2em;
&:nth-of-type(1){
grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr 1fr .5fr;
.button-block{
&:nth-of-type(2){
display: grid;
gap:.2em;
grid-template-rows: 1fr 1fr;
.button-row{
&:nth-of-type(2){
gap:.2em;
display: grid;
grid-template-columns: 1fr 1fr
}
}
}
&:nth-of-type(8){
display: grid;
grid-template-rows: 1fr 1fr;
gap:.2em;
}
}
}
&:nth-of-type(2){
grid-template-columns: 1.5fr 2fr 1.5fr 2fr 1.5fr ;
background: #0C0A17;
gap:.2em;
.button-block{
display: grid;
&:nth-of-type(1){
grid-template-columns: repeat(3, 1fr);
gap:.2em;
}
&:nth-of-type(2), &:nth-of-type(4){
grid-template-rows: repeat(2, 1fr);
row-gap:.2em;
.button-row{
&:nth-of-type(1){
gap:.2em;
display: grid;
grid-template-columns: repeat(4,1fr);
}
&:nth-of-type(2){
gap:.2em;
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr
}
}
}
&:nth-of-type(3), &:nth-of-type(5){
grid-template-rows: repeat(2, 1fr);
row-gap:.2em;
.button-row{
&:nth-of-type(1){
gap:.2em;
display: grid;
grid-template-columns: repeat(3,1fr);
}
&:nth-of-type(2){
gap:.2em;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
}
}
}
&:nth-of-type(3){
grid-template-columns: 1.5fr 2fr 1.5fr 2fr 1.5fr ;
.button-block{
display: grid;
gap: .2em;
&:nth-of-type(1), &:nth-of-type(5){
grid-template-columns: repeat(3, 1fr);
}
&:nth-of-type(2), &:nth-of-type(4){
grid-template-columns: repeat(4,1fr);
}
&:nth-of-type(3){
grid-template-columns: repeat(3,1fr);
}
&:nth-of-type(4){
.button{
.button--long{
box-shadow:
.15em .15em .3em rgba(#fff,1.1) inset,
.25em .25em .3em rgba(#232323,.1) inset,
.35em .35em .4em .0em rgba(#000,.3),
.3em .2em .4em rgba(#fff,.1) inset,
-.6em -.6em 1.2em #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
}
}
}
&:nth-of-type(5){
.button{
&:nth-of-type(1){
.button--long{
box-shadow:
.15em .15em .3em rgba(#fff,1.1) inset,
.25em .25em .3em rgba(#232323,.1) inset,
.35em .35em .4em .0em rgba(#000,.35),
.3em .2em .4em rgba(#fff,.1) inset,
-.6em -.6em 1.2em #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
}
}
&:nth-of-type(2){
.button--long{
box-shadow:
.15em .15em .3em rgba(#fff,1.1) inset,
.25em .25em .3em rgba(#232323,.1) inset,
.35em .35em .4em .0em rgba(#000,.35),
.3em .2em .4em rgba(#fff,.1) inset,
-.6em -.6em 1.2em #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
}
}
&:nth-of-type(3){
&:nth-of-type(3){
.button--long{
background:
linear-gradient(to right, rgba(#232323,.05) 1%, rgba(#e6e9f3,.5) 20%),
linear-gradient(145deg, #e6e9f3, rgba(#c2c4cc,.5)),
;;
box-shadow:
.15em .15em .3em rgba(#fff,1) inset,
.25em .25em .3em rgba(#232323,.1) inset,
.35em .35em .4em .0em rgba(#000,.55),
.3em .2em .4em rgba(#fff,.1) inset,
-.6em -.6em 1.2em #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
}
}
}
}
}
}
}
}
.speaker{
position: absolute;
top:50%;
left:52%;
transform: translate(-50%,-50%);
width: 9.1em;
height: 9.1em;
display: grid;
grid-template-rows: repeat(13,1fr);
.speaker-grid{
margin: 0 auto;
display: grid;
&--7{
width: 55%;
grid-template-columns: repeat(7, 1fr);
}
&--11{
width: 85%;
grid-template-columns: repeat(11, 1fr);
}
&--13{
width: 100%;
grid-template-columns: repeat(13, 1fr);
}
.speaker-dot{
width: .45em;
height: .45em;
border-radius: 50%;
background-color: #25242C;
}
}
}
.screen{
border-radius: .4em;
border:2px solid black;
font-family: 'Roboto Condensed', sans-serif;
height: 100%;
position: relative;
background:
linear-gradient(
rgba(#fff,.08) 49%,
rgba(#000,0),
)
00% 00% / 100% .3em,
linear-gradient(
rgba(#fff,.08),
rgba(#000,0),
)
00% 00% / .2em 100%,
linear-gradient(
rgba(#fff,.02),
rgba(#000,0),
)
00% 00% / 1.2em 100%,
linear-gradient(to bottom, rgba(#fff,.08) , rgba(#fff,0.00)),
linear-gradient(-45deg, rgba(#fff,0.0) 60%, rgba(#fff,0.08) 61%),
linear-gradient(-45deg, rgba(#fff,0.0) 60%, rgba(#fff,0.08) 61%),
linear-gradient(to right, #000, #1c1d1e, #000);
background-repeat: no-repeat;
color:#fff;
.number{
width: fit-content;
font-size: 2em;
padding: .005em .05em;
position: absolute;
top:.5em;
font-family: 'Major Mono Display', monospace;
border:.1em solid rgba(#fff,1);
position: absolute;
left:.525em;
}
.center-text{
font-size: 1.5em;
position: absolute;
left: 53%;
top:.45em;
transform: translateX(-50%);
color:#fff;
}
.circles-wrapper{
position: absolute;
width: 70%;
height:5.5em;
left: 51%;
top:1.6em;
transform: translateX(-50%);
display: grid;
grid-template-columns: 1fr 1fr;
gap:3.7em;
.circle{
border-radius: 50%;
border:.15em solid rgba(#fff,1);
position: relative;
&::after{
content: '';
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: 1.5em;
height: 1.5em;
border-radius: 50%;
border:.15em solid rgba(#fff,1);
}
}
.icon-back{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
i{
color:rgba(#fff,1);
}
}
}
.bottom-center-blocks{
width: 60%;
height: 1.2em;
position: absolute;
left:50%;
top:77%;
transform: translate(-50%,-50%);
.circle--small{
width: .6em;
aspect-ratio: 1/1;
border-radius: 50%;
position: absolute;
left:1.6em;
top:.5em;
border:.15em solid rgba(#fff,1);
&:nth-of-type(2){
left:87%;
top:0;
}
}
.circles{
width: 55%;
position: absolute;
left:52%;
transform: translateX(-50%);
height: 70%;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap:5em;
.circle{
height: 90%;
aspect-ratio: 1/1;
border-radius: 50%;
border:.15em solid rgba(#fff,1);
}
}
.square{
width: .9em;
height: .9em;
border:.15em solid rgba(#fff,1);
position: absolute;
left:52%;
transform: translateX(-50%);
}
}
.right-red-line{
width: .1em;
height:6.2em;
border-left:.1em solid rgba(#d6567b,.6);
position: absolute;
right: 1em;
top:2em;
.line{
position: absolute;
width: .1em;
height:3em;
border-left:.15em solid rgba(#d6567b,.8);
position: absolute;
right: .01em;
bottom: 0;
&::after{
content: "";
position: absolute;
width: .55em;
height: .55em;
border-radius: 50%;
left:-50%;
transform: translateX(-60%);
top:-1.5em;
background-color: rgba(#d6567b,.7);
}
}
}
.bottom-lines{
width: 95%;
height: 1em;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: .8em;
display: grid;
grid-template-columns: 1fr 2fr .5fr;
gap: .5em;
&--line-wrapper{
bottom: 0;
&:nth-of-type(1){
background:
linear-gradient(
transparent 80%,
rgba(#d6567b,.5) 51%,
)
50% 100% / 100% 1em, ;
background-repeat: no-repeat;
}
&:nth-of-type(2){
background:
linear-gradient(
transparent 80%,
rgba(#93a2e5,.5) 51%,
)
50% 100% / 100% 1em, ;
background-repeat: no-repeat;
}
&:nth-of-type(3){
background:
linear-gradient(
transparent 80%,
rgba(#d6567b,.5) 51%,
)
100% 100% / 50% 1em, ;
background-repeat: no-repeat;
}
}
}
}
.button{
width: 100%;
height: 100%;
background: #DEE0E8;
background: #E0DEEB;
border-radius: .4em;
position: relative;
font-family: 'Roboto Condensed', sans-serif;
&-inset{
&--outer{
width: 6.5em;
height: 6.5em;
position: absolute;
top:52%;
left:53%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
linear-gradient(
30deg,
transparent 50%,
rgba(#000,.41),
)
50% 100% / 100% 100%,
radial-gradient(#3F3F49, #878E96),
;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px,
rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px inset;
background-repeat: no-repeat;
}
&--inner{
width: 5.8em;
height: 5.8em;
border-radius: inherit;
position: absolute;
top:50%;
left:51%;
transform: translate(-50%,-50%);
background-color: #E0DEEB;
background: linear-gradient(145deg, #f0eefb, #cac8d4);
}
&--button{
width: 3.5em;
height: 3.5em;
border-radius: inherit;
position: absolute;
top:48%;
left:50.5%;
transform: translate(-50%,-50%);
box-shadow:
.15em -.15em .2em .0em rgba(#000,.15) inset,
.35em -.15em .2em .0em rgba(#fff,.1) inset,
-.15em -.15em .2em .0em rgba(#000,.15) inset,
.15em .15em .2em .0em rgba(#fff,.15) inset,
.55em .5em .8em .0em rgba(#000,.30),
.25em .25em .2em .0em rgba(#232323,.45),
.3em .2em .4em rgba(#fff,.1) inset,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
&--blue{
border:1px solid #59B3F0;
background: $blue;
.button-inset--button--inner{
background: #59B3F0;
}
}
&--orange{
border:1px solid $orange;
background: $orange;
.button-inset--button--inner{
background: $orange;
transform: translate(-50%,-50%) rotate(0deg);
}
}
&--green{
border:1px solid $green;
background: $green;
.button-inset--button--inner{
background: $green;
transform: translate(-50%,-50%) rotate(90deg);
box-shadow:
inset .1em -.1em .1em rgba(#000,.3),
inset -.2em -.1em .2em rgba(#fff,.38);
}
}
&--white{
border:1px solid #FCFAFD;
background: #FCFAFD;
.button-inset--button--inner{
background: #FCFAFD;
border:1px solid rgba(#999,.15);
transform: translate(-50%,-50%) rotate(-45deg);
box-shadow:
inset .0em .15em .1em rgba(#000,.3),
inset -.2em -.1em .2em rgba(#fff,.38);
}
}
&--inner{
width: .7em;
height: 2.5em;
border-radius: 1em;
position: absolute;
top:48%;
left:51%;
transform: translate(-50%,-50%) rotate(55deg);
box-shadow: inset .1em .1em .1em rgba(#000,.3),
inset -.1em -.1em .1em rgba(#fff,.18);
}
}
}
&--long{
position: absolute;
top:49%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.5em;
height: 8.8em;
border-radius: 2em;
background:
linear-gradient(to right, rgba(#232323,.05) 1%, rgba(#e6e9f3,.5) 20%),
linear-gradient(145deg, #e6e9f3, rgba(#c2c4cc,.5)),
;;
box-shadow:
.15em .15em .3em rgba(#fff,1.1) inset,
.25em .25em .3em rgba(#232323,.1) inset,
6px 6px 12px #b7b9c1,
.25em .25em .2em .0em rgba(#232323,.4),
.3em .2em .4em rgba(#fff,.1) inset,
-6px -6px 12px #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
}
&--knob--outer{
width: 3.7em;
height: 3.7em;
border:1px solid gray;
border-radius: 50%;
top:51%;
left: 25%;
position: absolute;
transform: translate(-50%, -50%);
}
&--knob{
width: 3.5em;
height: 3.5em;
border-radius: 50%;
top:46%;
left: 43%;
position: absolute;
transform: translate(-50%, -50%);
background-color: #FBFBFD;
background: linear-gradient(145deg, #ffffff, #e2e2e4);;
box-shadow:
.25em -.2em .1em .0em rgba(#232323,.3),
6px 6px 12px #b7b9c1,
.35em .25em .2em .0em rgba(#232323,.6),
.25em .25em .2em .0em rgba(#232323,.6),
.25em .25em .2em .0em rgba(#232323,.6),
.3em .2em .4em rgba(#fff,.1) inset,
-3px -3px 8px rgba(#f7fbff,.5),
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
&::after{
content: "";
width: .5em;
height: .5em;
position: absolute;
top:65%;
left:25%;
border-radius: inherit;
z-index: -1;
background:
linear-gradient(145deg, #e2e2e4, #ffffff);
box-shadow: .1em .1em .2em #d5d5d7,
-.1em -.1em .2em #ffffff;
box-shadow: inset .25em .25em .5em #b2b2b4,
inset -.25em -.2em .5em #ffffff;
}
}
&--circle{
position: absolute;
width: 3.5em;
height: 3.5em;
top:51%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
linear-gradient(to right, rgba(#232323,.05) 1%, rgba(#e6e9f3,.5) 20%),
linear-gradient(145deg, #e6e9f3, rgba(#c2c4cc,.5)),
;;
box-shadow:
.35em -.15em .2em .0em rgba(#fff,.25) inset,
.6em .6em 1em #b7b9c1,
.25em .25em .2em .0em rgba(#232323,.6),
.3em .2em .4em rgba(#fff,.1) inset,
-.4em -.4em .8em #f7fbff,
.0em .5em .4em rgba(#c2c4cc,.21) inset,
.0em .2em .4em rgba(#fff,.21) inset,
;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap:.3em;
&--right{
transform: translate(-10%, -50%);
}
&--left{
transform: translate(-90%, -50%);
}
&--no-gap{
gap:.0em;
}
&--black{
&::after{
content: "";
width: 3.1em;
height: 3.1em;
background-color: #11100E;
background: linear-gradient(to right, #000000, #434343);
background: radial-gradient(#232323, #2a2a2a);
position: absolute;
top:50%;
left: 50%;
transform: translate(-48%, -49%);
border-radius: 50%;
}
}
i{
margin-left: .15em;
display: block;
font-size: 1.3em;
}
}
.orange-circle{
width: 2.7em;
height: 2.7em;
border:1px solid rgba(#000,.15);
background-color: $orange;
border-radius: inherit;
position: relative;
&::after{
content: "";
width: .9em;
height: .9em;
position: absolute;
background-color: #DCD5DB;
border-radius: 50%;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.icon{
&--orange{
color:$orange;
}
&--reversed{
transform: scale(-1, 1);
}
&--small{
font-size: .8em;
}
}
.font{
&--small{
font-size: .8em;
}
&--bold{
font-weight: bold;
}
&--mono{
font-family: 'Major Mono Display', monospace;
font-size: 2em;
font-weight: bold;
}
&--green{
color: #00cb72;
letter-spacing: .25em;
text-align: center;
padding-left: .25em;
}
&--letter-spacing{
letter-spacing: .05em;
}
}
svg{
max-width: 1.25em;
&#snake{
max-width: 1.8em;
.cls-1 {
fill: none;
stroke: #5d9dd0;
stroke-miterlimit: 10;
stroke-width: 15px;
}
}
&#triangle-line{
position: absolute;
top:52%;
left: 54%;
transform: translate(-50%, -50%);
max-width: 1.25em;
.cls-1 {
fill: #7D7E8A;
}
.cls-2 {
fill: none;
stroke: #7D7E8A;
stroke-miterlimit: 10;
stroke-width: 8px;
}
}
&#circle-line{
position: absolute;
top:52%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1.25em;
.cls-1 {
fill: #00cb72;
}
.cls-1, .cls-2, .cls-3 {
stroke: #00cb72;
stroke-miterlimit: 10;
}
.cls-2 {
stroke-width: .6em;
}
.cls-2, .cls-3 {
fill: none;
}
.cls-3 {
stroke-width: .8em;
}
}
&#arrow-down, &#arrow-up{
.cls-1, .cls-2 {
fill: #fe562b;
}
.cls-2 {
stroke: #fe562b;
stroke-miterlimit: 10;
stroke-width: 15px;
}
}
}
.dots--grid{
display: flex;
gap: .2em;
.dot{
&:nth-of-type(2){
position: relative;
top:-.40em;
}
}
}
.dots{
display: flex;
gap: .15em;
align-items: center;
.dot{
border-radius: 50%;
background-color: #fe562b;
&:nth-of-type(1){
width: .35em;
height: .35em;
}
width: .25em;
height: .25em;
}
}
.dot{
width: .35em;
height: .35em;
background-color:#7D7E8A;
border-radius: 50%;
&--blue{
background-color: #1B84C5
}
}
}
.right-block{
width: 1.7em;
position: absolute;
z-index:5;
height: 77.5%;
left:95.8%;
top:49.2%;
transform: translateY(-50%);
font-family: 'Major Mono Display', monospace;
font-family: 'Roboto Condensed', sans-serif;
color: rgba(#7D7E8A,.7);
.dots-grid--1{
width: 90%;
height: 1.2em;
display: grid;
grid-template-columns: 1fr 1fr;
margin: auto;
}
.dots-grid--2{
width: 100%;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
row-gap: .7em;
margin: auto;
margin-top: .5em;
position: absolute;
top:31%;
justify-items: center;
}
.dot{
width: .45em;
height: .45em;
border-radius: 50%;
background-color: #25242C;
}
.side-text{
position:absolute;
width: 5em;
transform: rotate(-90deg);
bottom: 1.8em;
left: -2.2em;
font-size: 2em;
letter-spacing: .15em;
}
}
}
!
