@stihl-design-system/components/assets/Header.DO34x-dO.css

Welcome to the STIHL Design System react component library.

.ds-top-bar_root_ryiho_1{z-index:998;border-bottom:1px solid #DADADA;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_ryiho_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_ryiho_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_ryiho_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_ryiho_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_ryiho_47{top:0;position:sticky}.ds-top-bar_root--fixed_ryiho_51{background-color:#fff;position:fixed;top:0;left:0;right:0}.ds-top-bar_content_ryiho_59{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_ryiho_59{min-height:5rem;grid-column:main-start/main-end;padding-inline:0}}.ds-top-bar_content--variant-full_ryiho_78{grid-column:full-start/full-end;padding-inline:12px}.ds-top-bar_content--has-primary-area-and-secondary-area_ryiho_82{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_ryiho_82 .ds-top-bar_primary_ryiho_87{padding-inline:0px;justify-content:center}@media (min-width: 1024px){.ds-top-bar_content--has-primary-area-and-secondary-area_ryiho_82{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_ryiho_82 .ds-top-bar_primary_ryiho_87{padding-inline:var(--ds-spacing-dynamic-xs);justify-content:center}}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_ryiho_102{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_ryiho_102 .ds-top-bar_brand_ryiho_107{padding-inline:0px}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_ryiho_102 .ds-top-bar_primary_ryiho_87{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_ryiho_102{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_ryiho_102 .ds-top-bar_brand_ryiho_107{padding-inline-end:var(--ds-spacing-dynamic-xs)}.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_ryiho_102 .ds-top-bar_primary_ryiho_87{padding-inline:0px;justify-content:center}}@media (min-width: 1024px){.ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_ryiho_102{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_ryiho_102 .ds-top-bar_primary_ryiho_87{padding-inline:var(--ds-spacing-dynamic-xs);justify-content:center}}.ds-top-bar_content--has-primary-area_ryiho_82{grid-template-areas:"brand primary";grid-template-columns:fit-content(100%) auto}.ds-top-bar_content--has-primary-area_ryiho_82 .ds-top-bar_primary_ryiho_87{padding-inline-start:var(--ds-spacing-dynamic-xs);justify-content:start}.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146{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_ryiho_146{padding-block-end:11px}}.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146 .ds-top-bar_brand_ryiho_107{padding-inline:0px}.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146 .ds-top-bar_primary_ryiho_87{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_ryiho_146 .ds-top-bar_primary_ryiho_87{padding-block-start:0;border-top:none}}@media (min-width: 768px){.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146{grid-template-areas:"brand primary";grid-template-columns:fit-content(100%) auto}.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146 .ds-top-bar_brand_ryiho_107{padding-inline-end:var(--ds-spacing-dynamic-xs)}.ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146 .ds-top-bar_primary_ryiho_87{padding-inline-start:var(--ds-spacing-dynamic-xs);justify-content:start}}.ds-top-bar_brand_ryiho_107{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_ryiho_107{gap:14px}}.ds-top-bar_brand-add-on_ryiho_210{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_ryiho_210{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_ryiho_231{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_ryiho_231{font-size:1.1875rem;line-height:1.1176470588}}.ds-top-bar_brand-add-on_ryiho_210 .ds-top-bar_sub-title_ryiho_245{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_ryiho_210 .ds-top-bar_sub-title_ryiho_245{font-size:.9375rem;line-height:1.4}}.ds-top-bar_primary_ryiho_87{grid-area:primary;display:flex;align-items:center;min-height:3rem}.ds-top-bar_secondary_ryiho_271{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_ryiho_280{width:7.125rem;height:3.125rem}@media (min-width: 768px){.ds-top-bar_logo_ryiho_280{min-width:7.9775625rem;height:3.5rem}}.ds-top-bar_logo--reduced_ryiho_290{width:3.125rem}@media (min-width: 768px){.ds-top-bar_logo--reduced_ryiho_290{min-width:3.5rem}}.ds-header_root_g2mvw_1{background-color:#fff}.ds-header_root--sticky_g2mvw_4{position:sticky;top:0;z-index:998}.ds-header_root--hidden_g2mvw_9{transform:translateY(-100%)}.ds-header_root--hidden_g2mvw_9{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(.5,0,1,1)}@media (prefers-reduced-motion: reduce){.ds-header_root--hidden_g2mvw_9{transition-duration:0ms}}.ds-header_root--fixed_g2mvw_20{position:fixed;top:0;left:0;right:0;transform:translateY(0)}.ds-header_root--fixed_g2mvw_20{transition:transform var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-header_root--fixed_g2mvw_20{transition-duration:0ms}}.ds-header_main-navigation-area_g2mvw_36{background-color:#fff;border-bottom:1px solid #DADADA;display:none;position:static}@media (min-width: 1024px){.ds-header_main-navigation-area_g2mvw_36{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_g2mvw_36{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_g2mvw_36{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_g2mvw_36{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_g2mvw_36{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_g2mvw_88{position:fixed;top:0;left:0;right:0;z-index:0}.ds-header_main-navigation-area--fixed_g2mvw_88{transition:top var(--ds-animation-duration, .25s) cubic-bezier(0,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-header_main-navigation-area--fixed_g2mvw_88{transition-duration:0ms}}.ds-header_main-navigation-area--fixed--visible_g2mvw_103{top:var(--ds-top-bar-height);z-index:997}.ds-header_main-navigation-content_g2mvw_108{min-height:3rem;grid-column:main-start/main-end}.ds-header_main-navigation-content--variant-full_g2mvw_112{grid-column:full-start/full-end;padding-inline:12px}.ds-header_header-placeholder_g2mvw_117{height:var(--ds-header-height)}.ds-header_header-placeholder--with-banner_g2mvw_120{height:calc(var(--ds-header-height) - var(--ds-banner-height))}