Files
threshold/website/components/how-it-works/how-it-works.module.css
T
Kendall Strautman 26cb4a5655 [Assembly]: Branding Refresh (#1004)
* style: update gray brand colors (#994)

* Style: Update brand colors (#1043)

* style: update brand colors

* chore: upgrade react components (#1072)

* chore: upgrade react components

chore: upgrade docs-page

* chore: pin deps

* chore: update logos (#1083)

* chore: upgrade components to latest

chore: upgrade components to stable

* chore: style fixes

style: color fixes

style: adjust body copy color

* chore: upgrade deps to stable

* style(home): feature icons path to black

* chore: upgrade deps for body copy colors

* chore: upgrades alert banner

* feat: updates favicon

* style(home-hero): updates progress bar base

* style(home-hero): fix download cta color override
2021-05-03 13:02:13 -04:00

93 lines
1.4 KiB
CSS

.root {
padding: 88px 0;
& .headerWrapper {
& h2 {
text-align: center;
margin-top: 0;
margin-bottom: 32px;
@media (--small) {
margin-bottom: 0;
}
}
& p {
max-width: 818px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: var(--gray-2);
}
}
}
.contentContainer {
display: flex;
justify-content: space-between;
position: relative;
@media (--small) {
flex-direction: column;
}
& > ul {
max-width: 470px;
margin-left: 128px;
padding: 0;
@media (width < 1120px) {
margin-left: 64px;
}
@media (width < 1024px) {
margin-left: 40px;
}
@media (--small) {
margin-left: 0;
}
}
}
.diagram {
width: 591px;
max-width: 100%;
}
.features {
& > li {
list-style: none;
& > div {
list-style: none;
padding-bottom: 285px;
@media (--small) {
padding-top: 0;
margin-bottom: 0;
padding-bottom: 100px;
}
}
&:last-child {
& > div {
padding-bottom: 355px;
margin-bottom: -200px;
@media (--small) {
padding-bottom: 0;
margin-bottom: 0;
}
}
}
&:first-child {
& > div {
padding-top: 108px;
@media (width < 1120px) {
padding-top: 64px;
}
}
}
}
}