@layer reset, tokens, base, components, utilities; @layer base { .axcn-public{max-width:1280px;margin:auto;padding:40px 5vw 80px;color:var(--text-primary)}.axcn-public .product-hero{gap:36px}.axcn-public .product-hero h1{font-size:var(--ax-font-48);line-height:1.25}.axcn-breadcrumb{padding:15px 0;font-size:var(--ax-font-14);line-height:2}.axcn-public a,.axcn-downloads a{color:inherit;text-underline-offset:4px}.axcn-hero-image img{max-width:100%;height:auto;object-fit:contain}.axcn-table-scroll{overflow-x:auto;margin:24px 0}.axcn-table-scroll table{border-collapse:collapse;width:100%;min-width:520px}.axcn-table-scroll th,.axcn-table-scroll td{padding:14px;text-align:left;border:1px solid var(--ax-gray-2);font-size:var(--ax-font-16);vertical-align:top}.axcn-table-scroll th{background:var(--ax-gray-1)}.axcn-public .product-section{padding:40px 0;border-top:1px solid var(--ax-gray-2)}.axcn-public h2{font-size:var(--ax-font-28);line-height:1.5;margin:0 0 20px}.axcn-public h3{font-size:var(--ax-font-22);line-height:1.5;margin:24px 0 10px}.axcn-public p{line-height:1.9}.axcn-files{list-style:none;padding:0}.axcn-files li{padding:16px 0;border-bottom:1px solid var(--ax-gray-2)}.axcn-files span{display:block;font-size:var(--ax-font-14);color:var(--ax-gray-4);margin-top:6px}.axcn-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:30px 0}.axcn-product-grid article{border:1px solid var(--ax-gray-2);padding:20px}.axcn-product-grid img{max-width:100%;height:180px;object-fit:contain}.axcn-product-grid h2{font-size:var(--ax-font-22)}.axcn-term-nav{display:flex;flex-wrap:wrap;gap:12px;padding:15px 0}.axcn-term-nav a{padding:10px 14px;border:1px solid var(--ax-gray-2)}.axcn-prose img{max-width:100%;height:auto}.axcn-simple-nav{padding:20px 5vw}.axcn-downloads{padding:20px 0}.axcn-downloads section{padding:20px 0;border-bottom:1px solid var(--ax-gray-2)}@media(max-width:640px){.axcn-public{padding:20px 20px 50px}.axcn-public .product-hero{display:block}.axcn-public .product-anchor{overflow-x:auto;white-space:nowrap}.axcn-public h2{font-size:var(--ax-font-22)}.axcn-table-scroll{margin-left:0;margin-right:0}.axcn-public .product-section{padding:28px 0}} }
@layer reset, tokens, base, components, utilities; @layer tokens {  :root { --color-black: #000000; --ax-ink: #142432; --heading-color: var(--ax-ink); --heading-font: "Andantex Heading", var(--sans); --text-primary: var(--ax-ink); --text-secondary: var(--ax-gray-4); --surface-page: var(--ax-gray-1); --surface-card: var(--ax-gray-0); --action-primary: var(--ax-brand); --action-accent: var(--ax-accent); --status-warning: var(--ax-warning); --status-success: var(--ax-success); --status-danger: var(--ax-danger); --paper: var(--ax-gray-1); --ink: var(--ax-ink); --muted: var(--ax-gray-4); --line: var(--ax-gray-2); --surface-highlight: var(--ax-gray-1); --dark: var(--ax-gray-5); --pad: clamp(22px,4.8vw,86px); --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif; --mono: ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace; --ax-gray-0: #ffffff; --ax-gray-1: #f4f7fa; --ax-gray-2: #d7e1e9; --ax-gray-3: #9aa6b2; --ax-gray-4: #4f5b67; --ax-gray-5: var(--ax-ink); --ax-brand: #153e63; --ax-accent: #087e8b; --ax-success: #087765; --ax-warning: #946200; --ax-danger: #b42318; --ax-font-12: 12px; --ax-font-14: 14px; --ax-font-16: 16px; --ax-font-18: 18px; --ax-font-22: 22px; --ax-font-28: 28px; --ax-font-36: 36px; --ax-font-48: 48px; --radius: 4px; --layout-max: 1480px; --layout-gutter: 32px; --layout-width: min(var(--layout-max),calc(100% - 2 * var(--layout-gutter))); --measure: var(--layout-max); --cn-blue: var(--ax-brand); --card-bg: var(--ax-gray-0); --card-border: var(--line); --card-border-hover: var(--ax-brand); --card-shadow-hover: 0 10px 28px color-mix(in srgb, var(--ax-brand) 10.2%, transparent); --card-pad: 28px; --focus: var(--ax-brand); --accent: var(--ax-brand); --accent-soft: var(--ax-gray-1); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 40px; --space-7: 64px; --fs-xs: var(--ax-font-12); --fs-sm: var(--ax-font-14); --fs-md: var(--ax-font-16); --fs-lg: var(--ax-font-18); --fs-xl: var(--ax-font-22); --lh-tight: 1.35; --lh-body: 1.8; --ax-accent-light: color-mix(in srgb, var(--ax-accent) 40%, white); }  .cn-industrial-design .cn-ref-hero { --hero-bg: #07121e; --hero-text: #eaf4fc; --hero-border: #203748; --hero-bg-mid: #0b2034; --hero-bg-end: #112f43; --hero-tone-67cff10a: #67cff10a; --hero-tone-1a80ad33: #1a80ad33; --hero-tone-4991b414: #4991b414; --hero-label: #aac6d8; --hero-dot: #67dcff; --hero-dot-glow: #53d8ff; --hero-body: #b7cbd9; --hero-link: #daeaf4; --hero-link-border: #638499; --hero-caption: #9db7c8; --hero-caption-line: #264454; --hero-tone-b6dcec26: #b6dcec26; --hero-tone-138ad517: #138ad517; --hero-tone-0005: #0005; --hero-tone-5fc7ee50: #5fc7ee50; --hero-tone-82c6dc40: #82c6dc40; --hero-tone-6bdcff99: #6bdcff99; --hero-tone-6bdcff44: #6bdcff44; --hero-inset: #0c1d2beb; --hero-inset-border: #3b718b; --hero-tone-0003: #0003; --hero-inset-text: #bdd9e9; --hero-accent: #6cddff; } } @layer tokens { :root{ --ax-nav-bg:var(--ax-ink); --ax-brand-logo:url("https://www.andantex.cn/wp-content/themes/andantex-cn/assets/styles/../brand-bilingual.png"); --ax-nav-text:#eaf4fc; --ax-nav-accent:#73ddff; --ax-motion-bg:#142432; --ax-motion-muted:#bccbd3; --ax-motion-choice:#1b303d; --ax-motion-selected:#233f52; --ax-motion-selected-line:#8cabd8; --ax-motion-paper:#f0f3f1; --ax-soft-line:color-mix(in srgb,var(--ax-ink) 8%,transparent); --ax-soft-shadow:0 1px 3px rgba(0,0,0,.025),0 4px 20px -2px rgba(0,0,0,.05); --ax-soft-shadow-hover:0 2px 6px rgba(0,0,0,.025),0 8px 28px -4px rgba(0,0,0,.07); --ax-card-radius:10px; } } @layer tokens { @media(max-width:1024px) { :root { --layout-gutter:24px; } } @media(max-width:640px) { :root { --layout-gutter:16px; } } } @layer tokens {  .cn-industrial-design.home { --ax-home-top-gradient: linear-gradient(110deg,#07121e 15%,#0b2034 63%,#112f43 100%); --ax-nav-bg: var(--ax-home-top-gradient); --ax-home-topline-bg: var(--ax-home-top-gradient); } }
@layer reset { * { box-sizing: border-box; } button, input, textarea, select { font: inherit; } h1, h2, h3, p { margin: 0; } img { max-width: 100%; display: block; } svg { display: block; width: 100%; } [hidden] { display: none!important; } } @layer base { html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); } a { color: inherit; text-decoration: none; } button { cursor: pointer; color: inherit; } button { border: 0; background: none; } body { font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-padding-top: 104px; } } @layer components { button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--ax-brand); outline-offset: 5px; } .skip { position: fixed; z-index: 99; top: 8px; left: 12px; transform: translateY(-160%); padding: 14px; background: var(--surface-highlight); } .skip:focus { transform: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .header { padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; background: var(--paper); } .brand { display: flex; flex-direction: column; gap: 7px; } .brand-word { font-size: var(--ax-font-28); font-weight: 900; letter-spacing: normal; font-style: italic; display: inline-flex; align-items: flex-start; gap: 5px; } .brand-square { width: 7px; height: 7px; background: var(--ink); margin-top: 5px; transform: skew(-13deg); } .brand-cn { letter-spacing: 3px; font-weight: 500; } .header nav { display: flex; } .header nav a { padding: 16px 0; position: relative; } .header nav a:after { content: ""; position: absolute; bottom: 7px; left: 0; width: 0; height: 1px; background: var(--ink); transition: width .25s; } .header nav a:hover:after { width: 100%; } .header-cta { display: flex; gap: 35px; align-items: center; border-bottom: 1px solid; padding: 14px 0; } .header-cta span { font-size: var(--ax-font-22); } .menu-button { display: none; } .hero-copy { padding: 74px 26px 32px var(--pad); display: flex; flex-direction: column; } .eyebrow { font: var(--ax-font-12)/1.6 monospace; font-weight: 500; } .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-brand); margin-right: 9px; } .hero-intro { color: var(--muted); } .hero-actions { display: flex; gap: 30px; align-items: center; margin: 39px 0 62px; } .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 46px; padding: 19px 23px; font-size: var(--ax-font-14); font-weight: 500; min-height: 54px; transition: background .2s,transform .2s; } .button:hover { transform: translateY(-2px); } .button-dark { background: var(--ink); color: var(--ax-gray-0); } .button-dark:hover { background: var(--ax-gray-5); } .button span { font-size: var(--ax-font-22); } .text-link { font-size: var(--ax-font-14); border-bottom: 1px solid currentColor; padding: 10px 0; display: inline-flex; align-items: center; gap: 15px; min-height: 44px; } .hero-index { margin-top: auto; display: flex; justify-content: space-between; padding-right: 24px; color: var(--muted); font: var(--ax-font-12) monospace; letter-spacing: 1px; } .hero-machine { background: var(--dark); color: var(--ax-gray-2); display: flex; flex-direction: column; overflow: hidden; position: relative; } .machine-top, .machine-bottom { display: flex; justify-content: space-between; align-items: center; font: var(--ax-font-12) monospace; letter-spacing: 1px; padding: 26px 28px; z-index: 1; } .machine-top button { color: var(--ax-gray-2); font-size: var(--ax-font-12); padding: 10px 0; } .machine-top button span { padding-left: 12px; color: var(--surface-highlight); } .machine-stage { display: grid; place-items: center; flex: 1; perspective: 1100px; } .machine-bottom { font-size: var(--ax-font-12); margin-top: auto; } .cross { font-size: var(--ax-font-22); color: var(--surface-highlight); } .rotor { animation: rotation 38s linear infinite; transform-origin: 0 0; } .motion-paused .rotor { animation-play-state: paused; } .motion-paused .laser { animation-play-state: paused; } @keyframes rotation { to{transform:rotate(360deg)}; } .discipline { padding: 25px var(--pad); display: flex; gap: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .discipline>span { font-weight: 700; } .discipline p { color: var(--muted); } .discipline i { font-style: normal; margin: 0 13px; color: var(--ax-gray-3); } .discipline>a { font-size: var(--ax-font-28); } .section { padding: 96px var(--pad); } .section-heading>.eyebrow { margin-bottom: 30px; } .section-heading>div { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .section h2 { line-height: 1.4; font-weight: 500; } .section h2 span { color: var(--muted); } .section-heading>div>p { color: var(--muted); padding-bottom: 8px; } .product-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 46px; border-bottom: 1px solid var(--line); gap: 25px; } .filters { display: flex; gap: 28px; } .filters button { font-size: var(--ax-font-12); position: relative; min-height: 58px; padding: 15px 0; color: var(--muted); } .filters button.active { color: var(--ink); } .filters button.active:after { content: ""; position: absolute; height: 2px; background: var(--ink); left: 0; right: 0; bottom: -1px; } .filters sup { font: var(--ax-font-12) monospace; margin-left: 4px; } .product-controls .search { display: flex; gap: 10px; align-items: center; font-size: var(--ax-font-28); } .product-controls .search input { font-size: var(--ax-font-12); border: 0; background: transparent; max-width: 185px; min-height: 44px; color: var(--ink); } .product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding-top: 28px; } .product-card { min-width: 0; } .product-image { background: var(--ax-gray-1); position: relative; aspect-ratio: 1/.95; overflow: hidden; display: grid; place-items: center; } .product-image>img { mix-blend-mode: multiply; width: 89%; height: 83%; object-fit: contain; transition: transform .6s; } .product-card a:hover img { transform: scale(1.07); } .product-number { position: absolute; top: 17px; left: 17px; font: var(--ax-font-12) monospace; letter-spacing: .7px; z-index: 1; } .circle-arrow { position: absolute; right: 14px; bottom: 14px; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid var(--ax-gray-2); border-radius: 50%; background: var(--paper); font-size: var(--ax-font-18); transition: background .25s; } .product-card a:hover .circle-arrow { background: var(--surface-highlight); } .product-caption { padding: 22px 0; display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; } .product-caption h3 { font-size: var(--ax-font-18); font-weight: 500; letter-spacing: normal; } .product-caption p { color: var(--muted); margin-top: 9px; } .product-caption>span { font-size: var(--ax-font-12); border: 1px solid var(--line); padding: 5px; white-space: nowrap; } .diagram-card { color: var(--ax-gray-4); } .diagram-card svg { width: 87%; height: 80%; transition: transform .5s; } .product-card a:hover .diagram-card svg { transform: translateY(-6px); } .diagram-note { position: absolute; left: 16px; bottom: 20px; font-size: var(--ax-font-12); letter-spacing: 1px; } .image-fallback { display: flex; flex-direction: column; gap: 19px; align-items: center; background: repeating-linear-gradient(0deg,transparent 0 24px,var(--ax-gray-2) 24px 25px),repeating-linear-gradient(90deg,transparent 0 24px,var(--ax-gray-2) 24px 25px); width: 100%; height: 100%; justify-content: center; } .image-fallback>span { font-size: var(--ax-font-48); font-weight: 400; letter-spacing: normal; color: var(--ax-brand); } .image-fallback>small { font-size: var(--ax-font-12); color: var(--ax-gray-5); } .product-footnote { color: var(--muted); margin-top: 14px; } #empty-products { padding: 65px 0; } #empty-products p { margin: 15px 0; } .application-layout { margin-top: 48px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; } .application-art { background: var(--ax-gray-5); position: relative; align-self: start; border: 1px solid var(--ax-gray-5); } .application-art svg { max-height: 430px; padding: 13px 20px 0; } .art-caption { display: flex; justify-content: space-between; font: var(--ax-font-12) monospace; letter-spacing: 1px; padding: 20px; color: var(--ax-gray-3); } .laser { animation: laser 3s ease-in-out infinite; } @keyframes laser { 50%{opacity:.35}; } .application-list { border-top: 1px solid var(--ax-gray-4); } details { border-bottom: 1px solid var(--ax-gray-4); } summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px; min-height: 90px; padding: 20px 0; } summary::-webkit-details-marker { display: none; } .app-number { font: var(--ax-font-12) monospace; color: var(--surface-highlight); } summary h3 { font-size: var(--ax-font-28); letter-spacing: normal; font-weight: 400; } .expand { margin-left: auto; font-size: var(--ax-font-22); font-weight: 200; transition: transform .2s; } details[open] .expand { transform: rotate(45deg); } .detail-body { padding: 0 0 27px 40px; } .detail-body p { font-size: var(--ax-font-12); line-height: 2.1; color: var(--ax-gray-2); max-width: 390px; } .tags { display: flex; gap: 10px; margin: 20px 0 13px; } .tags a { border: 1px solid var(--ax-gray-4); padding: 9px 17px; font: var(--ax-font-12) monospace; } .tags a:hover { color: var(--ink); background: var(--surface-highlight); border-color: var(--surface-highlight); } .detail-body>.text-link { font-size: var(--ax-font-12); } .about { border-bottom: 1px solid var(--line); } .about-main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; margin-top: 38px; align-items: start; } .about-main>div { max-width: 425px; } .about-main p { line-height: 2.1; color: var(--muted); } .about-main p.about-lead { color: var(--ink); font-size: var(--ax-font-16); margin-bottom: 14px; } .about-main .text-link { margin-top: 20px; } .process { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 76px; border-top: 1px solid var(--line); } .process>div { padding: 28px 20px 0 0; } .process>div+div { padding-left: 35px; border-left: 1px solid var(--line); } .process span { font: var(--ax-font-12) monospace; color: var(--muted); } .process h3 { font-size: var(--ax-font-22); font-weight: 500; } .process p { color: var(--muted); margin-top: 12px; } .selection { background: var(--surface-highlight); display: grid; grid-template-columns: 1fr 1fr; gap: 70px; } .selection h2 { margin-top: 28px; } .selection>div>p:last-child { line-height: 2.1; margin-top: 28px; color: var(--ax-brand); } .selection form { padding-top: 35px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 27px; } .form-row label { display: flex; flex-direction: column; gap: 13px; } .form-row input, .form-row select { border: 0; border-bottom: 1px solid var(--ax-brand); border-radius: 0; padding: 10px 0 15px; background: transparent; width: 100%; min-height: 45px; color: var(--ink); } .form-row input::placeholder { color: var(--ax-brand); opacity: 1; } .selection .button { margin-top: 10px; width: 100%; } .form-note { margin-top: 14px; color: var(--ax-brand); } .request-output { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--ax-brand); } .request-output label { font-size: var(--ax-font-12); } .request-output textarea { width: 100%; background: var(--ax-gray-1); border: 1px solid var(--ax-brand); margin: 10px 0; padding: 13px; font-size: var(--ax-font-12); line-height: 1.9; resize: vertical; } .request-output .text-link { font-size: var(--ax-font-12); } .request-output [role=status] { font-size: var(--ax-font-12); margin-left: 20px; } footer { background: var(--paper); padding: 50px var(--pad) 25px; } .footer-top { display: flex; align-items: center; justify-content: space-between; } .footer-top .brand-word { font-size: var(--ax-font-48); } .back-top { font-size: var(--ax-font-12); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 25px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); } @media(min-width:1280px) { .hero-intro { font-size: var(--ax-font-16); } .product-grid { gap: 28px; } } @media(max-width:1024px) { .hero-copy { padding-top: 55px; } .hero-actions { gap: 18px; flex-wrap: wrap; margin-bottom: 35px; } .hero-index { font-size: var(--ax-font-12); } .machine-top, .machine-bottom { padding: 22px 18px; font-size: var(--ax-font-12); } .machine-bottom span:last-child { display: none; } .product-grid { grid-template-columns: repeat(2,1fr); gap: 27px; } .product-image { aspect-ratio: 1/.78; } .application-layout { gap: 35px; } .about-main { gap: 40px; } .selection { gap: 35px; } .form-row { grid-template-columns: 1fr; gap: 22px; } .discipline { gap: 20px; } .discipline i { margin: 0 6px; } } @media(max-width:640px) { .header-cta { margin-left: auto; padding: 9px 0; } .header-cta span { font-size: var(--ax-font-22); } .menu-button { display: flex; flex-direction: column; gap: 7px; padding: 12px 4px; } .menu-button span { height: 1px; background: var(--ink); width: 20px; } .header nav { display: none; position: absolute; top: 81px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 16px var(--pad) 25px; flex-direction: column; gap: 4px; } .header nav.open { display: flex; } .header nav a { padding: 14px 0; } .hero-copy { padding: 43px var(--pad) 26px; } .hero-index { padding-right: 0; } .button { font-size: var(--ax-font-12); padding: 16px 20px; gap: 35px; } .text-link { font-size: var(--ax-font-12); } .machine-top, .machine-bottom { padding: 17px var(--pad); } .machine-bottom span:last-child { font-size: var(--ax-font-12); } .discipline { padding: 21px var(--pad); flex-wrap: wrap; } .discipline p { order: 3; width: 100%; line-height: 1.8; } .discipline>a { margin-left: auto; font-size: var(--ax-font-22); } .section { padding: 64px var(--pad); } .section-heading>.eyebrow { margin-bottom: 23px; } .section-heading>div { display: block; } .section-heading>div>p { margin-top: 20px; } .product-controls { flex-wrap: wrap; gap: 10px; margin-top: 24px; } .filters button { min-height: 50px; } .product-controls .search { width: 100%; border-top: 1px solid var(--line); font-size: var(--ax-font-22); } .product-controls .search input { max-width: none; width: 100%; } .product-grid { gap: 20px 14px; padding-top: 23px; } .product-image { aspect-ratio: 1/.95; } .product-number { font-size: var(--ax-font-12); top: 12px; left: 12px; } .product-caption { padding: 16px 0; display: block; } .product-caption p { line-height: 1.8; margin-top: 6px; } .product-caption>span { display: none; } .circle-arrow { width: 28px; height: 28px; bottom: 10px; right: 10px; font-size: var(--ax-font-18); } .diagram-note { font-size: var(--ax-font-12); bottom: 13px; left: 10px; max-width: 75px; } .product-footnote { line-height: 1.8; } .image-fallback>span { font-size: var(--ax-font-36); } .image-fallback>small { font-size: var(--ax-font-12); max-width: 90px; text-align: center; line-height: 1.8; } .application-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; } .application-art svg { max-height: 360px; } .art-caption { font-size: var(--ax-font-12); padding: 18px; } .application-list summary { min-height: 80px; } .detail-body { padding-left: 36px; } .about-main { grid-template-columns: 1fr; gap: 25px; margin-top: 25px; } .about-main p { font-size: var(--ax-font-12); } .process { margin-top: 40px; grid-template-columns: 1fr; border: 0; } .process>div, .process>div+div { padding: 23px 0; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.7fr; gap: 15px; } .process h3 { font-size: var(--ax-font-22); margin: 0; } .process span { padding-top: 5px; font-size: var(--ax-font-12); } .process p { grid-column: 2; margin: 0; } .selection { grid-template-columns: 1fr; gap: 22px; } .selection form { padding-top: 0; } .form-row { gap: 22px; margin-bottom: 22px; } .selection h2 { font-size: var(--ax-font-36); } .selection>div>p:last-child { font-size: var(--ax-font-12); } .form-row input, .form-row select { font-size: var(--ax-font-12); } .form-note { line-height: 1.8; } footer { padding-top: 36px; } .footer-bottom { flex-wrap: wrap; line-height: 1.8; } .footer-bottom span:nth-child(2) { order: 3; width: 100%; } } @media(max-width:640px) { .hero-actions .text-link { font-size: var(--ax-font-12); } .machine-bottom span:last-child { display: none; } .product-caption h3 { font-size: var(--ax-font-18); } } @media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation: none!important; transition: none!important; } } .section-heading>div>p, .detail-body p { font-size: var(--ax-font-14); } .product-caption p { font-size: var(--ax-font-14); } .product-footnote { font-size: var(--ax-font-12); line-height: 1.8; } .process p { line-height: 1.8; } .selection>div>p:last-child { font-size: var(--ax-font-14); } .form-row label { font-size: var(--ax-font-12); } .form-note { font-size: var(--ax-font-12); } .machine-top button { min-height: 44px; } .tags a { min-height: 44px; display: inline-flex; align-items: center; } .back-top { min-height: 44px; display: inline-flex; align-items: center; } .footer-bottom { line-height: 1.8; } #motion-toggle:disabled { cursor: default; color: var(--ax-gray-3); } @media(max-width:640px) { .menu-button { width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-right: -8px; } .header-cta { min-height: 44px; } .hero-intro, .section-heading>div>p, .detail-body p, .about-main p, .selection>div>p:last-child { font-size: var(--ax-font-14); line-height: 1.9; } .process p { font-size: var(--ax-font-14); } .form-row input, .form-row select, .request-output textarea { font-size: var(--ax-font-16); } .form-row { grid-template-columns: 1fr; } .form-note { font-size: var(--ax-font-12); } .product-controls .search input { font-size: var(--ax-font-16); } .machine-top { padding-top: 8px; padding-bottom: 8px; } } @media(max-width:640px) { .brand-word { font-size: var(--ax-font-22); } .header-cta { gap: 8px; } .filters { gap: 15px; } .filters button { font-size: var(--ax-font-12); } } .product-detail { background: var(--paper); } .product-hero { min-height: 620px; border-bottom: 1px solid var(--line); } .product-hero>div:first-child { padding: 90px var(--pad); display: flex; flex-direction: column; justify-content: center; } .product-hero h1 { font-weight: 500; letter-spacing: normal; } .product-lead { max-width: 690px; color: var(--muted); } .product-visual { background: var(--dark); color: var(--ax-gray-2); display: grid; place-items: center; position: relative; padding: 55px; overflow: hidden; } .product-visual:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%,var(--ax-gray-5),transparent 63%); } .product-visual>span, .product-visual>small { position: absolute; z-index: 1; font: var(--ax-font-12) monospace; letter-spacing: 1.4px; } .product-visual>span { top: 30px; left: 34px; color: var(--surface-highlight); } .product-visual>small { right: 34px; bottom: 30px; } .product-visual svg { position: relative; z-index: 1; max-width: 590px; filter: drop-shadow(12px 28px 20px color-mix(in srgb, var(--ax-gray-5) 35.0%, transparent)); } .product-anchor { position: sticky; top: 0; z-index: 9; justify-content: center; background: color-mix(in srgb, var(--ax-gray-1) 95.0%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); font-size: var(--ax-font-12); } .admin-bar .product-anchor { top: 32px; } .product-anchor a:hover { color: var(--ax-brand); } .product-section>h2, .split-section h2 { font-size: var(--ax-font-48); font-weight: 500; letter-spacing: normal; margin: 24px 0 48px; } .spec-table { border-top: 1px solid var(--ink); max-width: 1100px; } .spec-table>div { display: grid; grid-template-columns: minmax(180px,.7fr) 2fr; gap: 30px; padding: 24px 4px; border-bottom: 1px solid var(--line); } .spec-table span { color: var(--muted); font-size: var(--ax-font-14); } .spec-table strong { font-size: var(--ax-font-16); font-weight: 500; } .section-note { max-width: 900px; color: var(--muted); font-size: var(--ax-font-12); line-height: 1.9; margin-top: 25px; } .split-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; } .application-chips { display: grid; grid-template-columns: repeat(2,1fr); align-content: start; border-top: 1px solid var(--ink); } .application-chips span { padding: 25px 2px; border-bottom: 1px solid var(--line); font-size: var(--ax-font-16); } .selection-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .selection-grid article { background: var(--paper); padding: 34px; min-height: 240px; } .selection-grid span { font: var(--ax-font-12) monospace; color: var(--ax-brand); } .selection-grid h3 { font-size: var(--ax-font-22); margin: 52px 0 18px; } .selection-grid p { font-size: var(--ax-font-14); color: var(--muted); line-height: 1.9; } .download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .download-grid>div { border: 1px solid var(--line); padding: 28px; min-height: 170px; display: flex; flex-direction: column; } .download-grid strong { font-size: var(--ax-font-18); } .download-grid span { font: var(--ax-font-12) monospace; color: var(--muted); margin-top: 10px; } .download-grid em { font-style: normal; margin-top: auto; font-size: var(--ax-font-12); color: var(--ax-gray-4); } .purchase { display: flex; align-items: end; justify-content: space-between; gap: 50px; background: var(--ax-gray-1); } .purchase>div { max-width: 780px; } .purchase p:last-child { color: var(--muted); font-size: var(--ax-font-16); line-height: 2; } .faq details { border-top: 1px solid var(--line); padding: 25px 0; } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { font-size: var(--ax-font-18); cursor: pointer; list-style: none; } .faq summary:after { content: "＋"; float: right; } .faq details[open] summary:after { content: "—"; } .faq details p { color: var(--muted); line-height: 1.9; max-width: 820px; padding: 18px 0 4px; } .archive-main { min-height: 70vh; } .archive-hero { padding: 90px var(--pad); border-bottom: 1px solid var(--line); } .archive-hero h1 { font-size: var(--ax-font-48); font-weight: 500; letter-spacing: normal; margin: 28px 0; } .archive-hero p:last-child { color: var(--muted); } .archive-grid { padding: 60px var(--pad); display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .archive-grid article { border: 1px solid var(--line); } .archive-grid a { padding: 28px; display: flex; flex-direction: column; min-height: 280px; } .archive-grid span { font: var(--ax-font-12) monospace; color: var(--muted); } .archive-grid h2 { margin: 45px 0 20px; font-size: var(--ax-font-28); } .archive-grid p { font-size: var(--ax-font-14); line-height: 1.8; color: var(--muted); } .archive-grid strong { font-size: var(--ax-font-12); margin-top: auto; } @media(max-width:640px) { .admin-bar .header { top: 46px; } .admin-bar .product-anchor { top: 46px; } } @media(max-width:640px) { .product-hero>div:first-child { padding: 58px 22px; } .product-hero h1 { font-size: var(--ax-font-48); } .product-visual { min-height: 400px; padding: 25px; } .product-anchor { justify-content: flex-start; overflow-x: auto; padding: 17px 22px; } .product-section { padding: 64px 22px; } .split-section { grid-template-columns: 1fr; gap: 20px; } .application-chips, .selection-grid, .download-grid, .archive-grid { grid-template-columns: 1fr; } .purchase { align-items: flex-start; flex-direction: column; } .spec-table>div { grid-template-columns: 1fr; gap: 8px; } .archive-grid { padding: 30px 22px; } .archive-hero { padding: 60px 22px; } } .hero-slogan { margin: 0 0 18px; color: var(--muted); } .header nav a { white-space: nowrap; } .header nav ul { list-style: none; display: flex; gap: 16px; padding: 0; } .header nav .sub-menu { display: none; position: absolute; background: var(--paper); padding: 20px; } .header nav li:hover>.sub-menu, .header nav li:focus-within>.sub-menu { display: block; } .cn-footer-nav { display: flex; flex-wrap: wrap; padding: 0 0 24px; } .cn-footer-contact { font-size: var(--ax-font-14); line-height: 1.8; margin-top: 16px; } .cn-series-word { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 280px; font: 500 var(--ax-font-48) monospace; color: var(--ax-gray-4); } .cn-series-word small { font: var(--ax-font-14) var(--sans); margin-top: 16px; } .product-detail { max-width: 1360px; margin: auto; padding: 54px var(--pad); } .product-section { padding: 32px 0; border-bottom: 1px solid var(--line); } .product-section h1 { font-size: var(--ax-font-36); line-height: 1.3; margin-bottom: 24px; } .product-section h2 { font-size: var(--ax-font-28); margin: 16px 0; } .product-section h3 { font-size: var(--ax-font-22); margin: 22px 0 10px; } .product-section p, .product-section li { font-size: var(--ax-font-16); line-height: 1.9; margin: 12px 0; } .product-section ul { padding-left: 22px; } .product-section a:not(.button), .axcn-prose a { color: var(--ax-brand); text-decoration: underline; text-underline-offset: 3px; } .product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 32px 0; } .product-hero h1 { font-size: var(--ax-font-48); margin: 20px 0; line-height: 1.3; } .product-lead { font-size: var(--ax-font-18); line-height: 1.9; } .product-actions { display: flex; gap: 22px; align-items: center; margin-top: 24px; } .product-anchor { display: flex; gap: 25px; flex-wrap: wrap; padding: 22px 0; border-block: 1px solid var(--line); } .cn-search-form { display: flex; align-items: end; } .cn-search-form label { display: flex; flex: 1; flex-direction: column; } .cn-search-form input { font: inherit; min-width: 0; width: 100%; } .cn-search-form button { min-height: 48px; } .axcn-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .axcn-product-grid article { padding: 24px; border: 1px solid var(--line); } .axcn-table-scroll { max-width: 100%; overflow: auto; } .axcn-table-scroll table { border-collapse: collapse; width: 100%; min-width: 560px; } .axcn-table-scroll th, .axcn-table-scroll td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; line-height: 1.7; } .axcn-term-nav { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; } .axcn-term-nav a { padding: 12px 16px; background: var(--ax-gray-1); border: 1px solid var(--line); } .product-caption p { line-height: 1.7; } .cn-check-note { padding: 16px; background: var(--ax-gray-1); border-left: 3px solid var(--ax-brand); } .axcn-prose { overflow-wrap: anywhere; } .page .axcn-prose>h1 { margin-bottom: 24px; } @media(max-width:1024px) { .header nav { display: none; } .header nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); } .header nav ul { flex-direction: column; } .header-cta { margin-left: auto; } } @media(max-width:640px) { .product-hero { grid-template-columns: 1fr; } .product-detail { padding: 24px 22px; } .axcn-product-grid { grid-template-columns: 1fr; } .product-actions { flex-wrap: wrap; } .cn-series-word { min-height: 160px; } .product-anchor { gap: 18px; } .product-section p, .product-section li { font-size: var(--ax-font-16); } .cn-footer-nav a { padding: 8px 0; } .product-caption p { font-size: var(--ax-font-14); } .product-footnote { font-size: var(--ax-font-14); } .product-hero img { max-height: 360px; width: auto; margin: auto; } .product-hero h1 { overflow-wrap: anywhere; } .axcn-product-grid h2 { font-size: var(--ax-font-22); } } .axcn-public .product-hero { min-height: 0; padding: 28px 0; } .axcn-public .product-hero>div:first-child { padding: 20px 0; } .axcn-public .product-hero:has(>div:only-child) { grid-template-columns: 1fr; } .axcn-public a.button-dark { color: var(--paper); } .axcn-public .product-hero h1 { letter-spacing: normal; } .axcn-public .product-hero h1, .axcn-public .product-section h1 { overflow-wrap: anywhere; } .admin-bar .header { top: 0; } .menu-button span { display: block; } @media(max-width:1024px) { .header .menu-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 44px; min-height: 44px; flex-shrink: 0; } } .cn-selection-suite { min-width: 0; max-width: 100%; } .cn-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; grid-column: 1/-1; } .cn-tool-actions button:not(.button), .cn-tool-actions a { padding: 10px 13px; min-height: 44px; border: 1px solid var(--line,var(--ax-gray-2)); background: transparent; color: inherit; cursor: pointer; font-size: var(--ax-font-14); } .cn-tool-models { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .cn-tool-models .cn-tool-box { margin: 0; } .cn-tool-models.cn-list-view { grid-template-columns: 1fr; } .cn-route-card { display: block; text-decoration: none; } .cn-route-card>span { font-size: var(--ax-font-12); } .cn-route-card h2 { margin: 20px 0; font-size: var(--ax-font-22); } .cn-consent { display: block; font-size: var(--ax-font-14); line-height: 1.9; margin-top: 20px; } .cn-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .cn-rfq-preview { padding: 25px; background: var(--ax-gray-1); margin-top: 25px; } .cn-rfq-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--ax-font-14)/1.9 inherit; } .cn-tool-notice { padding: 18px; border: 1px solid var(--ax-gray-4); background: var(--ax-gray-1); } .cn-selection-suite :focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 3px; } .cn-compare-table { min-width: 550px; } .cn-compare-table [hidden] { display: none!important; } .cn-selection-suite input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; } .cn-selection-suite [data-library-results] .cn-tool-box a { display: inline-block; margin: 12px; } .cn-tools-footer { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px 0; font-size: var(--ax-font-12); } @media(max-width:640px) { .cn-tool-models { grid-template-columns: 1fr; } .cn-tool-actions { gap: 10px; } .cn-tool-actions .button { width: 100%; } .cn-rfq-preview { padding: 15px; } } @media print { body:has([data-rfq-sheet]) .header, body:has([data-rfq-sheet]) footer, body:has([data-rfq-sheet]) .cn-bottom-cta, body:has([data-rfq-sheet]) .cn-editorial-aside, body:has([data-rfq-sheet]) .cn-page-hero, body:has([data-rfq-sheet]) .cn-breadcrumbs, body:has([data-rfq-sheet]) .cn-tool-nav, body:has([data-rfq-sheet]) [data-rfq-form]>:not([data-rfq-sheet]) { display: none!important; } body:has([data-rfq-sheet]) .cn-editorial-layout { display: block; } body:has([data-rfq-sheet]) .cn-tool-box { border: 0; padding: 0; } body:has([data-rfq-sheet]) .cn-rfq-preview { background: var(--ax-gray-0); padding: 0; color: var(--ax-gray-5); } } .cn-editorial-layout.cn-tools-layout { display: block; } .cn-tools-layout .cn-editorial-aside { display: none; } .cn-tools-layout .cn-article { max-width: none; } .cn-utility { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; gap: 6px; } .cn-utility button { padding: 12px 15px; border: 1px solid var(--ax-gray-5); color: var(--ax-gray-0); font-size: var(--ax-font-12); min-height: 44px; cursor: pointer; } .cn-utility-dialog { width: min(760px,calc(100% - 24px)); max-height: 85dvh; padding: 30px; border: 1px solid var(--ax-gray-2); background: var(--paper,var(--ax-gray-1)); color: var(--ink,var(--ax-brand)); overflow: auto; } .cn-utility-dialog::backdrop { background: color-mix(in srgb, var(--ax-gray-5) 70.2%, transparent); } .cn-utility-dialog>[data-close-dialog] { float: right; font-size: var(--ax-font-22); min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--ax-gray-2); cursor: pointer; } .cn-utility-dialog h2 { font-size: var(--ax-font-28); margin: 14px 0 28px; } .cn-utility-dialog input, .cn-utility-dialog textarea { font-size: var(--ax-font-16); } .cn-utility-dialog .cn-tool-form { clear: both; } .cn-utility-dialog :focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 3px; } @media(max-width:640px) { .cn-utility-dialog { padding: 18px; } } @media print { .cn-utility, .cn-utility-dialog { display: none!important; } } .cn-product-gallery { margin: 0; width: 100%; } .cn-product-gallery>button { display: block; width: 100%; border: 0; background: var(--ax-gray-0); cursor: zoom-in; padding: 0; } .cn-product-gallery>button img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; } .cn-product-gallery figcaption { font-size: var(--ax-font-12); text-align: center; padding: 12px; } .cn-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; } .cn-gallery-thumbs button { width: 65px; height: 65px; padding: 3px; border: 1px solid var(--ax-gray-2); background: var(--ax-gray-0); cursor: pointer; } .cn-gallery-thumbs button[aria-pressed=true] { border: 2px solid var(--ax-gray-5); } .cn-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; } .cn-gallery-dialog, .cn-document-dialog { max-width: calc(100% - 24px); max-height: 90dvh; width: min(1100px,calc(100% - 24px)); padding: 20px; border: 1px solid var(--ax-gray-3); background: var(--ax-gray-0); color: var(--ax-gray-5); overflow: auto; } .cn-gallery-dialog::backdrop, .cn-document-dialog::backdrop { background: color-mix(in srgb, var(--ax-gray-5) 80.0%, transparent); } .cn-gallery-dialog [data-gallery-full] { width: 100%; height: 65dvh; object-fit: contain; } .cn-gallery-dialog button, .cn-document-dialog button, [data-doc-preview] { padding: 12px; min-height: 44px; border: 1px solid var(--ax-gray-3); background: var(--ax-gray-1); cursor: pointer; color: var(--ax-gray-5); } .cn-document-dialog [data-doc-viewer] iframe { width: 100%; height: 65dvh; border: 0; } .cn-document-dialog [data-doc-viewer] img { display: block; max-width: 100%; height: auto; margin: auto; } .cn-document-dialog [data-doc-download] { display: inline-block; padding: 15px 0; } [data-document][hidden] { display: none!important; } .cn-quick-form .cn-quote-notes { grid-column: 1/-1; } .cn-ux-results-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 28px; align-items: start; scroll-margin-top: 110px; } .cn-ux-filter { background: var(--ax-gray-1); border: 1px solid var(--ax-gray-1); padding: 20px; } .cn-ux-filter h2 { font-size: var(--ax-font-18); } .cn-ux-filter-form { display: grid; gap: 18px; } .cn-ux-filter-form label { display: grid; gap: 7px; font-size: var(--ax-font-14); } .cn-ux-filter select { max-width: 100%; width: 100%; min-height: 44px; border: 1px solid var(--ax-gray-2); background: var(--ax-gray-0); padding: 8px; color: var(--ax-brand); } .cn-ux-series { border: 1px solid var(--ax-gray-2); border-radius: 4px; margin: 18px 0; background: var(--ax-gray-0); } .cn-ux-series>summary, .cn-ux-more>summary, .cn-ux-rfq details>summary { cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: var(--ax-font-16); color: var(--ax-brand); min-height: 48px; } .cn-ux-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 0 18px 18px; } .cn-ux-card { border: 1px solid var(--ax-gray-1); padding: 18px; min-width: 0; border-radius: 3px; } .cn-ux-card-head { display: flex; gap: 15px; align-items: center; } .cn-ux-card-head img { width: 80px; height: 80px; object-fit: contain; background: var(--ax-gray-0); } .cn-ux-card h3 { margin: 0; font-size: var(--ax-font-22); } .cn-ux-card-head p { font-size: var(--ax-font-14); line-height: 1.6; margin: 5px 0; overflow-wrap: anywhere; } .cn-ux-card dl { display: grid; gap: 8px; margin: 18px 0; } .cn-ux-card dl>div { display: grid; grid-template-columns: 94px 1fr; gap: 10px; } .cn-ux-card dt { font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-ux-card dd { margin: 0; font-size: var(--ax-font-14); color: var(--ax-brand); overflow-wrap: anywhere; } .cn-ux-card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cn-ux-card-actions a { font-size: var(--ax-font-14); min-height: 44px; display: inline-flex; align-items: center; } .cn-ux-card-actions .button { min-height: 44px; padding: 8px 14px; } .cn-ux-card-actions span { font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-ux-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 28px 0; } .cn-ux-pagination a { border: 1px solid var(--ax-gray-2); min-width: 44px; min-height: 44px; padding: 10px; text-align: center; } .cn-ux-pagination [aria-current] { background: var(--ax-brand); color: var(--ax-gray-0); } .cn-ux-pagination span { font-size: var(--ax-font-14); } .cn-ux-hot { display: flex; gap: 12px; flex-wrap: wrap; } .cn-ux-hot a { padding: 12px 18px; border: 1px solid var(--ax-gray-2); color: var(--ax-brand); } .cn-ux-download-list { padding: 0 20px 10px!important; list-style: none; } .cn-ux-download-list li { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ax-gray-1); padding: 16px 0; font-size: var(--ax-font-14); } .cn-ux-download-list li span { overflow-wrap: anywhere; } .cn-ux-download-list a { flex-shrink: 0; min-height: 44px; display: flex; align-items: center; color: var(--ax-brand); } .cn-ux-rfq { margin: auto; } .cn-ux-rfq legend { font-size: var(--ax-font-22); font-weight: 600; } .cn-ux-rfq fieldset { margin: 0 0 20px; padding: 16px 0; border: 0; } .cn-ux-rfq details { border: 1px solid var(--ax-gray-2); margin: 20px 0; padding: 0 16px; } .cn-ux-rfq details>summary { padding-left: 0; } .cn-ux-rfq .cn-tool-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-ux-rfq .cn-tool-form label { font-size: var(--ax-font-14); } .cn-ux-rfq input, .cn-ux-rfq select, .cn-ux-rfq textarea { font-size: var(--ax-font-16); } .cn-ux-context { padding: 15px; background: var(--ax-gray-1); color: var(--ax-brand); font-size: var(--ax-font-14); } .cn-ux-rfq .cn-consent { font-size: var(--ax-font-14); color: var(--ax-gray-5); } .cn-utility[hidden] { display: none!important; } .cn-ux-footnote { font-size: var(--ax-font-12); color: var(--ax-gray-4); margin: 12px 0; } .cn-ux-footnote details { display: inline-block; } .cn-ux-footnote summary { cursor: help; } .cn-ux-footnote p { font-size: var(--ax-font-12); } .cn-ux-results { min-width: 0; } @media(max-width:1024px) { .cn-ux-results-layout { grid-template-columns: 170px minmax(0,1fr); gap: 18px; } .cn-ux-cards { grid-template-columns: 1fr; } } @media(max-width:640px) { .cn-ux-results-layout { display: block; } .cn-ux-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .cn-ux-filter { padding: 16px; } .cn-ux-filter h2 { margin-top: 0; } .cn-ux-results>h2 { font-size: var(--ax-font-22); } .cn-ux-cards { padding: 0 12px 12px; } .cn-ux-card { padding: 15px; } .cn-ux-card-head img { width: 64px; height: 64px; } .cn-ux-rfq .cn-tool-form { grid-template-columns: 1fr; } .cn-ux-rfq { padding: 18px!important; } .cn-ux-download-list li { display: block; } .cn-ux-download-list a { justify-content: flex-end; } .cn-utility { left: 0!important; right: 0!important; bottom: 0!important; top: auto!important; width: 100%!important; border-radius: 0!important; display: flex!important; gap: 0!important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom))!important; background: var(--ax-gray-0)!important; border-top: 1px solid var(--ax-gray-2); box-shadow: 0 -2px 12px color-mix(in srgb, var(--ax-brand) 7.06%, transparent); } .cn-utility button { flex: 1; min-height: 48px; border-radius: 3px!important; } .cn-utility button:last-child { background: var(--ax-brand); color: var(--ax-gray-0); } body:has(.cn-utility) { padding-bottom: 76px; } .cn-ux-rfq .cn-tool-actions>button[type=submit] { width: 100%; } } @media(prefers-reduced-motion:no-preference) { .cn-ux-card { transition: border-color .16s ease; } .cn-ux-card:hover { border-color: var(--ax-brand); } } ::selection { background: var(--surface-highlight); color: var(--ink); } .eyebrow { font-size: var(--ax-font-12); letter-spacing: .12em; font-family: var(--mono); font-variant-numeric: tabular-nums; } .cn-interior table { font-variant-numeric: tabular-nums; } #model-comparison tbody th { font-family: var(--mono); white-space: nowrap; } .cn-product-body table td, .cn-product-body table th { word-break: keep-all; overflow-wrap: break-word; vertical-align: top; } .cn-product-body table td:first-child { min-width: 150px; } .cn-table-note { margin: 12px 0 0; } .cn-spec-cell { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: pre-line; vertical-align: top; } #model-comparison .axcn-table-scroll { overscroll-behavior-x: contain; } #model-comparison table { min-width: 0; width: max-content; font-size: var(--ax-font-14); } #model-comparison thead th { position: sticky; top: 0; z-index: 2; background: var(--ax-gray-1); border-bottom: 1px solid var(--line); font-size: var(--ax-font-12); line-height: 1.5; font-weight: 500; vertical-align: bottom; min-width: 118px; max-width: 190px; } #model-comparison tbody th { position: sticky; left: 0; z-index: 1; background: var(--ax-gray-1); border-right: 1px solid var(--line); font-weight: 500; text-align: left; min-width: 92px; } #model-comparison thead th:first-child { z-index: 3; left: 0; background: var(--ax-gray-1); } #model-comparison td { min-width: 118px; max-width: 230px; line-height: 1.75; } #model-comparison tbody tr:nth-child(even) td { background: var(--ax-gray-0); } #model-comparison td span[aria-label] { color: var(--muted); } .cn-card-model { font-family: var(--mono); font-size: var(--ax-font-22); font-weight: 500; letter-spacing: normal; line-height: 1.3; margin: 0; color: var(--ink); } .cn-card-kind { font-size: var(--ax-font-12); line-height: 1.6; color: var(--muted); margin: 5px 0 0; } .cn-card-specs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; } .cn-card-specs li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--ax-font-12); line-height: 1.5; color: var(--muted); border-bottom: 1px dotted var(--line); padding-bottom: 6px; } .cn-card-specs li>span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } .cn-spec-common { margin-top: 14px; font-size: var(--ax-font-14); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 18px; } .cn-spec-common b { font-weight: 500; color: var(--ink); font-family: var(--mono); } .header { height: 96px; gap: 30px; } .header nav { gap: clamp(18px,1.65vw,28px); align-items: center; font-size: var(--ax-font-14); } .header-cta { font-size: var(--ax-font-14); white-space: nowrap; } .brand-cn { font-size: var(--ax-font-12); } .hero-copy { padding-top: 56px; } .hero-slogan { margin-top: 30px; font-size: var(--ax-font-16); letter-spacing: .06em; } .hero-intro { max-width: 590px; line-height: 2; font-size: var(--ax-font-16); } .hero-actions { margin-top: 32px; margin-bottom: 58px; } .hero-machine { background-color: var(--ax-gray-5); background-image: radial-gradient(ellipse at 50% 40%,var(--ax-gray-4),transparent 70%); } .machine-top, .machine-bottom { font-size: var(--ax-font-12); } .hero-index { font-size: var(--ax-font-12); } .discipline { font-size: var(--ax-font-14); padding-top: 26px; padding-bottom: 26px; } .discipline p { font-size: var(--ax-font-12); } .section { padding-top: 96px; padding-bottom: 96px; } .section h2 { font-size: var(--ax-font-48); letter-spacing: normal; } .section-heading>div>p { max-width: 400px; line-height: 1.9; font-size: var(--ax-font-16); } .products>.cn-directory-grid { margin-top: 40px; } .cn-home-directory-footer { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cn-home-directory-footer p { font-size: var(--ax-font-14); color: var(--muted); } .application-list .detail-body p { font-size: var(--ax-font-16); } .application-list summary h3 { font-size: var(--ax-font-28); } .about-main p { font-size: var(--ax-font-16); } .process p { font-size: var(--ax-font-14); } .process h3 { margin-top: 22px; } .selection .form-row label { font-size: var(--ax-font-14); } .form-row input, .form-row select { font-size: var(--ax-font-16); } .text-link, .button { font-size: var(--ax-font-14); } .cn-footer-nav { font-size: var(--ax-font-14); gap: 28px; } .footer-bottom { font-size: var(--ax-font-12); } .footer-top { padding-bottom: 38px; } .cn-mega>summary { font: inherit; min-height: 48px; padding: 12px 0; gap: 8px; border: 0; white-space: nowrap; } .cn-mega { border: 0; } .cn-mega>summary>span { font-size: var(--ax-font-16); color: var(--muted); transition: transform .2s; } .cn-mega[open]>summary>span { transform: rotate(45deg); } .cn-mega-panel { position: absolute; top: 100%; left: var(--pad); right: var(--pad); background: var(--paper); border: 1px solid var(--line); padding: 30px 34px 18px; box-shadow: 0 22px 35px color-mix(in srgb, var(--ax-gray-5) 10.2%, transparent); color: var(--ink); max-height: calc(100dvh - 130px); overflow: auto; } .cn-mega-top { display: flex; justify-content: space-between; align-items: center; gap: 25px; } .cn-mega-top small, .cn-mega-note { font: var(--ax-font-12)/1.7 monospace; color: var(--muted); } .cn-mega-top strong { display: block; margin-top: 6px; } .cn-mega-grid { display: grid; } .header nav .cn-mega-grid a { display: block; border-top: 1px solid var(--line); padding: 15px 0; min-width: 0; white-space: normal; } .cn-mega-grid a span { display: block; } .cn-mega-grid a small { display: block; color: var(--muted); font: var(--ax-font-12)/1.7 monospace; overflow-wrap: anywhere; } .header nav .cn-mega-grid a:after { display: none; } .header nav .cn-mega-grid a:hover span { color: var(--ax-brand); } .cn-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .cn-directory-card { display: flex; flex-direction: column; min-height: 240px; padding: 25px 26px; background: var(--ax-gray-1); border: 1px solid transparent; transition: background .2s,border-color .2s,transform .2s; } .cn-directory-card:hover { background: var(--ax-gray-1); border-color: var(--ax-gray-3); transform: translateY(-3px); } .cn-card-top { display: flex; justify-content: space-between; font: var(--ax-font-12) monospace; color: var(--muted); margin-bottom: 28px; } .cn-card-top span:last-child { font: var(--ax-font-22)/1 Arial; color: var(--ink); } .cn-directory-card h3 { font-size: var(--ax-font-22); font-weight: 500; line-height: 1.5; letter-spacing: normal; margin: 0 0 10px; } .cn-directory-card p { font-size: var(--ax-font-14); color: var(--muted); line-height: 1.85; margin-bottom: 24px; } .cn-card-series { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--ax-gray-2); font: var(--ax-font-12)/1.8 monospace; letter-spacing: .04em; overflow-wrap: anywhere; } .cn-interior { min-height: 60vh; } .cn-shell { margin: auto; } .cn-shell>.axcn-breadcrumb { font-size: var(--ax-font-12); line-height: 1.8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); margin: 0; } .axcn-breadcrumb a:hover { color: var(--ink); text-decoration: underline; } .axcn-breadcrumb [aria-current] { color: var(--ink); } .cn-page-hero>.eyebrow { color: var(--muted); } .cn-page-hero>div:not(.cn-path) { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: end; } .cn-page-hero h1 { font-weight: 500; letter-spacing: normal; overflow-wrap: anywhere; } .cn-lead { font-size: var(--ax-font-16); line-height: 1.95; color: var(--muted); max-width: 620px; } .cn-path { display: flex; align-items: center; gap: 18px; margin-top: 32px; color: var(--muted); font-size: var(--ax-font-12); } .cn-path i { font-style: normal; color: var(--ax-gray-3); } .cn-path span:first-child { color: var(--ink); } .cn-catalog-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 46px; padding: 42px 0 70px; } .cn-side-title small { font: var(--ax-font-12) monospace; letter-spacing: .1em; color: var(--muted); } .cn-side-title h2 { font-size: var(--ax-font-22); font-weight: 500; margin: 7px 0 24px; } .cn-catalog-sidebar nav { border-top: 1px solid var(--line); } .cn-catalog-sidebar details { border-bottom: 1px solid var(--line); } .cn-catalog-sidebar summary { display: flex; justify-content: space-between; min-height: 55px; padding: 14px 0; gap: 12px; font-size: var(--ax-font-14); font-weight: 500; line-height: 1.7; } .cn-catalog-sidebar summary>span:last-child { font-size: var(--ax-font-16); transition: transform .2s; } .cn-catalog-sidebar details[open]>summary>span:last-child { transform: rotate(45deg); } .cn-catalog-sidebar details>div { padding: 0 0 14px; } .cn-catalog-sidebar details a { font-size: var(--ax-font-14); line-height: 1.8; display: block; padding: 9px 12px; color: var(--muted); border-left: 2px solid transparent; overflow-wrap: anywhere; } .cn-catalog-sidebar a:hover, .cn-catalog-sidebar a[aria-current] { color: var(--ink); background: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-catalog-sidebar .cn-category-overview { font-size: var(--ax-font-12); } .cn-side-help { display: block; background: var(--dark); color: var(--ax-gray-2); font-size: var(--ax-font-14); padding: 22px; margin-top: 28px; } .cn-side-help strong { display: block; margin-top: 10px; color: var(--surface-highlight); font-size: var(--ax-font-16); font-weight: 500; } .cn-results-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 23px; } .cn-results-heading h2 { font-size: var(--ax-font-22); font-weight: 500; margin: 0; } .cn-results-heading>span { font-size: var(--ax-font-12); color: var(--muted); } .cn-catalog-main { min-width: 0; } .cn-catalog-main .cn-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-catalog-main .cn-directory-card { min-height: 225px; } .cn-model-results { margin-top: 42px; border-top: 1px solid var(--line); padding-top: 34px; } .cn-catalog-main>.cn-model-results:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .cn-search-form { margin: 0 0 28px; gap: 12px; } .cn-search-form label { font-size: var(--ax-font-12); color: var(--muted); gap: 7px; } .cn-search-form input { border: 1px solid var(--ax-gray-2); background: var(--ax-gray-1); padding: 14px 16px; font-size: var(--ax-font-16); } .cn-search-form .button { min-height: 54px; padding-block: 14px; } .cn-series-intro { margin: 20px 0 28px; font-size: var(--ax-font-16); line-height: 1.9; color: var(--muted); } .cn-empty { padding: 48px 30px; border: 1px dashed var(--ax-gray-3); background: var(--ax-gray-1); text-align: center; margin: 16px 0; } .cn-empty-mark { display: block; font: var(--ax-font-36) monospace; color: var(--ax-gray-4); margin-bottom: 15px; } .cn-empty h3 { font-size: var(--ax-font-22); font-weight: 500; margin: 0 0 12px; } .cn-empty p { font-size: var(--ax-font-14); line-height: 1.9; color: var(--muted); margin: 0 auto 18px; max-width: 480px; } .cn-interior .axcn-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } @media(max-width:1280px) { .cn-interior .axcn-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } .cn-interior .axcn-product-grid article { padding: 0; border: 1px solid var(--line); } .cn-card-media { aspect-ratio: 1; background: var(--ax-gray-1); border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .cn-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 11%; box-sizing: border-box; } .cn-card-media>span { font: var(--ax-font-36) monospace; color: var(--ax-gray-4); letter-spacing: normal; } .cn-card-content { padding: 23px; } .cn-card-content h3 { font-size: var(--ax-font-22); font-weight: 500; margin: 10px 0; line-height: 1.5; } .cn-card-content p { font-size: var(--ax-font-14); line-height: 1.85; color: var(--muted); } .cn-card-action { display: block; margin-top: 22px; font-size: var(--ax-font-14); } .cn-card-content .eyebrow { color: var(--muted); } .cn-card-media img, .cn-resource-image img { transition: transform .4s; } .axcn-product-grid article a:hover img, .cn-resource-grid article a:hover img { transform: scale(1.04); } .cn-interior .product-section { padding: 38px 0; } .cn-interior .product-section h2 { font-size: var(--ax-font-28); letter-spacing: normal; font-weight: 500; margin: 10px 0 24px; } .cn-interior .product-section h3 { font-size: var(--ax-font-22); font-weight: 500; } .cn-interior .product-section p { font-size: var(--ax-font-16); line-height: 1.95; } .cn-interior .axcn-table-scroll { margin: 20px 0; border: 1px solid var(--line); border-radius: 2px; overflow: auto; } .cn-interior table { border-collapse: collapse; width: 100%; min-width: 580px; font-size: var(--ax-font-14); } .cn-interior th { background: var(--ax-gray-1); font-size: var(--ax-font-12); font-weight: 700; color: var(--ax-gray-5); } .cn-interior th, .cn-interior td { padding: 15px 18px; border-bottom: 1px solid var(--line); line-height: 1.8; text-align: left; vertical-align: top; } .cn-interior tbody tr:last-child td { border-bottom: 0; } .cn-interior tbody tr:nth-child(even) { background: var(--ax-gray-1); } .cn-interior .product-section a:not(.button) { color: var(--ax-brand); } .cn-interior a.button-dark { color: var(--ax-gray-0); } .cn-interior .navigation.pagination { margin-top: 30px; } .page-numbers { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 8px; margin-right: 5px; border: 1px solid var(--line); font-size: var(--ax-font-14); } .page-numbers.current { background: var(--dark); color: var(--ax-gray-0); } .cn-product-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; padding: 44px 0 50px; } .cn-product-hero h1 { font-size: var(--ax-font-48); line-height: 1.35; letter-spacing: normal; font-weight: 500; margin: 24px 0; } .cn-hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; } .cn-detail-status { font-size: var(--ax-font-12); color: var(--muted); margin-top: 30px; } .cn-product-media { background: var(--ax-gray-1); aspect-ratio: 1.2; min-width: 0; display: grid; place-items: center; border: 1px solid var(--line); } .cn-product-media figure { margin: 0; width: 90%; height: 90%; display: grid; place-items: center; } .cn-product-media img { max-height: 420px; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .cn-model-mark { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; padding: 35px; overflow-wrap: anywhere; } .cn-model-mark>span { font: var(--ax-font-12) monospace; letter-spacing: .15em; color: var(--muted); } .cn-model-mark>strong { font: var(--ax-font-48)/1.2 monospace; color: var(--ax-gray-4); letter-spacing: normal; } .cn-model-mark>small { font-size: var(--ax-font-12); color: var(--muted); } .cn-product-shell .product-anchor { border-block: 1px solid var(--line); } .product-anchor a { padding: 7px 0; min-height: 36px; position: relative; } .product-anchor a.is-active:after { position: absolute; content: ""; height: 2px; background: var(--ax-brand); bottom: 0; left: 0; right: 0; } .cn-product-body { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 64px; padding-bottom: 60px; } .cn-product-body>div { min-width: 0; } .cn-product-body .product-section>.eyebrow { font-size: var(--ax-font-12); color: var(--muted); letter-spacing: .1em; } .cn-product-aside { align-self: start; position: sticky; top: 105px; margin-top: 42px; padding: 26px; background: var(--ax-gray-1); } .cn-product-aside h2, .cn-editorial-aside h2 { font-size: var(--ax-font-28); font-weight: 500; line-height: 1.65; letter-spacing: normal; margin-top: 14px; } .cn-product-aside ol { padding-left: 20px; color: var(--muted); font-size: var(--ax-font-14); line-height: 2.7; margin: 25px 0; } .cn-small { font-size: var(--ax-font-12)!important; color: var(--muted); } .cn-editorial-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; } .cn-article { font-size: var(--ax-font-16); line-height: 2; min-width: 0; max-width: 880px; } .cn-article p { margin: 0 0 24px; } .cn-article h2 { font-size: var(--ax-font-28); font-weight: 500; letter-spacing: normal; line-height: 1.5; margin: 48px 0 20px; } .cn-article h3 { font-size: var(--ax-font-22); font-weight: 500; margin: 30px 0 14px; } .cn-article>h2:first-child { margin-top: 0; } .cn-article ul, .cn-article ol { padding-left: 24px; margin-bottom: 26px; } .cn-article li { margin: 8px 0; } .cn-article blockquote { border-left: 3px solid var(--ax-brand); padding: 16px 24px; margin: 25px 0; background: var(--ax-gray-1); } .cn-article a:not(.button) { color: var(--ax-brand); text-decoration: underline; text-underline-offset: 4px; } .cn-article img { height: auto; max-width: 100%; } .cn-article iframe, .cn-article video { max-width: 100%; aspect-ratio: 16/9; } .cn-editorial-aside { padding: 26px; background: var(--ax-gray-1); align-self: start; position: sticky; top: 40px; } .cn-editorial-aside p:not(.eyebrow) { font-size: var(--ax-font-14); line-height: 1.9; color: var(--muted); margin: 18px 0; } .cn-editorial-aside .text-link { display: flex; justify-content: space-between; font-size: var(--ax-font-14); } .cn-article-date { font-size: var(--ax-font-12); color: var(--muted); margin-top: 22px; } .cn-resource-toolbar { display: flex; gap: 32px; justify-content: space-between; align-items: center; padding: 30px 0; } .cn-resource-toolbar .cn-search-form { flex: 1; max-width: 650px; margin: 0; } .cn-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-bottom: 70px; } .cn-resource-grid article { border: 1px solid var(--line); min-width: 0; } .cn-resource-grid article a>div:not(.cn-resource-image) { padding: 26px; } .cn-resource-grid h2 { font-size: var(--ax-font-22); line-height: 1.5; font-weight: 500; margin: 18px 0; } .cn-resource-grid p:not(.eyebrow) { font-size: var(--ax-font-14); line-height: 1.9; color: var(--muted); } .cn-resource-image { aspect-ratio: 1.55; overflow: hidden; background: var(--ax-gray-1); } .cn-resource-image img { width: 100%; height: 100%; object-fit: cover; } .cn-article .axcn-downloads { background: transparent; padding: 0; } .cn-article .axcn-downloads>p { padding: 20px; border: 1px solid var(--line); background: var(--ax-gray-1); } .axcn-files { list-style: none; padding: 0!important; } .axcn-files li { padding: 22px 0; border-bottom: 1px solid var(--line); } .axcn-files span { display: block; font-size: var(--ax-font-12); color: var(--muted); margin-top: 7px; } .cn-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--surface-highlight); padding: 58px var(--pad); margin-top: 30px; } .cn-bottom-cta h2 { font-size: var(--ax-font-36); line-height: 1.5; font-weight: 500; letter-spacing: normal; margin-top: 15px; } .cn-bottom-cta .button { min-width: 220px; } .axcn-contact strong { font-weight: 500; } .axcn-contact a { overflow-wrap: anywhere; } @media(min-width:1280px) { .hero-copy { padding-top: 68px; } } @media(max-width:1280px) { .header { gap: 18px; } .header nav { gap: 16px; } .header nav, .header-cta { font-size: var(--ax-font-14); } .cn-catalog-layout { grid-template-columns: 220px minmax(0,1fr); gap: 28px; } .cn-product-body { grid-template-columns: minmax(0,1fr) 220px; gap: 34px; } .cn-product-hero { gap: 35px; } .cn-editorial-layout { gap: 40px; } .cn-directory-card { padding: 23px 20px; } .cn-directory-card h3 { font-size: var(--ax-font-22); } } @media(max-width:1024px) { .header nav.open { max-height: calc(100dvh - 90px); overflow: auto; align-items: stretch; padding: 16px var(--pad) 24px; gap: 0; } .header nav.open>a { border-bottom: 1px solid var(--line); padding: 15px 0; min-height: 52px; } .cn-mega>summary { min-height: 55px; justify-content: space-between; } .cn-mega-panel { position: static; box-shadow: none; padding: 16px 18px; margin: 0 0 14px; border: 1px solid var(--line); } .cn-mega-top { display: none; } .cn-mega-grid { gap: 0 22px; } .header nav .cn-mega-grid a { padding: 14px 0; } .cn-mega-grid a span { font-size: var(--ax-font-14); } .cn-mega-grid a small { font-size: var(--ax-font-12); } .cn-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-product-aside { position: static; } .cn-directory-grid { gap: 15px; } .cn-page-hero>div:not(.cn-path) { gap: 30px; } .hero-intro { font-size: var(--ax-font-14); } } @media(max-width:1024px) { .cn-catalog-layout { grid-template-columns: 1fr; } .cn-catalog-sidebar { border-bottom: 1px solid var(--line); } .cn-side-title { display: flex; align-items: center; gap: 20px; } .cn-side-title h2 { margin: 0 0 14px; } .cn-side-title small { margin-bottom: 14px; } .cn-catalog-sidebar nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 25px; align-items: start; } .cn-side-help { display: none; } .cn-product-body { grid-template-columns: 1fr; } .cn-product-aside { display: none; } .cn-editorial-layout { grid-template-columns: 1fr; } .cn-editorial-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; } .cn-editorial-aside>h2 { grid-column: 1; grid-row: 2/5; margin: 0; } .cn-editorial-aside>.eyebrow { grid-column: 1/-1; } .cn-editorial-aside>p:not(.eyebrow), .cn-editorial-aside>a { grid-column: 2; } .cn-editorial-aside>p:not(.eyebrow) { margin: 0; } .cn-page-hero h1 { font-size: var(--ax-font-48); } .cn-lead { font-size: var(--ax-font-16); } .cn-directory-card { min-height: 230px; } .cn-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:640px) { .header { height: 82px; flex-wrap: nowrap; } .header-cta { margin-right: 0; } .header .menu-button { margin-right: -8px; } .header nav.open { top: 100%; max-height: calc(100dvh - 82px); } .hero-copy { padding-top: 32px; } .hero-slogan { margin-top: 20px; font-size: var(--ax-font-14); } .hero-intro { font-size: var(--ax-font-14); } .hero-actions { margin: 25px 0 34px; gap: 22px; } .hero-index { font-size: var(--ax-font-12); } .hero-machine { min-height: 370px; } .machine-stage { min-height: 290px; } .machine-top, .machine-bottom { font-size: var(--ax-font-12); } .machine-top { padding-block: 9px; } .machine-bottom { padding-block: 15px; } .discipline { font-size: var(--ax-font-14); gap: 10px; } .discipline p { font-size: var(--ax-font-12); } .section { padding-block: 62px; } .section h2 { font-size: var(--ax-font-36); } .section-heading>div>p { font-size: var(--ax-font-14); } .products>.cn-directory-grid { margin-top: 28px; } .cn-directory-grid { gap: 12px; } .cn-directory-card { min-height: 215px; padding: 20px 17px; } .cn-card-top { margin-bottom: 22px; font-size: var(--ax-font-12); } .cn-directory-card h3 { font-size: var(--ax-font-18); } .cn-directory-card p { font-size: var(--ax-font-14); line-height: 1.8; margin-bottom: 18px; } .cn-card-series { font-size: var(--ax-font-12); padding-top: 13px; } .cn-home-directory-footer { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 24px; } .cn-home-directory-footer p { font-size: var(--ax-font-12); } .application-list summary h3 { font-size: var(--ax-font-22); } .cn-shell>.axcn-breadcrumb { font-size: var(--ax-font-12); padding-block: 20px; gap: 7px; } .cn-page-hero>.eyebrow { font-size: var(--ax-font-12); margin-bottom: 18px; } .cn-page-hero>div:not(.cn-path) { grid-template-columns: 1fr; gap: 20px; } .cn-lead { font-size: var(--ax-font-16); line-height: 1.9; } .cn-path { font-size: var(--ax-font-12); margin-top: 24px; flex-wrap: wrap; } .cn-catalog-layout { padding-top: 28px; padding-bottom: 40px; } .cn-catalog-sidebar nav { gap: 0 18px; } .cn-catalog-sidebar summary { font-size: var(--ax-font-14); line-height: 1.8; gap: 8px; } .cn-catalog-sidebar details a { font-size: var(--ax-font-12); padding: 9px 8px; } .cn-side-title h2 { font-size: var(--ax-font-22); } .cn-side-title small { font-size: var(--ax-font-12); } .cn-results-heading h2 { font-size: var(--ax-font-22); } .cn-catalog-main .cn-directory-grid { gap: 12px; } .cn-catalog-main .cn-directory-card { min-height: 210px; } .cn-results-heading>span { font-size: var(--ax-font-12); } .cn-model-results { margin-top: 30px; padding-top: 27px; } .cn-search-form { flex-direction: column; align-items: stretch; } .cn-search-form input { font-size: var(--ax-font-16); } .cn-search-form .button { min-height: 48px; justify-content: center; } .cn-interior .axcn-product-grid { grid-template-columns: 1fr; } .cn-card-content { padding: 22px; } .cn-empty { padding: 34px 20px; } .cn-empty h3 { font-size: var(--ax-font-22); } .cn-empty p { font-size: var(--ax-font-14); } .cn-product-hero { grid-template-columns: 1fr; gap: 30px; padding: 30px 0; } .cn-product-hero h1 { margin: 20px 0; } .cn-product-hero .eyebrow { font-size: var(--ax-font-12); } .cn-product-media { aspect-ratio: 1.4; max-height: 330px; } .cn-model-mark { gap: 20px; padding: 30px; } .cn-model-mark strong { font-size: var(--ax-font-48); } .cn-detail-status { font-size: var(--ax-font-12); margin-top: 24px; } .cn-hero-actions { gap: 20px; flex-wrap: wrap; } .cn-hero-actions .button, .cn-hero-actions .text-link { font-size: var(--ax-font-14); } .cn-product-shell .product-anchor { gap: 24px; top: 0; padding-block: 11px; } .cn-interior .product-section { padding-block: 30px; } .cn-interior .product-section h2 { font-size: var(--ax-font-28); margin-top: 10px; margin-bottom: 20px; } .cn-interior .product-section p { font-size: var(--ax-font-16); } .cn-interior th, .cn-interior td { padding: 13px; font-size: var(--ax-font-14); } .cn-article { font-size: var(--ax-font-16); } .cn-article h2 { font-size: var(--ax-font-28); margin-top: 35px; } .cn-article h3 { font-size: var(--ax-font-22); } .cn-editorial-aside { display: block; padding: 25px; } .cn-editorial-aside h2 { font-size: var(--ax-font-22); margin: 15px 0; } .cn-editorial-aside>p:not(.eyebrow) { margin-bottom: 15px; } .cn-editorial-aside>.text-link { padding-block: 12px; } .cn-resource-toolbar { align-items: stretch; flex-direction: column; gap: 10px; } .cn-resource-grid { grid-template-columns: 1fr; gap: 18px; padding-bottom: 35px; } .cn-resource-grid h2 { font-size: var(--ax-font-22); } .cn-bottom-cta { align-items: flex-start; flex-direction: column; gap: 26px; padding-block: 42px; margin-top: 15px; } .cn-bottom-cta h2 { font-size: var(--ax-font-36); } .cn-bottom-cta .button { min-width: 0; width: 100%; } .cn-footer-nav { gap: 12px 23px; font-size: var(--ax-font-14); } .footer-bottom { font-size: var(--ax-font-12); } .footer-top .brand-word { font-size: var(--ax-font-36); } .cn-footer-contact { font-size: var(--ax-font-14); } } @media(max-width:640px) { .header .brand-word { font-size: var(--ax-font-22); } .brand-cn { letter-spacing: 1.4px; font-size: var(--ax-font-12); } .cn-directory-grid, .cn-catalog-main .cn-directory-grid { grid-template-columns: 1fr; } .cn-directory-card, .cn-catalog-main .cn-directory-card { min-height: 190px; } .cn-catalog-sidebar nav { grid-template-columns: 1fr; } .cn-product-hero h1 { font-size: var(--ax-font-28); } .cn-path { gap: 8px; } } @media(prefers-reduced-motion:reduce) { .cn-directory-card:hover { transform: none; } } .cn-topic-nav { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 28px; } .cn-topic-nav a { font-size: var(--ax-font-14); padding: 10px 16px; border: 1px solid var(--line); } .cn-topic-nav a:hover, .cn-topic-nav a[aria-current] { background: var(--dark); color: var(--paper); border-color: var(--dark); } .cn-footer-meta { display: flex; gap: 24px; align-items: center; margin-top: 24px; font-size: var(--ax-font-12); color: var(--muted); } .cn-footer-meta>span { font: var(--ax-font-12) monospace; letter-spacing: .1em; margin-right: auto; } .cn-footer-meta a { padding: 10px 0; min-height: 40px; } .cn-footer-meta a:hover { text-decoration: underline; } @media(max-width:640px) { .cn-footer-meta { flex-wrap: wrap; gap: 10px 20px; } .cn-footer-meta>span { width: 100%; } } .cn-interior.axcn-public { max-width: none; margin: 0; padding: 0; color: var(--ink); } .cn-catalog-toggle { display: none; } @media(max-width:1024px) { .cn-catalog-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; font-size: var(--ax-font-12); padding: 10px 0 10px 15px; white-space: nowrap; } .cn-catalog-sidebar.is-collapsible:not(.is-open) nav { display: none; } .cn-side-title { flex-wrap: wrap; } .cn-side-title h2, .cn-side-title small { margin-bottom: 0; } .cn-catalog-sidebar.is-open nav { margin-top: 18px; } .cn-catalog-sidebar { padding-bottom: 16px; } } .header #navigation>a[aria-current], .header .cn-mega>summary[aria-current] { box-shadow: inset 0 -2px 0 var(--ax-brand); color: var(--ink); } .cn-search-tabs { margin-bottom: 0; } .cn-search-tabs+.cn-resource-toolbar { padding-top: 24px; } .cn-empty h2 { font-size: var(--ax-font-22); font-weight: 500; margin-bottom: 12px; } .cn-error-recovery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; padding: 50px 0 80px; } .cn-error-recovery h2 { font-size: var(--ax-font-22); font-weight: 500; margin-bottom: 24px; } .cn-error-recovery .cn-search-form { margin-bottom: 28px; } .cn-error-recovery aside { background: var(--dark); color: var(--paper); padding: 36px; display: flex; flex-direction: column; justify-content: space-between; min-height: 265px; } .cn-error-recovery aside>span { font-size: var(--ax-font-48); line-height: 1; font-weight: 500; letter-spacing: normal; color: var(--surface-highlight); } .cn-error-recovery aside p { font-size: var(--ax-font-14); line-height: 1.9; margin-top: 25px; } .cn-search-tabs a { min-height: 44px; } .cn-resource-grid .eyebrow { letter-spacing: .05em; } @media(max-width:640px) { .cn-error-recovery { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 45px; } .cn-error-recovery aside { min-height: 200px; padding: 26px; } .cn-error-recovery aside>span { font-size: var(--ax-font-48); } .cn-error-recovery .cn-hero-actions { gap: 20px; flex-wrap: wrap; } .cn-error-recovery h2 { font-size: var(--ax-font-22); } } .header .brand { flex-shrink: 0; } .cn-brand-logo { display: block; width: 178px; height: auto; aspect-ratio: 667/192; object-fit: contain; } .cn-footer-brand { display: inline-block; flex-shrink: 0; } .cn-footer-brand .cn-brand-logo { width: 220px; } .footer-top { gap: 24px; } @media(max-width:1024px) { .header .cn-brand-logo { width: 156px; } .header { gap: 20px; } .header nav { gap: 18px; } } @media(max-width:640px) { .header { gap: 10px; } .cn-footer-brand .cn-brand-logo { width: 180px; } } @media(max-width:640px) { .header .cn-brand-logo { width: 124px; } .header-cta { font-size: var(--ax-font-12); } .header .menu-button { flex-shrink: 0; } } .cn-directory-picture { aspect-ratio: 1.6; background: var(--ax-gray-0); display: grid; place-items: center; overflow: hidden; margin: -25px -26px 24px; padding: 20px; border-bottom: 1px solid var(--line); } .cn-directory-picture img { width: 100%; height: 100%; max-height: 225px; object-fit: contain; transition: transform .35s; } .cn-directory-card:hover .cn-directory-picture img { transform: scale(1.035); } .cn-directory-card .cn-card-top { margin-bottom: 16px; } .cn-mega-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 24px; } .header nav .cn-mega-grid>a { display: grid; grid-template-columns: 74px minmax(0,1fr); column-gap: 14px; align-items: center; padding: 15px 0; } .cn-mega-picture { grid-row: 1/3; width: 74px; height: 68px; background: var(--ax-gray-0); display: grid; place-items: center; padding: 5px; overflow: hidden; } .cn-mega-picture img { width: 100%; height: 100%; object-fit: contain; } .cn-mega-grid a span { font-size: var(--ax-font-14); } .cn-mega-grid a small { grid-column: 2; min-width: 0; font-size: var(--ax-font-12); line-height: 1.6; margin-top: 3px; } .cn-mega-panel { padding-top: 24px; padding-bottom: 14px; } @media(max-width:1280px) { .cn-mega-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media(max-width:1024px) { .cn-directory-picture { max-height: 250px; } .cn-mega-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .header nav .cn-mega-grid>a { grid-template-columns: 65px minmax(0,1fr); column-gap: 12px; } .cn-mega-picture { width: 65px; height: 65px; } } @media(max-width:640px) { .cn-directory-picture { margin: -20px -17px 20px; padding: 18px; min-height: 130px; } .cn-mega-grid { gap: 0 16px; } .cn-mega-grid a span { font-size: var(--ax-font-14); } .cn-mega-grid a small { font-size: var(--ax-font-12); } .header nav .cn-mega-grid>a { column-gap: 10px; } .cn-mega-picture { padding: 4px; } } @media(max-width:640px) { .cn-mega-grid { grid-template-columns: 1fr; } .header nav .cn-mega-grid>a { grid-template-columns: 64px minmax(0,1fr); } .cn-mega-picture { width: 64px; height: 62px; } .cn-directory-picture { aspect-ratio: 1.8; } } @media(prefers-reduced-motion:reduce) { .cn-directory-picture img { transition: none; } .cn-directory-card:hover .cn-directory-picture img { transform: none; } } .cn-directory-picture { position: relative; } .cn-picture-caption { position: absolute; left: 12px; bottom: 9px; font-size: var(--ax-font-12); color: var(--muted); background: color-mix(in srgb, var(--ax-gray-0) 92.94%, transparent); padding: 2px 7px; border: 1px solid var(--ax-gray-1); } @media(min-width:1025px) and (hover:hover) and (pointer:fine) { .header .cn-mega>summary { padding-block: 36px; margin-block: -24px; } } .cn-mega-browser { display: grid; grid-template-columns: minmax(230px,29%) minmax(0,1fr); gap: 28px; min-width: 0; } .cn-mega-categories { max-height: min(490px,calc(100dvh - 295px)); min-height: 200px; overflow: auto; overscroll-behavior: contain; padding-right: 10px; border-right: 1px solid var(--line); } .cn-mega-category { display: grid; grid-template-columns: minmax(0,1fr) 44px; border-bottom: 1px solid var(--line); min-width: 0; } .header nav .cn-mega-category>a { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 12px; padding: 9px 8px; white-space: normal; min-height: 68px; font-size: var(--ax-font-14); border: 0; } .cn-mega-category .cn-mega-picture { width: 52px; height: 48px; padding: 4px; grid-row: auto; } .cn-mega-category.is-selected { background: var(--ax-gray-1); } .cn-mega-category-toggle { border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: var(--ax-font-22); line-height: 1; cursor: pointer; min-width: 44px; min-height: 48px; } .cn-mega-category-toggle:hover { background: var(--ax-gray-2); } .cn-mega-series-panels { min-width: 0; max-height: min(490px,calc(100dvh - 295px)); overflow: auto; overscroll-behavior: contain; padding-right: 8px; } .cn-mega-series-panel[hidden] { display: none!important; } .cn-mega-series-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 4px 0 18px; } .cn-mega-series-heading small { color: var(--muted); font-size: var(--ax-font-12); } .cn-mega-series-heading h2 { margin: 7px 0 0; font-size: var(--ax-font-22); line-height: 1.35; font-weight: 500; } .header nav .cn-mega-series-heading>a { padding: 10px 0; font-size: var(--ax-font-12); white-space: nowrap; } .cn-mega-series-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .header nav .cn-mega-series-grid>a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1px solid var(--line); padding: 14px; text-decoration: none; min-width: 0; white-space: normal; } .cn-mega-series-grid .cn-mega-picture { width: 100%; background: var(--ax-gray-0); padding: 8px; } .cn-mega-series-grid strong { font-size: var(--ax-font-14); line-height: 1.6; font-weight: 500; } .cn-mega-series-grid small { font-size: var(--ax-font-12); color: var(--muted); } .cn-mega-series-grid .cn-mega-image-note { font-size: var(--ax-font-12); color: var(--ax-gray-4); line-height: 1.5; } .header nav .cn-mega-series-grid>a:hover { border-color: var(--ax-gray-4); background: var(--ax-gray-1); } .header nav .cn-mega-category>a:after, .header nav .cn-mega-series-grid>a:after { display: none; } .cn-mega-browser :focus-visible { outline: 2px solid var(--ax-brand); outline-offset: -2px; } .cn-mega-series-empty { grid-column: 1/-1; } @media(max-width:1280px) { .cn-mega-browser { grid-template-columns: minmax(200px,31%) minmax(0,1fr); gap: 20px; } .cn-mega-series-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-mega-series-heading h2 { font-size: var(--ax-font-22); } } @media(max-width:1024px) { .cn-mega-browser { grid-template-columns: 1fr; gap: 22px; } .cn-mega-categories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; max-height: 275px; min-height: 0; } .cn-mega-series-panels { max-height: none; padding: 0; overflow: visible; } .header nav .cn-mega-category>a { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 9px 3px; font-size: var(--ax-font-12); min-height: 65px; } .cn-mega-category .cn-mega-picture { width: 42px; height: 45px; } .cn-mega-category { grid-template-columns: minmax(0,1fr) 44px; } .cn-mega-category-toggle { min-width: 44px; } .cn-mega-series-grid { gap: 12px; } .cn-mega-series-heading { gap: 12px; } .cn-mega-series-heading h2 { font-size: var(--ax-font-22); } .cn-mega-panel { max-height: calc(100dvh - 150px); overflow: auto; } .cn-mega-note { font-size: var(--ax-font-12); } } @media(max-width:640px) { .cn-mega-categories { grid-template-columns: 1fr; max-height: 220px; } .cn-mega-series-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .header nav .cn-mega-series-grid>a { padding: 10px; } .cn-mega-series-grid strong { font-size: var(--ax-font-12); } } .cn-mega-series-grid .cn-mega-picture { height: 124px; display: flex; align-items: center; justify-content: center; } .cn-mega-series-grid .cn-mega-picture img { width: 100%; height: 108px; max-height: 108px; min-height: 0; object-fit: contain; object-position: center; } .cn-mega-category .cn-mega-picture img { width: 100%; height: 40px; max-height: 40px; object-fit: contain; } @media(max-width:1024px) { .cn-mega-series-grid .cn-mega-picture { height: 85px; } .cn-mega-series-grid .cn-mega-picture img { height: 69px; max-height: 69px; } .cn-mega-category .cn-mega-picture img { height: 37px; max-height: 37px; } } @media(max-width:640px) { .cn-mega-series-grid .cn-mega-picture { height: 70px; } .cn-mega-series-grid .cn-mega-picture img { height: 54px; max-height: 54px; } } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--cn-blue); } .cn-ref-wrap { width: var(--layout-width); margin-inline: auto; } .cn-topline { font-size: var(--ax-font-12); letter-spacing: .02em; } .cn-topline>div { width: var(--layout-width); margin: auto; display: flex; justify-content: flex-end; padding: 9px 0; } .header.cn-reference-header { height: 88px; padding: 0; border-bottom: 1px solid var(--ax-gray-1); position: relative; top: auto; z-index: 60; } .cn-header-inner { width: var(--layout-width); margin: auto; display: flex; align-items: center; gap: 25px; height: 100%; position: relative; } .cn-reference-header .brand { margin-right: auto; flex-shrink: 0; } .cn-reference-header .brand img { width: 190px; height: auto; max-height: 62px; object-fit: contain; } .cn-reference-header nav { display: flex; align-items: center; gap: 22px; font-size: var(--ax-font-14); } .cn-reference-header nav>a { padding: 30px 0; } .cn-reference-header a:after { display: none; } .cn-reference-header .header-cta { border: 0; color: var(--ax-gray-0); padding: 15px 18px; font-size: var(--ax-font-14); white-space: nowrap; } .cn-nav-group { position: relative; } .cn-nav-group summary { cursor: pointer; list-style: none; padding: 30px 0; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 5px; } .cn-nav-group summary::-webkit-details-marker { display: none; } .cn-nav-group summary span { font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-nav-group[open]>summary { color: var(--cn-blue); } .cn-nav-dropdown { position: absolute; z-index: 40; top: 100%; left: -20px; background: var(--ax-gray-0); border: 1px solid var(--line); box-shadow: 0 18px 35px color-mix(in srgb, var(--ax-gray-5) 8.63%, transparent); } .cn-nav-group:not([open])>.cn-nav-dropdown { display: none; } .cn-nav-links { width: 250px; padding: 12px; } .cn-reference-header .cn-nav-links a { display: flex; justify-content: space-between; padding: 13px 12px; font-size: var(--ax-font-14); } .cn-nav-links a:hover { background: var(--ax-gray-1); color: var(--cn-blue); } .cn-nav-products { position: static; } .cn-nav-families { left: 0; right: 0; padding: 25px; } .cn-nav-dropdown-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; } .cn-reference-header .cn-nav-dropdown-heading a, .cn-reference-header .cn-nav-dropdown-foot a { padding: 0; font-size: var(--ax-font-14); color: var(--cn-blue); } .cn-nav-family-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } .cn-reference-header .cn-nav-family-grid>a { display: grid; grid-template-columns: 65px 1fr 12px; gap: 12px; align-items: center; background: var(--ax-gray-1); padding: 12px; font-size: var(--ax-font-14); white-space: normal; } .cn-nav-family-grid .cn-mega-picture { width: 65px; height: 65px; min-height: 0; background: var(--ax-gray-0); margin: 0; display: flex; align-items: center; justify-content: center; } .cn-nav-family-grid img { width: 60px; height: 60px; object-fit: contain; } .cn-nav-family-grid>a:hover { background: var(--ax-gray-1); color: var(--cn-blue); } .cn-nav-dropdown-foot { padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; font-size: var(--ax-font-12); color: var(--muted); } .cn-reference-home .cn-kicker { font: var(--ax-font-12)/1.7 monospace; margin-bottom: 28px; } .cn-reference-home .cn-kicker:before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: middle; } .cn-ref-hero-grid { display: grid; align-items: center; } .cn-ref-intro { color: var(--muted); } .cn-ref-actions { display: flex; align-items: center; flex-wrap: wrap; } .cn-reference-home .button-dark { background: var(--cn-blue); color: var(--ax-gray-0); gap: 35px; min-height: 50px; padding: 16px 22px; } .cn-ref-textlink { font-size: var(--ax-font-14); display: inline-block; border-bottom: 1px solid var(--ax-gray-2); padding-bottom: 10px; line-height: 1.5; } .cn-ref-textlink:hover { color: var(--cn-blue); border-color: var(--cn-blue); } .cn-ref-caption { font: var(--ax-font-12)/1.8 monospace; } .cn-ref-hero-photo { position: relative; display: grid; place-items: center; min-width: 0; } .cn-ref-hero-photo>img { position: relative; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; z-index: 1; } .cn-orbit { position: absolute; border: 1px solid var(--ax-gray-1); pointer-events: none; } .cn-orbit:before, .cn-orbit:after { content: ''; position: absolute; inset: 13%; border: 1px solid var(--ax-gray-1); border-radius: 50%; } .cn-orbit:after { inset: 29%; } .cn-ref-photo-tag { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; font: var(--ax-font-12) monospace; } .cn-ref-hero-inset { position: absolute; right: 0; border: 1px solid var(--ax-gray-2); z-index: 2; } .cn-ref-hero-inset img { width: 100%; aspect-ratio: 1; object-fit: contain; } .cn-ref-hero-inset span { font-size: var(--ax-font-12); display: block; margin-top: 7px; } .cn-ref-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; } .cn-ref-section-head .cn-kicker { margin-bottom: 18px; } .cn-ref-family-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); } .cn-ref-family-photo { position: relative; overflow: hidden; } .cn-ref-family-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 12px; transition: transform .35s; } .cn-ref-family:hover img { transform: scale(1.035); } .cn-ref-family-photo>span { position: absolute; right: 15px; top: 13px; font-size: var(--ax-font-22); } .cn-ref-family>small { display: block; font: var(--ax-font-12) monospace; letter-spacing: .7px; margin-top: 24px; } .cn-ref-family h3 { margin: 12px 0; } .cn-ref-family p { line-height: 1.8; color: var(--muted); } .cn-ref-more-families { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); font-size: var(--ax-font-14); } .cn-ref-motion-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 65px; } .cn-ref-motion .cn-ref-intro { margin-top: 20px; } .cn-ref-starter { margin-top: 30px; } .cn-ref-starter legend, .cn-ref-power { font-size: var(--ax-font-14); margin-bottom: 12px; } .cn-ref-motion-options input { left: 10px; top: 14px; } .cn-ref-power { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 350px; } .cn-ref-power select { padding: 12px; border: 1px solid var(--ax-gray-2); font-size: var(--ax-font-14); } .cn-ref-starter>.button { margin-top: 0; } .cn-ref-motion-result { display: flex; align-items: center; gap: 25px; min-width: 0; } .cn-ref-motion-result>img { width: 46%; height: 310px; object-fit: contain; mix-blend-mode: multiply; } .cn-ref-motion-result>div { flex: 1; min-width: 0; } .cn-ref-motion-result small { font-size: var(--ax-font-12); color: var(--muted); } .cn-ref-motion-result h3 { font-size: var(--ax-font-28); font-weight: 500; margin: 16px 0; } .cn-ref-motion-result p { font-size: var(--ax-font-14); line-height: 1.85; color: var(--muted); } .cn-ref-motion-result a { margin-top: 20px; } .cn-ref-motion-result .cn-ref-engineering-note { font-size: var(--ax-font-12); margin-top: 25px; border-top: 1px solid var(--ax-gray-2); padding-top: 15px; } .cn-ref-resource-grid, .cn-ref-knowledge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .cn-ref-resource-grid>a { border: 1px solid var(--line); } .cn-ref-resource-grid small, .cn-ref-knowledge-grid small { font: var(--ax-font-12) monospace; color: var(--muted); } .cn-ref-resource-grid h3 { font-weight: 500; margin: 35px 0 16px; display: flex; justify-content: space-between; gap: 10px; } .cn-ref-resource-grid p, .cn-ref-knowledge-grid p { font-size: var(--ax-font-14); line-height: 1.9; color: var(--muted); } .cn-ref-resource-grid a:hover { border-color: var(--ax-gray-2); } .cn-ref-workplace { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; padding-block: 20px 65px; } .cn-ref-workplace-photo { position: relative; display: block; } .cn-ref-workplace-photo img { width: 100%; aspect-ratio: 1.45; object-fit: cover; } .cn-ref-workplace-photo span { position: absolute; left: 25px; bottom: 25px; padding: 14px 18px; font-size: var(--ax-font-14); } .cn-ref-workplace>div>p:not(.cn-kicker) { font-size: var(--ax-font-16); line-height: 2; color: var(--muted); margin: 25px 0; } .cn-ref-knowledge-grid>a { border-top: 1px solid var(--line); } .cn-ref-knowledge-grid h3 { font-size: var(--ax-font-22); font-weight: 500; line-height: 1.65; margin: 20px 0 15px; } .cn-ref-faq { margin-top: 55px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .cn-ref-faq h3 { font-weight: 500; font-size: var(--ax-font-22); } .cn-ref-faq p { font-size: var(--ax-font-14); color: var(--muted); margin-top: 12px; } .cn-ref-final { color: var(--ax-gray-0); } .cn-ref-final>.cn-ref-wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .cn-ref-final .cn-kicker { color: var(--ax-gray-2); } .cn-ref-final p:last-child { font-size: var(--ax-font-14); color: var(--ax-gray-2); line-height: 1.9; margin-top: 20px; } .cn-ref-final .button { background: var(--ax-gray-0); color: var(--ax-brand); white-space: nowrap; } .cn-reference-footer { color: var(--ink); padding: 60px 0 30px; } .cn-ref-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 30px; } .cn-ref-footer-brand img { width: 195px; height: auto; } .cn-ref-footer-brand p { font-size: var(--ax-font-12); line-height: 1.9; color: var(--muted); margin-top: 18px; } .cn-ref-footer-grid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .cn-ref-footer-grid h2 { font-size: var(--ax-font-14); font-weight: 700; margin-bottom: 8px; } .cn-ref-footer-grid nav a { font-size: var(--ax-font-12); color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; } .cn-ref-footer-grid nav a:hover { color: var(--cn-blue); } .cn-ref-footer-bottom { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 45px; font-size: var(--ax-font-12); color: var(--muted); } .cn-ref-footer-bottom span { margin-right: auto; } .cn-ref-footer-contact { font-size: var(--ax-font-12); color: var(--muted); line-height: 1.8; margin-top: 20px; } .cn-tool-flow { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 25px; } .cn-tool-flow h2 { font-size: var(--ax-font-22); margin-bottom: 18px; } .cn-tool-flow>p { color: var(--muted); line-height: 1.8; margin-bottom: 18px; } @media(min-width:1025px) { .cn-reference-header .menu-button { display: none!important; } .cn-reference-header nav { display: flex!important; } } @media(max-width:1024px) { .header.cn-reference-header { height: 80px; } .cn-reference-header .brand img { width: 175px; } .cn-reference-header nav { display: none; } .cn-reference-header nav.open { display: flex; position: absolute; top: 100%; left: -22px; right: -22px; padding: 18px 22px 30px; overflow: auto; align-items: stretch; background: var(--ax-gray-0); gap: 0; border-bottom: 1px solid var(--line); } .cn-reference-header nav>a, .cn-nav-group summary { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: var(--ax-font-16); } .cn-nav-group { position: relative; } .cn-nav-dropdown { position: static; box-shadow: none; border: 0; padding: 16px 0; } .cn-nav-links { width: auto; } .cn-reference-header .cn-nav-links a { padding: 13px; } .cn-nav-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-nav-dropdown-heading { align-items: start; gap: 15px; font-size: var(--ax-font-14); } .cn-nav-dropdown-foot { flex-direction: column; gap: 12px; } .cn-reference-header .header-cta { margin-left: 0; } .cn-ref-hero-grid { gap: 20px; } .cn-ref-hero-copy { padding: 50px 0; } .cn-ref-hero-inset { width: 90px; bottom: 40px; } .cn-ref-motion-grid { gap: 30px; } .cn-ref-motion-result { flex-direction: column; align-items: stretch; } .cn-ref-motion-result>img { width: 100%; height: 200px; } .cn-ref-motion-result>div { width: 100%; } .cn-ref-family h3 { font-size: var(--ax-font-18); } .cn-ref-footer-grid { grid-template-columns: repeat(4,1fr); } .cn-ref-footer-brand { grid-column: 1/-1; display: flex; gap: 30px; align-items: center; } .cn-ref-footer-brand p { margin: 0; } .cn-ref-section { padding-block: 65px; } } @media(max-width:640px) { .cn-topline>div { font-size: var(--ax-font-12); } .cn-topline { display: none; } .cn-reference-header .menu-button { width: 36px; min-height: 44px; } .cn-ref-hero-grid { gap: 0; } .cn-reference-home .cn-kicker { font-size: var(--ax-font-12); margin-bottom: 18px; } .cn-ref-actions { gap: 20px; margin-top: 25px; } .cn-ref-actions .button { font-size: var(--ax-font-14); padding: 15px 18px; gap: 20px; } .cn-ref-textlink { font-size: var(--ax-font-14); } .cn-ref-hero-photo { max-width: 400px; width: 100%; margin: auto; } .cn-ref-hero-photo>img { height: 320px; } .cn-orbit { inset: 4% 10%; } .cn-ref-photo-tag { bottom: 10px; font-size: var(--ax-font-12); } .cn-ref-section-head { align-items: start; gap: 20px; flex-direction: column; margin-bottom: 28px; } .cn-ref-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-ref-family-photo img { padding: 5px; } .cn-ref-family>small { letter-spacing: 0; margin-top: 17px; } .cn-ref-family h3 { margin: 10px 0; } .cn-ref-more-families { gap: 16px; font-size: var(--ax-font-12); } .cn-ref-motion { padding-block: 45px; } .cn-ref-motion-grid { grid-template-columns: 1fr; gap: 30px; } .cn-ref-motion-options { grid-template-columns: repeat(2,1fr); } .cn-ref-motion-result { flex-direction: row; align-items: center; gap: 15px; } .cn-ref-motion-result>img { width: 39%; height: 200px; } .cn-ref-motion-result h3 { font-size: var(--ax-font-22); } .cn-ref-motion-result p { font-size: var(--ax-font-12); } .cn-ref-motion-result .cn-ref-engineering-note { font-size: var(--ax-font-12); margin-top: 17px; } .cn-ref-resource-grid, .cn-ref-knowledge-grid { grid-template-columns: 1fr; gap: 20px; } .cn-ref-workplace { grid-template-columns: 1fr; padding-block: 10px 20px; } .cn-ref-workplace>div>p:not(.cn-kicker) { font-size: var(--ax-font-14); margin: 20px 0; } .cn-ref-knowledge-grid h3 { font-size: var(--ax-font-22); } .cn-ref-faq { align-items: start; flex-direction: column; margin-top: 35px; } .cn-ref-faq h3 { font-size: var(--ax-font-22); } .cn-ref-final>.cn-ref-wrap { align-items: start; flex-direction: column; } .cn-ref-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 22px; } .cn-ref-footer-brand { display: block; } .cn-ref-footer-brand img { width: 175px; } .cn-ref-footer-brand p { margin-top: 14px; } .cn-ref-footer-bottom { gap: 17px; flex-wrap: wrap; } .cn-ref-footer-bottom span { width: 100%; } .cn-nav-family-grid .cn-mega-picture { width: 45px; height: 45px; } .cn-nav-family-grid img { width: 42px; height: 42px; } .cn-reference-header .cn-nav-family-grid>a { grid-template-columns: 45px 1fr; gap: 8px; padding: 9px; font-size: var(--ax-font-12); } .cn-nav-family-grid>a>span:last-child { display: none; } .cn-reference-footer { padding-top: 42px; } } @media(prefers-reduced-motion:reduce) { .cn-ref-family-photo img { transition: none; } } .cn-ref-hero-photo>img { mask-image: radial-gradient(48% 48%,var(--ax-gray-5) 50%,transparent 94%); } .cn-ref-hero-inset img { mask-image: radial-gradient(50% 50%,var(--ax-gray-5) 65%,transparent 100%); } .button-dark, .cn-utility button { background: var(--cn-blue); color: var(--ax-gray-0); } .cn-reference-header summary { border-bottom: 0; } @media(max-width:1024px) { .cn-reference-header summary { border-bottom: 1px solid var(--line); } } @media(max-width:640px) { .cn-reference-header .brand img { width: 118px; } .cn-reference-header .header-cta { font-size: var(--ax-font-12); padding: 11px 9px; } } .cn-topline { background: var(--ax-brand); color: var(--ax-gray-1); } .header.cn-reference-header { background: var(--ax-gray-0); border-bottom-color: var(--ax-gray-1); } .cn-reference-header .header-cta { background: var(--ax-brand); } .cn-ref-hero { background: var(--ax-gray-1); border-bottom: 1px solid var(--ax-gray-1); } .cn-ref-hero-grid { min-height: 650px; grid-template-columns: 1.1fr 1fr; gap: 30px; } .cn-ref-hero-copy { padding: 75px 0 60px; } .cn-ref-hero h1 { font-size: var(--ax-font-48); line-height: 1.4; font-weight: 500; letter-spacing: normal; margin: 32px 0 25px; } .cn-ref-hero h1 span { color: var(--ax-accent-light); } .cn-ref-intro { font-size: var(--ax-font-16); line-height: 2.1; max-width: 510px; } .cn-reference-home .cn-kicker { color: var(--ax-gray-4); letter-spacing: 1.5px; } .cn-reference-home .cn-kicker:before { border-radius: 0; background: var(--ax-gray-4); } .cn-ref-actions { gap: 30px; margin-top: 35px; } .cn-reference-home .button-dark, .button-dark { background: var(--ax-brand); } .cn-ref-textlink { color: var(--ax-gray-5); border-bottom-color: var(--ax-gray-3); } .cn-ref-caption { margin-top: 52px; font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-ref-hero-photo { aspect-ratio: 1.04; } .cn-ref-hero-photo>img { max-height: 545px; filter: drop-shadow(0 25px 20px color-mix(in srgb, var(--ax-gray-5) 6.27%, transparent)); } .cn-orbit { inset: 10% 0; border-color: var(--ax-gray-2); border-radius: 50%; } .cn-orbit:before, .cn-orbit:after { display: none; } .cn-ref-hero-inset { background: var(--ax-gray-1); border-color: var(--ax-gray-2); width: 112px; bottom: 54px; padding: 10px; } .cn-ref-photo-tag { bottom: 10px; color: var(--ax-gray-4); font-size: var(--ax-font-12); } .cn-reference-home h2 { font-size: var(--ax-font-36); font-weight: 500; line-height: 1.5; letter-spacing: normal; } .cn-ref-section { padding-block: 88px; } .cn-ref-section-head { margin-bottom: 38px; } .cn-ref-family-grid { gap: 24px; } .cn-ref-family-photo { background: var(--ax-gray-1); border: 1px solid var(--ax-gray-1); aspect-ratio: 1.04; } .cn-ref-family-photo>span { color: var(--ax-gray-4); } .cn-ref-family h3 { font-weight: 500; font-size: var(--ax-font-22); } .cn-ref-family p { font-size: var(--ax-font-14); } .cn-ref-family>small { color: var(--ax-gray-4); } .cn-ref-more-families { margin-top: 35px; padding-top: 25px; color: var(--ax-gray-4); } .cn-ref-motion { background: var(--ax-gray-1); padding-block: 72px; } .cn-ref-motion-options span { border-color: var(--ax-gray-2); } .cn-ref-motion-options input { accent-color: var(--ax-brand); } .cn-ref-power select { background: var(--ax-gray-1); border-color: var(--ax-gray-2); } .cn-ref-resource-grid>a { background: var(--ax-gray-0); border-color: var(--ax-gray-2); padding: 33px; } .cn-ref-resource-grid h3 { margin-top: 45px; font-size: var(--ax-font-22); } .cn-ref-workplace { gap: 70px; } .cn-ref-workplace-photo img { filter: saturate(.8); } .cn-ref-workplace-photo span { background: color-mix(in srgb, var(--ax-gray-1) 90.98%, transparent); } .cn-ref-knowledge-grid>a { padding-top: 26px; } .cn-ref-faq { background: var(--ax-gray-1); border: 0; padding: 34px; } .cn-ref-final { background: var(--ax-brand); padding-block: 70px; } .cn-ref-final .cn-kicker, .cn-ref-final p:last-child { color: var(--ax-gray-2); } .cn-reference-footer { background: var(--ax-gray-0); } .cn-utility button { border-radius: 2px; background: var(--ax-brand); } .button-dark:hover, .cn-utility button:hover { background: var(--ax-gray-5); } .cn-route-card { border-color: var(--ax-gray-1); } .cn-page-hero { border-bottom-color: var(--ax-gray-2); } .cn-interior { background: var(--paper); } .cn-reference-header .cn-mega { position: static; } .cn-reference-header .cn-mega>summary { display: flex; gap: 5px; border: 0; padding: 30px 0; white-space: nowrap; font-size: var(--ax-font-14); font-weight: 500; list-style: none; } .cn-reference-header .cn-mega>summary>a { padding: 0; } .cn-reference-header .cn-nav-group>summary>a { padding: 0; } .cn-reference-header .cn-mega-panel { position: absolute; top: 100%; left: 50%; right: auto; width: 100%; max-width: none; transform: translateX(-50%); background: var(--ax-gray-0); border: 1px solid var(--ax-gray-2); padding: 24px; box-shadow: 0 22px 42px color-mix(in srgb, var(--ax-gray-5) 10.2%, transparent); max-height: calc(100dvh - 170px); overflow: auto; } .cn-mega-top { padding-bottom: 20px; border-bottom: 1px solid var(--line); } .cn-mega-top small { color: var(--ax-gray-4); } .cn-mega-top strong { font-size: var(--ax-font-22); font-weight: 500; } .cn-mega-top>a { font-size: var(--ax-font-14); } .cn-reference-header .cn-mega-browser { display: grid; grid-template-columns: 235px minmax(0,1fr) 170px; gap: 22px; padding-top: 20px; } .cn-reference-header .cn-mega-categories { max-height: 530px; overflow: auto; border: 0; padding-right: 8px; } .cn-reference-header .cn-mega-category { background: transparent; border-bottom: 1px solid var(--ax-gray-1); grid-template-columns: minmax(0,1fr) 30px; } .cn-reference-header .cn-mega-category>a { padding: 12px 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; white-space: normal; font-size: var(--ax-font-14); } .cn-reference-header .cn-mega-category.is-selected { background: var(--ax-gray-1); color: var(--ax-brand); } .cn-reference-header .cn-mega-category .cn-mega-picture { width: 37px; height: 37px; min-height: 0; background: transparent; } .cn-reference-header .cn-mega-category .cn-mega-picture img { width: 35px; height: 35px; object-fit: contain; } .cn-reference-header .cn-mega-category-toggle { min-height: 48px; color: var(--ax-gray-4); } .cn-reference-header .cn-mega-series-heading { padding: 0 0 14px; } .cn-reference-header .cn-mega-series-heading h2 { font-size: var(--ax-font-22); font-weight: 500; } .cn-reference-header .cn-mega-series-heading small { color: var(--ax-gray-4); } .cn-reference-header .cn-mega-series-heading>a { font-size: var(--ax-font-12); padding: 0; } .cn-reference-header .cn-mega-series-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; } .cn-reference-header .cn-mega-series-grid>a { display: flex; flex-direction: column; min-width: 0; background: var(--ax-gray-1); padding: 10px; font-size: var(--ax-font-12); white-space: normal; gap: 5px; border: 1px solid transparent; } .cn-reference-header .cn-mega-series-grid>a:hover { border-color: var(--ax-gray-3); background: var(--ax-gray-1); } .cn-reference-header .cn-mega-series-grid .cn-mega-picture { width: 100%; height: 95px; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0; background: var(--ax-gray-0); } .cn-reference-header .cn-mega-series-grid .cn-mega-picture img { width: 100%; height: 85px; max-height: 85px; object-fit: contain; } .cn-reference-header .cn-mega-series-grid strong { font-size: var(--ax-font-12); line-height: 1.65; overflow-wrap: anywhere; font-weight: 500; } .cn-reference-header .cn-mega-series-grid small { font-size: var(--ax-font-12); color: var(--ax-gray-4); line-height: 1.6; } .cn-reference-header .cn-mega-image-note { font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-mega-resources { border-left: 1px solid var(--ax-gray-1); padding-left: 18px; display: flex; flex-direction: column; gap: 18px; } .cn-mega-resources>small { font: var(--ax-font-12) monospace; letter-spacing: 1px; color: var(--ax-gray-4); } .cn-mega-resources h2 { font-size: var(--ax-font-16); font-weight: 500; margin: 4px 0 10px; } .cn-reference-header .cn-mega-resources a { font-size: var(--ax-font-12); padding: 0; white-space: normal; line-height: 1.8; } .cn-mega-note { margin-top: 20px; padding-top: 16px; font-size: var(--ax-font-12); border-top: 1px solid var(--line); color: var(--ax-gray-4); } .cn-nav-wide { position: static; } .cn-nav-task-panel { left: 0; right: 0; padding: 28px; width: 100%; max-height: calc(100dvh - 175px); overflow: auto; background: var(--ax-gray-0); } .cn-nav-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 22px; } .cn-nav-panel-heading>small { font: var(--ax-font-12) monospace; letter-spacing: 1px; color: var(--ax-gray-4); } .cn-nav-panel-heading h2 { font-size: var(--ax-font-22); font-weight: 500; } .cn-nav-task-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; } .cn-reference-header .cn-nav-task-card { display: flex; gap: 14px; align-items: start; background: var(--ax-gray-1); border: 1px solid transparent; padding: 22px; white-space: normal; line-height: 1.6; } .cn-nav-task-card>div { flex: 1; min-width: 0; } .cn-nav-task-card strong { font-size: var(--ax-font-16); display: block; font-weight: 500; } .cn-nav-task-card small { font-size: var(--ax-font-12); display: block; line-height: 1.85; margin-top: 10px; color: var(--ax-gray-4); } .cn-nav-task-card>span:last-child { font-size: var(--ax-font-14); color: var(--ax-gray-4); } .cn-nav-card-index { font: var(--ax-font-12)/1.8 monospace; color: var(--ax-gray-4); } .cn-reference-header .cn-nav-task-card:hover { background: var(--ax-gray-1); border-color: var(--ax-gray-2); } .cn-nav-panel-links { display: flex; flex-wrap: wrap; gap: 15px 30px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 22px; } .cn-reference-header .cn-nav-panel-links a { padding: 0; font-size: var(--ax-font-12); color: var(--ax-gray-4); } .cn-nav-app-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .cn-nav-support-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .cn-reference-header .cn-nav-links { width: 315px; padding: 12px; background: var(--ax-gray-0); } .cn-reference-header .cn-nav-links .cn-nav-task-card { background: transparent; display: flex; margin: 0; padding: 16px 12px; } .cn-nav-links .cn-nav-task-card small { margin-top: 6px; } .cn-reference-header .cn-nav-links .cn-nav-task-card:hover { background: var(--ax-gray-1); } .cn-application-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; background: var(--ax-gray-1); border: 1px solid var(--ax-gray-2); padding: 35px; margin-block: 35px; } .cn-application-brief h2 { font-size: var(--ax-font-28); line-height: 1.5; font-weight: 500; margin: 15px 0; } .cn-application-brief h3 { font-size: var(--ax-font-18); margin-bottom: 18px; } .cn-application-brief p, .cn-application-brief li { font-size: var(--ax-font-14); line-height: 1.9; color: var(--ax-gray-4); margin: 12px 0; } .cn-application-brief ul { padding-left: 20px; margin-bottom: 25px; } @media(max-width:1024px) { .cn-ref-hero h1 { font-size: var(--ax-font-36); } .cn-ref-hero-grid { min-height: 550px; } .cn-reference-header .cn-mega>summary { font-size: var(--ax-font-16); padding: 18px 0; border-bottom: 1px solid var(--line); } .cn-reference-header .cn-mega-panel { position: static; transform: none; max-height: none; width: 100%; overflow: visible; padding: 18px 0; box-shadow: none; border: 0; } .cn-reference-header .cn-mega-browser { grid-template-columns: 190px minmax(0,1fr); gap: 18px; } .cn-reference-header .cn-mega-series-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .cn-mega-resources { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; flex-direction: row; flex-wrap: wrap; gap: 15px 25px; } .cn-mega-resources small, .cn-mega-resources h2 { display: none; } .cn-reference-header .cn-mega-categories { max-height: none; } .cn-nav-task-panel { position: static; padding: 20px 0; max-height: none; overflow: visible; } .cn-nav-task-grid, .cn-nav-app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cn-nav-panel-heading { align-items: start; flex-direction: column; gap: 12px; } .cn-nav-panel-heading h2 { font-size: var(--ax-font-22); } .cn-reference-header .cn-nav-links { width: auto; padding: 10px 0; } .cn-reference-header nav.open { max-height: calc(100dvh - 120px); padding-bottom: 90px; } .cn-ref-workplace { gap: 40px; } } @media(max-width:640px) { .cn-ref-hero-copy { padding: 42px 0 10px; } .cn-ref-hero h1 { font-size: var(--ax-font-36); line-height: 1.5; letter-spacing: normal; margin: 25px 0; } .cn-ref-hero-grid { grid-template-columns: 1fr; } .cn-ref-intro { font-size: var(--ax-font-14); line-height: 2; } .cn-ref-caption { margin-top: 28px; font-size: var(--ax-font-12); } .cn-ref-hero-photo { aspect-ratio: 1.15; } .cn-ref-hero-photo>img { max-height: 320px; } .cn-ref-hero-inset { width: 73px; bottom: 35px; padding: 8px; } .cn-reference-home h2 { font-size: var(--ax-font-28); } .cn-ref-section { padding-block: 50px; } .cn-ref-family-grid { gap: 28px 14px; } .cn-ref-family h3 { font-size: var(--ax-font-18); } .cn-ref-family>small { font-size: var(--ax-font-12); } .cn-ref-family p { font-size: var(--ax-font-12); } .cn-ref-resource-grid>a { padding: 25px; } .cn-ref-resource-grid h3 { margin-top: 28px; font-size: var(--ax-font-22); } .cn-ref-workplace { gap: 28px; } .cn-ref-faq { padding: 24px; } .cn-ref-final { padding-block: 45px; } .cn-reference-header .cn-mega-top { align-items: start; gap: 14px; } .cn-mega-top strong { font-size: var(--ax-font-22); } .cn-reference-header .cn-mega-top>a { font-size: var(--ax-font-12); padding: 0; } .cn-reference-header .cn-mega-browser { grid-template-columns: 1fr; padding-top: 12px; gap: 18px; } .cn-reference-header .cn-mega-categories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; gap: 6px; overflow: visible; } .cn-reference-header .cn-mega-category { border: 1px solid var(--ax-gray-1); grid-template-columns: minmax(0,1fr) 26px; min-width: 0; } .cn-reference-header .cn-mega-category>a { padding: 9px 5px; grid-template-columns: minmax(0,1fr); gap: 5px; font-size: var(--ax-font-12); } .cn-reference-header .cn-mega-category .cn-mega-picture { width: 28px; height: 28px; } .cn-reference-header .cn-mega-category .cn-mega-picture img { width: 26px; height: 26px; } .cn-reference-header .cn-mega-category-toggle { min-width: 26px; min-height: 44px; } .cn-reference-header .cn-mega-series-grid { gap: 8px; } .cn-reference-header .cn-mega-series-grid>a { padding: 7px; } .cn-reference-header .cn-mega-series-grid .cn-mega-picture { height: 75px; } .cn-reference-header .cn-mega-series-grid .cn-mega-picture img { height: 65px; max-height: 65px; } .cn-reference-header .cn-mega-series-grid strong { font-size: var(--ax-font-12); } .cn-reference-header .cn-mega-series-grid small { font-size: var(--ax-font-12); } .cn-reference-header .cn-mega-series-heading h2 { font-size: var(--ax-font-18); } .cn-reference-header .cn-mega-series-heading>a { font-size: var(--ax-font-12); } .cn-reference-header .cn-nav-task-card { padding: 17px 13px; gap: 8px; } .cn-nav-task-card strong { font-size: var(--ax-font-14); } .cn-nav-task-card small { font-size: var(--ax-font-12); margin-top: 8px; } .cn-nav-card-index { font-size: var(--ax-font-12); } .cn-nav-panel-links { gap: 16px; } .cn-nav-panel-heading h2 { font-size: var(--ax-font-22); } .cn-application-brief { grid-template-columns: 1fr; padding: 24px; gap: 20px; } .cn-application-brief h2 { font-size: var(--ax-font-28); } .cn-reference-header .cn-mega-note { font-size: var(--ax-font-12); } } .cn-reference-header #navigation>.cn-nav-group { border: 0; } .cn-reference-header #navigation .cn-mega-categories { max-height: none; overflow: visible; padding-right: 0; } .cn-reference-header #navigation .cn-mega-category { grid-template-columns: minmax(0,1fr) 44px; } .cn-reference-header #navigation .cn-mega-category>a { min-height: 52px; min-width: 0; padding: 8px 6px; } .cn-reference-header #navigation .cn-mega-category-toggle { min-width: 44px; width: 44px; min-height: 52px; } @media(max-width:640px) { .cn-reference-header #navigation .cn-mega-category>a { padding: 8px 4px; font-size: var(--ax-font-12); } .cn-reference-header #navigation .cn-mega-category-toggle { min-height: 52px; } } .cn-industrial-design { background: var(--ax-gray-1); } .cn-industrial-design .cn-topline { background: var(--ax-gray-5); color: var(--ax-gray-3); border-bottom: 1px solid var(--ax-brand); } .cn-industrial-design .header.cn-reference-header { background: var(--ax-gray-5); border-bottom-color: var(--ax-brand); color: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header .header-cta { background: var(--ax-brand); color: var(--ax-gray-0); box-shadow: 0 0 22px color-mix(in srgb, var(--ax-brand) 13.33%, transparent); } .cn-industrial-design .cn-reference-header .menu-button { color: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header .menu-button span { background: var(--ax-gray-1); } .cn-industrial-design .cn-nav-group summary span { color: var(--ax-gray-3); } .cn-industrial-design .cn-nav-group[open]>summary { color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation .cn-mega-panel, .cn-industrial-design .cn-reference-header .cn-nav-dropdown { background: var(--ax-gray-5); color: var(--ax-gray-1); border-color: var(--ax-brand); box-shadow: 0 25px 45px color-mix(in srgb, var(--ax-gray-5) 33.33%, transparent); } .cn-industrial-design .cn-reference-header #navigation .cn-mega-top, .cn-industrial-design .cn-reference-header .cn-mega-note, .cn-industrial-design .cn-reference-header .cn-nav-panel-links { border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header .cn-mega-top small, .cn-industrial-design .cn-reference-header .cn-mega-top>a, .cn-industrial-design .cn-reference-header .cn-mega-series-heading small, .cn-industrial-design .cn-reference-header .cn-mega-note, .cn-industrial-design .cn-reference-header .cn-mega-resources>small { color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation .cn-mega-category { border-color: var(--ax-brand); background: transparent; color: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header #navigation .cn-mega-category.is-selected { background: var(--ax-brand); color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation .cn-mega-category-toggle { color: var(--ax-gray-2); background: transparent; } .cn-industrial-design .cn-reference-header #navigation .cn-mega-category.is-selected .cn-mega-category-toggle { background: var(--ax-brand); } .cn-industrial-design .cn-reference-header .cn-mega-series-grid>a { background: var(--ax-brand); color: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header .cn-mega-series-grid>a:hover { background: var(--ax-brand); border-color: var(--ax-accent); } .cn-industrial-design .cn-reference-header .cn-mega-series-grid .cn-mega-picture { background: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header .cn-mega-series-grid small, .cn-industrial-design .cn-reference-header .cn-mega-image-note { color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header .cn-mega-resources { border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header .cn-nav-task-card { background: var(--ax-brand); color: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header .cn-nav-task-card:hover { background: var(--ax-brand); border-color: var(--ax-accent); } .cn-industrial-design .cn-reference-header .cn-nav-task-card small, .cn-industrial-design .cn-reference-header .cn-nav-card-index, .cn-industrial-design .cn-reference-header .cn-nav-task-card>span:last-child, .cn-industrial-design .cn-reference-header .cn-nav-panel-heading>small { color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header .cn-nav-panel-links a { color: var(--ax-gray-2); } .cn-industrial-design .cn-ref-hero { position: relative; isolation: isolate; background: var(--hero-bg); color: var(--hero-text); overflow: hidden; border-color: var(--hero-border); } .cn-industrial-design .cn-ref-hero:before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(110deg,var(--hero-bg) 15%,var(--hero-bg-mid) 63%,var(--hero-bg-end) 100%); } .cn-industrial-design .cn-ref-hero:after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--hero-tone-67cff10a) 1px,transparent 1px),linear-gradient(90deg,var(--hero-tone-67cff10a) 1px,transparent 1px),radial-gradient(ellipse 50% 80% at 82% 48%,var(--hero-tone-1a80ad33),transparent 75%); background-size: 72px 72px,72px 72px,100% 100%; mask-image: linear-gradient(90deg,transparent,var(--ax-gray-5) 45%); opacity: .8; } .cn-industrial-design .cn-ref-hero-grid { min-height: 680px; grid-template-columns: 1.12fr 1fr; gap: 20px; } .cn-industrial-design .cn-ref-hero-copy { position: relative; z-index: 2; padding-block: 75px 65px; } .cn-industrial-design .cn-ref-hero h1 { font-size: var(--ax-font-48); line-height: 1.42; font-weight: 700; letter-spacing: normal; text-shadow: 0 0 35px var(--hero-tone-4991b414); } .cn-industrial-design .cn-ref-hero .cn-kicker { color: var(--hero-label); letter-spacing: 1.6px; } .cn-industrial-design .cn-ref-hero .cn-kicker:before { background: var(--hero-dot); border-radius: 50%; box-shadow: 0 0 12px var(--hero-dot-glow); } .cn-industrial-design .cn-ref-hero .cn-ref-intro { color: var(--hero-body); font-size: var(--ax-font-16); line-height: 2; } .cn-industrial-design .cn-ref-hero .button-dark { background: var(--ax-accent); color: var(--ax-gray-5); border: 1px solid var(--ax-gray-2); box-shadow: 0 5px 28px color-mix(in srgb, var(--ax-accent) 13.33%, transparent); } .cn-industrial-design .cn-ref-hero .button-dark:hover { background: var(--ax-gray-2); box-shadow: 0 5px 35px color-mix(in srgb, var(--ax-accent) 26.67%, transparent); } .cn-industrial-design .cn-ref-hero .cn-ref-textlink { color: var(--hero-link); border-color: var(--hero-link-border); } .cn-industrial-design .cn-ref-hero .cn-ref-caption { color: var(--hero-caption); border-top: 1px solid var(--hero-caption-line); padding-top: 20px; max-width: 440px; letter-spacing: .7px; } .cn-industrial-design .cn-ref-hero-photo { position: relative; aspect-ratio: 1; min-width: 0; } .cn-industrial-design .cn-ref-hero-photo:before { content: ''; position: absolute; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(ellipse,var(--hero-tone-b6dcec26),transparent 68%); box-shadow: none; pointer-events: none; } .cn-industrial-design .cn-ref-hero-photo>img { width: min(100%,630px); height: auto; aspect-ratio: 1; max-height: none; mix-blend-mode: normal; -webkit-mask-image: radial-gradient(circle closest-side at 50% 51%,#000 42%,transparent 93%); mask-image: radial-gradient(circle closest-side at 50% 51%,#000 42%,transparent 93%); filter: none; position: relative; z-index: 1; } .cn-industrial-design .cn-orbit { inset: 3%; border-color: var(--hero-tone-5fc7ee50); border-radius: 50%; transform: rotate(-12deg); } .cn-industrial-design .cn-orbit:before { display: block; content: ''; position: absolute; inset: 10%; border: 1px dashed var(--hero-tone-82c6dc40); border-radius: 50%; } .cn-industrial-design .cn-orbit:after { display: block; content: ''; position: absolute; inset: -2%; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--hero-tone-6bdcff99); border-bottom-color: var(--hero-tone-6bdcff44); animation: cn-tech-orbit 32s linear infinite; } .cn-industrial-design .cn-ref-photo-tag { font-size: var(--ax-font-12); color: var(--ax-gray-2); letter-spacing: .7px; z-index: 2; } .cn-industrial-design .cn-ref-hero-inset { background: var(--hero-inset); border-color: var(--hero-inset-border); width: 108px; bottom: 48px; right: -2px; box-shadow: 0 15px 30px var(--hero-tone-0003); z-index: 3; } .cn-industrial-design .cn-ref-hero-inset img { mix-blend-mode: normal; mask-image: radial-gradient(50% 50%,var(--ax-gray-5) 55%,transparent 100%); } .cn-industrial-design .cn-ref-hero-inset span { color: var(--hero-inset-text); font-size: var(--ax-font-12); } .cn-industrial-design .cn-reference-home>.cn-ref-section { background: var(--ax-gray-1); } .cn-industrial-design .cn-reference-home .cn-kicker { color: var(--ax-gray-4); } .cn-industrial-design .cn-reference-home .cn-kicker:before { background: var(--ax-brand); } .cn-industrial-design .cn-reference-home .cn-ref-family-photo { background: var(--ax-gray-1); border-color: var(--ax-gray-1); } .cn-industrial-design .cn-reference-home .cn-ref-family-photo>span { color: var(--ax-brand); } .cn-industrial-design .cn-reference-home .cn-ref-family>small, .cn-industrial-design .cn-reference-home .cn-ref-more-families { color: var(--ax-gray-4); } .cn-industrial-design .cn-reference-home .cn-ref-textlink { color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-home .cn-ref-resource-grid>a { background: var(--ax-gray-0); border-color: var(--ax-gray-1); } .cn-industrial-design .cn-reference-home .cn-ref-resource-grid>a:hover { border-color: var(--ax-brand); } .cn-industrial-design .cn-ref-motion { background: var(--ax-gray-1); border-block: 1px solid var(--ax-gray-1); } .cn-industrial-design .cn-ref-motion-options span { background: var(--ax-gray-0); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-ref-motion-options input:checked+span { background: var(--ax-gray-1); color: var(--ax-brand); border-color: var(--ax-brand); } .cn-industrial-design .cn-ref-motion-options input { accent-color: var(--ax-brand); } .cn-industrial-design .cn-reference-home .button-dark { background: var(--ax-brand); color: var(--ax-gray-0); } .cn-industrial-design .cn-reference-home .cn-ref-hero .button-dark { background: var(--ax-accent); color: var(--ax-gray-5); } .cn-industrial-design .cn-reference-home .cn-ref-hero .cn-ref-textlink { color: var(--hero-link); border-color: var(--hero-link-border); } .cn-industrial-design .cn-ref-faq { background: var(--ax-gray-1); } .cn-industrial-design .cn-ref-final { background: var(--ax-gray-5); border-top: 1px solid var(--ax-brand); } .cn-industrial-design .cn-reference-home .cn-ref-final .cn-kicker { color: var(--ax-gray-2); } .cn-industrial-design .cn-ref-final p:last-child { color: var(--ax-gray-2); } .cn-industrial-design .cn-ref-final .button { background: var(--ax-accent); color: var(--ax-gray-5); } .cn-industrial-design .cn-reference-footer { background: var(--ax-gray-0); } .cn-industrial-design .cn-utility button { background: var(--ax-brand); border: 1px solid var(--ax-brand); color: var(--ax-gray-1); } .cn-industrial-design a:focus-visible, .cn-industrial-design summary:focus-visible, .cn-industrial-design button:focus-visible { outline-color: var(--ax-accent); } @keyframes cn-tech-orbit { to{transform:rotate(360deg)}; } .cn-category-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px,5vw,80px); align-items: center; padding: 56px 0 64px; } .cn-category-copy { min-width: 0; } .cn-category-copy h1 { font-size: var(--ax-font-48); line-height: 1.25; letter-spacing: normal; margin: 22px 0 28px; font-weight: 700; overflow-wrap: anywhere; } .cn-category-summary { font-size: var(--ax-font-28); line-height: 1.6; margin: 0 0 22px; } .cn-category-copy>p:not(.eyebrow):not(.cn-category-summary) { color: var(--muted); font-size: var(--ax-font-16); line-height: 2; max-width: 580px; } .cn-category-photo { margin: 0; padding: 30px; background: var(--ax-gray-1); border: 1px solid var(--line); min-width: 0; } .cn-category-photo img { display: block; width: 100%; height: auto; max-height: 410px; object-fit: contain; } .cn-category-photo figcaption { margin-top: 20px; border-top: 1px solid var(--ax-gray-2); padding-top: 14px; font-size: var(--ax-font-12); line-height: 1.8; color: var(--ax-gray-4); } .cn-category-introduction .cn-hero-actions { flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; } .cn-category-sections { display: flex; gap: 12px 38px; flex-wrap: wrap; padding: 22px 0; border-block: 1px solid var(--line); font-size: var(--ax-font-14); } .cn-category-sections a { display: flex; align-items: center; min-height: 44px; color: var(--ax-brand); } .cn-category-section { padding: 64px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; } .cn-category-section h2 { font-size: var(--ax-font-28); line-height: 1.6; font-weight: 500; margin: 15px 0 28px; letter-spacing: normal; } .cn-category-overview { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(28px,6vw,100px); } .cn-category-prose { font-size: var(--ax-font-16); color: var(--muted); line-height: 2; min-width: 0; } .cn-category-prose>p:first-child { margin-top: 0; } .cn-category-editorial { margin-top: 22px; } .cn-category-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; } .cn-category-features>div { background: var(--ax-gray-0); padding: 28px; border: 1px solid var(--line); min-width: 0; } .cn-category-features>div>span { color: var(--ax-brand); font: var(--ax-font-14) monospace; } .cn-category-features h3 { font-size: var(--ax-font-22); font-weight: 500; line-height: 1.6; margin: 22px 0 14px; } .cn-category-features p { font-size: var(--ax-font-14); color: var(--muted); line-height: 2; margin: 0; } .cn-category-checks { margin: 26px 0; } .cn-category-checks>div { border-top: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 18px; } .cn-category-checks dt { color: var(--ink); font-weight: 500; } .cn-category-checks dd { margin: 0; } .cn-category-introduction .cn-directory-grid { margin-top: 30px; grid-template-columns: repeat(3,minmax(0,1fr)); } .cn-category-introduction .cn-directory-card { min-width: 0; } @media(max-width:1024px) { .cn-category-hero { gap: 28px; } .cn-category-photo { padding: 20px; } .cn-category-features { gap: 14px; } .cn-category-features>div { padding: 22px; } .cn-category-introduction .cn-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:640px) { .cn-category-hero { grid-template-columns: 1fr; padding: 32px 0; } .cn-category-summary br { display: none; } .cn-category-copy h1 { margin: 20px 0; } .cn-category-photo img { max-height: 300px; } .cn-category-overview, .cn-category-features { grid-template-columns: 1fr; gap: 22px; } .cn-category-section { padding: 38px 0; scroll-margin-top: 100px; } .cn-category-section h2 { margin: 12px 0 22px; } .cn-category-overview h2 br { display: none; } .cn-category-sections { gap: 4px 28px; padding: 12px 0; } .cn-category-checks>div { grid-template-columns: 1fr; gap: 6px; } .cn-category-introduction .cn-directory-grid { grid-template-columns: 1fr; } .cn-category-introduction .cn-results-heading { align-items: flex-start; gap: 16px; } .cn-category-introduction .cn-results-heading>span { white-space: nowrap; } } @media(max-width:1024px) { .cn-industrial-design .cn-reference-header nav.open { background: var(--ax-gray-5); color: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header nav>a, .cn-industrial-design .cn-reference-header .cn-nav-group>summary { border-color: var(--ax-brand); } .cn-industrial-design .cn-ref-hero-grid { min-height: 580px; } .cn-industrial-design .cn-ref-hero h1 { font-size: var(--ax-font-36); } .cn-industrial-design .cn-ref-hero .cn-ref-intro { font-size: var(--ax-font-14); } .cn-industrial-design .cn-reference-header .cn-nav-links .cn-nav-task-card { background: var(--ax-brand); } } @media(max-width:640px) { .cn-industrial-design .cn-ref-hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; } .cn-industrial-design .cn-ref-hero-copy { padding: 42px 0 8px; } .cn-industrial-design .cn-ref-hero h1 { font-size: var(--ax-font-36); line-height: 1.5; font-weight: 500; } .cn-industrial-design .cn-ref-hero .cn-ref-intro { font-size: var(--ax-font-14); } .cn-industrial-design .cn-ref-hero .cn-ref-caption { font-size: var(--ax-font-12); padding-top: 16px; margin-top: 28px; } .cn-industrial-design .cn-ref-hero-photo { max-width: 400px; aspect-ratio: 1; margin-top: 10px; margin-bottom: 20px; } .cn-industrial-design .cn-ref-hero-photo>img { max-height: none; } .cn-industrial-design .cn-ref-hero-inset { width: 75px; bottom: 30px; right: 0; } .cn-industrial-design .cn-ref-photo-tag { font-size: var(--ax-font-12); bottom: 0; } .cn-industrial-design .cn-ref-hero:after { background-size: 48px 48px,48px 48px,100% 100%; mask-image: linear-gradient(color-mix(in srgb, var(--ax-gray-5) 13.33%, transparent),var(--ax-gray-5)); } } @media(prefers-reduced-motion:reduce) { .cn-industrial-design .cn-orbit:after { animation: none; } .cn-industrial-design .button { transition: none; } } .cn-industrial-design .cn-reference-home .cn-ref-hero .cn-kicker { color: var(--hero-label); } .cn-industrial-design .cn-reference-home .cn-ref-hero .cn-kicker:before { background: var(--hero-dot); box-shadow: 0 0 12px var(--hero-dot-glow); } .cn-industrial-design .button-dark { background: var(--ax-brand); color: var(--ax-gray-0); } .cn-industrial-design .button-dark:hover { background: var(--ax-brand); } .cn-industrial-design .cn-tool-flow, .cn-industrial-design .cn-page-hero { border-color: var(--ax-gray-1); } .cn-industrial-design .cn-route-card { border-color: var(--ax-gray-1); background: var(--ax-gray-0); } .cn-industrial-design .cn-application-brief { background: var(--ax-gray-1); border-color: var(--ax-gray-1); } .cn-industrial-design .cn-application-brief p, .cn-industrial-design .cn-application-brief li { color: var(--ax-gray-4); } .cn-industrial-design .cn-bottom-cta { background: var(--ax-gray-1); border-color: var(--ax-gray-1); } .cn-industrial-design .cn-interior .cn-topic-nav a[aria-current], .cn-industrial-design .cn-interior .cn-topic-nav a:hover { background: var(--ax-gray-1); color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation>.cn-nav-group>summary[aria-current], .cn-industrial-design .cn-reference-header #navigation>a[aria-current] { color: var(--ax-gray-2); border-bottom-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation>.cn-nav-group>summary[aria-current]>a { color: inherit; } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel { background: var(--ax-gray-1); color: var(--ax-brand); border-color: var(--ax-gray-2); box-shadow: 0 24px 48px color-mix(in srgb, var(--ax-gray-5) 14.12%, transparent); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel :is(.cn-mega-top,.cn-mega-note,.cn-mega-resources) { border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel :is(.cn-mega-top small,.cn-mega-top>a,.cn-mega-series-heading small,.cn-mega-note,.cn-mega-resources>small,.cn-mega-series-grid small,.cn-mega-image-note) { color: var(--ax-gray-4); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-category { background: transparent; color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-category:is(:hover,:focus-within) { background: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-category.is-selected { background: var(--ax-gray-1); color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-category-toggle { background: transparent; color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-category.is-selected .cn-mega-category-toggle { background: var(--ax-gray-2); color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-series-grid>a { background: var(--ax-gray-0); color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-series-grid>a:is(:hover,:focus-visible) { background: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel .cn-mega-series-grid .cn-mega-picture { background: var(--ax-gray-1); } .cn-industrial-design .cn-reference-header #navigation #cn-product-panel :is(.cn-mega-series-heading>a,.cn-mega-resources a) { color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown { background: var(--ax-gray-1); color: var(--ax-brand); border-color: var(--ax-gray-2); box-shadow: 0 24px 48px color-mix(in srgb, var(--ax-gray-5) 14.12%, transparent); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown .cn-nav-task-card { background: var(--ax-gray-0); color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown .cn-nav-task-card:is(:hover,:focus-visible) { background: var(--ax-gray-1); border-color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown :is(.cn-nav-panel-heading>small,.cn-nav-card-index,.cn-nav-task-card small,.cn-nav-task-card>span:last-child) { color: var(--ax-gray-4); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown .cn-nav-panel-links { border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation .cn-nav-dropdown .cn-nav-panel-links a { color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation :is(.cn-nav-dropdown,#cn-product-panel) a:focus-visible { outline-color: var(--ax-brand); } @media(max-width:1024px) { .cn-industrial-design .cn-reference-header #navigation.open { background: var(--ax-gray-1); color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation.open>a, .cn-industrial-design .cn-reference-header #navigation.open>.cn-nav-group>summary { color: var(--ax-brand); border-color: var(--ax-gray-2); } .cn-industrial-design .cn-reference-header #navigation.open>.cn-nav-group[open]>summary, .cn-industrial-design .cn-reference-header #navigation.open>.cn-nav-group>summary[aria-current], .cn-industrial-design .cn-reference-header #navigation.open>a[aria-current] { color: var(--ax-brand); } .cn-industrial-design .cn-reference-header #navigation.open>.cn-nav-group>summary>span { color: var(--ax-gray-4); } .cn-industrial-design .cn-reference-header #navigation.open .cn-nav-dropdown { box-shadow: none; } } .cn-back-banner { position: relative; isolation: isolate; display: flex; gap: 30px; align-items: center; padding: 42px; margin: 24px auto; border: 1px solid var(--ax-gray-2); background: var(--ax-gray-1); color: var(--ax-brand); overflow: hidden; } .cn-back-banner-copy { position: relative; z-index: 1; flex: 1; } .cn-back-banner-copy h2 { font-size: var(--ax-font-36); margin: 14px 0; } .cn-back-banner-copy p { line-height: 1.9; } .cn-back-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; z-index: -1; } .cn-back-banner-product { max-width: 23%; height: 230px; object-fit: contain; } .cn-home-banner-bg { position: absolute; inset: 0; opacity: .12; pointer-events: none; } .cn-home-banner-bg img { width: 100%; height: 100%; object-fit: cover; } .cn-profile-photos { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 20px; margin: 25px 0; } .cn-profile-photos img { width: 100%; height: 260px; object-fit: contain; } .cn-profile-video { width: 100%; aspect-ratio: 16/9; border: 0; max-height: 560px; margin: 20px 0; } .cn-back-culture { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 24px; padding-top: 35px; padding-bottom: 35px; } .cn-back-culture p { line-height: 1.9; } .cn-profile-photos figcaption { font-size: var(--ax-font-14); line-height: 1.7; margin-top: 8px; } @media(max-width:640px) { .cn-back-banner { display: block; padding: 24px; } .cn-back-banner-product { max-width: 45%; height: 150px; display: inline-block; } .cn-profile-photos img { height: 220px; } } .cn-banner-copy-only { grid-template-columns: 1fr!important; } :where(a,button,summary,select,input,textarea,[tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); } .cn-card, .cn-directory-card, .axcn-product-grid article, .cn-resource-grid article, .cn-ref-family, .cn-ref-resource-grid>a, .cn-ref-knowledge-grid>a { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); transition: border-color .2s,box-shadow .2s,transform .2s; color: inherit; text-decoration: none; } .cn-card:hover, .cn-card:focus-within, .cn-directory-card:hover, .axcn-product-grid article:hover, .axcn-product-grid article:focus-within, .cn-resource-grid article:hover, .cn-ref-family:hover, .cn-ref-resource-grid>a:hover, .cn-ref-knowledge-grid>a:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); } .cn-ref-knowledge-grid>a, .cn-ref-resource-grid>a, .cn-card>a { padding: var(--card-pad); } .cn-ref-family { padding: var(--space-4); } .cn-ref-family .cn-ref-family-photo { border: 0; border-radius: var(--radius); } .cn-ref-knowledge-grid>a { display: block; } .cn-card>a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; color: inherit; text-decoration: none; } .cn-card-kicker { font: 500 var(--ax-font-12)/1.4 var(--mono,monospace); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .cn-card h3 { font-size: var(--fs-lg); font-weight: 500; line-height: var(--lh-tight); margin: 0; letter-spacing: normal; } .cn-card p { font-size: var(--ax-font-14); line-height: var(--lh-body); color: var(--muted); margin: 0; } .cn-card .cn-card-action { margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-sm); color: var(--accent); } .cn-rel-nav { gap: 22px; } .cn-rel-nav sup { font: 500 var(--ax-font-12)/1 var(--mono,monospace); color: var(--accent); margin-left: 3px; vertical-align: top; } .cn-rel-section { scroll-margin-top: 96px; } .cn-rel-grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); } .cn-rel-grid>li { margin: 0; } .cn-faq-list { margin-top: var(--space-5); border-top: 1px solid var(--line); } .cn-faq-item { border-bottom: 1px solid var(--line); } .cn-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) 0; font-size: var(--fs-md); font-weight: 500; line-height: 1.6; } .cn-faq-item summary::-webkit-details-marker { display: none; } .cn-faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 400 var(--ax-font-16)/1 var(--mono,monospace); color: var(--accent); transition: transform .2s; } .cn-faq-item[open] summary::after { transform: rotate(45deg); } .cn-faq-answer { padding: 0 var(--space-6) var(--space-5) 0; color: var(--muted); font-size: var(--ax-font-14); line-height: var(--lh-body); } .cn-faq-answer p { margin: 0 0 var(--space-3); } .cn-rel-gap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1px dashed var(--ax-gray-3); border-radius: var(--radius); background: var(--ax-gray-1); font-size: var(--fs-sm); } .cn-rel-gap strong { font-weight: 500; color: var(--ink); } .cn-rel-gap span { color: var(--muted); } .cn-rel-gap a { color: var(--accent); font-weight: 500; } .cn-product-shell .product-anchor { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; justify-content: flex-start; gap: 2px; flex-wrap: nowrap; margin: 0; padding: 0; border: 0; background: var(--ax-gray-0); box-shadow: 0 0 0 100vmax var(--ax-gray-0),0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px); overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: var(--ax-font-14); font-weight: 600; letter-spacing: .01em; -webkit-backdrop-filter: none; backdrop-filter: none; } .cn-product-shell .product-anchor::-webkit-scrollbar { display: none; } .cn-product-shell .product-anchor a { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 56px; padding: 0 14px; color: var(--ax-gray-4); transition: color .15s; } .cn-product-shell .product-anchor a:first-child { padding-left: 0; } .cn-product-shell .product-anchor a:hover { color: var(--accent); } .cn-product-shell .product-anchor a.is-active { color: var(--accent); } .cn-product-shell .product-anchor a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--accent); } .cn-product-shell .product-anchor a:first-child.is-active::after { left: 0; } .cn-product-shell .product-anchor sup { font: 500 var(--ax-font-12)/1 var(--mono,monospace); margin-left: 3px; vertical-align: top; } .cn-product-shell .product-anchor .cn-anchor-cta { margin-left: auto; align-self: center; min-height: 40px; padding: 0 20px; background: var(--accent); color: var(--ax-gray-0); border-radius: var(--radius); font-weight: 600; transition: background .15s; } .cn-product-shell .product-anchor .cn-anchor-cta:hover { background: var(--ax-brand); color: var(--ax-gray-0); } .cn-product-shell .product-anchor .cn-anchor-cta::after { display: none; } .admin-bar .cn-product-shell .product-anchor { top: 32px; } @media(max-width:640px) { .admin-bar .cn-product-shell .product-anchor { top: 46px; } } @media(max-width:640px) { html { scroll-padding-top: 76px; } .cn-product-shell .product-anchor { font-size: var(--ax-font-12); } .cn-product-shell .product-anchor a { min-height: 48px; padding: 0 12px; } .cn-product-shell .product-anchor .cn-anchor-cta { display: none; } } .cn-attr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--fs-sm); } .cn-attr-chips span { font: 500 var(--ax-font-12)/1 var(--mono,monospace); letter-spacing: .08em; color: var(--muted); margin-right: var(--space-1); } .cn-attr-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-bg); color: var(--ink); transition: border-color .15s,background .15s,color .15s; } .cn-attr-chips a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .cn-ref-starter { display: grid; gap: var(--space-5); } .cn-ref-starter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .cn-ref-starter legend { padding: 0; margin-bottom: var(--space-3); font-weight: 500; } .cn-ref-motion-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: var(--space-2); } .cn-ref-motion-options label { position: relative; display: block; cursor: pointer; } .cn-ref-motion-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cn-ref-motion-options span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); font-size: var(--fs-md); transition: border-color .15s,background .15s,color .15s; } .cn-ref-motion-options label:hover span { border-color: var(--card-border-hover); } .cn-ref-motion-options input:checked+span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; box-shadow: inset 0 0 0 1px var(--accent); } .cn-ref-motion-options input:focus-visible+span { outline: 2px solid var(--focus); outline-offset: 3px; } .cn-ref-power select, .cn-interior select, .cn-utility-dialog select { appearance: none; -webkit-appearance: none; min-height: 48px; width: 100%; padding: 0 40px 0 var(--space-4); border: 1px solid var(--card-border); border-radius: var(--radius); background-color: var(--card-bg); color: var(--ink); font-size: var(--fs-md); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231761c7' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .cn-ref-power select:hover, .cn-interior select:hover, .cn-utility-dialog select:hover { border-color: var(--card-border-hover); } .axcn-breadcrumb a, .cn-breadcrumb a { position: relative; } .axcn-breadcrumb a::after, .cn-breadcrumb a::after { content: ""; position: absolute; inset: -14px -6px; } .cn-catalog-sidebar details a, .cn-catalog-sidebar .cn-category-overview { display: flex; align-items: center; min-height: 44px; } .cn-card-action, .cn-ref-textlink { position: relative; } .cn-card-action::after, .cn-ref-textlink::after { content: ""; position: absolute; inset: -12px -8px; } h1, h2, h3, .cn-card h3, .cn-ref-resource-grid h3, .cn-ref-knowledge-grid h3 { text-wrap: balance; } .cn-ref-resource-grid h3 span, .cn-card-action, .cn-card h3 span { white-space: nowrap; } @media(max-width:1024px) { .cn-reference-header .menu-button { width: 44px; } .cn-reference-header .menu-button span { height: 2px; width: 22px; } .cn-reference-header #navigation>.cn-nav-group>summary { min-height: 56px; padding-block: 0; align-items: center; justify-content: space-between; } .cn-reference-header #navigation>a { min-height: 56px; display: flex; align-items: center; } body:has(#navigation.open) .cn-utility { display: none; } } @media(max-width:1024px) { .cn-ref-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } } @media(max-width:640px) { .cn-industrial-design .cn-ref-hero-photo>img { -webkit-mask-image: radial-gradient(circle closest-side at 50% 51%,#000 42%,transparent 93%); mask-image: radial-gradient(circle closest-side at 50% 51%,#000 42%,transparent 93%); } .cn-industrial-design .cn-ref-hero-photo:before { width: auto; height: 74%; aspect-ratio: 1/1; } .cn-industrial-design .cn-orbit { inset: auto; top: 50%; left: 50%; width: auto; height: 96%; aspect-ratio: 1/1; translate: -50% -50%; } } @media(max-width:640px) { .cn-reference-header .cn-mega-series-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } body { padding-bottom: 76px; } } @media(pointer:coarse) { .product-anchor a { display: inline-flex; align-items: center; min-height: 44px; } #downloads li { padding: 2px 0; } #downloads li a, .axcn-files li a { display: inline-block; padding: 11px 0; } .cn-rel-gap a { display: inline-flex; align-items: center; min-height: 44px; } } @media(max-width:640px) { :root { --card-pad: 22px; } .cn-faq-answer { padding-right: 0; } .cn-rel-grid { grid-template-columns: 1fr; } } @media(prefers-reduced-motion:reduce) { .cn-card, .cn-directory-card, .axcn-product-grid article, .cn-faq-item summary::after { transition: none; } } @media(max-width:640px) { .cn-header-inner { gap: 8px; } } .cn-shell { width: var(--layout-width); padding: 0; margin-inline: auto; } .cn-shell>.axcn-breadcrumb { padding: 20px 0; border-bottom: 1px solid var(--line); } .cn-page-hero { padding: 32px 0; border-bottom: 1px solid var(--line); } .cn-page-hero>.eyebrow { margin-bottom: 12px; } .cn-page-hero h1 { font-size: var(--ax-font-36); line-height: 1.4; } .cn-editorial-layout { padding: 32px 0 64px; gap: 48px; } .cn-interior:has(.cn-tools-layout) .cn-page-hero { padding: 24px 0; border: 0; } .cn-interior:has(.cn-tools-layout) .cn-page-hero>.eyebrow { display: none; } .cn-interior:has(.cn-tools-layout) .cn-page-hero p:empty { display: none; } .cn-editorial-layout.cn-tools-layout { padding-top: 8px; } .cn-tools-layout .cn-article { line-height: 1.8; } .cn-selection-suite>h2 { margin: 24px 0 16px; font-size: var(--ax-font-22); font-weight: 600; } .cn-selection-suite>p { margin-bottom: 16px; } .cn-tool-nav { display: flex; gap: 4px; padding: 4px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ax-gray-0); overflow: auto; } .cn-selection-suite .cn-tool-nav a { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 16px; border: 0; border-radius: var(--radius); white-space: nowrap; text-decoration: none; color: var(--ink); font-size: var(--ax-font-16); } .cn-selection-suite .cn-tool-nav a:hover { background: var(--ax-gray-1); } .cn-selection-suite .cn-tool-nav a[aria-current="page"] { background: var(--ax-brand); color: var(--ax-gray-0); font-weight: 600; text-decoration: none; } .cn-tool-box { min-width: 0; padding: 24px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ax-gray-0); overflow-wrap: anywhere; } .cn-tool-box>h2 { margin: 0 0 16px; font-size: var(--ax-font-22); } .cn-tool-box>p { margin: 0 0 20px; color: var(--muted); font-size: var(--ax-font-14); } .cn-tool-box dl { font-size: var(--ax-font-14); } .cn-tool-box dl>div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .cn-tool-box dd { margin: 0; } .cn-tool-box fieldset { min-width: 0; margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--line); } .cn-tool-box legend { padding-right: 16px; font-size: var(--ax-font-22); font-weight: 600; } .cn-tool-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .cn-tool-form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: var(--ax-font-14); font-weight: 500; color: var(--ink); } .cn-tool-form :is(input,select,textarea),.cn-ia-search input { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ax-gray-3); border-radius: var(--radius); background-color: var(--ax-gray-0); color: var(--ink); font: inherit; font-size: var(--ax-font-16); line-height: 1.5; } .cn-tool-form select { padding-right: 40px; } .cn-tool-form textarea { min-height: 112px; resize: vertical; } .cn-tool-form :is(input,select,textarea):focus,.cn-ia-search input:focus { border-color: var(--focus); } .cn-tool-form input[type=checkbox] { min-height: 18px; width: 18px; height: 18px; padding: 0; accent-color: var(--ax-brand); } .cn-tool-actions { margin-top: 4px; } .cn-tool-actions .button,.cn-tool-box>button { min-height: 48px; border-radius: var(--radius); } .cn-article .cn-tool-actions a,.cn-article .cn-ux-pagination a { text-decoration: none; } .cn-ux-card,.cn-ux-group,.cn-ux-filter { border-color: var(--line); border-radius: var(--radius); } .cn-ux-group>summary { background: var(--ax-gray-1); border-radius: var(--radius); } .cn-ux-card h3 { font-family: var(--mono); } .cn-ux-card-actions a:not(.button) { text-underline-offset: 4px; } .cn-ux-rfq { max-width: 960px; } .cn-ux-rfq details { border-radius: var(--radius); } .cn-header-search { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--ax-gray-3); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; font: inherit; font-size: var(--ax-font-14); } .cn-header-search:hover { border-color: var(--ax-brand); background: var(--ax-gray-1); } #cn-model-search { width: min(640px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ax-gray-0); color: var(--ink); overflow: auto; } #cn-model-search::backdrop { background: color-mix(in srgb,var(--ax-gray-5) 65%,transparent); } #cn-model-search [data-cn-search-close] { float: right; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); } #cn-model-search h2 { margin: 0 0 24px; padding-top: 6px; font-size: var(--ax-font-22); } #cn-model-search p { margin: 16px 0 0; color: var(--muted); font-size: var(--ax-font-14); } .cn-ia-search { display: grid; gap: 12px; clear: both; } .cn-ia-search label { font-size: var(--ax-font-14); } .cn-ia-search button { justify-content: center; min-height: 48px; border-radius: var(--radius); } .cn-pd-doc:target { outline: 2px solid var(--ax-brand); outline-offset: 4px; scroll-margin-top: 140px; } .cn-config-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; } .cn-config-actions :is(a,button) { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: var(--ax-font-14); } .cn-config-actions button { cursor: pointer; } .cn-industrial-design .cn-ref-hero h1 span { color: var(--hero-accent); } .cn-industrial-design .cn-reference-header #navigation>.cn-nav-group>summary[aria-current],.cn-industrial-design .cn-reference-header #navigation>a[aria-current] { color: var(--ax-brand); border-bottom-color: var(--ax-brand); } @media(max-width:1024px) { .cn-header-inner { gap: 12px; } .cn-editorial-layout { gap: 32px; } } @media(max-width:640px) { .cn-page-hero { padding: 24px 0; } .cn-page-hero h1 { font-size: var(--ax-font-28); } .cn-editorial-layout { padding: 24px 0 40px; } .cn-selection-suite>h2 { margin-top: 20px; } .cn-tool-nav { gap: 2px; margin-bottom: 20px; } .cn-selection-suite .cn-tool-nav a { padding: 8px; font-size: var(--ax-font-14); min-height: 44px; } .cn-tool-box { padding: 18px; } .cn-tool-form { grid-template-columns: 1fr; gap: 16px; } .cn-tool-box dl>div { grid-template-columns: 1fr; gap: 4px; } .cn-header-inner { gap: 8px; } .cn-header-search { padding: 8px; font-size: var(--ax-font-12); } #cn-model-search { padding: 20px; } .cn-config-actions { gap: 8px; } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } } .cn-industrial-design .cn-topline{background:var(--ax-gray-0);color:var(--ax-gray-4);border-bottom-color:var(--ax-gray-1)} .cn-industrial-design .header.cn-reference-header{background:var(--ax-gray-0);color:var(--ax-brand);border-bottom-color:var(--ax-gray-1)} .cn-industrial-design .cn-reference-header #navigation>details>summary, .cn-industrial-design .cn-reference-header #navigation>details>summary>a, .cn-industrial-design .cn-reference-header #navigation>a{color:var(--ax-brand)} .cn-industrial-design .cn-reference-header #navigation>details>summary:hover, .cn-industrial-design .cn-reference-header #navigation>details>summary:hover>a, .cn-industrial-design .cn-reference-header #navigation>details[open]>summary, .cn-industrial-design .cn-reference-header #navigation>details[open]>summary>a, .cn-industrial-design .cn-reference-header #navigation>details>summary[aria-current]>a, .cn-industrial-design .cn-reference-header #navigation>a:hover{color:var(--ax-brand)} .cn-industrial-design .cn-reference-header .cn-nav-group>summary span{color:var(--ax-gray-4)} .cn-industrial-design .cn-reference-header .menu-button{color:var(--ax-brand)} .cn-industrial-design .cn-reference-header .menu-button span{background:var(--ax-brand)} @media(max-width:1024px){ .cn-industrial-design .cn-reference-header nav.open{background:var(--ax-gray-0);color:var(--ax-brand);border-color:var(--ax-gray-1)} .cn-industrial-design .cn-reference-header nav>a,.cn-industrial-design .cn-reference-header .cn-nav-group>summary{border-color:var(--ax-gray-1)} } .cn-card-content .cn-card-model{font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif} .cn-industrial-design .cn-topline{font-size:var(--ax-font-14);line-height:1.6} .cn-reference-header #navigation>details>summary,.cn-reference-header #navigation>a{font-size:var(--ax-font-16)} .cn-industrial-design .cn-reference-header .header-cta{font-size:var(--ax-font-14)} .cn-industrial-design .axcn-breadcrumb{font-size:var(--ax-font-14);line-height:1.7} .cn-industrial-design .eyebrow,.cn-industrial-design .cn-side-title small{font-size:var(--ax-font-12);line-height:1.7} .cn-industrial-design .cn-path{font-size:var(--ax-font-14)} .cn-industrial-design #cn-directory-tree a,.cn-industrial-design .cn-side-help{font-size:var(--ax-font-14);line-height:1.7} .cn-industrial-design .cn-results-heading>span,.cn-industrial-design .cn-search-form label{font-size:var(--ax-font-14);line-height:1.6} .cn-industrial-design .cn-card-kind{font-size:var(--ax-font-16);line-height:1.75} .cn-industrial-design .cn-card-specs li{font-size:var(--ax-font-14);line-height:1.65} .cn-industrial-design .cn-card-action{font-size:var(--ax-font-14);line-height:1.6} .cn-industrial-design .cn-reference-header .cn-nav-task-card small,.cn-industrial-design .cn-reference-header .cn-mega-series-grid small{font-size:var(--ax-font-14);line-height:1.65} .cn-industrial-design .cn-ref-footer-brand p,.cn-industrial-design .cn-ref-footer-grid nav a{font-size:var(--ax-font-14);line-height:1.8} .cn-industrial-design .cn-ref-footer-bottom{font-size:var(--ax-font-14);line-height:1.6} .cn-industrial-design .cn-utility button{font-size:var(--ax-font-14)} .cn-industrial-design .cn-reference-home .cn-ref-family p, .cn-industrial-design .cn-reference-home .cn-ref-motion-result p:not(.cn-ref-engineering-note), .cn-industrial-design .cn-reference-home .cn-ref-motion legend{font-size:var(--ax-font-14);line-height:1.75} .cn-industrial-design .cn-reference-home small, .cn-industrial-design .cn-reference-home .cn-kicker, .cn-industrial-design .cn-reference-home .cn-ref-photo-tag, .cn-industrial-design .cn-reference-home .cn-ref-photo-tag span, .cn-industrial-design .cn-reference-home .cn-ref-hero-inset span, .cn-industrial-design .cn-reference-home .cn-ref-engineering-note{font-size:var(--ax-font-12);line-height:1.7} .cn-industrial-design .cn-reference-home .cn-ref-family small, .cn-industrial-design .cn-reference-home .cn-ref-knowledge-grid small, .cn-industrial-design .cn-reference-home .cn-ref-motion-result small, .cn-industrial-design .cn-reference-home .cn-ref-engineering-note{color:var(--ax-gray-4)} .cn-industrial-design .cn-reference-home .cn-ref-caption, .cn-industrial-design .cn-reference-home .cn-ref-resource-grid>a>small, .cn-industrial-design .cn-reference-home .cn-ref-motion .cn-kicker, .cn-industrial-design .cn-reference-home .cn-ref-workplace .cn-kicker, .cn-industrial-design .cn-reference-home .cn-ref-final .cn-kicker{display:none} .cn-industrial-design { --cn-action-bg:var(--ax-brand); --cn-action-hover:var(--ax-brand); } .cn-industrial-design .header-cta, .cn-industrial-design .button.button-dark, .cn-industrial-design .cn-ref-final .button { background:var(--cn-action-bg)!important; color:var(--ax-gray-0)!important; border:1px solid var(--cn-action-bg)!important; box-sizing:border-box; height:48px!important; min-height:48px!important; padding:0 24px!important; border-radius:3px!important; display:inline-flex; align-items:center; justify-content:center; line-height:1.4; text-align:center; text-decoration:none; transition:background-color .18s ease,border-color .18s ease; } .cn-industrial-design .header-cta:hover, .cn-industrial-design .button.button-dark:hover, .cn-industrial-design .cn-ref-final .button:hover { background:var(--cn-action-hover)!important; border-color:var(--cn-action-hover)!important; color:var(--ax-gray-0)!important; } .cn-industrial-design .header-cta:focus-visible, .cn-industrial-design .button.button-dark:focus-visible, .cn-industrial-design .cn-ref-final .button:focus-visible { outline:2px solid var(--cn-action-bg); outline-offset:3px; } .cn-industrial-design.home #main { --cn-home-section-half-gap:clamp(48px,4vw,60px); } .cn-industrial-design.home #main > .cn-ref-section, .cn-industrial-design.home #main > .cn-ref-motion, .cn-industrial-design.home #main > .cn-ref-workplace, .cn-industrial-design.home #main > .cn-ref-final { padding-top:var(--cn-home-section-half-gap); padding-bottom:var(--cn-home-section-half-gap); } .cn-industrial-design.home #main > #products { padding-top:calc(2 * var(--cn-home-section-half-gap)); } .cn-industrial-design.home .cn-ref-workplace-photo { height:auto; min-height:0; } .cn-industrial-design.home .cn-ref-workplace-photo img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:14 / 9; object-fit:cover; } @media(max-width:640px) { .cn-industrial-design.home .cn-ref-workplace { row-gap:32px; } .cn-industrial-design.home .cn-ref-workplace-photo img { aspect-ratio:4 / 3; } } .cn-industrial-design.home .cn-ref-resource-grid > a { position:relative; display:block; padding:28px 28px 64px; cursor:pointer; text-decoration:none; border:1px solid var(--ax-gray-1); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .cn-industrial-design.home .cn-ref-resource-grid > a::before { content:""; display:block; width:32px; height:32px; margin-bottom:20px; background-repeat:no-repeat; background-position:center; background-size:contain; } .cn-industrial-design.home .cn-ref-resource-grid > a:nth-child(1)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231761c7%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h7m4%200h5M4%2017h3m4%200h9%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%227%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .cn-industrial-design.home .cn-ref-resource-grid > a:nth-child(2)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231761c7%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M6%207h12v4a6%206%200%200%201-12%200V7Zm6%2010v4%22%2F%3E%3C%2Fsvg%3E"); } .cn-industrial-design.home .cn-ref-resource-grid > a:nth-child(3)::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231761c7%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H5v18h14V8l-5-5Zm0%200v5h5M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); } .cn-industrial-design.home .cn-ref-resource-grid > a::after { content:"→"; position:absolute; right:28px; bottom:22px; color:var(--ax-brand); font-family:Arial,sans-serif; font-size:var(--ax-font-28); line-height:1; } .cn-industrial-design.home .cn-ref-resource-grid > a > p { margin-bottom:0; } .cn-industrial-design.home .cn-ref-resource-grid > a:focus-visible { outline:2px solid var(--ax-brand); outline-offset:4px; border-color:var(--ax-brand); } @media(hover:hover) and (pointer:fine) { .cn-industrial-design.home .cn-ref-resource-grid > a:hover { transform:translateY(-4px); border-color:var(--ax-brand); box-shadow:0 8px 22px color-mix(in srgb, var(--ax-brand) 7.0%, transparent); } } @media(prefers-reduced-motion:reduce) { .cn-industrial-design.home .cn-ref-resource-grid > a { transition:none; } .cn-industrial-design.home .cn-ref-resource-grid > a:hover { transform:none; } } .cn-industrial-design.home .cn-ref-motion-grid { max-width:1100px; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:24px; align-items:start; } .cn-industrial-design.home .cn-ref-motion-grid > div:first-child { display:contents; } .cn-industrial-design.home .cn-ref-motion-grid > div:first-child > h2, .cn-industrial-design.home .cn-ref-motion-grid > div:first-child > .cn-ref-intro { grid-column:1 / -1; margin:0; } .cn-industrial-design.home .cn-ref-motion-grid > div:first-child > .cn-ref-intro { margin-top:-12px; margin-bottom:8px; } .cn-industrial-design.home .cn-ref-starter { min-width:0; gap:20px; } .cn-industrial-design.home .cn-ref-starter fieldset { margin:0; } .cn-industrial-design.home .cn-ref-motion-result { display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; align-items:start; padding:24px; margin:0; border:1px solid var(--ax-gray-1); border-radius:3px; background:var(--ax-gray-0); transition:border-color .18s ease,box-shadow .18s ease; } .cn-industrial-design.home .cn-ref-motion-result > img { width:96px; height:96px; max-width:100%; object-fit:contain; margin:0; } .cn-industrial-design.home .cn-ref-motion-result > div { min-width:0; } .cn-industrial-design.home .cn-ref-motion-grid:has(.cn-ref-starter:focus-within) .cn-ref-motion-result { border-color:var(--ax-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--ax-brand) 8.0%, transparent); } @media(max-width:640px) { .cn-industrial-design.home .cn-ref-motion-grid { grid-template-columns:minmax(0,1fr); gap:20px; } .cn-industrial-design.home .cn-ref-motion-result { grid-template-columns:72px minmax(0,1fr); gap:16px; padding:20px; } .cn-industrial-design.home .cn-ref-motion-result > img { width:72px; height:72px; } } @media(prefers-reduced-motion:reduce) { .cn-industrial-design.home .cn-ref-motion-result { transition:none; } } @media(max-width:640px){ .cn-industrial-design .cn-header-inner{gap:8px;min-width:0} .cn-industrial-design .cn-reference-header .brand{min-width:0;flex-shrink:1} .cn-industrial-design .cn-reference-header .brand img{width:clamp(100px,27vw,140px);max-width:100%;height:auto} .cn-industrial-design .cn-reference-header .header-cta{padding-inline:10px!important;font-size:var(--ax-font-12);white-space:nowrap} .cn-industrial-design .cn-reference-header .menu-button{width:44px;flex:0 0 44px;padding-inline:10px} } [data-cn-api-tool][aria-busy="true"]{opacity:.65;cursor:progress} #ux-results{scroll-margin-top:110px} }  @layer utilities { .cn-industrial-design .cn-reference-header{background:var(--ax-nav-bg)!important;color:var(--ax-nav-text);border-bottom:0;box-shadow:none} .cn-industrial-design .cn-reference-header #navigation>a, .cn-industrial-design .cn-reference-header #navigation>details>summary, .cn-industrial-design .cn-reference-header #navigation>details>summary>a{color:var(--ax-nav-text)!important} .cn-industrial-design .cn-reference-header #navigation>a[aria-current], .cn-industrial-design .cn-reference-header #navigation>a:hover, .cn-industrial-design .cn-reference-header #navigation>details>summary>a:hover, .cn-industrial-design .cn-reference-header #navigation>details>summary[aria-current]>a{color:var(--ax-nav-accent)!important} .cn-industrial-design .cn-reference-header .cn-nav-group>summary span{color:var(--ax-nav-accent)} .cn-industrial-design .cn-reference-header .cn-header-search{color:var(--ax-nav-text);background:transparent;border-color:color-mix(in srgb,var(--ax-nav-text) 22%,transparent)} .cn-industrial-design .cn-reference-header .menu-button{color:var(--ax-nav-text)} .cn-industrial-design .cn-reference-header .menu-button span{background:var(--ax-nav-text)} .cn-industrial-design .cn-reference-header nav.open{background:var(--ax-nav-bg);color:var(--ax-nav-text)} .cn-industrial-design .cn-reference-header .header-cta{box-shadow:none;border:1px solid color-mix(in srgb,var(--ax-nav-text) 24%,transparent)} .cn-industrial-design .cn-reference-header :is(a,button,summary):focus-visible{outline:2px solid var(--ax-nav-accent);outline-offset:4px} .cn-industrial-design :is(.cn-ref-family,.product-card,.cn-catalog-card,.cn-nav-task-card,.cn-ref-resource-grid>a,.cn-ref-knowledge-grid>a){border-color:transparent;border-radius:var(--ax-card-radius);box-shadow:var(--ax-soft-shadow)} .cn-industrial-design :is(.cn-ref-family-photo,.product-image){border-radius:var(--ax-card-radius);overflow:hidden} .cn-industrial-design :is(.cn-ref-resource-grid,.cn-ref-knowledge-grid){gap:24px;background:transparent;border:0} .cn-industrial-design :is(.cn-ref-resource-grid>a,.cn-ref-knowledge-grid>a){background:var(--surface-card);padding:28px;border:0} .cn-industrial-design .cn-ref-family{background:var(--surface-card);padding:16px} .cn-industrial-design :is(.cn-ref-faq,.cn-mega-panel,.cn-nav-dropdown){border-color:var(--ax-soft-line);border-radius:12px;box-shadow:var(--ax-soft-shadow)} .cn-industrial-design .cn-ref-faq{background:var(--surface-page);border:0;box-shadow:none;padding:28px} @media(hover:hover){ .cn-industrial-design :is(.cn-ref-family,.product-card,.cn-catalog-card,.cn-nav-task-card,.cn-ref-resource-grid>a,.cn-ref-knowledge-grid>a):hover{box-shadow:var(--ax-soft-shadow-hover);border-color:transparent} } .cn-industrial-design .ax-motion{background:var(--ax-motion-bg);color:var(--ax-nav-text);padding:72px 0} .ax-motion .ax-motion-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;margin-bottom:44px} .cn-industrial-design .ax-motion h2{font-size:var(--ax-font-48);font-weight:400;line-height:1.25;letter-spacing:-.035em;color:var(--ax-nav-text);margin:0} .ax-motion-heading>p{color:var(--ax-motion-muted);font-size:var(--ax-font-18);line-height:1.8;max-width:440px;justify-self:end} .ax-motion-layout{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:32px;align-items:start} .ax-motion-form{display:grid;gap:28px;min-width:0} .ax-motion-form fieldset{padding:0;margin:0;border:0;min-width:0} .ax-motion-form legend{margin-bottom:16px;color:var(--ax-motion-muted);font-size:var(--ax-font-14)} .ax-drive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .ax-power-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .ax-motion-choice{position:relative;display:block;cursor:pointer} .ax-motion-choice input{position:absolute;opacity:0;width:1px;height:1px} .ax-motion-choice .ax-choice-content{position:relative;display:flex;gap:16px;align-items:center;min-height:130px;padding:22px 18px;border:1px solid color-mix(in srgb,var(--ax-motion-muted) 22%,transparent);border-radius:8px;background:var(--ax-motion-choice);transition:background .18s,border-color .18s} .ax-choice-content svg{width:48px;height:48px;flex:0 0 48px;color:var(--ax-motion-muted)} .ax-choice-content strong{display:block;font-size:var(--ax-font-18);font-weight:600;color:var(--ax-nav-text);line-height:1.5} .ax-choice-content small{display:block;margin-top:6px;font-size:var(--ax-font-14);color:var(--ax-motion-muted);line-height:1.6} .ax-motion-choice input:checked+.ax-choice-content{background:var(--ax-motion-selected);border-color:var(--ax-motion-selected-line)} .ax-drive-grid input:checked+.ax-choice-content::after{content:'✓';position:absolute;top:8px;right:12px;color:var(--ax-motion-selected-line)} .ax-motion-choice input:focus-visible+.ax-choice-content{outline:2px solid var(--ax-nav-accent);outline-offset:4px} .ax-power-grid .ax-choice-content{min-height:98px;justify-content:center;text-align:center;padding:18px 8px} .ax-motion .ax-motion-help{font-size:var(--ax-font-14);color:var(--ax-motion-muted);line-height:1.8;margin-top:-12px} .cn-industrial-design .ax-motion-result{background:var(--ax-motion-paper);color:var(--ax-ink);padding:32px;border-radius:10px;box-shadow:var(--ax-soft-shadow);min-width:0} .ax-result-top{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;align-items:center} .ax-result-top img{width:128px;height:128px;object-fit:contain;border-radius:8px} .ax-motion-result .ax-result-eyebrow{font-size:var(--ax-font-12);color:var(--text-secondary);margin-bottom:12px} .cn-industrial-design .ax-motion-result h3{font-size:var(--ax-font-36);font-weight:500;color:var(--ax-ink);margin:0 0 10px;font-family:var(--mono)} .ax-motion-result p{color:var(--text-secondary);line-height:1.75;font-size:var(--ax-font-14)} #ax-motion-description{margin-top:12px} .ax-motion-result .ax-result-frame{color:var(--ax-ink);font-family:var(--mono);padding-top:12px;margin-top:16px;border-top:1px solid var(--ax-soft-line)} .ax-result-specs{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:20px;border-top:1px solid var(--ax-soft-line);padding-top:24px;margin:26px 0 22px} .ax-result-specs dt{font-size:var(--ax-font-14);color:var(--text-secondary);margin-bottom:12px} .ax-result-specs dd{margin:0;font-size:var(--ax-font-18);line-height:1.6;font-variant-numeric:tabular-nums;font-weight:600} .ax-motion-result #ax-motion-status{font-size:var(--ax-font-12);color:var(--ax-brand);margin-top:18px} .ax-result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .ax-motion-result .button{background:var(--ax-brand);color:var(--ax-gray-0);min-height:48px;padding:12px 18px;font-size:var(--ax-font-14);border-radius:8px;box-shadow:none} .ax-motion-result .button-outline{background:var(--ax-gray-0);color:var(--ax-ink);border:1px solid var(--ax-soft-line)} .ax-result-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--ax-soft-line)} .ax-result-links a{font-size:var(--ax-font-14);color:var(--ax-brand)} .ax-motion .ax-motion-footer{font-size:var(--ax-font-14);color:var(--ax-motion-muted);line-height:1.9;margin-top:32px;max-width:1080px} .ax-motion-footer a{color:var(--ax-nav-text);text-decoration:underline;text-underline-offset:4px;margin-left:8px} @media(max-width:1024px){ .ax-motion-layout{grid-template-columns:minmax(0,1fr)} .ax-motion .ax-motion-heading{grid-template-columns:1fr;gap:16px;margin-bottom:32px} .ax-motion-heading>p{justify-self:start;max-width:none} .ax-result-top{grid-template-columns:144px minmax(0,1fr)} } @media(max-width:640px){ .cn-industrial-design .ax-motion{padding:48px 0} .cn-industrial-design .ax-motion h2{font-size:var(--ax-font-28)} .ax-motion-heading>p{font-size:var(--ax-font-16)} .ax-motion-choice .ax-choice-content{min-height:112px;padding:14px 10px;gap:8px} .ax-choice-content svg{width:32px;height:32px;flex-basis:32px} .ax-choice-content strong{font-size:var(--ax-font-16)} .ax-choice-content small{font-size:var(--ax-font-12)} .ax-drive-grid,.ax-power-grid{gap:10px} .ax-power-grid .ax-choice-content{min-height:88px;padding:12px 4px} .cn-industrial-design .ax-motion-result{padding:22px} .ax-result-top{grid-template-columns:88px minmax(0,1fr);gap:16px} .ax-result-top img{width:88px;height:88px} .cn-industrial-design .ax-motion-result h3{font-size:var(--ax-font-28)} .ax-result-specs{grid-template-columns:1fr;gap:16px} .ax-result-specs>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px} .ax-result-specs dt{margin:0} .ax-result-specs dd{font-size:var(--ax-font-16)} .ax-result-actions .button{width:100%;text-align:center;justify-content:center} } @media(prefers-reduced-motion:reduce){.ax-motion-choice .ax-choice-content{transition:none}} } @layer utilities { .cn-industrial-design .cn-reference-header .brand{background:var(--ax-gray-0);padding:8px 12px;border-radius:8px;flex:0 1 auto} .cn-industrial-design .cn-directory-card{border-color:transparent;border-radius:var(--ax-card-radius);box-shadow:var(--ax-soft-shadow);background:var(--surface-card)} .cn-industrial-design .cn-directory-card:hover{border-color:transparent;box-shadow:var(--ax-soft-shadow-hover)} } @layer utilities{.cn-industrial-design .cn-card{border-color:transparent;border-radius:var(--ax-card-radius);box-shadow:var(--ax-soft-shadow)}} @layer utilities { .cn-industrial-design .cn-topline{background:var(--ax-home-topline-bg,var(--ax-ink));color:var(--ax-motion-muted);border:0;box-shadow:none} .cn-industrial-design .cn-reference-header .brand{position:relative;background:transparent} .cn-industrial-design .cn-reference-header .brand::before{content:"";position:absolute;inset:8px 12px;background:var(--ax-nav-text);mask:var(--ax-brand-logo) center/contain no-repeat;-webkit-mask:var(--ax-brand-logo) center/contain no-repeat;pointer-events:none} .cn-industrial-design .cn-reference-header .brand img{opacity:0} @media(forced-colors:active){ .cn-industrial-design .cn-reference-header .brand::before{display:none} .cn-industrial-design .cn-reference-header .brand{background:var(--ax-gray-0)} .cn-industrial-design .cn-reference-header .brand img{opacity:1} } }
@font-face { font-family: "Andantex Heading"; src: url("https://www.andantex.cn/wp-content/themes/andantex-cn/assets/styles/../fonts/andantex-heading-20261023.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @layer utilities { body :is(small,sup,sub) { font-size:var(--ax-font-12); } body :is(h1,h2,h3,h4,h5,h6) { font-family:var(--heading-font);color:var(--heading-color); } :is(.cn-ref-hero,.cn-ref-final,.cn-pd-hero,.cn-error-recovery aside,.cn-side-help) { --heading-color:var(--ax-gray-0); } .cn-ref-final,.cn-pd-hero { background:var(--ax-ink); } .cn-side-title small { display:none; } :is(.axcn-table-scroll,.cn-pd table,.cn-ux-card dl,.cn-pd-spec-grid,.cn-pd-dimensions,.cn-card-specs,.cn-rfq-preview,.cn-tool-models dl) { font-variant-numeric:lining-nums tabular-nums; } :is(.axcn-table-scroll table,.axcn-table-scroll td,.axcn-table-scroll th,.cn-pd table,.cn-pd table td,.cn-pd table th,.cn-spec-cell) { font-size:var(--ax-font-14); } :is(.cn-model-code,.cn-card-model,.cn-model-mark strong,.cn-pd-no-photo strong,input[name=gearbox],input[name=motor],input[name=download_model]) { font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums;font-variant-ligatures:none;letter-spacing:normal; } .cn-model-code a { font-family:inherit; } :is(.cn-unit,.cn-pd table .cn-unit,.axcn-table-scroll .cn-unit) { font-family:var(--sans);font-size:var(--ax-font-12);font-weight:400;color:var(--text-secondary);white-space:nowrap; } .cn-pd .cn-pd-parameters td:not(.cn-unit) { font-size:var(--ax-font-14);white-space:normal; }  :is(.post-type-archive-andantex_product,.tax-andantex_catalog,.tax-andantex_attr) main.cn-interior { max-width:none;width:100%;padding:0 0 64px; } @media(min-width:901px) { :is(.post-type-archive-andantex_product,.tax-andantex_catalog,.tax-andantex_attr) .cn-catalog-layout { grid-template-columns:240px minmax(0,1fr);gap:36px; } } @media(min-width:1400px) { :is(.post-type-archive-andantex_product,.tax-andantex_catalog) .cn-catalog-main .cn-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } }
@layer components { .cn-application-directory { margin:0 0 52px; } .cn-application-directory-heading { margin:0 0 24px; } .cn-application-directory-heading h2,.cn-application-series>h2 { font-size:var(--ax-font-28);font-weight:500;line-height:1.5;margin:0 0 10px; } .cn-application-directory-heading p,.cn-application-series>p { color:var(--ax-gray-4);line-height:1.9;margin:0 0 24px; } .cn-application-scenario-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; } .cn-application-scenario-card { display:flex;flex-direction:column;min-width:0;background:var(--ax-gray-0);border:1px solid var(--ax-gray-1);padding:28px;text-decoration:none;transition:border-color .18s,background-color .18s; } .cn-application-scenario-card h3 { font-size:var(--ax-font-22);line-height:1.6;font-weight:500;margin:0 0 14px;color:var(--ax-brand); } .cn-application-scenario-card p { color:var(--ax-gray-4);font-size:var(--ax-font-16);line-height:1.9;margin:0 0 24px; } .cn-application-scenario-card span { color:var(--ax-brand);font-size:var(--ax-font-14);margin-top:auto; } .cn-application-scenario-card:hover { border-color:var(--ax-gray-3);background:var(--ax-gray-1); } .cn-application-scenario-card:focus-visible { outline:2px solid var(--ax-brand);outline-offset:4px; } .cn-application-back { margin:0 0 22px; } .cn-application-series { margin:42px 0 52px; } .cn-application-series .cn-directory-grid { margin-top:24px; } @media(max-width:1024px) { .cn-application-scenario-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:640px) { .cn-application-scenario-grid { grid-template-columns:1fr; } .cn-application-scenario-card { padding:24px; } .cn-application-directory { margin-bottom:36px; } } }