8b5560eb02
* style: update gray brand colors (#11092) * Style: Update brand colors (#11224) * style: update brand colors * chore: upgrade react-components * style: update use cases page btn --> vault brand * chore: home page component api updates * style: fix link colors * run npm audit * upgrade downloads page * typo fixes * fix husky, run lint * roll back husky upgrade * style(home callouts): body copy gray -2 * style: testing hashi-stack-menu prerelease * style: upgrade components --> color contrast (#11328) * chore: upgrades components w/ new styles * refactor(use-cases pages): to use FeaturedSlider component * style(BeforeAfterDiagram): swap check icon * style(use-cases-cta): adjust background color --> vault primary * chore(community): pass to VerticalBlockTextList * chore(deps): adds tippy.js * chore(deps): upgrade product downloads pre-release * fix(subnav): use asPath to set active item * chore: upgrade deps to stable * style: home callouts body copy to black * chore: upgrade hashi-stack-menu to stable * chore: upgrade deps * style(use-cases): update background and button colors * chore: upgrade deps body copy color * chore: upgrades alert-banner * fix: remove package.json * content(home): removes hero background image * content(home): updates assets * content(use-cases): updates assets * style(before-after-diagram): adjust scaling styles * content:swap svgs for pngs * style: updates before/after diagram * chore: testing product download page pre-release * content: updates consul & nomad logomarks * chore: updates product download page to stable Co-authored-by: Jeff Escalante <jescalan@users.noreply.github.com>
80 lines
1.3 KiB
CSS
80 lines
1.3 KiB
CSS
.hcpCalloutSection {
|
|
composes: g-grid-container from global;
|
|
padding-top: 88px;
|
|
padding-bottom: 88px;
|
|
|
|
& .header {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 88px;
|
|
@media (max-width: 1120px) {
|
|
margin-bottom: 48px;
|
|
}
|
|
& h2 {
|
|
margin: 0;
|
|
text-align: center;
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
|
|
& .content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
@media (max-width: 1120px) {
|
|
flex-direction: column-reverse;
|
|
|
|
& .info {
|
|
margin-top: 32px;
|
|
}
|
|
}
|
|
|
|
& .info {
|
|
max-width: 488px;
|
|
margin-right: 32px;
|
|
|
|
& h1 {
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
& .description {
|
|
color: var(--gray-2);
|
|
margin-top: 28px;
|
|
margin-bottom: 0;
|
|
|
|
@media (max-width: 900px) {
|
|
margin-top: 18px;
|
|
}
|
|
}
|
|
& .links {
|
|
margin-top: 32px;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
|
|
& > * {
|
|
&:not(:last-child) {
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > img {
|
|
align-self: center;
|
|
margin-right: -48px;
|
|
@media (max-width: 670px) {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chin {
|
|
composes: g-type-label from global;
|
|
}
|
|
|
|
.description {
|
|
composes: g-type-long-body from global;
|
|
}
|