Merge pull request #215 from hlxsites/luxury-updates

Luxury brand updates

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);
+    }
 }

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,15 +20,42 @@
     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;
     letter-spacing: var(--letter-spacing-l);
     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%;
+    }
+}

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

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);

blocks/hero-slides/luxury-collection-template.css

@@ -0,0 +1,3 @@
+.luxury-collection .hero-slides .slide .row .logo img {
+    width: 100%;
+}

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,22 +18,51 @@
     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;
     letter-spacing: var(--letter-spacing-m);
     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);

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;