/* * BIOTEN Packaging homepage · V7.14.1 * Editorial paper surface + PHA waterborne barrier engineering. * Scope: bioten.html only through the .bp7141-home body class. */ .bp7141-home { --bp7141-paper: #f7f3ea; --bp7141-paper-soft: #fcfaf5; --bp7141-paper-warm: #eee7da; --bp7141-paper-sage: #e8eee8; --bp7141-paper-blue: #e8f0f3; --bp7141-ink: #17352f; --bp7141-copy: #4c625c; --bp7141-muted: #74847f; --bp7141-green: #0b9b72; --bp7141-green-deep: #087158; --bp7141-blue: #286e94; --bp7141-line: rgba(23, 53, 47, .12); --bp7141-line-light: rgba(255, 255, 255, .72); --bp7141-shadow: 0 28px 80px rgba(54, 60, 48, .12), 0 3px 14px rgba(54, 60, 48, .055); --bp7141-shadow-soft: 0 18px 52px rgba(54, 60, 48, .085), 0 2px 8px rgba(54, 60, 48, .04); --bp7141-ease: cubic-bezier(.22, .82, .22, 1); color: var(--bp7141-ink); background: var(--bp7141-paper); font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } .bp7141-home::before { position: fixed; z-index: 60; inset: 0; background-image: radial-gradient(circle at 14% 18%, rgba(72, 58, 37, .16) 0 .45px, transparent .7px), radial-gradient(circle at 76% 64%, rgba(72, 58, 37, .11) 0 .4px, transparent .65px), repeating-linear-gradient(96deg, transparent 0 9px, rgba(71, 64, 48, .018) 9px 10px, transparent 10px 19px); background-position: 0 0, 7px 11px, 0 0; background-size: 11px 13px, 17px 19px, 23px 23px; content: ""; mix-blend-mode: multiply; opacity: .17; pointer-events: none; } .bp7141-home .site-header { background: rgba(247, 243, 234, .88); border-bottom-color: rgba(23, 53, 47, .09); box-shadow: 0 8px 34px rgba(58, 59, 45, .035); backdrop-filter: blur(20px) saturate(125%); } .bp7141-home .bp7140-main { background: var(--bp7141-paper); } .bp7141-home .bp7140-eyebrow { width: max-content; max-width: 100%; gap: 8px; margin-bottom: 18px; padding: 7px 11px; color: var(--bp7141-green-deep); background: rgba(11, 155, 114, .075); border-radius: 999px; font-size: 10px; font-weight: 780; letter-spacing: .135em; } .bp7141-home .bp7140-eyebrow::before { width: 6px; height: 6px; background: var(--bp7141-green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(11, 155, 114, .1); } .bp7141-home .bp7140-display, .bp7141-home .bp7140-section-title, .bp7141-home .bp7140-card h3, .bp7141-home .bp7140-route-card h3 { color: var(--bp7141-ink); font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; font-weight: 600; } .bp7141-home .bp7140-display em, .bp7141-home .bp7140-section-title em { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-button { min-height: 52px; gap: 10px; padding: 6px 7px 6px 20px; color: var(--bp7141-ink); background: rgba(255, 255, 255, .62); border: 1px solid rgba(23, 53, 47, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); transition: transform .55s var(--bp7141-ease), color .55s var(--bp7141-ease), background .55s var(--bp7141-ease), box-shadow .55s var(--bp7141-ease); } .bp7141-home .bp7140-button:hover, .bp7141-home .bp7140-button:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(23, 53, 47, .11), inset 0 1px 0 rgba(255, 255, 255, .76); } .bp7141-home .bp7140-button:active { transform: scale(.98); } .bp7141-home .bp7140-button--primary { color: #fff; background: var(--bp7141-ink); border-color: var(--bp7141-ink); } .bp7141-home .bp7140-button--primary:hover, .bp7141-home .bp7140-button--primary:focus-visible { color: #fff; background: var(--bp7141-green-deep); } .bp7141-button-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; background: rgba(23, 53, 47, .07); border-radius: 50%; font-size: 14px; transition: transform .55s var(--bp7141-ease), background .55s var(--bp7141-ease); } .bp7140-button--primary .bp7141-button-icon { background: rgba(255, 255, 255, .12); } .bp7141-home .bp7140-button:hover .bp7141-button-icon, .bp7141-home .bp7140-button:focus-visible .bp7141-button-icon { transform: translate3d(2px, -1px, 0) scale(1.04); } /* Editorial split hero */ .bp7141-home .bp7140-home-hero { position: relative; display: grid; min-height: auto; grid-template-columns: minmax(28px, 1fr) minmax(0, 584px) minmax(360px, 584px) minmax(28px, 1fr); grid-template-rows: minmax(630px, auto) auto; column-gap: clamp(36px, 5vw, 82px); align-items: center; overflow: hidden; color: var(--bp7141-ink); background: radial-gradient(circle at 84% 23%, rgba(40, 110, 148, .11), transparent 27rem), radial-gradient(circle at 10% 68%, rgba(11, 155, 114, .09), transparent 25rem), linear-gradient(135deg, #fbf8f1 0%, #f4efe5 54%, #ede7db 100%); } .bp7141-home .bp7140-home-hero::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .3), transparent 42%), repeating-linear-gradient(0deg, transparent 0 45px, rgba(23, 53, 47, .018) 45px 46px); content: ""; pointer-events: none; } .bp7141-home .bp7140-home-hero__content { position: relative; z-index: 4; grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 88px 0 76px; } .bp7141-home .bp7140-home-hero__copy { max-width: 610px; } .bp7141-home .bp7140-home-hero .bp7140-display { max-width: 610px; color: var(--bp7141-ink); font-size: clamp(56px, 5.35vw, 82px); letter-spacing: -.055em; line-height: 1.025; text-wrap: balance; } .bp7141-home .bp7140-home-hero .bp7140-eyebrow { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-home-hero .bp7140-lead { max-width: 570px; margin-top: 24px; color: var(--bp7141-copy); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.78; } .bp7141-home .bp7140-home-hero .bp7140-actions { margin-top: 28px; } .bp7141-home .bp7140-home-hero .bp7140-button:not(.bp7140-button--primary) { color: var(--bp7141-ink); background: rgba(255, 255, 255, .55); border-color: rgba(23, 53, 47, .14); } .bp7141-home .bp7140-home-hero .bp7140-button--primary { color: #fff; background: var(--bp7141-ink); border-color: var(--bp7141-ink); } .bp7141-home .bp7140-home-hero__media { position: relative; z-index: 2; inset: auto; grid-column: 3; grid-row: 1; width: 100%; aspect-ratio: 4 / 3; align-self: center; overflow: hidden; padding: 9px; background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .82); border-radius: 40px; box-shadow: var(--bp7141-shadow); } .bp7141-home .bp7140-home-hero__media::before { position: absolute; z-index: 3; inset: 17px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 25px; content: ""; pointer-events: none; } .bp7141-home .bp7140-home-hero__media::after { position: absolute; z-index: 4; right: 28px; bottom: 25px; padding: 8px 10px; color: rgba(255, 255, 255, .92); background: rgba(23, 53, 47, .66); border-radius: 999px; content: "PAPER · BARRIER · PACK"; font-size: 9px; font-weight: 760; letter-spacing: .14em; } .bp7141-home .bp7140-home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 61% 50%; border-radius: 30px; filter: saturate(.84) contrast(.98) brightness(1.02); transition: transform 1.2s var(--bp7141-ease), filter 1.2s var(--bp7141-ease); } .bp7141-home .bp7140-home-hero:hover .bp7140-home-hero__media img { transform: scale(1.018); filter: saturate(.9) contrast(1) brightness(1.03); } .bp7141-home .bp7140-home-hero__veil { z-index: 1; background: radial-gradient(circle at 64% 48%, rgba(255, 255, 255, .22), transparent 22rem), linear-gradient(90deg, transparent 0 52%, rgba(255, 255, 255, .08) 74%, transparent 100%); pointer-events: none; } .bp7141-home .bp7140-material-field { z-index: 3; top: 72px; right: max(24px, calc((100vw - 1240px) / 2)); bottom: auto; left: auto; width: min(44vw, 620px); height: 520px; overflow: visible; } .bp7141-home .bp7140-material-field::before { top: 10%; right: 8%; width: min(30vw, 430px); border-color: rgba(11, 155, 114, .18); box-shadow: inset 0 0 72px rgba(11, 155, 114, .07), 0 0 100px rgba(40, 110, 148, .09); animation: bp7141-field-breathe 6.8s infinite alternate var(--bp7141-ease); } .bp7141-home .bp7140-particle { background: rgba(11, 155, 114, .66); border-color: rgba(255, 255, 255, .86); box-shadow: 0 0 16px rgba(11, 155, 114, .24); } .bp7141-home .bp7140-particle:nth-child(3n) { background: rgba(40, 110, 148, .52); box-shadow: 0 0 16px rgba(40, 110, 148, .2); } .bp7141-home .bp7140-film-line { top: 18%; right: 47%; width: 4px; height: 58%; background: linear-gradient(180deg, transparent, #62c8a6 16%, #f8fff9 48%, #2f9477 82%, transparent); box-shadow: 0 0 16px rgba(11, 155, 114, .38), 0 0 36px rgba(40, 110, 148, .16); } .bp7141-home .bp7140-hero-system { display: grid; max-width: 570px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 26px; padding: 13px 0; border-block: 1px solid rgba(23, 53, 47, .12); } .bp7141-home .bp7140-hero-system span { position: relative; min-height: auto; justify-content: center; padding: 2px 12px; color: var(--bp7141-copy); background: transparent; border: 0; border-radius: 0; font-size: 11px; font-weight: 720; letter-spacing: .06em; } .bp7141-home .bp7140-hero-system span:not(:last-child)::after { position: absolute; top: 50%; right: -3px; color: rgba(11, 155, 114, .7); content: "→"; font-size: 10px; transform: translateY(-50%); } /* Release desk sits after the hero rather than over the headline. */ .bp7141-home .bp7140-release-rail { position: relative; z-index: 5; grid-column: 1 / -1; grid-row: 2; color: var(--bp7141-ink); background: transparent; } .bp7141-home .bp7140-release-rail__inner { width: var(--bp7140-shell); margin-inline: auto; padding: 20px 22px 24px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .76); border-radius: 30px 30px 0 0; box-shadow: 0 -12px 46px rgba(61, 58, 45, .055), inset 0 1px 0 rgba(255, 255, 255, .8); } .bp7141-home .bp7140-release-rail__head { align-items: center; margin-bottom: 14px; color: var(--bp7141-ink); } .bp7141-home .bp7140-release-rail__head p { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-release-rail__head h2 { color: var(--bp7141-ink); font-family: "Songti SC", "STSong", serif; font-size: 24px; font-weight: 600; } .bp7141-home .bp7140-release-rail__head a { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-release-rail__grid { gap: 12px; } .bp7141-home .bp7140-release-mini { min-height: 108px; grid-template-columns: 104px minmax(0, 1fr); color: var(--bp7141-ink); background: rgba(252, 250, 245, .9); border: 1px solid rgba(23, 53, 47, .075); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); backdrop-filter: none; transition: transform .55s var(--bp7141-ease), box-shadow .55s var(--bp7141-ease), background .55s var(--bp7141-ease); } .bp7141-home .bp7140-release-mini:hover, .bp7141-home .bp7140-release-mini:focus-visible { transform: translateY(-4px); background: #fff; box-shadow: var(--bp7141-shadow-soft); } .bp7141-home .bp7140-release-mini img { filter: saturate(.82) contrast(.96); } .bp7141-home .bp7140-release-mini__copy span { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-release-mini__copy strong { color: var(--bp7141-ink); font-size: 13px; } /* Calm paper context rail */ .bp7141-home .bp7140-context { top: 68px; color: var(--bp7141-copy); background: rgba(247, 243, 234, .91); border-top: 0; border-bottom-color: rgba(23, 53, 47, .1); box-shadow: 0 10px 28px rgba(61, 58, 45, .035); } .bp7141-home .bp7140-context a::after { background: var(--bp7141-green); } /* Shared homepage section rhythm */ .bp7141-home .bp7140-section { padding: clamp(84px, 8.5vw, 122px) 0; border: 0; } .bp7141-home .bp7140-section-head { align-items: end; gap: clamp(34px, 6vw, 74px); margin-bottom: 46px; } .bp7141-home .bp7140-section-title { max-width: 760px; font-size: clamp(42px, 4.25vw, 60px); letter-spacing: -.048em; line-height: 1.1; text-wrap: balance; } .bp7141-home .bp7140-section-head > p { max-width: 430px; color: var(--bp7141-copy); font-size: 15px; line-height: 1.8; } /* Application bento */ .bp7141-home .bp7141-section-domains { background: radial-gradient(circle at 94% 18%, rgba(40, 110, 148, .08), transparent 25rem), var(--bp7141-paper-warm); } .bp7141-home .bp7141-section-domains .bp7140-grid--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(1), .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(4) { grid-column: span 7; } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(2), .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(3) { grid-column: span 5; } .bp7141-home .bp7140-route-card { padding: 8px; overflow: hidden; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .72); border-radius: 32px; box-shadow: var(--bp7141-shadow-soft); transition: transform .65s var(--bp7141-ease), box-shadow .65s var(--bp7141-ease); } .bp7141-home .bp7140-route-card::before { inset: 8px; border-color: rgba(255, 255, 255, .54); border-radius: 24px; } .bp7141-home .bp7140-route-card:hover, .bp7141-home .bp7140-route-card:focus-within { transform: translateY(-7px); box-shadow: var(--bp7141-shadow); } .bp7141-home .bp7140-route-card__media { aspect-ratio: 16 / 9; border-radius: 24px; } .bp7141-home .bp7140-route-card__media::after { background: linear-gradient(180deg, transparent 48%, rgba(23, 53, 47, .18)); } .bp7141-home .bp7140-route-card__media img { filter: var(--bp7141-image-filter, saturate(.84) contrast(.97)); transition: transform .9s var(--bp7141-ease), filter .9s var(--bp7141-ease); } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(3) { --bp7141-image-filter: saturate(.68) sepia(.035) brightness(1.035) contrast(.95); --bp7141-image-hover: saturate(.75) sepia(.025) brightness(1.05) contrast(.97); } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(4) { --bp7141-image-filter: saturate(.56) brightness(1.09) contrast(.91); --bp7141-image-hover: saturate(.62) brightness(1.1) contrast(.94); } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(4) img { object-position: 58% 50%; } .bp7141-home .bp7140-route-card:hover img { transform: scale(1.035); filter: var(--bp7141-image-hover, saturate(.9) brightness(1.02) contrast(.98)); } .bp7141-home .bp7140-route-card__body { padding: 24px 22px 22px; } .bp7141-home .bp7140-route-card__meta { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-route-card h3 { font-size: clamp(24px, 2.2vw, 31px); } .bp7141-home .bp7140-route-card p { max-width: 560px; color: var(--bp7141-copy); font-size: 13px; line-height: 1.72; } .bp7141-home .bp7140-route-card__body > a { color: var(--bp7141-green-deep); } /* Engineering chain on a pale coated-paper field */ .bp7141-home .bp7141-section-engineering { color: var(--bp7141-ink); background: radial-gradient(circle at 82% 20%, rgba(40, 110, 148, .11), transparent 25rem), radial-gradient(circle at 13% 84%, rgba(11, 155, 114, .11), transparent 24rem), var(--bp7141-paper-sage); } .bp7141-home .bp7141-section-engineering .bp7140-eyebrow, .bp7141-home .bp7141-section-engineering .bp7140-card__number, .bp7141-home .bp7141-section-engineering .bp7140-card a { color: var(--bp7141-green-deep); } .bp7141-home .bp7141-section-engineering .bp7140-section-head > p, .bp7141-home .bp7141-section-engineering .bp7140-copy { color: var(--bp7141-copy); } .bp7141-home .bp7140-chain { position: relative; gap: 8px; padding: 8px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .72); border-radius: 32px; box-shadow: var(--bp7141-shadow-soft); } .bp7141-home .bp7140-chain::before { position: absolute; z-index: 3; top: 8px; right: 10%; left: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--bp7141-green), var(--bp7141-blue), transparent); content: ""; opacity: .62; } .bp7141-home .bp7140-chain article { min-height: 190px; padding: 29px 22px 24px; background: rgba(252, 250, 245, .86); border: 0; border-radius: 24px; } .bp7141-home .bp7140-chain article:not(:last-child)::after { right: -7px; color: var(--bp7141-green-deep); background: var(--bp7141-paper-sage); border-color: rgba(23, 53, 47, .09); } .bp7141-home .bp7140-chain span { color: var(--bp7141-green-deep); } .bp7141-home .bp7140-chain strong { color: var(--bp7141-ink); } .bp7141-home .bp7140-chain p { color: var(--bp7141-copy); } /* Candidate routes */ .bp7141-home .bp7141-section-routes { background: var(--bp7141-paper-soft); } .bp7141-home .bp7140-card { overflow: hidden; padding: 31px; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .78); border-radius: 30px; box-shadow: var(--bp7141-shadow-soft); backdrop-filter: none; transition: transform .6s var(--bp7141-ease), box-shadow .6s var(--bp7141-ease), background .6s var(--bp7141-ease); } .bp7141-home .bp7140-card::before { inset: 8px; border-color: rgba(23, 53, 47, .055); border-radius: 22px; } .bp7141-home .bp7140-card::after { position: absolute; top: 0; right: 24px; left: 24px; height: 3px; background: linear-gradient(90deg, transparent, var(--bp7141-green), transparent); content: ""; opacity: .56; } .bp7141-home .bp7140-card:hover, .bp7141-home .bp7140-card:focus-within { transform: translateY(-6px); background: rgba(255, 255, 255, .78); box-shadow: var(--bp7141-shadow); } .bp7141-home .bp7140-card__number { margin-bottom: 34px; color: var(--bp7141-green-deep); } .bp7141-home .bp7140-card h3 { font-size: clamp(23px, 2vw, 29px); } .bp7141-home .bp7140-card p { color: var(--bp7141-copy); } .bp7141-home .bp7140-card a { color: var(--bp7141-green-deep); } .bp7141-home .bp7141-section-routes .bp7140-card:nth-child(2)::after, .bp7141-home .bp7141-section-publishing .bp7140-card:nth-child(even)::after { background: linear-gradient(90deg, transparent, var(--bp7141-blue), transparent); } /* Developer publishing system */ .bp7141-home .bp7141-section-publishing { background: linear-gradient(125deg, rgba(255, 255, 255, .26), transparent 50%), var(--bp7141-paper-blue); } .bp7141-home .bp7141-section-publishing .bp7140-grid--4 { gap: 12px; } .bp7141-home .bp7141-section-publishing .bp7140-card { min-height: 270px; display: flex; flex-direction: column; } .bp7141-home .bp7141-section-publishing .bp7140-card__number { margin-bottom: auto; padding-bottom: 40px; } /* Evidence ribbon */ .bp7141-home .bp7141-section-evidence { background: var(--bp7141-paper); } .bp7141-home .bp7140-evidence-ribbon { gap: 8px; padding: 8px; background: rgba(255, 255, 255, .48); border: 1px solid rgba(255, 255, 255, .78); border-radius: 30px; box-shadow: var(--bp7141-shadow-soft); } .bp7141-home .bp7140-evidence-ribbon article { position: relative; min-height: 142px; padding: 30px 24px 24px; background: rgba(252, 250, 245, .86); border: 0; border-radius: 22px; } .bp7141-home .bp7140-evidence-ribbon article::before { position: absolute; top: 17px; left: 24px; width: 18px; height: 3px; background: var(--bp7141-green); border-radius: 999px; content: ""; } .bp7141-home .bp7140-evidence-ribbon article:nth-child(even)::before { background: var(--bp7141-blue); } .bp7141-home .bp7140-evidence-ribbon strong { color: var(--bp7141-ink); } .bp7141-home .bp7140-evidence-ribbon p { color: var(--bp7141-copy); } .bp7141-home .bp7141-section-evidence .bp7140-button--blue { color: #fff; background: var(--bp7141-blue); border-color: var(--bp7141-blue); } /* Contained final conversion panel */ .bp7141-home .bp7141-project-cta { padding: 30px 0 92px; color: #fff; background: var(--bp7141-paper); } .bp7141-home .bp7141-project-cta .bp7140-cta__grid { padding: clamp(44px, 6vw, 76px); background: radial-gradient(circle at 86% 18%, rgba(40, 110, 148, .3), transparent 22rem), radial-gradient(circle at 14% 90%, rgba(11, 155, 114, .2), transparent 20rem), var(--bp7141-ink); border: 1px solid rgba(255, 255, 255, .11); border-radius: 40px; box-shadow: var(--bp7141-shadow); } .bp7141-home .bp7141-project-cta h2 { max-width: 760px; color: #fff; font-family: "Songti SC", "STSong", serif; font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.12; } .bp7141-home .bp7141-project-cta p { max-width: 690px; color: rgba(255, 255, 255, .7); } .bp7141-home .bp7141-project-cta .bp7140-button { color: var(--bp7141-ink); background: #fff; border-color: #fff; } .bp7141-home .bp7141-project-cta .bp7141-button-icon { background: rgba(23, 53, 47, .08); } /* Footer remains the single deep-green anchor. */ .bp7141-home .bp7140-footer { background: radial-gradient(circle at 86% 0, rgba(40, 110, 148, .18), transparent 28rem), #112f29; } .bp7141-home .bp7140-footer__top { padding-top: 62px; } .bp7141-home .bp7140-footer__brand p { max-width: 410px; } @keyframes bp7141-field-breathe { 0% { opacity: .42; transform: scale(.94) rotate(-3deg); } 100% { opacity: .9; transform: scale(1.035) rotate(3deg); } } @media (max-width: 1180px) { .bp7141-home .bp7140-home-hero { grid-template-columns: 24px minmax(0, 1fr) minmax(340px, .88fr) 24px; column-gap: 34px; } .bp7141-home .bp7140-home-hero .bp7140-display { font-size: clamp(52px, 5.5vw, 70px); } .bp7141-home .bp7140-material-field { right: 24px; width: 44vw; } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(n) { grid-column: span 6; } .bp7141-home .bp7140-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 920px) { .bp7141-home .bp7140-home-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0; } .bp7141-home .bp7140-home-hero__content { grid-column: 1; grid-row: 1; width: var(--bp7140-shell); margin-inline: auto; padding: 86px 0 48px; } .bp7141-home .bp7140-home-hero__copy, .bp7141-home .bp7140-home-hero .bp7140-display, .bp7141-home .bp7140-home-hero .bp7140-lead { max-width: 720px; } .bp7141-home .bp7140-home-hero__media { grid-column: 1; grid-row: 2; width: var(--bp7140-shell); max-width: 760px; margin: 0 auto 34px; } .bp7141-home .bp7140-material-field { top: auto; right: 8%; bottom: 220px; width: 72vw; max-width: 680px; height: 48vw; max-height: 500px; } .bp7141-home .bp7140-home-hero__veil { background: radial-gradient(circle at 68% 66%, rgba(40, 110, 148, .1), transparent 28rem); } .bp7141-home .bp7140-release-rail { grid-column: 1; grid-row: 3; } .bp7141-home .bp7140-release-rail__inner { border-radius: 26px 26px 0 0; } .bp7141-home .bp7140-section-head { align-items: start; gap: 22px; } .bp7141-home .bp7141-section-publishing .bp7140-grid--4, .bp7141-home .bp7140-evidence-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp7141-home .bp7140-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .bp7141-home::before { opacity: .12; } .bp7141-home .bp7140-home-hero__content { padding: 70px 0 38px; } .bp7141-home .bp7140-home-hero .bp7140-display { max-width: 520px; font-size: clamp(39px, 11.5vw, 52px); letter-spacing: -.045em; line-height: 1.075; } .bp7141-home .bp7140-home-hero .bp7140-lead { margin-top: 20px; font-size: 15px; line-height: 1.7; } .bp7141-home .bp7140-hero-system { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } .bp7141-home .bp7140-hero-system span:nth-child(2)::after { content: ""; } .bp7141-home .bp7140-actions { gap: 10px; } .bp7141-home .bp7140-button { width: 100%; justify-content: space-between; } .bp7141-home .bp7140-home-hero__media { margin-bottom: 26px; padding: 6px; border-radius: 28px; } .bp7141-home .bp7140-home-hero__media img { border-radius: 22px; } .bp7141-home .bp7140-home-hero__media::before { inset: 12px; border-radius: 18px; } .bp7141-home .bp7140-home-hero__media::after { right: 18px; bottom: 17px; font-size: 8px; } .bp7141-home .bp7140-material-field { right: 4%; bottom: 380px; width: 90vw; height: 68vw; } .bp7141-home .bp7140-release-rail__inner { padding: 20px 14px 22px; } .bp7141-home .bp7140-release-rail__head h2 { font-size: 21px; } .bp7141-home .bp7140-release-rail__grid { grid-template-columns: minmax(0, 1fr); } .bp7141-home .bp7140-release-mini { grid-template-columns: 96px minmax(0, 1fr); } .bp7141-home .bp7140-section { padding: 72px 0; } .bp7141-home .bp7140-section-title { font-size: clamp(34px, 10.6vw, 44px); line-height: 1.13; } .bp7141-home .bp7141-section-domains .bp7140-grid--4, .bp7141-home .bp7141-section-publishing .bp7140-grid--4, .bp7141-home .bp7140-evidence-ribbon, .bp7141-home .bp7140-chain { grid-template-columns: minmax(0, 1fr); } .bp7141-home .bp7141-section-domains .bp7140-route-card:nth-child(n) { grid-column: auto; } .bp7141-home .bp7140-chain article, .bp7141-home .bp7141-section-publishing .bp7140-card { min-height: auto; } .bp7141-home .bp7141-section-publishing .bp7140-card__number { margin-bottom: 28px; padding-bottom: 0; } .bp7141-home .bp7141-project-cta { padding: 18px 0 64px; } .bp7141-home .bp7141-project-cta .bp7140-cta__grid { padding: 38px 24px; border-radius: 28px; } .bp7141-home .bp7141-project-cta h2 { font-size: clamp(34px, 10vw, 44px); } } @media (prefers-reduced-motion: reduce) { .bp7141-home .bp7140-home-hero__media img, .bp7141-home .bp7140-route-card, .bp7141-home .bp7140-card, .bp7141-home .bp7140-button, .bp7141-home .bp7141-button-icon { transition: none !important; } .bp7141-home .bp7140-material-field::before { animation: none !important; } }