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
105 lines
3.1 KiB
CSS
105 lines
3.1 KiB
CSS
/* Global Component Styles */
|
|
@import '~@hashicorp/mktg-global-styles/style.css';
|
|
@import '~@hashicorp/nextjs-scripts/prism/style.css';
|
|
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/layout.css';
|
|
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
|
|
|
|
:root {
|
|
--highlight-color: var(--consul-link);
|
|
--highlight-color-text: var(--consul-link);
|
|
}
|
|
|
|
@import '~@hashicorp/react-alert-banner/style.css';
|
|
@import '~@hashicorp/react-button/styles/index.css';
|
|
@import '~@hashicorp/react-callouts/style.css';
|
|
@import '~@hashicorp/react-call-to-action/style.css';
|
|
@import '~@hashicorp/react-code-block/style.css';
|
|
@import '~@hashicorp/react-consent-manager/style.css';
|
|
@import '~@hashicorp/react-content/style.css';
|
|
@import '~@hashicorp/react-docs-page/style.css';
|
|
@import '~@hashicorp/react-enterprise-alert/style.css';
|
|
@import '~@hashicorp/react-featured-slider/style.css';
|
|
@import '~@hashicorp/react-product-features-list/style.css';
|
|
@import '~@hashicorp/react-search/style.css';
|
|
@import '~@hashicorp/react-subnav/style.css';
|
|
@import '~@hashicorp/react-tabs/style.css';
|
|
@import '~@hashicorp/react-text-split/style.css';
|
|
@import '~@hashicorp/react-toggle/style.css';
|
|
@import '~@hashicorp/react-use-cases/style.css';
|
|
@import '~@hashicorp/react-vertical-text-block-list/style.css';
|
|
|
|
/* Local Components */
|
|
@import '../components/basic-hero/style.css';
|
|
@import '../components/enterprise-comparison/style.css';
|
|
@import '../components/footer/style.css';
|
|
@import '../components/case-study-carousel/style.css';
|
|
@import '../components/cloud-offerings-list/style.css';
|
|
@import '../components/mini-cta/style.css';
|
|
@import '../components/use-cases-layout/style.css';
|
|
|
|
/* Local Pages */
|
|
@import './community/style.css';
|
|
@import './home/style.css';
|
|
|
|
/* Print Styles */
|
|
@import './print.css';
|
|
|
|
/* Sticky Footer */
|
|
footer .content {
|
|
min-height: calc(100vh - 260px);
|
|
}
|
|
|
|
/*
|
|
* About this selector:
|
|
* `.g-subnav ~ *` finds all elements after the navigation.
|
|
* `:target` finds the active permalink on the page.
|
|
*
|
|
* About this style:
|
|
* `scroll-margin-top` adjusts the vertical scroll of a permalink.
|
|
* `64px` adjusts the scroll to account for the navigation.
|
|
* `0.5em` further adjusts the scroll to give the permalink breathing room.
|
|
*
|
|
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
|
|
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
|
|
*/
|
|
.g-subnav ~ * :target {
|
|
scroll-margin-top: calc(64px + 0.5em);
|
|
}
|
|
|
|
/* 404 page styles */
|
|
#p-404 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 64px auto; /* this is being overridden at the request of the learn team */
|
|
max-width: 784px;
|
|
min-height: 50vh;
|
|
padding-inline: 32px;
|
|
text-align: center;
|
|
|
|
@media (--large) {
|
|
padding-inline: 24px;
|
|
}
|
|
|
|
& h1 {
|
|
font-size: 1.5rem;
|
|
letter-spacing: -0.004em;
|
|
line-height: 1.375em;
|
|
|
|
@media (--medium-up) {
|
|
font-size: 1.75rem;
|
|
line-height: 1.321em;
|
|
}
|
|
|
|
@media (--large) {
|
|
font-size: 2rem;
|
|
letter-spacing: -0.006em;
|
|
line-height: 1.313em;
|
|
}
|
|
}
|
|
|
|
& a {
|
|
color: var(--highlight-color);
|
|
}
|
|
}
|