/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: cmi Speakers child theme (Candid Goat) Author: Candid Goat Template: generatepress Version: 1.4 */ /* All site styles live here (moved from Customizer › Additional CSS, Oct 31). Keep Additional CSS empty so nothing loads twice. */ /* ========================================================================== CMI SPEAKERS — Site CSS (child theme style.css, below the theme header) Candid Goat · cg- system · v1.1 CONTENTS 0. Fonts 4. Section backgrounds (.cg-bg) 8. Motion 1. Tokens 5. Floating shapes (.cg-float) 9. Speaker components 2. Typography 6. Texture (.cg-grain) (shortcode output) 3. Buttons 7. Components (overlays, pics) 10. Header + footer (Themer) 11. Layering (cg-z-*) 12. Number counter 13. Spill (shapes into next row) 14. Tiles (cg-tile cards) 15. Featured speaker card 16. Text shadow (cg-text--shadow) 17. Mobile text colour (cg-dark-mobile) 18. Team cards ([cg_team]) 19. Motion kit (cg-reveal, cg-stagger, cg-stack-card) ASSET PATHS (absolute, so they work from the child theme or the Customizer) /wp-content/uploads/fonts/ Kangge + Plus Jakarta Sans /wp-content/uploads/assets/shapes/ cg-shape-*.avif / .webp /wp-content/uploads/assets/bg/ cg-bg-*.webp (BB row background photos) QUICK USE (Beaver Builder › Row › Advanced › Class) Background: cg-bg cg-bg--night + shapes: cg-fa--10 cg-fa--tl cg-fb--9 cg-fb--br (up to 3: a, b, c) + texture: cg-grain + mirror: cg-flip-x (or cg-flip-y) Full example: "cg-bg cg-bg--dusk cg-grain cg-fa--orb cg-fa--c cg-fa--w40" Heading sizes: cg-huge 160 cg-xl 120 cg-lg 80 (H1) cg-med 59 (H2) cg-sm 28 Photo overlay: cg-overlay cg-overlay--edge (--fade --side --tint --duo --dark) Buttons: cg-btn (--sky) cg-btn--dark cg-btn--outline cg-btn--light; nav: cg-nav-btn ========================================================================== */ /* ========================================================================== 0. FONTS ========================================================================== */ @font-face { font-family: 'Kangge'; src: url('/wp-content/uploads/fonts/Kangge-Regular.woff2') format('woff2'), url('/wp-content/uploads/fonts/Kangge-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Fallbacks sized to match each font, so text doesn't reflow (layout shift) when the real fonts swap in. Arial = Liberation Sans = Arimo metrics. */ @font-face { font-family: 'Kangge Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 104.4%; ascent-override: 68.7%; descent-override: 41.2%; line-gap-override: 22.3%; } @font-face { font-family: 'Jakarta Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); size-adjust: 106%; ascent-override: 97.9%; descent-override: 20.9%; line-gap-override: 0%; } /* Variable font — one file covers 200–800 */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('/wp-content/uploads/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'), url('/wp-content/uploads/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* ---- Color: neutrals ---- */ --cg-color-ink: #0d091a; /* darkest section bg */ --cg-color-navy: #171033; /* primary dark / body text on light */ --cg-color-dusk: #614d8b; /* muted text on dark (footer legal) */ --cg-color-mist: #e4e5f4; /* nav + light text on dark */ --cg-color-white: #ffffff; /* ---- Color: brand spectrum (warm → cool) ---- */ --cg-color-pink-hot: #fe4583; --cg-color-pink: #eb3684; /* attribution, accents */ --cg-color-fuchsia: #e800ba; --cg-color-magenta: #bd14d8; --cg-color-plum: #891980; --cg-color-violet: #7e44d2; --cg-color-purple: #a650ff; /* icons, UI accents */ --cg-color-purple-soft: #ad77ff; --cg-color-indigo: #6653ed; --cg-color-royal: #232279; --cg-color-blue: #0e7dff; --cg-color-azure: #3385ff; --cg-color-sky: #4cbaff; /* card titles, links */ --cg-color-sky-light: #5fccff; /* ---- Color: semantic ---- */ --cg-color-text: var(--cg-color-navy); --cg-color-text-invert: var(--cg-color-white); --cg-color-text-muted: var(--cg-color-dusk); --cg-color-accent: var(--cg-color-pink); --cg-color-link: var(--cg-color-sky); --cg-color-border: #707070; /* ---- Gradients (from design) ---- */ --cg-grad-btn: linear-gradient(90deg, var(--cg-color-sky-light), var(--cg-color-blue)); --cg-grad-pink: linear-gradient(90deg, var(--cg-color-pink-hot), var(--cg-color-magenta)); --cg-grad-hot: linear-gradient(90deg, var(--cg-color-fuchsia), var(--cg-color-pink-hot)); --cg-grad-violet: linear-gradient(90deg, var(--cg-color-violet), var(--cg-color-magenta)); --cg-grad-sky: linear-gradient(90deg, var(--cg-color-azure), var(--cg-color-sky)); --cg-grad-sky-purple: linear-gradient(90deg, var(--cg-color-sky), var(--cg-color-purple)); --cg-grad-purple: var(--cg-grad-violet); /* same as violet — matches cg-tile--purple */ --cg-grad-hotpink: var(--cg-grad-hot); /* same as hot — matches cg-tile--hotpink */ /* Portrait look (team cards + cg-pic--wash): one source of truth */ --cg-wash: linear-gradient(to top right, rgb(126 68 210 / 0.85) 0%, rgb(166 80 255 / 0.45) 30%, rgb(190 170 230 / 0.15) 55%, transparent 75%); --cg-photo-radius: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem); --cg-photo-shadow: 0 0 34px rgb(166 80 255 / 0.35), 0 22px 44px rgb(13 9 26 / 0.3); /* ---- Type families ---- */ --cg-font-display: 'Kangge', 'Kangge Fallback', Georgia, serif; --cg-font-body: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- Type scale — fluid 375px → 1920px (design artboard) ---- --cg-type-scale shrinks or grows EVERY size at once (1 = the design). Body text never drops below 16px. */ --cg-type-scale: 0.9; --cg-fs-display: calc(clamp(3.5rem, 1.922rem + 6.731vw, 10rem) * var(--cg-type-scale)); /* 160 — "The cmi Difference" */ --cg-fs-stat: calc(clamp(3.5rem, 2.529rem + 4.142vw, 7.5rem) * var(--cg-type-scale)); /* 120 — 25+ / 10,000+ */ --cg-fs-h1: calc(clamp(2.375rem, 1.738rem + 2.718vw, 5rem) * var(--cg-type-scale)); /* 80 — hero, section headlines */ --cg-fs-h2: calc(clamp(1.875rem, 1.44rem + 1.855vw, 3.666rem) * var(--cg-type-scale)); /* 58.66 — sub-heads, card titles */ --cg-fs-h3: calc(clamp(1.5rem, 1.257rem + 1.036vw, 2.5rem) * var(--cg-type-scale)); /* 40 */ --cg-fs-sm: calc(clamp(1.25rem, 1.1286rem + 0.5178vw, 1.75rem) * var(--cg-type-scale)); /* 28 — cg-sm */ --cg-fs-lead: calc(clamp(1.188rem, 0.9903rem + 0.8414vw, 2rem) * var(--cg-type-scale)); /* 32 — ExtraBold intro lines */ --cg-fs-body: max(1rem, calc(clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem) * var(--cg-type-scale))); /* 16 → 20 (lowered from the XD's 24) */ --cg-fs-small: calc(clamp(0.875rem, 0.7638rem + 0.4744vw, 1.333rem) * var(--cg-type-scale)); /* 21.33 — utility bar, legal */ --cg-fs-btn: calc(clamp(0.875rem, 0.8143rem + 0.2589vw, 1.125rem) * var(--cg-type-scale)); /* 14 → 18 (smaller than the XD's 24, pill buttons) */ --cg-lh-display: 0.85; --cg-lh-heading: 1.07; --cg-lh-lead: 1.3; --cg-lh-body: 1.55; --cg-ls-body: -0.02em; /* XD tracking -20 */ --cg-fw-regular: 400; --cg-fw-bold: 700; --cg-fw-extrabold: 800; /* ---- Spacing — fluid ---- */ --cg-space-3xs: clamp(0.25rem, 0.1893rem + 0.2589vw, 0.5rem); --cg-space-2xs: clamp(0.5rem, 0.4393rem + 0.2589vw, 0.75rem); --cg-space-xs: clamp(0.75rem, 0.6286rem + 0.5178vw, 1.25rem); --cg-space-s: clamp(1rem, 0.7573rem + 1.036vw, 2rem); --cg-space-m: clamp(1.5rem, 1.136rem + 1.553vw, 3rem); --cg-space-l: clamp(2rem, 1.272rem + 3.107vw, 5rem); --cg-space-xl: clamp(3rem, 1.908rem + 4.66vw, 7.5rem); --cg-space-section: clamp(4.5rem, 2.862rem + 6.99vw, 11.25rem); /* ---- Radius ---- */ --cg-radius-sm: clamp(0.75rem, 0.568rem + 0.7767vw, 1.5rem); /* 24 — thumbs */ --cg-radius-md: clamp(1.25rem, 0.9618rem + 1.23vw, 2.438rem); /* 39 */ --cg-radius-lg: clamp(1.75rem, 1.234rem + 2.201vw, 3.875rem); /* 62 — cards, feature photos */ --cg-radius-pill: 999px; /* ---- Shadows (from design) ---- */ --cg-shadow-lg: -16px 22px 38px rgb(30 0 106 / 0.40); --cg-shadow-md: -11px 15px 18px rgb(38 0 133 / 0.30); --cg-shadow-sm: -7px 10px 11px rgb(30 5 63 / 0.17); --cg-glow-pink: 0 0 28px rgb(235 54 132 / 0.55); --cg-glow-sky: 0 0 28px rgb(76 186 255 / 0.64); --cg-glow-purple: -2px 2px 26px rgb(166 80 255 / 0.61); /* ---- Motion ---- */ --cg-ease: cubic-bezier(0.22, 1, 0.36, 1); --cg-dur: 0.35s; /* ---- Shape library (AVIF ~10KB each, WebP fallback) ---- */ --cg-shape-orb: image-set(url('/wp-content/uploads/assets/shapes/cg-ellipse-1.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-ellipse-1.webp') type('image/webp')); --cg-shape-1: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-1.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-1.webp') type('image/webp')); --cg-shape-2: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-2.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-2.webp') type('image/webp')); --cg-shape-3: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-3.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-3.webp') type('image/webp')); --cg-shape-4: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-4.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-4.webp') type('image/webp')); --cg-shape-5: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-5.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-5.webp') type('image/webp')); --cg-shape-6: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-6.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-6.webp') type('image/webp')); --cg-shape-7: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-7.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-7.webp') type('image/webp')); --cg-shape-8: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-8.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-8.webp') type('image/webp')); --cg-shape-9: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-9.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-9.webp') type('image/webp')); --cg-shape-10: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-10.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-10.webp') type('image/webp')); --cg-shape-11: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-11.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-11.webp') type('image/webp')); /* 12 = free-floating cluster (no flat sides; 855px wide) */ --cg-shape-12: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-12.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-12.webp') type('image/webp')); /* 13 = sphere with echo rings (no flat sides; 800px wide) */ --cg-shape-13: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-13.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-13.webp') type('image/webp')); /* 14 = shape 13 in violet → cyan (no flat sides; 800px wide) */ --cg-shape-14: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-14.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-14.webp') type('image/webp')); /* 15 = soft orb with its own grain + fade (Careers "every role" globe; flat LEFT side, 853px) */ --cg-shape-15: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-15.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-15.webp') type('image/webp')); /* Flipped copies: -x (left↔right), -y (upside down), -xy (both). Used by cg-fa--flip-x / -y */ --cg-shape-1-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-1-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-1-x.webp') type('image/webp')); --cg-shape-1-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-1-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-1-y.webp') type('image/webp')); --cg-shape-1-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-1-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-1-xy.webp') type('image/webp')); --cg-shape-2-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-2-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-2-x.webp') type('image/webp')); --cg-shape-2-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-2-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-2-y.webp') type('image/webp')); --cg-shape-2-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-2-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-2-xy.webp') type('image/webp')); --cg-shape-3-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-3-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-3-x.webp') type('image/webp')); --cg-shape-3-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-3-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-3-y.webp') type('image/webp')); --cg-shape-3-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-3-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-3-xy.webp') type('image/webp')); --cg-shape-4-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-4-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-4-x.webp') type('image/webp')); --cg-shape-4-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-4-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-4-y.webp') type('image/webp')); --cg-shape-4-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-4-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-4-xy.webp') type('image/webp')); --cg-shape-5-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-5-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-5-x.webp') type('image/webp')); --cg-shape-5-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-5-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-5-y.webp') type('image/webp')); --cg-shape-5-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-5-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-5-xy.webp') type('image/webp')); --cg-shape-6-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-6-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-6-x.webp') type('image/webp')); --cg-shape-6-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-6-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-6-y.webp') type('image/webp')); --cg-shape-6-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-6-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-6-xy.webp') type('image/webp')); --cg-shape-7-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-7-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-7-x.webp') type('image/webp')); --cg-shape-7-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-7-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-7-y.webp') type('image/webp')); --cg-shape-7-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-7-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-7-xy.webp') type('image/webp')); --cg-shape-8-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-8-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-8-x.webp') type('image/webp')); --cg-shape-8-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-8-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-8-y.webp') type('image/webp')); --cg-shape-8-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-8-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-8-xy.webp') type('image/webp')); --cg-shape-9-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-9-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-9-x.webp') type('image/webp')); --cg-shape-9-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-9-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-9-y.webp') type('image/webp')); --cg-shape-9-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-9-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-9-xy.webp') type('image/webp')); --cg-shape-10-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-10-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-10-x.webp') type('image/webp')); --cg-shape-10-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-10-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-10-y.webp') type('image/webp')); --cg-shape-10-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-10-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-10-xy.webp') type('image/webp')); --cg-shape-11-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-11-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-11-x.webp') type('image/webp')); --cg-shape-11-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-11-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-11-y.webp') type('image/webp')); --cg-shape-11-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-11-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-11-xy.webp') type('image/webp')); --cg-shape-12-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-12-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-12-x.webp') type('image/webp')); --cg-shape-12-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-12-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-12-y.webp') type('image/webp')); --cg-shape-12-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-12-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-12-xy.webp') type('image/webp')); --cg-shape-13-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-13-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-13-x.webp') type('image/webp')); --cg-shape-13-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-13-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-13-y.webp') type('image/webp')); --cg-shape-13-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-13-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-13-xy.webp') type('image/webp')); --cg-shape-14-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-14-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-14-x.webp') type('image/webp')); --cg-shape-14-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-14-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-14-y.webp') type('image/webp')); --cg-shape-14-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-14-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-14-xy.webp') type('image/webp')); --cg-shape-15-x: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-15-x.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-15-x.webp') type('image/webp')); --cg-shape-15-y: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-15-y.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-15-y.webp') type('image/webp')); --cg-shape-15-xy: image-set(url('/wp-content/uploads/assets/shapes/cg-shape-15-xy.avif') type('image/avif'), url('/wp-content/uploads/assets/shapes/cg-shape-15-xy.webp') type('image/webp')); /* Line shape, traced from the design: a long diagonal line, a shorter parallel one led in by two dots. Runs off the edge. Inline SVG, no request */ --cg-lines-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%239a84e6' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%239a84e6' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%239a84e6' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%239a84e6' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cg-lines-svg-r180: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%239a84e6' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%239a84e6' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%239a84e6' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate%28180 190 190%29'%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%239a84e6' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cg-lines-svg-dark-r180: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%23171033' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%23171033' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23171033' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate%28180 190 190%29'%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%23171033' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cg-lines-svg-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%239a84e6' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%239a84e6' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%239a84e6' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate%28380 0%29 scale%28-1 1%29'%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%239a84e6' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cg-lines-svg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%23171033' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%23171033' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23171033' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%23171033' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cg-lines-svg-dark-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='380' y2='380'%3E%3Cstop offset='0' stop-color='%23171033' stop-opacity='.35'/%3E%3Cstop offset='.25' stop-color='%23171033' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23171033' stop-opacity='.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate%28380 0%29 scale%28-1 1%29'%3E%3Cg stroke='url%28%23g%29' stroke-width='1.5' fill='none'%3E%3Cline x1='0' y1='0' x2='380' y2='380'/%3E%3Cline x1='115' y1='94' x2='380' y2='359'/%3E%3C/g%3E%3Cg fill='%23171033' fill-opacity='.6'%3E%3Ccircle cx='96' cy='75' r='2'/%3E%3Ccircle cx='106' cy='84' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* Film grain — inline SVG, no request */ --cg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* finer, mid-grey grain: speckles the colour, leaves white clean (light moods) */ --cg-grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 2. BASE TYPOGRAPHY (GeneratePress) ========================================================================== */ body { font-family: var(--cg-font-body); font-size: var(--cg-fs-body); line-height: var(--cg-lh-body); letter-spacing: var(--cg-ls-body); color: var(--cg-color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, .cg-display, .cg-h1, .cg-h2, .cg-h3 { font-family: var(--cg-font-display); font-weight: var(--cg-fw-regular); letter-spacing: 0; line-height: var(--cg-lh-heading); text-wrap: balance; } h1, .cg-h1 { font-size: var(--cg-fs-h1); } h2, .cg-h2 { font-size: var(--cg-fs-h2); } h3, .cg-h3 { font-size: var(--cg-fs-h3); } h4, h5, h6 { font-family: var(--cg-font-body); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } /* No lonely last words: big headings balance their lines; everything else gets "pretty" wrapping (browsers that don't support it just ignore it). */ p, li, dd, blockquote, figcaption, label, legend, td, th, h4, h5, h6, .cg-h4, .fl-rich-text, .fl-heading-text, .pp-content-grid-title, .pp-post-title, .cg-scard__name, .cg-scard__cred, .cg-tcard__name, .cg-mega__ptitle, .cg-mt__quote, .cg-quote__text { text-wrap: pretty; } /* No default space under headings (GeneratePress adds ~20px) — spacing is set in Beaver Builder instead, like the other workspace systems. */ :is(h1, h2, h3, h4, h5, h6, .cg-display, .cg-h1, .cg-h2, .cg-h3, .cg-stat, .cg-huge, .cg-xl, .cg-lg, .cg-med, .cg-sm), :is(.cg-display, .cg-stat, .cg-huge, .cg-xl, .cg-lg, .cg-med, .cg-sm) :is(h1, h2, h3, h4, h5, h6, p) { margin-bottom: 0; } /* Type utilities — add to a BB module's class field */ .cg-display { font-size: var(--cg-fs-display); line-height: var(--cg-lh-display); } .cg-stat { font-family: var(--cg-font-display); font-size: var(--cg-fs-stat); line-height: 1; } .cg-lead { font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } .cg-small { font-size: var(--cg-fs-small); } .cg-eyebrow { font-size: var(--cg-fs-small); font-weight: var(--cg-fw-extrabold); text-transform: uppercase; letter-spacing: 0.08em; } /* Alignment — any module (logo, text, buttons, images). --mobile versions apply under 768px */ .cg-align--left:not(#cg) { text-align: left; } .cg-align--center:not(#cg) { text-align: center; } .cg-align--right:not(#cg) { text-align: right; } @media (max-width: 1000px) { /* = where Beaver Builder stacks columns */ .cg-align--left-mobile:not(#cg) { text-align: left; } .cg-align--center-mobile:not(#cg) { text-align: center; } .cg-align--right-mobile:not(#cg) { text-align: right; } } /* Heading sizes by name — match the design's heading scale on any tag, so an H2 (for SEO) can look like the hero H1. Kangge, display line-height. cg-huge 160 display ("The cmi Difference") cg-xl 120 stat numbers cg-lg 80 = H1 hero + section headlines cg-med 59 = H2 sub-heads, card titles cg-sm 28 small heading (H3 tag stays 40) */ :is(.cg-huge, .cg-xl, .cg-lg, .cg-med, .cg-sm) { color: inherit; font-family: var(--cg-font-display); font-weight: var(--cg-fw-regular); letter-spacing: 0; line-height: var(--cg-lh-heading); text-wrap: balance; } .cg-huge { font-size: var(--cg-fs-display); line-height: var(--cg-lh-display); } .cg-xl { font-size: var(--cg-fs-stat); line-height: 1; } .cg-lg { font-size: var(--cg-fs-h1); } .cg-med { font-size: var(--cg-fs-h2); } .cg-sm { font-size: var(--cg-fs-sm); } /* Swap any heading or size class to Plus Jakarta Sans. e.g. an H2 with "cg-sm cg-sans" = 40px Jakarta, normal weight. cg-sans-bold = 700, cg-sans-xbold = 800 (ExtraBold). */ :is(.cg-sans, .cg-sans-bold, .cg-sans-xbold):not(#cg-type), :is(.cg-sans, .cg-sans-bold, .cg-sans-xbold):not(#cg-type) :is(h1, h2, h3, h4, h5, h6, p, .fl-heading-text) { font-family: var(--cg-font-body); font-weight: var(--cg-sans-weight, var(--cg-fw-regular)); letter-spacing: var(--cg-ls-body); line-height: 1.15; } .cg-sans-bold { --cg-sans-weight: var(--cg-fw-bold); } .cg-sans-xbold { --cg-sans-weight: var(--cg-fw-extrabold); } /* BB modules wrap text in child elements — make utilities reach them */ :is(.cg-display, .cg-stat, .cg-lead, .cg-small, .cg-huge, .cg-xl, .cg-lg, .cg-med, .cg-sm) :is(h1, h2, h3, h4, h5, h6, p, .fl-heading-text) { font: inherit; line-height: inherit; color: inherit; } /* Text colors */ .cg-text-white { color: var(--cg-color-white); } .cg-text-navy { color: var(--cg-color-navy); } .cg-text-mist { color: var(--cg-color-mist); } .cg-text-pink { color: var(--cg-color-pink); } .cg-text-sky { color: var(--cg-color-sky); } .cg-text-purple { color: var(--cg-color-purple); } .cg-text-magenta { color: var(--cg-color-magenta); } /* Gradient text — works on the element or a BB heading inside it */ :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple), :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple) :is(h1, h2, h3, h4, .fl-heading-text) { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* Kangge glyphs overshoot tight line-heights; pad the paint area */ padding: 0.12em 0.06em; margin: -0.12em -0.06em; } .cg-grad-pink, .cg-grad-pink :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-pink); } .cg-grad-hot, .cg-grad-hot :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-hot); } .cg-grad-violet, .cg-grad-violet :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-violet); } :is(.cg-grad-blue, .cg-grad-sky), :is(.cg-grad-blue, .cg-grad-sky) :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-sky); } /* blue; cg-grad-sky = same */ .cg-grad-blue-purple, .cg-grad-blue-purple :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-sky-purple); } .cg-grad-purple, .cg-grad-purple :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-purple); } .cg-grad-hotpink, .cg-grad-hotpink :is(h1, h2, h3, h4, .fl-heading-text) { background-image: var(--cg-grad-hotpink); } /* Dark-section text helper: put on any dark row */ /* ========================================================================== 3. BUTTONS Put the classes on the link itself (PowerPack Smart Button's class field, or ). Also works as a module class on a Beaver Builder Button or PowerPack Button module. cg-btn sky gradient (default; cg-btn--sky says the same thing) cg-btn--dark navy fill, white text, brand-gradient border cg-btn--outline clear fill, brand-gradient border; text color comes from the section (white in a dark row, navy on light) cg-btn--light light fill (#f0f1fa), navy text, brand-gradient border cg-btn--primary same as the default (used by the speaker shortcodes) Gradient-border buttons: on hover the border snakes around the pill, then eases back to rest on mouse-off (script in functions.php). Main nav: menu item CSS class cg-nav-btn = an outline button, white text. Why ":not(#cg-btn)": PowerPack prints CSS for every button (.fl-node-xxx … a.pp-button) that would otherwise beat these styles. An id inside :not() raises our priority without !important. Nothing on the page needs that id; it's only there to count. ========================================================================== */ :root { /* sky button: stops sampled from the design (left → right), plus a soft periwinkle tint toward the top and bottom edges */ --cg-grad-btn-sky: linear-gradient(to bottom, rgb(105 115 255 / 0.5) 0%, rgb(105 115 255 / 0) 40%, rgb(105 115 255 / 0) 60%, rgb(105 115 255 / 0.5) 100%), linear-gradient(90deg, #3b43ff 0%, #285bff 5.7%, #1a6eff 9.9%, #167eff 15.9%, #1f89ff 24.7%, #2e97ff 35.3%, #3ea7ff 45.9%, #4db6ff 56.5%, #5ac2ff 67.1%, #60c8ff 76%, #61c7ff 83%, #69beff 89%, #77acff 93.6%, #8c92ff 100%); /* gradient border, sampled from the design's nav button: purple at the top-left fading to blue at the bottom-right. Listed as a loop (ends where it starts) so the hover chase is seamless. */ --cg-btn-ring-colors: #ac35f7, #9a49f8, #7772f8, #618df8, #7772f8, #9a49f8, #ac35f7; --cg-btn-ring-offset: 315deg; /* rest position: purple top-left, blue bottom-right */ /* hover: the border's gradient (with sky added) spins around the pill */ --cg-chase-colors: #ac35f7, #8d57f7, #618df8, #5fc7ff, #618df8, #8d57f7, #ac35f7; --cg-btn-ring-width: 3px; --cg-btn-min-width: 220px; --cg-btn-outline-bg: transparent; --cg-btn-light-bg: #f0f1fa; /* light button fill (swap to #fff for pure white) */ --cg-btn-shadow: 0 3px 8px rgb(0 0 0 / 0.2); /* subtle grey drop shadow at rest */ } /* Modifiers only set variables, so they work on the link or on a module wrapper. */ :is(.cg-btn--sky, .cg-btn--primary) { --cg-btn-bg: var(--cg-grad-btn-sky); --cg-btn-glow: var(--cg-glow-sky); } :is(.cg-btn--dark) { --cg-btn-bg: var(--cg-color-navy); --cg-btn-glow: var(--cg-glow-purple); } :is(.cg-btn--outline) { --cg-btn-bg: var(--cg-btn-outline-bg); --cg-btn-glow: var(--cg-glow-purple); } :is(.cg-btn--light) { --cg-btn-bg: var(--cg-btn-light-bg); --cg-btn-color: var(--cg-color-navy); --cg-btn-glow: var(--cg-glow-purple); } /* ---- Base ---- */ a.cg-btn:not(#cg-btn), .fl-module.cg-btn :is(a.fl-button, a.pp-button):not(#cg-btn) { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box; min-width: var(--cg-btn-min-width); max-width: 100%; min-height: clamp(2.75rem, 2.568rem + 0.7767vw, 3.5rem); /* 44 → 56 */ padding: 0.5em 1.75em; border: 0; border-radius: var(--cg-radius-pill); background: var(--cg-btn-bg, var(--cg-grad-btn-sky)); color: var(--cg-btn-color, var(--cg-color-white)); font-family: var(--cg-font-body); font-size: var(--cg-fs-btn); font-weight: var(--cg-fw-extrabold); letter-spacing: var(--cg-ls-body); line-height: 1.1; text-align: center; text-decoration: none; box-shadow: var(--cg-btn-shadow); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } :is(a.cg-btn, .fl-module.cg-btn :is(a.fl-button, a.pp-button)):not(#cg-btn) :is(span, .fl-button-text, .pp-button-text) { color: inherit; font: inherit; } a.cg-btn:not(#cg-btn):is(:hover, :focus-visible), .fl-module.cg-btn :is(a.fl-button, a.pp-button):not(#cg-btn):is(:hover, :focus-visible) { color: var(--cg-btn-color, var(--cg-color-white)); background: var(--cg-btn-bg, var(--cg-grad-btn-sky)); translate: 0 -2px; box-shadow: var(--cg-btn-shadow), var(--cg-btn-glow, var(--cg-glow-sky)); } /* Outline: text takes the section's color, at rest and on hover */ :is(a:is(.cg-btn--outline), .fl-module:is(.cg-btn--outline) :is(a.fl-button, a.pp-button)):not(#cg-btn), :is(a:is(.cg-btn--outline), .fl-module:is(.cg-btn--outline) :is(a.fl-button, a.pp-button)):not(#cg-btn):is(:hover, :focus-visible) { color: inherit; } /* ---- Gradient border (dark, outline, light, and the nav button) ---- A ::after masked to the border width, so the inside can stay clear. Always visible; on hover it snakes around the pill. Without the script, CSS spins it on hover and snaps back on mouse-off. */ :is(a:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light), .fl-module:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light) :is(a.fl-button, a.pp-button), li.cg-nav-btn > a):not(#cg-btn)::after { content: ""; position: absolute; inset: 0; z-index: -1; padding: var(--cg-btn-ring-width); border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--cg-btn-ring-offset), var(--cg-btn-ring-colors)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Chase on hover: the gradient border spins around the pill (purple, blue and sky) while hovered, then eases back to rest and fades to the still border on mouse-off (script in functions.php). Without the script it spins on hover and simply fades out. Tune: --cg-chase-colors, --cg-chase-speed (no-script only). */ @property --cg-chase-angle-css { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes cg-chase { to { --cg-chase-angle-css: 360deg; } } :is(a:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light), .fl-module:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light) :is(a.fl-button, a.pp-button), li.cg-nav-btn > a):not(#cg-btn)::before { content: ""; position: absolute; inset: 0; z-index: 0; padding: var(--cg-btn-ring-width); border-radius: inherit; pointer-events: none; --cg-chase-angle-css: var(--cg-chase-angle, 0deg); background: conic-gradient(from calc(var(--cg-chase-angle-css) + var(--cg-btn-ring-offset)), var(--cg-chase-colors)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--cg-dur) var(--cg-ease); } :is(a:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light), .fl-module:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light) :is(a.fl-button, a.pp-button), li.cg-nav-btn > a):not(#cg-btn):is(:hover, :focus-visible, .is-chasing)::before { opacity: 1; } html:not(.cg-chase-js) :is(a:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light), .fl-module:is(.cg-btn--dark, .cg-btn--outline, .cg-btn--light) :is(a.fl-button, a.pp-button), li.cg-nav-btn > a):not(#cg-btn):is(:hover, :focus-visible)::before { animation: cg-chase var(--cg-chase-speed, 2s) linear infinite; } /* ---- Nav button: menu item CSS class cg-nav-btn ---- Works in any WordPress menu: GeneratePress, Beaver Builder Menu module, PowerPack Advanced Menu (the id trick beats each module's own CSS). An outline button with white text and a 3px gradient border that chases around the pill on hover only. Tune: --cg-nav-btn-radius (corners). */ li.cg-nav-btn > a:not(#cg-btn) { position: relative; isolation: isolate; display: inline-flex; align-items: center; margin-block: 0.5em; margin-inline-start: 0.75em; padding: 0.85em 1.6em; border-radius: var(--cg-nav-btn-radius, var(--cg-radius-pill)); background: transparent; color: var(--cg-color-white); font-weight: var(--cg-fw-extrabold); line-height: 1; text-decoration: none; box-shadow: var(--cg-btn-shadow); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } /* Thicker ring. Tune: --cg-nav-ring-width */ li.cg-nav-btn > a:not(#cg-btn) { --cg-btn-ring-width: var(--cg-nav-ring-width, 3px); } li.cg-nav-btn > a:not(#cg-btn):is(:hover, :focus-visible) { color: var(--cg-color-white); background: transparent; translate: 0 -2px; box-shadow: var(--cg-btn-shadow), var(--cg-glow-purple); } li.cg-nav-btn > a:not(#cg-btn) :is(span, .menu-item-text, .pp-menu-item-text) { color: inherit; } .main-navigation.toggled .main-nav ul li.cg-nav-btn > a:not(#cg-btn) { margin: 0.75em 1em; } @media (prefers-reduced-motion: reduce) { :is(a.cg-btn, .fl-module.cg-btn :is(a.fl-button, a.pp-button), li.cg-nav-btn > a):not(#cg-btn)::before { animation: none; opacity: 0; } :is(a.cg-btn, .fl-module.cg-btn :is(a.fl-button, a.pp-button)):not(#cg-btn) { transition: none; } } /* ========================================================================== 4. SECTION BACKGROUNDS — .cg-bg Zero images. Three soft glows (a, b, c) over a base, all driven by custom properties, so every mood can be re-aimed in context. Moods: --night --dusk --deep --ember --ink --footer (dark) --mist --haze --lilac (light) --bloom --sky --violet (vivid) Re-aim the primary glow: cg-glow--tl --tr --bl --br --top --bottom --left --right --center Mirror: cg-flip-x cg-flip-y (also mirrors floats + lines) Lines: cg-lines (+ --tr --top --right --br, --dark; cg-flip-x for the left edge) Tune in a BB row's "Custom CSS" or inline: --cg-ga-color, --cg-ga-x, --cg-ga-y, --cg-ga-w, --cg-ga-h ========================================================================== */ /* Shared defaults at zero specificity so any modifier class wins */ :where(.cg-bg, .cg-float, .cg-grain) { --cg-fx: 0; /* flip multipliers: 0 = as authored, 1 = mirrored */ --cg-fy: 0; } .cg-bg { --cg-bg-base: var(--cg-color-ink); --cg-bg-wash: linear-gradient(transparent, transparent); --cg-ga-color: transparent; --cg-ga-x: 50%; --cg-ga-y: 50%; --cg-ga-w: 50%; --cg-ga-h: 50%; --cg-gb-color: transparent; --cg-gb-x: 50%; --cg-gb-y: 50%; --cg-gb-w: 50%; --cg-gb-h: 50%; --cg-gc-color: transparent; --cg-gc-x: 50%; --cg-gc-y: 50%; --cg-gc-w: 50%; --cg-gc-h: 50%; background-color: var(--cg-bg-base); background-image: var(--cg-lines-img, linear-gradient(transparent, transparent)), var(--cg-lines2-img, linear-gradient(transparent, transparent)), radial-gradient(ellipse var(--cg-ga-w) var(--cg-ga-h) at calc(var(--cg-ga-x) + var(--cg-fx) * (100% - 2 * var(--cg-ga-x))) calc(var(--cg-ga-y) + var(--cg-fy) * (100% - 2 * var(--cg-ga-y))), var(--cg-ga-color), transparent), radial-gradient(ellipse var(--cg-gb-w) var(--cg-gb-h) at calc(var(--cg-gb-x) + var(--cg-fx) * (100% - 2 * var(--cg-gb-x))) calc(var(--cg-gb-y) + var(--cg-fy) * (100% - 2 * var(--cg-gb-y))), var(--cg-gb-color), transparent), radial-gradient(ellipse var(--cg-gc-w) var(--cg-gc-h) at calc(var(--cg-gc-x) + var(--cg-fx) * (100% - 2 * var(--cg-gc-x))) calc(var(--cg-gc-y) + var(--cg-fy) * (100% - 2 * var(--cg-gc-y))), var(--cg-gc-color), transparent), var(--cg-bg-wash); background-repeat: no-repeat; background-size: var(--cg-lines-size, 0 0), var(--cg-lines-size, 0 0), auto, auto, auto, auto; background-position: calc(var(--cg-lines-x, 0%) + var(--cg-fx) * (100% - 2 * var(--cg-lines-x, 0%))) calc(var(--cg-lines-y, 0%) + var(--cg-fy) * (100% - 2 * var(--cg-lines-y, 0%))), calc(var(--cg-lines2-x, 0%) + var(--cg-fx) * (100% - 2 * var(--cg-lines2-x, 0%))) calc(var(--cg-lines2-y, 0%) + var(--cg-fy) * (100% - 2 * var(--cg-lines2-y, 0%))), 0 0, 0 0, 0 0, 0 0; } /* ---- Line shape: cg-lines (needs cg-bg on the same row) ---- Two long diagonal lines with two small dots, as in the footer and hero. Sits on the right edge and runs off it, as in the design. Position: cg-lines--tr (default) --top --right --br; left edge --tl --left (cg-flip-x also moves them left, but mirrors the glows and shapes too) Both corners (hero): add cg-lines--pair Size: --cg-lines-w (380px at 1920, 180–460px). Light sections: cg-lines--dark */ .cg-lines { --cg-lines-img: var(--cg-lines-svg); --cg-lines-w: clamp(180px, 19.8vw, 460px); /* 380px on a 1920 screen */ --cg-lines-size: var(--cg-lines-w) var(--cg-lines-w); --cg-lines-x: 100%; --cg-lines-y: 60%; /* top of the lines ~20% down a footer-height row, as designed */ } .cg-lines.cg-flip-x { --cg-lines-img: var(--cg-lines-svg-flip); } .cg-lines.cg-lines--dark { --cg-lines-img: var(--cg-lines-svg-dark); } .cg-lines.cg-lines--dark.cg-flip-x { --cg-lines-img: var(--cg-lines-svg-dark-flip); } .cg-lines--tr { --cg-lines-x: 100%; --cg-lines-y: 60%; } .cg-lines--br { --cg-lines-x: 100%; --cg-lines-y: 100%; } .cg-lines--right { --cg-lines-x: 100%; --cg-lines-y: 50%; } .cg-lines--top { --cg-lines-x: 100%; --cg-lines-y: 0%; } /* Left edge without mirroring the rest of the section */ .cg-lines--tl { --cg-lines-img: var(--cg-lines-svg); --cg-lines-x: 0%; --cg-lines-y: 0%; } .cg-lines--left { --cg-lines-img: var(--cg-lines-svg); --cg-lines-x: 0%; --cg-lines-y: 50%; } .cg-lines--dark:is(.cg-lines--tl, .cg-lines--left) { --cg-lines-img: var(--cg-lines-svg-dark); } /* A second set in the opposite corner, turned 180° (the hero: top-right + bottom-left). Place it with --cg-lines2-x / --cg-lines2-y if needed. */ .cg-lines--pair { --cg-lines2-img: var(--cg-lines-svg-r180); --cg-lines2-x: 0%; --cg-lines2-y: 100%; } .cg-lines--pair.cg-lines--dark { --cg-lines2-img: var(--cg-lines-svg-dark-r180); } /* ---- Dark moods ---- */ /* Hero: magenta orb glow up top on deep ink (BG 1) */ .cg-bg--night { --cg-bg-base: var(--cg-color-ink); --cg-bg-wash: linear-gradient(180deg, #110b29 0%, var(--cg-color-ink) 70%); --cg-ga-color: rgb(189 20 216 / 0.55); --cg-ga-x: 50%; --cg-ga-y: 38%; --cg-ga-w: 34%; --cg-ga-h: 42%; --cg-gb-color: rgb(102 83 237 / 0.35); --cg-gb-x: 8%; --cg-gb-y: 95%; --cg-gb-w: 55%; --cg-gb-h: 45%; --cg-gc-color: rgb(35 34 121 / 0.55); --cg-gc-x: 95%; --cg-gc-y: 5%; --cg-gc-w: 45%; --cg-gc-h: 40%; } /* Magenta horizon band (BG 9 / 11) */ .cg-bg--dusk { --cg-bg-wash: linear-gradient(180deg, var(--cg-color-ink) 0%, #140b2c 38%, #4c1866 72%, #5e1772 100%); --cg-ga-color: rgb(137 25 128 / 0.75); --cg-ga-x: 25%; --cg-ga-y: 82%; --cg-ga-w: 70%; --cg-ga-h: 38%; --cg-gb-color: rgb(163 27 132 / 0.55); --cg-gb-x: 85%; --cg-gb-y: 95%; --cg-gb-w: 45%; --cg-gb-h: 30%; --cg-gc-color: rgb(102 22 114 / 0.6); --cg-gc-x: 10%; --cg-gc-y: 10%; --cg-gc-w: 30%; --cg-gc-h: 35%; } /* Royal-blue horizon band (BG 12) */ .cg-bg--deep { --cg-bg-wash: linear-gradient(180deg, var(--cg-color-ink) 0%, #120e2e 38%, #24145c 64%, #1f2d77 100%); --cg-ga-color: rgb(45 33 160 / 0.65); --cg-ga-x: 40%; --cg-ga-y: 78%; --cg-ga-w: 75%; --cg-ga-h: 35%; --cg-gb-color: rgb(14 88 110 / 0.5); --cg-gb-x: 98%; --cg-gb-y: 100%; --cg-gb-w: 40%; --cg-gb-h: 35%; --cg-gc-color: rgb(87 28 103 / 0.55); --cg-gc-x: 2%; --cg-gc-y: 100%; --cg-gc-w: 35%; --cg-gc-h: 30%; } /* Deep + pink rim light at the edge (BG 13) */ .cg-bg--ember { --cg-bg-wash: linear-gradient(180deg, var(--cg-color-ink) 0%, #151039 45%, #2d2178 80%, #1b296b 100%); --cg-ga-color: rgb(235 54 132 / 0.75); --cg-ga-x: 100%; --cg-ga-y: 35%; --cg-ga-w: 18%; --cg-ga-h: 40%; --cg-gb-color: rgb(45 33 160 / 0.6); --cg-gb-x: 35%; --cg-gb-y: 80%; --cg-gb-w: 70%; --cg-gb-h: 32%; --cg-gc-color: rgb(87 28 103 / 0.5); --cg-gc-x: 75%; --cg-gc-y: 30%; --cg-gc-w: 30%; --cg-gc-h: 40%; } /* Nearly flat ink — utility bars, footer, quiet sections (BG 2 / 15) */ .cg-bg--ink { --cg-bg-wash: linear-gradient(160deg, #160d37 0%, var(--cg-color-ink) 65%); --cg-ga-color: rgb(49 22 74 / 0.6); --cg-ga-x: 15%; --cg-ga-y: 20%; --cg-ga-w: 50%; --cg-ga-h: 50%; } /* Footer: flat near-black centre with matching indigo glows rising on the left and right edges (sampled from the footer design) */ .cg-bg--footer { --cg-bg-base: #0d091a; --cg-ga-color: rgb(42 14 102 / 0.6); --cg-ga-x: 0%; --cg-ga-y: 65%; --cg-ga-w: 30%; --cg-ga-h: 75%; --cg-gb-color: rgb(42 14 102 / 0.6); --cg-gb-x: 100%; --cg-gb-y: 65%; --cg-gb-w: 30%; --cg-gb-h: 75%; --cg-gc-color: rgb(30 10 70 / 0.35); --cg-gc-x: 50%; --cg-gc-y: 100%; --cg-gc-w: 60%; --cg-gc-h: 25%; } /* ---- Light moods ---- */ /* White with pastel corner glows (BG 4 / 5 / 6 / 17) */ .cg-bg--mist { --cg-bg-base: var(--cg-color-white); --cg-ga-color: rgb(203 189 239 / 0.85); --cg-ga-x: 0%; --cg-ga-y: 0%; --cg-ga-w: 42%; --cg-ga-h: 55%; --cg-gb-color: rgb(120 196 255 / 0.55); --cg-gb-x: 92%; --cg-gb-y: 100%; --cg-gb-w: 30%; --cg-gb-h: 40%; --cg-gc-color: rgb(254 69 131 / 0.35); --cg-gc-x: 100%; --cg-gc-y: 70%; --cg-gc-w: 12%; --cg-gc-h: 35%; } /* White fading to lavender-grey floor (BG 16) */ .cg-bg--haze { --cg-bg-base: var(--cg-color-white); /* purple-to-pink band across the top */ --cg-bg-wash: linear-gradient(180deg, rgb(150 60 205 / 0.55) 0%, rgb(225 110 200 / 0.38) 16%, rgb(240 170 225 / 0.12) 32%, transparent 45%); --cg-ga-color: rgb(95 40 190 / 0.85); --cg-ga-x: 14%; --cg-ga-y: 0%; --cg-ga-w: 48%; --cg-ga-h: 34%; /* deep purple, top left */ --cg-gb-color: rgb(255 95 165 / 0.8); --cg-gb-x: 0%; --cg-gb-y: 88%; --cg-gb-w: 22%; --cg-gb-h: 50%; /* pink, left edge */ --cg-gc-color: rgb(185 125 245 / 0.75); --cg-gc-x: 42%; --cg-gc-y: 100%; --cg-gc-w: 42%; --cg-gc-h: 32%; /* lilac, bottom */ } /* Lavender fading to near-white, soft blue + violet glows on the left ("The cmi Difference") */ .cg-bg--lilac { --cg-bg-base: #f3f2fb; --cg-bg-wash: linear-gradient(180deg, #e4ddf8 0%, #ebe8f9 45%, #f3f2fb 80%, #f6f6fd 100%); --cg-ga-color: rgb(150 205 255 / 0.6); --cg-ga-x: 8%; --cg-ga-y: 38%; --cg-ga-w: 30%; --cg-ga-h: 45%; --cg-gb-color: rgb(206 150 245 / 0.55); --cg-gb-x: 0%; --cg-gb-y: 72%; --cg-gb-w: 18%; --cg-gb-h: 40%; --cg-gc-color: rgb(244 190 232 / 0.35); --cg-gc-x: 62%; --cg-gc-y: 88%; --cg-gc-w: 40%; --cg-gc-h: 30%; } /* ---- Vivid moods ---- */ /* Hot pink field (BG 18) */ .cg-bg--bloom { --cg-bg-base: var(--cg-color-pink); --cg-bg-wash: linear-gradient(115deg, #c22f96 0%, #e8328b 45%, #fd4583 100%); --cg-ga-color: rgb(149 65 171 / 0.8); --cg-ga-x: 35%; --cg-ga-y: 100%; --cg-ga-w: 45%; --cg-ga-h: 45%; --cg-gb-color: rgb(182 33 131 / 0.7); --cg-gb-x: 0%; --cg-gb-y: 30%; --cg-gb-w: 40%; --cg-gb-h: 60%; --cg-gc-color: rgb(253 69 131 / 0.9); --cg-gc-x: 100%; --cg-gc-y: 40%; --cg-gc-w: 40%; --cg-gc-h: 60%; } /* Sky-blue field (BG 19) */ .cg-bg--sky { --cg-bg-base: #4fbbf2; --cg-bg-wash: linear-gradient(120deg, #525acc 0%, #478cdf 30%, #4facee 60%, #65bffd 100%); --cg-ga-color: rgb(126 68 210 / 0.75); --cg-ga-x: 0%; --cg-ga-y: 15%; --cg-ga-w: 35%; --cg-ga-h: 45%; --cg-gb-color: rgb(76 186 255 / 0.9); --cg-gb-x: 65%; --cg-gb-y: 0%; --cg-gb-w: 30%; --cg-gb-h: 60%; --cg-gc-color: rgb(232 0 186 / 0.55); --cg-gc-x: 55%; --cg-gc-y: 100%; --cg-gc-w: 14%; --cg-gc-h: 22%; } /* Purple field with pink orb (BG 20) */ .cg-bg--violet { --cg-bg-base: #7745c4; --cg-bg-wash: linear-gradient(135deg, #5731a0 0%, #7745c4 40%, #945bd8 75%, #9d40d0 100%); --cg-ga-color: rgb(235 54 132 / 0.7); --cg-ga-x: 28%; --cg-ga-y: 50%; --cg-ga-w: 16%; --cg-ga-h: 24%; --cg-gb-color: rgb(127 120 233 / 0.8); --cg-gb-x: 70%; --cg-gb-y: 40%; --cg-gb-w: 35%; --cg-gb-h: 45%; --cg-gc-color: rgb(189 20 216 / 0.6); --cg-gc-x: 90%; --cg-gc-y: 100%; --cg-gc-w: 40%; --cg-gc-h: 35%; } /* ---- Re-aim the primary glow (a) ---- */ .cg-glow--tl { --cg-ga-x: 0%; --cg-ga-y: 0%; } .cg-glow--tr { --cg-ga-x: 100%; --cg-ga-y: 0%; } .cg-glow--bl { --cg-ga-x: 0%; --cg-ga-y: 100%; } .cg-glow--br { --cg-ga-x: 100%; --cg-ga-y: 100%; } .cg-glow--top { --cg-ga-x: 50%; --cg-ga-y: 0%; } .cg-glow--bottom { --cg-ga-x: 50%; --cg-ga-y: 100%; } .cg-glow--left { --cg-ga-x: 0%; --cg-ga-y: 50%; } .cg-glow--right { --cg-ga-x: 100%; --cg-ga-y: 50%; } .cg-glow--center { --cg-ga-x: 50%; --cg-ga-y: 50%; } .cg-glow--wide { --cg-ga-w: 70%; } /* ---- Mirror (bg glows + floats) ---- */ .cg-flip-x { --cg-fx: 1; } .cg-flip-y { --cg-fy: 1; } /* Text color follows the mood automatically */ :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-bg--footer, .cg-bg--bloom, .cg-bg--sky, .cg-bg--violet) { color: var(--cg-color-white); } /* :where() keeps this at element-level specificity, so .cg-text-* and BB module color settings still win inside dark sections */ :where(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-bg--footer, .cg-bg--bloom, .cg-bg--sky, .cg-bg--violet) :is(h1, h2, h3, h4, h5, h6, p, li) { color: inherit; } /* ========================================================================== 5. FLOATING SHAPES — .cg-float Up to three shapes (slots a, b, c) painted on ONE pseudo-element, so there are no extra DOM nodes, and each shape is ~10KB AVIF. Shapes per slot (a, b, c): cg-fa--orb cg-fa--1 … cg-fa--15 (same for cg-fb--*, cg-fc--*) cg-fc--none removes a slot Per slot: place cg-fa--tl tc tr l c r bl bc br nudge cg-fa--x0 … x100 cg-fa--y0 … y100 (steps of 10) size cg-fa--w10 w15 w20 w25 w30 w40 w50 w60 w70 w80 w90 w100 flip cg-fa--flip-x cg-fa--flip-y cg-fa--flip-xy (both) (needs a shape class) Strength: cg-float--soft (.6) cg-float--faint (.35) Blend: cg-float--screen (luminous on dark) Motion: cg-float--drift (slow ambient) cg-float--parallax (scroll, CSS-only) Scale: cg-float--sm cg-float--lg Note: a swap class (cg-fa--1 etc.) on its own also turns shapes on; cg-float isn't required. ========================================================================== */ :is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]), .cg-grain, .cg-bg { position: relative; isolation: isolate; overflow: hidden; overflow: clip; } :where(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]) { --cg-float-scale: 1; --cg-float-opacity: 1; --cg-float-blend: normal; /* Default spots when a slot has a shape but no place class: a = top-left, b = bottom-right, c = top-right corner */ --cg-fa-img: none; --cg-fa-x: -2%; --cg-fa-y: -4%; --cg-fa-w: 22%; --cg-fb-img: none; --cg-fb-x: 102%; --cg-fb-y: 104%; --cg-fb-w: 22%; --cg-fc-img: none; --cg-fc-x: 102%; --cg-fc-y: -4%; --cg-fc-w: 16%; } /* The float layer: generic elements use their own ::before; BB rows use the content-wrap's ::before so shapes sit ABOVE a BB background photo/overlay but BELOW the row content. */ :is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]):not(.fl-row)::before, .fl-row:is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]) > .fl-row-content-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--cg-float-opacity); mix-blend-mode: var(--cg-float-blend); background-image: var(--cg-fa-img), var(--cg-fb-img), var(--cg-fc-img); background-repeat: no-repeat; /* --cg-fa-min / -fb- / -fc- (e.g. 460px): a size floor, so a shape that sits behind a big heading never shrinks smaller than the text on narrower screens */ background-size: max(calc(var(--cg-fa-w) * var(--cg-float-scale)), var(--cg-fa-min, 0px)) auto, max(calc(var(--cg-fb-w) * var(--cg-float-scale)), var(--cg-fb-min, 0px)) auto, max(calc(var(--cg-fc-w) * var(--cg-float-scale)), var(--cg-fc-min, 0px)) auto; background-position: var(--cg-fa-x) var(--cg-fa-y), var(--cg-fb-x) var(--cg-fb-y), var(--cg-fc-x) var(--cg-fc-y); /* mirrors positions AND artwork (a crescent facing right faces left) */ transform: scaleX(calc(1 - 2 * var(--cg-fx, 0))) scaleY(calc(1 - 2 * var(--cg-fy, 0))); } /* Beaver Builder's clearfix makes module ::before display:table, which shrinks the shape layer to nothing on a Box/module — force a full block. */ :is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]):not(.fl-row):not(#cg)::before { display: block; } /* Keep content above shapes */ :is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]):not(.fl-row) > *, :is(.cg-bg, .cg-grain):not(.fl-row) > * { position: relative; z-index: 2; } .fl-row:is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"], .cg-bg, .cg-grain) > .fl-row-content-wrap { position: relative; z-index: 1; } .fl-row:is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]) > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 2; } /* ---- Slot swaps (generated: 15 shapes × 3 slots) ---- Some shapes are cropped flat on one side. Keep that side at (or past) the section edge so the flat cut never shows mid-section: flat LEFT: shape-1, shape-5, shape-15 → x 0% or less flat RIGHT: shape-2, -4, -8, -9, -11, -3, -7 → x 100% or more flat TOP: shape-7, -11, -3 → y 0% or less flat BOTTOM: shape-1, -3, -9 → y 100% or more both sides: shape-6 (use only very large or at an edge) no flat sides: orb, shape-10, -12, -13, -14 — safe anywhere */ .cg-fa--orb { --cg-fa-img: var(--cg-shape-orb); --cg-fa-img-x: var(--cg-shape-orb); --cg-fa-img-y: var(--cg-shape-orb); --cg-fa-img-xy: var(--cg-shape-orb); } .cg-fb--orb { --cg-fb-img: var(--cg-shape-orb); --cg-fb-img-x: var(--cg-shape-orb); --cg-fb-img-y: var(--cg-shape-orb); --cg-fb-img-xy: var(--cg-shape-orb); } .cg-fc--orb { --cg-fc-img: var(--cg-shape-orb); --cg-fc-img-x: var(--cg-shape-orb); --cg-fc-img-y: var(--cg-shape-orb); --cg-fc-img-xy: var(--cg-shape-orb); } .cg-fa--1 { --cg-fa-img: var(--cg-shape-1); --cg-fa-img-x: var(--cg-shape-1-x); --cg-fa-img-y: var(--cg-shape-1-y); --cg-fa-img-xy: var(--cg-shape-1-xy); } .cg-fb--1 { --cg-fb-img: var(--cg-shape-1); --cg-fb-img-x: var(--cg-shape-1-x); --cg-fb-img-y: var(--cg-shape-1-y); --cg-fb-img-xy: var(--cg-shape-1-xy); } .cg-fc--1 { --cg-fc-img: var(--cg-shape-1); --cg-fc-img-x: var(--cg-shape-1-x); --cg-fc-img-y: var(--cg-shape-1-y); --cg-fc-img-xy: var(--cg-shape-1-xy); } .cg-fa--2 { --cg-fa-img: var(--cg-shape-2); --cg-fa-img-x: var(--cg-shape-2-x); --cg-fa-img-y: var(--cg-shape-2-y); --cg-fa-img-xy: var(--cg-shape-2-xy); } .cg-fb--2 { --cg-fb-img: var(--cg-shape-2); --cg-fb-img-x: var(--cg-shape-2-x); --cg-fb-img-y: var(--cg-shape-2-y); --cg-fb-img-xy: var(--cg-shape-2-xy); } .cg-fc--2 { --cg-fc-img: var(--cg-shape-2); --cg-fc-img-x: var(--cg-shape-2-x); --cg-fc-img-y: var(--cg-shape-2-y); --cg-fc-img-xy: var(--cg-shape-2-xy); } .cg-fa--3 { --cg-fa-img: var(--cg-shape-3); --cg-fa-img-x: var(--cg-shape-3-x); --cg-fa-img-y: var(--cg-shape-3-y); --cg-fa-img-xy: var(--cg-shape-3-xy); } .cg-fb--3 { --cg-fb-img: var(--cg-shape-3); --cg-fb-img-x: var(--cg-shape-3-x); --cg-fb-img-y: var(--cg-shape-3-y); --cg-fb-img-xy: var(--cg-shape-3-xy); } .cg-fc--3 { --cg-fc-img: var(--cg-shape-3); --cg-fc-img-x: var(--cg-shape-3-x); --cg-fc-img-y: var(--cg-shape-3-y); --cg-fc-img-xy: var(--cg-shape-3-xy); } .cg-fa--4 { --cg-fa-img: var(--cg-shape-4); --cg-fa-img-x: var(--cg-shape-4-x); --cg-fa-img-y: var(--cg-shape-4-y); --cg-fa-img-xy: var(--cg-shape-4-xy); } .cg-fb--4 { --cg-fb-img: var(--cg-shape-4); --cg-fb-img-x: var(--cg-shape-4-x); --cg-fb-img-y: var(--cg-shape-4-y); --cg-fb-img-xy: var(--cg-shape-4-xy); } .cg-fc--4 { --cg-fc-img: var(--cg-shape-4); --cg-fc-img-x: var(--cg-shape-4-x); --cg-fc-img-y: var(--cg-shape-4-y); --cg-fc-img-xy: var(--cg-shape-4-xy); } .cg-fa--5 { --cg-fa-img: var(--cg-shape-5); --cg-fa-img-x: var(--cg-shape-5-x); --cg-fa-img-y: var(--cg-shape-5-y); --cg-fa-img-xy: var(--cg-shape-5-xy); } .cg-fb--5 { --cg-fb-img: var(--cg-shape-5); --cg-fb-img-x: var(--cg-shape-5-x); --cg-fb-img-y: var(--cg-shape-5-y); --cg-fb-img-xy: var(--cg-shape-5-xy); } .cg-fc--5 { --cg-fc-img: var(--cg-shape-5); --cg-fc-img-x: var(--cg-shape-5-x); --cg-fc-img-y: var(--cg-shape-5-y); --cg-fc-img-xy: var(--cg-shape-5-xy); } .cg-fa--6 { --cg-fa-img: var(--cg-shape-6); --cg-fa-img-x: var(--cg-shape-6-x); --cg-fa-img-y: var(--cg-shape-6-y); --cg-fa-img-xy: var(--cg-shape-6-xy); } .cg-fb--6 { --cg-fb-img: var(--cg-shape-6); --cg-fb-img-x: var(--cg-shape-6-x); --cg-fb-img-y: var(--cg-shape-6-y); --cg-fb-img-xy: var(--cg-shape-6-xy); } .cg-fc--6 { --cg-fc-img: var(--cg-shape-6); --cg-fc-img-x: var(--cg-shape-6-x); --cg-fc-img-y: var(--cg-shape-6-y); --cg-fc-img-xy: var(--cg-shape-6-xy); } .cg-fa--7 { --cg-fa-img: var(--cg-shape-7); --cg-fa-img-x: var(--cg-shape-7-x); --cg-fa-img-y: var(--cg-shape-7-y); --cg-fa-img-xy: var(--cg-shape-7-xy); } .cg-fb--7 { --cg-fb-img: var(--cg-shape-7); --cg-fb-img-x: var(--cg-shape-7-x); --cg-fb-img-y: var(--cg-shape-7-y); --cg-fb-img-xy: var(--cg-shape-7-xy); } .cg-fc--7 { --cg-fc-img: var(--cg-shape-7); --cg-fc-img-x: var(--cg-shape-7-x); --cg-fc-img-y: var(--cg-shape-7-y); --cg-fc-img-xy: var(--cg-shape-7-xy); } .cg-fa--8 { --cg-fa-img: var(--cg-shape-8); --cg-fa-img-x: var(--cg-shape-8-x); --cg-fa-img-y: var(--cg-shape-8-y); --cg-fa-img-xy: var(--cg-shape-8-xy); } .cg-fb--8 { --cg-fb-img: var(--cg-shape-8); --cg-fb-img-x: var(--cg-shape-8-x); --cg-fb-img-y: var(--cg-shape-8-y); --cg-fb-img-xy: var(--cg-shape-8-xy); } .cg-fc--8 { --cg-fc-img: var(--cg-shape-8); --cg-fc-img-x: var(--cg-shape-8-x); --cg-fc-img-y: var(--cg-shape-8-y); --cg-fc-img-xy: var(--cg-shape-8-xy); } .cg-fa--9 { --cg-fa-img: var(--cg-shape-9); --cg-fa-img-x: var(--cg-shape-9-x); --cg-fa-img-y: var(--cg-shape-9-y); --cg-fa-img-xy: var(--cg-shape-9-xy); } .cg-fb--9 { --cg-fb-img: var(--cg-shape-9); --cg-fb-img-x: var(--cg-shape-9-x); --cg-fb-img-y: var(--cg-shape-9-y); --cg-fb-img-xy: var(--cg-shape-9-xy); } .cg-fc--9 { --cg-fc-img: var(--cg-shape-9); --cg-fc-img-x: var(--cg-shape-9-x); --cg-fc-img-y: var(--cg-shape-9-y); --cg-fc-img-xy: var(--cg-shape-9-xy); } .cg-fa--10 { --cg-fa-img: var(--cg-shape-10); --cg-fa-img-x: var(--cg-shape-10-x); --cg-fa-img-y: var(--cg-shape-10-y); --cg-fa-img-xy: var(--cg-shape-10-xy); } .cg-fb--10 { --cg-fb-img: var(--cg-shape-10); --cg-fb-img-x: var(--cg-shape-10-x); --cg-fb-img-y: var(--cg-shape-10-y); --cg-fb-img-xy: var(--cg-shape-10-xy); } .cg-fc--10 { --cg-fc-img: var(--cg-shape-10); --cg-fc-img-x: var(--cg-shape-10-x); --cg-fc-img-y: var(--cg-shape-10-y); --cg-fc-img-xy: var(--cg-shape-10-xy); } .cg-fa--11 { --cg-fa-img: var(--cg-shape-11); --cg-fa-img-x: var(--cg-shape-11-x); --cg-fa-img-y: var(--cg-shape-11-y); --cg-fa-img-xy: var(--cg-shape-11-xy); } .cg-fb--11 { --cg-fb-img: var(--cg-shape-11); --cg-fb-img-x: var(--cg-shape-11-x); --cg-fb-img-y: var(--cg-shape-11-y); --cg-fb-img-xy: var(--cg-shape-11-xy); } .cg-fc--11 { --cg-fc-img: var(--cg-shape-11); --cg-fc-img-x: var(--cg-shape-11-x); --cg-fc-img-y: var(--cg-shape-11-y); --cg-fc-img-xy: var(--cg-shape-11-xy); } .cg-fa--12 { --cg-fa-img: var(--cg-shape-12); --cg-fa-img-x: var(--cg-shape-12-x); --cg-fa-img-y: var(--cg-shape-12-y); --cg-fa-img-xy: var(--cg-shape-12-xy); } .cg-fb--12 { --cg-fb-img: var(--cg-shape-12); --cg-fb-img-x: var(--cg-shape-12-x); --cg-fb-img-y: var(--cg-shape-12-y); --cg-fb-img-xy: var(--cg-shape-12-xy); } .cg-fc--12 { --cg-fc-img: var(--cg-shape-12); --cg-fc-img-x: var(--cg-shape-12-x); --cg-fc-img-y: var(--cg-shape-12-y); --cg-fc-img-xy: var(--cg-shape-12-xy); } .cg-fa--13 { --cg-fa-img: var(--cg-shape-13); --cg-fa-img-x: var(--cg-shape-13-x); --cg-fa-img-y: var(--cg-shape-13-y); --cg-fa-img-xy: var(--cg-shape-13-xy); } .cg-fb--13 { --cg-fb-img: var(--cg-shape-13); --cg-fb-img-x: var(--cg-shape-13-x); --cg-fb-img-y: var(--cg-shape-13-y); --cg-fb-img-xy: var(--cg-shape-13-xy); } .cg-fc--13 { --cg-fc-img: var(--cg-shape-13); --cg-fc-img-x: var(--cg-shape-13-x); --cg-fc-img-y: var(--cg-shape-13-y); --cg-fc-img-xy: var(--cg-shape-13-xy); } .cg-fa--14 { --cg-fa-img: var(--cg-shape-14); --cg-fa-img-x: var(--cg-shape-14-x); --cg-fa-img-y: var(--cg-shape-14-y); --cg-fa-img-xy: var(--cg-shape-14-xy); } .cg-fb--14 { --cg-fb-img: var(--cg-shape-14); --cg-fb-img-x: var(--cg-shape-14-x); --cg-fb-img-y: var(--cg-shape-14-y); --cg-fb-img-xy: var(--cg-shape-14-xy); } .cg-fc--14 { --cg-fc-img: var(--cg-shape-14); --cg-fc-img-x: var(--cg-shape-14-x); --cg-fc-img-y: var(--cg-shape-14-y); --cg-fc-img-xy: var(--cg-shape-14-xy); } .cg-fa--15 { --cg-fa-img: var(--cg-shape-15); --cg-fa-img-x: var(--cg-shape-15-x); --cg-fa-img-y: var(--cg-shape-15-y); --cg-fa-img-xy: var(--cg-shape-15-xy); } .cg-fb--15 { --cg-fb-img: var(--cg-shape-15); --cg-fb-img-x: var(--cg-shape-15-x); --cg-fb-img-y: var(--cg-shape-15-y); --cg-fb-img-xy: var(--cg-shape-15-xy); } .cg-fc--15 { --cg-fc-img: var(--cg-shape-15); --cg-fc-img-x: var(--cg-shape-15-x); --cg-fc-img-y: var(--cg-shape-15-y); --cg-fc-img-xy: var(--cg-shape-15-xy); } .cg-fa--none { --cg-fa-img: none; } .cg-fb--none { --cg-fb-img: none; } .cg-fc--none { --cg-fc-img: none; } /* ---- Per-slot placement: cg-fa--tr, cg-fb--bc … (a, b or c) ---- tl tc tr / l c r / bl bc br. Overrides the slot's default spot. */ .cg-fa--tl { --cg-fa-x: -2%; --cg-fa-y: -4%; } .cg-fb--tl { --cg-fb-x: -2%; --cg-fb-y: -4%; } .cg-fc--tl { --cg-fc-x: -2%; --cg-fc-y: -4%; } .cg-fa--tc { --cg-fa-x: 50%; --cg-fa-y: -4%; } .cg-fb--tc { --cg-fb-x: 50%; --cg-fb-y: -4%; } .cg-fc--tc { --cg-fc-x: 50%; --cg-fc-y: -4%; } .cg-fa--tr { --cg-fa-x: 102%; --cg-fa-y: -4%; } .cg-fb--tr { --cg-fb-x: 102%; --cg-fb-y: -4%; } .cg-fc--tr { --cg-fc-x: 102%; --cg-fc-y: -4%; } .cg-fa--l { --cg-fa-x: -2%; --cg-fa-y: 50%; } .cg-fb--l { --cg-fb-x: -2%; --cg-fb-y: 50%; } .cg-fc--l { --cg-fc-x: -2%; --cg-fc-y: 50%; } .cg-fa--c { --cg-fa-x: 50%; --cg-fa-y: 50%; } .cg-fb--c { --cg-fb-x: 50%; --cg-fb-y: 50%; } .cg-fc--c { --cg-fc-x: 50%; --cg-fc-y: 50%; } .cg-fa--r { --cg-fa-x: 102%; --cg-fa-y: 50%; } .cg-fb--r { --cg-fb-x: 102%; --cg-fb-y: 50%; } .cg-fc--r { --cg-fc-x: 102%; --cg-fc-y: 50%; } .cg-fa--bl { --cg-fa-x: -2%; --cg-fa-y: 104%; } .cg-fb--bl { --cg-fb-x: -2%; --cg-fb-y: 104%; } .cg-fc--bl { --cg-fc-x: -2%; --cg-fc-y: 104%; } .cg-fa--bc { --cg-fa-x: 50%; --cg-fa-y: 104%; } .cg-fb--bc { --cg-fb-x: 50%; --cg-fb-y: 104%; } .cg-fc--bc { --cg-fc-x: 50%; --cg-fc-y: 104%; } .cg-fa--br { --cg-fa-x: 102%; --cg-fa-y: 104%; } .cg-fb--br { --cg-fb-x: 102%; --cg-fb-y: 104%; } .cg-fc--br { --cg-fc-x: 102%; --cg-fc-y: 104%; } /* ---- Per-slot fine position: cg-fa--x0 … x100, cg-fa--y0 … y100 ---- x0 = flush left, x50 = centred, x100 = flush right (same for y, top→bottom). Combine with any shape class; overrides the preset spot on that axis only. */ .cg-fa--x0 { --cg-fa-x: 0%; } .cg-fb--x0 { --cg-fb-x: 0%; } .cg-fc--x0 { --cg-fc-x: 0%; } .cg-fa--x10 { --cg-fa-x: 10%; } .cg-fb--x10 { --cg-fb-x: 10%; } .cg-fc--x10 { --cg-fc-x: 10%; } .cg-fa--x20 { --cg-fa-x: 20%; } .cg-fb--x20 { --cg-fb-x: 20%; } .cg-fc--x20 { --cg-fc-x: 20%; } .cg-fa--x30 { --cg-fa-x: 30%; } .cg-fb--x30 { --cg-fb-x: 30%; } .cg-fc--x30 { --cg-fc-x: 30%; } .cg-fa--x40 { --cg-fa-x: 40%; } .cg-fb--x40 { --cg-fb-x: 40%; } .cg-fc--x40 { --cg-fc-x: 40%; } .cg-fa--x50 { --cg-fa-x: 50%; } .cg-fb--x50 { --cg-fb-x: 50%; } .cg-fc--x50 { --cg-fc-x: 50%; } .cg-fa--x55 { --cg-fa-x: 55%; } .cg-fb--x55 { --cg-fb-x: 55%; } .cg-fc--x55 { --cg-fc-x: 55%; } .cg-fa--x60 { --cg-fa-x: 60%; } .cg-fb--x60 { --cg-fb-x: 60%; } .cg-fc--x60 { --cg-fc-x: 60%; } .cg-fa--x70 { --cg-fa-x: 70%; } .cg-fb--x70 { --cg-fb-x: 70%; } .cg-fc--x70 { --cg-fc-x: 70%; } .cg-fa--x80 { --cg-fa-x: 80%; } .cg-fb--x80 { --cg-fb-x: 80%; } .cg-fc--x80 { --cg-fc-x: 80%; } .cg-fa--x90 { --cg-fa-x: 90%; } .cg-fb--x90 { --cg-fb-x: 90%; } .cg-fc--x90 { --cg-fc-x: 90%; } .cg-fa--x100 { --cg-fa-x: 100%; } .cg-fb--x100 { --cg-fb-x: 100%; } .cg-fc--x100 { --cg-fc-x: 100%; } .cg-fa--y0 { --cg-fa-y: 0%; } .cg-fb--y0 { --cg-fb-y: 0%; } .cg-fc--y0 { --cg-fc-y: 0%; } .cg-fa--y10 { --cg-fa-y: 10%; } .cg-fb--y10 { --cg-fb-y: 10%; } .cg-fc--y10 { --cg-fc-y: 10%; } .cg-fa--y20 { --cg-fa-y: 20%; } .cg-fb--y20 { --cg-fb-y: 20%; } .cg-fc--y20 { --cg-fc-y: 20%; } .cg-fa--y30 { --cg-fa-y: 30%; } .cg-fb--y30 { --cg-fb-y: 30%; } .cg-fc--y30 { --cg-fc-y: 30%; } .cg-fa--y40 { --cg-fa-y: 40%; } .cg-fb--y40 { --cg-fb-y: 40%; } .cg-fc--y40 { --cg-fc-y: 40%; } .cg-fa--y50 { --cg-fa-y: 50%; } .cg-fb--y50 { --cg-fb-y: 50%; } .cg-fc--y50 { --cg-fc-y: 50%; } .cg-fa--y60 { --cg-fa-y: 60%; } .cg-fb--y60 { --cg-fb-y: 60%; } .cg-fc--y60 { --cg-fc-y: 60%; } .cg-fa--y70 { --cg-fa-y: 70%; } .cg-fb--y70 { --cg-fb-y: 70%; } .cg-fc--y70 { --cg-fc-y: 70%; } .cg-fa--y80 { --cg-fa-y: 80%; } .cg-fb--y80 { --cg-fb-y: 80%; } .cg-fc--y80 { --cg-fc-y: 80%; } .cg-fa--y90 { --cg-fa-y: 90%; } .cg-fb--y90 { --cg-fb-y: 90%; } .cg-fc--y90 { --cg-fc-y: 90%; } .cg-fa--y100 { --cg-fa-y: 100%; } .cg-fb--y100 { --cg-fb-y: 100%; } .cg-fc--y100 { --cg-fc-y: 100%; } /* ---- Per-slot size (% of the row's width): cg-fa--w10 … cg-fa--w100 ---- */ .cg-fa--w10 { --cg-fa-w: 10%; } .cg-fb--w10 { --cg-fb-w: 10%; } .cg-fc--w10 { --cg-fc-w: 10%; } .cg-fa--w15 { --cg-fa-w: 15%; } .cg-fb--w15 { --cg-fb-w: 15%; } .cg-fc--w15 { --cg-fc-w: 15%; } .cg-fa--w20 { --cg-fa-w: 20%; } .cg-fb--w20 { --cg-fb-w: 20%; } .cg-fc--w20 { --cg-fc-w: 20%; } .cg-fa--w25 { --cg-fa-w: 25%; } .cg-fb--w25 { --cg-fb-w: 25%; } .cg-fc--w25 { --cg-fc-w: 25%; } .cg-fa--w30 { --cg-fa-w: 30%; } .cg-fb--w30 { --cg-fb-w: 30%; } .cg-fc--w30 { --cg-fc-w: 30%; } .cg-fa--w40 { --cg-fa-w: 40%; } .cg-fb--w40 { --cg-fb-w: 40%; } .cg-fc--w40 { --cg-fc-w: 40%; } .cg-fa--w50 { --cg-fa-w: 50%; } .cg-fb--w50 { --cg-fb-w: 50%; } .cg-fc--w50 { --cg-fc-w: 50%; } .cg-fa--w60 { --cg-fa-w: 60%; } .cg-fb--w60 { --cg-fb-w: 60%; } .cg-fc--w60 { --cg-fc-w: 60%; } .cg-fa--w70 { --cg-fa-w: 70%; } .cg-fb--w70 { --cg-fb-w: 70%; } .cg-fc--w70 { --cg-fc-w: 70%; } .cg-fa--w80 { --cg-fa-w: 80%; } .cg-fb--w80 { --cg-fb-w: 80%; } .cg-fc--w80 { --cg-fc-w: 80%; } .cg-fa--w90 { --cg-fa-w: 90%; } .cg-fb--w90 { --cg-fb-w: 90%; } .cg-fc--w90 { --cg-fc-w: 90%; } .cg-fa--w100 { --cg-fa-w: 100%; } .cg-fb--w100 { --cg-fb-w: 100%; } .cg-fc--w100 { --cg-fc-w: 100%; } /* ---- Per-slot flip: cg-fa--flip-x (left↔right), cg-fa--flip-y (upside down), both together = rotated 180. Use with a shape class, e.g. "cg-fa--1 cg-fa--flip-y". Swaps in pre-flipped artwork, so the other slots and the glows are untouched. */ .cg-fa--flip-x { --cg-fa-img: var(--cg-fa-img-x); } .cg-fb--flip-x { --cg-fb-img: var(--cg-fb-img-x); } .cg-fc--flip-x { --cg-fc-img: var(--cg-fc-img-x); } .cg-fa--flip-y { --cg-fa-img: var(--cg-fa-img-y); } .cg-fb--flip-y { --cg-fb-img: var(--cg-fb-img-y); } .cg-fc--flip-y { --cg-fc-img: var(--cg-fc-img-y); } /* both axes (= rotated 180): cg-fa--flip-xy, or flip-x + flip-y together */ :is(.cg-fa--flip-xy, .cg-fa--flip-x.cg-fa--flip-y) { --cg-fa-img: var(--cg-fa-img-xy); } :is(.cg-fb--flip-xy, .cg-fb--flip-x.cg-fb--flip-y) { --cg-fb-img: var(--cg-fb-img-xy); } :is(.cg-fc--flip-xy, .cg-fc--flip-x.cg-fc--flip-y) { --cg-fc-img: var(--cg-fc-img-xy); } /* ---- Modifiers ---- */ .cg-float--soft { --cg-float-opacity: 0.6; } .cg-float--faint { --cg-float-opacity: 0.35; } .cg-float--screen { --cg-float-blend: screen; } .cg-float--sm { --cg-float-scale: 0.75; } .cg-float--lg { --cg-float-scale: 1.3; } /* Shapes read too small on narrow screens — scale them up */ @media (max-width: 767px) { :is(.cg-float, [class*="cg-fa--"], [class*="cg-fb--"], [class*="cg-fc--"]) { --cg-float-scale: 1.7; } .cg-float.cg-float--sm { --cg-float-scale: 1.3; } .cg-float.cg-float--lg { --cg-float-scale: 2.1; } } /* Hide a row's shapes where Beaver Builder switches to its stacked (mobile) layout: at 1000px and below (BB uses max-width: 1000px). Tune the breakpoint here if BB's setting changes. */ @media (max-width: 1000px) { .cg-float--hide-mobile::before, .fl-row.cg-float--hide-mobile > .fl-row-content-wrap::before { display: none; } } /* ========================================================================== 6. TEXTURE — .cg-grain Film grain on the section's ::after (inline SVG, no requests). Light moods (mist, haze, lilac) use a finer grain that speckles the colour and leaves white areas clean, like the design. ========================================================================== */ .cg-grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--cg-grain) 0 0 / 220px 220px repeat; mix-blend-mode: overlay; opacity: var(--cg-texture-opacity, 0.16); } /* BB's clearfix sets .fl-row::after to display:table, which shrinks the grain to nothing. Two classes so this wins whatever order the CSS loads in. */ .fl-row.cg-grain::after { display: block; } /* Grain on a row WITHOUT a cg-bg mood (e.g. a white row with a shape): the row has nothing behind the grain for it to blend into, so it printed raw grey speckle over the white. Here the grain moves onto the content layer — above the shapes, below the text — over a white base (BB's own row background still wins), so white stays clean and only the shapes get speckled. */ .fl-row.cg-grain:not(.cg-bg, [class*="cg-fade"], [class*="cg-overlay"])::after { display: none; } :where(.fl-row.cg-grain:not(.cg-bg, [class*="cg-fade"], [class*="cg-overlay"])) > .fl-row-content-wrap { background-color: var(--cg-grain-base, #fff); } .fl-row.cg-grain:not(.cg-bg, [class*="cg-fade"], [class*="cg-overlay"]) > .fl-row-content-wrap::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cg-grain-fine) 0 0 / 220px 220px repeat; mix-blend-mode: overlay; opacity: var(--cg-texture-opacity, 0.35); } /* grain on light sections needs a softer, darker touch */ :is(.cg-bg--mist, .cg-bg--haze, .cg-bg--lilac).cg-grain::after { background-image: var(--cg-grain-fine); --cg-texture-opacity: 0.35; } /* Fine grain on any row (e.g. white rows with a shape): cg-grain cg-grain--fine. Adds crisp grain on top of the shapes, so they read grainy, not blurry. */ .cg-grain.cg-grain--fine::after { background-image: var(--cg-grain-fine); --cg-texture-opacity: 0.35; } /* Strength: cg-grain--soft cg-grain--strong (or set --cg-texture-opacity) */ .cg-grain.cg-grain--soft::after { --cg-texture-opacity: 0.18; } .cg-grain.cg-grain--strong::after { --cg-texture-opacity: 0.5; } /* ========================================================================== 7. COMPONENTS ========================================================================== */ /* ---- Overlays: gradient over a photo or row background ---- Add to a BB Photo module, a BB row (instead of BB's own overlay setting), or use [cg_image overlay="edge"] / [cg_promo_image overlay="fade"]. cg-overlay--edge purple glow from the top-left corner (matches the photo rim) cg-overlay--fade dark fade at the bottom (text or a name over the photo) cg-overlay--side dark fade from the left (hero text on the left) cg-overlay--side-r dark fade from the right cg-overlay--tint violet → magenta wash cg-overlay--duo pink → purple color-grade (soft-light) cg-overlay--dark even dark scrim Full-row colour washes from the design (dark band at the top for the header, colour glowing up from the bottom; add cg-grain for the film grain): cg-overlay--purple ink → magenta, pink bottom-left, indigo right cg-overlay--blue ink → royal blue, violet bottom-left, teal right cg-overlay--purple-haze dark top → silver haze → magenta (light version) cg-overlay--blue-haze dark top → silver haze → blue (light version) Strength: cg-overlay--soft cg-overlay--strong Any cg-overlay--* class switches the overlay on (plain cg-overlay optional). */ .cg-overlay { --cg-overlay: linear-gradient(135deg, rgb(153 54 255 / 0.55), rgb(23 16 51 / 0) 60%); --cg-overlay-opacity: 1; --cg-overlay-blend: normal; --cg-overlay-radius: 0; --cg-overlay-inset: 0; } .cg-overlay--edge { --cg-overlay: linear-gradient(135deg, rgb(153 54 255 / 0.55), rgb(23 16 51 / 0) 60%); } .cg-overlay--fade { --cg-overlay: linear-gradient(to top, rgb(13 9 26 / 0.9), rgb(13 9 26 / 0.35) 35%, rgb(13 9 26 / 0) 65%); } .cg-overlay--side { --cg-overlay: linear-gradient(to right, rgb(13 9 26 / 0.92), rgb(13 9 26 / 0.6) 40%, rgb(13 9 26 / 0) 75%); } .cg-overlay--side-r { --cg-overlay: linear-gradient(to left, rgb(13 9 26 / 0.92), rgb(13 9 26 / 0.6) 40%, rgb(13 9 26 / 0) 75%); } .cg-overlay--tint { --cg-overlay: linear-gradient(135deg, rgb(126 68 210 / 0.45), rgb(189 20 216 / 0.25)); } .cg-overlay--duo { --cg-overlay: linear-gradient(135deg, var(--cg-color-pink-hot), var(--cg-color-purple)); --cg-overlay-blend: soft-light; } .cg-overlay--dark { --cg-overlay: linear-gradient(rgb(13 9 26 / 0.55), rgb(13 9 26 / 0.55)); } .cg-overlay--purple { --cg-overlay: linear-gradient(to bottom, rgb(13 9 26 / 0.96) 0%, rgb(13 9 26 / 0.9) 22%, rgb(30 10 60 / 0.55) 38%, rgb(30 10 60 / 0) 55%), radial-gradient(42% 40% at 4% 92%, rgb(235 45 120 / 0.85), rgb(235 45 120 / 0) 100%), radial-gradient(70% 50% at 38% 68%, rgb(185 25 205 / 0.85), rgb(185 25 205 / 0) 100%), radial-gradient(40% 70% at 102% 72%, rgb(80 45 175 / 0.85), rgb(80 45 175 / 0) 100%), linear-gradient(rgb(95 25 150 / 0.55), rgb(95 25 150 / 0.55)); } .cg-overlay--blue { --cg-overlay: linear-gradient(to bottom, rgb(13 9 26 / 0.96) 0%, rgb(13 9 26 / 0.9) 25%, rgb(20 20 80 / 0.5) 40%, rgb(20 20 80 / 0) 56%), radial-gradient(40% 40% at 4% 98%, rgb(140 50 220 / 0.85), rgb(140 50 220 / 0) 100%), radial-gradient(42% 45% at 100% 96%, rgb(30 110 125 / 0.85), rgb(30 110 125 / 0) 100%), radial-gradient(75% 55% at 45% 62%, rgb(40 60 215 / 0.85), rgb(40 60 215 / 0) 100%), linear-gradient(rgb(35 45 150 / 0.55), rgb(35 45 150 / 0.55)); } .cg-overlay--purple-haze { --cg-overlay: linear-gradient(to bottom, rgb(40 36 52 / 0.95) 0%, rgb(90 86 98 / 0.8) 9%, rgb(185 182 192 / 0.85) 17%, rgb(190 186 198 / 0.8) 30%, rgb(190 186 198 / 0) 52%), radial-gradient(40% 40% at 4% 92%, rgb(235 85 155 / 0.95), rgb(235 85 155 / 0) 100%), radial-gradient(75% 55% at 40% 70%, rgb(205 85 215 / 0.95), rgb(205 85 215 / 0) 100%), radial-gradient(40% 70% at 102% 78%, rgb(125 105 180 / 0.95), rgb(125 105 180 / 0) 100%), linear-gradient(to bottom, rgb(190 186 198 / 0.9) 30%, rgb(185 140 200 / 0.9) 60%, rgb(150 110 170 / 0.9)); } .cg-overlay--blue-haze { --cg-overlay: linear-gradient(to bottom, rgb(40 36 52 / 0.95) 0%, rgb(90 86 98 / 0.8) 9%, rgb(185 182 192 / 0.85) 17%, rgb(190 186 198 / 0.8) 30%, rgb(190 186 198 / 0) 52%), radial-gradient(38% 40% at 4% 98%, rgb(165 95 225 / 0.95), rgb(165 95 225 / 0) 100%), radial-gradient(42% 45% at 100% 96%, rgb(105 155 170 / 0.95), rgb(105 155 170 / 0) 100%), radial-gradient(78% 55% at 42% 68%, rgb(90 100 225 / 0.95), rgb(90 100 225 / 0) 100%), linear-gradient(to bottom, rgb(190 186 198 / 0.9) 30%, rgb(140 150 205 / 0.9) 60%, rgb(110 120 170 / 0.9)); } /* The four washes sit a little lighter so the photo shows through. Tune per row: --cg-overlay-opacity (0–1); cg-overlay--soft = 0.6, --strong = 1 */ :is(.cg-overlay--purple, .cg-overlay--blue, .cg-overlay--purple-haze, .cg-overlay--blue-haze) { --cg-overlay-opacity: 0.75; } .cg-overlay--soft { --cg-overlay-opacity: 0.55; } .cg-overlay--strong { --cg-overlay-opacity: 1; --cg-overlay-blend: normal; } .cg-overlay--strong.cg-overlay--duo { --cg-overlay-blend: overlay; } /* ---- Fades: a row (or photo) fades into a colour at the top and/or bottom ---- Use instead of BB's row overlay setting (that shares this same layer). cg-fade-bottom cg-fade-top cg-fade-both Colour: cg-fade--ink (default) --dark (#0d0818) --navy --white --lilac --purple or set --cg-fade-color. Length: --cg-fade-size (default 35%) Different colour top vs bottom (cg-fade-both): cg-fade--top-navy cg-fade--bottom-white (any colour name above) or set --cg-fade-color-top / --cg-fade-color-bottom Works with cg-overlay on the same row: the fade sits on top of it. Over the shapes: add cg-fade--over, and the fade covers the floating shapes too, so they melt into the next section (content stays on top). With cg-overlay on the same row, that tint moves above the shapes too. */ .cg-fade--ink { --cg-fade-color: #0d091a; } .cg-fade--dark { --cg-fade-color: #0d0818; } .cg-fade--navy { --cg-fade-color: #171033; } .cg-fade--white { --cg-fade-color: #ffffff; } .cg-fade--lilac { --cg-fade-color: #f3f2fb; } .cg-fade--purple { --cg-fade-color: rgb(126 68 210 / 0.85); } .cg-fade--top-ink { --cg-fade-color-top: #0d091a; } .cg-fade--bottom-ink { --cg-fade-color-bottom: #0d091a; } .cg-fade--top-dark { --cg-fade-color-top: #0d0818; } .cg-fade--bottom-dark { --cg-fade-color-bottom: #0d0818; } .cg-fade--top-navy { --cg-fade-color-top: #171033; } .cg-fade--bottom-navy { --cg-fade-color-bottom: #171033; } .cg-fade--top-white { --cg-fade-color-top: #ffffff; } .cg-fade--bottom-white { --cg-fade-color-bottom: #ffffff; } .cg-fade--top-lilac { --cg-fade-color-top: #f3f2fb; } .cg-fade--bottom-lilac { --cg-fade-color-bottom: #f3f2fb; } .cg-fade--top-purple { --cg-fade-color-top: rgb(126 68 210 / 0.85); } .cg-fade--bottom-purple { --cg-fade-color-bottom: rgb(126 68 210 / 0.85); } .cg-fade--over { --cg-fade-z: 1; } /* same layer as the shapes, painted after them */ .cg-fade-bottom { --cg-fade-layer: linear-gradient(to bottom, transparent calc(100% - var(--cg-fade-size, 35%)), var(--cg-fade-color-bottom, var(--cg-fade-color, #0d091a)) 100%); } .cg-fade-top { --cg-fade-layer: linear-gradient(to top, transparent calc(100% - var(--cg-fade-size, 35%)), var(--cg-fade-color-top, var(--cg-fade-color, #0d091a)) 100%); } .cg-fade-both { --cg-fade-layer: linear-gradient(to bottom, var(--cg-fade-color-top, var(--cg-fade-color, #0d091a)) 0%, transparent var(--cg-fade-size, 35%), transparent calc(100% - var(--cg-fade-size, 35%)), var(--cg-fade-color-bottom, var(--cg-fade-color, #0d091a)) 100%); } /* Curved, softer fades: add cg-fade--curve to any fade (top, bottom or both). The fade dips in the middle and sweeps up into the corners (a crescent). Tune: --cg-fade-size (height), --cg-fade-curve (width of the curve, default 140%; lower = deeper) */ .cg-fade--curve { --cg-fb: var(--cg-fade-color-bottom, var(--cg-fade-color, #0d091a)); --cg-ft: var(--cg-fade-color-top, var(--cg-fade-color, #0d091a)); --cg-fade-bowl: ellipse var(--cg-fade-curve, 140%) calc(100% - var(--cg-fs) * 0.25); --cg-fs: var(--cg-fade-size, 35%); --cg-fade-curve-bottom: radial-gradient(var(--cg-fade-bowl) at 50% 0%, transparent calc(100% - var(--cg-fs)), color-mix(in srgb, var(--cg-fb) 22%, transparent) calc(100% - var(--cg-fs) * 0.6), color-mix(in srgb, var(--cg-fb) 60%, transparent) calc(100% - var(--cg-fs) * 0.3), var(--cg-fb) 100%); --cg-fade-curve-top: radial-gradient(var(--cg-fade-bowl) at 50% 100%, transparent calc(100% - var(--cg-fs)), color-mix(in srgb, var(--cg-ft) 22%, transparent) calc(100% - var(--cg-fs) * 0.6), color-mix(in srgb, var(--cg-ft) 60%, transparent) calc(100% - var(--cg-fs) * 0.3), var(--cg-ft) 100%); } .cg-fade-bottom.cg-fade--curve { --cg-fade-layer: var(--cg-fade-curve-bottom); } .cg-fade-top.cg-fade--curve { --cg-fade-layer: var(--cg-fade-curve-top); } .cg-fade-both.cg-fade--curve { --cg-fade-layer: var(--cg-fade-curve-top), var(--cg-fade-curve-bottom); } /* Where the layer sits (overlay + fade share it) */ :is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both):not(.fl-row):not(.fl-module), .fl-module:is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both) .fl-photo-content, .fl-row:is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both) > .fl-row-content-wrap { position: relative; } :is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both):not(.fl-row):not(.fl-module)::after, .fl-module:is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both) .fl-photo-content::after, .fl-row:is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both) > .fl-row-content-wrap::after { content: ""; position: absolute; inset: var(--cg-overlay-inset, 0); z-index: var(--cg-fade-z, 0); /* rows: under the shapes (1) and content (2) */ pointer-events: none; border-radius: var(--cg-overlay-radius, 0); background: var(--cg-fade-layer, linear-gradient(transparent, transparent)), var(--cg-overlay, linear-gradient(transparent, transparent)); opacity: var(--cg-overlay-opacity, 1); mix-blend-mode: var(--cg-overlay-blend, normal); } .fl-row:is(.cg-overlay, [class*="cg-overlay--"], .cg-fade-bottom, .cg-fade-top, .cg-fade-both) > .fl-row-content-wrap > .fl-row-content { position: relative; z-index: 2; } /* Photo rows (overlay + fade, or lines without a cg-bg mood): the fade and lines get their own layer ABOVE the overlay, so the fade isn't weakened by the overlay's opacity and fully covers it. Shapes and content stay on top (cg-fade--over still puts the fade over the shapes). */ .fl-row:is([class*="cg-overlay"]):is(.cg-fade-bottom, .cg-fade-top, .cg-fade-both):not(.cg-grain) > .fl-row-content-wrap::after { background: var(--cg-overlay, transparent); } .fl-row:is([class*="cg-overlay"]:is(.cg-fade-bottom, .cg-fade-top, .cg-fade-both), .cg-lines:not(.cg-bg)):not(.cg-grain) { position: relative; } .fl-row:is([class*="cg-overlay"]:is(.cg-fade-bottom, .cg-fade-top, .cg-fade-both), .cg-lines:not(.cg-bg)):not(.cg-grain)::after { content: ""; display: block; position: absolute; inset: 0; z-index: var(--cg-fade-z, 0); pointer-events: none; background-image: var(--cg-lines-img, linear-gradient(transparent, transparent)), var(--cg-lines2-img, linear-gradient(transparent, transparent)), var(--cg-fade-layer, linear-gradient(transparent, transparent)); background-repeat: no-repeat; background-size: var(--cg-lines-size, 0 0), var(--cg-lines-size, 0 0), 100% 100%, 100% 100%; /* 4th: cg-fade-both + curve is two layers */ background-position: var(--cg-lines-x, 0%) var(--cg-lines-y, 0%), var(--cg-lines2-x, 0%) var(--cg-lines2-y, 0%), 0 0, 0 0; } /* Match rounded photos */ .cg-overlay:has(> .cg-photo) { --cg-overlay-radius: var(--cg-photo-radius, var(--cg-radius-lg)); } .cg-overlay:not(.fl-row):not(.fl-module) > img { display: block; } /* ---- Hero photos: cg-pic on a BB Photo module ---- Rounded, soft shadow and an idle bob (--cg-pic-dur, default 4s per cycle). cg-pic--hover lift + glow on hover (automatic when the photo is a link) cg-pic--still no idle bob cg-pic--a … --d stagger the bob so neighbours don't move in sync The motion uses the CSS "translate" property, not "transform", so it stacks with Motion.page / BB entrance animations without fighting them. */ @keyframes cg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .cg-pic .fl-photo-content, .cg-pic:not(.fl-module) { display: block; border-radius: var(--cg-radius-md); overflow: hidden; box-shadow: 0 18px 40px rgb(5 2 20 / 0.55); animation: cg-bob var(--cg-pic-dur, 4s) ease-in-out infinite; /* was 7s; tune with --cg-pic-dur */ animation-delay: var(--cg-pic-delay, 0s); } /* No width on Photo-module images, so the browser sizes them from their width/height attributes before they download. With width:100% inside a flex Box they're 0px until loaded, then push everything down (layout shift). */ .cg-pic img { display: block; max-width: 100%; height: auto; border-radius: inherit; } .cg-pic:not(.fl-module) img { width: 100%; } .cg-pic--a { --cg-pic-delay: calc(var(--cg-pic-dur, 4s) * -0.2); } .cg-pic--b { --cg-pic-delay: calc(var(--cg-pic-dur, 4s) * -0.4); } .cg-pic--c { --cg-pic-delay: calc(var(--cg-pic-dur, 4s) * -0.6); } .cg-pic--d { --cg-pic-delay: calc(var(--cg-pic-dur, 4s) * -0.8); } .cg-pic--still .fl-photo-content, .cg-pic--still:not(.fl-module) { animation: none; } /* Hover lift — only when asked for (cg-pic--hover) or when the photo is a link (Photo module with a link set, or the speaker card), so plain photos never look clickable. */ .cg-pic .fl-photo-content, .cg-pic:not(.fl-module) { transition: scale 0.5s var(--cg-ease), box-shadow 0.5s var(--cg-ease), rotate 0.5s var(--cg-ease); } :is(.cg-pic--hover, .cg-pic:has(.fl-photo-content a)):hover .fl-photo-content, :is(.cg-pic--hover:not(.fl-module), a.cg-pic):hover { animation-play-state: paused; scale: 1.05; rotate: -1deg; box-shadow: 0 28px 60px rgb(5 2 20 / 0.6), var(--cg-glow-purple); } /* Photo looks (combine freely): cg-pic--fade purple gradient rising from the bottom (name-card look) cg-pic--edge purple glow from the top-left corner cg-pic--glow purple outer glow + deeper drop shadow cg-pic--flat no shadow cg-pic--portrait/--tall/--square/--wide auto-crop to that shape cg-pic--wash portrait look (same as the team cards): purple wash from the bottom-left, softer corners, purple glow + shadow */ .cg-pic .fl-photo-content, .cg-pic:not(.fl-module) { position: relative; } .cg-pic--fade { --cg-pic-tint: linear-gradient(to top, rgb(126 68 210 / 0.85) 0%, rgb(166 80 255 / 0.35) 35%, rgb(166 80 255 / 0) 60%); } .cg-pic--edge { --cg-pic-tint: linear-gradient(135deg, rgb(153 54 255 / 0.55), rgb(23 16 51 / 0) 60%); } .cg-pic--wash { --cg-pic-tint: var(--cg-wash); } /* Auto-crop: any upload fills the same shape, faces kept in frame. cg-pic--portrait (3:4) cg-pic--tall (4:5) cg-pic--square (1:1) cg-pic--wide (16:9) Tune: --cg-pic-ratio; crop position with a cg-focus--* class (below) */ .cg-pic--portrait { --cg-pic-ratio: 3 / 4; } .cg-pic--tall { --cg-pic-ratio: 4 / 5; } .cg-pic--square { --cg-pic-ratio: 1 / 1; } .cg-pic--wide { --cg-pic-ratio: 16 / 9; --cg-focus: 50% 50%; } /* Where the crop holds (works on cg-pic photos and team cards): cg-focus--top --high (default) --center --low --bottom + --left --right */ .cg-focus--top { --cg-focus: 50% 0%; --cg-team-focus: 50% 0%; } .cg-focus--high { --cg-focus: 50% 20%; --cg-team-focus: 50% 20%; } .cg-focus--center { --cg-focus: 50% 50%; --cg-team-focus: 50% 50%; } .cg-focus--low { --cg-focus: 50% 75%; --cg-team-focus: 50% 75%; } .cg-focus--bottom { --cg-focus: 50% 100%; --cg-team-focus: 50% 100%; } .cg-focus--left { --cg-focus: 25% 20%; --cg-team-focus: 25% 20%; } .cg-focus--right { --cg-focus: 75% 20%; --cg-team-focus: 75% 20%; } :is(.cg-pic--portrait, .cg-pic--tall, .cg-pic--square, .cg-pic--wide) img { width: 100%; aspect-ratio: var(--cg-pic-ratio); object-fit: cover; object-position: var(--cg-focus, 50% 20%); } .cg-pic--wash .fl-photo-content, .cg-pic--wash:not(.fl-module) { border-radius: var(--cg-photo-radius); box-shadow: var(--cg-photo-shadow); } .cg-pic--fade.cg-pic--edge { --cg-pic-tint: linear-gradient(to top, rgb(126 68 210 / 0.85) 0%, rgb(166 80 255 / 0.35) 35%, rgb(166 80 255 / 0) 60%), linear-gradient(135deg, rgb(153 54 255 / 0.55), rgb(23 16 51 / 0) 60%); } :is(.cg-pic--fade, .cg-pic--edge, .cg-pic--wash) .fl-photo-content::after, :is(.cg-pic--fade, .cg-pic--edge, .cg-pic--wash):not(.fl-module)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: var(--cg-pic-tint); } .cg-pic--glow .fl-photo-content, .cg-pic--glow:not(.fl-module) { box-shadow: 0 0 40px rgb(166 80 255 / 0.45), 0 24px 50px rgb(5 2 20 / 0.55); } .cg-pic--flat .fl-photo-content, .cg-pic--flat:not(.fl-module) { box-shadow: none; } @media (prefers-reduced-motion: reduce) { .cg-pic .fl-photo-content, .cg-pic:not(.fl-module) { animation: none; transition: none; } } /* ---- Content card (speaker shortcodes: compare, fee range, insights). For the Expertise / Boutique / Impact cards use cg-tile (section 14). */ .cg-card { --cg-card-tint: rgb(76 186 255 / 0.9); position: relative; padding: var(--cg-space-m) var(--cg-space-s); border-radius: var(--cg-radius-lg); background: radial-gradient(ellipse 75% 70% at 50% 50%, rgb(255 255 255 / 0.98) 45%, transparent 100%), radial-gradient(ellipse 120% 120% at 50% 50%, var(--cg-color-white), var(--cg-card-tint)); box-shadow: var(--cg-shadow-lg); color: var(--cg-color-navy); text-align: center; transition: transform var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-card:hover { transform: translateY(-4px); } .cg-card :is(h2, h3, .fl-heading-text) { font-family: var(--cg-font-display); font-size: var(--cg-fs-h2); line-height: 0.91; } /* ---- Section rhythm ---- */ /* ---- Below-the-fold rendering skip (big perf win on long pages) ---- */ /* ========================================================================== 8. MOTION — compositor-only (transform / opacity), off for reduced motion ========================================================================== */ @keyframes cg-drift { 0%, 100% { translate: 0 0; } 50% { translate: 1.2% -1.8%; } } .cg-float--drift:not(.fl-row)::before, .fl-row.cg-float--drift > .fl-row-content-wrap::before { animation: cg-drift 22s ease-in-out infinite; } /* Scroll parallax with zero JS (Chrome/Edge/Safari 26+; ignored elsewhere) */ @supports (animation-timeline: view()) { @keyframes cg-parallax { from { translate: 0 6%; } to { translate: 0 -6%; } } .cg-float--parallax:not(.fl-row)::before, .fl-row.cg-float--parallax > .fl-row-content-wrap::before { animation: cg-parallax linear both; animation-timeline: view(); inset: -6% 0; } } @media (prefers-reduced-motion: reduce) { .cg-float:not(.fl-row)::before, .fl-row.cg-float > .fl-row-content-wrap::before { animation: none !important; } :is(.cg-card) { transition: none; } } /* ========================================================================== 9. SPEAKER COMPONENTS — markup printed by speaker-shortcodes.php Speaker, fee and topic layouts. Uses the tokens in section 1. ========================================================================== */ /* ---- Shared bits --------------------------------------------------------- */ .cg-btns { display: flex; flex-wrap: wrap; gap: var(--cg-space-xs); justify-content: center; margin-top: var(--cg-space-m); } .cg-list { margin: 0; padding-left: 1.2em; } .cg-list li { margin-block: 0.4em; line-height: var(--cg-lh-body); } .cg-list li::marker { color: var(--cg-color-accent); } .cg-dl { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); color: var(--cg-color-link); text-decoration: underline; text-underline-offset: 0.2em; } .cg-dl::before { content: "\2193"; } .cg-photo { display: block; width: 100%; height: auto; box-shadow: var(--cg-shadow-md); } /* Rounded speaker photos — profile, portrait, headshot and card images. Covers Photo modules in the speaker / fee layouts, speaker cards in Posts modules (BB + PowerPack), and the shortcode images. Change the roundness for all of them in one place: --cg-photo-radius. */ :root { --cg-photo-radius: var(--cg-radius-lg); } :is(.single-speaker, .single-speaker_fee) .fl-photo-content, :is(.single-speaker, .single-speaker_fee) .fl-photo-content img, .type-speaker :is(.fl-post-grid-image, .fl-post-feed-image, .fl-post-column-image, .fl-post-carousel-image, .pp-content-grid-image, .pp-content-post-image, .pp-post-image) img, .type-speaker :is(.fl-post-grid-image, .fl-post-feed-image, .pp-content-grid-image, .pp-content-post-image), .cg-photo, .cg-headshot img { border-radius: var(--cg-photo-radius); } .type-speaker :is(.fl-post-grid-image, .fl-post-feed-image, .pp-content-grid-image, .pp-content-post-image) { overflow: hidden; } :is(.single-speaker, .single-speaker_fee) .fl-module-photo.cg-overlay, :is(.single-speaker, .single-speaker_fee) .fl-photo-content { --cg-overlay-radius: var(--cg-photo-radius); } /* Content cards reuse .cg-card's surface but read left-aligned with smaller titles */ .cg-compare, .cg-two-cards .cg-card, .cg-fee-range { text-align: left; } .cg-compare:hover, .cg-two-cards .cg-card:hover, .cg-fee-range:hover { transform: none; } .cg-card .cg-card__title, .cg-fee-range .cg-fee-range__title { margin: 0 0 var(--cg-space-xs); font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } /* ---- Jump nav [cg_nav] [cg_hts_quicklinks] [cg_fee_nav] ------------------ */ .cg-nav { display: flex; flex-wrap: wrap; gap: var(--cg-space-2xs); justify-content: center; } .cg-nav--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .cg-nav__btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 2.75em; padding: 0.5em 1.25em; border: 2px solid currentColor; border-radius: var(--cg-radius-pill); color: inherit; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); text-decoration: none; transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease); } .cg-nav__btn:hover, .cg-nav__btn:focus-visible { background: var(--cg-color-navy); border-color: var(--cg-color-navy); color: var(--cg-color-white); } .cg-nav__btn--primary { border-color: transparent; background: var(--cg-grad-pink); color: var(--cg-color-white); } /* Jump buttons now use the brand dark button (cg-btn cg-btn--dark): compact pills sized to their label instead of the 220px minimum */ .cg-nav .cg-nav__btn.cg-btn:not(#cg-btn) { --cg-btn-min-width: 0; } /* full cg-btn sizing; width set below */ /* Smooth jumps that clear a sticky header */ html { scroll-behavior: smooth; } [id^="cg-"] { scroll-margin-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- Logos / topic chips / social ---------------------------------------- */ .cg-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cg-space-s) var(--cg-space-m); margin: 0; padding: 0; list-style: none; } .cg-logos img { width: auto; max-width: 9rem; max-height: 3rem; object-fit: contain; filter: var(--cg-logos-filter, brightness(0) invert(1)); opacity: 0.92; } /* all-white logos; --cg-logos-filter: grayscale(1) for grey on light rows */ /* Several download buttons from one multi-file field ([cg_download]) */ .cg-btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Logo marquee: [cg_logos style="marquee"]. Two copies of the row slide left together, so the loop is seamless. Tune: --cg-marquee-dur (40s), --cg-marquee-gap */ .cg-marquee { --cg-marquee-gap: var(--cg-space-l); display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cg-marquee .cg-marquee__track { flex: none; flex-wrap: nowrap; gap: var(--cg-marquee-gap); padding-right: var(--cg-marquee-gap); animation: cg-marquee var(--cg-marquee-dur, 40s) linear infinite; } .cg-marquee:hover .cg-marquee__track { animation-play-state: paused; } .cg-marquee .cg-logos li { flex: none; } @keyframes cg-marquee { to { translate: -100% 0; } } @media (prefers-reduced-motion: reduce) { .cg-marquee { -webkit-mask-image: none; mask-image: none; } .cg-marquee .cg-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; padding: 0; } .cg-marquee .cg-marquee__track[aria-hidden] { display: none; } } .fl-builder-edit .cg-marquee .cg-marquee__track { animation: none; } .cg-social { display: flex; flex-wrap: wrap; gap: var(--cg-space-2xs); } /* Gradient-filled icon: the SVG is used as a mask over the gradient */ .cg-social__link { display: block; width: 2.5rem; height: 2.5rem; background: var(--cg-grad-sky-purple); -webkit-mask: var(--cg-icon) center / contain no-repeat; mask: var(--cg-icon) center / contain no-repeat; transition: opacity var(--cg-dur) var(--cg-ease); } .cg-social__link:hover { opacity: 0.75; } .cg-social__link--linkedin { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.8-2 4 0 4.8 2.6 4.8 6V21h-4v-5.6c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21H9z'/%3E%3C/svg%3E"); } .cg-social__link--instagram { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E"); } .cg-social__link--x, .cg-social__link--twitter { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.4 4.7H5.6z'/%3E%3C/svg%3E"); } .cg-social__link--youtube { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15V9l5.8 3z'/%3E%3C/svg%3E"); } .cg-social__link--facebook { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8V6c0-.9.6-1 1-1h3V1h-4c-4 0-5 3-5 5v2H6v4h3v11h5V12h3.5l.5-4z'/%3E%3C/svg%3E"); } .cg-social__link--tiktok { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3.4v13.4a2.9 2.9 0 1 1-2-2.8V9.1a6.3 6.3 0 1 0 5.4 6.3V8.6a8 8 0 0 0 4.6 1.5V6.7a4.6 4.6 0 0 1-4.6-4.7z'/%3E%3C/svg%3E"); } .cg-social__link--website { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-3a15 15 0 0 0-1.3-3.9A8 8 0 0 1 18.9 8zM12 4a13 13 0 0 1 1.9 4h-3.8A13 13 0 0 1 12 4zM4.3 14a8 8 0 0 1 0-4h3.4a16 16 0 0 0 0 4zm.8 2h3a15 15 0 0 0 1.3 3.9A8 8 0 0 1 5.1 16zm3-8h-3a8 8 0 0 1 4.3-3.9A15 15 0 0 0 8.1 8zM12 20a13 13 0 0 1-1.9-4h3.8A13 13 0 0 1 12 20zm2.3-6H9.7a14 14 0 0 1 0-4h4.6a14 14 0 0 1 0 4zm.3 5.9a15 15 0 0 0 1.3-3.9h3a8 8 0 0 1-4.3 3.9zm1.7-5.9a16 16 0 0 0 0-4h3.4a8 8 0 0 1 0 4z'/%3E%3C/svg%3E"); } .cg-social__link--email { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); } .cg-social__link--phone { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v2.8a1.9 1.9 0 0 1-2 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 2.4 4.5 1.9 1.9 0 0 1 4.3 2.5h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.4 1.8.7 2.6a1.9 1.9 0 0 1-.4 2L8 9.9a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.4c.8.3 1.7.6 2.6.7a1.9 1.9 0 0 1 1.6 1.8z'/%3E%3C/svg%3E"); } .cg-social__link--chat { --cg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.4 8.4 0 0 1-12.2 7.5L3.5 20.5l1.4-4.6a8.4 8.4 0 1 1 15.6-4.3z'/%3E%3Cpath stroke-width='2.6' d='M8.3 11.6h.01M12 11.6h.01M15.7 11.6h.01'/%3E%3C/svg%3E"); } /* Site follow icons [cg_social source="site"]: ink glyph in a purple circle. Tune: --cg-social-size, --cg-social-bg, --cg-social-color, --cg-social-gap — or the shortcode's size/bg/color/gap */ .cg-social--site { display: inline-flex; gap: var(--cg-social-gap, 10px); vertical-align: middle; } .cg-social--site .cg-social__link { position: relative; width: var(--cg-social-size, 30px); height: var(--cg-social-size, 30px); border-radius: 50%; background: var(--cg-social-bg, var(--cg-color-purple)); -webkit-mask: none; mask: none; transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-social--site .cg-social__link::before { content: ""; position: absolute; inset: 21%; background: var(--cg-social-color, var(--cg-color-ink)); -webkit-mask: var(--cg-icon) center / contain no-repeat; mask: var(--cg-icon) center / contain no-repeat; } .cg-social--site .cg-social__link:hover { opacity: 1; translate: 0 -2px; box-shadow: var(--cg-glow-purple); } /* Hovered icon (and its module/row) come to the front, so the glow isn't covered by the next icon, the neighbouring module or the row below. */ .cg-social__link:is(:hover, :focus-visible) { position: relative; z-index: 5; } .fl-module:has(.cg-social__link:is(:hover, :focus-visible)):not(#cg) { position: relative; z-index: 50; } :is(.fl-row, .fl-col):has(.cg-social__link:is(:hover, :focus-visible)):not(#cg) { position: relative; z-index: 40; } /* Contact links [cg_contact type="email|phone|chat"]: purple icon + white text. Tune: --cg-contact-icon (size), --cg-contact-color (icon), --cg-contact-text, --cg-contact-hover, --cg-contact-font — or the shortcode's size/color/text/hover/font */ .cg-contact:not(#cg) { display: inline-flex; align-items: center; gap: 0.5em; color: var(--cg-contact-text, var(--cg-color-white)); font-size: var(--cg-contact-font, 15px); text-decoration: none; transition: color var(--cg-dur) var(--cg-ease); } .cg-contact .cg-social__link { width: var(--cg-contact-icon, 1.4em); height: var(--cg-contact-icon, 1.4em); flex: none; background: var(--cg-contact-color, var(--cg-color-purple)); } .cg-contact:not(#cg):hover, .cg-contact:not(#cg):focus-visible { color: var(--cg-contact-hover, var(--cg-color-pink)); } .cg-contact .cg-social__link { transition: background-color var(--cg-dur) var(--cg-ease); } /* Icon and text turn the same colour together on hover */ .cg-contact:is(:hover, :focus-visible) .cg-social__link { opacity: 1; background: var(--cg-contact-hover, var(--cg-color-pink)); } /* Bigger email/phone links: put the class on the module (or the shortcode's parent); the icon grows with the text. The shortcode's font="" still wins. */ .cg-contact--lg { --cg-contact-font: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); } /* 17 → 22 */ /* ---- Video facade [cg_video] [cg_videos] --------------------------------- */ .cg-video { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--cg-radius-md); background: var(--cg-color-ink); box-shadow: var(--cg-shadow-md); } .cg-video img, .cg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .cg-video__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: clamp(3rem, 2.6rem + 1.2vw, 4.25rem); aspect-ratio: 1; border-radius: 50%; font-size: 0.7em; background: var(--cg-grad-pink); box-shadow: var(--cg-glow-pink); transition: scale var(--cg-dur) var(--cg-ease); } .cg-video__play::after { content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%; border-style: solid; border-width: 0.7em 0 0.7em 1.15em; border-color: transparent transparent transparent var(--cg-color-white); } .cg-video:hover .cg-video__play { scale: 1.08; } .cg-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cg-space-s); } /* ---- Numbered cards [cg_when_to_book] [cg_hts_statements] ----------------- */ .cg-num-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--cg-space-s); counter-reset: none; } .cg-num-card { padding: var(--cg-space-m) var(--cg-space-s); border-radius: var(--cg-radius-lg); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: var(--cg-shadow-md); } .cg-num-card__num { display: block; margin-bottom: var(--cg-space-2xs); font-family: var(--cg-font-display); font-size: var(--cg-fs-h1); line-height: var(--cg-lh-display); background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cg-num-card__lead { margin: 0 0 0.4em; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } .cg-num-card__body, .cg-num-card__quote { margin: 0; } .cg-num-card__quote { font-size: var(--cg-fs-lead); font-style: italic; line-height: var(--cg-lh-lead); } .cg-num-cards > :nth-child(3n+2) .cg-num-card__num { background-image: var(--cg-grad-violet); } .cg-num-cards > :nth-child(3n+3) .cg-num-card__num { background-image: var(--cg-grad-sky); } /* ---- Keynotes: marketing cards [cg_keynotes mode="featured"] -------------- */ .cg-kt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--cg-space-s); } .cg-kt-card { padding: var(--cg-space-m) var(--cg-space-s); border-radius: var(--cg-radius-lg); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: var(--cg-shadow-md); border-top: 6px solid var(--cg-color-sky); } .cg-kt-cards > :nth-child(3n+2) { border-top-color: var(--cg-color-purple); } .cg-kt-cards > :nth-child(3n+3) { border-top-color: var(--cg-color-pink); } .cg-kt-card__title { margin: 0 0 0.35em; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } .cg-kt-card__subtitle { margin: 0 0 0.75em; font-weight: var(--cg-fw-bold); color: var(--cg-color-violet); } .cg-kt-card__summary { margin: 0; } /* ---- Keynotes: info accordion [cg_keynotes] ------------------------------- */ .cg-kts { display: grid; gap: var(--cg-space-xs); } .cg-kt { border-radius: var(--cg-radius-md); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: var(--cg-shadow-sm); } .cg-kt__title, .cg-faq__q, .cg-acc__label { position: relative; display: block; cursor: pointer; list-style: none; padding: var(--cg-space-s) calc(var(--cg-space-s) + 2.5rem) var(--cg-space-s) var(--cg-space-s); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } .cg-kt__title { font-size: var(--cg-fs-lead); } :is(.cg-kt__title, .cg-faq__q, .cg-acc__label)::-webkit-details-marker { display: none; } :is(.cg-kt__title, .cg-faq__q, .cg-acc__label)::after { content: ""; position: absolute; right: var(--cg-space-s); top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.5em; border-right: 3px solid var(--cg-color-pink); border-bottom: 3px solid var(--cg-color-pink); rotate: 45deg; transition: rotate var(--cg-dur) var(--cg-ease); } details[open] > :is(.cg-kt__title, .cg-faq__q, .cg-acc__label)::after { rotate: 225deg; margin-top: -0.15em; } .cg-kt__grid { display: grid; gap: var(--cg-space-m); padding: 0 var(--cg-space-s) var(--cg-space-m); } @media (min-width: 900px) { .cg-kt__grid:not(.cg-kt__grid--single) { grid-template-columns: 3fr 2fr; } } .cg-kt__subtitle { margin: 0 0 0.75em; font-weight: var(--cg-fw-bold); color: var(--cg-color-violet); } .cg-kt__lead { margin: 0 0 0.75em; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); } .cg-kt__body > :last-child { margin-bottom: 0; } .cg-kt__body strong { color: var(--cg-color-navy); } .cg-kt__side { display: grid; gap: var(--cg-space-s); align-content: start; } .cg-kt__outcomes { padding: var(--cg-space-s); border-radius: var(--cg-radius-sm); background: rgb(76 186 255 / 0.1); } .cg-kt__outcomes-label { margin: 0 0 0.5em; font-weight: var(--cg-fw-extrabold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cg-color-blue); } .cg-kt__outcomes-intro { margin: 0 0 0.5em; } .cg-kt__testimonial { margin: 0; padding: var(--cg-space-s); border-radius: var(--cg-radius-sm); background: var(--cg-grad-violet); color: var(--cg-color-white); box-shadow: var(--cg-glow-purple); } .cg-kt__testimonial blockquote { margin: 0 0 0.75em; padding: 0; border: 0; font-style: italic; } .cg-kt__testimonial blockquote::before { content: "\201C"; display: block; font-family: var(--cg-font-display); font-size: 3em; line-height: 0.6; } .cg-kt__testimonial figcaption { font-weight: var(--cg-fw-bold); color: inherit; } /* ---- Beyond the Keynote [cg_beyond]: 3 → 2 → 1, last row centered -------- */ .cg-bk { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cg-space-s); } .cg-bk__card { flex: 1 1 18rem; max-width: calc((100% - 2 * var(--cg-space-s)) / 3 + 6rem); padding: var(--cg-space-m) var(--cg-space-s); border-radius: var(--cg-radius-lg); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: var(--cg-shadow-md); } .cg-bk__title { margin: 0 0 0.4em; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: var(--cg-lh-lead); color: var(--cg-color-sky); } .cg-bk > :nth-child(3n+2) .cg-bk__title { color: var(--cg-color-purple); } .cg-bk > :nth-child(3n+3) .cg-bk__title { color: var(--cg-color-pink); } .cg-bk__body { margin: 0; } /* ---- Books [cg_books] ---------------------------------------------------- */ .cg-books { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cg-space-s); } .cg-book { display: grid; justify-items: center; gap: var(--cg-space-2xs); width: clamp(8rem, 6rem + 8vw, 13rem); } .cg-book__cover { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--cg-shadow-md); transition: translate var(--cg-dur) var(--cg-ease); } .cg-book a:hover .cg-book__cover { translate: 0 -6px; } /* ---- Partner tabs [cg_partner] ------------------------------------------ */ .cg-tabs__list { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--cg-space-s); border-radius: var(--cg-radius-pill); background: rgb(23 16 51 / 0.08); } .cg-tabs__tab { padding: 0.6em 1.5em; border: 0; border-radius: var(--cg-radius-pill); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); } .cg-tabs__tab[aria-selected="true"] { background: var(--cg-grad-pink); color: var(--cg-color-white); } .cg-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--cg-space-s); margin: 0; padding: 0; list-style: none; counter-reset: cg-step; } .cg-partner li { counter-increment: cg-step; padding-top: var(--cg-space-xs); border-top: 2px solid rgb(166 80 255 / 0.4); } .cg-partner li::before { content: counter(cg-step, decimal-leading-zero); display: block; margin-bottom: 0.3em; font-weight: var(--cg-fw-extrabold); color: var(--cg-color-pink); } .cg-partner strong { display: block; font-size: var(--cg-fs-lead); line-height: var(--cg-lh-lead); } .cg-partner p { margin: 0.4em 0 0; } /* ---- Testimonial carousel [cg_testimonials] ------------------------------ */ .cg-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cg-carousel__track::-webkit-scrollbar { display: none; } .cg-quote { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 0 var(--cg-space-s); text-align: center; } .cg-quote__headline { margin: 0 0 0.5em; font-family: var(--cg-font-display); font-size: var(--cg-fs-h3); line-height: var(--cg-lh-heading); text-wrap: balance; } /* even lines, no lone last word */ .cg-quote__text { max-width: 52rem; margin: 0 auto var(--cg-space-s); padding: 0; border: 0; font-size: var(--cg-fs-lead); line-height: var(--cg-lh-lead); } .cg-quote figcaption { display: grid; justify-items: center; gap: 0.2em; } .cg-quote__name { font-weight: var(--cg-fw-extrabold); color: var(--cg-color-pink); } .cg-quote__role { font-size: var(--cg-fs-small); } .cg-quote__logo { width: auto; max-height: 2.5rem; margin-top: var(--cg-space-2xs); } .cg-carousel__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: var(--cg-space-s); } .cg-carousel__dots button { width: 0.75rem; height: 0.75rem; padding: 0; border: 0; border-radius: 50%; color: inherit; background: currentColor; opacity: 0.3; cursor: pointer; } /* color: inherit — theme buttons set their own (white) text colour */ .cg-carousel__dots button.is-active { opacity: 1; background: var(--cg-color-pink); } .cg-carousel__dots:has(button:only-child) { display: none; } /* If the shortcode gets wrapped in /

by a text editor, ignore the wrappers */ .cg-carousel :is(code, pre) { display: contents; font: inherit; color: inherit; background: none; white-space: normal; } .cg-carousel__track > :is(p, br) { display: none; } /* ---- Site testimonials [cg_testimonials source="site"] (homepage design) ---- (The big gradient quote mark is a Photo module above it.) Display-font lead-in, semibold quote with a closing mark, pink uppercase name, logo, navy dots. The pink orb behind it is the row: cg-fa--orb cg-fa--c cg-fa--w40 cg-grain on a white row. Tune: --cg-quote-width (lead-in line length) */ :is(.cg-testimonials--site, .cg-testimonials--speaker) { --cg-quote-width: 72rem; color: var(--cg-color-navy); } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote__headline { max-width: var(--cg-quote-width); margin: 0 auto 0.35em; padding-top: 0.12em; /* the carousel clips anything above the box; Kangge's tall letters need room */ font-size: calc(clamp(2rem, 1.45rem + 2.35vw, 4.25rem) * var(--cg-type-scale, 1)); /* 32 → 68 */ line-height: 1.12; color: var(--cg-color-navy); } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote__text { max-width: 60rem; margin: 0 auto 1.6em; font-size: max(1rem, calc(clamp(1rem, 0.9rem + 0.45vw, 1.5rem) * var(--cg-type-scale, 1))); /* 16 → 24 */ font-style: normal; font-weight: 600; line-height: 1.55; } .cg-testimonials--site .cg-quote__text::after { font-style: normal; content: "\201D"; } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote__name { font-weight: var(--cg-fw-extrabold); text-transform: uppercase; letter-spacing: 0.01em; color: var(--cg-color-pink); } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote figcaption { gap: 0.15em; } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote__logo { margin-top: 0.75em; } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-quote__logo { max-width: 12rem; max-height: 4rem; margin: 0; object-fit: contain; /* every logo goes dark grey so mixed brand colours sit together. Tune: --cg-logo-filter (none = original colours) */ filter: var(--cg-logo-filter, grayscale(1) brightness(0.35) contrast(1.3)); } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-carousel__dots { gap: 0.75rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-carousel__dots button { width: 0.85rem; height: 0.85rem; background: #9b97b3; opacity: 1; } :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-carousel__dots button.is-active { background: var(--cg-color-navy); } /* ---- FAQs [cg_faqs] / accordions [cg_accordion] -------------------------- */ .cg-faqs, .cg-accs { display: grid; gap: var(--cg-space-2xs); } .cg-faq, .cg-acc { border-bottom: 2px solid rgb(166 80 255 / 0.35); } .cg-faq__q, .cg-acc__label { padding-inline-start: 0; font-size: var(--cg-fs-body); } .cg-faq__q::after, .cg-acc__label::after { right: 0.25rem; } .cg-faq__a, .cg-acc__body { padding: 0 0 var(--cg-space-s); } .cg-faq__a > :last-child, .cg-acc__body > :last-child { margin-bottom: 0; } .cg-acc__body .cg-btn { margin-top: var(--cg-space-xs); } /* ---- Info: accolades / media / headshots --------------------------------- */ .cg-accolades { padding: var(--cg-space-m); border-radius: var(--cg-radius-lg); background: rgb(235 54 132 / 0.08); border: 2px solid rgb(235 54 132 / 0.3); } .cg-accolades__title { margin: 0 0 0.5em; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); color: var(--cg-color-pink); } .cg-accolades__closing { margin: var(--cg-space-xs) 0 0; } .cg-accolades__closing > :first-child { margin-top: 0; } .cg-accolades__closing > :last-child { margin-bottom: 0; } .cg-media { columns: 2 16rem; column-gap: var(--cg-space-m); margin: 0; padding-left: 1.2em; } .cg-media li { break-inside: avoid; margin-block: 0.4em; } .cg-media li::marker { color: var(--cg-color-accent); } .cg-headshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--cg-space-s); } .cg-headshot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--cg-shadow-sm); } .cg-headshot__dl { display: flex; flex-wrap: wrap; gap: 0.25em 1em; margin-top: var(--cg-space-2xs); } /* ---- How to Sell -------------------------------------------------------- */ .cg-compare .cg-compare__label { margin: var(--cg-space-s) 0 0.4em; font-weight: var(--cg-fw-extrabold); } .cg-compare .cg-compare__label:first-child { margin-top: 0; } .cg-compare .cg-list:last-child li::marker { color: var(--cg-color-sky); } .cg-two-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cg-space-s); } .cg-fee-range ul { margin: 0; padding: 0; list-style: none; } .cg-fee-range li { margin-block: 0.5em; } .cg-fee-range__note { margin: var(--cg-space-2xs) 0 var(--cg-space-s); font-size: var(--cg-fs-small); opacity: 0.75; } /* ---- Fee pages [cg_fee_sections] ----------------------------------------- */ .cg-fee-sec { margin-block: 0 var(--cg-space-l); scroll-margin-top: var(--cg-header-offset, 120px); } .cg-fee-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1em; margin-bottom: var(--cg-space-s); } .cg-fee-sec__title { margin: 0; font-family: var(--cg-font-display); font-size: var(--cg-fs-h2); line-height: var(--cg-lh-heading); } .cg-fee-sec__date { margin: 0; padding: 0.3em 0.9em; border-radius: var(--cg-radius-pill); background: rgb(166 80 255 / 0.1); font-size: 0.85rem; font-weight: var(--cg-fw-bold); color: var(--cg-color-violet); } /* package card: title + price badge on top, inclusions, notes strip */ .cg-package { margin-bottom: var(--cg-space-s); overflow: hidden; border: 1px solid rgb(166 80 255 / 0.18); border-radius: var(--cg-radius-md); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: 0 18px 40px rgb(23 16 51 / 0.1); } .cg-package__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75em 1.5em; padding: var(--cg-space-s) var(--cg-space-m); background: linear-gradient(120deg, rgb(126 68 210 / 0.1), rgb(76 186 255 / 0.08)); border-bottom: 1px solid rgb(166 80 255 / 0.14); } .cg-package__head:not(#cg) { flex: 1 1 22rem; margin: 0; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: 1.25; } .cg-package__price:not(#cg) { display: grid; justify-items: end; margin: 0; text-align: right; } .cg-package__price strong { font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h2); line-height: 1; background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0.08em 0.04em; } .cg-package__price span { font-size: 0.85rem; font-weight: var(--cg-fw-bold); color: var(--cg-color-violet); } .cg-package__body { padding: var(--cg-space-s) var(--cg-space-m); } .cg-package__body ul { margin: 0 0 0.6em; padding-left: 1.2em; } .cg-package__body li { margin-bottom: 0.4em; } .cg-package__body li::marker { color: var(--cg-color-purple); } .cg-package__body > :last-child { margin-bottom: 0; } .cg-package__notes { padding: 0.9em var(--cg-space-m); background: #f4f0fd; border-top: 1px solid rgb(166 80 255 / 0.14); font-size: var(--cg-fs-small); } .cg-package__notes p { margin: 0 0 0.35em; padding-left: 1.4em; position: relative; } .cg-package__notes p:last-child { margin-bottom: 0; } .cg-package__notes p::before { content: "i"; position: absolute; left: 0; top: 0.15em; width: 1em; height: 1em; border-radius: 50%; background: var(--cg-color-purple); color: #fff; font: 700 0.7em/1em var(--cg-font-body); text-align: center; font-style: italic; } @media (max-width: 640px) { .cg-package__price:not(#cg) { justify-items: start; text-align: left; } } .cg-fee-sec--terms { padding: var(--cg-space-s) var(--cg-space-m); border-radius: var(--cg-radius-md); background: rgb(23 16 51 / 0.05); font-size: var(--cg-fs-small); } /* sticky side card [cg_fee_aside] */ .cg-fee-aside { position: sticky; top: var(--cg-header-offset, 120px); display: grid; gap: var(--cg-space-s); padding: var(--cg-space-m) var(--cg-space-s); border-radius: var(--cg-radius-md); background: var(--cg-color-ink); color: var(--cg-color-white); box-shadow: 0 22px 44px rgb(13 9 26 / 0.3), 0 0 30px rgb(166 80 255 / 0.2); } .cg-fee-aside p { margin: 0; } .cg-fee-aside a:not(.cg-btn) { color: var(--cg-color-white); text-decoration: none; } .cg-fee-aside a:not(.cg-btn):hover { color: var(--cg-color-sky); } .cg-fee-aside__label { font-size: 0.75rem; font-weight: var(--cg-fw-extrabold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cg-color-sky); } .cg-fee-aside__name:not(#cg) { margin: 0.2em 0 0.3em; font-family: var(--cg-font-display); font-size: var(--cg-fs-h3); line-height: 1.1; } .cg-fee-aside__nav ul { margin: 0; padding: var(--cg-space-s) 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.15); display: grid; gap: 0.5em; } .cg-fee-aside__nav a { font-weight: var(--cg-fw-bold); } .cg-fee-aside__btns { display: grid; gap: 0.6em; } .cg-fee-aside__btns .cg-btn:not(#cg-btn) { min-width: 0; width: 100%; } @media (max-width: 1000px) { .cg-fee-aside { position: static; } } .cg-fee-sec--link { text-align: center; } /* ---- Topic pages --------------------------------------------------------- */ /* ========================================================================== 10. HEADER + FOOTER (Beaver Themer) ========================================================================== */ /* Logo: [cg_logo] in an HTML module. Tune: --cg-logo-w (mobile: --cg-logo-w-mobile) :not(#cg) beats Themer's shrink-header rule (.fl-builder-content[data-shrink="1"] img { width:auto }) */ .cg-logo { display: inline-block; line-height: 0; } .cg-logo:not(#cg) img { width: var(--cg-logo-w, 120px); max-width: 100%; height: auto; } @media (max-width: 767px) { .cg-logo:not(#cg) img { width: var(--cg-logo-w-mobile, 96px); } } /* Footer logo: bigger, automatically (any [cg_logo] in the Themer footer) */ .fl-builder-content[data-type="footer"] .cg-logo { --cg-logo-w: 280px; --cg-logo-w-mobile: 180px; } /* Pardot tracking opt-in banner: float it over the bottom of the screen instead of pushing the whole page down when it appears (layout shift). */ #pi_tracking_opt_in_div:not(#cg) { position: fixed !important; inset: auto 12px 12px 12px !important; z-index: 99999; max-width: 640px; margin: 0 auto !important; padding: 14px 18px !important; border-radius: 12px; background: var(--cg-color-ink) !important; color: #fff !important; font: 500 14px/1.45 var(--cg-font-body) !important; box-shadow: 0 18px 40px rgb(5 2 20 / 0.45); text-align: left !important; } #pi_tracking_opt_in_div a { color: var(--cg-color-pink) !important; font-weight: 700; } /* Main nav links: bolder, as in the design (GeneratePress, BB Menu, PowerPack menu) */ :is(.main-navigation .main-nav, .fl-menu, .pp-advanced-menu) .menu > li:not(.cg-nav-btn) > a:not(#cg-nav), .pp-advanced-menu .menu > li:not(.cg-nav-btn) > .pp-has-submenu-container > a:not(#cg-nav), /* PowerPack: items with a dropdown */ .main-navigation .main-nav ul li:not(.cg-nav-btn) > a:not(#cg-nav) { font-weight: var(--cg-nav-weight, var(--cg-fw-bold)); } li.cg-nav-btn > a:not(#cg-btn) { font-weight: var(--cg-fw-extrabold); } /* ---- Dropdowns (PowerPack Advanced Menu, desktop/horizontal) ---- Pink triangle right beside the label; ink panel, 8px corners and a shadow. More than 8 items flow into two columns. (The Speakers item gets the mega menu below instead.) Tune: --cg-dd-bg, --cg-dd-radius, --cg-dd-arrow */ .pp-advanced-menu-horizontal { --cg-dd-bg: var(--cg-color-ink); --cg-dd-radius: 8px; --cg-dd-arrow: var(--cg-color-pink-hot); } /* arrow: sits inline after the text instead of floating 30px away */ .pp-advanced-menu-horizontal > li > .pp-has-submenu-container > a:not(#cg-nav) { padding-right: 25px; } /* PowerPack pads the label ~39px to make room for its own arrow; drop that */ .pp-advanced-menu-horizontal .pp-has-submenu-container > a > span:not(#cg-nav) { padding-right: 0; } .pp-advanced-menu-horizontal .pp-menu-toggle:not(#cg-nav) { position: relative; top: auto; right: auto; display: inline-block; width: 0.7em; height: 0.7em; margin: 0 0 0 0.35em; vertical-align: 0.05em; } .pp-advanced-menu-horizontal .pp-menu-toggle:not(#cg-nav)::before { content: ""; position: absolute; top: 50%; left: 50%; right: auto; width: 0; height: 0; margin: 0; border: 0; border-left: 0.36em solid transparent; border-right: 0.36em solid transparent; border-top: 0.42em solid var(--cg-dd-arrow); transform: translate(-50%, -40%); } .pp-advanced-menu-horizontal .pp-menu-toggle:not(#cg-nav)::after { display: none; } /* top-level hover: text stays white, a soft light pill appears behind the item (also while its dropdown is open; fainter on the current section). Tune: --cg-nav-hover-bg, --cg-nav-hover-radius */ .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) a:not(.sub-menu a):not(#cg-nav) { border-radius: var(--cg-nav-hover-radius, 10px); transition: background-color 0.2s var(--cg-ease); } .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(.current-menu-item, .current-menu-ancestor) a:not(.sub-menu a):not(#cg-nav) { background-color: rgb(255 255 255 / 0.06); } .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(:hover, :focus-within) a:not(.sub-menu a):not(#cg-nav) { background-color: var(--cg-nav-hover-bg, rgb(255 255 255 / 0.12)); } .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) a:not(.sub-menu a):not(#cg-nav):is(:hover, :focus-visible), .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(:hover, .current-menu-item, .current-menu-ancestor) a:not(.sub-menu a):not(#cg-nav) { color: var(--cg-color-white); } /* panel: floats just below the header, centred under its menu item, with a small pointer, a faint purple edge and a soft fade/slide in */ .pp-advanced-menu-horizontal > li > .sub-menu:not(#cg-nav) { left: 50%; right: auto; translate: -50% 6px; min-width: 220px; margin-top: 4px; padding: 8px; border: 1px solid rgb(166 80 255 / 0.28); border-radius: var(--cg-dd-radius); background: var(--cg-dd-bg); box-shadow: 0 18px 40px rgb(0 0 0 / 0.5), 0 0 32px rgb(166 80 255 / 0.18); transition: opacity 0.2s var(--cg-ease), translate 0.2s var(--cg-ease), visibility 0.2s; } .pp-advanced-menu-horizontal > li:is(:hover, :focus-within) > .sub-menu:not(#cg-nav) { translate: -50% 0; } /* pointer + an invisible bridge over the gap so the menu doesn't close on the way down */ .pp-advanced-menu-horizontal > li > .sub-menu:not(#cg-nav)::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .pp-advanced-menu-horizontal > li > .sub-menu:not(.cg-mega):not(#cg-nav)::after { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; background: var(--cg-dd-bg); border-top: 1px solid rgb(166 80 255 / 0.28); border-left: 1px solid rgb(166 80 255 / 0.28); } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) > li { background: transparent; border: 0; } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) a { display: block; padding: 0.55em 1em; color: var(--cg-color-white); font-size: 0.95em; font-weight: var(--cg-fw-bold); white-space: nowrap; background: transparent; } /* dropdown hover: a short pink→purple bar slides in at the left and the name eases right to make room. Current speaker keeps the bar. */ .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) a { position: relative; } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) a .menu-item-text { display: inline-block; transition: translate 0.25s var(--cg-ease); } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) a::before { content: ""; position: absolute; left: 0.75em; top: 50%; width: 3px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, #fe4583, #a650ff); translate: 0 -50%; scale: 1 0; opacity: 0; transition: scale 0.25s var(--cg-ease), opacity 0.25s var(--cg-ease); } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) a:is(:hover, :focus-visible), .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) li.current-menu-item > a { background: transparent; color: var(--cg-color-white); } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) :is(a:is(:hover, :focus-visible), li.current-menu-item > a)::before { scale: 1 1; opacity: 1; } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) :is(a:is(:hover, :focus-visible), li.current-menu-item > a) .menu-item-text { translate: 0.6em 0; } /* long lists: two columns */ .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav):has(> li:nth-child(9)) { columns: 2; column-gap: 6px; min-width: 460px; /* columns, not grid: PowerPack shows/hides with display */ } .pp-advanced-menu-horizontal .sub-menu:not(.cg-mega):not(#cg-nav) > li { break-inside: avoid; } /* ---- Speakers mega menu (functions.php swaps the dropdown for this) ---- Desktop: a wide ink panel lined up with the right end of the nav (Contact Us): speakers in 3 columns (photo, name, credentials) with a slim Browse All bar under them | topics. Elsewhere (mobile/vertical menus) it falls back to a simple stacked list. Tune: --cg-mega-width (1240px), --cg-mega-right (gap from the header's right edge; 0 = flush), --cg-mega-cols (speaker columns) */ .pp-advanced-menu-horizontal > li:is(.cg-speakers-menu, .cg-insights-menu, .cg-about-menu):not(#cg-nav) { position: static; } .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega:not(#cg-nav) { width: min(var(--cg-mega-width, 1240px), calc(100% - 2 * var(--cg-mega-right, 20px))); min-width: 0; left: auto; right: var(--cg-mega-right, 20px); translate: 0 6px; margin-top: 0; padding: 28px; display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 1fr); grid-template-rows: min-content 1fr; gap: 0; text-align: left; } .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega:not(#cg-nav)::after { display: none; } /* no pointer */ /* Hover bridge: the mega panels float ~60px below their menu item, and the pointer used to "fall out" of the hover in that gap (the flicker). An invisible strip under each mega item keeps it open on the way down. Only under that one item, so moving sideways to the next item still works. Tune: --cg-mega-bridge (raise it if the header gets taller) */ @media (hover: hover) { .pp-advanced-menu-horizontal > li:is(.cg-speakers-menu, .cg-insights-menu, .cg-about-menu) > .pp-has-submenu-container:not(#cg-nav)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--cg-mega-bridge, 72px); } } .pp-advanced-menu-horizontal > li:is(:hover, :focus-within) > .sub-menu.cg-mega:not(#cg-nav) { translate: 0 0; } /* Desktop: speakers | topics, with Browse All as a slim bar under the speakers */ .pp-advanced-menu-horizontal .sub-menu.cg-mega:not(#cg-nav) .cg-mega__speakers { grid-column: 1; grid-row: 1; } .pp-advanced-menu-horizontal .sub-menu.cg-mega:not(#cg-nav) .cg-mega__topics { grid-column: 2; grid-row: 1 / span 2; } .pp-advanced-menu-horizontal .sub-menu.cg-mega:not(#cg-nav) .cg-mega__all { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: end; /* sits on the bottom edge, level with "Search all topics" */ margin: 14px 28px 0 0; padding: 16px 4px 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.1); } .pp-advanced-menu-horizontal .sub-menu.cg-mega:not(#cg-nav) .cg-mega__all .cg-mega__title { display: none; } .pp-advanced-menu-horizontal .sub-menu.cg-mega:not(#cg-nav) .cg-mega__all .cg-mega__lead { margin: 0; } .cg-mega:not(#cg-nav) ul { margin: 0; padding: 0; list-style: none; } .cg-mega:not(#cg-nav) li { background: none; border: 0; } .cg-mega:not(#cg-nav) .cg-mega__col { padding: 4px 28px; } .cg-mega:not(#cg-nav) .cg-mega__col:first-child { padding-left: 4px; } .cg-mega:not(#cg-nav) .cg-mega__col + .cg-mega__col { border-left: 1px solid rgb(255 255 255 / 0.1); } .cg-mega:not(#cg-nav) .cg-mega__title { margin: 0 0 14px; font-size: 0.72rem; font-weight: var(--cg-fw-extrabold); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); } .cg-mega:not(#cg-nav) .cg-mega__grid { display: grid; grid-template-columns: repeat(var(--cg-mega-cols, 3), minmax(0, 1fr)); gap: 4px 12px; } @media (max-width: 1279px) { .cg-mega:not(#cg-nav) .cg-mega__grid { --cg-mega-cols: 2; } } /* Safety net for a bigger roster: the speaker list never pushes the panel past the bottom of the screen; it scrolls inside the panel instead. Nothing changes while it fits. Tune: --cg-mega-reserve = space above + below the list (header, panel title, Search all bar). Raise it if the bar gets cut off. */ .pp-advanced-menu-horizontal .cg-mega:not(#cg-nav) .cg-mega__grid { max-height: max(240px, calc(100dvh - var(--cg-mega-reserve, 440px))); overflow-y: auto; overscroll-behavior: contain; /* scrolling the list doesn't scroll the page */ scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.25) transparent; padding: 0 8px 14px 0; margin-bottom: -14px; /* room for the photo shadows */ } .cg-mega:not(#cg-nav) a { text-decoration: none; } .cg-mega:not(#cg-nav) .cg-mega__sp { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--cg-color-white); transition: background-color 0.2s var(--cg-ease); } .cg-mega:not(#cg-nav) .cg-mega__sp:is(:hover, :focus-visible), .cg-mega:not(#cg-nav) .cg-mega__sp[aria-current] { background: rgb(255 255 255 / 0.08); } .cg-mega:not(#cg-nav) .cg-mega__img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; object-position: 50% 20%; background: linear-gradient(160deg, #6b3fd0, #2a1650); box-shadow: 0 6px 14px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08); } .cg-mega:not(#cg-nav) .cg-mega__txt { min-width: 0; display: grid; gap: 2px; } .cg-mega:not(#cg-nav) .cg-mega__name { font-weight: var(--cg-fw-bold); line-height: 1.2; } .cg-mega:not(#cg-nav) .cg-mega__cred { font-size: 0.78rem; line-height: 1.3; color: rgb(255 255 255 / 0.6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .cg-mega:not(#cg-nav) .cg-mega__lead { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.5; color: rgb(255 255 255 / 0.75); } .cg-mega:not(#cg-nav) .cg-mega__btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.7em 1.3em; border-radius: var(--cg-radius-pill); background: var(--cg-grad-btn-sky); color: var(--cg-color-white); font-size: 0.9rem; font-weight: var(--cg-fw-extrabold); white-space: nowrap; transition: translate var(--cg-dur) var(--cg-ease); } .cg-mega:not(#cg-nav) .cg-mega__btn:hover { translate: 0 -2px; color: var(--cg-color-white); } .cg-mega:not(#cg-nav) .cg-mega__topics li a { display: block; padding: 4px 0; color: var(--cg-color-white); font-weight: var(--cg-fw-bold); font-size: 0.88rem; transition: color 0.2s var(--cg-ease); } .cg-mega:not(#cg-nav) .cg-mega__topics li a:is(:hover, :focus-visible) { color: var(--cg-color-pink-hot); } @media (min-width: 1280px) { .pp-advanced-menu-horizontal .cg-mega:not(#cg-nav) .cg-mega__topics li a { white-space: nowrap; } } /* one line each; narrower screens may wrap */ .cg-mega:not(#cg-nav) .cg-mega__topics .cg-mega__more { /* "Search all topics" under the list */ display: inline-flex; align-items: center; gap: 0.4em; margin-top: 10px; padding: 12px 0 0; border-top: 1px solid rgb(255 255 255 / 0.1); color: var(--cg-color-sky, var(--cg-color-white)); font-size: 0.88rem; font-weight: var(--cg-fw-extrabold); white-space: nowrap; text-decoration: none; transition: color 0.2s var(--cg-ease); } .cg-mega:not(#cg-nav) .cg-mega__topics .cg-mega__more:is(:hover, :focus-visible) { color: var(--cg-color-pink-hot); } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__topics a.cg-mega__more { /* mobile: plain link, not a pill */ display: inline-flex; margin-top: 14px; padding: 0; border: 0; opacity: 1; font-size: 0.9rem; } /* Mobile / off-canvas (PowerPack vertical or accordion menu): the same panel stacks into sections — speakers as a photo list, the browse button, then topics as pills. PowerPack opens/closes the panel itself, so no display rule on .cg-mega here. Tune: --cg-mega-m-color (text on the panel) */ :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) { padding: 6px 0 18px; background: transparent; border: 0; box-shadow: none; color: var(--cg-mega-m-color, var(--cg-color-white)); } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__col { padding: 10px 0 6px; border: 0; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__title { margin: 0 0 8px; font-size: 0.7rem; font-weight: var(--cg-fw-extrabold); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) :is(ul, li) { margin: 0; padding: 0; list-style: none; background: none; border: 0; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__sp { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: inherit; font-weight: var(--cg-fw-bold); text-decoration: none; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__sp[aria-current] .cg-mega__name { color: var(--cg-color-pink-hot); } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__img { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; object-position: 50% 20%; background: linear-gradient(160deg, #6b3fd0, #2a1650); } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) :is(.cg-mega__cred, .cg-mega__lead) { display: none; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__btn { display: flex; justify-content: center; align-items: center; gap: 0.4em; padding: 0.85em 1.2em; border-radius: var(--cg-radius-pill); background: var(--cg-grad-btn-sky); color: var(--cg-color-white); font-weight: var(--cg-fw-extrabold); text-decoration: none; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__topics ul { display: flex; flex-wrap: wrap; gap: 8px; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega:not(#cg-nav) .cg-mega__topics a { display: inline-block; padding: 0.45em 0.9em; border: 1px solid currentColor; border-radius: var(--cg-radius-pill); color: inherit; font-size: 0.85rem; font-weight: var(--cg-fw-bold); text-decoration: none; opacity: 0.85; } /* Shrinking header: logo size once the header shrinks on scroll (not the mega menu photos, which live inside the header too) */ .fl-theme-builder-header-shrink img:not(.cg-mega img) { width: 80px !important; height: auto !important; max-height: none !important; margin-top: 0; } /* ========================================================================== 11. LAYERING — cg-z-bottom cg-z-mid cg-z-top Put on a BB module or column to control what sits in front when things overlap (hero photos over the headline, a photo over the orb). Inside a cg- row, the shapes sit at 1 and content at 2, so: cg-z-bottom behind other content (still above the shapes) cg-z-mid the middle layer cg-z-top in front of everything in the row Adds position: relative only where nothing else has positioned it. ========================================================================== */ :where(.cg-z-bottom, .cg-z-mid, .cg-z-top) { position: relative; } .cg-z-bottom:not(#cg-z) { z-index: 2; } .cg-z-mid:not(#cg-z) { z-index: 5; } .cg-z-top:not(#cg-z) { z-index: 10; } /* ========================================================================== 12. NUMBER COUNTER — cg-counter on a BB Number Counter module Number at the stat size (Kangge, 120px desktop, like cg-xl); the + / ★ at H1 size (Kangge draws them small); the text beneath in Plus Jakarta Sans ExtraBold at the cg-sm size. White. Tune: --cg-counter-size, --cg-counter-suffix-size, --cg-counter-suffix-gap, --cg-counter-label-gap (space between number and the text beneath) ========================================================================== */ .cg-counter .fl-number:not(#cg) { text-align: center; color: var(--cg-counter-color, var(--cg-color-white)); } .cg-counter :is(.fl-module-content, .fl-number, .fl-number-text, .fl-number-string):not(#cg) { overflow: visible; } .cg-counter .fl-number-string:not(#cg), .cg-counter .fl-number-string:not(#cg) span { font-family: var(--cg-font-display); font-weight: var(--cg-fw-regular); letter-spacing: 0; color: inherit; line-height: 1.15; /* room for Kangge's tall glyphs so nothing clips */ } .cg-counter .fl-number-string:not(#cg) { display: inline-block; padding-block: 0.05em; } .cg-counter .fl-number-string:not(#cg) .fl-number-int { font-size: var(--cg-counter-size, var(--cg-fs-stat)); /* 120px on desktop, same as cg-xl */ } .cg-counter .fl-number-string:not(#cg) :is(.fl-number-prefix, .fl-number-suffix) { font-size: var(--cg-counter-suffix-size, var(--cg-fs-h1)); /* Kangge's + is small, so set it larger */ vertical-align: var(--cg-counter-suffix-raise, 0.2em); } .cg-counter .fl-number-string:not(#cg) .fl-number-suffix { margin-left: var(--cg-counter-suffix-gap, 0.02em); } .cg-counter .fl-number-text:not(#cg) .fl-number-after-text, .cg-counter .fl-number-text:not(#cg) .fl-number-before-text { display: block; margin-top: var(--cg-counter-label-gap, -0.5em); /* pulls the label up under the number */ font-family: var(--cg-font-body); /* Plus Jakarta Sans ExtraBold */ font-size: var(--cg-counter-label-size, var(--cg-fs-sm)); /* cg-sm size */ font-weight: var(--cg-fw-extrabold); letter-spacing: var(--cg-ls-body); line-height: 1.15; color: inherit; } /* Glow: a tall, soft purple light behind the number */ /* Seam fix: a hairline can show where a cg-bg row meets the next row. Default: the cg-bg row reaches 2px DOWN over the next row and sits on top. cg-seam-up (on the cg-bg row): the next row reaches UP over it instead. cg-no-seam-fix (on the cg-bg row): no overlap at all. */ .fl-row.cg-bg:not(.cg-no-seam-fix):not(.cg-seam-up):not(#cg) { margin-bottom: -2px; z-index: 1; } .fl-row.cg-bg.cg-seam-up + .fl-row:not(#cg) { position: relative; z-index: 1; margin-top: -2px; } /* ========================================================================== 13. SPILL — let a row's floating shapes hang down into the next row Add cg-spill to the row whose shapes should overflow. --cg-spill sets how far the shape layer reaches below the row (default 10vh). Sideways stays clipped, so nothing causes a horizontal scrollbar. Shape positions (%) are measured on the taller layer, so nudge them with cg-fa-- swaps or --cg-fa-y if needed. ========================================================================== */ .fl-row.cg-spill:not(#cg), .cg-spill:not(.fl-row):not(#cg) { overflow-x: clip; overflow-y: visible; z-index: 2; /* above the next row, so the shape shows over it */ } /* Spill UP: the mirror of cg-spill — this row's shapes reach up over the bottom of the row above (e.g. an orb straddling the hero's bottom edge), while this row's own text stays on top. --cg-spill-up (default 15vh). */ .fl-row.cg-spill-up:not(#cg) { overflow-x: clip; overflow-y: visible; z-index: 2; } .fl-row.cg-spill-up > .fl-row-content-wrap::before { top: calc(-1 * var(--cg-spill-up, 15vh)); } /* Let content break out of the top/bottom of a row that has shapes, grain or a cg-bg (those rows clip): cg-overflow on the row — e.g. a cut-out photo with a negative top margin. Sideways stays clipped (no horizontal scrollbar). */ .fl-row.cg-overflow:not(#cg), .fl-row.cg-overflow > .fl-row-content-wrap:not(#cg) { overflow-x: clip; overflow-y: visible; } .fl-row.cg-overflow:not(#cg) { z-index: 2; } /* in front of the row above */ .fl-row.cg-spill > .fl-row-content-wrap::before, .cg-spill:not(.fl-row)::before { bottom: calc(-1 * var(--cg-spill, 10vh)); } /* ========================================================================== 14. TILES — white cards with a soft colour orb glowing from the top, rounded corners, a soft coloured glow and a drop shadow (Expertise / Boutique / Impact). Put on a BB Box module or a column — one colour name does everything: cg-tile cg-tile--sky sky wash + sky gradient heading cg-tile cg-tile--purple purple wash + purple gradient heading cg-tile cg-tile--hotpink hot-pink wash + hot-pink gradient heading (cg-tile--pink still works = hotpink.) Headings inside the tile get the matching gradient automatically; the same names exist as text classes on their own: cg-grad-sky, cg-grad-purple, cg-grad-hotpink. Tune: --cg-tile-color, --cg-tile-orb (orb radius), --cg-tile-orb-y (orb centre), --cg-tile-pad-mobile (phones, default 40px 28px), --cg-tile-radius, --cg-tile-pad ========================================================================== */ .cg-tile { --cg-tile-color: 102 198 255; /* sky (R G B) */ --cg-tile-orb: clamp(130px, 11vw, 190px); /* orb radius */ --cg-tile-orb-y: 0%; /* orb centre: 0% = on the top edge */ --cg-tile-radius: var(--cg-radius-md); --cg-tile-pad: var(--cg-space-m) var(--cg-space-s); } .cg-tile--sky { --cg-tile-color: 102 198 255; --cg-tile-grad: var(--cg-grad-sky); } .cg-tile--purple { --cg-tile-color: 176 78 240; --cg-tile-grad: var(--cg-grad-purple); } :is(.cg-tile--hotpink, .cg-tile--pink) { --cg-tile-color: 255 61 143; --cg-tile-grad: var(--cg-grad-hotpink); } /* Headings in a tile take the tile's gradient */ :is(.cg-tile:not(.fl-col), .fl-col.cg-tile > .fl-col-content) :is(h1, h2, h3, .fl-heading-text) { background-image: var(--cg-tile-grad, var(--cg-grad-sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.12em 0.06em; margin: -0.12em -0.06em; } /* BB heading modules wrap text in .fl-heading-text inside the h tag — paint only once */ :is(.cg-tile:not(.fl-col), .fl-col.cg-tile > .fl-col-content) :is(h1, h2, h3):has(.fl-heading-text) { background-image: none; -webkit-text-fill-color: currentColor; padding: 0; margin: 0; } /* the surface: the Box module itself, or a column's inner content */ .cg-tile:not(.fl-col):not(#cg), .fl-col.cg-tile > .fl-col-content:not(#cg) { border-radius: var(--cg-tile-radius); background: radial-gradient(circle var(--cg-tile-orb) at 50% var(--cg-tile-orb-y), rgb(var(--cg-tile-color) / 0.6) 0%, rgb(var(--cg-tile-color) / 0.5) 30%, rgb(var(--cg-tile-color) / 0.3) 62%, rgb(var(--cg-tile-color) / 0) 100%), var(--cg-color-white); box-shadow: 0 0 34px rgb(var(--cg-tile-color) / 0.45), /* coloured glow */ 0 22px 44px rgb(13 9 26 / 0.35); /* drop shadow */ color: var(--cg-color-navy); text-align: center; transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } /* Phones: roomier padding */ @media (max-width: 767px) { .cg-tile { --cg-tile-pad: var(--cg-tile-pad-mobile, 2.5rem 1.75rem); } } /* Padding. Want Beaver Builder's own Padding setting to control a tile instead? Add cg-tile--bb-pad */ .cg-tile:not(.cg-tile--bb-pad):not(.fl-col):not(#cg), .fl-col.cg-tile:not(.cg-tile--bb-pad) > .fl-col-content:not(#cg) { padding: var(--cg-tile-pad); } .cg-tile:not(.fl-col):not(#cg):hover, .fl-col.cg-tile:hover > .fl-col-content:not(#cg) { translate: 0 -4px; box-shadow: 0 0 44px rgb(var(--cg-tile-color) / 0.6), 0 28px 54px rgb(13 9 26 / 0.4); } /* ---- Tile "More": expand a hidden paragraph inside the tile ---- In the tile: put the extra copy in its own Text module with class cg-tile-more, and give the module holding the More link the class cg-tile-toggle (link URL: #). Click opens/closes; the label swaps to Less and the arrow turns. Always open inside the BB editor. */ .cg-tile .cg-tile-more:not(#cg) { max-height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s var(--cg-ease), opacity 0.3s var(--cg-ease); } .cg-tile.is-open .cg-tile-more:not(#cg), .fl-builder-edit .cg-tile .cg-tile-more:not(#cg) { max-height: 60rem; /* comfortably taller than any paragraph */ opacity: 1; } .cg-tile:has(.cg-tile-more), .cg-tile .cg-tile-toggle a { cursor: pointer; } .cg-tile .cg-tile-toggle a :is(i, svg) { display: inline-block; transition: rotate 0.3s var(--cg-ease); } .cg-tile.is-open .cg-tile-toggle a :is(i, svg) { rotate: -90deg; } @media (prefers-reduced-motion: reduce) { .cg-tile .cg-tile-more { transition: none; } } /* text inside stays navy even in a dark section */ :is(.cg-tile:not(.fl-col), .fl-col.cg-tile > .fl-col-content) :is(p, li, h4, h5, h6) { color: var(--cg-color-navy); } @media (prefers-reduced-motion: reduce) { .cg-tile:not(.fl-col), .fl-col.cg-tile > .fl-col-content { transition: none; } } /* ========================================================================== 15. SPEAKER & TOPIC CARDS [cg_speaker_card] [cg_speakers] [cg_topic_card] [cg_topics] — and a PowerPack Content Grid whose Custom Layout is [cg_speaker_card]. Speaker card: Results image, purple fade, name + dot; hover/focus opens the credentials, which lifts the name (the dot stays at the bottom). Topic card: tinted image, dot, name; optional hover text. Tune on the card, its list or any parent: --cg-scard-ratio (7/8) --cg-tcard-ratio (7/5) --cg-cols (set by columns="") --cg-card-gap --cg-card-min ========================================================================== */ .cg-cards { --cg-card-gap: clamp(14px, 1.6vw, 26px); --cg-card-min: 140px; /* phones: 2 across */ display: grid; grid-template-columns: repeat(auto-fill, minmax(max(var(--cg-card-min), calc((100% - (var(--cg-cols, 4) - 1) * var(--cg-card-gap)) / var(--cg-cols, 4))), 1fr)); gap: var(--cg-card-gap); margin: 0; padding: 0; list-style: none; } .cg-cards--topics { --cg-card-gap: clamp(20px, 2.2vw, 36px); /* between columns */ row-gap: var(--cg-topic-row-gap, clamp(36px, 4vw, 64px)); /* between rows */ } .cg-cards__item { margin: 0; padding: 0; background: none; } .cg-cards__item[hidden] { display: none; } /* Carousel: one card at a time; cards share one spot and cross-fade, looping forever (script in speaker-shortcodes.php), with prev/next arrows either side of the dots. Tune: --cg-fade-dur (0.9s). Dots purple so they show on light and dark. */ .cg-cards--carousel { display: block; } .cg-cards--carousel .cg-carousel__dots { color: var(--cg-color-purple); } .cg-cards--carousel .cg-carousel__track { display: grid; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0 0 24px; list-style: none; } .cg-cards--carousel .cg-cards__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--cg-fade-dur, 0.9s) var(--cg-ease), visibility 0s linear var(--cg-fade-dur, 0.9s); } .cg-cards--carousel .cg-cards__item.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity var(--cg-fade-dur, 0.9s) var(--cg-ease), visibility 0s; } /* Arrows either side of the dots: purple-ringed circles, chevron icons */ .cg-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--cg-space-s); } .cg-carousel__nav .cg-carousel__dots { margin: 0; } .cg-carousel__arrow:not(#cg) { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 1.5px solid rgb(166 80 255 / 0.45); border-radius: 50%; background: rgb(166 80 255 / 0.08); color: var(--cg-color-purple); cursor: pointer; transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), translate var(--cg-dur) var(--cg-ease); } .cg-carousel__arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9 2 4 7l5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M9 2 4 7l5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .cg-carousel__arrow--next::before { scale: -1 1; } .cg-carousel__arrow:not(#cg):is(:hover, :focus-visible) { background: var(--cg-grad-pink); border-color: transparent; color: var(--cg-color-white); } .cg-carousel__arrow--prev:not(#cg):hover { translate: -2px 0; } .cg-carousel__arrow--next:not(#cg):hover { translate: 2px 0; } .cg-carousel__arrow:not(#cg):focus-visible { outline: 3px solid rgb(166 80 255 / 0.45); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cg-cards--carousel .cg-cards__item { transition: none; } } /* ---- Speaker card ---- */ .cg-scard { position: relative; display: block; aspect-ratio: var(--cg-scard-ratio, 7 / 8); overflow: hidden; border-radius: var(--cg-photo-radius); background: #2b2833; box-shadow: var(--cg-scard-shadow, 0 18px 40px rgb(5 2 20 / 0.5)); color: var(--cg-color-white); text-align: center; text-decoration: none; isolation: isolate; transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } /* Text always white — beats theme/BB link and hover colours */ :is(.cg-scard, .cg-scard:hover, .cg-scard:focus, .cg-scard:focus-visible):not(#cg), .cg-scard:not(#cg) :is(.cg-scard__name, .cg-scard__cred) { color: var(--cg-color-white); text-decoration: none; } .cg-scard__media, .cg-scard__media::before, .cg-scard__media::after { position: absolute; inset: 0; } .cg-scard__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cg-focus, 50% 15%); transition: scale 0.6s var(--cg-ease); } /* Purple fade from the bottom (pink glow at the lower left) */ .cg-scard__media::after { content: ""; background: radial-gradient(120% 60% at 0% 100%, rgb(189 20 216 / 0.45), transparent 60%), linear-gradient(to top, rgb(126 68 210 / 0.9) 0%, rgb(166 80 255 / 0.4) 30%, rgb(166 80 255 / 0) 58%); } /* Dark scrim, only on hover, so the credentials read on any photo */ .cg-scard__media::before { content: ""; z-index: 1; background: linear-gradient(to top, rgb(13 9 26 / 0.55), rgb(13 9 26 / 0.35)); opacity: 0; transition: opacity var(--cg-dur) var(--cg-ease); } .cg-scard__body { position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-direction: column; align-items: center; max-height: 100%; padding: 0 1.1em clamp(1rem, 0.7rem + 1vw, 1.6rem); } /* Name + credentials slide as one piece. Resting: pushed down by the credentials' height (measured by the footer script), so the name sits on the dot and the credentials hide behind it. Hover: slides up to 0. Transform only — no re-layout, so the text doesn't wobble. */ .cg-scard__text { display: grid; justify-items: center; translate: 0 var(--cg-cred-h, 0px); transition: translate 0.5s var(--cg-ease); will-change: translate; } .cg-scard__name { font-family: var(--cg-font-body); font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); font-weight: var(--cg-fw-extrabold); line-height: 1.15; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgb(13 9 26 / 0.5); } .cg-scard__cred { transition: opacity var(--cg-dur) var(--cg-ease); } html.cg-motion .cg-scard__cred, .cg-scard.is-measured .cg-scard__cred { opacity: 0; } /* no script → credentials just show */ .cg-scard__cred > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; padding-top: 0.7em; font-size: clamp(0.88rem, 0.8rem + 0.25vw, 1.05rem); line-height: 1.35; } .cg-scard__dot, .cg-tcard__dot { width: 14px; height: 14px; margin-top: 0.9em; border-radius: 50%; background: var(--cg-color-pink-hot); box-shadow: 0 0 12px rgb(254 69 131 / 0.6); } @media (hover: hover) { .cg-scard:hover { translate: 0 -4px; box-shadow: var(--cg-scard-shadow-hover, 0 26px 54px rgb(5 2 20 / 0.6), 0 0 34px rgb(166 80 255 / 0.35)); } .cg-scard:hover .cg-scard__img { scale: 1.04; } } :is(.cg-scard:hover, .cg-scard:focus-visible) .cg-scard__media::before { opacity: 1; } :is(.cg-scard:hover, .cg-scard:focus-visible) .cg-scard__text { translate: 0 0; } .cg-scard:is(:hover, :focus-visible) .cg-scard__cred { opacity: 1; transition-delay: 0.1s; } .cg-scard:focus-visible, .cg-tcard:focus-visible { outline: 3px solid var(--cg-color-pink-hot); outline-offset: 4px; } /* ---- Topic card ---- */ .cg-tcard { display: grid; justify-items: center; color: var(--cg-color-white); text-align: center; text-decoration: none; } .cg-tcard__media { position: relative; width: 100%; aspect-ratio: var(--cg-tcard-ratio, 7 / 5); overflow: hidden; border-radius: clamp(14px, 0.8rem + 0.8vw, 24px); background: #2b2833; box-shadow: var(--cg-photo-shadow); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-tcard__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--cg-ease); } /* Film grain over the overlay (same grain as cg-grain). Tune: --cg-tcard-grain */ .cg-tcard__media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--cg-grain) 0 0 / 180px 180px repeat; mix-blend-mode: overlay; opacity: var(--cg-tcard-grain, 0.25); } .cg-tcard__media::after { content: ""; position: absolute; inset: 0; z-index: 1; /* From the design's overlay: a violet wash that deepens toward the top, a magenta glow rising from the bottom (left of centre) and a soft blue glow drifting in from the left. Swap with --cg-tcard-tint. */ background: var(--cg-tcard-tint, radial-gradient(55% 45% at 38% 105%, rgb(205 40 220 / 0.6), rgb(205 40 220 / 0) 70%), radial-gradient(65% 60% at 8% 65%, rgb(110 135 245 / 0.36), rgb(110 135 245 / 0) 75%), linear-gradient(to top, rgb(126 68 210 / 0.55), rgb(80 40 160 / 0.3) 55%, rgb(45 20 100 / 0.2))); transition: opacity var(--cg-dur) var(--cg-ease); } .cg-tcard__dot { margin-top: 1.1em; } .cg-tcard__name { margin-top: 0.55em; font-family: var(--cg-font-body); font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); font-weight: var(--cg-fw-extrabold); line-height: 1.25; } .cg-tcard__text { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--cg-ease), opacity var(--cg-dur) var(--cg-ease); } .cg-tcard__text > span { min-height: 0; overflow: hidden; padding-top: 0.4em; font-size: var(--cg-fs-small); line-height: 1.4; opacity: 0.85; } @media (hover: hover) { .cg-tcard:hover .cg-tcard__media { translate: 0 -4px; box-shadow: 0 22px 44px rgb(5 2 20 / 0.55), 0 0 30px rgb(166 80 255 / 0.35); } .cg-tcard:hover .cg-tcard__img { scale: 1.05; } .cg-tcard:hover .cg-tcard__media::after { opacity: 0.55; } } :is(.cg-tcard:hover, .cg-tcard:focus-visible) .cg-tcard__text { grid-template-rows: 1fr; opacity: 1; } /* ---- Speaker finder [cg_speakers filters="yes"] ---- */ .cg-filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(16px, 2vw, 28px); margin: 0 0 var(--cg-space-l); } .cg-filter__field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; } .cg-filter__label { font-weight: var(--cg-fw-extrabold); color: var(--cg-color-white); white-space: nowrap; } .cg-filter .cg-filter__input { width: var(--cg-filter-w, clamp(290px, 24vw, 350px)); height: 48px; /* name + topic match */ margin: 0; padding: 0 1.2em; border: 2px solid rgb(166 80 255 / 0.35); border-radius: var(--cg-radius-pill); background: var(--cg-color-white); font: inherit; font-size: var(--cg-fs-body); color: var(--cg-color-navy); box-shadow: 0 0 18px rgb(166 80 255 / 0.25); } .cg-filter .cg-filter__input::placeholder { color: #55516a; opacity: 1; } .cg-filter .cg-filter__input:focus { outline: none; border-color: var(--cg-color-purple); box-shadow: 0 0 0 3px rgb(166 80 255 / 0.35); } .cg-filter__select { position: relative; } .cg-filter__select select { padding-right: 2.6em; appearance: none; cursor: pointer; } .cg-filter .cg-filter__select select { width: var(--cg-filter-w, clamp(290px, 24vw, 350px)); max-width: 100%; } /* room for "Communication & Storytelling" */ .cg-filter__select::after { /* ↓ arrow */ content: ""; position: absolute; right: 1.1em; top: 50%; width: 12px; height: 14px; translate: 0 -50%; background: var(--cg-color-navy); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v11M1.5 7.5 6 12l4.5-4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v11M1.5 7.5 6 12l4.5-4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 600px) { .cg-filter, .cg-filter__field { width: 100%; } .cg-filter .cg-filter__input, .cg-filter__select, .cg-filter .cg-filter__select select { width: 100%; } } .cg-filter__empty { margin: var(--cg-space-m) 0 0; text-align: center; color: var(--cg-color-white); } .cg-filter__clear { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--cg-fw-extrabold); color: var(--cg-color-pink-hot); text-decoration: underline; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .cg-scard, .cg-scard *, .cg-scard *::before, .cg-tcard, .cg-tcard * { transition: none !important; } } /* Older profile-photo card: [cg_speaker_card style="photo"] (uses cg-pic) */ .cg-spk-card { display: block; border-radius: var(--cg-photo-radius, var(--cg-radius-lg)); color: var(--cg-color-white); text-decoration: none; } .cg-spk-card .cg-spk-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: var(--cg-focus, 50% 20%); border-radius: inherit; } .cg-spk-card__name { position: absolute; left: 0; right: 0; bottom: 18%; z-index: 2; padding-inline: 1em; font-family: var(--cg-font-body); font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); letter-spacing: var(--cg-ls-body); line-height: 1.15; text-align: center; color: var(--cg-color-white); text-shadow: 0 2px 12px rgb(13 9 26 / 0.45); } /* ========================================================================== 16. TEXT SHADOW — cg-text--shadow Soft dark glow under headings on light/busy backgrounds. Put it on the heading module (it inherits) or the text itself. Gradient text gets a drop-shadow filter instead, so the shadow doesn't show through the letters. Tune: --cg-text-shadow ========================================================================== */ .cg-text--shadow { --cg-text-shadow: 0 0.08em 0.35em rgb(23 16 51 / 0.35); text-shadow: var(--cg-text-shadow); } .cg-text--shadow:is([class*="cg-grad-"]), .cg-text--shadow [class*="cg-grad-"] { text-shadow: none; filter: drop-shadow(0 0.08em 0.3em rgb(23 16 51 / 0.3)); } /* ========================================================================== 17. MOBILE TEXT COLOUR — cg-dark-mobile White text on desktop, navy below 1000px (where BB stacks the layout), e.g. when a photo or dark background drops away on mobile. Put it on a module, column or row; it reaches every heading, paragraph, list and link inside (not buttons, not gradient text). The id trick beats BB's own per-module colour settings. Tune: --cg-mobile-text (default navy) ========================================================================== */ @media (max-width: 1000px) { .cg-dark-mobile:not(#cg), .cg-dark-mobile:not(#cg) :is(h1, h2, h3, h4, h5, h6, p, li, span, blockquote, figcaption, .fl-heading-text, .fl-rich-text, a:not(.cg-btn):not(.fl-button):not(.pp-button)):not([class*="cg-grad-"]) { color: var(--cg-mobile-text, var(--cg-color-navy)); } } /* ========================================================================== 18. TEAM — [cg_team group="leadership|team"] (team.php) Cards: photo (hover/tap → fun photo + fun fact), name, role, "Connect with …" LinkedIn, "About …" button opening the bio pop-up. Leadership names blue→purple, team names pink; purple divider. Grid: 2 / 3 / 1 columns. Tune: --cg-team-cols, --cg-team-gap, --cg-team-radius ========================================================================== */ .cg-team { --cg-team-cols: 3; --cg-team-gap: clamp(2rem, 1.2rem + 3vw, 4.5rem) clamp(1.25rem, 0.8rem + 2vw, 3rem); --cg-team-radius: var(--cg-photo-radius); display: grid; grid-template-columns: repeat(var(--cg-team-cols), minmax(0, 1fr)); gap: var(--cg-team-gap); max-width: 1100px; margin-inline: auto; text-align: center; color: var(--cg-color-navy); } .cg-team--leadership { --cg-team-cols: 2; max-width: 980px; } /* ~25% larger than the team cards */ .cg-team--leadership .cg-team__card > .cg-team__name { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 3rem); } /* cards only, not the pop-up */ .cg-team--leadership .cg-team__card > :is(.cg-team__role, .cg-team__connect) { font-size: 1.12em; } @media (max-width: 900px) { .cg-team { --cg-team-cols: 2; } } @media (max-width: 560px) { .cg-team, .cg-team--leadership { --cg-team-cols: 1; max-width: 360px; } } /* photo + hover swap */ .cg-team__photo { position: relative; aspect-ratio: 4 / 5; margin-bottom: 1.1rem; overflow: hidden; border-radius: var(--cg-team-radius); background: linear-gradient(160deg, #3a1c6e, #171033 70%); box-shadow: var(--cg-photo-shadow); outline-offset: 4px; } .cg-team__photo.is-empty { background: #1a0c38; } /* Clean edge: real photos aren't clipped by the frame (that clip is what left a hairline of whatever sat behind). Each layer rounds its own corners instead, so the photo's edge is simply the photo's edge. */ .cg-team__photo:not(.is-empty) { overflow: visible; background: none; } .cg-team__photo:not(.is-empty) :is(.cg-team__img, .cg-team__fact) { border-radius: inherit; } .cg-team__photo:not(.is-empty) .cg-team__fact { border-top-left-radius: 0; border-top-right-radius: 0; } .cg-team__photo::after { border-radius: inherit; } /* Hover: the whole photo lifts with a deeper purple glow while the fun photo cross-fades in and the fun fact rises (no zoom on the main photo, so the two never blur together). */ .cg-team__photo { transition: translate 0.5s var(--cg-ease), box-shadow 0.5s var(--cg-ease); } @media (hover: hover) { .cg-team__photo:not(.is-empty):hover { translate: 0 -6px; box-shadow: 0 30px 60px rgb(13 9 26 / 0.35), 0 0 44px rgb(166 80 255 / 0.45); } } .cg-team__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cg-team-focus, var(--cg-focus, 50% 20%)); /* keep faces in frame */ transition: opacity 0.45s var(--cg-ease), scale 0.6s var(--cg-ease); } .cg-team__img--fun { opacity: 0; } /* purple wash rising from the bottom-left corner, always on (both photos). Tune: --cg-team-wash */ .cg-team__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cg-team-wash, var(--cg-wash)); } .cg-team__fact { position: absolute; inset: auto 0 0; padding: 3.5rem 1.4rem 1.4rem; z-index: 2; text-align: center; text-shadow: 0 1px 8px rgb(60 20 120 / 0.45); background: linear-gradient(to top, rgb(110 50 200 / 0.55), transparent); color: var(--cg-color-white); font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem); font-weight: var(--cg-fw-bold); line-height: 1.35; opacity: 0; translate: 0 12px; transition: opacity 0.4s var(--cg-ease), translate 0.4s var(--cg-ease); } .cg-team__photo.has-fun:is(:hover, :focus-visible, .is-flipped) .cg-team__img--fun, .cg-team__photo.has-fun:is(:hover, :focus-visible, .is-flipped) .cg-team__fact { opacity: 1; translate: 0 0; } .cg-team__photo .cg-team__img { transition: opacity 0.55s var(--cg-ease); } /* text */ .cg-team__name { margin: 0 0 0.15em; font-family: var(--cg-font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.05; background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-block: 0.08em; } .cg-team__card--leadership .cg-team__name { background-image: var(--cg-grad-sky-purple); } .cg-team__role { margin: 0 0 0.8em; font-weight: var(--cg-fw-extrabold); line-height: 1.3; } /* short rule between role and the connect line, as in the design */ .cg-team__card > .cg-team__role::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 0.8em auto 0; border-radius: 2px; background: var(--cg-color-purple); opacity: 0.45; } .cg-team__connect { display: inline-flex; align-items: center; gap: 0.5em; margin: 0 0 1em; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); } .cg-team__connect a { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--cg-grad-pink); color: var(--cg-color-white); transition: translate var(--cg-dur) var(--cg-ease); } .cg-team__connect a:hover { translate: 0 -2px; } .cg-team__connect svg { width: 55%; height: 55%; fill: currentColor; } .cg-team__card > .cg-team__connect { display: flex; justify-content: center; } .cg-team__more { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; padding: 0.65em 1.6em; border: 0; border-radius: var(--cg-radius-pill); background: var(--cg-color-navy); color: var(--cg-color-white); font: inherit; font-size: var(--cg-fs-btn); font-weight: var(--cg-fw-extrabold); cursor: pointer; box-shadow: var(--cg-btn-shadow); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-team__more:is(:hover, :focus-visible) { translate: 0 -2px; box-shadow: var(--cg-btn-shadow), var(--cg-glow-purple); } /* bio pop-up */ .cg-team__dialog { width: min(880px, calc(100vw - 32px)); /* wide enough that most bios fit without scrolling */ max-height: min(85vh, 900px); padding: 0; border: 0; border-radius: 16px; background: var(--cg-color-white); color: var(--cg-color-navy); text-align: left; box-shadow: 0 30px 80px rgb(13 9 26 / 0.5); } .cg-team__dialog::backdrop { background: rgb(13 9 26 / 0.7); backdrop-filter: blur(4px); } .cg-team__dialog[open] { animation: cg-pop 0.3s var(--cg-ease); } @keyframes cg-pop { from { opacity: 0; translate: 0 16px; } } /* The dialog stays still; only the panel inside scrolls, so the close button stays put, the corners stay round and the last line isn't cut off */ .cg-team__dialog[open] { display: flex; overflow: hidden; } .cg-team__panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); scrollbar-width: thin; scrollbar-color: rgb(166 80 255 / 0.35) transparent; } .cg-team__dialog .cg-team__name:not(#cg) { margin: 0; padding: 0.06em 0 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); line-height: 1; } .cg-team__dialog .cg-team__role { font-size: var(--cg-fs-body); } .cg-team__dialog .cg-team__bio > :last-child { margin-bottom: 0; } .cg-team__dialog .cg-team__connect { margin: 1.25em 0 0; } .cg-team__close:not(#cg) { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgb(166 80 255 / 0.1); color: var(--cg-color-purple); display: grid; place-items: center; padding: 0; transition: background var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease); /* theme button padding pushed the × off-centre */ font: 400 1.6rem/1 Arial, sans-serif; cursor: pointer; } .cg-team__close:not(#cg):is(:hover, :focus-visible) { background: var(--cg-grad-pink); color: var(--cg-color-white); } .cg-team__dialog-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; padding-right: 2.5rem; } .cg-team__thumb { width: 84px; height: 84px; flex: none; border-radius: 14px; object-fit: cover; object-position: var(--cg-team-focus, var(--cg-focus, 50% 20%)); } .cg-team__dialog .cg-team__role:not(#cg) { margin: 0.1em 0 0; line-height: 1.3; } .cg-team__bio p { margin: 0 0 1em; line-height: 1.6; } html.cg-modal-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .cg-team__img, .cg-team__fact { transition: opacity 0.2s; translate: none; scale: none !important; } .cg-team__dialog[open] { animation: none; } } /* Jump links (e.g. /about/#values): stop below the sticky header */ .fl-row[id], .fl-module[id] { scroll-margin-top: var(--cg-header-offset, 120px); } /* ========================================================================== 19. MOTION KIT — scroll reveals + stacking cards (script in functions.php) Reveal: add cg-reveal to any row, column or module. Default = fade up, plays once when it scrolls into view. Direction cg-reveal--fade (no movement) --down --left --right --scale (grows in) --clip (wipes up — headlines) --lines (text floats up line by line; Text Editor / Heading modules; gradient text falls back to a normal fade up) Timing cg-reveal--fast --slow cg-delay--1 … --4 (+0.1s each) Replay cg-reveal--repeat (plays every time it re-enters) Intro: cg-intro = plays on page load (hero) — line by line on text modules. Stagger: cg-stagger on a row (its columns) or a column (its modules) — the children reveal one after another. Add a direction class to the same element, e.g. "cg-stagger cg-reveal--left". Stack: cg-stack-card on each card (modules in one column, or rows) — cards stick and stack as you scroll; earlier cards shrink, dim and fade out. cg-stack--no-mobile on the card turns it off on phones. Everything shows instantly with reduced motion, in the BB editor, and if the script doesn't load. Animates opacity/translate/scale only, so it stacks with cg-pic bob, cg-tile hover and Motion.page without fighting. Tune: --cg-reveal-dist (40px), --cg-reveal-dur (0.8s), --cg-stagger (90ms), --cg-stack-top (170px: header offset), --cg-stack-step (30px: peek between cards), --cg-stack-shrink (0.03: how much earlier cards shrink; 0 = none), --cg-stack-fade (1: covered card fades out completely; 0.6 = to 40%; 0 = no fade) ========================================================================== */ :root { --cg-reveal-dist: 40px; --cg-reveal-dur: 0.8s; --cg-reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --cg-stagger: 90ms; } html.cg-motion .cg-reveal:not(.is-in) { opacity: 0; } html.cg-motion .cg-reveal.is-in { animation: cg-reveal var(--cg-reveal-dur) var(--cg-reveal-ease) backwards; animation-delay: calc(var(--cg-i, 0) * var(--cg-stagger) + var(--cg-delay, 0ms)); } @keyframes cg-reveal { from { opacity: 0; translate: var(--cg-rx, 0) var(--cg-ry, var(--cg-reveal-dist)); scale: var(--cg-rs, 1); } } .cg-reveal--fade { --cg-ry: 0; } .cg-reveal--down { --cg-ry: calc(var(--cg-reveal-dist) * -1); } .cg-reveal--left { --cg-ry: 0; --cg-rx: calc(var(--cg-reveal-dist) * -1); } .cg-reveal--right { --cg-ry: 0; --cg-rx: var(--cg-reveal-dist); } .cg-reveal--scale { --cg-ry: 0; --cg-rs: 0.92; } html.cg-motion .cg-reveal--clip.is-in { animation-name: cg-reveal-clip; } @keyframes cg-reveal-clip { from { opacity: 0; clip-path: inset(100% 0 0 0); translate: 0 0.3em; } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); translate: 0 0; } } /* Line by line (text modules): each line floats up after the one above */ html.cg-motion .cg-reveal--lines:not(.is-in) { opacity: 1; } html.cg-motion .cg-reveal--lines.is-in { animation: none; } .cg-reveal--lines .cg-w { display: inline-block; } html.cg-motion .cg-reveal--lines:not(.is-in) .cg-w { opacity: 0; } html.cg-motion .cg-reveal--lines.is-in .cg-w { animation: cg-reveal-line var(--cg-line-dur, 1.2s) var(--cg-reveal-ease) backwards; animation-delay: calc(var(--cg-l, 0) * var(--cg-line-stagger, 180ms) + var(--cg-delay, 0ms)); } @keyframes cg-reveal-line { from { opacity: 0; translate: 0 0.6em; } } .cg-reveal--fast { --cg-reveal-dur: 0.5s; --cg-line-dur: 0.7s; --cg-line-stagger: 100ms; } .cg-reveal--slow { --cg-reveal-dur: 1.2s; --cg-line-dur: 1.6s; --cg-line-stagger: 260ms; } .cg-delay--1 { --cg-delay: 100ms; } .cg-delay--2 { --cg-delay: 200ms; } .cg-delay--3 { --cg-delay: 300ms; } .cg-delay--4 { --cg-delay: 400ms; } /* Intro: plays as the page loads instead of waiting to scroll into view. Use it on the hero (above the fold) instead of cg-reveal, so the main heading paints straight away — PageSpeed counts a hidden hero as slow (LCP). Works with the timing and cg-delay classes above. On a Heading or Text module it floats up line by line; on anything else (row, column, photo, button) it fades up as one piece. */ .cg-intro:not(.fl-module-heading, .fl-module-rich-text), .cg-intro.is-plain { animation: cg-reveal var(--cg-reveal-dur) var(--cg-reveal-ease) backwards; animation-delay: var(--cg-delay, 0ms); } html.cg-motion .cg-intro:is(.fl-module-heading, .fl-module-rich-text):not(.is-split, .is-plain) { opacity: 0; } .cg-intro.is-split .cg-w { display: inline-block; animation: cg-reveal-line var(--cg-line-dur, 1.2s) var(--cg-reveal-ease) backwards; animation-delay: calc(var(--cg-l, 0) * var(--cg-line-stagger, 180ms) + var(--cg-delay, 0ms)); } /* Stacking cards */ .cg-stack-card { position: sticky; top: calc(var(--cg-stack-top, 170px) + var(--cg-stack-i, 0) * var(--cg-stack-step, 30px)); /* clears the sticky header + a little air */ transform-origin: 50% 0; transform: scale(calc(1 - var(--cg-stack-p, 0) * var(--cg-stack-shrink, 0.03))); filter: brightness(calc(1 - var(--cg-stack-p, 0) * 0.3)); opacity: calc(1 - var(--cg-stack-p, 0) * var(--cg-stack-fade, 1)); /* fades out as the next card covers it */ will-change: transform, opacity; } .cg-stack-card + .cg-stack-card { margin-top: var(--cg-stack-gap, 4vh); } @media (max-width: 767px) { .cg-stack-card { --cg-stack-top: 80px; --cg-stack-step: 14px; } .cg-stack-card.cg-stack--no-mobile { position: relative; transform: none; filter: none; opacity: 1; } /* relative, not static: keeps shapes inside the card */ } /* Hold (html.cg-hold, set in the head, lifted by the footer script once the page has settled): animations wait on their first frame, so nothing plays twice when the page is re-wrapped just after load. */ html.cg-hold :is(.cg-intro, .cg-intro .cg-w, .cg-reveal, .cg-reveal .cg-w) { animation-play-state: paused !important; } /* Off switches */ .fl-builder-edit :is(.cg-reveal, .cg-reveal .cg-w, .cg-intro, .cg-intro .cg-w) { opacity: 1 !important; animation: none !important; } .fl-builder-edit .cg-stack-card { position: relative; transform: none; filter: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { html.cg-motion .cg-reveal, html.cg-motion .cg-reveal .cg-w, .cg-intro, .cg-intro .cg-w { opacity: 1 !important; animation: none !important; } .cg-stack-card { transform: none; filter: none; opacity: 1; } } /* ========================================================================== 20. MORE TESTIMONIALS — [cg_more_testimonials] (speaker Testimonials page) Industry pills filter a masonry grid of quote cards. Light rows by default; on a dark row the cards stay white, the pills switch to light-on-dark. Tune: --cg-mt-cols (3), --cg-mt-gap, --cg-mt-card-bg, --cg-mt-accent ========================================================================== */ .cg-mt { --cg-mt-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); --cg-mt-accent: var(--cg-color-pink); } .cg-mt__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 auto clamp(1.75rem, 1rem + 2.5vw, 3rem); max-width: 62rem; } .cg-mt__filters[hidden] { display: none; } /* phones: one swipeable row instead of a stack of pills */ @media (max-width: 767px) { .cg-mt__filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; } .cg-mt__filters::-webkit-scrollbar { display: none; } .cg-mt__filter:not(#cg) { flex: none; } } .cg-mt__filter:not(#cg) { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 1.1em; border: 1px solid rgb(166 80 255 / 0.25); border-radius: var(--cg-radius-pill); background: rgb(166 80 255 / 0.08); color: var(--cg-color-violet); font: inherit; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); line-height: 1.2; cursor: pointer; transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease); } .cg-mt__filter span { font-weight: 600; opacity: 0.6; font-size: 0.9em; } .cg-mt__filter:not(#cg):hover { background: rgb(166 80 255 / 0.16); } .cg-mt__filter:not(#cg)[aria-pressed="true"] { background: var(--cg-grad-pink); border-color: transparent; color: var(--cg-color-white); } .cg-mt__filter[aria-pressed="true"] span { opacity: 0.85; } .cg-mt__filter:focus-visible { outline: 2px solid var(--cg-color-purple); outline-offset: 2px; } .cg-mt__grid { columns: var(--cg-mt-cols, 3) 18rem; column-gap: var(--cg-mt-gap); } .cg-mt__card { position: relative; break-inside: avoid; margin: 0 0 var(--cg-mt-gap); padding: 2.6rem 1.6rem 1.6rem; border-radius: var(--cg-radius-lg); background: var(--cg-mt-card-bg, var(--cg-color-white)); box-shadow: var(--cg-shadow-md); color: var(--cg-color-text); text-align: left; animation: cg-mt-in 0.35s var(--cg-ease) both; } .cg-mt__card[hidden] { display: none; } @keyframes cg-mt-in { from { opacity: 0; translate: 0 8px; } } .cg-mt__card::before { /* big quote mark */ content: "\201C"; position: absolute; top: 0.35rem; left: 1.25rem; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1; color: var(--cg-mt-accent); opacity: 0.85; } .cg-mt__headline { margin: 0 0 0.5em; font-weight: var(--cg-fw-extrabold); font-size: 1.05em; line-height: 1.35; color: var(--cg-color-navy); } .cg-mt__quote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: var(--cg-fs-body); line-height: 1.6; } .cg-mt__quote p { margin: 0 0 0.75em; } .cg-mt__quote p:last-child { margin-bottom: 0; } .cg-mt__card figcaption { display: grid; gap: 0.15em; margin-top: 1.1em; padding-top: 1em; border-top: 1px solid rgb(166 80 255 / 0.18); } .cg-mt__name { font-weight: var(--cg-fw-extrabold); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--cg-fs-small); color: var(--cg-mt-accent); } .cg-mt__role { font-size: var(--cg-fs-small); color: var(--cg-color-text-muted); line-height: 1.4; } /* dark rows */ :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .cg-mt__filter:not(#cg) { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); color: var(--cg-color-white); } :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .cg-mt__filter:not(#cg)[aria-pressed="true"] { background: var(--cg-grad-pink); border-color: transparent; } @media (prefers-reduced-motion: reduce) { .cg-mt__card { animation: none; } } /* ========================================================================== 21. FORMS — every Gravity Form, automatically (no form setting or class) Pill fields with a lavender fill, labels tucked into the placeholders, checkbox/radio choices as pills, full-width gradient Submit. - A field with a placeholder hides its label (still read by screen readers). No placeholder → the label shows above it, so nothing ever goes unlabelled. - Group questions (checkboxes, radios, dropdowns) keep a bold label. - "(Required)" shows as *. Tune on the module or row: --cg-form-width (760px) --cg-form-align (left; "center" centres the text inside the fields too) :not(#cg) outranks Gravity Forms' per-form theme styles. ========================================================================== */ .gform_wrapper:not(#cg) { --cg-form-fill: #f3f0ff; --cg-form-line: rgb(166 80 255 / 0.55); --cg-form-ink: var(--cg-color-navy); --cg-form-h: 54px; max-width: var(--cg-form-width, 760px); margin-inline: auto; text-align: var(--cg-form-align, left); /* undoes cg-align-center on the module */ font-family: var(--cg-font-body); color: var(--cg-form-ink); } .gform_wrapper:not(#cg) .gform_fields { row-gap: 14px; column-gap: 12px; } .gform_wrapper:not(#cg) fieldset.gfield { min-width: 0; margin: 0; padding: 0; border: 0; } /* Form title never shows (the page has its own heading); a description still can */ .gform_wrapper:not(#cg) .gform_title { display: none; } .gform_wrapper:not(#cg) .gform_heading:not(:has(.gform_description:not(:empty))) { display: none; } /* Labels */ .gform_wrapper:not(#cg) :is(.gfield_label, .gform-field-label--type-sub, legend.gfield_label) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; /* flex drops the space before * */ margin: 0 0 8px; padding: 0; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-extrabold); color: inherit; text-align: inherit; } .gform_wrapper:not(#cg) :is(.gfield_required, .gfield_required .gfield_required) { margin-inline-start: 0; padding-inline-start: 0; color: inherit; } .gform_wrapper:not(#cg) .gfield_required_text { font-size: 0; } /* "(Required)" → * */ .gform_wrapper:not(#cg) .gfield_required_text::after { content: "*"; font-size: var(--cg-fs-body); } .gform_wrapper:not(#cg) .gfield_required_asterisk { color: inherit; } /* Placeholder present → label hidden visually (kept for screen readers) */ /* (a date's yyyy-mm-dd hint doesn't count as a placeholder) */ .gform_wrapper:not(#cg) .gfield:has(:is(input, textarea)[placeholder]:not([placeholder=""], [placeholder*="yy" i], [placeholder*="mm/" i])) > .gfield_label, .gform_wrapper:not(#cg) .ginput_complex > span:has(input[placeholder]:not([placeholder=""])) > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Fields */ .gform_wrapper:not(#cg) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"]), select, textarea) { width: 100%; height: var(--cg-form-h); margin: 0; padding: 0 1.4em; border: 1.5px solid var(--cg-form-line); border-radius: var(--cg-radius-pill); background-color: var(--cg-form-fill); box-shadow: inset 0 1px 6px rgb(166 80 255 / 0.12), 0 0 14px rgb(166 80 255 / 0.12); font: inherit; font-size: var(--cg-fs-body); line-height: 1.3; color: var(--cg-form-ink); text-align: inherit; transition: border-color 0.2s var(--cg-ease), box-shadow 0.2s var(--cg-ease); } .gform_wrapper:not(#cg) textarea { height: auto; min-height: 9em; padding-block: 1em; border-radius: 26px; resize: vertical; } .gform_wrapper:not(#cg) ::placeholder { color: var(--cg-form-ink); font-size: 1em; opacity: 0.85; } .gform_wrapper:not(#cg) :is(input, select, textarea):focus { outline: none; border-color: var(--cg-color-purple); box-shadow: 0 0 0 3px rgb(166 80 255 / 0.3); } /* :not(#cg) twice, to outrank the field rule above */ .gform_wrapper:not(#cg) select:not(#cg) { appearance: none; padding: 0 3em 0 1.4em; line-height: calc(var(--cg-form-h) - 3px); /* centres the chosen option */ cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 1v11M1.5 7.5 6 12l4.5-4.5' fill='none' stroke='%23171033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.3em center; background-size: 11px 13px; } /* Date fields: keep the field compact and the calendar icon tidy */ .gform_wrapper:not(#cg) .ginput_container_date { position: relative; width: 100%; max-width: none; } .gform_wrapper:not(#cg) .ginput_container_date input { padding-right: 3em; } .gform_wrapper:not(#cg) .ginput_container_date :is(button, .gform-datepicker-toggle, img.ui-datepicker-trigger) { position: absolute; inset-inline-end: 1.1em; inset-block: 0; margin-block: auto; } /* Calendar pop-up */ .gform_wrapper:not(#cg) .gform-datepicker-calendar { border: 1px solid rgb(166 80 255 / 0.25); border-radius: 22px; box-shadow: 0 18px 44px rgb(23 16 51 / 0.18); } .gform_wrapper:not(#cg) .gform-datepicker-calendar select:not(#cg) { height: 36px; padding: 0 2.4em 0 1em; font-size: 0.95em; font-weight: 700; line-height: 33px; text-align: center; background-position: right 0.9em center; box-shadow: none; } .gform_wrapper:not(#cg) .gform-datepicker-calendar td.day span { border-color: transparent; } .gform_wrapper:not(#cg) .gform-datepicker-calendar td.day:is(.selected, .dayMarked, .dayToday) span { background: rgb(166 80 255 / 0.2); color: var(--cg-color-navy); font-weight: 800; box-shadow: none; } .gform_wrapper:not(#cg) .gform-datepicker-calendar td.day:not(.disabled):hover span { background: rgb(166 80 255 / 0.12); color: var(--cg-color-navy); } .gform_wrapper:not(#cg) .gform-datepicker-calendar td.day:focus { outline: 0; box-shadow: none; } .gform_wrapper:not(#cg) .gform-datepicker-calendar td.day:focus span { border-color: var(--cg-color-purple); outline: 0; } /* A row holding a form lets the calendar hang below it and sit above the next row/footer (rows otherwise clip to their edges for the shapes). */ .fl-row:has(.gform_wrapper):not(#cg):not(#cg-form) { overflow-y: visible; z-index: 3; } /* Checkbox / radio choices → pills (multi-select stays multi-select) */ .gform_wrapper:not(#cg) :is(.gfield_checkbox, .gfield_radio) { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: var(--cg-form-choices, flex-start); grid-template-columns: none; /* undo column-list classes */ } .gform_wrapper:not(#cg) .gchoice { position: relative; display: block; width: auto; margin: 0; } .gform_wrapper:not(#cg) .gchoice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; /* still clickable + keyboard-focusable */ } .gform_wrapper:not(#cg) .gchoice > label { display: inline-flex; align-items: center; min-height: 42px; margin: 0; padding: 0 1.1em; border: 1.5px solid var(--cg-form-line); border-radius: var(--cg-radius-pill); background: var(--cg-form-fill); font-size: 0.92em; font-weight: 500; line-height: 1.2; color: var(--cg-form-ink); cursor: pointer; transition: background 0.2s var(--cg-ease), color 0.2s var(--cg-ease), border-color 0.2s var(--cg-ease); } .gform_wrapper:not(#cg) .gchoice > label::before, .gform_wrapper:not(#cg) .gchoice > label::after { display: none; } /* Gravity's own tick marks */ .gform_wrapper:not(#cg) .gchoice:hover > label { border-color: var(--cg-color-purple); } .gform_wrapper:not(#cg) .gchoice > input:checked + label { border-color: transparent; background: var(--cg-grad-btn-sky); color: var(--cg-color-white); } .gform_wrapper:not(#cg) .gchoice > input:focus-visible + label { outline: 3px solid rgb(166 80 255 / 0.45); outline-offset: 2px; } /* Submit */ .gform_wrapper:not(#cg) .gform_footer, .gform_wrapper:not(#cg) .gform_page_footer { margin-top: 18px; padding: 0; } .gform_wrapper:not(#cg) :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button, .gform_button) { width: 100%; min-height: var(--cg-form-h); margin: 0; padding: 0 2em; border: 0; border-radius: var(--cg-radius-pill); background: var(--cg-grad-btn-sky); box-shadow: 0 10px 26px rgb(32 76 229 / 0.3); font: inherit; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-extrabold); color: var(--cg-color-white); cursor: pointer; transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .gform_wrapper:not(#cg) :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button, .gform_button):hover { translate: 0 -2px; box-shadow: 0 14px 32px rgb(32 76 229 / 0.4); } .gform_wrapper:not(#cg) .gform_page_footer .gform_previous_button { background: transparent; border: 1.5px solid var(--cg-form-line); color: var(--cg-form-ink); box-shadow: none; } /* Messages */ .gform_wrapper:not(#cg) .gfield_description { margin-top: 6px; padding: 0 1.4em; font-size: var(--cg-fs-small); } .gform_wrapper:not(#cg) .gfield_error :is(input, select, textarea) { border-color: #d6245a; } .gform_wrapper:not(#cg) .gfield_validation_message { margin-top: 6px; padding: 0 1.4em; border: 0; background: none; color: #d6245a; font-size: var(--cg-fs-small); } .gform_wrapper:not(#cg) .gform_validation_errors { border-radius: 20px; text-align: left; } .gform_confirmation_message { text-align: center; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); } /* Phones: halves stack */ @media (max-width: 640px) { .gform_wrapper:not(#cg) .gform_fields > .gfield { grid-column: 1 / -1; } } /* Dark rows: white labels; the fields stay light */ :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .gform_wrapper:not(#cg) { color: var(--cg-color-white); } :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .gform_wrapper:not(#cg) .gform_confirmation_message { color: var(--cg-color-white); } /* ========================================================================== 22. LIGHT HEADER — page setting Header › Header colours = Light (body.cg-header-light). Navy text over a light top section; purple icon circles with white icons; navy-filled Contact Us; once you scroll, the bar turns frosted white instead of dark. The mega menu stays dark. ========================================================================== */ body.cg-header-light .fl-builder-content[data-type="header"] { --cg-contact-text: var(--cg-color-navy); --cg-contact-hover: var(--cg-color-purple); --cg-social-color: var(--cg-color-white); color: var(--cg-color-navy); } /* scrolled (or no overlay): frosted light bar */ body.cg-header-light .fl-builder-content[data-type="header"].fl-theme-builder-header-scrolled .fl-row-content-wrap:not(#cg) { background-color: var(--cg-header-light-bg, rgb(255 255 255 / 0.97)); /* white (a touch see-through) */ -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgb(23 16 51 / 0.06); } body.cg-header-light .fl-builder-content[data-type="header"].fl-theme-builder-header-scrolled { box-shadow: 0 8px 24px rgb(23 16 51 / 0.08); } /* menu links */ body.cg-header-light .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) a:not(.sub-menu a):not(#cg-nav):not(#cg), body.cg-header-light .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(:hover, .current-menu-item, .current-menu-ancestor) a:not(.sub-menu a):not(#cg-nav):not(#cg), body.cg-header-light .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) a:not(.sub-menu a):not(#cg-nav):not(#cg):is(:hover, :focus-visible) { color: var(--cg-color-navy); } body.cg-header-light .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(.current-menu-item, .current-menu-ancestor) a:not(.sub-menu a):not(#cg-nav):not(#cg) { background-color: rgb(23 16 51 / 0.05); } body.cg-header-light .pp-advanced-menu-horizontal > li:not(.cg-nav-btn):is(:hover, :focus-within) a:not(.sub-menu a):not(#cg-nav):not(#cg) { background-color: rgb(23 16 51 / 0.08); } /* Contact Us: navy pill, white text (the gradient ring stays) */ body.cg-header-light li.cg-nav-btn > a:not(#cg-btn):not(#cg), body.cg-header-light li.cg-nav-btn > a:not(#cg-btn):not(#cg):is(:hover, :focus-visible) { background: var(--cg-color-navy); color: var(--cg-color-white); } /* phone/tablet menu icon */ body.cg-header-light .fl-builder-content[data-type="header"] .pp-hamburger-inner, body.cg-header-light .fl-builder-content[data-type="header"] .pp-hamburger-inner::before, body.cg-header-light .fl-builder-content[data-type="header"] .pp-hamburger-inner::after { background-color: var(--cg-color-navy); } /* ========================================================================== 23. POST GRIDS — PowerPack Content Grid (blog, insights), automatically Rounded featured images with a gentle zoom on hover. Tune on the module or row: --cg-post-radius ========================================================================== */ .fl-module-pp-content-grid .pp-post-featured-img :is(.fl-photo-content, a, img) { border-radius: var(--cg-post-radius, clamp(1rem, 0.8rem + 0.8vw, 1.5rem)); /* 16 → 24px */ } /* Same hover as the speaker cards: the photo lifts with a purple glow and the picture zooms slightly inside its frame. */ .fl-module-pp-content-grid .pp-post-featured-img .fl-photo-content { overflow: hidden; box-shadow: 0 14px 30px rgb(5 2 20 / 0.35); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .fl-module-pp-content-grid .pp-post-featured-img img { display: block; transition: scale 0.6s var(--cg-ease); } /* PowerPack clips each post box (overflow: hidden), which cut the shadow off in a straight line; let it show. The image frame still clips the zoom. */ .fl-module-pp-content-grid .pp-content-post:not(#cg) { overflow: visible; } @media (hover: hover) { .fl-module-pp-content-grid .pp-content-post:hover .pp-post-featured-img .fl-photo-content { translate: 0 -4px; box-shadow: 0 24px 48px rgb(5 2 20 / 0.45), 0 0 34px rgb(166 80 255 / 0.35); } .fl-module-pp-content-grid .pp-content-post:hover .pp-post-featured-img img { scale: 1.04; } } @media (prefers-reduced-motion: reduce) { .fl-module-pp-content-grid .pp-post-featured-img :is(.fl-photo-content, img) { transition: none; } } /* ---- Post grid filters + pagination (PowerPack Content Grid) ---- Filters use the same pills as the testimonial filters (lavender, active = pink gradient); on phones they wrap. Pagination = round number pills, current page in the pink gradient, Prev/Next as wider pills. */ .fl-module-pp-content-grid .pp-post-filters:not(#cg) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 auto clamp(1.75rem, 1rem + 2.5vw, 3rem); padding: 0; max-width: 64rem; list-style: none; border: 0; } .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter { display: inline-flex; align-items: center; margin: 0; padding: 0.55em 1.1em; border: 1px solid rgb(166 80 255 / 0.25); border-radius: var(--cg-radius-pill); background: rgb(166 80 255 / 0.08); color: var(--cg-color-violet); font-family: var(--cg-font-body); font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease); } .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter:is(:hover, :focus-visible) { background: rgb(166 80 255 / 0.16); } .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter:focus-visible { outline: 3px solid rgb(166 80 255 / 0.45); outline-offset: 2px; } .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter.pp-filter-active { background: var(--cg-grad-pink); border-color: transparent; color: var(--cg-color-white); } @media (max-width: 767px) { /* phones: pills wrap onto several centred lines, a little smaller */ .fl-module-pp-content-grid .pp-post-filters:not(#cg) { flex-wrap: wrap; justify-content: center; gap: 0.4rem; overflow: visible; } .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter { flex: none; padding: 0.5em 0.95em; font-size: 0.875rem; } /* PowerPack's own phone dropdown for filters — keep the pills instead */ .fl-module-pp-content-grid .pp-post-filters-toggle { display: none; } .fl-module-pp-content-grid .pp-post-filters:not(#cg) { display: flex !important; } } /* dark rows */ :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .fl-module-pp-content-grid .pp-post-filters:not(#cg) .pp-post-filter:not(.pp-filter-active) { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); color: var(--cg-color-white); } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); text-align: center; } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) ul.page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; border: 0; } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) li { margin: 0; padding: 0; border: 0; background: none; } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) .page-numbers:not(ul) { /* !important: PowerPack forces display:block !important + min-width:35px !important */ display: inline-flex !important; align-items: center; justify-content: center; min-width: 2.75rem !important; height: 2.75rem; margin: 0; padding: 0 0.9em; border: 1px solid rgb(166 80 255 / 0.25); border-radius: var(--cg-radius-pill); background: rgb(166 80 255 / 0.08); color: var(--cg-color-violet); font-family: var(--cg-font-body); font-size: var(--cg-fs-small); font-weight: var(--cg-fw-extrabold); line-height: 1; text-decoration: none; transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), translate var(--cg-dur) var(--cg-ease); } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) a.page-numbers:is(:hover, :focus-visible) { background: rgb(166 80 255 / 0.18); translate: 0 -2px; } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) .page-numbers.current { background: var(--cg-grad-pink); border-color: transparent; color: var(--cg-color-white); } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) .page-numbers.dots { background: none; border-color: transparent; min-width: 1.5rem !important; padding: 0; } .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) :is(.prev, .next).page-numbers { padding: 0 1.3em; } :is(.cg-bg--night, .cg-bg--dusk, .cg-bg--deep, .cg-bg--ember, .cg-bg--ink, .cg-text-white) .fl-module-pp-content-grid .pp-content-grid-pagination:not(#cg) .page-numbers:not(ul):not(.current) { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); color: var(--cg-color-white); } /* ---- Insights mega menu (menu item class cg-insights-menu) ---- Same ink panel as Speakers, narrower: the 3 newest posts as cards (rounded image, title, author · date) with the slim "See all" bar under them. Phones/tablet menu: a simple list of the three titles. Tune: --cg-mega-ins-width (980px) */ .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega--insights:not(#cg-nav) { width: min(var(--cg-mega-ins-width, 980px), calc(100% - 2 * var(--cg-mega-right, 20px))); grid-template-columns: minmax(0, 1fr); } .pp-advanced-menu-horizontal .sub-menu.cg-mega--insights:not(#cg-nav) .cg-mega__posts { grid-column: 1; grid-row: 1; padding-right: 4px; } .pp-advanced-menu-horizontal .sub-menu.cg-mega--insights:not(#cg-nav) .cg-mega__all { margin-right: 0; } .cg-mega--insights:not(#cg-nav) .cg-mega__pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .cg-mega--insights:not(#cg-nav) .cg-mega__post { display: grid; gap: 8px; align-content: start; color: var(--cg-color-white); text-decoration: none; } .cg-mega--insights:not(#cg-nav) .cg-mega__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, rgb(107 63 208), rgb(42 22 80)); box-shadow: 0 6px 14px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-mega--insights:not(#cg-nav) .cg-mega__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--cg-ease); } .cg-mega--insights:not(#cg-nav) .cg-mega__ptitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: var(--cg-fw-bold); font-size: 0.98rem; line-height: 1.3; transition: color 0.2s var(--cg-ease); } .cg-mega--insights:not(#cg-nav) .cg-mega__meta { font-size: 0.8rem; color: rgb(255 255 255 / 0.6); } .cg-mega--insights:not(#cg-nav) .cg-mega__post:is(:hover, :focus-visible) .cg-mega__thumb { translate: 0 -3px; box-shadow: 0 12px 26px rgb(0 0 0 / 0.5), 0 0 22px rgb(166 80 255 / 0.35); } .cg-mega--insights:not(#cg-nav) .cg-mega__post:is(:hover, :focus-visible) .cg-mega__thumb img { scale: 1.05; } .cg-mega--insights:not(#cg-nav) .cg-mega__post:is(:hover, :focus-visible) .cg-mega__ptitle { color: var(--cg-color-pink-hot); } /* phones / tablet menu: titles only */ :not(.pp-advanced-menu-horizontal) > li > .cg-mega--insights:not(#cg-nav) .cg-mega__pgrid { display: grid; grid-template-columns: 1fr; gap: 4px; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega--insights:not(#cg-nav) :is(.cg-mega__thumb, .cg-mega__meta) { display: none; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega--insights:not(#cg-nav) .cg-mega__post { padding: 8px 0; color: inherit; } @media (prefers-reduced-motion: reduce) { .cg-mega--insights .cg-mega__thumb, .cg-mega--insights .cg-mega__thumb img { transition: none; } } /* ========================================================================== 24. PANELS — cg-panel (Next Steps phase cards; pairs with cg-stack-card) Dark navy card, rounded, purple edge + inner glow, soft drop shadow. Build (Beaver Builder): Row (fixed width) › Column › one Box per card: class "cg-panel cg-stack-card cg-stack--no-mobile" + any shapes, e.g. "cg-fa--13 cg-fa--tr cg-fa--w50 cg-fb--orb cg-fb--bl cg-fb--w30 cg-float--soft" inside: Heading → a Box set to 2 columns: left Box: cg-label headings + values + text | right Box: the list Inside a panel, Text/Heading modules turn white; lists get round bullets and lighter nested items. Tune: --cg-panel-radius, --cg-panel-pad, --cg-panel-bg ========================================================================== */ /* :where() = zero specificity, so anything set on the Box in Beaver Builder (background, gradient, border, padding) wins over these defaults, and cg-stack-card's sticky positioning isn't overridden. */ :where(.cg-panel) { --cg-panel-radius: clamp(28px, 1.2rem + 2.4vw, 56px); position: relative; padding: var(--cg-panel-pad, clamp(28px, 1rem + 3vw, 64px)); border: 2px solid rgb(166 80 255 / 0.55); border-radius: var(--cg-panel-radius); background: radial-gradient(70% 90% at 0% 0%, rgb(126 68 210 / 0.28), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgb(189 20 216 / 0.16), transparent 60%), var(--cg-panel-bg, #120c2b); box-shadow: inset 0 0 40px rgb(166 80 255 / 0.18), 0 0 30px rgb(166 80 255 / 0.25), 0 24px 60px rgb(5 2 20 / 0.45); color: var(--cg-color-white); overflow: clip; } /* shapes inside a panel sit softly behind the content (cg-float--soft/--faint still work) */ :where(.cg-panel) { --cg-float-opacity: 0.6; } .cg-panel::before { border-radius: inherit; } /* Box modules stack their children at their natural width; a panel's children (title, separator, the 2-column Box) span the full card. */ .cg-panel:not(#cg) > .fl-module { align-self: stretch; width: 100%; } /* The 2-column Box inside a panel: two equal columns with a real gap */ .cg-panel:not(#cg) > .fl-module-box:has(> .fl-module-box) { column-gap: clamp(24px, 1rem + 3vw, 64px); } .cg-panel:not(#cg) > .fl-module-box > .fl-module-box { flex: 1 1 0; min-width: 0; } /* Separator module inside a panel: thin white line (BB colour/weight still win if set) */ :where(.cg-panel) .fl-separator { border-top-color: rgb(255 255 255 / 0.22); } .cg-panel :is(h1, h2, h3, h4, h5, h6, p, li, .fl-heading, .fl-heading-text, .fl-rich-text) { color: inherit; } /* Title with the divider line under it */ /* Small blue labels: TIMEFRAME:, POINT OF CONTACT: (any module, any page) */ /* (on a Text/Heading module — on a whole Box it would turn everything blue, so Boxes are skipped) */ .cg-label:not(.fl-module-box):not(#cg), .cg-label:not(.fl-module-box) :is(.fl-heading, h1, h2, h3, h4, h5, h6, p) { margin: 0 0 0.2em; font-family: var(--cg-font-body); font-size: 0.82rem; font-weight: var(--cg-fw-extrabold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cg-color-sky); } /* Lists: bold items with round white bullets; nested items lighter, hollow bullets */ .cg-panel ul { margin: 0; padding: 0; list-style: none; } .cg-panel ul > li { position: relative; margin: 0 0 0.75em; padding-left: 1.2em; font-weight: var(--cg-fw-bold); line-height: 1.45; } .cg-panel ul > li::before { content: ""; position: absolute; left: 0.1em; top: 0.6em; width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; } .cg-panel ul ul { margin: 0.6em 0 0; } .cg-panel ul ul > li { font-weight: 400; opacity: 0.9; margin-bottom: 0.5em; } .cg-panel ul ul > li::before { background: transparent; border: 1.5px solid currentColor; width: 0.36em; height: 0.36em; } .cg-panel em { color: rgb(255 255 255 / 0.8); } /* ── Mobile: content lists always read left, even inside centered modules ── */ @media (max-width: 767px) { /* Beaver Builder puts its alignment on every element inside a Text module (li included), so the items themselves need the override, not just the list */ :is(.fl-rich-text, .fl-html, .fl-callout-text, .pp-infobox-description, .cg-panel) :is(ul, ol):not(#cg), :is(.fl-rich-text, .fl-html, .fl-callout-text, .pp-infobox-description, .cg-panel) :is(ul, ol):not(#cg) :is(li, p) { text-align: left; } :is(.fl-rich-text, .fl-html, .fl-callout-text, .pp-infobox-description, .cg-panel) :is(ul, ol):not(#cg) { margin-inline: 0; } } /* ── White card: cg-box on a Box module or column. Flat (no orb, no hover), left-aligned, black text. BB background/padding/radius settings still win. Tune: --cg-box-bg, --cg-box-pad, --cg-box-color ── */ :where(.cg-box:not(.fl-col), .fl-col.cg-box > .fl-col-content) { padding: var(--cg-box-pad, clamp(28px, 1rem + 2vw, 48px)); border-radius: var(--cg-radius-md); background: var(--cg-box-bg, #f4f3fb); box-shadow: 0 22px 44px rgb(13 9 26 / 0.3); text-align: left; } /* dark text even inside dark rows (cg-bg--*, row text colour); --cg-box-color to change */ .cg-box:not(#cg), .cg-box :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, b, em, .fl-heading-text, .fl-rich-text):not(#cg) { color: var(--cg-box-color, #000); } /* ── Caption over a photo: cg-over-photo on a Box holding a Photo module, then a Text module — the last module sits on the photo's bottom-left. Everything in the Box is white. Pair the Photo with cg-overlay cg-overlay--fade. Tune: --cg-over-x / --cg-over-y (inset from the photo's edges) ── */ .cg-over-photo:not(#cg) { position: relative; color: var(--cg-color-white); } .cg-over-photo :is(p, li, span, strong, b, em, a, h1, h2, h3, h4, h5, h6, .fl-heading-text, .fl-rich-text):not(#cg) { color: inherit; } .cg-over-photo:not(#cg) > .fl-module:last-child:not(:first-child) { position: absolute; z-index: 2; inset: auto var(--cg-over-x, 7%) var(--cg-over-y, 8%); width: auto; margin: 0; } .cg-over-photo > .fl-module:last-child :is(.fl-module-content, p, h1, h2, h3, h4, h5, h6):not(#cg) { margin: 0; } /* ── Video pop-up: cg-modal-play on a Button/Photo module linked to a Vimeo or YouTube URL (script in functions.php). Plays with sound on open. Tune: --cg-vmodal-width (1100px) ── */ .cg-modal-play, .cg-modal-play img { cursor: pointer; } .cg-vmodal { width: min(var(--cg-vmodal-width, 1100px), calc(100vw - 32px)); max-width: none; padding: 0; border: 0; overflow: visible; background: transparent; } .cg-vmodal::backdrop { background: rgb(13 9 26 / 0.85); backdrop-filter: blur(6px); } .cg-vmodal[open] { animation: cg-pop 0.3s var(--cg-ease); } .cg-vmodal__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cg-radius-md); background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6), 0 0 44px rgb(166 80 255 / 0.35); } .cg-vmodal__frame iframe { display: block; width: 100%; height: 100%; border: 0; } .cg-vmodal__close:not(#cg) { position: absolute; top: -52px; right: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgb(166 80 255 / 0.25); color: var(--cg-color-white); font: 400 1.6rem/1 Arial, sans-serif; cursor: pointer; transition: background var(--cg-dur) var(--cg-ease); } .cg-vmodal__close:not(#cg):hover { background: var(--cg-grad-pink); } /* wide screens: the × sits just outside the video's top-right corner */ @media (min-width: 900px) { .cg-vmodal__close:not(#cg) { top: -48px; right: -48px; } } .cg-vmodal__close:not(#cg):focus-visible { outline: 2px solid rgb(166 80 255 / 0.6); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cg-vmodal[open] { animation: none; } } /* Bold text: cg-bold on any module */ .cg-bold:not(#cg), .cg-bold :is(p, li, span, a, h1, h2, h3, h4, h5, h6, .fl-heading-text):not(#cg) { font-weight: var(--cg-fw-bold); color: inherit; } /* ========================================================================== 25. CAREERS — [cg_careers] (all open jobs) / [cg_career] (one job page) Dark title card (cg-panel) → sections (Full / Left / Right) → apply card. Tune: --cg-job-w (text column width) ========================================================================== */ .cg-jobs { --cg-job-w: 78rem; } /* ≈1250px text column, as in the design */ .cg-job + .cg-job { margin-top: var(--cg-space-xl); padding-top: var(--cg-space-section); border-top: 1px solid rgb(166 80 255 / 0.3); } .cg-job__card:not(#cg) { text-align: left; /* eyebrow + title centred below; the copy reads left, as in the design */ background: radial-gradient(45% 75% at 50% 45%, rgb(189 20 216 / 0.6), rgb(126 68 210 / 0.15) 60%, transparent 80%), var(--cg-panel-bg, #120c2b); } .cg-job__card:not(#cg) { padding-inline: clamp(1.5rem, 0.8rem + 2.5vw, 3.5rem); } .cg-job__card > * { max-width: 70rem; margin-inline: auto; } .cg-job__eyebrow:not(#cg) { margin: 0 auto; text-align: center; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-bold); line-height: 1.3; } .cg-job__title:not(#cg) { width: fit-content; margin: 0 auto 0.3em; padding: 0.12em 0.06em; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h1); line-height: 1.05; background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cg-job__meta p:not(#cg) { margin: 0 0 0.4em; font-weight: var(--cg-fw-bold); } /* labels (Location:, Compensation:, The Context:) and bold lead lines sit a size up, as in the design */ .cg-job__card :is(.cg-job__meta, .cg-job__intro) strong { font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-bold); } .cg-job__intro:not(#cg) { margin-top: 0.4em; } .cg-job__intro p:has(> strong:first-child):not(#cg) { font-weight: var(--cg-fw-bold); } /* "The Context: Why We Are Hiring" — whole line bold */ /* lists in the dark card: one plain bullet (the panel's own dot is switched off) */ .cg-job__card li::before { display: none; } .cg-job__card li:not(#cg) { font-weight: inherit; padding-left: 0.2em; } .cg-job__body { max-width: var(--cg-job-w); margin: var(--cg-space-l) auto; } .cg-job__sec { padding-block: var(--cg-space-m); } .cg-job__sec + :is(.cg-job__sec, .cg-job__cols), .cg-job__cols + .cg-job__sec { border-top: 1px solid rgb(166 80 255 / 0.3); } .cg-job__cols { display: grid; grid-template-columns: 1fr 1fr; } .cg-job__cols > div:first-child { padding-right: var(--cg-space-l); } .cg-job__cols > div + div { padding-left: var(--cg-space-l); border-left: 1px solid rgb(166 80 255 / 0.3); } .cg-job__h:not(#cg) { width: fit-content; margin: 0 0 0.35em; padding: 0.12em 0.06em 0.06em; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h2); line-height: 1; background: var(--cg-grad-sky-purple); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cg-job__sub:not(#cg) { margin: 0 0 0.6em; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-bold); line-height: 1.3; } .cg-job :is(ul, ol):not(#cg) { margin: 0 0 1em; padding-left: 1.3em; } .cg-job ul:not(#cg) { list-style: disc; } .cg-job ol:not(#cg) { list-style: decimal; } .cg-job li:not(#cg) { margin-bottom: 0.6em; padding-left: 0.2em; text-align: left; } .cg-job li::marker { color: currentColor; font-size: 0.85em; } .cg-job__apply ol li:not(#cg) { font-weight: var(--cg-fw-bold); } .cg-job__apply { display: grid; gap: var(--cg-space-m); align-items: center; max-width: calc(var(--cg-job-w) + 6rem); margin-inline: auto; padding: var(--cg-space-m) clamp(1.5rem, 1rem + 3vw, 4rem); border-radius: var(--cg-radius-lg); color: var(--cg-color-navy); background: radial-gradient(40% 55% at 62% 95%, rgb(110 180 255 / 0.35), transparent 70%), #ede6fc; } /* shapes (cg-fa/fb/fc classes, default shape 7 at the top-right) sit behind the text */ /* Shape behind the apply card — always on: shape 3, position varies a little per job */ .cg-job__apply { position: relative; isolation: isolate; overflow: clip; --cg-ap-img: var(--cg-shape-3); --cg-ap-x: 100%; --cg-ap-y: 0%; --cg-ap-w: 42%; } .cg-job__apply--v1 { --cg-ap-x: 97%; --cg-ap-y: 35%; --cg-ap-w: 46%; } .cg-job__apply::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--cg-ap-img) no-repeat var(--cg-ap-x) var(--cg-ap-y) / var(--cg-ap-w) auto; } .cg-job__apply > * { position: relative; z-index: 1; } /* apply card headings (How to Apply:, Final thought:) in solid near-black, not the gradient */ .cg-job__apply .cg-job__h:not(#cg) { background: none; -webkit-text-fill-color: currentColor; color: #0d091b; } .cg-job__apply--split { grid-template-columns: 2fr 1fr; /* deeper pink glow behind the white "If that sounds like you…" so it reads */ background: radial-gradient(26% 62% at 83% 48%, rgb(205 80 215 / 0.7), rgb(166 80 255 / 0.25) 65%, transparent 80%), radial-gradient(40% 55% at 62% 95%, rgb(110 180 255 / 0.35), transparent 70%), #ede6fc; } .cg-job__aside { display: grid; justify-items: center; gap: 0.9em; text-align: center; color: var(--cg-color-white); } .cg-job__aside p:not(#cg) { margin: 0; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-bold); line-height: 1.25; text-wrap: balance; color: inherit; text-shadow: 0 1px 12px rgb(120 30 140 / 0.35); } .cg-job__apply .cg-btn { margin-top: 0.5em; } @media (max-width: 767px) { .cg-job__cols, .cg-job__apply--split { grid-template-columns: 1fr; } .cg-job__apply { --cg-ap-w: 75%; } .cg-job__apply--split { background: radial-gradient(40% 55% at 62% 95%, rgb(110 180 255 / 0.35), transparent 70%), #ede6fc; } .cg-job__aside { color: var(--cg-color-navy); } /* no shape behind it on phones */ .cg-job__aside p:not(#cg) { text-shadow: none; } .cg-job__apply a.cg-btn:not(#cg-btn) { display: flex; width: fit-content; margin-inline: auto; } .cg-job__cols > div:nth-child(n) { padding-inline: 0; border-left: 0; } .cg-job__cols > div + div { border-top: 1px solid rgb(166 80 255 / 0.3); } } /* ── Check list: cg-checklist on a PowerPack Icon / Number List module. The icon centres on the line, and a big lead word (e.g. a cg-med link) and the smaller text after it sit on one shared baseline. Wraps neatly on phones. Tune: --cg-check-y (nudge the icon up/down, e.g. -2px), --cg-check-gap ── */ .cg-checklist .pp-icon-list-item:not(#cg) { display: flex; align-items: center; } .cg-checklist .pp-list-item-icon:not(#cg) { flex: none; translate: 0 var(--cg-check-y, -10px); line-height: 1; } .cg-checklist .pp-list-item-text:not(#cg) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--cg-check-gap, 0.35em); } /* White text: cg-white on any module, column, Box or row — reaches every heading, paragraph, list and link inside (beats BB's own colour settings). Buttons and gradient text keep their own colours. */ .cg-white:not(#cg), .cg-white :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, b, em, blockquote, figcaption, .fl-heading-text, .fl-rich-text, a:not(.cg-btn):not(.fl-button):not(.pp-button)):not([class*="cg-grad-"]):not(#cg) { color: var(--cg-color-white); } /* ---- About mega menu (menu item class cg-about-menu) ---- "About cmi" jump links in a 2-column grid | "Work With Us" pages. Titles + the menu items' Description lines; Careers shows a jobs badge. Tune: --cg-mega-about-width (820px) */ .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega--about:not(#cg-nav) { width: min(var(--cg-mega-about-width, 820px), calc(100% - 2 * var(--cg-mega-right, 20px))); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto; } .pp-advanced-menu-horizontal .sub-menu.cg-mega--about:not(#cg-nav) .cg-mega__work { grid-column: 2; grid-row: 1; } .pp-advanced-menu-horizontal .cg-mega--about:not(#cg-nav) .cg-mega__col > ul { margin-inline: -12px; } /* titles line up with the column headings */ .cg-mega--about:not(#cg-nav) .cg-mega__lgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; } .cg-mega--about:not(#cg-nav) .cg-mega__link { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; color: var(--cg-color-white); text-decoration: none; transition: background-color 0.2s var(--cg-ease); } .cg-mega--about:not(#cg-nav) .cg-mega__link:is(:hover, :focus-visible) { background: rgb(255 255 255 / 0.08); } .cg-mega--about:not(#cg-nav) .cg-mega__ltitle { display: flex; align-items: center; gap: 8px; font-weight: var(--cg-fw-bold); line-height: 1.25; transition: color 0.2s var(--cg-ease); } .cg-mega--about:not(#cg-nav) .cg-mega__link:is(:hover, :focus-visible) .cg-mega__ltitle { color: var(--cg-color-pink-hot); } .cg-mega--about:not(#cg-nav) .cg-mega__ldesc { font-size: 0.8rem; line-height: 1.35; color: rgb(255 255 255 / 0.6); } .cg-mega--about:not(#cg-nav) .cg-mega__badge { padding: 2px 8px; border-radius: var(--cg-radius-pill); background: var(--cg-grad-pink); color: var(--cg-color-white); font-size: 0.7rem; font-weight: var(--cg-fw-extrabold); line-height: 1.4; } /* phones / tablet menu: one simple list */ :not(.pp-advanced-menu-horizontal) > li > .cg-mega--about:not(#cg-nav) .cg-mega__lgrid { grid-template-columns: 1fr; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega--about:not(#cg-nav) .cg-mega__link { padding: 7px 0; } :not(.pp-advanced-menu-horizontal) > li > .cg-mega--about:not(#cg-nav) .cg-mega__ldesc { display: none; } /* cg-dark-mobile wins over cg-white below 1000px (on the same element or inside it): white on desktop, navy on mobile. Double id-count beats cg-white's rule. */ @media (max-width: 1000px) { .cg-dark-mobile:not(#cg):not(#cg-m), .cg-dark-mobile :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, b, em, blockquote, figcaption, .fl-heading-text, .fl-rich-text, a:not(.cg-btn):not(.fl-button):not(.pp-button)):not([class*="cg-grad-"]):not(#cg):not(#cg-m) { color: var(--cg-mobile-text, var(--cg-color-navy)); } } /* ── Topic hero heading [cg_topic_title]: topic name at display size, "Speakers" smaller on its own line (as in the design). Tune: --cg-topic-sub (size of "Speakers", default 45% of the name) ── */ .cg-topic-title:not(#cg) { margin: 0; color: inherit; text-align: center; font-family: var(--cg-font-display); font-weight: 400; letter-spacing: 0; font-size: var(--cg-fs-display); line-height: 0.85; text-wrap: balance; } .cg-topic-title__name, .cg-topic-title__sub { display: block; } .cg-topic-title__sub { margin-top: var(--cg-topic-sub-gap, 0.15em); font-size: var(--cg-topic-sub, 0.45em); line-height: 1; } /* gap clears Kangge's long g/y descenders */ /* ── Topic insights [cg_topic_insights]: the Next Steps panels (cg-panel), centred: Kangge headline, thin rule, body. Stack on scroll like Next Steps. ── */ .cg-insights-stack { display: grid; grid-auto-rows: 1fr; gap: var(--cg-space-m); max-width: 1100px; margin-inline: auto; } /* 1fr rows = every card as tall as the tallest */ .cg-insights-stack .cg-stack-card + .cg-stack-card { margin-top: 0; } .cg-insight:not(#cg) { display: flex; flex-direction: column; justify-content: center; text-align: center; padding-block: clamp(36px, 1.5rem + 3vw, 72px); } .cg-insight__title:not(#cg) { margin: 0 auto; max-width: 52rem; padding-bottom: 0.6em; border-bottom: 1px solid rgb(255 255 255 / 0.22); font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h2); line-height: 1.1; color: var(--cg-color-white); } .cg-insight__body:not(#cg) { max-width: 46rem; margin: 1.1em auto 0; font-size: var(--cg-fs-body); line-height: 1.6; color: rgb(255 255 255 / 0.9); } /* ── FAQs [cg_faqs]: dark pill questions, pink +/−, answer in plain text below ── */ .cg-faqs:not(#cg) { gap: 10px; } .cg-faq:not(#cg) { border: 0; } .cg-faq__q:not(#cg) { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.85em 1.4em; border-radius: 12px; background: #0d0818; color: var(--cg-color-white); font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); line-height: 1.35; transition: background-color var(--cg-dur) var(--cg-ease); } .cg-faq__q:not(#cg):hover { background: #1c1236; } /* + / − in pink (replaces the chevron) */ .cg-faq__q:not(#cg)::after { content: "+"; position: static; flex: none; width: auto; height: auto; margin: 0; border: 0; rotate: none; transition: none; color: var(--cg-color-pink-hot); font-size: 1.5em; font-weight: 400; line-height: 1; } details[open] > .cg-faq__q:not(#cg)::after { content: "\2212"; rotate: none; margin: 0; } :is(.cg-faq, .cg-acc, .cg-kt):not(#cg) { overflow: hidden; } /* clips the open/close animation */ .cg-faq__a:not(#cg) { padding: 1em 1.5em 0.8em; color: var(--cg-color-navy); line-height: 1.6; } /* ── Jump buttons [cg_nav]: equal widths, centred rows. Tune: --cg-nav-btn-w ── */ .cg-nav:not(.cg-nav--grid) .cg-nav__btn.cg-btn:not(#cg-btn) { flex: 0 0 var(--cg-nav-btn-w, 15rem); max-width: 100%; white-space: normal; } @media (max-width: 600px) { .cg-nav:not(.cg-nav--grid) .cg-nav__btn.cg-btn:not(#cg-btn) { flex-basis: calc(50% - var(--cg-space-2xs)); } } /* ── When Should You Book [cg_when_to_book]: black cards, glowing number circle on the top edge; card 1 blue, 2 purple, 3 pink (repeats) ── */ .cg-num-cards--book { --cg-nc: 60 140 255; --cg-nc2: 76 186 255; gap: clamp(20px, 1rem + 1.5vw, 40px); padding-top: 40px; } .cg-num-cards--book > :nth-child(3n+2) { --cg-nc: 166 80 255; --cg-nc2: 189 20 216; } .cg-num-cards--book > :nth-child(3n+3) { --cg-nc: 254 69 131; --cg-nc2: 232 0 186; } .cg-num-cards--book .cg-num-card:not(#cg) { position: relative; text-align: center; color: var(--cg-color-white); padding: 76px clamp(24px, 1rem + 1.5vw, 40px) 48px; border: 0; border-radius: var(--cg-radius-lg); background: #0d0818; box-shadow: 0 0 34px rgb(var(--cg-nc) / 0.55), 0 18px 40px rgb(13 9 26 / 0.35); } .cg-num-cards--book .cg-num-card__num:not(#cg) { position: absolute; top: 0; left: 50%; translate: -50% -32%; display: grid; place-items: center; width: 72px; height: 72px; margin: 0; border-radius: 50%; background: linear-gradient(160deg, rgb(var(--cg-nc2)), rgb(var(--cg-nc))); -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--cg-color-white); font-family: var(--cg-font-display); font-size: 1.6rem; line-height: 1; box-sizing: border-box; padding-top: var(--cg-num-nudge, 0.22em); /* Kangge's numerals sit high in their box; nudge them to optical centre */ box-shadow: 0 0 28px rgb(var(--cg-nc) / 0.8); } /* lead line = cg-sm cg-sans exactly */ .cg-num-cards--book .cg-num-card__lead:not(#cg) { margin: 0 0 0.9em; color: inherit; font-family: var(--cg-font-body); font-weight: var(--cg-fw-bold); font-size: var(--cg-fs-sm); letter-spacing: var(--cg-ls-body); line-height: 1.15; text-wrap: balance; } .cg-num-cards--book .cg-num-card__body:not(#cg) { color: rgb(255 255 255 / 0.88); line-height: 1.55; } /* ── Speaker marketing page polish (Oct 14) ── */ /* Topic buttons [cg_topic_buttons]: dark brand buttons, centred */ .cg-topic-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cg-topic-btns .cg-btn:not(#cg-btn) { --cg-btn-min-width: 0; } /* same size and padding as every cg-btn, just no 220px minimum */ /* Keynote cards [cg_keynotes mode="featured"]: white, gradient border all round, title = cg-med + cg-grad-pink, subtitle = cg-sm cg-sans cg-bold in black */ .cg-kt-card:not(#cg) { text-align: center; border: 0; background: var(--cg-color-white); padding-inline: clamp(24px, 9%, 72px); /* % of the card's column, not the screen: narrow cards keep room for text */ box-shadow: 0 20px 50px rgb(23 16 51 / 0.14), 0 0 30px rgb(166 80 255 / 0.12); container-type: inline-size; } .cg-kt-card__title:not(#cg) { width: fit-content; max-width: 100%; margin: 0 auto 0.25em; padding: 0.12em 0.06em; font-family: var(--cg-font-display); font-weight: 400; font-size: min(var(--cg-fs-h2), 15cqi); line-height: var(--cg-lh-heading); overflow-wrap: break-word; text-wrap: balance; /* long one-word titles (UnMarketing) shrink to fit the card */ background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cg-kt-card__subtitle:not(#cg) { margin: 0 0 0.75em; font-family: var(--cg-font-body); font-weight: var(--cg-fw-bold); font-size: var(--cg-fs-sm); letter-spacing: var(--cg-ls-body); line-height: 1.15; color: #000; } /* Beyond the Keynote [cg_beyond]: the home page tile surface (white, colour orb glowing from the top, coloured glow), lead-in = cg-sm in Kangge */ .cg-bk__card:not(#cg) { --cg-tile-color: 102 198 255; text-align: center; background: radial-gradient(circle clamp(130px, 11vw, 190px) at 50% 0%, rgb(var(--cg-tile-color) / 0.6) 0%, rgb(var(--cg-tile-color) / 0.5) 30%, rgb(var(--cg-tile-color) / 0.3) 62%, rgb(var(--cg-tile-color) / 0) 100%), var(--cg-color-white); box-shadow: 0 0 34px rgb(var(--cg-tile-color) / 0.45), 0 22px 44px rgb(13 9 26 / 0.35); } .cg-bk > :nth-child(3n+2).cg-bk__card:not(#cg) { --cg-tile-color: 176 78 240; } .cg-bk > :nth-child(3n+3).cg-bk__card:not(#cg) { --cg-tile-color: 255 61 143; } .cg-bk__title:not(#cg) { font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h3); line-height: var(--cg-lh-heading); } /* H3 (40) — one step below cg-med */ /* FAQ +/−: drawn lines, centred exactly (the font glyph sat low) */ .cg-faq__q:not(#cg)::after { content: ""; width: 14px; height: 14px; font-size: 0; background: linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 100% 2px no-repeat, linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 2px 100% no-repeat; } details[open] > .cg-faq__q:not(#cg)::after { content: ""; background: linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 100% 2px no-repeat; } /* Gradient text at the big display sizes (cg-huge / cg-xl / cg-lg): their tight line-height let Kangge's tall letters poke above the box, and background-clip text only paints inside it, so the tops were cut off. More paint room above. */ :is(.cg-huge, .cg-xl, .cg-lg):is([class*="cg-grad-"]), :is(.cg-huge, .cg-xl, .cg-lg):is([class*="cg-grad-"]) :is(h1, h2, h3, h4, .fl-heading-text), [class*="cg-grad-"]:is(.cg-huge, .cg-xl, .cg-lg) :is(h1, h2, h3, h4, .fl-heading-text) { padding-top: 0.25em; margin-top: -0.25em; } /* Speaker social icons [cg_social] (same as the cmi icons, black circles), centred */ .cg-social--speaker { --cg-social-size: 44px; --cg-social-bg: #0d0818; --cg-social-color: var(--cg-color-white); --cg-social-gap: 12px; display: flex; justify-content: center; } /* Two sizes in one heading, e.g.

About
Mike Walsh

: the smaller line gets its own (tighter) line height instead of the big one */ :is(h1, h2, h3, .fl-heading-text) > :is(.cg-med, .cg-sm) { display: block; margin-top: -0.12em; line-height: 1; } :is(h1, h2, h3, .fl-heading-text) > br:has(+ :is(.cg-med, .cg-sm)) { display: none; } @media (max-width: 1000px) { .cg-align--center-mobile :is(.cg-btn-group, .cg-btns, .cg-topic-btns):not(#cg) { justify-content: center; } } /* ── How We Partner [cg_partner]: full-width two-way toggle, then a dark card with a numbered list (number + bold title, text indented under it) ── */ .cg-tabs--partner { max-width: 1000px; margin-inline: auto; text-align: left; } .cg-tabs--partner .cg-tabs__list:not(#cg) { display: flex; width: min(100%, 820px); margin: 0 auto var(--cg-space-m); padding: 0; gap: 0; border-radius: var(--cg-radius-pill); background: #120c2b; overflow: hidden; box-shadow: 0 10px 26px rgb(13 9 26 / 0.3); } .cg-tabs--partner .cg-tabs__tab:not(#cg) { flex: 1 1 0; padding: 0.95em 1em; border-radius: var(--cg-radius-pill); background: transparent; color: var(--cg-color-white); font-size: var(--cg-fs-small); font-weight: var(--cg-fw-extrabold); line-height: 1.1; transition: background-color var(--cg-dur) var(--cg-ease); } /* one highlight that slides between the halves. The pill track clips it, so its inner edge is a straight line at the centre (no corner morph mid-slide). */ .cg-tabs--partner .cg-tabs__list:not(#cg) { position: relative; isolation: isolate; } .cg-tabs--partner .cg-tabs__list::before { content: ""; position: absolute; inset: 0 50% 0 0; z-index: -1; background: var(--cg-grad-btn-sky); box-shadow: var(--cg-glow-sky); transition: translate 0.45s var(--cg-ease); } .cg-tabs--partner .cg-tabs__list:has(.cg-tabs__tab:nth-child(2)[aria-selected="true"])::before { translate: 100% 0; } .cg-tabs--partner .cg-tabs__tab:not(#cg), .cg-tabs--partner .cg-tabs__tab[aria-selected="true"]:not(#cg) { background: transparent; box-shadow: none; border-radius: 0; transition: none; } .cg-tabs--partner .cg-tabs__tab[aria-selected="false"]:not(#cg):hover { background: rgb(255 255 255 / 0.06); } /* only the copy fades in; the dark card itself stays put (no blink) */ .cg-tabs--partner .cg-tabs__panel:not([hidden]) > .cg-partner { animation: cg-tab-in 0.45s var(--cg-ease) both; } @keyframes cg-tab-in { from { opacity: 0; translate: 0 8px; } } @media (prefers-reduced-motion: reduce) { .cg-tabs--partner .cg-tabs__list::before { transition: none; } .cg-tabs--partner .cg-tabs__panel:not([hidden]) > .cg-partner { animation: none; } } .cg-tabs--partner .cg-tabs__panel:not(#cg) { position: relative; overflow: clip; isolation: isolate; padding: clamp(28px, 1rem + 3vw, 64px) clamp(28px, 1rem + 4vw, 80px); border-radius: var(--cg-radius-lg); color: var(--cg-color-white); background: radial-gradient(40% 60% at 65% 45%, rgb(166 80 255 / 0.25), transparent 70%), radial-gradient(30% 50% at 30% 100%, rgb(76 120 255 / 0.25), transparent 70%), #170f33; box-shadow: 0 24px 60px rgb(13 9 26 / 0.4), 0 0 40px rgb(166 80 255 / 0.25); } .cg-tabs--partner .cg-tabs__panel::before { border-radius: inherit; } .cg-tabs--partner .cg-partner:not(#cg) { display: block; counter-reset: cg-step; } .cg-tabs--partner .cg-partner li:not(#cg) { position: relative; margin: 0 0 1.4em; padding: 0 0 0 1.9em; border: 0; } .cg-tabs--partner .cg-partner li:last-child { margin-bottom: 0; } .cg-tabs--partner .cg-partner li::before { content: counter(cg-step) "."; position: absolute; left: 0; top: 0; margin: 0; font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: 1.3; color: var(--cg-color-white); } .cg-tabs--partner .cg-partner strong { font-size: var(--cg-fs-lead); font-weight: var(--cg-fw-extrabold); line-height: 1.3; } .cg-tabs--partner .cg-partner p { margin: 0.6em 0 0; line-height: 1.6; color: rgb(255 255 255 / 0.9); } /* Play icon in [cg_video_button]: white triangle in a soft circle, before the label */ .cg-btn__play { position: relative; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgb(255 255 255 / 0.22); } .cg-btn__play::after { content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%; border-style: solid; border-width: 0.38em 0 0.38em 0.6em; border-color: transparent transparent transparent currentColor; } .cg-btn--play:hover .cg-btn__play { background: rgb(255 255 255 / 0.32); } /* ========================================================================== 26. HOW TO SELL — speaker-how-to-sell layout (Oct 14) ========================================================================== */ /* intros under section titles: readable width, centred */ .cg-hts-intro :is(p, .fl-rich-text):not(#cg) { max-width: 52rem; margin-inline: auto; } .cg-hts-narrow > .fl-module-content:not(#cg) { max-width: 60rem; margin-inline: auto; } /* 01–03 positioning statements: the When-to-Book dark cards, quote centred */ .cg-num-cards--quote .cg-num-card__quote:not(#cg) { margin: 0; font-style: normal; color: rgb(255 255 255 / 0.92); text-wrap: balance; } /* cg-sm cg-sans in the markup */ /* short divider line */ .cg-rule { display: block; width: 6rem; height: 2px; margin: var(--cg-space-s) auto; border-radius: 2px; background: rgb(126 68 210 / 0.45); } /* a list centred as a block, its lines still reading left */ .cg-list-center .cg-list:not(#cg) { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; } .cg-list-center .cg-list li::marker { color: currentColor; } /* [cg_hts_buttons]: both buttons the width of the longer one */ .cg-btns--equal:not(#cg) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; margin-inline: auto; } .cg-btns--equal .cg-btn:not(#cg-btn) { --cg-btn-min-width: 0; width: 100%; } @media (max-width: 600px) { .cg-btns--equal:not(#cg) { grid-auto-flow: row; } } .cg-btns--equal.cg-btns--stack:not(#cg) { grid-auto-flow: row; margin-inline: 0; } @media (max-width: 1000px) { .cg-align--center-mobile .cg-btns--equal.cg-btns--stack:not(#cg) { margin-inline: auto; } } /* How to Sell quick links: narrower, taller, all the same size (two lines) */ .cg-nav--hts { --cg-nav-btn-w: 12.5rem; max-width: calc(4 * var(--cg-nav-btn-w) + 3 * var(--cg-space-2xs)); margin-inline: auto; } .cg-nav--hts .cg-nav__btn.cg-btn:not(#cg-btn) { height: calc(2lh + 2.4em); min-height: 0; padding-block: 0; line-height: 1.2; text-wrap: balance; } /* buttons stacked on the left (beside the comparison card) */ .cg-btns--stack:not(#cg) { flex-direction: column; align-items: flex-start; } @media (max-width: 1000px) { .cg-align--center-mobile .cg-btns--stack:not(#cg) { align-items: center; } } /* Lilac card with a shape behind (comparison card, fee range): matches the careers apply card */ :is(.cg-compare, .cg-fee-range).cg-card:not(#cg) { position: relative; isolation: isolate; overflow: clip; padding: clamp(28px, 1rem + 2.5vw, 56px) clamp(28px, 1rem + 3vw, 64px); border-radius: var(--cg-radius-lg); color: var(--cg-color-navy); background: radial-gradient(40% 55% at 62% 95%, rgb(110 180 255 / 0.35), transparent 70%), radial-gradient(35% 45% at 58% 50%, rgb(230 120 255 / 0.3), transparent 70%), #ede6fc; box-shadow: 0 22px 44px rgb(13 9 26 / 0.12); } :is(.cg-compare, .cg-fee-range).cg-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--cg-card-shape, var(--cg-shape-3)) no-repeat var(--cg-card-shape-x, 100%) var(--cg-card-shape-y, 100%) / var(--cg-card-shape-w, 42%) auto; } .cg-fee-range.cg-card { --cg-card-shape-y: 0%; } .cg-compare .cg-compare__label:not(#cg) { margin-bottom: 0.45em; } /* cg-sm cg-sans cg-bold in the markup */ .cg-compare.cg-card { --cg-card-shape-w: 62%; --cg-card-shape-x: 108%; --cg-card-shape-y: 108%; } /* bigger shape behind the comparison card */ .cg-compare .cg-list:not(#cg) { font-size: max(1rem, var(--cg-fs-small)); } /* never below 16px on phones */ .cg-compare .cg-list li::marker, .cg-compare .cg-list:last-child li::marker { color: currentColor; } /* Fee range: display title, bold bulleted lines, Book Now centred */ .cg-fee-range .cg-fee-range__title:not(#cg) { font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h3); line-height: 1.05; } .cg-fee-range ul:not(#cg) { padding-left: 1.2em; list-style: disc; } .cg-fee-range li:not(#cg) { font-weight: var(--cg-fw-bold); } .cg-fee-range li::marker { color: currentColor; } .cg-fee-range > .cg-btn:not(#cg-btn) { display: flex; width: fit-content; margin-inline: auto; } /* When to Recommend: two light cards, display titles with a short rule under */ .cg-two-cards { gap: clamp(20px, 1rem + 1.5vw, 40px); } .cg-two-cards .cg-card:not(#cg) { padding: clamp(32px, 1rem + 3vw, 64px); border-radius: var(--cg-radius-lg); background: #f4f3fb; color: var(--cg-color-navy); box-shadow: 0 22px 44px rgb(13 9 26 / 0.3); } .cg-two-cards .cg-card__title:not(#cg) { position: relative; margin: 0 0 1em; padding-bottom: 0.55em; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h3); line-height: 1.05; color: inherit; } .cg-two-cards .cg-card__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 2px; border-radius: 2px; background: rgb(126 68 210 / 0.35); } .cg-two-cards .cg-list:not(#cg) { font-size: max(1rem, var(--cg-fs-small)); } .cg-two-cards .cg-list li::marker { color: currentColor; } /* Competitor + research copy: first paragraph (and any h3/h4) is the bold lead-in */ .cg-hts-copy :is(.fl-module-content, .fl-html) > p:first-child:not(#cg), .cg-hts-copy :is(h3, h4):not(#cg) { margin: 0 0 1em; font-family: var(--cg-font-body); font-size: var(--cg-fs-sm); font-weight: var(--cg-fw-bold); line-height: 1.3; letter-spacing: var(--cg-ls-body); } .cg-hts-copy ul:not(#cg) { padding-left: 1.2em; } .cg-hts-copy li::marker { color: currentColor; } .cg-hts-copy a:not(.cg-btn):not(#cg) { font-weight: var(--cg-fw-bold); color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } /* ========================================================================== 27. SPEAKER INFO PAGE — speaker-info / speaker-bureau-info (Oct 14) ========================================================================== */ /* Hero jump buttons: tall, three to a row */ .cg-nav--tall { --cg-nav-btn-w: 16.5rem; max-width: calc(3 * var(--cg-nav-btn-w) + 2 * var(--cg-space-2xs)); margin-inline: auto; } .cg-nav--tall .cg-nav__btn.cg-btn:not(#cg-btn) { min-height: clamp(3.5rem, 2.6rem + 2.2vw, 5.75rem); line-height: 1.2; } /* Lines: cg-hr (full width) and cg-rule (short; cg-rule--left under a left heading) */ .cg-hr { display: block; height: 1px; margin: var(--cg-space-l) 0; border: 0; background: rgb(126 68 210 / 0.55); } .cg-rule--left { margin-inline: 0; } .cg-bg--night .cg-rule, .cg-bg--night .cg-hr { background: rgb(255 255 255 / 0.3); } .cg-bio-headline:not(#cg) { margin: 0 0 0.6em; font-size: var(--cg-fs-sm); font-weight: var(--cg-fw-bold); line-height: 1.25; } .cg-lead-sm:not(#cg) { font-size: var(--cg-fs-sm); line-height: 1.3; } .cg-text-glow, .cg-text-glow :is(h1, h2, h3, .fl-heading-text) { text-shadow: 0 0 40px rgb(126 68 210 / 0.45), 0 4px 18px rgb(126 68 210 / 0.25); } /* Call-out box [cg_accolades]: purple → pink gradient, cg-med heading, bold white items */ .cg-accolades:not(#cg) { max-width: 62rem; margin: var(--cg-space-l) auto; padding: clamp(32px, 1rem + 3vw, 64px) clamp(28px, 1rem + 4vw, 80px); border: 0; border-radius: var(--cg-radius-lg); color: var(--cg-color-white); background: radial-gradient(45% 60% at 40% 100%, rgb(76 120 255 / 0.35), transparent 70%), linear-gradient(100deg, #7a3fd0 0%, #c22ab8 40%, #ee2a8a 75%, #f0328a 100%); box-shadow: 0 24px 60px rgb(13 9 26 / 0.35); } .cg-accolades__title:not(#cg) { margin: 0 0 0.5em; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h2); line-height: 1.05; color: inherit; } .cg-accolades .cg-list:not(#cg) { padding-left: 1.1em; } .cg-accolades .cg-list li:not(#cg) { font-weight: var(--cg-fw-bold); color: inherit; } .cg-accolades .cg-list li::marker { color: currentColor; } .cg-accolades__closing:not(#cg), .cg-accolades__closing :is(p, a):not(#cg) { color: rgb(255 255 255 / 0.92); } /* Speech topics [cg_keynotes mode="list"]: open sections split by a line */ .cg-kts--list { display: block; } .cg-kt-sec + .cg-kt-sec { margin-top: var(--cg-space-l); padding-top: var(--cg-space-l); border-top: 1px solid rgb(126 68 210 / 0.55); } .cg-kt-sec .cg-kt__grid:not(#cg) { padding: 0; gap: clamp(32px, 1rem + 4vw, 96px); align-items: start; } @media (min-width: 900px) { .cg-kt-sec .cg-kt__grid:not(.cg-kt__grid--single):not(#cg) { grid-template-columns: 1.15fr 1fr; } } .cg-kt__heading:not(#cg) { width: fit-content; margin: 0 0 0.4em; padding: 0.12em 0.04em 0.04em; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h2); line-height: 1.05; background: var(--cg-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cg-kt-sec .cg-kt__lead:not(#cg) { font-size: var(--cg-fs-sm); font-weight: var(--cg-fw-bold); line-height: 1.25; color: var(--cg-color-navy); } .cg-kt-sec .cg-kt__body > p:last-child:has(> strong:only-child) { font-weight: var(--cg-fw-bold); } .cg-kt-sec .cg-kt__side:not(#cg) { gap: clamp(28px, 1rem + 2vw, 48px); } .cg-kt-sec .cg-kt__outcomes:not(#cg) { padding: clamp(28px, 1rem + 2vw, 44px); border-radius: var(--cg-radius-lg); background: var(--cg-color-white); box-shadow: 0 20px 50px rgb(126 68 210 / 0.18); } .cg-kt-sec .cg-kt__outcomes-label:not(#cg) { text-transform: none; letter-spacing: 0; font-size: var(--cg-fs-body); color: #4b2fb0; } .cg-kt-sec .cg-kt__outcomes-intro:not(#cg) { margin: 0 0 1em; font-size: var(--cg-fs-sm); font-weight: var(--cg-fw-bold); line-height: 1.2; color: #4b2fb0; } .cg-kt-sec .cg-kt__outcomes .cg-list li:not(#cg) { margin-block: 0 1em; } .cg-kt-sec .cg-kt__outcomes .cg-list li::marker { color: currentColor; } .cg-kt-sec .cg-kt__testimonial:not(#cg) { position: relative; margin: 0; padding: clamp(36px, 1rem + 2vw, 52px) clamp(24px, 1rem + 1.5vw, 40px) clamp(28px, 1rem + 1.5vw, 40px); border-radius: var(--cg-radius-lg); text-align: center; color: var(--cg-color-navy); background: #f8f7fd; box-shadow: 0 20px 50px rgb(126 68 210 / 0.12); } .cg-kt-sec .cg-kt__testimonial blockquote:not(#cg) { margin: 0 0 1em; font-size: var(--cg-fs-body); line-height: 1.5; } .cg-kt-sec .cg-kt__testimonial blockquote::before { /* grainy purple quote mark, hanging over the top edge */ content: ""; position: absolute; z-index: 5; top: 0; left: 50%; width: var(--cg-quote-mark-w, 76px); aspect-ratio: 87 / 76; margin: -38px 0 0 calc(var(--cg-quote-mark-w, 76px) / -2); translate: none; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAABMCAYAAAAY2Ss0AAAUwElEQVR42t2dyY4cd3LGI5faq6tXdouiJBqcMSTbM4Z99N0voJv5NvYL+BF8FXziwYB98mVg2AN4g2ED9mgAmxotpEyy9+quJRdfvmD/KpjZXU01ZUENFCpZlZUZGf9YvvgiMpnUdW0/hL/PPrXk8RP7YQhzR3/J963czz615KZ9/r+UvI5st5Hxe1Nug+BtF1J/34oOsq2j4Hod+d65ciF40iB8AkGToNh63Yu4Y6WmQY6kZeFrvjfJ906VGxQbt+uw3XQB1U0XcIeyRUUnOHcSlRneG+V7J8ptUWp6g/U2XUR83YmCIV+6hpx1UDQ9qgrbK/LduXIleNMrbbCUzMxKCZbqvdJ31btQcIt8lC3TedLwXgdPcqWXQdbX8qXvSLEp3nMJnJlZV5919Hmi7S72zcNFR0XcKquvufB+rkzvLiM/y/GeQOlRztd/6Tu0WFeon7wrwYZm1tN3eUPMa/pt0hIb31a+FC9ffF9wLnYPRuH7ZLiWNBjSSti5k7AAS8qC8BkWsQPldeROCdzNX2Vww1qfWZv7vYVHcbsXFORyLnEdVQhZhbYXLddQm7R/V38prC5tcaWOBOua2Qz/9jjWgRKrBjjUBotu41Fc+Kzh30Mzm0vpS7i+54cScvf0Xjehn+9kuSHrplBgBxfSkzIrfV4hXi30+wJWW4XP6oaksZb1Nig2D0bQhax9nce9rWdmp9rHE9sl3okUlvo3FV3nd2SxKYTvII55gnLBh9rvAl4zD8nvMliBhYx9q/L+GkQw0L+7OMeGFFXq8wEU7saxhFUvGwoQD2FvHxZaEli8gBwr74lsru2z4JIeCtzKlzrOMii3vqVXJWHxc5yzAyu9p0XflEfNzGwia7yA4Ri8LMMpy1hppt9BsWmALYRcHZ1grPeBmY2kuKGEG+g1DL9NA56M+De5iWy5BnI5hs1DnN1SCOhjoVnMDGXVI5x/gGRYhuLj7Sy3BdIkAct2JEzXzHZ1HlfUXELOQyJ0N8uwfwJUkYQkd5sElsH9u1jkDgxgB4ks17nOIWshi3bDKXTcJRRcUcHpWyYwxsgO3K2HFaUbZnD1Whe3IUtZSPgM1kKEkUcc2caaNVhxGgA/vaMDTDvW5xN4UsfMHul9T0bSg+xpC/lUfZeYmzZwAzmsza3WcAEfmNlXWOHczA6xGImspCtlZ7KMJMTZSPK0UZkR3GdIYrneU1nlUMfcMLOp3mc6/5lknEq2vo45B0qwtpCVv0WcZfKiJSSygAGKhG0JddJQMo4U5yYSbhMAPdMFVC1EznXoIG3A3QnKWYde2zpHKVlKxd5dhIQaCa9EuJgDORQIXysUaf6WcTbH4niMGml7AsvoIPsfKOt6zO3ISpdalGNZisEyGMOqNuttYNgyyJfCq9wQBoJ8G1LmVPv3pay+9l9qeyn5EiizwDUkTXTkbWJuxIs5rKILBaQ6scOwEnDsoYQ9B+xyeJbD7RbBWtMGJbfJlzUgmb4U2QNCOZCcZUAtbjBbZvY+Qtl+yAcsblg8VJ4H8luGgzwgAw8BDqvG+n5D3+9pxT3pPZc7zkCOFAoPNRaDdF+JCqhuKX2bEEIOQ6hhEBvI/pu4nl1k/q68jPDsFAvvnrUInEJ1W1YsaeEOuohHAzBGfa26VzcHQAI1LHZmZkdyz20d6wJwrEItfxOfkDSwaO7mXYUqg6JGCkEXkrXWtsffKc43goXPEF9LJLTXXkb0kt8i1mYhjg6DknOA7SOFgEQCbZvZK31fSGCPZXNUYwmqo6yBoG6zWg8XWZC1xEJOZAi1thMosgar90oy+oK/1PX0kDMW8CRPilXkOdI1FNvWDrlE0O9K0Jk+vy8Bh8CFI7i6Ic52tD0PiIJlb3UDUmiy3BwIYYhQMcSxLhDSchQFfX33GxQ+J/puBgNYRJrxNlCsKc6mITF09D5SDHPF5LKKCwliwrZ9FBSX+v5Sqz8HBVlhex1ixhp6XwtUiK5oWt19nXMX8OoQCcvhYkfWm6BSW1FsEzuXrhEOYmXThZU4R+DYsKdwMIRbl8CWPWDgAgp2vFgE0ry8xnJjLkgCQhghwY4UCi6luF0zewDjcI5gps9LKbOrsHAIQymw8FVTOFjHcpMGUD4ExPILyKWcgYRYyIJdiRMJdYFENUMISRHH5lBo2cTftsRbelkfsjt/7CHsHvYxKf/AzP4XaOeZfrsvxdaIrVNwIGWbxbZabkPBwPZNgUVJEA52RXy8p9+cBOW64LmU2kMtvwh0XQncWAW0cB2SSbF/CpLGeYMNKbkb+nd+/vfM7KlQRCUlP5dSLxGyXsv3+Mn1RFK+RizrADMOUIl1tLru2juAYl0lg5+oYMhDb8pL3K+hmHPwovUNuLbNarlAG2gpJfIm954FiotU1vs5kus5oJpbbInQtRavnN4iYeThoJsqEDyjE+Z8bWa/A7ffkcCnEPCFrGoR+mfJmhxCbIdXqK48/Ex03PeRH4aCWX2FsVMz+wL8winygCGBzdmKWqc5mq7ZXUiliLGE29P2tpn9lpl9LEX7RT0Cfqwk8J4uclsXNUH8ShvgTNIEzK9pr3u7u4BnpeAJjpVsPcFuYiEyfe9U6bEUWiAPlOvE2ZssNwFdyC5uhVL3BCzRKeJpqvh7BDJnH7CsC/bpBAROEtrwK+TMNUMgxLUlLNmPNwb3cSBXP4ASCdecF5lKrowFAiy2sjX/0mvcrQ5JbQAlD4BNZ4qvHtumUmgKOHMOJb4A53uBgiIN9Xl6wxAIk1kWckRPx+mDU95AE3KsUPVI23MhiWMgoXlYhFs3SPMW60gauq/u8g9Qwn6kYyzk9oncfY4KrdRFjvX7kZl9G3iDrhYrCR3UOAhnDZ1cCwYxRxm+ADU4lQKd/H6JcrwE5ZmE1n9ymzmJdcJCglK1F0q8c3RyX6CamiHrX0p4j2VbsuJfI3mNAdMqtFCaqq74qhGyahQ3idw+BxHjRcEfKubPtdgPUTy8D8PZlJIHqCZft/pvM6eWtsSvNPS/ttFs3NMJxxImkQVvo8M70n59M/spGKkdYEqWpKOGcJDam3NiqTVPTNZh6MSZMEcPO2grzRGTPRwdo7V+gRBSB0SSmFm6roLTlpBgoBATtJcNFvpK7p2gAurAAjnBsqfXPmi/85CIUoD7zjVWG2NxjkKnAxw6AjPnLZmnUrSHoUskMQ9fBygw2C3OiZ4++/RmurYtoeVhVqCHxtyWXOd35U57gbTpIynkKi1PhH2/BB59T/tsoxWUBYtJW6w1C3MIXWR0Fj1PseADWecAlduBFnwI+FbJQ8egRruYwHH4dqOC02vgTQp6roNOqePGKQYsnCUaQMCewsaOjuvWeyA3JEJIwbHmYaaLFpOHkpzsWT+UtrkWzjH5vgzA9z9EYXCufTZAk3ZwvTv6vgvPzMwsu07BaQs4L0HP9ZBx7wnXjhSbeDFDEOd98KVOlAx1gbWstg9hB0ieia3OwjIOc3CObssOwwBx94EWciBFb8Fye4j1B0iyJfD6lhS+pd87L70BRq01BuctCvf419OBvC5/oKzfx/6XDaNCjolfad9tEOLeqZhAhqcggjxGXgSugZ1XVo4MCR5adhCSPtZ5fRYhBUopwDu81O9/IsJmjJ7bpX5zBOwe74so17XcHBdWIjS80CpXuoBNCfEQMMyLjG+1ytsoSZ04P9BC+bl2YPk1KMxOcPOOrU51czCjC3IphxWfSr4LeU4hqzS0mJYwGD/fvmS8rxL/ZzrO+5J3FxVm3hQe8tBgS7AKOQK4r/AeyOiJXM5ZfJ+3ctJ5F3MJI73vSfgLLcSHsi530Vdwa6KPaZhFqGGFKeL+TL+9kCw7cmn3oGcglk5hvT0t+Dc6xyPJ9Qfa1wuo91SNvtD3ZSDPV/6yj//tTyPEobW49Y7RLu+h8vJk8RwxrQfOwUG4c6aHYMVmYY7sTL9foMpLgFjSBirUh5Z7kvUemK8HQA6b+o4L1pNFpkAZH4Gu/AAJbQBEtA9CaAkUtfyPv7Tq53/SHnPJKTCpdCDUBDShr9YWLMq94AAK3YGCO1L8hmLtCLNlM/AQI1RZrswaGZ6zvEXoJif4zjHrKYb/CnlDgcUY6twPwYsMMcvmFt8TDF2iiGJMf2P4OQmcKJXuJM0jtDm8GPCO7z4KCR9X8vCwpd84OT0F/PoAbszy97ld3Z9goBLrBl45BZc8AwN2LmWWKBBSubSHuzNbHcsfQ/4DVH5eTnub6Bslyl3o5FA6eCOhRWEN7mFIDHsoKZ1YJtXXVXjwwTqnJ7vgbR8goRAW/Z4+dzy6BfaqGyZ80jBcl6OVNMFvNxUnfYrRB04KYHXnEJ7q3z6ve4L9UiTcCuV9KqM7cDhIWNYUFirMTy3saqSyDNjW5xEm6E2Nte8mSst7YUhjHgiU/9Fxna84kpKfa//LMJ/lk+rz0HPrYtLS43Y3hIU5vO09hJQdvW8gcXaA73OMXg21eL4w/tv7kn3RVqFx8K1Ats+Aafs6iDNhZyClfapmCmuuYS2Gi9+U0D8zs08guMfF+7CICbjZLUCmLkJCgf7YLhZzKm/xwmAChSxAN/Z0fRli+CbCYmyyJkh893TMDnWaNsxhpYBjSwRrr3SOYfFdWcAMwN1BeYksngC+dRCDdwSPDszs96W439Z7EQb+uoFzyDH7MMScwhixb0Pu+y2Qiyvd4/kQhVAphY+RYN1THD4uMZmzr30/AVK6dmyfGDMN7P4S4eKFTvalPn8O2MXJmSHa0wni9ETH8DtmLmEh91F+fgK55rrIGnNgnphIZr/SAvf1csydwuIKJLAdEPoZcPcCLZ9a8vQRwmaSd1Myr3RO0tBsq0MPi3e+zEHVlaitS/TFONLeweRiFwMlmyiB9+VSSynZY/VMwm/Z1UB0jtEkf51LAX1MwyxR4GSIq4zDM8i9iSTNBmWNMdGSeBZ8Rh9e8xEAQKvluoAVklcqIVyoh6jKNuzqzp0KgLtAGeq9/zmOOUYy2hTKGCN+cXJygsKlANblBI+X6ZsNlOVE1eASFnwkAziXUo9Qme5qkbdQMLA6zEHuO1TbC5zLG8PBvHOxQOBO0DdzmMLR9gpJwS2qb6v3lzkPTCYrQW9tinbLmZRRo1loocc2b5hluxAGvYfBukvJe4nSeig37oIf4M0nc8T5DHmEvcQeaFYPldlNCY3b7vZOyHyBZOaV1RzzVX5fbAdKSGx1wDgN8fgQ2f9cx/sQ+LiUJdXo57l8p2DDZmjvOBpZYCELTPU4RelV1TNUgCVmwThqRb6lg4TJ27ouWKG1JbQK8fJIJz0D5egzVS914A8Rw7IwBDeHR3RDt2OGENAHk7UExNrSfkudew4E47Nel4CLryT3AmyXx3qnNS8wAjoGdDtHpVgCsSRh/NTC9RaSc0QjTRswbhWy8Ris2EvAsyPEoVfBZaeYx0ohmMHVCxQDPSCGIdoqvL21AxhXw1oXeM3grj0kSb+eERZkCMycY+yqhypsO/As/UARkKL9AlORV8oFYqCCXfijMJBWYUiNd0YukJk7KBY8jo3RfZghCfZCodADdFvqnAkgHee3quC+BRKVT4G/BJR0hQzC6Crv0rwApuZjCd64oQQhrq9Yf8iJnLYKjbgyBwkzsNVbOp9hlVPAptquJrSL0EHogFvoIlmeoP53NiqDdZ+ijcSJwwXywilCxByKXGLasmurN/xtgXRf2uptsZmt3s1JMqnG8Z7LcudtUIzWy6Qxhcu5xZ4KHZiqn8/t6nanCvML7Lx6uVrAOipY8BYWZKrffYMhE3+MwALxrgiEtWfs/5aiTtG93kBS4p31Z4BYA7h/B3mC1SHvUF8iDD6NrZ7XylVoqMPQcRHmD6Z65cCbA3C0Ts29gGsbGDG2xasg4CkQxVLHeCgOdaZ/J7Y60l8hLM2x3xxw8RwKHYRuchcM3xDYPAlzGz6Zs0TMTUGX/p2ZfR6H9JrCgiHe+PiSkxsXDdtfQHmHsB5vWV/Y6q1QCb43LJwP7BUoTv5d3MUUZbXPf9WPn7ye7uYNLDN50wvF3ymseoniow7WOmrghgvEeINVL6Hgr8zsF4B5zcqV9bKTWiAxOHvvxM2JrM3DhCe6V4pBz231ni2fzMmRAJ1gP7Kr+79e6By/0Xn9FqUTKKiklWjb0YZDtS9FZ57qwnft6tErKQqIJWBnDlJpEMriDnJEH8bxN2b294+fvNlDu25ihGGiAOa7lALcQuZIZgskNYdEJ1LcTBd6inAwQzLyOa0zVEaLwJHyjp8meZ3/faXXsWQ0oYZjJKEl8LWjm3jTYhXYQhrcuZn9k5n9tV3dCna9ckPsZbVSoIKawVV9EPpEHdEMEK4MldkA/6Yn+Li/M2vPETfP9ZpKcY0j8/rMYdmFjvEvZvYrvZ6hfC3DjEQCOpLl/hBeVyMJTs3sP83sz83sV20D0a2PvsIN1bwtdQAiY4JRTGfwD/TymQCOyU8k1CYKD499zwTgj8zsX2VliZn9s357ou+Wj59ce3ePy+4WuK/XIzUV/0gEywCK2gIaGoe5CSrVb7WdaxT2z8zsl4+fXHUe1pm4aXI1C+1wAxf6UpbidN4RusH/JRLFqcpdxUGn9k6ASM5kbZ6AvtZFnqFTu9bI/OMnVn32qS0UEmaAVEMMd3SB3yNa4GAg59HOtPh/cZNir7XcMFqaBliSo5+/LSWQMuRg3UcICV+h9/8NFuNMcfxMMflbhYITEO/FbZ8+Kvkz9Lp+amY/17DHgVo0WwG1ZOAWHH6asPzfmtlfmdmvb1Lsjcq9JkTw0XxjWx3PH4HjLUUjOs8ZZxicC3iu436tuL0IFlvewWNdc8zf+ljSH2OEdBddiGOEgn80s1+a2T8oHMzWlWXtxw2Gh01mAON9zHFNQB86X3qKyZwTwJljIAK30jMwVs7613f1xOdgJEN50QcYs9oIJNAzvQ4V76vbnO9Wz3JseaZYjpjGZqLX7SfAk14N+fMXauBkpyYv78Jab6nseNfQG49UeZu/t3pQZsNDLuKtShncirRjAnxZoigoAPuq21rID/XvLp5C2nZDSBqanXzoDivBlTvUf0z/EcedPbM8PFnkpic03/lD3n/Uyr0BytmPWYltf/8HOEZ3YvHQiV8AAAAASUVORK5CYII=") center / contain no-repeat; -webkit-text-fill-color: initial; pointer-events: none; } .cg-kt-sec .cg-kt__testimonial:not(#cg) { overflow: visible; z-index: 2; } .cg-kt-sec .cg-kt__testimonial blockquote:not(#cg) { position: static; } /* mark sits on the card's top edge, not the quote's */ .cg-kt-sec .cg-kt__side:not(#cg) { overflow: visible; } .cg-kt-sec .cg-kt__testimonial figcaption:not(#cg) { font-style: normal; font-weight: var(--cg-fw-bold); text-transform: uppercase; } /* Accordions [cg_accordion] (tech, intros): the same dark bars as the FAQs */ .cg-accs:not(#cg) { gap: 10px; } .cg-acc:not(#cg) { border: 0; } .cg-acc__label:not(#cg) { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.85em 1.4em; border-radius: 12px; background: #0d0818; color: var(--cg-color-white); font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); line-height: 1.35; transition: background-color var(--cg-dur) var(--cg-ease); } .cg-acc__label:not(#cg):hover { background: #1c1236; } .cg-acc__label:not(#cg)::after { content: ""; position: static; flex: none; width: 14px; height: 14px; margin: 0; border: 0; rotate: none; transition: none; background: linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 100% 2px no-repeat, linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 2px 100% no-repeat; } details[open] > .cg-acc__label:not(#cg)::after { rotate: none; margin: 0; background: linear-gradient(var(--cg-color-pink-hot), var(--cg-color-pink-hot)) center / 100% 2px no-repeat; } .cg-acc__body:not(#cg) { padding: 1.2em 1.5em 1em; color: var(--cg-color-navy); line-height: 1.6; } .cg-acc__body :is(h3, h4):not(#cg) { margin: 0 0 0.6em; font-family: var(--cg-font-body); font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); } .cg-acc__body ul:not(#cg) { columns: 2 14rem; column-gap: var(--cg-space-m); padding-left: 1.1em; } .cg-acc__body li:not(#cg) { break-inside: avoid; margin: 0 0 0.3em; } .cg-acc__body li::marker { color: currentColor; } /* Download links (headshots, book covers): small caps-style, arrow after */ .cg-dl:not(#cg) { text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: inherit; } .cg-dl::before { content: none; } .cg-dl::after { content: "\2193"; } .cg-dl:not(#cg):hover { text-decoration: underline; } .cg-headshot__dl:not(#cg) { flex-direction: column; align-items: center; gap: 0.2em; } .cg-headshots:not(#cg) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 22rem)); justify-content: center; gap: clamp(20px, 1rem + 1.5vw, 40px); } .cg-headshot img:not(#cg) { box-shadow: 0 20px 50px rgb(126 68 210 / 0.25); } .cg-books--downloads .cg-dl:not(#cg) { color: #d9cdf6; } /* Blog articles + media: two columns, bold underlined links */ .cg-media a:not(#cg) { font-weight: var(--cg-fw-bold); color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .cg-media li::marker { color: currentColor; } .cg-list-center .cg-media:not(#cg) { width: min(100%, 52rem); margin-inline: auto; text-align: left; } /* Videos grid: three across, purple glow */ .cg-videos:not(#cg) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(16px, 0.5rem + 1.2vw, 28px); margin-block: var(--cg-space-m); } .cg-videos .cg-video:not(#cg) { border-radius: var(--cg-radius-lg); box-shadow: 0 20px 50px rgb(126 68 210 / 0.3); } /* Promo bio copy */ .cg-promo-bio > :first-child { margin-top: 0; } /* ========================================================================== 28. FOR BUREAUS — [cg_bureau_speakers] (white-label bureau home) ========================================================================== */ .cg-bureau-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); gap: clamp(20px, 1rem + 1.5vw, 40px); text-align: left; } .cg-bureau-card { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; overflow: hidden; border-radius: var(--cg-radius-lg); background: var(--cg-color-white); color: var(--cg-color-navy); box-shadow: 0 20px 50px rgb(126 68 210 / 0.18); } .cg-bureau-card__photo { display: block; } .cg-bureau-card__photo img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .cg-bureau-card__body { display: flex; flex-direction: column; gap: 0.55em; padding: clamp(22px, 1rem + 1.2vw, 36px); } .cg-bureau-card__body > * { margin: 0; } .cg-bureau-card__name:not(#cg) { font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h3); line-height: 1.05; color: inherit; } .cg-bureau-card__tag:not(#cg) { font-style: italic; line-height: 1.4; } .cg-bureau-card__fee:not(#cg) { font-weight: var(--cg-fw-extrabold); color: #4b2fb0; } .cg-bureau-card__topics:not(#cg) { font-size: var(--cg-fs-small); line-height: 1.5; opacity: 0.85; } .cg-bureau-card__topics span { font-weight: var(--cg-fw-bold); } .cg-bureau-card .cg-btn-group { margin-top: auto; padding-top: 0.6em; gap: 0.6rem; } .cg-bureau-card .cg-btn:not(#cg-btn) { --cg-btn-min-width: 0; } .cg-bureau-card__links:not(#cg) { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; font-size: var(--cg-fs-small); font-weight: var(--cg-fw-bold); } .cg-bureau-card__site { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } @media (max-width: 600px) { .cg-bureau-card { grid-template-columns: 1fr; } .cg-bureau-card__photo img { aspect-ratio: 16 / 11; object-position: 50% 20%; } } /* Tall jump buttons (How to Sell quick links, info page nav): rounded rectangles, as in the mockups. Tune: --cg-tall-btn-radius (default 20px) */ :is(.cg-nav--hts, .cg-nav--tall) .cg-nav__btn.cg-btn:not(#cg-btn) { border-radius: var(--cg-tall-btn-radius, 20px); } /* ========================================================================== 29. SHORTCODE SPACING — tighter by default (Oct 14) Shortcodes add no outer space of their own; the Beaver Builder module's margins set the gap, so there's nothing to override per module. ========================================================================= */ .cg-hr:not(#cg) { margin: 0; } .cg-rule:not(#cg) { margin-block: 0; } .cg-btns:not(#cg) { margin-top: 0; } .cg-accolades:not(#cg) { margin-block: 0; } .cg-videos:not(#cg) { margin-block: 0; } .cg-kt-sec + .cg-kt-sec:not(#cg) { margin-top: var(--cg-space-m); padding-top: var(--cg-space-m); } .cg-fee-sec:not(#cg) { margin-block: 0 var(--cg-space-m); } /* Text from fields ([cg_text], wysiwyg): no stray space below the last paragraph */ :is(.fl-html, .fl-rich-text) > :last-child:not(#cg) { margin-bottom: 0; } /* Books: every cover the same height, no shadow. Tune: --cg-book-h */ .cg-book:not(#cg) { width: auto; } .cg-book__cover:not(#cg) { width: auto; max-width: 100%; height: var(--cg-book-h, clamp(13rem, 9rem + 9vw, 22rem)); object-fit: contain; box-shadow: none; } /* Download links (book covers, headshots): small caps line */ .cg-dl:not(#cg) { font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.4; } /* Testimonials page cards [cg_more_testimonials]: roomier. Tune: --cg-mt-pad, --cg-mt-gap */ .cg-mt { --cg-mt-gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem); --cg-mt-pad: clamp(1.75rem, 1.1rem + 2vw, 3.25rem); } .cg-mt__card:not(#cg) { padding: calc(var(--cg-mt-pad) * 0.45 + 3.85rem) var(--cg-mt-pad) var(--cg-mt-pad); } .cg-mt__card::before { top: calc(var(--cg-mt-pad) * 0.45); left: calc(var(--cg-mt-pad) - 0.08em); font-size: 6rem; line-height: 1; } /* bigger mark, close to the copy */ /* filter pills: the count sits on the label's baseline (it read low when centred) */ .cg-mt__filter:not(#cg) { align-items: baseline; } .cg-mt__card figcaption:not(#cg) { margin-top: 1.5em; padding-top: 1.25em; } /* Speech topics: outcome / testimonial cards float right; the copy wraps under them once they end */ .cg-kt__flow { display: flex; flex-direction: column; gap: clamp(28px, 1rem + 2vw, 48px); } .cg-kt__flow > .cg-kt__side { order: 2; } /* phones: copy first, cards after */ @media (min-width: 900px) { .cg-kt__flow { display: flow-root; } .cg-kt__flow > .cg-kt__side:not(#cg) { float: right; width: 44%; margin: 0 0 var(--cg-space-s) clamp(32px, 1rem + 4vw, 96px); } .cg-kt__flow .cg-kt__body :is(ul, ol) { display: flow-root; padding-left: 1.5em; list-style-position: outside; } /* stay clear of the float without clipping the bullets */ .cg-kt__flow .cg-kt__body ul { list-style-type: disc; } } /* Info page videos [cg_videos]: softer corners. Tune: --cg-videos-radius */ .cg-videos .cg-video:not(#cg) { border-radius: var(--cg-videos-radius, var(--cg-radius-md)); } /* Wrap layout (promo bio [cg_promo_bio], or any .cg-wrap-flow): side item floats right, copy wraps under it */ .cg-wrap-flow { display: flex; flex-direction: column; gap: clamp(28px, 1rem + 2vw, 48px); } .cg-wrap-flow > .cg-wrap-flow__side { order: 2; } @media (min-width: 900px) { .cg-wrap-flow { display: flow-root; } .cg-wrap-flow > .cg-wrap-flow__side:not(#cg) { float: right; width: var(--cg-wrap-side-w, 42%); margin: 0 0 var(--cg-space-s) clamp(32px, 1rem + 4vw, 96px); } .cg-wrap-flow :is(ul, ol) { overflow: hidden; } } .cg-promo .cg-photo { box-shadow: 0 20px 50px rgb(126 68 210 / 0.25); } .cg-promo__dl:not(#cg) { margin: var(--cg-space-s) 0 0; } /* Client logos [cg_logos]: full brightness. Tune: --cg-logos-opacity (0–1) */ .cg-logos img:not(#cg) { opacity: var(--cg-logos-opacity, 1); } /* Client logos: solid white (the files are semi-transparent; the SVG filter from [cg_logos] fixes that). Light rows: set --cg-logos-filter (e.g. grayscale(1)) as before. */ .cg-logos img:not(#cg) { filter: var(--cg-logos-filter, url(#cg-logo-white)); } /* Downloadable headshots: the photo (a download link) lifts + glows only when the photo itself is hovered */ .cg-headshot { display: grid; justify-items: center; } .cg-headshot img:not(#cg) { transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease), scale 0.6s var(--cg-ease); } @media (hover: hover) { .cg-headshot__link:is(:hover, :focus-visible) img:not(#cg) { translate: 0 -6px; box-shadow: 0 30px 60px rgb(13 9 26 / 0.3), 0 0 44px rgb(166 80 255 / 0.45); } } @media (prefers-reduced-motion: reduce) { .cg-headshot__link:hover img:not(#cg) { translate: none; } } .cg-headshot__link { display: block; cursor: pointer; } /* Inline button pair (Book Now + View Fees on the bureau side) follows the module's text alignment */ /* Info page videos [cg_videos]: three across from 900px, and wider than the text column so the play windows are bigger. Tune: --cg-videos-max (1600px) */ @media (min-width: 900px) { .cg-videos:not(#cg) { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(calc(100vw - 6rem), var(--cg-videos-max, 1600px)); position: relative; left: 50%; translate: -50% 0; } } @media (min-width: 600px) and (max-width: 899px) { .cg-videos:not(#cg) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Fee page hero: jump buttons sit left under the title (centred on phones) */ .cg-nav-left .cg-nav:not(#cg) { justify-content: flex-start; } @media (max-width: 1000px) { .cg-align--center-mobile .cg-nav-left .cg-nav:not(#cg), .cg-nav-left.cg-align--center-mobile .cg-nav:not(#cg) { justify-content: center; } } .cg-fee-hero .cg-photo { max-width: 30rem; margin-inline: auto; } /* Form in a white card, centred (Bureau Contact page). Tune: --cg-form-card-w */ .cg-form-card:not(#cg) { max-width: var(--cg-form-card-w, 56rem); margin-inline: auto; } /* ========================================================================== 30. CLIENT IMPACT STORIES — [cg_impact_glance] [cg_impact_quote] [cg_impact_speakers] ========================================================================== */ .cg-glance { padding: clamp(24px, 1rem + 1.5vw, 40px); border-radius: var(--cg-radius-md); background: #f4f3fb; color: var(--cg-color-navy); text-align: left; } .cg-glance__title:not(#cg) { margin: 0 0 0.8em; font-family: var(--cg-font-display); font-size: var(--cg-fs-h3); line-height: 1.05; } .cg-glance dl { display: grid; gap: 0.75em; margin: 0; } .cg-glance__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75em; padding-top: 0.75em; border-top: 1px solid rgb(126 68 210 / 0.2); } .cg-glance__row:first-child { padding-top: 0; border-top: 0; } .cg-glance dt { font-weight: var(--cg-fw-bold); font-size: var(--cg-fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: #4b2fb0; } .cg-glance dd { margin: 0; line-height: 1.45; } @media (max-width: 480px) { .cg-glance__row { grid-template-columns: 1fr; gap: 0.2em; } } .cg-pullquote { position: relative; margin: var(--cg-space-m) 0; padding: clamp(28px, 1rem + 2vw, 48px) clamp(24px, 1rem + 3vw, 64px); border-radius: var(--cg-radius-lg); text-align: center; color: var(--cg-color-white); background: radial-gradient(45% 60% at 40% 100%, rgb(76 120 255 / 0.35), transparent 70%), linear-gradient(100deg, #7a3fd0 0%, #c22ab8 45%, #ee2a8a 100%); } .cg-pullquote blockquote:not(#cg) { margin: 0 0 0.8em; padding: 0; border: 0; font-family: var(--cg-font-display); font-size: var(--cg-fs-h3); line-height: 1.15; font-style: normal; color: inherit; text-wrap: balance; } .cg-pullquote blockquote::before { content: "\201C"; } .cg-pullquote blockquote::after { content: "\201D"; } .cg-pullquote figcaption { display: grid; gap: 0.15em; font-size: var(--cg-fs-small); } .cg-pullquote figcaption strong { text-transform: uppercase; letter-spacing: 0.04em; } .cg-impact-sps { display: grid; gap: 12px; } .cg-impact-sp { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--cg-radius-md); background: var(--cg-color-white); color: var(--cg-color-navy); text-decoration: none; box-shadow: 0 10px 30px rgb(126 68 210 / 0.15); transition: translate var(--cg-dur) var(--cg-ease); } .cg-impact-sp:hover { translate: 0 -3px; } .cg-impact-sp__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; } .cg-impact-sp span { display: grid; gap: 0.15em; } .cg-impact-sp small { font-size: var(--cg-fs-small); opacity: 0.75; line-height: 1.3; } /* Fee cards: price under the title, left-aligned; no clipped gradient; bigger "gross" line; centred info icon */ .cg-package__top:not(#cg) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.35em; } .cg-package__head:not(#cg) { flex: none; } .cg-package__price:not(#cg) { justify-items: start; text-align: left; gap: 0; } .cg-package__price strong:not(#cg) { display: inline-block; padding: 0.22em 0.06em 0.02em; margin: 0; line-height: 1.05; } .cg-package__price span:not(#cg) { font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); } .cg-package__notes p::before { display: grid; place-items: center; width: 1.15em; height: 1.15em; top: 0.32em; font: 700 0.8em/1 var(--cg-font-body); font-style: normal; text-align: center; } .cg-package__notes p { padding-left: 1.8em; } /* Sticky "Your contact" card: the card itself is sticky, but it sits inside a module/column that's only as tall as the card, so it had nowhere to slide. Above 1000px the columns in that row stretch to the full row height and the card's module rides down the column. Tune: --cg-header-offset (top gap, 120px) */ @media (min-width: 1001px) { .fl-col-group:has(.cg-fee-aside):not(#cg) { display: flex; align-items: stretch; } .fl-col:has(> .fl-col-content .cg-fee-aside) > .fl-col-content:not(#cg) { height: 100%; } .fl-module:has(.cg-fee-aside):not(#cg) { position: sticky; top: var(--cg-header-offset, 120px); } .cg-fee-aside:not(#cg) { position: static; } } /* Impact story layout */ .cg-impact-logo:not(#cg) { width: auto; max-width: 12rem; max-height: 4rem; filter: brightness(0) invert(1); box-shadow: none; border-radius: 0; } .cg-impact-body h2:not(#cg) { margin: 1.6em 0 0.5em; font-size: var(--cg-fs-h3); } .cg-impact-body > :first-child:not(#cg) { margin-top: 0; } .cg-impact-body > p:first-of-type:not(#cg) { font-size: var(--cg-fs-sm); font-weight: var(--cg-fw-bold); line-height: 1.35; } @media (min-width: 1001px) { .fl-col-group:has(> .cg-impact-side):not(#cg) { display: flex; align-items: stretch; } .cg-impact-side > .fl-col-content:not(#cg) { position: sticky; top: var(--cg-header-offset, 120px); } } /* Fee page jump buttons: wider, so "Client-Friendly Speaker Info" fits */ .cg-nav--fee { --cg-nav-btn-w: 17.5rem; } /* Photo overlay: purple gradient rising from the bottom (overlay="purple-bottom" or cg-overlay--purple-bottom) */ .cg-overlay--purple-bottom { --cg-overlay: linear-gradient(to top, rgb(126 68 210 / 0.85) 0%, rgb(166 80 255 / 0.45) 30%, rgb(166 80 255 / 0) 62%); } /* Impact story on tablets/phones: the side column (speaker card + At a glance) comes BEFORE the story */ @media (max-width: 1000px) { .fl-col-group:has(> .cg-impact-side):not(#cg) { display: flex; flex-direction: column-reverse; } } /* Impact — [cg_impact_speakers style="hero"] featured-speaker chip in the hero */ .cg-impact-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; } .cg-impact-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.3); color: var(--cg-color-white); text-decoration: none; backdrop-filter: blur(6px); transition: background var(--cg-dur) var(--cg-ease); } .cg-impact-chip:hover { background: rgb(255 255 255 / 0.22); color: var(--cg-color-white); } .cg-impact-chip__img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; } .cg-impact-chip span { display: grid; line-height: 1.2; } .cg-impact-chip small { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .cg-impact-chip i { font-style: normal; transition: translate var(--cg-dur) var(--cg-ease); } .cg-impact-chip:hover i { translate: 4px 0; } .cg-align--center .cg-impact-chips, .fl-module:has(.cg-impact-chips)[class*="center"] .cg-impact-chips { justify-content: center; } /* Gradient text — sharper on short/small text. The gradient spans the element's box, so a short eyebrow in a full-width

only showed the first (pink) end. Shrink the box to the text so the whole gradient lands on the letters; keep cg-align-- classes working. Not on Beaver Builder modules/rows/columns: their heading text is an inline span that already fits, and shrinking the module broke its own alignment. */ :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(span, a, strong, em, b, i, [class*="fl-"]) { width: fit-content; max-width: 100%; } :is(.cg-align--center, .cg-align--center *) > :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg), .cg-align--center:is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg) { margin-inline: auto; } :is(.cg-align--right, .cg-align--right *) > :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg), .cg-align--right:is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg) { margin-inline: auto 0; } @media (max-width: 1000px) { :is(.cg-align--center-mobile, .cg-align--center-mobile *) > :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg), .cg-align--center-mobile:is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg) { margin-inline: auto; } :is(.cg-align--left-mobile, .cg-align--left-mobile *) > :is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg), .cg-align--left-mobile:is(.cg-grad-pink, .cg-grad-hot, .cg-grad-hotpink, .cg-grad-violet, .cg-grad-purple, .cg-grad-sky, .cg-grad-blue, .cg-grad-blue-purple):not(#cg) { margin-inline: 0 auto; } } /* Bureau home — [cg_bureau_grid] plain speaker grid for bureaus' end clients. 3 across (2 tablet, 1 phone). Name sits on the photo over a purple fade. Card itself is transparent (photo + white body each carry their own corners) so no white sliver shows around the photo's rounded edge. */ .cg-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 1rem + 2vw, 48px); max-width: 1240px; margin-inline: auto; text-align: left; } @media (max-width: 1000px) { .cg-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cg-bgrid { grid-template-columns: 1fr; } } .cg-bgrid__card { --r: var(--cg-radius-lg); display: flex; flex-direction: column; border-radius: var(--r); box-shadow: 0 24px 60px rgb(20 6 50 / 0.35); transition: translate var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-bgrid__card:hover { translate: 0 -6px; box-shadow: 0 32px 70px rgb(20 6 50 / 0.45); } .cg-bgrid__top { position: relative; display: block; border-radius: var(--r) var(--r) 0 0; overflow: hidden; isolation: isolate; text-decoration: none; background: #1b0b3d; } .cg-bgrid__photo { display: block; } .cg-bgrid__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; transition: scale 0.6s var(--cg-ease); } .cg-bgrid__card:hover .cg-bgrid__photo img { scale: 1.04; } .cg-bgrid__top::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(27 11 61 / 0.95) 0%, rgb(76 30 150 / 0.55) 28%, transparent 55%); } .cg-bgrid__name:not(#cg) { position: absolute; inset: auto 0 0 0; z-index: 2; margin: 0; padding: 0 clamp(20px, 1rem + 0.8vw, 30px) clamp(16px, 0.8rem + 0.6vw, 24px); font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-fs-h3); line-height: 1; color: var(--cg-color-white); text-shadow: 0 2px 16px rgb(0 0 0 / 0.35); } .cg-bgrid__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; margin-top: -1px; padding: clamp(20px, 1rem + 0.8vw, 30px); border-radius: 0 0 var(--r) var(--r); background: var(--cg-color-white); color: var(--cg-color-navy); } .cg-bgrid__body > *:not(#cg) { margin: 0; } .cg-bgrid__tag:not(#cg) { font-size: 16px; font-style: normal; font-weight: var(--cg-fw-bold); line-height: 1.45; color: var(--cg-color-navy); } .cg-bgrid__topics:not(#cg) { font-size: 14px; font-weight: var(--cg-fw-bold); letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--cg-color-violet); text-wrap: pretty; } .cg-bgrid__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: auto !important; padding-top: 0.5rem; } .cg-bgrid .cg-btn:not(#cg-btn) { --cg-btn-min-width: 0; } .cg-bgrid__book:not(#cg) { font-size: 15px; font-weight: var(--cg-fw-bold); color: var(--cg-color-navy); text-decoration: underline; text-underline-offset: 0.25em; } .cg-bgrid__book:hover { color: var(--cg-color-violet); } /* Bureau speakers dropdown: no topics column → speakers span the full panel */ .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega--bureau:not(#cg-nav) { grid-template-columns: minmax(0, 1fr); } /* same weight as the base rule, later = wins */ .pp-advanced-menu-horizontal > li > .sub-menu.cg-mega--bureau:not(#cg-nav) .cg-mega__all { margin-right: 0; } /* Mobile / off-canvas menu: full width, every dropdown panel the same width, panel content left-aligned (top items stay centred). */ .fl-module-pp-advanced-menu:has(.pp-advanced-menu-accordion) > .fl-module-content:not(#cg-nav), .pp-advanced-menu:has(> .pp-menu-nav > .pp-advanced-menu-accordion):not(#cg-nav), .pp-menu-nav:has(> .pp-advanced-menu-accordion):not(#cg-nav), .pp-advanced-menu-accordion:not(#cg-nav) { width: 100%; flex: 1 1 100%; box-sizing: border-box; } .pp-advanced-menu-accordion > li > .cg-mega:not(#cg-nav) { width: 100%; box-sizing: border-box; text-align: left; } .pp-advanced-menu-accordion > li > .cg-mega:not(#cg-nav) :is(.cg-mega__title, .cg-mega__ptitle, .cg-mega__post) { text-align: left; } /* No focus box around the arrow after a tap (keyboard focus still shows) */ .pp-advanced-menu-accordion .pp-menu-toggle:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Home — [cg_impact_feature]: speaker photo | title, label, bar, excerpt, Read More */ .cg-ifeat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 2rem + 4vw, 128px); max-width: 1240px; margin-inline: auto; text-align: left; } .cg-ifeat--no-photo { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .cg-ifeat__photo { display: block; } .cg-ifeat__photo .cg-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; } .cg-ifeat__body { display: flex; flex-direction: column; align-items: flex-start; } .cg-ifeat__body > *:not(#cg) { margin: 0; } .cg-ifeat__title:not(#cg) { text-wrap: balance; } .cg-ifeat__title a { color: inherit; -webkit-text-fill-color: transparent; text-decoration: none; } .cg-ifeat__label:not(#cg) { margin-top: 0.5em; font-weight: var(--cg-fw-extrabold); line-height: 1.2; color: var(--cg-color-white); font-size: clamp(1.25rem, 1rem + 0.6vw, 1.75rem); } .cg-ifeat__bar { display: block; width: 12rem; max-width: 50%; height: 3px; margin-block: 1.75rem !important; border-radius: 3px; background: var(--cg-grad-violet); } .cg-ifeat__text:not(#cg) { max-width: 34rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); line-height: 1.55; color: var(--cg-color-white); } .cg-ifeat .cg-btn { margin-top: 2rem !important; } @media (max-width: 760px) { .cg-ifeat { grid-template-columns: 1fr; } .cg-ifeat__photo { max-width: 26rem; } } /* Bureau side: "Speaker Information" wordmark in place of the cmi logo ([cg_logo]) */ .cg-bureau-mark:not(#cg) { display: inline-block; font-family: var(--cg-font-display); font-weight: 400; font-size: var(--cg-bureau-mark-size, var(--cg-fs-h2)); line-height: var(--cg-lh-heading); /* = cg-med */ color: var(--cg-bureau-mark-color, var(--cg-color-white)); text-decoration: none; white-space: nowrap; } .cg-bureau-mark:not(#cg):is(:hover, :focus-visible) { color: var(--cg-bureau-mark-color, var(--cg-color-white)); opacity: 0.85; } .cg-header-light .cg-bureau-mark:not(#cg) { --cg-bureau-mark-color: var(--cg-color-navy); } /* Bureau side: never show a cmi logo, even a plain image/Photo module left in a header, off-canvas menu or footer (the [cg_logo] shortcode already swaps itself for the "Speaker Information" wordmark). */ .cg-bureau :is(img[src*="cmi-logo"], img[src*="cmi_logo"], img[alt="cmi" i], img[alt*="cmi logo" i]):not(#cg) { display: none !important; } /* Glow tiles (home page cg-tile boxes, Beyond the Keynote cards): titles one step down the scale — H3 (40) instead of cg-med (58.66). Overrides a cg-med/cg-lg class on the heading module inside a tile. */ :is(.cg-tile:not(.fl-col), .fl-col.cg-tile > .fl-col-content) :is(h1, h2, h3, .fl-heading-text):not(#cg):not(#cg-type) { font-size: var(--cg-tile-title-size, var(--cg-fs-h3)); line-height: var(--cg-lh-heading); } /* Glow tiles in a row (home page): equal heights, More link lined up along the bottom, and no forced line break in the titles (a
typed into "Expertise that fits" made that card taller than its neighbours). Desktop only; phones stack. */ @media (min-width: 1001px) { .fl-col-group:has(> .fl-col.cg-tile):not(#cg) { display: flex; flex-wrap: wrap; align-items: stretch; } .fl-col.cg-tile > .fl-col-content:not(#cg) { display: flex; flex-direction: column; height: 100%; } .fl-col.cg-tile > .fl-col-content > .cg-tile-toggle:not(#cg) { margin-top: auto; } .cg-tile :is(h1, h2, h3, .fl-heading-text) br { display: none; } } /* Testimonial carousels: room below the dots before the next section */ :is(.cg-testimonials--site, .cg-testimonials--speaker) .cg-carousel__dots:not(#cg) { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); } /* Speaker pages, tablets/phones: "Play {name}'s Video" button centred */ @media (max-width: 1000px) { .cg-btn--play.cg-modal-play:not(#cg-btn) { display: flex; width: fit-content; margin-inline: auto; } } /* PowerPack update (Oct 2026): the dropdown arrow now sits NEXT TO the link (inside .pp-has-submenu-container) instead of inside it, so it wrapped below "About / Speakers / Insights". Put it back in the link's right padding. */ .pp-advanced-menu-horizontal > li > .pp-has-submenu-container:not(#cg-nav) { position: relative; } .pp-advanced-menu-horizontal > li > .pp-has-submenu-container > .pp-menu-toggle:not(#cg-nav) { position: absolute; top: 50%; right: 9px; left: auto; margin: 0; transform: translateY(-50%); pointer-events: none; /* hovering/clicking the arrow = the link (the menu opens on hover) */ } /* ========================================================================== [cg_menu] — our own menu (replaces PowerPack Advanced Menu) Same class names as before, so every nav / mega-menu / button style above still applies; this block adds the basics PowerPack used to provide. Tune: --cg-menu-size (desktop links), --cg-menu-m-size (mobile links), --cg-footer-menu-size, --cg-footer-menu-color ========================================================================== */ .cg-menu :is(ul, li) { margin: 0; padding: 0; list-style: none; } .cg-menu a { text-decoration: none; } .cg-menu .pp-menu-toggle:not(#cg-nav) { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; box-shadow: none; } /* Desktop (header) */ .cg-menu--desktop { text-align: right; color: var(--cg-color-white); } .cg-menu--desktop > .menu { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } .cg-menu--desktop > .menu > li { position: relative; } .cg-menu--desktop > .menu > li > a, .cg-menu--desktop > .menu > li > .pp-has-submenu-container > a { display: block; padding: 10px 25px; color: inherit; font-size: var(--cg-menu-size, inherit); line-height: 1.55; } .cg-menu--desktop > .menu > li > a { padding-right: 25px; } /* dropdown panels: hidden until hover / keyboard focus / arrow click */ .cg-menu--desktop .sub-menu:not(#cg-nav) { position: absolute; top: 100%; z-index: 1000; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--cg-ease), translate 0.2s var(--cg-ease), visibility 0.2s; } .cg-menu--desktop li:is(:hover, :focus-within, .is-open) > .sub-menu:not(#cg-nav) { visibility: visible; opacity: 1; pointer-events: auto; } .cg-menu--desktop > .menu > li.is-open > .sub-menu.cg-mega:not(#cg-nav) { translate: 0 0; } .cg-menu--desktop .sub-menu a { display: block; color: inherit; } /* Mobile (inside the Off-Canvas panel): centred accordion */ .cg-menu--mobile { width: 100%; text-align: center; color: var(--cg-color-white); } .cg-menu--mobile > .menu > li { position: relative; } .cg-menu--mobile > .menu > li > a, .cg-menu--mobile > .menu > li > .pp-has-submenu-container > a { display: block; padding: 5px 0; color: inherit; font-size: var(--cg-menu-m-size, 20px); font-weight: var(--cg-fw-bold); line-height: 1.55; } .cg-menu--mobile .pp-has-submenu-container { position: relative; } .cg-menu--mobile .pp-menu-toggle:not(#cg-nav) { position: absolute; top: 50%; right: 0; width: 40px; height: 40px; translate: 0 -50%; } .cg-menu--mobile .pp-menu-toggle:not(#cg-nav)::before { content: ""; position: absolute; top: 45%; left: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); transition: transform 0.25s var(--cg-ease); } .cg-menu--mobile li.is-open > .pp-has-submenu-container > .pp-menu-toggle:not(#cg-nav)::before { transform: translate(-50%, -20%) rotate(-135deg); } .cg-menu--mobile li.is-open > .pp-has-submenu-container > a { color: var(--cg-color-purple); } .cg-menu--mobile .sub-menu:not(#cg-nav) { display: none; } .cg-menu--mobile li.is-open > .sub-menu:not(#cg-nav) { display: block; } .cg-menu--mobile .sub-menu:not(.cg-mega) a { display: block; padding: 6px 0; color: inherit; font-weight: var(--cg-fw-bold); } .cg-menu--mobile li.cg-nav-btn { margin-top: 12px; } /* Footer: top level only, right-aligned (use a cg-align-- class on the module to change) */ .cg-menu--footer { text-align: right; } .cg-menu--footer > .menu > li > a { display: block; padding: 5px; font-size: var(--cg-footer-menu-size, 17px); font-weight: var(--cg-fw-bold); line-height: 1.55; color: var(--cg-footer-menu-color, var(--cg-color-purple)); } .cg-menu--footer > .menu > li > a:is(:hover, :focus-visible) { color: var(--cg-color-white); } @media (max-width: 767px) { .cg-menu--footer { text-align: center; } .cg-menu--footer > .menu > li > a { color: var(--cg-footer-menu-color-m, var(--cg-color-white)); } } .cg-align--center .cg-menu--footer { text-align: center; } .cg-align--left .cg-menu--footer { text-align: left; } /* Blog posts / impact stories: no pasted highlight boxes behind text (backup for the_content filter) */ :is(.single-post, .single-impact) :is(.fl-post-content, .cg-impact-body, .fl-module-fl-post-content) :is(span, p, strong, em, b, i, a, li)[style*="background"] { background: none !important; } /* FAQs [cg_faqs] — softer (Oct 27): each question is a white card with navy text instead of a near-black bar; more space between; the answer opens inside the same card; the open question turns purple. Pink +/− unchanged. Tune: --cg-faq-gap, --cg-faq-bg, --cg-faq-border */ .cg-faqs:not(#cg) { gap: var(--cg-faq-gap, 16px); } .cg-faq:not(#cg) { background: var(--cg-faq-bg, var(--cg-color-white)); border: 1px solid var(--cg-faq-border, rgb(126 68 210 / 0.16)); border-radius: 14px; box-shadow: 0 8px 24px rgb(126 68 210 / 0.08); transition: border-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease); } .cg-faq:not(#cg):hover { border-color: rgb(126 68 210 / 0.4); box-shadow: 0 10px 28px rgb(126 68 210 / 0.14); } .cg-faq__q:not(#cg) { padding: 1.15em 1.5em; background: none; color: var(--cg-color-navy); line-height: 1.45; } .cg-faq__q:not(#cg):hover { background: none; } details[open] > .cg-faq__q:not(#cg) { color: #4b2fb0; } .cg-faq__a:not(#cg) { padding: 0 1.5em 1.25em; } /* [cg_download] with several files: centred row (add cg-align--left to the module to undo) */ .cg-btn-group:is(.cg-btn-group--files, :has(> a[download])):not(#cg) { justify-content: center; } .cg-align--left .cg-btn-group:is(.cg-btn-group--files, :has(> a[download])):not(#cg) { justify-content: flex-start; } /* Headshots: crop from the top so heads never get cut off (full-length photos lose feet instead). Tune: --cg-headshot-pos (e.g. 50% 20%) */ .cg-headshot img:not(#cg) { object-position: var(--cg-headshot-pos, 50% 0%); } /* Speaker hero name: room for descenders (g, j, p, q, y) so they don't run into the tagline. Only names with one of those letters get it (cg-has-desc is added by speaker-shortcodes.php). Tune: --cg-hero-desc (0.2em) */ .cg-intro h1.cg-huge.cg-has-desc:not(#cg) { padding-bottom: var(--cg-hero-desc, 0.2em); } /* Footer contact row (Box: Flex Row holding social / email / phone / logos): stays on one line on tablet/desktop — icons and the phone number never break, and the GSIA / MPI / NSA logos shrink to make room instead of wrapping. Tune: --cg-footer-logo-max (largest logo width, 150px) */ .cg-contact:not(#cg) { white-space: nowrap; } @media (min-width: 768px) { /* phones keep their stacked layout */ footer .fl-module-box:has(.cg-contact, .cg-social):not(#cg) { flex-wrap: nowrap; } footer .fl-module-box:has(.cg-contact, .cg-social) > .fl-module:not(.fl-module-box):not(#cg) { flex: 0 0 auto; } footer .fl-module-box:has(.cg-contact, .cg-social) > .fl-module-box:not(#cg) { /* logos row: spacing shrinks with the screen */ flex: 1 1 0; min-width: 0; flex-wrap: nowrap; margin-inline: clamp(12px, 5vw - 20px, 80px) 0; gap: clamp(12px, 2.5vw - 10px, 40px); translate: 0 var(--cg-footer-logo-y, 10px); /* nudge down; tune --cg-footer-logo-y */ } footer .fl-module-box:has(.cg-contact, .cg-social) > .fl-module-box > .fl-module:not(#cg) { flex: 0 1 var(--cg-footer-logo-max, 150px); min-width: 40px; } footer .fl-module-box:has(.cg-contact, .cg-social) > .fl-module-box img:not(#cg) { width: 100%; max-width: 100%; height: auto; } } footer .cg-social:not(#cg) { flex-wrap: nowrap; } /* Fee pages: the site's tight body tracking (-0.02em) crowds the dense bold/italic fee terms, so these pages use normal spacing. Tune: --cg-fee-tracking */ body.single-speaker_fee:not(#cg) { letter-spacing: var(--cg-fee-tracking, 0.005em); } .single-speaker_fee :is(strong, b, em, i):not(#cg) { letter-spacing: var(--cg-fee-tracking-bold, 0.015em); } /* 25-years logo (cmi-logo-25-*.svg): a bit wider so "Celebrating 25 Years" stays readable. Tune: --cg-logo25-w (header), --cg-logo25-w-mobile */ .cg-logo--25:not(#cg) { --cg-logo-w: var(--cg-logo25-w, 150px); --cg-logo-w-mobile: var(--cg-logo25-w-mobile, 112px); } .fl-builder-content[data-type="footer"] .cg-logo--25:not(#cg) { --cg-logo-w: 280px; --cg-logo-w-mobile: 180px; } /* Tile More/Less: once open, the Less link moves below the revealed text (where the reader finishes); closed, More sits in its usual spot. */ .fl-col.cg-tile > .fl-col-content:has(> .cg-tile-toggle):not(#cg) { display: flex; flex-direction: column; } .fl-col.cg-tile.is-open > .fl-col-content > .cg-tile-toggle:not(#cg) { order: 1; padding-top: 0.75em; } /* [cg_speakers video="yes"]: Play Video button centred under each speaker card */ .cg-scard__reel:not(#cg) { margin: var(--cg-space-s, 18px) 0 0; text-align: center; } /* Header nav: stays on one line down to where the hamburger takes over (1001px+). Link spacing shrinks with the screen (25px at full width → ~16px at 1000px). Tune: --cg-nav-pad */ @media (min-width: 1001px) { :root { --cg-nav-pad: clamp(10px, 2.2vw - 6px, 25px); } .pp-advanced-menu-horizontal:not(#cg-nav):not(#cg) { flex-wrap: nowrap; } .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) > a:not(#cg-nav):not(#cg), .pp-advanced-menu-horizontal > li:not(.cg-nav-btn) > .pp-has-submenu-container > a:not(#cg-nav):not(#cg) { padding-left: var(--cg-nav-pad); padding-right: var(--cg-nav-pad); white-space: nowrap; } .pp-advanced-menu-horizontal > li.pp-has-submenu:not(.cg-nav-btn) > .pp-has-submenu-container > a:not(#cg-nav):not(#cg) { padding-right: calc(var(--cg-nav-pad) + 18px); } /* room for the caret (12px + gap) */ .pp-advanced-menu-horizontal > li.cg-nav-btn a:not(#cg-nav):not(#cg) { white-space: nowrap; } /* same for our [cg_menu] once it replaces PowerPack */ .cg-menu--desktop > .menu:not(#cg) { flex-wrap: nowrap; } .cg-menu--desktop > .menu > li:not(.cg-nav-btn) > a:not(#cg) { padding-left: var(--cg-nav-pad); padding-right: var(--cg-nav-pad); white-space: nowrap; } .cg-menu--desktop > .menu > li > .pp-has-submenu-container > a:not(#cg) { padding-left: var(--cg-nav-pad); padding-right: calc(var(--cg-nav-pad) + 16px); white-space: nowrap; } } /* Tablet/phone header: logo sits left, opposite the MENU button */ @media (max-width: 1000px) { .fl-builder-content[data-type="header"] .fl-module:has(.cg-logo):not(#cg) { text-align: left; } } /* ============================================================================= 31. FOOTER CREDITS — [cg_credits] "Crafted with Care" pop-up Opens on hover/focus (desktop) and tap (.is-open). Sits above the label. Tune: --cg-credits-w (pop-up width), --cg-credits-bg, --cg-credits-text ============================================================================= */ .cg-credits { position: relative; display: inline-block; } .cg-credits__btn:not(#cg) { all: unset; cursor: pointer; color: inherit; font: inherit; text-decoration: none; } .cg-credits__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } .cg-credits__pop { position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 50; width: var(--cg-credits-w, max-content); max-width: calc(100vw - 32px); padding: 16px 24px; border-radius: 14px; font-family: var(--cg-font-body); font-size: 14px; line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 12px 32px rgba(23, 16, 51, 0.25); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.2s var(--cg-ease), transform 0.2s var(--cg-ease), visibility 0.2s; } .cg-credits__pop:not(#cg):not(#cg-m) { /* beats footer text/background rules */ background: var(--cg-credits-bg, #fff); color: var(--cg-credits-text, var(--cg-color-navy)); } @media (min-width: 768px) { .cg-credits__pop { min-width: var(--cg-credits-w, 380px); } .cg-credits__line:not(#cg):not(#cg-m) { white-space: nowrap; } } .cg-credits__pop::after { /* little pointer */ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--cg-credits-bg, #fff); margin-left: var(--cg-credits-arrow, 0px); /* JS keeps the pointer on the label when the box is nudged */ } .cg-credits__pop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* hover bridge */ .cg-credits__line:not(#cg):not(#cg-m) { display: block; color: var(--cg-credits-text, var(--cg-color-navy)); background: none; text-align: left; } .cg-credits__line + .cg-credits__line { margin-top: 4px; } .cg-credits__pop a:not(#cg):not(#cg-m) { color: var(--cg-credits-text, var(--cg-color-navy)); font-weight: var(--cg-fw-bold); text-decoration: none; } .cg-credits__pop a:not(#cg):not(#cg-m):hover { color: var(--cg-color-pink); } .cg-credits.is-open .cg-credits__pop, .cg-credits:focus-within .cg-credits__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } @media (hover: hover) { .cg-credits:hover .cg-credits__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } } /* ============================================================================= 32. YOUR PRIVACY CHOICES — iubenda US opt-out link icon The link needs only the class (no ): Your Privacy Choices Tune: --cg-privacy-icon-w (default 2em) ============================================================================= */ a.iubenda-cs-preferences-link:not(#cg) { display: inline-flex; align-items: center; gap: 0.4em; } a.iubenda-cs-preferences-link:not(#cg)::before { content: ""; flex: none; width: var(--cg-privacy-icon-w, 2em); aspect-ratio: 30 / 14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z'/%3E%3Cpath fill='%2306f' fill-rule='evenodd' d='M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z'/%3E%3Cpath fill='%23fff' d='M24.6,4c0.2,0.2,0.2,0.6,0,0.8L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z'/%3E%3Cpath fill='%2306f' d='M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z'/%3E%3C/svg%3E") center / contain no-repeat; }