Merge pull request #17936 from overleaf/mf-pattern-cta-card

[web][website-redesign] Add fading background pattern for CTA cards on website redesigned pages

GitOrigin-RevId: 7836fd5aa980e7e9b36ff10767ec5ef41dd748cd
This commit is contained in:
M Fahru 2024-04-23 06:03:55 -07:00 committed by Copybot
parent ab28d8c3cc
commit 349abb4a4f
2 changed files with 19 additions and 2 deletions

View file

@ -1,3 +1,5 @@
@cta-card-bg-color: var(--dark-jungle-green);
.website-redesign {
// hero section of features, enterprises, and universities will have an image that will overflow the page
overflow-x: hidden;
@ -653,7 +655,14 @@
display: flex;
justify-content: space-between;
padding: 64px;
background: var(--dark-jungle-green);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.4) 0%,
@cta-card-bg-color 20%,
@cta-card-bg-color 100%
),
url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
background-size: cover;
color: var(--white);
border-radius: 8px;
@ -686,8 +695,16 @@
flex-direction: column;
align-items: center;
padding: 64px;
background: var(--dark-jungle-green);
color: var(--white);
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.4) 0%,
@cta-card-bg-color 25%,
@cta-card-bg-color 75%,
rgba(0, 0, 0, 0.4) 100%
),
url('../../../public/img/website-redesign/overleaf-pattern-purple.png');
background-size: cover;
border-radius: 8px;
@media (max-width: @screen-sm-max) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB