/* From Uiverse.io by joe-herbert */
.card {
width: 260px;
height: 320px;
background: linear-gradient(to right, rgb(248, 244, 252), rgb(242, 252, 254));
position: absolute;
border-radius: 20px;
box-shadow:
5px 10px 50px -10px #250e3c60,
inset 0 0 50px rgb(250, 252, 255);
transition: transform 0.6s;
}
.card:hover {
transform: perspective(600px) rotateX(5deg) rotateY(-2deg) scale3d(1, 1, 1);
}
#recording {
display: none;
}
#recording:checked ~ label .mic {
animation: opacity 1.5s linear infinite;
}
#recording:checked ~ label .inner-circle {
box-shadow:
0 0 15px 10px #734ad3,
inset 0 0 30px 0px #ffffffdb;
}
#recording:checked ~ label .sound-line {
background-color: #734ad3;
}
@keyframes opacity {
0%,
100% {
opacity: 0.9;
}
50% {
opacity: 0.2;
}
}
.outer-circle {
width: 160px;
height: 160px;
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
box-shadow:
25px 20px 100px -20px #2b2e87,
inset 0px 0px 30px -25px #00000099,
inset -10px -10px 20px -15px #ffffff;
border-radius: 50%;
background-color: #ffffffdb;
background: linear-gradient(336deg, #6b6ef744, #2b2e8700 70.71%),
linear-gradient(217deg, #f3606044, #b3202000 70.71%),
linear-gradient(127deg, #a040f744, #8020d700 70.71%);
transition: transform 0.6s;
cursor: pointer;
}
.outer-circle:hover {
transform: translateX(-50%) scale(1.1);
}
.outer-circle:active {
transform: translateX(-50%) scale(0.9);
}
.inner-circle {
width: 90px;
height: 90px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgb(172, 177, 241);
background: linear-gradient(
45deg,
rgba(172, 177, 241, 1) 0%,
rgba(137, 117, 213, 1) 49%,
rgba(182, 123, 219, 1) 93%
);
box-shadow:
0 0 15px 10px white,
inset 0 0 30px 0px #ffffffdb;
transition: box-shadow 0.6s;
}
.mic {
opacity: 0.9;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scaleY(1.25) translateY(2px);
transition: opacity 0.6s;
}
.message {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 1px solid white;
border-radius: 10px;
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
width: auto;
font-size: 10px;
padding: 9px;
background-color: #f9fafcaa;
font-weight: 200;
box-shadow: 0px 5px 20px -10px #000000aa;
}
.sound-lines {
animation: rotate 30s infinite linear;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate {
0% {
rotate: 0deg;
}
50% {
rotate: 180deg;
}
100% {
rotate: 359deg;
}
}
.sound-line {
transform-origin: top center;
width: 2px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -100%);
transition: background-color 0.6s;
border-radius: 50%;
opacity: 0.8;
animation: lineMovement 2s linear infinite;
}
@keyframes lineMovement {
0%,
100% {
height: var(--height);
}
50% {
height: var(--height2);
}
}
#sound-line0 {
rotate: 0deg;
--height: 48px;
--height2: 61px;
animation-delay: 0.5s;
}
#sound-line1 {
rotate: 3.6deg;
--height: 55px;
--height2: 72px;
animation-delay: 1.2s;
}
#sound-line2 {
rotate: 7.2deg;
--height: 65px;
--height2: 50px;
animation-delay: 0.8s;
}
#sound-line3 {
rotate: 10.8deg;
--height: 52px;
--height2: 74px;
animation-delay: 1.5s;
}
#sound-line4 {
rotate: 14.4deg;
--height: 60px;
--height2: 47px;
animation-delay: 0.3s;
}
#sound-line5 {
rotate: 18deg;
--height: 73px;
--height2: 55px;
animation-delay: 1.1s;
}
#sound-line6 {
rotate: 21.6deg;
--height: 68px;
--height2: 62px;
animation-delay: 0.4s;
}
#sound-line7 {
rotate: 25.2deg;
--height: 57px;
--height2: 69px;
animation-delay: 1.7s;
}
#sound-line8 {
rotate: 28.8deg;
--height: 66px;
--height2: 49px;
animation-delay: 0.2s;
}
#sound-line9 {
rotate: 32.4deg;
--height: 45px;
--height2: 70px;
animation-delay: 1.9s;
}
#sound-line10 {
rotate: 36deg;
--height: 58px;
--height2: 54px;
animation-delay: 0.6s;
}
#sound-line11 {
rotate: 39.6deg;
--height: 61px;
--height2: 75px;
animation-delay: 1.3s;
}
#sound-line12 {
rotate: 43.2deg;
--height: 67px;
--height2: 48px;
animation-delay: 0.9s;
}
#sound-line13 {
rotate: 46.8deg;
--height: 53px;
--height2: 64px;
animation-delay: 1.8s;
}
#sound-line14 {
rotate: 50.4deg;
--height: 74px;
--height2: 50px;
animation-delay: 0.1s;
}
#sound-line15 {
rotate: 54deg;
--height: 49px;
--height2: 60px;
animation-delay: 1.6s;
}
#sound-line16 {
rotate: 57.6deg;
--height: 71px;
--height2: 58px;
animation-delay: 0.3s;
}
#sound-line17 {
rotate: 61.2deg;
--height: 64px;
--height2: 47px;
animation-delay: 1.4s;
}
#sound-line18 {
rotate: 64.8deg;
--height: 52px;
--height2: 69px;
animation-delay: 0.7s;
}
#sound-line19 {
rotate: 68.4deg;
--height: 66px;
--height2: 76px;
animation-delay: 1.2s;
}
#sound-line20 {
rotate: 72deg;
--height: 50px;
--height2: 60px;
animation-delay: 0.5s;
}
#sound-line21 {
rotate: 75.6deg;
--height: 48px;
--height2: 65px;
animation-delay: 1s;
}
#sound-line22 {
rotate: 79.2deg;
--height: 70px;
--height2: 46px;
animation-delay: 0.4s;
}
#sound-line23 {
rotate: 82.8deg;
--height: 55px;
--height2: 61px;
animation-delay: 1.5s;
}
#sound-line24 {
rotate: 86.4deg;
--height: 74px;
--height2: 52px;
animation-delay: 0.2s;
}
#sound-line25 {
rotate: 90deg;
--height: 69px;
--height2: 68px;
animation-delay: 1.3s;
}
#sound-line26 {
rotate: 93.6deg;
--height: 63px;
--height2: 75px;
animation-delay: 0.6s;
}
#sound-line27 {
rotate: 97.2deg;
--height: 47px;
--height2: 59px;
animation-delay: 1.1s;
}
#sound-line28 {
rotate: 100.8deg;
--height: 58px;
--height2: 74px;
animation-delay: 0.9s;
}
#sound-line29 {
rotate: 104.4deg;
--height: 76px;
--height2: 49px;
animation-delay: 1.8s;
}
#sound-line30 {
rotate: 108deg;
--height: 66px;
--height2: 53px;
animation-delay: 0.3s;
}
#sound-line31 {
rotate: 111.6deg;
--height: 52px;
--height2: 62px;
animation-delay: 1.7s;
}
#sound-line32 {
rotate: 115.2deg;
--height: 61px;
--height2: 75px;
animation-delay: 0.2s;
}
#sound-line33 {
rotate: 118.8deg;
--height: 75px;
--height2: 46px;
animation-delay: 1.9s;
}
#sound-line34 {
rotate: 122.4deg;
--height: 45px;
--height2: 68px;
animation-delay: 0.6s;
}
#sound-line35 {
rotate: 126deg;
--height: 64px;
--height2: 54px;
animation-delay: 1.4s;
}
#sound-line36 {
rotate: 129.6deg;
--height: 70px;
--height2: 51px;
animation-delay: 0.8s;
}
#sound-line37 {
rotate: 133.2deg;
--height: 55px;
--height2: 74px;
animation-delay: 1.3s;
}
#sound-line38 {
rotate: 136.8deg;
--height: 49px;
--height2: 65px;
animation-delay: 0.4s;
}
#sound-line39 {
rotate: 140.4deg;
--height: 63px;
--height2: 60px;
animation-delay: 1.1s;
}
#sound-line40 {
rotate: 144deg;
--height: 72px;
--height2: 48px;
animation-delay: 0.5s;
}
#sound-line41 {
rotate: 147.6deg;
--height: 76px;
--height2: 55px;
animation-delay: 1.9s;
}
#sound-line42 {
rotate: 151.2deg;
--height: 50px;
--height2: 67px;
animation-delay: 0.2s;
}
#sound-line43 {
rotate: 154.8deg;
--height: 54px;
--height2: 73px;
animation-delay: 1s;
}
#sound-line44 {
rotate: 158.4deg;
--height: 61px;
--height2: 56px;
animation-delay: 0.7s;
}
#sound-line45 {
rotate: 162deg;
--height: 49px;
--height2: 75px;
animation-delay: 1.5s;
}
#sound-line46 {
rotate: 165.6deg;
--height: 60px;
--height2: 45px;
animation-delay: 0.3s;
}
#sound-line47 {
rotate: 169.2deg;
--height: 72px;
--height2: 65px;
animation-delay: 1.8s;
}
#sound-line48 {
rotate: 172.8deg;
--height: 68px;
--height2: 50px;
animation-delay: 0.1s;
}
#sound-line49 {
rotate: 176.4deg;
--height: 53px;
--height2: 67px;
animation-delay: 1.6s;
}
#sound-line50 {
rotate: 180deg;
--height: 48px;
--height2: 75px;
animation-delay: 0.4s;
}
#sound-line51 {
rotate: 183.6deg;
--height: 58px;
--height2: 54px;
animation-delay: 1.3s;
}
#sound-line52 {
rotate: 187.2deg;
--height: 74px;
--height2: 61px;
animation-delay: 0.9s;
}
#sound-line53 {
rotate: 190.8deg;
--height: 75px;
--height2: 52px;
animation-delay: 1s;
}
#sound-line54 {
rotate: 194.4deg;
--height: 66px;
--height2: 46px;
animation-delay: 0.8s;
}
#sound-line55 {
rotate: 198deg;
--height: 49px;
--height2: 75px;
animation-delay: 1.5s;
}
#sound-line56 {
rotate: 201.6deg;
--height: 63px;
--height2: 60px;
animation-delay: 0.3s;
}
#sound-line57 {
rotate: 205.2deg;
--height: 52px;
--height2: 72px;
animation-delay: 1.4s;
}
#sound-line58 {
rotate: 208.8deg;
--height: 74px;
--height2: 49px;
animation-delay: 0.2s;
}
#sound-line59 {
rotate: 212.4deg;
--height: 70px;
--height2: 55px;
animation-delay: 1.1s;
}
#sound-line60 {
rotate: 216deg;
--height: 45px;
--height2: 62px;
animation-delay: 0.9s;
}
#sound-line61 {
rotate: 219.6deg;
--height: 67px;
--height2: 48px;
animation-delay: 1.3s;
}
#sound-line62 {
rotate: 223.2deg;
--height: 64px;
--height2: 75px;
animation-delay: 0.4s;
}
#sound-line63 {
rotate: 226.8deg;
--height: 55px;
--height2: 51px;
animation-delay: 1.8s;
}
#sound-line64 {
rotate: 230.4deg;
--height: 50px;
--height2: 70px;
animation-delay: 0.1s;
}
#sound-line65 {
rotate: 234deg;
--height: 73px;
--height2: 62px;
animation-delay: 1.2s;
}
#sound-line66 {
rotate: 237.6deg;
--height: 60px;
--height2: 49px;
animation-delay: 0.7s;
}
#sound-line67 {
rotate: 241.2deg;
--height: 45px;
--height2: 75px;
animation-delay: 1.5s;
}
#sound-line68 {
rotate: 244.8deg;
--height: 68px;
--height2: 56px;
animation-delay: 0.3s;
}
#sound-line69 {
rotate: 248.4deg;
--height: 52px;
--height2: 70px;
animation-delay: 1s;
}
#sound-line70 {
rotate: 252deg;
--height: 66px;
--height2: 45px;
animation-delay: 0.5s;
}
#sound-line71 {
rotate: 255.6deg;
--height: 49px;
--height2: 62px;
animation-delay: 1.4s;
}
#sound-line72 {
rotate: 259.2deg;
--height: 74px;
--height2: 52px;
animation-delay: 0.2s;
}
#sound-line73 {
rotate: 262.8deg;
--height: 66px;
--height2: 50px;
animation-delay: 1.3s;
}
#sound-line74 {
rotate: 266.4deg;
--height: 63px;
--height2: 45px;
animation-delay: 0.4s;
}
#sound-line75 {
rotate: 270deg;
--height: 72px;
--height2: 54px;
animation-delay: 1.8s;
}
#sound-line76 {
rotate: 273.6deg;
--height: 56px;
--height2: 70px;
animation-delay: 0.6s;
}
#sound-line77 {
rotate: 277.2deg;
--height: 50px;
--height2: 49px;
animation-delay: 1.2s;
}
#sound-line78 {
rotate: 280.8deg;
--height: 67px;
--height2: 55px;
animation-delay: 0.3s;
}
#sound-line79 {
rotate: 284.4deg;
--height: 73px;
--height2: 62px;
animation-delay: 1.5s;
}
#sound-line80 {
rotate: 288deg;
--height: 52px;
--height2: 70px;
animation-delay: 0.1s;
}
#sound-line81 {
rotate: 291.6deg;
--height: 66px;
--height2: 45px;
animation-delay: 1.9s;
}
#sound-line82 {
rotate: 295.2deg;
--height: 55px;
--height2: 74px;
animation-delay: 0.5s;
}
#sound-line83 {
rotate: 298.8deg;
--height: 70px;
--height2: 62px;
animation-delay: 1.4s;
}
#sound-line84 {
rotate: 302.4deg;
--height: 65px;
--height2: 49px;
animation-delay: 0.3s;
}
#sound-line85 {
rotate: 306deg;
--height: 50px;
--height2: 55px;
animation-delay: 1.1s;
}
#sound-line86 {
rotate: 309.6deg;
--height: 74px;
--height2: 68px;
animation-delay: 0.2s;
}
#sound-line87 {
rotate: 313.2deg;
--height: 68px;
--height2: 45px;
animation-delay: 1.6s;
}
#sound-line88 {
rotate: 316.8deg;
--height: 64px;
--height2: 72px;
animation-delay: 0.7s;
}
#sound-line89 {
rotate: 320.4deg;
--height: 53px;
--height2: 60px;
animation-delay: 1s;
}
#sound-line90 {
rotate: 324deg;
--height: 75px;
--height2: 49px;
animation-delay: 0.9s;
}
#sound-line91 {
rotate: 327.6deg;
--height: 55px;
--height2: 62px;
animation-delay: 1.2s;
}
#sound-line92 {
rotate: 331.2deg;
--height: 70px;
--height2: 60px;
animation-delay: 0.5s;
}
#sound-line93 {
rotate: 334.8deg;
--height: 47px;
--height2: 72px;
animation-delay: 1.4s;
}
#sound-line94 {
rotate: 338.4deg;
--height: 54px;
--height2: 50px;
animation-delay: 0.1s;
}
#sound-line95 {
rotate: 342deg;
--height: 63px;
--height2: 65px;
animation-delay: 1.6s;
}
#sound-line96 {
rotate: 345.6deg;
--height: 48px;
--height2: 75px;
animation-delay: 0.2s;
}
#sound-line97 {
rotate: 349.2deg;
--height: 66px;
--height2: 49px;
animation-delay: 1.3s;
}
#sound-line98 {
rotate: 352.8deg;
--height: 50px;
--height2: 72px;
animation-delay: 0.3s;
}
#sound-line99 {
rotate: 356.4deg;
--height: 74px;
--height2: 68px;
animation-delay: 1.8s;
}
top of page
2 Point 0
is in the process of packing up and moving. Please visit us in our new home at
EPI-USE
bottom of page
