/* * /customers/ 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. * * 240 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} .db-legacy {position:relative;z-index:0} .db-legacy img {max-width:none;display:inline;vertical-align:middle} .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 {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 {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 {margin-top:0px;margin-bottom:15px} .db-legacy .commercial-page .panel h1 .light {font-weight:100} .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 p {font-size:18px;line-height:25px;margin-top:15px;margin-bottom:15px} .db-legacy .commercial-page .panel .light {font-weight:100} .db-legacy .commercial-page .panel .action-buttons {margin-top:20px;margin-left:-15px;margin-right:-15px} .db-legacy .commercial-page .panel .action-buttons .button {vertical-align:top} .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.larger {font-size:50px;font-weight:normal;line-height:64px} .db-legacy .commercial-page .centered-panel h3 {font-weight:100} .db-legacy .commercial-page .centered-panel .action-buttons {margin-top:0px} .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, .db-legacy .commercial-page .centered-panel h2.larger {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, .db-legacy .commercial-page .centered-panel h2.larger {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 .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-white {color:white;fill:white;stroke:white} .db-legacy .commercial-page .dark-gradient-header-container {background-color:rgb(22, 31, 68);position:relative;overflow:hidden} .db-legacy .commercial-page .dark-gradient-header-container .panel {z-index:90;background-color:transparent} .db-legacy .commercial-page .dark-gradient-header-container .panel h1, .db-legacy .commercial-page .dark-gradient-header-container .panel h2, .db-legacy .commercial-page .dark-gradient-header-container .panel h3, .db-legacy .commercial-page .dark-gradient-header-container .panel .action-buttons {z-index:100} .db-legacy .commercial-page .dark-gradient-header-container .centered-panel h2, .db-legacy .commercial-page .dark-gradient-header-container .centered-panel h3 {color:white} .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text h1 {font-size:60px;line-height:70px} @media (max-width:767px){.db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text h1 {font-size:40px!important;line-height:50px!important}} .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text p {text-align:center;font-weight:normal;font-size:20px;line-height:30px;color:rgb(243, 243, 251);margin-top:0px} .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text p.lighter {font-weight:100} .db-legacy .commercial-page .dark-gradient-header-container .top-background {position:absolute;height:1200px;width:140%;top:-20px;left:-20%;transform:rotate(180deg);z-index:10} .db-legacy .commercial-page .dark-gradient-header-container .bottom-background {position:absolute;height:1200px;width:140%;bottom:-270px;left:-20%;z-index:10} .db-legacy .commercial-page .lighter {font-weight:lighter} .db-legacy .commercial-page h1 {color:rgb(22, 31, 68)} .db-legacy .commercial-page h2 {color:rgb(22, 31, 68)} .db-legacy .commercial-page .button, .db-legacy .commercial-page a.button, .db-legacy .commercial-page a.button:visited {position:relative;display:inline-block;margin-left:15px;margin-right:15px;margin-top:15px;text-transform:uppercase;font-size:16px;font-weight:normal} .db-legacy .commercial-page .button.dark, .db-legacy .commercial-page a.button.dark, .db-legacy .commercial-page a.button.dark:visited {font-size:16px;font-weight:normal;line-height:1.2;padding:10.5px 20px;border-radius:22px;color:white;background-color:var(--db-mark);transition:0.25s} .db-legacy .commercial-page .button.dark:hover, .db-legacy .commercial-page .button.dark:active, .db-legacy .commercial-page .button.dark:focus, .db-legacy .commercial-page a.button.dark:hover, .db-legacy .commercial-page a.button.dark:active, .db-legacy .commercial-page a.button.dark:focus, .db-legacy .commercial-page a.button.dark:visited:hover, .db-legacy .commercial-page a.button.dark:visited:active, .db-legacy .commercial-page a.button.dark:visited:focus {background-color:var(--db-mark-hover);color:white;opacity:1;outline:none!important} .db-legacy .commercial-page .button.dark:hover, .db-legacy .commercial-page a.button.dark:hover, .db-legacy .commercial-page a.button.dark:visited:hover {transform:translateY(-2px)} .db-legacy .commercial-page .button.dark:active, .db-legacy .commercial-page .button.dark:focus, .db-legacy .commercial-page a.button.dark:active, .db-legacy .commercial-page a.button.dark:focus, .db-legacy .commercial-page a.button.dark:visited:active, .db-legacy .commercial-page a.button.dark:visited:focus {transform:translateY(0px)} .db-legacy .commercial-page #case-studies-header {padding-bottom:25px} .db-legacy .commercial-page #case-studies-header .header-text {width:100%;text-align:center;align-items:center} .db-legacy .commercial-page #case-studies-header h1 {max-width:100%;color:white} .db-legacy .commercial-page #case-studies-header p {max-width:750px} @media (max-width:479px){.db-legacy .commercial-page #case-studies-header {padding-bottom:0px!important}} .db-legacy .commercial-page .case-study-panel {padding-top:50px;padding-bottom:50px} .db-legacy .commercial-page .case-study-panel .case-study-box {display:flex;flex-direction:row;align-items:stretch;border-radius:5px;background-color:rgb(243, 243, 251);z-index:100} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text {width:60%;padding:70px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text img {max-height:45px;height:45px;width:auto;max-width:100%;margin-bottom:50px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text h2 {word-break:break-word} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text h2, .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text p {margin-bottom:20px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text p {font-weight:100} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text a {color:rgb(114, 125, 212);font-size:17px;line-height:28px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text a .drugbank-icon {margin-left:5px;position:relative;top:1px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text a .drugbank-icon svg {stroke:rgb(114, 125, 212);fill:rgb(114, 125, 212);height:12px;width:12px} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-image {width:40%;background-position:70% 0%;background-size:auto 100%;background-repeat:no-repeat;position:relative} .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-image .fireside-chat-image {background-image:url("/static/img/commercial/webinars/Fireside_Title.png");background-position:center center;background-size:80%;background-repeat:no-repeat;background-color:white;width:75%;height:80px;position:absolute;bottom:0px} .db-legacy .commercial-page .case-study-panel .case-study-box.left-box .case-study-image {border-top-right-radius:5px;border-bottom-right-radius:5px} .db-legacy .commercial-page .case-study-panel .case-study-box.left-box .case-study-image .fireside-chat-image {border-top-left-radius:50px;border-bottom-right-radius:5px;right:0px} .db-legacy .commercial-page .case-study-panel .case-study-box.right-box {flex-direction:row-reverse} .db-legacy .commercial-page .case-study-panel .case-study-box.right-box .case-study-image {border-top-left-radius:5px;border-bottom-left-radius:5px} .db-legacy .commercial-page .case-study-panel .case-study-box.right-box .case-study-image .fireside-chat-image {border-top-right-radius:50px;border-bottom-left-radius:5px;left:0px} .db-legacy .commercial-page .case-study-panel #healx-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-1.png")} .db-legacy .commercial-page .case-study-panel #molecular-health-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-2.png")} .db-legacy .commercial-page .case-study-panel #genxys-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-5.png")} .db-legacy .commercial-page .case-study-panel #thrive-health-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-6.png");background-position:90% 0%} .db-legacy .commercial-page .case-study-panel #synkwise-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-7.png");background-position:0% 0%} .db-legacy .commercial-page .case-study-panel #milner-case-study-box.case-study-box .case-study-text img {height:38px} .db-legacy .commercial-page .case-study-panel #milner-case-study-box.case-study-box .case-study-image {background-image:url("/static/img/commercial/case_study/CaseStudies-9.png");background-position:45% 0%} @media (max-width:767px){.db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text {width:100%;padding:35px}} @media (max-width:767px){.db-legacy .commercial-page .case-study-panel .case-study-box .case-study-image {display:none}} @media (max-width:479px){.db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text img {max-height:45px;height:auto}} @media (max-width:479px){.db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text h2 {font-size:30px;line-height:40px}} @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}} .db-legacy h1, .db-legacy h2, .db-legacy h3 {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 {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 .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}} .db-legacy .db-btn {display:inline-block;font-weight:400;color:rgb(33, 37, 41);text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:0.375rem 0.75rem;font-size:1rem;line-height:1.5;border-radius:0.25rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out} @media (prefers-reduced-motion:reduce){.db-legacy .db-btn {transition:none}} .db-legacy .db-btn:hover {color:rgb(33, 37, 41);text-decoration:none} .db-legacy .db-btn:focus {outline:0px;box-shadow:rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem} .db-legacy .db-btn:disabled {opacity:0.65} @media print{.db-legacy a:not(.db-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 .db-btn {cursor:pointer;transition:background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;display:inline-flex;align-items:center;justify-content:center} @media (max-width:767.98px){.db-legacy .db-btn:not(.dbp-button,.dbp-btn--not-mobile,.hs-button) {padding:0.25rem 0.5rem;font-size:0.875rem;line-height:1.5;border-radius:999px}} /* ========================================================================== * DESIGN-SYSTEM TYPE ALIGNMENT — Aug 2026, /customers/ * * 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, on the navy gradient. Outranks the 40px !important rung. */ .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text h1, .db-legacy .commercial-page .panel h1 { font-size: var(--text-display-xl) !important; font-weight: 400; line-height: 1.06 !important; letter-spacing: -0.032em; } /* THE HERO IS ONE WEIGHT NOW. The live page splits it — `.light` at 100 * against a 700 remainder — which is where the hairline came from, and it is * the one legacy type trick the theme has no equivalent for: /press/'s h1 is a * single 400. Both halves are 400, so the line break still shapes the hero but * the weight no longer does. */ .db-legacy .commercial-page .panel h1 .light, .db-legacy .commercial-page .panel h1 span { font-weight: inherit; } /* h2 — one per customer story, plus "Our customers love us!". */ .db-legacy .commercial-page .panel h2, .db-legacy .commercial-page .centered-panel h2, .db-legacy .commercial-page .centered-panel h2.larger, .db-legacy .commercial-page .case-study-panel .case-study-box .case-study-text h2 { font-size: var(--text-display-lg); font-weight: 400; line-height: 1.14; letter-spacing: -0.022em; } /* h3 — the sub-heads under the centred panels. */ .db-legacy .commercial-page .panel h3, .db-legacy .commercial-page .centered-panel h3 { font-size: var(--text-display-md); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; } /* The hero lead. `p.lighter` outranks a bare `p`, and `.lighter` is what * carried font-weight 100 — so the class has to be named here or the size * lands and the hairline stays. */ .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text p, .db-legacy .commercial-page .dark-gradient-header-container .header-panel .header-text p.lighter { font-size: var(--text-lead); font-weight: 400; line-height: 1.6; }