/* * BIOTEN Packaging ยท V7.15.1 * Managed technology-product release stream and paper-blue lower-page system. */ .bp7151-release-system { --bp7151-paper: #f7f3ea; --bp7151-paper-light: #fcfaf5; --bp7151-paper-blue: #e5eef1; --bp7151-paper-blue-deep: #d8e7ec; --bp7151-blue: #286e94; --bp7151-blue-deep: #185678; --bp7151-green: #0b9b72; --bp7151-ink: #17352f; --bp7151-copy: #4c625c; --bp7151-line: rgba(23, 53, 47, .13); --bp7151-blue-line: rgba(40, 110, 148, .2); --bp7151-ease: cubic-bezier(.22, .82, .22, 1); --bp7151-shadow: 0 24px 64px rgba(41, 64, 62, .09), 0 3px 12px rgba(41, 64, 62, .045); } /* Homepage: a live release strip beneath the three curated entries. */ .bp7151-release-system .bp7151-release-ticker { position: relative; display: grid; min-height: 54px; grid-template-columns: auto minmax(0, 1fr) auto 38px; align-items: center; gap: 14px; margin-top: 14px; padding: 7px 7px 7px 15px; overflow: hidden; color: var(--bp7151-ink); background: linear-gradient(105deg, rgba(255, 255, 255, .72), rgba(229, 238, 241, .76)), var(--bp7151-paper-light); border: 1px solid var(--bp7151-blue-line); border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .56); } .bp7151-release-system .bp7151-release-ticker::after { position: absolute; inset: 0 0 0 auto; width: 28%; background: linear-gradient(110deg, transparent, rgba(40, 110, 148, .075)); content: ""; pointer-events: none; } .bp7151-release-ticker__signal, .bp7151-release-ticker__counter, .bp7151-release-ticker__toggle { position: relative; z-index: 2; } .bp7151-release-ticker__signal { display: inline-flex; align-items: center; gap: 8px; color: var(--bp7151-green); white-space: nowrap; } .bp7151-release-ticker__signal > span { width: 7px; height: 7px; background: var(--bp7151-green); border-radius: 50%; box-shadow: 0 0 0 5px rgba(11, 155, 114, .1); animation: bp7151-release-signal 2.4s var(--bp7151-ease) infinite; } .bp7151-release-ticker__signal strong { font-size: 9px; font-weight: 800; letter-spacing: .11em; } .bp7151-release-ticker__track { position: relative; z-index: 1; min-width: 0; height: 34px; } .bp7151-release-ticker__item { position: absolute; inset: 0; display: grid; min-width: 0; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 12px; color: var(--bp7151-ink); text-decoration: none; opacity: 0; transform: translateY(9px); transition: opacity .42s var(--bp7151-ease), transform .42s var(--bp7151-ease); pointer-events: none; } .bp7151-release-ticker__item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .bp7151-release-ticker__item time, .bp7151-release-ticker__type { color: var(--bp7151-blue-deep); font-size: 9px; font-weight: 760; letter-spacing: .055em; white-space: nowrap; } .bp7151-release-ticker__type { padding-left: 12px; border-left: 1px solid rgba(40, 110, 148, .22); } .bp7151-release-ticker__item strong { overflow: hidden; font-size: 12px; font-weight: 680; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .bp7151-release-ticker__item:focus-visible { border-radius: 6px; outline: 2px solid var(--bp7151-blue); outline-offset: 3px; } .bp7151-release-ticker__counter { display: inline-flex; align-items: center; gap: 4px; color: var(--bp7151-blue-deep); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; } .bp7151-release-ticker__counter i { color: rgba(23, 53, 47, .34); font-style: normal; } .bp7151-release-ticker__toggle { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: var(--bp7151-blue-deep); background: rgba(255, 255, 255, .62); border: 1px solid rgba(40, 110, 148, .18); border-radius: 12px; cursor: pointer; transition: color .28s var(--bp7151-ease), background .28s var(--bp7151-ease), transform .28s var(--bp7151-ease); } .bp7151-release-ticker__toggle:hover, .bp7151-release-ticker__toggle:focus-visible { color: #fff; background: var(--bp7151-blue); transform: translateY(-1px); } .bp7151-release-ticker__toggle:focus-visible { outline: 2px solid var(--bp7151-blue); outline-offset: 3px; } /* Release hub: editorial operations state, driven by the shared catalog. */ .bp7151-release-system .bp7151-release-ops { position: relative; display: grid; grid-template-columns: 1.15fr .72fr 1fr 1fr; margin: -4px 0 24px; overflow: hidden; background: linear-gradient(108deg, rgba(255, 255, 255, .78), rgba(229, 238, 241, .72)), var(--bp7151-paper-light); border: 1px solid var(--bp7151-blue-line); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .64), 0 14px 36px rgba(48, 74, 73, .055); } .bp7151-release-system .bp7151-release-ops::after { position: absolute; top: 0; right: 0; width: 32%; height: 100%; background: linear-gradient(118deg, transparent, rgba(40, 110, 148, .09)); content: ""; pointer-events: none; } .bp7151-release-ops > div { position: relative; z-index: 1; min-width: 0; padding: 18px 20px; border-right: 1px solid rgba(40, 110, 148, .13); } .bp7151-release-ops > div:last-child { border-right: 0; } .bp7151-release-ops p { margin: 0 0 5px; color: var(--bp7151-blue-deep); font-size: 9px; font-weight: 800; letter-spacing: .12em; } .bp7151-release-ops strong { display: block; overflow: hidden; color: var(--bp7151-ink); font-size: 13px; font-weight: 720; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .bp7151-release-ops strong small { margin-left: 2px; color: var(--bp7151-copy); font-size: 9px; } .bp7151-release-ops__signal { padding-left: 43px !important; } .bp7151-release-ops__signal > span { position: absolute; top: 26px; left: 21px; width: 8px; height: 8px; background: var(--bp7151-green); border-radius: 50%; box-shadow: 0 0 0 6px rgba(11, 155, 114, .1); } .bp7151-release-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; } .bp7151-release-card__actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; color: var(--bp7151-blue-deep); font-size: 11px; font-weight: 750; line-height: 1.35; text-decoration: none; } .bp7151-release-card__primary { gap: 8px; } .bp7151-release-card__document { gap: 8px; padding: 8px 13px; border: 1px solid rgba(31, 85, 122, .28); border-radius: 999px; background: rgba(255, 255, 255, .76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .bp7151-release-card__document-icon { flex: 0 0 auto; font-size: 12px; line-height: 1; } @media (hover: hover) and (pointer: fine) { .bp7151-release-card__document:hover, .bp7151-release-card__document:focus-visible { transform: translateY(-1px); border-color: rgba(31, 85, 122, .5); background: #fff; } } /* One continuous material story: paper substrate, translucent blue functional layer. */ .bp7151-release-system .bp7140-cta, .bp7151-release-system.bp7141-home .bp7141-project-cta { position: relative; padding: clamp(54px, 6vw, 78px) 0; color: var(--bp7151-ink); background: var(--bp7151-paper); } .bp7151-release-system .bp7140-cta__grid, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid { position: relative; display: grid; min-height: 236px; overflow: hidden; padding: clamp(38px, 5.5vw, 66px); color: var(--bp7151-ink); background: linear-gradient(108deg, rgba(252, 250, 245, .96) 0 48%, rgba(220, 233, 238, .88) 100%), var(--bp7151-paper-blue); border: 1px solid var(--bp7151-blue-line); border-radius: 34px; box-shadow: var(--bp7151-shadow), inset 0 0 0 1px rgba(255, 255, 255, .7); } .bp7151-release-system .bp7140-cta__grid::before, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid::before { position: absolute; top: 0; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(11, 155, 114, .58), rgba(40, 110, 148, .72), transparent); content: ""; } .bp7151-release-system .bp7140-cta__grid::after, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid::after { position: absolute; top: -42%; right: -8%; width: 48%; aspect-ratio: 1; background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(40, 110, 148, .13)); border: 1px solid rgba(255, 255, 255, .56); border-radius: 42% 58% 64% 36% / 54% 42% 58% 46%; content: ""; transform: rotate(12deg); pointer-events: none; } .bp7151-release-system .bp7140-cta__grid > *, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid > * { position: relative; z-index: 1; } .bp7151-release-system .bp7140-cta h2, .bp7151-release-system.bp7141-home .bp7141-project-cta h2 { color: var(--bp7151-ink); } .bp7151-release-system .bp7140-cta p, .bp7151-release-system.bp7141-home .bp7141-project-cta p { color: var(--bp7151-copy); } .bp7151-release-system .bp7140-cta .bp7140-button, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-button { color: #fff; background: var(--bp7151-blue-deep); border-color: var(--bp7151-blue-deep); box-shadow: 0 12px 28px rgba(24, 86, 120, .16); } .bp7151-release-system .bp7140-cta .bp7140-button:hover, .bp7151-release-system .bp7140-cta .bp7140-button:focus-visible { background: var(--bp7151-ink); border-color: var(--bp7151-ink); transform: translateY(-2px); } .bp7151-release-system .bp7140-footer, .bp7151-release-system.bp7141-home .bp7140-footer { position: relative; overflow: hidden; color: var(--bp7151-copy); background: linear-gradient(102deg, rgba(247, 243, 234, .98), rgba(220, 233, 238, .92)), var(--bp7151-paper-blue); border-top: 1px solid rgba(40, 110, 148, .17); } .bp7151-release-system .bp7140-footer::before { position: absolute; top: -34%; right: -6%; width: 42%; height: 150%; background: linear-gradient(118deg, rgba(255, 255, 255, 0), rgba(40, 110, 148, .1)); border-left: 1px solid rgba(40, 110, 148, .08); content: ""; transform: skewX(-10deg); pointer-events: none; } .bp7151-release-system .bp7140-footer::after { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(11, 155, 114, .42), rgba(40, 110, 148, .52), transparent 92%); content: ""; pointer-events: none; } .bp7151-release-system .bp7140-footer__top, .bp7151-release-system .bp7140-footer__bottom { position: relative; z-index: 1; } .bp7151-release-system .bp7140-footer__top, .bp7151-release-system.bp7141-home .bp7140-footer__top { gap: clamp(48px, 7vw, 92px); padding: 58px 0 42px; } .bp7151-release-system .bp7140-footer__brand img { box-shadow: 0 10px 26px rgba(25, 67, 104, .1); } .bp7151-release-system .bp7140-footer__brand strong, .bp7151-release-system.bp7141-home .bp7140-footer__brand strong { color: var(--bp7151-ink); } .bp7151-release-system .bp7140-footer__brand p, .bp7151-release-system.bp7141-home .bp7140-footer__brand p { color: var(--bp7151-copy); } .bp7151-release-system .bp7140-footer__group h2 { color: var(--bp7151-blue-deep); } .bp7151-release-system .bp7140-footer__group a, .bp7151-release-system .bp7140-footer__bottom, .bp7151-release-system .bp7140-footer__bottom a { color: var(--bp7151-copy); } .bp7151-release-system .bp7140-footer__group a:hover, .bp7151-release-system .bp7140-footer__group a:focus-visible, .bp7151-release-system .bp7140-footer__bottom a:hover, .bp7151-release-system .bp7140-footer__bottom a:focus-visible { color: var(--bp7151-blue-deep); } .bp7151-release-system .bp7140-footer__bottom { min-height: 60px; flex-wrap: nowrap; gap: clamp(16px, 2.5vw, 28px); overflow-x: auto; border-top-color: rgba(40, 110, 148, .17); white-space: nowrap; scrollbar-width: none; } .bp7151-release-system .bp7140-footer__bottom::-webkit-scrollbar { display: none; } .bp7151-release-system .bp7140-footer__legal { flex: 0 0 auto; flex-wrap: nowrap; gap: clamp(10px, 1.5vw, 18px); } @keyframes bp7151-release-signal { 0%, 100% { opacity: .58; transform: scale(.86); } 50% { opacity: 1; transform: scale(1); } } @media (max-width: 1120px) { .bp7151-release-system .bp7151-release-ticker { grid-template-columns: auto minmax(0, 1fr) auto 38px; } .bp7151-release-ticker__type { display: none; } .bp7151-release-ticker__item { grid-template-columns: max-content minmax(0, 1fr); } } @media (max-width: 860px) { .bp7151-release-system .bp7151-release-ticker { grid-template-columns: minmax(0, 1fr) auto 38px; gap: 10px; padding-left: 12px; } .bp7151-release-ticker__signal { display: none; } .bp7151-release-system .bp7151-release-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp7151-release-ops > div:nth-child(2) { border-right: 0; } .bp7151-release-ops > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(40, 110, 148, .13); } .bp7151-release-system .bp7140-cta__grid, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid { min-height: 0; gap: 30px; } .bp7151-release-system .bp7140-footer__top { gap: 34px; } } @media (max-width: 560px) { .bp7151-release-card__actions { flex-direction: column; align-items: stretch; } .bp7151-release-card__actions > a { width: 100%; justify-content: space-between; } .bp7151-release-system .bp7151-release-ticker { grid-template-columns: minmax(0, 1fr) 36px; min-height: 58px; margin-top: 10px; padding: 8px; border-radius: 15px; } .bp7151-release-ticker__counter { display: none; } .bp7151-release-ticker__track { height: 40px; } .bp7151-release-ticker__item { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1px; padding-left: 4px; } .bp7151-release-ticker__item time { display: none; } .bp7151-release-ticker__item strong { display: -webkit-box; font-size: 11px; line-height: 1.45; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .bp7151-release-ticker__toggle { width: 36px; height: 36px; } .bp7151-release-system .bp7151-release-ops { grid-template-columns: minmax(0, 1fr); border-radius: 18px; } .bp7151-release-ops > div, .bp7151-release-ops > div:nth-child(2) { padding: 14px 18px; border-right: 0; border-bottom: 1px solid rgba(40, 110, 148, .13); } .bp7151-release-ops > div:last-child { border-bottom: 0; } .bp7151-release-ops__signal { padding-left: 40px !important; } .bp7151-release-ops__signal > span { top: 22px; left: 19px; } .bp7151-release-system .bp7140-cta, .bp7151-release-system.bp7141-home .bp7141-project-cta { padding: 48px 0; } .bp7151-release-system .bp7140-cta__grid, .bp7151-release-system.bp7141-home .bp7141-project-cta .bp7140-cta__grid { padding: 30px 23px; border-radius: 26px; } .bp7151-release-system .bp7140-footer__top { padding: 48px 0 34px; } .bp7151-release-system .bp7140-footer__bottom { min-height: 58px; justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .bp7151-release-ticker__signal > span { animation: none; } .bp7151-release-ticker__item { transition: none; } }