overleaf/services/web/frontend/stylesheets/app/website-redesign.less
M Fahru 097e41f9ae Merge pull request #16226 from overleaf/mf-website-redesign-home-issues-2
[web] Fix styling issues on homepage redesign

GitOrigin-RevId: 4115680abaa6c44ed901c696321558a808851cde
2023-12-15 09:03:44 +00:00

593 lines
11 KiB
Text

.website-redesign {
p,
h1,
h2,
h3,
h4,
a,
strong,
span {
font-family: 'Noto Sans', sans-serif;
}
h1 {
font-size: 3rem;
font-weight: 600;
line-height: 4rem;
}
h2 {
font-weight: 600;
font-size: 2.25rem;
line-height: 3rem;
margin-top: 0;
}
h3 {
font-weight: 600;
}
// override .btn default style
.btn {
font-weight: 600;
}
.img-rounded {
// TODO: design specifies 'border-radius-large' which is 5px, but uses 16px
border-radius: 16px;
}
.plans-cards {
@media (min-width: @screen-md-min) {
display: flex; /* equal heights */
flex-wrap: wrap;
}
.plans-card-container {
min-height: 348px;
@media (max-width: @screen-sm-max) {
margin-bottom: 16px;
min-height: unset;
}
}
.plans-card {
border-radius: 8px;
padding: 0;
height: 100%;
.plans-card-inner {
padding: 36px;
height: 100%;
display: flex;
flex-direction: column;
font-size: 16px;
.plans-card-inner-title {
font-size: 20px;
font-weight: 600;
margin-top: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
margin-bottom: 8px;
}
}
.plans-card-inner-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
@media (max-width: @screen-sm-max) {
margin-top: 16px;
}
}
}
&.grey-border {
border: 2px solid var(--neutral-20);
}
// workaround for border that contains both linear-gradient and border radius
// https://stackoverflow.com/a/53037637
&.blue-gradient-highlighted {
border: double 2px transparent;
border-radius: 8px;
background-image: linear-gradient(var(--white), var(--white)),
var(--premium-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
.plans-card-inner-title {
color: var(--blue-60);
}
}
}
}
.info-cards {
@media (min-width: @screen-md-min) {
display: flex; /* equal heights */
flex-wrap: wrap;
}
.info-card-container {
min-height: 348px;
margin-bottom: 16px;
@media (max-width: @screen-sm-max) {
min-height: unset;
}
.info-card {
border-radius: 8px;
height: 100%;
box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
border-top: 8px solid #2f4858;
padding: 48px 40px 48px 40px;
}
}
}
.features-card {
display: flex; /* equal heights */
flex-wrap: wrap;
align-items: center;
.features-card-image {
img.img-responsive {
width: 100%;
}
@media (max-width: @screen-sm-max) {
margin-bottom: 50px;
}
}
.features-card-description {
h3 {
font-size: 1.875rem; // 30px
line-height: 2.5rem; // 40px
}
p {
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
margin-bottom: 16px;
// flex is needed in the case of "premium" label being on the same line
display: flex;
@media (max-width: @screen-sm-max) {
// only for label-premium that appears directly as a child of li
> .label-premium {
margin-left: auto;
align-self: center;
}
}
h4 {
margin-top: 0;
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
}
p {
margin-bottom: 0;
}
}
}
}
}
.top-image-cards {
.top-image-card {
> img.img-responsive {
width: 100%;
border-radius: 8px;
}
.top-image-card-title {
font-size: 24px;
margin-top: 16px;
margin-bottom: 8px;
a {
width: 100%;
font-weight: 600;
color: var(--neutral-90);
display: inline-flex;
justify-content: space-between;
text-decoration: none;
}
i.material-symbols-rounded {
vertical-align: middle;
text-decoration: none;
}
}
.top-image-card-text {
font-size: 16px;
}
&:not(:last-of-type) {
@media (max-width: @screen-sm-max) {
margin-bottom: 40px;
}
}
}
}
.cta-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 64px;
background: #2f4858;
color: var(--white);
border-radius: 8px;
@media (max-width: @screen-sm-max) {
padding: 48px 24px 48px 24px;
}
.cta-card-title {
font-size: 3.25rem; // 52px
margin-bottom: 8px;
line-height: 1.3;
&.title-mono {
> span {
// override Noto Sans
font-family: 'DM Mono', monospace;
}
}
span.purple-color {
color: #939aff;
font-weight: 400;
}
span.lime-color {
font-weight: 500;
color: #7ee787;
}
@media (max-width: @screen-sm-max) {
font-size: 2.25rem; // 36px
}
}
.cta-card-quote {
font-size: 1.875rem; // 30px
font-weight: 600;
line-height: 2.5rem; // 40px
letter-spacing: 0em;
text-align: center;
}
}
.quote-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 48px;
background: #2f4858;
color: white;
border-radius: 16px;
.quote-card-quote {
font-size: 1.875rem; // 30px
font-weight: 600;
line-height: 2.5rem; // 40px
letter-spacing: 0em;
text-align: center;
@media (max-width: @screen-sm-max) {
font-size: 1.5rem; // 24px
line-height: 2rem; // 32px
}
}
.quote-card-img {
margin-top: 32px;
margin-bottom: 16px;
}
@media (max-width: @screen-sm-max) {
padding: 56px 24px 56px 24px;
}
}
.integrations-card {
.integrations-icons {
img {
width: 6rem; // 96px
height: 6rem; // 96px
}
.first-row,
.second-row {
display: flex;
}
.first-row {
justify-content: space-between;
}
.second-row {
margin-top: 40px;
justify-content: space-evenly;
}
}
}
.testimonial-media {
border-radius: 24px;
.testimonial-media-text {
display: flex;
flex-direction: column;
min-height: 352px;
background-color: #2f4858;
color: var(--white);
border-top-left-radius: 24px;
border-top-right-radius: 0;
border-bottom-left-radius: 24px;
padding: 96px 64px;
@media (max-width: @screen-sm-max) {
border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-left-radius: 0;
min-height: 316px;
padding: 56px 24px;
}
blockquote {
margin-bottom: auto;
}
}
.testimonial-media-video {
height: 100%;
min-height: 352px;
background-color: var(--neutral-20);
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 0;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: @screen-sm-max) {
border-top-right-radius: 0;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
video {
height: 100%;
width: 100%;
}
}
}
.security-info {
.security-info-first-row {
margin-bottom: 32px;
@media (max-width: @screen-sm-max) {
margin-bottom: 0;
}
}
.security-info-item {
@media (max-width: @screen-sm-max) {
margin-bottom: 16px;
}
}
}
.resources {
@media (min-width: @screen-md-min) {
display: flex; /* equal heights */
flex-wrap: wrap;
}
.resources-card {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 48px;
align-content: flex-start;
@media (max-width: @screen-sm-max) {
margin-bottom: 16px;
}
img {
width: 56px;
}
h3 {
width: 100%;
}
a {
margin-top: auto;
}
}
}
.centered-block {
@media (min-width: @screen-md-min) {
text-align: center;
}
}
.mono-text {
font-family: 'DM Mono', monospace;
color: var(--green-60);
font-feature-settings: 'ss05';
font-size: 1.125rem;
font-weight: 500;
line-height: 1.5rem;
margin: 0;
~ h1,
~ h2,
~ h3 {
margin-top: 8px;
}
}
.link-with-arrow {
i.material-symbols-rounded {
vertical-align: middle;
padding-bottom: 3px;
font-size: 24px;
}
}
.green-link {
.link-with-arrow;
color: @green-60;
&:hover {
color: var(--green-70);
.right-arrow {
background: var(--green-70);
}
}
}
.white-link {
.link-with-arrow;
color: white;
}
.btn-blue-gradient {
background: var(--premium-gradient);
color: var(--white);
&:hover {
background: var(--blue-70);
}
}
.round-background {
border-radius: 50%;
font-size: 25px;
top: 4px;
vertical-align: middle;
margin-right: 8px;
width: 25px;
height: 25px;
}
.green-round-background {
.round-background;
background: var(--green-10);
color: var(--green-40);
}
.blue-round-background {
.round-background;
background: var(--blue-10);
color: var(--blue-40);
}
// most of these are here to replace rules from core/type.less
blockquote {
border-left: none;
font-size: 28px;
font-weight: 600;
line-height: 38px;
quotes: '\0022''\0022'; // use straight (" ") instead of curly ones (“ ”)
padding: unset;
margin: unset;
&::after {
visibility: visible;
display: inline;
margin-left: 1px; // it's too tight to the text otherwise
}
&::before {
color: inherit;
margin-right: 0;
vertical-align: 0;
}
&::after,
&::before {
font-size: 28px;
line-height: 38px;
}
@media (max-width: @screen-sm-max) {
font-size: 24px;
line-height: 32px;
&::after,
&::before {
visibility: visible;
font-size: 24px;
line-height: 32px;
}
}
}
.circle-img {
height: 64px;
max-width: 64px;
}
.premium-badge {
.premium-badge-img {
margin-left: 10px;
}
@media (max-width: @screen-xs-max) {
display: flex;
.premium-badge-img {
width: 87px;
margin-left: auto;
}
}
}
.responsive-button-container {
display: flex;
margin-top: 24px;
gap: 16px;
&.centered-buttons {
justify-content: center;
}
@media (max-width: @screen-sm-max) {
flex-direction: column-reverse;
width: 100%;
}
}
.label-premium {
height: 20px; // override default height
}
}