/* * DBC / BIOTEN V2.7.2 * Responsive composition, mobile readability and navigation refinement. * * This layer is intentionally additive. The approved homepage hero copy, * particle sequence and normal desktop / portrait composition are preserved. */ /* ---------- resilient shared geometry ---------- */ body.v270-site, body.v270-site *, body.v270-site *::before, body.v270-site *::after { box-sizing: border-box; } body.v270-site :where(main, section, article, aside, nav, form, fieldset, figure, div) { min-inline-size: 0; } body.v270-site :where(img, picture, video, canvas, svg) { max-inline-size: 100%; } body.v270-site :where( .matrix-scroll, .table-wrap, .decision-table-wrap, .routing-table-wrap, .pro-table-wrap, .market-table-wrap, .bioten-table-wrap ) { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } body.v270-site main :where(pre, code, samp) { max-inline-size: 100%; } body.v270-site main pre { overflow-x: auto; overscroll-behavior-inline: contain; } /* ---------- desktop mega menu: readable and safe at short heights ---------- */ @media (min-width: 861px) { body.v270-site .dbc-desktop-mega-layer.is-open { pointer-events: auto; } body.v270-site .dbc-desktop-mega { max-block-size: calc(100dvh - var(--dbc-header-height, 4.5rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } body.v270-site .dbc-desktop-route__copy small { font-size: max(10px, .625rem); line-height: 1.25; } body.v270-site .dbc-desktop-route__desc, body.v270-site .dbc-desktop-mega__quick > a { font-size: max(12px, .75rem); } body.v270-site .dbc-desktop-mega__quick > p { font-size: max(10px, .625rem); } body.v270-site .dbc-desktop-mega__intro > p:not(.dbc-desktop-mega__eyebrow) { font-size: max(12.5px, .8rem); } html body.v270-site.dbc-global-nav-active .site-header.site-header .header-inner.header-inner { display: grid !important; grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr) !important; grid-template-rows: auto !important; column-gap: 1rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .brand-logos { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; inline-size: clamp(8rem, 13vw, 10.75rem) !important; min-inline-size: 8rem !important; max-inline-size: 10.75rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .dbc-desktop-nav { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; inline-size: max-content !important; max-inline-size: 100% !important; margin: 0 !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .dbc-header-actions { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; margin: 0 !important; } } @media (min-width: 861px) and (max-height: 760px) { body.v270-site .dbc-desktop-mega__inner { min-block-size: 0; padding-block: 1rem 1.1rem; } body.v270-site .dbc-desktop-mega__intro::before { margin-block-end: .75rem; } body.v270-site .dbc-desktop-mega__intro > p:not(.dbc-desktop-mega__eyebrow) { margin-block: .55rem .7rem; } body.v270-site .dbc-desktop-route { grid-template-rows: 4.6rem minmax(0, 1fr); block-size: 13.25rem; min-block-size: 13.25rem; } body.v270-site .dbc-desktop-route__copy { padding: .7rem .82rem .65rem; } body.v270-site .dbc-desktop-route__copy::before { left: .82rem; } body.v270-site .dbc-desktop-mega__quick > a, body.v270-site .dbc-desktop-mega__quick > a.dbc-desktop-mega__cta { min-block-size: 2.3rem; } } @media (min-width: 861px) and (max-width: 1180px) { body.v270-site .dbc-desktop-mega__quick { grid-template-columns: auto repeat(var(--dbc-nav-quick-count, 5), minmax(0, 1fr)); } } @media (min-width: 861px) and (max-height: 620px) { body.v270-site .dbc-desktop-mega__inner { padding-block: .8rem .9rem; } body.v270-site .dbc-desktop-route { grid-template-rows: 4rem minmax(0, 1fr); block-size: 11.75rem; min-block-size: 11.75rem; } body.v270-site .dbc-desktop-route__desc { line-height: 1.45; } } /* ---------- mobile navigation: independent composition ---------- */ @media (max-width: 860px) { body.v270-site .dbc-nav-overlay { overscroll-behavior: contain; scroll-padding-block-start: calc(4rem + env(safe-area-inset-top)); backdrop-filter: blur(10px) saturate(112%); -webkit-backdrop-filter: blur(10px) saturate(112%); } body.v270-site .dbc-nav-topbar { min-block-size: calc(4rem + env(safe-area-inset-top)); padding-block-start: env(safe-area-inset-top); } body.v270-site .dbc-nav-stage { padding-block-end: calc(3rem + env(safe-area-inset-bottom)); } body.v270-site .dbc-nav-primary button, body.v270-site .dbc-nav-card, body.v270-site .dbc-nav-quick > a, body.v270-site .dbc-nav-utilities a, body.v270-site .dbc-nav-back, body.v270-site .dbc-nav-close { touch-action: manipulation; } body.v270-site .dbc-nav-card__copy small { font-size: max(10px, .625rem); line-height: 1.25; } body.v270-site .dbc-nav-card__copy strong { font-size: max(15px, .94rem); line-height: 1.32; } body.v270-site .dbc-nav-card__copy em, body.v270-site .dbc-nav-primary__copy small, body.v270-site .dbc-nav-panel-head > p:last-child { font-size: max(12px, .75rem); line-height: 1.5; } body.v270-site .dbc-nav-quick > a, body.v270-site .dbc-nav-utilities a { min-block-size: 44px; font-size: max(12px, .75rem); } body.v270-site .dbc-nav-close, body.v270-site .dbc-nav-back { min-inline-size: 44px; min-block-size: 44px; } body.v270-site .dbc-nav-back { position: sticky; z-index: 4; top: calc(4rem + env(safe-area-inset-top)); inline-size: fit-content; margin-block: -1rem .9rem; padding-inline: .7rem; border: 1px solid rgba(7, 52, 95, .1); border-radius: 999px; background: rgba(248, 251, 253, .94); box-shadow: 0 8px 24px rgba(6, 31, 53, .07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.v270-site .dbc-nav-card__copy em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } html[lang="en"] body.v270-site .dbc-nav-overlay :is( p, h2, h3, small, strong, em, a, button ) { overflow-wrap: anywhere !important; word-break: normal !important; } } @media (max-width: 720px) { body.v270-site .dbc-nav-card { border-radius: 0; } } @media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) { body.v270-site .dbc-nav-topbar { min-block-size: calc(3.5rem + env(safe-area-inset-top)); } body.v270-site .dbc-nav-stage { padding-block-start: 1rem; } body.v270-site .dbc-nav-root-grid, body.v270-site .dbc-nav-panel-body { gap: 1.4rem; } body.v270-site :is(.dbc-nav-directory > h2, .dbc-nav-panel-head > h2) { font-size: clamp(1.75rem, 5.3vw, 2.35rem); } body.v270-site .dbc-nav-primary { margin-block-start: .65rem; } body.v270-site .dbc-nav-primary button { min-block-size: 3.45rem; } body.v270-site .dbc-nav-panel-body { margin-block-start: 1rem; } } @media (max-width: 360px) { html body.v270-site.dbc-global-nav-active .site-header.site-header .header-inner.header-inner { padding-inline: .55rem !important; column-gap: .3rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .brand-logos { inline-size: 6.55rem !important; min-inline-size: 6.55rem !important; max-inline-size: 6.55rem !important; } html body.v270-site.dbc-global-nav-active .dbc-header-actions .language-toggle.language-toggle { inline-size: 3.65rem !important; min-inline-size: 3.65rem !important; max-inline-size: 3.65rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .dbc-nav-trigger { min-inline-size: 4rem !important; padding-inline: .48rem !important; } body.v270-site .dbc-nav-stage { inline-size: calc(100% - 1.35rem); } } /* ---------- family context strip and mobile controls ---------- */ @media (max-width: 560px) { .v270-context__identity { display: none; } .v270-context__inner { grid-template-columns: 1fr; padding-block: 0; } .v270-context__links { padding-inline-end: .4rem; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.75rem), transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.75rem), transparent 100%); } .v270-context__links a { min-block-size: 44px; font-size: .75rem; } body.v270-site main :where(input, select, textarea) { font-size: 16px !important; } body.v270-site main :where(a[href], button, input, select, textarea) { touch-action: manipulation; } body.v270-site:not([data-v270-family="home"]) main h1 { max-inline-size: 100%; overflow-wrap: anywhere; } body.v270-site:not([data-v270-family="home"]) main :where(p, li, dd, figcaption, td, th) { overflow-wrap: anywhere; } body.v270-site main :where( .table-wrap, .matrix-scroll, .decision-table-wrap, .routing-table-wrap, .table-card ) { border-radius: 12px; } } @media (max-width: 760px) { body.v270-site.nav-editorial-page :is( h1, h2, h3, p, li, dd, dt, td, th, a, button, small, strong ) { word-break: normal !important; overflow-wrap: anywhere !important; } html[lang="en"] body.v270-site.nav-editorial-page :is( h1, h2, h3, p, li, dd, dt, td, th, a, button, small, strong ) { word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; } html body.newsroom-article-v233 #main-content .news-article-actions .news-article-action-pdf { block-size: auto !important; min-block-size: 44px !important; padding: .65rem .85rem !important; } body.v270-site .formal-site-footer .v270-footer-column.is-v270-open > a { min-block-size: 44px !important; } body.v270-site .v270-visual-disclaimer { inset: .65rem .65rem auto; max-inline-size: min(32rem, calc(100% - 1.3rem)); padding: .65rem .72rem; font-size: 12px; line-height: 1.45; } } /* ---------- homepage: stronger editorial readability below the locked hero ---------- */ @media (min-width: 701px) { body.home-v271 .v271-business-node > span, body.home-v271 .v271-business-applications a > span { font-size: 10px; } body.home-v271 .v271-business-node > small { font-size: 12px; line-height: 1.52; } body.home-v271 .v271-business-applications a > strong { font-size: 14.5px; } body.home-v271 .v271-business-applications a > small { font-size: 11.5px; line-height: 1.48; } body.home-v271 .v271-news-item p { font-size: 10.5px; } body.home-v271 .v271-news-item h3 { font-size: 15px; line-height: 1.34; } body.home-v271 .v271-news-item small { font-size: 12px; line-height: 1.42; } } @media (max-width: 700px) { body.v270-site.home-v262.home-v271 .v260-news-record { display: grid; min-block-size: 0; grid-template-columns: 1fr; gap: 16px; } body.v270-site.home-v262.home-v271 .v260-news-record figure { inline-size: 100%; block-size: auto; min-block-size: 0; max-block-size: none; aspect-ratio: 16 / 10; } body.v270-site.home-v262.home-v271 .v260-news-record h3 { font-size: 20px; line-height: 1.28; } body.v270-site.home-v262.home-v271 .v260-news-record small { font-size: 13px; line-height: 1.55; } body.v270-site.home-v262.home-v271 .v260-news-record > div > p { font-size: 10.5px; } body.v270-site.home-v262 .v261-mechanism__head p { font-size: 10.5px; } body.v270-site.home-v262 .v261-mechanism__steps strong, body.v270-site.home-v262 .v261-mechanism.v260-strength__media figcaption span, body.v270-site.home-v262 .v260-capability-path a > strong { font-size: 12px; } body.v270-site.home-v262 .v261-afteruse > div strong, body.v270-site.home-v262 .v262-afteruse-boundary { font-size: 12px; } body.v270-site.home-v262 .v261-afteruse li { font-size: 11.5px; } body.v270-site.home-v262 .v260-strength__media { min-block-size: 460px; } body.home-v271 .v271-business-node, body.home-v271 .v271-business-applications > a, body.home-v271 .v271-news-item, body.home-v271 .v271-news-portals > a { touch-action: manipulation; } body.home-v271 .v271-business-node > i, body.home-v271 .v271-business-applications a > i, body.home-v271 .v271-news-item > i { font-size: 1rem; } body.home-v271 .v260-footer__brand p { font-size: 12.5px; line-height: 1.55; } body.home-v271 .v260-footer__primary a { min-block-size: 44px; font-size: 12px; } body.home-v271 .v260-footer__legal { padding-block-end: env(safe-area-inset-bottom); font-size: 10.5px; } } @media (max-width: 420px) { body.home-v271 .v271-news-item { grid-template-columns: 96px minmax(0, 1fr) 14px; gap: 10px; } body.home-v271 .v271-news-item figure { inline-size: 96px; block-size: 68px; } } @media (max-width: 380px) { body.v270-site.home-v262.home-v271 .v260-news-record figure { block-size: auto; aspect-ratio: 16 / 10; } } /* The approved portrait and desktop hero stay untouched. On a short landscape phone the chapter becomes a deliberate scroll composition so no copy is clipped merely because the browser height is small. */ @media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) { html body.home-v271.home-v23 #main-content > .v23-hero.v23-hero, html body.home-v271.home-v23 #main-content .v23-hero__copy.v240-hero__copy { min-block-size: 31rem !important; } html body.home-v271.home-v23 #main-content .v23-hero__copy.v240-hero__copy, html[lang="en"] body.home-v271.home-v23 #main-content .v23-hero__copy.v240-hero__copy { padding: 12.5rem 1.25rem 2.25rem !important; } } /* Wide phones in landscape are still touch devices. They use the mobile overlay and naturally sized homepage chapters even when their CSS width is greater than the normal 860px breakpoint. */ @media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) { body.v270-site .dbc-desktop-nav, body.v270-site .dbc-desktop-mega-layer { display: none !important; } body.v270-site .dbc-nav-trigger { display: inline-flex !important; } body.v270-site .dbc-nav-overlay[hidden] { display: none !important; } body.v270-site .dbc-nav-overlay:not([hidden]) { display: block !important; } body.v270-site .dbc-nav-overlay { scroll-padding-block-start: calc(3.5rem + env(safe-area-inset-top)); backdrop-filter: blur(10px) saturate(112%); -webkit-backdrop-filter: blur(10px) saturate(112%); } body.v270-site .dbc-nav-topbar { min-block-size: calc(3.5rem + env(safe-area-inset-top)); padding-block-start: env(safe-area-inset-top); } body.v270-site .dbc-nav-back { position: sticky; z-index: 4; top: calc(3.5rem + env(safe-area-inset-top)); min-inline-size: 44px; min-block-size: 44px; inline-size: fit-content; margin-block: -.5rem .75rem; padding-inline: .7rem; border: 1px solid rgba(7, 52, 95, .1); border-radius: 999px; background: rgba(248, 251, 253, .94); box-shadow: 0 8px 24px rgba(6, 31, 53, .07); } html body.v270-site.dbc-global-nav-active .site-header.site-header .header-inner.header-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; min-block-size: 4rem !important; padding: .5rem .875rem !important; column-gap: .625rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .brand-logos { grid-column: 1 !important; justify-self: start !important; inline-size: 8rem !important; min-inline-size: 8rem !important; max-inline-size: 8rem !important; } html body.v270-site.dbc-global-nav-active .site-header.site-header .dbc-header-actions { grid-column: 2 !important; justify-self: end !important; margin: 0 !important; } body.v270-site .dbc-nav-stage { inline-size: min(100% - 2.5rem, 52rem); padding-block: 1rem calc(2rem + env(safe-area-inset-bottom)); } body.v270-site .dbc-nav-root-grid, body.v270-site .dbc-nav-panel-body { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; } body.v270-site .dbc-nav-panel-body { margin-block-start: 1rem; } body.v270-site .dbc-nav-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } body.v270-site .dbc-nav-quick { padding: 1rem 0 0; border-block-start: 1px solid var(--dbc-nav-line); border-inline-start: 0; } body.home-v271 #main-content > .v260-screen, body.home-v271 :is( .v260-strength__stage, .v260-business__stage, .v260-updates, .v260-updates__stage ) { block-size: auto; min-block-size: auto; } body.home-v271 #main-content > .v260-screen { overflow: clip; } } /* ---------- inner-page mobile polish ---------- */ @media (max-width: 720px) { body.v270-site:not([data-v270-family="home"]) main :where( .formal-actions, .v245-actions, .resource-actions, .news-article-actions ) { flex-wrap: wrap; } body.v270-site:not([data-v270-family="home"]) main :where( .formal-actions, .v245-actions, .resource-actions, .news-article-actions ) > :where(a, button) { min-block-size: 44px; max-inline-size: 100%; } body.v270-site .news-article-body, body.v270-site .news-article-content { inline-size: 100%; max-inline-size: 100%; } body.v270-site :where(.news-original-figure, .openai-news-image, .news-article-body figure) { max-inline-size: 100%; margin-inline: 0; } body.v270-site .formal-site-footer { padding-block-end: env(safe-area-inset-bottom); } } @media (prefers-reduced-motion: reduce) { body.v270-site .dbc-desktop-mega, body.v270-site .dbc-nav-overlay, body.v270-site .dbc-nav-view { scroll-behavior: auto !important; } }