/* * DBC / BIOTEN Packaging V7.31.8-R30 * Professional attraction, evidence navigation and conversion polish. * Local governance layer; no deployment status is implied. */ body[data-v7318-packaging-professional="r30"] { --bp-r30-ink: #123a36; --bp-r30-blue: #075ca8; --bp-r30-cyan: #0a8f83; --bp-r30-paper: #f8f5ed; --bp-r30-line: rgba(18, 58, 54, 0.14); --bp-r30-shadow: 0 18px 54px rgba(13, 50, 49, 0.09); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-display, .bp7140-section-title, .fs7301-hero h1, .fs7301-section-head h2) { text-wrap: balance; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-lead, .bp7140-section-head > p, .fs7301-lead, .fs7301-section-head > p) { text-wrap: pretty; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-context__inner > a, .fs7301-nav > a, .bp7140-button, .fs7301-button) { -webkit-tap-highlight-color: transparent; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-context__inner > a, .fs7301-nav > a):focus-visible, body[data-v7318-packaging-professional="r30"] :is(.bp7140-button, .fs7301-button, .request-hero-actions a, .bp7318-r30-method-card, .bp7318-r30-legacy__actions a):focus-visible { outline: 3px solid rgba(7, 92, 168, 0.32); outline-offset: 3px; } body[data-v7318-packaging-professional="r30"] .skip-link { position: fixed; z-index: 10000; top: -120px; left: 12px; width: auto; height: auto; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--bp-r30-blue); box-shadow: 0 12px 32px rgba(13, 50, 49, 0.18); } body[data-v7318-packaging-professional="r30"] .skip-link:focus { top: 10px; } /* Homepage: make the engineering promise operational without adding another large card wall. */ .bp7318-r30-delivery-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(28px, 3vw, 44px); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 20px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(1, 31, 46, 0.12); } .bp7318-r30-delivery-strip article { min-height: 148px; padding: clamp(22px, 2.5vw, 32px); background: rgba(247, 250, 247, 0.9); } .bp7318-r30-delivery-strip span, .bp7318-r30-access-card span, .bp7318-r30-method-card span { display: block; margin-bottom: 12px; color: var(--bp-r30-cyan); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; } .bp7318-r30-delivery-strip strong { display: block; margin-bottom: 10px; color: var(--bp-r30-ink); font-size: clamp(18px, 1.65vw, 23px); line-height: 1.25; } .bp7318-r30-delivery-strip p { margin: 0; color: #506864; font-size: 14px; line-height: 1.72; } /* Developer: public / project / NDA resource hierarchy. */ .bp7318-r30-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; } .bp7318-r30-access-card { display: flex; min-height: 238px; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--bp-r30-line); border-radius: 22px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--bp-r30-shadow); } .bp7318-r30-access-card:nth-child(2) { background: linear-gradient(150deg, rgba(230, 244, 247, 0.95), rgba(255, 255, 255, 0.88)); } .bp7318-r30-access-card:nth-child(3) { background: linear-gradient(150deg, rgba(20, 58, 54, 0.97), rgba(11, 70, 91, 0.94)); } .bp7318-r30-access-card:nth-child(3) :is(h3, p, a) { color: #f4f7f2; } .bp7318-r30-access-card h3 { margin: 0 0 14px; color: var(--bp-r30-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.18; } .bp7318-r30-access-card p { margin: 0 0 24px; color: #536c68; font-size: 15px; line-height: 1.78; } .bp7318-r30-access-card a { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin-top: auto; color: var(--bp-r30-blue); font-weight: 760; text-decoration: none; } /* Methods: authoritative method references are compact, scannable and directly traceable. */ .bp7318-r30-method-index { position: relative; overflow: hidden; } .bp7318-r30-method-index::before { position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(15, 149, 126, 0.1), transparent 34%), radial-gradient(circle at 88% 74%, rgba(7, 92, 168, 0.1), transparent 32%); content: ""; pointer-events: none; } .bp7318-r30-method-index .bp7140-shell { position: relative; } .bp7318-r30-method-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 30px; } .bp7318-r30-method-card { display: flex; min-height: 250px; flex-direction: column; padding: 24px 22px; border: 1px solid var(--bp-r30-line); border-radius: 20px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 38px rgba(17, 58, 54, 0.07); color: inherit; text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .bp7318-r30-method-card:hover { transform: translateY(-3px); border-color: rgba(7, 92, 168, 0.28); box-shadow: 0 22px 48px rgba(17, 58, 54, 0.11); } .bp7318-r30-method-card h3 { margin: 0 0 14px; color: var(--bp-r30-ink); font-size: clamp(20px, 1.65vw, 25px); line-height: 1.18; } .bp7318-r30-method-card p { margin: 0 0 22px; color: #536c68; font-size: 14px; line-height: 1.72; } .bp7318-r30-method-card b { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--bp-r30-blue); font-size: 13px; letter-spacing: 0.01em; } .bp7318-r30-method-note { margin: 24px 0 0; padding: 16px 18px; border-left: 3px solid var(--bp-r30-cyan); background: rgba(255, 255, 255, 0.58); color: #48625e; font-size: 14px; line-height: 1.7; } /* Legacy URLs: one premium handoff, no stale technical claims. */ .bp7318-r30-legacy { min-height: calc(100vh - 82px); background: radial-gradient(circle at 76% 22%, rgba(8, 119, 151, 0.14), transparent 36%), linear-gradient(135deg, #fbf8f0 0%, #edf5f2 100%); } .bp7318-r30-legacy__hero { display: grid; min-height: calc(100vh - 82px); place-items: center; padding: clamp(72px, 10vw, 150px) 24px; } .bp7318-r30-legacy__panel { width: min(1040px, 100%); padding: clamp(34px, 6vw, 76px); border: 1px solid rgba(18, 58, 54, 0.14); border-radius: 30px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 32px 90px rgba(16, 59, 55, 0.13); backdrop-filter: blur(18px); } .bp7318-r30-legacy__eyebrow { margin: 0 0 20px; color: var(--bp-r30-cyan); font: 760 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.14em; } .bp7318-r30-legacy h1 { max-width: 850px; margin: 0; color: var(--bp-r30-ink); font-family: Iowan Old Style, Baskerville, Songti SC, STSong, serif; font-size: clamp(42px, 6.2vw, 86px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; } .bp7318-r30-legacy__lead { max-width: 780px; margin: 28px 0 0; color: #526c68; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.78; } .bp7318-r30-legacy__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .bp7318-r30-legacy__actions a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid rgba(7, 92, 168, 0.2); border-radius: 999px; background: #fff; color: var(--bp-r30-blue); font-weight: 760; text-decoration: none; } .bp7318-r30-legacy__actions a:first-child { border-color: transparent; background: linear-gradient(135deg, #0a5e9c, #0c796f); color: #fff; } .bp7318-r30-legacy__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 38px; } .bp7318-r30-legacy__proof article { min-height: 168px; padding: 22px; border: 1px solid var(--bp-r30-line); border-radius: 18px; background: rgba(248, 250, 247, 0.88); } .bp7318-r30-legacy__proof span { display: block; margin-bottom: 14px; color: var(--bp-r30-cyan); font: 740 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.1em; } .bp7318-r30-legacy__proof strong { display: block; color: var(--bp-r30-ink); font-size: 18px; } .bp7318-r30-legacy__proof p { margin: 10px 0 0; color: #536c68; font-size: 13px; line-height: 1.68; } .bp7318-r30-legacy__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 42px; overflow: hidden; border: 1px solid var(--bp-r30-line); border-radius: 18px; background: var(--bp-r30-line); } .bp7318-r30-legacy__links a { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; background: rgba(248, 250, 247, 0.96); color: var(--bp-r30-ink); font-weight: 720; text-decoration: none; } /* Project intake: visible above-fold action and tighter editorial rhythm. */ .request-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .request-hero-actions a { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #075ca8, #0a8175); color: #fff; font-weight: 760; text-decoration: none; box-shadow: 0 12px 30px rgba(7, 92, 168, 0.18); } /* * Developer workbench: keep the featured release media inside its grid track. * The polish layer gives every release image a 4:3 aspect ratio; combined with * the featured card's full-height media, that ratio can make the link wider * than its assigned column and visually cover the article copy. */ body[data-v7318-packaging-page="developer-packaging"] .bp7140-release-card--feature :is(.bp7140-release-card__media, .bp7140-release-card__body) { min-width: 0; } .bp7318-r31-workbench-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 54px); margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(18, 58, 54, 0.11); border-radius: 18px; background: linear-gradient(120deg, rgba(239, 246, 247, 0.9), rgba(255, 255, 255, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } .bp7318-r31-workbench-footer__intro > span { display: block; margin-bottom: 6px; color: var(--bp-r30-cyan); font: 700 9px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.12em; } .bp7318-r31-workbench-footer__intro p { margin: 0; color: rgba(18, 58, 54, 0.7); font-size: 12px; line-height: 1.65; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench-footer .bp7140-actions { justify-content: flex-end; margin-top: 0; } @media (min-width: 861px) { body[data-v7318-packaging-page="developer-packaging"] .bp7140-release-card--feature .bp7140-release-card__media { width: 100%; aspect-ratio: auto; } } @media (min-width: 1121px) { body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card--feature { align-items: center; grid-row: span 2; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card--feature .bp7140-release-card__media { height: auto; min-height: 0; align-self: center; aspect-ratio: 4 / 3; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card:not(.bp7140-release-card--feature) { display: grid; grid-template-columns: minmax(132px, 0.78fr) minmax(0, 1.22fr); align-items: center; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card:not(.bp7140-release-card--feature) .bp7140-release-card__media { width: 100%; height: auto; min-width: 0; align-self: center; aspect-ratio: 4 / 3; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card:not(.bp7140-release-card--feature) .bp7140-release-card__body { min-width: 0; padding: 14px 13px; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card:not(.bp7140-release-card--feature) h3:not(#bp7318-global-type-lock) { font-size: clamp(15px, 1.12vw, 17px) !important; line-height: 1.3 !important; } } @media (min-width: 861px) and (max-width: 1120px) { body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card--feature { grid-column: span 12; grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr); } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench .bp7140-release-card:not(.bp7140-release-card--feature) { grid-column: span 6; } } @media (max-width: 1120px) { .bp7318-r30-method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .bp7318-r31-workbench-footer { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 17px; } body[data-v7318-packaging-page="developer-packaging"] .bp7318-r31-workbench-footer .bp7140-actions { justify-content: flex-start; } } @media (max-width: 760px) { body[data-v7318-packaging-professional="r30"] .bp7140-context__inner > a { min-height: 40px; padding-block: 4px; } body[data-v7318-packaging-professional="r30"] .bp7160-sample-card__foot a, body[data-v7318-packaging-professional="r30"] .bp7160-release-rail__actions a { display: inline-flex; min-height: 40px; align-items: center; padding-block: 5px; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-route-card__body > a, .bp7140-card > a) { display: inline-flex; min-height: 40px; align-items: center; padding-block: 6px; } body[data-v7318-packaging-professional="r30"] :is( .pgeo-link, .bp7140-release-card__body > a, .cl7301-role > a, .fs7301-card > a, .agreement-check a ) { display: inline-flex; min-height: 44px; align-items: center; padding-block: 8px; } body[data-v7318-packaging-professional="r30"] .bp7140-toc a { min-height: 40px; padding-block: 8px; } body[data-v7318-packaging-professional="r30"] .fs7301-brand { min-height: 40px; } body[data-v7318-packaging-professional="r30"] :is(.fs7301-language, .fs7301-menu-button) { width: 40px !important; min-width: 40px !important; height: 40px !important; } html[data-v7318-packaging-card-polish="dual-compact-cards-r26"] #bioten-packaging-home-r15 .bp7140-release-rail__head a { min-height: 40px !important; } #bioten-packaging-home-r15 :is(.bp7151-release-ticker__item, .bp7151-release-ticker__toggle) { min-height: 40px !important; } #bioten-packaging-home-r15 .bp7151-release-ticker__toggle { width: 40px !important; height: 40px !important; } .bp7318-r30-delivery-strip, .bp7318-r30-access-grid, .bp7318-r30-method-grid, .bp7318-r30-legacy__proof, .bp7318-r30-legacy__links { grid-template-columns: 1fr; } .bp7318-r30-delivery-strip article, .bp7318-r30-access-card, .bp7318-r30-method-card { min-height: 0; } .bp7318-r30-legacy__hero { min-height: calc(100svh - 70px); padding: 54px 14px; } .bp7318-r30-legacy__panel { padding: 30px 22px; border-radius: 22px; } .bp7318-r30-legacy h1 { font-size: clamp(38px, 12vw, 56px); } .bp7318-r30-legacy__actions a { width: 100%; } .request-hero-actions a { width: 100%; min-height: 48px; } } @media (max-width: 420px) { body[data-v7318-packaging-professional="r30"] .bp7140-hero { padding-block: 46px 52px; } body[data-v7318-packaging-professional="r30"] :is(.bp7140-display, .bp7140-hero__copy .bp7140-display) { font-size: clamp(34px, 10.5vw, 42px); line-height: 1.055; } body[data-v7318-packaging-professional="r30"] .bp7140-lead { margin-top: 16px; line-height: 1.62; } body[data-v7318-packaging-professional="r30"] .bp7140-status-row { margin-top: 16px; } body[data-v7318-packaging-professional="r30"] .bp7140-actions { margin-top: 18px; } } @media (max-width: 340px) { body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-hero { padding-top: 28px; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-eyebrow { margin-bottom: 12px; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) :is(.bp7140-display, .bp7140-hero__copy .bp7140-display) { font-size: 32px; line-height: 1.025; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-lead { margin-top: 12px; line-height: 1.5; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-status-row { gap: 5px; margin-top: 12px; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-status { min-height: 26px; padding: 3px 8px; font-size: 10px; } body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten-product-lines"], [data-v7318-packaging-page="packaging-food-beverage"] ) .bp7140-actions { margin-top: 14px; } } @media (prefers-reduced-motion: reduce) { .bp7318-r30-method-card { transition: none; } } /* Keep content-section H2s consistent across the BIOTEN packaging overview and field pages. */ body[data-v7318-packaging-professional="r30"]:is( [data-v7318-packaging-page="bioten"], [data-v7318-packaging-page="packaging-food-beverage"], [data-v7318-packaging-page="packaging-beauty-personal-care"], [data-v7318-packaging-page="packaging-pharma-medical"], [data-v7318-packaging-page="packaging-specialty"] ) main#main-content.bp7140-main > section:not(.bp7140-home-hero):not(.bp7140-hero) h2:not(#bp7318-global-type-lock) { font-size: 30px !important; }