Edit
/* scss/7-homepage-rows/_homepage-stats.scss */
$homestats-desktop-breakpoint: 700px;
$homestats-wide-desktop-breakpoint: 1026px;
.HomeStats {
background: var(--wmgreen-600);
background:
linear-gradient(180deg, rgba(24, 48, 40, 0) 50.08%, rgba(24, 48, 40, 0.8) 100%),
linear-gradient(90deg, rgba(24, 48, 40, 0) 49.97%, rgba(24, 48, 40, 0.5) 99.31%),
linear-gradient(270deg, rgba(24, 48, 40, 0) 50.03%, rgba(24, 48, 40, 0.5) 100%),
url("/atomic-docs/wm/images/stats-background.jpg") center center no-repeat;
background-size: cover;
color: white;
padding-top: 106px;
padding-bottom: var(--spacing-md);
> * {
transition: all 300ms ease-in;
}
&__title {
text-align: center;
font-family: "Noto Serif";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 40px;
@media (min-width: #{$homestats-desktop-breakpoint}) {
font-size: 38px;
line-height: 50px;
}
}
&__subtitle {
color: var(--wmsilver-300, #ecedee);
text-align: center;
font-family: "Nunito Sans";
font-size: 16px;
font-style: italic;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.32px;
margin-top: var(--spacing-sm) !important;
@media (min-width: #{$homestats-desktop-breakpoint}) {
margin-top: var(--spacing-xs) !important;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.36px;
}
}
&__cards {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
max-width: 555px;
margin: 0 auto;
margin-top: var(--spacing-md);
@media (min-width: #{$homestats-desktop-breakpoint}) {
width: 599px;
max-width: 100%;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
margin-top: 55px;
}
@media (min-width: #{$homestats-wide-desktop-breakpoint}) {
width: 100%;
}
}
&__card {
display: flex;
justify-content: space-between;
padding: var(--spacing-sm) 6px 0;
&:hover {
border-radius: 4px;
background: rgba(24, 48, 40, 0.9);
transition: all 300ms ease-out;
cursor: pointer;
.wm-statnum--prepend-top,
.wm-statnum--append-top,
.HomeStats__stat-link-arrow {
transition: all 300ms ease-out;
color: var(--wmgold-600);
}
.HomeStats__stat-publication {
color: white;
transition: all 300ms ease-out;
}
.HomeStats__stat-link {
text-decoration: underline;
transition: all 300ms ease-out;
}
}
@media (min-width: #{$homestats-desktop-breakpoint}) {
flex: 0 1 49%;
padding: var(--spacing-sm);
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-sm);
}
@media (min-width: #{$homestats-wide-desktop-breakpoint}) {
flex: 1;
}
}
&__graphic-section {
flex: 0 1 150px;
@media (min-width: #{$homestats-desktop-breakpoint}) {
flex: 1 1 max-content;
}
}
&__text-section {
flex: 1 1 184px;
text-align: left;
@media (min-width: #{$homestats-desktop-breakpoint}) {
flex: 1 1 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
&__stat-title {
color: white;
font-family: "Noto Serif";
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 26px;
@media (min-width: #{$homestats-desktop-breakpoint}) {
color: #fff;
text-align: center;
font-size: 22px;
line-height: 28px;
}
}
&__stat-publication {
color: var(--wmgreen-300);
font-family: "Nunito Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.12px;
padding-top: 4px;
}
&__stat-link {
color: white;
font-family: "Nunito Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
padding-top: var(--spacing-xs);
display: block;
padding-bottom: var(--spacing-sm);
@media (min-width: #{$homestats-desktop-breakpoint}) {
padding: var(--spacing-sm) 0 0 0;
}
}
&__stat-link-arrow {
position: relative;
top: 1px;
left: 3px;
color: var(--wmgreen-400);
font-family: "Font Awesome 6 Pro";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
@media (min-width: #{$homestats-desktop-breakpoint}) {
padding-top: var(--spacing-xl);
padding-bottom: 33px;
background:
linear-gradient(180deg, rgba(24, 48, 40, 0) 50.08%, rgba(24, 48, 40, 0.5) 100%),
linear-gradient(90deg, rgba(24, 48, 40, 0) 49.97%, rgba(24, 48, 40, 0.8) 99.31%),
linear-gradient(270deg, rgba(24, 48, 40, 0) 50.03%, rgba(24, 48, 40, 0.8) 100%),
url("/atomic-docs/wm/images/stats-background.jpg") center center no-repeat;
background-size: cover;
.wm-row__mainWrapper {
max-width: 1014px;
}
}
@media (min-width: #{$homestats-wide-desktop-breakpoint}) {
padding-bottom: var(--spacing-xl);
}
}
.wm-statnum {
position: relative;
color: var(--wmgreen-300, #a0bcb3);
font-family: "Libre Baskerville", serif;
font-size: 33px;
font-style: normal;
font-weight: 400;
line-height: normal;
&__number {
color: #fff;
font-family: "Libre Baskerville", serif;
font-size: 77px;
font-style: normal;
font-weight: 400;
line-height: 1;
}
&--prepend-top {
right: -8px;
@media (min-width: #{$homestats-desktop-breakpoint}) {
position: absolute;
top: 12px;
left: -78px;
}
}
&--append-top {
right: 13px;
top: -41px;
@media (min-width: #{$homestats-desktop-breakpoint}) {
position: absolute;
top: 12px;
right: -20px;
}
}
}