/*
* /clinical/ ONLY. Do not import this anywhere else.
*
* This is the subset of go.drugbank.com's own two stylesheets that the live
* Clinical API page's markup actually matches — 316 rules out of 7,480 —
* mechanically extracted from a single-file export on 26 Aug 2026 and re-scoped
* under `.db-legacy`.
*
* WHY THE WRAPPER MATTERS. CLAUDE.md's rule is one design system per page,
* because Tailwind's preflight resets the elements the legacy CSS depends on.
* This page needs both: the new navbar and footer (Tailwind) around a verbatim
* legacy body. Scoping every selector under `.db-legacy` is what makes that
* safe — the legacy reboot rules become `.db-legacy h1`, which outranks
* preflight's bare `h1` inside the wrapper and is inert everywhere else.
*
* DO NOT HAND-TUNE THIS FILE towards the design system. It is a snapshot of
* another site's CSS. If /clinical/ is ever redesigned it should be rebuilt
* from components, and this file deleted whole.
*
* The `--blue`/`--indigo`/… custom properties below are Bootstrap's defaults,
* carried across because a handful of the extracted rules reference them. They
* are not DrugBank tokens and nothing outside this file should read them.
*/
.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;
}
/* ---- public.css ---- */
.db-legacy [tabindex="-1"]:focus:not(:focus-visible) {outline:0px!important}
.db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4, .db-legacy h5, .db-legacy h6 {margin-top:0px;margin-bottom:0.5rem}
.db-legacy p {margin-top:0px;margin-bottom:1rem}
.db-legacy ul {margin-top:0px;margin-bottom:1rem}
.db-legacy strong {font-weight:bolder}
.db-legacy sup {position:relative;font-size:75%;line-height:0;vertical-align:baseline}
.db-legacy sup {top:-0.5em}
.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 label {display:inline-block;margin-bottom:0.5rem}
.db-legacy button {border-radius:0px}
.db-legacy button:focus:not(:focus-visible) {outline:0px}
.db-legacy input, .db-legacy button, .db-legacy select {margin:0px;font-family:inherit;font-size:inherit;line-height:inherit}
.db-legacy button, .db-legacy input {overflow:visible}
.db-legacy button, .db-legacy select {text-transform:none}
.db-legacy select {overflow-wrap:normal}
.db-legacy button {appearance:button}
.db-legacy input[type="checkbox"] {box-sizing:border-box;padding:0px}
.db-legacy h1, .db-legacy h2, .db-legacy h3, .db-legacy h4, .db-legacy h5, .db-legacy h6 {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 h5 {font-size:1.25rem}
.db-legacy h6 {font-size:1rem}
.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 .row {display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.db-legacy .col-md-7, .db-legacy .col-md-5, .db-legacy .col-sm-12, .db-legacy .col-sm-6 {position:relative;width:100%;padding-right:15px;padding-left:15px}
@media (min-width:576px){.db-legacy .col-sm-6 {flex:0 0 50%;max-width:50%}}
@media (min-width:576px){.db-legacy .col-sm-12 {flex:0 0 100%;max-width:100%}}
@media (min-width:768px){.db-legacy .col-md-5 {flex:0 0 41.6667%;max-width:41.6667%}}
@media (min-width:768px){.db-legacy .col-md-7 {flex:0 0 58.3333%;max-width:58.3333%}}
.db-legacy .form-control {display:block;width:100%;height:calc(1.5em + 2px + 0.75rem);padding:0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:rgb(73, 80, 87);background-color:rgb(255, 255, 255);background-clip:padding-box;border:1px solid rgb(206, 212, 218);border-radius:0.25rem;transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}
@media (prefers-reduced-motion:reduce){.db-legacy .form-control {transition:none}}
.db-legacy .form-control:focus {color:rgb(73, 80, 87);background-color:rgb(255, 255, 255);border-color:rgb(128, 189, 255);outline:0px;box-shadow:rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem}
.db-legacy .form-control::placeholder {color:rgb(108, 117, 125);opacity:1}
.db-legacy .form-control:disabled {background-color:rgb(233, 236, 239);opacity:1}
.db-legacy .form-group {margin-bottom:1rem}
.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}
.db-legacy .fade {transition:opacity 0.15s linear}
@media (prefers-reduced-motion:reduce){.db-legacy .fade {transition:none}}
.db-legacy .fade:not(.show) {opacity:0}
.db-legacy .custom-control-input {position:absolute;left:0px;z-index:-1;width:1rem;height:1.25rem;opacity:0}
.db-legacy form select:not([multiple="multiple"]) {display:inline-block;width:100%;height:calc(1.5em + 2px + 0.75rem);padding:0.375rem 1.75rem 0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:rgb(73, 80, 87);vertical-align:middle;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center / 8px 10px no-repeat rgb(255, 255, 255);border:1px solid rgb(206, 212, 218);border-radius:0.25rem;appearance:none}
.db-legacy form select:focus:not([multiple="multiple"]) {border-color:rgb(128, 189, 255);outline:0px;box-shadow:rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem}
.db-legacy form select:disabled:not([multiple="multiple"]) {color:rgb(108, 117, 125);background-color:rgb(233, 236, 239)}
.db-legacy form select:not([multiple="multiple"]) {transition: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 form select:not([multiple="multiple"]) {transition:none}}
.db-legacy .nav {display:flex;flex-wrap:wrap;padding-left:0px;margin-bottom:0px;list-style:none}
.db-legacy .nav-link {display:block;padding:0.5rem 1rem}
.db-legacy .nav-link:hover, .db-legacy .nav-link:focus {text-decoration:none}
.db-legacy .close {float:right;font-size:1.5rem;font-weight:700;line-height:1;color:rgb(0, 0, 0);text-shadow:rgb(255, 255, 255) 0px 1px 0px;opacity:0.5}
.db-legacy .close:hover {color:rgb(0, 0, 0);text-decoration:none}
.db-legacy .modal {position:fixed;top:0px;left:0px;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0px}
.db-legacy .modal-dialog {position:relative;width:auto;margin:0.5rem;pointer-events:none}
.db-legacy .modal.fade .modal-dialog {transition:transform 0.3s ease-out;transform:translate(0px, -50px)}
@media (prefers-reduced-motion:reduce){.db-legacy .modal.fade .modal-dialog {transition:none}}
.db-legacy .modal-content {position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:rgb(255, 255, 255);background-clip:padding-box;border:1px solid rgba(0, 0, 0, 0.2);border-radius:0.3rem;outline:0px}
.db-legacy .modal-body {position:relative;flex:1 1 auto;padding:1rem}
@media (min-width:576px){.db-legacy .modal-dialog {max-width:500px;margin:1.75rem auto}}
.db-legacy .d-none {display:none!important}
@media (min-width:576px){.db-legacy .d-sm-block {display:block!important}}
@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 p.db-default {font-size:16px;line-height:24px}
.db-legacy form select.db-select {background:url("data:image/svg+xml;utf8, on the live page — five s on one
document is a real semantic bug, so they are here. This restores the
rules they were picking up, so nothing moves by a pixel. */
.db-legacy .commercial-page .panel .api-step-title {
font-size: 50px; font-weight: normal; line-height: 64px;
margin-top: 0; margin-bottom: 15px; color: rgb(22, 31, 68);
}
@media (max-width: 767px) {
.db-legacy .commercial-page .panel .api-step-title { font-size: 36px; line-height: 46px; }
}
/* The four panel titles ship as on the live page. Five s on one
document is a real semantic bug, so they are here.
This is the page-specific rule they were matching —
`.api-step-panel .api-step-container h1` — restored verbatim, so nothing
moves by a pixel. */
.db-legacy .commercial-page .api-step-panel .api-step-container .api-step-title {
font-size: 18px;
font-weight: normal;
line-height: 24px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 15px;
}
/* ==========================================================================
PREFLIGHT UNDO + rules the extractor could not see.
Everything below is hand-written. It is the short list of places where
Tailwind's preflight beat the legacy cascade, plus three rules the extractor
dropped because its selector probe could not evaluate them.
========================================================================== */
/* --- Keep the legacy z-index war inside this page ---------------------------
The legacy stylesheet stacks things freely — the hero illustration is
`z-index: 100`, the base-module info box is `150`. The site header is
`position: static` with no z-index of its own, so it creates NO stacking
context and its mega-menu (`z-50`) competes in the ROOT context, where 100
beats 50. The menu opened behind the phone.
Giving the wrapper its own stacking context traps every one of those values
inside it. `z-index: 0` on a positioned element is enough: the header still
paints in document order above a z-0 sibling context, and nothing the legacy
CSS does internally can ever reach past it again.
ANY PAGE PORTED THIS WAY NEEDS THIS. It is the first thing to check when
shared chrome starts rendering underneath ported content.
-------------------------------------------------------------------------- */
.db-legacy {
position: relative;
z-index: 0;
}
/* --- Images -----------------------------------------------------------------
Preflight sets `img { max-width: 100%; height: auto; display: block }`. The
legacy layout has none of that: several images carry an explicit height and
are MEANT to overflow their column — the hero phone is 850x630 in a 397px
column and bleeds across the fold deliberately. With max-width clamping the
width while the height rule still fired, every one of them rendered squashed.
Bootstrap 4's reboot, which this page was written against, does not set
max-width on img at all; only `.img-fluid` does.
-------------------------------------------------------------------------- */
.db-legacy img {
max-width: none;
display: inline;
vertical-align: middle;
}
/* --- Lists ------------------------------------------------------------------
Preflight also sets `ol,ul,menu { list-style: none }`, and legacy markup
expects the browser default: the bare `` in the US Drug Labels module
block is a bulleted list because nothing in the legacy sheet ever had to say
so. Without this its three items read as stray indented lines. Same defect,
same fix, as the four /clinical/ feature pages — see the preamble that
tools/port-legacy-page.mjs now emits.
`revert` rather than `disc` so nested lists still step through circle and
square the way the UA sheet does. Every list here that is deliberately
unmarked — `.nav`, `.customDrugBankSelect__list` — sets `list-style: none`
itself at a higher specificity and still wins.
-------------------------------------------------------------------------- */
.db-legacy ul, .db-legacy ol, .db-legacy menu { list-style: revert; }
/* --- Buttons ----------------------------------------------------------------
`.btn` asks for inline-flex centring and `.commercial-page .button` overrides
it back to inline-block, so the label's vertical position is left to the
font's own ascent/descent. Ours and the live page resolve those differently
(our text box measures 21px against its 19px), which put every label ~4px
high in its pill — visible on "Book a Demo", "Download Overview" and "Chat
With An Expert" alike.
Centring it explicitly makes the result independent of font metrics, which is
what it should have been. min-height matches the live button exactly.
-------------------------------------------------------------------------- */
.db-legacy .commercial-page .button,
.db-legacy .commercial-page a.button,
.db-legacy .commercial-page a.button:visited {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
}
.db-legacy .commercial-page .button .button-body {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* --- The step list's active circle and its dimming --------------------------
DROPPED BY THE EXTRACTOR, for the same reason as the rule below it.
The first is a selector LIST — `.number.active, .number:hover,
.number.initial` — and the probe only matched the two halves whose classes
are in the markup at rest. `.active` is added by the script, so that third
of the rule was cut and the current step never filled in.
The second dims every circle after the current one, and is `:has()` again.
-------------------------------------------------------------------------- */
.db-legacy .commercial-page #step-list .item .number.active {
background-color: rgb(38, 48, 99);
color: white;
opacity: 1;
}
.db-legacy .commercial-page #step-list .item:has(.active, .initial, :hover) ~ .item .number {
opacity: 0.5;
}
/* --- The step list's progressive fill ---------------------------------------
DROPPED BY THE EXTRACTOR: `:has()` with a selector list is more than its
selector probe could evaluate, so this rule matched nothing and was cut.
It is the whole behaviour of the rail. Labels are visible BY DEFAULT and
every item AFTER the current one is hidden — so as you scroll, the labels
fill in one at a time behind you. Without it all four labels showed at once
and the rail looked inert.
-------------------------------------------------------------------------- */
.db-legacy .commercial-page #step-list .item:has(.active, .initial, :hover) ~ .item .text {
opacity: 0;
}