open-nomad/website/components/comparison-callouts/style.module.css
Kendall Strautman fe85162128
[Assembly]: Website Branding Refresh (#10188)
* style: update gray brand colors

* style: update brand colors

* chore: upgrade react-components deps

* chore: update text split cta link color

* style(home): update icons

* refactor(home): use learn-callout component

* style(downloads): temporary color override

* style(community): fix link color

* Update website/pages/community/style.css

Co-authored-by: Zachary Shilton <4624598+zchsh@users.noreply.github.com>

* update package-lock

* update deps

* add new downloads page

* remove extra husky script

* chore: upgrades nextjs-scripts dep

* chore: upgrades community page vertical text block list

* chore: test component pre-releases

* chore: upgrade deps

chore: upgrades nextjs-scripts

* chore: update home icon colors

* chore: update home logo grid

* chore(website): upgrade deps

* style: adjust features icons border radius

* style: home hero bg to secondary

* chore: upgrade deps for body copy colors

* chore: upgrades alert banner

* feat: updates favicon

* chore: updates deps

* content(home): updates assets

* content(use-cases:simple container orch): updates content

* content(use-cases:non-containerized-app) updates assets

* content(use-cases:auto networking with consul): updates assets

* style(home): remove use cases icons override

* style(home-hero): remove bg pattern on mobile

* content(use-cases): updates asset

* chore: update assets

* chore: updates product download page to alpha

* chore: updates product download page to stable

Co-authored-by: Zachary Shilton <4624598+zchsh@users.noreply.github.com>
Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>
2021-05-03 11:06:55 -07:00

61 lines
986 B
CSS

.comparisonCallouts {
padding-top: 128px;
padding-bottom: 128px;
background: var(--gray-6);
}
.content {
composes: g-grid-container from global;
text-align: center;
}
.description {
margin-bottom: 64px;
& h2 {
margin-top: 0;
margin-bottom: 24px;
}
}
.details {
margin: 0 auto;
composes: g-type-body-large from global;
max-width: 560px;
& a {
color: var(--nomad-link);
}
}
.comparisonItems {
display: flex;
justify-content: center;
margin: 0 auto;
}
.comparisonItem {
max-width: 280px;
padding: 48px 24px;
background-color: var(--white);
box-shadow: 0 2px 3px rgba(37, 41, 55, 0.08);
border: 1px solid var(--gray-5);
border-radius: 1px;
transition-duration: 0.25s;
transition-property: box-shadow, transform;
&:first-child {
margin-right: 32px;
}
&:hover {
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
transform: translateY(-4px);
}
& h4 {
margin-top: 22px;
margin-bottom: 8px;
}
}