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%; }