From e2a19df9df1892dae586b6ca633bdbedc21c0bef Mon Sep 17 00:00:00 2001 From: Jake Schoolmeesters Date: Fri, 12 Apr 2024 13:22:51 -0500 Subject: [PATCH] luxury-updates: updating the styles for the luxury brand page to match current sites --- blocks/columns/luxury-collection-template.css | 6 ++- .../luxury-collection-template.css | 50 +++++++++++++++++-- blocks/footer/luxury-collection-template.css | 8 ++- blocks/hero-slides/hero-slides.css | 2 + .../luxury-collection-template.css | 3 ++ .../luxury-collection-template.css | 39 +++++++++++++-- styles/styles.css | 2 + 7 files changed, 98 insertions(+), 12 deletions(-) create mode 100644 blocks/hero-slides/luxury-collection-template.css diff --git a/blocks/columns/luxury-collection-template.css b/blocks/columns/luxury-collection-template.css index 764b3d94..ffdbab67 100644 --- a/blocks/columns/luxury-collection-template.css +++ b/blocks/columns/luxury-collection-template.css @@ -5,7 +5,7 @@ .luxury-collection .columns.block h2 { font-family: var(--font-family-luxury); font-weight: var(--font-weight-normal); - font-size:var(--heading-font-size-xxxxl); + font-size:var(--heading-font-size-xl); line-height: var(--line-height-xs); letter-spacing: 0; margin-bottom: 25px; @@ -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/luxury-collection-template.css b/blocks/floating-images/luxury-collection-template.css index eff03b74..6f222050 100644 --- a/blocks/floating-images/luxury-collection-template.css +++ b/blocks/floating-images/luxury-collection-template.css @@ -4,6 +4,8 @@ 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,11 +73,12 @@ font-size: var(--body-font-size-xs) } -.luxury-collection .block.floating-images h2 { +.luxury-collection .block.floating-images .content h2 { + color: var(--white); font-family: var(--font-family-luxury); - font-weight: 300; - font-size:50px; + font-size: var(--heading-font-size-xxl); line-height: 56px; + padding: 0; } .luxury-collection .block.floating-images h3 { @@ -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/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/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/property-listing/luxury-collection-template.css b/blocks/property-listing/luxury-collection-template.css index 46da4a30..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,15 +57,12 @@ 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); diff --git a/styles/styles.css b/styles/styles.css index da487666..aa9c0793 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -23,6 +23,8 @@ --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;