diff --git a/blocks/agent-search/agent-search.css b/blocks/agent-search/agent-search.css
index 7accb6ad..877db498 100644
--- a/blocks/agent-search/agent-search.css
+++ b/blocks/agent-search/agent-search.css
@@ -88,7 +88,7 @@ main .section.agent-search-container {
.agent-search.block .search-bar .suggester-results .list-title {
padding: 15px 15px 5px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-s);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css
index 08ad8820..ea520b09 100644
--- a/blocks/avm-report/avm-report.css
+++ b/blocks/avm-report/avm-report.css
@@ -1,20 +1,24 @@
.avm-report.block {
- padding: 2em 0;
max-width: 600px;
}
.avm-report.block h2 {
+ color: var(--primary-color);
+ font-size: 28px;
+ font-weight: var(--font-weight-normal);
margin-bottom: .5em;
}
.avm-report.block p {
- letter-spacing: var(--letter-spacing-s);
+ color: var(--primary-color);
+ font-size: var(--body-font-size-s);
+ letter-spacing: normal;
+ margin-bottom: 13px;
}
.avm-report.block form {
display: flex;
flex-direction: column;
- margin-top: 2em;
justify-content: center;
align-items: center;
}
@@ -26,11 +30,12 @@
}
.avm-report.block form .avm-input input {
+ border: 1px solid var(--grey);
display: block;
- padding-left: 10px;
- margin-right: 16px;
height: 50px;
- border: 1px solid var(--grey);
+ letter-spacing: normal;
+ margin-right: 16px;
+ padding-left: 10px;
}
.avm-report.block form .avm-input input[name="avmaddress"] {
@@ -39,26 +44,42 @@
}
.avm-report.block form .avm-input input[name="avmunit"] {
- padding-left: 10px;
+ font-size: var(--body-font-size-s);
+ margin-right: 0;
+ padding: 1px 2px 1px 10px;
width: 67px;
}
.avm-report.block form button[type="submit"] {
+ border: 1px solid var(--secondary-grey);
+ font-size: var(--body-font-size-s);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: var(--letter-spacing-l);
+ text-transform: uppercase;
transition: all .3s ease-in;
}
@media screen and (min-width: 600px) {
.avm-report.block {
- width: 85%;
margin: 0 auto;
+ max-width: 720px;
+ width: 85%;
}
}
@media screen and (min-width: 900px) {
+ main .avm-report-container.section {
+ padding: 62px 0;
+ }
+
.avm-report.block form {
flex-direction: row;
}
+ .avm-report.block h2 {
+ font-size: var(--heading-font-size-xxl);
+ }
+
.avm-report.block form .avm-input input[name="avmaddress"] {
width: 100%;
}
diff --git a/blocks/blog-details/blog-details.css b/blocks/blog-details/blog-details.css
index 9087b83f..14179d32 100644
--- a/blocks/blog-details/blog-details.css
+++ b/blocks/blog-details/blog-details.css
@@ -14,7 +14,7 @@
}
.blog-details.block .title {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
font-size: var(--heading-font-size-m);
line-height: var(--line-height-m);
@@ -237,7 +237,7 @@
.blog-details.block .article-share-page h3 {
padding-top: 32px;
margin-bottom: 32px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
}
diff --git a/blocks/blog-listing/blog-listing.css b/blocks/blog-listing/blog-listing.css
index 0a1ba272..b09b0850 100644
--- a/blocks/blog-listing/blog-listing.css
+++ b/blocks/blog-listing/blog-listing.css
@@ -36,7 +36,7 @@
.blog-item .title {
font-size: var(--body-font-size-l);
margin-bottom: 16px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-xs);
}
diff --git a/blocks/blog-menu/blog-menu.css b/blocks/blog-menu/blog-menu.css
index 1b086190..085cf4ef 100644
--- a/blocks/blog-menu/blog-menu.css
+++ b/blocks/blog-menu/blog-menu.css
@@ -1,28 +1,28 @@
.section.blog-menu-container {
padding: 0;
margin: 0 auto;
- max-width: var(--wide-page-width);
+ max-width: none;
position: sticky;
top: 0;
z-index: 10;
}
.blog-nav {
+ color: var(--white);
+ background-color: var(--primary-color);
display: flex;
flex-flow: column;
- background-color: var(--primary-color);
- color: var(--white);
- padding-top: 10px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-m);
- width: 100vw;
- max-width: 1600px;
+ max-width: var(--wide-page-width);
+ margin: 0 auto;
+ width: 100%;
}
.blog-nav ul {
display: none;
position: absolute;
- top: 120px;
+ top: 115px;
text-align: center;
width: 100%;
padding: 0 10px;
@@ -64,27 +64,32 @@
}
.blog-nav a {
- text-decoration: none;
+ color: var(--white);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-s);
+ font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-m);
- font-family: var(--font-family-proxima);
- font-size: var(--body-font-size-m);
- font-weight: var(--font-weight-normal);
line-height: var(--line-height-m);
- text-decoration-style: solid;
- color: var(--white);
+ padding: 5px 10px;
+ text-decoration: none;
}
.blog-nav h1 a {
- display: block;
+ display: inline-block;
font-size: var(--heading-font-size-xl);
- font-family: var(--font-family-proxima);
- font-weight: var(--font-weight-bold);
+ font-family: var(--font-family-secondary);
+ font-weight: var(--font-weight-normal);
line-height: var(--line-height-m);
text-align: center;
text-transform: none;
letter-spacing: initial;
}
+.blog-nav a:hover {
+ background-color: var(--white);
+ color: var(--primary-color);
+}
+
.blog-nav.seller-advice a {
color: var(--primary-color);
}
@@ -109,7 +114,8 @@
color: var(--primary-color);
}
-.blog-nav h1:hover {
+.blog-nav h1 a:hover {
+ background-color: transparent;
color: var(--white);
opacity: 0.6;
}
@@ -122,7 +128,7 @@
}
.blog-nav li {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-m);
line-height: var(--line-height-m);
letter-spacing: var(--letter-spacing-m);
@@ -131,13 +137,6 @@
text-align: center;
}
-.blog-nav li:hover {
- border-bottom: 1px solid var(--white);
- color: var(--white);
- opacity: 0.6;
-}
-
-
.blog-nav.seller-advice li:hover {
border-bottom: 1px solid var(--primary-color);
}
@@ -237,18 +236,19 @@
}
.blog-nav ul {
+ display: flex;
padding: 0 66px 25px;
position: unset;
- display: flex;
- justify-content: space-between;
+ justify-content: center;
}
.blog-nav li {
- padding: 0;
border-top: none;
+ padding: 0 0 0 16px;
}
.blog-nav h1 a {
+ font-size: var(--heading-font-size-xxl);
text-align: left;
margin: 0 66px
}
@@ -257,7 +257,6 @@
@media (min-width: 1200px) {
.blog-nav h1 a {
- font-size: var(--heading-font-size-xxxl);
- line-height: var(--line-height-l);
+ font-size: var(--heading-font-size-xxl);
}
}
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index ec62d712..07888440 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -1,3 +1,13 @@
+.cards.block {
+ padding-bottom: 32px;
+}
+
+.cards.wide.block {
+ margin: 0 auto;
+ max-width: var(--wide-page-width);
+ border-bottom: 1px solid var(--secondary-accent);
+}
+
.cards.block,
.cards.block .cards-list {
display: flex;
@@ -11,10 +21,12 @@
}
.cards.block .title h4 {
- text-transform: uppercase;
- text-align: center;
- letter-spacing: var(--letter-spacing-l);
+ color: var(--primary-color);
+ font-size: var(--heading-font-size-s);
+ font-weight: var(--font-weight-bold);
line-height: var(--line-height-m);
+ text-align: center;
+ text-transform: capitalize;
}
.cards.block .cards-list .cards-item {
@@ -61,15 +73,17 @@
}
.cards.block .cards-list .cards-item .card-image p {
- position: absolute;
- left: 0;
+ background-color: var(--white);
bottom: 0;
- text-transform: uppercase;
- padding: 1em .5em 0 0;
+ font-size: var(--heading-font-size-xxs);
+ font-weight: var(--font-weight-bold);
+ left: 0;
+ letter-spacing: var(--letter-spacing-m);
margin: 0;
min-width: calc((2 / 3) * 100%);
- letter-spacing: var(--letter-spacing-l);
- background-color: var(--white);
+ padding: 16px 16px 0 0;
+ position: absolute;
+ text-transform: uppercase;
}
.cards.block .cards-list .cards-item .card-body h3 {
@@ -79,8 +93,13 @@
}
.cards.block .cards-list .cards-item .card-body p {
- margin: 8px 0 24px;
+ font-size: var(--body-font-size-xs);
letter-spacing: var(--letter-spacing-xs);
+ margin: 8px 0 24px;
+}
+
+.tertiary-background .cards.block .cards-list .cards-item .card-image p {
+ background-color: var(--tertiary-color);
}
.cards.block .cards-list .cards-item .card-body .button-container {
@@ -89,19 +108,13 @@
display: flex;
}
-.cards.block .cards-list .cards-item .card-body .button-container a {
- padding: 10px 24px;
- border: 1px solid var(--black);
- color: var(--black);
-}
-
/* Icons variation */
.cards.block.icons .cards-list .cards-item {
flex-direction: row;
padding: 15px 0 25px;
margin-bottom: 0;
width: 100%;
- border-top: 1px solid var(--grey);
+ border-bottom: 1px solid var(--secondary-medium-grey);
}
.cards.block.icons .cards-list .cards-item .card-icon {
@@ -119,25 +132,19 @@
}
.cards.block.icons .cards-list .cards-item .card-body h4 {
- text-transform: uppercase;
- font-family: var(--font-family-proxima);
- font-weight: var(--font-weight-semibold);
+ color: var(--secondary-color);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-m);
line-height: var(--line-height-m);
+ text-transform: uppercase;
}
.cards.block.icons .cards-list .cards-item .card-body p {
- margin-bottom: 0;
+ color: var(--body-color);
+ font-size: var(--body-font-size-s);
letter-spacing: var(--letter-spacing-xs);
-}
-
-.cards.block.shade-icon .cards-list .cards-item .card-body p {
- text-align: center;
- margin-bottom: 10px;
-}
-
-.section.grey-background .cards.block .cards-list .cards-item .card-image p {
- background-color: var(--light-grey);
+ margin-bottom: 0;
}
.cards.block.shade-icon .cards-list .cards-item {
@@ -149,6 +156,20 @@
justify-content: center;
}
+.cards.block.tertiary-background.border-top .cards-list .cards-item {
+ background-color: var(--tertiary-color);
+ border-top: 1px solid var(--secondary-light);
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body p {
+ text-align: center;
+ margin-bottom: 10px;
+}
+
+.section.grey-background .cards.block .cards-list .cards-item .card-image p {
+ background-color: var(--light-grey);
+}
+
.cards.block.shade-icon .cards-list .cards-item .card-body h4 {
padding: 8px 30px;
text-align: center;
@@ -181,6 +202,11 @@
max-width: 83.333%;
}
+ .cards.block.narrow {
+ margin: 30px auto 0;
+ max-width: 750px;
+ }
+
.cards.block.shade-icon .cards-list {
flex-direction: row;
column-gap: 20px;
@@ -199,6 +225,10 @@
}
@media (min-width: 900px) {
+ .cards.block .title h4 {
+ font-size: var(--heading-font-size-m);
+ }
+
.cards.block .cards-list {
flex-direction: row;
align-items: stretch;
@@ -226,16 +256,29 @@
max-height: 500px;
}
+ .cards.block .cards-list .cards-item .card-image p {
+ font-size: var(--heading-font-size-xs);
+ }
+
.cards.block.cards-2-cols .cards-list .cards-item .card-image picture {
padding-bottom: 45%;
}
+ .cards.block .cards-list .cards-item .card-body h3 {
+ font-size: var(--heading-font-size-xl);
+ font-weight: var(--font-weight-semibold);
+ }
+
.cards.block.icons .cards-list {
flex-flow: row wrap;
align-items: stretch;
column-gap: 20px;
}
+ .cards.block .cards-list .cards-item .card-body p {
+ font-size: var(--body-font-size-s);
+ }
+
.cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
padding: 0 25px 54px;
}
diff --git a/blocks/columns/luxury-collection-template.css b/blocks/columns/luxury-collection-template.css
index 4096df0b..ffdbab67 100644
--- a/blocks/columns/luxury-collection-template.css
+++ b/blocks/columns/luxury-collection-template.css
@@ -3,16 +3,16 @@
}
.luxury-collection .columns.block h2 {
- font-family: var(--font-family-gotham);
- font-weight: var(--font-weight-light);
- font-size:var(--heading-font-size-xxxxl);
+ font-family: var(--font-family-luxury);
+ font-weight: var(--font-weight-normal);
+ font-size:var(--heading-font-size-xl);
line-height: var(--line-height-xs);
letter-spacing: 0;
margin-bottom: 25px;
}
.luxury-collection .columns.block h3 {
- font-family: var(--font-family-gotham);
+ font-family: var(--font-family-luxury);
font-weight: var(--font-weight-bold);
font-size: var(--body-font-size-m);
line-height: var(--line-height-m);
@@ -61,4 +61,8 @@
width: 100%;
left: 0;
}
+
+ .luxury-collection .columns.block h2 {
+ font-size:var(--heading-font-size-xxxxl);
+ }
}
\ No newline at end of file
diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css
index b7a1aa3a..cbd42254 100644
--- a/blocks/floating-images/floating-images.css
+++ b/blocks/floating-images/floating-images.css
@@ -6,16 +6,15 @@
}
.block.floating-images > div {
+ background-color: var(--secondary-light);
display: flex;
flex-direction: column-reverse;
- padding-top: 1em;
min-height: 530px;
}
.block.floating-images .image {
position: relative;
- padding: 1.5em 0;
}
.block.floating-images .image img {
@@ -23,12 +22,30 @@
object-position: center;
height: 100%;
max-width: 100%;
+ width: 100%;
+}
+
+.block.floating-images .content {
+ margin: 30px 0;
}
.block.floating-images .content h2 {
+ color: var(--primary-color);
+ font-size: 28px;
+ font-weight: var(--font-weight-normal);
letter-spacing: normal;
margin-bottom: 0.5em;
+ padding: 0 16px;
text-align: left;
+ text-transform: capitalize;
+}
+
+.block.floating-images .content p {
+ color: var(--primary-color);
+ font-size: var(--body-font-size-s);
+ line-height: 25px;
+ padding: 0 16px;
+ margin-bottom: 13px;
}
.block.floating-images .content ul {
@@ -43,15 +60,15 @@
line-height: var(--line-height-m);
}
-.block.floating-images p.button-container {
- text-align: center;
-}
-
@media screen and (min-width: 900px) {
.block.floating-images > div {
flex-direction: row;
- column-gap: 15px;
- align-items: center;
+ }
+
+ .block.floating-images .content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
.block.floating-images > div > div {
@@ -102,7 +119,12 @@
@media screen and (min-width: 1200px) {
- .block.floating-images > div {
- column-gap: 30px;
+ .block.floating-images .content h2 {
+ font-size: var(--heading-font-size-xxl);
+ padding: 0 80px;
+ }
+
+ .block.floating-images .content p {
+ padding: 0 80px;
}
}
diff --git a/blocks/floating-images/luxury-collection-template.css b/blocks/floating-images/luxury-collection-template.css
index 1f8b59d7..6f222050 100644
--- a/blocks/floating-images/luxury-collection-template.css
+++ b/blocks/floating-images/luxury-collection-template.css
@@ -1,9 +1,11 @@
.luxury-collection .heading h2 {
- font-family: var(--font-family-gotham);
+ font-family: var(--font-family-luxury);
font-weight: var(--font-weight-bold);
font-size: var(--body-font-size-m);
line-height: var(--line-height-m);
letter-spacing: var(--letter-spacing-l);
+ padding-bottom: 9px;
+ text-transform: capitalize;
}
.luxury-collection .heading {
@@ -18,8 +20,30 @@
margin-bottom: 16px;
}
+.luxury-collection .block.floating-images div * {
+ background-color: var(--luxury-dark-grey);
+}
+
+.luxury-collection .image-full-size .block.floating-images div * {
+ background-color: var(--luxury-dark-grey);
+}
+
+.luxury-collection .block.floating-images .content {
+ padding: 0 16px;
+}
+
+.luxury-collection .block.floating-images .content p {
+ font-weight: var(--font-weight-normal);
+ color: var(--white);
+ padding: 0;
+}
+
+.luxury-collection .block.floating-images > div {
+ background-color: var(--luxury-dark-grey);
+}
+
.luxury-collection .block.floating-images .button-container a {
- background: var(--black);
+ background: var(--luxury-dark-grey);
color: var(--white);
border-color: var(--white);
padding: 9px 23px;
@@ -27,6 +51,11 @@
line-height: 22px;
}
+.luxury-collection .block.floating-images .button-container a:hover {
+ background-color: var(--white);
+ color: var(--luxury-grey);
+}
+
.luxury-collection .block.floating-images .button-container {
margin-top: 50px;
}
@@ -44,15 +73,16 @@
font-size: var(--body-font-size-xs)
}
-.luxury-collection .block.floating-images h2 {
- font-family: var(--font-family-gotham);
- font-weight: 300;
- font-size:50px;
+.luxury-collection .block.floating-images .content h2 {
+ color: var(--white);
+ font-family: var(--font-family-luxury);
+ font-size: var(--heading-font-size-xxl);
line-height: 56px;
+ padding: 0;
}
.luxury-collection .block.floating-images h3 {
- font-family: var(--font-family-gotham);
+ font-family: var(--font-family-luxury);
font-weight: 200;
font-size: var(--heading-font-size-l);
line-height: var(--line-height-s);
@@ -62,7 +92,7 @@
}
.luxury-collection .block.floating-images .content h4 {
- font-family: var(--font-family-gotham);
+ font-family: var(--font-family-luxury);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-m);
line-height: var(--line-height-m);
@@ -70,3 +100,15 @@
text-transform: uppercase;
margin-bottom: 16px;
}
+
+@media screen and (min-width: 900px) {
+ .luxury-collection .image-full-size .block.floating-images div .content {
+ flex: initial;
+ max-width: 100%;
+ padding: 0 16px;
+ }
+
+ .luxury-collection .image-full-size .block.floating-images .image img {
+ height: 100%;
+ }
+}
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index 00626b31..4a746486 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -1,14 +1,14 @@
@import url('luxury-collection-template.css');
footer {
- background-color: var(--light-grey);
- border-top: 1px solid var(--platinum);
+ background-color: var(--tertiary-color);
+ border-top: 1px solid var(--secondary-medium-grey);
}
.footer {
padding-top: 35px;
padding-bottom: 15px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
color: var(--body-color);
line-height: var(--line-height-m);
}
@@ -60,7 +60,7 @@ footer {
.link-menu-col li {
padding: 6px 0;
- letter-spacing:var(--letter-spacing-xs);
+ letter-spacing:var(--letter-spacing-xxs);
font-size: var(--body-font-size-s);
}
@@ -88,10 +88,9 @@ footer {
}
.icon-facebook img, .icon-linkedin img, .icon-instagram img, .icon-youtube img {
- height: 20px;
- width: 20px;
+ height: 14px;
+ width: 14px;
margin-right: 5px;
- opacity: .4;
}
@@ -132,6 +131,10 @@ footer {
line-height: var(--line-height-m);
}
+.footer-container-flex > div:last-child p:first-child {
+ font-weight: var(--font-weight-bold);
+}
+
.footer-container-flex > div:last-child p a {
color: var(--body-color);
text-decoration: underline;
diff --git a/blocks/footer/luxury-collection-template.css b/blocks/footer/luxury-collection-template.css
index 6de0f13b..45603508 100644
--- a/blocks/footer/luxury-collection-template.css
+++ b/blocks/footer/luxury-collection-template.css
@@ -1,4 +1,8 @@
.luxury-collection footer * {
- background: var(--light-grey);
- color: initial;
+ background: var(--black);
+ color: var(--white);
+}
+
+.luxury-collection footer .link-menu-col li a {
+ color: var(--white);
}
\ No newline at end of file
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 4afdb79f..2b27c00c 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -36,12 +36,8 @@ body.light-nav {
display: contents;
}
-.header.block nav span.icon {
- display: block;
-}
-
.header.block nav span.icon img {
- display: inline-block;
+ display: flex;
height: 100%;
width: 100%;
}
@@ -94,11 +90,11 @@ body.light-nav {
.header.block nav .nav-profile a {
padding: 15px 0;
color: var(--body-color);
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
- font-size: var(--body-font-size-s);
- letter-spacing: var(--letter-spacing-reg);
- line-height: var(--body-font-size-s);
+ font-size: var(--body-font-size-xs);
+ letter-spacing: var(--letter-spacing-m);
+ line-height: normal;
text-decoration: none;
cursor: pointer;
display: flex;
@@ -115,11 +111,15 @@ body.light-nav {
}
.header.block nav .nav-profile .login a {
- padding: 10px;
- margin: 20px 0 10px;
- width: 100px;
+ background-color: var(--primary-color);
border: 1px solid var(--body-color);
+ color: var(--tertiary-color);
+ font-size: var(--body-font-size-s);
+ font-weight: var(--font-weight-bold);
justify-content: center;
+ margin: 20px 0 10px;
+ padding: 10px;
+ width: 100px;
}
.header.block nav .nav-profile .username,
@@ -171,7 +171,7 @@ body.light-nav {
.header.block nav .nav-sections > ul > li {
- border-bottom: 1px solid var(--black);
+ border-bottom: 1px solid var(--secondary-accent);
}
.header.block nav .nav-profile .level-2 li {
@@ -198,9 +198,10 @@ body.light-nav {
.header.block nav .nav-sections > ul > li > a {
display: flex;
padding: 15px 0;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
- font-size: var(--body-font-size-xl);
+ font-size: 26px;
+ letter-spacing: var(--letter-spacing-xxxs);
line-height: var(--line-height-s);
text-decoration: none;
text-transform: uppercase;
@@ -216,12 +217,13 @@ body.light-nav {
/* stylelint-disable-next-line no-descending-specificity */
.header.block nav .nav-sections > ul > li > ul > li > a {
display: block;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-m);
+ letter-spacing: var(--letter-spacing-xxxs);
line-height: var(--line-height-l);
text-decoration: none;
- text-transform: capitalize;
+ text-transform: uppercase;
color: var(--white);
}
@@ -315,7 +317,7 @@ body.light-nav {
display: flex;
height: 100%;
width: 100%;
- max-width: var(--normal-page-width);
+ max-width: var(--wide-page-width);
margin: 0 auto;
align-items: center;
justify-content: flex-end;
@@ -327,6 +329,7 @@ body.light-nav {
.header.block nav .nav-profile ul > li,
.header.block nav .nav-profile ul > li > a {
+ font-size: var(--body-font-size-xxs);
height: 100%;
}
@@ -337,11 +340,17 @@ body.light-nav {
margin: unset;
width: unset;
padding: 0 10px;
- font-size: var(--body-font-size-xs);
+ font-size: var(--body-font-size-xxs);
letter-spacing: var(--letter-spacing-reg);
line-height: unset;
}
+ .header.block nav .nav-profile .login a {
+ background-color: transparent;
+ color: var(--body-color);
+ font-weight: var(--font-weight-normal);
+ }
+
.header.block nav .nav-profile a span.icon {
margin-right: 5px;
}
@@ -393,9 +402,9 @@ body.light-nav {
display: flex;
height: 100%;
padding: 10px 15px;
- font-size: var(--body-font-size-m);
+ font-size: 15px;
text-align: center;
- letter-spacing: var(--letter-spacing-reg);
+ letter-spacing: var(--letter-spacing-xxs);
line-height: var(--line-height-m);
color: var(--nav-color);
column-gap: 2px;
@@ -412,7 +421,7 @@ body.light-nav {
background: none;
font-family: var(--font-family-fontawesome);
height: unset;
- width: 20px;
+ width: 13px;
color: var(--nav-color);
}
@@ -458,9 +467,9 @@ body.light-nav {
.header.block nav[aria-expanded="true"] .nav-sections > ul > li.nav-drop > ul > li > a {
padding: 10px 15px;
- font-size: var(--body-font-size-s);
+ font-size: var(--body-font-size-xs);
line-height: var(--body-font-size-s);
- text-transform: capitalize;
+ text-transform: uppercase;
}
.header.block nav[aria-expanded="true"] .nav-hamburger {
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 73430699..225350b7 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -166,7 +166,7 @@ function addProfileLogin(nav) {
`;
- profileList.append(...profileMenu.childNodes);
+ profileList.prepend(...profileMenu.childNodes);
profileList.querySelector('.login a').addEventListener('click', openSignIn);
profileList.querySelector('.username .logout a').addEventListener('click', doLogout);
onProfileUpdate(showHideNavProfile);
diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css
index 21405236..d5d384eb 100644
--- a/blocks/hero-slides/hero-slides.css
+++ b/blocks/hero-slides/hero-slides.css
@@ -1,3 +1,5 @@
+@import url('luxury-collection-template.css');
+
.section.hero-slides-container {
padding: 0;
max-width: var(--wide-page-width);
diff --git a/blocks/hero-slides/luxury-collection-template.css b/blocks/hero-slides/luxury-collection-template.css
new file mode 100644
index 00000000..3e654b03
--- /dev/null
+++ b/blocks/hero-slides/luxury-collection-template.css
@@ -0,0 +1,3 @@
+.luxury-collection .hero-slides .slide .row .logo img {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index b759801f..062f7e72 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -2,6 +2,7 @@
main .section.hero-container {
padding: 0;
+ max-width: none;
}
.hero.block {
@@ -60,6 +61,7 @@ main .section.full-width > .hero-wrapper {
.hero.block > div {
padding: 0 16px;
+ width: 100%;
}
.hero.block.keep-scale {
@@ -140,6 +142,7 @@ main .section.full-width > .hero-wrapper {
@media screen and (min-width: 900px) {
.hero.block > div {
padding: 0 130px;
+ width: auto;
}
}
diff --git a/blocks/hero/search/home.css b/blocks/hero/search/home.css
index 37fbbb37..962430b2 100644
--- a/blocks/hero/search/home.css
+++ b/blocks/hero/search/home.css
@@ -19,6 +19,7 @@
}
.hero.block .content .homes .search-bar .search-country-select-parent {
+ display: none; /* hiding as it isn't present in current designs */
position: relative;
width: 80px;
}
@@ -41,6 +42,11 @@
display: none;
}
+.hero.block .content .homes.show-filters {
+ border-bottom: 6px solid var(--primary-color);
+}
+
+
.hero.block .content .homes .search-bar .filter span.icon {
position: relative;
display: flex;
@@ -56,6 +62,14 @@
color: var(--black);
}
+.hero.block .content .homes .search-bar .filter svg {
+ height: 22px;
+ margin-left: 5px;
+ margin-top: 5px;
+ opacity: 0.75;
+ width: 22px;
+}
+
.hero.block .content .homes .filters {
display: none;
}
@@ -64,13 +78,23 @@
.hero.block .content .homes .filters .select-wrapper {
position: relative;
height: 40px;
+ color: var(--input-placeholder);
+ font-size: var(--body-font-size-xs);
width: calc(50% - 5px);
margin: 8px 0;
padding: 0 15px;
- border: 1px solid var(--grey);
+ border: 1px solid var(--primary-color);
text-overflow: ellipsis;
}
+.hero.block .content .homes .filters .select-wrapper {
+ cursor: pointer;
+}
+
+.hero.block .content .homes .filters input {
+ font-size: var(--body-font-size-xs);
+}
+
.hero.block .content .homes .filters .select-wrapper select {
display: none;
}
@@ -82,23 +106,26 @@
line-height: 40px;
}
-.hero.block .content .homes .filters .select-wrapper .selected p {
- color: var(--black);
-}
-
-.hero.block .content .homes .filters .select-wrapper > .selected::after {
- display: inline;
- position: absolute;
- right: 0;
+.hero.block .content .homes .filters .select-wrapper .selected::after {
+ color: var(--primary-color);
content: '\f0d7';
+ display: inline;
font-family: var(--font-family-fontawesome);
height: unset;
+ position: absolute;
+ right: 0;
}
.hero.block .content .homes .filters .select-wrapper.open > .selected::after {
content: '\f0d8';
}
+.hero.block .content .homes .filters .select-wrapper .selected span {
+ font-size: var(--body-font-size-xs);
+ color: var(--input-placeholder);
+}
+
+
.hero.block .content .homes .filters .select-wrapper .select-items {
display: none;
position: absolute;
@@ -132,15 +159,15 @@
@media screen and (max-width: 899px) {
.hero.block .content .homes.show-filters {
+ background-color: var(--white);
display: flex;
+ flex-direction: column;
+ height: 100vh;
+ left: 0;
+ padding: 15px;
position: fixed;
top: 0;
- left: 0;
- height: 100vh;
width: 100vw;
- padding: 15px;
- flex-direction: column;
- background-color: var(--white);
z-index: 1000;
}
@@ -178,7 +205,7 @@
width: 22px;
}
- .hero.block .content .homes .filters .close {
+ .hero.block .content .homes .search-bar .close {
display: none;
}
@@ -193,42 +220,51 @@
}
.hero.block .content .homes.show-filters .submit {
+ background-color: var(--primary-color);
+ border: 1px solid var(--primary-color);
+ color: var(--white);
display: block;
- flex: unset;
- margin: 50px auto;
- height: unset;
+ height: 40px;
+ margin: 50px auto 0;
+ max-height: 40px;
min-width: 140px;
+ padding: 0;
text-align: center;
- color: var(--white);
- background-color: var(--primary-color);
- border: 1px solid var(--primary-color);
}
}
@media screen and (min-width: 900px) {
.hero.block .content .homes.show-filters .filters {
+ background-color: var(--white);
+ border-bottom: 6px solid var(--primary-color);
+ border-radius: 0 0 6px 6px;
+ column-gap: 10px;
display: flex;
- position: absolute;
- top: 57px;
+ flex-wrap: nowrap;
left: 0;
- right: 0;
padding: 5px 10px;
- flex-wrap: nowrap;
- column-gap: 10px;
- border: 1px solid var(--grey);
- background-color: var(--white);
+ position: absolute;
+ right: 0;
+ top: 57px;
}
- .hero.block .content .homes .filters .close {
- display: flex;
- border: none;
- background-color: transparent;
+ .hero.block .content .homes .search-bar .close {
align-items: center;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ display: none;
justify-content: center;
+ margin-right: 10px;
+ opacity: 0.75;
+ }
+
+ .hero.block .content .homes.homes.show-filters .search-bar .close {
+ display: inline-block;
}
- .hero.block .content .homes .filters .close svg {
+ .hero.block .content .homes .search-bar .close svg {
filter: none;
height: 22px;
width: 22px;
diff --git a/blocks/hero/search/home.js b/blocks/hero/search/home.js
index c8c96bdf..fb89fad2 100644
--- a/blocks/hero/search/home.js
+++ b/blocks/hero/search/home.js
@@ -103,24 +103,24 @@ async function buildForm() {
+
-
-
- ${buildFilterSelect('bedrooms', 'Beds', BED_BATHS).outerHTML}
- ${buildFilterSelect('bathrooms', 'Baths', BED_BATHS).outerHTML}
-
+
+
+ ${buildFilterSelect('MinBedroomsTotal', 'Bedrooms', BED_BATHS).outerHTML}
+ ${buildFilterSelect('MinBathroomsTotal', 'Bathrooms', BED_BATHS).outerHTML}
`;
diff --git a/blocks/hero/search/search.css b/blocks/hero/search/search.css
index 4333d782..7f83c4fa 100644
--- a/blocks/hero/search/search.css
+++ b/blocks/hero/search/search.css
@@ -7,32 +7,49 @@
}
.hero.block > div .content .search .options .option {
- padding: 5px 0;
- margin-bottom: 1.5em;
+ background-color: var(--primary-color);
+ border-radius: 6px 0 0 0;
+ color: var(--white);
+ cursor: pointer;
flex: 1;
- font-family: var(--font-family-proxima);
- font-weight: 400;
- font-size: var(--body-font-size-m);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-s);
+ font-weight: var(--font-weight-bold);
+ padding: 10px 20px;
text-align: center;
text-transform: uppercase;
- color: var(--white);
- cursor: default;
}
.hero.block > div .content .search .options .option.active {
- font-weight: 600;
- border-bottom: 3px solid var(--white);
+ background-color: var(--white);
+ border-top-left-radius: 6px;
+ border-top-right-radius: 0px;
+ color: var(--primary-color);
+ cursor: default;
+ font-weight: var(--font-weight-semibold);
+}
+
+.hero.block > div .content .search .options .option[data-option="agents"] {
+ border-radius: 0 6px 0 0;
+}
+
+.hero.block .content .homes .search-bar .filter span.icon-filter {
+ overflow: hidden;
+ opacity: 0.75;
+ height: 22px;
+ width: 22px;
}
/* Shared Search Option CSS */
.hero.block .content .search-bar {
- position: relative;
+ background-color: var(--white);
+ border-bottom: 6px solid var(--primary-color);
+ border-radius: 0 0 6px 6px;
display: flex;
- padding: 5px;
margin-bottom: 8px;
- background-color: var(--white);
- border: 1px solid var(--grey);
+ padding: 5px;
+ position: relative;
}
.hero.block .content .search-bar .search-suggester {
@@ -76,7 +93,7 @@
.hero.block .content .search-bar .suggester-results > li > ul > li {
padding: 8px 0;
font-size: var(--body-font-size-m);
- font-weight: 400;
+ font-weight: var(--font-weight-normal);
text-transform: none;
letter-spacing: normal;
}
@@ -87,47 +104,47 @@
.hero.block .content .search-bar .suggester-results .list-title {
padding: 15px 15px 5px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-s);
- font-weight: 700;
+ font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: .5px;
}
.hero.block .content .search-bar .search-submit {
+ background: var(--primary-color);
+ border: none;
+ cursor: pointer;
+ flex: unset;
height: 35px;
+ letter-spacing: 1.5px;
+ line-height: 2em;
min-width: 70px;
margin: 0;
padding: 0 5px;
- flex: unset;
- letter-spacing: 1.5px;
- line-height: 2em;
text-align: center;
text-transform: uppercase;
- border: 1px solid var(--grey);
- background: transparent;
- color: var(--body-color);
- cursor: pointer;
}
.hero.block .content .search-bar .search-submit span {
display: block;
- width: 100%;
font-size: var(--body-font-size-xs);
+ font-weight: var(--font-weight-bold);
+ color: var(--white);
text-align: center;
+ width: 100%;
}
@media screen and (min-width: 600px) {
.hero.block > div .content .search .options .option {
flex: 0 1 auto;
- margin-right: 20px;
line-height: 1.5em;
}
}
@media screen and (min-width: 900px) {
.hero.block .content .search-bar {
- width: 620px;
+ width: 680px;
padding: 10px;
}
}
diff --git a/blocks/info-mouseover/info-mouseover.css b/blocks/info-mouseover/info-mouseover.css
index e2f23a35..08835986 100644
--- a/blocks/info-mouseover/info-mouseover.css
+++ b/blocks/info-mouseover/info-mouseover.css
@@ -12,7 +12,7 @@
left: -180px;
width: max-content;
max-width: 200px;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-xs);
line-height: var(--line-height-s);
diff --git a/blocks/juicer/juicer.css b/blocks/juicer/juicer.css
index 9fedaf68..a73f636e 100644
--- a/blocks/juicer/juicer.css
+++ b/blocks/juicer/juicer.css
@@ -1,7 +1,7 @@
.juicer.block h2 {
padding: 1.5em 0;
margin-bottom: 1.5em;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--heading-font-size-s);
line-height: var(--line-height-s);
letter-spacing: var(--letter-spacing-m);
diff --git a/blocks/liveby-demographics/liveby-demographics.css b/blocks/liveby-demographics/liveby-demographics.css
index 32719a89..bf33fc97 100644
--- a/blocks/liveby-demographics/liveby-demographics.css
+++ b/blocks/liveby-demographics/liveby-demographics.css
@@ -22,7 +22,7 @@
.liveby-demographics.block > div .census-item span.census-value {
margin-top: .6em;
margin-bottom: .4em;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--body-font-size-l);
letter-spacing: normal;
@@ -31,7 +31,7 @@
.liveby-demographics.block > div .census-item span.census-name {
max-width: 9em;
margin: 0 auto;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-s);
letter-spacing: normal;
diff --git a/blocks/liveby-schools/liveby-schools.css b/blocks/liveby-schools/liveby-schools.css
index f5bed92b..691be22c 100644
--- a/blocks/liveby-schools/liveby-schools.css
+++ b/blocks/liveby-schools/liveby-schools.css
@@ -14,7 +14,7 @@ main .section.liveby-schools-container p {
margin: 8px 0;
padding-left: 15px;
padding-right: 15px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-m);
font-weight: var(--font-weight-normal);
justify-content: flex-end;
@@ -24,7 +24,7 @@ main .section.liveby-schools-container p {
appearance: none;
padding: 8px 32px 8px 8px;
color: var(--body-color);
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-m);
font-weight: var(--font-weight-normal);
border-color: var(--grey);
@@ -59,7 +59,7 @@ main .section.liveby-schools-container p {
margin-bottom: 1em;
padding-top: 0;
padding-bottom: .5em;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
font-size: var(--heading-font-size-s);
border-bottom: 1px solid var(--grey);
@@ -88,7 +88,7 @@ main .section.liveby-schools-container p {
.liveby-schools .school-lists section .school-item .school-details .type {
position: absolute;
top: -.75em;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-xxs);
text-transform: uppercase;
@@ -97,7 +97,7 @@ main .section.liveby-schools-container p {
.liveby-schools .school-lists section .school-item .school-details h3 {
margin: 0;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
font-size: var(--heading-font-size-xs);
line-height: var(--line-height-m);
@@ -139,7 +139,7 @@ main .section.liveby-schools-container p {
max-width: 18%;
margin-left: .5em;
margin-top: .5em;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-xxs);
text-align: center;
line-height: var(--line-height-xl);
diff --git a/blocks/login/login.css b/blocks/login/login.css
index 973557b7..a207abdb 100644
--- a/blocks/login/login.css
+++ b/blocks/login/login.css
@@ -43,7 +43,7 @@
.login.block .login-form form h2 {
margin-top: 30px;
margin-bottom: 40px;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-bold);
font-size: var(--heading-font-size-m);
line-height: var(--line-height-m);
@@ -94,7 +94,7 @@
}
.login.block .login-form form .message span {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-xs);
line-height: var(--line-height-s);
}
@@ -105,7 +105,7 @@
width: 100%;
padding-left: 15px;
margin-bottom: 1em;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-s);
line-height: 50px;
color: var(--body-color);
diff --git a/blocks/profile/profile.css b/blocks/profile/profile.css
index 807f75bc..9faba726 100644
--- a/blocks/profile/profile.css
+++ b/blocks/profile/profile.css
@@ -6,7 +6,7 @@
.profile h4 {
line-height: var(--line-height-m);
padding-bottom: 0.5em;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
}
.profile nav button {
diff --git a/blocks/property-listing/luxury-collection-template.css b/blocks/property-listing/luxury-collection-template.css
index aa2265e6..2727f195 100644
--- a/blocks/property-listing/luxury-collection-template.css
+++ b/blocks/property-listing/luxury-collection-template.css
@@ -9,7 +9,7 @@
}
.luxury-collection .property-listing-container * {
- background: var(--white);
+ background: var(--black);
color: initial;
}
@@ -18,6 +18,38 @@
padding: 60px 15px;
}
+.luxury-collection .property-list-cards .listing-tile {
+ background-color: var(--black);
+}
+
+.luxury-collection .property-list-cards .property-labels .property-label {
+ background-color: var(--black);
+ color: var(--white);
+}
+
+.luxury-collection .property-list-cards .property-labels .property-label.open-house {
+ background-color: var(--black);
+ color: var(--white);
+}
+
+.luxury-collection .property-list-cards .listing-image-container .property-price {
+ background-color: var(--black);
+ color: var(--white);
+}
+
+.luxury-collection .property-list-cards .property-details .property-info-wrapper .address {
+ color: var(--white);
+}
+
+.luxury-collection .property-list-cards .property-details .property-info-wrapper .specs {
+ color: var(--white);
+}
+
+.luxury-collection .property-list-cards .listing-tile hr {
+ background: var(--black);
+ border-top: 1px solid var(--white)
+}
+
.luxury-collection .property-listing.block .button-container a {
font-size: var(--body-font-size-xs);
padding: 7px 25px;
@@ -25,19 +57,16 @@
line-height: var(--line-height-m);
}
-.luxury-collection .property-listing.block .header {
- margin-bottom: 48px;
-}
-
.luxury-collection .property-listing.block .button-container a:hover{
border: 1px solid var(--grey);
}
.luxury-collection .property-listing.block .header > div > span {
+ color: var(--white);
font-weight: var(--font-weight-light);
font-size: var(--heading-font-size-l);
line-height: var(--line-height-s);
- font-family: var(--font-family-gotham);
+ font-family: var(--font-family-luxury);
letter-spacing: var(--letter-spacing-xs);
border-bottom: 0;
text-transform: none;
diff --git a/blocks/property-listing/property-listing.css b/blocks/property-listing/property-listing.css
index 9823da9b..021d44fc 100644
--- a/blocks/property-listing/property-listing.css
+++ b/blocks/property-listing/property-listing.css
@@ -20,11 +20,12 @@
}
.property-listing.block .header > div > span {
- font-weight: var(--font-weight-bold);
- text-transform: uppercase;
- border-bottom: 3px solid var(--primary-color);
+ color: var(--primary-color);
+ font-size: var(--heading-font-size-l);
+ font-weight: var(--font-weight-semibold);
letter-spacing: initial;
line-height: var(--line-height-m);
+ text-transform: capitalize;
}
.property-listing.block .header > div > p {
diff --git a/blocks/property-search-bar/property-search-bar.css b/blocks/property-search-bar/property-search-bar.css
index 946cfd89..3b1c444f 100644
--- a/blocks/property-search-bar/property-search-bar.css
+++ b/blocks/property-search-bar/property-search-bar.css
@@ -847,9 +847,9 @@ main .section.property-search-bar-container .property-search-bar-wrapper {
.property-search-bar.block .search-bar .suggester-results .list-title {
padding: 15px 15px 5px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-s);
- font-weight: 700;
+ font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: .5px;
color: var(--black);
@@ -936,8 +936,6 @@ main .section.property-search-bar-container .property-search-bar-wrapper {
display: none;
}
-
-
.property-search-bar.block .search-overlay {
position: fixed;
height: unset;
diff --git a/blocks/quote-carousel/quote-carousel.css b/blocks/quote-carousel/quote-carousel.css
index 6bd8b30e..62606fac 100644
--- a/blocks/quote-carousel/quote-carousel.css
+++ b/blocks/quote-carousel/quote-carousel.css
@@ -1,15 +1,21 @@
+.quote-carousel-wrapper {
+ background-color: var(--primary-color);
+ color: var(--white);
+}
+
.quote-carousel.block {
+ border-bottom: 1px solid var(--body-color);;
+ border-top: 1px solid var(--body-color);
display: flex;
- padding: 2em 0;
flex-direction: column;
overflow: hidden;
- border-bottom: 1px solid var(--body-color);;
- border-top: 1px solid var(--body-color);
+ padding: 2em 0;
+ position: relative;
}
.quote-carousel.block .title {
text-align: center;
- text-transform: uppercase;
+ text-transform: capitalize;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-xs);
letter-spacing: var(--letter-spacing-m);
@@ -17,9 +23,10 @@
}
.quote-carousel.block .carousel-content {
+ align-items: baseline;
display: flex;
- transition: transform 200ms;
flex-wrap: nowrap;
+ transition: transform 200ms;
}
.quote-carousel.block .carousel-content .item {
@@ -35,7 +42,7 @@
}
.quote-carousel.block .carousel-content .item .quote {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-xl);
font-weight: var(--font-weight-thin);
line-height: var(--line-height-s);
@@ -43,49 +50,58 @@
}
.quote-carousel.block .carousel-content .item .author {
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-semibold);
- font-size: var(--body-font-size-l);
+ font-size: var(--body-font-size-m);
line-height: var(--line-height-s);
margin: 30px 0 0;
}
.quote-carousel.block .carousel-content .item .position {
- font-family: var(--font-family-proxima);
- font-size: var(--body-font-size-s);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-xxs);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: var(--letter-spacing-m);
line-height: var(--line-height-m);
+ text-transform: uppercase;
}
.quote-carousel.block .controls-container {
- margin-top: 2em;
- display: flex;
+ align-items: baseline;
align-self: center;
- align-items: center;
+ bottom: 30px;
+ display: flex;
+ margin-top: 2em;
+ position: absolute;
+ right: 15px;
}
.quote-carousel.block .controls-container .pagination {
display: flex;
- min-width: 100px;
- padding: 0 16px;
- justify-content: center;
- font-size: var(--body-font-size-xs);
+ font-size: var(--body-font-size-xxs);
+ justify-content: flex-end;
+ margin-right: 16px;
+ min-width: 70px;
}
.quote-carousel.block .controls-container .pagination > span {
- flex-basis: 33%;
+ flex-basis: 25%;
+ font-size: var(--body-font-size-xxs);
text-align: center;
}
.quote-carousel.block .controls-container button {
- background-color: var(--white);
+ background-color: transparent;
border: none;
- padding: 0;
height: var(--body-font-size-m);
+ padding: 0;
+ transform: translateY(2px);
}
.quote-carousel.block .controls-container svg {
- width: var(--body-font-size-m);
+ color: var(--white);
height: var(--body-font-size-m);
+ width: var(--body-font-size-m);
}
.quote-carousel.block .controls-container [name="prev"] svg {
@@ -93,6 +109,10 @@
}
@media (min-width: 600px) {
+ .quote-carousel.block {
+ padding-top: 130px;
+ }
+
.quote-carousel.block .title {
margin-bottom: 2em;
}
@@ -106,6 +126,7 @@
@media (min-width: 900px) {
.quote-carousel.block .carousel-content .item .quote {
+ margin-bottom: 30px;
padding: 0;
text-align: center;
width: 66.66%;
diff --git a/blocks/quote-carousel/quote-carousel.js b/blocks/quote-carousel/quote-carousel.js
index fc6fa63c..bc1dc97a 100644
--- a/blocks/quote-carousel/quote-carousel.js
+++ b/blocks/quote-carousel/quote-carousel.js
@@ -80,13 +80,13 @@ export default async function decorate(block) {
// generate container for carousel controls
controlsContainer.innerHTML = `
-
-
+
+
`;
window.setTimeout(observeCarousel, 3000);
}
diff --git a/blocks/quote/quote.css b/blocks/quote/quote.css
index e4c02e36..9832623c 100644
--- a/blocks/quote/quote.css
+++ b/blocks/quote/quote.css
@@ -16,7 +16,7 @@
.quote.block .author {
margin-bottom: 0;
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--body-font-size-l);
letter-spacing: normal;
diff --git a/blocks/rows/rows.css b/blocks/rows/rows.css
index 02f26a28..15f3c5c6 100644
--- a/blocks/rows/rows.css
+++ b/blocks/rows/rows.css
@@ -17,6 +17,14 @@
padding: 0 15px;
}
+.rows.block.white-tertiary > div {
+ padding: 15px;
+}
+
+.rows.block.white-tertiary > div:nth-child(even) {
+ background: var(--tertiary-color);
+}
+
.rows.block.white-gray > div:nth-child(even) {
background: var(--light-grey);
}
diff --git a/blocks/shared/property/cards.css b/blocks/shared/property/cards.css
index 295b7a99..cca4a1f2 100644
--- a/blocks/shared/property/cards.css
+++ b/blocks/shared/property/cards.css
@@ -16,13 +16,13 @@
flex-direction: column;
scroll-snap-align: start;
flex-shrink: 0;
- width: 250px;
+ width: 80%;
max-width: 90%;
background-color: var(--white);
}
.property-list-cards .listing-tile a {
- aspect-ratio: 16/9;
+ aspect-ratio: 1.3/1;
}
.property-list-cards .listing-tile .property-no-available-image {
@@ -34,7 +34,7 @@
text-transform: uppercase;
color: var(--body-color);
line-height: var(--line-height-xs);
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-light);
align-items: center;
justify-content: center;
@@ -102,10 +102,10 @@
.property-list-cards .property-labels .property-label {
display: initial;
height: 24px;
- font-size: var(--body-font-size-xs);
+ font-size: var(--body-font-size-xxs);
padding: 0 7px;
line-height: 24px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-semibold);
margin: 5px 0 5px 5px;
align-items: center;
@@ -209,10 +209,10 @@
}
.property-list-cards .property-details .property-info-wrapper .address {
- font-family: var(--font-family-proxima);
- font-weight: var(--font-weight-normal);
- font-size: var(--body-font-size-s);
color: var(--body-color);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-xs);
+ font-weight: var(--font-weight-normal);
letter-spacing: var(--letter-spacing-xxs);
line-height: var(--line-height-s);
margin: 2px 0;
@@ -220,10 +220,10 @@
}
.property-list-cards .property-details .property-info-wrapper .specs {
- font-family: var(--font-family-proxima);
- font-weight: var(--font-weight-light);
color: var(--body-color);
- font-size: var(--body-font-size-xs);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-xxs);
+ font-weight: var(--font-weight-light);
letter-spacing: var(--letter-spacing-xxs);
line-height: normal;
padding-top: 3px;
@@ -237,7 +237,7 @@
}
.property-list-cards .property-details .property-buttons .buttons-row-flex {
- justify-content: space-around;
+ justify-content: flex-end;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
@@ -248,6 +248,12 @@
height: 24px;
position: relative;
background-color: transparent;
+ margin-left: 10px;
+}
+
+.property-list-cards .property-details .property-buttons .button-property img {
+ height: 24px;
+ width: 24px;
}
.property-list-cards .property-details .property-buttons .button-property span {
@@ -292,9 +298,9 @@
}
.property-list-cards .listing-tile .extra-info div {
- font-size: var(--body-font-size-xs);
- font-family: var(--font-family-proxima);
color: var(--dark-grey);
+ font-family: var(--font-family-primary);
+ font-size: var(--body-font-size-xxs);
letter-spacing: 0;
line-height: var(--line-height-xs);
}
@@ -308,6 +314,20 @@
display: block;
}
+@media (min-width: 900px) {
+ .property-list-cards .property-details .property-info-wrapper .address {
+ font-size: var(--body-font-size-s);
+ }
+
+ .property-list-cards .property-details .property-info-wrapper .specs {
+ font-size: var(--body-font-size-xxs);
+ }
+
+ .property-list-cards .listing-tile .extra-info div {
+ font-size: var(--body-font-size-xxs);
+ }
+}
+
@media (min-width: 1200px) {
.property-list-cards {
display: grid;
diff --git a/blocks/shared/search-countries/search-countries.css b/blocks/shared/search-countries/search-countries.css
index 5d2e7aa4..1dc2713f 100644
--- a/blocks/shared/search-countries/search-countries.css
+++ b/blocks/shared/search-countries/search-countries.css
@@ -13,7 +13,7 @@
height: 36px;
padding-left: 5px;
padding-right: 15px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: 300;
letter-spacing: .5px;
line-height: 36px;
diff --git a/blocks/toc/toc.css b/blocks/toc/toc.css
index 307c7195..c474d854 100644
--- a/blocks/toc/toc.css
+++ b/blocks/toc/toc.css
@@ -7,7 +7,7 @@
display: block;
width: 100%;
padding: 6px 15px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-s);
letter-spacing: var(--letter-spacing-m);
@@ -34,7 +34,7 @@
.toc.block.tabs > nav > ul > li > a {
display: block;
padding: 11px 15px 10px;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: var(--font-weight-normal);
font-size: var(--body-font-size-s);
letter-spacing: var(--letter-spacing-m);
diff --git a/icons/icons.svg b/icons/icons.svg
index 98553b36..845b3e6d 100644
--- a/icons/icons.svg
+++ b/icons/icons.svg
@@ -80,6 +80,11 @@
+
+ path-1
+
+
Path 9
@@ -250,6 +255,13 @@
+
+
+
+
+
diff --git a/scripts/apis/user.js b/scripts/apis/user.js
index 550d13a7..2784c8bc 100644
--- a/scripts/apis/user.js
+++ b/scripts/apis/user.js
@@ -4,7 +4,7 @@
const urlParams = new URLSearchParams(window.location.search);
export const DOMAIN = urlParams.get('env') === 'stage' ? 'ignite-staging.bhhs.com' : 'www.bhhs.com';
-const API_URL = `https://${DOMAIN}/bin/bhhs`;
+const API_URL = '/bin/bhhs';
/**
* Confirms if user is logged in or not
diff --git a/scripts/delayed.js b/scripts/delayed.js
index b5172eed..e61213ba 100644
--- a/scripts/delayed.js
+++ b/scripts/delayed.js
@@ -5,13 +5,13 @@ import { getEnvType } from './util.js';
// Core Web Vitals RUM collection
sampleRUM('cwv');
-async function loadAdobeLaunch() {
+function loadAdobeLaunch() {
const adobedtmSrc = {
dev: 'https://assets.adobedtm.com/2079c5a4620d/addee6043c9b/launch-EN41458ac9f88145ac942b876e3362c32f-development.min.js',
preview: 'https://assets.adobedtm.com/2079c5a4620d/addee6043c9b/launch-EN367ab3c0970e43a0afba6d1110494ef4-staging.min.js',
live: 'https://assets.adobedtm.com/2079c5a4620d/addee6043c9b/launch-EN8919423a46da4e859aad8cef6f514471.min.js',
};
- await loadScript(adobedtmSrc[getEnvType()], {
+ loadScript(adobedtmSrc[getEnvType()], {
type: 'text/javascript',
async: true,
});
@@ -22,5 +22,5 @@ if (!window.location.host.includes('localhost')
&& !window.location.host.includes('.hlx.page')
&& !window.location.host.includes('.aem.live')
&& !window.location.host.includes('.aem.page')) {
- await loadAdobeLaunch();
+ loadAdobeLaunch();
}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index ec18fa2a..06b553ce 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -345,7 +345,7 @@ async function loadLazy(doc) {
*/
function loadDelayed() {
// eslint-disable-next-line import/no-cycle
- window.setTimeout(() => import('./delayed.js'), 3000);
+ window.setTimeout(() => import('./delayed.js'), 4000);
// load anything that can be postponed to the latest here
}
diff --git a/styles/community-styles.css b/styles/community-styles.css
index cfab2d17..1971a8c5 100644
--- a/styles/community-styles.css
+++ b/styles/community-styles.css
@@ -67,7 +67,7 @@ main.liveby-community .hero-container .hero.block .content {
main.liveby-community .hero-container .hero.block .content h1 {
margin-left: 0;
margin-right: 0;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--heading-font-size-xxl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-l);
diff --git a/styles/fonts.css b/styles/fonts.css
index 3f4b4e84..9b29733e 100644
--- a/styles/fonts.css
+++ b/styles/fonts.css
@@ -1,98 +1,113 @@
/* below the fold CSS goes here */
@font-face {
- font-family: GeorgiaPro;
- src: url('fonts/woff2/GeorgiaPro-SemiBold.woff2') format('woff2'), url('./fonts/woff/GeorgiaPro-SemiBold.woff') format('woff'), url('./fonts/ttf/GeorgiaPro-SemiBold.ttf') format('truetype');
- font-weight: 600;
+ font-family: Manrope;
font-style: normal;
+ font-weight: 200;
font-display: swap;
+ src: url('./fonts/woff2/Manrope-ExtraLight.woff2') format('woff2'), url('Manrope-ExtraLight.ttf') format('truetype');
}
@font-face {
- font-family: GeorgiaPro;
- src: url('./fonts/woff2/GeorgiaPro-Bold.woff2') format('woff2'), url('./fonts/woff/GeorgiaPro-Bold.woff') format('woff'), url('./fonts/ttf/GeorgiaPro-Bold.ttf') format('truetype');
- font-weight: 700;
+ font-family: Manrope;
font-style: normal;
+ font-weight: 300;
font-display: swap;
+ src: url('./fonts/woff2/Manrope-Light.woff2') format('woff2'), url('Manrope-Light.ttf') format('truetype');
}
@font-face {
- font-family: ProximaNova;
- src: url('./fonts/woff2/ProximaNova-Thin.woff2') format('woff2'), url('./fonts/woff/ProximaNova-Thin.woff') format('woff') ;
- font-display: swap;
+ font-family: Manrope;
+ src: url('./fonts/woff2/Manrope-Regular.woff2') format('woff2'), url('./fonts/ttf/Manrope-Regular.ttf') format('truetype');
+ font-weight: 400;
font-style: normal;
- font-weight: 100;
- font-stretch: normal;
+ font-display: swap;
}
@font-face {
- font-family: ProximaNova;
- src: url('./fonts/woff2/ProximaNova-Light.woff2') format('woff2'), url('./fonts/woff/ProximaNova-Light.woff') format('woff'), url('./fonts/ttf/ProximaNova-Light.ttf') format('truetype');
- font-weight: 300;
+ font-family: Manrope;
+ src: url('./fonts/woff2/Manrope-Medium.woff2') format('woff2'), url('./fonts/ttf/Manrope-Medium.ttf') format('truetype');
+ font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
- font-family: ProximaNova;
- src: url('./fonts/woff2/ProximaNova-Regular.woff2') format('woff2'), url('./fonts/woff/ProximaNova-Regular.woff') format('woff'), url('./fonts/ttf/ProximaNova-Regular.ttf') format('truetype');
- font-weight: 400;
+ font-family: Manrope;
+ src: url('./fonts/woff2/Manrope-SemiBold.woff2') format('woff2'), url('./fonts/ttf/Manrope-SemiBold.ttf') format('truetype');
+ font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
- font-family: ProximaNova;
- src: url('./fonts/woff2/ProximaNova-Semibold.woff2') format('woff2'), url('./fonts/woff/ProximaNova-Semibold.woff') format('woff'), url('./fonts/ttf/ProximaNova-Semibold.ttf') format('truetype');
- font-weight: 600;
+ font-family: Manrope;
+ src: url('./fonts/woff2/Manrope-Bold.woff2') format('woff2'), url('./fonts/ttf/Manrope-Bold.ttf') format('truetype');
+ font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
- font-family: ProximaNova;
- src: url('./fonts/woff2/ProximaNova-Bold.woff2') format('woff2'), url('./fonts/woff/ProximaNova-Bold.woff') format('woff'), url('./fonts/ttf/ProximaNova-Bold.ttf') format('truetype');
- font-weight: 700;
+ font-family: Manrope;
+ src: url('./fonts/woff2/Manrope-ExtraBold.woff2') format('woff2'), url('./fonts/ttf/Manrope-ExtraBold.ttf') format('truetype');
+ font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
- font-family: FontAwesome;
- src: url("./fonts/woff2/fontawesome-webfont.woff2") format("woff2"), url("./fonts/woff/fontawesome-webfont.woff") format("woff"), url("./fonts/ttf/fontawesome-webfont.ttf") format("truetype"), url("./fonts/svg/fontawesome-webfont.svg?#fontawesomeregular") format("svg");
- font-weight: normal;
+ font-family: Marcellus;
+ src: url('./fonts/ttf/Marcellus-Regular.ttf') format('truetype');
+ font-weight: 400;
font-style: normal;
font-display: swap;
}
-/* below the fold CSS goes here */
-@font-face{
- font-family:Gotham;
- src:url("fonts/woff2/Gotham-Extra-Light.woff2") format("woff2"),
- url("fonts/woff/Gotham-Extra-Light.woff") format("woff");
- font-weight:200;
- font-style:normal
+@font-face {
+ font-family: Montserrat;
+ font-style: normal;
+ font-weight: 200;
+ font-display: swap;
+ src: url('Montserrat-ExtraLight.ttf') format('truetype');
}
@font-face {
- font-family: Gotham;
- src: url("fonts/woff2/Gotham-Light.woff2") format("woff2"),url("fonts/woff/Gotham-Light.woff") format("woff");
+ font-family: Montserrat;
+ font-style: normal;
font-weight: 300;
- font-style: normal
+ font-display: swap;
+ src: url('Montserrat-Light.ttf') format('truetype');
}
@font-face {
- font-family: Gotham;
- src: url("fonts/woff2/Gotham-Regular.woff2") format("woff2"),
- url("fonts/woff/Gotham-Regular.woff") format("woff");
+ font-family: Montserrat;
+ font-style: normal;
font-weight: 400;
- font-style: normal
+ font-display: swap;
+ src: url('./fonts/ttf/Montserrat-Regular.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: Montserrat;
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('Montserrat-Medium.ttf') format('truetype');
}
-@font-face{
- font-family:Gotham;
- src:url("./fonts/woff2/Gotham-Bold_Web.woff2") format("woff2"),
- url("./fonts/woff/Gotham-Bold_Web.woff") format("woff");
- font-weight:700;
- font-style:normal
+@font-face {
+ font-family: Montserrat;
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('Montserrat-Bold.ttf') format('truetype');
}
+
+@font-face {
+ font-family: FontAwesome;
+ src: url("./fonts/woff2/fontawesome-webfont.woff2") format("woff2"), url("./fonts/woff/fontawesome-webfont.woff") format("woff"), url("./fonts/ttf/fontawesome-webfont.ttf") format("truetype"), url("./fonts/svg/fontawesome-webfont.svg?#fontawesomeregular") format("svg");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
\ No newline at end of file
diff --git a/styles/fonts/ttf/GeorgiaPro-Bold.ttf b/styles/fonts/ttf/GeorgiaPro-Bold.ttf
deleted file mode 100644
index 82e7d2c3..00000000
Binary files a/styles/fonts/ttf/GeorgiaPro-Bold.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/GeorgiaPro-Regular.ttf b/styles/fonts/ttf/GeorgiaPro-Regular.ttf
deleted file mode 100644
index 197f2db0..00000000
Binary files a/styles/fonts/ttf/GeorgiaPro-Regular.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/GeorgiaPro-SemiBold.ttf b/styles/fonts/ttf/GeorgiaPro-SemiBold.ttf
deleted file mode 100644
index 4644f9a7..00000000
Binary files a/styles/fonts/ttf/GeorgiaPro-SemiBold.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/Manrope-Bold.ttf b/styles/fonts/ttf/Manrope-Bold.ttf
new file mode 100644
index 00000000..98c1c3d5
Binary files /dev/null and b/styles/fonts/ttf/Manrope-Bold.ttf differ
diff --git a/styles/fonts/ttf/Manrope-ExtraBold.ttf b/styles/fonts/ttf/Manrope-ExtraBold.ttf
new file mode 100644
index 00000000..0192c9a2
Binary files /dev/null and b/styles/fonts/ttf/Manrope-ExtraBold.ttf differ
diff --git a/styles/fonts/ttf/Manrope-ExtraLight.ttf b/styles/fonts/ttf/Manrope-ExtraLight.ttf
new file mode 100644
index 00000000..cf7cea38
Binary files /dev/null and b/styles/fonts/ttf/Manrope-ExtraLight.ttf differ
diff --git a/styles/fonts/ttf/Manrope-Light.ttf b/styles/fonts/ttf/Manrope-Light.ttf
new file mode 100644
index 00000000..05ab7534
Binary files /dev/null and b/styles/fonts/ttf/Manrope-Light.ttf differ
diff --git a/styles/fonts/ttf/Manrope-Medium.ttf b/styles/fonts/ttf/Manrope-Medium.ttf
new file mode 100644
index 00000000..5eda9ec9
Binary files /dev/null and b/styles/fonts/ttf/Manrope-Medium.ttf differ
diff --git a/styles/fonts/ttf/Manrope-Regular.ttf b/styles/fonts/ttf/Manrope-Regular.ttf
new file mode 100644
index 00000000..1a072330
Binary files /dev/null and b/styles/fonts/ttf/Manrope-Regular.ttf differ
diff --git a/styles/fonts/ttf/Manrope-SemiBold.ttf b/styles/fonts/ttf/Manrope-SemiBold.ttf
new file mode 100644
index 00000000..c556d428
Binary files /dev/null and b/styles/fonts/ttf/Manrope-SemiBold.ttf differ
diff --git a/styles/fonts/ttf/Marcellus-Regular.ttf b/styles/fonts/ttf/Marcellus-Regular.ttf
new file mode 100644
index 00000000..7b585a44
Binary files /dev/null and b/styles/fonts/ttf/Marcellus-Regular.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-Bold.ttf b/styles/fonts/ttf/Montserrat-Bold.ttf
new file mode 100644
index 00000000..0927b813
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-Bold.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-ExtraLight.ttf b/styles/fonts/ttf/Montserrat-ExtraLight.ttf
new file mode 100644
index 00000000..8aa56c17
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-ExtraLight.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-Light.ttf b/styles/fonts/ttf/Montserrat-Light.ttf
new file mode 100644
index 00000000..fd787a81
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-Light.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-Medium.ttf b/styles/fonts/ttf/Montserrat-Medium.ttf
new file mode 100644
index 00000000..4012225c
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-Medium.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-Regular.ttf b/styles/fonts/ttf/Montserrat-Regular.ttf
new file mode 100644
index 00000000..f4a266dd
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-Regular.ttf differ
diff --git a/styles/fonts/ttf/Montserrat-Thin.ttf b/styles/fonts/ttf/Montserrat-Thin.ttf
new file mode 100644
index 00000000..7d085bba
Binary files /dev/null and b/styles/fonts/ttf/Montserrat-Thin.ttf differ
diff --git a/styles/fonts/ttf/ProximaNova-Bold.ttf b/styles/fonts/ttf/ProximaNova-Bold.ttf
deleted file mode 100644
index 0cc21c76..00000000
Binary files a/styles/fonts/ttf/ProximaNova-Bold.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/ProximaNova-Light.ttf b/styles/fonts/ttf/ProximaNova-Light.ttf
deleted file mode 100644
index d6143b62..00000000
Binary files a/styles/fonts/ttf/ProximaNova-Light.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/ProximaNova-Regular.ttf b/styles/fonts/ttf/ProximaNova-Regular.ttf
deleted file mode 100644
index 7ba3fafa..00000000
Binary files a/styles/fonts/ttf/ProximaNova-Regular.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/ProximaNova-Semibold.ttf b/styles/fonts/ttf/ProximaNova-Semibold.ttf
deleted file mode 100644
index 35f373b7..00000000
Binary files a/styles/fonts/ttf/ProximaNova-Semibold.ttf and /dev/null differ
diff --git a/styles/fonts/ttf/fontawesome-webfont.ttf b/styles/fonts/ttf/fontawesome-webfont.ttf
deleted file mode 100644
index 35acda2f..00000000
Binary files a/styles/fonts/ttf/fontawesome-webfont.ttf and /dev/null differ
diff --git a/styles/fonts/woff2/GeorgiaPro-Bold.woff2 b/styles/fonts/woff2/GeorgiaPro-Bold.woff2
deleted file mode 100644
index 11336cb4..00000000
Binary files a/styles/fonts/woff2/GeorgiaPro-Bold.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/GeorgiaPro-Regular.woff2 b/styles/fonts/woff2/GeorgiaPro-Regular.woff2
deleted file mode 100644
index f5c6bfa7..00000000
Binary files a/styles/fonts/woff2/GeorgiaPro-Regular.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/GeorgiaPro-SemiBold.woff2 b/styles/fonts/woff2/GeorgiaPro-SemiBold.woff2
deleted file mode 100644
index b588fbb0..00000000
Binary files a/styles/fonts/woff2/GeorgiaPro-SemiBold.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/Gotham-Bold_Web.woff2 b/styles/fonts/woff2/Gotham-Bold_Web.woff2
deleted file mode 100644
index a97d31fe..00000000
Binary files a/styles/fonts/woff2/Gotham-Bold_Web.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/Gotham-Extra-Light.woff2 b/styles/fonts/woff2/Gotham-Extra-Light.woff2
deleted file mode 100644
index 2324bb55..00000000
Binary files a/styles/fonts/woff2/Gotham-Extra-Light.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/Gotham-Light.woff2 b/styles/fonts/woff2/Gotham-Light.woff2
deleted file mode 100644
index 7535a218..00000000
Binary files a/styles/fonts/woff2/Gotham-Light.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/Gotham-Regular.woff2 b/styles/fonts/woff2/Gotham-Regular.woff2
deleted file mode 100644
index 6fd3b917..00000000
Binary files a/styles/fonts/woff2/Gotham-Regular.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/Manrope-Bold.woff2 b/styles/fonts/woff2/Manrope-Bold.woff2
new file mode 100644
index 00000000..42f7ddab
Binary files /dev/null and b/styles/fonts/woff2/Manrope-Bold.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-ExtraBold.woff2 b/styles/fonts/woff2/Manrope-ExtraBold.woff2
new file mode 100644
index 00000000..8895cb17
Binary files /dev/null and b/styles/fonts/woff2/Manrope-ExtraBold.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-ExtraLight.woff2 b/styles/fonts/woff2/Manrope-ExtraLight.woff2
new file mode 100644
index 00000000..cc3cef47
Binary files /dev/null and b/styles/fonts/woff2/Manrope-ExtraLight.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-Light.woff2 b/styles/fonts/woff2/Manrope-Light.woff2
new file mode 100644
index 00000000..da449ca0
Binary files /dev/null and b/styles/fonts/woff2/Manrope-Light.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-Medium.woff2 b/styles/fonts/woff2/Manrope-Medium.woff2
new file mode 100644
index 00000000..33c2ad6d
Binary files /dev/null and b/styles/fonts/woff2/Manrope-Medium.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-Regular.woff2 b/styles/fonts/woff2/Manrope-Regular.woff2
new file mode 100644
index 00000000..7b618d24
Binary files /dev/null and b/styles/fonts/woff2/Manrope-Regular.woff2 differ
diff --git a/styles/fonts/woff2/Manrope-SemiBold.woff2 b/styles/fonts/woff2/Manrope-SemiBold.woff2
new file mode 100644
index 00000000..8a4559f0
Binary files /dev/null and b/styles/fonts/woff2/Manrope-SemiBold.woff2 differ
diff --git a/styles/fonts/woff2/ProximaNova-Bold.woff2 b/styles/fonts/woff2/ProximaNova-Bold.woff2
deleted file mode 100644
index ee760d26..00000000
Binary files a/styles/fonts/woff2/ProximaNova-Bold.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/ProximaNova-Light.woff2 b/styles/fonts/woff2/ProximaNova-Light.woff2
deleted file mode 100644
index 5b070339..00000000
Binary files a/styles/fonts/woff2/ProximaNova-Light.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/ProximaNova-Regular.woff2 b/styles/fonts/woff2/ProximaNova-Regular.woff2
deleted file mode 100644
index e40db912..00000000
Binary files a/styles/fonts/woff2/ProximaNova-Regular.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/ProximaNova-Semibold.woff2 b/styles/fonts/woff2/ProximaNova-Semibold.woff2
deleted file mode 100644
index d1b48bc6..00000000
Binary files a/styles/fonts/woff2/ProximaNova-Semibold.woff2 and /dev/null differ
diff --git a/styles/fonts/woff2/ProximaNova-Thin.woff2 b/styles/fonts/woff2/ProximaNova-Thin.woff2
deleted file mode 100644
index 43f3ad67..00000000
Binary files a/styles/fonts/woff2/ProximaNova-Thin.woff2 and /dev/null differ
diff --git a/styles/styles.css b/styles/styles.css
index 3393899a..aa09cbc9 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -14,7 +14,17 @@
:root {
/* Colors */
- --primary-color: #552448;
+ --primary-color: #670038;
+ --primary-light: #c299af;
+ --primary-accent: #ece3e5;
+ --secondary-color: #72595e;
+ --secondary-light: #aa979c;
+ --secondary-accent: #c7bdbf;
+ --secondary-medium-grey: #e3dedf;
+ --secondary-light-grey: #f7f5f5;
+ --tertiary-color: #f5f1f2;
+ --luxury-grey: #a7a9b4;
+ --luxury-dark-grey: #63666f;
--primary-color-lighten: rgba(98 98 121 / 12.5%);
--primary-color-svg-filter: invert(18%) sepia(17%) saturate(1944%) hue-rotate(264deg) brightness(93%) contrast(95%);
--color-tertiary: #eae3d4;
@@ -29,6 +39,7 @@
--success: #28a745;
--error: #d3636a;
--error-highlight: #f9e1e2;
+ --input-placeholder: #7f7a7a;
/* Blog Colors (only?) */
@@ -45,9 +56,9 @@
--transparent: #FFFFFFE6;
/* Fonts */
- --font-family-georgia: 'GeorgiaPro', 'GeorgiaPro Fallback', 'Times New Roman', serif;
- --font-family-proxima: 'ProximaNova', 'ProximaNova Fallback', 'Arial', sans-serif;
- --font-family-gotham: 'Gotham', 'Gotham Fallback', 'Arial', sans-serif;
+ --font-family-primary: 'Manrope', 'Manrope Fallback', 'Arial', sans-serif;
+ --font-family-secondary: 'Marcellus', 'Marcellus Fallback', 'Times New Roman', serif;
+ --font-family-luxury: 'Montserrat', 'Montserrat Fallback', 'Arial', sans-serif;
--font-family-fontawesome: 'FontAwesome';
--font-weight-thin: 100;
--font-weight-light: 300;
@@ -56,24 +67,25 @@
--font-weight-bold: 700;
/* Headings */
- --heading-font-size-xxxxl: 50px;
- --heading-font-size-xxxl: 48px;
- --heading-font-size-xxl: 40px;
- --heading-font-size-xl: 36px;
- --heading-font-size-l: 30px;
- --heading-font-size-m: 24px;
- --heading-font-size-s: 20px;
- --heading-font-size-xs: 16px;
+ --heading-font-size-xxxxl: 76px;
+ --heading-font-size-xxxl: 57px;
+ --heading-font-size-xxl: 43px;
+ --heading-font-size-xl: 32px;
+ --heading-font-size-l: 24px;
+ --heading-font-size-m: 18px;
+ --heading-font-size-s: 16px;
+ --heading-font-size-xs: 12px;
+ --heading-font-size-xxs: 10px;
/* Body */
--body-font-size-xxxl: 40px;
- --body-font-size-xxl: 32px;
- --body-font-size-xl: 26px;
+ --body-font-size-xxl: 36px;
+ --body-font-size-xl: 24px;
--body-font-size-l: 20px;
- --body-font-size-m: 16px;
- --body-font-size-s: 14px;
- --body-font-size-xs: 12px;
- --body-font-size-xxs: 10px;
+ --body-font-size-m: 18px;
+ --body-font-size-s: 16px;
+ --body-font-size-xs: 14px;
+ --body-font-size-xxs: 12px;
/* Line heights */
--line-height-xs : 1.15em;
@@ -84,7 +96,8 @@
--line-height-xxl: 2.9em;
/* Common spacing values */
- --letter-spacing-xxs : 0.015em;
+ --letter-spacing-xxxs : 0.015em;
+ --letter-spacing-xxs : 0.03em;
--letter-spacing-xs : 0.04em;
--letter-spacing-s : 0.06em;
--letter-spacing-reg: 0.07em;
@@ -106,7 +119,7 @@
*, *::before, *::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-weight: 400;
font-size: var(--body-font-size-m);
text-align: left;
@@ -127,27 +140,27 @@ body.appear {
}
h2 {
- font-family: var(--font-family-georgia);
- font-size: var(--heading-font-size-m);
- font-weight: var(--font-weight-bold);
+ font-family: var(--font-family-secondary);
+ font-size: var(--heading-font-size-l);
+ font-weight: var(--font-weight-normal);
line-height: var(--line-height-m);
}
h3 {
- font-family: var(--font-family-georgia);
+ font-family: var(--font-family-primary);
font-size: var(--heading-font-size-m);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-m);
}
h4 {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--heading-font-size-xs);
font-weight: var(--font-weight-semibold);
}
h5 {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--heading-font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-xs);
@@ -155,7 +168,7 @@ h5 {
}
p, span, input {
- font-family: var(--font-family-proxima);
+ font-family: var(--font-family-primary);
font-size: var(--body-font-size-m);
font-weight: var(--font-weight-normal);
letter-spacing: var(--letter-spacing-reg);
@@ -272,6 +285,10 @@ main .section.grey-background {
background: var(--light-grey);
}
+main .section.tertiary-background {
+ background: var(--tertiary-color);
+}
+
main .section.white-background {
background: var(--white);
}
@@ -280,6 +297,10 @@ main .section.top-border {
border-top: 1px solid var(--body-color);
}
+main .section.tertiary-background.top-border {
+ border-top: 1px solid var(--secondary-accent);
+}
+
main .section.padding {
padding-top: 3em;
padding-bottom: 3em;
@@ -315,7 +336,7 @@ main .section.center .default-content-wrapper p {
}
/* stylelint-disable-next-line no-descending-specificity */
-main .section .default-content-wrapper h2 {
+content-wrapper h2 {
margin-bottom: .5em;
}
@@ -369,20 +390,32 @@ main .section .default-content-wrapper picture img {
}
.button-container a {
+ background-color: transparent;
+ border: 1px solid var(--primary-color);
+ color: var(--primary-color);
+ cursor: pointer;
display: inline-block;
- padding: .75em 1.5em;
- font-family: var(--font-family-proxima);
- font-size: var(--body-font-size-s);
- font-weight: var(--font-weight-normal);
- letter-spacing:var(--letter-spacing-s);
- line-height: var(--line-height-s);
- text-transform: uppercase;
- text-decoration: none;
+ font-family: var(--font-family-primary);
+ font-size: var(--heading-font-size-s);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: var(--letter-spacing-m);
+ line-height: 1;
+ padding: 10px 24px;
text-align: center;
- color: var(--body-color);
- border: 1px solid var(--body-color);
- background-color: var(--white);
- cursor: pointer;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.button-container a:hover {
+ background-color: var(--primary-color);
+ color: var(--primary-light);
+}
+
+.button-container a:focus {
+ background-color: var(--primary-color);
+ color: var(--secondary-color);
+ outline: var(--primary-color) solid 2px;
+ outline-offset: 3px;
}
main .section.button-primary-color .button-container a {
@@ -397,6 +430,17 @@ main .section.button-primary-color .button-container a:hover {
box-shadow: none;
}
+main .section.banner {
+ margin-bottom: 0;
+}
+
+main .section.banner .default-content-wrapper {
+ max-width: var(--wide-page-width);
+ margin: 0 auto;
+ padding: 16px;
+ position: relative;
+}
+
.text-up {
text-transform: uppercase;
}
@@ -490,6 +534,12 @@ form button[type="submit"]:hover {
main .section.page-width-two-thirds {
max-width: 67%;
}
+
+ main .section.banner .default-content-wrapper .button-container {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ }
}
@media screen and (min-width: 1200px) {
@@ -499,122 +549,144 @@ form button[type="submit"]:hover {
}
@font-face {
- font-family: 'GeorgiaPro Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 600;
- src: local('Times New Roman Bold');
- ascent-override: 82.81%;
- descent-override: 19.80%;
+ font-weight: 200;
+ src: local('Arial');
+ ascent-override: 106.45%;
+ descent-override: 29.96%;
line-gap-override: 0.00%;
- size-adjust: 110.73%;
+ size-adjust: 100.14%;
}
@font-face {
- font-family: 'GeorgiaPro Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 700;
- src: local('Times New Roman Bold');
- ascent-override: 76.85%;
- descent-override: 18.37%;
+ font-weight: 300;
+ src: local('Arial');
+ ascent-override: 104.55%;
+ descent-override: 29.42%;
line-gap-override: 0.00%;
- size-adjust: 119.32%;
+ size-adjust: 101.96%;
}
@font-face {
- font-family: 'ProximaNova Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 100;
+ font-weight: 400;
src: local('Arial');
- ascent-override: 104.56%;
- descent-override: 38.57%;
+ ascent-override: 102.74%;
+ descent-override: 28.91%;
line-gap-override: 0.00%;
- size-adjust: 103.19%;
+ size-adjust: 103.76%;
}
@font-face {
- font-family: 'ProximaNova Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 300;
+ font-weight: 500;
src: local('Arial');
- ascent-override: 80.85%;
- descent-override: 21.49%;
+ ascent-override: 100.97%;
+ descent-override: 28.41%;
line-gap-override: 0.00%;
- size-adjust: 97.72%;
+ size-adjust: 105.58%;
}
@font-face {
- font-family: 'ProximaNova Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 400;
+ font-weight: 600;
src: local('Arial');
- ascent-override: 79.64%;
- descent-override: 21.17%;
+ ascent-override: 99.26%;
+ descent-override: 27.93%;
line-gap-override: 0.00%;
- size-adjust: 99.19%;
+ size-adjust: 107.40%;
}
@font-face {
- font-family: 'ProximaNova Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 600;
- src: local('Arial Bold');
- ascent-override: 84.49%;
- descent-override: 22.46%;
+ font-weight: 700;
+ src: local('Arial');
+ ascent-override: 97.62%;
+ descent-override: 27.47%;
line-gap-override: 0.00%;
- size-adjust: 93.50%;
+ size-adjust: 109.20%;
}
@font-face {
- font-family: 'ProximaNova Fallback';
+ font-family: 'Manrope Fallback';
font-style: normal;
- font-weight: 700;
- src: local('Arial Bold');
- ascent-override: 83.31%;
- descent-override: 22.15%;
+ font-weight: 800;
+ src: local('Arial');
+ ascent-override: 96.02%;
+ descent-override: 27.02%;
+ line-gap-override: 0.00%;
+ size-adjust: 111.02%;
+}
+
+@font-face {
+ font-family: 'Marcellus Fallback';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Arial');
+ ascent-override: 95.27%;
+ descent-override: 27.36%;
line-gap-override: 0.00%;
- size-adjust: 94.82%;
+ size-adjust: 102.25%;
}
@font-face {
- font-family: 'Gotham Fallback';
+ font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 200;
src: local('Arial');
- ascent-override: 82.60%;
- descent-override: 20.65%;
+ ascent-override: 87.08%;
+ descent-override: 22.58%;
line-gap-override: 0.00%;
- size-adjust: 116.22%;
+ size-adjust: 111.17%;
}
@font-face {
- font-family: 'Gotham Fallback';
+ font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 300;
src: local('Arial');
- ascent-override: 82.60%;
- descent-override: 20.65%;
+ ascent-override: 86.13%;
+ descent-override: 22.33%;
line-gap-override: 0.00%;
- size-adjust: 116.22%;
+ size-adjust: 112.39%;
}
@font-face {
- font-family: 'Gotham Fallback';
+ font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 400;
src: local('Arial');
- ascent-override: 82.60%;
- descent-override: 20.65%;
+ ascent-override: 84.97%;
+ descent-override: 22.03%;
line-gap-override: 0.00%;
- size-adjust: 116.22%;
+ size-adjust: 113.92%;
}
@font-face {
- font-family: 'Gotham Fallback';
+ font-family: 'Montserrat Fallback';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Arial');
+ ascent-override: 83.59%;
+ descent-override: 21.67%;
+ line-gap-override: 0.00%;
+ size-adjust: 115.80%;
+}
+
+@font-face {
+ font-family: 'Montserrat Fallback';
font-style: normal;
font-weight: 700;
- src: local('Arial Bold');
- ascent-override: 89.37%;
- descent-override: 22.34%;
+ src: local('Arial');
+ ascent-override: 80.59%;
+ descent-override: 20.90%;
line-gap-override: 0.00%;
- size-adjust: 107.42%;
+ size-adjust: 120.11%;
}