/* * DBC / BIOTEN V5.6.0 * Mobile brand refinement layer. * * Loaded after V5.5.0. This release protects the confirmed desktop layout, * homepage copy and particle choreography. It only refines touch ergonomics, * mobile typography, page-family rhythm and brand-specific contrast. */ @media (max-width: 980px) { html[data-v560-release] { --v560-header-height: calc(65px + env(safe-area-inset-top)); --v560-ink: #102b3b; --v560-copy: #526774; --v560-line: rgba(17, 53, 73, .12); --v560-blue: #0b62a5; --v560-green: #0b8564; --v560-focus: #0a70bc; --v560-radius: 18px; --v560-shadow: 0 18px 46px rgba(17, 48, 66, .085); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html[data-v560-release], html[data-v560-release] body { max-width: 100%; overflow-x: clip; } html[data-v560-release] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html[data-v560-release] body :is(h1, h2, h3) { overflow-wrap: normal; word-break: normal; text-wrap: balance; } html[data-v560-release] body :is(p, li, dd, figcaption) { text-wrap: pretty; } html[data-v560-release] body :is(a, button, input, select, textarea, summary) { touch-action: manipulation; } html[data-v560-release] body :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--v560-focus); outline-offset: 3px; } html[data-v560-release] body:is(.bioten-platform-v503, .dev504-page) { --v560-focus: #7de8d8; } /* Keep anchored content below the shared header and any local context rail. */ html[data-v560-release] body main :is(section, article, div)[id] { scroll-margin-top: 128px; } html[data-v560-release] body.dbc-home-page main > section[id] { scroll-margin-top: var(--v560-header-height); } html[data-v560-release] body main :target :is(.v260-reveal, .v520-reveal, .btp-reveal, .dev504-reveal), html[data-v560-release] body main :target:is(.v260-reveal, .v520-reveal, .btp-reveal, .dev504-reveal) { opacity: 1 !important; transform: none !important; } } @media (max-width: 720px) { html[data-v560-release] { --v560-page-pad: 16px; --v560-section-space: 62px; scroll-padding-top: var(--v560-header-height); } /* Header: enlarge the BIOTEN logo hit area without visually enlarging it. */ html[data-v560-release] body.dbc-global-nav-active .site-header { border-bottom: 1px solid rgba(19, 55, 74, .075); background: rgba(250, 252, 251, .92) !important; box-shadow: 0 10px 34px rgba(20, 47, 63, .055) !important; -webkit-backdrop-filter: blur(22px) saturate(140%) !important; backdrop-filter: blur(22px) saturate(140%) !important; } html[data-v560-release] body.dbc-global-nav-active .site-header .header-inner { min-height: 65px !important; padding: 8px 12px !important; } html[data-v560-release] body.dbc-global-nav-active .site-header .brand-logos { gap: 5px !important; } html[data-v560-release] body.dbc-global-nav-active .site-header .brand-logos > a { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px; } html[data-v560-release] body.dbc-global-nav-active .site-header .brand-logos > a:first-child { justify-content: flex-start; } html[data-v560-release] body.dbc-global-nav-active .dbc-nav-trigger { min-width: 70px !important; min-height: 44px !important; border: 1px solid rgba(15, 81, 121, .15) !important; border-radius: 999px !important; background: rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 7px 20px rgba(23, 58, 77, .06) !important; } html[data-v560-release] body.dbc-global-nav-active .dbc-nav-trigger[aria-expanded="true"] { border-color: rgba(11, 98, 165, .24) !important; background: #fff !important; } /* Mobile navigation: one calm selection state and one unambiguous focus ring. */ html[data-v560-release] body .dbc-nav-overlay { min-height: 100dvh; background: radial-gradient(circle at 100% 0, rgba(11, 133, 100, .07), transparent 30%), rgba(248, 251, 250, .985) !important; } html[data-v560-release] body .dbc-nav-stage { padding-top: 20px !important; } html[data-v560-release] body .dbc-nav-primary { display: grid; gap: 4px; } html[data-v560-release] body .dbc-nav-primary button { min-height: 64px !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important; } html[data-v560-release] body .dbc-nav-primary button:is(:hover, :active) { border-color: rgba(15, 81, 121, .1) !important; background: rgba(255, 255, 255, .62) !important; } html[data-v560-release] body .dbc-nav-primary button.is-current { border-color: transparent !important; background: linear-gradient(90deg, rgba(11, 98, 165, .09), rgba(255, 255, 255, .66)) !important; box-shadow: inset 3px 0 #0b62a5, 0 0 0 1px rgba(11, 98, 165, .14) !important; } html[data-v560-release] body .dbc-nav-primary button:nth-child(2).is-current, html[data-v560-release] body .dbc-nav-primary button:nth-child(3).is-current { border-color: transparent !important; background: linear-gradient(90deg, rgba(11, 133, 100, .09), rgba(255, 255, 255, .66)) !important; box-shadow: inset 3px 0 #0b8564, 0 0 0 1px rgba(11, 133, 100, .14) !important; } html[data-v560-release] body .dbc-nav-primary button:focus-visible { outline: 2px solid var(--v560-focus) !important; outline-offset: 2px !important; } html[data-v560-release] body :is(.dbc-nav-back, .dbc-nav-close):focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(11, 98, 165, .12) !important; } html[data-v560-release] body .dbc-nav-primary button.is-current:focus-visible { outline: none !important; } html[data-v560-release] body .dbc-nav-primary button.is-current::before { content: none !important; display: none !important; } html[data-v560-release] body .dbc-nav-card { overflow: hidden; border: 1px solid rgba(18, 55, 75, .1) !important; border-radius: 15px !important; background: rgba(255, 255, 255, .78) !important; box-shadow: 0 14px 34px rgba(18, 52, 70, .055) !important; } html[data-v560-release] body .dbc-nav-card__media { border-radius: 11px !important; } html[data-v560-release] body .dbc-nav-card__media img { transform: scale(1.01); } html[data-v560-release] body :is(.dbc-nav-back, .dbc-nav-close) { min-width: 44px !important; min-height: 44px !important; border-radius: 999px !important; } /* Horizontal context rails: full touch targets and a deliberate next-item cue. */ html[data-v560-release] body .v270-context__inner { min-height: 54px !important; padding-inline: 12px !important; } html[data-v560-release] body .v270-context__links { gap: 4px !important; padding-right: 24px !important; scroll-padding-inline: 4px 24px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); } html[data-v560-release] body .v270-context__links a { min-height: 44px !important; padding-inline: 12px !important; border-radius: 999px; scroll-snap-align: start; } html[data-v560-release] body .v270-context__links a[aria-current="page"] { background: rgba(11, 98, 165, .075); } html[data-v560-release] body.brand510-site .brand510-localnav { position: sticky !important; top: var(--v560-header-height) !important; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--brand510-line) 80%, transparent) !important; background: color-mix(in srgb, var(--brand510-paper) 91%, transparent) !important; -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); } html[data-v560-release] body.brand510-site .brand510-localnav__inner { display: block !important; width: 100% !important; min-height: 52px !important; padding: 4px 14px !important; } html[data-v560-release] body.brand510-site .brand510-localnav strong { display: none !important; } html[data-v560-release] body.brand510-site .brand510-localnav nav { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 4px !important; overflow-x: auto; padding-right: 22px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } html[data-v560-release] body.brand510-site .brand510-localnav nav::-webkit-scrollbar { display: none; } html[data-v560-release] body.brand510-site .brand510-localnav a { flex: 0 0 auto; min-height: 44px; padding: 0 11px; display: inline-flex; align-items: center; scroll-snap-align: start; white-space: nowrap; } html[data-v560-release] body.brand510-site .brand510-localnav a::after { bottom: 3px; } /* Shared mobile type and spacing: editorial, compact, never miniature. */ html[data-v560-release] body :is( .v500-hero h1, .v520-app-hero h1, .v520-pkg-hero h1, .v520-dev-hero h1, .v520-brand-detail-hero h1, .brand510-hero h1, .btp-hero h1 ) { font-size: clamp(34px, 9.8vw, 41px) !important; line-height: 1.075 !important; letter-spacing: -.045em !important; } html[data-v560-release] body :is( .v500-section__head h2, .v520-section-head h2, .brand510-section h2, .btp-section-head h2, .dev504-section__head h2, .dev504-composer__intro h2, .dev504-evidence__copy h2 ) { font-size: clamp(29px, 8vw, 35px) !important; line-height: 1.12 !important; letter-spacing: -.036em !important; } html[data-v560-release] body :is( .v500-hero__lead, .v520-app-hero__lead, .v520-pkg-hero__lead, .v520-dev-hero__lead, .v520-brand-detail-hero__lead, .brand510-hero__lead, .btp-hero__lead, .dev504-hero__lead ) { font-size: 15.5px !important; line-height: 1.72 !important; } html[data-v560-release] body :is(.v500-hero, .v520-app-hero, .v520-pkg-hero, .v520-dev-hero, .v520-brand-detail-hero) { padding-block: 44px 48px !important; } html[data-v560-release] body :is(.v500-section, .v520-section, .brand510-section, .btp-section, .dev504-section) { scroll-margin-top: 118px; } /* Actions: equal height, readable contrast and calm pressed feedback. */ html[data-v560-release] body :is(.v500-actions, .v520-actions, .brand510-actions, .btp-actions, .dev504-actions) { gap: 10px !important; } html[data-v560-release] body :is(.v500-button, .v520-action, .brand510-action, .btp-button, .dev504-button) { min-height: 48px !important; border-radius: 12px !important; font-size: 14px !important; } html[data-v560-release] body :is(.v500-button, .v520-action, .brand510-action, .btp-button, .dev504-button):active { transform: scale(.985) !important; } html[data-v560-release] body.v502-packaging-theme a.v500-button.v500-button--primary { border-color: #4b3a2b !important; background: #4b3a2b !important; color: #fffdf7 !important; text-shadow: none !important; box-shadow: 0 13px 28px rgba(64, 48, 31, .17) !important; } html[data-v560-release] body.v502-packaging-theme a.v500-button.v500-button:not(.v500-button--primary) { border-color: rgba(79, 61, 42, .26) !important; background: rgba(255, 253, 247, .8) !important; color: #443426 !important; } html[data-v560-release] body.bioten-platform-v503 .btp-button--light { border-color: rgba(255, 255, 255, .82) !important; background: #f0fbf7 !important; color: #062126 !important; box-shadow: 0 14px 30px rgba(4, 24, 27, .2) !important; } html[data-v560-release] body.dev504-page .dev504-main a.dev504-button--primary { border-color: #79e4d5 !important; background: #79e4d5 !important; color: #03201d !important; } html[data-v560-release] body.dev504-page .dev504-main a.dev504-button--quiet { border-color: rgba(195, 235, 226, .28) !important; background: rgba(233, 255, 249, .055) !important; color: #e8f5f1 !important; } /* Cards and media: one shared level of craft while keeping each palette. */ html[data-v560-release] body :is( .v500-card, .v500-route, .v520-application-card, .v520-detail-card, .v520-pkg-route, .brand510-card, .brand510-case ) { border-radius: var(--v560-radius) !important; } html[data-v560-release] body.v500-page .v500-hero__visual, html[data-v560-release] body.v500-page .v500-hero__visual img, html[data-v560-release] body.brand510-site .brand510-hero__visual, html[data-v560-release] body :is(.v520-app-hero__visual, .v520-pkg-hero__visual, .v520-brand-detail-hero__visual) { border-radius: 18px !important; } html[data-v560-release] body.v500-page .v500-card, html[data-v560-release] body.v500-page .v500-route { box-shadow: 0 14px 38px rgba(20, 49, 66, .06); } /* Locked homepage: only improve touch behavior and remove artificial mobile air. */ html[data-v560-release] body.dbc-home-page #bioten .v287-packaging__grid { scroll-snap-stop: always; } html[data-v560-release] body.dbc-home-page #bioten .v311-domain { border: 1px solid rgba(255, 255, 255, .6) !important; box-shadow: 0 18px 42px rgba(18, 44, 59, .12) !important; } html[data-v560-release] body.dbc-home-page #platform .v321-brand-deck, html[data-v560-release] body.dbc-home-page #platform .v322-bioten-panel, html[data-v560-release] body.dbc-home-page #updates .v330-feature { box-shadow: var(--v560-shadow) !important; } html[data-v560-release] body.dbc-home-page :is(#bioten, #platform, #updates).v260-screen { min-height: auto !important; } html[data-v560-release] body.dbc-home-page #platform .v321-portfolio__stage, html[data-v560-release] body.dbc-home-page #updates .v330-newsroom__stage { padding-bottom: 48px !important; } /* Newsroom: reduce empty hero space, strengthen card rhythm and metadata. */ html[data-v560-release] body.v450-site .v450-news-hero { min-height: 0 !important; height: auto !important; gap: 26px !important; padding: 54px 16px 44px !important; } html[data-v560-release] body.v450-site .v450-news-hero h1 { max-width: none !important; font-size: clamp(39px, 11vw, 46px) !important; line-height: 1 !important; letter-spacing: -.05em !important; } html[data-v560-release] body.v450-site .v450-news-hero__copy { padding-top: 18px !important; } html[data-v560-release] body.v450-site :is(.v450-news-featured, .v450-news-current, .v450-archive-list) { width: calc(100% - 32px) !important; padding-block: 52px !important; } html[data-v560-release] body.v450-site .v450-news-section-head { gap: 14px !important; margin-bottom: 26px !important; } html[data-v560-release] body.v450-site .v450-news-section-head h2 { font-size: clamp(30px, 8.6vw, 36px) !important; line-height: 1.08 !important; } html[data-v560-release] body.v450-site :is(.v450-news-lead, .v450-news-feature-card, .v450-news-card, .v450-archive-card) { overflow: hidden; border-radius: 16px !important; box-shadow: 0 14px 34px rgba(19, 53, 72, .065); } html[data-v560-release] body.v450-site .v450-news-lead { grid-template-rows: 14rem auto !important; } html[data-v560-release] body.v450-site .v450-news-lead__copy { padding: 22px !important; } html[data-v560-release] body.v450-site .v450-news-lead h2 { font-size: clamp(27px, 7.9vw, 34px) !important; line-height: 1.12 !important; } html[data-v560-release] body.v450-site .v450-news-feature-card { grid-template-columns: 104px minmax(0, 1fr) !important; gap: 14px !important; padding: 10px !important; } html[data-v560-release] body.v450-site .v450-news-feature-card__media { min-height: 112px !important; border-radius: 11px; } html[data-v560-release] body.v450-site .v450-news-meta { gap: 6px 10px !important; line-height: 1.5; } html[data-v560-release] body.v450-site .v450-news-card__body { padding: 20px !important; } html[data-v560-release] body.v450-site .v450-news-card__actions a, html[data-v560-release] body.v450-site .v450-news-text-link { min-height: 44px; display: inline-flex; align-items: center; } html[data-v560-release] body.v450-site .v450-news-filter, html[data-v560-release] body.v450-site .v450-archive-filter { gap: 7px !important; padding: 7px !important; border: 1px solid var(--v450-line) !important; border-radius: 14px !important; background: rgba(244, 248, 250, .78); } html[data-v560-release] body.v450-site .v450-news-filter button, html[data-v560-release] body.v450-site .v450-archive-filter button { min-height: 44px; padding: 8px 7px !important; border: 1px solid transparent !important; border-radius: 9px !important; } html[data-v560-release] body.v450-site .v450-news-filter button.is-active, html[data-v560-release] body.v450-site .v450-archive-filter button.is-active { border-color: rgba(15, 94, 168, .14) !important; background: #fff; box-shadow: 0 7px 18px rgba(20, 55, 75, .07); } /* Long-form reading: steady measure, clean title scale and compact PDF card. */ html[data-v560-release] body.news-article-page .news-original-hero { padding-block: 46px 38px !important; } html[data-v560-release] body.news-article-page .news-original-hero h1 { font-size: clamp(32px, 9vw, 38px) !important; line-height: 1.12 !important; letter-spacing: -.035em !important; } html[data-v560-release] body.news-article-page #main-content#main-content .news-hero-meta { display: flex !important; flex-wrap: wrap !important; gap: 7px 12px !important; } html[data-v560-release] body.news-article-page #main-content#main-content .news-hero-meta span::before, html[data-v560-release] body.news-article-page #main-content#main-content .news-hero-meta span::after { content: none !important; display: none !important; } html[data-v560-release] body.news-article-page .news-content-original { width: calc(100% - 32px) !important; } html[data-v560-release] body.news-article-page .news-content-original > p { color: #354c59; font-size: 16px !important; line-height: 1.84 !important; } html[data-v560-release] body.news-article-page .news-content-original > h2 { margin-top: 2.5rem !important; font-size: 27px !important; line-height: 1.24 !important; } html[data-v560-release] body.news-article-page .v270-static-pdf, html[data-v560-release] body.news-article-page .v450-article-document { border-radius: 15px !important; box-shadow: 0 12px 30px rgba(20, 55, 75, .055); } /* Contact, request, knowledge and resource families. */ html[data-v560-release] body.contact-suite-page main > .about-bioten-hero.news-list-hero, html[data-v560-release] body.resources-page main > .about-bioten-hero, html[data-v560-release] body.knowledge-suite-page main > .about-bioten-hero { min-height: 0 !important; padding: 52px 18px 48px !important; } html[data-v560-release] body.contact-suite-page main > .about-bioten-hero.news-list-hero h1, html[data-v560-release] body.resources-page main > .about-bioten-hero h1, html[data-v560-release] body.knowledge-suite-page main > .about-bioten-hero h1 { font-size: clamp(36px, 10vw, 42px) !important; line-height: 1.06 !important; letter-spacing: -.035em !important; } html[data-v560-release] body.sample-request-page .request-hero { padding: 42px 16px 32px !important; background: radial-gradient(circle at 92% 8%, rgba(9, 131, 98, .09), transparent 32%), linear-gradient(180deg, #fbfdfc, #f2f7f5) !important; } html[data-v560-release] body.sample-request-page .request-hero h1 { font-size: clamp(34px, 9.6vw, 40px) !important; line-height: 1.06 !important; letter-spacing: -.035em !important; } html[data-v560-release] body.sample-request-page main#main-content#main-content .request-hero h1 { font-size: clamp(40px, 11.6vw, 46px) !important; line-height: 1.03 !important; letter-spacing: -.045em !important; } html[data-v560-release] body.sample-request-page .request-shell { width: 100% !important; padding: 28px 14px 48px !important; } html[data-v560-release] body.sample-request-page :is(.request-card, .request-panel, .request-form, .bpv2-card) { max-width: 100%; overflow: hidden; border-radius: 16px !important; } html[data-v560-release] body :is(.contact-form, .request-form, form) :is(input, select, textarea) { min-height: 48px !important; border-color: rgba(27, 70, 94, .2) !important; border-radius: 11px !important; background: rgba(255, 255, 255, .92) !important; box-shadow: inset 0 1px 2px rgba(19, 48, 65, .035); } html[data-v560-release] body :is(.contact-form, .request-form, form) :is(input, select, textarea):focus { border-color: var(--v560-focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v560-focus) 14%, transparent) !important; } html[data-v560-release] body :is(.contact-form, .request-form, form) button[type="submit"] { min-height: 50px !important; border-radius: 12px !important; } html[data-v560-release] body.knowledge-suite-page :is(.faq-card, .faq-summary-panel, .faq-aside), html[data-v560-release] body.resources-page :is(.resource-card, .resource-hero-board, .resource-section) { border-radius: 16px !important; } html[data-v560-release] body.knowledge-suite-page .faq-card summary { min-height: 52px; padding-block: 16px !important; } /* Formal footer is already collapsible on phones; refine its density only. */ html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .formal-footer-cta { padding: 30px 0 !important; } html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .formal-footer-cta__actions a.formal-button { min-height: 48px !important; border-radius: 11px !important; } html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .footer-inner { padding: 24px 0 14px !important; } html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .v270-footer-toggle { min-height: 50px !important; } html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .footer-note { font-size: 12.5px !important; line-height: 1.65 !important; } html[data-v560-release] body:not(.dbc-home-page) footer.formal-site-footer .footer-bottom { padding-top: 18px !important; } } @media (max-width: 430px) { html[data-v560-release] { --v560-page-pad: 14px; } html[data-v560-release] body.dbc-global-nav-active .site-header .header-inner { padding-inline: 10px !important; } html[data-v560-release] body .dbc-nav-stage { width: calc(100% - 28px) !important; } html[data-v560-release] body .dbc-nav-card { grid-template-columns: 88px minmax(0, 1fr) !important; } html[data-v560-release] body .dbc-nav-card__media { width: 82px !important; } html[data-v560-release] body .dbc-nav-card__copy { padding: 14px 24px 14px 10px !important; } html[data-v560-release] body .dbc-nav-card__copy strong { font-size: 15.5px !important; } html[data-v560-release] body .dbc-nav-card__copy em { font-size: 11px !important; } html[data-v560-release] body.v450-site .v450-news-feature-card { grid-template-columns: 92px minmax(0, 1fr) !important; } html[data-v560-release] body.v450-site .v450-news-filter, html[data-v560-release] body.v450-site .v450-archive-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html[data-v560-release] body.dbc-home-page .v410-home-footer__column { display: grid !important; align-content: start; gap: 4px !important; } html[data-v560-release] body.dbc-home-page .v410-home-footer__column > a { width: 100% !important; min-height: 40px !important; padding: 8px 0 !important; } } @media (max-width: 350px) { html[data-v560-release] body.dbc-global-nav-active .site-header .brand-logos > a { min-width: 40px !important; } html[data-v560-release] body.dbc-global-nav-active .dbc-nav-trigger { min-width: 64px !important; } html[data-v560-release] body.v450-site .v450-news-feature-card, html[data-v560-release] body.v450-site .v450-archive-card { grid-template-columns: 82px minmax(0, 1fr) !important; } } @media (hover: none), (pointer: coarse) { html[data-v560-release] body :is(.v500-card, .v500-route, .v450-news-card, .brand510-card, .brand510-case):hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-v560-release] body *, html[data-v560-release] body *::before, html[data-v560-release] body *::after { scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce) { html[data-v560-release] body.dbc-global-nav-active .site-header, html[data-v560-release] body .dbc-nav-overlay, html[data-v560-release] body.brand510-site .brand510-localnav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }