diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index da08d84..e929e96 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -124,7 +124,7 @@ export const createMarketingHeader = if (slideData.cta && slideData.link) { const buttonP = createElement('p', [], '', textBox); const btn = createButton({ - color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta + color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta, size: 'small', }); buttonP.appendChild(btn); } diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index 665b338..c607394 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -2,36 +2,6 @@ @import '../../_global/styles/vars'; section.marketingheader{ margin-top:0; - .rotation .slider{ - border-bottom:0; - border-radius: 4px; - .slide-overflow{ - border-radius: 4px; - } - .slider-tabs{ - li:first-child:last-child{ - display:none; - } - } - .text-box{ - color:var(--theme-color-primary); - &:not(:first-child)::before { - background-color: var(--theme-color-primary-dimmed-04); - } - .btn{ - background-color: var(--theme-color-primary); - color:white; - &:hover:after{ - box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary); - } - } - } - .text-only{ - .text-box{ - color:white; - } - } - } .search { position: relative; overflow: hidden; @@ -575,8 +545,8 @@ section.marketingheader{ } } - .slide.text-only.current { - background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + .slide.text-only.current{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); } } @@ -658,34 +628,96 @@ section.marketingheader{ } } } + .rotation .slider{ + border-bottom:0; + border-radius: 4px; + background-color: white; + h3{ + margin-top: 4px; + margin-bottom: 8px; + } + .kicker{ + margin-bottom:0; + } + p{ + margin-bottom:0.4em; + } + .btn{ + margin-top:0.4em; + } + .slide-overflow{ + border-radius: 4px; + } + .slider-tabs{ + li:first-child:last-child{ + display:none; + } + } + .slide.text-only.current{ + background: none; + outer{ + background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%); + .text-box{ + justify-content: center; + } + } + } + .text-box{ + color:var(--theme-color-primary); + padding: 30px 36px 24px 36px; + display: flex; + flex-flow: column; + justify-content: end; + min-width: 324px; + &:not(:first-child)::before { + background-color: var(--theme-color-primary-dimmed-04); + } + .btn{ + background-color: var(--theme-color-primary); + color:white; + &:hover:after{ + box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary); + } + } + } + .text-only{ + .text-box{ + color:white; + } + } + } .rotation{ margin:0; - @media screen and (max-width:900px){ + @media (max-width: 1339px) { + .rotation .slider .text-box { + min-width: 324px; + } + } + @media (min-width: 1001px) { + .slider .text-box:not(:first-child)::before { + border-top-right-radius: 16% 50% !important; + border-bottom-right-radius: 16% 50% !important; + margin: -15% -8% -15% 20px; + } + } + @media (max-width:1000px){ .slider{ - background-color: transparent; + background-color: white; .slider-tabs{ top:0; height: auto; bottom: auto; margin-top:15px; - @media screen and (max-width:767px){ - .btn{ - --button-icon-padding: 30px; - --button-icon-offset: 5px; - --button-padding: 5px 10px; - --button-min-size: 30px; - margin: 2.5px; - } - } } - .text-box{ - padding: var(--container-padding); + .slide:not(.text-only) .text-box{ + padding: 16px 0; } .text-box:not(:first-child)::before{ display: none; } .image-box{ order: 0; + &:before{ display: none; } @@ -696,6 +728,33 @@ section.marketingheader{ } } } + @media screen and (max-width:900px){ + .slider{ + margin-bottom:20px; + .slide:not(.text-only){ + .text-box{ + padding: 16px var(--container-padding) 0; + } + } + .slide.text-only{ + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .image-box{ + padding-left: var(--container-padding); + padding-right: var(--container-padding); + } + .slider-tabs{ + right: calc(var(--container-padding) + 10px); + top: 15px; + padding: 0; + margin: 0; + .btn{ + margin-top:0 !important; + } + } + } + } @media screen and (max-width:767px){ .slider{ .image-box{ @@ -703,6 +762,18 @@ section.marketingheader{ height:250px; } } + .slide:not(.text-only) .text-box{ + padding: 16px var(--container-padding); + } + .slider-tabs{ + .btn{ + --button-icon-padding: 30px; + --button-icon-offset: 5px; + --button-padding: 5px 10px; + --button-min-size: 30px; + margin: 2.5px; + } + } } } @media screen and (max-width:567px) {