@stihl-design-system/components/assets/Header.CNqtWTxB.css

Welcome to the STIHL Design System react component library.

.ds-top-bar_root_q6oxc_1{background-color:#fff;z-index:998;border-bottom:1px solid #DADADA;position:relative;display:grid;--ds-grid-gap: var(--ds-spacing-dynamic-xs);gap:var(--ds-grid-gap);min-width:320px;grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start narrow-center-start] repeat(8,minmax(0,1fr)) [narrow-center-end narrow-left-end main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 8px;--ds-grid-span-one-half: span 8;--ds-grid-span-one-third: span 8;--ds-grid-span-two-thirds: span 8;--ds-grid-span-one-quarter: span 4}@media (min-width: 768px){.ds-top-bar_root_q6oxc_1{grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(2,minmax(0,1fr)) [narrow-center-start] repeat(6,minmax(0,1fr)) [narrow-left-end] repeat(2,minmax(0,1fr)) [narrow-center-end] repeat(2,minmax(0,1fr)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 12px;--ds-grid-span-one-half: span 6;--ds-grid-span-one-third: span 6;--ds-grid-span-two-thirds: span 6;--ds-grid-span-one-quarter: span 6}}@media (min-width: 1024px){.ds-top-bar_root_q6oxc_1{grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(3,minmax(0,1fr)) [narrow-center-start] repeat(3,minmax(0,1fr)) [narrow-left-end] repeat(3,minmax(0,1fr)) [narrow-center-end] repeat(3,minmax(0,1fr)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 26px;--ds-grid-span-one-half: span 6;--ds-grid-span-one-third: span 4;--ds-grid-span-two-thirds: span 8;--ds-grid-span-one-quarter: span 3}}@media (min-width: 1536px){.ds-top-bar_root_q6oxc_1{grid-template-columns:[full-start extended-start] auto [main-start narrow-left-start] repeat(3,minmax(0,88px)) [narrow-center-start] repeat(3,minmax(0,88px)) [narrow-left-end] repeat(3,minmax(0,88px)) [narrow-center-end] repeat(3,minmax(0,88px)) [main-end] auto [extended-end full-end];--ds-internal-grid-safe-zone: 0px}}@media (min-width: 1920px){.ds-top-bar_root_q6oxc_1{grid-template-columns:[full-start] auto [extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(3,minmax(0,88px)) [narrow-center-start] repeat(3,minmax(0,88px)) [narrow-left-end] repeat(3,minmax(0,88px)) [narrow-center-end] repeat(3,minmax(0,88px)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end] auto [full-end];--ds-internal-grid-safe-zone: 192px}}.ds-top-bar_root--sticky_q6oxc_49{top:0;position:sticky}.ds-top-bar_root--fixed_q6oxc_53{background-color:#fff;position:fixed;top:0;left:0;right:0;width:calc(100vw - var(--floating-ui-scrollbar-width))}.ds-top-bar_content_q6oxc_62{background-color:#fff;min-height:4.625rem;padding-block-start:12px;padding-block-end:11px;display:grid;grid-auto-rows:auto;row-gap:16px;align-items:center;grid-column:full-start/full-end;padding-inline:12px}@media (min-width: 768px){.ds-top-bar_content_q6oxc_62{min-height:5rem;grid-column:main-start/main-end;padding-inline:0}}.ds-top-bar_content--variant-full_q6oxc_81{grid-column:full-start/full-end;padding-inline:12px}.ds-top-bar_content--has-primary-area-and-secondary-area_q6oxc_85{grid-template-areas:"brand secondary" "primary primary";grid-template-columns:fit-content(100%) auto;grid-template-rows:auto auto}.ds-top-bar_content--has-primary-area-and-secondary-area_q6oxc_85 .ds-top-bar_primary_q6oxc_90{padding-inline:0px;justify-content:center}@media (min-width: 1024px){.ds-top-bar_content--has-primary-area-and-secondary-area_q6oxc_85{grid-template-areas:"brand primary secondary";grid-template-columns:fit-content(100%) auto fit-content(100%);grid-template-rows:auto}.ds-top-bar_content--has-primary-area-and-secondary-area_q6oxc_85 .ds-top-bar_primary_q6oxc_90{padding-inline:var(--ds-spacing-dynamic-xs);justify-content:center}}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105{grid-template-areas:"brand brand" "primary secondary";grid-template-columns:auto fit-content(100%);grid-template-rows:auto auto}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105 .ds-top-bar_brand_q6oxc_110{padding-inline:0px}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105 .ds-top-bar_primary_q6oxc_90{padding-inline-end:var(--ds-spacing-dynamic-xs);justify-content:start}@media (min-width: 768px){.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105{grid-template-areas:"brand secondary" "primary primary";grid-template-columns:fit-content(100%) auto}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105 .ds-top-bar_brand_q6oxc_110{padding-inline-end:var(--ds-spacing-dynamic-xs)}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105 .ds-top-bar_primary_q6oxc_90{padding-inline:0px;justify-content:center}}@media (min-width: 1024px){.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105{grid-template-areas:"brand primary secondary";grid-template-columns:fit-content(100%) auto fit-content(100%);grid-template-rows:auto}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_q6oxc_105 .ds-top-bar_primary_q6oxc_90{padding-inline:var(--ds-spacing-dynamic-xs);justify-content:center}}.ds-top-bar_content--has-primary-area_q6oxc_85{grid-template-areas:"brand primary";grid-template-columns:fit-content(100%) auto}.ds-top-bar_content--has-primary-area_q6oxc_85 .ds-top-bar_primary_q6oxc_90{padding-inline-start:var(--ds-spacing-dynamic-xs);justify-content:start}.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149{grid-template-areas:"brand" "primary";grid-template-columns:auto;grid-template-rows:auto;row-gap:12px;padding-block-end:5px}@media (min-width: 768px){.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149{padding-block-end:11px}}.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149 .ds-top-bar_brand_q6oxc_110{padding-inline:0px}.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149 .ds-top-bar_primary_q6oxc_90{justify-content:center;padding-inline:0px;padding-block-start:4px;border-top:1px solid #DADADA}@media (min-width: 768px){.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149 .ds-top-bar_primary_q6oxc_90{padding-block-start:0;border-top:none}}@media (min-width: 768px){.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149{grid-template-areas:"brand primary";grid-template-columns:fit-content(100%) auto}.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149 .ds-top-bar_brand_q6oxc_110{padding-inline-end:var(--ds-spacing-dynamic-xs)}.ds-top-bar_content--has-primary-area--with-brand-add-on_q6oxc_149 .ds-top-bar_primary_q6oxc_90{padding-inline-start:var(--ds-spacing-dynamic-xs);justify-content:start}}.ds-top-bar_brand_q6oxc_110{grid-area:brand;display:flex;align-items:center;gap:12px;padding-inline-end:var(--ds-spacing-dynamic-xs)}@media (min-width: 768px){.ds-top-bar_brand_q6oxc_110{gap:14px}}.ds-top-bar_brand-add-on_q6oxc_213{font-family:STIHL Contraface Digital Display Title,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;font-weight:400;font-size:1.125rem;line-height:1;font-size-adjust:cap-height .68;letter-spacing:-.5px}@media (min-width: 768px){.ds-top-bar_brand-add-on_q6oxc_213{font-family:STIHL Contraface Digital Display Title,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;font-weight:400;font-size:1.3125rem;line-height:1;font-size-adjust:cap-height .68}}.ds-top-bar_brand-add-on--double_q6oxc_234{display:flex;flex-direction:column;white-space:nowrap;gap:0;font-size:1.0625rem;line-height:1.1176470588}@media (min-width: 768px){.ds-top-bar_brand-add-on--double_q6oxc_234{font-size:1.1875rem;line-height:1.1176470588}}.ds-top-bar_brand-add-on_q6oxc_213 .ds-top-bar_sub-title_q6oxc_248{font-family:STIHL Contraface Digital Text Demi,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.8125rem;line-height:1.461538;text-transform:uppercase;letter-spacing:0}@media (min-width: 768px){.ds-top-bar_brand-add-on_q6oxc_213 .ds-top-bar_sub-title_q6oxc_248{font-size:.9375rem;line-height:1.4}}.ds-top-bar_primary_q6oxc_90{grid-area:primary;display:flex;align-items:center;min-height:3rem}.ds-top-bar_secondary_q6oxc_274{grid-area:secondary;padding-inline-start:var(--ds-spacing-dynamic-xs);min-height:3rem;display:flex;justify-content:flex-end;align-items:center}.ds-top-bar_logo_q6oxc_283{width:7.125rem;height:3.125rem}@media (min-width: 768px){.ds-top-bar_logo_q6oxc_283{min-width:7.9775625rem;height:3.5rem}}.ds-top-bar_logo--reduced_q6oxc_293{width:3.125rem}@media (min-width: 768px){.ds-top-bar_logo--reduced_q6oxc_293{min-width:3.5rem}}.ds-header_root_c5fh4_1{background-color:#fff}.ds-header_root--sticky_c5fh4_4{position:sticky;top:0;z-index:998}.ds-header_root--hidden_c5fh4_9{transform:translateY(-100%)}.ds-header_root--hidden_c5fh4_9{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){.ds-header_root--hidden_c5fh4_9{transition-duration:0ms}}.ds-header_root--fixed_c5fh4_20{position:fixed;top:0;left:0;right:0;transform:translateY(0);width:calc(100vw - var(--floating-ui-scrollbar-width))}.ds-header_root--fixed_c5fh4_20{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-header_root--fixed_c5fh4_20{transition-duration:0ms}}.ds-header_main-navigation-area_c5fh4_37{background-color:#fff;border-bottom:1px solid #DADADA;display:none;position:sticky;z-index:997}@media (min-width: 1024px){.ds-header_main-navigation-area_c5fh4_37{display:grid;--ds-grid-gap: var(--ds-spacing-dynamic-xs);gap:var(--ds-grid-gap);min-width:320px;grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start narrow-center-start] repeat(8,minmax(0,1fr)) [narrow-center-end narrow-left-end main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 8px;--ds-grid-span-one-half: span 8;--ds-grid-span-one-third: span 8;--ds-grid-span-two-thirds: span 8;--ds-grid-span-one-quarter: span 4}}@media (min-width: 1024px) and (min-width: 768px){.ds-header_main-navigation-area_c5fh4_37{grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(2,minmax(0,1fr)) [narrow-center-start] repeat(6,minmax(0,1fr)) [narrow-left-end] repeat(2,minmax(0,1fr)) [narrow-center-end] repeat(2,minmax(0,1fr)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 12px;--ds-grid-span-one-half: span 6;--ds-grid-span-one-third: span 6;--ds-grid-span-two-thirds: span 6;--ds-grid-span-one-quarter: span 6}}@media (min-width: 1024px) and (min-width: 1024px){.ds-header_main-navigation-area_c5fh4_37{grid-template-columns:[full-start extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(3,minmax(0,1fr)) [narrow-center-start] repeat(3,minmax(0,1fr)) [narrow-left-end] repeat(3,minmax(0,1fr)) [narrow-center-end] repeat(3,minmax(0,1fr)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end full-end];--ds-internal-grid-safe-zone: 26px;--ds-grid-span-one-half: span 6;--ds-grid-span-one-third: span 4;--ds-grid-span-two-thirds: span 8;--ds-grid-span-one-quarter: span 3}}@media (min-width: 1024px) and (min-width: 1536px){.ds-header_main-navigation-area_c5fh4_37{grid-template-columns:[full-start extended-start] auto [main-start narrow-left-start] repeat(3,minmax(0,88px)) [narrow-center-start] repeat(3,minmax(0,88px)) [narrow-left-end] repeat(3,minmax(0,88px)) [narrow-center-end] repeat(3,minmax(0,88px)) [main-end] auto [extended-end full-end];--ds-internal-grid-safe-zone: 0px}}@media (min-width: 1024px) and (min-width: 1920px){.ds-header_main-navigation-area_c5fh4_37{grid-template-columns:[full-start] auto [extended-start] var(--ds-internal-grid-safe-zone) [main-start narrow-left-start] repeat(3,minmax(0,88px)) [narrow-center-start] repeat(3,minmax(0,88px)) [narrow-left-end] repeat(3,minmax(0,88px)) [narrow-center-end] repeat(3,minmax(0,88px)) [main-end] var(--ds-internal-grid-safe-zone) [extended-end] auto [full-end];--ds-internal-grid-safe-zone: 192px}}.ds-header_main-navigation-area--fixed_c5fh4_90{position:fixed;top:0;left:0;right:0;z-index:0}.ds-header_main-navigation-area--fixed_c5fh4_90{transition:top var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-header_main-navigation-area--fixed_c5fh4_90{transition-duration:0ms}}.ds-header_main-navigation-area--fixed--visible_c5fh4_105{top:var(--ds-top-bar-height);z-index:997;width:calc(100vw - var(--floating-ui-scrollbar-width))}.ds-header_main-navigation-content_c5fh4_111{min-height:3rem;grid-column:main-start/main-end}.ds-header_main-navigation-content--variant-full_c5fh4_115{grid-column:full-start/full-end;padding-inline:12px}.ds-header_header-placeholder_c5fh4_120{height:var(--ds-header-height)}.ds-header_header-placeholder--with-banner_c5fh4_123{height:calc(var(--ds-header-height) - var(--ds-banner-height))}