diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less
index 28e472b010..9dfd4a57b7 100644
--- a/services/web/frontend/stylesheets/app/portals.less
+++ b/services/web/frontend/stylesheets/app/portals.less
@@ -129,7 +129,7 @@
background-color: @ol-blue-gray-0;
}
- @media (max-width: @screen-size-sm-max) {
+ @media (max-width: @screen-xs-max) {
.content-pull {
padding: 0;
width: auto;
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 8994cec135..dab3f8e6ff 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -1,4 +1,7 @@
.website-redesign {
+ // hero section of features, enterprises, and universities will have an image that will overflow the page
+ overflow-x: hidden;
+
p,
h1,
h2,
@@ -237,59 +240,134 @@
.features-card-hero {
/* borrow from features-card, but rewrite if needed before adding too many overrides */
.features-card;
-
+ position: relative;
+ height: 655px;
padding-top: @line-height-computed * 2;
- .features-card-description,
- .features-card-description-list {
+ @media (max-width: @screen-sm-max) {
+ height: unset;
+ padding-top: 0;
+ }
+
+ .features-card-description {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ h1 {
+ @media (max-width: @screen-sm-max) {
+ font-size: 2.25rem;
+ line-height: 1.333;
+ }
+
+ &.features-card-hero-smaller-title {
+ @media (min-width: @screen-lg-min) {
+ // 3rem is the default, this is a workaround for big screen
+ // since 6-width column on md screen size will wrap the text in three lines
+ font-size: 2.8rem;
+ }
+ }
+ }
+
p {
font-size: 1.25rem;
width: 90%;
+
+ @media (max-width: @screen-sm-max) {
+ font-size: 1.125rem;
+ line-height: 1.33;
+ width: unset;
+ }
}
}
- }
- .bg-vivid-tangerine {
- background-color: var(--vivid-tangerine);
- }
- .bg-mint-green {
- background-color: var(--mint-green);
- }
- .bg-light-pastel-purple {
- background-color: var(--light-pastel-purple);
- }
-
- .sticky-tags-container {
- margin-top: -20px;
- .sticky-tag {
- padding: 6px 10px;
- width: fit-content;
- font-size: 1.8rem;
- font-weight: 400;
- font-family: 'DM Mono', monospace;
- font-feature-settings: 'ss05';
- border-radius: 10px;
- color: black;
+ .features-card-image {
position: absolute;
+ // on wide screen, image will be fixed without any variable width translation
+ transform: translateX(600px);
+ top: 100px;
+ width: 720px;
+ height: auto;
+ padding: 0;
+
+ // starting from 1500px, image will have a variable translation that depends on screen width
+ // this will make image "fixed" on a specific point on the screen
+ @media (max-width: 1500px) {
+ transform: translateX(calc(50vw - 121px));
+ }
+
+ @media (max-width: 1400px) {
+ width: 650px;
+ transform: translateX(calc(50vw - 52px));
+ }
+
+ // bootstrap layout changes on 1200px (@screen-lg), add a specific
+ // case for this exact width
+ @media (min-width: 1200px) and (max-width: 1200px) {
+ width: 600px;
+ transform: translateX(calc(50vw));
+ }
+
+ @media (max-width: 1199px) {
+ width: 600px;
+ transform: translateX(calc(50vw - 106px));
+ }
+
+ @media (max-width: 1100px) {
+ width: 550px;
+ transform: translateX(calc(50vw - 55px));
+ }
+
+ // 991px
+ @media (max-width: @screen-sm-max) {
+ position: relative;
+ transform: none;
+ top: 0;
+ width: 100%;
+ margin-bottom: 50px;
+ }
+
+ img.img-responsive {
+ width: 100%;
+ }
}
- .tag-top {
- transform: rotate(4.88deg);
- right: 40px;
- top: -10px;
- z-index: 1;
- }
- .tag-middle {
- transform: rotate(0.31deg);
- right: 60px;
- top: 45px;
+ .sticky-tags {
+ position: absolute;
z-index: 2;
- }
- .tag-bottom {
- transform: rotate(-5.84deg);
- right: 20px;
- top: 98px;
- z-index: 1;
+ height: 160px;
+ bottom: -105px;
+ right: 55px;
+
+ @media (max-width: 1400px) {
+ height: 150px;
+ bottom: -103px;
+ right: 47px;
+ }
+
+ @media (max-width: 1200px) {
+ height: 130px;
+ bottom: -87px;
+ }
+
+ @media (max-width: 1100px) {
+ height: 120px;
+ bottom: -81px;
+ }
+
+ // 991px
+ @media (max-width: @screen-sm-max) {
+ height: 130px;
+ bottom: -75px;
+ right: 70px;
+ }
+
+ // 767px
+ @media (max-width: @screen-xs-max) {
+ height: 24%;
+ bottom: -10vw; // scale with width
+ right: 9.5vw; // scale with width
+ }
}
}
diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less
index 5055197e28..84afac0c27 100644
--- a/services/web/frontend/stylesheets/core/variables.less
+++ b/services/web/frontend/stylesheets/core/variables.less
@@ -386,8 +386,6 @@
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
-@screen-size-sm-max: 767px;
-
//== Grid system
//
//## Define your custom responsive grid.
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index 9bfc1dd4ae..3975d38eed 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/services/web/frontend/stylesheets/variables/all.less
@@ -342,8 +342,6 @@
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
-@screen-size-sm-max: 767px;
-
//== Grid system
//
//## Define your custom responsive grid.
diff --git a/services/web/frontend/stylesheets/variables/colors.less b/services/web/frontend/stylesheets/variables/colors.less
index 322648dcef..bfa066d6ed 100644
--- a/services/web/frontend/stylesheets/variables/colors.less
+++ b/services/web/frontend/stylesheets/variables/colors.less
@@ -94,12 +94,10 @@
// == Website Redesign ==
@emerald-green: #098842;
-@vivid-tangerine: #f1a695;
@ceil: #9597c9;
@caramel: #f9d38f;
@dark-jungle-green: #0f271a;
@malachite: #13c965;
-@light-pastel-purple: #b199c8;
@mint-green: #80cb9c;
@deep-green: #0f2715;
@sapphire-blue: #4354a3;
diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less
index 3f017f76d1..83b43b29f8 100644
--- a/services/web/frontend/stylesheets/variables/css-variables.less
+++ b/services/web/frontend/stylesheets/variables/css-variables.less
@@ -83,12 +83,10 @@
// website-redesign
--emerald-green: @emerald-green;
--mint-green: @mint-green;
- --vivid-tangerine: @vivid-tangerine;
--ceil: @ceil;
--caramel: @caramel;
--dark-jungle-green: @dark-jungle-green;
--malachite: @malachite;
- --light-pastel-purple: @light-pastel-purple;
--deep-green: @deep-green;
--sapphire-blue: @sapphire-blue;
--sapphire-blue-dark: @sapphire-blue-dark;
diff --git a/services/web/public/img/enterprise-page/business-hero.png b/services/web/public/img/enterprise-page/business-hero.png
index c9a395a937..8c53039d9c 100644
Binary files a/services/web/public/img/enterprise-page/business-hero.png and b/services/web/public/img/enterprise-page/business-hero.png differ
diff --git a/services/web/public/img/website-redesign/features-universities-hero.png b/services/web/public/img/website-redesign/features-universities-hero.png
new file mode 100644
index 0000000000..c3e91c1918
Binary files /dev/null and b/services/web/public/img/website-redesign/features-universities-hero.png differ
diff --git a/services/web/public/img/website-redesign/sticky-tag-enterprises.svg b/services/web/public/img/website-redesign/sticky-tag-enterprises.svg
new file mode 100644
index 0000000000..db4a10314d
--- /dev/null
+++ b/services/web/public/img/website-redesign/sticky-tag-enterprises.svg
@@ -0,0 +1,15 @@
+
diff --git a/services/web/public/img/website-redesign/sticky-tag-features.svg b/services/web/public/img/website-redesign/sticky-tag-features.svg
new file mode 100644
index 0000000000..eb1f98e7c5
--- /dev/null
+++ b/services/web/public/img/website-redesign/sticky-tag-features.svg
@@ -0,0 +1,15 @@
+
diff --git a/services/web/public/img/website-redesign/sticky-tag-universities.svg b/services/web/public/img/website-redesign/sticky-tag-universities.svg
new file mode 100644
index 0000000000..33ec674ee0
--- /dev/null
+++ b/services/web/public/img/website-redesign/sticky-tag-universities.svg
@@ -0,0 +1,15 @@
+