82 lines
2.8 KiB
CSS
82 lines
2.8 KiB
CSS
|
@import url("https://rsms.me/inter/inter.css");
|
||
|
|
:root {
|
||
|
|
--font: 'Inter', sans-serif;
|
||
|
|
font-size: calc(.6rem + .4vh);
|
||
|
|
background: #ffffff;
|
||
|
|
font-family: var(--font);
|
||
|
|
-webkit-font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
|
||
|
|
font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum" , "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spacer {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
position: relative;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
--s-pad: calc(var(--s-padding) * 2rem);
|
||
|
|
}
|
||
|
|
.section__inner {
|
||
|
|
overflow: hidden;
|
||
|
|
-webkit-perspective: 1200;
|
||
|
|
perspective: 1200;
|
||
|
|
background: #212121;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
height: 85vh;
|
||
|
|
width: 70vh;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
grid-template-rows: repeat(30, 1fr);
|
||
|
|
grid-gap: 0vw;
|
||
|
|
grid-auto-flow: dense;
|
||
|
|
justify-items: stretch;
|
||
|
|
align-items: end;
|
||
|
|
padding: 65vh var(--s-pad) calc(var(--s-pad) * 2);
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blob {
|
||
|
|
position: relative;
|
||
|
|
padding: calc(var(--s-padding) * .25rem);
|
||
|
|
-webkit-transform-origin: 50% 80%;
|
||
|
|
transform-origin: 50% 80%;
|
||
|
|
height: 10vh;
|
||
|
|
}
|
||
|
|
.blob__inner {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 50%;
|
||
|
|
left: calc(var(--s-padding) * .5rem);
|
||
|
|
right: calc(var(--s-padding) * .5rem);
|
||
|
|
-webkit-transform: translateY(calc(var(--pos) * -60vh));
|
||
|
|
transform: translateY(calc(var(--pos) * -60vh));
|
||
|
|
}
|
||
|
|
.blob__inner:last-child::before {
|
||
|
|
z-index: 2;
|
||
|
|
background: linear-gradient(45deg, #212121, black);
|
||
|
|
}
|
||
|
|
.blob__inner::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
padding-top: 100%;
|
||
|
|
background: linear-gradient(calc(var(--bg-rotation) * 1deg), silver, white);
|
||
|
|
-webkit-transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
|
||
|
|
transform: translateY(50%) translateX(calc(var(--sin)*var(--waves)*30%*var(--noise3))) scale(calc(.4 + var(--noise1) * .8)) rotate(calc(var(--noise1) * var(--s-rotation) * 1deg));
|
||
|
|
border-radius: calc(30% + var(--noise1) * 70%) calc(100% - var(--noise1) * 70%) calc(30% + var(--noise2) * 70%) calc(100% - var(--noise2) * 70%)/calc(30% + var(--noise3) * 70%) calc(100% - var(--noise4) * 70%) calc(30% + var(--noise4) * 70%) calc(100% - var(--noise3) * 70%);
|
||
|
|
}
|