@undrr/undrr-mangrove 1.8.2 → 2.0.0-alpha.2

package/scss/Components/Hero/hero.scss

@@ -7,67 +7,154 @@
 //   margin: 0 auto;
 // }
 .mg-hero {
+  --mg-hero-cta-color: var(--mg-color-hero);
+  --mg-hero-gradient-color: var(--mg-color-blue-900);
+  --mg-hero-gradient-start: var(--mg-hero-gradient-start-opacity);
+  --mg-hero-gradient-middle: var(--mg-hero-gradient-middle-opacity);
+  --mg-hero-gradient-end: var(--mg-hero-gradient-end-opacity);
+
   background-size: cover;
   background-position: center;
-  color: $mg-color-neutral-0;
+  color: rgb(var(--mg-color-neutral-0));
   display: grid;
   grid-template-columns: 1fr;
   position: relative;
   margin-left: calc(50% - (50vw)); // to expand out of the parent container
-  padding-left: $mg-spacing-100;
+  padding-left: var(--mg-spacing-100);
   width: 100vw;
 
+  &:not(.mg-hero--split)::before {
+    background: linear-gradient(
+      90deg,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-start)) 0%,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-middle)) 48%,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-end)) 100%
+    );
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+
+    @media (max-width: $mg-breakpoint-tablet) {
+      background: linear-gradient(
+        0deg,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-start)) 0%,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-middle)) 68%,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-end)) 100%
+      );
+    }
+  }
+
   @media (min-width: $mg-breakpoint-tablet) {
     aspect-ratio: 16 / 4; // we use 16:4, which is closer to the real crop ratio
-    padding-left: calc(50vw - calc($mg-breakpoint-desktop / 2)); // to keep the overlay fixed
+    padding-left: calc(
+      50vw - calc($mg-breakpoint-desktop / 2)
+    ); // to keep the overlay fixed
   }
 
   @media (min-width: $mg-breakpoint-desktop-wide) {
-    padding-left: calc(50vw - calc($mg-breakpoint-desktop-wide / 2)); // to keep the overlay fixed
+    padding-left: calc(
+      50vw - calc($mg-breakpoint-desktop-wide / 2)
+    ); // to keep the overlay fixed
+  }
+
+  &--contained {
+    margin-inline: 0;
+    padding-inline: 0;
+    width: 100%;
+  }
+
+  &--immersive:not(.mg-hero--split) {
+    align-items: end;
+    aspect-ratio: unset;
+    min-height: clamp(mg-rem(496), 62vw, mg-rem(688));
+
+    .mg-hero__overlay {
+      align-items: end;
+      margin: 0;
+      max-width: mg-rem(768);
+      padding: clamp(mg-rem(32), 6vw, mg-rem(80));
+    }
+
+    .mg-hero__title,
+    .mg-hero__title .text-xxl {
+      font-size: clamp(mg-rem(38), 6vw, mg-rem(80));
+      letter-spacing: -0.045em;
+      line-height: 0.98;
+      max-width: 12ch;
+    }
+
+    .mg-hero__summaryText {
+      font-size: clamp(mg-rem(16), 1.8vw, mg-rem(21));
+      line-height: 1.55;
+      max-width: 37rem;
+    }
   }
 
   // Button overrides
   a.mg-button,
   a.mg-button:hover,
   a.mg-button:visited {
-    color: $mg-color-hero;
+    color: rgb(var(--mg-color-hero));
   }
 
   a.mg-button-primary {
-    background-color: $mg-color-neutral-0;
+    background-color: rgb(var(--mg-color-neutral-0));
   }
 
-  a.mg-button-secondary,
-  a.mg-button-secondary:hover,
-  a.mg-button-secondary:visited {
-    background-color: $mg-color-hero-button-secondary-background;
-    color: $mg-color-hero-button-secondary-color;
-    border-color: $mg-border-color-hero-button-secondary;
+  // Editorial link-style CTA used by CtaButton.
+  a.mg-button.mg-button-cta,
+  a.mg-button.mg-button-cta:hover,
+  a.mg-button.mg-button-cta:visited {
+    background: transparent;
+    border-color: transparent;
+    color: rgb(var(--mg-color-neutral-0));
+
+    &::after {
+      background: rgb(var(--mg-color-neutral-0));
+      color: rgb(var(--mg-hero-cta-color));
+    }
+  }
+
+  a.mg-button-secondary:not(.mg-button-cta),
+  a.mg-button-secondary:not(.mg-button-cta):hover,
+  a.mg-button-secondary:not(.mg-button-cta):visited {
+    background-color: var(--mg-color-hero-button-secondary-background);
+    color: rgb(var(--mg-color-hero-button-secondary-color));
+    border-color: rgb(var(--mg-border-color-hero-button-secondary));
   }
 
   a.mg-button:focus-visible {
-    box-shadow: 0 0 0 2px $mg-color-neutral-0;
-    outline: 2px solid $mg-color-neutral-0;
+    box-shadow: 0 0 0 2px rgb(var(--mg-color-neutral-0));
+    outline: 2px solid rgb(var(--mg-color-neutral-0));
     outline-offset: 2px;
   }
 
   &__overlay {
     align-items: center;
-    background-color: rgba($mg-color-hero, $mg-opacity-hero);
+    background: transparent;
     display: grid;
-    margin: $mg-spacing-hero-overlay;
-    max-width: $mg-hero-overlay-max-width;
-    padding: $mg-hero-overlay-padding;
+    margin: var(--mg-spacing-hero-overlay);
+    max-width: var(--mg-hero-overlay-max-width);
+    padding: var(--mg-hero-overlay-padding);
+    position: relative;
+    z-index: 1;
   }
 
   &__content {
     display: grid;
-    margin-top: $mg-spacing-25;
+    margin-top: var(--mg-spacing-25);
     row-gap: mg-rem(10);
   }
 
+  &__logo {
+    height: auto;
+    margin-bottom: clamp(var(--mg-spacing-300), 10vw, var(--mg-spacing-800));
+    width: min(mg-rem(208), 52vw);
+  }
+
   &__meta {
-    padding-bottom: $mg-spacing-25;
+    padding-bottom: var(--mg-spacing-25);
 
     &.meta-detail {
       display: flex;
@@ -80,8 +167,8 @@
     font-family: $mg-font-family-headings;
     font-size: $mg-font-tag;
     font-weight: bold;
-    margin-right: $mg-spacing-25;
-    padding: $mg-spacing-25 0;
+    margin-right: var(--mg-spacing-25);
+    padding: var(--mg-spacing-25) 0;
 
     &.detail {
       font-weight: normal;
@@ -92,23 +179,25 @@
   a,
   a:hover,
   a:visited {
-    color: $mg-color-neutral-0;
+    color: rgb(var(--mg-color-neutral-0));
   }
 
   // Title styles (for both <h1> and <a>)
   &__title {
-    color: $mg-color-hero-title;
-    margin-bottom: $mg-spacing-25;
+    color: rgb(var(--mg-color-hero-title));
+    margin-bottom: var(--mg-spacing-25);
     display: inline-block;
     font-family: $mg-font-family-headings;
     font-weight: bold;
     font-size: $mg-font-size-600;
     line-height: 1.2;
+    max-width: 18ch;
+    text-wrap: balance;
 
     a,
     a:hover,
     a:visited {
-      color: $mg-color-hero-title;
+      color: rgb(var(--mg-color-hero-title));
     }
 
     // General text styles for larger text
@@ -135,7 +224,7 @@
     h4,
     h5,
     h6 {
-      color: $mg-color-hero-title;
+      color: rgb(var(--mg-color-hero-title));
       font-weight: bold;
       font-size: $mg-font-size-600;
 
@@ -156,19 +245,54 @@
         }
       }
     }
+
+    // Preserve heading typography when CMS content is wrapped in the inline
+    // span used by HeroTitle; host-page span rules must not shrink the title.
+    h1 > span,
+    h2 > span,
+    h3 > span,
+    h4 > span,
+    h5 > span,
+    h6 > span,
+    a > span {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+    }
   }
 
   &__summaryText {
     @include mg-typography("small");
 
-    margin-bottom: $mg-spacing-25;
+    margin-bottom: var(--mg-spacing-25);
+    max-width: 62ch;
+    text-wrap: pretty;
   }
 }
 
 .mg-hero__buttons {
-  padding-top: $mg-spacing-75;
   display: flex;
-  padding-bottom: $mg-spacing-50;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-100) var(--mg-spacing-250);
+  padding-bottom: var(--mg-spacing-50);
+  padding-top: var(--mg-spacing-75);
+
+  @media (max-width: $mg-breakpoint-tablet) {
+    align-items: flex-start;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .mg-button.mg-button-cta {
+      inline-size: fit-content;
+      max-inline-size: 100%;
+    }
+  }
+
+  .mg-button + .mg-button {
+    margin-inline-start: 0;
+  }
 }
 
 // Child variant
@@ -179,29 +303,32 @@
 }
 
 // Stylistic variants
-$variant-colours: (
-  "secondary": $mg-color-hero--secondary,
-  "tertiary": $mg-color-hero--tertiary,
-  "quaternary": $mg-color-hero--quaternary,
+$variant-colour-props: (
+  "secondary": "--mg-color-orange-800",
+  "tertiary": "--mg-color-neutral-900",
+  "quaternary": "--mg-color-red-800",
 );
 
-@each $name, $color in $variant-colours {
-  .mg-hero--#{$name} .mg-hero__overlay {
-    background-color: rgba($color, $mg-opacity-hero);
+@each $name, $prop in $variant-colour-props {
+  .mg-hero--#{$name} {
+    --mg-hero-cta-color: var(#{$prop});
+    --mg-hero-gradient-color: var(#{$prop});
 
-    a.mg-button,
-    a.mg-button:hover,
-    a.mg-button:visited {
-      color: #{$color};
-    }
+    .mg-hero__overlay {
+      a.mg-button:not(.mg-button-cta),
+      a.mg-button:not(.mg-button-cta):hover,
+      a.mg-button:not(.mg-button-cta):visited {
+        color: rgb(var(#{$prop}));
+      }
 
-    // Preserve secondary button's dedicated tokens over the generic color above
-    a.mg-button-secondary,
-    a.mg-button-secondary:hover,
-    a.mg-button-secondary:visited {
-      background-color: $mg-color-hero-button-secondary-background;
-      color: $mg-color-hero-button-secondary-color;
-      border-color: $mg-border-color-hero-button-secondary;
+      // Preserve secondary button's dedicated tokens over the generic color above
+      a.mg-button-secondary:not(.mg-button-cta),
+      a.mg-button-secondary:not(.mg-button-cta):hover,
+      a.mg-button-secondary:not(.mg-button-cta):visited {
+        background-color: var(--mg-color-hero-button-secondary-background);
+        color: rgb(var(--mg-color-hero-button-secondary-color));
+        border-color: rgb(var(--mg-border-color-hero-button-secondary));
+      }
     }
   }
 }
@@ -209,17 +336,44 @@ $variant-colours: (
 // RTL tweaks (background layout only)
 [dir="rtl"] .mg-hero:not(.mg-hero--split) {
   margin-right: calc(50% - (50vw)); // to expand out of the parent container
-  padding-right: $mg-spacing-100;
+  padding-right: var(--mg-spacing-100);
+
+  &::before {
+    background: linear-gradient(
+      270deg,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-start)) 0%,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-middle)) 48%,
+      rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-end)) 100%
+    );
+
+    @media (max-width: $mg-breakpoint-tablet) {
+      background: linear-gradient(
+        0deg,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-start)) 0%,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-middle)) 68%,
+        rgb(var(--mg-hero-gradient-color) / var(--mg-hero-gradient-end)) 100%
+      );
+    }
+  }
 
   @media (min-width: $mg-breakpoint-tablet) {
-    padding-right: calc(50vw - calc($mg-breakpoint-desktop / 2)); // to keep the overlay fixed
+    padding-right: calc(
+      50vw - calc($mg-breakpoint-desktop / 2)
+    ); // to keep the overlay fixed
   }
 
   @media (min-width: $mg-breakpoint-desktop-wide) {
-    padding-right: calc(50vw - calc($mg-breakpoint-desktop-wide / 2)); // to keep the overlay fixed
+    padding-right: calc(
+      50vw - calc($mg-breakpoint-desktop-wide / 2)
+    ); // to keep the overlay fixed
   }
 }
 
+[dir="rtl"] .mg-hero--contained:not(.mg-hero--split) {
+  margin-inline: 0;
+  padding-inline: 0;
+}
+
 // Split layout variant
 .mg-hero--split {
   background-image: none;
@@ -227,31 +381,44 @@ $variant-colours: (
 
   // Reset background-layout padding offsets
   padding-left: 0;
-  background-color: $mg-color-hero;
+  background-color: rgb(var(--mg-color-hero));
 
   // Button/CTA overrides (mirrors background layout, but scoped to split section
   // since there is no __overlay to target)
   a.mg-button,
   a.mg-button:hover,
   a.mg-button:visited {
-    color: $mg-color-hero;
+    color: rgb(var(--mg-color-hero));
   }
 
   a.mg-button-primary {
-    background-color: $mg-color-neutral-0;
+    background-color: rgb(var(--mg-color-neutral-0));
+  }
+
+  a.mg-button.mg-button-cta,
+  a.mg-button.mg-button-cta:hover,
+  a.mg-button.mg-button-cta:visited {
+    background: transparent;
+    border-color: transparent;
+    color: rgb(var(--mg-color-neutral-0));
+
+    &::after {
+      background: rgb(var(--mg-color-neutral-0));
+      color: rgb(var(--mg-hero-cta-color));
+    }
   }
 
-  a.mg-button-secondary,
-  a.mg-button-secondary:hover,
-  a.mg-button-secondary:visited {
-    background-color: $mg-color-hero-button-secondary-background;
-    color: $mg-color-hero-button-secondary-color;
-    border-color: $mg-border-color-hero-button-secondary;
+  a.mg-button-secondary:not(.mg-button-cta),
+  a.mg-button-secondary:not(.mg-button-cta):hover,
+  a.mg-button-secondary:not(.mg-button-cta):visited {
+    background-color: var(--mg-color-hero-button-secondary-background);
+    color: rgb(var(--mg-color-hero-button-secondary-color));
+    border-color: rgb(var(--mg-border-color-hero-button-secondary));
   }
 
   a.mg-button:focus-visible {
-    box-shadow: 0 0 0 2px $mg-color-neutral-0;
-    outline: 2px solid $mg-color-neutral-0;
+    box-shadow: 0 0 0 2px rgb(var(--mg-color-neutral-0));
+    outline: 2px solid rgb(var(--mg-color-neutral-0));
     outline-offset: 2px;
   }
 
@@ -286,7 +453,7 @@ $variant-colours: (
   .mg-hero__content {
     display: grid;
     row-gap: mg-rem(10);
-    padding: $mg-spacing-200 $mg-spacing-100;
+    padding: var(--mg-spacing-200) var(--mg-spacing-100);
     align-content: center;
   }
 
@@ -332,13 +499,13 @@ $variant-colours: (
         position: absolute;
         inset-inline: 0;
         inset-block-end: 0;
-        background: rgba($mg-color-neutral-900, 0.75);
-        color: $mg-color-neutral-0;
-        padding: $mg-spacing-50 $mg-spacing-100;
+        background: rgb(var(--mg-color-neutral-900) / 0.75);
+        color: rgb(var(--mg-color-neutral-0));
+        padding: var(--mg-spacing-50) var(--mg-spacing-100);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: $mg-spacing-100;
+        gap: var(--mg-spacing-100);
       }
     }
   }
@@ -359,14 +526,14 @@ $variant-colours: (
 }
 
 // Variant colours at full opacity for split (no rgba wrapper needed — no photo underneath)
-@each $name, $color in $variant-colours {
+@each $name, $prop in $variant-colour-props {
   .mg-hero--split.mg-hero--#{$name} {
-    background-color: $color;
+    background-color: rgb(var(#{$prop}));
 
-    a.mg-button,
-    a.mg-button:hover,
-    a.mg-button:visited {
-      color: #{$color};
+    a.mg-button:not(.mg-button-cta),
+    a.mg-button:not(.mg-button-cta):hover,
+    a.mg-button:not(.mg-button-cta):visited {
+      color: rgb(var(#{$prop}));
     }
   }
 }

package/scss/Components/HighlightBox/highlight-box.scss

@@ -21,18 +21,18 @@
 
 // Tone variants
 .mg-highlight-box--primary {
-  background: var(--button-color-background, #{$mg-color-blue-900});
+  background: var(--button-color-background, #{rgb(var(--mg-color-blue-900))});
 }
 
 .mg-highlight-box--secondary {
-  background: var(--tag-color-background-purple, #{$sendai-purple});
+  background: var(--tag-color-background-purple, var(--sendai-purple));
 }
 
 .mg-highlight-box.mg-highlight-box--primary,
 .mg-highlight-box.mg-highlight-box--secondary {
   border: none;
   box-shadow: inset 0 -8px 0 0 rgb(255 255 255 / 0.5);
-  color: $mg-color-white;
+  color: rgb(var(--mg-color-white));
 
   // Force every descendant to inherit the variant's white color. The double
   // class selector and descendant `*` give us specificity (0,2,1) so we beat