@import 'tailwindcss';
/* Adobe Fonts — @import so Museo loads wherever this CSS is bundled (Design Previewer has no theme ). */
@import url('https://use.typekit.net/tag7kte.css');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
@source '../components/**/*.{js,ts,jsx,tsx}';
@source '../templates/**/*.{html,hubl.html}';
/* Custom theme extensions in @theme */
@theme {
/* Adobe Fonts (kit tag7kte) — Museo: weights 300 & 700 in this kit; add more in Adobe if you need 400 etc. */
--font-sans: 'museo', ui-serif, Georgia, 'Times New Roman', serif;
/* Breakpoints — “mobile” in docs/tasks = below md (1184px); md: = desktop, NOT default Tailwind 768px */
--breakpoint-xs: 23.4375rem; /* mobile: 375px */
--breakpoint-sm: 48.5rem; /* tablet: 776px */
--breakpoint-md: 74rem; /* desktop klein: 1184px — usual mobile/desktop split */
--breakpoint-lg: 88rem; /* desktop groot: 1408px */
--breakpoint-xl: 106rem; /* desktop xl: 1696px */
/* Heading scale (Tailwind `text-h*`): seven steps = unique sizes across H1–H5 × mobile/desktop.
Mobile default, `md:` = desktop (see h1–h5 rules below). Headings use font-semibold (600). */
--text-hxs: 1rem; /* 16px — H5 mobile */
--text-hxs--line-height: 1.5rem;
--text-hsm: 1.125rem; /* 18px — H4 mobile */
--text-hsm--line-height: 1.5rem;
--text-hmd: 1.25rem; /* 20px — H3 mobile, H5 desktop */
--text-hmd--line-height: 1.75rem;
--text-hlg: 1.5rem; /* 24px — H2 mobile, H4 desktop */
--text-hlg--line-height: 2rem;
--text-hxl: 2rem; /* 32px — H1 mobile, H3 desktop */
--text-hxl--line-height: 2.5rem;
--text-h2xl: 2.5rem; /* 40px — H2 desktop */
--text-h2xl--line-height: 3rem;
--text-h3xl: 3.5rem; /* 56px — H1 desktop */
--text-h3xl--line-height: 4rem;
/* Colors */
--color-primary: #fe5000;
--color-primary-hover: #e54929;
--color-secondary: #009bd0;
--color-secondary-hover: #0086b3;
--color-boerhaave-red-50: #fef4f5;
--color-boerhaave-red-500: #f12a39;
--color-boerhaave-red-600: #c1222e;
--color-boerhaave-red-700: #911922;
--color-boerhaave-red-800: #601117;
--color-boerhaave-espresso-100: #cdcac8;
--color-boerhaave-espresso-300: #827a77;
--color-boerhaave-espresso-500: #362923;
--color-boerhaave-espresso-900: #0b0807;
--color-boerhaave-peach-50: #fffefd;
--color-boerhaave-peach-200: #fff4eb;
--color-boerhaave-peach-300: #FEEFE2;
--color-boerhaave-peach-400: #feead9;
--color-boerhaave-peach-500: #fee5d0;
--color-boerhaave-peach-600: #cbb7a6;
--color-boerhaave-peach-700: #98897d;
--color-boerhaave-peach-800: #665c53;
--color-boerhaave-grayscale-50: #fefefe;
--color-boerhaave-grayscale-300: #eef2f4;
--color-boerhaave-bmi-healthy: #008341;
--color-boerhaave-bmi-overweight: #c25400;
--color-boerhaave-bmi-obesity: #ea0004;
/* Shadows */
--shadow-low: 0 4px 8px 0 rgba(152, 137, 125, 0.1);
--shadow-elevated: 0 8px 16px 0 rgba(152, 137, 125, 0.2);
}
/* Custom utilities */
/* Default grid layouts */
@utility default-grid {
@apply grid grid-cols-4 gap-x-6 sm:grid-cols-12 md:gap-x-8 xl:gap-x-10;
}
@utility default-grid--sm {
@apply sm:grid sm:grid-cols-12 md:gap-x-8 xl:gap-x-10;
}
@utility default-grid--md {
@apply md:grid md:grid-cols-12 md:gap-x-8 xl:gap-x-10;
}
@utility default-grid--lg {
@apply lg:grid lg:grid-cols-12 lg:gap-x-8 xl:gap-x-10;
}
@utility default-spacing {
@apply py-8 sm:py-10 lg:py-16 xl:py-20;
}
/* Sticky footer: main column grows; DND wrappers pass height to full-height modules */
#main-content .dnd-section,
#main-content .dnd-column,
#main-content .dnd-row {
@apply flex min-h-full flex-1 flex-col;
}
@utility sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
@utility container {
margin-inline: auto;
width: 100%;
padding-inline: 1.25rem;
max-width: 100%;
@media (width >= 40rem) {
/* sm: 640px */
padding-inline: 1.25rem;
max-width: 100%;
}
@media (width >= 48rem) {
/* md: 768px */
padding-inline: 5rem;
}
@media (width >= 64rem) {
/* lg: 1024px */
padding-inline: 3.5rem;
}
@media (width >= 80rem) {
/* >1280px */
max-width: 80rem;
}
}
:root,
:host {
--font-sans: 'museo', ui-serif, Georgia, 'Times New Roman', serif !important;
--webkit-font-smoothing: antialiased;
}
body {
@apply bg-boerhaave-peach-200 font-sans text-boerhaave-espresso-500;
}
h1,
.heading-1 {
@apply text-hxl leading-8.5 font-semibold md:text-h3xl md:leading-14.5;
}
h2,
.heading-2 {
@apply text-hlg leading-7.5 font-semibold md:text-h2xl md:leading-10;
}
h3,
.heading-3 {
@apply text-hmd leading-6.5 font-semibold md:text-hxl md:leading-10;
}
h4,
.heading-4 {
@apply text-hsm leading-6 font-semibold md:text-hlg md:leading-7;
}
h5,
.heading-5 {
@apply text-hxs leading-5.5 font-semibold md:text-hmd md:leading-6.5;
}
p,
label {
@apply text-lg leading-7 font-light;
}
/* Global focus styles (keyboard); more specific rules e.g. `form input:focus` win on those elements */
:focus-visible {
@apply outline-2 outline-offset-0 outline-boerhaave-red-500;
}
/* Rich text styles */
.richText strong {
@apply font-semibold;
}
.richText ul {
@apply ms-[1.2rem] list-disc;
}
.richText ol {
@apply ms-[1.2rem] list-decimal;
}
.richText li {
@apply text-base md:text-lg;
}
.richText blockquote,
blockquote,
blockquote p,
blockquote span {
@apply text-base font-semibold italic md:text-lg;
}
.richText a {
@apply text-boerhaave-red-500 underline hover:text-boerhaave-red-600;
}
/* Circle-style lists: custom markers (theme primary); disc lists keep default .richText ul rules.
Inline list-style from the editor beats normal rules — use !important so native circles hide. */
ul[type='circle'],
ul[style*='list-style-type: circle'],
ul[style*='list-style-type:circle'] {
list-style: none !important;
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}
ul[type='circle'] > li,
ul[style*='list-style-type: circle'] > li,
ul[style*='list-style-type:circle'] > li {
position: relative;
padding-left: 2.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
min-height: 24px;
list-style: none !important;
list-style-type: none !important;
}
ul[type='circle'] > li::marker,
ul[style*='list-style-type: circle'] > li::marker,
ul[style*='list-style-type:circle'] > li::marker {
content: none;
}
ul[type='circle'] > li::before,
ul[style*='list-style-type: circle'] > li::before,
ul[style*='list-style-type:circle'] > li::before {
content: '';
position: absolute;
left: 0;
top: 0.2em;
top: calc(0.5lh - 9px);
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23FEE5D0'/%3E%3Cpath d='M16.1341 8.15908C16.5246 7.76859 17.1576 7.76859 17.5481 8.15908C17.9386 8.54968 17.9386 9.18268 17.5481 9.57318L11.2803 15.8409C10.8898 16.2314 10.2568 16.2313 9.86632 15.8409L6.45208 12.4267C6.06155 12.0362 6.06155 11.4032 6.45208 11.0126C6.8426 10.6221 7.47562 10.6221 7.86614 11.0126L10.5733 13.7198L16.1341 8.15908Z' fill='%23F12A39'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Buttons */
button {
@apply cursor-pointer;
}
@utility btn-base {
@apply relative flex w-fit cursor-pointer items-center justify-center gap-2 rounded-full px-7 py-3 text-base font-semibold text-nowrap transition-all duration-200 ease-in-out;
}
/* Primary button*/
@utility btn-primary {
@apply btn-base bg-boerhaave-red-500 text-white hover:bg-boerhaave-red-600;
--btn-icon-filter: brightness(0) invert(1);
}
.btn-primary:focus-visible,
.btn-primary:has(:focus-visible) {
@apply bg-boerhaave-red-600;
}
.btn-primary a,
.btn-primary button {
color: inherit;
text-decoration: none;
}
.btn-primary a::before {
content: '';
position: absolute;
inset: 0;
}
.btn-primary .btn-icon img {
filter: var(--btn-icon-filter);
@apply size-3.5 object-contain md:size-6;
}
/* Secondary button */
@utility btn-secondary {
@apply btn-base bg-boerhaave-espresso-500 text-white hover:bg-boerhaave-espresso-900;
/* Icon: always white. Override with --btn-icon-filter on this element if needed. */
--btn-icon-filter: brightness(0) invert(1);
}
.btn-secondary a,
.btn-secondary button {
color: inherit;
text-decoration: none;
}
.btn-secondary a::before {
content: '';
position: absolute;
inset: 0;
}
.btn-secondary .btn-icon img {
filter: var(--btn-icon-filter);
@apply size-3.5 object-contain md:size-6;
}
.btn-secondary:focus-visible,
.btn-secondary:has(:focus-visible) {
@apply bg-boerhaave-espresso-900;
}
/* Tertiary button */
@utility btn-tertiary {
@apply btn-base text-boerhaave-espresso-500 hover:bg-boerhaave-red-500 hover:text-white;
}
.btn-tertiary a,
.btn-tertiary button {
color: inherit;
text-decoration: none;
}
.btn-tertiary a::before {
content: '';
position: absolute;
inset: 0;
}
.btn-tertiary .btn-icon img {
filter: brightness(0.2);
transition: filter 200ms ease;
@apply size-3.5 object-contain md:size-6;
}
.btn-tertiary:hover .btn-icon img {
filter: brightness(0) invert(1);
}
.btn-tertiary:focus-visible,
.btn-tertiary:has(:focus-visible) {
@apply bg-boerhaave-red-500 text-white;
}
.btn-tertiary:focus-visible .btn-icon img,
.btn-tertiary:has(:focus-visible) .btn-icon img {
filter: brightness(0) invert(1);
}
/* Outline button */
@utility btn-outline {
@apply btn-base border border-boerhaave-espresso-500 font-semibold text-boerhaave-espresso-500 hover:border-boerhaave-red-500;
}
.btn-outline a,
.btn-outline button {
color: inherit;
text-decoration: none;
}
.btn-outline a::before {
content: '';
position: absolute;
inset: 0;
}
.btn-outline .btn-icon img {
filter: brightness(0.2);
@apply size-3.5 object-contain md:size-6;
}
.btn-outline:focus-visible,
.btn-outline:has(:focus-visible) {
@apply border-boerhaave-red-500;
}
/* Underline: no a::before (pill hit-area); without relative here abspos can anchor to a huge ancestor. */
@utility btn-underline {
@apply relative h-fit w-fit! cursor-pointer rounded-none border-b border-boerhaave-espresso-500 px-0 py-2 font-semibold text-boerhaave-espresso-500 hover:border-boerhaave-red-500 hover:text-boerhaave-red-500;
}
@utility btn-underline-light {
@apply btn-underline border-white text-white;
}
.btn-underline a,
.btn-underline button {
color: inherit;
text-decoration: none;
}
.btn-underline .btn-icon img {
filter: brightness(0.2);
@apply size-3.5 object-contain md:size-6;
}
.btn-underline:focus-visible,
.btn-underline:has(:focus-visible) {
@apply border-boerhaave-red-500 text-boerhaave-red-500;
}
.btn-underline:focus-visible .btn-icon img,
.btn-underline:has(:focus-visible) .btn-icon img {
filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(3883%) hue-rotate(340deg) brightness(94%)
contrast(101%);
}
/* Matches --color-boerhaave-red-500 (#F12A39); generated for black→target filter */
.btn-underline:hover .btn-icon img {
filter: brightness(0) saturate(100%) invert(28%) sepia(65%) saturate(3883%) hue-rotate(340deg) brightness(94%)
contrast(101%);
}
/* Link-buttons: Tab focus is on inner ; shell uses :has(:focus-visible) for hover look; no outline on */
.btn-primary a:focus-visible,
.btn-secondary a:focus-visible,
.btn-tertiary a:focus-visible,
.btn-outline a:focus-visible,
.btn-underline a:focus-visible {
@apply outline-none;
}
/* Flex row inside buttons (label + icons) */
.btn-row {
@apply gap-2;
}
/* Size modifiers — use with variant, e.g. `btn-primary btn-small` (see ``) */
@utility btn-small {
@apply px-5 py-2 text-sm;
}
@utility btn-large {
@apply px-9 py-4 text-lg;
}
.btn-small.btn-primary .btn-icon img,
.btn-small.btn-secondary .btn-icon img,
.btn-small.btn-tertiary .btn-icon img,
.btn-small.btn-outline .btn-icon img {
@apply size-4;
}
.btn-large.btn-primary .btn-icon img,
.btn-large.btn-secondary .btn-icon img,
.btn-large.btn-tertiary .btn-icon img,
.btn-large.btn-outline .btn-icon img {
@apply size-6;
}
.btn-small.btn-underline .btn-icon img {
@apply size-4;
}
.btn-large.btn-underline .btn-icon img {
@apply size-6;
}
.btn-underline.btn-small {
@apply px-0 py-2 text-sm;
}
.btn-underline.btn-large {
@apply px-0 py-2 text-lg;
}
/* Form styles */
.hs-form-field {
@apply flex w-full! flex-col gap-2;
}
form {
@apply flex flex-col gap-4;
}
form input,
form textarea {
@apply rounded-xl border border-boerhaave-peach-700 bg-boerhaave-grayscale-50 p-3 outline-2 outline-offset-0 outline-transparent transition-colors duration-200 focus:border-transparent focus:outline-boerhaave-peach-800;
}
form input::placeholder,
form textarea::placeholder {
@apply text-boerhaave-espresso-500;
}
form textarea {
@apply min-h-[120px] w-full! resize-y;
}
select {
@apply w-full! cursor-pointer appearance-none rounded-xl border border-boerhaave-peach-700 bg-boerhaave-grayscale-50 bg-right bg-no-repeat p-3 text-boerhaave-espresso-500 outline-2 outline-offset-0 outline-transparent transition-colors duration-200 focus:border-transparent focus:outline-boerhaave-peach-800;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5419 7.54289C19.9324 7.15237 20.5654 7.15237 20.956 7.54289C21.3464 7.93342 21.3465 8.56645 20.956 8.95695L12.706 17.207C12.3399 17.573 11.7608 17.5956 11.3681 17.2753L11.2919 17.207L3.04191 8.95695C2.65139 8.56643 2.65139 7.93342 3.04191 7.54289C3.43244 7.15237 4.06545 7.15237 4.45597 7.54289L11.9989 15.0859L19.5419 7.54289Z' fill='%23F12A39'/%3E%3C/svg%3E");
background-position: right 0.75rem center;
padding-right: 2.5rem;
}
form label {
@apply text-sm font-semibold;
}
@utility form-boxes {
@apply cursor-pointer border border-boerhaave-peach-700 bg-boerhaave-grayscale-50 outline-none focus:border-boerhaave-peach-800;
appearance: none;
-webkit-appearance: none;
vertical-align: middle;
}
form input[type='radio'] {
@apply size-4! form-boxes rounded-full;
}
form input[type='checkbox'] {
@apply size-8! form-boxes rounded-xl;
}
form input[type='checkbox']:checked {
/* Center the check icon SVG using a pseudo-element */
position: relative;
}
form input[type='checkbox']:checked::after {
content: '';
display: block;
position: absolute;
inset: 0;
width: 15px;
height: 10px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 15px 10px;
/* Inline SVG as data URI, escaping # as %23 */
background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9498 0.292897C13.3403 -0.0976325 13.9733 -0.0976325 14.3638 0.292897C14.7544 0.683417 14.7544 1.31644 14.3638 1.70693L6.53535 9.53535C6.14485 9.92595 5.51185 9.92595 5.12132 9.53535L0.292897 4.70692C-0.0976325 4.31642 -0.0976325 3.68342 0.292897 3.29292C0.683417 2.90232 1.31644 2.90232 1.70696 3.29292L5.82835 7.41425L12.9498 0.292897Z' fill='%23362923'/%3E%3C/svg%3E");
pointer-events: none;
}
form input[type='radio']:checked {
@apply bg-boerhaave-espresso-500;
}
form li[role='checkbox'] label,
form li[role='radio'] label,
form li.hs-form-booleancheckbox label {
@apply flex items-center gap-2;
}
form ul[role='checkbox'] {
@apply flex flex-col gap-2;
}
form fieldset,
form .hs-form-field,
form input,
form .hs-input {
@apply w-full!;
}
form fieldset .input {
@apply m-0!;
}
form .form-columns-2 {
@apply flex flex-col gap-4 md:flex-row;
}
.hs-error-msg {
@apply text-boerhaave-red-500;
}
.legal-consent-container {
@apply flex flex-col gap-4;
}
.legal-consent-container .hs-form-booleancheckbox-display > span {
@apply m-0;
}
.hs-button {
@apply btn-primary outline-none! focus-visible:bg-boerhaave-red-600;
}
nav [data-hs-island] {
@apply w-full;
}
.cta-with-form-module .hs-richtext {
@apply text-white;
}
.cta-with-form-module form fieldset {
@apply max-w-none!;
}
.cta-with-form-module .actions:has([type='submit']) {
@apply flex w-full flex-col items-center gap-5 md:w-auto md:flex-row md:items-center;
}
.cta-with-form-module form [type='submit'] {
@apply md:w-fit!;
}