/* jlt-tokens.css */ /* ========================================================================== jltmed 设计令牌（tokens） 目的：把散落在 30 个 CSS 文件里的字号、颜色、圆角收敛成一套可引用的变量。 本文件只定义变量 + 一处根字号修正，不改动任何既有布局或选择器。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 根字号 本站的 rem 基准由 public.js 的 setRem() 在运行时写成 的行内样式， CSS 只是 JS 未执行时的兜底，因此这里必须与 public.js 保持一致： 桌面端 1rem = 内容宽 / 100，夹在 14px ~ 19.17px 移动端 1rem = 屏宽 / 100 * 4（不受此处影响） 原逻辑没有任何边界：1280 时 1rem = 12.8px、2560 时 25.6px，同一个组件 （如产品列表左侧分类导航）在两台机器上是 13.35px 与 26.7px。 上限 19.17px 就是设计基准（--f16 在 1917px 视口下正好等于 16px）， 所以夹取只影响两端，不改变设计稿本身。 说明：长度值（vw/px）会覆盖用户自己设置的浏览器默认字号（WCAG 1.4.4）。 要恢复用户字号偏好，需要 JS 改成读取用户设置作为基准，属于后续改动。 -------------------------------------------------------------------------- */ html:root { font-size: clamp(14px, 1vw, 19.17px); } html:root { /* -------------------------------------------------------------------------- 3. 颜色 现状：主题自有 CSS 里有 136 个不同的十六进制值，其中 7 个浅蓝底几乎无法分辨 （#f8fbfc / #f3f8fb / #f3f7f8 / #e2e9ed / #e0e8ed / #dce7ee / #dce7ec）， 导致页面之间出现看得出来的色差接缝。这里收敛为 3 个背景 + 1 条分隔线。 -------------------------------------------------------------------------- */ --jlt-blue-900: #005c94; /* 文字用的深蓝 */ --jlt-blue-700: #007bc4; /* 品牌主色，白底对比度 4.54，只做背景/大字号 */ --jlt-blue-500: #2f9ed8; --jlt-blue-050: #eef7fc; --jlt-ink-900: #0d2033; /* 深色区块底 / 页脚 */ --jlt-ink-700: #233b4c; /* 正文标题 */ --jlt-ink-500: #414141; /* 正文 */ --jlt-muted: #607582; /* 次要文字，白底 4.81、浅蓝底 4.3+ */ --jlt-subtle: #607582; /* 原 #7d8da0 白底 3.39、浅蓝底 3.17，AA 不达标，已并入 muted */ --jlt-line: #dce7ee; --jlt-line-soft: #e6e6e6; --jlt-surface-alt: #f8fbfc; --jlt-surface-sunken: #f3f8fb; /* 深色区块（页脚、案例栏、深色横条）专用的一档 */ --jlt-ink-800: #172e43; /* 深底上的卡片/分隔面 */ /* 深底上的文字：浅底用的 muted 放到深底上会读不出来，必须单独一档 */ /* 深底正文 */ --jlt-on-dark-muted: #b9c9d6; /* 深底次要文字 */ --jlt-on-dark-accent: #9dddf9; /* 深底小标题/强调 */ --jlt-green-700: #087d3b; --jlt-green-500: #00a348; /* 仅作背景/图标：白字放在上面只有 3.32，不达标 */ /* 遗留橙，仅维持现状，新样式勿用 */ /* 状态色（表单反馈等，保持语义可辨识） */ --jlt-danger: #a8323a; --jlt-danger-ink: #8c2730; /* Layout roles preserve the approved marketing/readability variants. */ --jlt-brand-accent: #096da1; --jlt-brand-active: #006da5; --jlt-marketing-ink: #153b59; --jlt-marketing-muted: #516d80; --jlt-marketing-line: #d9e5ed; --jlt-container-marketing: 1520px; --jlt-container-content: 1380px; --jlt-gutter-marketing: max(4vw, calc((100vw - var(--jlt-container-marketing)) / 2)); --jlt-gutter-content: clamp(28px, 4vw, 72px); --jlt-gutter-mobile: 24px; /* 语义别名 */ /* -------------------------------------------------------------------------- 4. 字号刻度 现状：31 个不同 font-size，含 8 / 8.5 / 9 / 10 / 11px 共 19 处。 新样式只用下面 8 档，正文与标签不得低于 --jlt-fs-xs（12px）。 -------------------------------------------------------------------------- */ --jlt-fs-xs: 12px; /* -------------------------------------------------------------------------- 5. 圆角（现状 26 种取值） -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 6. 字体栈 Poppins 只覆盖拉丁字母与数字，中文由后面的系统字承担。 衬线栈补了思源宋体 / Noto Serif SC：原写法 Georgia,"Songti SC","STSong",serif 在 Windows 会落到宋体（SimSun），而 PDP 主标题是 clamp(50px,4.6vw,78px)， 宋体在这个尺寸下笔画极细，整页气质会垮。 -------------------------------------------------------------------------- */ --jlt-font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, Arial, sans-serif; } @media (max-width: 750px) { html:root { --jlt-gutter-marketing: var(--jlt-gutter-mobile); } } /* jlt-content-refinements.css */ /* Content legibility refinements. Original Sunshare styles remain the baseline. */ #pc_header .box .logo img.white { filter: brightness(0) invert(1); } .jlt-home .index-banner .mask { background: linear-gradient(90deg, rgba(12, 22, 29, .28), transparent 70%); } .jlt-home .index-banner #thumbs .box { opacity: 1; } .jlt-home .s_about .s_tt p { color: var(--jlt-ink-500); font-size: clamp(16px, 1.15vw, 18px); font-weight: 400; line-height: 1.95; max-width: 1040px; margin-left: auto; margin-right: auto; } .jlt-asset-caption { font-size: 14px !important; font-weight: 400; color: var(--jlt-muted); line-height: 1.8; text-indent: 0; } @media(max-width:750px) { .jlt-home .index-banner .img { background-position: 80% center; } .jlt-home .index-banner .mask { background: linear-gradient(90deg, rgba(12,22,29,.56), rgba(12,22,29,.12)); } .jlt-home .s_about .s_tt p { font-size: 16px; line-height: 1.9; text-align: left; } } /* Shared text and focus states follow the approved orange/grey theme. */ footer .one dd { opacity: 1; color: var(--jlt-muted); font-size: max(13px, var(--f16, 16px)); } footer .one dt { font-size: max(15px, var(--f20, 20px)); } footer .one .lx .tt, footer .one .lx .address { font-size: 13px; line-height: 1.7; } footer .one dd a:hover, footer .one .banquan a:hover { color: var(--themeColor); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--themeColor); outline-offset: 4px; } .jlt-error-page .jlt-error-content { padding: 5rem 1rem 6rem; } .jlt-error-page .jlt-error-code { font: 600 clamp(70px, 8vw, 110px)/1.2 Arial, sans-serif; } .jlt-error-page .jlt-error-content h1 { font-weight: 400; margin: 1rem 0; } .jlt-error-page .jlt-error-actions a { font-size: 16px; } .jlt-error-page .jlt-error-actions a:hover { border-color: var(--themeColor); } @media (max-width:750px) { .jlt-error-page .jlt-error-content { padding: 3.5rem 1rem 4rem; } } /* Keep the original inquiry surface usable at every viewport size. */ #zx_form { width: 100vw; height: 100dvh; padding: 20px; box-sizing: border-box; } #zx_form .tc_box { box-sizing: border-box; width: min(640px, 100%); padding: 44px; } #zx_form .tc_close { top: 12px; right: 12px; } #zx_form .tc_close svg { width: 30px; } #zx_form .tc_nr h2 { font-size: 24px; font-weight: 400; line-height: 1.5; margin-bottom: 24px; } #zx_form .tc_nr form input, #zx_form .tc_nr form textarea { box-sizing: border-box; min-width: 0; font-size: 16px; line-height: 1.5; padding: 12px 16px; } #zx_form .tc_nr form textarea { min-height: 100px; } #zx_form .yzm-fa { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } #zx_form .yzm { display: flex; gap: 12px; align-items: center; min-width: 0; } #zx_form .yzm input { flex: 1; width: 100%; min-width: 0; } #zx_form .yzm img { flex: 0 0 110px; width: 110px; height: 40px; object-fit: contain; cursor: pointer; } #zx_form .tc_nr form button { white-space: nowrap; font-size: 16px; line-height: 1.5; padding: 12px 24px; } #zx_form .tc_nr form button:hover { background: var(--jlt-brand-blue); } @media (max-width:750px) { #zx_form { padding: 16px; } #zx_form .tc_box { max-height: calc(100dvh - 32px); padding: 48px 20px 24px; } #zx_form .tc_nr h2 { font-size: 22px; margin-bottom: 20px; } #zx_form .yzm-fa { grid-template-columns: 1fr; gap: 16px; } #zx_form .tc_nr form button { width: 100%; } } /* Tablet footer keeps the original contact/navigation relationship in three readable columns. */ @media (min-width:751px) and (max-width:1000px) { footer .one .fot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } footer .one .fot-nav dl { min-width: 0; } } /* jlt-list-refinements.css */ /* Content readability refinements within the accepted Sunshare list and article layout. */ .jlt-news-list .n-banner,.jlt-news-detail .n-banner,.jlt-search-page .n-banner{position:relative;} .jlt-list-banner-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);} .jlt-list-banner-title h1,.jlt-list-banner-title h2{font-size:clamp(32px,3.5vw,52px);font-weight:500;line-height:1.3;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25);} .jlt-news-list .news-cont .txt h5,.jlt-search-page .news-cont .txt h5{font-size:clamp(18px,1.45vw,21px);line-height:1.5;} .jlt-news-list .news-cont .txt p,.jlt-search-page .news-cont .txt p{font-size:14px;line-height:1.7;color:var(--jlt-muted);} .jlt-news-list .news-cont .txt .mx,.jlt-search-page .news-cont .txt .mx{font-size:15px;} .jlt-news-list .news-cont .img-db{background:var(--jlt-surface-alt);} .jlt-news-list .news-cont .img-db img{object-fit:contain;} .jlt-search-page .news-cont .img-db{background:var(--jlt-surface-alt);} .jlt-search-page .news-cont .img-db img{object-fit:contain;} .jlt-search-page .jlt-search-summary{font-size:18px;line-height:1.8;margin:0 0 2rem;color:var(--jlt-ink-500);overflow-wrap:anywhere;} .jlt-search-recovery{margin-top:1.5rem;} .jlt-search-recovery[hidden]{display:none;} .jlt-search-recovery>p{font-size:16px;line-height:1.9;color:var(--jlt-muted);} .jlt-search-recovery-links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.5rem;} .jlt-search-recovery-links a{display:inline-flex;align-items:center;gap:.5rem;font-size:16px;line-height:1.7;color:var(--themeColor);} .jlt-search-recovery-links a:hover{text-decoration:underline;text-underline-offset:.25em;} .jlt-news-detail .news-cont .tt p{font-size:14px;line-height:1.7;} .jlt-news-detail .news-cont .ar_article{--f16:clamp(16px,1.22vw,18px);font-size:clamp(16px,1.22vw,18px);font-weight:400;line-height:1.9;color:var(--jlt-ink-500);overflow-wrap:anywhere;} .jlt-news-detail .news-cont .ar_article p,.jlt-news-detail .news-cont .ar_article li{font-size:inherit;line-height:1.9;} .jlt-news-detail .news-cont .fanp,.jlt-news-detail .news-cont .fanp a{font-size:16px;line-height:1.8;} @media(max-width:750px){ .jlt-list-banner-title h1,.jlt-list-banner-title h2{font-size:32px;} .jlt-news-list .news-cont .txt h5,.jlt-search-page .news-cont .txt h5{font-size:17px;} .jlt-search-page .jlt-search-summary,.jlt-search-page .search-empty{font-size:16px;} .jlt-search-recovery-links{gap:1rem 1.5rem;} .jlt-news-detail .news-cont .ar_article{--f16:16px;font-size:16px;} } /* News breadcrumbs and empty states. Category navigation is shared with About. */ .jlt-news-empty{font-size:16px;line-height:1.9;color:var(--jlt-ink-500);} .jlt-news-empty a{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;color:var(--themeColor);} .jlt-news-empty[hidden],.jlt-news-list .page[hidden],.jlt-search-page .page[hidden]{display:none;} .jlt-news-list .page .pagination,.jlt-search-page .page .pagination{flex-wrap:wrap;} @media(max-width:750px){ } /* jlt-case-refinements.css */ /* Hospital imagery occupies the original Sunshare cards; all case content remains CMS editable. */ [data-case-demo-note][hidden] { display: none; } .jlt-case-page .jlt-case-summary { font-size: 14px; font-weight: 400; line-height: 1.8; color: var(--jlt-muted); white-space: normal; margin-top: .7rem; } .jlt-case-page .s_tt h1 { font-size: clamp(28px,2.5vw,40px); font-weight: 400; line-height: 1.5; } .jlt-case-page img[src*="wuhan-tongji-2018"] { object-position: center 30%; } .jlt-case-detail .news-cont .tt .jlt-case-summary { font-size: 16px; line-height: 1.8; color: var(--jlt-muted); margin-top: 1rem; } .jlt-case-detail .news-cont .detail-font { max-width: 1050px; margin: 0 auto; color: var(--jlt-ink-500); font-size: clamp(16px,1.22vw,18px); font-weight: 400; line-height: 1.9; } .jlt-case-detail .jlt-case-photo-group figure { margin: 0 0 2rem; } .jlt-case-detail .jlt-case-photo-group img { display: block; width: 100%; height: auto; } .jlt-case-detail .jlt-hospital-copy h2 { font-size: 23px; font-weight: 500; line-height: 1.5; margin: 2rem 0 1rem; } .jlt-case-detail .jlt-hospital-copy p { margin-bottom: 1rem; text-indent: 0; } .jlt-case-detail .jlt-case-disclosure { border-left: 3px solid var(--themeColor); background: var(--jlt-surface-alt); padding: 1rem 1.4rem; } .jlt-case-detail .jlt-hospital-copy a { color: var(--jlt-brand-blue); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; } .jlt-case-detail .jlt-case-source-links { font-size: 14px; } .jlt-case-detail .news-cont .fanp { font-size: 15px; line-height: 1.8; } @media (max-width:750px) { .jlt-case-detail .news-cont .detail-font { font-size: 16px; } .jlt-case-detail .jlt-hospital-copy h2 { font-size: 21px; } .jlt-case-detail .news-cont .tt h1 { font-size: 27px; } .jlt-case-detail .jlt-case-disclosure { padding: 1rem; } } /* jlt-inner-navigation.css */ /* Shared inner-page orientation without changing the original reference CSS. */ :is(.jlt-about-page,.jlt-contact-page,.jlt-case-page,.jlt-case-detail) .n-banner{position:relative;isolation:isolate;} :is(.jlt-about-page,.jlt-contact-page,.jlt-case-page,.jlt-case-detail) .n-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,22,29,.48),rgba(12,22,29,.03) 75%);pointer-events:none;z-index:0;} :is(.jlt-about-page,.jlt-contact-page,.jlt-case-page,.jlt-case-detail) .n-banner .jlt-list-banner-title{z-index:1;} @media(max-width:750px){} /* Detail orientation belongs to the reading surface, not over the banner image. */ html body .news-cont:has(.jlt-detail-breadcrumbs) { padding-top: 24px; } html body .news-cont .jlt-detail-breadcrumbs { margin: 0 0 32px; padding: 0; color: var(--inner-muted, #516d80); font-size: 14px; line-height: 1.8; text-shadow: none; } html body .news-cont .jlt-detail-breadcrumbs a { opacity: 1; } html body .news-cont .jlt-detail-breadcrumbs [aria-current] { color: var(--inner-ink, #153b59); } html body .news-cont .jlt-detail-breadcrumbs .jlt-detail-return { display: none; } html body .jlt-solution-return { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 24px; padding: 0; color: var(--inner-muted, #516d80); font-size: 14px; font-weight: 400; line-height: 1.7; text-decoration: none; } html body .jlt-solution-return svg { flex: 0 0 16px; } html body .jlt-solution-return:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } @media (hover: hover) { html body .jlt-solution-return:hover { color: var(--inner-blue, #096da1); text-decoration: underline; text-underline-offset: 4px; } } @media (max-width: 750px) { html body .news-cont:has(.jlt-detail-breadcrumbs) { padding-top: 12px; } html body .news-cont .jlt-detail-breadcrumbs { margin-bottom: 20px; font-size: 13px; } html body .news-cont .jlt-detail-breadcrumbs.has-return ol { display: none; } html body .news-cont .jlt-detail-breadcrumbs .jlt-detail-return { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--inner-blue, #096da1); } html body .news-cont .jlt-detail-return::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } html body .jlt-solution-return { margin-bottom: 16px; } } /* jlt-brand-colors.css */ /* JLT brand palette. Colour-only overrides; original Sunshare CSS stays intact. * Blue/green are sampled from the supplied logo. Deeper tones support text/hover. * The html prefix keeps these overrides effective before page-specific CSS. */ html:root { --jlt-brand-blue: #007bc4; --jlt-brand-blue-hover: #096da1; --jlt-brand-blue-ink: var(--jlt-blue-900); --jlt-brand-blue-rgb: 0, 123, 196; --jlt-brand-green: var(--jlt-green-500); --jlt-brand-green-ink: var(--jlt-green-700); --themeColor: var(--jlt-brand-blue); --themeColor2: var(--jlt-brand-blue); } /* Fixed reference colours that do not use the original theme variable. */ /* Small green accents echo the logo without competing with blue navigation. */ html .thmeColorLine { background-color: var(--jlt-brand-green); } /* Editorial details added after the original theme. */ html .jlt-about-page .jlt-about-facts dt, html .jlt-about-page .jlt-about-timeline dt, html .jlt-product-page .jlt-product-fallback .jlt-product-series, html .jlt-product-page .jlt-product-information dt { color: var(--jlt-brand-blue); } /* Form states preserve their existing spacing, borders and transitions. */ html .jlt-contact-form input:focus, html .jlt-contact-form textarea:focus { outline-color: rgba(var(--jlt-brand-blue-rgb), .24); } html .jlt-contact-form button:focus-visible, html .jlt-contact-form img[role=button]:focus-visible { outline-color: var(--jlt-brand-blue); } html .jlt-contact-form button[type=submit]:hover { background-color: var(--jlt-brand-blue-hover); } html .jlt-contact-feedback { border-left-color: var(--jlt-brand-blue); color: var(--jlt-brand-blue-ink); } html .jlt-contact-feedback[data-state=success] { border-color: var(--jlt-brand-green); color: var(--jlt-brand-green-ink); } html .jlt-contact-feedback[data-state=error] { border-color: var(--jlt-danger); color: var(--jlt-danger-ink); } /* Preserve the original transparent arrow shapes; tint their alpha masks only. */ html #pc_header .nav li::after, html #pc_header .nav li:hover::after { background-image: none; background-color: var(--jlt-brand-blue); -webkit-mask: url(../reference/static/module/index/default/images/nav-hover.png) center / contain no-repeat; mask: url(../reference/static/module/index/default/images/nav-hover.png) center / contain no-repeat; } html #zx_form .tc_nr form button:hover { background-color: var(--jlt-brand-blue-hover); } html .jlt-case-detail .jlt-hospital-copy a { color: var(--jlt-brand-blue-ink); } /* Only the three monochrome floating-service icons; preserve source alpha and hover white. */ html .right-kefu .icon { filter: url(../icons/brand-color-filter.svg#blue); } html .right-kefu .block-group .li.on .icon, html .right-kefu .block-group .li:hover .icon { filter: var(--imgWhite); } /* jlt-mobile-navigation.css */ /* Shared mobile navigation: fixed touch targets, independent of rem scaling. */ @media (max-width: 750px) { header.mobile #nav_btn_box .box { gap: 4px; } header.mobile #nav_btn_box button { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; margin: 0; border: 0; background: transparent; color: #096da1; cursor: pointer; } header.mobile #nav_btn_box button:focus-visible, #m_nav a:focus-visible, #m_nav [role="button"]:focus-visible { outline: 2px solid #096da1; outline-offset: -2px; border-radius: 6px; } header.mobile .menubtn span, header.mobile .menubtn span::before, header.mobile .menubtn span::after { background: currentColor; height: 2px; border-radius: 2px; transition: transform 180ms ease, top 180ms ease, bottom 180ms ease; } header.mobile .menubtn span::before { top: -7px; } header.mobile .menubtn span::after { bottom: -7px; } header.mobile .menubtn.active span { background: transparent; } header.mobile .menubtn.active span::before { top: 0; transform: rotate(45deg); } header.mobile .menubtn.active span::after { bottom: 0; transform: rotate(-45deg); } html.jlt-menu-open, html.jlt-menu-open body { overflow: hidden; } html.jlt-menu-open body header.mobile { transform: none; top: 0; background: #fff !important; } html body #m_nav.mobile { height: 100dvh; padding: max(80px, calc(var(--headerMbHeight) + 16px)) 20px calc(24px + env(safe-area-inset-bottom)); background: #fff; overscroll-behavior: contain; transition: opacity 180ms ease, visibility 180ms ease; } html body #m_nav.mobile > ul > li { width: 100%; border-bottom: 1px solid #e2ebf0; } html body #m_nav.mobile li .jlt-mobile-nav-heading { min-height: 56px; height: auto; transform: none; opacity: 1; transition: none; } html body #m_nav.mobile li .jlt-mobile-nav-heading > a { display: flex; align-items: center; min-height: 56px; padding: 8px 12px; color: #233b4c; font-size: 16px; font-weight: 500; } html body #m_nav.mobile li .jlt-mobile-nav-heading > a[aria-current="page"] { color: #096da1; background: #eef7fc; border-radius: 6px; font-weight: 600; } html body #m_nav.mobile li .jlt-mobile-nav-heading > i { flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 6px; color: #096da1; background: none; transform: none; position: relative; cursor: pointer; } html body #m_nav.mobile li .jlt-mobile-nav-heading > i::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 180ms ease; } html body #m_nav.mobile li.on .jlt-mobile-nav-heading > i::before { transform: rotate(225deg); } html body #m_nav.mobile .list { padding: 4px 12px 12px; } html body #m_nav.mobile .list a { min-height: 44px; padding: 8px 12px; color: #414141; transform: none; opacity: 1; transition: none; } } @media (prefers-reduced-motion: reduce) { html body #m_nav.mobile, header.mobile .menubtn span, header.mobile .menubtn span::before, header.mobile .menubtn span::after { transition: none; } } /* Header geometry must not grow with the legacy viewport-based rem unit. */ @media(max-width:750px){ html:root,html body{--headerMbHeight:64px;} html body header.mobile{height:var(--headerMbHeight)!important;min-height:var(--headerMbHeight);padding:8px 20px!important;box-sizing:border-box;} html body header.mobile .logo{width:150px;max-width:calc(100vw - 144px);} html body header.mobile .logo a{display:flex;align-items:center;margin:0;height:44px;} html body header.mobile .logo img{display:block;width:100%!important;height:auto!important;max-height:44px;object-fit:contain;object-position:left center;} html body header.mobile #nav_btn_box .w1600{width:auto;margin:0;padding:0;} html body #m_nav.mobile .list a{font-size:15px;} } @media(min-width:600px) and (max-width:750px){ html:root,html body{--headerMbHeight:72px;} html body header.mobile{padding-inline:24px!important;} html body header.mobile .logo{width:180px;} } /* Shared inner-page hero overlay; menu-open always wins over the hero state. */ @media(max-width:750px){ html body.jlt-mobile-hero-page:not(.jlt-home) { padding-top:0!important; } html body.jlt-mobile-hero-page:not(.jlt-home) .header-fa { height:0!important; min-height:0!important; } html body.jlt-mobile-hero-page:not(.jlt-home)>article { padding-top:0!important; } html body.jlt-mobile-hero-page:not(.jlt-home) header.mobile { position:fixed; inset:0 0 auto; z-index:1000; background:transparent!important; box-shadow:none!important; border:0; transition:background .24s ease,box-shadow .24s ease; } html body.jlt-mobile-photo-hero:not(.jlt-home) header.mobile { background:rgba(10,39,66,.32)!important; } html body.jlt-mobile-photo-hero:not(.jlt-home) header.mobile .logo img { filter:brightness(0) invert(1); } html body.jlt-mobile-photo-hero:not(.jlt-home) header.mobile #nav_btn_box button { color:#fff; } html body.jlt-mobile-hero-page.jlt-mobile-header-scrolled:not(.jlt-home) header.mobile, html.jlt-menu-open body.jlt-mobile-hero-page:not(.jlt-home) header.mobile { background:rgba(255,255,255,.98)!important; box-shadow:0 1px 0 rgba(21,59,89,.1)!important; } html body.jlt-mobile-hero-page.jlt-mobile-header-scrolled:not(.jlt-home) header.mobile .logo img, html.jlt-menu-open body.jlt-mobile-hero-page:not(.jlt-home) header.mobile .logo img { filter:none; } html body.jlt-mobile-hero-page.jlt-mobile-header-scrolled:not(.jlt-home) header.mobile #nav_btn_box button, html.jlt-menu-open body.jlt-mobile-hero-page:not(.jlt-home) header.mobile #nav_btn_box button { color:#096da1; } } @media(prefers-reduced-motion:reduce){html body.jlt-mobile-hero-page header.mobile{transition:none!important;}} /* jlt-header-navigation.css */ /* Header proportions are independent of the legacy rem scale. */ @media (min-width:751px) { html:root { --headerHeight: 88px !important; --jlt-header-gutter: clamp(24px,5vw,96px); } html body #pc_header { height: var(--headerHeight); background: #fff !important; box-shadow: 0 1px 0 rgba(35,59,76,.08); transition: transform .25s ease,box-shadow .25s ease; } html body #pc_header > .wp { width: 100%; max-width: none; padding: 0 var(--jlt-header-gutter); margin: 0; } html body #pc_header > .wp > .box { display: grid; grid-template-columns: minmax(180px,1fr) auto auto; align-items: center; column-gap: clamp(20px,2vw,40px); } html body #pc_header > .wp > .box > .left { min-width: 0; } html body #pc_header > .wp > .box > .right { display: contents; } html body #pc_header .logo { width: 210px; max-width: 100%; } html body #pc_header .logo a { height: 68px; display: flex; align-items: center; } html body #pc_header .logo img { width: 100% !important; height: auto !important; max-width: 100%; max-height: 68px; object-fit: contain; } html body #pc_header .logo .white { opacity: 0; position: absolute; } html body #pc_header .logo .black { opacity: 1; position: static; } html body #pc_header .nav { display: flex; justify-content: flex-end; align-items: stretch; gap: clamp(24px,2.5vw,44px); height: 100%; margin: 0; padding: 0; color: var(--jlt-ink-700); } html body #pc_header .nav > li { margin: 0; height: 100%; font-family: inherit; } html body #pc_header .nav > li > a { display: flex; align-items: center; height: 100%; padding: 0; font-family: inherit; font-size: 18px; line-height: 1.5; font-weight: 500; white-space: nowrap; color: var(--jlt-ink-700); } html body #pc_header .nav > li.on > a, html body #pc_header .nav > li:hover > a, html body #pc_header .nav > li:focus-within > a { color: var(--jlt-brand-blue); } html body #pc_header .nav > li::after { pointer-events: none; left: 50%; bottom: 14px; width: 22px; height: 8px; background: var(--jlt-brand-blue); -webkit-mask: url("../reference/static/module/index/default/images/nav-hover.png") center/contain no-repeat; mask: url("../reference/static/module/index/default/images/nav-hover.png") center/contain no-repeat; transform: translateX(-50%); transition: opacity .2s ease; } html body #pc_header .nav > li.on::after { opacity: 1; transform: translateX(-50%); } html body #pc_header .nav > li:not(.on)::after { opacity: 0; } html body #pc_header .jlt-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; justify-self: end; } html body #pc_header .line { width: 1px; height: 20px; margin: 0 4px 0 0; background: var(--jlt-line); } html body #pc_header .search-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border-radius: 8px; } html body #pc_header .lang { height: 100%; font-family: inherit; color: var(--jlt-muted); } html body #pc_header .lang > a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; height: 100%; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; } html body #pc_header .search-btn svg, html body #pc_header .lang > a > svg { width: 22px; height: 22px; flex: 0 0 22px; transform: none; } html body #pc_header .search-btn svg path, html body #pc_header .lang > a > svg path { fill: var(--jlt-ink-700); } html body #pc_header .lang > a > i { font-size: 14px; line-height: 1; color: var(--jlt-muted); transform: rotate(90deg); } html body #pc_header .search-btn:hover { background: var(--jlt-surface-alt); } html body #pc_header .ej_box { top: 100%; min-width: 190px; padding: 8px; border: 1px solid var(--jlt-line); border-radius: 12px; background: #fff; text-align: left; box-shadow: 0 12px 32px rgba(23,51,70,.10); transition: opacity .18s,visibility .18s; max-height: calc(100dvh - var(--headerHeight) - 24px); overflow-y: auto; } html body #pc_header :is(.ej_box,.pro_box):not(:has(a[href])) { display: none; } html body #pc_header .ej_box > a { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 6px; font-family: inherit; font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--jlt-ink-500); transition: color .18s,background .18s; } html body #pc_header .ej_box > a:hover, html body #pc_header .ej_box > a.on, html body #pc_header .ej_box > a[aria-current] { background: var(--jlt-surface-alt); color: var(--jlt-brand-blue) !important; } html body #pc_header .lang > .ej_box { left: auto; right: 0; transform: none; min-width: 140px; } html body #pc_header .pro_box { top: var(--headerHeight); left: var(--jlt-header-gutter); right: var(--jlt-header-gutter); width: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,240px); gap: 36px; padding: 32px; border: 1px solid var(--jlt-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(23,51,70,.10); max-height: calc(100dvh - var(--headerHeight) - 24px); overflow-y: auto; transition: opacity .18s,visibility .18s; } html body #pc_header .pro_box > .left { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; width: auto; min-width: 0; } html body #pc_header .pro_box .left .list { width: auto; min-width: 0; } html body #pc_header .pro_box .left .tt { padding: 0 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--jlt-line); } html body #pc_header .pro_box .left .tt a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--jlt-ink-700); } html body #pc_header .pro_box .left .tt a svg { width: 18px; height: 18px; flex-shrink: 0; } html body #pc_header .pro_box .left .list li { margin: 0; } html body #pc_header .pro_box .list li a { display: block; padding: 8px 10px; margin-inline: -10px; font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--jlt-muted); border-radius: 6px; } html body #pc_header .pro_box .list li a:hover { color: var(--jlt-brand-blue); background: var(--jlt-surface-alt); } html body #pc_header .pro_box > .right { display: flex; align-items: center; width: 100%; height: 100%; min-width: 0; padding: 16px; border-radius: 10px; background: var(--jlt-surface-sunken); } html body #pc_header .pro_box > .right a { width: 100%; } html body #pc_header .pro_box > .right img { width: 100%; height: 220px; object-fit: contain; } html body #pc_header a:focus-visible { outline: 2px solid var(--jlt-brand-blue); outline-offset: -3px; border-radius: 6px; } /* Overlay image banners; pages without a banner retain the solid header. */ html body:has(.n-banner,.jlt-solution-detailed .jj-banner) { --jlt-header-overlay: linear-gradient(180deg,rgba(13,32,51,.78),rgba(13,32,51,.42)); } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) { background: var(--jlt-header-overlay,linear-gradient(180deg,rgba(13,32,51,.62),rgba(13,32,51,.18))) !important; box-shadow: none; } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .logo .white { opacity: 1 !important; } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .logo .black { opacity: 0 !important; } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .nav > li > a, html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .lang > a, html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .lang > a > i { color: #fff !important; } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .search-btn svg path, html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .lang > a > svg path { fill: #fff; } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .line { background: rgba(255,255,255,.35); } html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header:not(.fix):not(:hover):not(:focus-within) .nav > li.on::after { background: #fff; } } @media (min-width:1600px) { html:root { --headerHeight: 96px !important; } html body #pc_header .logo { width: 220px; } html body #pc_header .nav > li::after { bottom: 17px; } } @media (min-width:1920px) { html body #pc_header .nav > li > a { font-size: 20px; } } @media (min-width:1101px) and (max-width:1279px) { html body #pc_header .nav { gap: 24px; } html body #pc_header .nav > li > a { font-size: 16px; } } @media (min-width:751px) and (max-width:1100px) { html:root { --headerHeight: 80px !important; --jlt-header-gutter: 24px; } html body #pc_header > .wp > .box { grid-template-columns: minmax(140px,1fr) auto auto; column-gap: 16px; } html body #pc_header .logo { width: 180px; } html body #pc_header .nav { gap: 14px; } html body #pc_header .nav > li > a { font-size: 14px; } html body #pc_header .nav > li::after { bottom: 13px; width: 18px; height: 6px; } html body #pc_header .jlt-header-tools { gap: 0; } html body #pc_header .jlt-header-tools .line, html body #pc_header .lang > a > span, html body #pc_header .lang > a > i { display: none; } html body #pc_header .lang > a { width: 44px; } html body #pc_header .pro_box { grid-template-columns: minmax(0,1fr); padding: 24px; } html body #pc_header .pro_box > .right { display: none; } html body #pc_header .pro_box > .left { gap: 24px; } } @media (min-width:751px) and (max-width:850px) { html:root { --jlt-header-gutter: 18px; } html body #pc_header .logo { width: 140px; } html body #pc_header .nav { gap: 10px; } } @media (max-width:750px) { html body header.mobile .lang svg { width: 22px; height: 22px; transform: none; } html body header.mobile .search-btn { font-size: 22px; } } @media (prefers-reduced-motion:reduce) { html body #pc_header, html body #pc_header * { transition: none !important; } } /* Shared product preview: stable geometry while the selected device changes. */ @media(min-width:1201px) { html body #pc_header .pro_box > .right { align-self:start; height:360px; box-sizing:border-box; background:var(--preview-surface,#edf6fb); transition:background-color .18s; } html body #pc_header .pro_box > .right .jlt-menu-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:8px; text-align:center; color:#102b46; } html body #pc_header .pro_box > .right img { width:100%; height:210px; flex-shrink:0; object-fit:contain; mix-blend-mode:multiply; } html body #pc_header .pro_box > .right img[hidden] { display:none; } html body #pc_header .jlt-menu-preview-title { font-size:16px; line-height:1.5; font-weight:600; } html body #pc_header .jlt-menu-preview-model { font-size:13px; color:#50667b; line-height:1.4; } html body #pc_header .jlt-menu-preview-hint { font-size:13px; color:var(--preview-accent,#0077b5); margin-top:4px; } html body #pc_header .pro_box .left a.is-previewed { color:#0077b5; background:#edf6fb; border-radius:6px; } } @media(prefers-reduced-motion:reduce) { html body #pc_header .pro_box > .right { transition:none; } } /* jlt-section-navigation.css */ /* Inner-page tabs use the catalog's filled selection, with each page's palette. */ html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc) { --jlt-tab-accent: var(--inner-blue, #0075b8); --jlt-tab-tint: var(--inner-tint, #eef6fb); background: #fff; border-bottom: 1px solid var(--inner-line, var(--jlt-line)); } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters) { padding-inline: 0; overflow: visible; } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters) > .wp { display: flex; align-items: center; justify-content: flex-start; gap: 12px; box-sizing: border-box; width: 92%; max-width: 1520px; margin-inline: auto; min-height: 80px; padding: 14px 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b7cfdf transparent; scroll-padding-inline: 4px; } html body:not(.jlt-home) .ss-nav { position: sticky; top: var(--headerHeight, 88px); z-index: 30; justify-content: center; gap: 12px; padding: 14px 4%; overflow-x: auto; } html body:not(.jlt-home) .ss-section { scroll-margin-top: calc(var(--headerHeight, 88px) + 96px); } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; min-height: 48px; margin: 0; padding: 10px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--inner-muted, #456176); font-size: 16px; font-weight: 500; line-height: 1.7; white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s; } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a::after { display: none; } @media (hover: hover) { html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a:hover { background: var(--jlt-tab-tint); color: var(--jlt-tab-accent); } } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a:is([aria-current="page"], [aria-current="location"]) { background: var(--jlt-tab-accent); color: #fff; font-weight: 600; } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a:focus-visible { outline: 2px solid var(--jlt-tab-accent); outline-offset: 2px; } .jlt-news-list .news-cont > .wp { max-width: none; padding-inline: clamp(72px,5vw,96px); } @media (max-width: 750px) { html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters) > .wp { width: 100%; min-height: 68px; padding: 12px 24px; gap: 8px; scrollbar-width: none; } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters) > .wp > a:last-child { margin-right: 24px; } html body:not(.jlt-home) .ss-nav { top: var(--headerMbHeight, 64px); justify-content: flex-start; padding: 12px 24px; gap: 8px; scrollbar-width: none; } html body:not(.jlt-home) .ss-section { scroll-margin-top: calc(var(--headerMbHeight, 64px) + 84px); } html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a { min-height: 44px; padding: 9px 16px; font-size: 15px; } html body:not(.jlt-home) :is(.jlt-wide-nav > .wp, .jlt-news-filters > .wp, .ss-nav)::-webkit-scrollbar { display: none; } .jlt-news-list .news-cont > .wp { padding-inline: 18px; } } @media (prefers-reduced-motion: reduce) { html body:not(.jlt-home) :is(.jlt-wide-nav, .jlt-news-filters, .ss-nav, .jlt-solution-toc-links) a { transition: none; } } /* jlt-header-proportions.css */ /* Shared geometry in every page and scroll state; color stays surface-aware. */ @media(min-width:751px){ html body{--headerHeight:88px!important;--site-nav-logo:210px;--site-nav-font:17px;} html body #pc_header#pc_header{height:var(--headerHeight)!important;min-height:var(--headerHeight);padding:0!important;} html body #pc_header#pc_header>.wp{width:92%!important;max-width:1680px!important;margin-inline:auto!important;padding:0!important;height:100%;} html body #pc_header#pc_header>.wp>.box{height:var(--headerHeight)!important;min-height:0;display:grid;grid-template-columns:minmax(var(--site-nav-logo),1fr) auto auto;column-gap:28px;align-items:center;} html body #pc_header#pc_header .logo{width:var(--site-nav-logo)!important;max-width:none;} html body #pc_header#pc_header .logo a{height:64px!important;position:relative;} html body #pc_header#pc_header .logo img{width:var(--site-nav-logo)!important;max-width:var(--site-nav-logo)!important;height:64px!important;max-height:64px!important;object-fit:contain;object-position:left center;} html body #pc_header#pc_header .nav{height:100%;margin:0;padding:0;} html body #pc_header#pc_header .nav>li{height:100%;margin:0!important;padding:0!important;} html body #pc_header#pc_header .nav>li>a{font-size:var(--site-nav-font)!important;font-weight:500;line-height:1.5;letter-spacing:0;} html body #pc_header#pc_header .nav>li>a::after{display:none!important;} html body #pc_header#pc_header .nav>li::after{width:24px;height:2px;bottom:17px;border-radius:0;} html body #pc_header#pc_header .jlt-header-tools{height:100%;} } @media(min-width:1600px){html body{--headerHeight:96px!important;--site-nav-logo:230px;--site-nav-font:18px;}} @media(min-width:751px) and (max-width:1200px){html body{--headerHeight:80px!important;--site-nav-logo:180px;--site-nav-font:16px;}html body #pc_header#pc_header>.wp>.box{column-gap:16px;}} @media(min-width:751px) and (max-width:950px){html body{--site-nav-logo:140px;--site-nav-font:15px;}html body #pc_header#pc_header>.wp{width:95%!important;}html body #pc_header#pc_header>.wp>.box{column-gap:12px;}} /* Prevent label wrapping and keep submenu targets comfortable at every scale. */ @media(min-width:751px){ html body #pc_header#pc_header .nav>li>a{white-space:nowrap;display:flex;align-items:center;justify-content:center;} html body #pc_header .pro_box .list li a,html body #pc_header .pro_box .left .tt a{min-height:44px;box-sizing:border-box;display:flex;align-items:center;} html body #pc_header :is(.ej_box,.pro_box){overscroll-behavior:contain;} } /* Centered capsule selection replaces the legacy masked underline. */ @media(min-width:751px){ html body #pc_header#pc_header .nav{gap:6px!important;align-items:center;} html body #pc_header#pc_header .nav>li{display:flex;align-items:center;} html body #pc_header#pc_header .nav>li::after, html body #pc_header#pc_header .nav>li::before{display:none!important;} html body #pc_header#pc_header .nav>li>a{box-sizing:border-box;height:44px;min-width:64px;padding:0 16px!important;border-radius:999px;background:transparent;color:#354f60!important;transition:background-color .18s ease,color .18s ease;} html body #pc_header#pc_header .nav>li:hover>a, html body #pc_header#pc_header .nav>li:focus-within>a{background:#e8f3fa;color:#007bc4!important;} html body #pc_header#pc_header .nav>li.on>a{background:#007bc4;color:#fff!important;} html body #pc_header#pc_header .nav>li>a:focus-visible{outline:2px solid #007bc4;outline-offset:3px;} } @media(min-width:751px) and (max-width:1200px){ html body #pc_header#pc_header .nav{gap:3px!important;} html body #pc_header#pc_header .nav>li>a{padding:0 10px!important;min-width:48px;} } @media(min-width:751px) and (max-width:950px){ html body #pc_header#pc_header .nav{gap:0!important;} html body #pc_header#pc_header .nav>li>a{padding:0 6px!important;min-width:40px;font-size:14px!important;} } @media(prefers-reduced-motion:reduce){html body #pc_header#pc_header .nav>li>a{transition:none;}} /* Preserve contrast over hero photography before the solid header appears. */ @media(min-width:751px){ html body:is(.jlt-home,:has(.n-banner,.jlt-solution-detailed .jj-banner)) #pc_header#pc_header:not(.fix):not(:hover):not(:focus-within) .nav>li:not(.on)>a { color:#fff!important; text-shadow:0 1px 3px rgba(0,25,45,.35); } } /* jlt-banner-sizing.css */ /* All column banners share the product-directory scale. */ html body:not(.jlt-home) { --jlt-inner-banner-height: var(--jlt-product-banner-height); --jlt-product-banner-height: min(clamp(380px, 30vw, 480px), 62svh); } html body:not(.jlt-home):not(.jlt-error-page) .n-banner { height: var(--jlt-inner-banner-height) !important; min-height: var(--jlt-inner-banner-height) !important; box-sizing: border-box; background-size: cover; background-position: center; } html body.jlt-product-list:not(.jlt-home):not(.jlt-error-page) .n-banner { height: var(--jlt-product-banner-height) !important; min-height: var(--jlt-product-banner-height) !important; } html body:not(.jlt-home) .n-banner .jlt-list-banner-title { position: absolute; top: calc(50% + 20px); left: 0; right: 0; transform: translateY(-50%); margin-inline: auto; width: 92%; max-width: 1520px; padding: 0 !important; } html body:not(.jlt-home) .n-banner .jlt-list-banner-title :is(h1,h2) { margin: 0; font-size: clamp(36px, 3.4vw, 56px) !important; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; } html body:not(.jlt-home):not(.jlt-error-page) .n-banner::after { top: auto; right: auto; left: -10%; bottom: -1px; width: 120%; height: 36px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } /* The solutions landing hero includes copy and an action, so allow it to grow. */ html body.jlt-clinical-page .solution-system.ss-directory .sd-hero { min-height: var(--jlt-inner-banner-height) !important; height: auto; box-sizing: border-box; display: flex; align-items: center; } @media(min-width:751px) and (max-width:1000px) { html body:not(.jlt-home) { --jlt-inner-banner-height: var(--jlt-product-banner-height); --jlt-product-banner-height: clamp(300px, 40vw, 340px); } } @media(max-width:750px) { html body:not(.jlt-home) { --jlt-inner-banner-height: var(--jlt-product-banner-height); --jlt-product-banner-height: 240px; } html body:not(.jlt-home) .n-banner .jlt-list-banner-title { width: calc(100% - 48px); top: 50%; } html body:not(.jlt-home):not(.jlt-error-page) .n-banner::after { height: 24px; } } @media(max-width:750px) and (max-height:500px) and (orientation:landscape) { html body:not(.jlt-home) { --jlt-inner-banner-height: var(--jlt-product-banner-height); --jlt-product-banner-height: 240px; } } /* Directory introduction follows the banner rather than dictating its height. */ html body.jlt-clinical-page .solution-system.ss-directory .sd-hero { height:var(--jlt-inner-banner-height)!important; padding-block:var(--headerHeight,88px) 32px; } @media(max-width:750px) { html body:not(.jlt-home) .n-banner .jlt-list-banner-title :is(h1,h2) { font-size:28px!important; line-height:1.35; } html body.jlt-clinical-page .solution-system.ss-directory .sd-hero { padding-block:64px 24px; } html body .ss-directory .sd-hero h1 { font-size:28px!important; line-height:1.35; } html body .ss-directory .sd-hero .ss-eyebrow { margin:0 0 10px; } html body.jlt-contact-page .n-banner .jlt-list-banner-title p { margin-top:12px; font-size:14px; line-height:1.6; } } /* Override legacy per-column sizing; article reading headers keep their compact scale. */ html body:not(.jlt-home):not(.jlt-news-detail) { --jlt-inner-banner-height:var(--jlt-product-banner-height)!important; } /* Straight joins keep column banners consistent across desktop and mobile. */ html body:not(.jlt-home):not(.jlt-error-page) .n-banner::after, html body.jlt-clinical-page .solution-system.ss-directory .sd-hero::after { display:none!important; } /* Shared column heading: stable alignment across one- and two-line descriptions. */ html body:not(.jlt-home) :is(.n-banner,.ss-directory .sd-hero).jlt-column-banner { position:relative; overflow:hidden; } html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title { position:absolute!important; inset:auto 0 auto!important; top:calc(50% + 20px)!important; width:92%!important; max-width:1520px!important; margin:0 auto!important; padding:0!important; transform:translateY(-50%)!important; z-index:2; } html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title h1 { margin:0!important; font-size:clamp(40px,3.4vw,48px)!important; font-weight:500; line-height:1.35!important; letter-spacing:-.02em; } html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title .jlt-column-description { margin:16px 0 0!important; max-width:36em; font-size:clamp(16px,1.25vw,18px)!important; line-height:1.7!important; letter-spacing:0; color:inherit; } html body:not(.jlt-home) .n-banner.jlt-column-banner .jlt-list-banner-title {color:#fff;text-shadow:0 1px 8px #061d3040;} html body:not(.jlt-home) .n-banner.jlt-column-banner::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(11,34,53,.48),rgba(11,34,53,.18) 52%,rgba(11,34,53,.04)); } html body.jlt-clinical-page .ss-directory .sd-hero.jlt-column-banner { padding:0!important; } html body .ss-directory .jlt-column-banner .jlt-list-banner-title {color:#102b46;} html body .ss-directory .jlt-column-banner .jlt-list-banner-title h1 {color:inherit;text-shadow:none;} html body .ss-directory .jlt-column-banner .jlt-column-description {color:#50667b!important;} @media(max-width:750px) { html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title { width:calc(100% - 48px)!important; top:calc(50% + 20px)!important; } html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title h1 {font-size:28px!important;} html body:not(.jlt-home) .jlt-column-banner .jlt-list-banner-title .jlt-column-description { margin-top:12px!important; font-size:15px!important; line-height:1.65!important; } } /* jlt-reading.css */ /* Reading pages keep the site banner, but prioritize the article. */ html body.jlt-news-detail:not(.jlt-home) { --jlt-inner-banner-height: 240px; } html body.jlt-news-detail .news-cont { padding-block: 40px 64px; } html body.jlt-news-detail .news-cont .ar_article { padding-top: 28px; } html body.jlt-news-detail .news-cont .ar_article img { height: auto; } .jlt-news-detail .jlt-article-readable-intro p { margin-block: 12px; } .jlt-news-detail .jlt-article-readable-intro a { display: inline-block; min-height: 44px; padding-block: 8px; color: var(--jlt-brand-accent); text-decoration: underline; text-underline-offset: 3px; } .jlt-media-fallback { object-fit: contain !important; background: var(--jlt-surface-sunken); } @media (max-width: 750px) { html body.jlt-news-detail:not(.jlt-home) { --jlt-inner-banner-height: 172px; } html body.jlt-news-detail .news-cont { padding-block: 28px 44px; } html body.jlt-news-detail .news-cont .ar_article { padding-top: 24px; } } /* jlt-buttons.css */ /* Public-site action system; deliberately scoped away from admin and navigation tabs. */ :root { --jlt-action-bg:#0077b5; --jlt-action-hover:#0068a6; --jlt-action-height:52px; --jlt-action-radius:12px; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]) { box-sizing:border-box!important; min-height:var(--jlt-action-height)!important; height:auto!important; min-width:184px!important; max-width:100%; padding:12px 24px!important; border:1px solid var(--jlt-action-bg)!important; border-radius:var(--jlt-action-radius)!important; background:var(--jlt-action-bg)!important; color:#fff!important; font-size:15px!important; font-weight:500!important; line-height:24px!important; text-align:center; text-decoration:none!important; align-items:center; justify-content:center; gap:20px; vertical-align:middle; cursor:pointer; box-shadow:none!important; filter:none!important; transition:background-color .18s ease,border-color .18s ease; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]):not([hidden]):not(.jlt-news-more):not(.jlt-news-mobile-more) { display:inline-flex; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"])::before,html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"])::after { display:none!important; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]):hover { background:var(--jlt-action-hover)!important; border-color:var(--jlt-action-hover)!important; color:#fff!important; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]):focus-visible { outline:2px solid var(--jlt-action-bg); outline-offset:4px; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]):disabled,html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"])[aria-disabled="true"] { opacity:.5; cursor:not-allowed; box-shadow:none!important; } html body :is(.jlt-related-more,.jlt-clinical-link) { background:#fff!important; color:var(--jlt-action-bg)!important; } html body :is(.catalog-search-control button[type="submit"],.search-dialog button.submit) { background:var(--jlt-action-bg)!important; color:#fff!important; border-radius:999px!important; min-width:44px; min-height:44px; } html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.ss-button,.jlt-solution-toc-cta) svg { width:18px; height:18px; flex-shrink:0; fill:currentColor; } @media(prefers-reduced-motion:reduce) { html body :is(.contact-primary,.zhy-primary a,.zhy-secondary a,.btn_xq,.btn_more,.ss-button,.jlt-solution-toc-cta,.jlt-wide-link,.jlt-clinical-link,.jlt-related-more,.ja-link,.cs-link,.jlt-news-more,.jlt-news-mobile-more,#gallery .txt a,.jlt-contact-form button[type="submit"],#zx_form button[type="submit"]) { transition:none!important; } } html :is(#zx_form,body) :is(.zhy-secondary a,.jlt-related-more,.jlt-clinical-link) { background:#fff!important; color:var(--jlt-action-bg)!important; } html :is(#zx_form,body) :is(.zhy-secondary a,.jlt-related-more,.jlt-clinical-link):hover { background:#e8f3fa!important; color:var(--jlt-action-bg)!important; } /* jlt-inner-finish.css */ /* Inner-page finish, explicitly limited to non-product page families. */ html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) { --jlt-inner-banner-height:clamp(420px,34vw,540px); color:#18354a; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters)>.wp { display:flex; flex-wrap:wrap; gap:8px; padding-block:14px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:1px solid #dbe8ef; border-radius:999px!important; background:#fff; color:#526774; font-size:14px; line-height:1.5; transition:background-color .18s,color .18s; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a:is([aria-current],.on,.active) { background:#007bc4!important; border-color:#007bc4; color:#fff!important; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a::after { display:none; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-company-intro,.jlt-wide-facts,.jlt-wide-culture,.jlt-wide-brands,.contact-overview,.ss-section,.sd-section,.jlt-hospital-directory) { padding-block:64px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.contact-overview-copy h2,.ss-heading h2,.jlt-company-section-head h2) { font-size:clamp(28px,2.5vw,38px); line-height:1.4; font-weight:600; color:#18354a; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-about-figure,.contact-building,.ss-hero-image,.ss-application,.ss-combinations>article,.sd-card,.jlt-hospital-card) { border-radius:12px; overflow:hidden; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .ss-nav a { border-radius:999px!important; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid { gap:24px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item { border:1px solid #e2ebf0; border-radius:12px; overflow:hidden; background:#fff; box-shadow:none; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item .txt { padding:22px 24px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item h5 { color:#18354a; font-size:20px; line-height:1.6; font-weight:500; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item .mx { color:#007bc4; font-size:14px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .jlt-contact-form :is(input,textarea) { border-radius:10px; border-color:#cbdde7; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .jlt-contact-form-section { padding-block:64px!important; background:#edf6fb; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters,.ss-nav) a:focus-visible { outline:2px solid #007bc4; outline-offset:3px; } @media(hover:hover){ html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a:not([aria-current]):hover { background:#eaf4fa; color:#007bc4; border-color:#a8cfdf; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item:hover { border-color:#a8cfdf; } } @media(max-width:750px){ html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) { --jlt-inner-banner-height:320px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters)>.wp { width:calc(100% - 48px); overflow:visible; gap:8px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) { overflow:visible; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a { flex:1 0 calc(50% - 8px); box-sizing:border-box; padding:10px 12px; font-size:13px; white-space:normal; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-company-intro,.jlt-wide-facts,.jlt-wide-culture,.jlt-wide-brands,.contact-overview,.ss-section,.sd-section,.jlt-hospital-directory) { padding-block:36px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .jlt-contact-form-section { padding-block:36px!important; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.contact-overview-grid,.jlt-contact-form-layout,.jlt-company-intro-grid) { gap:28px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.contact-overview-copy h2,.ss-heading h2,.jlt-company-section-head h2) { font-size:26px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont { padding-block:32px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid { gap:20px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item .txt { padding:18px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .news-cont>.wp>.grid>.item h5 { font-size:17px; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .jlt-hospital-directory .wp { width:calc(100% - 48px); padding-inline:0; } html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) .jlt-hospital-card figcaption { padding:16px 18px; min-height:72px; } } @media(prefers-reduced-motion:reduce){ html body:is(.jlt-about-page,.jlt-news-list,.jlt-news-detail,.jlt-case-page,.jlt-case-detail,.jlt-contact-page,.jlt-clinical-page):not(.jlt-home):not(.jlt-product-list):not(.jlt-product-detail):not(.jlt-product-page) :is(.jlt-wide-nav,.jlt-news-filters) a { transition:none; } } @media(max-width:750px){ html body.jlt-news-list .jlt-news-filters>.wp, html body.jlt-about-page .jlt-wide-nav>.wp { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); } html body.jlt-news-list .jlt-news-filters>.wp>a, html body.jlt-about-page .jlt-wide-nav>.wp>a { width:100%!important; margin:0!important; min-width:0; } html body.jlt-about-page .jlt-wide-nav>.wp>a:last-child:nth-child(odd) { grid-column:1/-1; } } html body.jlt-news-list .news-cont>.wp>.grid>.item .txt { box-sizing:border-box; width:100%; max-width:none; } html body.jlt-news-list .news-cont>.wp>.grid>.item .txt h5 { width:100%; max-width:none; margin-inline:0; } html body:is(.jlt-news-detail,.jlt-case-detail) .news-cont .tt h1 { font-size:clamp(26px,2.6vw,40px); line-height:1.45; color:#18354a; font-weight:600; } html body:is(.jlt-news-detail,.jlt-case-detail) .news-cont .detail-font { max-width:960px; margin-inline:auto; font-size:16px; line-height:1.9; color:#415b6b; } html body:is(.jlt-news-detail,.jlt-case-detail) .news-cont .detail-font img { max-width:100%; height:auto; border-radius:10px; } /* Clinical needs inherit the homepage department palette by destination. */ html body .ss-directory .sd-need-links>a[href*="/aesthetic-solutions/"] { --need-accent:#17668c; --need-surface:#eaf4fa; --need-border:#c6e1ef; --need-icon:url("../icons/medical-aesthetic-orange.svg"); } html body .ss-directory .sd-need-links>a[href*="/gynecology-solutions/"] { --need-accent:#96566f; --need-surface:#f8edf1; --need-border:#ecd0dc; --need-icon:url("../icons/medical-gynecology-blue.svg"); } html body .ss-directory .sd-need-links>a[href*="/pain-rehabilitation/"] { --need-accent:#93601f; --need-surface:#faf2e6; --need-border:#ecd4ae; --need-icon:url("../icons/medical-rehabilitation-orange.svg"); } html body .ss-directory .sd-need-links>a[href*="/ent-solutions/"] { --need-accent:#247a76; --need-surface:#eaf5f2; --need-border:#bddfd8; --need-icon:url("../icons/medical-ent-orange.svg"); } html body .ss-directory .sd-need-links>a[href*="/tcm-solutions/"] { --need-accent:#5b7044; --need-surface:#f0f3e8; --need-border:#d3ddbe; --need-icon:url("../icons/medical-tcm-blue.svg"); } html body .ss-directory .sd-need-links>a { background:var(--need-surface); color:var(--need-accent); border:1px solid var(--need-border); border-radius:12px; transition:background-color .18s,border-color .18s; } html body .ss-directory .sd-need-links>a::before { background:var(--need-accent)!important; mask:var(--need-icon) center/contain no-repeat; -webkit-mask:var(--need-icon) center/contain no-repeat; } html body .ss-directory .sd-need-links>a >span { color:inherit; } html body .ss-directory .sd-need-links>a:hover { background:var(--need-border); border-color:var(--need-accent); color:var(--need-accent); transform:none; } html body .ss-directory .sd-need-links>a:focus-visible { outline:2px solid var(--need-accent); outline-offset:3px; } /* First keyboard stop bypasses the shared navigation. */ html body .jlt-skip-link{position:fixed;top:12px;left:12px;z-index:2147483647;padding:12px 20px;border-radius:6px;background:#153b59;color:#fff;font:600 16px/1.5 sans-serif;transform:translateY(calc(-100% - 24px));} html body .jlt-skip-link:focus{transform:translateY(0);outline:3px solid #007099;outline-offset:3px;} #main-content{scroll-margin-top:100px;}