/* * V7.3.0 | BIOTEN platform homepage hierarchy and visual refinement * Direction: soft structuralism + asymmetric application bento. */ body.bioten-platform-v580 { --btp730-ease: cubic-bezier(0.22, 1, 0.36, 1); --btp730-blue: #064f93; --btp730-green: #087f70; --btp730-night: #061d1a; --btp730-paper: #f5f8f6; --btp730-hairline: rgba(9, 55, 49, 0.1); } /* First viewport: preserve the concept while restoring editorial breathing room. */ html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-hero h1 { max-width: 620px; font-size: clamp(50px, 4.65vw, 68px) !important; letter-spacing: -0.057em !important; line-height: 1.055 !important; } body.bioten-platform-v580 .btp580-hero__copy { width: min(48.5%, 650px); } body.bioten-platform-v580 .btp580-hero__lead { max-width: 610px; color: #53625e; font-size: 16px; line-height: 1.76; } body.bioten-platform-v580 .btp580-actions { gap: 12px; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button { min-height: 52px !important; border-radius: 999px !important; transition: transform 520ms var(--btp730-ease), border-color 520ms var(--btp730-ease), background-color 520ms var(--btp730-ease), color 520ms var(--btp730-ease), box-shadow 520ms var(--btp730-ease) !important; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button > span { display: inline-grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: transform 520ms var(--btp730-ease), background-color 520ms var(--btp730-ease); } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button--quiet > span { background: rgba(6, 41, 36, 0.07); } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button:hover > span { transform: translate3d(3px, -1px, 0) scale(1.04); } /* Shared section rhythm. */ body.bioten-platform-v580 .btp580-section { padding-block: clamp(84px, 7.5vw, 108px); } body.bioten-platform-v580 .btp580-section-head { max-width: 980px; margin-bottom: 42px; } body.bioten-platform-v580 .btp730-section-kicker { width: max-content; margin: 0 0 14px !important; padding: 7px 11px; border-radius: 999px; background: rgba(8, 127, 112, 0.085); color: var(--btp730-green) !important; font-size: 10px !important; font-weight: 760; letter-spacing: 0.16em; line-height: 1 !important; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-section-head h2 { max-width: 920px; font-size: clamp(38px, 3.8vw, 56px) !important; letter-spacing: -0.05em !important; line-height: 1.11 !important; } body.bioten-platform-v580 .btp580-section-head > p:not(.btp730-section-kicker) { max-width: 850px; margin-top: 18px; font-size: 16px; line-height: 1.78; } /* Application hierarchy: one priority business plus three development routes. */ body.bioten-platform-v580 .btp580-domain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } body.bioten-platform-v580 .btp580-domain { position: relative; border: 6px solid rgba(255, 255, 255, 0.62); border-radius: 25px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px var(--btp730-hairline), inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 52px rgba(12, 55, 48, 0.07); transition: transform 720ms var(--btp730-ease), box-shadow 720ms var(--btp730-ease); } body.bioten-platform-v580 .btp580-domain:hover { border-color: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(8, 127, 112, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 78px rgba(12, 55, 48, 0.13); transform: translate3d(0, -7px, 0); } body.bioten-platform-v580 .btp580-domain:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr); min-height: 360px; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__media { height: 100%; min-height: 348px; aspect-ratio: auto; border-radius: 18px 0 0 18px; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__body { justify-content: center; padding: 38px 38px 34px; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__media { aspect-ratio: 16 / 10; border-radius: 18px 18px 0 0; } body.bioten-platform-v580 .btp580-domain__body { padding: 25px 24px 23px; } body.bioten-platform-v580 .btp730-domain-status { order: -1; width: max-content; margin: 0 0 13px !important; color: #73827e !important; font-size: 9px !important; font-weight: 760; letter-spacing: 0.12em; line-height: 1.25 !important; } body.bioten-platform-v580 .btp730-domain-status--priority { color: var(--btp730-green) !important; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-domain h3 { font-size: 24px !important; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-domain:first-child h3 { font-size: clamp(30px, 2.5vw, 38px) !important; } body.bioten-platform-v580 .btp580-domain__subtitle { min-height: 0; margin-top: 7px !important; } body.bioten-platform-v580 .btp580-domain__body > p:not(.btp580-domain__subtitle, .btp730-domain-status) { margin-top: 15px; line-height: 1.72; } body.bioten-platform-v580 .btp580-domain__body > a { min-height: 40px; padding-top: 18px; } /* Technology chain is now a bridge inside the development system. */ body.bioten-platform-v580 .btp730-process { display: grid; grid-template-columns: minmax(180px, 0.72fr) minmax(0, 3.28fr); gap: 0; margin-bottom: 28px; overflow: hidden; border: 6px solid rgba(255, 255, 255, 0.7); border-radius: 23px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--btp730-hairline), 0 20px 58px rgba(12, 55, 48, 0.06); } body.bioten-platform-v580 .btp730-process > h2 { display: flex; min-height: 128px; align-items: center; padding: 24px 26px; color: var(--btp730-blue); font-size: clamp(20px, 1.8vw, 27px); font-weight: 760; letter-spacing: -0.035em; line-height: 1.15; } body.bioten-platform-v580 .btp730-process ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } body.bioten-platform-v580 .btp730-process li { position: relative; display: flex; min-width: 0; min-height: 128px; flex-direction: column; justify-content: center; padding: 22px 18px; border-left: 1px solid var(--btp730-hairline); } body.bioten-platform-v580 .btp730-process li::before { content: "0" counter(list-item); margin-bottom: 9px; color: var(--btp730-green); font-size: 9px; font-weight: 760; letter-spacing: 0.12em; } body.bioten-platform-v580 .btp730-process strong { color: var(--btp730-night); font-size: 13px; line-height: 1.35; } body.bioten-platform-v580 .btp730-process span { margin-top: 5px; color: #6a7773; font-size: 10.5px; line-height: 1.55; } body.bioten-platform-v580 .btp580-system__panel { border: 7px solid rgba(255, 255, 255, 0.12); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 88px rgba(4, 30, 26, 0.18); } body.bioten-platform-v580 .btp580-loop { margin-top: 42px; border: 5px solid rgba(255, 255, 255, 0.62); border-radius: 22px; background: rgba(255, 255, 255, 0.64); box-shadow: inset 0 0 0 1px var(--btp730-hairline); } /* Evidence boundary: cards are explicit conditions, not generic sustainability claims. */ body.bioten-platform-v580 .btp580-close { padding-top: clamp(84px, 7.5vw, 108px); background: radial-gradient(circle at 82% 12%, rgba(96, 205, 185, 0.16), transparent 28%), linear-gradient(180deg, #eaf1ed, #e2ece8); } body.bioten-platform-v580 .btp580-paths { gap: 14px; } body.bioten-platform-v580 .btp580-paths > div { min-height: 205px; padding: 26px 23px 24px; border: 6px solid rgba(255, 255, 255, 0.57); border-radius: 21px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(8, 82, 71, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82); } body.bioten-platform-v580 .btp580-paths dt { min-height: 3em; color: var(--btp730-night); font-size: 17px; } body.bioten-platform-v580 .btp580-paths dd { margin-top: 13px; font-size: 13px; line-height: 1.72; } body.bioten-platform-v580 .btp580-collaboration { gap: 42px; margin-top: 52px; padding: 42px 44px; border: 7px solid rgba(255, 255, 255, 0.11); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(7, 43, 37, 0.16); } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-collaboration h3 { color: #f4fbf8 !important; font-size: clamp(27px, 2.65vw, 39px) !important; } /* Footer lockup and page-family continuity. */ body.bioten-platform-v580 footer.btp730-footer .footer-inner { padding-top: 44px; } body.bioten-platform-v580 .btp730-footer__brand { display: flex; max-width: 1180px; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 34px; } body.bioten-platform-v580 .btp730-footer__brandmark { display: block; width: clamp(118px, 10.5vw, 154px); flex: 0 0 auto; overflow: hidden; border-radius: 3px; } body.bioten-platform-v580 .btp730-footer__brandmark img { display: block; width: 100%; height: auto; } body.bioten-platform-v580 footer.btp730-footer .footer-note { max-width: 740px; margin: 0; color: rgba(235, 244, 241, 0.72); font-size: 12px; line-height: 1.7; } body.bioten-platform-v580 .btp580-reveal { transition: opacity 820ms var(--btp730-ease), transform 820ms var(--btp730-ease) !important; } @media (max-width: 1120px) { html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-hero h1 { font-size: clamp(46px, 5.1vw, 58px) !important; } body.bioten-platform-v580 .btp580-domain:first-child { grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr); } body.bioten-platform-v580 .btp730-process { grid-template-columns: 1fr; } body.bioten-platform-v580 .btp730-process > h2 { min-height: 0; padding-bottom: 10px; } body.bioten-platform-v580 .btp730-process li:first-child { border-left: 0; } } @media (max-width: 860px) { body.bioten-platform-v580 .btp580-hero__copy { width: 58%; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-hero h1 { font-size: clamp(40px, 6.3vw, 50px) !important; } body.bioten-platform-v580 .btp580-domain:first-child { grid-template-columns: minmax(0, 1fr) minmax(285px, 0.9fr); } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__body { padding: 30px 28px; } body.bioten-platform-v580 .btp730-process ol { grid-template-columns: repeat(5, minmax(145px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; } body.bioten-platform-v580 .btp730-process li { scroll-snap-align: start; } body.bioten-platform-v580 .btp580-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.bioten-platform-v580 .btp730-footer__brand { align-items: flex-start; flex-direction: column; } } @media (max-width: 640px) { body.bioten-platform-v580 .btp580-hero { padding-top: 28px; } body.bioten-platform-v580 .btp580-hero__copy { width: 100%; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-hero h1 { max-width: 350px; font-size: clamp(35px, 9.55vw, 41px) !important; line-height: 1.06 !important; } body.bioten-platform-v580 .btp580-hero__lead { max-width: 350px; font-size: 14px; line-height: 1.68; } body.bioten-platform-v580 .btp580-actions { flex-wrap: nowrap; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button { min-height: 48px !important; flex: 1 1 0 !important; padding: 10px 13px !important; font-size: 13px !important; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button > span { width: 24px; height: 24px; flex-basis: 24px; } body.bioten-platform-v580 .btp580-section { padding-block: 64px; } body.bioten-platform-v580 .btp580-section-head { margin-bottom: 30px; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-section-head h2 { max-width: 345px; font-size: clamp(31px, 8.45vw, 36px) !important; line-height: 1.1 !important; } body.bioten-platform-v580 .btp580-section-head > p:not(.btp730-section-kicker) { margin-top: 15px; font-size: 14px; line-height: 1.72; } body.bioten-platform-v580 .btp580-domain-grid { grid-template-columns: 1fr; gap: 13px; } body.bioten-platform-v580 .btp580-domain:first-child { display: flex; grid-column: auto; min-height: 0; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__media { min-height: 0; aspect-ratio: 16 / 10; border-radius: 18px 18px 0 0; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__body { padding: 24px 22px 22px; } body.bioten-platform-v580 .btp580-domain:not(:first-child) { display: grid; grid-template-columns: 128px minmax(0, 1fr); height: 190px; min-height: 190px; max-height: 190px; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__media { height: 100%; aspect-ratio: auto; border-radius: 18px 0 0 18px; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__body { min-width: 0; padding: 18px 17px 16px; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__body > p:not(.btp580-domain__subtitle, .btp730-domain-status), body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-keywords { display: none; } body.bioten-platform-v580 .btp730-domain-status { max-width: 100%; margin-bottom: 8px !important; overflow: hidden; font-size: 7.5px !important; letter-spacing: 0.08em; text-overflow: ellipsis; white-space: nowrap; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-domain:not(:first-child) h3 { font-size: 19px !important; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__subtitle { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.bioten-platform-v580 .btp580-domain:not(:first-child) .btp580-domain__body > a { min-height: 30px; padding-top: 8px; font-size: 11px; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-domain__body > p:not(.btp580-domain__subtitle, .btp730-domain-status) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } body.bioten-platform-v580 .btp580-domain:first-child .btp580-keywords { display: none; } body.bioten-platform-v580 .btp730-process { margin-bottom: 20px; border-width: 5px; border-radius: 20px; } body.bioten-platform-v580 .btp730-process > h2 { padding: 20px 18px 12px; font-size: 21px; } body.bioten-platform-v580 .btp730-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } body.bioten-platform-v580 .btp730-process li { min-height: 104px; padding: 16px 14px; border-top: 1px solid var(--btp730-hairline); } body.bioten-platform-v580 .btp730-process li:nth-child(odd) { border-left: 0; } body.bioten-platform-v580 .btp730-process li:last-child { grid-column: 1 / -1; } body.bioten-platform-v580 .btp580-system__panel { gap: 12px; padding: 13px; border-width: 5px; border-radius: 22px; } body.bioten-platform-v580 .btp580-system__visual img { min-height: 220px; } body.bioten-platform-v580 .btp580-system__chain li { padding-block: 14px; } body.bioten-platform-v580 .btp580-system__chain p, body.bioten-platform-v580 .btp580-capabilities article p, body.bioten-platform-v580 .btp580-loop > div > p, body.bioten-platform-v580 .btp580-collaboration p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } body.bioten-platform-v580 .btp580-system__chain p { -webkit-line-clamp: 2; } body.bioten-platform-v580 .btp580-capabilities article p, body.bioten-platform-v580 .btp580-loop > div > p { -webkit-line-clamp: 3; } body.bioten-platform-v580 .btp580-collaboration p { -webkit-line-clamp: 4; } body.bioten-platform-v580 .btp580-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.bioten-platform-v580 .btp580-capabilities article { padding-top: 14px; } body.bioten-platform-v580 .btp580-loop { margin-top: 30px; padding: 20px 17px; } body.bioten-platform-v580 .btp580-close { padding-top: 64px; } body.bioten-platform-v580 .btp580-paths { grid-template-columns: 1fr; gap: 10px; } body.bioten-platform-v580 .btp580-paths > div { min-height: 0; padding: 20px 18px; border-width: 5px; } body.bioten-platform-v580 .btp580-paths dt { min-height: 0; font-size: 16px; } body.bioten-platform-v580 .btp580-paths dd { margin-top: 8px; font-size: 12px; } body.bioten-platform-v580 .btp580-collaboration { gap: 25px; margin-top: 30px; padding: 25px 22px; border-width: 5px; border-radius: 23px; } html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-collaboration h3 { font-size: 27px !important; } body.bioten-platform-v580 .btp580-collaboration .btp580-actions { flex-wrap: wrap; } body.bioten-platform-v580 .btp730-footer__brand { gap: 20px; margin-bottom: 26px; } body.bioten-platform-v580 footer.btp730-footer .footer-note { font-size: 11px; } html[data-lang="en"] body.bioten-platform-v580 .btp580-hero .btp580-actions { flex-wrap: wrap; } html[data-lang="en"] body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-hero a.btp580-button { width: 100% !important; flex: 1 1 100% !important; } html[data-lang="en"] body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-section-head h2 { font-size: clamp(28px, 7.6vw, 33px) !important; line-height: 1.08 !important; } html[data-lang="en"] body.bioten-platform-v580 .btp580-section-head > p:not(.btp730-section-kicker) { font-size: 13px; line-height: 1.64; } html[data-lang="en"] body.bioten-platform-v580 .btp580-paths dd { display: -webkit-box; overflow: hidden; font-size: 11.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } html[data-lang="en"] body.bioten-platform-v580.bioten-platform-v580 main.btp580-main .btp580-collaboration h3 { font-size: 24px !important; } } html[data-lang="en"] body.bioten-platform-v580 .btp730-domain-status { letter-spacing: 0.08em; } html[data-lang="en"] body.bioten-platform-v580 :is(h1, h2, h3, dt, .btp580-domain__subtitle) { hyphens: none; word-break: normal; } @media (min-width: 861px) { html[data-lang="en"] body.bioten-platform-v581 .btp580-hero__copy { width: min(53%, 720px); } html[data-lang="en"] body.bioten-platform-v581.bioten-platform-v580 main.btp580-main .btp580-hero h1 { max-width: 700px; font-size: clamp(40px, 3.7vw, 54px) !important; line-height: 1.03 !important; } } @media (prefers-reduced-motion: reduce) { body.bioten-platform-v580 .btp580-domain, body.bioten-platform-v580 .btp580-domain__media img, body.bioten-platform-v580 .btp580-reveal, html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button, html body.bioten-platform-v580.bioten-platform-v580 main.btp580-main a.btp580-button > span { transition: none !important; transform: none !important; } html.btp580-ready body.bioten-platform-v580 .btp580-reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; } }