/* * Design tokens — Xopenex HFA HCP site * * Sizes are rem at a 16px root so the site respects the user's browser * font-size preference. Colors are oklch, with the source hex kept in a * trailing comment; each oklch resolves to exactly that sRGB hex. */ :root { /* --------------------------------------------------------------- * Typography — families * ------------------------------------------------------------- */ --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif; --font-support: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace; /* Typography — scale (10 / 10.32 / 12 / 13 / 14 / 15 / 16 / 18 / 20 / 24 / 28 / 40 / 56 px) */ --font-size-legal: 0.625rem; /* 10px — footer trademark/copyright/job code */ --font-size-footnote: 0.645rem; --font-size-caption: 0.75rem; --font-size-body-sm: 0.8125rem; --font-size-ui: 0.875rem; --font-size-isi: 0.9375rem; --font-size-body: 1rem; --font-size-lead: 1.125rem; --font-size-body-lg: 1.25rem; --font-size-h4: 1.5rem; /* 24px */ --font-size-h3: 1.75rem; --font-size-h1: 2.5rem; /* * Display 3 is 56px at desktop and ~32px at 430px, interpolated fluidly so * the two ends are one curve rather than two breakpoints. */ --font-size-display-3: clamp(2rem, 1.36rem + 2.38vw, 3.5rem); /* Typography — weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Typography — line heights */ --line-height-tight: 1.1; --line-height-h1: 1.2; --line-height-heading: 1.225; --line-height-snug: 1.4; --line-height-body: 1.45; --line-height-caption: 1.5; --line-height-loose: 1.6; /* Typography — tracking. em-based so it scales with font-size. */ --tracking-display: -0.01em; /* -0.56px at 56px, -0.4px at 40px */ --tracking-tight: -0.01em; /* -0.18px at 18px, -0.15px at 15px */ --tracking-isi-subhead: 0.03em; /* 0.48px at 16px */ --tracking-isi-text: 0.015em; /* 0.24px at 16px */ --tracking-body-lg: 0.015em; /* 0.3px at 20px */ --tracking-eyebrow: 0.1em; /* 1.3px at 13px */ --tracking-footer-link: 0.1em; /* 1.2px at 12px */ --tracking-footer-copy: 0.015em; /* 0.15px at 10px */ /* --------------------------------------------------------------- * Color — brand * ------------------------------------------------------------- */ --color-brand-primary: oklch(32.1% 0.1152 257.27deg); /* #00306c */ --color-brand-tertiary: oklch(96.12% 0.0216 234.99deg); /* #e5f5ff */ --color-white: #fff; --color-black: #000; /* * The navy behind the nav bar and the mobile active-item marker is NOT * brand primary — it is a distinct, slightly cooler navy. */ --color-nav-surface: oklch(29.96% 0.0708 268.68deg); /* #1f2b51 */ /* Color — semantic */ --color-text-heading: var(--color-brand-primary); --color-text-body: oklch(34.85% 0 89.88deg); /* #3a3a3a */ --color-text-eyebrow: oklch(56.24% 0 89.88deg); /* #757575 */ --color-link: oklch(57.82% 0.2282 260.03deg); /* #0d6efd */ --color-surface: var(--color-white); --color-rule: oklch(88.53% 0 89.88deg); /* #d9d9d9 */ /* Hairline on the audience toggle, over navy. */ --color-toggle-border: rgb(190 210 210 / 31%); /* * The same hue at full opacity: the rule inside a contact card, and the * comparator table's cell border. Kept as the source hex rather than * converted to oklch like its neighbours, so it stays byte-identical to the * literal it replaced on the Efficacy table. */ --color-card-rule: #bed2d2; /* Color — ISI */ --color-isi-title-bar: oklch(41.05% 0.1047 256.96deg); /* #214a82 */ --color-isi-surface: oklch(97.57% 0.0017 247.84deg); /* #f6f7f8 */ --color-isi-border: oklch(90.97% 0 89.88deg); /* #e1e1e1 */ /* Color — Home page */ --color-cta: oklch(37.99% 0.1513 23.4deg); /* #800316 */ --color-accent: oklch(65.13% 0.1065 249.76deg); /* #5a94ce */ --color-card-surface: oklch(95.42% 0.0034 247.86deg); /* #eef0f2 */ /* Color — footer */ --color-footer-surface: var(--color-black); --color-footer-divider: oklch(31.32% 0 89.88deg); /* #313131 */ /* --------------------------------------------------------------- * Spacing (4 / 8 / 16 / 24 / 32 / 48 px) * ------------------------------------------------------------- */ --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 1rem; --space-l: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --gutter: 3rem; /* --------------------------------------------------------------- * Layout * ------------------------------------------------------------- */ --container-max: 90rem; /* 1440px */ --container-margin: var(--space-l); /* 24px on mobile … */ --isi-container-margin: var(--space-l); /* * Savings promo height. A layout constant rather than a component-scoped * property because two rules must agree on it: the promo's own * min-block-size, and where the hero band's navy stops on mobile so the * promo lands on the white below it. */ --savings-promo-height: 7.3125rem; /* 117px */ --radius-sm: 0.5rem; --radius-full: 6.25rem; --border-width: 1px; /* Header rhythm — logo row height (46px). */ --logo-height: 2.875rem; --tap-target: 2rem; /* 32px icon buttons */ /* --------------------------------------------------------------- * Elevation — ISI Shadow effect, five stacked upward shadows. * ------------------------------------------------------------- */ --shadow-isi: 0 -3px 6px 0 rgb(0 0 0 / 2%), 0 -12px 12px 0 rgb(0 0 0 / 2%), 0 -26px 16px 0 rgb(0 0 0 / 1%), 0 -47px 19px 0 rgb(0 0 0 / 0%), 0 -73px 20px 0 rgb(0 0 0 / 0%); /* --------------------------------------------------------------- * Motion * ------------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* the safety tray's slide in and out */ --easing-standard: cubic-bezier(0.2, 0, 0, 1); } /* … 48px once there is room for it. */ @media (width >= 48rem) { :root { --container-margin: var(--space-2xl); --isi-container-margin: var(--space-2xl); } }