/* ============================================================
CT Header Footer Builder — namespaced styles (.cthfb)
Design tokens live once here; every component consumes them.
============================================================ */
.cthfb {
/* Brand tokens (mirror the theme's ct/ system, namespaced) */
--cthfb-red: #E20000;
--cthfb-red-deep: #a60000;
--cthfb-red-glow: rgba(226, 0, 0, .10);
--cthfb-teal: #00C6A3;
--cthfb-teal-deep: #004A53;
--cthfb-surface: #f6f8f8;
--cthfb-ink: #0d1c1f;
--cthfb-ink-dim: #7a8589;
--cthfb-line: rgba(0, 74, 83, .10);
/* Panel padding, as tokens so the bleed panels (media / shaded) can pull to
the card edge by referencing the same values. Tune here in one place. */
--cthfb-pt: 1.75rem; /* top */
--cthfb-pb: 1.75rem; /* bottom */
--cthfb-px: clamp(2.25rem, 3vw, 3.5rem); /* sides */
font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--cthfb-ink);
}
.cthfb *, .cthfb *::before, .cthfb *::after { box-sizing: border-box; }
/* ------------------------------------------------------------
THE REUSABLE LINK ROW (.cthfb-item)
Normal: muted icon + ink label.
Hover / focus / active (current page): grey pill + red label + red icon.
This is the single component reused across every menu, desktop & mobile.
------------------------------------------------------------ */
.cthfb-item {
display: flex;
align-items: center;
gap: .63rem;
padding: .4rem .625rem;
border-left: 2px solid transparent;
border-radius: 0px;
color: var(--cthfb-ink);
font-size: .85rem; /* Figma: 14px */
font-weight: 600; /* Figma: SemiBold */
line-height: 1.35;
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cthfb-item__icon {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cthfb-ink); /* icons black by default; red on hover/active */
transition: color .15s ease;
}
.cthfb-item__icon svg { width: 100%; height: 100%; }
.cthfb-item__label { flex: 1 1 auto; min-width: 0; }
.cthfb-item__badge {
flex: 0 0 auto;
margin-left: auto;
padding: .15rem .5rem;
border-radius: 999px;
background: rgba(0, 198, 163, .12);
color: var(--cthfb-teal-deep); /* Figma: #004A53 */
font-size: .5rem; /* Figma: 8px */
font-weight: 600; /* Figma: SemiBold */
letter-spacing: 0;
text-transform: uppercase; /* Figma: Uppercase */
line-height: 1.4;
white-space: nowrap;
transition: background .15s ease;
}
.cthfb-item--badge .cthfb-item__label { flex: 0 1 auto; }
.cthfb-item:hover,
.cthfb-item:focus-visible,
.cthfb-item.is-active {
background: #F0F1F1;
border-left-color: var(--cthfb-red);
color: var(--cthfb-red);
font-weight: 700; /* Figma: active/hover items are Bold */
}
.cthfb-item:hover .cthfb-item__icon,
.cthfb-item:focus-visible .cthfb-item__icon,
.cthfb-item.is-active .cthfb-item__icon {
color: var(--cthfb-red);
}
.cthfb-item:hover .cthfb-item__badge { background: rgba(0, 198, 163, .2); }
/* ------------------------------------------------------------
Variants (modifiers built on the same tokens)
------------------------------------------------------------ */
/* Feature tile */
.cthfb-feature {
display: flex;
align-items: center;
gap: .875rem;
padding: .625rem 0;
border-radius: 8px;
text-decoration: none;
transition: background .15s ease;
}
/* The tile look (light-red rounded background + red icon) is created here in
CSS, so any plain line icon works as a feature tile — no baked-in tile SVGs. */
.cthfb-feature__icon {
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
padding: .6rem;
background: rgba(226, 0, 0, .10); /* light red tile */
color: var(--cthfb-red); /* red icon (currentColor) */
}
.cthfb-feature__icon svg { width: 100%; height: 100%; display: block; }
/* A media-library image feature keeps no tile (the image supplies its own art). */
.cthfb-feature__icon--img { background: transparent; padding: 0; }
.cthfb-feature__label {
font-size: 1rem; /* Figma: 16px */
font-weight: 700; /* Figma: Bold */
color: var(--cthfb-ink);
letter-spacing: .025rem; /* Figma: 0.4px */
line-height: 1.3;
}
.cthfb-feature:hover .cthfb-feature__label { color: var(--cthfb-red); }
/* Section sub-label */
.cthfb-sublabel {
margin: .75rem 0 .25rem;
padding: 0 .625rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cthfb-ink-dim);
}
/* View-all arrow link */
.cthfb-viewall {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: .5rem;
padding: 0 .625rem;
color: var(--cthfb-red);
font-size: .75rem; /* Figma: 12px */
font-weight: 600; /* Figma: SemiBold */
letter-spacing: 0;
text-decoration: none;
transition: gap .2s ease;
}
.cthfb-viewall svg { width: .9rem; height: .9rem; }
.cthfb-viewall:hover { gap: .9rem; }
/* Promo card */
.cthfb-promo {
border-radius: 15px;
padding: 40px 28px 32px; /* Figma: 40 top / 28 sides / 32 bottom */
background: rgba(0, 198, 163, .12);
border: 1px solid var(--cthfb-teal);
text-align: center;
}
.cthfb-promo__title { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: 0; color: var(--cthfb-teal); } /* Figma: 24px / Bold */
.cthfb-promo__text { margin: .5rem 0 0; font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--cthfb-ink); } /* Figma: 14px / Medium */
/* CTA sits BELOW the card, separated by a divider (ink text, red arrow). */
.cthfb-promo__cta {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--cthfb-line);
color: var(--cthfb-ink);
font-size: .8125rem;
font-weight: 700;
text-decoration: none;
transition: gap .2s ease;
}
.cthfb-promo__cta svg { width: .9rem; height: .9rem; color: var(--cthfb-red); }
.cthfb-promo__cta:hover { gap: .8rem; }
/* Image + link card — an uploaded graphic with a CTA link beneath it. */
.cthfb-imgcard { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.cthfb-imgcard__media { display: block; width: 100%; border-radius: 12px; overflow: hidden; }
.cthfb-imgcard__media img { display: block; width: 100%; height: auto; border-radius: 12px; }
a.cthfb-imgcard__media { transition: opacity .15s ease; }
a.cthfb-imgcard__media:hover { opacity: .92; }
.cthfb-imgcard__cta {
display: inline-flex; align-items: center; gap: .5rem;
color: var(--cthfb-red); font-size: .875rem; font-weight: 700;
text-decoration: none; transition: gap .2s ease;
}
.cthfb-imgcard__cta svg { width: .9rem; height: .9rem; }
.cthfb-imgcard__cta:hover { gap: .85rem; }
/* ------------------------------------------------------------
Column heading + layout scaffolding
------------------------------------------------------------ */
.cthfb-h {
margin: 0 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--cthfb-line);
font-size: .6875rem; /* Figma: 11px */
font-weight: 700; /* Figma: Bold */
text-transform: uppercase; /* Figma: Uppercase */
letter-spacing: .1875rem; /* Figma: 3px */
line-height: 1;
color: var(--cthfb-ink);
}
.cthfb-list { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; }
/* Column width + gap are variables so they're easy to fine-tune to the design. */
.cthfb-col { width: var(--cthfb-col-w, 20rem); max-width: var(--cthfb-col-w, 20rem); display: flex; flex-direction: column; }
/* Per-column width presets (set on each column in the builder). */
.cthfb-col--sm { width: 12.5rem; max-width: 12.5rem; }
.cthfb-col--md { width: 16rem; max-width: 16rem; }
.cthfb-col--lg { width: 19rem; max-width: 19rem; }
.cthfb-col--xl { width: 23rem; max-width: 23rem; }
.cthfb-cols { display: flex; flex-wrap: nowrap; gap: var(--cthfb-col-gap, clamp(2rem, 3vw, 2.5rem)); }
/* News item — bold headline + coloured CTA link (Resources "What's New").
Normal: no accent. Hover: red left bar (space reserved so nothing shifts). */
.cthfb-news {
padding: .75rem 0 .75rem .85rem;
border-left: 3px solid transparent;
transition: border-color .15s ease;
}
.cthfb-news + .cthfb-news { border-top: 1px solid var(--cthfb-line); }
.cthfb-news:hover { border-left-color: var(--cthfb-red); }
.cthfb-news__title {
display: block;
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
color: var(--cthfb-ink);
text-decoration: none;
}
.cthfb-news__cta {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: .4rem;
font-size: .75rem;
font-weight: 700;
color: var(--cthfb-red);
text-decoration: none;
transition: gap .2s ease;
}
.cthfb-news__cta svg { width: .85rem; height: .85rem; }
.cthfb-news__cta:hover { gap: .7rem; }
/* News inside a shaded / teal "What's New" panel: items are separated by a thin
rule; hover fills white with a 2px red bottom border (Figma). */
.cthfb-col--bg .cthfb-news,
.cthfb-col--bg-teal .cthfb-news {
border-left: 2px solid transparent; padding: 1rem 0; transition: background .15s ease, border-color .15s ease;
}
.cthfb-col--bg .cthfb-news + .cthfb-news,
.cthfb-col--bg-teal .cthfb-news + .cthfb-news { border-top: 0; }
/* Hover: white fill + 2px red LEFT bar (matches the link-item hover). */
.cthfb-col--bg .cthfb-news:hover,
.cthfb-col--bg-teal .cthfb-news:hover {
background: #fff; border-left-color: var(--cthfb-red);
}
/* A trailing "view-all" link pins to the bottom of its column with a divider
above it (e.g. Resource Center → "Browse All Resources"). Grid columns opt out. */
.cthfb-col:not(.cthfb-col--grid2) .cthfb-list > .cthfb-viewall:last-child {
margin-top: auto; width: 100%; padding-top: 1.25rem;
border-top: 1px solid var(--cthfb-line);
}
/* Pill buttons (teal outline / solid). Consecutive buttons share one row and
keep their natural (single-line) width — the group is allowed to extend past
the column into the gap beside it, matching the design. */
.cthfb-btns {
display: flex;
flex-wrap: nowrap;
gap: .75rem;
margin-top: auto; /* pin to the bottom of the column (= bottom of the card) */
padding-top: .75rem;
width: max-content;
max-width: none;
}
/* In a plain (non-grid) column, keep the button group inside the column so it
can't overflow into the next one (e.g. Resources "Insights" buttons). The
grid columns (Style 1, e.g. Why ColorTokens) keep the base behaviour. */
.cthfb-col:not(.cthfb-col--grid2) .cthfb-btns {
flex-wrap: wrap; width: 100%; max-width: 100%;
}
.cthfb-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: .6rem 1.25rem;
font-size: .8125rem;
font-weight: 700;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* On mobile the columns stack full-width, so let the buttons wrap/fill again. */
@media (max-width: 980px) {
.cthfb-btns { width: auto; flex-wrap: wrap; }
.cthfb-btn { flex: 1 1 auto; }
}
/* Normal: transparent fill + 2px teal border. Hover: 20% teal tint (Figma). */
.cthfb-btn--outline { border: 2px solid var(--cthfb-teal); color: var(--cthfb-teal-deep); background: transparent; }
.cthfb-btn--outline:hover { background: rgba(0, 198, 163, .2); color: var(--cthfb-teal-deep); }
.cthfb-btn--solid { border: 2px solid var(--cthfb-teal-deep); background: var(--cthfb-teal-deep); color: #fff; }
.cthfb-btn--solid:hover { background: var(--cthfb-teal); border-color: var(--cthfb-teal); color: rgb(255, 255, 255); }
.cthfb-btn--red { border: 2px solid var(--cthfb-red); background: var(--cthfb-red); color: #fff; }
.cthfb-btn--red:hover { background: var(--cthfb-red-deep); border-color: var(--cthfb-red-deep); color: #fff; }
/* Red outline: red border + red text on transparent; fills red on hover. */
.cthfb-btn--red-outline { border: 2px solid var(--cthfb-red); background: transparent; color: var(--cthfb-red); }
.cthfb-btn--red-outline:hover { background: var(--cthfb-red); color: #fff; }
/* Figma typography for the red (Style 2) buttons — scoped so Style 1 teal
buttons are untouched. 326% line-height (Figma leading-trim CAP_HEIGHT) is
expressed as a fixed line height + no vertical padding. */
.cthfb-btn--red,
.cthfb-btn--red-outline {
font-weight: 600; font-size: 12px; letter-spacing: 0;
text-transform: capitalize; line-height: 1;
padding: 11px 16px; /* Figma: 11px / 16px */
}
.cthfb-btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* Optional leading icon inside a pill button. */
.cthfb-btn__ico { display: inline-flex; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.cthfb-btn__ico svg { width: 100%; height: 100%; }
/* --- Full-height media panel (e.g. "Be Breach Ready") --------------------- */
/* Bleeds over the panel padding to meet the card's top/left/bottom edges. */
.cthfb-col--media {
flex: 0 0 clamp(260px, 26%, 360px);
width: auto; max-width: none; padding: 0;
margin-top: calc(-1 * var(--cthfb-pt)); margin-bottom: calc(-1 * var(--cthfb-pb));
}
/* Bleed sideways to whichever card edge the panel column sits against. */
.cthfb-cols > .cthfb-col--media:first-child { margin-left: calc(-1 * var(--cthfb-px)); }
.cthfb-cols > .cthfb-col--media:last-child { margin-right: calc(-1 * var(--cthfb-px)); }
.cthfb-mediapanel {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 100%; width: 100%; padding: 0;
/* Default brand-teal gradient background (shown when no image is set, and as a
base behind a transparent one). An uploaded image overrides it inline. */
background-color: var(--cthfb-teal-deep);
background-image: radial-gradient(135% 110% at 78% 0%, #13707a 0%, #063b41 55%, #04262b 100%);
background-size: auto; background-position: 53% 25%; background-repeat: no-repeat;
color: #fff; text-decoration: none; overflow: hidden;
}
/* Solid dark band behind the title text — sits on top of the image at the
bottom of the panel so the heading stays legible over any artwork. */
.cthfb-mediapanel__title {
position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem;
width: 100%; min-height: 64px; padding: 0 1.5rem; background: #004A53;
font-size: 17px; font-weight: 700; line-height: .97; letter-spacing: .4px; color: #fff; border-top: 1px solid #007584;
}
.cthfb-mediapanel__title svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
a.cthfb-mediapanel { transition: filter .15s ease; }
a.cthfb-mediapanel:hover { filter: brightness(1.06); }
/* --- Promo panel (eyebrow + title + CTA) ----------------------------------
Gradient variant fills its column and bleeds to the card edges (via the
.cthfb-col--media treatment); bordered variant is a contained rounded card. */
.cthfb-promopanel {
display: flex; flex-direction: column; justify-content: center; gap: .85rem;
min-height: 100%; height: 100%; padding: var(--cthfb-pt) var(--cthfb-px) var(--cthfb-pb);
/* Figma: linear gradient #00C6A3 @ 35% opacity → transparent, over white. */
background: linear-gradient(135deg, rgba(0, 198, 163, .35) 0%, rgba(255, 255, 255, 0) 60%), #fff;
color: var(--cthfb-ink);
}
.cthfb-promopanel--bordered {
min-height: 0; height: auto;
border: 1px solid var(--cthfb-teal); border-radius: 5px;
}
/* Inner content block — flex column holding the rows; an optional max-width
(Content width) keeps it narrower than the panel so the bg fills the rest. */
.cthfb-promopanel__inner { display: flex; flex-direction: column; gap: .85rem; width: 100%; }
.cthfb-promopanel.is-left .cthfb-promopanel__inner { align-items: flex-start; }
.cthfb-promopanel.is-center .cthfb-promopanel__inner { align-items: center; }
/* Alignment: left-aligned or centred content + CTA. */
.cthfb-promopanel.is-left { align-items: flex-start; text-align: left; }
.cthfb-promopanel.is-center { align-items: center; text-align: center; }
.cthfb-promopanel.is-left .cthfb-btn,
.cthfb-promopanel.is-left .cthfb-promopanel__cta { align-self: flex-start; }
.cthfb-promopanel.is-center .cthfb-btn,
.cthfb-promopanel.is-center .cthfb-promopanel__cta { align-self: center; }
.cthfb-promopanel__img img { display: block; max-width: 230px; height: auto; }
/* Logo mode: image sized by its inline height, sits as a small brand mark. */
.cthfb-promopanel__img--logo { display: block; margin-bottom: .85rem; }
.cthfb-promopanel.is-center .cthfb-promopanel__img--logo img { margin-inline: auto; }
.cthfb-promopanel__eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cthfb-teal-deep); }
.cthfb-promopanel__title { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--cthfb-teal-deep); }
/* Inline highlight: wrap a word in *asterisks* in the promo title to make it red. */
.cthfb-hl { color: var(--cthfb-red); }
.cthfb-promopanel__text { font-size: .9rem; line-height: 1.4; color: var(--cthfb-ink); }
/* Top row: eyebrow (left) + optional CTA (right), with a divider beneath. */
.cthfb-promopanel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.cthfb-promopanel__topcta { flex: 0 0 auto; }
.cthfb-promopanel__topleft { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.cthfb-promopanel__logo { display: inline-flex; }
.cthfb-promopanel__logo img { display: block; width: auto; max-width: 135px; }
.cthfb-promopanel__rule { width: 100%; height: 1px; background: rgba(0, 74, 83, .18); margin: .15rem 0 .35rem; }
/* Image-beside-text body. */
.cthfb-promopanel__row { display: flex; align-items: center; gap: 1.25rem; width: 100%; text-align: left; }
.cthfb-promopanel__row .cthfb-promopanel__img img { max-width: 130px; }
.cthfb-promopanel__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cthfb-promopanel__cta {
display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem;
color: var(--cthfb-red); font-size: .875rem; font-weight: 700; text-decoration: none;
transition: gap .2s ease;
}
.cthfb-promopanel__cta svg { width: .9rem; height: .9rem; }
.cthfb-promopanel__cta:hover { gap: .8rem; }
.cthfb-promopanel .cthfb-btn { margin-top: .35rem; }
/* A top-right CTA never gets the bottom-margin. */
.cthfb-promopanel__top .cthfb-promopanel__cta { margin-top: 0; }
/* --- Link caption: small grey line under the label (e.g. "Use Case") ------- */
.cthfb-item--desc { align-items: flex-start; }
.cthfb-item--desc .cthfb-item__icon { margin-top: .1rem; }
.cthfb-item__label--stack { display: flex; flex-direction: column; gap: .2rem; }
.cthfb-item__desc {
font-size: .5625rem; font-weight: 600; line-height: 1.2; letter-spacing: .12em;
text-transform: uppercase; color: var(--cthfb-ink-dim);
}
.cthfb-item:hover .cthfb-item__desc,
.cthfb-item.is-active .cthfb-item__desc { color: var(--cthfb-ink-dim); }
/* Links under a bordered promo card (Platform: Integrations, Solution Brief). */
.cthfb-list > .cthfb-promopanel--bordered { margin-bottom: 1.25rem; }
/* --- Heading placed part-way down a column (e.g. "Analyst Recognition") ---- */
.cthfb-list > .cthfb-h { margin-top: 1.75rem; }
/* Bottom band alignment (Platform menu): a divider before a video card and a
mid-column heading are pushed to the bottom of their columns, so the video
card and the card under "Analyst Recognition" sit on the same line, and the
divider lines up with the heading's rule (both 20px above their card). */
@media (min-width: 981px) {
.cthfb-list > .cthfb-divider:has(+ .cthfb-video) { margin: auto .625rem 1.25rem; }
.cthfb-list > .cthfb-divider + .cthfb-video { margin-top: 0; min-height: 8.5625rem; } /* = white card height (137px) → centres match */
.cthfb-list > .cthfb-h:has(~ .cthfb-promopanel--card) { margin-top: auto; padding-top: 1.75rem; }
}
/* --- Video card: square thumbnail + play button | text + red CTA ----------- */
.cthfb-video { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.cthfb-video__thumb {
position: relative; display: block; flex: 0 0 7rem; width: 7rem; height: 7rem;
border: 1px solid var(--cthfb-teal); border-radius: 6px; overflow: hidden; background: var(--cthfb-teal-deep);
}
.cthfb-video__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cthfb-video__play {
/* Figma: 37x37 circle, #000 fill, 2px #FFF border; 17x17 white triangle. */
position: absolute; left: 50%; top: 50%; width: 37px; height: 37px; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: #000; border: 2px solid #fff; color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: transform .2s ease;
}
.cthfb-video__play svg { width: 17px; height: 17px; margin-left: 2px; } /* optical centring of the triangle */
.cthfb-video__thumb:hover .cthfb-video__play { transform: translate(-50%, -50%) scale(1.08); }
/* Figma: text Montserrat 500 12/150% #000; CTA 700 12/150% #E20000. */
.cthfb-video__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; max-width: 168px; }
.cthfb-video__text { font-size: .75rem; font-weight: 500; line-height: 1.5; color: #000; }
.cthfb-video__cta { font-size: .75rem; font-weight: 700; line-height: 1.5; color: var(--cthfb-red); text-decoration: none; }
.cthfb-video__cta:hover { color: var(--cthfb-red-deep); text-decoration: underline; }
/* --- Promo panel "White card" variant (e.g. Forrester recognition) --------- */
.cthfb-promopanel--card {
min-height: 0; height: auto; padding: 1.2rem 1.5rem; /* Figma: card 365x137 */
background: #fff; border-radius: 6px; border-bottom: 3px solid var(--cthfb-teal);
box-shadow: 0 4px 18px rgba(0, 40, 46, .08);
}
.cthfb-promopanel--card .cthfb-promopanel__row { align-items: center; gap: 1rem; }
.cthfb-promopanel--card .cthfb-promopanel__img { flex: 0 0 auto; }
.cthfb-promopanel--card .cthfb-promopanel__row .cthfb-promopanel__img img { width: 94px; max-width: 94px; }
.cthfb-promopanel--card .cthfb-promopanel__title { font-size: .875rem; color: var(--cthfb-ink); }
/* Figma: text Montserrat 500 12/150% #000 (box 210px); CTA 700 12/150% #E20000, 5px below. */
.cthfb-promopanel--card .cthfb-promopanel__body { gap: 0; }
.cthfb-promopanel--card .cthfb-promopanel__text { font-size: .75rem; font-weight: 500; line-height: 1.5; color: #000; max-width: 210px; }
.cthfb-promopanel--card .cthfb-promopanel__cta { font-size: .75rem; line-height: 1.5; margin-top: 5px; }
.cthfb-promopanel--card .cthfb-promopanel__cta svg { display: none; }
/* --- Column style "cthfb-col--platform" (set in the column's Custom CSS class):
compact product card — flat mint, small logo, small dark-teal pill button. */
.cthfb-col--platform { margin-right: 1.25rem; } /* Figma: ~60px to the next column */
.cthfb-col--platform .cthfb-promopanel--bordered {
padding: 1.35rem 1.25rem 1.4rem; gap: .9rem;
background: rgba(0, 198, 163, .13); border: 1px solid rgba(0, 198, 163, .55);
border-bottom: 3px solid var(--cthfb-teal); border-radius: 6px; box-shadow: none;
}
.cthfb-col--platform .cthfb-promopanel__inner { gap: .9rem; }
.cthfb-col--platform .cthfb-promopanel__eyebrow { color: var(--cthfb-ink); font-size: .875rem; letter-spacing: .2em; }
.cthfb-col--platform .cthfb-promopanel__rule { align-self: stretch; width: auto; margin: 0; background: rgba(0, 198, 163, .35); }
.cthfb-col--platform .cthfb-promopanel__img--logo { margin: .15rem 0 0; }
.cthfb-col--platform .cthfb-promopanel .cthfb-btn {
margin-top: .1rem; padding: .6rem 1.9rem; border-radius: 999px; font-size: .75rem; gap: .5rem;
}
.cthfb-col--platform .cthfb-promopanel .cthfb-btn svg { width: .8rem; height: .8rem; }
.cthfb-col--platform .cthfb-list > .cthfb-promopanel--bordered { margin-bottom: 1.6rem; }
/* --- Column style "cthfb-col--mint" (with "Shaded side panel"): mint panel, no
left border, wider content (desktop; mobile keeps the stacked style). */
@media (min-width: 981px) {
.cthfb-col--bg.cthfb-col--mint {
background: #EAF7F3; border-left: 0;
padding-left: clamp(1.75rem, 2.5vw, 2.25rem); padding-right: clamp(1.75rem, 2.5vw, 2.25rem);
}
}
/* White card: text keeps a readable width beside the image; CTA on one line. */
.cthfb-promopanel--card .cthfb-promopanel__body { flex: 1 1 auto; }
.cthfb-promopanel--card .cthfb-promopanel__cta { white-space: nowrap; }
/* --- Two-column link grid inside one column (e.g. Customer Stories) --------
Fixed width + minmax(0,1fr) tracks so a link going bold on hover wraps inside
its cell instead of widening the column and reflowing the whole panel. */
.cthfb-col--grid2 { flex: 0 0 auto; width: 34rem; max-width: 34rem; }
.cthfb-col--grid2 .cthfb-list {
display: grid; grid-template-columns: var(--cthfb-g2, minmax(0, 1fr) minmax(0, 1fr));
column-gap: 1rem; row-gap: .1rem; align-content: start;
}
.cthfb-col--grid2 .cthfb-list > .cthfb-divider { grid-column: 1 / -1; }
.cthfb-col--grid2 .cthfb-list > .cthfb-viewall { grid-column: 1; align-self: center; }
.cthfb-col--grid2 .cthfb-list > .cthfb-btns { grid-column: 2; justify-self: end; margin-top: 0; }
/* --- Vertical separator before a column ------------------------------------ */
.cthfb-col--divider { position: relative; padding-left: clamp(1.75rem, 2.5vw, 2.75rem); }
.cthfb-col--divider::before {
content: ""; position: absolute; left: 0; top: -2.25rem; bottom: -2.5rem; width: 1px;
background: var(--cthfb-line);
}
/* --- Shaded side panel (e.g. Analyst Recognition) ------------------------- */
.cthfb-col--bg {
width: 25rem; max-width: 25rem;
background: #F7FBFA; /* Figma: #F7FBFA */
border-left: 1px solid #E3E3E3; /* Figma: 1px #E3E3E3 */
margin: calc(-1 * var(--cthfb-pt)) 0 calc(-1 * var(--cthfb-pb)) 0; /* top/bottom bleed only */
padding: var(--cthfb-pt) var(--cthfb-px) var(--cthfb-pb);
}
/* Only a shaded column that actually sits against a card edge bleeds sideways. */
.cthfb-cols > .cthfb-col--bg:last-child { margin-right: calc(-1 * var(--cthfb-px)); }
.cthfb-cols > .cthfb-col--bg:first-child { margin-left: calc(-1 * var(--cthfb-px)); }
/* Teal-gradient variant of the shaded panel (e.g. Resources "What's New"). */
.cthfb-col--bg-teal {
background: linear-gradient(135deg, rgba(0, 198, 163, .35) 0%, rgba(255, 255, 255, 0) 60%), #fff; /* Figma: #00C6A3 35% → transparent */
border-left: 0;
padding-left: 0; padding-right: 0; /* no side padding: items span edge-to-edge, text inset via item padding */
}
/* Heading + items carry the horizontal inset so text lines up, while item backgrounds (incl. the white hover fill) bleed to both column edges. */
.cthfb-col--bg-teal .cthfb-h { padding-left: 1.5rem; padding-right: 1.5rem; color: var(--cthfb-teal-deep); } /* Figma: teal heading */
.cthfb-col--bg-teal .cthfb-news { padding-left: 1.5rem; padding-right: 1.5rem; }
.cthfb-col--bg-teal .cthfb-divider { margin-left: 0; margin-right: 0; } /* divider spans full width */
/* Butt the teal panel against the previous column so no empty gap shows between
two coloured panels (e.g. Asset Type + What's New). */
.cthfb-cols > .cthfb-col--bg-teal:not(:first-child) {
margin-left: calc(-1 * var(--cthfb-col-gap, clamp(2rem, 3vw, 2.5rem)));
}
/* Card (dropdown container / standalone preview) */
.cthfb-card {
display: inline-block;
background: #fff;
border-radius: 8px;
box-shadow: 0 1.5rem 3.75rem -1.25rem rgba(0, 40, 46, .28),
0 .25rem 1rem -.75rem rgba(0, 40, 46, .16);
overflow: hidden;
}
.cthfb-panel { padding: var(--cthfb-pt) var(--cthfb-px) var(--cthfb-pb); }
/* Stack columns on small screens (also used by the mobile drawer later) */
@media (max-width: 980px) {
.cthfb-card { display: block; }
.cthfb-cols { flex-direction: column; gap: 1.5rem; }
/* !important so any inline per-column width (colw) also resets to full width. */
.cthfb-col { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; }
.cthfb-col--media { margin: 0; flex: 1 1 auto; }
/* The sideways bleed rules have higher specificity, so zero them explicitly. */
.cthfb-cols > .cthfb-col--media:first-child,
.cthfb-cols > .cthfb-col--media:last-child { margin-left: 0; margin-right: 0; }
.cthfb-col--media .cthfb-mediapanel { min-height: 200px; border-radius: 12px; }
.cthfb-promopanel { min-height: 0; height: auto; border-radius: 12px; }
.cthfb-col--grid2 { width: 100%; max-width: none; }
.cthfb-col--grid2 .cthfb-list { grid-template-columns: 1fr; }
.cthfb-col--grid2 .cthfb-list > .cthfb-viewall,
.cthfb-col--grid2 .cthfb-list > .cthfb-btns { grid-column: 1; justify-self: start; }
.cthfb-col--divider { padding-left: 0; }
.cthfb-col--divider::before { display: none; }
.cthfb-col--bg { width: 100%; max-width: none; margin: 0; border-left: 0; padding: 1rem 0 0; background: transparent; }
.cthfb-cols > .cthfb-col--bg:first-child,
.cthfb-cols > .cthfb-col--bg:last-child,
.cthfb-cols > .cthfb-col--bg-teal:not(:first-child) { margin-left: 0; margin-right: 0; }
}
/* ============================================================
HEADER INTEGRATION — utility top bar (desktop only)
============================================================ */
.cthfb-topbar {
background: var(--cthfb-teal-deep);
color: #fff;
font-size: .8125rem;
font-weight: 500;
}
/* No .container override — the top bar reuses the theme's .container so its
left/right edges line up exactly with the header (logo/nav). */
.cthfb-topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 40px;
}
.cthfb-topbar__left { display: flex; align-items: center; }
.cthfb-topbar__actions { display: flex; align-items: center; gap: 1.25rem; }
/* Left-side links: Contact Us | Login — plain text links, red on hover. */
.cthfb-topbar__btnlink {
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
background: none;
border-radius: 0;
color: #fff;
font-weight: 600;
text-decoration: none;
transition: color .15s ease;
}
.cthfb-topbar__btnlink .cthfb-topbar__ico { margin-right: .45rem; }
.cthfb-topbar__btnlink:hover { color: var(--cthfb-teal); background: none; border-radius: 0; }
/* Pipe divider centred between the two left links (equal space each side). */
.cthfb-topbar__btnlink + .cthfb-topbar__btnlink::before {
content: "|";
color: rgba(255, 255, 255, .35);
font-weight: 400;
line-height: 1;
margin: 0 1rem;
}
.cthfb-topbar__ico { display: inline-flex; width: 1rem; height: 1rem; }
.cthfb-topbar__ico svg { width: 100%; height: 100%; }
.cthfb-topbar__social { display: inline-flex; align-items: center; gap: .65rem; padding-right: .35rem; }
.cthfb-topbar__soc {
display: inline-flex;
width: 1.05rem;
height: 1.05rem;
color: rgba(255, 255, 255, .8);
transition: color .15s ease, transform .15s ease;
}
.cthfb-topbar__soc:hover { color: var(--cthfb-teal); transform: translateY(-1px); }
.cthfb-topbar__soc svg { width: 100%; height: 100%; }
.cthfb-topbar__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
color: rgba(255, 255, 255, .9);
background: none;
border: 0;
cursor: pointer;
transition: color .15s ease;
}
.cthfb-topbar__btn:hover { color: var(--cthfb-teal); }
.cthfb-topbar__btn svg { width: 1rem; height: 1rem; }
/* Language dropdown */
.cthfb-lang { position: relative; }
.cthfb-lang__btn {
display: inline-flex;
align-items: center;
gap: .35rem;
color: rgba(255, 255, 255, .9);
background: none;
border: 0;
font: inherit;
cursor: pointer;
transition: color .15s ease;
}
.cthfb-lang__btn:hover { color: var(--cthfb-teal); }
.cthfb-lang__btn svg { width: 1rem; height: 1rem; }
/* Flag chip (button + menu rows) */
.cthfb-lang__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; display: inline-block; }
.cthfb-lang__btn .cthfb-lang__flag { margin-right: .1rem; }
.cthfb-lang__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 175px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1px solid var(--cthfb-line);
border-radius: 8px;
box-shadow: 0 1rem 2.5rem -1rem rgba(0, 40, 46, .3);
opacity: 0;
visibility: hidden;
transform: translateY(-.35rem);
transition: opacity .18s ease, transform .18s ease;
z-index: 60;
}
.cthfb-lang.is-open .cthfb-lang__menu { opacity: 1; visibility: visible; transform: none; }
.cthfb-lang__item {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .65rem;
border-radius: 5px;
color: var(--cthfb-ink);
font-size: .8125rem;
text-decoration: none;
}
.cthfb-lang__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; } /* "Japanese (日本語)" stays on one line */
.cthfb-lang__code { flex: 0 0 auto; color: var(--cthfb-ink-dim); font-weight: 600; letter-spacing: .02em; }
.cthfb-lang__item:hover,
.cthfb-lang__item[aria-current="true"] { background: var(--cthfb-surface); }
.cthfb-lang__item[aria-current="true"] .cthfb-lang__name { color: var(--cthfb-red); font-weight: 700; }
.cthfb-lang__item[aria-current="true"] .cthfb-lang__code { color: var(--cthfb-teal-deep); }
/* The menu is a white popover. In the dark footer, `.cthfb-footer a { color: inherit }`
(white) out-specifies `.cthfb-lang__item` and makes the text invisible — force dark
item text with a higher-specificity rule scoped to the menu (and the footer context). */
.cthfb-lang__menu .cthfb-lang__item,
.cthfb-footer .cthfb-lang__menu .cthfb-lang__item { color: var(--cthfb-ink); }
.cthfb-lang__menu .cthfb-lang__code,
.cthfb-footer .cthfb-lang__menu .cthfb-lang__code { color: var(--cthfb-ink-dim); }
.cthfb-lang__menu .cthfb-lang__item[aria-current="true"] .cthfb-lang__name,
.cthfb-footer .cthfb-lang__menu .cthfb-lang__item[aria-current="true"] .cthfb-lang__name { color: var(--cthfb-red); }
.cthfb-lang__menu .cthfb-lang__item[aria-current="true"] .cthfb-lang__code,
.cthfb-footer .cthfb-lang__menu .cthfb-lang__item[aria-current="true"] .cthfb-lang__code { color: var(--cthfb-teal-deep); }
/* Defensive: keep top-bar icons visible even if the theme resets svg stroke/fill. */
.cthfb-topbar__ico, .cthfb-topbar__soc, .cthfb-topbar__btn, .cthfb-lang__btn { color: #fff; }
.cthfb-topbar svg, .cthfb-lang__btn svg { stroke: currentColor !important; fill: none !important; }
/* Full-page search overlay (dark backdrop + centred dialog). */
.cthfb-searchov {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: flex-start;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility 0s linear .2s;
}
.cthfb-searchov.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.cthfb-searchov__backdrop { position: absolute; inset: 0; background: rgba(3, 22, 25, .78); }
.cthfb-searchov__dialog {
position: relative;
width: min(760px, 92vw);
margin-top: 14vh;
transform: translateY(-10px);
transition: transform .25s ease;
}
.cthfb-searchov.is-open .cthfb-searchov__dialog { transform: none; }
.cthfb-searchov__form {
display: flex;
align-items: center;
gap: .75rem;
background: #fff;
border-radius: 12px;
padding: .5rem .5rem .5rem 1.25rem;
box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, .5);
}
.cthfb-searchov__ico { display: inline-flex; width: 1.35rem; height: 1.35rem; color: var(--cthfb-ink-dim); flex: 0 0 auto; }
.cthfb-searchov__ico svg { width: 100%; height: 100%; }
.cthfb-searchov__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 1.15rem;
color: var(--cthfb-ink);
padding: .7rem .25rem;
}
.cthfb-searchov__submit {
flex: 0 0 auto;
background: var(--cthfb-red);
color: #fff;
border: 0;
border-radius: 8px;
padding: .8rem 1.6rem;
font: inherit;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
}
.cthfb-searchov__submit:hover { background: var(--cthfb-red-deep); }
.cthfb-searchov__close {
position: absolute;
top: -2.75rem;
right: 0;
background: none;
border: 0;
color: #fff;
font-size: 2.25rem;
line-height: 1;
padding: 0 .25rem;
cursor: pointer;
opacity: .85;
transition: opacity .15s ease;
}
.cthfb-searchov__close:hover { opacity: 1; }
@media (max-width: 980px) { .cthfb-topbar { display: none; } .cthfb-searchov { display: none; } }
/* ============================================================
HEADER INTEGRATION — desktop mega dropdown
============================================================ */
.cthfb-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 55;
display: flex;
justify-content: center;
padding: 0 clamp(20px, 4vw, 72px);
pointer-events: none;
}
.cthfb-dropdown > .cthfb { width: auto; position: relative; }
/* Invisible bridge over the gap between the nav bar and the panel, so moving the
cursor from a menu item down into the mega panel doesn't cross a dead zone
(which would close it). Only active while open. */
.cthfb-dropdown.is-open > .cthfb { pointer-events: auto; }
.cthfb-dropdown.is-open > .cthfb::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -34px;
height: 34px;
}
.cthfb-dropdown__card {
margin-top: 0; /* flush under the header bar (no top gap) */
background: #FCFCFC;
border-top: 0;
border-radius: 0 0 8px 8px; /* square top, rounded bottom */
box-shadow: 1px 3px 5px 0px #00000029;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-.5rem);
transition: opacity .25s ease, transform .25s ease;
will-change: opacity, transform;
}
.cthfb-dropdown.is-open .cthfb-dropdown__card {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
.cthfb-viewport .cthfb-panel { display: none; }
.cthfb-viewport .cthfb-panel.is-active { display: block; }
@media (max-width: 980px) { .cthfb-dropdown { display: none; } }
/* The theme's desktop primary nav has no room between 980–1200px (its .container
gains a max-width only at ≥1200px), so the logo gets squeezed out and the
CONTACT US button overflows off-screen. Collapse to the hamburger from 1200px
down instead of 980px, and disable the mega there (no triggers when hidden). */
@media (max-width: 1200px) {
.site nav.primary,
.site .nav-right { display: none !important; }
.site .menu-btn { display: inline-flex !important; }
.cthfb-dropdown { display: none !important; }
}
/* ============================================================
HEADER INTEGRATION — mobile push-drawer
============================================================ */
.cthfb-mobile {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: calc(100vh - 100%);
/* Real phones: 100vh includes the area behind the browser's own bars, which hid
the sticky REQUEST A DEMO footer. dvh = the visible height (JS also sets an
exact pixel height on open/resize for browsers without dvh). */
height: calc(100dvh - 100%);
background: #fff;
border-top: 1px solid var(--cthfb-line);
z-index: 49;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.cthfb-mobile.is-open {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: opacity .28s ease, transform .28s ease;
}
.cthfb-mobile[hidden] { display: none; } /* pre-JS / fully closed state */
@media (min-width: 981px) { .cthfb-mobile { display: none !important; } }
.cthfb-m { position: relative; height: 100%; display: flex; flex-direction: column; }
.cthfb-m__viewport { position: relative; flex: 1 1 auto; overflow: hidden; }
/* Each level is a full-height panel; children slide in from the right. */
.cthfb-m__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 12px 20px 24px;
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
visibility: hidden; /* off-screen panels are inert: no clicks, can't be scrolled into view */
transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}
.cthfb-m__panel[data-level="0"] { transform: translateX(0); visibility: visible; transition: none; } /* root always in place */
.cthfb-m__panel.is-active { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } /* pushed panel visible */
/* Root list rows */
.cthfb-m__list { display: flex; flex-direction: column; }
.cthfb-m__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 16px 4px;
font-family: inherit;
font-size: 1.0625rem;
font-weight: 600;
color: var(--cthfb-ink);
text-align: left;
text-decoration: none;
background: none;
border: 0;
border-bottom: 1px solid var(--cthfb-line);
cursor: pointer;
}
.cthfb-m__row:hover { color: var(--cthfb-red); }
.cthfb-m__chev { width: 18px; height: 18px; color: var(--cthfb-red); flex: 0 0 auto; }
/* Back bar */
.cthfb-m__back {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 4px;
margin-bottom: 8px;
font-family: inherit;
font-size: .95rem;
font-weight: 700;
color: var(--cthfb-red);
background: none;
border: 0;
border-bottom: 1px solid var(--cthfb-line);
cursor: pointer;
}
/* Inside a mobile panel the columns just stack (shared media query already
turns .cthfb-cols to a column below 980px). */
.cthfb-m__body .cthfb-panel { padding: 8px 0 0; }
/* Sticky footer CTA — visible on the root list AND every pushed sub-panel. */
.cthfb-m__footer {
flex: 0 0 auto;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--cthfb-line);
box-shadow: 0 -.5rem 1rem -.75rem rgba(0, 40, 46, .18);
}
.cthfb-m__cta { display: flex; width: 100%; justify-content: center; }
/* Media-library image in an icon slot (overrides the SVG icon) */
.cthfb-item__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cthfb-feature__icon--img { background: transparent; }
.cthfb-feature__icon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 2px; }
/* Divider row */
.cthfb-divider { height: 1px; background: var(--cthfb-line); margin: .75rem .625rem; }
/* ============================================================
FOOTER
============================================================ */
.cthfb-footer {
background: linear-gradient(180deg, #0c4a52 0%, #06363c 100%);
color: #fff;
font-size: .9375rem;
}
.cthfb-footer a { color: inherit; text-decoration: none; }
/* Keep footer icons visible even if the theme resets svg stroke/fill. */
.cthfb-footer svg { stroke: currentColor !important; fill: none !important; }
/* Uses the theme's .container (added in the markup) so its width + side gutters
match the page sections above at every breakpoint (1140/1350/1440/1512).
Only the vertical rhythm is set here — horizontal spacing comes from .container. */
.cthfb-footer__inner {
padding-top: 3rem;
padding-bottom: 1.5rem;
}
.cthfb-footer__rule { height: 1px; background: rgba(255, 255, 255, .12); margin: 3rem 0; }
/* Top row */
.cthfb-footer__top { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.cthfb-footer__logo img { display: block; height: 34px; width: auto; }
.cthfb-footer__utility { display: flex; align-items: center; gap: 1rem 2.25rem; flex-wrap: wrap; flex: 1 1 auto; justify-content: center; }
.cthfb-footer__util { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; transition: color .15s ease; }
.cthfb-footer__util:hover { color: var(--cthfb-teal); }
.cthfb-footer__util-ico { display: inline-flex; width: 1.15rem; height: 1.15rem; }
.cthfb-footer__util-ico svg { width: 100%; height: 100%; }
/* Footer language pill */
.cthfb-footer__lang { position: relative; margin-left: auto; }
.cthfb-footer__lang .cthfb-lang__btn {
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid #00707E; /* Figma: 1px #00707E */
border-radius: 200px; /* Figma: 200px */
padding: .75rem 1.25rem;
color: #fff; background: #002E34; /* Figma: #002E34 */
font: inherit; font-weight: 400; cursor: pointer; /* Figma: Regular */
}
.cthfb-footer__lang .cthfb-lang__btn:hover { border-color: var(--cthfb-teal); }
.cthfb-footer__lang .cthfb-topbar__ico { width: 1.1rem; height: 1.1rem; display: inline-flex; }
.cthfb-footer__lang .cthfb-lang__menu { right: 0; }
/* Link columns */
.cthfb-footer__cols {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 2rem 2.5rem;
}
.cthfb-footer__h {
margin: 0 0 2.5rem; /* Figma: 40px gap to links */
font-size: 1rem; /* Figma: 16px */
font-weight: 600; /* Figma: SemiBold */
line-height: 1; /* Figma: 100% */
letter-spacing: 4px; /* Figma: 4px */
text-transform: uppercase;
color: var(--cthfb-teal); /* Figma: #00C6A3 */
}
.cthfb-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
/* Figma: Montserrat Light 16 / 20, 0.46px, #FFFFFF */
.cthfb-footer__list a { color: #fff; font-weight: 300; font-size: 1rem; line-height: 1.25; letter-spacing: .46px; transition: color .15s ease; }
.cthfb-footer__list a:hover { color: var(--cthfb-teal); }
/* Recognition + social */
/* 65px breathing room above and below the recognized / social row. */
.cthfb-footer__mid { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin: 65px 0; }
.cthfb-footer__rec, .cthfb-footer__follow { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* Figma: SemiBold 16 / 20, 4px, Uppercase, #00C6A3 */
.cthfb-footer__label { font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: 4px; text-transform: uppercase; color: var(--cthfb-teal); }
.cthfb-footer__badges { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cthfb-footer__badge { height: 95px; width: auto; display: block; border-radius: 4px; }
.cthfb-footer__socials { display: inline-flex; align-items: center; gap: .75rem; }
.cthfb-footer__soc {
display: inline-flex; align-items: center; justify-content: center;
width: 51px; height: 51px; border-radius: 50%; /* Figma: 51×51 */
background: #002E34; color: #fff; /* Figma: #002E34 */
border: 1px solid #00707E; /* Figma: 1px #00707E */
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Social glyphs are SOLID brand marks — override the footer's global
`svg { fill:none; stroke:currentColor }` so they render filled white. */
.cthfb-footer__soc svg { width: 1.25rem; height: 1.25rem; fill: currentColor !important; stroke: none !important; }
.cthfb-footer__soc:hover { background: var(--cthfb-teal); color: #04262b; }
/* Custom uploaded social icon (SVG/PNG) — shown in place of the built-in glyph. */
.cthfb-footer__soc--img img { width: 1.2rem; height: 1.2rem; object-fit: contain; display: block; }
/* Newsletter band */
.cthfb-footer__nl {
margin-top: 0; /* the 65px gap comes from .cthfb-footer__mid's bottom margin */
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap;
background: rgba(0, 0, 0, .28);
border-radius: 14px;
padding: 40px 2rem; /* 40px top & bottom inside the newsletter box */
}
/* Figma: SemiBold 20, line 20, 0.46px, Uppercase */
.cthfb-footer__nl-h { font-size: 1.25rem; font-weight: 600; line-height: 1; letter-spacing: .46px; text-transform: uppercase; }
/* Desktop: copy ~40% (max 580px) | form = the rest. Fixed shares, never content-
sized, so long text or HubSpot error messages can't push the form below the copy. */
.cthfb-footer__nl-copy { flex: 0 1 40%; max-width: 580px; min-width: 0; }
/* Figma: Regular 16 / 20, 0.46px */
.cthfb-footer__nl-copy p { margin: .4rem 0 0; color: rgba(255, 255, 255, .8); font-size: 1rem; font-weight: 400; line-height: 1.25; letter-spacing: .46px; }
/* Give the form the rest of the band so two fields + the button fit on one line. */
.cthfb-footer__nl-form { flex: 1 1 60%; max-width: none; min-width: 0; }
@media (min-width: 901px) { .cthfb-footer__nl { flex-wrap: nowrap; } }
/* Style whatever the embed renders (HubSpot / plain inputs). */
.cthfb-footer__nl-form input[type="email"], .cthfb-footer__nl-form input[type="text"] {
width: 100%; padding: .9rem 1.1rem; border: 0; font: inherit; color: var(--cthfb-ink);
}
.cthfb-footer__nl-form input[type="submit"],
.cthfb-footer__nl-form button[type="submit"] {
background: var(--cthfb-red); color: #fff; border: 0; border-radius: 0 !important;
padding: .9rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.cthfb-footer__nl-form input[type="submit"]:hover,
.cthfb-footer__nl-form button[type="submit"]:hover { background: var(--cthfb-red-deep); }
/* HubSpot embed: normalize EVERY rendered field to one white pill and lay the
fields + submit out side by side. The theme's `bgfix` CSS only styles the
email field, so we target every (not just .hs-input) with !important
to override it and HubSpot's own stylesheet.
LAYOUT IS CSS-ONLY: HubSpot renders the form with React, so its nodes are never
moved. The