m3-academy-template-vtexio-.../custom/react/components/Countdown/styles.css

80 lines
1.3 KiB
CSS

.countdownWrapper {
background-image: url(./assets/textura.jpg);
background-repeat: no-repeat;
background-size: contain;
background-color: #c70042;
width: 414px;
height: 414px;
border-radius: 30px;
background-blend-mode: multiply;
position: relative;
margin-top: 30px;
margin-left: 8px;
}
.countdownTitle {
color: white;
text-align: center;
padding-top: 40px;
}
.countdownHeading1 {
margin: 0;
font-size: 40px;
line-height: 48px;
letter-spacing: -0,05em;
}
.countdownHeading3 {
margin: 0;
font-size: 18px;
line-height: 20px;
letter-spacing: -0,05em;
font-weight: 300;
}
.countdownHeading2 {
margin: 0;
font-size: 26px;
line-height: 30px;
letter-spacing: -0,05em;
}
.countdownText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 200;
letter-spacing: 0.1em;
color: white;
width: 170px;
height: 170px;
border-radius: 50%;
border: 2px solid #ffffff15;
display: grid;
place-items: center;
margin-top: 30px;
}
.countdownBadge {
position: absolute;
top: 30px;
right: 0;
background-color: rgb(1, 185, 185);
border-radius: 80px 0 0 80px;
padding: 10px 10px 6px 34px;
}