126 lines
2.2 KiB
CSS
126 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dd-cards-container {
|
|
font-family: 'Muli', sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.dd-card {
|
|
background-color: #fff;
|
|
display: flex;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.dd-card h6 {
|
|
opacity: 0.6;
|
|
margin: 0;
|
|
letter-spacing: 0.0625rem;
|
|
font-size: clamp(0.6rem, 1.33vw, 0.8rem);
|
|
}
|
|
|
|
.dd-card h2 {
|
|
letter-spacing: 0.0625rem;
|
|
margin: 0;
|
|
font-size: clamp(1rem, 2.67vw, 1.67rem);
|
|
}
|
|
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dd-card-preview {
|
|
background-color: #2A265F;
|
|
color: #fff;
|
|
padding: 0.1rem 1rem 1rem 1rem;
|
|
margin:0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dd-card-preview a {
|
|
color: #fff;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.dd-card-preview button {
|
|
border-width: 0;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
color: white;
|
|
margin: 15% 0 0 0;
|
|
transition: color 0.25s ease;
|
|
|
|
}
|
|
|
|
.dd-card-preview button:hover {
|
|
color: #bebebe;
|
|
}
|
|
|
|
.dd-card-preview span {
|
|
}
|
|
|
|
.dd-card-info {
|
|
padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem);
|
|
margin: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span {
|
|
opacity: 0.65;
|
|
font-size: clamp(0.55rem, 1.23vw, 0.75rem);
|
|
margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0;
|
|
text-decoration: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.app-logo {
|
|
width: clamp(4rem, 10vw, 5rem);
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
.progress-container {
|
|
text-align: right;
|
|
width: 100%;
|
|
margin: clamp(0.8rem, 2vw, 1rem) 0 0 0;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #ddd;
|
|
border-radius: 0.1875rem;
|
|
height: clamp(0.25rem, 1vw, 0.3125rem);
|
|
width: clamp(6rem, 20vw, 10rem);
|
|
position: relative;
|
|
}
|
|
|
|
.progress::after {
|
|
background-color: #2A265F;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: clamp(0.25rem, 1vw, 0.3125rem);
|
|
width: var(--progress-width, 1%);
|
|
transition: width 1s ease;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: clamp(0.5rem, 1.5vw, 0.625rem);
|
|
opacity: 0.6;
|
|
letter-spacing: clamp(0.05rem, 0.5vw, 0.0625rem);
|
|
text-align: left;
|
|
} |