/* Settings */ :root { /* HubSpot DND layout grid */ --fettl--column__gap: 2.13%; --fettl--column__widthMultiplier: 8.333; /* Sections */ --fettl--contentWrapper--narrow__maxWidth: 768px ; --fettl--contentWrapper--medium__maxWidth: 1000px ; --fettl--contentWrapper--wide__maxWidth: 1273px ; --fettl--section--extraSmall__verticalPadding: 60px ; --fettl--section--small__verticalPadding: 80px ; --fettl--section--medium__verticalPadding: 120px ; --fettl--section--large__verticalPadding: 160px ; --fettl--section--extraLarge__verticalPadding: 240px ; /* Default section left/right padding */ --fettl--section--horizontalPadding: 32px ; /* Gap - default gaps that could be easily leveraged in module styles via class names */ --fettl--gap--extraSmall: 16px ; --fettl--gap--small: 24px ; --fettl--gap--medium: 32px ; --fettl--gap--large: 48px ; --fettl--gap--extraLarge: 64px ; /* Density factor (module_density / 100), exposed so module-scale presets can scale with Density even when their base value sits on the section ramp (see --fettl--moduleSpacing--xlarge). */ --fettl--module-factor: 1.0 ; /* Spacing - default spacing values */ --fettl--spacing--4: 4px ; --fettl--spacing--8: 8px ; --fettl--spacing--12: 12px ; --fettl--spacing--16: 16px ; --fettl--spacing--20: 20px ; --fettl--spacing--24: 24px ; --fettl--spacing--32: 32px ; --fettl--spacing--40: 40px ; --fettl--spacing--48: 48px ; --fettl--spacing--56: 56px ; --fettl--spacing--64: 80px ; --fettl--spacing--72: 90px ; --fettl--spacing--80: 100px ; --fettl--spacing--88: 110px ; --fettl--spacing--96: 120px ; --fettl--spacing--104: 130px ; --fettl--spacing--112: 140px ; --fettl--spacing--120: 150px ; --fettl--spacing--128: 160px ; --fettl--spacing--136: 170px ; --fettl--spacing--144: 180px ; --fettl--spacing--152: 190px ; --fettl--spacing--160: 200px ; --fettl--spacing--168: 210px ; --fettl--spacing--176: 220px ; --fettl--spacing--184: 230px ; --fettl--spacing--192: 240px ; /* * Bounded-element size scale. Foundation baseline + per-element * resolved values (avatar / logo / icon). Modules consume the * element-specific tokens; the bare --fettl--size--* tokens are * available for ad-hoc cases that don't fit a named family. */ --fettl--size--xs: 24px ; --fettl--size--sm: 32px ; --fettl--size--md: 100px ; --fettl--size--lg: 128px ; --fettl--size--xl: 256px ; --fettl--avatarSize--xs: 24px ; --fettl--avatarSize--sm: 32px ; --fettl--avatarSize--md: 100px ; --fettl--avatarSize--lg: 128px ; --fettl--avatarSize--xl: 256px ; --fettl--logoSize--xs--height: 24px ; --fettl--logoSize--sm--height: 32px ; --fettl--logoSize--md--height: 100px ; --fettl--logoSize--lg--height: 128px ; --fettl--logoSize--xl--height: 256px ; --fettl--iconSize--xs: 24px ; --fettl--iconSize--sm: 32px ; --fettl--iconSize--md: 100px ; --fettl--iconSize--lg: 128px ; --fettl--iconSize--xl: 256px ; /* * Module-level inner/outer spacing presets used by per-module * "Inner spacing" / "Outer spacing" choice fields. * Aliases over the raw spacing scale so child themes can re-map presets * without rewriting every module's CSS-var generator. */ /* Keep "none" as a length so additive calc() spacing remains valid. */ --fettl--moduleSpacing--none: 0px; --fettl--moduleSpacing--small: var(--fettl--spacing--16); --fettl--moduleSpacing--medium: var(--fettl--spacing--32); --fettl--moduleSpacing--large: var(--fettl--spacing--48); /* xlarge is module-internal spacing, so it must scale with Density — not the section-padding ramp that --fettl--spacing--64 rides. Derive it from the module factor directly so it stays 64px at 100% density and tracks the Density slider (32px–128px), keeping module and section knobs orthogonal. */ --fettl--moduleSpacing--xlarge: calc(64px * var(--fettl--module-factor)); /* Grids */ --default-section-padding: var(--fettl--section--large__verticalPadding) var(--fettl--section--horizontalPadding); --default-section-margin: 0; --default-section-max-width: var(--fettl--contentWrapper--wide__maxWidth); --default-container-padding: 0; --default-container-margin: 0; --default-container-gap: var(--fettl--gap--medium); --default-container-row-gap: var(--fettl--gap--medium); --default-container-column-gap: var(--fettl--gap--medium); --default-table-padding: 0; --default-table-margin: 0; --default-table-row-gap: var(--fettl--gap--medium); --default-table-column-gap: var(--fettl--gap--medium); } /* * Mobile section padding. Re-binds the section vertical-padding tokens below the * 768px breakpoint to their derived mobile values, so `.dnd-section` (and every * preset class) automatically breathes less on phones. Only the section-padding * tokens change; the module-scale spacing ramp is untouched. */ @media (max-width: 767px) { :root { --fettl--section--extraSmall__verticalPadding: 30px ; --fettl--section--small__verticalPadding: 40px ; --fettl--section--medium__verticalPadding: 60px ; --fettl--section--large__verticalPadding: 80px ; --fettl--section--extraLarge__verticalPadding: 120px ; } } :root { /* Text spacing */ --fettl--text--extraSmall__margin: 0 0.75rem; /* 12px */ --fettl--text--small__margin: 0 1.25rem; /* 20px */ --fettl--text__margin: 0 2rem; /* 32px */ --fettl--text--large__margin: 0 2.5rem; /* 40px */ --fettl--text--extraLarge__margin: 0 4rem; /* 64px */ /* Body */ --fettl--baseText__fontSize: 16px ; --fettl--body__font: Roboto, sans-serif; --fettl--body--small__fontSize: 1.000125rem ; --fettl--body__fontSize: 1.125rem ; --fettl--body--large__fontSize: 1.499625rem ; --fettl--body--extraLarge__fontSize: 1.9991249999999998rem ; --fettl--body__fontWeight: 300 ; --fettl--body__fontStyle: normal ; --fettl--body__lineHeight: 1.5 ; --fettl--body__textTransform: none ; --fettl--body__letterSpacing: 0px ; /* Lists */ --fettl--list__font: Roboto, sans-serif; --fettl--list__fontSize: 1.125rem ; --fettl--list__fontWeight: 400 ; --fettl--list__fontStyle: normal ; --fettl--list__lineHeight: 1.55 ; --fettl--list__textTransform: none ; --fettl--list__letterSpacing: 0px ; --fettl--list__markerColor: currentColor; --fettl--list__unorderedMarkerStyle: disc ; --fettl--list__orderedMarkerStyle: decimal ; --fettl--list__marginBlock: var(--fettl--spacing--32); --fettl--list__itemGap: var(--fettl--spacing--8); --fettl--list__paddingInlineStart: var(--fettl--spacing--32); /* Primary links */ --fettl--link--primary__fontColor: #258DC6 ; --fettl--link--primary__textTransform: none ; --fettl--link--primary__letterSpacing: 0px ; --fettl--link--primary__textDecoration: none; --fettl--link--primary__textDecorationColor: transparent; /* Hover state */ --fettl--link--primary__hover--fontColor: #258DC6 ; --fettl--link--primary__hover--textDecoration: underline; --fettl--link--primary__hover--textDecorationColor: #258DC6 ; /* Secondary links */ --fettl--link--secondary__fontColor: #55626c ; --fettl--link--secondary__textTransform: none ; --fettl--link--secondary__letterSpacing: 0px ; --fettl--link--secondary__textDecoration: none; --fettl--link--secondary__textDecorationColor: transparent; /* Hover state */ --fettl--link--secondary__hover--fontColor: #55626c ; --fettl--link--secondary__hover--textDecoration: underline; --fettl--link--secondary__hover--textDecorationColor: #55626c ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --fettl--heading__tablet-modifier: 0.8; --fettl--heading__lineHeight: 1.2 ; --fettl--display1__font: Roboto, sans-serif; --fettl--display1__fontSize: 5.25rem; --fettl--display1__fontWeight: 800; --fettl--display1__textTransform: none; --fettl--display1__letterSpacing: 0px; --fettl--display2__font: Roboto, sans-serif; --fettl--display2__fontSize: 4.75rem; --fettl--display2__fontWeight: 800; --fettl--display2__textTransform: none; --fettl--display2__letterSpacing: 0px; --fettl--h1__font: Roboto, sans-serif; --fettl--h1__fontSize: 2.0rem ; --fettl--h1__fontWeight: 700 ; --fettl--h1__fontStyle: normal ; --fettl--h1__textTransform: none ; --fettl--h1__letterSpacing: 0px ; --fettl--h2__font: Roboto, sans-serif; --fettl--h2__fontSize: 1.625rem ; --fettl--h2__fontWeight: 700 ; --fettl--h2__fontStyle: normal ; --fettl--h2__textTransform: none ; --fettl--h2__letterSpacing: 0px ; --fettl--h3__font: Roboto, sans-serif; --fettl--h3__fontSize: 1.25rem ; --fettl--h3__fontWeight: 700 ; --fettl--h3__fontStyle: normal ; --fettl--h3__textTransform: none ; --fettl--h3__letterSpacing: 0px ; --fettl--h4__font: Roboto, sans-serif; --fettl--h4__fontSize: 1.0rem ; --fettl--h4__fontWeight: 600 ; --fettl--h4__fontStyle: normal ; --fettl--h4__textTransform: none ; --fettl--h4__letterSpacing: 0px ; --fettl--h5__font: Roboto, sans-serif; --fettl--h5__fontSize: 0.875rem ; --fettl--h5__fontWeight: 600 ; --fettl--h5__fontStyle: normal ; --fettl--h5__textTransform: none ; --fettl--h5__letterSpacing: 0px ; --fettl--h6__font: Roboto, sans-serif; --fettl--h6__fontSize: 1.125rem ; --fettl--h6__fontWeight: 600 ; --fettl--h6__fontStyle: normal ; --fettl--h6__textTransform: none ; --fettl--h6__letterSpacing: 0px ; /* Eyebrows */ --fettl--eyebrow__font: Roboto, sans-serif; --fettl--eyebrow__fontSize: 0.875rem ; --fettl--eyebrow__fontWeight: 700 ; --fettl--eyebrow__fontStyle: normal ; --fettl--eyebrow__textTransform: uppercase ; --fettl--eyebrow__letterSpacing: 0px ; /* Quotes */ --fettl--quotes__font: Roboto, sans-serif; --fettl--quotes__fontColor: ; --fettl--quotes__fontSize: 1.125rem ; --fettl--quotes__fontWeight: 300 ; --fettl--quotes__fontStyle: normal ; --fettl--quotes__textTransform: none ; --fettl--quotes__letterSpacing: 0px ; /* Captions */ --fettl--captions__font: Roboto, sans-serif; --fettl--captions__fontSize: 0.75rem ; --fettl--captions__fontWeight: 600 ; --fettl--captions__fontStyle: normal ; --fettl--captions__case: none ; --fettl--captions__letterSpacing: 0px ; /* Images */ --fettl--rteImages__margin: 2rem; /* 32px */ } /* * Mono baseline (DEV-98). Slot intent: * color_1 #FFFFFF page background, lightest surface * color_2 #F5F5F5 muted / elevated surface, light text on dark sections * color_3 #737373 muted text, captions, dividers, disabled states * color_4 #171717 primary text on light / primary surface on dark * color_5 #0A0A0A highest contrast text / darkest surface * * Primary accent ships with a default brand colour (#0D9488 teal) chosen to * read on light, subtle, and dark surfaces. Tertiary and complementary accent * slots stay UNSET at the parent baseline and fall back to text colour * (base color_4 / `--fettl--color--onLight`); child themes populate them to * introduce additional brand colours for sections 3 and 6. */ :root { /* Foundation neutral ramp */ --fettl--color--base--1: #FFFFFF ; --fettl--color--base--2: #F7f7f7 ; --fettl--color--base--3: #737373 ; --fettl--color--base--4: #55626c ; --fettl--color--base--5: #55626c ; /* Semantic tokens */ --fettl--color--white: #FFFFFF ; --fettl--color--black: #55626c ; --fettl--color--primary: #258DC6 ; --fettl--color--complementary: #21B685 ; --fettl--color--tertiary: #7C51A1 ; --fettl--color--onLight: #55626c ; --fettl--color--onDark: #FFFFFF ; --fettl--color--danger: #DE2828 ; --fettl--headings--color: #55626c ; /* * Mode-aware accent variants (foundation for theme modes). * * Primary is always set (parent default), so its variants are always * emitted. Complementary is still conditional — only emitted when the * brand populates that slot. * * `--on-light` / `--on-dark` are the light- and dark-mode variants. A * brand's primary may not contrast on both modes; `--on-dark` mixes with * white so it stays readable on dark surfaces. Brands whose primary works * on both get effectively identical values (color-mix of a mid-tone with * 25% white barely shifts hue). `--contrast--on-light`/`-on-dark` are the * text colours that sit ON the coloured button. * * `--active` is the variant selected by the theme-mode cascade (Phase 5): * at :root it defaults to `--on-light`; the dark-mode block overrides to * `--on-dark`. */ /* * `--contrast--on-light/on-dark` use the `contrast_text` macro above, * which calls HubSpot's native `color_contrast` to WCAG-test white * against the brand colour and falls back to black when white fails. * For the `--on-dark` variant — which is a 25%-lightened mix of the * brand — we feed the lightened colour through HubSpot's native * `color_variant(hex, 25)` (HSL lightening) as the contrast-test * input. `color_variant` is not pixel-identical to `color-mix(...75%, * white)` but is a close enough proxy to decide black vs white for * body text. Both functions are present in HubSpot production and * shimmed in the local renderer for preview parity. * * A progressive-enhancement block at the end of this file swaps to * CSS `contrast-color()` where supported — same logic, browser-native, * auto-reacts to token changes at paint time. */ --fettl--color--primary--on-light: var(--fettl--color--primary); --fettl--color--primary--on-dark: color-mix(in srgb, var(--fettl--color--primary) 75%, var(--fettl--color--white)); --fettl--color--primary--contrast--on-light: var(--fettl--color--black) ; --fettl--color--primary--contrast--on-dark: var(--fettl--color--black) ; --fettl--color--primary--active: var(--fettl--color--primary--on-light); --fettl--color--primary--contrast--active: var(--fettl--color--primary--contrast--on-light); --fettl--color--complementary--on-light: var(--fettl--color--complementary); --fettl--color--complementary--on-dark: color-mix(in srgb, var(--fettl--color--complementary) 75%, var(--fettl--color--white)); --fettl--color--complementary--contrast--on-light: var(--fettl--color--black) ; --fettl--color--complementary--contrast--on-dark: var(--fettl--color--black) ; --fettl--color--complementary--active: var(--fettl--color--complementary--on-light); --fettl--color--complementary--contrast--active: var(--fettl--color--complementary--contrast--on-light); --fettl--color--tertiary--on-light: var(--fettl--color--tertiary); --fettl--color--tertiary--on-dark: color-mix(in srgb, var(--fettl--color--tertiary) 75%, var(--fettl--color--white)); --fettl--color--tertiary--contrast--on-light: var(--fettl--color--white) ; --fettl--color--tertiary--contrast--on-dark: var(--fettl--color--black) ; --fettl--color--tertiary--active: var(--fettl--color--tertiary--on-light); --fettl--color--tertiary--contrast--active: var(--fettl--color--tertiary--contrast--on-light); /* * Overlay tokens. Derived from the brand's black / white slots via color-mix * so overlays (modal scrims, image gradients, hover fills, subtle tints) * follow if a child theme retunes `color_5` or `color_1`. Keep the names * semantic (subtle / soft / matte / scrim / backdrop) — consumers should * reach for the closest-in-intent token, not pick an opacity by hand. */ --fettl--color--overlay--subtle: color-mix(in srgb, var(--fettl--color--black) 5%, transparent); --fettl--color--overlay--soft: color-mix(in srgb, var(--fettl--color--black) 10%, transparent); --fettl--color--overlay--matte: color-mix(in srgb, var(--fettl--color--black) 40%, transparent); --fettl--color--overlay--scrim: color-mix(in srgb, var(--fettl--color--black) 50%, transparent); --fettl--color--overlay--strong: color-mix(in srgb, var(--fettl--color--black) 80%, transparent); --fettl--color--overlay--backdrop: color-mix(in srgb, var(--fettl--color--black) 85%, transparent); --fettl--color--overlay--onDark--subtle: color-mix(in srgb, var(--fettl--color--white) 30%, transparent); --fettl--color--overlay--onDark--strong: color-mix(in srgb, var(--fettl--color--white) 90%, transparent); /* * Semantic surface + muted tokens. * Stubbed against the existing palette so utility modules (RichText, List, * FormContainer) can reference a stable token name. Child themes override * these to retune the muted/surface scheme without touching module CSS. * * `muted` uses color-mix to soften onLight by 40% against the light surface. * Falls back to onLight in browsers without color-mix support. */ --fettl--color--muted: color-mix(in srgb, #55626c 60%, #FFFFFF); --fettl--color--surface--light: #FFFFFF ; --fettl--color--surface--subtle: #F7f7f7 ; --fettl--color--surface--dark: #55626c ; --fettl--color--border--subtle: #F7f7f7 ; } /* * Theme-mode flip — switch `--active` aliases to their `--on-dark` variants * when the site is rendering in dark mode. The button cascade in * `_button.hubl.css` reads `--fettl--color--primary--active` so this swap * propagates automatically to every primary button on the page. * * `theme_mode`: * light → no flip (default :root values win) * dark → :root overrides active → on-dark * user_selector → `html[data-fettl-theme="dark"]` overrides active → on-dark * (client script sets the attribute based on user choice * or `prefers-color-scheme` on first visit) * * Wrapped in a hubl conditional on `accent_colors.primary` / `.complementary` * so we only emit these rules when the corresponding `--active` token * actually exists at :root (otherwise the override would bind to nothing). */ /* * Progressive enhancement — CSS `contrast-color()`. * * Future-proofs the contrast tokens: where the browser ships `contrast-color()` * (Chrome 137+ as of 2025; Safari/Firefox pending), the token is recomputed * by the browser from the live brand-colour value. That means: * * 1. If a downstream stylesheet or child theme changes the computed value * of `--fettl--color--primary`, the contrast text auto-updates — no * rerender of the HubL needed. * 2. The pick uses the same WCAG rules the macro above approximates, but * evaluated at paint time against the actual rendered colour (including * any `color-mix` transforms applied above). * * Where the function isn't supported, the `:root` tokens emitted by the * macro above remain in force — the `@supports` block simply doesn't apply. * Safe, opt-in enhancement. */ @supports (color: contrast-color(red)) { :root { --fettl--color--primary--contrast--on-light: contrast-color(var(--fettl--color--primary--on-light)); --fettl--color--primary--contrast--on-dark: contrast-color(var(--fettl--color--primary--on-dark)); --fettl--color--primary--contrast--active: contrast-color(var(--fettl--color--primary--active)); --fettl--color--complementary--contrast--on-light: contrast-color(var(--fettl--color--complementary--on-light)); --fettl--color--complementary--contrast--on-dark: contrast-color(var(--fettl--color--complementary--on-dark)); --fettl--color--complementary--contrast--active: contrast-color(var(--fettl--color--complementary--active)); --fettl--color--tertiary--contrast--on-light: contrast-color(var(--fettl--color--tertiary--on-light)); --fettl--color--tertiary--contrast--on-dark: contrast-color(var(--fettl--color--tertiary--on-dark)); --fettl--color--tertiary--contrast--active: contrast-color(var(--fettl--color--tertiary--active)); } } :root { /* Button padding resolves through a three-tier var() fallback at the point * of consumption (`.fettl-button`, `.cta-*`): * --fettl--button__padding global field — only defined when the * editor sets Padding x/y (wins everywhere) * --fettl--button__sizePadding per-instance size (standard/large), * emitted inline by ButtonComponent * --fettl--button__densityPadding density-scaled default below * * The global token is emitted ONLY when at least one axis is set, so an * unset global doesn't shadow the size/density fallbacks. (Defining it * unconditionally is what previously made the global field a no-op: a * :root value can't be "skipped" by var() fallback once it exists.) * * Density-scaled default: at density=100 → 12px / 20px (parent default), * 50 → slim (6px / 10px), 200 → chunky (24px / 40px). */ --fettl--button__densityPadding: 12px 20px; --fettl--button__padding: 20px 25px ; --fettl--button__minWidth: unset ; --fettl--button__font: Roboto, sans-serif; --fettl--button__fontSize: 0.875rem ; --fettl--button__fontWeight: 700 ; --fettl--button__fontStyle: normal ; --fettl--button__lineHeight: 1.4 ; /* ---------------------------------------------------------------- * Primary button — surface-aware. * * Colour tokens resolve through the surface cascade: * bg = brand primary (if set), else the surface's own text colour * text = brand primary contrast (if set), else the surface's own bg * * This means a primary button dropped into any surface (section, * card, icon wrapper, whatever) auto-contrasts with that surface — * no per-surface button override required. Brand themes opt in by * setting `accent_colors.primary`; `--fettl--color--primary--active` * is only emitted when the brand field is populated (see * `_colors.hubl.css`), so the var() fallback fires cleanly for * monochrome themes. * * Typography, shape, and border thickness remain theme-field driven * (brand identity, not surface-dependent). * ---------------------------------------------------------------- */ --fettl--button--primary__font: var(--fettl--button__font); --fettl--button--primary__fontSize: var(--fettl--button__fontSize); --fettl--button--primary__fontWeight: var(--fettl--button__fontWeight); --fettl--button--primary__fontStyle: var(--fettl--button__fontStyle); --fettl--button--primary__lineHeight: var(--fettl--button__lineHeight); --fettl--button--primary__backgroundColor: var(--fettl--color--primary--active, var(--fettl--surface__textColor)) ; --fettl--button--primary__textColor: #FFFFFF ; --fettl--button--primary__hover--backgroundColor: color-mix(in srgb, var(--fettl--button--primary__backgroundColor) 88%, var(--fettl--surface__backgroundColor)) ; --fettl--button--primary__hover--textColor: #FFFFFF ; /* Primary button shape */ --fettl--button--primary__borderRadius: var(--fettl--rounded); --fettl--button--primary__active--backgroundColor: color-mix(in srgb, var(--fettl--button--primary__hover--backgroundColor) 80%, var(--fettl--surface__backgroundColor)) ; /* Primary button border */ --fettl--button--primary__borderThickness: 0px ; --fettl--button--primary__hover--borderThickness: 0px ; --fettl--button--primary__borderColor: transparent; --fettl--button--primary__hover--borderColor: transparent; /* ---------------------------------------------------------------- * Secondary button — always ghost against the surface. * * Transparent fill + 1px border in the surface text colour. Looks * like a secondary button on every surface without per-surface * overrides. Brand theme settings control typography + shape, but * the colour treatment is cascade-driven and non-negotiable; this * is the deliberate trade for auto-adapting surface-aware buttons. * ---------------------------------------------------------------- */ --fettl--button--secondary__font: var(--fettl--button__font); --fettl--button--secondary__fontSize: var(--fettl--button__fontSize); --fettl--button--secondary__fontWeight: var(--fettl--button__fontWeight); --fettl--button--secondary__fontStyle: var(--fettl--button__fontStyle); --fettl--button--secondary__lineHeight: var(--fettl--button__lineHeight); --fettl--button--secondary__backgroundColor: var(--fettl--surface__textColor) ; --fettl--button--secondary__hover--backgroundColor: color-mix(in srgb, var(--fettl--surface__textColor) 88%, var(--fettl--surface__backgroundColor)) ; --fettl--button--secondary__textColor: #55626c ; --fettl--button--secondary__borderColor: var(--fettl--surface__textColor) ; --fettl--button--secondary__borderThickness: 1px; --fettl--button--secondary__hover--textColor: #55626c ; --fettl--button--secondary__hover--borderColor: var(--fettl--surface__textColor) ; --fettl--button--secondary__hover--borderThickness: 1px; /* Secondary button shape (from theme field — brand identity). */ --fettl--button--secondary__borderRadius: var(--fettl--rounded); /* Tertiary button font */ --fettl--button--tertiary__font: var(--fettl--button__font); --fettl--button--tertiary__fontSize: var(--fettl--button__fontSize); --fettl--button--tertiary__fontWeight: var(--fettl--button__fontWeight); --fettl--button--tertiary__fontStyle: var(--fettl--button__fontStyle); --fettl--button--tertiary__lineHeight: var(--fettl--button__lineHeight); /* Tertiary button text color */ --fettl--button--tertiary__textColor: #FFFFFF ; --fettl--button--tertiary__hover--textColor: #FFFFFF ; /* Tertiary button shape */ --fettl--button--tertiary__borderRadius: var(--fettl--rounded); /* Tertiary button background color */ --fettl--button--tertiary__backgroundColor: #55626c ; --fettl--button--tertiary__hover--backgroundColor: #55626c ; /* Tertiary button border */ --fettl--button--tertiary__borderThickness: 0px ; --fettl--button--tertiary__hover--borderThickness: 0px ; --fettl--button--tertiary__borderColor: transparent; --fettl--button--tertiary__hover--borderColor: transparent; /* Accent button font */ --fettl--button--accent__font: var(--fettl--button__font); --fettl--button--accent__fontSize: var(--fettl--button__fontSize); --fettl--button--accent__fontWeight: var(--fettl--button__fontWeight); --fettl--button--accent__fontStyle: var(--fettl--button__fontStyle); --fettl--button--accent__lineHeight: var(--fettl--button__lineHeight); /* Accent button text color */ --fettl--button--accent__textColor: #55626c ; --fettl--button--accent__hover--textColor: #55626c ; /* Accent button shape */ --fettl--button--accent__borderRadius: var(--fettl--rounded); /* Accent button background color */ --fettl--button--accent__backgroundColor: transparent; --fettl--button--accent__hover--backgroundColor: transparent; /* Accent button border */ --fettl--button--accent__borderThickness: 0px ; --fettl--button--accent__hover--borderThickness: 0px ; --fettl--button--accent__borderColor: transparent; --fettl--button--accent__hover--borderColor: transparent; /* Outline button font */ --fettl--button--outline__font: var(--fettl--button__font); --fettl--button--outline__fontSize: var(--fettl--button__fontSize); --fettl--button--outline__fontWeight: var(--fettl--button__fontWeight); --fettl--button--outline__fontStyle: var(--fettl--button__fontStyle); --fettl--button--outline__lineHeight: var(--fettl--button__lineHeight); /* Outline button text color */ --fettl--button--outline__textColor: #258DC6 ; --fettl--button--outline__hover--textColor: #FFFFFF ; /* Outline button shape */ --fettl--button--outline__borderRadius: var(--fettl--rounded); /* Outline button background color */ --fettl--button--outline__backgroundColor: transparent; --fettl--button--outline__hover--backgroundColor: #258DC6 ; /* Outline button border */ --fettl--button--outline__borderThickness: 1px ; --fettl--button--outline__hover--borderThickness: 1px ; --fettl--button--outline__borderColor: #258DC6 ; --fettl--button--outline__hover--borderColor: #258DC6 ; } :root { /* Form field background color */ --fettl--formField__backgroundColor: #F7f7f7 ; /* Form field shape */ --fettl--formField__borderRadius: 8px; /* Form field border -- multiple fields to properly handle field visibility for both fill and no fill */ /* Proper usage of variables to achieve "All" or "Bottom" will be within CSS */ --fettl--formField__borderThickness: 0; --fettl--formField__borderColor: transparent; /* Form field text color */ --fettl--formFieldInput__textColor: #55626c ; /* Form field spacing */ --fettl--formField__marginBottom: var(--fettl--spacing--32); /* Form textarea border radius */ --fettl--formFieldTextArea__borderRadius: calc(var(--fettl--formField__borderRadius) * 0.5); /* Form field checkbox/radio */ --fettl--formFieldCheckboxRadio__size: 24px; --fettl--formFieldCheckboxRadio__fillColor: var(--fettl--color--onLight); /* Form field placeholder */ --fettl--formFieldPlaceholder__textColor: #737373 ; /* Form required field color */ --fettl--formRequired__color: var(--fettl--color--danger); /* Form field datepicker icon */ --fettl--formField__datepickerIcon: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); /* Form field select icon */ --fettl--formField__selectIcon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A"); /* Textarea drag icon */ --fettl--formField__dragIcon: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A"); /* Label text */ --fettl--formLabel__textColor: #55626c ; --fettl--formLabel__font: Roboto, sans-serif; --fettl--formLabel__fontSize: 0.875rem ; --fettl--formLabel__fontWeight: 500 ; --fettl--formLabel__textTransform: none ; --fettl--formLabel__letterSpacing: 0px ; --fettl--formLabel__marginBottom: var(--fettl--spacing--8); /* Help text */ --fettl--formHelpText__textColor: var(--fettl--color--muted); /* Form background color */ --fettl--form__backgroundColor: #FFFFFF ; /* Form shape */ --fettl--form__borderRadius: 24px; /* Form border */ --fettl--form__borderThickness: 1px ; --fettl--form__borderColor: #737373 ; /* Form spacing */ --fettl--form__padding: var(--fettl--spacing--48); /* * FormContainer module tokens — surface card that wraps the embedded * HubSpot form. Stubbed against existing colour/spacing/border tokens so * child themes can rebrand the form container without touching module CSS. */ --fettl--formContainer__backgroundColor: var(--fettl--color--surface--light); --fettl--formContainer__textColor: var(--fettl--color--onLight); --fettl--formContainer__linkColor: var(--fettl--color--primary); --fettl--formContainer__borderRadius: var(--fettl--rounded--large); --fettl--formContainer__paddingBlock: var(--fettl--spacing--56, 56px); --fettl--formContainer__paddingInline: var(--fettl--spacing--48, 48px); --fettl--formContainer__paddingBlock--mobile: var(--fettl--spacing--32, 32px); --fettl--formContainer__paddingInline--mobile: var(--fettl--spacing--24, 24px); --fettl--formContainer__gap: var(--fettl--spacing--32, 32px); --fettl--formContainer__columnGap: 10%; --fettl--formContainer__columnWidth: 45%; /* CSS variables for new forms */ /* Global vars */ --hsf-global__font-family: var(--fettl--formLabel__font); --hsf-global__font-size: var(--fettl--formLabel__fontSize); --hsf-global__color: var(--fettl--formLabel__textColor); --hsf-global-error__color: var(--fettl--formRequired__color); /* Form */ --hsf-background__background-color: var(--fettl--form__backgroundColor); --hsf-background__padding: var(--fettl--form__padding); --hsf-background__border-style: solid; --hsf-background__border-color: var(--fettl--form__borderColor); --hsf-background__border-radius: var(--fettl--form__borderRadius); --hsf-background__border-width: var(--fettl--form__borderThickness); /* Content */ --hsf-heading__font-family: var(--hsf-global__font-family); --hsf-heading__color: var(--hsf-global__color); --hsf-heading__text-shadow: none; --hsf-richtext__font-family: var(--hsf-global__font-family); --hsf-richtext__font-size: var(--hsf-global__font-size); --hsf-richtext__color: var(--hsf-global__color); /* Labels */ --hsf-field-label__font-family: var(--hsf-global__font-family); --hsf-field-label__font-size: var(--hsf-global__font-size); --hsf-field-label__font-weight: var(--fettl--formLabel__fontWeight); --hsf-field-label__letter-spacing: var(--fettl--formLabel__letterSpacing); --hsf-field-label__text-transform: var(--fettl--formLabel__textTransform); --hsf-field-label__color: var(--hsf-global__color); --hsf-field-label-requiredindicator__color: var(--hsf-global-error__color); --hsf-module__vertical-spacing: var(--fettl--formLabel__marginBottom); /* Help text */ --hsf-field-description__font-family: var(--hsf-global__color); --hsf-field-description__color: var(--fettl--formHelpText__textColor); /* Errors */ --hsf-erroralert__font-family: var(--fettl--formLabel__font); --hsf-erroralert__color: var(--hsf-global-error__color); /* Field footer */ --hsf-field-footer__font-family: var(--hsf-field-description__font-family); --hsf-field-footer__color: var(--hsf-field-description__color); /* Field */ --hsf-field-input__font-family: var(--hsf-global__font-family); --hsf-field-input__background-color: var(--fettl--formField__backgroundColor); --hsf-field-input__placeholder-color: var(--fettl--formFieldPlaceholder__textColor); --hsf-field-input__border-color: var(--fettl--formField__borderColor); --hsf-field-input__border-width: 0; ; --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: var(--fettl--formField__borderRadius); --hsf-field-input__padding: var(--fettl--spacing--16) var(--fettl--spacing--12); --hsf-field-input__color: var(--fettl--formFieldInput__textColor); --hsf-row__vertical-spacing: var(--fettl--formField__marginBottom); --hsf-row__horizontal-spacing: var(--fettl--spacing--32); /* Textarea */ --hsf-field-textarea__font-family: var(--hsf-field-input__font-family); --hsf-field-textarea__color: var(--hsf-field-input__color); --hsf-field-textarea__background-color: var(--hsf-field-input__background-color); --hsf-field-textarea__border-color: var(--hsf-field-input__border-color); --hsf-field-textarea__border-style: var(--hsf-field-input__border-style); --hsf-field-textarea__border-radius: var(--fettl--formFieldTextArea__borderRadius); --hsf-field-textarea__padding: var(--hsf-field-input__padding); /* Checkbox */ --hsf-field-checkbox__padding: calc(var(--fettl--formFieldCheckboxRadio__size) / 2); --hsf-field-checkbox__background-color: var(--fettl--color--white); --hsf-field-checkbox__color: var(--fettl--formFieldCheckboxRadio__fillColor); --hsf-field-checkbox__border-color: var(--fettl--color--border--subtle); --hsf-field-checkbox__border-width: 1px 1px 1px 1px; --hsf-field-checkbox__border-style: var(--hsf-field-input__border-style); /* Radio */ --hsf-field-radio__padding: calc(var(--fettl--formFieldCheckboxRadio__size) / 2); --hsf-field-radio__background-color: var(--fettl--color--white); --hsf-field-radio__color: var(--fettl--formFieldCheckboxRadio__fillColor); --hsf-field-radio__border-color: var(--hsf-field-input__border-color); --hsf-field-radio__border-width: 1px 1px 1px 1px; --hsf-field-radio__border-style: var(--hsf-field-input__border-style); /* Progress bar CSS vars: - --hsf-progressbar__font-family - --hsf-progressbar__font-family - --hsf-progressbar__font-size - --hsf-progressbar__color - --hsf-progressbar__background-color - --hsf-progressbar__background - --hsf-progressbar__border-color - --hsf-progressbar__border-style - --hsf-progressbar__border-width */ /* Button */ --hsf-button__width: 100%; --hsf-button__font-family: var(--fettl--button--primary__font); --hsf-button__font-size: var(--fettl--button--primary__fontSize); --hsf-button__font-weight: var(--fettl--button--primary__fontWeight); --hsf-button__letter-spacing: var(--fettl--button--primary__letterSpacing); --hsf-button__text-transform: var(--fettl--button--primary__textTransform); --hsf-button__color: var(--fettl--button--primary__textColor); --hsf-button__background-color: var(--fettl--button--primary__backgroundColor); --hsf-button__background-image: none; --hsf-button__border-radius: var(--fettl--button--primary__borderRadius); --hsf-button__border-width: var(--fettl--button--primary__borderThickness); --hsf-button__border-style: solid; --hsf-button__border-color: var(--fettl--button--primary__borderColor); --hsf-button__padding: var(--fettl--spacing--20) var(--fettl--spacing--24); --hsf-button__box-shadow: none; --hsf-button--hover__color: var(--fettl--button--primary__hover--textColor); --hsf-button--hover__background-color: var(--fettl--button--primary__hover--backgroundColor); --hsf-button--hover__border-color: var(--fettl--button--primary__hover--borderColor); --hsf-button--focus__color: var(--fettl--button--primary__hover--textColor); --hsf-button--focus__background-color: var(--fettl--button--primary__hover--backgroundColor); --hsf-button--focus__border-color: var(--fettl--button--primary__hover--borderColor); } @media (max-width: 600px) { :root { --fettl--form__padding: var(--fettl--spacing--24); } .hsfc-PhoneInput__FlagAndCaret { --hsf-field-input__padding: var(--fettl--spacing--20) var(--fettl--spacing--16); } } :root { /* * Global card shape. Drives every card variant (Card, BentoGrid, * EventCards, HubDbCards, BlogCard) via `--fettl--card__borderRadius`. * Child themes that want squared cards override `--fettl--card__borderRadius` * to `0` and `--fettl--card__iconBorderRadius` to `0`. */ --fettl--card__borderRadius: var(--fettl--rounded--extra-large, 32px); --fettl--card__iconBorderRadius: var(--fettl--rounded--large, 24px); /* Card border thickness — hairline by default. Override per-child-theme. */ --fettl--card__borderThickness: 1px; /* * Card grid sizing tokens. Drive the auto-fit minimum column width used by * the Card module so child themes can retune card density without editing * module source. */ --fettl--card__gridMinWidth: 250px; --fettl--card__gridMinWidth--compact: 223px; --fettl--card__imageMaxWidth: 250px; } :root { /* ------------------------------------------------------------------ * Canvas — page default. * ------------------------------------------------------------------ */ --fettl--surface--canvas__backgroundColor: #FFFFFF ; --fettl--surface--canvas__textColor: #55626c ; --fettl--surface--canvas__accentColor: #258DC6; --fettl--surface--canvas__mutedColor: #737373 ; /* Caption (eyebrow et al.) colour. On neutral light surfaces the muted tone reads fine, so caption tracks muted. Chromatic surfaces override this to their text colour — see the accent/primary/complementary blocks. */ --fettl--surface--canvas__captionColor: var(--fettl--surface--canvas__mutedColor); --fettl--surface--canvas__borderColor: color-mix(in srgb, #55626c 14%, transparent); --fettl--surface--canvas--link__fontColor: #258DC6 ; --fettl--surface--canvas--link__hover--fontColor: #258DC6 ; --fettl--surface--canvas--link__textDecoration: none; --fettl--surface--canvas--link__textDecorationColor: transparent; --fettl--surface--canvas--link__hover--textDecoration: underline; --fettl--surface--canvas--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Subtle — rhythm-break / lifted. * ------------------------------------------------------------------ */ --fettl--surface--subtle__backgroundColor: #F7f7f7 ; --fettl--surface--subtle__textColor: #55626c ; --fettl--surface--subtle__accentColor: #258DC6; --fettl--surface--subtle__mutedColor: #737373 ; --fettl--surface--subtle__captionColor: var(--fettl--surface--subtle__mutedColor); --fettl--surface--subtle__borderColor: color-mix(in srgb, #55626c 14%, transparent); --fettl--surface--subtle--link__fontColor: #258DC6 ; --fettl--surface--subtle--link__hover--fontColor: #258DC6 ; --fettl--surface--subtle--link__textDecoration: none; --fettl--surface--subtle--link__textDecorationColor: transparent; --fettl--surface--subtle--link__hover--textDecoration: underline; --fettl--surface--subtle--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Accent — brand-tinted highlight. * * Three-tier priority chain on the background: * Tertiary set → dedicated third-brand surface (preferred). * Tertiary unset, complementary set → fall back to second-brand colour. * Both unset → soft tint of primary on canvas (subtle highlight, the * single-brand baseline). * * When the chain derives the background, text/accent also re-route * through the contrast tokens so contrast stays guaranteed. * ------------------------------------------------------------------ */ --fettl--surface--accent__backgroundColor: #7C51A1 ; --fettl--surface--accent__textColor: var(--fettl--color--tertiary--contrast--on-light); --fettl--surface--accent__accentColor: var(--fettl--color--tertiary--contrast--on-light); --fettl--surface--accent__mutedColor: #737373 ; /* Caption is a muted tone derived from the surface's own text + background, NOT the full text colour and NOT the fixed muted token. The fixed token lands dark and muddy on a chromatic surface; full text colour reads too hot. Mixing 70% text into the background tracks the contrast direction — a lighter muted tone on dark surfaces, a darker muted tone on light ones — so the eyebrow always reads as muted yet legible. Same recipe as emphasis. */ --fettl--surface--accent__captionColor: color-mix(in srgb, var(--fettl--surface--accent__textColor) 70%, var(--fettl--surface--accent__backgroundColor)); --fettl--surface--accent__borderColor: color-mix(in srgb, var(--fettl--surface--accent__textColor) 14%, transparent); --fettl--surface--accent--link__fontColor: #258DC6 ; --fettl--surface--accent--link__hover--fontColor: #258DC6 ; --fettl--surface--accent--link__textDecoration: none; --fettl--surface--accent--link__textDecorationColor: transparent; --fettl--surface--accent--link__hover--textDecoration: underline; --fettl--surface--accent--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Emphasis — inverse / high-contrast standout. * * Muted text auto-derives a lighter tone from this surface's text and * background when the muted field is at the foundation default (color_3). * Caption colour against a dark bg is unreadable at color_3 — auto-mix * gives a usable default; explicit overrides win. * ------------------------------------------------------------------ */ --fettl--surface--emphasis__backgroundColor: #55626c ; --fettl--surface--emphasis__textColor: #F7f7f7 ; --fettl--surface--emphasis__accentColor: #21B685; --fettl--surface--emphasis__mutedColor: color-mix(in srgb, #F7f7f7 70%, #55626c); /* Emphasis muted is a light-on-dark tone that already reads, so caption keeps tracking muted here. */ --fettl--surface--emphasis__captionColor: var(--fettl--surface--emphasis__mutedColor); --fettl--surface--emphasis__borderColor: color-mix(in srgb, #F7f7f7 18%, transparent); --fettl--surface--emphasis--link__fontColor: #258DC6 ; --fettl--surface--emphasis--link__hover--fontColor: #258DC6 ; --fettl--surface--emphasis--link__textDecoration: none; --fettl--surface--emphasis--link__textDecorationColor: transparent; --fettl--surface--emphasis--link__hover--textDecoration: underline; --fettl--surface--emphasis--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Primary — brand-primary surface. * * Text colour routes through `--fettl--color--primary--contrast--on-light` * so it auto-picks black/white based on primary's luminance. Keeps body * copy readable regardless of brand hue. * ------------------------------------------------------------------ */ --fettl--surface--primary__backgroundColor: #258DC6 ; --fettl--surface--primary__textColor: var(--fettl--color--primary--contrast--on-light); --fettl--surface--primary__accentColor: var(--fettl--color--primary--contrast--on-light); --fettl--surface--primary__mutedColor: #F7f7f7 ; /* Caption is a muted tone derived from text + background — see the accent surface. */ --fettl--surface--primary__captionColor: color-mix(in srgb, var(--fettl--surface--primary__textColor) 70%, var(--fettl--surface--primary__backgroundColor)); --fettl--surface--primary__borderColor: color-mix(in srgb, var(--fettl--surface--primary__textColor) 18%, transparent); --fettl--surface--primary--link__fontColor: #258DC6 ; --fettl--surface--primary--link__hover--fontColor: #258DC6 ; --fettl--surface--primary--link__textDecoration: none; --fettl--surface--primary--link__textDecorationColor: transparent; --fettl--surface--primary--link__hover--textDecoration: underline; --fettl--surface--primary--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Complementary — second brand surface. * * Complementary set → full second-brand surface, text routes through * the complementary contrast token. * Complementary unset → softened dark panel (85% color_4 + 15% canvas). * Distinct from Emphasis's full color_4 so the two slots don't collapse * on single-brand themes. * ------------------------------------------------------------------ */ --fettl--surface--complementary__backgroundColor: #21B685 ; --fettl--surface--complementary__textColor: var(--fettl--color--complementary--contrast--on-light); --fettl--surface--complementary__accentColor: var(--fettl--color--complementary--contrast--on-light); --fettl--surface--complementary__mutedColor: #F7f7f7 ; /* Caption is a muted tone derived from text + background — see the accent surface. */ --fettl--surface--complementary__captionColor: color-mix(in srgb, var(--fettl--surface--complementary__textColor) 70%, var(--fettl--surface--complementary__backgroundColor)); --fettl--surface--complementary__borderColor: color-mix(in srgb, var(--fettl--surface--complementary__textColor) 18%, transparent); --fettl--surface--complementary--link__fontColor: #258DC6 ; --fettl--surface--complementary--link__hover--fontColor: #258DC6 ; --fettl--surface--complementary--link__textDecoration: none; --fettl--surface--complementary--link__textDecorationColor: transparent; --fettl--surface--complementary--link__hover--textDecoration: underline; --fettl--surface--complementary--link__hover--textDecorationColor: #258DC6 ; /* ------------------------------------------------------------------ * Adaptive primary-button tokens for the Primary surface. * * The Primary surface is backed by brand primary, so the default * primary-button fill (also brand primary) collides with it and the button * disappears into the band. These named tokens hold the resolved, * collision-free values — complementary if a second brand colour exists, * otherwise ink (base-5) for the highest value contrast against a saturated * surface. * * Computed once here so all three consumers can alias them: the * `[data-fettl-surface="primary"]` cascade scope below, and the * `section-extras` `:has()` rebind. The latter is why these are named * rather than inlined at the scope — `section-extras` paints the surface on * the `.dnd-section` (an ancestor of sibling buttons), whereas the cascade * scope's selector only matches the `[data-fettl-surface]` element itself. A * primary button dropped into a section-extras-painted band is NOT a * descendant of that element, so without the propagated alias it keeps the * :root brand-primary fill and renders primary-on-primary. * * Explicit per-state brand fill overrides still win via btn_override_or_cascade. * ------------------------------------------------------------------ */ --fettl--surface--primary--btnPrimary__bg: var(--fettl--color--complementary--active, var(--fettl--color--base--5)) ; --fettl--surface--primary--btnPrimary__text: #FFFFFF ; --fettl--surface--primary--btnPrimary__hoverBg: color-mix(in srgb, var(--fettl--surface--primary--btnPrimary__bg) 88%, var(--fettl--surface--primary__backgroundColor)) ; --fettl--surface--primary--btnPrimary__hoverText: #FFFFFF ; --fettl--surface--primary--btnPrimary__activeBg: color-mix(in srgb, var(--fettl--surface--primary--btnPrimary__hoverBg) 80%, var(--fettl--surface--primary__backgroundColor)); } /* --------------------------------------------------------------------------- * Surface-aware token cascade. * * Each `[data-fettl-surface=""]` scope re-binds `--fettl--surface__*` so * descendants resolve their colour-dependent tokens against the active * surface. The :root default tracks Canvas; everything else overrides * downward. * * Modules read `--fettl--surface__*`, never `--fettl--surface--__*` * directly — that's the abstraction layer that lets this cascade re-bind * without touching downstream module CSS. * * `--fettl--surface__subtleSurfaceColor` is the "lifted card inside this * surface" colour — Subtle on Canvas, slightly-lifted dark on Emphasis, etc. * It's derived from the surface's own text colour to keep contrast intact * across both light and dark surfaces. * ------------------------------------------------------------------------ */ :root, [data-fettl-surface="canvas"] { --fettl--surface__backgroundColor: var(--fettl--surface--canvas__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--canvas__textColor); --fettl--surface__accentColor: var(--fettl--surface--canvas__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--canvas__mutedColor); --fettl--surface__captionColor: var(--fettl--surface--canvas__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--canvas__mutedColor); --fettl--surface__subtleSurfaceColor: var(--fettl--surface--subtle__backgroundColor); --fettl--surface__borderColor: var(--fettl--surface--canvas__borderColor); --fettl--surface__linkColor: var(--fettl--surface--canvas--link__fontColor); --fettl--surface__linkHoverColor: var(--fettl--surface--canvas--link__hover--fontColor); --fettl--surface__linkDecoration: var(--fettl--surface--canvas--link__textDecoration); --fettl--surface__linkDecorationColor: var(--fettl--surface--canvas--link__textDecorationColor); --fettl--surface__linkHoverDecoration: var(--fettl--surface--canvas--link__hover--textDecoration); --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--canvas--link__hover--textDecorationColor); --fettl--link--primary__fontColor: var(--fettl--surface--canvas--link__fontColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--canvas--link__hover--fontColor); --fettl--link--secondary__fontColor: var(--fettl--surface--canvas--link__fontColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--canvas--link__hover--fontColor); } [data-fettl-surface="subtle"] { --fettl--surface__backgroundColor: var(--fettl--surface--subtle__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--subtle__textColor); --fettl--surface__accentColor: var(--fettl--surface--subtle__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--subtle__mutedColor); --fettl--surface__captionColor: var(--fettl--surface--subtle__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--subtle__mutedColor); --fettl--surface__subtleSurfaceColor: color-mix(in srgb, var(--fettl--surface--subtle__textColor) 8%, var(--fettl--surface--subtle__backgroundColor)); --fettl--surface__borderColor: var(--fettl--surface--subtle__borderColor); --fettl--surface__linkColor: var(--fettl--surface--subtle--link__fontColor); --fettl--surface__linkHoverColor: var(--fettl--surface--subtle--link__hover--fontColor); --fettl--surface__linkDecoration: var(--fettl--surface--subtle--link__textDecoration); --fettl--surface__linkDecorationColor: var(--fettl--surface--subtle--link__textDecorationColor); --fettl--surface__linkHoverDecoration: var(--fettl--surface--subtle--link__hover--textDecoration); --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--subtle--link__hover--textDecorationColor); --fettl--link--primary__fontColor: var(--fettl--surface--subtle--link__fontColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--subtle--link__hover--fontColor); --fettl--link--secondary__fontColor: var(--fettl--surface--subtle--link__fontColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--subtle--link__hover--fontColor); color: var(--fettl--surface__textColor); } [data-fettl-surface="accent"] { --fettl--surface__backgroundColor: var(--fettl--surface--accent__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--accent__textColor); --fettl--surface__accentColor: var(--fettl--surface--accent__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--accent__mutedColor); /* Caption tracks text colour on chromatic surfaces — see the token definition. Child themes can re-declare `--fettl--surface__captionColor`. */ --fettl--surface__captionColor: var(--fettl--surface--accent__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--accent__mutedColor); --fettl--surface__subtleSurfaceColor: color-mix(in srgb, var(--fettl--surface--accent__textColor) 8%, var(--fettl--surface--accent__backgroundColor)); --fettl--surface__borderColor: var(--fettl--surface--accent__borderColor); /* * Mono-baseline link guard. Accent often resolves to a dark/coloured * background derived from tertiary/complementary; the field's link * palette inherits primary_links which defaults to near-black — invisible * on a coloured surface. Fall back to the surface's own text colour so * link contrast always tracks text contrast. A child theme can win by * re-declaring `--fettl--surface__linkColor` in its own selector. */ --fettl--surface__linkColor: var(--fettl--surface--accent__textColor); --fettl--surface__linkHoverColor: var(--fettl--surface--accent__textColor); --fettl--surface__linkDecoration: underline; --fettl--surface__linkDecorationColor: var(--fettl--surface--accent__textColor); --fettl--surface__linkHoverDecoration: underline; --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--accent__textColor); --fettl--link--primary__fontColor: var(--fettl--surface--accent__textColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--accent__textColor); --fettl--link--secondary__fontColor: var(--fettl--surface--accent__textColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--accent__textColor); color: var(--fettl--surface__textColor); } [data-fettl-surface="emphasis"] { --fettl--surface__backgroundColor: var(--fettl--surface--emphasis__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--emphasis__textColor); --fettl--surface__accentColor: var(--fettl--surface--emphasis__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--emphasis__mutedColor); --fettl--surface__captionColor: var(--fettl--surface--emphasis__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--emphasis__mutedColor); --fettl--surface__subtleSurfaceColor: color-mix(in srgb, var(--fettl--surface--emphasis__textColor) 8%, var(--fettl--surface--emphasis__backgroundColor)); --fettl--surface__borderColor: var(--fettl--surface--emphasis__borderColor); /* Mono-baseline link guard — see accent surface comment. */ --fettl--surface__linkColor: var(--fettl--surface--emphasis__textColor); --fettl--surface__linkHoverColor: var(--fettl--surface--emphasis__textColor); --fettl--surface__linkDecoration: underline; --fettl--surface__linkDecorationColor: var(--fettl--surface--emphasis__textColor); --fettl--surface__linkHoverDecoration: underline; --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--emphasis__textColor); --fettl--link--primary__fontColor: var(--fettl--surface--emphasis__textColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--emphasis__textColor); --fettl--link--secondary__fontColor: var(--fettl--surface--emphasis__textColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--emphasis__textColor); color: var(--fettl--surface__textColor); } [data-fettl-surface="primary"] { --fettl--surface__backgroundColor: var(--fettl--surface--primary__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--primary__textColor); --fettl--surface__accentColor: var(--fettl--surface--primary__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--primary__mutedColor); --fettl--surface__captionColor: var(--fettl--surface--primary__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--primary__mutedColor); --fettl--surface__subtleSurfaceColor: color-mix(in srgb, var(--fettl--surface--primary__textColor) 8%, var(--fettl--surface--primary__backgroundColor)); --fettl--surface__borderColor: var(--fettl--surface--primary__borderColor); /* Mono-baseline link guard — see accent surface comment. */ --fettl--surface__linkColor: var(--fettl--surface--primary__textColor); --fettl--surface__linkHoverColor: var(--fettl--surface--primary__textColor); --fettl--surface__linkDecoration: underline; --fettl--surface__linkDecorationColor: var(--fettl--surface--primary__textColor); --fettl--surface__linkHoverDecoration: underline; --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--primary__textColor); --fettl--link--primary__fontColor: var(--fettl--surface--primary__textColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--primary__textColor); --fettl--link--secondary__fontColor: var(--fettl--surface--primary__textColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--primary__textColor); color: var(--fettl--surface__textColor); } [data-fettl-surface="complementary"] { --fettl--surface__backgroundColor: var(--fettl--surface--complementary__backgroundColor); --fettl--surface__textColor: var(--fettl--surface--complementary__textColor); --fettl--surface__accentColor: var(--fettl--surface--complementary__accentColor); --fettl--surface__mutedColor: var(--fettl--surface--complementary__mutedColor); --fettl--surface__captionColor: var(--fettl--surface--complementary__captionColor); --fettl--surface__mutedTextColor: var(--fettl--surface--complementary__mutedColor); --fettl--surface__subtleSurfaceColor: color-mix(in srgb, var(--fettl--surface--complementary__textColor) 8%, var(--fettl--surface--complementary__backgroundColor)); --fettl--surface__borderColor: var(--fettl--surface--complementary__borderColor); /* Mono-baseline link guard — see accent surface comment. */ --fettl--surface__linkColor: var(--fettl--surface--complementary__textColor); --fettl--surface__linkHoverColor: var(--fettl--surface--complementary__textColor); --fettl--surface__linkDecoration: underline; --fettl--surface__linkDecorationColor: var(--fettl--surface--complementary__textColor); --fettl--surface__linkHoverDecoration: underline; --fettl--surface__linkHoverDecorationColor: var(--fettl--surface--complementary__textColor); --fettl--link--primary__fontColor: var(--fettl--surface--complementary__textColor); --fettl--link--primary__hover--fontColor: var(--fettl--surface--complementary__textColor); --fettl--link--secondary__fontColor: var(--fettl--surface--complementary__textColor); --fettl--link--secondary__hover--fontColor: var(--fettl--surface--complementary__textColor); color: var(--fettl--surface__textColor); } /* --------------------------------------------------------------------------- * Surface-aware button token rebind. * * Custom properties substitute their `var()` references at the scope where * they are declared — the computed value then inherits as a literal. * Declaring surface-dependent button tokens at `:root` in `_button.hubl.css` * alone therefore bakes in canvas's surface values everywhere; descendants * of a different surface get the canvas literal, not their own surface * colours. * * Redeclare each surface-dependent button token at every surface scope so * the `var(--fettl--surface__*)` references resolve against that scope's own * tokens. * ------------------------------------------------------------------------ */ :root, [data-fettl-surface="canvas"], [data-fettl-surface="subtle"], [data-fettl-surface="accent"], [data-fettl-surface="emphasis"], [data-fettl-surface="primary"], [data-fettl-surface="complementary"] { --fettl--button--primary__backgroundColor: var(--fettl--color--primary--active, var(--fettl--surface__textColor)) ; --fettl--button--primary__textColor: #FFFFFF ; --fettl--button--primary__hover--backgroundColor: color-mix(in srgb, var(--fettl--button--primary__backgroundColor) 88%, var(--fettl--surface__backgroundColor)) ; --fettl--button--primary__hover--textColor: #FFFFFF ; --fettl--button--primary__active--backgroundColor: color-mix(in srgb, var(--fettl--button--primary__hover--backgroundColor) 80%, var(--fettl--surface__backgroundColor)); --fettl--button--secondary__backgroundColor: var(--fettl--surface__textColor); --fettl--button--secondary__hover--backgroundColor: color-mix(in srgb, var(--fettl--surface__textColor) 88%, var(--fettl--surface__backgroundColor)); } @supports (color: color-mix(in lch, red, blue)) { :root, [data-fettl-surface="canvas"], [data-fettl-surface="subtle"], [data-fettl-surface="accent"], [data-fettl-surface="emphasis"], [data-fettl-surface="primary"], [data-fettl-surface="complementary"] { --fettl--button--secondary__hover--backgroundColor: color-mix(in srgb, var(--fettl--surface__textColor) 8%, transparent); } } /* --------------------------------------------------------------------------- * Primary-button collision override on the brand-primary surface. * * Aliases the named `--fettl--surface--primary--btnPrimary__*` tokens (computed * once at :root above) onto the active button tokens for descendants of a * `[data-fettl-surface="primary"]` element. `section-extras` aliases the same * named tokens onto the `.dnd-section` so sibling buttons in a section-extras- * painted band get the override too — see its `:has()` rebind. * ------------------------------------------------------------------------ */ [data-fettl-surface="primary"] { --fettl--button--primary__backgroundColor: var(--fettl--surface--primary--btnPrimary__bg); --fettl--button--primary__textColor: var(--fettl--surface--primary--btnPrimary__text); --fettl--button--primary__hover--backgroundColor: var(--fettl--surface--primary--btnPrimary__hoverBg); --fettl--button--primary__hover--textColor: var(--fettl--surface--primary--btnPrimary__hoverText); --fettl--button--primary__active--backgroundColor: var(--fettl--surface--primary--btnPrimary__activeBg); } /* --------------------------------------------------------------------------- * Body-level surface switching (runtime scheme flip). * * The renderer's preview toggles (theme-overlay + field-editor clients) set * `data-fettl-surface` on to flip the active scheme without rebuilding * the page. These blocks extend the generic `[data-fettl-surface]` cascade * above with body-specific CSS properties (`background-color`, `color`) * and blockquote / caption derivation tokens. * * Blockquote tokens derive from the surface's own colours — no per-surface * blockquote fields, just a single derivation recipe applied at every * surface scope. * ------------------------------------------------------------------------ */ body[data-fettl-surface="canvas"] { background-color: var(--fettl--surface--canvas__backgroundColor); color: var(--fettl--surface--canvas__textColor); --fettl--blockquote__backgroundColor: var(--fettl--surface--subtle__backgroundColor); --fettl--blockquote__fontColor: var(--fettl--surface--canvas__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--canvas__accentColor); --fettl--captions__fontColor: var(--fettl--surface--canvas__mutedColor); } body[data-fettl-surface="subtle"] { background-color: var(--fettl--surface--subtle__backgroundColor); color: var(--fettl--surface--subtle__textColor); --fettl--blockquote__backgroundColor: color-mix(in srgb, var(--fettl--surface--subtle__textColor) 8%, var(--fettl--surface--subtle__backgroundColor)); --fettl--blockquote__fontColor: var(--fettl--surface--subtle__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--subtle__accentColor); --fettl--captions__fontColor: var(--fettl--surface--subtle__mutedColor); } body[data-fettl-surface="accent"] { background-color: var(--fettl--surface--accent__backgroundColor); color: var(--fettl--surface--accent__textColor); --fettl--blockquote__backgroundColor: color-mix(in srgb, var(--fettl--surface--accent__textColor) 8%, var(--fettl--surface--accent__backgroundColor)); --fettl--blockquote__fontColor: var(--fettl--surface--accent__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--accent__accentColor); --fettl--captions__fontColor: var(--fettl--surface--accent__mutedColor); } body[data-fettl-surface="emphasis"] { background-color: var(--fettl--surface--emphasis__backgroundColor); color: var(--fettl--surface--emphasis__textColor); --fettl--blockquote__backgroundColor: color-mix(in srgb, var(--fettl--surface--emphasis__textColor) 8%, var(--fettl--surface--emphasis__backgroundColor)); --fettl--blockquote__fontColor: var(--fettl--surface--emphasis__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--emphasis__accentColor); --fettl--captions__fontColor: var(--fettl--surface--emphasis__mutedColor); } body[data-fettl-surface="primary"] { background-color: var(--fettl--surface--primary__backgroundColor); color: var(--fettl--surface--primary__textColor); --fettl--blockquote__backgroundColor: color-mix(in srgb, var(--fettl--surface--primary__textColor) 8%, var(--fettl--surface--primary__backgroundColor)); --fettl--blockquote__fontColor: var(--fettl--surface--primary__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--primary__accentColor); --fettl--captions__fontColor: var(--fettl--surface--primary__mutedColor); } body[data-fettl-surface="complementary"] { background-color: var(--fettl--surface--complementary__backgroundColor); color: var(--fettl--surface--complementary__textColor); --fettl--blockquote__backgroundColor: color-mix(in srgb, var(--fettl--surface--complementary__textColor) 8%, var(--fettl--surface--complementary__backgroundColor)); --fettl--blockquote__fontColor: var(--fettl--surface--complementary__textColor); --fettl--blockquote__accentColor: var(--fettl--surface--complementary__accentColor); --fettl--captions__fontColor: var(--fettl--surface--complementary__mutedColor); } /* =========================================================================== * THEME MODES — dark palette overrides * =========================================================================== * * When the site renders in dark mode (either `theme_mode = "dark"` site-wide * or `user_selector` with the visitor opting in), each surface re-emits * with a dark palette computed from the base ramp + brand accents: * * canvas → color_5 bg, color_2 text (inverse of light) * subtle → slightly-lifted near-black, color_2 text * accent → priority chain on `--on-dark` variants * emphasis → INVERTED: becomes LIGHT in dark mode so it still * stands out as the high-contrast slot * primary → --on-dark variant of brand primary * complementary → --on-dark variant of brand complementary * * Derivation-only — no extra fields. Brands that need per-field dark * overrides can retune the base ramp (cascades through all surfaces) * or author a brand stylesheet. * ======================================================================= */ :root { /* Font */ --fettl--tag__font: Roboto, sans-serif; --fettl--tag__fontColor: ; --fettl--tag__fontSize: 0.875rem ; --fettl--tag__fontWeight: 500 ; --fettl--tag__fontStyle: normal ; /* Text colors */ --fettl--tag__textColor: #55626c ; /* Background colors */ --fettl--tag__backgroundColor: #F7f7f7 ; /* Shape */ --fettl--tag__borderRadius: 50px; /* Border thickness */ --fettl--tag__borderThickness: 1px ; --fettl--tag__borderColor: #737373 ; /* Case */ --fettl--tag__case: none ; --fettl--tag__letterSpacing: 0px ; /* * List module tokens (used by the List utility module + future list-style * sections). Stubbed against the foundation palette so child themes can * tune the list/pill appearance independently of generic tags. */ --fettl--list__gap: var(--fettl--spacing--12, 12px); --fettl--list__item--font: var(--fettl--body__font); --fettl--list__item--fontSize: 0.875rem; /* 14px */ --fettl--list__item--fontWeight: 500; --fettl--list__item--lineHeight: 1.43; /* 20px / 14px */ --fettl--list__item--iconSize: 14px; --fettl--list__item--iconGap: 6px; --fettl--list__pill--gap: 14px; --fettl--list__pill--paddingBlock: 2px; --fettl--list__pill--paddingInline: 8px; --fettl--list__pill--paddingBlock--large: 8px; --fettl--list__pill--paddingInline--large: 16px; --fettl--list__pill--borderRadius: 9999px; --fettl--list__pill--borderWidth: 1px; --fettl--list__pill--fontSize: 0.75rem; /* 12px */ --fettl--list__pill--fontWeight: 600; --fettl--list__pill--fontSize--large: 0.875rem; --fettl--list__pill--fontWeight--large: 700; --fettl--list__pill--lineHeight: 1.5; --fettl--list__pill--letterSpacing: 0.5px; --fettl--list__pill--iconSize: 16px; --fettl--list__pill--white__backgroundColor: var(--fettl--color--surface--light); --fettl--list__pill--white__borderColor: var(--fettl--color--border--subtle); --fettl--list__pill--white__textColor: var(--fettl--color--onLight); --fettl--list__pill--grey__backgroundColor: var(--fettl--color--surface--subtle); --fettl--list__pill--grey__borderColor: var(--fettl--color--surface--subtle); --fettl--list__pill--grey__textColor: var(--fettl--color--onLight); --fettl--list__checkmark__color: var(--fettl--color--primary); } :root { /* Border radius based on shape. --fettl--rounded--* : container scale, opted into by the shape lever. --fettl--rounded--full: stadium / pill — for elements that should ALWAYS be a full pill (buttons, tag chips, badges, dot navs). Does NOT scale with the shape lever, so cards/wrappers don't accidentally turn into ovals when the lever is set to "Pill". --fettl--circle : 50% — for true circles (avatars, icon buttons). Values come from the Shape Foundation group in fields.json so the child theme overlay can shift the entire rounded scale via theme settings without touching component CSS. */ --fettl--sharp: 0; --fettl--rounded--extra-small: 0px ; --fettl--rounded--small: 0px ; --fettl--rounded: 0px ; --fettl--rounded--large: 0px ; --fettl--rounded--extra-large: 0px ; --fettl--rounded--full: 9999px; --fettl--circle: 50%; } :root { --fettl--icon--small__size: 16px; --fettl--icon--medium__size: 24px; --fettl--icon--large__size: 32px; } :root { /* None — flat design or elements that shouldn't appear elevated */ --fettl--shadow--none: none; /* Extra small — subtle hover states, very slight elevation */ --fettl--shadow--extraSmall: 0 1px 2px 0 color-mix(in srgb, var(--fettl--color--black) 5%, transparent); /* Small — cards, buttons, small interactive elements */ --fettl--shadow--small: 0 1px 3px 0 color-mix(in srgb, var(--fettl--color--black) 8%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--fettl--color--black) 6%, transparent); /* Medium — raised cards, dropdowns, popovers */ --fettl--shadow--medium: 0 4px 6px -1px color-mix(in srgb, var(--fettl--color--black) 8%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--fettl--color--black) 5%, transparent); /* Large — sticky headers, floating action buttons */ --fettl--shadow--large: 0 10px 15px -3px color-mix(in srgb, var(--fettl--color--black) 8%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--fettl--color--black) 5%, transparent); /* Extra large — modals, drawers, dialogs */ --fettl--shadow--extraLarge: 0 20px 25px -5px color-mix(in srgb, var(--fettl--color--black) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--fettl--color--black) 5%, transparent); /* Card emphasis — centred spreads remain visible around every card edge */ --fettl--shadow--cardEmphasis: 0 0 20px 2px color-mix(in srgb, var(--fettl--color--black) 10%, transparent); --fettl--shadow--cardEmphasisHover: 0 0 32px 4px color-mix(in srgb, var(--fettl--color--black) 16%, transparent); /* 2X large — high-priority overlays */ --fettl--shadow--2xLarge: 0 25px 50px -12px color-mix(in srgb, var(--fettl--color--black) 16%, transparent); /* Inner shadow — inset elements, pressed states */ --fettl--shadow--inner: inset 0 2px 4px 0 color-mix(in srgb, var(--fettl--color--black) 5%, transparent); } :root { /* * Motion primitives. * Duration tokens come from the Motion Foundation group in fields.json * so child themes can re-tune the entire animation feel from theme * settings without touching component CSS. Other steps (extraFast, * medium, extraSlow) are derived from the three primitive durations. */ /* Instant - immediate state changes, no perceived animation */ --fettl--duration--instant: 0ms; /* Extra fast - micro-interactions, very quick feedback */ --fettl--duration--extraFast: 75ms ; /* Fast - button hover, simple state changes */ --fettl--duration--fast: 150ms ; /* Base - default transition speed for most interactions */ --fettl--duration--base: 200ms ; /* Medium - moderate animations, fades, slides */ --fettl--duration--medium: 350ms ; /* Slow - complex animations, accordions, dropdowns */ --fettl--duration--slow: 500ms ; /* Extra slow - page transitions, major state changes */ --fettl--duration--extraSlow: 700ms ; /* Easing tokens - timing functions for natural motion */ /* Linear - constant speed, mechanical movement */ --fettl--ease--linear: linear; /* Ease - default easing, slight acceleration and deceleration */ --fettl--ease--default: ease; /* In - accelerating from zero velocity */ --fettl--ease--in: ease-in; /* Out - decelerating to zero velocity */ --fettl--ease--out: ease-out; /* In-out - accelerating and decelerating */ --fettl--ease--inOut: ease-in-out; /* Cubic - precise cubic bezier for smooth, natural motion (Motion foundation) */ --fettl--ease--cubic: cubic-bezier(0.4, 0, 0.2, 1) ; /* Sharp - quick, crisp movement */ --fettl--ease--sharp: cubic-bezier(0.4, 0, 0.6, 1); /* Emphasized - emphasised easing (Motion foundation) */ --fettl--ease--emphasized: cubic-bezier(0.2, 0, 0, 1) ; /* Bounce - playful, overshooting motion */ --fettl--ease--bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Composite transition tokens - pre-built transition properties */ /* Base transition - color and background changes */ --fettl--transition--base: all var(--fettl--duration--base) var(--fettl--ease--cubic); /* Fast transition - quick hover states */ --fettl--transition--fast: all var(--fettl--duration--fast) var(--fettl--ease--cubic); /* Color transition - optimized for color changes */ --fettl--transition--color: color var(--fettl--duration--base) var(--fettl--ease--cubic), background-color var(--fettl--duration--base) var(--fettl--ease--cubic); /* Transform transition - optimized for transforms */ --fettl--transition--transform: transform var(--fettl--duration--base) var(--fettl--ease--cubic); /* Opacity transition - fade effects */ --fettl--transition--opacity: opacity var(--fettl--duration--base) var(--fettl--ease--cubic); /* * Semantic motion recipe — section reveal on scroll. * The parent theme's one global content-motion standard. Sections consume * these tokens (not the raw primitives) so the reveal feel can be retuned * in one place or by a child theme. Duration and easing inherit from the * themable Motion Foundation primitives above; distance defaults from the * spacing scale. Consumed by components/_motion-reveal.hubl.css. */ --fettl--reveal__duration: var(--fettl--duration--medium); --fettl--reveal__ease: var(--fettl--ease--emphasized); --fettl--reveal__distance: var(--fettl--spacing--24, 24px); } /* * Honour the user's prefers-reduced-motion preference at the primitive layer. * Every component that reads a --fettl--duration-- or --fettl--transition-- token * automatically collapses to instant when this media query matches, without * needing per-component opt-in. */ @media (prefers-reduced-motion: reduce) { :root { --fettl--duration--instant: 0ms; --fettl--duration--extraFast: 0ms; --fettl--duration--fast: 0ms; --fettl--duration--base: 0ms; --fettl--duration--medium: 0ms; --fettl--duration--slow: 0ms; --fettl--duration--extraSlow: 0ms; --fettl--transition--base: none; --fettl--transition--fast: none; --fettl--transition--color: none; --fettl--transition--transform: none; --fettl--transition--opacity: none; } } :root { /* Z-index scale - layering system for stacking contexts */ /* Base layer - default document flow */ --fettl--zIndex--base: 0; /* Raised - slightly elevated content, dropdowns */ --fettl--zIndex--raised: 10; /* Dropdown - dropdown menus, select options */ --fettl--zIndex--dropdown: 100; /* Sticky - sticky headers, fixed navigation */ --fettl--zIndex--sticky: 200; /* Fixed - fixed position elements */ --fettl--zIndex--fixed: 300; /* Header - site header, navigation bar */ --fettl--zIndex--header: 400; /* Overlay backdrop - semi-transparent backgrounds */ --fettl--zIndex--overlay: 500; /* Drawer - side panels, navigation drawers */ --fettl--zIndex--drawer: 600; /* Modal - modal dialogs, lightboxes */ --fettl--zIndex--modal: 700; /* Popover - popovers, tooltips */ --fettl--zIndex--popover: 800; /* Tooltip - informational tooltips */ --fettl--zIndex--tooltip: 900; /* Notification - toast notifications, alerts */ --fettl--zIndex--notification: 1000; /* Max - highest priority elements */ --fettl--zIndex--max: 9999; } :root { /* Focus ring tokens - accessibility-focused outline styles */ /* Focus ring width */ --fettl--focus__width--thin: 1px; --fettl--focus__width--base: 2px; --fettl--focus__width--thick: 3px; --fettl--focus__width--extraThick: 4px; /* Focus ring offset - space between element and focus ring */ --fettl--focus__offset--none: 0; --fettl--focus__offset--tight: 1px; --fettl--focus__offset--base: 2px; --fettl--focus__offset--relaxed: 4px; /* Focus ring style */ --fettl--focus__style--solid: solid; --fettl--focus__style--dashed: dashed; --fettl--focus__style--dotted: dotted; /* Focus ring color - using CSS color-mix for adaptable contrast */ --fettl--focus__color--primary: var(--fettl--color--primary); --fettl--focus__color--accent: var(--fettl--color--tertiary); --fettl--focus__color--dark: color-mix(in srgb, var(--fettl--color--black) 80%, transparent); --fettl--focus__color--light: color-mix(in srgb, var(--fettl--color--white) 80%, transparent); /* Composite focus tokens - pre-built focus styles */ /* Default focus ring - primary color, medium width */ --fettl--focus--default: var(--fettl--focus__width--base) var(--fettl--focus__style--solid) var(--fettl--focus__color--primary); /* Subtle focus ring - thin outline for dense UIs */ --fettl--focus--subtle: var(--fettl--focus__width--thin) var(--fettl--focus__style--solid) var(--fettl--focus__color--primary); /* Strong focus ring - thick outline for high visibility */ --fettl--focus--strong: var(--fettl--focus__width--thick) var(--fettl--focus__style--solid) var(--fettl--focus__color--primary); /* Offset focus ring - separated from element */ --fettl--focus--offset: var(--fettl--focus__width--base) var(--fettl--focus__style--solid) var(--fettl--focus__color--primary); --fettl--focus--offset__outlineOffset: var(--fettl--focus__offset--base); /* Dark background focus ring - light color for contrast */ --fettl--focus--onDark: var(--fettl--focus__width--base) var(--fettl--focus__style--solid) var(--fettl--focus__color--light); /* Light background focus ring - dark color for contrast */ --fettl--focus--onLight: var(--fettl--focus__width--base) var(--fettl--focus__style--solid) var(--fettl--focus__color--dark); /* Dashed focus ring - alternative visual style */ --fettl--focus--dashed: var(--fettl--focus__width--base) var(--fettl--focus__style--dashed) var(--fettl--focus__color--primary); /* Focus shadow - alternative to outline using box-shadow */ --fettl--focus__shadow--base: 0 0 0 var(--fettl--focus__width--base) var(--fettl--focus__color--primary); --fettl--focus__shadow--strong: 0 0 0 var(--fettl--focus__width--thick) var(--fettl--focus__color--primary); --fettl--focus__shadow--onDark: 0 0 0 var(--fettl--focus__width--base) var(--fettl--focus__color--light); --fettl--focus__shadow--onLight: 0 0 0 var(--fettl--focus__width--base) var(--fettl--focus__color--dark); } /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; overflow-x: hidden; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects */ .dnd-section { padding: var(--fettl--section--large__verticalPadding) var(--fettl--section--horizontalPadding); /* Clip module content at section boundaries */ overflow: hidden; } .dnd-section > .row-fluid, .fettl-content-wrapper { margin: 0 auto; max-width: var(--fettl--contentWrapper--wide__maxWidth); } .fettl-content-wrapper { padding: 0 var(--fettl--section--horizontalPadding); } /* Helper Classes */ .fettl-content-wrapper--sm { max-width: var(--fettl--contentWrapper--narrow__maxWidth); padding: 0; } .fettl-content-wrapper--md { max-width: var(--fettl--contentWrapper--medium__maxWidth); padding: 0; } /* Padding for non DND sections */ .fettl-content-padding { padding-block: var(--fettl--section--large__verticalPadding); } .fettl-content-padding--extra-small { padding-block: var( --fettl--section--extraSmall__verticalPadding); } .fettl-content-padding--small { padding-block: var(--fettl--section--small__verticalPadding); } .fettl-content-padding--large { padding-block: var(--fettl--section--large__verticalPadding); } .fettl-content-padding--extra-large { padding-block: var(--fettl--section--extraLarge__verticalPadding); } .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12 { min-height: 1px; width: 100%; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 1 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 11 / 100 ); } .row-fluid .span2 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 2 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 10 / 100 ); } .row-fluid .span3 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 3 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 9 / 100 ); } .row-fluid .span4 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 4 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 8 / 100 ); } .row-fluid .span5 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 5 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 7 / 100 ); } .row-fluid .span6 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 6 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 6 / 100 ); } .row-fluid .span7 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 7 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 5 / 100 ); } .row-fluid .span8 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 8 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 4 / 100 ); } .row-fluid .span9 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 9 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 3 / 100 ); } .row-fluid .span10 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 10 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 2 / 100 ); } .row-fluid .span11 { width: calc( var(--fettl--column__widthMultiplier) * 1% * 11 - var(--fettl--column__gap) * var(--fettl--column__widthMultiplier) * 1 / 100 ); } } /* Elements */ html { font-size: var(--fettl--baseText__fontSize); } body { background-color: var(--fettl--surface--canvas__backgroundColor); color: var(--fettl--surface--canvas__textColor); font-family: var(--fettl--body__font); font-size: var(--fettl--body__fontSize); font-style: var(--fettl--body__fontStyle); font-weight: var(--fettl--body__fontWeight); line-height: var(--fettl--body__lineHeight); letter-spacing: var(--fettl--body__letterSpacing); text-transform: var(--fettl--body__textTransform); overflow-wrap: break-word; } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { margin-block: var(--fettl--text__margin); } a:not( .fettl-button, .cta-primary, .cta-secondary, .cta-tertiary, .cta-accent, .cta-outline, .fettl-blog-listing__pagination-link, .fettl-card--blog__link ), a.fettl-link--primary, .fettl-link--primary a, span.fettl-link--primary { color: var(--fettl--link--primary__fontColor); cursor: pointer; -webkit-text-decoration: var(--fettl--link--primary__textDecoration); text-decoration: var(--fettl--link--primary__textDecoration); text-decoration-color: var(--fettl--link--primary__textDecorationColor); letter-spacing: var(--fettl--link--primary__letterSpacing); text-transform: var(--fettl--link--primary__textTransform); } a:not( .fettl-button, .cta-primary, .cta-secondary, .cta-tertiary, .cta-accent, .cta-outline, .fettl-blog-listing__pagination-link, .fettl-card--blog__link ):hover, a:not( .fettl-button, .cta-primary, .cta-secondary, .cta-tertiary, .cta-accent, .cta-outline, .fettl-blog-listing__pagination-link, .fettl-card--blog__link ):focus, a.fettl-link--primary:hover, .fettl-link--primary a:hover, a.fettl-link--primary:focus, .fettl-link--primary a:focus { color: var(--fettl--link--primary__hover--fontColor); -webkit-text-decoration: var(--fettl--link--primary__hover--textDecoration); text-decoration: var(--fettl--link--primary__hover--textDecoration); text-decoration-color: var(--fettl--link--primary__hover--textDecorationColor); } a.fettl-link--secondary, .fettl-link--secondary a, span.fettl-link--secondary { color: var(--fettl--link--secondary__fontColor); cursor: pointer; -webkit-text-decoration: var(--fettl--link--secondary__textDecoration); text-decoration: var(--fettl--link--secondary__textDecoration); text-decoration-color: var(--fettl--link--secondary__textDecorationColor); letter-spacing: var(--fettl--link--secondary__letterSpacing); text-transform: var(--fettl--link--secondary__textTransform); } a.fettl-link--secondary:hover, .fettl-link--secondary a:hover, a.fettl-link--secondary:focus, .fettl-link--secondary a:focus { color: var(--fettl--link--secondary__hover--fontColor); -webkit-text-decoration: var(--fettl--link--secondary__hover--textDecoration); text-decoration: var(--fettl--link--secondary__hover--textDecoration); text-decoration-color: var(--fettl--link--secondary__hover--textDecorationColor); } /* Headings */ h1, h2, h3, h4, h5, h6, .fettl-display-1, .fettl-display-2 { line-height: var(--fettl--heading__lineHeight); margin-block: var(--fettl--text__margin); } .fettl-display-1 { font-family: var(--fettl--display1__font); font-size: calc(var(--fettl--display1__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: normal; font-weight: var(--fettl--display1__fontWeight, 800); letter-spacing: var(--fettl--display1__letterSpacing); text-transform: var(--fettl--display1__textTransform); } .fettl-display-2 { font-family: var(--fettl--display2__font); font-size: calc(var(--fettl--display2__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: normal; font-weight: var(--fettl--display2__fontWeight, 800); letter-spacing: var(--fettl--display2__letterSpacing); text-transform: var(--fettl--display2__textTransform); } h1, .fettl-h1 { font-family: var(--fettl--h1__font); font-size: calc(var(--fettl--h1__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h1__fontStyle); font-weight: var(--fettl--h1__fontWeight); letter-spacing: var(--fettl--h1__letterSpacing); text-transform: var(--fettl--h1__textTransform); } h2, .fettl-h2 { font-family: var(--fettl--h2__font); font-size: calc(var(--fettl--h2__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h2__fontStyle); font-weight: var(--fettl--h2__fontWeight); letter-spacing: var(--fettl--h2__letterSpacing); text-transform: var(--fettl--h2__textTransform); } h3, .fettl-h3 { font-family: var(--fettl--h3__font); font-size: calc(var(--fettl--h3__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h3__fontStyle); font-weight: var(--fettl--h3__fontWeight); letter-spacing: var(--fettl--h3__letterSpacing); text-transform: var(--fettl--h3__textTransform); } h4, .fettl-h4 { font-family: var(--fettl--h4__font); font-size: calc(var(--fettl--h4__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h4__fontStyle); font-weight: var(--fettl--h4__fontWeight); letter-spacing: var(--fettl--h4__letterSpacing); text-transform: var(--fettl--h4__textTransform); } h5, .fettl-h5 { font-family: var(--fettl--h5__font); font-size: calc(var(--fettl--h5__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h5__fontStyle); font-weight: var(--fettl--h5__fontWeight); letter-spacing: var(--fettl--h5__letterSpacing); text-transform: var(--fettl--h5__textTransform); } h6, .fettl-h6 { font-family: var(--fettl--h6__font); font-size: calc(var(--fettl--h6__fontSize) * var(--fettl--heading__tablet-modifier)); font-style: var(--fettl--h6__fontStyle); font-weight: var(--fettl--h6__fontWeight); letter-spacing: var(--fettl--h6__letterSpacing); text-transform: var(--fettl--h6__textTransform); } @media (min-width: 767px) { .fettl-display-1 { font-size: var(--fettl--display1__fontSize); } .fettl-display-2 { font-size: var(--fettl--display2__fontSize); } h1, .fettl-h1 { font-size: var(--fettl--h1__fontSize); } h2, .fettl-h2 { font-size: var(--fettl--h2__fontSize); } h3, .fettl-h3 { font-size: var(--fettl--h3__fontSize); } h4, .fettl-h4 { font-size: var(--fettl--h4__fontSize); } h5, .fettl-h5 { font-size: var(--fettl--h5__fontSize); } h6, .fettl-h6 { font-size: var(--fettl--h6__fontSize); } } /* Lists */ ul, ol { margin-block: var(--fettl--list__marginBlock); padding-inline-start: var(--fettl--list__paddingInlineStart); font-family: var(--fettl--list__font); font-size: var(--fettl--list__fontSize); font-style: var(--fettl--list__fontStyle); font-weight: var(--fettl--list__fontWeight); line-height: var(--fettl--list__lineHeight); letter-spacing: var(--fettl--list__letterSpacing); text-transform: var(--fettl--list__textTransform); } ul { list-style-type: var(--fettl--list__unorderedMarkerStyle); } ol { list-style-type: var(--fettl--list__orderedMarkerStyle); } /* Prose list rhythm only. Structural lists carry classes and own their layout. */ ul:not([class]) > li + li, ol:not([class]) > li + li { margin-block-start: var(--fettl--list__itemGap); } ul > li::marker, ol > li::marker { color: var(--fettl--list__markerColor); } /* Blockquotes */ blockquote { padding: var(--fettl--spacing--24, 24px); border-radius: var(--fettl--rounded--extra-small); border-left: 3px solid var(--fettl--blockquote__accentColor, var(--fettl--surface--canvas__accentColor)); background-color: var(--fettl--blockquote__backgroundColor, var(--fettl--surface--canvas__backgroundColor)); color: var(--fettl--blockquote__fontColor, var(--fettl--surface--canvas__textColor)); font-family: var(--fettl--quotes__font); font-size: var(--fettl--quotes__fontSize); font-style: var(--fettl--quotes__fontStyle); font-weight: var(--fettl--quotes__fontWeight); letter-spacing: var(--fettl--quotes__letterSpacing); text-transform: var(--fettl--quotes__textTransform); margin-block: var(--fettl--text__margin); } :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { padding: var(--fettl--spacing--24, 24px); border-radius: var(--fettl--rounded--extra-small); border-left: 3px solid var(--fettl--blockquote__accentColor, var(--fettl--surface--canvas__accentColor)); background-color: var(--fettl--blockquote__backgroundColor, var(--fettl--surface--canvas__backgroundColor)); color: var(--fettl--blockquote__fontColor, var(--fettl--surface--canvas__textColor)); font-family: var(--fettl--quotes__font); font-size: var(--fettl--quotes__fontSize); font-style: var(--fettl--quotes__fontStyle); font-weight: var(--fettl--quotes__fontWeight); letter-spacing: var(--fettl--quotes__letterSpacing); text-transform: var(--fettl--quotes__textTransform); margin-block: var(--fettl--text__margin); } @media (max-width: 767.98px) { :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { font-size: calc(var(--fettl--body__fontSize) + 4px); margin-inline: 0; } } /* Captions */ .fettl-caption { color: var(--fettl--captions__fontColor, var(--fettl--surface--canvas__mutedColor)); font-family: var(--fettl--captions__font); font-size: var(--fettl--captions__fontSize); font-style: var(--fettl--captions__fontStyle); font-weight: var(--fettl--captions__fontWeight); letter-spacing: var(--fettl--captions__letterSpacing); text-transform: var(--fettl--captions__case); } /* Tags */ .fettl-tag { padding: 2px 8px; border-color: var(--fettl--tag__borderColor); border-radius: var(--fettl--tag__borderRadius); border-style: solid; border-width: var(--fettl--tag__borderThickness); background-color: var(--fettl--tag__backgroundColor); color: var(--fettl--tag__textColor); font-family: var(--fettl--tag__font); font-size: var(--fettl--tag__fontSize); font-style: var(--fettl--tag__fontStyle); font-weight: var(--fettl--tag__fontWeight); letter-spacing: var(--fettl--tag__letterSpacing); text-transform: var(--fettl--tag__case); } /* * Decorative inline emphasis (extension hooks for child themes). * * Sketch Dev shipped two hand-drawn inline emphasis treatments: * - .red-underline (red SVG underline behind a word) * - .subtle-scribble / .subtle-scribble-2 (white scribble behind a word) * * Both were brand-baked Sketch glyphs (literal hex paint, hand-drawn paths) * and have been removed from the parent. Child themes that want a comparable * "decorated word inside a heading" treatment own this surface. * * Canonical extension path: the structured `.fettl-emphasis` markup contract * documented on the SectionIntro module * (src/theme/fettl-parent-theme/components/modules/SectionIntro/CONTEXT.md * § "Heading accent ranges"). The parent emits `.fettl-emphasis` / * `.fettl-emphasis--accent_N` / `.fettl-emphasis--