@font-face { font-family: "Heebo"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/heebo-hebrew-300-800.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Heebo"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/heebo-latin-300-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --black: #080909; --graphite: #121413; --charcoal: #1b1e1c; --yellow: #ffd400; --yellow-bright: #ffd400; --yellow-rgb: 255, 212, 0; --cream: #f0efe9; --paper: #f7f6f1; --line: rgba(10, 11, 10, 0.16); --white-line: rgba(255, 255, 255, 0.18); --text: #0b0c0b; --muted: #686b67; --logo-edge: clamp(16px, 4vw, 64px); } .kennametal-kcp25c-feature { padding: clamp(34px, 3.5vw, 54px) clamp(4vw, 6.5vw, 112px) clamp(68px, 6vw, 96px); overflow: hidden; background: #f3f3f1; direction: rtl; } .kennametal-kcp25c-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 88px); align-items: center; direction: ltr; } .kennametal-kcp25c-video { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-bottom: 4px solid var(--yellow); } .native-video-link { position: absolute; inset: 0; display: block; overflow: hidden; background: #000; } .native-video-link img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease, filter .25s ease; } .native-video-play { position: absolute; top: 50%; left: 50%; width: clamp(54px, 5vw, 72px); aspect-ratio: 1.42 / 1; border-radius: 12px; background: #f03; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); transition: background-color .2s ease, transform .2s ease; } .native-video-play::after { content: ""; position: absolute; top: 50%; left: 52%; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid #fff; transform: translate(-50%, -50%); } .native-video-link:hover img { transform: scale(1.015); filter: brightness(.92); } .native-video-link:hover .native-video-play { background: var(--yellow); transform: translate(-50%, -50%) scale(1.06); } .native-video-link:focus-visible { outline: 4px solid var(--yellow); outline-offset: -4px; } .native-video-link:focus-visible .native-video-play { background: var(--yellow); transform: translate(-50%, -50%) scale(1.06); } @media (prefers-reduced-motion: reduce) { .native-video-link img, .native-video-play { transition: none; } } .kennametal-kcp25c-message { min-width: 0; max-width: 620px; padding: clamp(12px, 2vw, 32px) 0; justify-self: end; direction: rtl; text-align: right; } .en-site .kennametal-kcp25c-grid { direction: rtl; } .en-site .kennametal-kcp25c-message { justify-self: start; direction: ltr; text-align: left; } .kennametal-kcp25c-eyebrow { margin: 0 0 15px; display: flex; align-items: center; gap: 12px; color: #686b67; font: 700 11px/1.3 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; } .kennametal-kcp25c-eyebrow::before { content: ""; width: 34px; height: 3px; flex: 0 0 auto; background: var(--yellow); } .kennametal-kcp25c-message h2 { margin: 0; color: var(--black); font-family: "IBM Plex Sans", Arial, sans-serif; font-size: clamp(54px, 5.1vw, 78px); font-weight: 700; line-height: .94; letter-spacing: -.055em; } .kennametal-kcp25c-message h3 { max-width: 590px; margin: 18px 0 0; color: var(--black); font-family: "IBM Plex Sans", Arial, sans-serif; font-size: clamp(24px, 2.15vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -.032em; text-wrap: balance; } .kennametal-kcp25c-message .kennametal-kcp25c-copy { max-width: 570px; margin: 22px 0 0; color: #555955; font: 400 clamp(16px, 1.25vw, 19px)/1.55 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.01em; } .kennametal-kcp25c-link { width: fit-content; min-height: 48px; margin-top: 28px; padding: 0 19px; display: inline-flex; align-items: center; gap: 18px; color: #fff; background: var(--black); border: 0; font: 650 14px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .01em; text-decoration: none; transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .kennametal-kcp25c-link:hover, .kennametal-kcp25c-link:focus-visible { color: var(--black); background: var(--yellow); box-shadow: 0 10px 24px rgba(8, 9, 9, .12); outline: 0; transform: translateY(-2px); } @media (max-width: 780px) { .kennametal-kcp25c-feature { padding: 12px 20px 54px; } .kennametal-kcp25c-grid { grid-template-columns: 1fr; gap: 24px; } .kennametal-kcp25c-video { aspect-ratio: 16 / 10; } .kennametal-kcp25c-message { padding: 0 2px; } .kennametal-kcp25c-eyebrow { margin-bottom: 13px; } .kennametal-kcp25c-message h2 { font-size: clamp(50px, 16vw, 66px); } .kennametal-kcp25c-message h3 { margin-top: 14px; font-size: clamp(25px, 8vw, 32px); line-height: 1.13; } .kennametal-kcp25c-message .kennametal-kcp25c-copy { margin-top: 18px; font-size: 16px; line-height: 1.55; } .kennametal-kcp25c-link { width: 100%; margin-top: 22px; justify-content: space-between; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--text); font-family: "Heebo", Arial, sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; } :focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; inset: 10px auto auto 10px; transform: translateY(-140%); z-index: 100; padding: 10px 16px; background: var(--yellow); color: var(--black); } .skip-link:focus { transform: none; } .site-header { position: absolute; z-index: 50; top: 0; left: 0; width: 100%; height: 96px; display: grid; grid-template-columns: 270px minmax(0, 1fr) 400px; align-items: center; direction: ltr; color: var(--black); background: rgba(255,255,255,.98); border-bottom: 1px solid rgba(8,9,9,.14); box-shadow: 0 5px 18px rgba(8,9,9,.06); transition: box-shadow .25s ease, background .25s ease; } .site-header.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 7px 24px rgba(8,9,9,.1); } .brand { position: absolute; z-index: 55; top: 0; left: max(8px, calc(var(--logo-edge) - 12px)); width: 218px; height: 96px; display: flex; align-items: center; padding: 14px 0 16px; direction: ltr; background: transparent; color: var(--black); } .site-header > .brand { top: -4px; } .site-header > .brand::before { content: ""; position: fixed; z-index: 2; top: 13px; left: max(8px, calc(var(--logo-edge) - 12px)); width: 218px; height: 65.854px; background: url("arnold-symbol.svg?v=534-official-yellow-logo") left top / 100% 100% no-repeat; clip-path: inset(0 72% 0 0); pointer-events: auto; cursor: pointer; touch-action: manipulation; } .site-header > .brand:focus-visible::before { outline: 2px solid var(--yellow); outline-offset: 4px; } .brand.is-hidden-for-footer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; } .brand-logo-shell { position: relative; width: 218px; height: 60px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; } .brand-logo-shell img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .brand-he { display: none; } .main-nav { grid-column: 2; display: flex; justify-content: center; gap: clamp(14px, 1.2vw, 22px); direction: rtl; font-size: 17px; font-weight: 500; } .main-nav a { position: relative; padding: 37px 0; } .main-nav a::after { content: ""; position: absolute; bottom: 24px; right: 0; height: 2px; width: 0; background: var(--yellow); transition: width .25s ease; } .main-nav a:hover::after, .main-nav a:focus-visible::after { width: 100%; } .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown-toggle { min-width: 0; padding: 37px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; white-space: nowrap; } .nav-dropdown-toggle::after { content: ""; position: absolute; bottom: 24px; right: 0; height: 2px; width: 0; background: var(--yellow); transition: width .25s ease; } .nav-dropdown:hover .nav-dropdown-toggle::after, .nav-dropdown-toggle:focus-visible::after, .nav-dropdown-toggle[aria-expanded="true"]::after { width: 100%; } .nav-panel { position: absolute; z-index: 12; top: calc(100% - 4px); right: 50%; width: min(660px, 88vw); padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: rgba(255,255,255,.99); border: 1px solid rgba(8,9,9,.16); border-top: 3px solid var(--yellow); box-shadow: 0 18px 45px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translate(50%, 10px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .nav-dropdown-representatives .nav-panel { width: min(660px, 88vw); } .nav-panel.open, .nav-dropdown:hover .nav-panel, .nav-dropdown:focus-within .nav-panel { opacity: 1; visibility: visible; transform: translate(50%, 0); } .nav-panel a { position: relative; min-height: 46px; padding: 12px 16px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; direction: ltr; text-align: left; border: 0; border-bottom: 1px solid rgba(8,9,9,.1); background: transparent; color: var(--black); transition: padding .2s ease, background .2s ease; } .nav-panel a:not(:nth-child(3n)) { border-left: 1px solid rgba(8,9,9,.1); } .nav-panel a::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--yellow); transform: translateY(-50%); transition: height .2s ease; } .nav-panel a::after { display: none; } .nav-panel a strong { font: 600 13px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .045em; } .nav-panel a small { display: none; } .nav-panel a:hover, .nav-panel a:focus-visible { color: var(--black); background: #f7f6f1; padding-left: 20px; } .nav-panel a:hover::before, .nav-panel a:focus-visible::before { height: 22px; } .nav-panel.mega-menu { position: fixed; top: 91px; right: auto; left: 50%; width: min(1140px, calc(100vw - 48px)); height: min(410px, calc(100vh - 106px)); max-height: calc(100vh - 106px); padding: 0; display: block; direction: rtl; overflow-x: hidden; overflow-y: hidden; transform: translate(-50%, 8px) scale(.992); transform-origin: top center; border: 1px solid rgba(8,9,9,.11); border-top: 2px solid var(--yellow); border-radius: 0 0 14px 14px; background: rgba(255,255,255,.985); box-shadow: 0 24px 65px rgba(8,9,9,.16), 0 4px 14px rgba(8,9,9,.06); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .nav-panel.mega-menu.open, .nav-dropdown:hover .nav-panel.mega-menu, .nav-dropdown:focus-within .nav-panel.mega-menu { transform: translate(-50%, 0) scale(1); } .mega-menu-catalog-section > header span { color: #8b8d88; font: 600 10.5px/1.2 "IBM Plex Sans", "Heebo", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; } .mega-menu-manufacturer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega-menu-group { min-width: 0; padding: 25px 29px 28px; background: #fff; } .mega-menu-group:nth-child(even) { background: #fbfbfa; } .mega-menu-group-heading { min-height: 58px; padding-bottom: 16px; display: grid; align-content: end; } .mega-menu-group-heading strong { color: var(--black); font: 750 19px/1.2 "Heebo", Arial, sans-serif; } .mega-menu-links { display: grid; gap: 2px; } .nav-panel .mega-menu-links a, .nav-panel .mega-menu-catalog-companies a { min-height: 39px; padding: 8px 9px; justify-content: space-between; gap: 14px; direction: ltr; border: 0; border-radius: 0; } .nav-panel .mega-menu-links a:hover, .nav-panel .mega-menu-links a:focus-visible, .nav-panel .mega-menu-catalog-companies a:hover, .nav-panel .mega-menu-catalog-companies a:focus-visible { padding: 8px 9px; background: rgba(var(--yellow-rgb),.11); } .mega-menu--catalogs .mega-menu-catalog-companies a { min-height: 36px; padding: 6px 9px; } .mega-menu--catalogs .mega-menu-catalog-companies a:hover, .mega-menu--catalogs .mega-menu-catalog-companies a:focus-visible { padding: 6px 9px; } .nav-panel .mega-menu-links a strong, .nav-panel .mega-menu-catalog-companies a strong { font-size: 14px; letter-spacing: .025em; } .mega-menu--catalogs { display: grid !important; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } .mega-menu-catalog-section { min-width: 0; padding: 18px 27px 19px; background: #fff; } .mega-menu-catalog-section--featured { background: #fbfbfa; } .mega-menu-catalog-section > header { min-height: 49px; padding-bottom: 10px; display: grid; align-content: end; gap: 4px; } .mega-menu-catalog-section > header strong { color: var(--black); font: 750 19px/1.2 "Heebo", Arial, sans-serif; } .mega-menu-catalog-companies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .nav-panel .mega-menu-catalog-companies a { border: 0 !important; border-radius: 0 !important; } .mega-menu-featured-catalogs { padding-top: 9.6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .mega-menu-featured-column { min-width: 0; display: grid; align-content: start; gap: 6px; } .mega-menu-catalog-group { min-width: 0; margin: 0; display: grid; align-content: start; gap: 1px; } .mega-menu-catalog-group--series { padding-bottom: 0; border-bottom: 0; } .mega-menu-catalog-brand { padding: 0 2px; direction: ltr; unicode-bidi: isolate; text-align: right; color: var(--black); font-size: 15px; line-height: 1.3; letter-spacing: .02em; } .mega-menu-catalog-links { display: grid; gap: 2px; } .mega-menu-catalog-group--series .mega-menu-catalog-links { width: min(100%, 440px); grid-template-columns: minmax(0, 1fr); gap: 0; justify-self: end; } .mega-menu-catalog-group--series .mega-menu-pdf-link + .mega-menu-pdf-link { border-top: 0 !important; } .nav-panel .mega-menu-pdf-link { width: 100%; min-height: 35px; padding: 4px 2px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-content: stretch; justify-self: stretch; gap: 10px; direction: rtl; text-align: right; border: 0 !important; background: transparent; } .nav-panel .mega-menu-pdf-link:hover, .nav-panel .mega-menu-pdf-link:focus-visible { padding: 4px 2px; background: rgba(var(--yellow-rgb),.11); } .mega-menu-pdf-badge { display: none; } .nav-panel .mega-menu-pdf-link small { overflow-wrap: anywhere; white-space: normal; } .nav-panel .mega-menu-pdf-link small { width: 100%; display: block; direction: rtl; unicode-bidi: plaintext; text-align: right; color: #686b65; font-size: 13.5px; line-height: 1.35; } html[dir="rtl"] .mega-menu-catalog-group--series { justify-items: start; text-align: right; } html[dir="rtl"] .mega-menu-catalog-group--series .mega-menu-catalog-links { justify-self: start; } html[dir="rtl"] .mega-menu-catalog-group--series .mega-menu-catalog-brand, html[dir="rtl"] .mega-menu-catalog-group--series .mega-menu-pdf-link, html[dir="rtl"] .mega-menu-catalog-group--series .mega-menu-pdf-link small { text-align: right; } .en-site .nav-panel.mega-menu { direction: ltr; } .en-site .mega-menu-catalog-group--series .mega-menu-catalog-links { justify-self: start; } .en-site .nav-panel .mega-menu-pdf-link { direction: ltr; text-align: left; } .en-site .mega-menu-catalog-brand { text-align: left; } .en-site .nav-panel .mega-menu-pdf-link small { direction: ltr; text-align: left; } .header-actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-left: 18px; direction: ltr; } .language { font: 600 15px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .1em; } .language-mobile { display: none; } .menu-toggle { display: none; } .site-search { position: relative; width: 215px; flex: 0 0 auto; direction: rtl; } .site-search--mobile { display: none; } .site-search-field { height: 42px; display: flex; align-items: center; gap: 7px; direction: ltr; border-bottom: 1px solid rgba(8,9,9,.34); transition: border-color .2s ease; } .site-search:focus-within .site-search-field { border-bottom-color: var(--black); } .site-search-input { min-width: 0; width: 100%; height: 40px; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--black); font: 400 15px/1.2 "Heebo", Arial, sans-serif; text-align: right; direction: rtl; } .site-search-input::placeholder { color: #6b6e69; opacity: 1; } .site-search-input::-webkit-search-cancel-button { display: none; } .site-search-submit { width: 26px; height: 38px; padding: 0; display: grid; place-items: center; flex: 0 0 26px; border: 0; background: transparent; color: var(--black); cursor: pointer; } .site-search-submit svg, .search-page-field button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .search-clear { width: 27px; height: 34px; padding: 0; display: grid; place-items: center; flex: 0 0 27px; border: 0; border-radius: 50%; background: transparent; color: #6b6e69; cursor: pointer; transition: color .18s ease, background .18s ease; } .search-clear[hidden] { display: none !important; } .search-clear:hover, .search-clear:focus-visible { background: #efeee9; color: var(--black); } .search-clear svg, .search-page-field .search-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .search-suggestions { position: absolute; z-index: 90; top: calc(100% + 12px); right: 0; width: min(720px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 104px)); padding: 7px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #858781 #efeee9; direction: rtl; background: rgba(255,255,255,.995); border: 1px solid rgba(8,9,9,.11); border-top: 2px solid var(--yellow); border-radius: 0 0 14px 14px; box-shadow: 0 24px 65px rgba(8,9,9,.16), 0 4px 14px rgba(8,9,9,.06); } .search-suggestions::-webkit-scrollbar { width: 10px; } .search-suggestions::-webkit-scrollbar-track { background: #efeee9; } .search-suggestions::-webkit-scrollbar-thumb { min-height: 42px; border: 2px solid #efeee9; border-radius: 999px; background: #858781; } .search-suggestions::-webkit-scrollbar-thumb:hover { background: #5d605b; } .search-suggestions[hidden] { display: none; } .site-search .search-suggestion { min-height: 58px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--black); border-bottom: 0; background: transparent; text-align: right; transition: background .18s ease; } .site-search .search-suggestion::after { display: none; } .site-search .search-suggestion:hover, .site-search .search-suggestion:focus-visible { padding: 8px 12px; background: #f4f3ee; } .search-result-copy { min-width: 0; display: grid; gap: 2px; } .search-result-copy strong { overflow: hidden; color: var(--black); font: 600 14.5px/1.3 "IBM Plex Sans", "Heebo", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; } .search-result-copy small { overflow: hidden; color: #696c67; font-size: 12.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .search-result-type { flex: 0 0 auto; color: #797b77; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .search-suggestion-empty { min-height: 70px !important; align-items: flex-start !important; flex-direction: column; gap: 4px !important; } .search-suggestion-empty strong { font-size: 13px; } .search-suggestion-empty small { color: #6e716c; font-size: 11px; } .search-suggestion-loading { min-height: 46px; padding: 13px 11px; display: flex; align-items: center; color: #6b6e69; font-size: 11px; } .search-suggestion-loading::before { content: ""; width: 7px; height: 7px; margin-inline-end: 9px; border-radius: 50%; background: var(--yellow); animation: search-pulse 1s ease-in-out infinite alternate; } .search-suggestion-group { min-width: 0; } .search-suggestion-group + .search-suggestion-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(8,9,9,.16); } .search-suggestion-heading { padding: 8px 12px 5px; color: #555853; font-size: 12.5px; font-weight: 750; line-height: 1.2; } .search-suggestion-group .search-suggestion:last-child { border-bottom: 0; } .search-recent-search { width: 100%; border: 0; font: inherit; cursor: pointer; } .search-recent-search .search-result-copy strong { unicode-bidi: plaintext; } .search-result--catalog { box-shadow: none; } .search-match { padding: 0; background: transparent; color: inherit; font-weight: 800; } @keyframes search-pulse { to { opacity: .3; transform: scale(.72); } } .button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 26px; border: 1px solid transparent; font-weight: 600; transition: transform .2s ease, background .2s ease, color .2s ease; } .button:hover { transform: translateY(-2px); } .button-small { min-height: 42px; padding: 0 20px; font-size: 15px; } .button-yellow { background: var(--yellow); color: var(--black); } .button-yellow:hover { background: var(--yellow-bright); } .button-black { background: var(--black); color: white; } .button-outline { color: white; border-color: rgba(255,255,255,.45); } .button-outline:hover { background: white; color: var(--black); } .text-link { display: inline-flex; align-items: center; gap: 13px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); padding: 0 0 6px; } .text-link span { font-size: 22px; line-height: 1; transition: transform .2s ease; } .text-link:hover span { transform: translateX(-5px); } .dark-link { border-bottom-color: rgba(0,0,0,.35); } .hero { position: relative; height: min(820px, 100svh); min-height: 700px; display: flex; align-items: center; overflow: hidden; background: var(--black); color: white; } .hero-image { position: absolute; inset: 0; background-color: var(--black); background-image: linear-gradient(90deg, #080909 0%, rgba(8,9,9,.96) 25%, rgba(8,9,9,.62) 43%, rgba(8,9,9,.08) 68%), url("hero-kennametal-machining.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scaleX(-1); } .hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 120px 120px; mask-image: linear-gradient(to left, #000 20%, transparent 82%); } .hero-content { position: relative; z-index: 2; width: min(720px, 48vw); margin-right: clamp(6vw, 9vw, 150px); padding-top: 60px; } .eyebrow { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; color: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; } .eyebrow span { color: var(--yellow); font: 600 12px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .1em; } .hero h1 { margin: 0; font-size: clamp(52px, 5.6vw, 92px); line-height: .98; letter-spacing: -.055em; font-weight: 700; } .hero h1 em { color: var(--yellow); font-style: normal; font-weight: 300; white-space: nowrap; } .hero-copy { width: min(560px, 100%); margin: 34px 0 38px; color: rgba(255,255,255,.76); font-size: 21px; line-height: 1.7; } .hero-actions { display: flex; align-items: center; gap: 32px; } .hero-manufacturers { gap: 15px; } .hero-manufacturers span { font-size: 22px; line-height: 1; } .hero-index { position: absolute; z-index: 2; right: clamp(6vw, 9vw, 150px); bottom: 38px; display: flex; gap: 0; direction: rtl; } .hero-index span { padding: 5px 18px; font-size: 11px; color: rgba(255,255,255,.64); border-right: 1px solid rgba(255,255,255,.27); } .hero-index span:first-child { padding-right: 0; border-right: 0; } .section-pad { padding: 120px clamp(5vw, 8vw, 140px); } .intro { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(42px, 6vw, 88px); position: relative; background: var(--paper); } .section-number { font: 600 13px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; color: var(--muted); padding-top: 12px; } .intro h2, .section-head h2, .service-intro h2, .contact h2 { margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; } .intro-heading { align-self: center; } .intro-copy { max-width: 660px; } .intro-copy-text { column-count: 1; } .intro-copy p { margin: 0; color: #50534f; font-size: 17px; } .intro-copy .intro-kicker { margin: 0 0 28px; color: #111; font: 700 clamp(20px, 1.9vw, 28px)/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .01em; } .intro-copy p + p { margin-top: 26px; } .intro-copy .text-link { margin-top: 32px; font-size: 17px; } .intro-certifications { width: min(320px, 100%); margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; gap: clamp(22px, 3vw, 36px); border: 0; background: transparent; box-shadow: none; } .certification-mark { width: 118px; margin: 0; display: flex; flex: 0 0 118px; flex-direction: column; align-items: center; } .iso-certification-logo, .defense-supplier-logo { width: 118px; height: 126px; display: block; flex: 0 0 118px; object-fit: contain; object-position: center; background: transparent; } .certification-caption { display: none; margin-top: 8px; color: #30332f; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; } .solutions { background: var(--black); color: white; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; } .section-head > p { width: min(420px, 40%); margin: 0 0 10px; color: rgba(255,255,255,.58); font-size: 16px; } .solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); direction: rtl; } .solution-card { min-height: 620px; display: flex; flex-direction: column; padding: 38px clamp(28px, 3.5vw, 58px) 42px; border-top: 1px solid var(--white-line); position: relative; overflow: hidden; } .solution-card + .solution-card { border-right: 1px solid var(--white-line); } .solution-card .card-top { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 "IBM Plex Sans", Arial, sans-serif; } .solution-card .card-top i { display: block; width: 38px; height: 1px; background: currentColor; opacity: .45; } .solution-card h3 { margin: auto 0 22px; font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; letter-spacing: -.045em; } .solution-card p { margin: 0 0 28px; max-width: 430px; opacity: .68; font-weight: 400; } .solution-card .solution-logo-list { list-style: none; padding: 0; margin: 0 0 35px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 9px; direction: rtl; } .solution-card .solution-logo-list li { min-width: 0; height: 34px; padding: 3px 5px; display: grid; place-items: center; border: 0; } .solution-card .solution-logo-list a { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 2px; } .solution-card .solution-logo-list img { display: block; width: 100%; height: 100%; max-height: 26px; object-fit: contain; object-position: center; transition: opacity .2s ease; } .solution-card .solution-logo-list a:hover img, .solution-card .solution-logo-list a:focus-visible img { opacity: 1; } .solution-card .solution-logo-list a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } .solution-card .solution-logo-list .solution-logo-item--kitagawa { padding-inline: 0; } .solution-card .solution-logo-list .solution-logo-kitagawa { width: 100%; max-height: 30px; object-position: center; filter: grayscale(1) contrast(500%); mix-blend-mode: multiply; opacity: .88; } .solution-yellow .solution-logo-list, .solution-light .solution-logo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .solution-dark .solution-logo-list img { filter: grayscale(1) brightness(0) invert(1); opacity: .78; } .solution-yellow .solution-logo-list img { filter: grayscale(1) brightness(0); opacity: .72; } .solution-light .solution-logo-list img { filter: grayscale(1) brightness(0); opacity: .78; } .solution-light .solution-logo-list .solution-logo-spectrum { filter: grayscale(1) brightness(.68) contrast(1.25); opacity: .94; } .solution-card .solution-logo-list .solution-logo-kennametal { width: 118%; max-width: none; max-height: 31px; } .solution-card .solution-logo-list .solution-logo-automator { width: 106%; max-width: none; max-height: 28px; filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; opacity: .9; } .solution-card > a { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid currentColor; font-weight: 600; } .solution-card > a span { font-size: 24px; } .solution-dark { background: #101211; color: white; } .solution-yellow { background: var(--yellow); color: var(--black); } .solution-light { background: var(--cream); color: var(--black); } .solution-card .card-icon { position: absolute; top: 92px; left: clamp(28px, 3.5vw, 58px); width: 140px; height: 140px; opacity: .85; } .solution-card .card-icon.cutting-icon { width: 140px; height: 140px; opacity: 1; } .cutting-icon svg { width: 100%; height: 100%; overflow: visible; } .cutting-icon .cut-circle { fill: none; stroke: var(--yellow); stroke-width: 10; } .cutting-icon .cut-gap { fill: #101211; stroke: #101211; stroke-width: 5; stroke-linejoin: round; } .cutting-icon .cut-blade { fill: var(--yellow); } .clamp-icon { position: relative; } .clamp-icon b:first-child { position: absolute; inset: 42px 28px 18px; border: 16px solid var(--black); border-top-color: transparent; } .clamp-icon b:last-child { position: absolute; width: 56px; height: 16px; background: var(--black); right: 42px; top: 30px; } .wire-icon svg { width: 100%; height: 100%; overflow: visible; } .wire-icon .airframe-main, .wire-icon .airframe-step { fill: var(--black); } .wire-icon .airframe-signal { fill: var(--yellow); } .solutions--logo-hub .solution-card { min-height: 760px; } .solutions--logo-hub .solution-card .solution-logo-list { width: min(100%, 360px); min-height: 220px; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 64px; align-content: center; justify-content: center; gap: clamp(10px, 1vw, 14px) clamp(12px, 1.4vw, 20px); } .solutions--logo-hub #machining-solutions .solution-logo-list { min-height: 220px; grid-template-rows: repeat(3, 64px); } .solutions--logo-hub #machining-solutions .solution-logo-item--kennametal { grid-column: 1 / -1; grid-row: 1; width: calc(50% - 10px); justify-self: center; } .solutions--logo-hub #machining-solutions .solution-logo-item--jjtools { grid-column: 1; grid-row: 2; } .solutions--logo-hub #machining-solutions .solution-logo-item--arno { grid-column: 2; grid-row: 2; } .solutions--logo-hub #machining-solutions .solution-logo-item--carmex { grid-column: 1 / -1; grid-row: 3; width: calc(50% - 10px); justify-self: center; } .solutions--logo-hub .solution-card .solution-logo-list li { width: 100%; height: 64px; padding: 0; } .solutions--logo-hub .solution-card .solution-logo-list a { position: relative; width: 100%; height: 64px; border-radius: 0; } .solutions--logo-hub .solution-card .solution-logo-list img, .solutions--logo-hub .solution-card .solution-logo-list .solution-logo-kitagawa, .solutions--logo-hub .solution-card .solution-logo-list .solution-logo-kennametal, .solutions--logo-hub .solution-card .solution-logo-list .solution-logo-automator { width: clamp(112px, 11.8vw, 148px); max-width: 92%; height: clamp(48px, 5vw, 58px); max-height: 58px; object-fit: contain; object-position: center; mix-blend-mode: normal; opacity: .84; transition: filter .28s ease, opacity .28s ease, transform .28s ease; } .solutions--logo-hub .solution-light .solution-logo-list li:last-child { width: calc(50% - 9px); grid-column: 1 / -1; justify-self: center; } .solutions--logo-hub .solution-dark .solution-logo-list img { filter: grayscale(1) brightness(0) invert(1); } .solutions--logo-hub .solution-dark .solution-logo-list .solution-logo-kennametal { filter: grayscale(1) brightness(0) invert(1); opacity: .84; } .solutions--logo-hub .solution-yellow .solution-logo-list img { filter: grayscale(1) brightness(0) invert(1); opacity: .94; } .solutions--logo-hub .solution-yellow .solution-logo-list :is(.solution-logo-kitagawa, .solution-logo-automator), .solutions--logo-hub .solution-yellow .solution-logo-list :is(.solution-logo-item--fahrion, .solution-logo-item--nova) img { filter: grayscale(1) brightness(0); opacity: .88; } .solutions--logo-hub .solution-yellow .solution-logo-list .solution-logo-item--destaco img { filter: grayscale(1) brightness(0); opacity: .9; } .solutions--logo-hub .solution-light .solution-logo-list img { filter: grayscale(1) brightness(0); } .solutions--logo-hub .solution-light .solution-logo-list .solution-logo-spectrum { filter: grayscale(1) contrast(1.16); opacity: .94; } .solutions--logo-hub .solution-card .solution-logo-list a:hover img, .solutions--logo-hub .solution-card .solution-logo-list a:focus-visible img { filter: none; opacity: 1; transform: none; } .solutions--logo-hub .solution-dark .solution-logo-list :is(.solution-logo-item--carmex, .solution-logo-item--arno) a::after { content: ""; position: absolute; inset: 4px 8px; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0; transition: opacity .28s ease, transform .28s ease; } .solutions--logo-hub .solution-logo-item--carmex a::after { background-image: url("carmex-logo.png"); } .solutions--logo-hub .solution-logo-item--jjtools a::after { display: none; } .solutions--logo-hub .solution-yellow .solution-logo-list li a::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(112px, 11.8vw, 148px); max-width: 92%; height: clamp(48px, 5vw, 58px); background-image: var(--solution-hover-logo); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .28s ease, transform .28s ease; } .solutions--logo-hub .solution-logo-item--kitagawa { --solution-hover-logo: url("kitagawa-logo.png"); } .solutions--logo-hub .solution-logo-item--destaco { --solution-hover-logo: url("destaco-logo.svg?v=365"); } .solutions--logo-hub .solution-logo-item--fahrion { --solution-hover-logo: url("fahrion-logo.png"); } .solutions--logo-hub .solution-logo-item--nova { --solution-hover-logo: url("nova-grup-logo.png"); } .solutions--logo-hub .solution-logo-item--royal { --solution-hover-logo: url("royal-logo-white.png"); } .solutions--logo-hub .solution-logo-item--automator { --solution-hover-logo: url("automator/automator-logo.png"); } .solutions--logo-hub .solution-yellow .solution-logo-list li a:hover img, .solutions--logo-hub .solution-yellow .solution-logo-list li a:focus-visible img { opacity: 0; } .solutions--logo-hub .solution-yellow .solution-logo-list li a:hover::after, .solutions--logo-hub .solution-yellow .solution-logo-list li a:focus-visible::after { opacity: 1; transform: translate(-50%, -50%); } .solutions--logo-hub .solution-dark .solution-logo-list :is(.solution-logo-item--carmex, .solution-logo-item--arno) a:hover img, .solutions--logo-hub .solution-dark .solution-logo-list :is(.solution-logo-item--carmex, .solution-logo-item--arno) a:focus-visible img { opacity: 0; } .solutions--logo-hub .solution-dark .solution-logo-list :is(.solution-logo-item--carmex, .solution-logo-item--arno) a:hover::after, .solutions--logo-hub .solution-dark .solution-logo-list :is(.solution-logo-item--carmex, .solution-logo-item--arno) a:focus-visible::after { opacity: 1; } .solutions--logo-hub .solution-logo-item--arno img { width: clamp(108px, 10.6vw, 136px); max-width: 88%; height: clamp(46px, 4.7vw, 54px); filter: none; opacity: .94; } .solutions--logo-hub .solution-logo-item--arno a::after { inset: auto; left: 50%; top: 50%; width: clamp(108px, 10.6vw, 136px); max-width: 88%; height: clamp(46px, 4.7vw, 54px); background: url("arno-logo-dark-color.svg?v=238") center / contain no-repeat; transform: translate(-50%, -50%); } .solutions--logo-hub .solution-logo-item--arno a:hover img, .solutions--logo-hub .solution-logo-item--arno a:focus-visible img { opacity: 0; } .solutions--logo-hub .solution-logo-item--arno a:hover::after, .solutions--logo-hub .solution-logo-item--arno a:focus-visible::after { opacity: 1; transform: translate(-50%, -50%); } .solutions--logo-hub .solution-logo-item--royal img { width: min(122px, 84%); height: 50px; } .solutions--logo-hub .solution-logo-item--royal a::after { width: min(122px, 84%); height: 50px; } .solutions--logo-hub .solution-card > a { display: none; } @media (min-width: 781px) { .solution-card h3 { margin: 190px 0 22px; min-height: 2.06em; } .solution-card p { min-height: 4.8em; } .solution-card > a { margin-top: auto; } } .featured { position: relative; min-height: 720px; display: flex; align-items: center; background: #111; color: var(--black); direction: ltr; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .featured::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(247,246,241,0) 15%, rgba(247,246,241,.12) 32%, rgba(247,246,241,.88) 59%, rgba(247,246,241,.99) 78%); } .featured-visual { position: absolute; inset: 0; overflow: hidden; background: #111; } .featured-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(8,9,9,.08), transparent 45%); } .featured-visual > img { width: 116%; height: 100%; display: block; object-fit: cover; object-position: 42% center; transform: translateX(-14%); filter: brightness(.68) contrast(1.06); } .featured-visual > span { position: absolute; z-index: 2; left: 26px; bottom: 34px; font: 600 10.5px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .22em; color: rgba(255,255,255,.55); } .featured-content { position: relative; z-index: 2; width: min(650px, 47%); margin-left: auto; padding: clamp(70px, 8vw, 120px) clamp(46px, 7vw, 112px) clamp(70px, 8vw, 120px) 30px; direction: rtl; } .featured-label { display: inline-block; margin: 0 0 42px; padding: 7px 12px; background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 700; } #kennametal .featured-label { display: block; margin: 0 0 42px; padding: 0; background: transparent; color: var(--black); font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; } .kennametal-logo { display: block; width: min(300px, 72%); height: auto; margin: 0 0 40px auto; } .featured-content > p { max-width: 610px; margin: 0 0 38px; color: #343733; font-size: 17.5px; line-height: 1.78; font-weight: 400; } .featured-content > p.featured-label { font-weight: 700; } .product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; } .product-tags span { border: 1px solid rgba(0,0,0,.22); padding: 7px 13px; font-size: 12px; color: rgba(0,0,0,.72); } .company-link { gap: 12px; } .company-link span { font-size: 17px; } .catalog-menu a > span, .company-link > span, .contact-detail-link > span { display: none; } .featured-actions { display: flex; flex-wrap: wrap; gap: 8px; } .featured-actions .button { min-height: 48px; padding: 0 18px; font-size: 13px; white-space: nowrap; } .button-resource { color: var(--black); border-color: rgba(8,9,9,.28); background: rgba(255,255,255,.28); backdrop-filter: blur(5px); } .button-resource:hover { background: var(--yellow); border-color: var(--yellow); } .kennametal-page { background: #f3f3f1; color: var(--black); } .kennametal-page .kennametal-feature, .kennametal-page .featured, .kennametal-page .kennametal-field-videos, .kennametal-page .kennametal-heavy-hitters, .kennametal-page .kennametal-products { border: 0; background-color: #f3f3f1; } .kennametal-page .kennametal-breadcrumb { background: #f3f3f1; } .kennametal-page #kennametal .featured-visual::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: clamp(110px, 13vw, 210px); pointer-events: none; background: linear-gradient(180deg, rgba(243,243,241,0) 0%, rgba(243,243,241,.2) 30%, rgba(243,243,241,.95) 92%, #f3f3f1 100%); } .kennametal-page #kennametal .featured::after { background: linear-gradient(90deg, rgba(243,243,241,0) 15%, rgba(243,243,241,.12) 32%, rgba(243,243,241,.88) 59%, rgba(243,243,241,.99) 78%); } .kennametal-products { padding: clamp(64px, 6vw, 96px) clamp(4vw, 6.5vw, 112px); background: #f3f3f1; border-bottom: 0; direction: rtl; } .kennametal-products-head { margin-bottom: 48px; display: flex; align-items: end; justify-content: space-between; gap: 60px; } .kennametal-products h2 { margin: 0; padding: 0; display: block; border: 0; background: transparent; color: var(--black); font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; white-space: normal; } .kennametal-products-intro { width: min(390px, 34%); padding-bottom: 6px; } .kennametal-products-intro p { margin: 0 0 20px; color: #595c58; font-size: 16px; line-height: 1.7; } .kennametal-products-intro a { display: inline-flex; align-items: center; padding-bottom: 6px; border-bottom: 2px solid var(--yellow); font-weight: 700; } .kennametal-products-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; direction: ltr; } .kennametal-product-card { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #d6d7d3; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; overflow: hidden; } .kennametal-product-card:hover, .kennametal-product-card:focus-visible { transform: translateY(-5px); border-color: var(--yellow); box-shadow: 0 18px 38px rgba(8,9,9,.1); outline: 0; } .kennametal-product-image { position: relative; aspect-ratio: 1.5 / 1; display: grid; place-items: center; overflow: hidden; background: #efefed; border-bottom: 1px solid #e0e1dd; } .kennametal-product-image::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42px; height: 5px; background: var(--yellow); transition: width .24s ease; } .kennametal-product-card:hover .kennametal-product-image::after, .kennametal-product-card:focus-visible .kennametal-product-image::after { width: 100%; } .kennametal-product-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; mix-blend-mode: multiply; transition: transform .35s ease; } .kennametal-product-card:hover .kennametal-product-image img, .kennametal-product-card:focus-visible .kennametal-product-image img { transform: scale(1.025); } #kennametal-product-pcd .kennametal-product-image img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; object-position: center; } .kennametal-product-copy { position: relative; min-height: 142px; padding: 20px 20px 22px; direction: rtl; text-align: right; } .kennametal-product-copy > span { display: block; margin-bottom: 13px; color: #777a76; font: 600 10.5px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; } .kennametal-product-copy h3 { max-width: 100%; margin: 0 0 8px; color: #111; font: 700 clamp(15px, 1.25vw, 19px)/1.22 "Heebo", Arial, sans-serif; letter-spacing: -.02em; } .kennametal-product-copy p { margin: 0; color: #676a66; font-size: 12.5px; line-height: 1.5; direction: rtl; text-align: right; } .kennametal-heavy-hitters { padding: clamp(48px, 5vw, 72px) 0 clamp(42px, 4vw, 62px); overflow: hidden; background: #f3f3f1; color: var(--black); border-bottom: 0; } .heavy-hitters-head { width: auto; margin: 0 clamp(4vw, 6.5vw, 112px) 34px; display: flex; align-items: flex-end; justify-content: flex-start; direction: rtl; text-align: right; } .heavy-hitters-head h2 { margin: 0; padding: 0; border: 0; background: transparent; color: var(--black); font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; } .heavy-hitters-carousel { width: 100%; margin: 0; direction: ltr; } .heavy-hitters-viewport { position: relative; overflow: hidden; background: #090a0b; } .heavy-hitters-track { display: flex; transform: translateX(0); transition: transform .46s cubic-bezier(.22,.75,.25,1); will-change: transform; } .heavy-hitters-track.is-jumping { transition: none; } .heavy-hitter-slide { position: relative; flex: 0 0 100%; height: clamp(336px, 30vw, 480px); overflow: hidden; background: #090a0b; } .heavy-hitter-slide-beyond { background: #050607; } .heavy-hitter-slide-beyond::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(5,6,7,.99) 0%, rgba(5,6,7,.96) 27%, rgba(5,6,7,.82) 52%, rgba(5,6,7,.3) 76%, rgba(5,6,7,.14) 100%); pointer-events: none; } .heavy-hitter-slide-light { background: #f7f7f5; } .heavy-hitter-slide-light::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(247,247,245,.98) 0%, rgba(247,247,245,.92) 29%, rgba(247,247,245,.55) 48%, rgba(247,247,245,0) 70%); pointer-events: none; } .heavy-hitter-slide-added { background: #05080a; } .heavy-hitter-slide-added::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(5,8,10,.99) 0%, rgba(5,8,10,.96) 30%, rgba(5,8,10,.75) 50%, rgba(5,8,10,.28) 76%, rgba(5,8,10,.12) 100%); pointer-events: none; } .heavy-hitter-slide-added img { filter: brightness(.7) contrast(1.13) saturate(.88); } .heavy-hitter-slide picture, .heavy-hitter-slide img { width: 100%; height: 100%; display: block; } .heavy-hitter-slide img { object-fit: cover; object-position: center; transform: scale(1.06) translateX(-2%); transform-origin: center; } .heavy-hitter-slide-beyond img { object-position: right center; filter: contrast(1.08) saturate(1.04); } .heavy-hitter-content { position: absolute; z-index: 2; left: clamp(70px, 5vw, 86px); top: 50%; width: min(760px, 52%); transform: translateY(-50%); direction: ltr; text-align: left; color: #f4f4f6; } .heavy-hitter-title { width: fit-content; max-width: 100%; min-height: 54px; margin: 0 0 20px; padding: 12px 16px; box-sizing: border-box; display: inline-flex; align-items: center; background: #f4f4f6; color: #22222f; font: 800 clamp(18px, 1.45vw, 27px)/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; } .heavy-hitter-title-medium, .heavy-hitter-title-long { font-size: clamp(18px, 1.45vw, 27px); } .heavy-hitter-title a { display: flex; align-items: center; color: inherit; text-decoration: none; text-underline-offset: 4px; } .heavy-hitter-title a:hover, .heavy-hitter-title a:focus-visible { text-decoration: underline; outline: 0; } .heavy-hitter-title-dark { background: #fff; color: #22222f; } .heavy-hitter-content p { margin: 0 0 26px; color: #f4f4f6; font: 600 clamp(16px, 1.45vw, 22px)/1.4 "Heebo", Arial, sans-serif; } .heavy-hitter-slide-light .heavy-hitter-title { background: #22222f; color: #fff; } .heavy-hitter-slide-light .heavy-hitter-content p { color: #22222f; } .heavy-hitter-description { width: fit-content; direction: rtl; text-align: right; } .heavy-hitter-cta { min-height: 60px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--yellow); color: #22222f; font: 800 clamp(17px, 1.5vw, 22px)/1 "IBM Plex Sans", Arial, sans-serif; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .heavy-hitter-cta:hover, .heavy-hitter-cta:focus-visible { background: var(--yellow); filter: brightness(.96); transform: translateY(-2px); } .heavy-hitter-controls { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; direction: ltr; } .heavy-hitter-dots { display: flex; align-items: center; gap: 8px; } .heavy-hitter-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.42); cursor: pointer; transition: background .2s ease, opacity .2s ease; } .heavy-hitter-dots button:hover, .heavy-hitter-dots button:focus-visible { background: rgba(var(--yellow-rgb),.72); outline: 1px solid rgba(var(--yellow-rgb),.62); outline-offset: 3px; } .heavy-hitter-dots button.is-active { background: var(--yellow); } .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button { background: rgba(20,20,20,.35); } .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button.is-active { background: var(--yellow); } .heavy-hitter-arrow { position: absolute; z-index: 5; top: 50%; width: clamp(30px, 2.5vw, 38px); height: clamp(38px, 3vw, 48px); padding: 0; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); border: 0; background: transparent; color: rgba(255,255,255,.82); box-shadow: none; cursor: pointer; transition: color .2s ease, opacity .2s ease; } .heavy-hitter-arrow-prev { left: clamp(12px, 1.6vw, 26px); } .heavy-hitter-arrow-next { right: clamp(12px, 1.6vw, 26px); } .heavy-hitter-arrow span { margin-top: -2px; font: 200 clamp(24px, 2vw, 30px)/1 Arial, sans-serif; } .heavy-hitter-arrow:hover, .heavy-hitter-arrow:focus-visible { color: var(--yellow); background: transparent; transform: translateY(-50%); outline: 1px solid rgba(var(--yellow-rgb),.52); outline-offset: 2px; } .heavy-hitters-carousel.is-light-slide .heavy-hitter-arrow { color: rgba(20,20,20,.72); } .heavy-hitters-carousel.is-light-slide .heavy-hitter-arrow:hover, .heavy-hitters-carousel.is-light-slide .heavy-hitter-arrow:focus-visible { color: var(--black); } .kennametal-field-videos { padding: clamp(38px, 4vw, 58px) clamp(4vw, 6.5vw, 112px) clamp(48px, 4.5vw, 72px); overflow: hidden; background: #f3f3f1; color: var(--black); direction: rtl; } .kennametal-field-videos-head { margin-bottom: clamp(24px, 2.4vw, 36px); text-align: right; } .kennametal-field-videos-head h2 { margin: 0; color: var(--black); font-size: clamp(36px, 4vw, 64px); line-height: 1; letter-spacing: -.045em; font-weight: 600; } .kennametal-field-videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); direction: ltr; } .kennametal-field-video { min-width: 0; background: #000; border-bottom: 4px solid var(--yellow); } .kennametal-field-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .kennametal-field-videos-more { margin-top: clamp(22px, 2.4vw, 32px); display: flex; justify-content: flex-end; direction: rtl; } .kennametal-youtube-channel-link { padding-bottom: 6px; display: inline-flex; align-items: center; border-bottom: 2px solid var(--yellow); color: var(--black); font-size: 14px; font-weight: 700; direction: ltr; transition: color .2s ease, border-color .2s ease; } html[dir="rtl"] .kennametal-youtube-channel-link { direction: rtl; unicode-bidi: isolate; } .kennametal-youtube-channel-link:hover, .kennametal-youtube-channel-link:focus-visible { border-color: var(--black); color: var(--black); outline: 0; } body.modal-open { overflow: hidden; } .product-inquiry-modal { position: fixed; z-index: 120; inset: 0; padding: 18px; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .product-inquiry-modal[hidden] { display: none; } .product-inquiry-modal.is-open { opacity: 1; visibility: visible; } .product-inquiry-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8,9,9,.76); cursor: default; } .product-inquiry-dialog { position: relative; z-index: 1; width: min(620px, 100%); max-height: calc(100svh - 36px); padding: 26px 30px 28px; overflow-y: auto; background: #fff; color: var(--black); border-top: 5px solid var(--yellow); box-shadow: 0 24px 64px rgba(0,0,0,.32); direction: rtl; opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; } .product-inquiry-modal.is-open .product-inquiry-dialog { opacity: 1; transform: none; } .product-inquiry-close { position: absolute; top: 12px; left: 14px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid #cfd0cc; background: #fff; color: var(--black); cursor: pointer; } .product-inquiry-close:hover { border-color: var(--black); background: #f3f3f1; } .product-inquiry-close span { margin-top: -2px; font: 300 24px/1 Arial, sans-serif; } .product-inquiry-header { margin: 0 0 16px; padding-left: 34px; } .product-inquiry-header h2 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; } .product-inquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; } .product-inquiry-field { display: grid; gap: 5px; color: #393c38; font-size: 10px; font-weight: 700; letter-spacing: .025em; } .product-inquiry-field b, .product-inquiry-contact-help span { color: var(--black); font-weight: 800; } .product-inquiry-field-full { grid-column: 1 / -1; } .product-inquiry-field input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid #bfc1bd; border-radius: 0; background: #fff; color: var(--black); font: 400 14px/1.35 "Heebo", Arial, sans-serif; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .product-inquiry-field input:focus { border-color: var(--black); box-shadow: inset 4px 0 0 var(--yellow); } .product-inquiry-contact-help { grid-column: 1 / -1; margin: -5px 0 0; color: #6b6e69; font-size: 11px; line-height: 1.4; } .product-inquiry-privacy { grid-column: 1 / -1; margin: 0; color: #6b6e69; font-size: 11px; line-height: 1.5; } .product-inquiry-privacy a { margin-inline-start: 4px; color: #2f322f; font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; } .product-inquiry-submit { grid-column: 1 / -1; justify-self: start; min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--black); background: var(--black); color: #fff; font: 700 13px/1 "Heebo", Arial, sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .product-inquiry-submit:hover { border-color: var(--yellow); background: var(--yellow); color: var(--black); } .product-inquiry-submit span { font: 400 20px/1 "IBM Plex Sans", Arial, sans-serif; } .form-status { grid-column: 1 / -1; margin: 0; color: #555852; font-size: 12px; line-height: 1.5; font-weight: 600; } .form-status:empty { display: none; } .form-status[data-state="success"] { color: #17633a; } .form-status[data-state="error"] { color: #a11d1d; } .form-status:focus { outline: 2px solid var(--yellow); outline-offset: 3px; } .form-submit:disabled, .product-inquiry-submit:disabled { opacity: .68; cursor: wait; } .featured-spectrum { background: #f4f8fa; color: #102c3d; } .featured-spectrum::after { background: linear-gradient(90deg, rgba(244,248,250,0) 12%, rgba(244,248,250,.12) 38%, rgba(244,248,250,.92) 60%, #f4f8fa 79%); } .spectrum-visual { background: linear-gradient(135deg, #d8edf4 0%, #eef7fa 52%, #f4f8fa 100%); } .spectrum-visual::before { z-index: 1; background: radial-gradient(circle at 30% 43%, rgba(0,154,208,.16), transparent 28%); } .featured-visual.spectrum-visual > .spectrum-n800 { position: absolute; z-index: 2; left: 2.5%; top: 12%; width: 51%; height: 76%; display: block; object-fit: contain; object-position: left center; transform: none; filter: drop-shadow(0 28px 34px rgba(16,63,83,.2)); } .spectrum-visual > span { z-index: 3; color: rgba(0,94,132,.62); } .spectrum-content { color: #102c3d; } .spectrum-content > p { color: #3b5260; } .featured-label.spectrum-label { background: #e4002b; color: #fff; letter-spacing: .035em; } .spectrum-logo { display: block; width: min(390px, 86%); height: auto; margin: 0 0 38px auto; } .featured-spectrum .button-black { background: #e4002b; } .featured-spectrum .button-black:hover { background: #b60022; } .featured-spectrum .button-resource { color: #102c3d; border-color: rgba(16,44,61,.28); background: rgba(255,255,255,.52); } .featured-spectrum .button-resource:hover { color: #fff; background: #102c3d; border-color: #102c3d; } .featured-destaco { background: #fff; color: #281f20; } .featured-destaco::after { background: linear-gradient(90deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.94) 60%, #fff 79%); } .destaco-visual { background: #fff; } .destaco-visual::before { z-index: 1; background: none; } .featured-visual.destaco-visual > .destaco-lineup { position: absolute; z-index: 2; left: 3%; top: 10%; width: 48%; height: 80%; display: block; object-fit: contain; object-position: center; transform: none; mix-blend-mode: multiply; filter: none; } .destaco-visual > span { z-index: 3; color: rgba(142,25,32,.62); } .destaco-content { color: #281f20; } .destaco-content > p { color: #4f4243; } .featured-label.destaco-label { background: #b42222; color: #fff; letter-spacing: .035em; } .destaco-logo { display: block; width: min(360px, 82%); height: auto; margin: 0 0 40px auto; } .featured-destaco .button-black { background: #b42222; } .featured-destaco .button-black:hover { background: #8f1a1a; } .featured-destaco .button-resource { color: #281f20; border-color: rgba(40,31,32,.26); background: rgba(255,255,255,.55); } .featured-destaco .button-resource:hover { color: #fff; background: #b42222; border-color: #b42222; } .featured-nova { background: var(--yellow); color: #111; } .featured-nova::after { background: linear-gradient(90deg, rgba(var(--yellow-rgb),0) 12%, rgba(var(--yellow-rgb),.1) 38%, rgba(var(--yellow-rgb),.94) 60%, var(--yellow) 80%); } .nova-visual { background: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px), radial-gradient(circle at 30% 48%, #3d4140 0%, #1e2120 34%, #101211 68%, #090a0a 100%); background-size: 56px 56px, 56px 56px, auto; } .nova-visual::before { z-index: 1; background: radial-gradient(circle at 29% 48%, rgba(var(--yellow-rgb),.18), transparent 31%); } .nova-toolholding-mark { position: absolute; z-index: 2; left: 7%; top: 14%; width: 43%; height: 72%; filter: drop-shadow(0 30px 30px rgba(0,0,0,.34)); } .nova-toolholding-mark__ring, .nova-toolholding-mark__shank, .nova-toolholding-mark__collet { position: absolute; display: block; } .nova-toolholding-mark__ring { left: 6%; top: 10%; width: 62%; aspect-ratio: 1; border: clamp(20px, 3.4vw, 54px) solid var(--yellow); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 0 0 2px rgba(0,0,0,.4); } .nova-toolholding-mark__ring::before { content: ""; position: absolute; inset: 18%; border: clamp(8px, 1.2vw, 18px) solid #aeb3af; border-radius: 50%; background: #111; box-shadow: inset 0 0 20px #000; } .nova-toolholding-mark__shank { right: 3%; top: 36%; width: 48%; height: 28%; background: linear-gradient(180deg, #d7dad7 0%, #737a75 46%, #e5e7e5 52%, #676d69 100%); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); } .nova-toolholding-mark__collet { right: 0; top: 29%; width: 17%; height: 42%; border-radius: 8px; background: repeating-linear-gradient(90deg, #252827 0 5px, #e4e6e4 5px 10px); transform: perspective(180px) rotateY(-8deg); } .nova-visual > span { z-index: 3; color: rgba(255,255,255,.62); } .nova-content { color: #111; } .nova-content > p { color: rgba(17,17,17,.76); } .featured-label.nova-label { background: #111; color: #fff; letter-spacing: .035em; } .nova-logo { display: block; width: min(310px, 75%); height: auto; margin: 0 0 40px auto; filter: brightness(0); } .featured-nova .button-black { background: #111; } .featured-nova .button-black:hover { background: #333; } .featured-nova .button-resource { color: #111; border-color: rgba(17,17,17,.35); background: rgba(255,255,255,.28); } .featured-nova .button-resource:hover { color: #fff; background: #111; border-color: #111; } .featured-ditmco { background: #e9eff2; } .featured-ditmco::after { background: linear-gradient(90deg, rgba(247,246,241,0) 8%, rgba(247,246,241,.16) 35%, rgba(247,246,241,.9) 58%, rgba(247,246,241,1) 77%); } .ditmco-visual { background: linear-gradient(135deg, #dce7ec 0%, #edf3f5 42%, #fff 76%); } .ditmco-visual::before { z-index: 1; background: linear-gradient(90deg, rgba(9,28,39,.34) 0%, rgba(9,28,39,.25) 30%, rgba(9,28,39,.09) 48%, transparent 63%); } .featured-visual.ditmco-visual > img { position: absolute; display: block; object-fit: contain; object-position: center; transform: none; } .featured-visual.ditmco-visual > .ditmco-plane { z-index: 0; left: -4%; top: 1%; width: 62%; height: 97%; mix-blend-mode: multiply; filter: none; } .featured-visual.ditmco-visual > .ditmco-analyzer { z-index: 2; left: 28%; bottom: 7%; width: 31%; height: auto; mix-blend-mode: normal; filter: drop-shadow(0 22px 28px rgba(16,50,67,.2)); } .ditmco-visual > span { z-index: 3; color: rgba(255,255,255,.68); } .featured-label.ditmco-label { background: #1675a2; color: white; } .ditmco-logo { display: block; width: min(330px, 78%); height: auto; margin: 0 0 40px auto; } .featured-ditmco .button-black { background: #1675a2; } .featured-ditmco .button-black:hover { background: #113d58; } .featured-kitagawa { min-height: 640px; background: #f2f4f5; border-bottom: 0; } .featured-kitagawa::after { background: linear-gradient(90deg, rgba(242,244,245,0) 48%, rgba(242,244,245,.2) 55%, #f2f4f5 63%, #f2f4f5 100%); } .kitagawa-visual { background: #f2f4f5; } .kitagawa-visual::before { z-index: 1; background: none; } .featured-visual.kitagawa-visual > img { position: absolute; display: block; object-fit: contain; object-position: center; transform: none; } .featured-visual.kitagawa-visual > .kitagawa-lineup { z-index: 1; left: 4%; top: 18%; width: 44%; height: auto; object-position: left center; mix-blend-mode: multiply; filter: none; } .kitagawa-br-ajc-showcase { position: absolute; z-index: 2; left: 3%; top: 7%; width: 48%; height: 84%; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; color: inherit; text-decoration: none; pointer-events: auto; } .kitagawa-br-ajc-showcase:focus-visible { outline: 3px solid #07579f; outline-offset: 8px; } .kitagawa-br-ajc-showcase img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0,58,116,.14)); } .kitagawa-br-ajc-showcase p { margin: 12px 0 0; color: #003a74; font: 700 clamp(16px, 1.2vw, 20px)/1.3 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.015em; text-align: center; } .kitagawa-visual > span { z-index: 3; color: rgba(0,58,116,.62); } .featured-label.kitagawa-label { background: #07579f; color: white; } #kitagawa .kitagawa-content { min-height: 640px; padding-top: clamp(52px, 5.2vw, 82px); padding-bottom: clamp(48px, 5vw, 76px); } .kitagawa-logo { display: block; width: min(330px, 78%); height: auto; margin: 0 0 40px auto; } .featured-kitagawa .button-black { background: #07579f; } .featured-kitagawa .button-black:hover { background: #073f77; } .manufacturer-explorer-detail--stack { min-height: 0; background: #f2f4f5; } html.manufacturer-explorer-ready .manufacturer-explorer-detail.manufacturer-explorer-detail--stack.is-active { display: block; } .kitagawa-selected { padding: clamp(36px, 4vw, 56px) clamp(32px, 6.2vw, 104px) clamp(78px, 7vw, 112px); overflow: hidden; background: #f2f4f5; color: var(--black); border-top: 0; direction: rtl; } .kitagawa-selected-head { margin: 0 0 clamp(34px, 4vw, 54px); text-align: right; } .kitagawa-selected-head .eyebrow { margin: 0 0 13px; display: flex; align-items: center; gap: 12px; color: #07579f; font: 700 10px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .16em; } .kitagawa-selected-head .eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--yellow); } .kitagawa-selected-head h2 { margin: 0; color: #101213; font-size: clamp(38px, 4.1vw, 62px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; } .kitagawa-product-strip { width: min(1450px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.25vw, 20px); direction: ltr; } .kitagawa-product-card { position: relative; min-width: 0; min-height: 350px; display: flex; flex-direction: column; overflow: hidden; color: #101213; text-decoration: none; background: #fff; border: 1px solid #d4d8da; box-shadow: 0 10px 25px rgba(20,45,66,.04); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .kitagawa-product-card::after { content: ""; position: absolute; left: 0; right: auto; bottom: 0; width: 38px; height: 4px; background: #07579f; transition: width .25s ease; } .kitagawa-product-card:hover, .kitagawa-product-card:focus-visible { transform: translateY(-6px); border-color: #07579f; box-shadow: 0 18px 40px rgba(20,45,66,.13); outline: 0; } .kitagawa-product-card:hover::after, .kitagawa-product-card:focus-visible::after { width: 100%; } .kitagawa-product-image { height: clamp(220px, 19vw, 280px); padding: clamp(18px, 2vw, 30px); display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #f6f8f9 100%); } .kitagawa-product-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform .32s ease; } .kitagawa-product-card:hover .kitagawa-product-image img, .kitagawa-product-card:focus-visible .kitagawa-product-image img { transform: scale(1.035); } .kitagawa-product-card--power .kitagawa-product-image img { width: 94%; height: 94%; } .kitagawa-product-card--collet .kitagawa-product-image img { width: 90%; height: 90%; } .kitagawa-product-card--rotary .kitagawa-product-image img, .kitagawa-product-card--cylinder .kitagawa-product-image img, .kitagawa-product-card--gripper .kitagawa-product-image img { width: 92%; height: 92%; } .kitagawa-product-meta { min-height: 74px; padding: 19px 20px 21px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e1e3e4; background: #fff; } .kitagawa-product-meta strong { font: 700 clamp(16px, 1.3vw, 20px)/1.15 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.02em; } .kitagawa-product-meta i { color: #07579f; font: 500 24px/1 "IBM Plex Sans", Arial, sans-serif; font-style: normal; transition: transform .25s ease; } .kitagawa-product-card:hover .kitagawa-product-meta i, .kitagawa-product-card:focus-visible .kitagawa-product-meta i { transform: translate(3px, -3px); } .featured-fahrion { background: #e2e9ee; } .featured-fahrion::after { background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(245,248,250,.35) 45%, rgba(255,255,255,.96) 61%, #fff 78%); } .fahrion-visual { background: radial-gradient(circle at 28% 38%, rgba(31,83,145,.2), transparent 24%), linear-gradient(135deg, #d6e0e7 0%, #edf2f5 53%, #fff 82%); } .fahrion-visual::before { z-index: 0; background: none; mask-image: none; } .featured-visual.fahrion-visual > .fahrion-product { position: absolute; z-index: 2; display: block; width: auto; height: auto; object-fit: contain; object-position: center; transform: scale(.8); transform-origin: center; filter: drop-shadow(0 20px 25px rgba(10,35,63,.22)); } .featured-visual.fahrion-visual > .fahrion-centrop { left: 3%; top: 25%; width: 31%; } .featured-visual.fahrion-visual > .fahrion-collet { left: 38%; top: 21%; width: 12%; } .featured-visual.fahrion-visual > .fahrion-synchro { left: 20%; top: 55%; width: 24.5%; } .fahrion-visual > span { z-index: 3; color: rgba(18,66,120,.64); } .featured-label.fahrion-label { background: #164d8b; color: white; letter-spacing: .08em; } .fahrion-logo { display: block; width: min(330px, 78%); height: auto; margin: 0 0 40px auto; } .featured-fahrion .button-black { background: #164d8b; } .featured-fahrion .button-black:hover { background: #1b62aa; } #jjtools { background: #f0f2ef; } #jjtools .featured-jjtools, #jjtools .jjtools-selected { border: 0; background: #f0f2ef; } .featured-jjtools { background: #f0f2ef; } .featured-jjtools::after { background: linear-gradient(90deg, rgba(240,242,239,0) 20%, rgba(240,242,239,.12) 36%, rgba(240,242,239,.9) 57%, #f0f2ef 74%); } .jjtools-visual { background: #f0f2ef; } .jjtools-visual::before { z-index: 1; background: none; } .featured-visual.jjtools-visual > .jjtools-lineup { position: absolute; z-index: 0; left: 0; right: auto; top: -1%; bottom: auto; width: 66%; height: auto; display: block; object-fit: contain; object-position: left top; transform: rotate(180deg); transform-origin: center; filter: none; } .jjtools-visual > span { z-index: 3; color: rgba(26,29,29,.48); } .jjtools-content { margin-left: auto; margin-right: 0; padding-left: 30px; padding-right: clamp(46px, 7vw, 112px); } .featured-label.jjtools-label { background: #72b32b; color: #111; letter-spacing: .06em; } .jjtools-logo { display: block; width: min(260px, 72%); height: auto; margin: 0 0 40px auto; } .featured-jjtools .button-black { background: #72b32b; color: #111; } .featured-jjtools .button-black:hover { background: #86c83c; color: #111; } .jjtools-selected { padding-top: clamp(52px, 5vw, 76px); background: #f0f2ef; border-top: 0; } .jjtools-selected-head .eyebrow { color: #4e7f1c; } .jjtools-selected-head .eyebrow::before { background: #72b32b; } .jjtools-product-card::after { background: #72b32b; } .jjtools-product-card:hover, .jjtools-product-card:focus-visible { border-color: #72b32b; box-shadow: 0 18px 40px rgba(42,67,22,.14); } .jjtools-product-image { padding: 0; background: #0e1010; } .jjtools-product-image img { object-fit: cover; mix-blend-mode: normal; } .jjtools-product-meta { min-height: 106px; align-items: center; } .jjtools-product-meta > span { min-width: 0; display: grid; gap: 7px; } html[dir="rtl"] #jjtools .jjtools-product-meta { display: grid; align-content: center; } html[dir="rtl"] #jjtools .jjtools-product-meta > span { align-self: center; } html[dir="rtl"] #jjtools .jjtools-product-meta small { width: 100%; direction: rtl; text-align: right; unicode-bidi: plaintext; } .jjtools-product-meta strong { display: block; font-size: clamp(15px, 1.15vw, 19px); white-space: nowrap; } .jjtools-product-meta small { display: block; color: #606560; font: 500 12px/1.35 "IBM Plex Sans", Arial, sans-serif; } .jjtools-product-meta i { color: #5b9222; } .featured-cami { background: #f5f9fa; color: #15232a; } .featured-cami::after { background: linear-gradient(90deg, rgba(245,249,250,0) 12%, rgba(245,249,250,.12) 38%, rgba(245,249,250,.9) 60%, #f5f9fa 79%); } .cami-visual { background: linear-gradient(135deg, #dcecef 0%, #eef6f7 53%, #f5f9fa 100%); } .cami-visual::before { z-index: 0; background: none; mask-image: none; } .cami-products { position: absolute; z-index: 2; left: 4%; top: 29%; width: 43%; height: 50%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 5%; } .cami-products img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; filter: drop-shadow(0 22px 28px rgba(18,60,75,.2)); } .cami-visual > span { z-index: 3; color: rgba(21,91,112,.62); } .cami-content { color: #15232a; } .cami-content > p { color: #43545b; } .featured-label.cami-label { background: #c40100; color: #fff; letter-spacing: .045em; } .cami-brand-lockup { margin: 0 0 40px auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cami-logo { display: block; width: min(300px, 76%); height: auto; margin: 0; transform: translateX(28px); } .cableeye-subbrand { width: min(224px, 62%); padding: 9px 13px; display: block; background: #0b2633; } .cableeye-subbrand img { display: block; width: 100%; height: auto; aspect-ratio: 354 / 60; } .featured-cami .button-black { background: #c40100; } .featured-cami .button-black:hover { background: #9d0100; } .featured-cami .button-resource { color: #15232a; border-color: rgba(21,35,42,.28); background: rgba(255,255,255,.52); } .featured-cami .button-resource:hover { color: #fff; background: #0b2633; border-color: #0b2633; } .featured-royal { background: #0b3554; color: #fff; } .featured-royal::after { background: linear-gradient(90deg, rgba(11,53,84,0) 14%, rgba(11,53,84,.08) 34%, rgba(11,53,84,.46) 52%, rgba(11,53,84,.82) 69%, #0b3554 88%); } .royal-visual { background: radial-gradient(circle at 28% 32%, rgba(36,119,178,.11), transparent 26%), linear-gradient(145deg, #fff 0%, #f7fafc 42%, #e4edf3 60%, #b7cad7 70%, #4d7892 82%, #0b3554 100%); } .royal-visual::before { z-index: 0; background: none; mask-image: none; } .featured-visual.royal-visual > img { position: absolute; display: block; object-fit: contain; object-position: center; transform: none; mix-blend-mode: multiply; filter: none; } .featured-visual.royal-visual > .royal-group { z-index: 1; left: 2%; top: 6%; width: 48%; height: 53%; object-position: left center; } .featured-visual.royal-visual > .royal-rota-rack { z-index: 3; left: 2%; bottom: 3%; width: 31%; height: 40%; object-position: left bottom; mix-blend-mode: normal; filter: drop-shadow(0 18px 22px rgba(11,43,66,.2)); } .featured-visual.royal-visual > .royal-air-gun { z-index: 2; left: 35%; bottom: 6%; width: 15.5%; height: 24%; object-position: right bottom; mix-blend-mode: normal; filter: drop-shadow(0 14px 19px rgba(11,43,66,.18)); } .royal-visual > span { z-index: 3; color: rgba(12,79,128,.61); } .royal-content { color: #fff; } .royal-content > p { color: rgba(239,246,250,.84); } .featured-label.royal-label { background: #166aa5; color: #fff; letter-spacing: .07em; } .royal-logo { display: block; width: min(270px, 64%); height: auto; margin: 0 0 36px auto; } .featured-royal .button-black { background: #166aa5; } .featured-royal .button-black:hover { background: #2284c7; } .featured-royal .button-resource { color: #fff; border-color: rgba(255,255,255,.36); } .featured-royal .button-resource:hover { color: #041a2d; background: #fff; border-color: #fff; } .royal-mtc-feature { position: relative; min-height: 620px; padding: clamp(64px, 6.5vw, 106px) clamp(32px, 6.2vw, 104px); display: grid; grid-template-columns: minmax(330px, .82fr) minmax(620px, 1.58fr); align-items: center; gap: clamp(42px, 5vw, 88px); overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 12%, rgba(41,136,198,.34), transparent 27%), linear-gradient(118deg, #041a2d 0%, #0b3554 54%, #0c4f80 100%); border-top: 1px solid rgba(255,255,255,.14); direction: ltr; } .royal-mtc-feature::before { content: "MTC"; position: absolute; left: -28px; bottom: -74px; color: rgba(255,255,255,.035); font: 700 clamp(190px, 21vw, 340px)/.8 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.09em; pointer-events: none; } .royal-mtc-feature-copy { position: relative; z-index: 2; max-width: 560px; } .royal-mtc-kicker { margin: 0 0 24px; display: flex; align-items: center; gap: 14px; color: #69b3e7; font: 700 11px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .17em; } .royal-mtc-kicker::before { content: ""; width: 36px; height: 3px; flex: 0 0 auto; background: var(--yellow); } .royal-mtc-feature h2 { margin: 0; max-width: 640px; color: #fff; font: 600 clamp(34px, 3.4vw, 58px)/1.04 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.045em; } .royal-mtc-feature h2 span { display: block; color: #b9d9ef; } .royal-mtc-subtitle { margin: 26px 0 32px; color: rgba(255,255,255,.72); font: 500 clamp(15px, 1.25vw, 19px)/1.45 "IBM Plex Sans", Arial, sans-serif; } .royal-mtc-link { width: fit-content; min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; color: #071b2b; background: var(--yellow); border: 1px solid var(--yellow); font: 700 12px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .06em; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; } .royal-mtc-link span { font-size: 20px; transition: transform .2s ease; } .royal-mtc-link:hover, .royal-mtc-link:focus-visible { color: #fff; background: transparent; outline: 0; transform: translateY(-2px); } .royal-mtc-link:hover span, .royal-mtc-link:focus-visible span { transform: translate(3px, -3px); } .royal-mtc-gallery { position: relative; z-index: 2; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.25vw, 20px); } .royal-mtc-gallery figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #f6f8f9; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 22px 48px rgba(0,0,0,.18); transition: transform .28s ease, box-shadow .28s ease; } .royal-mtc-gallery figure:hover { transform: translateY(-7px); box-shadow: 0 30px 54px rgba(0,0,0,.27); } .royal-mtc-image { aspect-ratio: 1 / 1; overflow: hidden; background: #f6f8f9; } .royal-mtc-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .38s ease; } .royal-mtc-gallery figure:hover .royal-mtc-image img { transform: scale(1.035); } .royal-mtc-gallery figcaption { min-height: 58px; padding: 16px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #0b3554; background: #fff; font: 700 clamp(13px, 1.05vw, 16px)/1.15 "IBM Plex Sans", Arial, sans-serif; } .royal-mtc-gallery figcaption span { color: #226f9f; font-size: 10px; letter-spacing: .12em; } .royal-rota-rack-feature { position: relative; min-height: 610px; padding: clamp(64px, 6.5vw, 104px) clamp(32px, 6.2vw, 104px); display: grid; grid-template-columns: minmax(520px, 1.12fr) minmax(390px, .88fr); align-items: center; gap: clamp(46px, 6vw, 104px); overflow: hidden; color: #041a2d; background: radial-gradient(circle at 7% 11%, rgba(44,131,189,.13), transparent 30%), linear-gradient(118deg, #f7f9fa 0%, #e8f0f5 55%, #d7e4ec 100%); border-bottom: 6px solid var(--yellow); direction: ltr; } .royal-rota-rack-feature::before { content: "ROTA-RACK"; position: absolute; right: -36px; bottom: -50px; color: rgba(4,26,45,.035); font: 700 clamp(110px, 13.5vw, 220px)/.8 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.075em; white-space: nowrap; pointer-events: none; } .royal-rota-rack-visual { position: relative; z-index: 2; min-width: 0; } .royal-rota-rack-image { position: relative; min-height: 410px; padding: clamp(28px, 3.2vw, 50px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; box-shadow: 0 26px 60px rgba(4,26,45,.14); } .royal-rota-rack-image::after { content: "51002"; position: absolute; right: 18px; top: 16px; color: rgba(4,26,45,.34); font: 700 10px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .14em; } .royal-rota-rack-image img { width: 100%; max-width: 680px; height: auto; display: block; object-fit: contain; transition: transform .35s ease; } .royal-rota-rack-visual:hover .royal-rota-rack-image img { transform: scale(1.025); } .royal-rota-rack-visual > p { width: fit-content; margin: 18px 0 0 auto; padding-left: 44px; position: relative; color: #226f9f; font: 700 10px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .17em; } .royal-rota-rack-visual > p::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 2px; background: var(--yellow); } .royal-rota-rack-copy { position: relative; z-index: 2; max-width: 610px; } html[dir="rtl"] #royal .royal-rota-rack-copy { direction: rtl; text-align: right; } .royal-rota-rack-kicker { margin: 0 0 22px; color: #226f9f; font: 700 10px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .16em; } .royal-rota-rack-feature h2 { margin: 0; color: #041a2d; font: 650 clamp(42px, 4.4vw, 72px)/.95 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.052em; } .royal-rota-rack-feature h2 span { display: block; margin-top: 10px; color: #226f9f; font-size: .61em; line-height: 1.05; letter-spacing: -.035em; } .royal-rota-rack-lead { margin: 26px 0 0; color: #041a2d; font: 650 clamp(17px, 1.35vw, 21px)/1.3 "IBM Plex Sans", Arial, sans-serif; } .royal-rota-rack-description { max-width: 570px; margin: 16px 0 0; color: rgba(4,26,45,.67); font: 400 clamp(14px, 1.08vw, 17px)/1.62 "IBM Plex Sans", Arial, sans-serif; } .royal-rota-rack-stats { margin: 28px 0 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(4,26,45,.18); border-bottom: 1px solid rgba(4,26,45,.18); } .royal-rota-rack-stats div { min-width: 0; padding: 16px 14px 15px; } .royal-rota-rack-stats div + div { border-left: 1px solid rgba(4,26,45,.18); } .royal-rota-rack-stats dt { color: #0b3554; font: 700 clamp(15px, 1.25vw, 19px)/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.02em; } .royal-rota-rack-stats dd { margin: 7px 0 0; color: rgba(4,26,45,.58); font: 600 10.5px/1.25 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; } .royal-rota-rack-link { width: fit-content; min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; color: #fff; background: #0b3554; border: 1px solid #0b3554; font: 700 12px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .055em; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; } .royal-rota-rack-link span { color: var(--yellow); font-size: 20px; transition: transform .2s ease; } .royal-rota-rack-link:hover, .royal-rota-rack-link:focus-visible { color: #0b3554; background: transparent; outline: 0; transform: translateY(-2px); } .royal-rota-rack-link:hover span, .royal-rota-rack-link:focus-visible span { transform: translate(3px, -3px); } .royal-bar-pullers-feature { position: relative; padding: clamp(70px, 7vw, 112px) clamp(32px, 6.2vw, 104px) clamp(76px, 7.4vw, 122px); overflow: hidden; color: #fff; background: linear-gradient(118deg, #071b2b 0%, #0b3554 62%, #0b4168 100%); border-bottom: 6px solid var(--yellow); direction: ltr; } .royal-bar-pullers-feature::before { content: "מושכי מוט"; position: absolute; left: -18px; bottom: -45px; color: rgba(255,255,255,.027); font: 700 clamp(105px, 13vw, 210px)/.78 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.07em; white-space: nowrap; pointer-events: none; } html[lang="en"] .royal-bar-pullers-feature::before { content: "BAR PULLERS"; } .royal-bar-pullers-header { position: relative; z-index: 2; margin-bottom: clamp(38px, 4.5vw, 68px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); align-items: end; gap: clamp(34px, 5vw, 86px); } .royal-bar-pullers-header > div { max-width: 780px; } .royal-bar-pullers-kicker { margin: 0 0 18px; display: flex; align-items: center; gap: 14px; color: #69b3e7; font: 700 10px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .18em; } .royal-bar-pullers-kicker::before { content: ""; width: 34px; height: 3px; flex: 0 0 auto; background: var(--yellow); } .royal-bar-pullers-header h2 { margin: 0; color: #fff; font: 620 clamp(38px, 4vw, 68px)/.98 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.048em; } .royal-bar-pullers-header > p { max-width: 510px; margin: 0; color: rgba(239,246,250,.7); font: 400 clamp(14px, 1.12vw, 17px)/1.62 "IBM Plex Sans", Arial, sans-serif; } .royal-bar-pullers-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); } .royal-bar-puller-card { position: relative; min-width: 0; display: grid; grid-template-rows: minmax(260px, 1fr) auto; color: #0b3554; background: #fff; text-decoration: none; box-shadow: 0 22px 48px rgba(0,0,0,.17); transition: transform .28s ease, box-shadow .28s ease; } .royal-bar-puller-card:hover, .royal-bar-puller-card:focus-visible { transform: translateY(-7px); box-shadow: 0 30px 58px rgba(0,0,0,.28); outline: 2px solid var(--yellow); outline-offset: 3px; } .royal-bar-puller-image { min-height: 0; padding: clamp(28px, 3.3vw, 54px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #f3f6f8 100%); } .royal-bar-puller-image img { width: 100%; height: 100%; max-width: 390px; max-height: 300px; display: block; object-fit: contain; mix-blend-mode: multiply; transition: transform .38s ease; } .royal-bar-puller-card:hover .royal-bar-puller-image img, .royal-bar-puller-card:focus-visible .royal-bar-puller-image img { transform: scale(1.045); } .royal-bar-puller-caption { min-height: 76px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #0b3554; background: #fff; border-top: 1px solid rgba(11,53,84,.13); } .royal-bar-puller-caption strong { font: 700 clamp(18px, 1.5vw, 24px)/1.1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.025em; } .royal-bar-puller-caption > span { color: #226f9f; font: 500 22px/1 "IBM Plex Sans", Arial, sans-serif; transition: transform .2s ease; } .royal-bar-puller-card:hover .royal-bar-puller-caption > span, .royal-bar-puller-card:focus-visible .royal-bar-puller-caption > span { transform: translate(3px, -3px); } .featured-arno { background: #fff; } .featured-arno::after { background: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.18) 37%, rgba(255,255,255,.9) 57%, #fff 75%); } .arno-visual { background: #fff; } .arno-visual::before { z-index: 1; background: none; } .featured-visual.arno-visual > .arno-tooling { position: absolute; z-index: 0; left: 0; top: 0; width: 64%; height: calc(100% + 104px); display: block; object-fit: cover; object-position: 70% top; transform: scaleX(.92); transform-origin: left center; filter: none; } .arno-visual > span { z-index: 3; color: rgba(28,31,32,.5); } .arno-content { margin-left: auto; margin-right: 0; padding-left: 30px; padding-right: clamp(46px, 7vw, 112px); } .featured-label.arno-label { background: #e60001; color: #fff; letter-spacing: .075em; } .arno-logo { display: block; width: min(292px, 72%); height: auto; margin: 0 0 40px auto; } .featured-arno .button-black { background: #e60001; } .featured-arno .button-black:hover { background: #b90001; } .featured-arno .button-resource:hover { color: #fff; background: #e60001; border-color: #e60001; } #arno { background: #fff; } #arno .featured-arno { min-height: 680px; background: #fff; border: 0; } #arno .featured-arno::after { background: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.18) 37%, rgba(255,255,255,.92) 57%, #fff 75%); } #arno .arno-content { min-height: 680px; padding-top: clamp(52px, 5vw, 78px); padding-bottom: clamp(48px, 4.6vw, 72px); } .arno-recommended { padding: clamp(34px, 3.8vw, 58px) clamp(32px, 6.2vw, 104px) clamp(82px, 7vw, 116px); overflow: hidden; color: #171819; background: #fff; border: 0; direction: rtl; } .arno-recommended-head { width: min(1490px, 100%); margin: 0 auto clamp(34px, 3.8vw, 54px); text-align: right; } .arno-recommended-head p { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; color: #b90001; font: 700 10px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .17em; } .arno-recommended-head p::before { content: ""; width: 36px; height: 3px; background: #e60001; } .arno-recommended-head h2 { margin: 0; color: #171819; font-size: clamp(42px, 4.5vw, 70px); line-height: 1; letter-spacing: -.05em; font-weight: 600; } .arno-recommended-grid { width: min(1490px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); direction: ltr; } .arno-recommended-card { position: relative; min-width: 0; min-height: 520px; display: grid; grid-template-rows: minmax(360px, 1fr) auto; overflow: hidden; color: #171819; text-decoration: none; background: #f7f7f5; border: 1px solid #dedfdb; box-shadow: 0 14px 34px rgba(25,27,28,.06); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .arno-recommended-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 5px; background: #e60001; transition: width .28s ease; } .arno-recommended-card:hover, .arno-recommended-card:focus-visible { transform: translateY(-7px); border-color: #e60001; box-shadow: 0 24px 48px rgba(62,24,20,.13); outline: 0; } .arno-recommended-card:hover::after, .arno-recommended-card:focus-visible::after { width: 100%; } .arno-recommended-image { min-height: 360px; display: block; overflow: hidden; background: #fff; } .arno-recommended-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 73% center; transition: transform .42s ease; } .arno-recommended-card--deco .arno-recommended-image img { object-position: 69% center; } .arno-recommended-card--shark .arno-recommended-image img { object-position: 72% center; } .arno-recommended-card:hover .arno-recommended-image img, .arno-recommended-card:focus-visible .arno-recommended-image img { transform: scale(1.035); } .arno-recommended-copy { min-height: 144px; padding: 22px 24px 27px; display: grid; align-content: start; gap: 7px; border-top: 1px solid #e2e3df; background: #f7f7f5; } .arno-recommended-copy small { color: #b90001; font: 700 10.5px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .14em; } .arno-recommended-copy strong { color: #171819; font: 700 clamp(25px, 2vw, 34px)/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.035em; } .arno-recommended-copy > span { color: #646663; font: 500 clamp(14px, 1.05vw, 17px)/1.35 "IBM Plex Sans", Arial, sans-serif; } .arno-awl-feature { position: relative; min-height: clamp(470px, 34vw, 590px); display: grid; grid-template-columns: minmax(380px, .78fr) minmax(640px, 1.22fr); overflow: hidden; color: #fff; background: #121212; border-top: 6px solid #e60001; direction: ltr; } .arno-awl-feature::before { content: "AWL"; position: absolute; z-index: 0; left: -30px; bottom: -62px; color: rgba(255,255,255,.035); font: 700 clamp(190px, 20vw, 330px)/.8 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.08em; pointer-events: none; } .arno-awl-copy { position: relative; z-index: 2; align-self: center; padding: clamp(58px, 6.2vw, 102px) clamp(38px, 5.8vw, 92px); } .arno-awl-kicker { margin: 0 0 24px; display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.62); font: 700 10px/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .17em; } .arno-awl-kicker::before { content: ""; width: 36px; height: 3px; flex: 0 0 auto; background: #e60001; } .arno-awl-feature h2 { margin: 0; color: #fff; font: 650 clamp(44px, 4.4vw, 74px)/.95 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.052em; } .arno-awl-feature h2 span { display: block; margin-top: 12px; color: #d9d9d9; font-size: .58em; line-height: 1.04; letter-spacing: -.035em; } .arno-awl-subtitle { max-width: 560px; margin: 28px 0 34px; color: rgba(255,255,255,.76); font: 500 clamp(16px, 1.25vw, 20px)/1.45 "IBM Plex Sans", Arial, sans-serif; } .arno-awl-link { width: fit-content; min-height: 54px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; color: #fff; background: #e60001; border: 1px solid #e60001; font: 700 12px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .055em; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; } .arno-awl-link span { font-size: 20px; transition: transform .2s ease; } .arno-awl-link:hover, .arno-awl-link:focus-visible { color: #fff; background: transparent; outline: 0; transform: translateY(-2px); } .arno-awl-link:hover span, .arno-awl-link:focus-visible span { transform: translate(3px, -3px); } .arno-awl-visual { position: relative; z-index: 1; min-width: 0; min-height: 100%; display: block; overflow: hidden; background: #fff; text-decoration: none; } .arno-awl-visual::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgba(255,255,255,.15); box-shadow: inset 44px 0 62px rgba(18,18,18,.12); pointer-events: none; } .arno-awl-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 65% center; transition: transform .45s ease; } .arno-awl-visual:hover img, .arno-awl-visual:focus-visible img { transform: scale(1.025); } .arno-awl-visual:focus-visible { outline: 3px solid #e60001; outline-offset: -3px; } .arno-awl-visual > span { position: absolute; z-index: 2; right: clamp(24px, 3.3vw, 52px); bottom: 28px; padding: 10px 13px; color: #fff; background: #121212; font: 700 10.5px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .14em; } .arno-deco-feature { background: #181818; border-top: 1px solid rgba(255,255,255,.16); } .arno-deco-feature::before { content: "DECO"; left: auto; right: -40px; } .arno-deco-visual::after { border-right: 1px solid rgba(255,255,255,.15); border-left: 0; box-shadow: inset -44px 0 62px rgba(18,18,18,.1); } .arno-deco-visual img { object-position: 56% center; } .arno-deco-visual > span { right: auto; left: clamp(24px, 3.3vw, 52px); } .arno-deco-copy { padding-right: clamp(38px, 5.8vw, 92px); } .arno-shark-feature { background: #101111; border-top: 1px solid rgba(255,255,255,.16); } .arno-shark-feature::before { content: "SHARK"; left: -44px; bottom: -56px; } .arno-shark-visual img { object-position: 63% center; } .arno-shark-copy { padding-left: clamp(38px, 5.8vw, 92px); } .featured-automator { background: #f5f4f1; } .featured-automator::after { background: linear-gradient(90deg, rgba(245,244,241,0) 27%, rgba(245,244,241,.22) 42%, rgba(245,244,241,.94) 60%, #f5f4f1 78%); } .automator-visual { background: linear-gradient(135deg, #fff 0%, #f5f4f1 62%, #e8e6e1 100%); } .automator-visual::before { z-index: 1; background: none; } .featured-visual.automator-visual > .automator-product { position: absolute; display: block; width: auto; height: auto; object-fit: contain; object-position: center; transform: none; filter: none; } .featured-visual.automator-visual > .automator-visii { z-index: 1; left: 3%; top: 8%; width: 34.8%; mix-blend-mode: multiply; } .featured-visual.automator-visual > .automator-adp { z-index: 1; left: 29%; top: 21%; width: 27%; mix-blend-mode: multiply; } .featured-visual.automator-visual > .automator-colibri { z-index: 2; left: 4%; bottom: 16%; width: 27%; filter: drop-shadow(0 18px 24px rgba(57,18,18,.17)); } .featured-visual.automator-visual > .automator-numbering { z-index: 2; left: 34%; bottom: 16%; width: 18%; mix-blend-mode: multiply; filter: contrast(1.04) brightness(1.06) drop-shadow(0 14px 18px rgba(46,30,27,.1)); -webkit-mask-image: radial-gradient(ellipse 84% 84% at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 84% 84% at center, #000 62%, transparent 100%); } .automator-visual > span { z-index: 4; color: rgba(116,18,19,.62); } .featured-label.automator-label { background: #cf0c11; color: #fff; letter-spacing: .035em; } .automator-logo { display: block; width: min(360px, 82%); height: auto; margin: 0 0 38px auto; } .featured-automator .button-black { background: #cf0c11; } .featured-automator .button-black:hover { background: #a9090d; } .featured-automator .button-resource:hover { color: #fff; background: #cf0c11; border-color: #cf0c11; } .manufacturers { background: #fff; } .manufacturers { scroll-margin-top: 20px; } .manufacturers .section-head { color: var(--text); align-items: flex-end; margin-bottom: 58px; } .manufacturers .section-head h2 { padding: 0; display: block; background: transparent; font-size: clamp(34px, 3.8vw, 60px); line-height: 1.03; letter-spacing: -.045em; font-weight: 600; white-space: normal; } .filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: min(520px, 50%); } .filter { padding: 9px 15px; border: 1px solid var(--line); background: transparent; color: #585b57; cursor: pointer; font-size: 12px; } .filter:hover, .filter.active { background: var(--black); color: white; } .manufacturer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 12px; } .manufacturer { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; cursor: pointer; background: #fff; border: 1px solid #d6d7d3; overflow: hidden; transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease, opacity .25s ease; } .manufacturer::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 5px; background: var(--yellow); transition: width .24s ease; } .manufacturer:hover, .manufacturer:focus-visible { transform: none; border-color: var(--yellow); background: #fff; box-shadow: 0 18px 38px rgba(8,9,9,.1); outline: 0; } .manufacturer:hover::after, .manufacturer:focus-visible::after { width: 100%; } .manufacturer:focus-visible { position: relative; z-index: 1; } .manufacturer.hidden { display: none; } .manufacturer .brand-category { position: absolute; top: 25px; right: 26px; z-index: 2; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.25; } .manufacturer-logo-wrap { position: absolute; inset: 48px 22px 44px; display: flex; align-items: center; justify-content: center; direction: ltr; } .manufacturer-logo { display: block; width: min(192px, 70.4%); height: 69px; object-fit: contain; object-position: center; } .manufacturer-logo--royal { width: min(170px, 62%); height: 60px; filter: brightness(0); } .manufacturer small { position: absolute; left: 26px; bottom: 25px; max-width: calc(100% - 90px); direction: ltr; text-align: left; color: var(--muted); font-size: 10.5px; line-height: 1.25; } .manufacturer i { position: absolute; right: 26px; bottom: 18px; margin: 0; font-style: normal; font-size: 22px; color: var(--yellow); } .manufacturers.section-pad { padding: 0 0 clamp(76px, 7vw, 112px); } .manufacturers .section-head { margin: 0; padding: 46px clamp(5vw, 8vw, 140px) 38px; background: #fff; border-top: 1px solid var(--line); } .manufacturers .section-head h2 { font-size: clamp(32px, 3vw, 48px); } .manufacturer-grid.manufacturer-grid--grouped { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1px; direction: rtl; background: #d6d7d3; border-top: 1px solid #d6d7d3; border-bottom: 1px solid #d6d7d3; } .manufacturer-group { min-width: 0; padding: 0 12px 18px; display: flex; flex-direction: column; gap: 10px; align-self: stretch; background: #f3f3f1; } .manufacturer-group[hidden] { display: none; } .manufacturer-group-title { min-height: 66px; margin: 0 -12px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 15px; line-height: 1.2; font-weight: 600; } .manufacturer-group-title span { flex: 0 0 auto; font: 600 10px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .1em; opacity: .7; } .manufacturer-group-title b { font: inherit; text-align: start; } .manufacturer-group--machining .manufacturer-group-title { color: #fff; background: #101211; border-top: 5px solid var(--yellow); } .manufacturer-group--automation .manufacturer-group-title { color: var(--black); background: var(--yellow); border-top: 5px solid #101211; } .manufacturer-group--electronics .manufacturer-group-title { color: var(--black); background: var(--cream); border-top: 5px solid var(--yellow); } .manufacturer-grid--grouped .manufacturer { flex: 0 0 148px; min-height: 148px; } .manufacturer-grid--grouped .manufacturer .brand-category { display: none; } .manufacturer-grid--grouped .manufacturer-logo-wrap { inset: 22px 18px 37px; } .manufacturer-grid--grouped .manufacturer-logo { width: min(190px, 72%); height: 62px; } .manufacturer-grid--grouped .manufacturer-logo--royal { width: min(166px, 64%); height: 56px; } .manufacturer-grid--grouped .manufacturer small { left: 20px; bottom: 18px; } .manufacturer-grid--grouped .manufacturer i { right: 20px; bottom: 11px; } .manufacturer-grid--grouped.is-filtered { grid-template-columns: minmax(0, 1fr); } .manufacturer-grid--grouped.is-filtered .manufacturer-group { padding: 0 12px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .manufacturer-grid--grouped.is-filtered .manufacturer-group[hidden] { display: none; } .manufacturer-grid--grouped.is-filtered .manufacturer-group-title { grid-column: 1 / -1; } .manufacturer-grid--grouped.is-filtered .manufacturer { min-height: 184px; } .manufacturer-grid--anchor .manufacturer-group, .manufacturer-grid--anchor.is-filtered .manufacturer-group { min-height: 762px; padding: 0 28px 24px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 66px repeat(6, 112px); gap: 0; } .manufacturer-grid--anchor .manufacturer-group-title, .manufacturer-grid--anchor.is-filtered .manufacturer-group-title { min-height: 66px; margin: 0 -28px; } .manufacturer-grid--anchor .manufacturer-group--machining { background: #101211; } .manufacturer-grid--anchor .manufacturer-group--automation { background: var(--yellow); } .manufacturer-grid--anchor .manufacturer-group--electronics { background: var(--cream); } .manufacturer-grid--anchor .manufacturer { min-height: 0; height: auto; flex: none; background: transparent; border: 0; box-shadow: none; } .manufacturer-grid--anchor .manufacturer::after, .manufacturer-grid--anchor .manufacturer small, .manufacturer-grid--anchor .manufacturer i { display: none; } .manufacturer-grid--anchor .manufacturer-logo-wrap { inset: 0; } .manufacturer-grid--anchor .manufacturer-logo, .manufacturer-grid--anchor .manufacturer-logo--royal { width: min(210px, 72%); height: 64px; opacity: .84; transition: opacity .2s ease; } .manufacturer-grid--anchor .manufacturer-group--machining .manufacturer-logo { filter: grayscale(1) brightness(0) invert(1); } .manufacturer-grid--anchor .manufacturer-group--automation .manufacturer-logo, .manufacturer-grid--anchor .manufacturer-group--electronics .manufacturer-logo { filter: grayscale(1) brightness(0); } .manufacturer-grid--anchor .manufacturer:hover, .manufacturer-grid--anchor .manufacturer:focus-visible { border: 0; box-shadow: none; } .manufacturer-grid--anchor .manufacturer-group--machining .manufacturer:hover, .manufacturer-grid--anchor .manufacturer-group--machining .manufacturer:focus-visible { background: rgba(255,255,255,.07); } .manufacturer-grid--anchor .manufacturer-group--automation .manufacturer:hover, .manufacturer-grid--anchor .manufacturer-group--automation .manufacturer:focus-visible, .manufacturer-grid--anchor .manufacturer-group--electronics .manufacturer:hover, .manufacturer-grid--anchor .manufacturer-group--electronics .manufacturer:focus-visible { background: rgba(16,18,17,.055); } .manufacturer-grid--anchor .manufacturer:hover .manufacturer-logo, .manufacturer-grid--anchor .manufacturer:focus-visible .manufacturer-logo { opacity: 1; } .manufacturer-grid--anchor .manufacturer-group--machining .manufacturer:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; } .manufacturer-grid--anchor .manufacturer-group--automation .manufacturer:focus-visible, .manufacturer-grid--anchor .manufacturer-group--electronics .manufacturer:focus-visible { outline: 2px solid #101211; outline-offset: -2px; } .en-site .manufacturer-grid.manufacturer-grid--grouped { direction: ltr; } .manufacturer-explorer-toolbar { min-width: 0; display: grid; gap: 14px; } .manufacturer-explorer-toolbar[hidden] { display: none; } .manufacturers.is-detail-open { padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .manufacturers.is-detail-open .section-head, .manufacturers.is-detail-open .manufacturer-grid { display: none; } .manufacturer-breadcrumb { min-width: 0; border-bottom: 0; } .manufacturer-breadcrumb-list { min-width: 0; min-height: 32px; margin: 0; padding: 0 1px 9px; display: flex; align-items: center; gap: 0; overflow: hidden; list-style: none; color: #6a6d68; font-size: 12px; line-height: 1.25; } .manufacturer-breadcrumb-list li { min-width: 0; display: flex; align-items: center; white-space: nowrap; } .manufacturer-breadcrumb-list li + li::before { content: "›"; margin-inline: 10px; color: #a5a7a2; font: 400 16px/1 "IBM Plex Sans", Arial, sans-serif; } [dir="rtl"] .manufacturer-breadcrumb-list li + li::before { content: "‹"; } .manufacturer-breadcrumb a { color: var(--text); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s ease; } .manufacturer-breadcrumb a:hover, .manufacturer-breadcrumb a:focus-visible { color: var(--black); outline: 0; } .manufacturer-breadcrumb-current { overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; } .kennametal-feature { scroll-margin-top: 76px; } .kennametal-feature > .featured { border-top: 0; } .kennametal-breadcrumb { padding: 26px clamp(46px, 7vw, 112px) 14px; border-bottom: 0; background: #fff; direction: rtl; } .kennametal-breadcrumb .manufacturer-breadcrumb-list { border-bottom: 0; } .en-site .kennametal-breadcrumb { direction: ltr; } .manufacturer-explorer-rail { min-width: 0; flex: 1 1 auto; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(8,9,9,.28) transparent; scroll-snap-type: inline proximity; padding: 1px 1px 7px; } .manufacturer-explorer-rail--compact { width: 100%; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; overflow: visible; overscroll-behavior-inline: auto; scrollbar-width: none; scroll-snap-type: none; padding: 1px 0; } .manufacturer-explorer-rail--compact::-webkit-scrollbar { display: none; } .manufacturer-explorer-tab { position: relative; width: 118px; height: 68px; padding: 10px 13px; flex: 0 0 118px; display: grid; place-items: center; overflow: hidden; color: inherit; text-decoration: none; cursor: pointer; background: #fff; border: 1px solid #d6d7d3; scroll-snap-align: center; transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease; } .manufacturer-explorer-rail--compact .manufacturer-explorer-tab { width: 100%; min-width: 0; height: 68px; padding: 10px; flex: none; scroll-snap-align: none; } .manufacturer-explorer-tab::after { content: ""; position: absolute; right: 0; bottom: 0; width: 24px; height: 3px; background: var(--yellow); transition: width .24s ease; } .manufacturer-explorer-tab:hover, .manufacturer-explorer-tab:focus-visible, .manufacturer-explorer-tab.is-active { border-color: var(--yellow); background: #fff; outline: 0; box-shadow: 0 8px 22px rgba(8,9,9,.09); } .manufacturer-explorer-tab:hover::after, .manufacturer-explorer-tab:focus-visible::after, .manufacturer-explorer-tab.is-active::after { width: 100%; } .manufacturer-explorer-tab img { width: 100%; height: 40px; display: block; object-fit: contain; object-position: center; } .manufacturer-explorer-tab img.manufacturer-logo--royal { filter: brightness(0); } html.manufacturer-explorer-ready .manufacturer-explorer-detail { display: none; } html.manufacturer-explorer-ready .manufacturer-explorer-detail.is-active { display: flex; animation: manufacturer-detail-in .32s ease both; } html.manufacturer-explorer-switching { overflow-anchor: none; } .manufacturer-explorer-detail { min-height: 860px; } .manufacturer-explorer-detail .featured-content { min-height: 860px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .manufacturer-explorer-pager { position: absolute; left: 30px; right: clamp(46px, 7vw, 112px); bottom: 38px; margin: 0; display: grid; grid-template-columns: 44px 44px; align-items: center; justify-content: space-between; } .manufacturer-explorer-arrow { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: currentColor; opacity: .38; text-decoration: none; transition: opacity .2s ease, transform .2s ease; } .manufacturer-explorer-arrow--previous { justify-self: start; } .manufacturer-explorer-arrow--next { justify-self: end; } .manufacturer-explorer-arrow:hover, .manufacturer-explorer-arrow:focus-visible { opacity: .95; outline: 0; } .manufacturer-explorer-arrow--previous:hover, .manufacturer-explorer-arrow--previous:focus-visible { transform: translateX(-3px); } .manufacturer-explorer-arrow--next:hover, .manufacturer-explorer-arrow--next:focus-visible { transform: translateX(3px); } [dir="rtl"] .manufacturer-explorer-arrow--previous:hover, [dir="rtl"] .manufacturer-explorer-arrow--previous:focus-visible { transform: translateX(3px); } [dir="rtl"] .manufacturer-explorer-arrow--next:hover, [dir="rtl"] .manufacturer-explorer-arrow--next:focus-visible { transform: translateX(-3px); } .manufacturer-explorer-arrow i { font: 300 25px/1 "IBM Plex Sans", Arial, sans-serif; } @keyframes manufacturer-detail-in { from { opacity: 0; } to { opacity: 1; } } .featured[id], .solution-card[id], .contact[id] { scroll-margin-top: 76px; } .services.founder { position: relative; min-height: 520px; display: grid; grid-template-columns: .84fr 1.16fr; direction: ltr; overflow: hidden; background: #101211; color: #fff; border-top: 6px solid var(--yellow); } .services.founder::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 38%, rgba(var(--yellow-rgb),.11), transparent 40%); pointer-events: none; } .founder-portrait { position: relative; min-height: 520px; overflow: hidden; background: #101211; } .founder-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,18,17,.06) 35%, rgba(16,18,17,.68) 76%, #101211 100%); pointer-events: none; } .founder-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 29% center; image-rendering: -webkit-optimize-contrast; filter: grayscale(1) contrast(1.13) brightness(.86); mix-blend-mode: luminosity; opacity: .9; } .founder-quote { position: relative; z-index: 1; padding: 72px clamp(44px, 7vw, 104px) 66px 44px; display: flex; flex-direction: column; justify-content: center; direction: rtl; } .founder-quote .eyebrow { margin-bottom: 24px; color: rgba(255,255,255,.68); } .founder-quote blockquote { margin: 0; max-width: none; color: #fff; font-size: clamp(20px, 1.75vw, 25px); font-weight: 300; line-height: 1.28; letter-spacing: -.025em; white-space: nowrap; } .founder-quote blockquote span, .founder-quote blockquote strong { display: block; } .founder-quote blockquote strong { color: var(--yellow); font-weight: 600; } .founder-quote blockquote .quote-mark { color: var(--yellow); font-style: normal; font-weight: 500; } .founder-credit { margin: 30px 0 0; padding-top: 16px; width: min(310px, 100%); border-top: 1px solid rgba(255,255,255,.28); font-size: 17px; font-weight: 600; } .founder-credit span { display: block; margin-top: 3px; color: rgba(255,255,255,.52); font-size: 13px; font-weight: 400; } .contact { padding: clamp(88px, 9vw, 142px) clamp(5vw, 8vw, 140px); background: #fff; color: var(--black); } .contact-card { width: min(1140px, 100%); margin: 0 auto; background: #fff; } .contact-heading { max-width: 760px; margin: 0 auto clamp(58px, 6vw, 82px); text-align: center; } .contact-heading .eyebrow { margin: 0 0 14px; justify-content: center; color: #686b67; font-size: 11px; letter-spacing: .07em; } .contact-heading .eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--yellow); } .contact-heading h1, .contact-heading h2 { margin: 0; font-size: clamp(48px, 5.4vw, 72px); line-height: 1; letter-spacing: -.045em; } .contact-heading > p:not(.eyebrow) { max-width: 660px; margin: 20px auto 0; color: #5a5d59; font-size: 16px; line-height: 1.75; } .contact-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(56px, 7vw, 96px); } .contact-content, .contact-form { position: relative; z-index: 2; } .contact-content { padding-top: 0; } .contact-content h2, .contact-content h3 { margin: 0 0 22px; font-size: 15px; line-height: 1.2; letter-spacing: .06em; font-weight: 800; } .company-contact-list { margin: 0; border-top: 1px solid #d8d9d5; } .company-contact-list > div { padding: 20px 0; display: grid; grid-template-columns: 92px 1fr; gap: 18px; border-bottom: 1px solid #d8d9d5; } .company-contact-list dt { color: #202220; font-size: 14px; font-weight: 500; line-height: 1.65; letter-spacing: 0; } .company-contact-list dd { margin: 0; color: #202220; font-size: 14px; font-weight: 500; line-height: 1.65; } .company-contact-list a { text-decoration: none; } .company-contact-list, .company-contact-list a, .company-contact-list .latin { font-family: "Heebo", Arial, sans-serif; } .company-contact-list dd.latin { direction: ltr; text-align: right; } .latin, .latin-input { direction: ltr; font-family: "IBM Plex Sans", Arial, sans-serif; } .contact-sector-icons { width: 100%; margin-top: clamp(50px, 5vw, 68px); display: grid; grid-template-columns: repeat(3, 58px); align-items: center; justify-content: center; gap: clamp(26px, 3.5vw, 44px); direction: rtl; } .contact-sector-icon { position: relative; width: 58px; height: 58px; display: grid; place-items: center; opacity: 1; } .contact-sector-icon > .clamp-icon { width: 58px; height: 58px; transform: none; } .contact-sector-icon > .clamp-icon b:first-child { inset: 14px 12px 10px; border-width: 7px; } .contact-sector-icon > .clamp-icon b:last-child { width: 23px; height: 7px; right: 17px; top: 9px; } .contact-sector-icon svg { display: block; width: 100%; height: 100%; overflow: visible; } .contact-sector-icons .cut-gap { fill: #fff; stroke: #fff; stroke-width: 8; stroke-linejoin: round; } .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; } .contact-form h2, .contact-form h3 { grid-column: 1 / -1; margin: 0 0 3px; font-size: 15px; line-height: 1.2; letter-spacing: .06em; font-weight: 800; } .form-field { display: grid; gap: 8px; color: #393c38; font-size: 11px; font-weight: 700; letter-spacing: .035em; } .required-mark { color: var(--black); font-size: 1.12em; } .form-field-full { grid-column: 1 / -1; } .form-field input, .form-field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #bfc1bd; border-radius: 0; background: #fff; color: var(--black); font: 400 16px/1.4 "Heebo", Arial, sans-serif; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .form-field textarea { min-height: 154px; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--black); box-shadow: inset 4px 0 0 var(--yellow); } .form-submit { grid-column: 1 / -1; justify-self: start; min-height: 54px; margin-top: 4px; cursor: pointer; } .form-submit:hover { transform: none; } .contact-form .button-black:hover, .contact-form .button-black:focus-visible { color: var(--black); background: var(--yellow); border-color: var(--yellow); } .contact-form .button-black:focus-visible { outline-color: var(--black); } .not-found-body { min-height: 100vh; background: #f3f4f2; color: var(--black); } .not-found-main { min-height: 100vh; padding: clamp(28px, 5vw, 72px); display: grid; place-items: center; } .not-found-brand { position: absolute; inset-block-start: clamp(24px, 4vw, 48px); inset-inline-start: clamp(24px, 5vw, 72px); width: min(210px, 45vw); } .not-found-brand img { width: 100%; height: auto; display: block; } .not-found-card { width: min(720px, 100%); padding: clamp(42px, 7vw, 84px); border-block-start: 6px solid var(--yellow); background: #fff; box-shadow: 0 24px 70px rgba(8, 9, 9, .09); } .not-found-card .eyebrow { margin: 0 0 14px; color: #6b6e69; font-weight: 800; letter-spacing: .18em; } .not-found-card h1 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: 1; letter-spacing: -.04em; } .not-found-card > p:not(.eyebrow) { max-width: 590px; margin: 24px 0 0; color: #4f524e; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; } .not-found-card .not-found-english { padding-top: 20px; border-top: 1px solid var(--line); } .not-found-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; } .not-found-actions .button { min-height: 50px; } @media (max-width: 560px) { .not-found-main { padding-top: 110px; align-items: start; } .not-found-card { padding: 34px 24px; } .not-found-actions { align-items: stretch; flex-direction: column; } .not-found-actions .button { width: 100%; justify-content: center; } } :is(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--yellow) !important; outline-offset: 3px !important; } .heavy-hitter-dots { gap: 0; } .heavy-hitter-dots button, .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button { position: relative; width: 32px; height: 44px; border-radius: 0; background: transparent; } .heavy-hitter-dots button::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .46); transform: translate(-50%, -50%); } .heavy-hitter-dots button:is(:hover, :focus-visible)::before { background: rgba(var(--yellow-rgb), .82); } .heavy-hitter-dots button.is-active::before { background: var(--yellow); } .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button::before { background: rgba(20, 20, 20, .42); } .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button.is-active::before { background: var(--yellow); } .heavy-hitter-arrow, .manufacturer-chapter-arrow, .product-inquiry-close { min-width: 44px; min-height: 44px; } .kennametal-product-copy > span { color: #696c67; } .required-mark, .product-inquiry-field b, .product-inquiry-contact-help span { color: var(--black); } .privacy-notice { margin: 0; color: #696c67; font-size: 11px; font-weight: 400; line-height: 1.65; } .privacy-notice a, .contact-form-note a { color: #323431; font-weight: 700; text-decoration: none; } .contact-page { min-height: 100vh; background: var(--paper); } .contact-body .site-header { background: rgba(255,255,255,.98); } .contact-page-selected { min-height: 100vh; padding-top: clamp(148px, 12vw, 188px); padding-bottom: clamp(92px, 9vw, 138px); } .contact-hero { position: relative; min-height: 560px; padding: 170px clamp(5vw, 8vw, 140px) 95px; display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 70px; overflow: hidden; background: var(--black); color: white; } .contact-hero::before { content: ""; position: absolute; width: 620px; height: 620px; left: -120px; top: -210px; border: 92px solid rgba(var(--yellow-rgb),.12); border-radius: 50%; } .contact-hero::after { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 120px 120px; mask-image: linear-gradient(to left, #000, transparent 75%); } .contact-hero > * { position: relative; z-index: 2; } .contact-hero h1 { margin: 0; font-size: clamp(62px, 8vw, 118px); line-height: .94; letter-spacing: -.06em; } .contact-hero h1 em { display: block; color: var(--yellow); font-style: normal; font-weight: 300; } .contact-hero-copy { max-width: 520px; margin: 0 0 10px; color: rgba(255,255,255,.65); font-size: 18px; } .contact-board { padding: 0 clamp(5vw, 8vw, 140px) 120px; background: var(--paper); } .contact-board-grid { position: relative; z-index: 3; margin-top: -48px; display: grid; grid-template-columns: repeat(12, 1fr); background: white; border-top: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 24px 60px rgba(9,10,9,.08); } .contact-tile { min-height: 230px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .22s ease, color .22s ease; } .contact-tile:hover { background: var(--black); color: white; } .contact-tile.wide { grid-column: span 6; } .contact-tile.third { grid-column: span 4; } .contact-tile .contact-symbol { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--yellow); font: 600 18px/1 "IBM Plex Sans", Arial, sans-serif; } .contact-tile strong, .contact-tile address, .contact-tile p { margin: 0; font-style: normal; font-size: clamp(21px, 2.2vw, 34px); line-height: 1.25; font-weight: 600; } .contact-tile .latin { direction: ltr; text-align: right; font-family: "IBM Plex Sans", Arial, sans-serif; } .contact-tile small { margin-top: 12px; color: var(--muted); font-size: 13px; } .contact-tile:hover small { color: rgba(255,255,255,.55); } .contact-tile.route { background: var(--yellow); color: var(--black); } .contact-tile.route:hover { background: var(--yellow-bright); color: var(--black); } .contact-tile.route .contact-symbol { color: var(--black); } .contact-note { padding: 72px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .contact-note p { margin: 0; color: #555853; font-size: 17px; } .contact-minimal { min-height: 100vh; padding: 132px clamp(24px, 7vw, 120px) 104px; background: #fff; color: var(--black); } .contact-minimal-shell { width: min(1120px, 100%); margin: 0 auto; } .contact-minimal-header { max-width: 720px; margin: 0 auto; text-align: center; } .contact-minimal-header .eyebrow { margin-bottom: 12px; justify-content: center; color: #6b6e69; font-size: 11px; letter-spacing: .08em; } .contact-minimal-header .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--yellow); } .contact-minimal-header h1 { margin: 0; font-size: clamp(48px, 5.6vw, 72px); line-height: 1; letter-spacing: -.055em; font-weight: 700; } .contact-minimal-header > p:last-child { max-width: 690px; margin: 20px auto 0; color: #646762; font-size: 16px; line-height: 1.75; } .contact-minimal-grid { margin-top: 58px; display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(54px, 7vw, 94px); align-items: start; direction: ltr; } .contact-details { direction: rtl; } .contact-detail-group { padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid #d8d9d5; } .contact-detail-group h2 { margin: 0 0 13px; font-size: 13px; line-height: 1.2; letter-spacing: .08em; font-weight: 800; } .contact-detail-group address, .contact-detail-group p { margin: 0; color: #50534f; font-style: normal; font-size: 15px; line-height: 1.75; } .contact-detail-value { display: inline-block; color: var(--black); font-size: 16px; font-weight: 500; } .contact-detail-link { margin-top: 13px; display: inline-flex; align-items: center; gap: 8px; color: #4f524e; font-size: 12px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; } .contact-detail-link span { font: 500 15px/1 "IBM Plex Sans", Arial, sans-serif; } .contact-detail-group a:hover { color: var(--black); } .contact-minimal-meta { margin: 0; color: #858782; font-size: 11px; line-height: 1.85; } .contact-page-form { display: flex; flex-direction: column; gap: 19px; direction: rtl; } .contact-field { display: grid; gap: 8px; } .contact-field label { color: #393c38; font-size: 12px; font-weight: 700; letter-spacing: .035em; } .contact-field input, .contact-field textarea { width: 100%; min-height: 54px; padding: 12px 15px; border: 1px solid #bfc1bd; border-radius: 0; background: #fff; color: var(--black); font: 400 16px/1.5 "Heebo", Arial, sans-serif; outline: none; transition: border-color .18s ease, box-shadow .18s ease; } .contact-field textarea { min-height: 158px; resize: vertical; } .contact-field input:focus, .contact-field textarea:focus { border-color: var(--black); box-shadow: inset 4px 0 0 var(--yellow); } .contact-field .latin-input { text-align: left; direction: ltr; } .contact-submit { min-height: 56px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; align-self: flex-start; border: 1px solid var(--black); background: var(--black); color: #fff; font: 600 15px/1 "Heebo", Arial, sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .contact-submit:hover { border-color: var(--yellow); background: var(--yellow); color: var(--black); } .contact-submit span { font: 400 21px/1 "IBM Plex Sans", Arial, sans-serif; } .contact-form-note { max-width: 650px; margin: -4px 0 0; color: #8a8c87; font-size: 10px; line-height: 1.65; } .site-footer { padding: 0 clamp(5vw, 8vw, 140px); background: var(--yellow); color: var(--black); } .footer-main { min-height: 132px; padding: 28px 0 22px; display: grid; grid-template-columns: 240px minmax(180px, 1fr); align-items: center; gap: clamp(32px, 5vw, 90px); direction: ltr; } .footer-brand { position: relative; z-index: auto; left: calc(max(8px, calc(var(--logo-edge) - 12px)) - clamp(5vw, 8vw, 140px)); width: 218px; height: 72px; justify-content: flex-start; padding: 0; background: transparent; clip-path: none; } .footer-brand .brand-logo-shell { width: 218px; height: 60px; } .footer-tagline { position: relative; margin: 0; padding-top: 18px; direction: rtl; text-align: center; color: rgba(8,9,9,.76); font-size: 30px; font-weight: 600; line-height: 1.25; } .footer-tagline::before { content: ""; position: absolute; top: 0; left: 50%; width: 38px; height: 2px; background: rgba(8,9,9,.72); transform: translateX(-50%); } .footer-link-row { min-width: 0; flex: 1 1 720px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; direction: rtl; } .footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; direction: rtl; font-size: 14px; font-weight: 600; } .footer-nav a, .footer-legal a { position: relative; } .footer-nav a::after, .footer-legal a::after { content: ""; position: absolute; right: 0; bottom: -5px; width: 0; height: 1px; background: var(--black); transition: width .2s ease; } .footer-nav a:hover::after, .footer-nav a:focus-visible::after, .footer-legal a:hover::after, .footer-legal a:focus-visible::after { width: 100%; } .footer-bottom { min-height: 64px; padding: 20px 0 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; direction: rtl; } .footer-legal { padding-inline-start: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; border-inline-start: 1px solid rgba(8,9,9,.28); color: rgba(8,9,9,.66); font-size: 14px; font-weight: 400; } .site-footer small { flex: 0 0 auto; max-width: 100%; direction: rtl; unicode-bidi: isolate; color: var(--text); font-size: 11px; line-height: 1.6; } .footer-nav a, .footer-legal a { white-space: nowrap; } .legal-body { background: var(--paper); } .legal-body .site-header { background: rgba(255,255,255,.98); } .legal-main { min-height: 100vh; padding: 132px clamp(24px, 8vw, 140px) 88px; } .legal-shell { width: min(980px, 100%); margin: 0 auto; } .legal-heading { max-width: 780px; padding-bottom: 34px; border-bottom: 1px solid var(--line); } .legal-heading .eyebrow { margin-bottom: 12px; color: #6b6e69; } .legal-heading h1 { margin: 0; font-size: clamp(46px, 6vw, 76px); line-height: 1; letter-spacing: -.05em; font-weight: 600; } .legal-heading p { max-width: 690px; margin: 20px 0 0; color: #5d605b; font-size: 16px; line-height: 1.75; } .legal-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #6b6e69; font-size: 11px; font-weight: 600; } .legal-meta::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--yellow); } .legal-content { padding-top: 30px; } .legal-toc { padding: 0 0 26px; margin-bottom: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 24px; border-bottom: 1px solid var(--line); color: var(--black); } .legal-toc strong { font-size: 11px; color: #242624; } .legal-toc a { position: relative; padding: 7px 0; color: #666964; font-size: 12px; } .legal-toc a::after { content: ""; position: absolute; right: 0; bottom: 2px; width: 0; height: 2px; background: var(--yellow); transition: width .2s ease; } .legal-toc a:hover, .legal-toc a:focus-visible { color: var(--black); } .legal-toc a:hover::after, .legal-toc a:focus-visible::after { width: 100%; } .legal-copy { width: min(760px, 100%); min-width: 0; margin: 0 auto; } .legal-copy section { scroll-margin-top: 105px; padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); } .legal-copy h2 { margin: 0 0 12px; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.25; font-weight: 600; } .legal-copy h3 { margin: 24px 0 8px; font-size: 18px; } .legal-copy p, .legal-copy li { color: #4f524d; font-size: 15px; line-height: 1.85; } .legal-copy ul { margin: 12px 0 0; padding-inline-start: 22px; } .legal-copy a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } .legal-contact { padding: 0 0 30px; background: transparent; border-top: 0; } .legal-contact p { margin: 4px 0; } .legal-contact a { color: inherit; font-family: inherit; font-weight: 400; text-decoration: none; } .legal-note { padding: 2px 18px 2px 0; background: transparent; border-inline-start: 3px solid var(--yellow); } .search-body { background: var(--paper); } .search-body .site-header { background: rgba(255,255,255,.98); } .search-page { min-height: 100vh; padding: 158px clamp(20px, 2.5vw, 44px) 110px; } .search-page-hero { width: min(1420px, 100%); margin: 0 auto; } .search-page-hero .eyebrow { margin-bottom: 10px; color: #6b6e69; font-size: 11px; letter-spacing: .08em; } .search-page-hero .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--yellow); } .search-page-hero h1 { margin: 0; font-size: clamp(50px, 6vw, 78px); line-height: 1; letter-spacing: -.055em; font-weight: 700; } .search-page-intro { max-width: 700px; margin: 22px 0 0; color: #5f625d; font-size: 16px; line-height: 1.7; } .search-page-form { position: sticky; z-index: 35; top: 12px; width: min(1420px, 100%); margin: 30px auto 0; padding-block: 12px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 82%, rgba(244,243,238,0) 100%); } .search-page-field { min-height: 66px; padding: 0 18px; display: flex; align-items: center; gap: 16px; border: 1px solid #aeb0ac; border-bottom: 3px solid var(--yellow); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .search-page-form:focus-within .search-page-field { border-color: var(--black); box-shadow: 0 10px 30px rgba(8,9,9,.07); } .search-page-field input { min-width: 0; width: 100%; height: 60px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--black); font: 400 18px/1.3 "Heebo", Arial, sans-serif; } .search-page-field input::-webkit-search-cancel-button { display: none; } .search-page-field button { width: 40px; height: 48px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; border: 0; background: transparent; color: var(--black); cursor: pointer; } .search-page-field button svg { width: 23px; height: 23px; } .search-page-field .search-clear { width: 36px; height: 40px; flex-basis: 36px; } .search-page-form .search-recent-search { min-height: 58px; padding: 8px 12px; display: flex; align-items: center; color: var(--black); background: transparent; text-align: start; } .search-page-form .search-recent-search:hover, .search-page-form .search-recent-search:focus-visible { background: #f4f3ee; } .search-page-suggestions { top: calc(100% + 8px); width: 100%; } .search-results-section { width: min(1520px, 100%); margin: 54px auto 0; } .search-results-heading { padding-bottom: 20px; display: flex; align-items: end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); } .search-results-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; } .search-results-heading p { margin: 0; color: #666964; font-size: 13px; } .search-page-results { padding-top: 20px; display: grid; grid-template-columns: minmax(285px, .72fr) minmax(0, 1.28fr); gap: 0; } .search-page-results--single { grid-template-columns: 1fr; } .search-results-group { min-width: 0; padding: 28px 30px 34px; background: #fff; border: 1px solid rgba(8,9,9,.14); } .search-results-group--catalog { background: #fbfbfa; border-inline-start: 0; } .search-results-group-header { min-height: 82px; padding-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .search-results-group-heading-copy { display: grid; gap: 5px; } .search-results-group-heading-copy small { color: #737670; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; } .search-results-group-heading-copy h3 { margin: 0; color: var(--black); font-size: 22px; line-height: 1.2; } .search-results-group-count { color: #8a8c87; font: 650 12px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; } .search-results-group-list { display: grid; border-top: 1px solid rgba(8,9,9,.12); } .search-results-group-list--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } .search-page-result { min-height: 104px; padding: 15px 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; background: transparent; border: 0; border-bottom: 1px solid rgba(8,9,9,.1); transition: padding .18s ease, background .18s ease; } .search-page-result:hover, .search-page-result:focus-visible { padding-inline: 11px; background: rgba(var(--yellow-rgb),.09); } .search-results-group .search-result--catalog { box-shadow: none; } .search-page-result .search-result-copy { gap: 6px; } .search-page-result .search-result-copy strong { display: -webkit-box; overflow: hidden; font-size: 19px; line-height: 1.35; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .search-page-result .search-result-copy small { display: -webkit-box; overflow: hidden; font-size: 14.5px; line-height: 1.5; text-overflow: clip; white-space: normal; unicode-bidi: plaintext; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .search-page-result .search-result-type { padding: 5px 9px; border: 1px solid rgba(8,9,9,.18); font-size: 12px; line-height: 1.25; } .search-page-result.search-result--catalog .search-result-type { border-color: rgba(var(--yellow-rgb),.68); background: rgba(var(--yellow-rgb),.12); } .search-catalog-title bdi { unicode-bidi: isolate; } .search-load-more { grid-column: 1 / -1; min-width: min(320px, 100%); min-height: 50px; margin: 24px auto 0; padding: 11px 24px; border: 1px solid var(--black); background: transparent; color: var(--black); cursor: pointer; font-size: 15px; font-weight: 650; transition: background .18s ease, color .18s ease; } .search-load-more:hover, .search-load-more:focus-visible { background: var(--yellow); color: var(--black); } .search-no-results { grid-column: 1 / -1; min-height: 310px; padding: clamp(36px, 6vw, 74px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #fff; border-top: 5px solid var(--yellow); } .search-no-results > span { width: 46px; height: 46px; margin-bottom: 26px; display: grid; place-items: center; border: 1px solid var(--black); border-radius: 50%; font: 600 22px/1 "IBM Plex Sans", Arial, sans-serif; } .search-no-results h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.12; letter-spacing: -.035em; } .search-no-results p { max-width: 620px; margin: 18px 0 28px; color: #5c5f5a; font-size: 16px; } .search-no-results .button { gap: 20px; } .kennametal-product-card[id] { scroll-margin-top: 24px; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); } .reveal.visible { opacity: 1; transform: none; } @media (max-width: 1050px) { .site-header { height: 92px; grid-template-columns: 235px minmax(0, 1fr) 270px; } .brand { width: 200px; height: 92px; padding: 13px 0 16px; } .brand-logo-shell { width: 200px; height: 56px; } .site-header > .brand::before { top: 12.5px; left: max(8px, calc(var(--logo-edge) - 12px)); width: 200px; height: 60.417px; } .main-nav { gap: 9px; font-size: 14px; } .main-nav a, .nav-dropdown-toggle { padding-block: 35px; } .main-nav a::after, .nav-dropdown-toggle::after { bottom: 23px; } .brand-he { display: none; } .hero-content { width: 60vw; } .section-pad { padding: 90px 6vw; } .solution-card { min-height: 580px; padding-inline: 30px; } .manufacturer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kitagawa-product-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .royal-mtc-feature { grid-template-columns: 1fr; gap: 42px; } .royal-mtc-feature-copy { max-width: 760px; } .royal-mtc-feature h2 { max-width: 830px; } .royal-rota-rack-feature { grid-template-columns: 1fr; gap: 38px; } .royal-rota-rack-visual { max-width: 820px; } .royal-rota-rack-copy { max-width: 760px; } .royal-bar-pullers-header { grid-template-columns: 1fr; align-items: start; } .arno-awl-feature { grid-template-columns: 1fr; } .arno-awl-copy { max-width: 780px; } .arno-awl-visual { min-height: 390px; } .arno-deco-copy { grid-row: 1; } .arno-deco-visual { grid-row: 2; } .featured { grid-template-columns: .9fr 1.1fr; } .featured-content { padding-inline: 7vw; } .kennametal-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-layout { grid-template-columns: minmax(235px, .75fr) minmax(0, 1.25fr); gap: 48px; } .footer-main { grid-template-columns: 220px minmax(150px, 1fr); gap: 24px; } .footer-brand { width: 220px; height: 70px; } .footer-brand .brand-logo-shell { width: 200px; height: 56px; } .footer-link-row { gap: 16px; } .footer-nav { gap: 14px; font-size: 13px; } .footer-legal { padding-inline-start: 16px; gap: 14px; font-size: 13px; } .header-actions { gap: 10px; padding-left: 12px; } .site-search--desktop { width: 112px; } .search-page-results { grid-template-columns: 1fr; } .search-results-group--catalog { border-inline-start: 1px solid rgba(8,9,9,.14); border-top: 0; } .manufacturer-explorer-rail--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 780px) { .site-header { height: 82px; grid-template-columns: 1fr auto; background: rgba(255,255,255,.98); } .brand { width: 154px; height: 82px; padding: 12px 0 14px; } .brand-logo-shell { width: 154px; height: 50px; } .site-header > .brand::before { top: 12.75px; left: max(8px, calc(var(--logo-edge) - 12px)); width: 154px; height: 46.521px; } .menu-toggle { grid-column: 2; justify-self: end; display: flex; width: 64px; height: 82px; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border: 0; border-right: 1px solid rgba(8,9,9,.14); background: transparent; } .menu-toggle span { width: 25px; height: 1px; background: var(--black); transition: transform .2s ease; } .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); } .main-nav { position: fixed; inset: 82px 0 auto; max-height: calc(100svh - 82px); overflow-y: auto; padding: 28px 25px; display: none; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--black); color: white; border-top: 1px solid var(--white-line); direction: rtl; } .main-nav.open { display: flex; } .main-nav a { width: 100%; padding: 11px 0; font-size: 18px; } .main-nav .language-mobile { width: auto; margin: -7px 0 12px; padding: 8px 0; display: inline-flex; color: var(--yellow); font: 700 13px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; } .nav-dropdown { width: 100%; display: block; } .nav-dropdown-toggle { width: 100%; padding: 11px 0; justify-content: space-between; font-size: 18px; } .nav-dropdown-toggle::after { bottom: 5px; } .nav-panel { position: static; width: 100% !important; max-height: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: hidden; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .3s ease, padding .3s ease; } .nav-panel.open { max-height: 760px; padding: 10px 0 14px; } .nav-panel.mega-menu { position: static; top: auto; left: auto; height: auto; max-height: 0; display: block !important; direction: rtl; background: #fff; transform: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; } .nav-panel.mega-menu.open { max-height: 2200px; padding: 0; overflow-y: auto; } .mega-menu-manufacturer-grid { grid-template-columns: 1fr; } .mega-menu-group { padding: 18px 16px 20px; } .mega-menu-group-heading { min-height: 52px; } .mega-menu-group-heading strong { font-size: 18px; } .mega-menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .mega-menu--catalogs { grid-template-columns: 1fr; } .mega-menu-catalog-section { padding: 20px 16px 22px; } .mega-menu-catalog-section--featured { border-inline-start: 0; } .mega-menu-catalog-section > header { min-height: 56px; } .mega-menu-catalog-section > header strong { font-size: 18px; } .mega-menu-catalog-companies { column-gap: 14px; } .mega-menu-featured-catalogs { padding-top: 0; grid-template-columns: 1fr; } .mega-menu-featured-column { gap: 6px; } .mega-menu-featured-column + .mega-menu-featured-column { margin-top: 6px; } .mega-menu-catalog-group--series { grid-column: auto; } .mega-menu-catalog-group--series .mega-menu-catalog-links { grid-template-columns: 1fr; } .nav-panel .mega-menu-pdf-link { min-height: 60px; } .nav-dropdown:hover .nav-panel, .nav-dropdown:focus-within .nav-panel, .nav-panel.open { transform: none !important; } .nav-panel a { min-height: 46px; padding: 10px 12px; font-size: 11px; border-left: 0 !important; } .nav-panel a:nth-child(odd) { border-left: 1px solid rgba(8,9,9,.1) !important; } .nav-panel.mega-menu a:nth-child(odd) { border-left: 0 !important; } .nav-panel a strong { font-size: 11px; } .header-actions { display: none; } .site-search--mobile { width: 100%; margin-bottom: 18px; display: block; } .site-search--mobile .site-search-field { border-bottom-color: rgba(255,255,255,.45); } .site-search--mobile .site-search-input { color: #fff; font-size: 15px; } .site-search--mobile .site-search-input::placeholder { color: rgba(255,255,255,.64); } .site-search--mobile .site-search-submit { color: #fff; } .site-search--mobile .search-clear { color: rgba(255,255,255,.78); } .site-search--mobile .search-clear:hover, .site-search--mobile .search-clear:focus-visible { background: rgba(255,255,255,.12); color: #fff; } .site-search--mobile .search-suggestions { position: static; width: 100%; max-height: 310px; margin-top: 8px; box-shadow: none; } .search-page { padding: 140px 24px 76px; } .search-page-hero h1 { font-size: clamp(46px, 14vw, 62px); } .search-page-form { margin-top: 30px; } .search-page-field { min-height: 58px; padding-inline: 13px; } .search-page-field input { height: 54px; font-size: 16px; } .search-results-section { margin-top: 56px; } .search-results-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .search-page-results { grid-template-columns: 1fr; } .search-results-group { padding: 22px 18px 26px; } .search-results-group-header { min-height: 72px; } .search-results-group-list--catalog { grid-template-columns: 1fr; } .search-page-result { min-height: 82px; padding: 14px 16px; gap: 12px; } .search-page-result .search-result-copy strong { font-size: 17.5px; } .search-page-result .search-result-copy small { font-size: 13.5px; } .search-page-result .search-result-type { font-size: 11.5px; } .search-no-results { min-height: 290px; padding: 34px 25px; } .hero { min-height: 720px; align-items: flex-end; } .hero-image { background-image: linear-gradient(0deg, #080909 10%, rgba(8,9,9,.92) 48%, rgba(8,9,9,.08) 88%), url("hero-kennametal-machining.webp"); background-size: cover, auto 67%; background-position: center, 63% top; background-repeat: no-repeat; transform: none; } .hero-content { width: auto; margin: 0; padding: 120px 24px 150px; } .hero h1 { font-size: clamp(48px, 14vw, 68px); } .hero h1 em { white-space: normal; } .hero-copy { font-size: 17px; margin: 25px 0 30px; } .hero-actions { flex-wrap: wrap; gap: 24px; } .hero-index { right: 24px; bottom: 44px; flex-wrap: wrap; gap: 5px 0; } .hero-index span { font-size: 10.5px; } .intro { grid-template-columns: 1fr; gap: 20px; } .section-number { display: none; } .intro-heading { order: 2; margin-top: 18px; } .intro-certifications { width: 100%; padding: 0; gap: 20px; } .certification-mark { width: 100px; flex-basis: 100px; } .iso-certification-logo, .defense-supplier-logo { width: 100px; height: 108px; flex-basis: 100px; } .intro-copy { order: 1; } .intro-copy-text { column-count: 1; } .section-head { align-items: flex-start; flex-direction: column; } .section-head > p { width: 100%; } .solution-grid { grid-template-columns: 1fr; } .solution-card { min-height: 550px; border-right: 0 !important; } .solution-card .card-icon.cutting-icon { width: 136px; height: 136px; } .featured { grid-template-columns: 1fr; } .featured { min-height: 860px; align-items: flex-end; } .featured::after { background: linear-gradient(180deg, rgba(247,246,241,0) 10%, rgba(247,246,241,.12) 31%, rgba(247,246,241,.96) 52%, rgba(247,246,241,1) 100%); } .kennametal-page #kennametal .featured::after { background: linear-gradient(180deg, rgba(243,243,241,0) 8%, rgba(243,243,241,.12) 28%, rgba(243,243,241,.96) 51%, #f3f3f1 100%); } .kennametal-page #kennametal .featured-visual::after { height: 150px; } .featured-visual { inset: 0 0 auto; height: 470px; } .featured-visual > img { width: 116%; object-position: 42% top; transform: translateX(-14%); } .featured-content { width: 100%; margin: 0; padding: 410px 24px 76px; } .featured-label { margin-bottom: 30px; } #kennametal .featured-label { margin-bottom: 30px; } .kennametal-logo { width: min(250px, 72%); margin-bottom: 30px; } .featured-content > p { font-size: 17px; line-height: 1.72; } .featured-actions { gap: 7px; } .featured-actions .button { flex: 1 1 calc(50% - 7px); padding-inline: 14px; } .featured-actions .button:first-child { flex-basis: 100%; } .kennametal-products { padding: 58px 24px; } .kennametal-products-head { margin-bottom: 34px; align-items: flex-start; flex-direction: column; gap: 26px; } .kennametal-products h2 { padding: 0; font-size: 34px; line-height: 1.03; } .kennametal-products-intro { width: 100%; } .kennametal-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .kennametal-product-copy { min-height: 150px; padding: 18px 15px 20px; } .kennametal-product-copy h3 { max-width: 100%; font-size: 14px; } .kennametal-product-copy p { font-size: 11.5px; } .kennametal-heavy-hitters { padding: 52px 0 44px; } .heavy-hitters-head { width: auto; margin: 0 24px 28px; align-items: flex-end; } .heavy-hitters-head h2 { padding: 0; font-size: 34px; line-height: 1.03; } .heavy-hitters-carousel { width: 100%; margin: 0; } .heavy-hitter-slide { height: 462px; } .heavy-hitter-slide picture { height: 250px; } .heavy-hitter-slide img { object-fit: cover; object-position: center; } .heavy-hitter-slide-beyond img { object-position: right center; filter: contrast(1.08) saturate(1.04); } .heavy-hitter-content { left: 0; top: auto; bottom: 0; width: 100%; height: 212px; padding: 25px 22px 22px; transform: none; background: #0a0b0d; } .heavy-hitter-slide-light .heavy-hitter-content { color: #f4f4f6; } .heavy-hitter-title, .heavy-hitter-title-dark { min-height: 36px; margin-bottom: 14px; padding: 8px 10px; background: #fff; color: #22222f; font-size: clamp(10.5px, 3vw, 13px); letter-spacing: -.045em; } .heavy-hitter-title-medium, .heavy-hitter-title-long { font-size: clamp(10.5px, 3vw, 13px); } .heavy-hitter-content p { margin-bottom: 18px; font-size: 14px; } .heavy-hitter-slide-light .heavy-hitter-content p { color: #f4f4f6; } .heavy-hitter-cta { min-height: 46px; padding: 0 20px; font-size: 15px; } .heavy-hitter-slide-beyond::after { background: linear-gradient(90deg, rgba(5,6,7,.88) 0%, rgba(5,6,7,.62) 48%, rgba(5,6,7,.12) 100%); } .heavy-hitter-slide-added::after { background: linear-gradient(180deg, rgba(5,8,10,.18) 0%, rgba(5,8,10,.34) 100%); } .heavy-hitter-controls { top: 218px; bottom: auto; padding: 0; } .heavy-hitter-dots { gap: 8px; } .heavy-hitter-dots button { width: 7px; height: 7px; } .heavy-hitter-arrow { top: 125px; width: 30px; height: 36px; } .heavy-hitter-arrow-prev { left: 10px; } .kennametal-field-videos { padding: 44px 24px 52px; } .kennametal-field-videos-head { margin-bottom: 24px; } .kennametal-field-videos-head h2 { font-size: 40px; } .kennametal-field-videos-grid { margin-inline: -24px; padding: 0 24px 10px; display: flex; gap: 13px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--yellow) rgba(255,255,255,.12); } .kennametal-field-video { flex: 0 0 min(84vw, 430px); scroll-snap-align: start; } .kennametal-field-videos-more { margin-top: 20px; } .heavy-hitter-arrow-next { right: 10px; } .heavy-hitter-arrow span { font-size: 24px; } .product-inquiry-modal { padding: 10px; align-items: center; } .product-inquiry-dialog { max-height: calc(100svh - 20px); padding: 22px 18px 20px; border-top-width: 4px; } .product-inquiry-close { top: 9px; left: 10px; width: 30px; height: 30px; } .product-inquiry-header { margin-bottom: 14px; padding-left: 32px; } .product-inquiry-header h2 { font-size: 26px; } .product-inquiry-form { grid-template-columns: 1fr; gap: 10px; } .product-inquiry-field-full, .product-inquiry-contact-help, .product-inquiry-privacy, .product-inquiry-submit { grid-column: 1; } .product-inquiry-field input { min-height: 42px; } .product-inquiry-submit { width: 100%; justify-self: stretch; } .featured-spectrum { min-height: 950px; } .featured-spectrum::after { background: linear-gradient(180deg, rgba(244,248,250,0) 5%, rgba(244,248,250,.12) 27%, rgba(244,248,250,.97) 47%, #f4f8fa 100%); } .featured-spectrum .spectrum-visual { height: 445px; } .featured-visual.spectrum-visual > .spectrum-n800 { left: 5%; top: 52px; width: 90%; height: 350px; object-position: center; } .spectrum-visual > span { display: none; } .spectrum-content { padding-top: 360px; } .featured-label.spectrum-label { font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; } .spectrum-logo { width: min(300px, 84%); margin-bottom: 30px; } .featured-spectrum .featured-actions .button:last-child { flex-basis: 100%; } .featured-destaco { min-height: 950px; } .featured-destaco::after { background: linear-gradient(180deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.12) 28%, rgba(255,255,255,.97) 47%, #fff 100%); } .featured-destaco .destaco-visual { height: 445px; } .featured-visual.destaco-visual > .destaco-lineup { left: 7%; top: 52px; width: 86%; height: 350px; object-position: center; } .destaco-visual > span { display: none; } .destaco-content { padding-top: 360px; } .featured-label.destaco-label { max-width: 100%; font-size: 10.5px; letter-spacing: .02em; } .destaco-logo { width: min(285px, 82%); margin-bottom: 30px; } .featured-destaco .featured-actions .button:last-child { flex-basis: 100%; } .featured-nova { min-height: 940px; } .featured-nova::after { background: linear-gradient(180deg, rgba(var(--yellow-rgb),0) 4%, rgba(var(--yellow-rgb),.1) 27%, rgba(var(--yellow-rgb),.97) 48%, var(--yellow) 100%); } .featured-nova .nova-visual { height: 445px; } .nova-toolholding-mark { left: 5%; top: 8%; width: 90%; height: 82%; } .nova-visual > span { display: none; } .nova-content { padding-top: 370px; } .featured-label.nova-label { max-width: 100%; font-size: 10.5px; letter-spacing: .02em; } .nova-logo { width: min(260px, 76%); margin-bottom: 30px; } .featured-nova .featured-actions .button:last-child { flex-basis: 100%; } .featured-ditmco { min-height: 940px; } .featured-ditmco::after { background: linear-gradient(180deg, rgba(247,246,241,0) 8%, rgba(247,246,241,.12) 28%, rgba(247,246,241,.96) 50%, rgba(247,246,241,1) 100%); } .featured-ditmco .ditmco-visual { height: 500px; } .featured-visual.ditmco-visual > .ditmco-plane { left: -20%; top: -2%; width: 118%; height: 430px; } .featured-visual.ditmco-visual > .ditmco-analyzer { left: 42%; bottom: 22px; width: 54%; } .ditmco-content { padding-top: 430px; } .ditmco-logo { width: min(275px, 78%); margin-bottom: 30px; } .featured-kitagawa { min-height: 850px; } .featured-kitagawa::after { background: linear-gradient(180deg, rgba(242,244,245,0) 8%, rgba(242,244,245,.12) 25%, rgba(242,244,245,.97) 45%, #f2f4f5 100%); } .featured-kitagawa .kitagawa-visual { height: 400px; } .featured-visual.kitagawa-visual > .kitagawa-lineup { left: 12%; top: 76px; width: 76%; height: auto; object-position: center; } #kitagawa .kitagawa-content { min-height: 850px; padding-top: 305px; padding-bottom: 46px; } .kitagawa-logo { width: min(275px, 78%); margin-bottom: 30px; } .featured-kitagawa .featured-actions .button:last-child { flex-basis: 100%; } .kitagawa-selected { padding: 38px 20px 74px; } .kitagawa-selected-head { margin-bottom: 30px; } .kitagawa-selected-head h2 { font-size: 38px; } .kitagawa-product-strip { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: rgba(7,87,159,.4) transparent; padding: 2px 0 14px; } .kitagawa-product-card { min-width: min(78vw, 300px); min-height: 338px; flex: 0 0 min(78vw, 300px); scroll-snap-align: start; } .kitagawa-product-image { height: 252px; padding: 24px; } .kitagawa-product-meta { min-height: 72px; padding: 18px 18px 20px; } .kitagawa-product-meta strong { font-size: 18px; } .featured-fahrion { min-height: 940px; } .featured-fahrion::after { background: linear-gradient(180deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.12) 27%, rgba(255,255,255,.97) 47%, #fff 100%); } .featured-fahrion .fahrion-visual { height: 430px; } .featured-visual.fahrion-visual > .fahrion-centrop { left: 5%; top: 105px; width: 52%; } .featured-visual.fahrion-visual > .fahrion-collet { left: 70%; top: 68px; width: 21%; } .featured-visual.fahrion-visual > .fahrion-synchro { left: 25%; top: 230px; width: 46%; } .fahrion-visual > span { display: none; } .fahrion-content { padding-top: 345px; } .fahrion-logo { width: min(275px, 78%); margin-bottom: 30px; } .featured-fahrion .featured-actions .button:last-child { flex-basis: 100%; } .featured-jjtools { min-height: 960px; } .featured-jjtools::after { background: linear-gradient(180deg, rgba(240,242,239,0) 8%, rgba(240,242,239,.06) 28%, rgba(240,242,239,.96) 45%, #f0f2ef 100%); } .featured-jjtools .jjtools-visual { height: 430px; } .featured-visual.jjtools-visual > .jjtools-lineup { left: -5%; top: -1%; bottom: auto; width: 96%; height: auto; object-fit: contain; object-position: left top; transform: rotate(180deg); transform-origin: center; } .jjtools-visual > span { display: none; } .jjtools-content { padding-top: 345px; } .featured-label.jjtools-label { font-size: 10.5px; letter-spacing: .035em; white-space: nowrap; } .jjtools-logo { width: min(235px, 72%); margin-bottom: 30px; } .featured-jjtools .featured-actions .button:last-child { flex-basis: 100%; } .jjtools-selected { padding-top: 46px; } .featured-cami { min-height: 970px; } .featured-cami::after { background: linear-gradient(180deg, rgba(245,249,250,0) 5%, rgba(245,249,250,.12) 28%, rgba(245,249,250,.97) 46%, #f5f9fa 100%); } .featured-cami .cami-visual { height: 445px; } .cami-products { left: 7%; top: 102px; width: 86%; height: 250px; gap: 4%; } .cami-visual > span { display: none; } .cami-content { padding-top: 360px; } .featured-label.cami-label { font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; } .cami-brand-lockup { margin-bottom: 30px; gap: 10px; } .cami-logo { width: min(270px, 80%); transform: translateX(14px); } .cableeye-subbrand { width: min(205px, 64%); } .featured-cami .featured-actions .button:last-child { flex-basis: 100%; } .featured-royal { min-height: 1040px; } .featured-royal::after { background: linear-gradient(180deg, rgba(4,26,45,0) 6%, rgba(4,26,45,.08) 28%, rgba(4,26,45,.96) 47%, #041a2d 100%); } .featured-royal .royal-visual { height: 470px; background: radial-gradient(circle at 48% 24%, rgba(36,119,178,.13), transparent 30%), linear-gradient(180deg, #fff 0%, #f5f9fb 82%, #d9e6ee 100%); } .featured-visual.royal-visual > .royal-group { left: 2%; top: 42px; width: 96%; height: 205px; object-position: center; } .featured-visual.royal-visual > .royal-rota-rack { left: 2%; bottom: 30px; width: 54%; height: 175px; object-position: left bottom; } .featured-visual.royal-visual > .royal-air-gun { left: 65%; bottom: 60px; width: 30%; height: 100px; object-position: right bottom; } .royal-visual > span { display: none; } .royal-content { padding-top: 430px; } .featured-label.royal-label { font-size: 10.5px; letter-spacing: .035em; white-space: nowrap; } .royal-logo { width: min(230px, 64%); margin-bottom: 28px; } .featured-royal .featured-actions .button:last-child { flex-basis: 100%; } .royal-mtc-feature { min-height: 0; padding: 64px 20px 74px; gap: 36px; } .royal-mtc-feature::before { left: -18px; bottom: -28px; font-size: 150px; } .royal-mtc-kicker { margin-bottom: 18px; font-size: 10.5px; letter-spacing: .12em; } .royal-mtc-feature h2 { font-size: clamp(34px, 10.5vw, 46px); } .royal-mtc-subtitle { margin: 20px 0 26px; font-size: 15px; } .royal-mtc-gallery { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: rgba(105,179,231,.48) transparent; padding: 4px 0 15px; } .royal-mtc-gallery figure { min-width: min(78vw, 310px); flex: 0 0 min(78vw, 310px); scroll-snap-align: start; } .royal-mtc-gallery figcaption { min-height: 56px; padding: 15px 16px; font-size: 15px; } .royal-rota-rack-feature { min-height: 0; padding: 60px 20px 72px; gap: 34px; } .royal-rota-rack-feature::before { right: -18px; bottom: -14px; font-size: 92px; } .royal-rota-rack-image { min-height: 0; padding: 24px 14px; } .royal-rota-rack-visual > p { margin-top: 14px; padding-left: 37px; font-size: 10.5px; letter-spacing: .12em; } .royal-rota-rack-visual > p::before { width: 25px; } .royal-rota-rack-kicker { margin-bottom: 17px; font-size: 10.5px; letter-spacing: .11em; } .royal-rota-rack-feature h2 { font-size: clamp(40px, 12.5vw, 54px); } .royal-rota-rack-feature h2 span { margin-top: 8px; font-size: .56em; } .royal-rota-rack-lead { margin-top: 22px; font-size: 17px; } .royal-rota-rack-description { margin-top: 13px; font-size: 14px; line-height: 1.55; } .royal-rota-rack-stats { margin: 24px 0 28px; } .royal-rota-rack-stats div { padding: 14px 8px 13px; } .royal-rota-rack-stats dt { font-size: 15px; } .royal-rota-rack-stats dd { font-size: 10.5px; letter-spacing: .03em; } .royal-rota-rack-link { width: 100%; gap: 18px; } .royal-bar-pullers-feature { padding: 60px 20px 72px; } .royal-bar-pullers-feature::before { left: -12px; bottom: -12px; font-size: 88px; } .royal-bar-pullers-header { margin-bottom: 34px; gap: 20px; } .royal-bar-pullers-kicker { margin-bottom: 16px; font-size: 10.5px; letter-spacing: .13em; } .royal-bar-pullers-header h2 { font-size: clamp(38px, 11.5vw, 52px); } .royal-bar-pullers-header > p { font-size: 14px; line-height: 1.55; } .royal-bar-pullers-grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: rgba(105,179,231,.48) transparent; padding: 4px 0 15px; } .royal-bar-puller-card { min-width: min(82vw, 340px); flex: 0 0 min(82vw, 340px); grid-template-rows: 285px auto; scroll-snap-align: start; } .royal-bar-puller-image { padding: 34px; } .royal-bar-puller-caption { min-height: 68px; padding: 16px 18px; } .royal-bar-puller-caption strong { font-size: 20px; } .featured-arno { min-height: 950px; } .featured-arno::after { background: linear-gradient(180deg, rgba(255,255,255,0) 4%, rgba(255,255,255,.06) 28%, rgba(255,255,255,.96) 48%, #fff 100%); } .featured-arno .arno-visual { height: 430px; } .featured-visual.arno-visual > .arno-tooling { width: 100%; height: 492px; left: 0; top: 0; object-fit: cover; object-position: 72% top; transform: scaleX(.92); transform-origin: center; } .arno-visual > span { display: none; } .arno-content { padding-top: 355px; } .featured-label.arno-label { font-size: 10.5px; letter-spacing: .045em; white-space: nowrap; } .arno-logo { width: min(245px, 72%); margin-bottom: 30px; } .featured-arno .featured-actions .button:last-child { flex-basis: 100%; } .arno-awl-feature { min-height: 0; } .arno-awl-feature::before { left: -18px; bottom: -22px; font-size: 150px; } .arno-awl-copy { padding: 58px 20px 54px; } .arno-awl-kicker { margin-bottom: 18px; font-size: 10.5px; letter-spacing: .12em; } .arno-awl-feature h2 { font-size: clamp(42px, 13vw, 58px); } .arno-awl-feature h2 span { margin-top: 9px; font-size: .54em; line-height: 1.08; } .arno-awl-subtitle { margin: 22px 0 28px; font-size: 15px; } .arno-awl-link { width: 100%; gap: 18px; } .arno-awl-visual { min-height: 248px; } .arno-awl-visual::after { border-left: 0; box-shadow: inset 0 34px 46px rgba(18,18,18,.1); } .arno-awl-visual img { object-position: 64% center; } .arno-awl-visual > span { right: 14px; bottom: 14px; padding: 8px 9px; font-size: 10.5px; letter-spacing: .1em; } .arno-deco-feature::before { left: auto; right: -18px; } .arno-deco-visual::after { border-right: 0; box-shadow: inset 0 34px 46px rgba(18,18,18,.08); } .arno-deco-visual > span { right: auto; left: 14px; } .featured-automator { min-height: 1020px; } .featured-automator::after { background: linear-gradient(180deg, rgba(245,244,241,0) 4%, rgba(245,244,241,.12) 27%, rgba(245,244,241,.97) 48%, #f5f4f1 100%); } .featured-automator .automator-visual { height: 465px; } .featured-visual.automator-visual > .automator-visii { left: 0; top: 42px; width: 56.4%; } .featured-visual.automator-visual > .automator-adp { left: 48%; top: 100px; width: 46%; } .featured-visual.automator-visual > .automator-colibri { left: 5%; bottom: 78px; width: 42%; } .featured-visual.automator-visual > .automator-numbering { left: 57%; bottom: 84px; width: 32%; } .automator-visual > span { display: none; } .automator-content { padding-top: 390px; } .featured-label.automator-label { font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; } .automator-logo { width: min(290px, 82%); margin-bottom: 30px; } .featured-automator .featured-actions .button:last-child { flex-basis: 100%; } .manufacturers .section-head { margin: 0; padding: 38px 24px 30px; } .filters { width: 100%; justify-content: flex-start; } .manufacturer-grid.manufacturer-grid--grouped, .manufacturer-grid--grouped.is-filtered { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .manufacturer-group, .manufacturer-grid--grouped.is-filtered .manufacturer-group { padding: 0 10px 16px; display: flex; flex-direction: column; gap: 8px; } .manufacturer-group-title, .manufacturer-grid--grouped.is-filtered .manufacturer-group-title { min-height: 58px; margin: 0 -10px; padding-inline: 20px; } .manufacturer-grid--grouped .manufacturer, .manufacturer-grid--grouped.is-filtered .manufacturer { min-height: 150px; flex-basis: 150px; } .manufacturer-grid--anchor .manufacturer-group, .manufacturer-grid--anchor.is-filtered .manufacturer-group { min-height: 746px; padding: 0 20px 16px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px repeat(6, 112px); gap: 0; } .manufacturer-grid--anchor .manufacturer-group-title, .manufacturer-grid--anchor.is-filtered .manufacturer-group-title { min-height: 58px; margin: 0 -20px; } .manufacturer-grid--anchor .manufacturer { min-height: 0; height: auto; flex: none; } .manufacturer-grid--anchor .manufacturer-logo, .manufacturer-grid--anchor .manufacturer-logo--royal { width: min(210px, 72%); height: 64px; } .manufacturers.is-detail-open { padding: 18px 16px 20px; } .manufacturer-explorer-toolbar { gap: 10px; } .manufacturer-breadcrumb-list { min-height: 30px; padding-bottom: 8px; font-size: 11px; } .manufacturer-breadcrumb-list li + li::before { margin-inline: 7px; } .kennametal-breadcrumb { padding: 18px 16px 10px; } .manufacturer-explorer-rail { width: 100%; gap: 7px; padding-bottom: 5px; } .manufacturer-explorer-tab { width: 104px; height: 60px; padding: 9px 11px; flex-basis: 104px; } .manufacturer-explorer-tab img { height: 34px; } .manufacturer-explorer-rail--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; overflow: visible; padding-bottom: 0; } .manufacturer-explorer-rail--compact .manufacturer-explorer-tab { width: 100%; height: 60px; padding: 8px; flex-basis: auto; } .manufacturer-explorer-detail, .manufacturer-explorer-detail .featured-content { min-height: 1040px; } .manufacturer-explorer-pager { left: 24px; right: 24px; bottom: 22px; } .manufacturer-explorer-arrow { width: 42px; height: 42px; } .manufacturer .brand-category { top: 19px; right: 20px; font-size: 11px; } .manufacturer-logo-wrap { inset: 42px 16px 42px; } .manufacturer-logo { width: min(164px, 72%); height: 58px; } .manufacturer small { left: 20px; bottom: 21px; max-width: calc(100% - 76px); font-size: 10.5px; } .manufacturer i { right: 20px; bottom: 14px; } .services.founder { min-height: 0; grid-template-columns: 1fr; } .founder-portrait { min-height: 350px; } .founder-portrait::after { background: linear-gradient(180deg, rgba(16,18,17,.06) 42%, #101211 100%); } .founder-portrait img { height: 350px; object-position: 24% center; } .founder-quote { min-height: 410px; padding: 68px 24px 58px; } .founder-quote .eyebrow { margin-bottom: 24px; } .founder-quote blockquote { max-width: 620px; font-size: clamp(28px, 8vw, 38px); white-space: normal; } .founder-credit { margin-top: 28px; } .contact { padding: 72px 24px; } .contact-heading { margin-bottom: 46px; } .contact-heading h1, .contact-heading h2 { font-size: clamp(44px, 14vw, 60px); } .contact-heading > p:not(.eyebrow) { font-size: 15px; } .contact-layout { grid-template-columns: 1fr; gap: 50px; } .contact-content { padding-top: 0; } .contact-page-selected { padding-top: 116px; padding-bottom: 76px; } .contact-form { padding-top: 38px; grid-template-columns: 1fr; border-top: 1px solid #d8d9d5; } .form-field-full { grid-column: 1; } .contact-hero { min-height: 640px; padding: 140px 24px 90px; grid-template-columns: 1fr; align-content: end; gap: 45px; } .contact-hero h1 { font-size: clamp(60px, 18vw, 82px); } .contact-board { padding: 0 24px 85px; } .contact-board-grid { grid-template-columns: 1fr; margin-top: -34px; } .contact-tile, .contact-tile.wide, .contact-tile.third { grid-column: 1; min-height: 180px; padding: 26px; } .contact-tile strong, .contact-tile address, .contact-tile p { font-size: 24px; } .contact-note { padding-top: 48px; align-items: flex-start; flex-direction: column; } .contact-minimal { min-height: 0; padding: 104px 24px 68px; } .contact-minimal-header h1 { font-size: clamp(44px, 14vw, 60px); } .contact-minimal-header > p:last-child { font-size: 15px; } .contact-minimal-grid { grid-template-columns: 1fr; } .contact-minimal-grid { margin-top: 44px; gap: 54px; } .contact-page-form { order: 1; } .contact-details { order: 2; } .contact-submit { width: 100%; } .site-footer { padding: 0 24px; } .footer-main { min-height: 0; padding: 40px 0 30px; grid-template-columns: 1fr; justify-items: center; gap: 28px; } .footer-brand { left: calc(max(8px, calc(var(--logo-edge) - 12px)) - 24px); width: 154px; height: 62px; justify-self: start; justify-content: flex-start; } .footer-brand .brand-logo-shell { width: 154px; height: 50px; } .footer-tagline { padding-top: 16px; font-size: 28px; } .footer-link-row { flex: 0 1 auto; width: 100%; flex-wrap: wrap; justify-content: center; gap: 16px 22px; white-space: normal; } .footer-nav { flex-wrap: wrap; justify-content: center; gap: 14px 22px; } .footer-bottom { padding: 22px 0 26px; flex-direction: column; justify-content: center; gap: 18px; } .footer-legal { padding-inline-start: 0; flex-wrap: wrap; justify-content: center; gap: 14px 22px; border-inline-start: 0; } .site-footer small { text-align: center; } .legal-main { padding: 110px 24px 70px; } .legal-heading h1 { font-size: clamp(46px, 15vw, 70px); } .legal-content { padding-top: 24px; } .legal-toc { margin-bottom: 34px; gap: 3px 18px; } } .en-site { direction: ltr; font-family: "Heebo", Arial, sans-serif; } .en-site .main-nav { direction: ltr; font-size: 16px; } .en-site .main-nav a::after, .en-site .nav-dropdown-toggle::after { right: auto; left: 0; } .en-site .site-search, .en-site .site-search-input, .en-site .search-suggestions { direction: ltr; } .en-site .site-search-input, .en-site .site-search .search-suggestion { text-align: left; } .en-site .search-suggestions { right: 0; left: auto; } .en-site .site-search-input, .en-site .form-field input, .en-site .form-field textarea, .en-site .product-inquiry-field input, .en-site .search-page-field input { font-family: "Heebo", Arial, sans-serif; } .en-site .hero-content { margin-right: clamp(16px, 2.5vw, 38px); margin-left: auto; direction: ltr; text-align: left; } .en-site .hero-index { direction: ltr; } .en-site .hero-index span { border-right: 0; border-left: 1px solid rgba(255,255,255,.27); } .en-site .hero-index span:first-child { padding-right: 18px; padding-left: 0; border-left: 0; } .en-site .intro { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); } .en-site .intro-copy { grid-column: 1; grid-row: 1; } .en-site .intro-heading { grid-column: 2; grid-row: 1; } .en-site .intro-copy .intro-kicker { letter-spacing: .11em; text-transform: uppercase; } .en-site .intro-certifications { margin-left: auto; margin-right: 0; justify-content: flex-end; } .en-site .certification-caption { display: block; } .en-site .kennametal-field-videos { direction: ltr; } .en-site .kennametal-field-videos-head { text-align: left; } .en-site .kennametal-product-copy, .en-site .kennametal-product-copy > span, .en-site .kennametal-product-copy h3, .en-site .kennametal-product-copy p { direction: ltr; text-align: left; } .en-site :is( #kitagawa-selected-title, #arno-recommended-title, #jjtools-selected-title, #nova-recommended-title ) { direction: ltr; text-align: left; } .en-site .intro-copy, .en-site .solution-card, .en-site .featured-content, .en-site .kennametal-products, .en-site .heavy-hitters-head, .en-site .heavy-hitter-description, .en-site .product-inquiry-dialog, .en-site .contact-content, .en-site .contact-form, .en-site .legal-main, .en-site .search-page { direction: ltr; text-align: left; } .en-site .solution-grid, .en-site .solution-card .solution-logo-list { direction: ltr; } .en-site .solution-card h3 { font-size: clamp(31px, 3.25vw, 52px); letter-spacing: -.035em; } .en-site .solution-card + .solution-card { border-right: 0; border-left: 1px solid var(--white-line); } .en-site .kennametal-logo, .en-site .ditmco-logo, .en-site .kitagawa-logo, .en-site .jjtools-logo, .en-site .fahrion-logo, .en-site .cami-brand-lockup, .en-site .royal-logo, .en-site .arno-logo, .en-site .automator-logo, .en-site .spectrum-logo, .en-site .destaco-logo { margin-left: 0; margin-right: auto; } .en-site .product-inquiry-close { left: auto; right: 14px; } .en-site .product-inquiry-header { padding-left: 0; padding-right: 34px; } .en-site .manufacturer .brand-category { right: auto; left: 26px; } .en-site .manufacturer i { right: 26px; left: auto; } .en-site .founder-quote { direction: ltr; text-align: left; } .en-site .company-contact-list dd.latin { text-align: left; } .en-site .company-contact-list > div { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; } .en-site .company-registration-label span { display: block; } .en-site .company-registration-label span:last-child { white-space: nowrap; } .en-site .contact-sector-icons, .en-site .footer-tagline, .en-site .footer-link-row, .en-site .footer-nav, .en-site .footer-bottom, .en-site .site-footer small { direction: ltr; } .en-site .footer-link-row { justify-content: flex-start; } .en-site .footer-nav a::after, .en-site .footer-legal a::after, .en-site .legal-toc a::after { right: auto; left: 0; } .en-site .text-link:hover span { transform: translateX(5px); } @media (max-width: 780px) { .en-site .main-nav { direction: ltr; } .en-site .hero-content { margin: 0; } .en-site .hero-index { right: auto; left: 24px; } .en-site .intro { grid-template-columns: 1fr; } .en-site .intro-copy, .en-site .intro-heading { grid-column: 1; grid-row: auto; } .en-site .intro-certifications { margin-left: 0; justify-content: flex-start; } .en-site .manufacturer .brand-category { left: 20px; right: auto; } .en-site .solution-card + .solution-card { border-left: 0; } } #royal { --royal-surface: #eaf1f5; background: #eaf1f5; } #royal > section { border: 0 !important; } #royal .featured-royal, #royal .royal-mtc-feature, #royal .royal-rota-rack-feature, #royal .royal-bar-pullers-feature { background: transparent; } #royal .featured-royal { min-height: 640px; color: #041a2d; } #royal .featured-royal::after { background: linear-gradient(90deg, rgba(237,243,246,0) 18%, rgba(237,243,246,.18) 38%, rgba(237,243,246,.94) 60%, #edf3f6 79%); } #royal .royal-visual { background: transparent; } #royal .featured-visual.royal-visual > .royal-group { left: 7.1%; top: 15.8%; width: 40.8%; height: 62.4%; object-position: left center; mix-blend-mode: multiply; } #royal .featured-visual.royal-visual > .royal-rota-rack, #royal .featured-visual.royal-visual > .royal-air-gun { display: none; } #royal .royal-content { padding-top: clamp(50px, 5vw, 72px); padding-bottom: clamp(50px, 5vw, 72px); color: #041a2d; } #royal .featured-content { min-height: 0; } #royal .royal-content > p { margin-bottom: 28px; color: rgba(4,26,45,.72); } #royal .featured-label.royal-label { margin-bottom: 28px; color: #111; } #royal .royal-logo { margin-bottom: 28px; filter: brightness(0) saturate(100%) invert(14%) sepia(27%) saturate(1451%) hue-rotate(163deg) brightness(92%) contrast(99%); } #royal .manufacturer-explorer-pager { bottom: 16px; } #royal .featured-royal .button-resource { color: #041a2d; border-color: rgba(4,26,45,.28); background: rgba(255,255,255,.32); } #royal .featured-royal .button-resource:hover, #royal .featured-royal .button-resource:focus-visible { color: var(--arnold-ink); background: var(--yellow); border-color: var(--yellow); } #royal .royal-mtc-feature { min-height: 0; padding: clamp(44px, 4vw, 64px) clamp(32px, 6.2vw, 104px); gap: clamp(30px, 4vw, 60px); color: #041a2d; } #royal .royal-mtc-feature::before { bottom: -24px; color: rgba(11,53,84,.09); } #royal .royal-mtc-kicker { color: #226f9f; } #royal .royal-mtc-feature h2 { color: #041a2d; } #royal .royal-mtc-feature h2 span { color: #226f9f; } #royal .royal-mtc-subtitle { margin: 20px 0 24px; color: rgba(4,26,45,.66); } #royal .royal-mtc-link { justify-content: center; gap: 0; color: #fff; background: #0b3554; border-color: #0b3554; } #royal .royal-mtc-link:hover, #royal .royal-mtc-link:focus-visible { color: #0b3554; background: transparent; } #royal .royal-mtc-gallery { gap: clamp(18px, 2.3vw, 38px); border: 0; } #royal .royal-mtc-gallery figure { overflow: visible; background: transparent; border: 0; box-shadow: none; } #royal .royal-mtc-gallery figure + figure { border-left: 0; } #royal .royal-mtc-gallery figure:hover { box-shadow: none; } #royal .royal-mtc-image, #royal .royal-mtc-gallery figcaption { background: transparent; } #royal .royal-mtc-image { overflow: visible; } #royal .royal-mtc-image img { object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 20px 22px rgba(4,26,45,.16)); } #royal .royal-mtc-gallery figcaption { min-height: 0; padding: 16px 0 0; justify-content: center; text-align: center; } #royal .royal-mtc-gallery figcaption span { display: none; } #royal .royal-rota-rack-feature { min-height: 0; padding: clamp(44px, 4vw, 64px) clamp(32px, 6.2vw, 104px); gap: clamp(32px, 4.5vw, 72px); color: #041a2d; } #royal .royal-rota-rack-image { min-height: 0; padding: 0; background: transparent; box-shadow: none; } #royal .royal-rota-rack-image img { max-width: 720px; mix-blend-mode: normal; filter: drop-shadow(0 22px 28px rgba(4,26,45,.14)); } #royal .royal-rota-rack-image::after { display: none; } #royal .royal-rota-rack-kicker { margin-bottom: 16px; } #royal .royal-rota-rack-lead { margin-top: 18px; } #royal .royal-rota-rack-description { margin-top: 12px; } #royal .royal-rota-rack-description + .royal-rota-rack-link { margin-top: 24px; } #royal .royal-rota-rack-link { color: #fff; background: var(--arnold-ink); border-color: var(--arnold-ink); } #royal .royal-rota-rack-link:hover, #royal .royal-rota-rack-link:focus-visible { color: var(--arnold-ink); background: var(--yellow); border-color: var(--yellow); } #royal .royal-rota-rack-stats { margin: 20px 0 24px; } #royal .royal-rota-rack-stats div { padding-top: 12px; padding-bottom: 12px; } #royal .royal-bar-pullers-feature { padding: clamp(46px, 4.2vw, 66px) clamp(32px, 6.2vw, 104px) clamp(50px, 4.6vw, 72px); color: #041a2d; } #royal .royal-bar-pullers-feature::before { color: rgba(11,53,84,.03); } #royal .royal-bar-pullers-kicker { color: #226f9f; } #royal .royal-bar-pullers-header { margin-bottom: clamp(26px, 3vw, 42px); gap: clamp(26px, 4vw, 62px); } #royal .royal-bar-pullers-header h2 { color: #041a2d; } #royal .royal-bar-pullers-feature[dir="rtl"] .royal-bar-pullers-header h2 { direction: rtl; text-align: right; } #royal .royal-bar-pullers-header > p { color: rgba(4,26,45,.68); } #royal .royal-bar-pullers-grid { gap: clamp(24px, 3vw, 52px); border: 0; } #royal .royal-bar-puller-card { color: #0b3554; background: transparent; box-shadow: none; grid-template-rows: minmax(270px, 1fr) auto; } #royal .royal-bar-puller-card + .royal-bar-puller-card { border-left: 0; } #royal .royal-bar-puller-card:hover, #royal .royal-bar-puller-card:focus-visible { box-shadow: none; outline: 0; } #royal .royal-bar-puller-card:focus-visible { box-shadow: 0 0 0 3px rgba(44,131,189,.42); } #royal .royal-bar-puller-image, #royal .royal-bar-puller-caption { background: transparent; border: 0; } #royal .royal-bar-puller-image { padding: 20px 6px 8px; } #royal .royal-bar-puller-image img { max-width: 430px; max-height: 330px; mix-blend-mode: normal; filter: drop-shadow(0 18px 18px rgba(4,26,45,.14)); } #royal .royal-bar-puller-caption { min-height: 58px; padding: 12px 0 0; justify-content: center; text-align: center; } .company-link > span, .kitagawa-product-meta > i, .royal-mtc-link > span, .royal-rota-rack-link > span, .royal-bar-puller-caption > span, .arno-awl-link > span { display: none !important; } .royal-mtc-link, .royal-rota-rack-link, .arno-awl-link { justify-content: center; gap: 0; } .kitagawa-product-meta { justify-content: flex-start; } #kitagawa .kitagawa-product-meta { justify-content: center; text-align: center; } #kitagawa .kitagawa-product-meta strong { width: 100%; text-align: center; } .featured-content > :is( .kennametal-logo, .ditmco-logo, .kitagawa-logo, .jjtools-logo, .fahrion-logo, .royal-logo, .arno-logo, .automator-logo, .spectrum-logo, .destaco-logo ) { width: min(300px, 78%); height: 96px; object-fit: contain; object-position: right center; margin: 0 0 36px auto; } .cami-brand-lockup .cami-logo { width: min(300px, 78%); height: 96px; object-fit: contain; object-position: right center; transform: none; } .en-site .featured-content > :is( .kennametal-logo, .ditmco-logo, .kitagawa-logo, .jjtools-logo, .fahrion-logo, .royal-logo, .arno-logo, .automator-logo, .spectrum-logo, .destaco-logo ) { object-position: left center; margin-left: 0; margin-right: auto; } .en-site .cami-brand-lockup .cami-logo { object-position: left center; } #jjtools .featured-jjtools, #jjtools .featured-jjtools .featured-content { min-height: 690px; } #jjtools .jjtools-selected { padding-top: clamp(34px, 3.5vw, 52px); } #jjtools .jjtools-visual > span { display: none; } @media (max-width: 780px) { #royal .featured-royal { min-height: 840px; } #royal .featured-royal::after { background: linear-gradient(180deg, rgba(237,243,246,0) 7%, rgba(237,243,246,.12) 30%, rgba(237,243,246,.97) 48%, #edf3f6 100%); } #royal .featured-royal .royal-visual { height: 390px; background: transparent; } #royal .featured-visual.royal-visual > .royal-group { left: 11.6%; top: 50px; width: 76.8%; height: 204px; object-position: center top; } #royal .royal-content { padding-top: 315px; padding-bottom: 48px; } #royal .featured-label.royal-label, #royal .royal-logo { margin-bottom: 22px; } #royal .royal-content > p { margin-bottom: 26px; } #royal .manufacturer-explorer-pager { bottom: 10px; } #royal .royal-mtc-feature { padding: 42px 20px 50px; gap: 28px; } #royal .royal-rota-rack-feature { padding: 40px 20px 50px; gap: 26px; } #royal .royal-bar-pullers-feature { padding: 40px 20px 50px; } #royal .royal-bar-pullers-header { margin-bottom: 26px; gap: 16px; } #royal .royal-mtc-gallery, #royal .royal-bar-pullers-grid { border: 0; } #royal .royal-mtc-gallery figure, #royal .royal-bar-puller-card { border: 0; background: transparent; } #royal .royal-rota-rack-image { padding: 0; } #royal .royal-bar-pullers-grid { gap: 20px; } #royal .royal-bar-puller-card { grid-template-rows: 250px auto; } #royal .royal-bar-puller-image { padding: 18px 4px 4px; } #royal .royal-mtc-feature::before { bottom: -12px; } #royal .royal-mtc-gallery { gap: 20px; } #royal .royal-mtc-gallery figcaption { padding-top: 12px; } .featured-content > :is( .kennametal-logo, .ditmco-logo, .kitagawa-logo, .jjtools-logo, .fahrion-logo, .royal-logo, .arno-logo, .automator-logo, .spectrum-logo, .destaco-logo ), .cami-brand-lockup .cami-logo { width: min(270px, 82%); height: 78px; margin-bottom: 28px; } #jjtools .featured-jjtools { min-height: 900px; } #jjtools .featured-jjtools .featured-content { min-height: 0; } #jjtools .jjtools-selected { padding-top: 34px; } } @media (max-width: 900px) { .arno-recommended-grid { grid-template-columns: 1fr; } .arno-recommended-card { min-height: 0; grid-template-rows: minmax(340px, 48vw) auto; } } :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: #1676d2 !important; } @media (max-width: 780px) { .heavy-hitter-dots { gap: 0; } .heavy-hitter-dots button, .heavy-hitters-carousel.is-light-slide .heavy-hitter-dots button { width: 32px; min-width: 32px; height: 44px; min-height: 44px; } } @media (min-width: 781px) { .kennametal-page > .kennametal-field-videos { padding-bottom: 56px; } .kennametal-page > .kennametal-heavy-hitters { padding-top: 58px; } } @media (max-width: 780px) { .kennametal-page > .kennametal-field-videos { padding-bottom: 48px; } .kennametal-page > .kennametal-heavy-hitters { padding-top: 48px; } } #jjtools > .jjtools-selected { position: relative; z-index: 3; } @media (max-width: 760px) { #arno .featured-arno, #arno .arno-content { min-height: 880px; } #arno .arno-content { padding-top: 340px; padding-bottom: 48px; } .arno-recommended { padding: 36px 20px 70px; } .arno-recommended-head { margin-bottom: 28px; } .arno-recommended-head h2 { font-size: clamp(42px, 12vw, 58px); } .arno-recommended-grid { gap: 22px; } .arno-recommended-card { grid-template-rows: minmax(255px, 62vw) auto; } .arno-recommended-image { min-height: 255px; } .arno-recommended-copy { min-height: 122px; padding: 20px 22px 24px; } .arno-recommended-copy strong { font-size: clamp(27px, 8vw, 36px); } } #kennametal .featured-content > p.kennametal-value-label { width: 100%; margin: 0 0 30px; padding: 16px 22px; background: var(--yellow); color: #111; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; font-weight: 800; text-align: right; } main .featured-content > p.featured-label { display: block; width: 100%; max-width: none; box-sizing: border-box; margin: 0 0 30px; padding: 16px 22px; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; font-weight: 800; letter-spacing: 0; text-align: start; text-wrap: balance; } @media (min-width: 781px) { #kennametal .featured-content > p.kennametal-value-label, main .featured-content > p.featured-label { width: max-content; min-width: 100%; max-width: none; white-space: nowrap; } main .featured-content > p.featured-label { align-self: flex-end; margin-left: auto; } .en-site main .featured-content > p.featured-label { align-self: flex-start; margin-right: auto; margin-left: 0; } } #arno, #arno .featured-arno, #arno .arno-visual, #arno .arno-recommended { background: #fff; } #arno .featured-arno { border-bottom: 0; } #arno .featured-arno::after { background: linear-gradient(90deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.18) 43%, rgba(255,255,255,.94) 61%, #fff 78%); } #arno .arno-visual::before { background: none; } #arno .featured-visual.arno-visual > .arno-tooling { left: 2%; top: 18px; width: 55%; height: 100%; object-fit: contain; object-position: left center; transform: none; mix-blend-mode: multiply; } #arno .arno-recommended { padding-top: clamp(28px, 3vw, 46px); } .arno-recommended-card { grid-template-rows: minmax(360px, 1fr) auto; overflow: hidden; background: transparent; border: 1px solid #dedfdb; box-shadow: none; } .arno-recommended-image { min-height: 360px; padding: 0; display: grid; place-items: center; box-sizing: border-box; background: transparent; } .arno-recommended-image img, .arno-recommended-card--deco .arno-recommended-image img, .arno-recommended-card--shark .arno-recommended-image img { width: 190%; height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; transform: translateX(-9%); } .arno-recommended-card:hover, .arno-recommended-card:focus-visible { border-color: #e60001; box-shadow: none; } .arno-recommended-card:hover .arno-recommended-image img, .arno-recommended-card:focus-visible .arno-recommended-image img { transform: translateX(-9%) scale(1.02); } .arno-recommended-copy { min-height: 196px; border: 0; border-top: 1px solid #dedfdb; } .arno-recommended-copy > span { max-width: 36ch; } #royal .royal-mtc-feature h2 { max-width: 560px; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.06; } #royal .royal-mtc-image { display: grid; place-items: center; } #royal .royal-mtc-image img { width: 100%; height: 100%; } #royal .royal-mtc-gallery figure:first-child .royal-mtc-image img { width: 104%; height: 104%; } #royal .royal-mtc-gallery figure:nth-child(3) .royal-mtc-image img { width: 90%; height: 90%; } #royal .royal-rota-rack-feature h2 { font-size: clamp(34px, 3.35vw, 54px); line-height: 1; } #royal .royal-rota-rack-image img { mix-blend-mode: multiply; filter: drop-shadow(0 22px 28px rgba(4,26,45,.14)); } #royal .royal-bar-pullers-header h2 { font-size: clamp(32px, 3.15vw, 52px); line-height: 1.02; } #royal .royal-bar-pullers-grid { gap: clamp(18px, 2.2vw, 34px); } #royal .royal-bar-puller-card { grid-template-rows: minmax(330px, 1fr) auto; overflow: hidden; background: #f7f7f5; border: 1px solid #d8dde0; box-shadow: 0 14px 34px rgba(4,26,45,.07); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } #royal .royal-bar-puller-card::after { content: ""; position: absolute; z-index: 3; left: 0; bottom: 0; width: 52px; height: 5px; background: #226f9f; transition: width .28s ease; } #royal .royal-bar-puller-card:hover, #royal .royal-bar-puller-card:focus-visible { transform: translateY(-7px); border-color: #226f9f; box-shadow: 0 24px 48px rgba(4,26,45,.14); outline: 0; } #royal .royal-bar-puller-card:hover::after, #royal .royal-bar-puller-card:focus-visible::after { width: 100%; } #royal .royal-bar-puller-image { min-height: 330px; padding: 30px 28px 18px; background: #fff; } #royal .royal-bar-puller-image img { width: 100%; height: 100%; max-width: 360px; max-height: 300px; object-fit: contain; } #royal .royal-bar-puller-card:nth-child(3) .royal-bar-puller-image img { max-width: 440px; max-height: 350px; } #royal .royal-bar-puller-card:hover .royal-bar-puller-image img, #royal .royal-bar-puller-card:focus-visible .royal-bar-puller-image img { transform: scale(1.02); } #royal .royal-bar-puller-caption { min-height: 76px; padding: 18px 22px; background: #f7f7f5; border-top: 1px solid #dfe2e3; } #jjtools .jjtools-product-strip { width: min(1490px, 100%); } #jjtools .jjtools-selected-head .eyebrow { display: none; } .manufacturers.section-pad { padding: 0; background: #f3f3f1; } .manufacturers .section-head { display: none; } .manufacturer-grid.manufacturer-grid--logo-strip { display: grid; grid-template-columns: repeat(11, minmax(112px, 1fr)); grid-auto-rows: 94px; gap: 0; direction: rtl; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; background: #f3f3f1; border-top: 1px solid #d6d7d3; border-bottom: 1px solid #d6d7d3; } .manufacturer-grid--logo-strip .manufacturer { min-height: 94px; height: 94px; background: #fff; border-width: 0 0 0 1px; box-shadow: none; } .manufacturer-grid--logo-strip .manufacturer::after { right: 0; left: auto; width: 24px; height: 3px; background: var(--yellow); } .manufacturer-grid--logo-strip .manufacturer:hover::after, .manufacturer-grid--logo-strip .manufacturer:focus-visible::after { width: 100%; } .manufacturer-grid--logo-strip .brand-category, .manufacturer-grid--logo-strip .manufacturer small, .manufacturer-grid--logo-strip .manufacturer i { display: none; } .manufacturer-grid--logo-strip .manufacturer-logo-wrap { inset: 14px 12px; } .manufacturer-grid--logo-strip .manufacturer-logo, .manufacturer-grid--logo-strip .manufacturer-logo--royal { width: min(138px, 78%); height: 54px; opacity: .9; } .heavy-hitter-title, .heavy-hitter-title-medium, .heavy-hitter-title-long { min-height: 60px; padding: 14px 18px; font-size: clamp(22px, 1.7vw, 32px); } .heavy-hitter-content p { font-size: clamp(19px, 1.65vw, 26px); } .heavy-hitter-cta { font-size: clamp(18px, 1.5vw, 23px); } @media (max-width: 780px) { #kennametal .featured-content > p.kennametal-value-label { margin-bottom: 24px; padding: 13px 15px; font-size: 17px; } main .featured-content > p.featured-label { width: 100%; margin-bottom: 24px; padding: 13px 15px; font-size: 17px; line-height: 1.3; white-space: normal; } .kitagawa-br-ajc-showcase { left: 6%; top: 28px; width: 88%; height: 310px; } .kitagawa-br-ajc-showcase p { margin-top: 8px; font-size: 14px; } #arno .featured-arno::after { background: linear-gradient(180deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.12) 34%, rgba(255,255,255,.97) 54%, #fff 100%); } #arno .featured-visual.arno-visual > .arno-tooling { left: 5%; top: 18px; width: 90%; height: 345px; object-position: center; } .arno-recommended-card { grid-template-rows: minmax(250px, 62vw) auto; } .arno-recommended-image { min-height: 250px; padding: 20px; } .arno-recommended-copy { min-height: 180px; } #royal .royal-mtc-feature h2 { font-size: clamp(28px, 8.6vw, 38px); } #royal .royal-rota-rack-feature h2 { font-size: clamp(32px, 9.8vw, 44px); } #royal .royal-bar-pullers-header h2 { font-size: clamp(30px, 9vw, 42px); } #royal .royal-bar-puller-card { min-width: min(82vw, 390px); grid-template-rows: 300px auto; border: 1px solid #d8dde0; background: #f7f7f5; } #royal .royal-bar-puller-image { min-height: 300px; padding: 28px 22px 16px; } #royal .royal-bar-puller-caption { min-height: 70px; padding: 16px 19px; } .manufacturer-grid.manufacturer-grid--logo-strip { grid-template-columns: repeat(11, 118px); grid-auto-rows: 82px; scroll-snap-type: inline mandatory; } .manufacturer-grid--logo-strip .manufacturer { width: 118px; height: 82px; min-height: 82px; scroll-snap-align: start; } .manufacturer-grid--logo-strip .manufacturer-logo-wrap { inset: 12px 10px; } .manufacturer-grid--logo-strip .manufacturer-logo, .manufacturer-grid--logo-strip .manufacturer-logo--royal { width: 94px; height: 46px; } .heavy-hitter-title, .heavy-hitter-title-medium, .heavy-hitter-title-long { min-height: 42px; padding: 9px 11px; font-size: clamp(14px, 4vw, 17px); } .heavy-hitter-content p { font-size: 16px; } .heavy-hitter-cta { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } :root { --arnold-ink: #080909; --arnold-paper: #f7f6f1; --arnold-cool: #edf2f4; --arnold-line: #d7d9d5; --arnold-card: #fff; --arnold-shadow: 0 12px 30px rgba(8, 9, 9, .065); --arnold-shadow-hover: 0 22px 46px rgba(8, 9, 9, .13); } #kennametal { --company-accent: #111; --chapter-surface: #f3f3f1; } #kitagawa { --company-accent: #07579f; --chapter-surface: #eef2f4; } #arno { --company-accent: #e60001; --chapter-surface: #f7f6f1; } #royal { --company-accent: #166aa5; --chapter-surface: #edf2f4; } #jjtools { --company-accent: #5f9824; --chapter-surface: #f3f4f1; } #fahrion { --company-accent: #164d8b; --chapter-surface: #eef2f4; } #ditmco { --company-accent: #1675a2; --chapter-surface: #f7f6f1; } #cami { --company-accent: #c40100; --chapter-surface: #eef3f4; } #destaco { --company-accent: #b42222; --chapter-surface: #f7f6f1; } #automator { --company-accent: #b91419; --chapter-surface: #f2f3f0; } #nova { --company-accent: #111; --chapter-surface: #f3f3ef; } #spectrum { --company-accent: #e4002b; --chapter-surface: #f4efe6; } .section-pad { padding-block: clamp(86px, 7.2vw, 116px); } .intro { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(48px, 6.5vw, 104px); } .intro-copy { max-width: 720px; } .intro-copy p { max-width: 62ch; font-size: 19px; line-height: 1.68; } .intro-copy .intro-kicker { font-family: "Heebo", Arial, sans-serif; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; } .solutions--logo-hub .solution-card { min-height: 700px; padding-top: 34px; padding-bottom: 38px; } .solutions--logo-hub .solution-card h3 { font-size: clamp(38px, 3.45vw, 56px); line-height: 1.04; } .solutions--logo-hub .solution-card p { line-height: 1.65; } .solutions--logo-hub .solution-card .solution-logo-list { min-height: 190px; } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) { min-height: 680px; color: var(--arnold-ink); background: var(--chapter-surface, var(--arnold-paper)); border: 0; border-top: 1px solid var(--arnold-line); } main #kennametal > .featured { border-top: 0; } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured )::after { background: linear-gradient( 90deg, color-mix(in srgb, var(--chapter-surface, var(--arnold-paper)) 0%, transparent) 20%, color-mix(in srgb, var(--chapter-surface, var(--arnold-paper)) 16%, transparent) 38%, color-mix(in srgb, var(--chapter-surface, var(--arnold-paper)) 94%, transparent) 61%, var(--chapter-surface, var(--arnold-paper)) 79% ); } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-visual { background: var(--chapter-surface, var(--arnold-paper)); } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content { width: min(640px, 47%); min-height: 680px; padding-top: clamp(50px, 4.4vw, 70px); padding-bottom: clamp(50px, 4.4vw, 70px); justify-content: center; } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content > p:not(.featured-label):not(.kennametal-value-label) { max-width: 58ch; margin-bottom: 30px; color: #444844; font-size: 17px; line-height: 1.72; } main .featured-content > p.featured-label, #kennametal .featured-content > p.kennametal-value-label { width: 100%; min-width: 0; min-height: 58px; margin: 0 0 28px; padding: 13px 20px; display: flex; align-items: center; justify-content: flex-start; color: var(--arnold-ink); background: var(--yellow); box-shadow: inset -5px 0 0 var(--company-accent, var(--arnold-ink)); font-family: "Heebo", Arial, sans-serif; font-size: clamp(19px, 1.35vw, 23px); font-weight: 800; line-height: 1.25; letter-spacing: 0; text-align: right; white-space: nowrap; text-wrap: nowrap; } .en-site main .featured-content > p.featured-label, .en-site #kennametal .featured-content > p.kennametal-value-label { box-shadow: inset 5px 0 0 var(--company-accent, var(--arnold-ink)); text-align: left; } main .featured-content > :is( .kennametal-logo, .ditmco-logo, .kitagawa-logo, .jjtools-logo, .fahrion-logo, .royal-logo, .arno-logo, .automator-logo, .spectrum-logo, .destaco-logo ) { width: min(286px, 76%); height: 88px; margin-bottom: 30px; } .cami-brand-lockup { margin-bottom: 30px; } .cami-brand-lockup .cami-logo { width: min(286px, 76%); height: 88px; } .featured-actions { gap: 9px; } main .featured-actions .button { min-height: 48px; padding: 0 22px; font-size: 13.5px; font-weight: 700; } main .manufacturer-explorer-detail .button-black, main .manufacturer-explorer-detail--stack .button-black, #kennametal .button-black { color: #fff; background: var(--arnold-ink); border-color: var(--arnold-ink); } main .manufacturer-explorer-detail .button-black:hover, main .manufacturer-explorer-detail--stack .button-black:hover, #kennametal .button-black:hover { color: var(--arnold-ink); background: var(--yellow); border-color: var(--yellow); } main .manufacturer-explorer-detail .button-resource, main .manufacturer-explorer-detail--stack .button-resource, #kennametal .button-resource { color: var(--arnold-ink); background: rgba(255, 255, 255, .45); border-color: rgba(8, 9, 9, .24); } main .manufacturer-explorer-detail .button-resource:hover, main .manufacturer-explorer-detail--stack .button-resource:hover, #kennametal .button-resource:hover { color: var(--arnold-ink); background: var(--yellow); border-color: var(--yellow); } .featured-visual > span { font-size: 10px; letter-spacing: .15em; color: rgba(8, 9, 9, .5); } :is(.kennametal-products, .kitagawa-selected, .arno-recommended) { padding-inline: clamp(32px, 6.2vw, 104px); } :is(.kennametal-products-head h2, .kitagawa-selected-head h2, .arno-recommended-head h2) { font-family: "Heebo", Arial, sans-serif; font-size: clamp(40px, 4vw, 62px); line-height: 1.02; font-weight: 650; letter-spacing: -.04em; } :is(.kitagawa-selected-head .eyebrow, .arno-recommended-head p, .royal-mtc-kicker, .royal-rota-rack-kicker, .royal-bar-pullers-kicker) { font-size: 11px; letter-spacing: .14em; } :is( .kennametal-product-card, .kitagawa-product-card, .arno-recommended-card, #royal .royal-mtc-gallery figure, #royal .royal-bar-puller-card ) { background: var(--arnold-card); border: 1px solid var(--arnold-line); box-shadow: var(--arnold-shadow); transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease; } :is( .kennametal-product-card, .kitagawa-product-card, .arno-recommended-card, #royal .royal-mtc-gallery figure, #royal .royal-bar-puller-card ):hover, :is( .kennametal-product-card, .kitagawa-product-card, .arno-recommended-card, #royal .royal-mtc-gallery figure, #royal .royal-bar-puller-card ):focus-visible { transform: translateY(-5px); border-color: var(--company-accent, var(--yellow)); box-shadow: var(--arnold-shadow-hover); outline: 0; } .kitagawa-product-card::after, .arno-recommended-card::after, #royal .royal-bar-puller-card::after, #royal .royal-mtc-gallery figure::after { width: 44px; height: 4px; background: var(--company-accent, var(--yellow)); } #royal .royal-mtc-gallery figure::after { content: ""; position: absolute; z-index: 4; left: 0; bottom: 0; transition: width .26s ease; } .kitagawa-product-card:hover::after, .kitagawa-product-card:focus-visible::after, .arno-recommended-card:hover::after, .arno-recommended-card:focus-visible::after, #royal .royal-bar-puller-card:hover::after, #royal .royal-bar-puller-card:focus-visible::after, #royal .royal-mtc-gallery figure:hover::after, #royal .royal-mtc-gallery figure:focus-within::after { width: 100%; } .kitagawa-product-image, .arno-recommended-image, #royal .royal-mtc-image, #royal .royal-bar-puller-image { background: #fff; } .kitagawa-product-image img, .arno-recommended-image img, #royal .royal-mtc-image img, #royal .royal-bar-puller-image img { object-fit: contain; } .arno-recommended-card { grid-template-rows: minmax(330px, 1fr) auto; } .arno-recommended-image { min-height: 330px; padding: 18px; } .arno-recommended-image img, .arno-recommended-card--deco .arno-recommended-image img, .arno-recommended-card--shark .arno-recommended-image img { width: 172%; height: 100%; object-position: center; transform: translateX(-6%); } .arno-recommended-card:hover .arno-recommended-image img, .arno-recommended-card:focus-visible .arno-recommended-image img { transform: translateX(-6%) scale(1.02); } .arno-recommended-copy { min-height: 174px; background: #f7f7f5; } #royal .royal-mtc-gallery figure { position: relative; overflow: hidden; } #royal .royal-mtc-image { overflow: hidden; } #royal .royal-mtc-gallery figure .royal-mtc-image img { width: 100%; height: 100%; object-fit: contain; } #royal .royal-mtc-gallery figure:first-child .royal-mtc-image img { width: 112%; height: 112%; } #royal .royal-mtc-gallery figure:nth-child(2) .royal-mtc-image img { width: 100%; height: 100%; } #royal .royal-mtc-gallery figure:nth-child(3) .royal-mtc-image img { width: 94%; height: 94%; } #royal .royal-bar-puller-card { grid-template-rows: minmax(310px, 1fr) auto; } #royal .royal-bar-puller-image { min-height: 310px; padding: 26px 24px 18px; } #royal .royal-bar-puller-image img, #royal .royal-bar-puller-card:nth-child(3) .royal-bar-puller-image img { width: 100%; height: 100%; max-width: 380px; max-height: 300px; } .manufacturer-grid.manufacturer-grid--logo-strip { grid-auto-rows: 88px; } .manufacturer-grid--logo-strip .manufacturer { min-height: 88px; height: 88px; transition: background .22s ease, box-shadow .22s ease; } .manufacturer-grid--logo-strip .manufacturer:hover, .manufacturer-grid--logo-strip .manufacturer:focus-visible { background: #fbfaf6; box-shadow: inset 0 0 0 1px rgba(8, 9, 9, .08); } .manufacturer-grid--logo-strip .manufacturer-logo, .manufacturer-grid--logo-strip .manufacturer-logo--royal { width: min(122px, 76%); height: 46px; } #fahrion .fahrion-content { z-index: 4; opacity: 1; visibility: visible; transform: none; } #fahrion::after { z-index: 1; } #jjtools .featured-jjtools, #jjtools .featured-jjtools .featured-content { min-height: 680px; } #jjtools .jjtools-selected { padding-top: 38px; } @media (max-width: 780px) { .section-pad { padding-block: 68px; } .intro { grid-template-columns: 1fr; gap: 16px; } .intro-copy p { font-size: 17px; line-height: 1.66; } .intro-copy .text-link { font-size: 16.5px; } .solutions--logo-hub .solution-card { min-height: 610px; padding: 30px 24px 34px; } .solutions--logo-hub .solution-card .card-icon, .solutions--logo-hub .solution-card .card-icon.cutting-icon { top: 76px; left: 24px; width: 112px; height: 112px; } .solutions--logo-hub .solution-card h3 { margin-top: 160px; margin-bottom: 18px; font-size: clamp(36px, 11vw, 48px); } .solutions--logo-hub .solution-card p { margin-bottom: 20px; } .solutions--logo-hub .solution-card .solution-logo-list { min-height: 168px; grid-auto-rows: 56px; gap: 8px 12px; } .solutions--logo-hub #machining-solutions .solution-logo-list { min-height: 184px; grid-template-rows: repeat(3, 56px); } .solutions--logo-hub .solution-card .solution-logo-list li, .solutions--logo-hub .solution-card .solution-logo-list a { height: 56px; } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) { min-height: 880px; } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured )::after { background: linear-gradient( 180deg, transparent 9%, color-mix(in srgb, var(--chapter-surface, var(--arnold-paper)) 12%, transparent) 29%, color-mix(in srgb, var(--chapter-surface, var(--arnold-paper)) 96%, transparent) 49%, var(--chapter-surface, var(--arnold-paper)) 100% ); } main :is( #kennametal > .featured, .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content { width: 100%; min-height: 0; padding-top: 370px; padding-right: 22px; padding-bottom: 52px; padding-left: 22px; } main #kennametal > .featured .featured-content { padding-top: 410px; } main #kitagawa > .featured-kitagawa .featured-content { padding-top: 305px; } main #arno > .featured-arno .featured-content { padding-top: 340px; } main #royal > .featured-royal .featured-content { padding-top: 315px; } main #jjtools > .featured-jjtools .featured-content { padding-top: 345px; } main #fahrion.featured .featured-content { padding-top: 345px; } main #ditmco.featured .featured-content { padding-top: 430px; } main #cami.featured .featured-content, main #destaco.featured .featured-content, main #automator.featured .featured-content, main #spectrum.featured .featured-content { padding-top: 360px; } main #nova.featured .featured-content { padding-top: 370px; } main #kitagawa > .featured-kitagawa { min-height: 850px; } main #arno > .featured-arno { min-height: 880px; } main #royal > .featured-royal { min-height: 840px; } main #jjtools > .featured-jjtools { min-height: 900px; } main #fahrion.featured { min-height: 900px; } main #ditmco.featured { min-height: 940px; } main #cami.featured, main #automator.featured, main #spectrum.featured { min-height: 930px; } main #destaco.featured, main #nova.featured { min-height: 900px; } main .featured-content > p.featured-label, #kennametal .featured-content > p.kennametal-value-label { min-height: 52px; margin-bottom: 22px; padding: 12px 15px; font-size: 16px; line-height: 1.28; white-space: normal; text-wrap: balance; } main .featured-content > :is( .kennametal-logo, .ditmco-logo, .kitagawa-logo, .jjtools-logo, .fahrion-logo, .royal-logo, .arno-logo, .automator-logo, .spectrum-logo, .destaco-logo ), .cami-brand-lockup .cami-logo { width: min(248px, 78%); height: 72px; margin-bottom: 24px; } main .featured-content > p:not(.featured-label):not(.kennametal-value-label) { margin-bottom: 26px; font-size: 16px; line-height: 1.66; } :is(.kennametal-products, .kitagawa-selected, .arno-recommended) { padding-inline: 20px; } :is(.kennametal-products-head h2, .kitagawa-selected-head h2, .arno-recommended-head h2) { font-size: clamp(36px, 10.6vw, 46px); } .kitagawa-product-card { min-width: min(74vw, 286px); flex-basis: min(74vw, 286px); min-height: 312px; } .kitagawa-product-image { height: 228px; padding: 20px; } .arno-recommended-card { grid-template-rows: minmax(230px, 58vw) auto; } .arno-recommended-image { min-height: 230px; padding: 18px; } .arno-recommended-copy { min-height: 158px; padding: 18px 20px 22px; } #royal .royal-mtc-gallery figure { min-width: min(75vw, 300px); flex-basis: min(75vw, 300px); } #royal .royal-bar-puller-card { min-width: min(78vw, 330px); flex-basis: min(78vw, 330px); grid-template-rows: 270px auto; } #royal .royal-bar-puller-image { min-height: 270px; padding: 22px 18px 14px; } .manufacturer-grid.manufacturer-grid--logo-strip { grid-auto-rows: 78px; grid-template-columns: repeat(11, 112px); } .manufacturer-grid--logo-strip .manufacturer { width: 112px; min-height: 78px; height: 78px; } .manufacturer-grid--logo-strip .manufacturer-logo, .manufacturer-grid--logo-strip .manufacturer-logo--royal { width: 88px; height: 42px; } } main .featured-content > .featured-category-line { width: 100%; margin: -14px 0 24px; display: block; color: color-mix(in srgb, var(--arnold-ink) 58%, transparent); font: 650 clamp(12px, .85vw, 14px)/1.45 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .08em; direction: ltr; text-align: right; text-transform: uppercase; } .en-site main .featured-content > .featured-category-line { text-align: left; } #arno, #arno .featured-arno, #arno .arno-visual, #arno .arno-recommended { background: var(--chapter-surface, var(--arnold-paper)); } #arno .featured-arno, #arno .arno-recommended { border-block: 0; } #arno .arno-recommended-image { padding: 18px 18px 0; align-items: end; } #arno .arno-recommended-image img, #arno .arno-recommended-card--deco .arno-recommended-image img, #arno .arno-recommended-card--shark .arno-recommended-image img { object-position: center bottom; } #royal .royal-mtc-gallery figure { background: #fff; border: 1px solid rgba(22, 106, 165, .2); box-shadow: 0 10px 26px rgba(4, 26, 45, .07); } #royal .royal-mtc-gallery figure:hover, #royal .royal-mtc-gallery figure:focus-within { border-color: var(--company-accent); box-shadow: 0 18px 36px rgba(4, 26, 45, .12); } #royal .royal-mtc-gallery figcaption { min-height: 54px; padding: 13px 16px 15px; display: grid; place-items: center; color: #0b3554; background: #fff; border-top: 1px solid rgba(22, 106, 165, .16); text-align: center; } #royal .royal-mtc-gallery figure:first-child .royal-mtc-image img { width: 118%; height: 118%; } .manufacturer-chapter-switcher { width: 100%; min-height: 42px; margin: -24px 0 12px; display: flex; align-items: center; justify-content: space-between; direction: ltr; } .manufacturer-chapter-arrow { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; color: color-mix(in srgb, var(--arnold-ink) 60%, transparent); background: color-mix(in srgb, #fff 44%, transparent); border: 1px solid color-mix(in srgb, var(--arnold-ink) 13%, transparent); border-radius: 999px; cursor: pointer; opacity: .76; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease; } .manufacturer-chapter-arrow span { display: block; font: 400 19px/1 "IBM Plex Sans", Arial, sans-serif; transform: translateY(-1px); } .manufacturer-chapter-arrow:hover, .manufacturer-chapter-arrow:focus-visible { color: var(--arnold-ink); background: color-mix(in srgb, #fff 88%, transparent); border-color: color-mix(in srgb, var(--company-accent, var(--yellow)) 68%, transparent); box-shadow: 0 8px 18px rgba(8, 9, 9, .08); opacity: 1; outline: 0; } .manufacturer-chapter-arrow:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--company-accent, var(--yellow)) 22%, transparent), 0 8px 18px rgba(8, 9, 9, .08); } .manufacturer-chapter-arrow--left:hover, .manufacturer-chapter-arrow--left:focus-visible { transform: none; } .manufacturer-chapter-arrow--right:hover, .manufacturer-chapter-arrow--right:focus-visible { transform: none; } @media (prefers-reduced-motion: reduce) { .manufacturer-chapter-arrow { transition: none; } } @media (max-width: 780px) { main .featured-content > .featured-category-line { margin: -10px 0 20px; font-size: 11px; line-height: 1.5; letter-spacing: .08em; } #arno .arno-recommended-image { padding: 14px 14px 0; } .manufacturer-chapter-switcher { min-height: 38px; margin: 18px 0 10px; } .manufacturer-chapter-arrow { width: 38px; height: 38px; } } #jjtools, #jjtools .featured-jjtools, #jjtools .jjtools-visual, #jjtools .jjtools-selected { background: var(--chapter-surface, var(--arnold-paper)); } #jjtools .featured-jjtools, #jjtools .jjtools-selected { border-block: 0; } #jjtools .jjtools-product-image { padding: 0; overflow: hidden; background: var(--chapter-surface, var(--arnold-paper)); } #jjtools .jjtools-product-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } #royal .royal-bar-puller-card:nth-child(3) .royal-bar-puller-image img { transform: scale(1.22); transform-origin: center; } #royal .royal-bar-puller-card:nth-child(3):hover .royal-bar-puller-image img, #royal .royal-bar-puller-card:nth-child(3):focus-visible .royal-bar-puller-image img { transform: scale(1.245); } @media (min-width: 781px) { #arno .featured-visual.arno-visual > .arno-tooling { left: 5.5%; } } #arno .arno-recommended-image { padding: 16px 16px 0; align-items: end; justify-items: center; } #arno .arno-recommended-card { --arno-product-shift: -10%; } #arno .arno-recommended-card--shark { --arno-product-shift: -9.4%; } #arno .arno-recommended-image img, #arno .arno-recommended-card--deco .arno-recommended-image img, #arno .arno-recommended-card--shark .arno-recommended-image img { width: 240%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateX(var(--arno-product-shift)); transform-origin: center; } #arno .arno-recommended-card:hover .arno-recommended-image img, #arno .arno-recommended-card:focus-visible .arno-recommended-image img { transform: translateX(var(--arno-product-shift)) scale(1.02); } @media (max-width: 780px) { #arno .arno-recommended-image { padding: 14px 14px 0; } #arno .arno-recommended-image img, #arno .arno-recommended-card--deco .arno-recommended-image img, #arno .arno-recommended-card--shark .arno-recommended-image img { width: 232%; } } .manufacturer-chapter-switcher { transform: translateY(-18px); } .manufacturer-chapter-arrow, .manufacturer-chapter-arrow:hover, .manufacturer-chapter-arrow:focus-visible { background: transparent; border: 0; border-radius: 0; box-shadow: none; } .manufacturer-chapter-arrow:focus-visible { outline: 1px solid color-mix(in srgb, var(--company-accent, var(--yellow)) 72%, transparent); outline-offset: 4px; } @media (max-width: 780px) { .manufacturer-chapter-switcher { transform: translateY(-8px); } } #nova { --company-accent: #2d72b8; --chapter-surface: #eef2f4; scroll-margin-top: 76px; } .nova-chapter.manufacturer-explorer-detail { min-height: 0; background: var(--chapter-surface); } main .nova-chapter > .featured-nova { min-height: 720px; background: var(--chapter-surface); border-bottom: 0; } main .nova-chapter > .featured-nova::after { background: linear-gradient( 90deg, rgba(238, 242, 244, 0) 19%, rgba(238, 242, 244, .18) 39%, rgba(238, 242, 244, .95) 61%, var(--chapter-surface) 79% ); } .nova-chapter .nova-visual { background: linear-gradient(rgba(45, 114, 184, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 114, 184, .055) 1px, transparent 1px), radial-gradient(circle at 24% 47%, #fff 0%, #f7f9fa 40%, var(--chapter-surface) 74%); background-size: 48px 48px, 48px 48px, auto; } .nova-chapter .nova-visual::before { z-index: 1; background: radial-gradient(circle at 29% 49%, rgba(var(--yellow-rgb), .17), transparent 31%); } .featured-visual.nova-visual > .nova-hero-product { position: absolute; z-index: 2; display: block; object-fit: contain; object-position: center; transform: none; filter: drop-shadow(0 24px 28px rgba(22, 44, 64, .18)); } .featured-visual.nova-visual > .nova-hero-product--vice { left: 2.5%; top: 12%; width: 43%; height: 70%; } .featured-visual.nova-visual > .nova-hero-product--center { left: 33%; bottom: 9%; width: 19%; height: 42%; } .nova-chapter .nova-content { color: var(--arnold-ink); } .nova-chapter .nova-content > p:not(.featured-label) { color: #424a50; } .nova-chapter .nova-logo { width: min(310px, 76%); margin: 0 0 28px auto; filter: none; } .en-site .nova-chapter .nova-logo { margin-left: 0; margin-right: auto; } .nova-chapter .featured-category-line { color: #70808b; } .nova-chapter .button-black { background: #2d72b8; } .nova-chapter .button-black:hover, .nova-chapter .button-black:focus-visible { background: #20588d; } .nova-chapter .button-resource { color: #213b50; border-color: rgba(33, 59, 80, .25); background: rgba(255, 255, 255, .64); } .nova-chapter .button-resource:hover, .nova-chapter .button-resource:focus-visible { color: #fff; border-color: #213b50; background: #213b50; } .nova-recommended { padding: clamp(64px, 6.2vw, 96px) clamp(4vw, 6.5vw, 112px) clamp(72px, 7vw, 110px); background: var(--chapter-surface); color: var(--arnold-ink); border-top: 1px solid rgba(45, 114, 184, .14); direction: rtl; } .nova-recommended-head { margin-bottom: clamp(28px, 3.2vw, 46px); text-align: right; } .nova-recommended-head p { margin: 0 0 12px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; color: #2d72b8; font: 700 10px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .17em; } .nova-recommended-head p::before { content: ""; width: 28px; height: 2px; background: var(--yellow); } .nova-recommended-head h2 { margin: 0; color: var(--arnold-ink); font-size: clamp(42px, 4.5vw, 68px); font-weight: 700; line-height: .98; letter-spacing: -.045em; } .nova-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 24px); direction: ltr; } .nova-product-card { position: relative; min-width: 0; overflow: hidden; display: grid; grid-template-rows: minmax(235px, 1fr) auto; background: #fff; color: var(--arnold-ink); border: 1px solid rgba(33, 59, 80, .13); box-shadow: 0 13px 28px rgba(27, 51, 69, .065); text-decoration: none; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .nova-product-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 4px; background: #2d72b8; transition: width .24s ease; } .nova-product-card:hover, .nova-product-card:focus-visible { border-color: rgba(45, 114, 184, .58); box-shadow: 0 20px 38px rgba(27, 51, 69, .12); transform: translateY(-3px); outline: 0; } .nova-product-card:hover::after, .nova-product-card:focus-visible::after { width: 100%; } .nova-product-image { min-height: 235px; padding: 22px 18px 12px; display: grid; place-items: center; overflow: hidden; background: #fff; } .nova-product-image img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; transition: transform .3s ease; } .nova-product-card:hover .nova-product-image img, .nova-product-card:focus-visible .nova-product-image img { transform: scale(1.035); } .nova-product-copy { min-height: 112px; padding: 17px 18px 24px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; border-top: 1px solid rgba(33, 59, 80, .11); background: #fff; text-align: left; } .nova-product-copy small { color: #7d868b; font: 600 10.5px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .14em; } .nova-product-copy strong { color: #151a1e; font: 700 clamp(16px, 1.2vw, 20px)/1.2 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.025em; } .nova-toolholder-feature { margin-top: clamp(22px, 2.2vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: #fff; color: var(--arnold-ink); border: 1px solid rgba(33, 59, 80, .14); box-shadow: 0 15px 32px rgba(27, 51, 69, .075); text-decoration: none; direction: ltr; transition: border-color .22s ease, box-shadow .22s ease; } .nova-toolholder-feature:hover, .nova-toolholder-feature:focus-visible { border-color: rgba(45, 114, 184, .62); box-shadow: 0 22px 42px rgba(27, 51, 69, .13); outline: 0; } .nova-toolholder-image { aspect-ratio: 1336 / 593; overflow: hidden; background: #e7ecef; } .nova-toolholder-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .35s ease; } .nova-toolholder-feature:hover .nova-toolholder-image img, .nova-toolholder-feature:focus-visible .nova-toolholder-image img { transform: scale(1.012); } .nova-toolholder-feature > strong { min-height: 76px; padding: 20px clamp(22px, 3vw, 46px); display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(33, 59, 80, .12); box-shadow: inset 0 -4px 0 var(--yellow); color: #17232d; font: 700 clamp(18px, 1.55vw, 25px)/1.3 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.02em; text-align: center; } .manufacturer-explorer-detail[id] { scroll-margin-top: 76px; } @media (max-width: 1040px) { .nova-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { main .nova-chapter > .featured-nova { min-height: 930px; } main .nova-chapter > .featured-nova::after { background: linear-gradient( 180deg, rgba(238, 242, 244, 0) 7%, rgba(238, 242, 244, .18) 28%, rgba(238, 242, 244, .97) 47%, var(--chapter-surface) 100% ); } .nova-chapter .nova-visual { height: 410px; } .featured-visual.nova-visual > .nova-hero-product--vice { left: 3%; top: 40px; width: 68%; height: 315px; } .featured-visual.nova-visual > .nova-hero-product--center { left: 60%; bottom: 38px; width: 30%; height: 205px; } main .nova-chapter > .featured-nova .nova-content { min-height: 0; padding-top: 350px; padding-right: 22px; padding-bottom: 54px; padding-left: 22px; } .nova-chapter .nova-logo { width: min(250px, 72%); margin-bottom: 22px; } .nova-recommended { padding: 52px 20px 72px; } .nova-recommended-head h2 { font-size: 44px; } .nova-product-grid { gap: 12px; } .nova-product-card { grid-template-rows: 190px auto; } .nova-product-image { min-height: 190px; padding: 14px 10px 8px; } .nova-product-copy { min-height: 104px; padding: 15px 14px 21px; } .nova-product-copy strong { font-size: 15px; } .nova-toolholder-feature > strong { min-height: 68px; padding: 17px 18px; font-size: 17px; } } @media (max-width: 520px) { .nova-product-grid { grid-template-columns: 1fr; } .nova-product-card { grid-template-rows: 230px auto; } .nova-product-image { min-height: 230px; } } @media (min-width: 941px) and (max-width: 1180px) { .site-header { height: 92px; grid-template-columns: 235px minmax(0, 1fr) 270px; } .brand { width: 200px; height: 92px; padding: 13px 0 16px; } .brand-logo-shell { width: 200px; height: 56px; } .site-header > .brand::before { top: 12.5px; left: max(8px, calc(var(--logo-edge) - 12px)); width: 200px; height: 60.417px; } .main-nav, .en-site .main-nav { gap: 9px; font-size: 14px; } .main-nav > a, .nav-dropdown-toggle { white-space: nowrap; } .main-nav a, .nav-dropdown-toggle { padding-block: 35px; } .main-nav a::after, .nav-dropdown-toggle::after { bottom: 23px; } .header-actions { gap: 8px; padding-left: 6px; } .site-search--desktop { width: 125px; } .en-site .site-search--desktop .site-search-input { font-size: 14px; } .header-actions .button { padding-inline: 10px; white-space: nowrap; } } @media (min-width: 781px) and (max-width: 940px) { .site-header { height: 82px; grid-template-columns: 1fr auto; background: rgba(255,255,255,.98); } .brand { width: 154px; height: 82px; padding: 12px 0 14px; } .brand-logo-shell { width: 154px; height: 50px; } .site-header > .brand::before { top: 12.75px; left: max(8px, calc(var(--logo-edge) - 12px)); width: 154px; height: 46.521px; } .menu-toggle { grid-column: 2; justify-self: end; display: flex; width: 64px; height: 82px; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border: 0; border-right: 1px solid rgba(8,9,9,.14); background: transparent; } .menu-toggle span { width: 25px; height: 1px; background: var(--black); transition: transform .2s ease; } .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); } .main-nav, .en-site .main-nav { position: fixed; inset: 82px 0 auto; max-height: calc(100svh - 82px); overflow-y: auto; padding: 28px 25px; display: none; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--black); color: white; border-top: 1px solid var(--white-line); } .main-nav { direction: rtl; } .en-site .main-nav { direction: ltr; } .main-nav.open { display: flex; } .main-nav a { width: 100%; padding: 11px 0; font-size: 18px; } .main-nav .language-mobile { width: auto; margin: -7px 0 12px; padding: 8px 0; display: inline-flex; color: var(--yellow); font: 700 13px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; } .nav-dropdown { width: 100%; display: block; } .nav-dropdown-toggle { width: 100%; padding: 11px 0; justify-content: space-between; font-size: 18px; } .nav-dropdown-toggle::after { bottom: 5px; } .nav-panel { position: static; width: 100% !important; max-height: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: hidden; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .3s ease, padding .3s ease; } .nav-panel.open { max-height: 760px; padding: 10px 0 14px; } .nav-panel.mega-menu { position: static; top: auto; left: auto; height: auto; max-height: 0; display: block !important; direction: rtl; background: #fff; transform: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; } .en-site .nav-panel.mega-menu { direction: ltr; } .nav-panel.mega-menu.open { max-height: 2200px; padding: 0; overflow-y: auto; } .mega-menu-manufacturer-grid { grid-template-columns: 1fr; } .mega-menu-group { padding: 18px 16px 20px; } .mega-menu-group-heading { min-height: 52px; } .mega-menu-group-heading strong { font-size: 18px; } .mega-menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .mega-menu--catalogs { grid-template-columns: 1fr; } .mega-menu-catalog-section { padding: 20px 16px 22px; } .mega-menu-catalog-section--featured { border-inline-start: 0; } .mega-menu-catalog-section > header { min-height: 56px; } .mega-menu-catalog-section > header strong { font-size: 18px; } .mega-menu-catalog-companies { column-gap: 14px; } .mega-menu-featured-catalogs { padding-top: 0; grid-template-columns: 1fr; } .mega-menu-featured-column { gap: 6px; } .mega-menu-featured-column + .mega-menu-featured-column { margin-top: 6px; } .mega-menu-catalog-group--series { grid-column: auto; } .mega-menu-catalog-group--series .mega-menu-catalog-links { grid-template-columns: 1fr; } .nav-panel .mega-menu-pdf-link { min-height: 60px; } .nav-dropdown:hover .nav-panel, .nav-dropdown:focus-within .nav-panel, .nav-panel.open { transform: none !important; } .nav-panel a { min-height: 46px; padding: 10px 12px; font-size: 11px; border-left: 0 !important; } .nav-panel a:nth-child(odd) { border-left: 1px solid rgba(8,9,9,.1) !important; } .nav-panel.mega-menu a:nth-child(odd) { border-left: 0 !important; } .nav-panel a strong { font-size: 11px; } .header-actions { display: none; } .site-search--mobile { width: 100%; margin-bottom: 18px; display: block; } .site-search--mobile .site-search-field { border-bottom-color: rgba(255,255,255,.45); } .site-search--mobile .site-search-input { color: #fff; font-size: 15px; } .site-search--mobile .site-search-input::placeholder { color: rgba(255,255,255,.64); } .site-search--mobile .site-search-submit { color: #fff; } .site-search--mobile .search-clear { color: rgba(255,255,255,.78); } .site-search--mobile .search-clear:hover, .site-search--mobile .search-clear:focus-visible { background: rgba(255,255,255,.12); color: #fff; } .site-search--mobile .search-suggestions { position: static; width: 100%; max-height: 310px; margin-top: 8px; box-shadow: none; } } #royal .royal-mtc-feature::before, #royal .royal-rota-rack-feature::before { content: none; display: none; } .featured-automator .automator-visual { padding: clamp(74px, 7vw, 112px) 50% clamp(74px, 7vw, 112px) clamp(34px, 5vw, 78px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 46px); align-items: center; justify-items: center; } .featured-visual.automator-visual > .automator-product, .featured-visual.automator-visual > .automator-visii, .featured-visual.automator-visual > .automator-adp, .featured-visual.automator-visual > .automator-colibri, .featured-visual.automator-visual > .automator-numbering { position: static; inset: auto; z-index: 2; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; transform: none; border: 0; background: transparent; box-shadow: none; -webkit-mask-image: none; mask-image: none; mix-blend-mode: multiply; filter: drop-shadow(0 14px 18px rgba(62, 35, 30, .12)); } .featured-visual.automator-visual > .automator-colibri { width: 72%; height: 72%; mix-blend-mode: normal; } .featured-visual.automator-visual > .automator-numbering { width: 72%; height: 72%; } .featured-visual.automator-visual > .automator-visii, .featured-visual.automator-visual > .automator-adp, .featured-visual.automator-visual > .automator-numbering { -webkit-mask-image: radial-gradient(ellipse 78% 82% at center, #000 54%, rgba(0,0,0,.94) 64%, transparent 83%); mask-image: radial-gradient(ellipse 78% 82% at center, #000 54%, rgba(0,0,0,.94) 64%, transparent 83%); } .automator-visual > span { display: none; } .jjtools-4etm-feature { padding: clamp(48px, 5vw, 78px) clamp(4vw, 6.5vw, 112px) clamp(72px, 6.5vw, 104px); overflow: hidden; background: var(--chapter-surface, #f0f2ef); color: var(--black); direction: rtl; } .jjtools-4etm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 88px); align-items: center; direction: ltr; } .jjtools-4etm-video { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-bottom: 4px solid #72b32b; } .jjtools-4etm-message { min-width: 0; max-width: 620px; padding: clamp(12px, 2vw, 32px) 0; justify-self: end; direction: rtl; text-align: right; } .en-site .jjtools-4etm-grid { direction: rtl; } .en-site .jjtools-4etm-message { justify-self: start; direction: ltr; text-align: left; } .jjtools-4etm-eyebrow { margin: 0 0 15px; display: flex; align-items: center; gap: 12px; color: #4e7f1c; font: 700 11px/1.3 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .15em; } .jjtools-4etm-eyebrow::before { content: ""; width: 34px; height: 3px; flex: 0 0 auto; background: #72b32b; } .jjtools-4etm-message h2 { margin: 0; color: var(--black); font: 700 clamp(54px, 5.1vw, 78px)/.94 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.055em; } html[dir="rtl"] #royal .royal-mtc-feature-copy { direction: rtl; text-align: right; } html[dir="rtl"] #nova .nova-toolholder-heading { width: 100%; justify-self: end; direction: rtl; text-align: right; } @media (min-width: 781px) { html[dir="rtl"] #nova .nova-toolholder-feature { grid-template-columns: minmax(280px, .64fr) minmax(0, 1.36fr); gap: clamp(14px, 1.8vw, 26px); } } .jjtools-4etm-message h3 { max-width: 590px; margin: 18px 0 0; color: var(--black); font: 600 clamp(24px, 2.15vw, 34px)/1.12 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.032em; text-wrap: balance; } .jjtools-4etm-message > p:last-child { max-width: 570px; margin: 22px 0 0; color: #555955; font: 400 clamp(16px, 1.25vw, 19px)/1.55 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.01em; } .nova-toolholder-image { aspect-ratio: 4 / 1; display: grid; place-items: center; background: #fff; } .nova-toolholder-image img { width: 70%; height: 70%; object-fit: contain; object-position: center; } .nova-toolholder-feature:hover .nova-toolholder-image img, .nova-toolholder-feature:focus-visible .nova-toolholder-image img { transform: scale(1.015); } @media (max-width: 780px) { .featured-automator .automator-visual { height: 490px; padding: 34px 18px 38px; gap: 16px 20px; } .featured-visual.automator-visual > .automator-colibri { width: 74%; height: 74%; } .featured-visual.automator-visual > .automator-numbering { width: 74%; height: 74%; } .automator-content { padding-top: 408px; } .jjtools-4etm-feature { padding: 28px 20px 60px; } .jjtools-4etm-grid { grid-template-columns: 1fr; gap: 24px; } .jjtools-4etm-video { aspect-ratio: 16 / 10; } .jjtools-4etm-message { padding: 0 2px; } .jjtools-4etm-eyebrow { margin-bottom: 13px; font-size: 10px; } .jjtools-4etm-message h2 { font-size: clamp(50px, 16vw, 66px); } .jjtools-4etm-message h3 { margin-top: 14px; font-size: clamp(25px, 8vw, 32px); line-height: 1.13; } .jjtools-4etm-message > p:last-child { margin-top: 18px; font-size: 16px; } .nova-toolholder-image { aspect-ratio: 2 / 1; } .nova-toolholder-image img { width: 84%; height: 84%; } } .nova-toolholder-feature, .nova-toolholder-feature:hover, .nova-toolholder-feature:focus-visible { margin-top: clamp(30px, 3.2vw, 50px); overflow: visible; background: transparent; border: 0; box-shadow: none; transform: none; } .nova-toolholder-feature:focus-visible { outline: 3px solid #2d72b8; outline-offset: 8px; } .nova-toolholder-heading { margin-bottom: clamp(24px, 2.8vw, 42px); display: grid; gap: 10px; color: #041a2d; text-align: left; } .nova-toolholder-heading strong { font: 700 clamp(32px, 3.15vw, 52px)/1.02 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.045em; text-wrap: balance; } .nova-toolholder-heading small { color: rgba(4,26,45,.68); font: 400 clamp(15px, 1.2vw, 19px)/1.45 "IBM Plex Sans", Arial, sans-serif; } .nova-toolholder-image { aspect-ratio: 4 / 1; background: transparent; } .nova-toolholder-image img { width: 84%; height: 84%; } .nova-toolholder-feature:hover .nova-toolholder-image img, .nova-toolholder-feature:focus-visible .nova-toolholder-image img { transform: scale(1.01); } @media (max-width: 780px) { .nova-toolholder-heading { margin-bottom: 22px; gap: 8px; } .nova-toolholder-heading strong { font-size: clamp(30px, 9vw, 42px); } .nova-toolholder-image { aspect-ratio: 2 / 1; } .nova-toolholder-image img { width: 100%; height: 100%; } } main .nova-chapter > .featured-nova, .nova-chapter .nova-visual, .nova-recommended { background: var(--chapter-surface); } main .nova-chapter > .featured-nova::after, .nova-chapter .nova-visual::before { background: none; } .nova-recommended { border-top: 0; } .featured-visual.nova-visual > .nova-hero-product--center { left: 11%; top: 20%; bottom: auto; width: 31%; height: 60%; } @media (max-width: 780px) { main .nova-chapter > .featured-nova::after, .nova-chapter .nova-visual::before { background: none; } .featured-visual.nova-visual > .nova-hero-product--center { left: 25%; top: 54px; bottom: auto; width: 50%; height: 290px; } } .nova-product-card { grid-template-rows: minmax(235px, 1fr) 72px; } .nova-product-copy { min-height: 72px; padding: 10px 14px; align-items: center; justify-content: center; gap: 0; text-align: center; } .nova-product-copy strong { width: 100%; text-align: center; } .nova-product-copy .nova-cnc-title { direction: rtl; unicode-bidi: isolate; white-space: nowrap; } .en-site .nova-product-copy .nova-cnc-title { direction: ltr; } .nova-toolholder-feature { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(28px, 4vw, 68px); } .nova-toolholder-heading { margin-bottom: 0; } .nova-toolholder-image { aspect-ratio: 16 / 7; } .nova-toolholder-image img { width: 100%; height: 100%; } @media (max-width: 780px) { .nova-product-card { grid-template-rows: 190px 64px; } .nova-product-copy { min-height: 64px; padding: 9px 10px; } .nova-toolholder-feature { grid-template-columns: 1fr; gap: 24px; } .nova-toolholder-heading { margin-bottom: 0; } .nova-toolholder-image { aspect-ratio: 2 / 1; } } @media (max-width: 520px) { .nova-product-card { grid-template-rows: 230px 68px; } } html, body { overflow-anchor: none; } .manufacturer-chapter-switcher { height: 42px; min-height: 42px; flex: 0 0 42px; margin: -24px 0 12px; transform: translateY(-18px); } .manufacturer-chapter-arrow { width: 42px; height: 42px; flex: 0 0 42px; } #kitagawa, #kitagawa > .featured-kitagawa, #kitagawa .kitagawa-visual, #kitagawa > .kitagawa-selected { background: #f2f4f5; border-block: 0; } #kitagawa > .featured-kitagawa::after, #kitagawa .kitagawa-visual::before { background: none; } #royal .royal-mtc-gallery figure:first-child .royal-mtc-image img { transform: translateY(-12px); } #royal .royal-mtc-gallery figure:first-child:hover .royal-mtc-image img, #royal .royal-mtc-gallery figure:first-child:focus-within .royal-mtc-image img { transform: translateY(-12px) scale(1.035); } .featured-automator .automator-visual { padding: clamp(82px, 7vw, 112px) 50% clamp(82px, 7vw, 112px) clamp(72px, 7vw, 116px); gap: clamp(6px, 1.15vw, 18px); } .featured-visual.automator-visual > .automator-product, .featured-visual.automator-visual > .automator-visii, .featured-visual.automator-visual > .automator-adp, .featured-visual.automator-visual > .automator-colibri, .featured-visual.automator-visual > .automator-numbering { background: transparent; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 12px 15px rgba(62, 35, 30, .13)); } .featured-visual.automator-visual > .automator-visii, .featured-visual.automator-visual > .automator-adp { width: 88%; height: 88%; } .featured-visual.automator-visual > .automator-colibri, .featured-visual.automator-visual > .automator-numbering { width: 76%; height: 76%; } main .nova-chapter > .featured-nova { min-height: 610px; } main #nova > .featured-nova .nova-content { min-height: 610px; } .nova-recommended { padding-top: clamp(40px, 4vw, 58px); } .nova-recommended-head { margin-bottom: clamp(22px, 2.4vw, 34px); } @media (max-width: 780px) { .manufacturer-chapter-switcher { height: 38px; min-height: 38px; flex-basis: 38px; margin: 0; transform: none; } .manufacturer-chapter-arrow { width: 38px; height: 38px; flex-basis: 38px; } .featured-automator .automator-visual { padding: 34px 30px 38px; gap: 8px 12px; } main .nova-chapter > .featured-nova { min-height: 0; } .nova-chapter .nova-visual { display: none; } main #nova > .featured-nova .nova-content { min-height: 0; padding: 62px 22px 48px; } .nova-recommended { padding-top: 40px; } } main #kitagawa { --chapter-surface: #f2f4f5; } main #kitagawa, main #kitagawa > .featured-kitagawa, main #kitagawa .kitagawa-visual, main #kitagawa > .kitagawa-selected { background: #f2f4f5; } main #arno, main #arno > .featured-arno, main #arno .arno-visual, main #arno > .arno-recommended { background: #f7f6f1; } @media (min-width: 781px) { .manufacturer-explorer-detail .featured-content, .manufacturer-explorer-detail--stack > .featured .featured-content { position: relative; } .manufacturer-chapter-switcher { position: absolute; z-index: 8; top: 28px; right: clamp(46px, 7vw, 112px); left: 30px; width: auto; height: 42px; min-height: 42px; margin: 0; transform: none; } } @media (max-width: 780px) { .manufacturer-chapter-switcher { position: absolute; z-index: 8; top: 18px; right: 24px; left: 24px; width: auto; margin: 0; transform: none; } } main #jjtools, main #jjtools > .featured-jjtools, main #jjtools .jjtools-visual, main #jjtools > .jjtools-selected, main #jjtools > .jjtools-4etm-feature { background: #f3f4f1; } main #nova, main #nova > .featured-nova, main #nova .nova-visual, main #nova > .nova-recommended { background: #eef2f4; } main #kitagawa > .featured-kitagawa, main #kitagawa > .kitagawa-selected, main #arno > .featured-arno, main #arno > .arno-recommended, main #jjtools > .featured-jjtools, main #jjtools > .jjtools-selected, main #jjtools > .jjtools-4etm-feature, main #nova > .featured-nova, main #nova > .nova-recommended { border-block: 0; } main #kitagawa > .featured-kitagawa::after, main #kitagawa .kitagawa-visual::before, main #nova > .featured-nova::after, main #nova .nova-visual::before { background: none; } html, body { overflow-anchor: none; } html.manufacturer-chapter-switching, body.manufacturer-chapter-switching { scroll-behavior: auto !important; } .manufacturer-chapter-scroll-spacer { width: 100%; height: 0; flex: 0 0 auto; background: inherit; pointer-events: none; } main .manufacturer-explorer-detail[hidden] { display: none !important; } @media (min-width: 781px) { main :is( .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) { border-top: 0 !important; } main :is( .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content { padding-top: 84px !important; justify-content: flex-start !important; } main :is( .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content.reveal { opacity: 1 !important; transform: none !important; transition: none !important; } main :is( .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) .featured-content > p.featured-label { height: 58px; min-height: 58px; flex: 0 0 58px; } #kennametal .featured-content > p.kennametal-value-label { width: calc(100% + clamp(145px, 12vw, 210px)); min-width: calc(100% + clamp(145px, 12vw, 210px)); align-self: flex-end; } .en-site #kennametal .featured-content > p.kennametal-value-label { transform: translateX(clamp(-210px, -12vw, -120px)); } } .heavy-hitter-arrow, .heavy-hitter-arrow:hover, .heavy-hitter-arrow:focus-visible, .manufacturer-chapter-arrow, .manufacturer-chapter-arrow:hover, .manufacturer-chapter-arrow:focus-visible { background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; } .heavy-hitter-arrow span, .manufacturer-chapter-arrow span { display: block; margin: 0; font: 200 clamp(28px, 2.2vw, 34px)/1 Arial, sans-serif; transform: translateY(-2px); transition: color .18s ease, text-shadow .18s ease; } .heavy-hitter-arrow:hover span, .heavy-hitter-arrow:focus-visible span, .manufacturer-chapter-arrow:hover span, .manufacturer-chapter-arrow:focus-visible span { text-shadow: 0 0 10px currentColor; } @media (max-width: 780px) { .heavy-hitter-arrow span, .manufacturer-chapter-arrow span { font-size: 28px; } } @media (min-width: 781px) { main :is( .manufacturer-explorer-detail.featured, .manufacturer-explorer-detail--stack > .featured ) > .featured-content { margin-left: auto !important; margin-right: 0 !important; align-self: stretch; } } .solutions--logo-hub .solution-card .solution-logo-list :is( .solution-logo-item--arno, .solution-logo-item--kitagawa, .solution-logo-item--royal ) a > img, .solutions--logo-hub .solution-card .solution-logo-list :is( .solution-logo-item--arno, .solution-logo-item--kitagawa, .solution-logo-item--royal ) a::after { position: absolute; inset: auto; left: 50%; top: 50%; margin: 0; max-width: none; object-position: center; transform: translate(-50%, -50%) !important; transition: opacity .22s ease !important; } .solutions--logo-hub .solution-card .solution-logo-list :is( .solution-logo-item--arno, .solution-logo-item--kitagawa, .solution-logo-item--royal ) a:hover > img, .solutions--logo-hub .solution-card .solution-logo-list :is( .solution-logo-item--arno, .solution-logo-item--kitagawa, .solution-logo-item--royal ) a:focus-visible > img { transform: translate(-50%, -50%) !important; } .solutions--logo-hub .solution-logo-item--arno a > img, .solutions--logo-hub .solution-logo-item--arno a::after { width: clamp(108px, 10.6vw, 136px) !important; height: clamp(46px, 4.7vw, 54px) !important; max-width: none !important; max-height: none !important; } .solutions--logo-hub .solution-logo-item--arno a::after { content: ""; background: url("arno-logo-dark-color.svg?v=325") center / contain no-repeat; pointer-events: none; } .solutions--logo-hub .solution-logo-item--kitagawa a > img, .solutions--logo-hub .solution-logo-item--kitagawa a::after { width: clamp(112px, 11.8vw, 148px) !important; height: clamp(48px, 5vw, 58px) !important; max-width: none !important; max-height: none !important; } .solutions--logo-hub .solution-logo-item--kitagawa a > img { filter: none !important; opacity: 1; } .solutions--logo-hub .solution-logo-item--royal a > img, .solutions--logo-hub .solution-logo-item--royal a::after { width: min(122px, 84%) !important; height: 50px !important; max-width: none !important; max-height: none !important; } .solutions--logo-hub .solution-logo-item--royal a > img { filter: brightness(0) !important; opacity: 1; } .solutions--logo-hub .solution-dark .solution-logo-list .solution-logo-item--jjtools a:hover > img, .solutions--logo-hub .solution-dark .solution-logo-list .solution-logo-item--jjtools a:focus-visible > img { filter: none; opacity: 1; } .solutions--logo-hub .solution-logo-item--jjtools a::after { content: none; display: none; } #arno .featured-visual.arno-visual > .arno-tooling { left: 3.5%; top: 0; width: 56%; height: 100%; object-fit: contain; object-position: center; transform: none; mix-blend-mode: normal; } @media (max-width: 780px) { #arno .featured-visual.arno-visual > .arno-tooling { left: 4%; top: 8px; width: 92%; height: 390px; object-position: center top; } } main #royal, main #royal > .featured-royal, main #royal .royal-visual, main #royal > .royal-mtc-feature { background: #edf2f4; border-block: 0; } main #royal > .featured-royal::after, main #royal .royal-visual::before { background: none; } #royal .royal-mtc-link:hover, #royal .royal-mtc-link:focus-visible { color: var(--arnold-ink); background: var(--yellow); border-color: var(--yellow); transform: none; } .kennametal-kcp25c-eyebrow, .jjtools-4etm-eyebrow, .royal-mtc-eyebrow { gap: 0; color: #686b67; font-family: "IBM Plex Sans", Arial, sans-serif; font-weight: 700; font-size: 33px; line-height: 1.1; letter-spacing: .15em; text-transform: uppercase; } .kennametal-kcp25c-eyebrow::before, .jjtools-4etm-eyebrow::before, .royal-mtc-eyebrow::before { content: none; display: none; } .royal-mtc-eyebrow { margin: 0 0 18px; display: flex; align-items: center; } #royal .royal-mtc-benefits { margin: 24px 0 30px; padding: 0; display: grid; gap: 8px; list-style: none; color: rgba(4,26,45,.72); font: 500 clamp(15px, 1.15vw, 18px)/1.42 "IBM Plex Sans", Arial, sans-serif; direction: rtl; text-align: right; } #royal .royal-mtc-benefits li { position: relative; padding-right: 18px; } #royal .royal-mtc-benefits li::before { content: "-"; position: absolute; right: 0; } .en-site #royal .royal-mtc-benefits { direction: ltr; text-align: left; } .en-site #royal .royal-mtc-benefits li { padding-right: 0; padding-left: 18px; } .en-site #royal .royal-mtc-benefits li::before { right: auto; left: 0; } @media (min-width: 781px) { #kitagawa { --brand-followup-shift: -50px; } #arno { --brand-followup-shift: -45px; } #royal { --brand-followup-shift: -31px; } #jjtools { --brand-followup-shift: -50px; } #nova { --brand-followup-shift: -50px; } .en-site #kitagawa { --brand-followup-shift: -2px; } .en-site #arno { --brand-followup-shift: -16px; } .en-site #royal { --brand-followup-shift: -2px; } .en-site #jjtools { --brand-followup-shift: -39px; } .en-site #nova { --brand-followup-shift: -48px; } #kitagawa > .kitagawa-selected, #arno > .arno-recommended, #royal > .royal-mtc-feature, #jjtools > .jjtools-selected, #nova > .nova-recommended { margin-top: var(--brand-followup-shift); } } .en-site main .featured-content > p.featured-label, .en-site #kennametal .featured-content > p.kennametal-value-label { padding-inline: 15px; font-size: clamp(15px, 1.08vw, 16.5px); letter-spacing: -.01em; text-transform: uppercase; } @media (min-width: 781px) and (max-width: 1199px) { .en-site main .featured-content > p.featured-label, .en-site #kennametal .featured-content > p.kennametal-value-label { height: auto; min-height: 58px; flex: 0 0 auto; padding-block: 10px; line-height: 1.18; white-space: normal; text-wrap: balance; } } #kitagawa .kitagawa-product-card, #jjtools .jjtools-product-card { min-height: 0; } #kitagawa .kitagawa-product-meta { box-sizing: border-box; height: 64px; min-height: 64px; flex: 0 0 64px; padding: 10px 14px; align-items: center; justify-content: center; } #kitagawa .kitagawa-product-meta strong { width: 100%; text-align: center; } #jjtools .jjtools-product-meta, html[dir="rtl"] #jjtools .jjtools-product-meta { box-sizing: border-box; height: 96px; min-height: 96px; flex: 0 0 96px; padding: 12px 16px; display: flex; align-items: center; } #jjtools .jjtools-product-meta > span, html[dir="rtl"] #jjtools .jjtools-product-meta > span { width: 100%; align-self: center; align-content: center; } @media (max-width: 780px) { #kitagawa .kitagawa-product-meta { height: 62px; min-height: 62px; flex-basis: 62px; padding: 9px 13px; } #jjtools .jjtools-product-meta, html[dir="rtl"] #jjtools .jjtools-product-meta { height: 108px; min-height: 108px; flex-basis: 108px; padding: 12px 16px; } } @media (min-width: 941px) and (max-width: 1180px) { .site-search--desktop { width: 148px; } .header-actions { gap: 7px; padding-left: 4px; } } .cami-brand-lockup { width: min(286px, 76%); flex: 0 0 auto; } .cami-brand-lockup .cami-logo { width: 100%; max-width: 100%; } .cami-brand-lockup .cableeye-subbrand { width: min(224px, 100%); flex: 0 0 auto; } @media (max-width: 780px) { .cami-brand-lockup { width: min(248px, 78%); } .cami-brand-lockup .cableeye-subbrand { width: min(205px, 100%); } } @media (min-width: 1051px) and (max-width: 1199px) { #jjtools > .jjtools-selected { overflow: visible; } #jjtools .jjtools-product-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { main #automator.featured { min-height: 1230px; } main #automator.featured .automator-visual { height: 610px; overflow: hidden; } main #automator.featured .automator-content { padding-top: 630px !important; } } @media (max-width: 940px) { main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) { min-height: 0; padding-bottom: 52px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured)::after { content: none; display: none; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) > .featured-content { display: contents; opacity: 1 !important; transform: none !important; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) .featured-label { order: 1; width: auto; margin: 58px 22px 22px; } main #cami.featured .cami-brand-lockup, main #spectrum.featured .spectrum-logo, main #destaco.featured .destaco-logo, main #automator.featured .automator-logo { order: 2; margin-inline: 22px; margin-bottom: 22px; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) .featured-category-line { order: 3; width: auto; margin-inline: 22px; margin-bottom: 18px; overflow-wrap: anywhere; white-space: normal; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) > .featured-visual { position: relative; inset: auto; order: 4; width: 100%; height: 400px; flex: 0 0 400px; overflow: hidden; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) > .featured-visual::before { content: none; display: none; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) > .featured-content > p:not(.featured-label) { order: 5; margin: 26px 22px; } main :is(#cami.featured, #spectrum.featured, #destaco.featured, #automator.featured) .featured-actions { order: 6; margin-inline: 22px; } main #automator.featured > .automator-visual { height: 610px; flex-basis: 610px; } } @media (min-width: 781px) and (max-width: 1199px) { main #automator.featured { min-height: 0; padding-bottom: 64px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; } main #automator.featured::after, main #automator.featured > .automator-visual::before { content: none; display: none; } main #automator.featured > .automator-content { display: contents; opacity: 1 !important; transform: none !important; } main #automator.featured .automator-label { order: 1; width: auto; margin: 58px clamp(44px, 8vw, 96px) 28px; } main #automator.featured .automator-logo { order: 2; margin-inline-start: clamp(44px, 8vw, 96px); margin-inline-end: auto; margin-bottom: 22px; } main #automator.featured .featured-category-line { order: 3; width: auto; margin-inline: clamp(44px, 8vw, 96px); margin-bottom: 18px; overflow-wrap: anywhere; white-space: normal; } main #automator.featured > .automator-visual { position: relative; inset: auto; order: 4; width: 100%; height: 540px; flex: 0 0 540px; padding: 36px clamp(70px, 10vw, 140px) 42px; overflow: hidden; } main #automator.featured > .automator-content > p:not(.featured-label) { order: 5; width: min(880px, calc(100% - 88px)); margin: 30px auto; } main #automator.featured .featured-actions { order: 6; width: min(880px, calc(100% - 88px)); margin-inline: auto; } } @media (min-width: 781px) and (max-width: 940px) { .footer-link-row, .footer-nav, .footer-legal { flex-wrap: wrap; white-space: normal; } .footer-legal { padding-inline-start: 0; border-inline-start: 0; } } #nova > .nova-recommended { position: relative; z-index: 3; } @media (min-width: 1400px) and (max-width: 1499px) { #kitagawa { --brand-followup-shift: -62px; } #arno { --brand-followup-shift: -49px; } #royal { --brand-followup-shift: -65px; } #jjtools { --brand-followup-shift: -69px; } #nova { --brand-followup-shift: -112px; } .en-site #kitagawa { --brand-followup-shift: -11px; } .en-site #arno { --brand-followup-shift: -49px; } .en-site #royal { --brand-followup-shift: -12px; } .en-site #jjtools { --brand-followup-shift: -39px; } .en-site #nova { --brand-followup-shift: -53px; } } @media (min-width: 1500px) and (max-width: 1649px) { #kitagawa { --brand-followup-shift: -62px; } #arno { --brand-followup-shift: -52px; } #royal { --brand-followup-shift: -73px; } #jjtools { --brand-followup-shift: -69px; } #nova { --brand-followup-shift: -113px; } .en-site #kitagawa { --brand-followup-shift: -17px; } .en-site #arno { --brand-followup-shift: -23px; } .en-site #royal { --brand-followup-shift: -26px; } .en-site #jjtools { --brand-followup-shift: -39px; } .en-site #nova { --brand-followup-shift: -54px; } } @media (min-width: 1650px) { #kitagawa { --brand-followup-shift: -62px; } #arno { --brand-followup-shift: -52px; } #royal { --brand-followup-shift: -56px; } #jjtools { --brand-followup-shift: -69px; } #nova { --brand-followup-shift: -84px; } .en-site #kitagawa { --brand-followup-shift: -18px; } .en-site #arno { --brand-followup-shift: -23px; } .en-site #royal { --brand-followup-shift: -39px; } .en-site #jjtools { --brand-followup-shift: -39px; } .en-site #nova { --brand-followup-shift: -54px; } } @media (max-width: 780px) { #kitagawa { --brand-followup-shift: -10px; } #arno { --brand-followup-shift: 0px; } #royal { --brand-followup-shift: -14px; } #jjtools { --brand-followup-shift: -10px; } #nova { --brand-followup-shift: -109px; } .en-site #nova { --brand-followup-shift: -65px; } #kitagawa > .kitagawa-selected, #arno > .arno-recommended, #royal > .royal-mtc-feature, #jjtools > .jjtools-selected, #nova > .nova-recommended { margin-top: var(--brand-followup-shift); } } @media (min-width: 781px) { .solutions--logo-hub #automation-solutions .solution-logo-list { column-gap: clamp(28px, 2.4vw, 36px); } } .jjtools-4etm-message > .jjtools-4etm-description { max-width: 570px; margin: 22px 0 0; color: #555955; font: 400 clamp(16px, 1.25vw, 19px)/1.55 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.01em; } .jjtools-4etm-link { width: fit-content; min-height: 54px; margin-top: 24px; max-width: 100%; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; column-gap: .55em; color: #fff; background: #0b3554; border: 1px solid #0b3554; font: 700 12px/1.15 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .05em; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; } .jjtools-4etm-link:hover, .jjtools-4etm-link:focus-visible { color: #0b3554; background: transparent; outline: 0; transform: translateY(-2px); } .solutions--logo-hub #automation-solutions .solution-logo-item--automator a { position: relative; isolation: isolate; padding: 0; background: transparent; border: 0; border-radius: 0; } .solutions--logo-hub #automation-solutions .solution-logo-item--automator a::before, .solutions--logo-hub #automation-solutions .solution-logo-item--automator a::after { content: none; display: none; } .solutions--logo-hub #automation-solutions .solution-logo-list .solution-logo-automator { width: clamp(112px, 11.8vw, 148px); max-width: 100%; height: auto; max-height: 44px; grid-area: 1 / 1; filter: none; mix-blend-mode: normal; position: relative; z-index: 1; transform: none; transition: opacity .28s ease; } .solutions--logo-hub #automation-solutions .solution-logo-list .solution-logo-automator--mono { opacity: 1; } .solutions--logo-hub #automation-solutions .solution-logo-list .solution-logo-automator--color { opacity: 0; } .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:hover .solution-logo-automator, .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:focus-visible .solution-logo-automator { filter: none; transform: none; } .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:hover .solution-logo-automator--mono, .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:focus-visible .solution-logo-automator--mono { opacity: 0; } .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:hover .solution-logo-automator--color, .solutions--logo-hub #automation-solutions .solution-logo-item--automator a:focus-visible .solution-logo-automator--color { opacity: 1; } @media (min-width: 781px) and (max-width: 1050px) { #royal .royal-mtc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overflow: visible; padding-bottom: 0; } #royal .royal-mtc-gallery figure { min-width: 0; flex: initial; } } @media (max-width: 780px) { .jjtools-4etm-message > .jjtools-4etm-description { margin-top: 18px; font-size: 16px; } .jjtools-4etm-link { width: fit-content; max-width: 100%; min-height: 58px; } #royal .royal-mtc-gallery { width: min(100%, 420px); margin-inline: auto; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; overflow: visible; } #royal .royal-mtc-gallery figure { width: 100%; min-width: 0; flex: initial; } #royal .royal-mtc-gallery figure:first-child .royal-mtc-image img { width: 100%; height: 100%; transform: none; } #royal .royal-mtc-gallery figure:first-child:hover .royal-mtc-image img, #royal .royal-mtc-gallery figure:first-child:focus-within .royal-mtc-image img { transform: scale(1.025); } } main #royal .featured-content > p.featured-label.royal-label { color: #111; } .solutions--logo-hub .solution-card.reveal { opacity: 1; transform: none; transition: none; } #royal .royal-bar-pullers-feature[dir="rtl"] .royal-bar-pullers-header { grid-template-columns: 1fr; } #royal .royal-bar-pullers-feature[dir="rtl"] .royal-bar-pullers-header > div { width: min(780px, 100%); margin-left: auto; } @media (min-width: 1200px) { main .featured-content > p.featured-label { width: max-content; min-width: 100%; max-width: min(720px, calc(100vw - 48px)); } } @media (min-width: 781px) and (max-width: 1199px) { main .featured-content > p.featured-label { height: auto; min-height: 58px; flex: 0 0 auto; white-space: normal; text-wrap: balance; } } @media (min-width: 781px) { .heavy-hitter-title-long { width: max-content; max-width: min(900px, calc(100vw - 140px)); white-space: normal; line-height: 1.08; } .heavy-hitter-title-long > a { display: block; } } @media (max-width: 780px) { .heavy-hitter-title { width: 100%; max-width: 100%; white-space: normal; line-height: 1.15; } .heavy-hitter-title > a { display: block; } } #arno .arno-recommended-image { padding: 0; align-items: stretch; overflow: hidden; background: #fff; } #arno .arno-recommended-image img, #arno .arno-recommended-card--deco .arno-recommended-image img, #arno .arno-recommended-card--shark .arno-recommended-image img { display: block; object-position: center 42%; } #arno .arno-recommended-image { min-height: 360px; padding: clamp(14px, 1.35vw, 22px); display: grid; place-items: center; overflow: hidden; background: #f1f1ef; isolation: isolate; } #arno .arno-recommended-card { --arno-cutout-width: 128%; --arno-cutout-shift: -3.5%; } #arno .arno-recommended-card--deco { --arno-cutout-width: 160%; --arno-cutout-shift: -3.6%; } #arno .arno-recommended-card--shark { --arno-cutout-width: 250%; --arno-cutout-shift: -4%; } #arno .arno-recommended-image img, #arno .arno-recommended-card--deco .arno-recommended-image img, #arno .arno-recommended-card--shark .arno-recommended-image img { width: var(--arno-cutout-width); height: 100%; max-width: none; display: block; object-fit: contain; object-position: center; mix-blend-mode: normal; transform: translateX(var(--arno-cutout-shift)); transform-origin: center; } #arno .arno-recommended-card:hover .arno-recommended-image img, #arno .arno-recommended-card:focus-visible .arno-recommended-image img { transform: translateX(var(--arno-cutout-shift)) scale(1.02); } html[dir="rtl"] #jjtools .jjtools-product-meta > span { width: 100%; justify-items: end; text-align: right; } html[dir="rtl"] #jjtools .jjtools-product-meta { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } html[dir="rtl"] #jjtools .jjtools-product-meta > i { display: none; } html[dir="rtl"] #jjtools .jjtools-product-meta strong, html[dir="rtl"] #jjtools .jjtools-product-meta small { width: 100%; text-align: right; } html[dir="rtl"] #jjtools .jjtools-product-meta strong { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] #arno .arno-recommended-copy strong { width: 100%; display: block; direction: ltr; unicode-bidi: isolate; text-align: right; } @media (max-width: 780px) { #arno .arno-recommended-image { padding: 12px; } } #royal .royal-mtc-gallery.royal-mtc-composite-gallery { width: 100%; margin: 0; padding: 0; display: block; overflow: visible; } #royal .royal-mtc-composite-gallery .royal-mtc-composite { width: 100%; min-width: 0; margin: 0; overflow: hidden; background: #fff; border: 1px solid rgba(22, 106, 165, .2); box-shadow: 0 10px 26px rgba(4, 26, 45, .07); } #royal .royal-mtc-composite-images { width: 100%; aspect-ratio: 3 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; background: #fff; } #royal .royal-mtc-composite-images img { width: 100% !important; height: 100% !important; min-width: 0; display: block; object-fit: contain; object-position: center; transform: none !important; background: #fff; } @media (max-width: 780px) { #royal .royal-mtc-gallery.royal-mtc-composite-gallery { width: min(100%, 640px); } } @media (min-width: 1051px) { #royal .royal-mtc-feature { grid-template-columns: minmax(300px, .58fr) minmax(650px, 1.7fr); align-items: start; } #royal .royal-mtc-feature-copy { padding-top: clamp(18px, 2.1vw, 34px); } } #royal .royal-mtc-feature h2 { max-width: 500px; font-size: clamp(30px, 2.55vw, 42px); line-height: 1.04; } #royal .royal-mtc-product { min-width: 0; position: relative; z-index: 2; overflow: hidden; background: #fff; border: 1px solid rgba(22, 106, 165, .2); box-shadow: 0 10px 26px rgba(4, 26, 45, .07); } #royal .royal-mtc-product .royal-mtc-composite-gallery, #royal .royal-mtc-product .royal-mtc-composite { border: 0; box-shadow: none; } #royal .royal-mtc-product .royal-mtc-composite:hover, #royal .royal-mtc-product .royal-mtc-composite:focus-within { transform: none; box-shadow: none; } #royal .royal-mtc-details { padding: clamp(18px, 1.7vw, 26px) clamp(20px, 2.1vw, 32px) clamp(20px, 1.9vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 28px; color: #041a2d; background: rgba(255, 255, 255, .98); border-top: 3px solid #166aa5; } #royal .royal-mtc-summary { grid-column: 1 / -1; max-width: none; margin: 0; color: #226f9f; font: 650 clamp(17px, 1.35vw, 21px)/1.35 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.015em; } #royal .royal-mtc-details .royal-mtc-benefits { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: rgba(4, 26, 45, .72); font: 500 clamp(13px, 1vw, 15px)/1.35 "IBM Plex Sans", Arial, sans-serif; } #royal .royal-mtc-details .royal-mtc-benefits li, .en-site #royal .royal-mtc-details .royal-mtc-benefits li { padding: 0 15px 0 0; position: relative; } #royal .royal-mtc-details .royal-mtc-benefits li::before, .en-site #royal .royal-mtc-details .royal-mtc-benefits li::before { content: ""; width: 6px; height: 6px; position: absolute; right: 0; left: auto; top: .48em; background: var(--yellow); } .en-site #royal .royal-mtc-details .royal-mtc-benefits li { padding: 0 0 0 15px; } .en-site #royal .royal-mtc-details .royal-mtc-benefits li::before { right: auto; left: 0; } #royal .royal-mtc-details .royal-mtc-link { min-height: 48px; align-self: end; white-space: nowrap; } @media (max-width: 1050px) { #royal .royal-mtc-feature-copy { max-width: none; } #royal .royal-mtc-feature h2 { max-width: 760px; } } @media (max-width: 780px) { #royal .royal-mtc-product { width: min(100%, 640px); margin-inline: auto; } #royal .royal-mtc-details { padding: 18px; grid-template-columns: 1fr; align-items: start; gap: 15px; } #royal .royal-mtc-summary, #royal .royal-mtc-details .royal-mtc-benefits, #royal .royal-mtc-details .royal-mtc-link { grid-column: 1; } #royal .royal-mtc-details .royal-mtc-benefits { display: grid; gap: 8px; } #royal .royal-mtc-details .royal-mtc-link { justify-self: start; } } @media (min-width: 1051px) { #royal .royal-mtc-feature { padding-inline: clamp(28px, 5vw, 84px); grid-template-columns: minmax(280px, .5fr) minmax(700px, 1.82fr); gap: clamp(26px, 3vw, 48px); } } #royal .royal-mtc-composite-images img { transform: scale(1.045) !important; } #royal .royal-mtc-feature h2 { max-width: 610px; font-size: clamp(34px, 3.35vw, 54px); font-weight: 650; line-height: 1; letter-spacing: -.052em; } #royal .royal-mtc-feature-copy .royal-mtc-link { margin-top: clamp(28px, 2.5vw, 40px); color: #fff; background: #0b3554; border-color: #0b3554; } html[dir="rtl"] #royal .royal-mtc-feature-copy .royal-mtc-link { direction: rtl; text-align: right; } #royal .royal-mtc-link > .royal-mtc-link-label { display: inline !important; font-size: inherit; line-height: 1.25; transform: none; } #royal .royal-mtc-link > .royal-mtc-link-arrow { display: none !important; } #royal .royal-mtc-link:hover > .royal-mtc-link-label, #royal .royal-mtc-link:focus-visible > .royal-mtc-link-label { transform: none; } #royal .royal-mtc-product { overflow: visible; background: transparent; border: 0; box-shadow: none; } #royal .royal-mtc-product .royal-mtc-composite { border: 1px solid rgba(22, 106, 165, .2); box-shadow: 0 10px 26px rgba(4, 26, 45, .07); } #royal .royal-mtc-details { padding: clamp(22px, 2vw, 32px) 0 0; display: block; color: #041a2d; background: transparent; border: 0; } #royal .royal-mtc-summary { width: 100%; max-width: none; margin: 0; color: #226f9f; font: 650 clamp(21px, 2.05vw, 33px)/1.18 "IBM Plex Sans", Arial, sans-serif; letter-spacing: -.035em; text-wrap: pretty; } html[dir="rtl"] #royal .royal-mtc-summary { direction: rtl; text-align: right; } .en-site #royal .royal-mtc-summary { direction: ltr; text-align: left; } @media (max-width: 780px) { #royal .royal-mtc-feature h2 { font-size: clamp(32px, 9.8vw, 44px); } #royal .royal-mtc-feature-copy .royal-mtc-link { margin-top: 24px; } #royal .royal-mtc-details { padding: 20px 0 0; } #royal .royal-mtc-summary { font-size: clamp(20px, 5.7vw, 25px); line-height: 1.24; } } .featured-automator .automator-visual { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.15vw, 18px); } .featured-visual.automator-visual > .automator-visii { grid-column: 1 / span 3; grid-row: 1; } .featured-visual.automator-visual > .automator-adp { grid-column: 4 / span 3; grid-row: 1; } .featured-visual.automator-visual > .automator-colibri { grid-column: 1 / span 2; grid-row: 2; } .featured-visual.automator-visual > .automator-numbering { grid-column: 3 / span 2; grid-row: 2; } .featured-visual.automator-visual > .automator-mb21 { grid-column: 5 / span 2; grid-row: 2; width: 82%; height: 82%; transform: scale(1.2); transform-origin: center; } @media (max-width: 780px) { .featured-automator { min-height: 1160px; } .featured-automator .automator-visual { height: 610px; padding: 30px 28px 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px 16px; } .featured-visual.automator-visual > .automator-visii, .featured-visual.automator-visual > .automator-adp, .featured-visual.automator-visual > .automator-colibri, .featured-visual.automator-visual > .automator-numbering { grid-column: auto; grid-row: auto; } .featured-visual.automator-visual > .automator-mb21 { grid-column: 1 / -1; grid-row: 3; width: 44%; height: 100%; justify-self: center; } .automator-content { padding-top: 530px; } } :root { --image-series-heading-gap: clamp(28px, 3vw, 44px); } :is( .kennametal-products-head, .heavy-hitters-head, .kennametal-field-videos-head, .kitagawa-selected-head, .arno-recommended-head, .royal-bar-pullers-header, .nova-recommended-head ) { margin-bottom: var(--image-series-heading-gap); } #royal .royal-bar-pullers-header { margin-bottom: var(--image-series-heading-gap); } #arno .featured-visual.arno-visual > .arno-tooling { left: 9.1%; width: 44.8%; } @media (max-width: 780px) { #arno .featured-visual.arno-visual > .arno-tooling { left: 13.2%; width: 73.6%; } } @media (min-width: 1150px) and (max-width: 1260px) { html[dir="rtl"] #about .intro-copy-text > p:nth-of-type(4) { width: calc(100% + 20px); } } #representatives-menu.nav-panel.mega-menu { height: auto; min-height: 0; border-bottom: 0; } @media (max-width: 940px) { .main-nav { justify-content: flex-start; } .main-nav > a::after, .main-nav > .nav-dropdown > .nav-dropdown-toggle::after { content: none; display: none; } } @media (min-width: 781px) and (max-width: 1199px) { main .featured-content > p.featured-label, #kennametal .featured-content > p.kennametal-value-label { height: auto; min-height: 58px; flex: 0 0 auto; padding-block: 10px; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.2; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } } html:not(.reveal-ready) .reveal { opacity: 1; transform: none; } main #automator.featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); min-height: 0; padding: 84px clamp(24px, 7vw, 112px) 64px; direction: ltr; overflow: hidden; } main #automator.featured::after, main #automator.featured > .automator-visual::before { content: none; display: none; } main #automator.featured > .automator-visual { position: relative; inset: auto; grid-column: 1; grid-row: 1; order: 0; width: 100%; min-width: 0; height: clamp(400px, 40vw, 610px); padding: 0; overflow: hidden; } main #automator.featured > .automator-content { position: relative; display: block; grid-column: 2; grid-row: 1; order: 0; width: 100%; min-width: 0; max-width: none; padding: 0 !important; margin: 0; direction: rtl; } .en-site main #automator.featured > .automator-content { direction: ltr; } main #automator.featured .automator-label { width: 100%; margin: 0 0 28px; } main #automator.featured .automator-logo { margin-inline: 0; margin-bottom: 24px; } main #automator.featured .featured-category-line { width: 100%; margin: 0 0 24px; } main #automator.featured > .automator-content > p:not(.featured-label) { width: 100%; margin: 0 0 30px; } main #automator.featured .featured-actions { width: 100%; margin: 0; } @media (max-width: 1199px) { main #automator.featured { grid-template-columns: minmax(0, 1fr); gap: 36px; } main #automator.featured > .automator-content { grid-column: 1; grid-row: 1; max-width: 880px; margin-inline: auto; } main #automator.featured > .automator-visual { grid-column: 1; grid-row: 2; height: 480px; max-width: 880px; margin-inline: auto; } } @media (max-width: 780px) { main #automator.featured { padding-top: 64px; } main #automator.featured > .automator-visual { height: 610px; } } @media (max-width: 780px) { main #automator.featured .automator-visual > .automator-mb21 { width: 52.8%; height: 100%; transform: none; } } .native-video-player { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; } .native-video-player iframe { display: block; width: 100%; flex: 1; min-height: 0; border: 0; } .native-video-external { flex: 0 0 auto; padding: 5px 10px; background: #111; color: #fff; font-size: 13px; text-align: end; } .native-video-external:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }