You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
consul/website/components/io-home-case-studies/style.module.css

171 lines
2.6 KiB

Homepage use case redesign (#11728) * init homepage * adds tutorials * update subnav * adds intro background * add offerings * adds in practice cta * include radial gradient * cleanup gradient * Fix learn more button display * include use case pages * connect subnav menu items * extract in practice section for reuse * use Products type * fix type error * add neutral option * rework cta logic * Fix links map * fix use case path * updates accent method * fix button prop usage * refactor customer case study * refactor case studies component * cleanup margin * refactor data props * fix offering cta * spacing updates and introduce intro component * adds intro interface * removes footer border * fix intro description color * add revalidate code to homepage * cleanup unused imports * bump subnav * makes stats optional * adjust border radius based on customer story * redirect /home to homepage * fix: turtorials link * fix: logo alignment * fix: section background color * feat: home reorder and tuts and docs links * fix: flush padding * formatting * feat: sort use cases in nav * fix: card overflow * fix: adjust overflow method * fix: padding on desktop * fix: card container overflow padding on mobile * fix: intro cta conditional * fix: simplify conditional * fix: customer logo sizing * cleanup old data * accept isInternalLink as arg * remove chunk * fix: isInternalLink usage * fix: isInternalLink prop usage * fix: add lang to document * init homepage * adds tutorials * add offerings * cleanup unused imports * bump subnav * fix: flush padding * formatting * fix: intro cta conditional * fix: simplify conditional * cleanup old data * add consul on kubernetes to menu items * add use case redirect * Add use case redirect
3 years ago
.root {
position: relative;
margin: 60px auto;
max-width: 1600px;
@media (--medium-up) {
margin: 120px auto;
}
}
.container {
composes: g-grid-container from global;
}
.header {
margin-bottom: 32px;
@media (--medium-up) {
max-width: calc(100% * 5 / 12);
}
}
.heading {
margin: 0;
composes: g-type-display-3 from global;
}
.description {
margin: 8px 0 0;
composes: g-type-body from global;
color: var(--gray-3);
}
.caseStudies {
--columns: 1;
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
gap: 32px;
@media (--medium-up) {
--columns: 12;
}
}
.primary {
--columns: 1;
grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
gap: 32px;
@media (--medium-up) {
--columns: 2;
}
@media (--large) {
grid-column: 1 / 9;
}
}
.primaryItem {
display: flex;
}
.card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
padding: 32px;
box-shadow: 0 8px 16px -10px rgba(101, 106, 118, 0.2);
background-color: #000;
border-radius: 6px;
color: var(--white);
transition: ease-in-out 0.2s;
transition-property: box-shadow;
min-height: 300px;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 6px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.45)
);
transition: opacity ease-in-out 0.2s;
}
&:hover {
box-shadow: 0 2px 3px rgba(101, 106, 118, 0.15),
0 16px 16px -10px rgba(101, 106, 118, 0.2);
&::before {
opacity: 0.75;
}
}
}
.cardThumbnail {
transition: transform 0.4s;
@nest .card:hover & {
transform: scale(1.04);
}
}
.cardHeading {
margin: 0;
composes: g-type-display-4 from global;
z-index: 10;
}
.secondary {
grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0;
@media (--large) {
margin-top: -32px;
grid-column: 9 / -1;
}
}
.secondaryItem {
border-bottom: 1px solid var(--gray-5);
}
.link {
display: flex;
width: 100%;
color: var(--black);
}
.linkInner {
display: flex;
width: 100%;
justify-content: space-between;
padding-top: 32px;
padding-bottom: 32px;
transition: transform ease-in-out 0.2s;
@nest .link:hover & {
transform: translateX(4px);
}
& svg {
margin-top: 6px;
flex-shrink: 0;
}
}
.linkHeading {
margin: 0 32px 0 0;
composes: g-type-display-6 from global;
}