diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss index 44aea37f0f3b11639ea4bfe6dfb6d8ededf67f0d..18b463a5c8f29b86ab075f86a9204116283cccff 100644 --- a/src/components/heading/heading.scss +++ b/src/components/heading/heading.scss @@ -235,13 +235,6 @@ h1.hy-heading__introduction { @include font-size(56px, 56px); letter-spacing: -1.8px; } - - @include breakpoint($xlarge) { - // > 1400px X-Large - //@todo check - @include font-size(72px, 72px); - letter-spacing: -2.5px; - } } } diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss index d23cc11f82449e3f417ba6cea9a3475b87916716..92dc54c76328fd630644a41b713d69212706bd52 100644 --- a/src/components/hy-hero/hy-hero.scss +++ b/src/components/hy-hero/hy-hero.scss @@ -13,11 +13,15 @@ } @include breakpoint($xlarge) { - margin-left: 0; + margin-left: -12px; margin-right: 0; margin-top: 24px; } + @include breakpoint(1648px) { + margin-left: 0; + } + &--blue { .hy-hero__content-container, .hy-hero__spacer-box { @@ -122,46 +126,37 @@ @include breakpoint($wide) { background-color: var(--grayscale-white); - border-bottom: 1px solid rgba(16, 126, 171, 0.1); - border-top: 1px solid rgba(16, 126, 171, 0.1); - box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1); - padding: 6px 0; + box-shadow: inset 0 -8px 8px -8px rgba(14, 104, 139, 0.1); + padding-bottom: 8px; } @include breakpoint($extrawide) { - box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1), inset 0 6px 6px -6px rgba(14, 104, 139, 0.1); - margin: 0; + margin-left: 0; + margin-right: 0; } @include breakpoint($xlarge) { - box-shadow: inset 0 -12px 12px -12px rgba(14, 104, 139, 0.1), inset 0 12px 12px -12px rgba(14, 104, 139, 0.1); + box-shadow: inset 0 -24px 24px -24px rgba(14, 104, 139, 0.1); margin-left: -32px; margin-right: -32px; - padding: 12px 0; + padding-bottom: 24px; } - .hy-hero__content-container { - @include breakpoint(max-width 959px) { - padding-bottom: 0; - } - + .hy-hero__container { @include breakpoint($extrawide) { - padding-left: 32px; // Original 24px + 8px - padding-right: 8px; + margin-left: 8px; + margin-right: 8px; } @include breakpoint($xlarge) { - padding-left: 0; + margin-left: 32px; + margin-right: 32px; } } - .hy-hero__image-container { - @include breakpoint($wide) { - padding: 0; - } - - @include breakpoint($extrawide) { - padding-right: 8px; + .hy-hero__content-container { + @include breakpoint(max-width 959px) { + padding-bottom: 0; } } @@ -214,6 +209,7 @@ border-bottom: 1px solid rgba(16, 126, 171, 0.1); box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1); padding-bottom: 2rem; + position: relative; @include breakpoint($narrow) { box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1); @@ -235,6 +231,32 @@ margin-top: 0; } + &:before, + &:after { + @include breakpoint($wide) { + content: ''; + height: 80px; + left: 0; + position: absolute; + width: 100%; + z-index: 1; + } + } + + &:after { + @include breakpoint($wide) { + box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1); + bottom: 0; + } + } + + &:before { + @include breakpoint($wide) { + box-shadow: inset 0 20px 20px -20px rgba(14, 104, 139, 0.1); + top: 0; + } + } + .hy-hero__content-container { @include breakpoint(max-width 959px) { padding-bottom: 0; @@ -256,12 +278,6 @@ } } - .hy-hero__spacer-box { - @include breakpoint($wide) { - box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1), inset 0 20px 20px -20px rgba(14, 104, 139, 0.1); - } - } - .hy-hero__content-container, .hy-hero__spacer-box { background-color: var(--grayscale-slightly-gray); @@ -304,6 +320,10 @@ .hy-hero__description { background-color: var(--grayscale-slightly-gray); color: var(--grayscale-black); + + @include breakpoint($extrawide) { + max-width: 34%; + } } } } @@ -377,11 +397,21 @@ padding: 80px 0; } - @include breakpoint($fullhd) { + @include breakpoint(1920px) { min-height: 600px; } } +.hy-hero__content { + @include breakpoint($xlarge) { + padding-left: 12px; + } + + @include breakpoint(1648px) { + padding-left: 0; + } +} + .hy-hero__spacer-box { display: none; @@ -476,16 +506,16 @@ @include breakpoint($wide) { margin-top: -8px; - max-width: 40.21%; - padding: 16px 40px 20px 0; + max-width: 39%; + padding: 16px 20px 20px 0; } @include breakpoint($extrawide) { @include font-size(18px); letter-spacing: -0.16px; line-height: 26px; - max-width: 40.13%; - padding: 28px 40px 32px 0; + max-width: 37%; + padding: 28px 20px 32px 0; } }