/*============================================================ DESIGN TOKENS Source: Figma "Jillian Michaels – Design <> Dev" Style Guide & Components (node 6001-4897) Extracted: 2026-06-17 Single source of truth for the new brand palette and type scale. Reference these via var(--token) rather than hard-coding values. NOTE: Fonts are served by the Adobe Typekit kit loaded in templates/html.html.twig (use.typekit.net/xqk8lnt.css): - aktiv-grotesk (weights 200–800) - aktiv-grotesk-extended (weights 200–700) ["Aktiv Grotesk Ex"] - aktiv-grotesk-thin (weight 200) Canela Web (design's heading face) is NOT in that kit — Adobe Fonts does not carry it (it's a Commercial Type face). It is self-hosted instead: see assets/css/canela.css (@font-face, license 2606-VITJPB). --font-heading uses it, with Georgia/serif as fallback. ============================================================*/ :root { /* ---------- Brand colors ---------- */ --color-white: #ffffff; --color-grey: #e6e5e1; --color-dark-grey: #828282; --color-midnight: #044e68; --color-slate: #a4bee1; --color-dark-slate: #283e44; --color-black: #111111; --color-periwinkle: #404aa1; --color-electric-lime: #f4ff77; --color-green: #024438; --color-blood-orange: #ff5e00; --color-plum: #4e2848; /* ---------- Surface / UI greys (not part of the 12 brand colors) ---------- */ --color-surface-grey: #f5f5f5; /* light surface for pills/chips — verified in Figma + Webflow */ /* ---------- Font families ---------- */ --font-heading: "Canela Web", Canela, Georgia, "Times New Roman", serif; --font-body: "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif; --font-body-extended: "aktiv-grotesk-extended", "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif; /* ---------- Font weights ---------- */ --fw-thin: 100; /* Canela headings (H1–H4) */ --fw-light: 300; /* Aktiv Grotesk — H6 */ --fw-regular: 400; /* Aktiv Grotesk — Paragraph Large */ --fw-medium: 500; /* Aktiv Grotesk — Paragraph Regular / Small */ --fw-semibold: 600; /* Aktiv Grotesk Extended — H5 / Text Link */ /* ---------- Type scale — desktop (font-size / line-height) ---------- */ --fs-h1: 66px; --lh-h1: 66px; /* 100% */ --fs-h2: 50px; --lh-h2: 60px; /* 120% */ --fs-h3: 40px; --lh-h3: 48px; /* 120% */ --fs-h4: 24px; --lh-h4: 36px; /* 150% */ --fs-h5: 20px; --lh-h5: 28px; /* 140%, uppercase */ --fs-h6: 24px; --lh-h6: 33.6px; /* 140% */ --fs-text-link: 12px; --lh-text-link: 18px; /* 150%, uppercase */ --fs-p-lg: 18px; --lh-p-lg: 27px; /* 150% */ --fs-p: 16px; --lh-p: 24px; /* 150% */ --fs-p-sm: 13px; --lh-p-sm: 19.5px; /* 150% */ } /* ---------- Type scale — mobile (≤750px, matches theme "phablet" bound) ---------- Only the headings differ from desktop; H6, Text Link and the paragraph styles are identical across breakpoints per the design. */ @media (max-width: 750px) { :root { --fs-h1: 46px; --lh-h1: 58.42px; /* 127% */ --fs-h2: 34px; --lh-h2: 40.12px; /* 118% */ --fs-h3: 24px; --lh-h3: 28.8px; /* 120% */ --fs-h4: 24px; --lh-h4: 36px; /* 150% */ --fs-h5: 16px; --lh-h5: 22.4px; /* 140% */ } } /*============================================================ TYPOGRAPHY UTILITIES (opt-in, .jm- prefixed) Compose the tokens above into the named styles from the style guide. Apply to any element, e.g.

. ============================================================*/ .jm-h1, .jm-h2, .jm-h3, .jm-h4 { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-thin); color: var(--color-black); } .jm-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } .jm-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } .jm-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } .jm-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); } .jm-h5 { margin: 0; font-family: var(--font-body-extended); font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); text-transform: uppercase; color: var(--color-black); } .jm-h6 { margin: 0; font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--color-black); } .jm-text-link { font-family: var(--font-body-extended); font-weight: var(--fw-semibold); font-size: var(--fs-text-link); line-height: var(--lh-text-link); text-transform: uppercase; } .jm-p-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); } .jm-p { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-p); line-height: var(--lh-p); } .jm-p-sm { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-p-sm); line-height: var(--lh-p-sm); } /*============================================================ PROSE / RICH TEXT (.jm-prose) Wrap raw WYSIWYG output (blog posts, about, recipes) so its headings/paragraphs/lists/links render in the design language without per-element classes. Apply to the body container:
{{ body|raw }}
============================================================*/ .jm-prose { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); color: var(--color-black); } .jm-prose h1, .jm-prose h2, .jm-prose h3, .jm-prose h4 { font-family: var(--font-heading); font-weight: var(--fw-thin); color: var(--color-black); margin: 1.5em 0 0.4em; } .jm-prose h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); } .jm-prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); } .jm-prose h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); } .jm-prose h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); } /* Smaller subheads default to the uppercase Aktiv label style */ .jm-prose h5, .jm-prose h6 { font-family: var(--font-body-extended); font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); text-transform: uppercase; color: var(--color-black); margin: 1.5em 0 0.4em; } .jm-prose p { margin: 0 0 1.25em; } .jm-prose ul, .jm-prose ol { margin: 0 0 1.25em 1.25em; } .jm-prose li { margin-bottom: 0.5em; } .jm-prose a, .jm-prose a:link, .jm-prose a:visited { color: var(--color-blood-orange); text-decoration: underline; text-underline-offset: 2px; } .jm-prose a:hover, .jm-prose a:focus { color: var(--color-black); } .jm-prose strong, .jm-prose b { font-weight: var(--fw-semibold); } .jm-prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--color-electric-lime); color: var(--color-dark-grey); } .jm-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5em 0; } /* When .jm-prose wraps a full Drupal node (e.g. /about), legacy rules force proxima 16px on .node__content and 20px !important on .field--name-body. Re-assert prose type directly on the text elements (a direct rule on p/li beats the inherited size, so no !important needed). */ .jm-prose .node__content, .jm-prose .node__content p, .jm-prose .node__content li { font-family: var(--font-body); } .jm-prose .node__content p, .jm-prose .node__content li { font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); }