/* DBC / BIOTEN V7.7.0 — full-site logic and visual quality layer * Design dials: variance 6 / motion 4 / density 4. * This file is intentionally the final stylesheet in every document. */ html[data-v770-release="fullsite-logic-visual-quality-v7.7.0"] { --v770-font-sans: "Aptos", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif; --v770-font-display: "Aptos Display", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --v770-ink: #102c3b; --v770-copy: #425d69; --v770-muted: #6d8189; --v770-paper: #fbfcfa; --v770-surface: #ffffff; --v770-line: rgba(18, 59, 74, .14); --v770-line-strong: rgba(18, 59, 74, .24); --v770-blue: #075fa8; --v770-navy: #092f47; --v770-green: #058b69; --v770-emerald: #0aa67d; --v770-paper-brown: #8d704d; --v770-radius-media: 14px; --v770-radius-card: 16px; --v770-radius-panel: 24px; --v770-shadow: 0 18px 48px rgba(15, 54, 70, .075); --v770-shadow-hover: 0 24px 62px rgba(15, 54, 70, .11); --v770-focus: #11a982; --v770-page-pad: max(24px, calc((100vw - 1180px) / 2)); --v770-ease: cubic-bezier(.22, 1, .36, 1); color-scheme: light; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; } html[data-v770-release] body { color: var(--v770-copy); font-family: var(--v770-font-sans); -webkit-font-smoothing: antialiased; } html[data-v770-release] body[data-v710-family] { --v770-family-accent: var(--v770-blue); --v770-family-deep: var(--v770-navy); --v770-family-soft: #eef5f8; } html[data-v770-release] body[data-v710-family="bioten"] { --v770-family-accent: var(--v770-green); --v770-family-deep: #073e46; --v770-family-soft: #edf8f4; } html[data-v770-release] body[data-v710-family="packaging"] { --v770-family-accent: #397d5d; --v770-family-deep: #193a35; --v770-family-soft: #f5f2ea; } html[data-v770-release] body[data-v710-family="developer"] { --v770-family-accent: #18b98c; --v770-family-deep: #072c3d; --v770-family-soft: #edf5f5; } html[data-v770-release] body[data-v710-family="news"] { --v770-family-accent: #0879b7; --v770-family-deep: #082f43; --v770-family-soft: #f1f5f5; } html[data-v770-release] body[data-v710-family="evidence"] { --v770-family-accent: #087b71; --v770-family-deep: #0b3741; --v770-family-soft: #eff6f4; } html[data-v770-release] body[data-v710-family="conversion"] { --v770-family-accent: #086ca5; --v770-family-deep: #0b3349; --v770-family-soft: #f2f6f7; } /* Typography hierarchy: remove the legacy forced blue pulse and let families speak. */ html[data-v770-release] body[class][data-v710-family] main :is(h1, h2, h3) { color: var(--v770-ink); font-family: var(--v770-font-display); font-synthesis: none; text-wrap: balance; } html[data-v770-release] body[class][data-v710-family] main h1 { letter-spacing: -.045em; } html[data-v770-release] body[class][data-v710-family] main h2 { color: var(--v770-ink) !important; font-size: clamp(1.82rem, 2.6vw, 2.75rem) !important; font-weight: 620 !important; letter-spacing: -.036em !important; line-height: 1.15 !important; } html[data-v770-release] body[class][data-v710-family] main h3 { font-weight: 620 !important; letter-spacing: -.018em !important; line-height: 1.32 !important; } html[data-v770-release] body[class][data-v710-family] main h2::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; animation: none !important; } html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is(p, li, dd) { line-height: 1.72; text-wrap: pretty; } html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is( .v500-kicker, .v520-kicker, .brand510-kicker, .dv2-kicker, .dev740-kicker, .v750-kicker, .home-eyebrow, .eyebrow ) { color: var(--v770-family-accent) !important; font-size: .69rem !important; font-weight: 720 !important; letter-spacing: .13em !important; line-height: 1.45 !important; } /* Stable focus visibility and skip navigation across every page family. */ html[data-v770-release] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--v770-focus) !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #fff !important; } html[data-v770-release] body .skip-link:focus, html[data-v770-release] body .skip-link:focus-visible { position: fixed !important; z-index: 100000 !important; top: 12px !important; left: 12px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; transform: none !important; color: #fff !important; background: #08384f !important; border-radius: 8px !important; } html[data-v770-release] body .btp580-button:focus-visible, html[data-v770-release] body .btp730-button:focus-visible { outline: 3px solid #12ad83 !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #fff !important; } /* Shared material quality: restrained geometry, one shadow language. */ html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is( .v500-card, .v500-route, .v520-detail-card, .v520-application-card, .brand510-capability-grid > article, .brand510-product-grid > article, .dv2-detail-group, .dv2-solution, .dv21-problem-grid > article, .dv21-deep-links > a, .dv42-handoff-grid > article, .knowledge-topic-card, .knowledge-feature, .entry-card, .resources-card, .routing-card, .request-card, .contact-form-card, .contact-check-card ) { border-color: var(--v770-line) !important; border-radius: var(--v770-radius-card) !important; box-shadow: var(--v770-shadow) !important; } html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is( .v500-route img, .v500-hero__visual img, .v520-pkg-hero__visual, .v520-pkg-hero__visual img, .brand510-hero__media, .brand510-hero__media img, .dv2-hero__visual, .dv2-hero__visual img, .dev740-hero__visual, .dev740-hero__visual img, .resource-hero-board, .resources-card img ) { border-radius: var(--v770-radius-media) !important; } @media (hover: hover) and (pointer: fine) { html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is( .v500-card, .v500-route, .v520-detail-card, .v520-application-card, .brand510-capability-grid > article, .brand510-product-grid > article, .dv21-deep-links > a, .knowledge-topic-card, .resources-card, .routing-card, .request-card ) { transition: border-color 220ms ease, box-shadow 380ms var(--v770-ease), transform 380ms var(--v770-ease); } html[data-v770-release] body[data-v710-family]:not([data-v710-family="home"]) main :is( .v500-card, .v500-route, .v520-detail-card, .v520-application-card, .brand510-capability-grid > article, .brand510-product-grid > article, .dv21-deep-links > a, .knowledge-topic-card, .resources-card, .routing-card, .request-card ):hover { border-color: color-mix(in srgb, var(--v770-family-accent) 34%, transparent) !important; box-shadow: var(--v770-shadow-hover) !important; transform: translateY(-2px); } } /* Dark family sections must never inherit the legacy dark-blue heading color. */ html[data-v770-release] body[class] main :is( .v520-pkg-system, .brand510-section--dark, .dv2-final, .dev740-final, .dev740-evidence ) :is(h2, h3, strong) { color: #f7fbfa !important; } html[data-v770-release] body[class] main :is( .v520-pkg-system, .brand510-section--dark, .dv2-final, .dev740-final, .dev740-evidence ) :is(p, li, dd) { color: rgba(241, 248, 247, .76) !important; } /* `.v520-final` is dark by default, but BIOTEN application pages deliberately restyle it as a light close. Keep the dark-family guard everywhere else and let the application-family palette own its light variant. */ html[data-v770-release] body[class]:not(.bioten-family-v7160.v520-app) main .v520-final :is(h2, h3, strong) { color: #f7fbfa !important; } html[data-v770-release] body[class]:not(.bioten-family-v7160.v520-app) main .v520-final :is(p, li, dd) { color: rgba(241, 248, 247, .76) !important; } html[data-v770-release] body.v520-pkg main .v520-pkg-system, html[data-v770-release] body.v520-pkg main .v520-final { background: #1b3532 !important; } html[data-v770-release] body[class] main .brand510-section--dark { background: #092f43 !important; } /* Contact and project-intake pages use one aligned shell and one primary action. */ html[data-v770-release] body.contact-suite-page main > :is(.home-band, .v281-path) { padding-inline: var(--v770-page-pad) !important; } html[data-v770-release] body.contact-suite-page main > .home-band > :is( .home-shell, .formal-shell, .request-shell, .bioten-lab-section-inner, .about-section-inner ) { width: min(1180px, 100%) !important; margin-inline: auto !important; } html[data-v770-release] body.contact-suite-page #contact-form { background: #f4f7f6 !important; } html[data-v770-release] body.contact-suite-page .contact-form-card { border-top: 3px solid var(--v770-family-accent) !important; } html[data-v770-release] body.contact-suite-page .contact-channel-grid > article:first-child, html[data-v770-release] body.contact-suite-page .contact-intent-grid > article:first-child { border-color: color-mix(in srgb, var(--v770-family-accent) 44%, transparent) !important; background: #fff !important; } /* Product decision path: crisp, compact and horizontally usable on small screens. */ html[data-v770-release] .v281-path__item { border-radius: 12px; } html[data-v770-release] .v281-path__copy strong { letter-spacing: -.01em; } /* Newsroom isolation: beat legacy global !important rules with a final scoped layer. */ html[data-v770-release] body.v750-site[class][data-v750-page] main .v750-selection { color: #eff8f7 !important; background: #082f43 !important; } html[data-v770-release] body.v750-site[class][data-v750-page] main .v750-selection :is(h2, h3, h3 a) { color: #fff !important; } html[data-v770-release] body.v750-site[class][data-v750-page] main .v750-selection :is( .v750-section-head > p, .v750-selection-card > div > p, .v750-selection-row p, .v750-index-cta p:not(.v750-kicker), .v750-meta ) { color: rgba(238, 248, 248, .72) !important; } html[data-v770-release] body.v750-site[class][data-v750-page] main .v750-selection :is(.v750-kicker, .v750-meta span:first-child) { color: #7fe0c3 !important; } html[data-v770-release] body.v750-site[class][data-v750-page] main .v750-selection :is(.v750-inline-link, .v750-primary-link) { color: #a7e6ff !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-card { background: #0a293a !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-card > div { padding: clamp(1.2rem, 2.1vw, 1.9rem) !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-card h3 { margin: 1rem 0 .72rem !important; font-size: clamp(1.16rem, 1.55vw, 1.55rem) !important; line-height: 1.35 !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-row h3 { color: #fff !important; font-size: clamp(1.08rem, 1.55vw, 1.48rem) !important; line-height: 1.42 !important; } html[data-v770-release] body.v750-site[class] main .v750-index-cta h3 { color: #fff !important; font-size: clamp(1.8rem, 3vw, 3.1rem) !important; } html[data-v770-release] body.v750-site[class] main .v750-index-item__copy h3 { margin: 0 0 .58rem !important; color: var(--v770-ink) !important; font-size: clamp(1.18rem, 1.7vw, 1.58rem) !important; line-height: 1.38 !important; } html[data-v770-release] body.v750-site[class] main .v750-index-item__copy h3 a { color: inherit !important; } html[data-v770-release] body.v750-site[class][data-v750-page="article"] main .v750-article-hero h1 { color: #102c3b !important; font-size: clamp(2.65rem, 5.4vw, 5.45rem) !important; font-weight: 620 !important; line-height: 1.035 !important; } html[data-v770-release] body.v750-site[class][data-v750-page="article"] main :is( .news-body[data-v750-original-cn] .news-content > h2, .v750-article-en__content > h2 ) { color: #102c3b !important; font-size: clamp(1.62rem, 2.35vw, 2.25rem) !important; font-weight: 630 !important; line-height: 1.26 !important; } html[data-v770-release] body.v750-site .v750-footer { color: rgba(238, 248, 248, .76) !important; background: #082f43 !important; } html[data-v770-release] body.v750-site .v750-footer .v750-footer__nav h2 { margin: 0 0 1rem !important; padding: 0 !important; color: #7fe0c3 !important; font-size: .72rem !important; font-weight: 740 !important; letter-spacing: .12em !important; line-height: 1.4 !important; text-transform: uppercase; } html[data-v770-release] body.v750-site .v750-footer .v750-footer__nav h2::before { content: none !important; display: none !important; } html[data-v770-release] body.v750-site .v750-footer :is(a, p, span) { color: rgba(238, 248, 248, .72) !important; } html[data-v770-release] body.v750-site .v750-footer a:hover { color: #fff !important; } /* Long-form newsroom assistance, generated progressively by site-v770-quality.js. */ .v770-reading-progress { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; background: transparent; } .v770-reading-progress > span { display: block; width: 0; height: 100%; background: #0aa67d; transform-origin: 0 50%; } .v770-article-toc { width: min(760px, calc(100% - 2rem)); margin: 0 auto; padding: 1.1rem 0; border-top: 1px solid var(--v770-line-strong); border-bottom: 1px solid var(--v770-line); } .v770-article-toc summary { min-height: 44px; cursor: pointer; color: var(--v770-ink); font-size: .78rem; font-weight: 720; letter-spacing: .08em; line-height: 44px; text-transform: uppercase; } .v770-article-toc ol { display: grid; gap: .55rem; margin: .5rem 0 .8rem; padding-left: 1.3rem; } .v770-article-toc a { color: var(--v770-blue); font-size: .86rem; line-height: 1.55; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Explicit language boundary for forms that are still Chinese-only. */ .v770-language-boundary { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: .72rem 0; border-bottom: 1px solid var(--v770-line); color: var(--v770-muted); font-size: .76rem; line-height: 1.55; } /* Mobile refinement: preserve professional detail without endless card stacking. */ @media (max-width: 760px) { html[data-v770-release] { --v770-page-pad: 16px; } html[data-v770-release] body[class][data-v710-family] main h2 { font-size: clamp(1.65rem, 7.7vw, 2.2rem) !important; letter-spacing: -.034em !important; } html[data-v770-release] body[class][data-v710-family] main h3 { overflow-wrap: anywhere; } html[data-v770-release] body.v750-site[class] main .v750-selection { padding-inline: 16px !important; } html[data-v770-release] body.v750-site[class] main .v750-selection__cards { display: grid !important; grid-auto-columns: min(82vw, 320px); grid-auto-flow: column; grid-template-columns: none !important; gap: 12px !important; margin-inline: -16px; padding: 0 16px 12px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; background: transparent !important; border: 0 !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-card { scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--v770-radius-card) !important; overflow: hidden; } html[data-v770-release] body.v750-site[class] main .v750-selection-row { grid-template-columns: 1fr auto !important; gap: .8rem 1rem !important; min-height: 0 !important; padding-block: 1.15rem !important; } html[data-v770-release] body.v750-site[class] main .v750-selection-row .v750-meta { grid-column: 1 / -1; } html[data-v770-release] body.v750-site[class] main .v750-selection-row h3 { grid-column: 1; } html[data-v770-release] body.v750-site[class][data-v750-page="article"] main .v750-article-hero h1 { font-size: clamp(2.15rem, 10.2vw, 3.3rem) !important; overflow-wrap: anywhere; } html[data-v770-release] body[data-v710-family="developer"] main :is( .dev740-engine__rail, .dv2-local-nav__inner, .dv21-domain-stages, .dv2-workflow, .v281-path ol ) { scrollbar-width: thin; } html[data-v770-release] body[data-v710-family="developer"] main :is( .dev740-engine__rail, .dv21-domain-stages, .dv2-workflow )::after { content: "左右滑动查看更多"; display: block; flex: 0 0 auto; align-self: center; padding: 0 14px; color: rgba(230, 244, 244, .62); font-size: .7rem; white-space: nowrap; } html[data-v770-release] body.contact-suite-page main > :is(.home-band, .v281-path) { padding-inline: 16px !important; } html[data-v770-release] .v770-language-boundary { width: calc(100% - 2rem); } } /* Evidence-family hero: turn the legacy empty right field into a restrained method map. */ @media (min-width: 861px) { html[data-v770-release][data-v770-release] body[data-v710-family="evidence"][data-v280-archetype="knowledge-base"] main .knowledge-suite-hero.knowledge-suite-hero:not(:has(.v280-knowledge-map)) { overflow: hidden; isolation: isolate; background: linear-gradient(90deg, #fbfcfa 0 57%, rgba(230, 241, 243, .96) 57% 100%) !important; } html[data-v770-release][data-v770-release] body[data-v710-family="evidence"][data-v280-archetype="knowledge-base"] main .knowledge-suite-hero.knowledge-suite-hero:not(:has(.v280-knowledge-map))::after { content: "01 METHOD 方法\A 02 STANDARD 标准\A 03 SCOPE 范围\A 04 EVIDENCE 证据" !important; position: absolute !important; z-index: 2 !important; top: 50% !important; left: auto !important; right: max(32px, calc((100vw - 1180px) / 2)) !important; box-sizing: border-box !important; width: min(32vw, 420px) !important; height: 258px !important; padding: 31px 34px !important; display: grid !important; align-content: center !important; transform: translateY(-50%) !important; border: 1px solid rgba(12, 86, 102, .18) !important; border-radius: 22px !important; color: rgba(12, 73, 91, .72) !important; background: radial-gradient(circle at 82% 24%, rgba(10, 166, 125, .16) 0 3px, transparent 4px), radial-gradient(circle at 70% 68%, rgba(7, 95, 168, .14) 0 4px, transparent 5px), linear-gradient(rgba(14, 83, 102, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 83, 102, .065) 1px, transparent 1px), rgba(255, 255, 255, .62) !important; background-size: auto, auto, 34px 34px, 34px 34px, auto !important; box-shadow: 0 24px 68px rgba(12, 67, 79, .08) !important; font-family: var(--v770-font-sans) !important; font-size: .73rem !important; font-weight: 720 !important; letter-spacing: .12em !important; line-height: 3.05 !important; white-space: pre !important; } } @media (max-width: 860px) { html[data-v770-release] body[data-v710-family="evidence"][data-v280-archetype="knowledge-base"] main .knowledge-suite-hero::after { display: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-v770-release] *, html[data-v770-release] *::before, html[data-v770-release] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html[data-v770-release] :is( [data-v750-reveal], .v520-reveal, .btp580-reveal, .dev740-reveal ) { opacity: 1 !important; transform: none !important; } } @media print { .v770-reading-progress, .v770-article-toc, .v770-language-boundary { display: none !important; } } /* Final cascade hardening for legacy selectors with repeated body specificity. */ html[data-v770-release][data-v770-release] body[class][class][class] a.skip-link.skip-link:focus, html[data-v770-release][data-v770-release] body[class][class][class] a.skip-link.skip-link:focus-visible { position: fixed !important; z-index: 100000 !important; top: 12px !important; left: 12px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; color: #fff !important; background: #08384f !important; border-radius: 8px !important; } html[data-v770-release][data-v770-release] body[class][class][class] main :is(a, button).btp580-button.btp580-button:focus, html[data-v770-release][data-v770-release] body[class][class][class] main :is(a, button).btp580-button.btp580-button:focus-visible, html[data-v770-release][data-v770-release] body[class][class][class] main :is(a, button).btp730-button.btp730-button:focus, html[data-v770-release][data-v770-release] body[class][class][class] main :is(a, button).btp730-button.btp730-button:focus-visible { outline: 3px solid #12ad83 !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(18, 173, 131, .34) !important; } html[data-v770-release][data-v770-release] body.v520-site.v520-pkg[class][class] main .v520-pkg-system.v520-pkg-system .v520-section-head.v520-section-head h2, html[data-v770-release][data-v770-release] body.v520-site.v520-pkg[class][class] main .v520-final.v520-final :is(h2, h3, strong) { color: #f7fbfa !important; } /* Contact routing: enforce the intended 3+2 and four-column compositions. */ @media (min-width: 1100px) { html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid > article { grid-column: span 2 !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid > article:nth-last-child(-n + 2) { grid-column: span 3 !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .bioten-faq-grid.bioten-faq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 761px) and (max-width: 1099px) { html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main :is(.contact-channel-grid, .contact-intent-grid, .bioten-faq-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid > article { grid-column: auto !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid > article:last-child { grid-column: 1 / -1 !important; } } @media (max-width: 760px) { html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main :is(.contact-channel-grid, .contact-intent-grid, .bioten-faq-grid) { grid-template-columns: 1fr !important; } html[data-v770-release][data-v770-release] body.contact-suite-page[class][class] main .contact-intent-grid.contact-intent-grid > article { grid-column: auto !important; } }