/* * /about/ ONLY. Generated by tools/port-legacy-page.mjs — do not hand-tune * towards the design system. If this page is ever redesigned it should be * rebuilt from components and this file deleted whole. * * 270 of 7877 rules from the live site, re-scoped under .db-legacy. * That wrapper is what lets legacy CSS and Tailwind share a page: the legacy * reboot rules become `.db-legacy h1`, which outranks preflight inside the * wrapper and is inert everywhere else. */ .db-legacy { /* ------------------------------------------------------------------------ * THE NEW PINK. Aug 2026 — see DESIGN.md, "The Ground-Dependent Pink Rule". * * The live Rails page marks with #ff02af and darkens to #e2009b (and, in two * one-off places, #ff00b8 and #b50080). The design system's pink is #d00993: * #ff02af measures 3.57:1 on white and fails AA at body size, #d00993 * measures 5.07:1. * * The rule is ground-dependent — #d00993 on light grounds, #ff00b4 on dark — * so this was not a blind find-and-replace. Every pink element on all seven * legacy pages was measured against the background actually painted behind * it. The result: EVERY pink that carries text, a border or an icon is on a * light ground, and the only pink on a dark ground is `.button.dark`, a solid * fill under white text, which the Never-Adjacent Rule treats as a distinct * UI object rather than text on a ground. That fill wants the light-ground * value too, because white on #d00993 is 5.07:1 and white on #ff00b4 is * 3.57:1. * * So one value covers every case here, and `pink-bright` is deliberately * absent. If a dark panel ever gains pink TEXT, it needs #ff00b4 and a new * token — do not reuse --db-mark for it. * * --db-mark-hover is pink-700. It replaces two different legacy darkenings * with one step, and at 8.25:1 on white it is the safer of the two. * ---------------------------------------------------------------------- */ --db-mark: #d00993; /* pink-500 — the mark on a light ground */ --db-mark-hover: #970669; /* pink-700 — its hover/active darkening */ --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --db-white: #FDFDFE; --db-zebra-stripe-grey: #FCFCFC; --db-pink-50: #FAE6F4; --db-pink-100: #F0B3DE; --db-pink-200: #E98ECD; --db-pink-300: #E05AB7; --db-pink-400: #D93AA9; --db-pink-500: #D00993; --db-pink-600: #BD0886; --db-pink-700: #940668; --db-pink-800: #720551; --db-pink-900: #57043E; --db-blue-10: #F7F8FF; --db-blue-50: #EBECF9; --db-blue-100: #C2C5ED; --db-blue-200: #A4A9E5; --db-blue-300: #7A82D9; --db-blue-400: #616AD1; --db-blue-500: #3945C6; --db-blue-600: #343FB4; --db-blue-700: #28318D; --db-blue-800: #1F266D; --db-blue-900: #181D53; --db-dk-blue-10: #F3F5F6; --db-dk-blue-50: #D1D5DB; --db-dk-blue-100: #B2B8C4; --db-dk-blue-200: #8B95A6; --db-dk-blue-300: #647288; --db-dk-blue-400: #3E4E6B; --db-dk-blue-500: #172B4D; --db-dk-blue-600: #132440; --db-dk-blue-700: #0F1D33; --db-dk-blue-800: #0C1627; --db-dk-blue-900: #080E1A; --db-orange-50: #FAF0E8; --db-orange-100: #EED2B8; --db-orange-200: #E6BC96; --db-orange-300: #DB9D66; --db-orange-400: #D48A49; --db-orange-500: #C96D1B; --db-orange-600: #B76319; --db-orange-700: #8F4D13; --db-orange-800: #6F3C0F; --db-orange-900: #542E0B; --db-green-50: #F3F5E6; --db-green-100: #D9DFB1; --db-green-200: #C6D08C; --db-green-300: #ACBA57; --db-green-400: #9CAD36; --db-green-500: #839804; --db-green-600: #778A04; --db-green-700: #5D6C03; --db-green-800: #485402; --db-green-900: #374002; --db-violet-50: #F2EEF6; --db-violet-100: #D5C9E4; --db-violet-200: #C1AFD7; --db-violet-300: #A58AC5; --db-violet-400: #9374B9; --db-violet-500: #7851A8; --db-violet-600: #6D4A99; --db-violet-700: #553A77; --db-violet-800: #422D5C; --db-violet-900: #322247; --db-teal-50: #E7F2F2; --db-teal-100: #B6D5D7; --db-teal-200: #92C1C4; --db-teal-300: #61A5A9; --db-teal-400: #429499; --db-teal-500: #13797F; --db-teal-600: #116E74; --db-teal-700: #0D565A; --db-teal-800: #0A4346; --db-teal-900: #083335; --db-success-50: #E6F3EA; --db-success-100: #B0DBBE; --db-success-200: #8AC99F; --db-success-300: #54B173; --db-success-400: #33A158; --db-success-500: #008A2E; --db-success-600: #007E2A; --db-success-700: #006221; --db-success-800: #004C19; --db-success-900: #003A13; --db-warning-50: #FDE6E8; --db-warning-100: #F8B0B8; --db-warning-200: #F48A96; --db-warning-300: #F05466; --db-warning-400: #ED3348; --db-warning-500: #E8001A; --db-warning-600: #D30018; --db-warning-700: #A50012; --db-warning-800: #80000E; --db-warning-900: #61000B; --swiper-theme-color: #007aff; --swiper-navigation-size: 44px; } /* Legacy CSS stacks freely (z-index 100, 150…). The site header is position:static and creates no stacking context, so without this the page paints over the navbar and its mega-menu opens behind the content. */ .db-legacy { position: relative; z-index: 0; } /* Preflight sets `img { max-width:100%; height:auto; display:block }`. Legacy images carry explicit heights and are meant to overflow their column; the clamp squashes them. */ .db-legacy img { max-width: none; display: inline; vertical-align: middle; } /* Centre button labels rather than trusting font metrics to do it. */ .db-legacy .commercial-page .button, .db-legacy .commercial-page a.button { display: inline-flex; align-items: center; justify-content: center; } .db-legacy {position:relative} .db-legacy .commercial-page {background-color:white} .db-legacy .commercial-page, .db-legacy .commercial-page p, .db-legacy .commercial-page a, .db-legacy .commercial-page h1, .db-legacy .commercial-page h2, .db-legacy .commercial-page h3, .db-legacy .commercial-page h4 {font-family:Gemeli, "Helvetica Neue", Helvetica, Arial, sans-serif;text-rendering:optimizelegibility;font-feature-settings:"kern";color:rgb(38, 48, 99)} .db-legacy .commercial-page, .db-legacy .commercial-page p, .db-legacy .commercial-page a {font-weight:400} .db-legacy .commercial-page a:hover, .db-legacy .commercial-page a:active, .db-legacy .commercial-page a:focus {color:inherit;text-decoration:none} .db-legacy .commercial-page h1, .db-legacy .commercial-page h2, .db-legacy .commercial-page h3, .db-legacy .commercial-page h4 {font-weight:700} .db-legacy .commercial-page .db-container {padding:0px;margin:0px 20px;width:auto} @media (max-width:479px){.db-legacy .commercial-page .panel {padding-top:35px!important;padding-bottom:35px!important}} @media (max-width:479px){.db-legacy .commercial-page .text-header-panel {padding-bottom:35px!important}} @media (max-width:479px){.db-legacy .commercial-page .header-panel {padding-top:35px!important}} @media (min-width:480px){.db-legacy .commercial-page .db-container {min-width:calc(100% - 100px);margin:0px 50px;max-width:412px}} @media (min-width:768px){.db-legacy .commercial-page .db-container {max-width:668px}} @media (min-width:992px){.db-legacy .commercial-page .db-container {max-width:772px;margin:0px 100px;min-width:calc(100% - 200px)}} @media (min-width:1200px){.db-legacy .commercial-page .db-container {max-width:1000px;min-width:0px;margin:0px auto}} .db-legacy .commercial-page .panel {padding-top:75px;padding-bottom:75px;margin-bottom:0px;border-width:medium;border-style:none;border-color:currentcolor;border-image:none;border-radius:0px;overflow-x:hidden;box-shadow:none} .db-legacy .commercial-page .panel .db-container {display:flex;flex-direction:column;padding:0px} .db-legacy .commercial-page .panel h1, .db-legacy .commercial-page .panel h2, .db-legacy .commercial-page .panel h3, .db-legacy .commercial-page .panel h4 {margin-top:0px;margin-bottom:15px} .db-legacy .commercial-page .panel h1 {font-size:50px;font-weight:normal;line-height:64px} .db-legacy .commercial-page .panel h2 {font-size:40px;font-weight:normal;line-height:48px} .db-legacy .commercial-page .panel h3 {font-size:24px;font-weight:normal;line-height:34px} .db-legacy .commercial-page .panel h4 {font-size:20px;font-weight:normal;line-height:30px} .db-legacy .commercial-page .panel p {font-size:18px;line-height:25px;margin-top:15px;margin-bottom:15px} .db-legacy .commercial-page .header-panel {position:relative;padding-top:40px;padding-bottom:0px;transition:padding-top 0.5s} .db-legacy .commercial-page .header-panel h1 {margin-bottom:20px} .db-legacy .commercial-page .header-panel .db-container {padding:60px 0px 30px!important} .db-legacy .commercial-page .text-header-panel {padding-bottom:75px} .db-legacy .commercial-page .text-header-panel .db-container {flex-direction:row;justify-content:flex-start} .db-legacy .commercial-page .text-header-panel h1 {max-width:650px;margin-left:-3px} .db-legacy .commercial-page .text-header-panel p {max-width:815px;font-weight:100} .db-legacy .commercial-page .text-header-panel .header-text {display:flex;flex-direction:column} @media (max-width:767px){.db-legacy .commercial-page .text-header-panel h1 {font-size:40px;line-height:50px}} @media (max-width:479px){.db-legacy .commercial-page .text-header-panel h1 {font-size:22px;line-height:32px}} @media (max-width:479px){.db-legacy .commercial-page .text-header-panel p {font-size:18px;line-height:28px}} .db-legacy .commercial-page .centered-panel .db-container {align-items:center;justify-content:center} .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h3 {text-align:center;max-width:750px} .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h3 {margin-bottom:30px} .db-legacy .commercial-page .centered-panel h2:last-child {margin-bottom:0px} .db-legacy .commercial-page .centered-panel h3 {font-weight:100} .db-legacy .commercial-page .centered-panel a {font-size:18px;line-height:28px;color:rgb(114, 125, 212);font-weight:bold;text-align:center;transition:opacity 0.25s} .db-legacy .commercial-page .centered-panel a:hover, .db-legacy .commercial-page .centered-panel a:active {opacity:0.75} @media (max-width:767px){.db-legacy .commercial-page .centered-panel h2 {font-size:34px;line-height:44px}} @media (max-width:767px){.db-legacy .commercial-page .centered-panel h3 {font-size:20px;line-height:30px}} @media (max-width:479px){.db-legacy .commercial-page .centered-panel h2 {font-size:26px;line-height:36px}} @media (max-width:479px){.db-legacy .commercial-page .centered-panel h3 {font-size:18px;line-height:24px}} .db-legacy .commercial-page .light-blue-panel {background:rgba(225, 226, 246, 0.4)} .db-legacy .commercial-page .gradient-panel-invert {background:linear-gradient(white, rgb(243, 243, 251))} .db-legacy .commercial-page .very-dark-blue-panel {background-color:rgb(22, 31, 68);background-image:url("/static/img/commercial/contact/Background.png");background-position:center top;background-size:cover;background-repeat:no-repeat} .db-legacy .commercial-page .photo-panel {padding:0px;position:relative} .db-legacy .commercial-page .photo-panel.left-panel .db-container .image-box {right:0px} .db-legacy .commercial-page .photo-panel.left-panel .db-container .text-box {margin-right:40%;padding:100px 100px 100px 0px} .db-legacy .commercial-page .photo-panel .db-container {flex-direction:row;justify-content:space-between} .db-legacy .commercial-page .photo-panel .db-container .text-box {width:60%;flex:1 1 0%} .db-legacy .commercial-page .photo-panel .db-container .image-box {position:absolute;top:0px;width:40%;height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat} .db-legacy .commercial-page .photo-panel .db-container .image-box img {width:100%;height:auto} .db-legacy .commercial-page .photo-panel p {margin-bottom:0px} @media (max-width:1199px){.db-legacy .commercial-page .photo-panel.left-panel .db-container .text-box {padding:50px 50px 50px 0px}} @media (max-width:991px){.db-legacy .commercial-page .photo-panel .db-container h2 {font-size:34px;line-height:44px}} @media (max-width:767px){.db-legacy .commercial-page .photo-panel .db-container .text-box {width:100%;margin-left:0px!important;margin-right:0px!important;padding:50px 0px!important}} @media (max-width:767px){.db-legacy .commercial-page .photo-panel .db-container .image-box {display:none}} @media (max-width:479px){.db-legacy .commercial-page .photo-panel .db-container h2 {font-size:26px;line-height:32px}} @media (max-width:479px){.db-legacy .commercial-page .photo-panel .db-container .text-box {padding:0px!important}} .db-legacy .commercial-page .large-top-margin-panel {padding-top:150px;padding-bottom:75px} @media (max-width:767px){.db-legacy .commercial-page .large-top-margin-panel {padding-top:75px;padding-bottom:0px}} @media (max-width:479px){.db-legacy .commercial-page .large-top-margin-panel {padding-top:50px!important;padding-bottom:0px!important}} .db-legacy .commercial-page .large-bottom-margin-panel {padding-top:75px;padding-bottom:150px} @media (max-width:767px){.db-legacy .commercial-page .large-bottom-margin-panel {padding-top:0px;padding-bottom:75px}} @media (max-width:479px){.db-legacy .commercial-page .large-bottom-margin-panel {padding-top:0px!important;padding-bottom:50px!important}} .db-legacy .commercial-page .drugbank-icon svg {width:20px;height:20px} .db-legacy .commercial-page .drugbank-icon {display:inline-block} .db-legacy .commercial-page .drugbank-icon svg {display:block;background-color:transparent;fill:currentcolor;vertical-align:middle} .db-legacy .commercial-page .drugbank-icon.icon-pink {color:var(--db-mark);fill:var(--db-mark);stroke:var(--db-mark)} .db-legacy .commercial-page .badge-panel {overflow-x:visible} .db-legacy .commercial-page .badge-panel:not(.download-cta-panel) {height:0px;padding:0px!important} .db-legacy .commercial-page .badge-panel:not(.download-cta-panel) .db-container {height:0px} .db-legacy .commercial-page .badge-panel .db-container {flex-direction:row;align-items:center} .db-legacy .commercial-page .badge-panel .db-container .badge-box {display:flex;justify-content:space-between;align-items:stretch;background-color:white;box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px;padding:40px 100px;z-index:10;width:100%} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text {display:flex;flex:1 1 0%;flex-direction:column;justify-content:center;align-items:flex-start} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text h3 {margin-bottom:5px} .db-legacy .commercial-page .badge-panel .db-container .badge-box .badge-text p {margin-top:0px} @media (max-width:767px){.db-legacy .commercial-page .badge-panel .db-container .badge-box {flex-direction:column;padding:20px 40px}} .db-legacy .commercial-page h1 {color:rgb(22, 31, 68)} .db-legacy .commercial-page h2 {color:rgb(22, 31, 68)} @media (max-width:991px){.db-legacy .commercial-page h1 {font-size:40px;line-height:50px}} @media (max-width:991px){.db-legacy .commercial-page h2 {font-size:30px;line-height:38px}} @media (max-width:479px){.db-legacy .commercial-page .db-container {margin:0px 40px}} .db-legacy .commercial-page h2 {font-size:50px;line-height:65px;font-weight:bold;max-width:1200px} @media (max-width:767px){.db-legacy .commercial-page h2 {font-size:34px!important;line-height:44px!important}} .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text h1 {max-width:950px} .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text p {max-width:800px} .db-legacy .commercial-page .db-intro-header-panel .intro-img-left.about-intro-img {margin-top:300px;margin-left:-90px} .db-legacy .commercial-page .db-intro-header-panel .intro-img-left.about-intro-img img {height:250px} .db-legacy .commercial-page .db-intro-header-panel .intro-img-right.about-intro-img {margin-top:100px;margin-right:-105px} .db-legacy .commercial-page .db-intro-header-panel .intro-img-right.about-intro-img img {height:250px} @media (max-width:1199px){.db-legacy .commercial-page #drugbank-story {padding-top:0px!important}} @media (max-width:767px){.db-legacy .commercial-page #drugbank-story {padding-bottom:0px!important}} @media (min-width:1200px){.db-legacy .commercial-page #drugbank-story .db-container {max-width:1100px}} @media (max-width:1199px){.db-legacy .commercial-page #drugbank-story .db-container {display:flex;flex-direction:column-reverse}} .db-legacy .commercial-page #drugbank-story .text-box {padding:75px 35px 225px 0px;width:55%;margin-right:45%} @media (max-width:1199px){.db-legacy .commercial-page #drugbank-story .text-box {width:100%;margin:0px;padding:75px 0px 225px}} @media (max-width:767px){.db-legacy .commercial-page #drugbank-story .text-box {padding:50px 0px 75px!important}} @media (max-width:479px){.db-legacy .commercial-page #drugbank-story .text-box {text-align:center}} .db-legacy .commercial-page #drugbank-story h2 {margin-bottom:35px} @media (max-width:991px){.db-legacy .commercial-page #drugbank-story h2 {font-size:50px;line-height:60px}} @media (max-width:767px){.db-legacy .commercial-page #drugbank-story h2 {font-size:34px;line-height:44px}} .db-legacy .commercial-page #drugbank-story p {font-size:16px;line-height:24px;font-weight:lighter;margin-bottom:25px} .db-legacy .commercial-page #drugbank-story p.larger {font-size:24px;line-height:36px;font-weight:normal;margin-top:35px;margin-bottom:0px} .db-legacy .commercial-page #drugbank-story .image-box {background-image:url("/static/img/commercial/about/Office@3x.jpg");background-position:center 70%;width:45%} .db-legacy .commercial-page #drugbank-story .image-box img {display:none} @media (max-width:1199px){.db-legacy .commercial-page #drugbank-story .image-box {width:calc(100% + 205px);display:block;align-self:center;position:relative;background:none;overflow:hidden;aspect-ratio:3 / 2}} @media (max-width:1199px){.db-legacy .commercial-page #drugbank-story .image-box img {display:block;width:105%;height:auto;position:absolute;bottom:-55%}} .db-legacy .commercial-page #quote-panel.badge-panel .badge-box {padding:70px;box-shadow:rgba(38, 48, 99, 0.08) 0px 0px 30px} @media (max-width:991px){.db-legacy .commercial-page #quote-panel.badge-panel .badge-box {padding:50px}} .db-legacy .commercial-page #quote-panel.badge-panel .badge-text {text-align:center;align-items:center} .db-legacy .commercial-page #quote-panel.badge-panel .badge-text h3 {font-size:28px;line-height:45px;margin-bottom:20px} @media (max-width:991px){.db-legacy .commercial-page #quote-panel.badge-panel .badge-text h3 {font-size:24px;line-height:40px}} .db-legacy .commercial-page #quote-panel.badge-panel .badge-text p {font-size:20px;line-height:32px;margin:0px} @media (max-width:767px){.db-legacy .commercial-page #quote-panel.badge-panel {height:100%;width:100%}} @media (max-width:767px){.db-legacy .commercial-page #quote-panel.badge-panel .db-container {height:100%;width:100%;margin:0px;max-width:unset}} .db-legacy .commercial-page #stat-blocks-panel {background:linear-gradient(white, rgb(243, 243, 251) 30%, rgb(243, 243, 251) 70%, white 100%) 0% 0% no-repeat padding-box padding-box transparent;margin-top:150px} @media (max-width:767px){.db-legacy .commercial-page #stat-blocks-panel {margin-top:75px}} @media (max-width:479px){.db-legacy .commercial-page #stat-blocks-panel {margin-top:25px;margin-bottom:40px}} .db-legacy .commercial-page #leaders-panel {padding-top:50px} .db-legacy .commercial-page #leaders-panel h2 {margin-bottom:45px} .db-legacy .commercial-page #leaders-panel h3 {text-align:left;font-weight:700;font-size:30px} .db-legacy .commercial-page #leaders-panel .bio-cards {display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:25px;width:100%;margin-bottom:75px} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:250px;gap:5px} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card .bio-image {max-height:250px;overflow:hidden;display:flex;align-items:center;border-radius:15px;box-shadow:rgba(34, 55, 121, 0.2) 0px 0px 6px 0px;margin-bottom:10px} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card .bio-image img {width:100%;height:auto} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card .bio-text {display:flex;flex-direction:column;align-items:flex-start} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card .bio-text .name {font-weight:bold} .db-legacy .commercial-page #leaders-panel .bio-cards .bio-card .bio-text .bio {margin-top:0.5rem;font-weight:100} @media (max-width:1199px){.db-legacy .commercial-page #leaders-panel .bio-cards {justify-content:center}} .db-legacy .commercial-page #leaders-panel .board-members-container {max-width:800px;margin-bottom:20px} .db-legacy .commercial-page #leaders-panel .board-members-container .board-members {display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:25px;width:100%} .db-legacy .commercial-page #leaders-panel .board-members-container .board-members .board-member {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1 1 calc(50% - 12.5px)} .db-legacy .commercial-page #leaders-panel .board-members-container .board-members .board-member .name {font-weight:bold} .db-legacy .commercial-page #leaders-panel .board-members-container .board-members .board-member .bio {margin-top:0.5rem;font-weight:100} @media (max-width:991px){.db-legacy .commercial-page #leaders-panel .board-members-container .board-members .board-member {flex:1 1 100%}} @media (max-width:767px){.db-legacy .commercial-page #leaders-panel {padding-top:0px!important}} .db-legacy .commercial-page #about-cards-panel {overflow-x:visible;padding:0px!important} .db-legacy .commercial-page #about-cards-panel .db-container {flex-direction:row;align-items:center} .db-legacy .commercial-page #about-cards-panel .product-row {margin-top:0px;z-index:10;justify-content:center} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box {transition:transform 0.5s} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-image {height:170px;background-size:cover;background-position:center center} @media (max-width:767px){.db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-image {display:none}} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text {padding:30px;background:white} @media (max-width:767px){.db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text {border-top-left-radius:15px;border-top-right-radius:15px}} @media (max-width:767px){.db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text * {text-align:center}} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text p {margin:0px 0px 15px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text span.db-link {margin-top:auto;font-size:18px;line-height:28px;font-weight:bold;color:var(--db-mark);transition:color 0.5s} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box .product-text span.db-link .drugbank-icon svg {transition:0.5s;width:0.7rem;height:0.7rem} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box:hover {transform:translateY(-10px)} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box:hover .product-text span.db-link {color:var(--db-mark-hover)} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box:hover .product-text span.db-link .drugbank-icon svg {color:var(--db-mark-hover);stroke:var(--db-mark-hover);fill:var(--db-mark-hover)} @media (max-width:767px){.db-legacy .commercial-page #about-cards-panel .product-row a.product-box:hover {transform:none}} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box.press-1-card .product-image {background-image:url("/static/img/commercial/press/EveBio.png")} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box.press-2-card .product-image {background-image:url("/static/img/commercial/press/DrugBank.png")} .db-legacy .commercial-page #about-cards-panel .product-row a.product-box.press-3-card .product-image {background-image:url("/static/img/commercial/press/Cision.svg")} .db-legacy .commercial-page .supporter-logos a {margin:1.5rem} .db-legacy .commercial-page .supporter-logos img {max-width:150px} .db-legacy .commercial-page .social-panel {padding:325px 0px 100px} @media (max-width:991px){.db-legacy .commercial-page .social-panel {padding:280px 0px 100px!important}} @media (max-width:767px){.db-legacy .commercial-page .social-panel {padding:180px 0px 100px!important}} .db-legacy .commercial-page .db-intro-header-panel {background-image:url("/static/img/commercial/about/HeaderGradient.svg");background-position:0px 0px;background-size:100%;background-repeat:no-repeat} .db-legacy .commercial-page .db-intro-header-panel .db-container {justify-content:center;text-align:center;flex-direction:row} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-left {position:absolute;z-index:0;left:0px;top:0px} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-left img {width:auto} @media (max-width:479px){.db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-left {display:none}} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-left.about-intro-img {margin-top:360px;margin-left:-90px} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-left.about-intro-img img {height:250px} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-right {position:absolute;z-index:0;right:0px;top:0px} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-right img {width:auto} @media (max-width:479px){.db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-right {display:none}} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-right.about-intro-img {margin-top:160px;margin-right:-105px} .db-legacy .commercial-page .db-intro-header-panel .db-container .intro-img-right.about-intro-img img {height:250px} .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text {align-items:center;z-index:10;display:flex;flex-direction:column} .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text h1:not(.intro-small) {font-size:60px;line-height:75px;font-weight:bold;max-width:900px;margin-left:0px;margin-bottom:45px;color:rgb(22, 31, 68)} @media (max-width:767px){.db-legacy .commercial-page .db-intro-header-panel .db-container .header-text h1:not(.intro-small) {font-size:44px;line-height:60px}} @media (max-width:479px){.db-legacy .commercial-page .db-intro-header-panel .db-container .header-text h1:not(.intro-small) {font-size:34px;line-height:49px;margin-bottom:30px}} .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text p {font-size:24px;line-height:34px;max-width:650px;margin:0px} .db-legacy .commercial-page .product-row {display:flex;flex-flow:row;justify-content:space-between;align-items:stretch;width:100%;margin-top:50px} @media (max-width:991px){.db-legacy .commercial-page .product-row {flex-wrap:wrap;justify-content:center}} @media (max-width:767px){.db-legacy .commercial-page .product-row {flex-direction:column}} @media (max-width:479px){.db-legacy .commercial-page .product-row {margin-top:20px}} .db-legacy .commercial-page .product-row .product-box {flex:0 1 auto;display:flex;flex-direction:column;align-items:stretch;width:33%} .db-legacy .commercial-page .product-row .product-box:not(:last-child) {margin-right:45px} @media (max-width:991px){.db-legacy .commercial-page .product-row .product-box {width:calc(50% - 45px)}} @media (max-width:991px){.db-legacy .commercial-page .product-row .product-box:nth-child(2) {margin-right:0px}} @media (max-width:991px){.db-legacy .commercial-page .product-row .product-box:not(:nth-child(-n+2)) {margin-top:50px}} @media (max-width:767px){.db-legacy .commercial-page .product-row .product-box {max-width:475px;align-self:center;width:100%!important}} @media (max-width:767px){.db-legacy .commercial-page .product-row .product-box:not(:nth-child(1)), .db-legacy .commercial-page .product-row .product-box:not(:nth-child(2)) {margin-top:0px}} @media (max-width:767px){.db-legacy .commercial-page .product-row .product-box:not(:last-child) {margin-right:0px;margin-bottom:65px}} .db-legacy .commercial-page .product-row .product-box .product-image {background-color:white;border-top-right-radius:15px;border-top-left-radius:15px;height:100px;display:flex;align-items:center;justify-content:center;z-index:10;position:relative} .db-legacy .commercial-page .product-row .product-box .product-text {background-color:white;padding:35px 25px 30px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;flex:1 1 auto;display:flex;flex-direction:column} .db-legacy .commercial-page .product-row .product-box .product-text p {color:rgb(22, 31, 68);text-align:left} .db-legacy .commercial-page .product-row .product-box .product-text p {font-weight:100;font-size:16px;line-height:24px} @media (max-width:767px){.db-legacy .commercial-page .product-row .product-box .product-text p {margin-top:0px}} .db-legacy .commercial-page .stat-blocks {display:flex;flex-wrap:wrap;margin-right:-45px} @media (max-width:767px){.db-legacy .commercial-page .stat-blocks {margin-right:0px;justify-content:center}} .db-legacy .commercial-page .stat-blocks .stat-block {display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:75px 30px 50px;width:calc(33.33% - 45px);min-width:150px;background-color:white;border-radius:15px;margin-right:45px;border:1px solid transparent} @media (max-width:767px){.db-legacy .commercial-page .stat-blocks .stat-block {width:100%;max-width:475px;margin-bottom:100px;margin-right:0px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks .stat-block {flex-flow:wrap;justify-content:center;padding:0px;background:transparent;margin-bottom:35px}} .db-legacy .commercial-page .stat-blocks .stat-block .stat-image {position:absolute} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-image {position:initial}} .db-legacy .commercial-page .stat-blocks .stat-block .stat-num span {color:rgb(22, 31, 68);font-size:55px;line-height:77px;font-weight:bold} @media (max-width:991px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-num span {font-size:44px;line-height:55px}} @media (max-width:767px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-num span {font-size:34px;line-height:44px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-num {display:flex;align-self:flex-start}} .db-legacy .commercial-page .stat-blocks .stat-block .stat-text {text-align:center} .db-legacy .commercial-page .stat-blocks .stat-block .stat-text p {color:rgb(22, 31, 68);margin-bottom:0px;margin-top:5px} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-text {width:100%;display:flex;justify-content:center}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks .stat-block .stat-text p {font-size:14px;line-height:18px;width:50%}} .db-legacy .commercial-page .stat-blocks #citations-block .stat-image {margin-top:-105px} .db-legacy .commercial-page .stat-blocks #citations-block .stat-image img {height:auto;width:200px} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #citations-block .stat-image {margin-top:0px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #citations-block .stat-image img {width:100px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #citations-block .stat-num span {margin-top:-5px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #citations-block .stat-text {margin-top:-20px}} .db-legacy .commercial-page .stat-blocks #research-block .stat-image {margin-top:-113px} .db-legacy .commercial-page .stat-blocks #research-block .stat-image img {height:auto;width:180px} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #research-block .stat-image {margin-top:0px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #research-block .stat-image img {width:100px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #research-block .stat-num {margin-left:-10px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #research-block .stat-text {margin-top:-5px}} .db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-image {margin-top:-153px} .db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-image img {height:auto;width:250px} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block {margin-top:-10px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-image {margin-top:0px;margin-left:-25px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-image img {width:150px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-num {margin-left:-30px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-num span {margin-top:25px}} @media (max-width:479px){.db-legacy .commercial-page .stat-blocks #top-pharma-block .stat-text {margin-top:-25px}} .db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4 {margin-top:0px;margin-bottom:0.5rem} .db-legacy p {margin-top:0px;margin-bottom:1rem} .db-legacy a {color:rgb(0, 176, 242);text-decoration:none;background-color:transparent} .db-legacy a:hover {color:rgb(0, 120, 166);text-decoration:underline} .db-legacy img {vertical-align:middle;border-style:none} .db-legacy svg {overflow:hidden;vertical-align:middle} .db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4 {margin-bottom:0.5rem;font-weight:500;line-height:1.2} .db-legacy h1 {font-size:2.5rem} .db-legacy h2 {font-size:2rem} .db-legacy h3 {font-size:1.75rem} .db-legacy h4 {font-size:1.5rem} .db-legacy .db-container {width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto} @media (min-width:576px){.db-legacy .db-container {max-width:540px}} @media (min-width:768px){.db-legacy .db-container {max-width:720px}} @media (min-width:992px){.db-legacy .db-container {max-width:960px}} @media (min-width:1200px){.db-legacy .db-container {max-width:1140px}} @media print{.db-legacy a:not(.btn) {text-decoration:underline}} @media print{.db-legacy img {break-inside:avoid}} @media print{.db-legacy p, .db-legacy h2, .db-legacy h3 {orphans:3;widows:3}} @media print{.db-legacy h2, .db-legacy h3 {break-after:avoid}} @media print{.db-legacy .db-container {min-width:992px!important}} .db-legacy .drugbank-icon {display:inline-block;line-height:0} .db-legacy .drugbank-icon svg {background-color:transparent;fill:currentcolor;width:1.5rem;height:1.5rem;vertical-align:middle} .db-legacy h1 {color:rgb(170, 179, 193);font-weight:lighter} .db-legacy h2 {color:rgb(0, 22, 30);font-weight:lighter;font-size:1.7rem;margin-top:1.5rem} .db-legacy h3 {color:rgb(0, 22, 30);font-size:1.4rem;margin-top:1.5rem} .db-legacy p {font-weight:lighter} .db-legacy .supporter-logos {display:flex;flex-flow:wrap;justify-content:center;align-items:center} .db-legacy .supporter-logos a {margin:2rem} .db-legacy .supporter-logos img {max-height:60px;width:auto;max-width:180px} /* ========================================================================== * DESIGN-SYSTEM TYPE ALIGNMENT — Aug 2026, /about/ * * The one place this page is deliberately pulled towards the design system. * Everything above is the live Rails page's own CSS and stays that way; this * block re-states the DISPLAY TYPE ONLY — the heading roles and the hero lead * — against the theme's scale, so the page does not read as typographically * foreign next to a component-built page like /press/. * * Layout, spacing, panels, grounds and colour are untouched. This is not a * step towards rebuilding the page from components; if that ever happens, this * block goes with the rest of the file. * * WHAT CHANGES, AND WHY IT IS ONE RULE PER ROLE RATHER THAN AN EDIT ABOVE. * The legacy sheet sets each heading three or four times — once per breakpoint, * a couple with `!important` — as fixed pixel sizes. The theme's scale is a * single `clamp()` per role, so the aligned value REPLACES that whole ladder * rather than joining it. Editing the rungs in place would mean keeping them * consistent forever; overriding the role once, last in the file, does not. * `!important` appears here only where the rule it has to outrank uses it. * * h1 hero -> --text-display-xl 400 lh 1.06 ls -0.032em * h2 section -> --text-display-lg 400 lh 1.14 ls -0.022em * h3 sub-section -> --text-display-md 400 lh 1.20 ls -0.02em * p hero lead -> --text-lead 400 lh 1.60 * * The token names are read at runtime from the theme in * assets/css/flyonui-experiment.css, not copied. Change the scale there and * this page follows. * * DELIBERATELY LEFT ALONE: * · h4 and h5. On this page they are card titles and the uppercase pink * resource kicker, not display type. The kicker's nearest token, * --text-kicker, is 12px against its current 20px — a change big enough * to be somebody's decision rather than an alignment. * · Body copy weight. Several paragraphs here are font-weight 100, which is * the same defect the lead had; only the lead is in scope for this pass. * · Colour. The headings are already the theme's navy. * ========================================================================== */ /* h1 — the hero. Outranks `.db-intro-header-panel .db-container .header-text h1:not(.intro-small)`. */ .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text h1:not(.intro-small), .db-legacy .commercial-page .panel h1 { font-size: var(--text-display-xl); font-weight: 400; line-height: 1.06; letter-spacing: -0.032em; } /* h2 — section headings ("Our story", "Meet our leadership team", …). */ .db-legacy .commercial-page .panel h2, .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .photo-panel .db-container h2, .db-legacy .commercial-page #drugbank-story h2 { font-size: var(--text-display-lg) !important; /* the 34px rung is !important */ font-weight: 400; line-height: 1.14 !important; letter-spacing: -0.022em; } /* h3 — the pull quote and "Advisors and board leadership". */ .db-legacy .commercial-page .panel h3, .db-legacy .commercial-page .centered-panel h3, .db-legacy .commercial-page #quote-panel.badge-panel .badge-text h3, .db-legacy .commercial-page #leaders-panel h3 { font-size: var(--text-display-md); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; } /* The hero lead. Was 24px at weight 100 — hairline at that size. */ .db-legacy .commercial-page .db-intro-header-panel .db-container .header-text p { font-size: var(--text-lead); font-weight: 400; line-height: 1.6; }