/* * BIOTEN Observer V7.16.0 * Company news + industry insights editorial system. */ :root { --observer-blue: #064f98; --observer-blue-deep: #12385e; --observer-ink: #13283b; --observer-body: #405468; --observer-muted: #728293; --observer-line: rgba(31, 67, 101, .14); --observer-line-strong: rgba(31, 67, 101, .23); --observer-surface: #f7f9fb; --observer-surface-cool: #eef4f8; --observer-paper: #f4f0e8; --observer-card: rgba(252, 253, 254, .96); --observer-shadow: 0 18px 48px rgba(24, 56, 86, .075); --observer-shadow-hover: 0 22px 52px rgba(20, 59, 96, .115); --observer-max: 74rem; --observer-reading: 48rem; --observer-radius: 1rem; --observer-control-radius: .625rem; --observer-ease: cubic-bezier(.22, 1, .36, 1); } body[data-bioten-observer] { overflow-x: clip; background: radial-gradient(circle at 10% 12%, rgba(6, 79, 152, .055), transparent 28rem), linear-gradient(180deg, #f8fafb 0%, #f3f6f8 48%, #f7f9fb 100%); color: var(--observer-ink); } body[data-bioten-observer] :where(a, button, input, summary):focus-visible, .observer-home :where(a, button):focus-visible { outline: .125rem solid rgba(6, 79, 152, .75); outline-offset: .2rem; } body[data-bioten-observer] :where(.observer-main, .observer-article-main, .observer-document-main) { box-sizing: border-box; font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "Helvetica Neue", Arial, system-ui, sans-serif; } .observer-home { box-sizing: border-box; font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", Inter, system-ui, sans-serif; } body[data-bioten-observer] :where(.observer-main, .observer-article-main, .observer-document-main) *, .observer-home * { box-sizing: border-box; } body[data-bioten-observer] :where(.observer-main, .observer-article-main, .observer-document-main) a, .observer-home a { color: inherit; text-decoration: none; } body[data-bioten-observer] :where(.observer-main, .observer-article-main, .observer-document-main) :where(h1, h2, h3, p, ul, ol, figure), .observer-home :where(h2, h3, p, figure) { margin-top: 0; } /* Collection hero */ .observer-main { min-height: 65vh; padding: clamp(7.7rem, 12vw, 10.5rem) clamp(1rem, 3.6vw, 3rem) clamp(5rem, 8vw, 7.5rem); } .observer-hero, .observer-tabs, .observer-content, .observer-empty, .observer-legacy { width: min(100%, var(--observer-max)); margin-inline: auto; } .observer-hero { min-height: 0; padding: clamp(2.6rem, 5vw, 4.15rem); border: 1px solid rgba(6, 79, 152, .12); border-left: .25rem solid var(--observer-blue); border-radius: var(--observer-radius); background: linear-gradient(112deg, rgba(252, 253, 254, .985), rgba(238, 244, 248, .86)), var(--observer-surface); box-shadow: var(--observer-shadow); overflow: hidden; position: relative; } .observer-hero::before { display: none; } .observer-hero__brand { margin-bottom: 1.15rem; color: var(--observer-blue); font-size: .72rem; font-weight: 760; letter-spacing: .17em; } .observer-hero h1 { max-width: 12em; margin-bottom: clamp(1rem, 2vw, 1.45rem); color: var(--observer-ink); font-size: clamp(2.45rem, 4.6vw, 4rem); font-weight: 750; letter-spacing: -.05em; line-height: 1.08; text-wrap: balance; } .observer-hero__lead { max-width: 52rem; margin-bottom: 0; color: var(--observer-body); font-size: clamp(.98rem, 1.35vw, 1.12rem); line-height: 1.78; text-wrap: pretty; } .observer-tabs { display: flex; align-items: center; gap: clamp(1.35rem, 3vw, 2.4rem); padding: .3rem 0 0; border-bottom: 1px solid var(--observer-line); } .observer-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .85rem 0; border-bottom: .125rem solid transparent; color: var(--observer-body); font-size: .86rem; font-weight: 660; transition: border-color 180ms ease, color 180ms ease; } .observer-tabs a:hover, .observer-tabs a[aria-current="page"] { border-bottom-color: var(--observer-blue); color: var(--observer-blue-deep); } /* Search and filters */ .observer-content { padding-top: clamp(3.1rem, 5vw, 4.6rem); } .observer-content__head { display: flex; align-items: end; justify-content: space-between; min-height: 0; padding-bottom: 1.15rem; border-bottom: 1px solid var(--observer-line); } .observer-content__head h2 { margin-bottom: .55rem; color: var(--observer-ink); font-size: clamp(1.55rem, 2.5vw, 2.15rem); font-weight: 730; letter-spacing: -.035em; } .observer-content__head p { margin-bottom: 0; color: var(--observer-muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .observer-search { display: grid; grid-template-columns: minmax(17rem, 28rem) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: end; padding: 1.4rem 0 1.7rem; } .observer-search form label { display: block; margin-bottom: .55rem; color: var(--observer-ink); font-size: .77rem; font-weight: 700; } .observer-search form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .45rem; } .observer-search input { width: 100%; min-width: 0; height: 2.75rem; padding: 0 .85rem; border: 1px solid var(--observer-line-strong); border-radius: var(--observer-control-radius); background: rgba(252, 253, 254, .94); color: var(--observer-ink); font: inherit; font-size: .85rem; box-shadow: inset 0 1px 2px rgba(18, 56, 94, .025); } .observer-search input::placeholder { color: #8391a0; } .observer-search button, .observer-pagination button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--observer-line-strong); border-radius: 999px; background: rgba(250, 252, 253, .94); color: var(--observer-blue-deep); cursor: pointer; font: inherit; font-size: .79rem; font-weight: 680; transition: transform 180ms var(--observer-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .observer-search button { border-radius: var(--observer-control-radius); } .observer-search form button[type="submit"] { border-color: var(--observer-blue); background: var(--observer-blue); color: #f4f8fc; } .observer-search button:hover, .observer-pagination button:hover:not(:disabled) { border-color: rgba(6, 79, 152, .45); background: rgba(6, 79, 152, .085); transform: translateY(-1px); } .observer-search form button[type="submit"]:hover { background: var(--observer-blue-deep); color: #f4f8fc; } .observer-tag-filter { display: flex; gap: .45rem; align-items: center; overflow-x: auto; padding: .15rem 0 .35rem; scrollbar-width: thin; scroll-snap-type: x proximity; } .observer-tag-filter button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; min-height: 2.35rem; padding: 0 .8rem; scroll-snap-align: start; } .observer-tag-filter button small { color: var(--observer-muted); font-size: .68rem; font-variant-numeric: tabular-nums; } .observer-tag-filter button.is-active { border-color: rgba(6, 79, 152, .25); background: rgba(6, 79, 152, .1); color: var(--observer-blue-deep); } /* Cards */ .observer-grid, .observer-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.1vw, 1.55rem); } .observer-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--observer-line); border-radius: .8rem; background: var(--observer-card); box-shadow: 0 .8rem 2rem rgba(24, 56, 86, .05); transition: border-color 220ms ease, box-shadow 260ms var(--observer-ease), transform 260ms var(--observer-ease); } .observer-card:hover { border-color: rgba(6, 79, 152, .24); box-shadow: var(--observer-shadow-hover); transform: translateY(-.12rem); } .observer-card[hidden] { display: none !important; } .observer-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--observer-surface-cool); } .observer-card__media img, .observer-home-card__media img, .observer-article-cover img, .observer-empty > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--observer-cover-position, center); } .observer-card__media img, .observer-home-card__media img { transition: transform 520ms var(--observer-ease), filter 260ms ease; } .observer-card:hover .observer-card__media img, .observer-home-card:hover .observer-home-card__media img { transform: scale(1.025); filter: saturate(1.025) contrast(1.015); } .observer-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem 1.15rem 1.05rem; } .observer-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .78rem; color: var(--observer-muted); font-size: .7rem; font-variant-numeric: tabular-nums; } .observer-card__meta span { color: var(--observer-blue); font-weight: 730; } .observer-card h2, .observer-card h3 { display: -webkit-box; overflow: hidden; min-height: 2.96em; margin-bottom: .68rem; color: var(--observer-ink); font-size: clamp(1.02rem, 1.4vw, 1.16rem); font-weight: 715; letter-spacing: -.025em; line-height: 1.48; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .observer-card h2 a, .observer-card h3 a { transition: color 180ms ease; } .observer-card h2 a:hover, .observer-card h3 a:hover { color: var(--observer-blue); } .observer-card__body > p { display: -webkit-box; overflow: hidden; min-height: 4.65em; margin-bottom: .85rem; color: var(--observer-body); font-size: .83rem; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .observer-tags { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0; padding: 0; list-style: none; } .observer-tags a { display: inline-flex; align-items: center; min-height: 1.72rem; padding: .22rem .52rem; border: 1px solid rgba(6, 79, 152, .13); border-radius: .42rem; background: rgba(6, 79, 152, .045); color: var(--observer-blue-deep); font-size: .68rem; font-weight: 640; transition: background-color 180ms ease, border-color 180ms ease; } .observer-tags a:hover { border-color: rgba(6, 79, 152, .28); background: rgba(6, 79, 152, .09); } .observer-tags--compact { margin-top: auto; } .observer-card__read { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--observer-line); color: var(--observer-blue-deep); font-size: .75rem; font-weight: 710; } .observer-card__read span:last-child { transition: transform 180ms var(--observer-ease); } .observer-card__read:hover span:last-child { transform: translateX(.2rem); } .observer-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); } .observer-pagination button { min-width: 2.55rem; padding-inline: .85rem; } .observer-pagination button[aria-current="page"] { border-color: var(--observer-blue); background: var(--observer-blue); color: #f4f8fc; } .observer-pagination button:disabled { cursor: not-allowed; opacity: .42; } .observer-no-results, .observer-empty, .observer-legacy { border: 1px solid var(--observer-line); border-radius: var(--observer-radius); background: rgba(252, 253, 254, .92); } .observer-no-results { padding: clamp(2.5rem, 6vw, 5rem); text-align: center; } .observer-no-results h2, .observer-empty h2, .observer-legacy h1 { margin-bottom: .75rem; color: var(--observer-ink); font-weight: 730; letter-spacing: -.035em; } .observer-no-results p, .observer-empty p, .observer-legacy p { margin-bottom: 0; color: var(--observer-body); line-height: 1.75; } .observer-empty { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); gap: 0; margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; } .observer-empty > img { aspect-ratio: 16 / 9; } .observer-empty > div { align-self: center; padding: clamp(2rem, 5vw, 4rem); } .observer-empty a, .observer-legacy a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; margin-top: 1.35rem; padding: .65rem 1.15rem; border-radius: 999px; background: var(--observer-blue); color: #f4f8fc; font-size: .82rem; font-weight: 700; } .observer-legacy { max-width: 48rem; margin-top: 2rem; padding: clamp(2rem, 6vw, 4.5rem); } .observer-legacy > div { display: flex; flex-wrap: wrap; gap: .7rem; } .observer-legacy a + a { border: 1px solid var(--observer-line-strong); background: transparent; color: var(--observer-blue-deep); } /* Homepage module */ .observer-home { position: relative; padding: clamp(4.6rem, 7vw, 7rem) clamp(1rem, 3.6vw, 3rem); border-top: 1px solid rgba(6, 79, 152, .08); border-bottom: 1px solid rgba(6, 79, 152, .1); background: linear-gradient(90deg, rgba(244, 240, 232, .66), rgba(239, 245, 249, .9)), var(--observer-surface); color: var(--observer-ink); } .observer-home__anchor { position: absolute; top: -5rem; } .observer-home__inner { width: min(100%, var(--observer-max)); margin-inline: auto; } .observer-home__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; } .observer-home__head h2 { margin-bottom: .35rem; color: var(--observer-ink); font-size: clamp(1.9rem, 3.3vw, 2.8rem); font-weight: 750; letter-spacing: -.05em; } .observer-home__head p { margin-bottom: 0; color: var(--observer-blue); font-size: .86rem; font-weight: 690; letter-spacing: .05em; } .observer-home__head > a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: .62rem 1.05rem; border: 1px solid rgba(6, 79, 152, .26); border-radius: 999px; color: var(--observer-blue-deep); font-size: .8rem; font-weight: 700; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--observer-ease); } .observer-home__head > a:hover { border-color: rgba(6, 79, 152, .4); background: rgba(6, 79, 152, .075); transform: translateY(-1px); } .observer-home__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.15rem); } .observer-home-card { min-width: 0; overflow: hidden; border: 1px solid var(--observer-line); border-radius: var(--observer-radius); background: rgba(252, 253, 254, .9); box-shadow: 0 1rem 2.6rem rgba(24, 56, 86, .055); transition: border-color 220ms ease, box-shadow 250ms var(--observer-ease), transform 250ms var(--observer-ease); } .observer-home-card:hover { border-color: rgba(6, 79, 152, .24); box-shadow: 0 1.3rem 3rem rgba(24, 56, 86, .1); transform: translateY(-.18rem); } .observer-home-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .observer-home-card > div { padding: 1rem; } .observer-home-card > div > span { display: block; margin-bottom: .48rem; color: var(--observer-blue); font-size: .68rem; font-weight: 730; } .observer-home-card h3 { margin-bottom: .7rem; color: var(--observer-ink); font-size: .95rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.48; } .observer-home-card time { color: var(--observer-muted); font-size: .67rem; font-variant-numeric: tabular-nums; } /* Article */ .observer-article-main { padding: clamp(7.6rem, 11vw, 10rem) clamp(1rem, 3.6vw, 3rem) clamp(5.5rem, 8vw, 8rem); } .observer-article { width: min(100%, var(--observer-max)); margin-inline: auto; } .observer-article-hero { width: min(100%, 54rem); margin: 0 auto clamp(2rem, 4vw, 3.5rem); text-align: left; } .observer-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem; margin-bottom: clamp(1.7rem, 3vw, 2.5rem); color: var(--observer-muted); font-size: .72rem; } .observer-breadcrumb a { transition: color 180ms ease; } .observer-breadcrumb a:hover { color: var(--observer-blue); } .observer-breadcrumb > * + *::before { content: "/"; margin-right: .4rem; color: #9da9b4; } .observer-article-hero__category { display: inline-flex; margin-bottom: 1rem; color: var(--observer-blue); font-size: .76rem; font-weight: 740; letter-spacing: .06em; } .observer-article-hero h1 { max-width: 18em; margin: 0 0 1.35rem; color: var(--observer-ink); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 750; letter-spacing: -.048em; line-height: 1.22; text-wrap: balance; } .observer-article-hero__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .7rem 1.5rem; margin-bottom: 1.4rem; color: var(--observer-muted); font-size: .77rem; } .observer-article-hero__meta span { display: inline-flex; gap: .5rem; align-items: center; } .observer-article-hero__meta b { color: var(--observer-body); font-weight: 670; } .observer-article-abstract { max-width: 46rem; margin: 0 0 1.15rem; color: var(--observer-body); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.9; text-wrap: pretty; } .observer-article-hero > .observer-tags { justify-content: flex-start; } .observer-article-cover { width: min(100%, 68rem); aspect-ratio: 16 / 9; margin: 0 auto clamp(3rem, 6vw, 5.5rem); overflow: hidden; border: 1px solid var(--observer-line); border-radius: clamp(1rem, 2vw, 1.5rem); background: var(--observer-surface-cool); box-shadow: var(--observer-shadow); } .observer-core-points, .observer-article-data, .observer-faq, .observer-pdf, .observer-related { width: min(100%, var(--observer-reading)); margin-inline: auto; } .observer-core-points { margin-bottom: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(6, 79, 152, .16); border-left: .26rem solid var(--observer-blue); border-radius: .75rem; background: linear-gradient(135deg, rgba(236, 243, 248, .9), rgba(250, 252, 253, .92)); box-shadow: none; } .observer-core-points h2, .observer-article-data h2, .observer-faq h2, .observer-pdf h2, .observer-related h2 { margin-bottom: 1.1rem; color: var(--observer-ink); font-size: clamp(1.3rem, 2vw, 1.72rem); font-weight: 730; letter-spacing: -.035em; } .observer-core-points > ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: observer-point; } .observer-core-points > ul > li { position: relative; padding-left: 2.1rem; color: var(--observer-body); font-size: .92rem; line-height: 1.72; counter-increment: observer-point; } .observer-core-points > ul > li::before { content: counter(observer-point, decimal-leading-zero); position: absolute; top: .06rem; left: 0; color: var(--observer-blue); font-size: .68rem; font-weight: 760; letter-spacing: .04em; } .observer-core-points__evidence { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--observer-line); } .observer-core-points__evidence .v750-evidence { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .observer-article-body { width: min(100%, var(--observer-reading)); margin: 0 auto clamp(3.5rem, 7vw, 6rem); color: var(--observer-body); } .observer-article-body > section { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .observer-article-body > section + section { margin-top: 2.5rem !important; padding-top: 0 !important; } .observer-article-body :where(.news-content, .content-section) { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } .observer-article-body :where(p, li) { color: var(--observer-body) !important; font-size: clamp(.96rem, 1.22vw, 1.04rem) !important; line-height: 1.92 !important; } .observer-article-body p { margin-bottom: 1.25rem !important; } .observer-article-body :where(h2, h3, h4) { color: var(--observer-ink) !important; font-weight: 730 !important; letter-spacing: -.028em !important; } .observer-article-body h2 { margin: 2.9rem 0 1.1rem !important; font-size: clamp(1.4rem, 2.25vw, 1.78rem) !important; } .observer-article-body h3 { margin: 2rem 0 .8rem !important; font-size: clamp(1.15rem, 1.8vw, 1.38rem) !important; } .observer-article-body :where(ul, ol) { margin: 0 0 1.35rem !important; padding-left: 1.25rem !important; } .observer-article-body figure { width: min(100%, 46rem) !important; margin: 2rem auto !important; } .observer-article-body figure img { display: block; width: 100%; height: auto; max-height: 43rem; border: 1px solid var(--observer-line); border-radius: .8rem; object-fit: contain; background: var(--observer-surface-cool); } .observer-article-body figcaption { margin-top: .55rem; color: var(--observer-muted) !important; font-size: .74rem !important; line-height: 1.6 !important; text-align: center; } .observer-article-body .observer-moved-cover-caption { margin: -1rem 0 2rem !important; color: var(--observer-muted) !important; font-size: .74rem !important; line-height: 1.6 !important; text-align: center; } .observer-article-body :where(blockquote, aside) { margin: 1.7rem 0 !important; padding: 1.15rem 1.3rem !important; border: 0 !important; border-left: .2rem solid rgba(6, 79, 152, .55) !important; border-radius: 0 .65rem .65rem 0 !important; background: rgba(235, 242, 247, .72) !important; } .observer-article-body a { color: var(--observer-blue) !important; text-decoration: underline; text-decoration-color: rgba(6, 79, 152, .32); text-underline-offset: .2rem; } .observer-article-data, .observer-faq { margin-bottom: clamp(3rem, 6vw, 5rem); } .observer-table-wrap { overflow-x: auto; border: 1px solid var(--observer-line); border-radius: .8rem; background: rgba(252, 253, 254, .92); } .observer-article-data table { width: 100%; border-collapse: collapse; color: var(--observer-body); font-size: .85rem; } .observer-article-data caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .observer-article-data :where(th, td) { padding: .9rem 1rem; border-bottom: 1px solid var(--observer-line); text-align: left; vertical-align: top; } .observer-article-data tr:last-child :where(th, td) { border-bottom: 0; } .observer-article-data th { width: 10rem; background: rgba(235, 242, 247, .56); color: var(--observer-ink); font-weight: 690; } .observer-faq details { border-top: 1px solid var(--observer-line); } .observer-faq details:last-child { border-bottom: 1px solid var(--observer-line); } .observer-faq summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; color: var(--observer-ink); cursor: pointer; font-size: .94rem; font-weight: 680; list-style: none; } .observer-faq summary::-webkit-details-marker { display: none; } .observer-faq summary::after { content: "+"; position: absolute; top: 50%; right: .35rem; color: var(--observer-blue); font-size: 1.2rem; font-weight: 500; transform: translateY(-50%); } .observer-faq details[open] summary::after { content: "−"; } .observer-faq details p { margin: -.25rem 0 1.15rem; padding-right: 2.5rem; color: var(--observer-body); font-size: .88rem; line-height: 1.75; } .observer-pdf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; margin-bottom: clamp(4rem, 7vw, 6rem); padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid rgba(6, 79, 152, .18); border-radius: var(--observer-radius); background: linear-gradient(135deg, rgba(237, 244, 249, .94), rgba(249, 251, 252, .9)); } .observer-pdf h2 { margin-bottom: .55rem; } .observer-pdf p { max-width: 35rem; margin-bottom: 0; color: var(--observer-body); font-size: .85rem; line-height: 1.72; } .observer-pdf__actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; } .observer-pdf__actions a, .observer-document-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.85rem; padding: .65rem 1rem; border: 1px solid var(--observer-line-strong); border-radius: 999px; background: rgba(252, 253, 254, .82); color: var(--observer-blue-deep); font-size: .78rem; font-weight: 700; } .observer-pdf__actions a:first-child, .observer-document-actions a[data-document-open] { border-color: var(--observer-blue); background: var(--observer-blue); color: #f4f8fc; } .observer-related { width: min(100%, var(--observer-max)); } .observer-related > header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--observer-line); } .observer-related > header h2 { margin-bottom: 0; } .observer-related > header a { color: var(--observer-blue); font-size: .79rem; font-weight: 700; } /* PDF reader */ .observer-document-main { padding: clamp(7.6rem, 11vw, 9.5rem) clamp(1rem, 3.6vw, 3rem) clamp(4rem, 7vw, 6rem); } .observer-document-hero, .observer-document-shell { width: min(100%, var(--observer-max)); margin-inline: auto; } .observer-document-hero { margin-bottom: 1.4rem; } .observer-document-hero .observer-breadcrumb { justify-content: flex-start; margin-bottom: 1.2rem; } .observer-document-hero h1 { margin-bottom: .55rem; color: var(--observer-ink); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 750; letter-spacing: -.05em; } .observer-document-hero > p { margin-bottom: 0; color: var(--observer-body); line-height: 1.7; } .observer-document-shell { padding: 1rem; border: 1px solid var(--observer-line); border-radius: var(--observer-radius); background: rgba(252, 253, 254, .94); box-shadow: var(--observer-shadow); } .observer-document-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: .65rem .45rem 1rem; } .observer-document-toolbar > div:first-child > span { display: block; margin-bottom: .25rem; color: var(--observer-blue); font-size: .68rem; font-weight: 730; } .observer-document-toolbar strong { display: block; color: var(--observer-ink); font-size: 1rem; } .observer-document-toolbar p { margin: .38rem 0 0; color: var(--observer-muted); font-size: .75rem; line-height: 1.6; } .observer-document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; } .observer-document-frame { display: block; width: 100%; height: min(76vh, 58rem); min-height: 36rem; border: 1px solid var(--observer-line); border-radius: .7rem; background: #e8edf1; } .observer-document-error { padding: 4rem 1.5rem; text-align: center; } .observer-document-error h2 { margin-bottom: .7rem; color: var(--observer-ink); } .observer-document-error p { color: var(--observer-body); } .observer-document-error a { color: var(--observer-blue); font-weight: 700; } /* Footer */ .observer-footer { border-top: 1px solid rgba(6, 79, 152, .12); background: linear-gradient(110deg, rgba(234, 241, 247, .97), rgba(247, 249, 251, .95)), var(--observer-surface); color: var(--observer-ink); } .observer-footer__inner, .observer-footer__bottom { width: min(var(--observer-max), calc(100% - 2rem)); margin-inline: auto; } .observer-footer__inner { display: grid; grid-template-columns: minmax(24rem, 1.12fr) minmax(22rem, .88fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 2.15rem 0; } .observer-footer__identity { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 1.25rem; align-items: center; } .observer-footer__mark img { display: block; width: 7.25rem; height: auto; } .observer-footer__identity > div { display: grid; gap: .28rem; } .observer-footer__identity strong { color: var(--observer-ink); font-size: .83rem; font-weight: 710; } .observer-footer__identity > div a { width: fit-content; color: var(--observer-body); font-size: .74rem; } .observer-footer__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; } .observer-footer__routes > div { display: grid; gap: .52rem; } .observer-footer__routes a { width: fit-content; color: var(--observer-body); font-size: .75rem; font-weight: 620; transition: color 180ms ease; } .observer-footer__routes a:hover, .observer-footer__identity a:hover, .observer-footer__bottom a:hover { color: var(--observer-blue); } .observer-footer__bottom { display: grid; grid-template-columns: auto auto minmax(18rem, 1fr) auto auto; gap: 1rem; align-items: center; min-height: 3.25rem; border-top: 1px solid var(--observer-line); color: var(--observer-muted); font-size: .66rem; white-space: nowrap; } .observer-footer__bottom :nth-child(3) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } html[lang="en"] body[data-bioten-observer] :where(h1, h2, h3, p, a, span, strong, button, input), html[lang="en"] .observer-home :where(h2, h3, p, a, span) { word-break: normal; } @media (max-width: 68.749rem) { .observer-search { grid-template-columns: 1fr; align-items: stretch; } .observer-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .observer-footer__inner { grid-template-columns: 1fr; } .observer-footer__bottom { grid-template-columns: auto auto minmax(10rem, 1fr) auto auto; gap: .65rem; font-size: .62rem; } } @media (max-width: 67.499rem) { .observer-grid, .observer-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 53.75rem) { .observer-main, .observer-article-main, .observer-document-main { padding-top: 6.7rem; } .observer-hero { grid-template-columns: 1fr; } .observer-empty { grid-template-columns: 1fr; } .observer-pdf, .observer-document-toolbar { grid-template-columns: 1fr; } .observer-pdf__actions, .observer-document-actions { justify-content: flex-start; } .observer-document-frame { min-height: 31rem; } .observer-footer__bottom { display: flex; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; } } @media (max-width: 44.999rem) { .observer-main, .observer-article-main, .observer-document-main { padding-right: .9rem; padding-left: .9rem; } .observer-hero { min-height: 0; padding: 2rem 1.25rem 2.2rem; } .observer-hero h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); } .observer-tabs { overflow-x: auto; scroll-snap-type: x proximity; } .observer-tabs a { flex: 0 0 auto; scroll-snap-align: start; } .observer-search form > div { grid-template-columns: minmax(0, 1fr) auto; } .observer-search form button[data-observer-reset] { grid-column: 1 / -1; } .observer-grid, .observer-related__grid, .observer-home__grid { grid-template-columns: 1fr; } .observer-card__body > p { min-height: 0; } .observer-home { padding-right: .9rem; padding-left: .9rem; } .observer-home__head { align-items: center; } .observer-home__head p { letter-spacing: .025em; } .observer-home__head > a { flex: 0 0 auto; } .observer-article-hero { text-align: left; } .observer-article-hero h1, .observer-article-abstract { margin-inline: 0; } .observer-article-hero h1 { font-size: clamp(1.9rem, 9vw, 2.65rem); } .observer-breadcrumb, .observer-article-hero__meta, .observer-article-hero > .observer-tags { justify-content: flex-start; } .observer-core-points, .observer-pdf { padding: 1.25rem; } .observer-article-data th { width: 7.5rem; } .observer-pdf__actions, .observer-pdf__actions a, .observer-document-actions, .observer-document-actions a { width: 100%; } .observer-related > header { align-items: center; } .observer-footer__inner { padding: 1.7rem 0; } .observer-footer__identity { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; } .observer-footer__mark img { width: 6rem; } .observer-footer__routes { gap: 1rem; } } @media (max-width: 27.499rem) { .observer-content__head, .observer-home__head, .observer-related > header { align-items: flex-start; flex-direction: column; gap: .75rem; } .observer-search form > div { grid-template-columns: 1fr; } .observer-search form button, .observer-search form button[data-observer-reset] { grid-column: 1; width: 100%; } .observer-footer__identity, .observer-footer__routes { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .observer-card, .observer-card__media img, .observer-home-card, .observer-home-card__media img, .observer-card__read span:last-child, .observer-search button, .observer-pagination button, .observer-home__head > a { scroll-behavior: auto !important; transition: none !important; } } /* -------------------------------------------------------------------------- * V7.17.1 BIOTEN Observer compact list refinement * Scope: collection pages only. Article, PDF reader and homepage cards retain * their established editorial composition. * -------------------------------------------------------------------------- */ .observer-main[data-observer-layout="compact-small-media"] { --observer-list-thumb: clamp(10.5rem, 15vw, 12.5rem); padding-bottom: clamp(4.5rem, 7vw, 6.5rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: clamp(2.25rem, 4vw, 3.35rem); border-left-width: .1875rem; box-shadow: 0 12px 34px rgba(24, 56, 86, .055); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { margin-bottom: .85rem; font-size: .66rem; letter-spacing: .15em; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { margin-bottom: .85rem; font-size: clamp(2.25rem, 4vw, 3.45rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__lead { max-width: 46rem; font-size: clamp(.92rem, 1.15vw, 1.02rem); line-height: 1.72; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { gap: clamp(1.1rem, 2.3vw, 1.8rem); padding-top: .15rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a { min-height: 3rem; padding: .65rem 0; color: var(--observer-muted); font-size: .76rem; font-weight: 610; opacity: .82; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a:hover, .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a[aria-current="page"] { color: var(--observer-blue-deep); opacity: 1; } .observer-main[data-observer-layout="compact-small-media"] .observer-content { padding-top: clamp(2.1rem, 3.6vw, 3rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-content__head { padding-bottom: .8rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-content__head h2 { margin-bottom: .3rem; font-size: clamp(1.35rem, 2vw, 1.75rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-content__head p { font-size: .72rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-search { grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr); gap: clamp(.85rem, 1.8vw, 1.4rem); align-items: center; padding: .8rem 0 1.35rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form label { margin-bottom: .35rem; color: var(--observer-muted); font-size: .66rem; font-weight: 610; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form > div { gap: .35rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-search input, .observer-main[data-observer-layout="compact-small-media"] .observer-search button { min-height: 2.3rem; height: 2.3rem; font-size: .72rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-search input { border-color: rgba(31, 67, 101, .14); background: rgba(252, 253, 254, .72); box-shadow: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form button[type="submit"] { border-color: rgba(6, 79, 152, .18); background: rgba(6, 79, 152, .075); color: var(--observer-blue-deep); } .observer-main[data-observer-layout="compact-small-media"] .observer-search form button[type="submit"]:hover { border-color: rgba(6, 79, 152, .3); background: rgba(6, 79, 152, .12); color: var(--observer-blue-deep); } .observer-main[data-observer-layout="compact-small-media"] .observer-search button[data-observer-reset] { border-color: transparent; background: transparent; color: var(--observer-muted); } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter { gap: .22rem; padding: .1rem 0 .2rem; opacity: .72; scrollbar-width: none; transition: opacity 180ms ease; } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter:hover, .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter:focus-within { opacity: 1; } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter::-webkit-scrollbar { display: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter button { min-height: 1.9rem; height: 1.9rem; padding: 0 .55rem; border-color: transparent; background: transparent; color: var(--observer-muted); font-size: .67rem; font-weight: 600; } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter button small { font-size: .6rem; opacity: .78; } .observer-main[data-observer-layout="compact-small-media"] .observer-tag-filter button.is-active { border-color: rgba(6, 79, 152, .13); background: rgba(6, 79, 152, .06); color: var(--observer-blue-deep); } .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-card { display: grid; grid-template-columns: var(--observer-list-thumb) minmax(0, 1fr); align-items: stretch; min-height: 13rem; border-radius: .72rem; background: rgba(252, 253, 254, .9); box-shadow: 0 .45rem 1.4rem rgba(24, 56, 86, .038); } .observer-main[data-observer-layout="compact-small-media"] .observer-card:hover { box-shadow: 0 .8rem 2rem rgba(20, 59, 96, .08); transform: translateY(-.08rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-card__media { align-self: start; margin: .9rem 0 .9rem .9rem; aspect-ratio: 16 / 9; border-radius: .5rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body { min-width: 0; padding: .9rem 1rem .85rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__meta { gap: .55rem; margin-bottom: .52rem; font-size: .64rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card h2, .observer-main[data-observer-layout="compact-small-media"] .observer-card h3 { min-height: 2.88em; margin-bottom: .48rem; font-size: clamp(.94rem, 1.15vw, 1.04rem); line-height: 1.44; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body > p { min-height: 3.05em; margin-bottom: .55rem; font-size: .75rem; line-height: 1.52; -webkit-line-clamp: 2; } .observer-main[data-observer-layout="compact-small-media"] .observer-tags { gap: .25rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-tags li:nth-child(n + 3) { display: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-tags a { min-height: 1.42rem; padding: .1rem .4rem; border-color: rgba(6, 79, 152, .09); background: rgba(6, 79, 152, .03); font-size: .61rem; font-weight: 610; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__read { margin-top: .5rem; padding-top: .48rem; border-top-color: rgba(31, 67, 101, .09); font-size: .68rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-pagination { margin-top: clamp(2rem, 3.5vw, 2.75rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-pagination button { min-width: 2.25rem; min-height: 2.25rem; padding-inline: .7rem; font-size: .72rem; } @media (max-width: 68.749rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-search { grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr); } } @media (max-width: 56.249rem) { .observer-main[data-observer-layout="compact-small-media"] { --observer-list-thumb: clamp(10rem, 26vw, 13rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-search, .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: minmax(0, 1fr); } .observer-main[data-observer-layout="compact-small-media"] .observer-search { align-items: stretch; } .observer-main[data-observer-layout="compact-small-media"] .observer-card { min-height: 11.75rem; } } @media (max-width: 44.999rem) { .observer-main[data-observer-layout="compact-small-media"] { --observer-list-thumb: clamp(7.25rem, 31vw, 8.5rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: 1.75rem 1.15rem 1.9rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { font-size: clamp(2.15rem, 10.5vw, 2.85rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { gap: 1.15rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a { min-height: 2.75rem; font-size: .72rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form > div { grid-template-columns: minmax(0, 1fr) auto auto; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form button[data-observer-reset] { grid-column: auto; width: auto; } .observer-main[data-observer-layout="compact-small-media"] .observer-grid { gap: .65rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card { min-height: 0; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__media { margin: .72rem 0 .72rem .72rem; border-radius: .42rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body { padding: .72rem .78rem .7rem .7rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__meta { align-items: flex-start; margin-bottom: .4rem; font-size: .59rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card h2, .observer-main[data-observer-layout="compact-small-media"] .observer-card h3 { min-height: 2.84em; margin-bottom: .3rem; font-size: .86rem; line-height: 1.42; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body > p, .observer-main[data-observer-layout="compact-small-media"] .observer-card .observer-tags { display: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__read { margin-top: auto; padding-top: .35rem; border-top: 0; font-size: .64rem; } } @media (max-width: 27.499rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-search form > div { grid-template-columns: minmax(0, 1fr) auto; } .observer-main[data-observer-layout="compact-small-media"] .observer-search form button[data-observer-reset] { grid-column: 1 / -1; justify-self: end; height: 1.7rem; min-height: 1.7rem; } } /* -------------------------------------------------------------------------- * V7.17.1 BIOTEN Observer refined editorial wall * The public collection view is intentionally reduced to image, category, * date, headline and reading path. Search and tag data remain available to * the publishing system but no longer compete with the editorial hierarchy. * -------------------------------------------------------------------------- */ .observer-main[data-observer-layout="compact-small-media"] { --observer-mini-radius: .52rem; padding-bottom: clamp(4rem, 6vw, 5.5rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: clamp(1.85rem, 3.2vw, 2.75rem); border-left-width: .15rem; border-radius: .7rem; box-shadow: 0 .7rem 2rem rgba(24, 56, 86, .04); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { margin-bottom: .62rem; font-size: .61rem; letter-spacing: .14em; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { margin-bottom: .62rem; font-size: clamp(2.05rem, 3.6vw, 3.05rem); letter-spacing: -.045em; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__lead { max-width: 43rem; font-size: clamp(.84rem, 1vw, .94rem); line-height: 1.68; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { gap: clamp(1rem, 2vw, 1.55rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a { min-height: 2.65rem; padding: .55rem 0; border-bottom-width: .0625rem; font-size: .7rem; font-weight: 630; } .observer-main[data-observer-layout="compact-small-media"] .observer-content { padding-top: clamp(1.6rem, 2.7vw, 2.25rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-content__head[hidden], .observer-main[data-observer-layout="compact-small-media"] .observer-search[hidden] { display: none !important; } .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.7rem, 2.7vw, 2.35rem) clamp(.85rem, 1.5vw, 1.2rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-card { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0 0 .8rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; transform: none; transition: transform 220ms cubic-bezier(.2, .75, .25, 1); } .observer-main[data-observer-layout="compact-small-media"] .observer-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(6, 79, 152, .42), rgba(31, 67, 101, .1)); transform: scaleX(.24); transform-origin: left center; transition: transform 260ms cubic-bezier(.2, .75, .25, 1); } .observer-main[data-observer-layout="compact-small-media"] .observer-card:hover { box-shadow: none; transform: translateY(-.14rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-card:hover::after, .observer-main[data-observer-layout="compact-small-media"] .observer-card:focus-within::after { transform: scaleX(1); } .observer-main[data-observer-layout="compact-small-media"] .observer-card__media { position: relative; align-self: stretch; width: 100%; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--observer-mini-radius); background: #e9eef2; box-shadow: inset 0 0 0 1px rgba(31, 67, 101, .08); overflow: hidden; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: inherit; box-shadow: inset 0 -1.2rem 2rem rgba(20, 48, 73, .035); pointer-events: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__media img { transform: scale(1.001); transition: transform 420ms cubic-bezier(.2, .75, .25, 1), filter 220ms ease; } .observer-main[data-observer-layout="compact-small-media"] .observer-card:hover .observer-card__media img, .observer-main[data-observer-layout="compact-small-media"] .observer-card:focus-within .observer-card__media img { filter: saturate(1.025) contrast(1.015); transform: scale(1.035); } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body { flex: 1; min-width: 0; padding: .7rem .06rem .05rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__meta { gap: .42rem; margin-bottom: .38rem; color: #748291; font-size: .59rem; line-height: 1.35; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__meta span { color: var(--observer-blue-deep); font-weight: 680; } .observer-main[data-observer-layout="compact-small-media"] .observer-card h2, .observer-main[data-observer-layout="compact-small-media"] .observer-card h3 { display: -webkit-box; min-height: 4.25em; margin: 0; color: var(--observer-ink); font-size: clamp(.82rem, .92vw, .92rem); font-weight: 675; letter-spacing: -.018em; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body > p, .observer-main[data-observer-layout="compact-small-media"] .observer-card .observer-tags { display: none; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__read { gap: .3rem; margin-top: auto; padding-top: .55rem; border-top: 0; color: #687787; font-size: .61rem; font-weight: 620; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__read:hover { color: var(--observer-blue-deep); } .observer-main[data-observer-layout="compact-small-media"] .observer-pagination { gap: .32rem; margin-top: clamp(2.2rem, 3.7vw, 3rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-pagination button { min-width: 2.05rem; min-height: 2.05rem; padding-inline: .62rem; font-size: .67rem; box-shadow: none; } @media (max-width: 77.999rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 57.999rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .observer-main[data-observer-layout="compact-small-media"] .observer-card h2, .observer-main[data-observer-layout="compact-small-media"] .observer-card h3 { font-size: .9rem; } } @media (max-width: 41.999rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: 1.55rem 1.1rem 1.7rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { font-size: clamp(1.95rem, 9.5vw, 2.55rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-content { padding-top: 1.35rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-grid { grid-template-columns: minmax(0, 1fr); gap: .85rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card { display: grid; grid-template-columns: clamp(7.35rem, 31vw, 8.75rem) minmax(0, 1fr); gap: .8rem; align-items: start; padding-bottom: .8rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__body { min-height: 100%; padding: .03rem 0 0; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__meta { margin-bottom: .3rem; font-size: .56rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card h2, .observer-main[data-observer-layout="compact-small-media"] .observer-card h3 { min-height: 4.2em; font-size: .82rem; line-height: 1.4; } .observer-main[data-observer-layout="compact-small-media"] .observer-card__read { display: none; } } @media (max-width: 27.499rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { gap: .85rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a { font-size: .66rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-card { grid-template-columns: 6.8rem minmax(0, 1fr); gap: .68rem; } } @media (prefers-reduced-motion: reduce) { .observer-main[data-observer-layout="compact-small-media"] .observer-card, .observer-main[data-observer-layout="compact-small-media"] .observer-card::after, .observer-main[data-observer-layout="compact-small-media"] .observer-card__media img { transition: none !important; } .observer-main[data-observer-layout="compact-small-media"] .observer-card:hover { transform: none; } } /* -------------------------------------------------------------------------- * V7.17.1 BIOTEN Observer international editorial front page * Visual archetype: cool soft-structuralism + asymmetrical editorial bento. * One lead report and two supporting reports establish hierarchy before the * compact archive wall. Homepage cards and article pages remain untouched. * -------------------------------------------------------------------------- */ .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: clamp(2.6rem, 5vw, 4.3rem) 0 clamp(1.8rem, 3.2vw, 2.6rem); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero > div { display: grid; grid-template-columns: minmax(12rem, .42fr) minmax(0, .58fr); gap: 1rem clamp(2rem, 5vw, 5.25rem); align-items: end; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { grid-column: 1 / -1; margin: 0 0 clamp(1.4rem, 2.8vw, 2.2rem); color: #064f98; font-size: clamp(3.45rem, 8.15vw, 7.35rem); font-weight: 790; letter-spacing: -.072em; line-height: .82; white-space: nowrap; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { max-width: none; margin: 0; color: #163a5b; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 720; letter-spacing: -.035em; line-height: 1.16; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__lead { justify-self: end; max-width: 38rem; margin: 0; color: #53677a; font-size: clamp(.84rem, 1vw, .94rem); line-height: 1.72; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { justify-content: flex-end; gap: clamp(1.1rem, 2.4vw, 2rem); border-top: 1px solid rgba(31, 67, 101, .08); border-bottom-color: rgba(31, 67, 101, .12); } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs a { min-height: 3rem; font-size: .72rem; letter-spacing: .01em; } .observer-main[data-observer-layout="compact-small-media"] .observer-content { padding-top: clamp(1.9rem, 3.6vw, 3.15rem); } .observer-frontpage { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(20rem, .78fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.35vw, 1.05rem); margin-bottom: clamp(2.7rem, 5vw, 4.4rem); } .observer-frontpage[hidden], .observer-grid--archive[hidden] { display: none !important; } .observer-frontpage .observer-card { padding: .42rem; border-radius: .9rem; background: rgba(6, 79, 152, .045); box-shadow: inset 0 0 0 1px rgba(6, 79, 152, .075), 0 1.25rem 3.6rem rgba(17, 56, 91, .055); overflow: hidden; } .observer-frontpage .observer-card::after { display: none; } .observer-frontpage .observer-card--lead { grid-row: 1 / 3; } .observer-frontpage .observer-card--lead .observer-card__media { border-radius: .62rem; } .observer-frontpage .observer-card--lead .observer-card__body { padding: clamp(.9rem, 1.5vw, 1.25rem) clamp(.75rem, 1.35vw, 1.1rem) .75rem; } .observer-frontpage .observer-card--lead .observer-card__meta { margin-bottom: .55rem; font-size: .64rem; } .observer-frontpage .observer-card--lead h2 { min-height: 0; font-size: clamp(1.15rem, 1.75vw, 1.52rem); font-weight: 710; letter-spacing: -.035em; line-height: 1.32; -webkit-line-clamp: 3; } .observer-frontpage .observer-card--lead .observer-card__body > p { display: -webkit-box; max-width: 58ch; margin: .65rem 0 0; color: #607285; font-size: .75rem; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .observer-frontpage .observer-card--lead .observer-card__read { margin-top: .72rem; color: #315f89; font-size: .66rem; } .observer-frontpage .observer-card--side { display: grid; grid-template-columns: minmax(9.25rem, .92fr) minmax(0, 1.08fr); gap: .7rem; align-items: center; min-height: 0; } .observer-frontpage .observer-card--side .observer-card__media { align-self: center; border-radius: .58rem; } .observer-frontpage .observer-card--side .observer-card__body { min-height: 100%; padding: .45rem .55rem .42rem 0; } .observer-frontpage .observer-card--side .observer-card__meta { margin-bottom: .38rem; font-size: .57rem; } .observer-frontpage .observer-card--side h2 { min-height: 4.2em; font-size: clamp(.82rem, 1vw, .94rem); line-height: 1.4; } .observer-frontpage .observer-card--side .observer-card__read { padding-top: .42rem; font-size: .59rem; } .observer-grid--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); } .observer-grid--archive .observer-card { transition: transform 260ms cubic-bezier(.22, .75, .24, 1); } @media (prefers-reduced-motion: no-preference) { @keyframes observer-editorial-enter { from { opacity: 0; transform: translateY(1.15rem); } to { opacity: 1; transform: translateY(0); } } .observer-main[data-observer-layout="compact-small-media"] .observer-hero > div, .observer-frontpage, .observer-grid--archive { animation: observer-editorial-enter 760ms cubic-bezier(.2, .72, .2, 1) both; } .observer-frontpage { animation-delay: 90ms; } .observer-grid--archive { animation-delay: 160ms; } } @media (max-width: 63.999rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { font-size: clamp(3.2rem, 10vw, 6.2rem); } .observer-frontpage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .observer-frontpage .observer-card--lead { grid-column: 1 / -1; grid-row: auto; } .observer-frontpage .observer-card--side { grid-template-columns: minmax(8.2rem, .78fr) minmax(0, 1.22fr); } .observer-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 47.999rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-hero { padding: 2.35rem 0 1.8rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero > div { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand, .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1, .observer-main[data-observer-layout="compact-small-media"] .observer-hero__lead { grid-column: 1; justify-self: start; } .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { margin-bottom: 1rem; font-size: clamp(2rem, 11.5vw, 4.35rem); } .observer-main[data-observer-layout="compact-small-media"] .observer-hero h1 { font-size: 1.45rem; } .observer-main[data-observer-layout="compact-small-media"] .observer-tabs { justify-content: flex-start; } .observer-frontpage { grid-template-columns: minmax(0, 1fr); margin-bottom: 2.5rem; } .observer-frontpage .observer-card--lead, .observer-frontpage .observer-card--side { grid-column: 1; } .observer-frontpage .observer-card--side { grid-template-columns: clamp(7.75rem, 31vw, 9.5rem) minmax(0, 1fr); } .observer-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 41.999rem) { .observer-grid--archive { grid-template-columns: minmax(0, 1fr); } .observer-frontpage .observer-card--lead { display: flex; } .observer-frontpage .observer-card--side { display: grid; } } @media (max-width: 27.499rem) { .observer-main[data-observer-layout="compact-small-media"] .observer-hero__brand { font-size: clamp(1.85rem, 11.2vw, 3.1rem); } .observer-frontpage .observer-card--side { grid-template-columns: 6.9rem minmax(0, 1fr); gap: .6rem; } .observer-frontpage .observer-card--side .observer-card__body { padding-right: .25rem; } } /* -------------------------------------------------------------------------- * V7.17.1 BIOTEN Observer precision editorial rail * Collection pages use a left-led section rail and compact publication cards. * The homepage module, articles and PDF reader keep their existing layouts. * -------------------------------------------------------------------------- */ .observer-main[data-observer-layout="precision-editorial-rail"] { padding-bottom: clamp(4.25rem, 7vw, 6.25rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero { padding: clamp(2.1rem, 3.8vw, 3rem) 0 clamp(1.65rem, 2.8vw, 2.15rem); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero__brand { margin: 0 0 .72rem; color: var(--observer-blue); font-size: .63rem; font-weight: 760; letter-spacing: .14em; line-height: 1.25; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero h1 { max-width: none; margin: 0; color: #173a59; font-size: clamp(1.85rem, 3vw, 2.55rem); font-weight: 735; letter-spacing: -.045em; line-height: 1.12; text-wrap: balance; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero__lead { max-width: 56ch; margin: .72rem 0 0; color: #5c6f80; font-size: clamp(.78rem, .92vw, .86rem); line-height: 1.72; text-wrap: pretty; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-layout { display: grid; grid-template-columns: minmax(9.75rem, 12rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; width: min(100%, var(--observer-max)); margin-inline: auto; padding-top: clamp(1.25rem, 2.4vw, 1.85rem); border-top: 1px solid rgba(31, 67, 101, .13); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-rail { position: sticky; top: 7.25rem; min-width: 0; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; width: 100%; margin: 0; padding: 0; border: 0; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a { justify-content: flex-start; min-height: 2.55rem; padding: .64rem .7rem; border: 0; border-left: .125rem solid transparent; border-radius: 0 .38rem .38rem 0; color: #687989; font-size: .86rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a:hover { background: rgba(6, 79, 152, .035); color: var(--observer-blue-deep); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a[aria-current="page"] { border-left-color: var(--observer-blue); background: linear-gradient(90deg, rgba(6, 79, 152, .075), rgba(6, 79, 152, 0)); color: var(--observer-blue-deep); font-weight: 735; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-content, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-empty { width: 100%; min-width: 0; margin: 0; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-content { padding-top: 0; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-content__head[hidden], .observer-main[data-observer-layout="precision-editorial-rail"] .observer-search[hidden] { display: none !important; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.85rem, 1.5vw, 1.2rem) clamp(.6rem, 1vw, .82rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card { min-height: 0; padding: .26rem .26rem .52rem; border: 1px solid rgba(31, 67, 101, .095); border-radius: .54rem; background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(247, 250, 252, .58)), rgba(252, 253, 254, .64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 .42rem 1.4rem rgba(24, 56, 86, .032); transform: none; transition: border-color 200ms ease, box-shadow 220ms ease; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card:hover, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card:focus-within { border-color: rgba(6, 79, 152, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 .65rem 1.7rem rgba(24, 56, 86, .055); transform: none; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__media { border-radius: .34rem; background: #eaf0f4; box-shadow: inset 0 0 0 1px rgba(31, 67, 101, .07), 0 .18rem .55rem rgba(24, 56, 86, .025); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__media img { transform: scale(1.001); transition: transform 360ms cubic-bezier(.2, .75, .25, 1), filter 220ms ease; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card:hover .observer-card__media img, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card:focus-within .observer-card__media img { filter: saturate(1.02) contrast(1.012); transform: scale(1.02); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__body { padding: .5rem .28rem .03rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__meta { gap: .38rem; margin-bottom: .3rem; color: #7b8996; font-size: .52rem; line-height: 1.3; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__meta span { color: #315f89; font-weight: 710; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card h2, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card h3 { min-height: 4.32em; margin: 0; color: #1e3448; font-size: clamp(.64rem, .56vw, .69rem); font-weight: 620; letter-spacing: -.012em; line-height: 1.44; text-wrap: pretty; -webkit-line-clamp: 3; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__body > p, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card .observer-tags, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__read { display: none; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-pagination { gap: .3rem; margin-top: clamp(2rem, 3.7vw, 2.8rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-pagination button { min-width: 2rem; min-height: 2rem; padding-inline: .58rem; font-size: .65rem; box-shadow: none; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-empty { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); border-color: rgba(31, 67, 101, .1); border-radius: .72rem; background: rgba(252, 253, 254, .68); box-shadow: 0 .7rem 2rem rgba(24, 56, 86, .04); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-empty h2 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-empty p { font-size: .82rem; } @media (max-width: 73.999rem) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-layout { grid-template-columns: 9.25rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 56.999rem) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.999rem) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero { padding: 1.8rem 0 1.35rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero h1 { font-size: clamp(1.65rem, 6.8vw, 2.1rem); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-hero__lead { max-width: 48ch; font-size: .78rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-layout { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding-top: 1rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-rail { position: static; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a { min-height: 2.35rem; padding: .55rem .65rem; border: 1px solid rgba(31, 67, 101, .1); border-left-width: .125rem; border-radius: .38rem; background: rgba(252, 253, 254, .48); font-size: .78rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a[aria-current="page"] { border-color: rgba(6, 79, 152, .18); border-left-color: var(--observer-blue); } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-empty { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 39.999rem) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-grid { grid-template-columns: minmax(0, 1fr); gap: .72rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card { display: grid; grid-template-columns: clamp(7.1rem, 31vw, 8.25rem) minmax(0, 1fr); gap: .62rem; align-items: start; padding: .32rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__body { min-height: 100%; padding: .08rem .15rem .08rem 0; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__meta { margin-bottom: .28rem; font-size: .53rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card h2, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card h3 { min-height: 0; font-size: .67rem; line-height: 1.44; -webkit-line-clamp: 3; } } @media (max-width: 27.499rem) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a { font-size: .74rem; } .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card { grid-template-columns: 6.55rem minmax(0, 1fr); gap: .55rem; } } @media (prefers-reduced-motion: reduce) { .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-card__media img, .observer-main[data-observer-layout="precision-editorial-rail"] .observer-tabs a { transition: none !important; } }