diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss index 09e7bf87e7c2c2990b1c6a4d8772960720795208..5edf9e4d7733da2375dfd1b1f92dfa124756e6a0 100644 --- a/src/components/navigation/menu-item/menu-item.scss +++ b/src/components/navigation/menu-item/menu-item.scss @@ -94,24 +94,44 @@ } &.is-heading { - @include font-size(24px, 24px); + @include font-size(24px, 28px); @include font-weight($bold); - background: transparent; - border-bottom: 3px solid var(--brand-main-light); - color: var(--brand-main-light); - margin-top: -24px; - padding-bottom: 24px; - padding-top: 24px; + letter-spacing: -0.06px; text-transform: uppercase; + position: relative; + + // Drill-down heading. + &:not(.is-active):not(.is-active-trail) { + color: var(--brand-main-light); + margin-top: 8px; + padding-bottom: 12px; + padding-right: 8px; + padding-top: 12px; + + &:before { + background-color: var(--brand-main-light); + content: ''; + display: block; + height: 3px; + left: 0; + position: absolute; + right: 0; + top: -8px; + } + } &.is-active, &.in-active-trail { @include font-weight($bold); + background: transparent; + border-bottom: 0; color: var(--grayscale-black); - position: relative; + margin-top: -12px; + padding-bottom: 24px; + padding-top: 24px; &:before { - border-left-width: 4px; + border-left-width: 5px; height: 55%; } }