/* * DBC / BIOTEN V5.2.0 * Desktop Chinese full-site refinement. * Preserves the locked homepage hero and the five-entry navigation. */ :root { --v520-ink: #13202b; --v520-ink-soft: #34424d; --v520-muted: #66727b; --v520-line: rgba(22, 39, 52, .13); --v520-line-strong: rgba(22, 39, 52, .22); --v520-surface: #f7f9f8; --v520-surface-strong: #fdfdfb; --v520-blue: #0b5fa9; --v520-blue-deep: #123f67; --v520-green: #168060; --v520-green-deep: #195b48; --v520-radius-sm: 10px; --v520-radius: 16px; --v520-radius-lg: 24px; --v520-shadow-sm: 0 10px 30px rgba(18, 42, 58, .075); --v520-shadow: 0 24px 68px rgba(18, 42, 58, .11); --v520-ease: cubic-bezier(.16, 1, .3, 1); } html[data-v520-release] { scroll-behavior: smooth; scroll-padding-top: 76px; } body.v520-site { color: var(--v520-ink); font-family: "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.v520-site :is(p, li, dd, small) { text-wrap: pretty; } body.v520-site :is(h1, h2, h3) { text-wrap: balance; } body.v520-site :is(a, button, input, select, textarea):focus-visible { outline: 2px solid color-mix(in srgb, var(--v520-blue) 76%, #fdfdfb); outline-offset: 3px; } body.v520-site img { background: #edf1ef; } /* Shared header polish without changing the locked navigation geometry. */ body.v520-site.dbc-global-nav-active .site-header { box-shadow: 0 1px 0 rgba(18, 42, 58, .075), 0 14px 36px rgba(18, 42, 58, .035); } body.v520-site.dbc-global-nav-active .dbc-desktop-nav__link { letter-spacing: -.01em; transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms var(--v520-ease); } body.v520-site.dbc-global-nav-active .dbc-desktop-nav__link:hover { transform: translateY(-1px); } body.v520-site .dbc-desktop-mega__intro p, body.v520-site .dbc-desktop-route p, body.v520-site .dbc-desktop-mega__index a { line-height: 1.58; } /* Generic V5 page family: clearer rhythm and less template-like card repetition. */ body.v520-site.v500-page .v500-shell { width: min(1320px, calc(100% - 96px)); } body.v520-site.v500-page .v500-hero { min-height: 596px; padding-block: 66px 58px; } body.v520-site.v500-page .v500-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(530px, 1.1fr); gap: clamp(46px, 5.7vw, 88px); } body.v520-site.v500-page .v500-hero h1 { max-width: 10.8em; font-size: clamp(46px, 4.15vw, 68px); font-weight: 650; letter-spacing: -.052em; } body.v520-site.v500-page .v500-hero__lead { margin-top: 24px; color: #42505b; font-size: 17px; line-height: 1.76; } body.v520-site.v500-page .v500-hero__visual { min-height: 430px; border-color: rgba(21, 42, 55, .12); border-radius: var(--v520-radius-lg); box-shadow: var(--v520-shadow); } body.v520-site.v500-page .v500-button, body.v520-site .brand510-action, body.v520-site .v520-action { min-height: 46px; padding-inline: 20px; border-radius: var(--v520-radius-sm); font-weight: 660; letter-spacing: -.01em; white-space: nowrap; transition: transform 240ms var(--v520-ease), box-shadow 240ms ease, border-color 240ms ease, background-color 240ms ease; } body.v520-site.v500-page .v500-button:hover, body.v520-site .brand510-action:hover, body.v520-site .v520-action:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(19, 45, 63, .1); } body.v520-site.v500-page .v500-facts { background: rgba(253, 253, 251, .88); } body.v520-site.v500-page .v500-fact { min-height: 104px; padding-block: 22px; } body.v520-site.v500-page .v500-fact span { color: #73808a; font-size: 11px; letter-spacing: .04em; } body.v520-site.v500-page .v500-fact strong { margin-top: 10px; color: #1f2c36; font-size: 15px; line-height: 1.45; } body.v520-site.v500-page .v500-section { padding-block: clamp(82px, 8vw, 118px); } body.v520-site.v500-page .v500-section__head { max-width: 880px; margin-bottom: 44px; } body.v520-site.v500-page .v500-section__head h2, body.v520-site.v500-page .v500-evidence__intro h2 { font-size: clamp(34px, 3.1vw, 48px); font-weight: 640; line-height: 1.13; letter-spacing: -.045em; } body.v520-site.v500-page .v500-section__head p, body.v520-site.v500-page .v500-evidence__intro p { max-width: 54em; margin-top: 18px; color: var(--v520-muted); font-size: 16px; line-height: 1.78; } body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) > .v500-card { grid-column: span 6; } body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) > .v500-card:nth-child(1), body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) > .v500-card:nth-child(4) { grid-column: span 7; } body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) > .v500-card:nth-child(2), body.v520-site.v500-page .v500-card-grid:not(.v500-card-grid--5) > .v500-card:nth-child(3) { grid-column: span 5; } body.v520-site.v500-page .v500-card { min-height: 202px; padding: 30px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .82); box-shadow: inset 0 1px rgba(253, 253, 251, .94); transition: transform 260ms var(--v520-ease), box-shadow 260ms ease, border-color 260ms ease; } body.v520-site.v500-page .v500-card:hover { transform: translateY(-4px); border-color: rgba(11, 95, 169, .22); box-shadow: var(--v520-shadow-sm); } body.v520-site.v500-page .v500-card h3 { font-size: 21px; letter-spacing: -.025em; } body.v520-site.v500-page .v500-card p { margin-top: 12px; color: #5b6871; font-size: 14px; line-height: 1.72; } body.v520-site.v500-page .v500-route-grid { grid-template-columns: 1.35fr .825fr .825fr; gap: 16px; } body.v520-site.v500-page .v500-route { border-color: var(--v520-line); border-radius: var(--v520-radius); background: #fdfdfb; box-shadow: 0 16px 44px rgba(18, 42, 58, .065); } body.v520-site.v500-page .v500-route:first-child img { min-height: 260px; } body.v520-site.v500-page .v500-route img { transition: transform 640ms var(--v520-ease), filter 300ms ease; } body.v520-site.v500-page .v500-route:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.015); } body.v520-site.v500-page .v500-chain article { padding: 28px 22px; } body.v520-site.v500-page .v500-chain article span { color: rgba(205, 226, 231, .52); } body.v520-site.v500-page .v500-evidence__list article { padding: 22px 0; border-bottom: 1px solid var(--v520-line); } body.v520-site.v500-page .v500-evidence__list article:last-child { border-bottom: 0; } /* Homepage screen 02: deepen materiality while preserving all four cards and autoplay. */ body.v520-site.home-v340 #bioten .v287-packaging__stage { align-content: start; min-height: calc(100svh - 72px); padding-block: clamp(62px, 6vh, 78px) 42px; } body.v520-site.home-v340 #bioten .v311-domain { border-color: rgba(253, 253, 251, .72); box-shadow: 0 22px 56px rgba(7, 30, 43, .14), inset 0 1px rgba(253, 253, 251, .18); transition: transform 420ms var(--v520-ease), box-shadow 420ms ease, border-color 300ms ease; } body.v520-site.home-v340 #bioten .v311-domain::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid rgba(253, 253, 251, .14); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(6, 24, 34, .12); } body.v520-site.home-v340 #bioten .v311-domain__media img { transform: scale(1.01); transition: transform 760ms var(--v520-ease), filter 420ms ease; } body.v520-site.home-v340 #bioten .v311-domain__link { z-index: 4; padding: 1.35rem 3.25rem 1.35rem 1.35rem; } body.v520-site.home-v340 #bioten .v311-domain__link > i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-color: rgba(253, 253, 251, .36); background: rgba(8, 27, 38, .36); backdrop-filter: blur(12px); } @media (hover: hover) and (pointer: fine) { body.v520-site.home-v340 #bioten .v311-domain:hover { transform: translateY(-6px); border-color: rgba(253, 253, 251, .92); box-shadow: 0 30px 72px rgba(7, 30, 43, .2), inset 0 1px rgba(253, 253, 251, .2); } body.v520-site.home-v340 #bioten .v311-domain:hover .v311-domain__media img { transform: scale(1.055); filter: saturate(1.035) contrast(1.02); } } /* Homepage screen 03: turn the plain table into four brand surfaces. */ body.v520-site.home-v340 #platform .v321-portfolio__stage { align-content: start; min-height: calc(100svh - 72px); padding-block: clamp(58px, 6vh, 74px) 44px; } body.v520-site.home-v340 #platform .v321-brand-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } body.v520-site.home-v340 #platform .v321-brand-cell { position: relative; min-height: 188px; overflow: hidden; border: 1px solid rgba(20, 43, 56, .12) !important; border-radius: var(--v520-radius); background: rgba(253, 253, 251, .84); box-shadow: 0 18px 44px rgba(19, 46, 63, .075), inset 0 1px rgba(253, 253, 251, .95); } body.v520-site.home-v340 #platform .v321-brand-cell::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--v520-brand-accent, var(--v520-blue)); } body.v520-site.home-v340 #platform .v321-brand-cell--casu { --v520-brand-accent: #1c67ac; background: linear-gradient(150deg, rgba(234, 243, 250, .92), rgba(253, 253, 251, .96) 58%); } body.v520-site.home-v340 #platform .v321-brand-cell--antux { --v520-brand-accent: #32816b; background: linear-gradient(150deg, rgba(233, 245, 238, .94), rgba(253, 253, 251, .96) 58%); } body.v520-site.home-v340 #platform .v321-brand-cell--dpu { --v520-brand-accent: #b8423f; background: linear-gradient(150deg, rgba(250, 238, 235, .94), rgba(253, 253, 251, .96) 58%); } body.v520-site.home-v340 #platform .v321-brand-cell--ecoten { --v520-brand-accent: #6f7d43; background: linear-gradient(150deg, rgba(241, 243, 226, .95), rgba(253, 253, 251, .96) 58%); } body.v520-site.home-v340 #platform .v321-brand-cell__mark strong { color: var(--v520-brand-accent, var(--v520-blue)); letter-spacing: -.045em; } body.v520-site.home-v340 #platform .v321-brand-cell__mark span { color: #62707a; } body.v520-site.home-v340 #platform .v321-brand-cell > i { color: var(--v520-brand-accent, var(--v520-blue)); } body.v520-site.home-v340 #platform .v322-bioten-panel { overflow: hidden; border: 1px solid rgba(16, 70, 66, .13); background: radial-gradient(circle at 90% 12%, rgba(39, 142, 104, .13), transparent 24rem), linear-gradient(105deg, rgba(247, 251, 249, .94), rgba(233, 245, 239, .93)); box-shadow: 0 18px 48px rgba(24, 70, 66, .08), inset 0 1px rgba(253, 253, 251, .94); } body.v520-site.home-v340 #platform .v322-bioten-fields > a { transition: background-color 220ms ease, transform 220ms var(--v520-ease); } body.v520-site.home-v340 #platform .v322-bioten-fields > a:hover { background: rgba(253, 253, 251, .68); transform: translateY(-1px); } /* Homepage screen 04 and footer. */ body.v520-site.home-v340 #updates .v330-newsroom__stage { align-content: start; min-height: calc(100svh - 72px) !important; padding-block: clamp(58px, 6vh, 74px) 38px; } body.v520-site.home-v340 #updates :is(.v330-feature, .v330-news-item) { border-color: rgba(18, 42, 58, .1); transition: transform 260ms var(--v520-ease), box-shadow 260ms ease, border-color 260ms ease; } body.v520-site.home-v340 #updates :is(.v330-feature, .v330-news-item):hover { transform: translateY(-3px); border-color: rgba(11, 95, 169, .18); box-shadow: var(--v520-shadow-sm); } body.v520-site .v410-home-footer, body.v520-site .formal-site-footer { border-top: 1px solid rgba(128, 161, 174, .14); } body.v520-site .v410-home-footer__directory a, body.v520-site .footer-directory a, body.v520-site .footer-legal a { transition: color 180ms ease, opacity 180ms ease; } /* New BIOTEN application family. */ body.v520-site.v520-app { --v520-app-accent: #5d7f45; --v520-app-deep: #254d3a; --v520-app-soft: #edf3e8; --v520-app-wash: #f5f7f0; background: var(--v520-app-wash); } body.v520-site.v520-app--care { --v520-app-accent: #437e84; --v520-app-deep: #244e58; --v520-app-soft: #e8f1f1; --v520-app-wash: #f4f7f6; } body.v520-site.v520-app--coatings { --v520-app-accent: #9a6543; --v520-app-deep: #523b34; --v520-app-soft: #f1e9df; --v520-app-wash: #f7f3ed; } html body.v520-site.v520-app main :is(.v520-section-head h2, .v520-thesis__statement h2, .v520-application-card h3) { color: var(--v520-app-deep) !important; } .v520-shell { width: min(1320px, calc(100% - 96px)); margin-inline: auto; } .v520-app-main, .v520-pkg-main, .v520-dev-main, .v520-brand-detail-main { overflow: clip; } .v520-app-hero { position: relative; min-height: 648px; padding: 68px 0 58px; display: grid; align-items: center; border-bottom: 1px solid var(--v520-line); background: radial-gradient(circle at 84% 15%, color-mix(in srgb, var(--v520-app-accent) 18%, transparent), transparent 34rem), linear-gradient(125deg, #fafbf7 0%, var(--v520-app-wash) 56%, var(--v520-app-soft) 100%); } .v520-app-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(570px, 1.18fr); align-items: center; gap: clamp(54px, 6.5vw, 102px); } .v520-app-hero__copy { max-width: 610px; } .v520-kicker { margin: 0 0 18px; color: var(--v520-app-accent, var(--v520-blue)); font-size: 12px; font-weight: 720; letter-spacing: .08em; } .v520-app-hero h1, .v520-pkg-hero h1, .v520-dev-hero h1, .v520-brand-detail-hero h1 { max-width: 11.2em; margin: 0; font-size: clamp(48px, 4.35vw, 72px); font-weight: 650; line-height: 1.05; letter-spacing: -.055em; } .v520-app-hero__lead, .v520-pkg-hero__lead, .v520-dev-hero__lead, .v520-brand-detail-hero__lead { max-width: 42em; margin: 24px 0 0; color: #46545d; font-size: 17px; line-height: 1.78; } .v520-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .v520-action { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid rgba(24, 45, 57, .16); background: rgba(253, 253, 251, .78); color: var(--v520-ink); text-decoration: none; } .v520-action--solid { border-color: var(--v520-app-deep, var(--v520-blue-deep)); background: var(--v520-app-deep, var(--v520-blue-deep)); color: #f9fbfa; } .v520-app-hero__visual, .v520-pkg-hero__visual, .v520-brand-detail-hero__visual { position: relative; min-height: 470px; margin: 0; overflow: hidden; border: 1px solid rgba(20, 43, 55, .12); border-radius: var(--v520-radius-lg); background: #e9eeeb; box-shadow: var(--v520-shadow); } .v520-app-hero__visual img, .v520-pkg-hero__visual img, .v520-brand-detail-hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v520-app-hero__visual::after, .v520-pkg-hero__visual::after, .v520-brand-detail-hero__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(253, 253, 251, .24); } .v520-signal-strip { border-bottom: 1px solid var(--v520-line); background: rgba(253, 253, 251, .9); } .v520-signal-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .v520-signal { min-height: 108px; padding: 24px 24px 22px; border-left: 1px solid var(--v520-line); } .v520-signal:last-child { border-right: 1px solid var(--v520-line); } .v520-signal span { display: block; color: #78838a; font-size: 11px; letter-spacing: .055em; } .v520-signal strong { display: block; margin-top: 10px; color: var(--v520-ink); font-size: 15px; font-weight: 650; line-height: 1.45; } .v520-localnav { position: sticky; top: 72px; z-index: 9; border-bottom: 1px solid var(--v520-line); background: rgba(250, 251, 248, .9); backdrop-filter: blur(18px) saturate(115%); } .v520-localnav__inner { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .v520-localnav strong { color: var(--v520-app-deep, var(--v520-blue-deep)); font-size: 13px; } .v520-localnav nav { display: flex; gap: 28px; } .v520-localnav a { color: #5d6972; font-size: 12px; text-decoration: none; } .v520-localnav a:hover { color: var(--v520-app-accent, var(--v520-blue)); } .v520-section { padding-block: clamp(88px, 8.5vw, 126px); } .v520-section--soft { background: color-mix(in srgb, var(--v520-app-soft, #edf3f1) 76%, #fdfdfb); } .v520-section--dark { color: #eef4f1; background: radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--v520-app-accent, var(--v520-dev-accent, var(--v520-detail-accent, var(--v520-blue)))) 27%, transparent), transparent 32rem), linear-gradient(128deg, #142b2d, var(--v520-app-deep, var(--v520-dev-deep, var(--v520-detail-deep, #173f3d)))) !important; } .v520-section-head { max-width: 900px; margin-bottom: 48px; } .v520-section-head h2 { margin: 0; font-size: clamp(36px, 3.4vw, 52px); font-weight: 640; line-height: 1.12; letter-spacing: -.047em; } .v520-section-head p { max-width: 56em; margin: 18px 0 0; color: #66727b; font-size: 16px; line-height: 1.78; } .v520-section--dark .v520-section-head p { color: rgba(235, 244, 240, .7) !important; } html body.v520-site.v520-site main .v520-section--dark .v520-section-head h2, html body.v520-site.v520-site main .v520-section--dark .v520-signature__copy h3, html body.v520-site.v520-site main .v520-section--dark .v520-dev-workbench__statement h3 { color: #f2f6f4 !important; } body.v520-site .v520-section--dark .v520-signature__copy p, body.v520-site .v520-section--dark .v520-dev-workbench__statement p { color: rgba(235, 244, 240, .72) !important; } body.v520-site .v520-section--dark :is(.v520-role-list strong, .v520-dev-variable strong) { color: #f2f6f4 !important; } body.v520-site .v520-section--dark :is(.v520-role-list span, .v520-dev-variable span) { color: rgba(235, 244, 240, .64) !important; } .v520-thesis { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(56px, 7vw, 110px); align-items: start; } .v520-thesis__statement h2 { margin: 0; color: var(--v520-app-deep); font-size: clamp(38px, 3.8vw, 58px); font-weight: 640; line-height: 1.1; letter-spacing: -.05em; } .v520-thesis__statement p { margin: 22px 0 0; color: #57646d; font-size: 16px; line-height: 1.8; } .v520-thesis__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .v520-thesis__list article { min-height: 180px; padding: 26px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .76); box-shadow: inset 0 1px rgba(253, 253, 251, .94); } .v520-thesis__list article:nth-child(1), .v520-thesis__list article:nth-child(4) { background: color-mix(in srgb, var(--v520-app-soft) 70%, #fdfdfb); } .v520-thesis__list strong { display: block; font-size: 18px; line-height: 1.35; } .v520-thesis__list p { margin: 12px 0 0; color: #64717a; font-size: 14px; line-height: 1.7; } .v520-signature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 18px; } .v520-signature__visual, .v520-signature__copy { min-height: 430px; border: 1px solid rgba(238, 245, 242, .13); border-radius: var(--v520-radius-lg); background: rgba(249, 252, 250, .055); box-shadow: inset 0 1px rgba(249, 252, 250, .08); } .v520-signature__visual { position: relative; overflow: hidden; padding: 38px; } .v520-signature__copy { padding: 40px; } .v520-signature__copy h3 { margin: 0; font-size: 27px; line-height: 1.25; letter-spacing: -.035em; } .v520-signature__copy p { margin: 16px 0 0; color: rgba(235, 244, 240, .72); font-size: 15px; line-height: 1.78; } .v520-role-list { margin-top: 30px; display: grid; gap: 1px; background: rgba(238, 245, 242, .11); } .v520-role-list div { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 17px 0; background: var(--v520-app-deep); } .v520-role-list strong { font-size: 13px; } .v520-role-list span { color: rgba(235, 244, 240, .66); font-size: 13px; line-height: 1.55; } .v520-seed-cycle, .v520-formula-map, .v520-layer-stack { height: 100%; display: grid; align-content: center; gap: 16px; } .v520-seed-cycle__line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .v520-seed-cycle__line div, .v520-formula-map div, .v520-layer-stack div { padding: 20px; border: 1px solid rgba(235, 244, 240, .15); border-radius: 12px; background: rgba(249, 252, 250, .06); } .v520-seed-cycle__line strong, .v520-formula-map strong, .v520-layer-stack strong { display: block; color: #f1f6f3; font-size: 14px; } .v520-seed-cycle__line span, .v520-formula-map span, .v520-layer-stack span { display: block; margin-top: 7px; color: rgba(235, 244, 240, .64); font-size: 12px; line-height: 1.5; } .v520-emulsion-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; } .v520-emulsion-swatches span { height: 62px; border: 1px solid rgba(253, 253, 251, .14); border-radius: 10px; background: var(--swatch); box-shadow: inset 0 1px rgba(253, 253, 251, .24); } .v520-formula-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v520-formula-map div:nth-child(1) { grid-row: span 2; display: grid; align-content: end; min-height: 250px; background: linear-gradient(150deg, rgba(96, 169, 174, .28), rgba(249, 252, 250, .05)); } .v520-layer-stack div { min-height: 68px; display: grid; grid-template-columns: 150px 1fr; align-items: center; } .v520-layer-stack div:nth-child(1) { margin-inline: 8%; background: rgba(209, 167, 113, .16); } .v520-layer-stack div:nth-child(2) { margin-inline: 5%; background: rgba(236, 241, 229, .12); } .v520-layer-stack div:nth-child(3) { margin-inline: 2%; background: rgba(143, 193, 166, .16); } .v520-layer-stack div:nth-child(4) { background: rgba(249, 252, 250, .08); } .v520-application-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .v520-application-card { grid-column: span 5; min-height: 240px; padding: 30px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .84); box-shadow: 0 14px 38px rgba(19, 46, 63, .055); } .v520-application-card:nth-child(1), .v520-application-card:nth-child(4) { grid-column: span 7; } .v520-application-card h3 { margin: 0; font-size: 23px; line-height: 1.3; letter-spacing: -.03em; } .v520-application-card p { max-width: 40em; margin: 13px 0 0; color: #617079; font-size: 14px; line-height: 1.72; } .v520-application-card ul { margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; } .v520-application-card li { color: var(--v520-app-deep); font-size: 12px; } .v520-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(235, 244, 240, .16); } .v520-path article { min-height: 200px; padding: 28px 24px; border-right: 1px solid rgba(235, 244, 240, .12); } .v520-path article:last-child { border-right: 0; } .v520-path span { color: rgba(235, 244, 240, .44); font-size: 11px; } .v520-path strong { display: block; margin-top: 34px; color: #f2f6f4; font-size: 16px; } .v520-path p { margin: 12px 0 0; color: rgba(235, 244, 240, .64); font-size: 13px; line-height: 1.65; } .v520-final { padding-block: 68px; color: #eff5f2; background: linear-gradient(120deg, var(--v520-app-deep, var(--v520-blue-deep)), #132d35); } .v520-final__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .v520-final h2 { max-width: 18em; margin: 0; font-size: clamp(30px, 3vw, 44px); font-weight: 630; line-height: 1.16; letter-spacing: -.04em; } .v520-final p { max-width: 52em; margin: 14px 0 0; color: rgba(235, 244, 240, .68); font-size: 14px; line-height: 1.7; } .v520-final .v520-action { flex: 0 0 auto; border-color: rgba(249, 252, 250, .28); background: rgba(249, 252, 250, .09); color: #f4f7f5; } /* Packaging professional pages: paper-led palette and domain-specific accents. */ body.v520-site.v520-pkg { --v520-paper: #f4f0e5; --v520-paper-white: #fbfaf5; --v520-paper-kraft: #b48d62; --v520-paper-ink: #342f29; --v520-pkg-accent: #7a5b3d; --v520-pkg-deep: #4d3c2f; background: var(--v520-paper-white); color: var(--v520-paper-ink); } body.v520-site.v520-pkg--beauty { --v520-pkg-accent: #786b63; --v520-pkg-deep: #393838; } body.v520-site.v520-pkg--pharma { --v520-pkg-accent: #69828b; --v520-pkg-deep: #344c56; } body.v520-site.v520-pkg--specialty { --v520-pkg-accent: #56616b; --v520-pkg-deep: #2f3942; } .v520-pkg-hero { min-height: 642px; padding: 66px 0 58px; display: grid; align-items: center; border-bottom: 1px solid rgba(79, 61, 42, .14); background: radial-gradient(circle at 84% 11%, color-mix(in srgb, var(--v520-pkg-accent) 15%, transparent), transparent 31rem), linear-gradient(120deg, #fbfaf5 0%, #f3efe4 68%, #ebe4d5 100%); } .v520-pkg-hero__grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr); align-items: center; gap: clamp(50px, 6vw, 94px); } .v520-pkg .v520-kicker { color: var(--v520-pkg-accent); } .v520-pkg .v520-action--solid { border-color: var(--v520-pkg-deep); background: var(--v520-pkg-deep); } .v520-pkg .v520-localnav strong { color: var(--v520-pkg-deep); } .v520-pkg .v520-localnav a:hover { color: var(--v520-pkg-accent); } .v520-pkg-object-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: repeat(2, minmax(190px, auto)); gap: 16px; } .v520-pkg-object { padding: 28px; border: 1px solid rgba(79, 61, 42, .14); border-radius: var(--v520-radius); background: rgba(253, 252, 247, .88); box-shadow: 0 16px 38px rgba(70, 53, 34, .06); } .v520-pkg-object:first-child { grid-row: span 2; display: grid; align-content: end; min-height: 396px; color: #f7f5ed; background: linear-gradient(180deg, rgba(35, 31, 27, .03), rgba(35, 31, 27, .82)), var(--v520-object-image) center / cover; } .v520-pkg-object h3 { margin: 0; font-size: 23px; letter-spacing: -.035em; } .v520-pkg-object p { margin: 13px 0 0; color: #706960; font-size: 14px; line-height: 1.7; } .v520-pkg-object:first-child p { color: rgba(247, 245, 237, .76); } html body.v520-site.v502-packaging-theme main .v520-pkg-object:first-child h3 { color: #f7f5ed !important; } html body.v520-site.v520-pkg main :is(.v520-section-head h2, .v520-pkg-object h3, .v520-pkg-route h3) { color: var(--v520-pkg-deep) !important; } html body.v520-site.v520-pkg main .v520-pkg-object:first-child h3, html body.v520-site.v520-pkg main .v520-pkg-system .v520-section-head h2 { color: #f7f5ed !important; } .v520-failure-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .v520-failure { grid-column: span 4; min-height: 180px; padding: 26px; border: 1px solid rgba(79, 61, 42, .13); border-radius: 14px; background: rgba(253, 252, 247, .76); } .v520-failure:nth-child(1), .v520-failure:nth-child(5) { grid-column: span 5; } .v520-failure:nth-child(2), .v520-failure:nth-child(6) { grid-column: span 3; } .v520-failure strong { font-size: 17px; color: var(--v520-pkg-deep); } .v520-failure p { margin: 11px 0 0; color: #726a61; font-size: 13px; line-height: 1.66; } .v520-pkg-system { color: #f4f1e9; background: radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--v520-pkg-accent) 34%, transparent), transparent 28rem), linear-gradient(125deg, #292c2e, var(--v520-pkg-deep)); } .v520-pkg-system .v520-section-head p { color: rgba(244, 241, 233, .7); } .v520-pkg-routes { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; } .v520-pkg-route { min-height: 280px; padding: 34px; border: 1px solid rgba(79, 61, 42, .14); border-radius: var(--v520-radius-lg); background: rgba(253, 252, 247, .86); } .v520-pkg-route h3 { margin: 0; font-size: 27px; letter-spacing: -.035em; } .v520-pkg-route p { max-width: 42em; margin: 14px 0 0; color: #6e675f; line-height: 1.72; } .v520-pkg-route a { display: inline-flex; margin-top: 34px; color: var(--v520-pkg-deep); font-size: 14px; font-weight: 680; text-decoration: none; } .v520-pkg .v520-final { background: linear-gradient(120deg, var(--v520-pkg-deep), #242b2e); } /* Developer task pages: a shared workbench with domain-specific content. */ body.v520-site.v520-dev { --v520-dev-accent: #2f8b76; --v520-dev-deep: #123f45; --v520-dev-soft: #eaf3f0; background: #f4f8f7; } body.v520-site.v520-dev--agriculture { --v520-dev-accent: #778d3d; --v520-dev-deep: #354c2f; --v520-dev-soft: #edf2df; } body.v520-site.v520-dev--care { --v520-dev-accent: #4f8990; --v520-dev-deep: #2c5058; --v520-dev-soft: #e6f1f1; } body.v520-site.v520-dev--coatings { --v520-dev-accent: #9a6c48; --v520-dev-deep: #513d34; --v520-dev-soft: #f1e9df; } body.v520-site.v520-dev--open { --v520-dev-accent: #6f65af; --v520-dev-deep: #263f5a; --v520-dev-soft: #eceaf6; } html body.v520-site.v520-dev main .v520-section:not(.v520-section--dark) .v520-section-head h2 { color: var(--v520-dev-deep) !important; } .v520-dev-hero { position: relative; min-height: 610px; padding: 70px 0 58px; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--v520-line); color: #eef5f3; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--v520-dev-accent) 38%, transparent), transparent 32rem), linear-gradient(125deg, #0f2a38, var(--v520-dev-deep)); } .v520-dev-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(230, 242, 239, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 242, 239, .08) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent 3%, #111 55%, transparent 100%); } .v520-dev-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, .72fr); justify-content: space-between; gap: 86px; align-items: end; } .v520-dev .v520-kicker { color: color-mix(in srgb, var(--v520-dev-accent) 68%, #f5f8f6); } .v520-dev-hero h1 { max-width: 11.5em; } .v520-dev-hero__lead { color: rgba(236, 245, 242, .72); } .v520-dev .v520-action--solid { border-color: var(--v520-dev-accent); background: var(--v520-dev-accent); color: #f8faf8; } html body.v520-site.v520-site main .v520-dev-hero h1, html body.v520-site.v520-site main .v520-dev-brief h2 { color: #f2f7f5 !important; } .v520-dev-brief { padding: 30px; border: 1px solid rgba(236, 245, 242, .16); border-radius: var(--v520-radius-lg); background: rgba(249, 252, 250, .065); box-shadow: inset 0 1px rgba(249, 252, 250, .08); backdrop-filter: blur(14px); } .v520-dev-brief h2 { margin: 0 0 22px; color: #f2f7f5; font-size: 20px; letter-spacing: -.025em; } .v520-dev-brief dl { margin: 0; } .v520-dev-brief div { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(236, 245, 242, .11); } .v520-dev-brief div:last-child { border-bottom: 0; } .v520-dev-brief dt { color: rgba(236, 245, 242, .5); font-size: 12px; } .v520-dev-brief dd { margin: 0; color: rgba(242, 247, 245, .86); font-size: 13px; line-height: 1.55; } .v520-dev-input-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .v520-dev-input { grid-column: span 4; min-height: 210px; padding: 28px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .86); } .v520-dev-input:nth-child(1), .v520-dev-input:nth-child(4) { grid-column: span 6; } .v520-dev-input:nth-child(2), .v520-dev-input:nth-child(3) { grid-column: span 3; } .v520-dev-input strong { font-size: 20px; letter-spacing: -.025em; } .v520-dev-input p { margin: 13px 0 0; color: #637079; font-size: 14px; line-height: 1.72; } .v520-dev-workbench { display: grid; grid-template-columns: .78fr 1.22fr; gap: 18px; } .v520-dev-workbench__statement, .v520-dev-variable-board { min-height: 430px; padding: 38px; border: 1px solid rgba(236, 245, 242, .14); border-radius: var(--v520-radius-lg); background: rgba(249, 252, 250, .055); } .v520-dev-workbench__statement h3 { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.04em; } .v520-dev-workbench__statement p { margin: 18px 0 0; color: rgba(236, 245, 242, .68); line-height: 1.76; } .v520-dev-variable-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .v520-dev-variable { padding: 22px; border: 1px solid rgba(236, 245, 242, .12); border-radius: 12px; background: rgba(249, 252, 250, .045); } .v520-dev-variable strong { display: block; font-size: 14px; } .v520-dev-variable span { display: block; margin-top: 9px; color: rgba(236, 245, 242, .58); font-size: 12px; line-height: 1.55; } .v520-dev-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--v520-line); border-bottom: 1px solid var(--v520-line); } .v520-dev-flow article { min-height: 208px; padding: 28px 24px; border-right: 1px solid var(--v520-line); } .v520-dev-flow article:last-child { border-right: 0; } .v520-dev-flow span { color: var(--v520-dev-accent); font-size: 11px; } .v520-dev-flow strong { display: block; margin-top: 34px; font-size: 17px; } .v520-dev-flow p { margin: 12px 0 0; color: #69767e; font-size: 13px; line-height: 1.65; } .v520-dev-output-grid { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: repeat(2, minmax(180px, auto)); gap: 16px; } .v520-dev-output { padding: 30px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .86); } .v520-dev-output:first-child { grid-row: span 2; display: grid; align-content: end; color: #f2f7f5; background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--v520-dev-accent) 42%, transparent), transparent 24rem), linear-gradient(130deg, #173340, var(--v520-dev-deep)); } .v520-dev-output h3 { margin: 0; font-size: 24px; letter-spacing: -.03em; } .v520-dev-output p { margin: 13px 0 0; color: #68757d; font-size: 14px; line-height: 1.7; } .v520-dev-output:first-child p { color: rgba(239, 247, 244, .68); } .v520-dev-output:first-child h3 { color: #f2f7f5 !important; } .v520-dev .v520-final { background: linear-gradient(120deg, var(--v520-dev-deep), #132d3b); } /* Dedicated detail pages for DBC specialist brands. */ body.v520-site.v520-brand-detail { --v520-detail-accent: #2d7e69; --v520-detail-deep: #214c41; --v520-detail-soft: #e9f1ed; background: #f6f8f6; } body.v520-site.v520-brand-detail--dpu { --v520-detail-accent: #bc3e3a; --v520-detail-deep: #6f2928; --v520-detail-soft: #f5e9e6; } body.v520-site.v520-brand-detail--casu { --v520-detail-accent: #2867a0; --v520-detail-deep: #1d466e; --v520-detail-soft: #e8f0f7; } body.v520-site.v520-brand-detail--ecoten { --v520-detail-accent: #738044; --v520-detail-deep: #47512d; --v520-detail-soft: #eff1e4; } html body.v520-site.v520-brand-detail main :is(.v520-section-head h2, .v520-detail-card h3) { color: var(--v520-detail-deep) !important; } html body.v520-site.v520-brand-detail main .v520-section--dark .v520-section-head h2 { color: #f2f6f4 !important; } .v520-brand-detail-hero { min-height: 620px; padding: 68px 0 58px; display: grid; align-items: center; background: radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--v520-detail-accent) 15%, transparent), transparent 30rem), linear-gradient(125deg, #fafbf8, var(--v520-detail-soft)); } .v520-brand-detail-hero__grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(560px, 1.14fr); align-items: center; gap: 76px; } .v520-brand-detail .v520-kicker { color: var(--v520-detail-accent); } .v520-brand-detail .v520-action--solid { border-color: var(--v520-detail-deep); background: var(--v520-detail-deep); } .v520-brand-detail .v520-localnav strong { color: var(--v520-detail-deep); } .v520-brand-detail .v520-localnav a:hover { color: var(--v520-detail-accent); } .v520-brand-detail .v520-final { background: linear-gradient(120deg, var(--v520-detail-deep), #1f2f35); } .v520-detail-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .v520-detail-card { grid-column: span 4; min-height: 260px; padding: 30px; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: rgba(253, 253, 251, .88); } .v520-detail-card:nth-child(1), .v520-detail-card:nth-child(5) { grid-column: span 5; } .v520-detail-card:nth-child(2), .v520-detail-card:nth-child(6) { grid-column: span 3; } .v520-detail-card h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; } .v520-detail-card p { margin: 13px 0 0; color: #66737b; font-size: 14px; line-height: 1.72; } .v520-detail-gallery { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: repeat(2, minmax(220px, auto)); gap: 16px; } .v520-detail-gallery figure { position: relative; min-height: 220px; margin: 0; overflow: hidden; border: 1px solid var(--v520-line); border-radius: var(--v520-radius); background: #e9efec; box-shadow: var(--v520-shadow-sm); } .v520-detail-gallery figure:first-child { grid-row: span 2; } .v520-detail-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 680ms var(--v520-ease), filter 360ms ease; } .v520-detail-gallery figcaption { position: absolute; z-index: 2; inset: auto 16px 16px; padding: 10px 12px; border: 1px solid rgba(253, 253, 251, .24); border-radius: 9px; color: #f8faf8; background: rgba(15, 32, 40, .58); font-size: 12px; backdrop-filter: blur(12px); } @media (hover: hover) and (pointer: fine) { .v520-detail-gallery figure:hover img { transform: scale(1.035); filter: saturate(1.035) contrast(1.02); } } /* Motion: visible by default, hidden only after the observer is ready. */ html.v520-motion-ready .v520-reveal { opacity: 0; transform: translateY(20px); transition: opacity 620ms var(--v520-ease), transform 620ms var(--v520-ease); transition-delay: calc(var(--v520-i, 0) * 54ms); } html.v520-motion-ready .v520-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1100px) { .v520-shell { width: min(100% - 56px, 1120px); } .v520-app-hero__grid, .v520-pkg-hero__grid, .v520-brand-detail-hero__grid { grid-template-columns: .9fr 1.1fr; gap: 42px; } .v520-app-hero__visual, .v520-pkg-hero__visual, .v520-brand-detail-hero__visual { min-height: 410px; } .v520-dev-hero__grid { gap: 46px; } body.v520-site.home-v340 #platform .v321-brand-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { body.v520-site.v500-page .v500-hero__grid, .v520-app-hero__grid, .v520-pkg-hero__grid, .v520-dev-hero__grid, .v520-brand-detail-hero__grid, .v520-thesis, .v520-signature, .v520-dev-workbench { grid-template-columns: 1fr; } .v520-localnav { display: none; } .v520-signal-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v520-application-card, .v520-application-card:nth-child(1), .v520-application-card:nth-child(4), .v520-dev-input, .v520-dev-input:nth-child(1), .v520-dev-input:nth-child(2), .v520-dev-input:nth-child(3), .v520-dev-input:nth-child(4), .v520-detail-card, .v520-detail-card:nth-child(1), .v520-detail-card:nth-child(2), .v520-detail-card:nth-child(5), .v520-detail-card:nth-child(6) { grid-column: span 6; } .v520-path, .v520-dev-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v520-pkg-object-grid { grid-template-columns: repeat(2, 1fr); } .v520-pkg-object:first-child { grid-column: span 2; grid-row: auto; } .v520-detail-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .v520-detail-gallery figure:first-child { grid-row: auto; } } @media (prefers-reduced-motion: reduce) { html[data-v520-release] { scroll-behavior: auto; } html.v520-motion-ready .v520-reveal { opacity: 1; transform: none; transition: none; } body.v520-site * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }