diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss b/services/web/frontend/stylesheets/bootstrap-5/components/image.scss
index b156cdfd3a..bdcea2aed6 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/image.scss
@@ -1,3 +1,3 @@
.img-rounded {
- border-radius: $border-radius-large;
+ border-radius: var(--border-radius-large);
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
index 282b9907d3..3953b1c019 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
@@ -1,9 +1,9 @@
.text-with-bg {
@extend .dm-mono;
- padding: 0 10px;
- border-radius: 10px;
- margin-top: 5px;
+ padding: 0 var(--spacing-04);
+ border-radius: var(--border-radius-medium);
+ margin-top: var(--spacing-02);
// will make all spans content inline while avoiding overflowing the viewport in mobile
// https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 44ab55a391..6693f3f479 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -3,84 +3,79 @@
/about/*, /contact, /legal, /blog/*, /for/*, /events/*
*/
.cms-page {
- &.website-redesign {
- h1 {
- font-size: 2rem; // 32px
+ h1 {
+ font-size: 2rem; // 32px
+ line-height: 1.333;
+ }
+
+ h2 {
+ font-size: 1.5rem; // 24px
+ }
+
+ .sales-contact-form-left-column {
+ .sales-contact-form-heading-title {
+ font-size: 2.25rem;
+ font-family: var(-font-family-san-serif);
+ font-style: normal;
+ font-weight: 600;
line-height: 1.333;
+ padding-top: 8px;
+ padding-right: 50px;
}
- h2 {
- font-size: 1.5rem; // 24px
- }
-
- .sales-contact-form-left-column {
- .sales-contact-form-heading-title {
- font-size: 2.25rem;
- font-family: var(-font-family-san-serif);
- font-style: normal;
- font-weight: 600;
- line-height: 1.333;
- padding-top: 8px;
- padding-right: 50px;
- }
-
- @include media-breakpoint-up(sm) {
- .names-container {
- display: flex;
- gap: 21px;
- }
- }
-
- .checkbox-label {
- font-size: 16px;
- font-weight: 400;
+ @include media-breakpoint-up(sm) {
+ .names-container {
+ display: flex;
+ gap: 21px;
}
}
- /* Buttons */
- // correct color property set on above:
- // TODO: check if reset needed
- // .reset-btns;
- // .alert {
- // .alert;
- // }
- // .alert-info {
- // .btn-info {
- // .btn-alert-info;
- // }
- // }
+ .checkbox-label {
+ font-size: 16px;
+ font-weight: 400;
+ }
+ }
- .p-no-text-nodes:has(.btn) {
- margin-top: var(--spacing-09);
+ /* Buttons */
+ // correct color property set on above:
+ // TODO: check if reset needed
+ // .reset-btns;
+ // .alert {
+ // .alert;
+ // }
+ // .alert-info {
+ // .btn-info {
+ // .btn-alert-info;
+ // }
+ // }
- @include media-breakpoint-down(md) {
- .btn {
- width: 100%;
- margin-left: 0;
- margin-top: var(--spacing-05);
- }
+ .p-no-text-nodes:has(.btn) {
+ margin-top: var(--spacing-09);
- .btn:first-child {
- margin-top: 0;
- }
+ @include media-breakpoint-down(md) {
+ .btn {
+ width: 100%;
+ margin-left: 0;
+ margin-top: var(--spacing-05);
+ }
+
+ .btn:first-child {
+ margin-top: 0;
}
}
+ }
- .btn + .btn {
- margin-left: var(--spacing-06);
- }
+ .btn + .btn {
+ margin-left: var(--spacing-06);
+ }
- .optional-text {
- font-size: 14px;
- }
+ .optional-text {
+ font-size: 14px;
}
.section-row {
margin: 0 auto;
-
- // TODO: check max-widths with UX team for new design
- // used to have different sizes for different breakpoints but probably not needed
- max-width: 1344px;
+ max-width: 1440px;
}
padding-bottom: 0;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
index ad31fae641..11f0de6517 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
@@ -1,6 +1,6 @@
/*
Styling for content pages
- Including: about, home, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
+ Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
*/
// TODO: consolidate cms.scss and content.scss
@@ -41,9 +41,7 @@
section
*/
section {
- // TODO: static pages look to use --spacing-16 (96px) for total vertical padding
- // should that be the default going forward?
- padding: var(--spacing-08) var(--spacing-05);
+ padding: var(--spacing-16) var(--spacing-05) 0 var(--spacing-05);
// TODO: confirm if we will still support this and if so what colors to use
// &.color-block {
@@ -90,9 +88,7 @@
// }
.section-row {
- // TODO: check max-widths with UX team for new design
- // used to have different sizes for different breakpoints but probably not needed
- max-width: 1344px;
+ max-width: 1440px;
}
}