82e0e24917
Plug in callouts content Most styles for the callout blade Re-export Consul Stack image Update icons Misc content tweaks Optimize mobile for the consul stack icon Better alignment Make full CTA box clickable
124 lines
2.2 KiB
CSS
124 lines
2.2 KiB
CSS
.ctaHero {
|
|
& :global(.g-text-split) :global(.g-grid-container) {
|
|
@media (width < 1120px) {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
& > div {
|
|
@media (768px < width < 1120px) {
|
|
width: 40em;
|
|
}
|
|
|
|
&:last-child {
|
|
@media (width < 1120px) {
|
|
margin-bottom: 64px;
|
|
text-align: center;
|
|
}
|
|
|
|
& p {
|
|
@media (width < 1120px) {
|
|
margin: 16px auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* HACK:
|
|
* Overrides the H2 with styling from
|
|
* our global g-type-display-1 class.
|
|
*
|
|
* This was because there's no way to
|
|
* override the heading in <TextSplit />
|
|
* with the designed h1 styling.
|
|
*
|
|
* TODO:
|
|
* Address this at the component
|
|
* level or revert to just using h2
|
|
* as is default.
|
|
*/
|
|
& h2 {
|
|
font-size: 2.125rem;
|
|
letter-spacing: -0.008em;
|
|
line-height: 1.265em;
|
|
|
|
@media (--medium-up) {
|
|
font-size: 2.625rem;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.19em;
|
|
}
|
|
|
|
@media (--large) {
|
|
font-size: 3.125rem;
|
|
line-height: 1.2em;
|
|
}
|
|
}
|
|
|
|
& p {
|
|
max-width: 440px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cta {
|
|
max-width: 525px;
|
|
border: var(--gray-5) 1px solid;
|
|
padding: 32px;
|
|
position: relative;
|
|
margin-top: 44px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
@media (min-width: 1120px) {
|
|
margin-top: unset;
|
|
margin-left: unset;
|
|
margin-right: unset;
|
|
|
|
/* Pull this down on Desktop to line the
|
|
* buttons up with the other CTA buttons */
|
|
margin-bottom: -38px;
|
|
}
|
|
|
|
& > h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
max-width: 135px;
|
|
}
|
|
|
|
& > p {
|
|
color: var(--gray-3);
|
|
margin-top: 28px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
& .stackIcon {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
& svg {
|
|
position: absolute;
|
|
max-width: 100%;
|
|
left: 209px;
|
|
top: -34px;
|
|
|
|
@media (max-width: 600px) {
|
|
right: 20px;
|
|
left: unset;
|
|
}
|
|
|
|
@media (max-width: 470px) {
|
|
position: unset;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.description {
|
|
composes: .g-type-body-small from global;
|
|
}
|