Alex Carpenter
ebb4d4e99f
* Updates <BrandedCta /> * Add <WhyBoundary /> section * Add <HowBoundaryWorks /> section * Updates <UseCases /> content * Adjust <HomepageHero /> content * Update <HowItWorks /> section * Content updates * Update icon directory * Update how it works title * Removes extra grid container * Adds lang attribute to document * Fix heading level usage * Content updates * Remove secure * Captialize works * Content update * Update use case links * Update background * CTA text * Convert ssh to svg * Convert to SVG * Coming soon to feature block
122 lines
1.8 KiB
CSS
122 lines
1.8 KiB
CSS
.root {
|
|
composes: g-grid-container from global;
|
|
padding-top: 88px;
|
|
padding-bottom: 88px;
|
|
|
|
@media (--medium-up) {
|
|
padding-top: 160px;
|
|
padding-bottom: 160px;
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
--columns: 1;
|
|
|
|
padding-top: 88px;
|
|
padding-bottom: 88px;
|
|
border-top: 1px solid var(--gray-6);
|
|
display: grid;
|
|
column-gap: 32px;
|
|
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
|
row-gap: 32px;
|
|
|
|
@media (--medium-up) {
|
|
--columns: 12;
|
|
|
|
padding-top: 140px;
|
|
padding-bottom: 140px;
|
|
}
|
|
}
|
|
|
|
.introTitle {
|
|
margin: 0;
|
|
grid-column: 1 / -1;
|
|
composes: g-type-display-2 from global;
|
|
|
|
@media (--medium-up) {
|
|
grid-column: 1 / 6;
|
|
}
|
|
}
|
|
|
|
.introDescription {
|
|
grid-column: 1 / -1;
|
|
composes: g-type-body-large from global;
|
|
|
|
@media (--medium-up) {
|
|
grid-column: 7 / -1;
|
|
}
|
|
|
|
& :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
& :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.contentContainer {
|
|
--columns: 1;
|
|
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
|
grid-gap: 32px;
|
|
|
|
@media (--medium-up) {
|
|
--columns: 12;
|
|
}
|
|
}
|
|
|
|
.diagram {
|
|
grid-column: 1 / -1;
|
|
|
|
@media (--medium-up) {
|
|
grid-column: 1 / 6;
|
|
}
|
|
}
|
|
|
|
.features {
|
|
padding: 0;
|
|
grid-column: 1 / -1;
|
|
|
|
@media (--medium-up) {
|
|
grid-column: 7 / -1;
|
|
}
|
|
|
|
& > 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|