/* ============================================================================ Saal — WPBakery extension styles Gradient preset classes + Saal Title element. ============================================================================ */ /* ----- Arabic typography override ----------------------------------------- The saal theme's :root sets --font-heading / --font-primary to the Neo Sans webfonts shipped with the theme. For Arabic pages (WPML emits ) we switch both variables to Almarai, which is already loaded as a Google Font on every saal-themed page. Specificity beats :root without needing !important. */ html[lang^="ar"], [dir="rtl"] { --font-heading: 'Almarai', sans-serif; --font-primary: 'Almarai', sans-serif; } /* ----- Default fonts for Saal Toolkit elements ---------------------------- Inherits the saal theme's CSS variables (declared on :root in the theme's style.css: --font-heading: 'neo_sans_promedium'; --font-primary: 'neo_sans_stdregular';). Falls back to a safe stack when the theme isn't loaded so the plugin still works on a vanilla install. Specificity is low — element-level overrides (e.g. WPBakery's per-element class) win. */ [class*="saal-cta"], [class*="saal-card"], [class*="saal-stat"], [class*="saal-iconlist"], [class*="saal-flip"], [class*="saal-fancybox"], [class*="saal-icon-row"], [class*="saal-ms"], [class*="saal-img-card"], [class*="saal-tm"], [class*="saal-t__"], [class*="saal-video"], [class*="saal-sh"], [class*="saal-hl"], [class*="saal-feature"], [class*="saal-title"] { font-family: var(--font-primary, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } .saal-cta__title, .saal-card__title, .saal-stat__number, .saal-stat__label, .saal-iconlist__title, .saal-flip__title, .saal-fancybox__title, .saal-icon-row__title, .saal-ms__number, .saal-ms__label, .saal-img-card__title, .saal-tm__name, .saal-t__name, .saal-video__title, .saal-sh__primary, .saal-sh__secondary, .saal-hl__text, .saal-title__heading, .saal-feature .saal-card__title { font-family: var(--font-heading, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } /* ============================================================================ Row & Column extras (Salient-style preset enhancements) ============================================================================ */ /* ----- ROW vertical padding presets -------------------------------------- */ .vc_row.saal-row--pad-none { padding-top: 0 !important; padding-bottom: 0 !important; } .vc_row.saal-row--pad-sm { padding-top: 40px !important; padding-bottom: 40px !important; } .vc_row.saal-row--pad-md { padding-top: 80px !important; padding-bottom: 80px !important; } .vc_row.saal-row--pad-lg { padding-top: 120px !important; padding-bottom: 120px !important; } .vc_row.saal-row--pad-xl { padding-top: 160px !important; padding-bottom: 160px !important; } .vc_row.saal-row--pad-hero { padding-top: 80px !important; padding-bottom: 80px !important; min-height: 100vh; display: flex; align-items: center; } /* ----- ROW min-height (driven by --saal-row-minh) ------------------------ */ .vc_row.saal-row--has-minh { min-height: var(--saal-row-minh); } /* ----- ROW content max-width (constrains inner columns) ------------------ */ .vc_row.saal-row--has-maxw > .wpb_column, .vc_row.saal-row--has-maxw > .vc_column_container { max-width: var(--saal-row-maxw); margin-left: auto; margin-right: auto; } /* ----- ROW border radius presets ----------------------------------------- */ .vc_row.saal-row--radius-sm { border-radius: 8px; overflow: hidden; } .vc_row.saal-row--radius-md { border-radius: 16px; overflow: hidden; } .vc_row.saal-row--radius-lg { border-radius: 24px; overflow: hidden; } .vc_row.saal-row--radius-xl { border-radius: 40px; overflow: hidden; } .vc_row.saal-row--radius-pill { border-radius: 9999px; overflow: hidden; } /* ----- ROW box-shadow presets -------------------------------------------- */ .vc_row.saal-row--shadow-subtle { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .vc_row.saal-row--shadow-medium { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .vc_row.saal-row--shadow-strong { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .vc_row.saal-row--shadow-floating { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); } /* ----- ROW sticky -------------------------------------------------------- */ .vc_row.saal-row--sticky { position: sticky; top: 0; z-index: 50; } /* ----- ROW overlay + shape dividers wrapper ------------------------------ */ .vc_row.saal-has-overlay, .vc_row.saal-has-shape { position: relative; overflow: hidden; } .vc_row.saal-has-overlay > *, .vc_row.saal-has-shape > * { position: relative; z-index: 1; } .saal-row__overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Shape dividers — inline SVG, sized via CSS, span the full row width. */ .saal-row__shape { position: absolute; left: 0; right: 0; width: 100%; height: 80px; pointer-events: none; display: block; z-index: 0; color: #ffffff; /* fallback when --saal-shape-color is unset */ } .saal-row__shape--top { top: 0; transform: rotate(180deg); } .saal-row__shape--bottom { bottom: 0; } @media (min-width: 768px) { .saal-row__shape { height: 100px; } } @media (min-width: 1280px) { .saal-row__shape { height: 120px; } } /* ----- COLUMN padding presets -------------------------------------------- */ .vc_column.saal-col--pad-none > .vc_column-inner, .vc_column_inner.saal-col--pad-none > .vc_column-inner { padding: 0 !important; } .vc_column.saal-col--pad-sm > .vc_column-inner, .vc_column_inner.saal-col--pad-sm > .vc_column-inner { padding: 16px !important; } .vc_column.saal-col--pad-md > .vc_column-inner, .vc_column_inner.saal-col--pad-md > .vc_column-inner { padding: 24px !important; } .vc_column.saal-col--pad-lg > .vc_column-inner, .vc_column_inner.saal-col--pad-lg > .vc_column-inner { padding: 40px !important; } .vc_column.saal-col--pad-xl > .vc_column-inner, .vc_column_inner.saal-col--pad-xl > .vc_column-inner { padding: 64px !important; } /* ----- COLUMN border radius presets -------------------------------------- */ .vc_column.saal-col--radius-sm > .vc_column-inner, .vc_column_inner.saal-col--radius-sm > .vc_column-inner { border-radius: 8px; overflow: hidden; } .vc_column.saal-col--radius-md > .vc_column-inner, .vc_column_inner.saal-col--radius-md > .vc_column-inner { border-radius: 16px; overflow: hidden; } .vc_column.saal-col--radius-lg > .vc_column-inner, .vc_column_inner.saal-col--radius-lg > .vc_column-inner { border-radius: 24px; overflow: hidden; } .vc_column.saal-col--radius-xl > .vc_column-inner, .vc_column_inner.saal-col--radius-xl > .vc_column-inner { border-radius: 40px; overflow: hidden; } .vc_column.saal-col--radius-pill > .vc_column-inner, .vc_column_inner.saal-col--radius-pill > .vc_column-inner { border-radius: 9999px; overflow: hidden; } /* ----- COLUMN box-shadow presets ----------------------------------------- */ .vc_column.saal-col--shadow-subtle > .vc_column-inner, .vc_column_inner.saal-col--shadow-subtle > .vc_column-inner { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .vc_column.saal-col--shadow-medium > .vc_column-inner, .vc_column_inner.saal-col--shadow-medium > .vc_column-inner { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .vc_column.saal-col--shadow-strong > .vc_column-inner, .vc_column_inner.saal-col--shadow-strong > .vc_column-inner { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .vc_column.saal-col--shadow-floating > .vc_column-inner, .vc_column_inner.saal-col--shadow-floating > .vc_column-inner { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28); } /* ----- COLUMN hover effects ---------------------------------------------- */ .vc_column[class*="saal-col--hover-"] > .vc_column-inner, .vc_column_inner[class*="saal-col--hover-"] > .vc_column-inner { transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease; } .vc_column.saal-col--hover-lift:hover > .vc_column-inner, .vc_column_inner.saal-col--hover-lift:hover > .vc_column-inner { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); } .vc_column.saal-col--hover-glow:hover > .vc_column-inner, .vc_column_inner.saal-col--hover-glow:hover > .vc_column-inner { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.15), 0 12px 36px rgba(29, 78, 216, 0.25); } .vc_column.saal-col--hover-slide:hover > .vc_column-inner, .vc_column_inner.saal-col--hover-slide:hover > .vc_column-inner { transform: translateX(8px); } .vc_column.saal-col--hover-zoom:hover > .vc_column-inner, .vc_column_inner.saal-col--hover-zoom:hover > .vc_column-inner { transform: scale(1.03); } /* ----- COLUMN vertical alignment ----------------------------------------- */ .vc_row[class*="saal-col--align-"] { display: flex; flex-wrap: wrap; } .vc_column.saal-col--align-top > .vc_column-inner { align-self: flex-start; } .vc_column.saal-col--align-middle > .vc_column-inner { align-self: center; } .vc_column.saal-col--align-bottom > .vc_column-inner { align-self: flex-end; } .vc_column.saal-col--align-stretch > .vc_column-inner { align-self: stretch; height: 100%; } .vc_column-inner.saal-col--align-top { align-self: flex-start; } .vc_column-inner.saal-col--align-middle { align-self: center; } .vc_column-inner.saal-col--align-bottom { align-self: flex-end; } .vc_column-inner.saal-col--align-stretch { align-self: stretch; height: 100%; } /* ----- COLUMN linkable (stretched click target) -------------------------- */ .vc_column.saal-col--linkable, .vc_column_inner.saal-col--linkable { position: relative; } .saal-col__stretched-link { position: absolute; inset: 0; z-index: 1; /* below interactive children, above static content */ background: transparent; text-indent: -9999px; } /* Inner interactive content needs to win over the stretched link. */ .vc_column.saal-col--linkable a:not(.saal-col__stretched-link), .vc_column.saal-col--linkable button, .vc_column_inner.saal-col--linkable a:not(.saal-col__stretched-link), .vc_column_inner.saal-col--linkable button { position: relative; z-index: 2; } /* ----- vc_column_text / vc_custom_heading text-color wrapper ------------- The wrapper carries inline `style="color: … !important"` set by the editor's color picker. We push `color: inherit !important` down to every descendant so VC template-level font colors (custom heading color, font_color attr, theme stylesheet rules) all lose to the Text Block color picker. The only thing that still wins is an inner element with `style="color:… !important"` set directly inline — that's a deliberate per-element override. */ .saal-text-colored, .saal-text-colored * { color: inherit !important; } /* ----- Gradient preset wrapper behavior ----------------------------------- */ .saal-grad { position: relative; } .saal-grad > * { position: relative; z-index: 1; } /* ----- MESH GRADIENTS ----------------------------------------------------- */ .saal-grad--mesh-sunset { background-color: #ff7a59; background-image: radial-gradient(at 10% 20%, hsla(28,100%,62%,.95) 0, transparent 55%), radial-gradient(at 85% 30%, hsla(340,92%,64%,.92) 0, transparent 55%), radial-gradient(at 40% 85%, hsla(280,85%,58%,.85) 0, transparent 55%), radial-gradient(at 90% 90%, hsla(10,95%,60%,.85) 0, transparent 55%); } .saal-grad--mesh-ocean { background-color: #0b3c6b; background-image: radial-gradient(at 20% 10%, hsla(210,95%,60%,.95) 0, transparent 55%), radial-gradient(at 80% 20%, hsla(185,90%,55%,.90) 0, transparent 55%), radial-gradient(at 20% 80%, hsla(265,75%,55%,.85) 0, transparent 55%), radial-gradient(at 85% 85%, hsla(170,85%,45%,.85) 0, transparent 55%); } .saal-grad--mesh-forest { background-color: #064e3b; background-image: radial-gradient(at 15% 25%, hsla(155,70%,50%,.92) 0, transparent 55%), radial-gradient(at 80% 20%, hsla(80,70%,55%,.88) 0, transparent 55%), radial-gradient(at 30% 80%, hsla(180,65%,45%,.85) 0, transparent 55%), radial-gradient(at 85% 85%, hsla(140,60%,35%,.85) 0, transparent 55%); } .saal-grad--mesh-aurora { background-color: #0d0a2b; background-image: radial-gradient(at 10% 15%, hsla(160,80%,55%,.90) 0, transparent 55%), radial-gradient(at 85% 15%, hsla(280,85%,65%,.85) 0, transparent 55%), radial-gradient(at 50% 90%, hsla(320,90%,65%,.85) 0, transparent 55%); } .saal-grad--mesh-dawn { background-color: #fff5f5; background-image: radial-gradient(at 20% 20%, hsla(340,90%,80%,.95) 0, transparent 55%), radial-gradient(at 80% 30%, hsla(25,90%,78%,.90) 0, transparent 55%), radial-gradient(at 50% 90%, hsla(290,75%,82%,.85) 0, transparent 55%); } .saal-grad--mesh-candy { background-color: #fef3f8; background-image: radial-gradient(at 15% 20%, hsla(320,95%,75%,.95) 0, transparent 55%), radial-gradient(at 80% 15%, hsla(50,95%,72%,.90) 0, transparent 55%), radial-gradient(at 85% 85%, hsla(200,95%,72%,.90) 0, transparent 55%), radial-gradient(at 20% 85%, hsla(280,85%,75%,.85) 0, transparent 55%); } .saal-grad--mesh-nebula { background-color: #0a0720; background-image: radial-gradient(at 10% 0%, hsla(270,95%,55%,.85) 0, transparent 55%), radial-gradient(at 85% 15%, hsla(200,95%,55%,.80) 0, transparent 55%), radial-gradient(at 50% 70%, hsla(320,95%,60%,.85) 0, transparent 55%), radial-gradient(at 90% 95%, hsla(240,95%,60%,.85) 0, transparent 55%); } .saal-grad--mesh-bubblegum { background-color: #ffe3f1; background-image: radial-gradient(at 0% 0%, hsla(330,100%,80%,1) 0, transparent 55%), radial-gradient(at 100% 0%, hsla(300,100%,85%,.95) 0, transparent 55%), radial-gradient(at 50% 100%, hsla(200,100%,85%,.95) 0, transparent 55%); } .saal-grad--mesh-tropic { background-color: #06402b; background-image: radial-gradient(at 20% 10%, hsla(165,95%,45%,.95) 0, transparent 55%), radial-gradient(at 80% 10%, hsla(50,95%,60%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(195,95%,55%,.90) 0, transparent 55%); } .saal-grad--mesh-amethyst { background-color: #1a0f3b; background-image: radial-gradient(at 20% 20%, hsla(270,85%,60%,.95) 0, transparent 55%), radial-gradient(at 85% 30%, hsla(310,80%,55%,.85) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(230,80%,55%,.85) 0, transparent 55%); } .saal-grad--mesh-coral { background-color: #fff1ec; background-image: radial-gradient(at 15% 15%, hsla(15,100%,70%,.95) 0, transparent 55%), radial-gradient(at 85% 20%, hsla(340,95%,78%,.90) 0, transparent 55%), radial-gradient(at 50% 90%, hsla(35,100%,75%,.90) 0, transparent 55%); } .saal-grad--mesh-mint { background-color: #effff7; background-image: radial-gradient(at 10% 20%, hsla(150,75%,72%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(185,80%,70%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(120,65%,75%,.85) 0, transparent 55%); } .saal-grad--mesh-peach { background-color: #fff3ec; background-image: radial-gradient(at 20% 20%, hsla(25,100%,78%,.95) 0, transparent 55%), radial-gradient(at 80% 30%, hsla(0,90%,80%,.90) 0, transparent 55%), radial-gradient(at 55% 85%, hsla(45,100%,78%,.85) 0, transparent 55%); } .saal-grad--mesh-iris { background-color: #1b1340; background-image: radial-gradient(at 20% 15%, hsla(260,85%,60%,.95) 0, transparent 55%), radial-gradient(at 85% 15%, hsla(190,85%,55%,.90) 0, transparent 55%), radial-gradient(at 30% 95%, hsla(320,85%,60%,.85) 0, transparent 55%), radial-gradient(at 85% 90%, hsla(220,85%,55%,.85) 0, transparent 55%); } .saal-grad--linear-rose { background-image: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%); } .saal-grad--linear-sky { background-image: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%); } .saal-grad--linear-slate { background-image: linear-gradient(135deg, #334155 0%, #1e293b 100%); } .saal-grad--linear-flamingo { background-image: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #ffd1ff 100%); } .saal-grad--grid-blueprint { background-color: #0b2847; background-image: linear-gradient(rgba(120,180,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(120,180,255,.14) 1px, transparent 1px), linear-gradient(135deg, #0b2847, #1e3a8a); background-size: 32px 32px, 32px 32px, 100% 100%; } .saal-grad--conic-iridescent { background-image: conic-gradient(from 0deg at 50% 50%, hsl(260, 85%, 60%), hsl(200, 90%, 60%), hsl(160, 80%, 55%), hsl(50, 90%, 60%), hsl(15, 95%, 62%), hsl(320, 90%, 62%), hsl(260, 85%, 60%)); filter: saturate(1.1); } .saal-grad--duotone-ocean { background-image: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); } .saal-grad--duotone-magenta { background-image: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%); } .saal-grad--duotone-forest { background-image: linear-gradient(135deg, #059669 0%, #1e40af 100%); } /* ----- Fluid / vibrant mesh (extended library) ----- */ .saal-grad--fluid-midnight-neon { background-color: #0b0d2a; background-image: radial-gradient(at 12% 18%, hsla(320,95%,60%,.85) 0, transparent 55%), radial-gradient(at 88% 18%, hsla(190,95%,55%,.80) 0, transparent 55%), radial-gradient(at 50% 100%, hsla(260,95%,55%,.85) 0, transparent 55%); } .saal-grad--fluid-lemonade { background-color: #fff9e6; background-image: radial-gradient(at 20% 15%, hsla(48,100%,72%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(340,95%,78%,.88) 0, transparent 55%), radial-gradient(at 30% 95%, hsla(25,100%,75%,.85) 0, transparent 55%); } .saal-grad--fluid-glacier { background-color: #eaf6ff; background-image: radial-gradient(at 10% 10%, hsla(200,85%,80%,.92) 0, transparent 55%), radial-gradient(at 90% 20%, hsla(220,75%,85%,.88) 0, transparent 55%), radial-gradient(at 40% 95%, hsla(190,70%,88%,.88) 0, transparent 55%); } .saal-grad--fluid-wildflower { background-color: #f8f0ff; background-image: radial-gradient(at 15% 20%, hsla(280,70%,78%,.90) 0, transparent 55%), radial-gradient(at 85% 15%, hsla(50,90%,78%,.90) 0, transparent 55%), radial-gradient(at 50% 90%, hsla(140,55%,72%,.85) 0, transparent 55%), radial-gradient(at 80% 90%, hsla(330,80%,78%,.80) 0, transparent 55%); } .saal-grad--fluid-rust { background-color: #3a1608; background-image: radial-gradient(at 15% 20%, hsla(15,85%,45%,.95) 0, transparent 55%), radial-gradient(at 85% 20%, hsla(30,95%,55%,.90) 0, transparent 55%), radial-gradient(at 55% 95%, hsla(5,75%,35%,.90) 0, transparent 55%); } .saal-grad--fluid-pistachio { background-color: #effae6; background-image: radial-gradient(at 15% 15%, hsla(85,65%,75%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(160,55%,78%,.88) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(45,80%,82%,.85) 0, transparent 55%); } .saal-grad--fluid-plum { background-color: #1f0a2b; background-image: radial-gradient(at 20% 15%, hsla(295,75%,45%,.92) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(325,80%,50%,.88) 0, transparent 55%), radial-gradient(at 40% 95%, hsla(260,70%,40%,.88) 0, transparent 55%); } .saal-grad--fluid-arctic { background-color: #f5fafe; background-image: radial-gradient(at 15% 10%, hsla(210,80%,92%,.98) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(190,75%,88%,.92) 0, transparent 55%), radial-gradient(at 50% 100%, hsla(220,65%,90%,.88) 0, transparent 55%); } .saal-grad--fluid-saffron { background-color: #411c02; background-image: radial-gradient(at 15% 20%, hsla(45,100%,55%,.95) 0, transparent 55%), radial-gradient(at 85% 15%, hsla(30,95%,50%,.92) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(15,90%,45%,.90) 0, transparent 55%); } .saal-grad--fluid-galaxy { background-color: #020314; background-image: radial-gradient(at 18% 10%, hsla(270,90%,45%,.90) 0, transparent 55%), radial-gradient(at 85% 20%, hsla(235,85%,45%,.85) 0, transparent 55%), radial-gradient(at 35% 85%, hsla(300,85%,45%,.80) 0, transparent 55%), radial-gradient(at 88% 95%, hsla(215,80%,35%,.85) 0, transparent 55%); } .saal-grad--fluid-cotton-candy { background-color: #fdeef7; background-image: radial-gradient(at 15% 20%, hsla(330,95%,82%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(215,95%,82%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(280,85%,88%,.85) 0, transparent 55%); } .saal-grad--fluid-obsidian { background-color: #0a0a0d; background-image: radial-gradient(at 20% 20%, hsla(240,55%,25%,.80) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(280,45%,22%,.75) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(210,50%,18%,.85) 0, transparent 55%); } .saal-grad--fluid-honey { background-color: #3d1f02; background-image: radial-gradient(at 15% 15%, hsla(40,100%,60%,.95) 0, transparent 55%), radial-gradient(at 85% 20%, hsla(30,95%,50%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(25,85%,40%,.90) 0, transparent 55%); } .saal-grad--fluid-lavender { background-color: #efe5ff; background-image: radial-gradient(at 15% 15%, hsla(260,80%,85%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(290,75%,82%,.92) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(230,80%,85%,.88) 0, transparent 55%); } .saal-grad--fluid-seafoam { background-color: #e9fbf2; background-image: radial-gradient(at 15% 15%, hsla(170,75%,78%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(195,72%,80%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(145,60%,82%,.85) 0, transparent 55%); } .saal-grad--fluid-sunrise { background-image: linear-gradient(180deg, hsl(220, 85%, 72%) 0%, hsl(280, 85%, 75%) 18%, hsl(330, 92%, 75%) 38%, hsl(15, 100%, 72%) 62%, hsl(42, 100%, 68%) 82%, hsl(52, 100%, 78%) 100%); } .saal-grad--fluid-cyberpunk { background-color: #07050f; background-image: linear-gradient(rgba(255,20,200,.08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(20,220,255,.08) 1px, transparent 1px) 0 0 / 28px 28px, radial-gradient(at 15% 20%, hsla(315,100%,55%,.80) 0, transparent 55%), radial-gradient(at 85% 20%, hsla(185,100%,55%,.75) 0, transparent 55%), linear-gradient(180deg, #07050f 0%, #1a0830 100%); } .saal-grad--fluid-mocha { background-color: #2a1810; background-image: radial-gradient(at 15% 15%, hsla(25,45%,48%,.90) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(35,40%,55%,.85) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(20,35%,30%,.90) 0, transparent 55%); } .saal-grad--fluid-electric { background-color: #0d0a3a; background-image: radial-gradient(at 10% 15%, hsla(265,95%,60%,.95) 0, transparent 55%), radial-gradient(at 90% 20%, hsla(200,95%,60%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(230,95%,55%,.90) 0, transparent 55%); } .saal-grad--fluid-tuscany { background-color: #f2e5cd; background-image: radial-gradient(at 15% 20%, hsla(35,70%,75%,.95) 0, transparent 55%), radial-gradient(at 85% 25%, hsla(10,65%,72%,.90) 0, transparent 55%), radial-gradient(at 50% 95%, hsla(85,40%,70%,.85) 0, transparent 55%); } /* ----- LINEAR GRADIENTS --------------------------------------------------- */ .saal-grad--linear-midnight { background-image: linear-gradient(135deg, #141E30 0%, #243B55 100%); } .saal-grad--linear-violet { background-image: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%); } .saal-grad--linear-emerald { background-image: linear-gradient(135deg, #00B09B 0%, #96C93D 100%); } .saal-grad--linear-golden { background-image: linear-gradient(135deg, #F7971E 0%, #FFD200 100%); } .saal-grad--linear-indigo { background-image: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); } .saal-grad--linear-brand { background-image: linear-gradient(135deg, var(--wpb-primary, #4a23d1) 0%, var(--wpb-header-bg, #0c0c0c) 100%); } /* ----- GRID / PATTERN ---------------------------------------------------- */ /* Dark grid — subtle square grid over a navy gradient */ .saal-grad--grid-dark { background-color: #0f172a; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(135deg, #0f172a 0%, #1e293b 100%); background-size: 40px 40px, 40px 40px, 100% 100%; background-position: 0 0, 0 0, 0 0; } /* Cyber grid — neon lines over a purple-to-black gradient */ .saal-grad--grid-cyber { background-color: #0a0a1f; background-image: linear-gradient(rgba(0,255,200,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,60,200,.08) 1px, transparent 1px), radial-gradient(ellipse at 50% 100%, rgba(120,80,255,.45) 0%, transparent 65%), linear-gradient(180deg, #0a0a1f 0%, #1a0b3f 100%); background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%; } /* Soft dot grid — light (for light backgrounds) */ .saal-grad--grid-dots-light { background-color: #f8fafc; background-image: radial-gradient(rgba(15,23,42,.15) 1px, transparent 1.5px); background-size: 20px 20px; } /* Soft dot grid — dark */ .saal-grad--grid-dots-dark { background-color: #0f172a; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px); background-size: 20px 20px; } /* ----- RADIAL + CONIC ---------------------------------------------------- */ .saal-grad--radial-spotlight { background-color: #0f172a; background-image: radial-gradient(ellipse 80% 50% at 50% 40%, rgba(255,255,255,.18) 0%, transparent 65%); } .saal-grad--radial-glow { background-color: #0f172a; background-image: radial-gradient(circle at 30% 40%, rgba(96,180,255,.45) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(180,100,255,.45) 0%, transparent 50%); } .saal-grad--conic-wheel { background-image: conic-gradient(from 180deg at 50% 50%, hsl(0,80%,60%) 0deg, hsl(40,85%,60%) 60deg, hsl(100,70%,55%) 120deg, hsl(180,75%,55%) 180deg, hsl(220,80%,60%) 240deg, hsl(300,80%,60%) 300deg, hsl(0,80%,60%) 360deg); } /* ============================================================================ Saal Title element ============================================================================ */ .saal-title { margin: 0 0 .35em; } /* Gradient-filled text — uses background-clip: text so the gradient paints the glyphs */ .saal-title--gradient { background-clip: text; -webkit-background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } /* When a gradient preset class sits on the title, re-apply the background-image to the title itself (otherwise the preset would paint the title's bg, not the glyph fill). */ .saal-title.saal-title--gradient[class*="saal-grad--"] { /* The preset already sets background-image via .saal-grad--*; we just need background-clip:text. */ background-color: transparent !important; } /* ============================================================================ Shared design tokens (per-element overrides via --saal-card-accent) ============================================================================ */ .saal-card, .saal-feature, .saal-img-card, .saal-stat, .saal-icon-row, .saal-cta, .saal-video { --saal-card-accent: var(--wpb-primary, #4a23d1); --saal-card-radius: 16px; --saal-card-pad: clamp(20px, 2.2vw, 32px); --saal-card-shadow: 0 2px 8px rgba(0,0,0,.04); --saal-card-shadow-hover: 0 24px 60px -20px rgba(0,0,0,.22), 0 8px 20px -8px rgba(0,0,0,.14); --saal-card-border: rgba(15,23,42,.08); --saal-card-bg: #ffffff; --saal-card-text: #0f172a; --saal-card-muted: #64748b; --saal-card-transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1), background .25s; box-sizing: border-box; } .saal-card *, .saal-feature *, .saal-img-card *, .saal-stat *, .saal-icon-row *, .saal-cta *, .saal-video * { box-sizing: border-box; } /* ============================================================================ Saal Feature Card ============================================================================ */ .saal-feature { display: flex; flex-direction: column; padding: var(--saal-card-pad); border-radius: var(--saal-card-radius); transition: var(--saal-card-transition); position: relative; height: 100%; } .saal-feature .saal-card__icon { font-size: 28px; line-height: 1; color: var(--saal-card-accent); margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--saal-card-accent) 12%, transparent); transition: background .25s, transform .25s; } .saal-feature .saal-card__title { font-size: clamp(18px, 1.4vw, 22px); font-weight: 700; line-height: 1.25; margin: 0 0 8px; color: var(--saal-card-text); } .saal-feature .saal-card__text { font-size: 15px; line-height: 1.6; color: var(--saal-card-muted); margin: 0 0 16px; } .saal-feature .saal-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 600; font-size: 14px; color: var(--saal-card-accent); text-decoration: none; } .saal-feature .saal-card__link svg { transition: transform .2s; } .saal-feature .saal-card__link:hover svg { transform: translateX(3px); } .saal-card--align-center { text-align: center; } .saal-card--align-center .saal-card__icon { margin-left: auto; margin-right: auto; } .saal-card--align-center .saal-card__link { justify-content: center; } .saal-card--icon-sm .saal-card__icon { width: 40px; height: 40px; font-size: 20px; } .saal-card--icon-md .saal-card__icon { width: 52px; height: 52px; font-size: 24px; } .saal-card--icon-lg .saal-card__icon { width: 64px; height: 64px; font-size: 30px; border-radius: 16px; } .saal-card--icon-xl .saal-card__icon { width: 80px; height: 80px; font-size: 36px; border-radius: 20px; } /* Outlined variant */ .saal-card--outlined { background: var(--saal-card-bg); border: 1px solid var(--saal-card-border); box-shadow: var(--saal-card-shadow); } .saal-card--outlined:hover { transform: translateY(-4px); box-shadow: var(--saal-card-shadow-hover); border-color: color-mix(in srgb, var(--saal-card-accent) 30%, var(--saal-card-border)); } /* Filled variant */ .saal-card--filled { background: color-mix(in srgb, var(--saal-card-accent) 8%, #fff); border: 0; } .saal-card--filled:hover { background: color-mix(in srgb, var(--saal-card-accent) 14%, #fff); transform: translateY(-3px); } /* Gradient border variant (2024 trend) */ .saal-card--gradient-border { background: var(--saal-card-bg); border: 0; position: relative; box-shadow: var(--saal-card-shadow); } .saal-card--gradient-border::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, var(--saal-card-accent), color-mix(in srgb, var(--saal-card-accent) 30%, #ec4899)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .saal-card--gradient-border:hover { transform: translateY(-4px); box-shadow: var(--saal-card-shadow-hover); } /* Glass variant (for use over dark/gradient backgrounds) */ .saal-card--glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); color: #fff; } .saal-card--glass .saal-card__title { color: #fff; } .saal-card--glass .saal-card__text { color: rgba(255,255,255,.75); } .saal-card--glass .saal-card__icon { background: rgba(255,255,255,.12); color: #fff; } .saal-card--glass .saal-card__link { color: #fff; } .saal-card--glass:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); } /* Minimal variant */ .saal-card--minimal { padding: 0; background: transparent; } .saal-card--minimal:hover .saal-card__icon { transform: scale(1.06); } /* ============================================================================ Saal Image Card ============================================================================ */ .saal-img-card { display: block; text-decoration: none; color: inherit; background: var(--saal-card-bg); border-radius: var(--saal-card-radius); box-shadow: var(--saal-card-shadow); overflow: hidden; transition: var(--saal-card-transition); } .saal-img-card__media { position: relative; overflow: hidden; background: #f1f5f9; } .saal-img-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .saal-img-card--ratio-16-9 .saal-img-card__media { aspect-ratio: 16 / 9; } .saal-img-card--ratio-4-3 .saal-img-card__media { aspect-ratio: 4 / 3; } .saal-img-card--ratio-1-1 .saal-img-card__media { aspect-ratio: 1 / 1; } .saal-img-card--ratio-3-4 .saal-img-card__media { aspect-ratio: 3 / 4; } .saal-img-card__body { padding: clamp(16px, 1.6vw, 24px); } .saal-img-card__title { font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: var(--saal-card-text); } .saal-img-card__text { font-size: 14px; line-height: 1.55; margin: 0; color: var(--saal-card-muted); } .saal-img-card--hover-zoom:hover .saal-img-card__img { transform: scale(1.06); } .saal-img-card--hover-lift:hover { transform: translateY(-6px); box-shadow: var(--saal-card-shadow-hover); } .saal-img-card--overlay-dark .saal-img-card__media::after, .saal-img-card--overlay-brand .saal-img-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; } .saal-img-card--overlay-dark .saal-img-card__media::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%); } .saal-img-card--overlay-brand .saal-img-card__media::after { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--saal-card-accent) 70%, #000) 100%); } .saal-img-card--overlay-dark-hover .saal-img-card__media::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; } .saal-img-card--overlay-dark-hover:hover .saal-img-card__media::after { opacity: 1; } /* Text overlaid on the image */ .saal-img-card--text-overlay { position: relative; } .saal-img-card--text-overlay .saal-img-card__body { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: clamp(20px, 2vw, 32px); z-index: 2; } .saal-img-card--text-overlay .saal-img-card__title { color: #fff; } .saal-img-card--text-overlay .saal-img-card__text { color: rgba(255,255,255,.85); } .saal-img-card--text-overlay .saal-img-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%); pointer-events: none; } /* ============================================================================ Saal Video Card ============================================================================ */ .saal-video { margin: 0; } .saal-video__frame { position: relative; overflow: hidden; border-radius: var(--saal-card-radius); background: #0f172a; box-shadow: var(--saal-card-shadow); cursor: pointer; } .saal-video--ratio-16-9 .saal-video__frame { aspect-ratio: 16 / 9; } .saal-video--ratio-4-3 .saal-video__frame { aspect-ratio: 4 / 3; } .saal-video--ratio-1-1 .saal-video__frame { aspect-ratio: 1 / 1; } .saal-video--ratio-21-9 .saal-video__frame { aspect-ratio: 21 / 9; } .saal-video__poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; } .saal-video__poster--empty { width: 100%; height: 100%; background: linear-gradient(135deg, #1e293b, #0f172a); } .saal-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; transition: transform .25s, background .25s; z-index: 2; color: #0f172a; } .saal-video__play svg { transform: translateX(2px); } .saal-video--play-solid .saal-video__play { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .saal-video--play-glass .saal-video__play { background: rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3); color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.4); } .saal-video--play-outlined .saal-video__play { background: transparent; border: 2.5px solid #fff; color: #fff; } .saal-video__frame:hover .saal-video__play { transform: translate(-50%, -50%) scale(1.08); } .saal-video__frame:hover .saal-video__poster { transform: scale(1.04); filter: brightness(.92); } .saal-video.is-playing .saal-video__poster, .saal-video.is-playing .saal-video__play { display: none; } .saal-video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .saal-video__caption { margin-top: 16px; text-align: left; } .saal-video__title { font-size: clamp(18px, 1.4vw, 22px); font-weight: 700; margin: 0 0 6px; line-height: 1.3; } .saal-video__text { font-size: 14px; color: var(--saal-card-muted); margin: 0; line-height: 1.55; } /* ============================================================================ Saal Stat / KPI ============================================================================ */ .saal-stat { display: flex; flex-direction: column; gap: 6px; padding: 0; position: relative; transition: var(--saal-card-transition); } .saal-stat__icon { color: var(--saal-card-accent); font-size: 22px; margin-bottom: 8px; } .saal-stat__number { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--saal-card-text); } .saal-stat__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--saal-card-muted); margin-top: 4px; } .saal-stat__text { font-size: 14px; color: var(--saal-card-muted); margin: 6px 0 0; line-height: 1.5; } .saal-stat--align-center { text-align: center; align-items: center; } .saal-stat--outlined, .saal-stat--filled { padding: clamp(24px, 2.4vw, 36px); border-radius: var(--saal-card-radius); } .saal-stat--outlined { background: #fff; border: 1px solid var(--saal-card-border); box-shadow: var(--saal-card-shadow); } .saal-stat--filled { background: color-mix(in srgb, var(--saal-card-accent) 8%, #fff); } .saal-stat--gradient .saal-stat__number { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* When stat has saal-grad--* class + saal-stat--has-gradient, the gradient fills the number */ .saal-stat--has-gradient .saal-stat__number { background-image: inherit; /* Will be overridden by specific preset */ } .saal-stat__trend { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-top: 8px; width: max-content; } .saal-stat__trend--up { background: rgba(16,185,129,.12); color: #059669; } .saal-stat__trend--down { background: rgba(239,68,68,.12); color: #dc2626; } .saal-stat__trend--flat { background: rgba(100,116,139,.12); color: #475569; } .saal-stat--align-center .saal-stat__trend { margin-left: auto; margin-right: auto; } /* ============================================================================ Saal Icon Row ============================================================================ */ .saal-icon-row { display: flex; gap: 16px; align-items: flex-start; transition: var(--saal-card-transition); } .saal-icon-row--vertical { flex-direction: column; align-items: flex-start; } .saal-icon-row__mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--saal-card-accent); font-size: 18px; } .saal-icon-row--shape-circle .saal-icon-row__mark { border-radius: 50%; } .saal-icon-row--shape-square .saal-icon-row__mark { border-radius: 10px; } .saal-icon-row--shape-hex .saal-icon-row__mark { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0; } .saal-icon-row--shape-ring .saal-icon-row__mark { border-radius: 50%; background: transparent !important; border: 2px solid currentColor; } .saal-icon-row--shape-none .saal-icon-row__mark { background: transparent !important; width: auto; height: auto; } .saal-icon-row--fill-soft .saal-icon-row__mark:not(.saal-icon-row--shape-ring .saal-icon-row__mark) { background: color-mix(in srgb, var(--saal-card-accent) 12%, transparent); } .saal-icon-row--fill-solid .saal-icon-row__mark { background: var(--saal-card-accent); color: #fff; } .saal-icon-row--fill-gradient .saal-icon-row__mark { background: linear-gradient(135deg, var(--saal-card-accent), color-mix(in srgb, var(--saal-card-accent) 40%, #ec4899)); color: #fff; } .saal-icon-row__body { flex: 1 1 auto; } .saal-icon-row__title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--saal-card-text); line-height: 1.35; } .saal-icon-row__text { font-size: 14px; line-height: 1.55; margin: 0; color: var(--saal-card-muted); } /* ============================================================================ Saal CTA Banner ============================================================================ */ .saal-cta { display: block; width: 100%; border-radius: var(--saal-card-radius); overflow: hidden; position: relative; color: #fff; } .saal-cta__inner { max-width: 960px; margin: 0 auto; padding: clamp(32px, 5vw, 80px) clamp(20px, 4vw, 48px); position: relative; z-index: 1; } .saal-cta--pad-sm .saal-cta__inner { padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 48px); } .saal-cta--pad-md .saal-cta__inner { padding: clamp(32px, 5vw, 80px) clamp(20px, 4vw, 48px); } .saal-cta--pad-lg .saal-cta__inner { padding: clamp(48px, 7vw, 112px) clamp(20px, 4vw, 48px); } .saal-cta--pad-xl .saal-cta__inner { padding: clamp(72px, 10vw, 160px) clamp(20px, 4vw, 48px); } .saal-cta--align-center .saal-cta__inner { text-align: center; } .saal-cta--align-center .saal-cta__actions { justify-content: center; } .saal-cta__title { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; color: inherit; } .saal-cta__subtitle { font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.5; opacity: .88; margin: 0 0 28px; max-width: 58ch; } .saal-cta--align-center .saal-cta__subtitle { margin-left: auto; margin-right: auto; } .saal-cta__actions { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; } .saal-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1; cursor: pointer; border: 0; transition: transform .2s, background .2s, color .2s; } .saal-btn--primary { background: #fff; color: #0f172a; } .saal-btn--primary:hover { transform: translateY(-2px); background: #f1f5f9; } .saal-btn--primary svg { transition: transform .2s; } .saal-btn--primary:hover svg { transform: translateX(3px); } .saal-btn--ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; } .saal-btn--ghost:hover { background: rgba(255,255,255,.12); } /* ============================================================================ Saal Fancy Box — 6 variants ============================================================================ */ .saal-fancybox { --saal-fb-radius: 16px; --saal-fb-pad: clamp(20px, 2.2vw, 36px); --saal-card-accent: var(--wpb-primary, #4a23d1); position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s, color .35s; box-sizing: border-box; height: 100%; } .saal-fancybox * { box-sizing: border-box; } .saal-fancybox--radius-md { border-radius: var(--saal-fb-radius); } .saal-fancybox--radius-sm { border-radius: 8px; } .saal-fancybox--radius-lg { border-radius: 24px; } .saal-fancybox--radius-pill { border-radius: 999px; } .saal-fancybox--radius-none { border-radius: 0; } .saal-fancybox--align-center { text-align: center; } /* High specificity + !important on color so page-level canvas colors can NEVER override the editor's per-element picks. Font/size overrides stay without !important so they can be tweaked downstream. */ .saal-fancybox .saal-fancybox__title, .saal-fancybox.saal-fancybox .saal-fancybox__title { font-size: var(--saal-fb-title-size, clamp(22px, 1.7vw, 28px)); font-weight: var(--saal-fb-title-weight, 700); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--saal-fb-title-color, inherit) !important; transition: color .35s; } .saal-fancybox .saal-fancybox__text, .saal-fancybox.saal-fancybox .saal-fancybox__text { font-size: var(--saal-fb-text-size, clamp(15px, 1.05vw, 17px)); line-height: 1.6; margin: 0; color: var(--saal-fb-text-color, inherit) !important; opacity: var(--saal-fb-text-opacity, .78); transition: color .35s; } /* -------- 1. Bottom color bar — icon + text, bar grows on hover -------- */ .saal-fancybox--bottom-bar { background: var(--saal-fb-bg, #fff); border: var(--saal-fb-border-width, 1px) solid var(--saal-fb-border-color, rgba(15,23,42,.08)); padding: var(--saal-fb-pad); box-shadow: 0 2px 8px rgba(0,0,0,.04); padding-bottom: calc(var(--saal-fb-pad, 28px) + 6px); color: var(--saal-fb-text-color, #64748b); } .saal-fancybox--bottom-bar .saal-fancybox__title { color: var(--saal-fb-title-color, #0f172a); } .saal-fancybox--bottom-bar .saal-fancybox__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--saal-fb-icon-box, 56px); height: var(--saal-fb-icon-box, 56px); border-radius: 14px; background: color-mix(in srgb, var(--saal-card-accent) 12%, transparent); color: var(--saal-fb-icon-color, var(--saal-card-accent)); font-size: var(--saal-fb-icon-size, 24px); margin-bottom: 18px; transition: transform .3s; } .saal-fancybox--bottom-bar .saal-fancybox__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--saal-card-accent); transform: scaleX(.35); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2,.7,.2,1); } .saal-fancybox--bottom-bar:hover { transform: translateY(-4px); background: var(--saal-fb-bg-hover, var(--saal-fb-bg, #fff)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.22), 0 8px 20px -8px rgba(0,0,0,.14); border-color: color-mix(in srgb, var(--saal-card-accent) 30%, rgba(15,23,42,.1)); } .saal-fancybox--bottom-bar:hover .saal-fancybox__bar { transform: scaleX(1); } .saal-fancybox--bottom-bar:hover .saal-fancybox__icon { transform: scale(1.08); } .saal-fancybox--align-center.saal-fancybox--bottom-bar { align-items: center; } /* -------- 2. Color box hover — transparent at rest, accent card materialises on hover -------- */ .saal-fancybox--color-hover { background: var(--saal-fb-bg, transparent); padding: var(--saal-fb-pad); border: var(--saal-fb-border-width, 0) solid var(--saal-fb-border-color, transparent); box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, box-shadow .4s, border-color .35s; } .saal-fancybox--color-hover .saal-fancybox__title { color: var(--saal-fb-title-color, #0f172a); } .saal-fancybox--color-hover .saal-fancybox__text { color: var(--saal-fb-text-color, #64748b); opacity: 1; } .saal-fancybox--color-hover .saal-fancybox__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--saal-fb-icon-box, 56px); height: var(--saal-fb-icon-box, 56px); font-size: var(--saal-fb-icon-size, 28px); color: var(--saal-fb-icon-color, var(--saal-card-accent)); background: transparent; border-radius: 0; margin-bottom: 18px; transition: color .35s, transform .3s; } .saal-fancybox--color-hover:hover { background: var(--saal-fb-bg-hover, var(--saal-card-accent)); transform: translateY(-4px); box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--saal-card-accent) 55%, transparent); } .saal-fancybox--color-hover:hover .saal-fancybox__icon { color: #fff; transform: scale(1.06); } .saal-fancybox--color-hover:hover .saal-fancybox__title { color: var(--saal-fb-title-hover, #fff); } .saal-fancybox--color-hover:hover .saal-fancybox__text { color: var(--saal-fb-text-hover, rgba(255,255,255,.92)); } .saal-fancybox--align-center.saal-fancybox--color-hover { align-items: center; } /* -------- 3. Color box static — always accent background -------- */ .saal-fancybox--color-static { background: var(--saal-fb-bg, var(--saal-card-accent)); padding: var(--saal-fb-pad); border: var(--saal-fb-border-width, 0) solid var(--saal-fb-border-color, transparent); transition: background .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; } .saal-fancybox--color-static .saal-fancybox__title { color: var(--saal-fb-title-color, #fff); } .saal-fancybox--color-static .saal-fancybox__text { color: var(--saal-fb-text-color, rgba(255,255,255,.85)); opacity: 1; } .saal-fancybox--color-static .saal-fancybox__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--saal-fb-icon-box, 56px); height: var(--saal-fb-icon-box, 56px); border-radius: 14px; background: rgba(255,255,255,.16); color: var(--saal-fb-icon-color, #fff); font-size: var(--saal-fb-icon-size, 24px); margin-bottom: 18px; } .saal-fancybox--color-static:hover { background: var(--saal-fb-bg-hover, var(--saal-fb-bg, var(--saal-card-accent))); } .saal-fancybox--color-static:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--saal-card-accent) 60%, transparent); } .saal-fancybox--align-center.saal-fancybox--color-static { align-items: center; } /* -------- 4. Parallax — image bg, content lifts on hover -------- */ .saal-fancybox--parallax { background-size: cover; background-position: center; color: #fff; min-height: 320px; justify-content: flex-end; } .saal-fancybox--parallax.saal-fancybox--ratio-4-5 { aspect-ratio: 4/5; min-height: 0; } .saal-fancybox--parallax.saal-fancybox--ratio-1-1 { aspect-ratio: 1/1; min-height: 0; } .saal-fancybox--parallax.saal-fancybox--ratio-4-3 { aspect-ratio: 4/3; min-height: 0; } .saal-fancybox--parallax.saal-fancybox--ratio-16-9{ aspect-ratio: 16/9; min-height: 0; } .saal-fancybox--parallax .saal-fancybox__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.75) 100%); pointer-events: none; z-index: 1; transition: opacity .4s; } .saal-fancybox--parallax .saal-fancybox__inner { position: relative; z-index: 2; padding: var(--saal-fb-pad); transform: translateY(14px); transition: transform .45s cubic-bezier(.2,.7,.2,1); } .saal-fancybox--parallax:hover { transform: translateY(-4px); } .saal-fancybox--parallax:hover .saal-fancybox__inner { transform: translateY(0); } .saal-fancybox--parallax .saal-fancybox__title { color: var(--saal-fb-title-color, #fff); } .saal-fancybox--parallax .saal-fancybox__text { color: var(--saal-fb-text-color, rgba(255,255,255,.85)); opacity: 1; } /* -------- 5. Hover desc — image card, description fades in over tint -------- */ .saal-fancybox--hover-desc { background-size: cover; background-position: center; color: #fff; min-height: 280px; justify-content: flex-end; } .saal-fancybox--hover-desc.saal-fancybox--ratio-4-5 { aspect-ratio: 4/5; min-height: 0; } .saal-fancybox--hover-desc.saal-fancybox--ratio-1-1 { aspect-ratio: 1/1; min-height: 0; } .saal-fancybox--hover-desc.saal-fancybox--ratio-4-3 { aspect-ratio: 4/3; min-height: 0; } .saal-fancybox--hover-desc.saal-fancybox--ratio-16-9{ aspect-ratio: 16/9; min-height: 0; } .saal-fancybox--hover-desc .saal-fancybox__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 60%, color-mix(in srgb, var(--saal-card-accent) 88%, #000) 100%); opacity: .55; transition: opacity .4s; pointer-events: none; z-index: 1; } .saal-fancybox--hover-desc .saal-fancybox__inner { position: relative; z-index: 2; padding: var(--saal-fb-pad); } .saal-fancybox--hover-desc .saal-fancybox__text { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .4s, opacity .4s, margin-top .4s; } .saal-fancybox--hover-desc:hover { transform: translateY(-4px); } .saal-fancybox--hover-desc:hover .saal-fancybox__scrim { opacity: .95; } .saal-fancybox--hover-desc:hover .saal-fancybox__text { max-height: 8em; opacity: 1; margin-top: 8px; } .saal-fancybox--hover-desc .saal-fancybox__title { color: var(--saal-fb-title-color, #fff); } .saal-fancybox--hover-desc .saal-fancybox__text { color: var(--saal-fb-text-color, rgba(255,255,255,.9)); opacity: 1; } /* -------- 6. Image above — image on top, title + underlined link below -------- */ .saal-fancybox--image-above { background: transparent; border-radius: 0; gap: 16px; } .saal-fancybox--image-above .saal-fancybox__media { display: block; overflow: hidden; border-radius: var(--saal-fb-radius); background: #f1f5f9; } .saal-fancybox--image-above.saal-fancybox--ratio-4-5 .saal-fancybox__media { aspect-ratio: 4/5; } .saal-fancybox--image-above.saal-fancybox--ratio-1-1 .saal-fancybox__media { aspect-ratio: 1/1; } .saal-fancybox--image-above.saal-fancybox--ratio-4-3 .saal-fancybox__media { aspect-ratio: 4/3; } .saal-fancybox--image-above.saal-fancybox--ratio-16-9 .saal-fancybox__media { aspect-ratio: 16/9; } .saal-fancybox--image-above .saal-fancybox__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); } .saal-fancybox--image-above:hover .saal-fancybox__media img { transform: scale(1.05); } .saal-fancybox--image-above .saal-fancybox__body { padding: 0 2px; } .saal-fancybox--image-above .saal-fancybox__title { margin-bottom: 6px; } .saal-fancybox--image-above .saal-fancybox__link { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--saal-card-accent); } .saal-fancybox--image-above .saal-fancybox__link-underline { display: block; height: 1.5px; background: currentColor; transform: scaleX(.3); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .saal-fancybox--image-above:hover .saal-fancybox__link-underline { transform: scaleX(1); } .saal-fancybox--image-above.saal-fancybox--align-center .saal-fancybox__link { align-items: center; } .saal-fancybox--image-above.saal-fancybox--align-center .saal-fancybox__link-underline { transform-origin: 50% 50%; } /* ============================================================================ Saal Icon List ============================================================================ */ .saal-iconlist { --saal-il-accent: var(--wpb-primary, #4a23d1); --saal-il-title: #0f172a; --saal-il-text: #64748b; --saal-il-line: rgba(15,23,42,.15); list-style: none; margin: 0; padding: 0; } .saal-iconlist * { box-sizing: border-box; } .saal-iconlist__item { position: relative; display: flex; align-items: flex-start; gap: 16px; } .saal-iconlist--spacing-sm .saal-iconlist__item + .saal-iconlist__item { margin-top: 14px; } .saal-iconlist--spacing-md .saal-iconlist__item + .saal-iconlist__item { margin-top: 22px; } .saal-iconlist--spacing-lg .saal-iconlist__item + .saal-iconlist__item { margin-top: 34px; } /* Icon mark */ .saal-iconlist__mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--saal-il-accent); position: relative; z-index: 1; transition: transform .3s; } .saal-iconlist--size-sm .saal-iconlist__mark { width: 32px; height: 32px; font-size: 14px; } .saal-iconlist--size-md .saal-iconlist__mark { width: 44px; height: 44px; font-size: 18px; } .saal-iconlist--size-lg .saal-iconlist__mark { width: 56px; height: 56px; font-size: 22px; } /* Icon shapes */ .saal-iconlist--shape-circle-soft .saal-iconlist__mark { background: color-mix(in srgb, var(--saal-il-accent) 12%, transparent); border-radius: 50%; } .saal-iconlist--shape-circle-filled .saal-iconlist__mark { background: var(--saal-il-accent); color: #fff; border-radius: 50%; } .saal-iconlist--shape-circle-outline .saal-iconlist__mark { background: transparent; border: 2px solid currentColor; border-radius: 50%; } .saal-iconlist--shape-square-soft .saal-iconlist__mark { background: color-mix(in srgb, var(--saal-il-accent) 12%, transparent); border-radius: 10px; } .saal-iconlist--shape-square-filled .saal-iconlist__mark { background: var(--saal-il-accent); color: #fff; border-radius: 10px; } .saal-iconlist--shape-circle-gradient .saal-iconlist__mark { background: linear-gradient(135deg, var(--saal-il-accent), color-mix(in srgb, var(--saal-il-accent) 40%, #ec4899)); color: #fff; border-radius: 50%; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--saal-il-accent) 60%, transparent); } .saal-iconlist--shape-inline .saal-iconlist__mark { width: auto; height: auto; background: transparent; } /* Body text */ .saal-iconlist__body { flex: 1 1 auto; padding-top: 2px; } .saal-iconlist__title { margin: 0 0 4px; font-size: clamp(16px, 1.1vw, 18px); font-weight: 600; line-height: 1.35; color: var(--saal-il-title); } .saal-iconlist__text { margin: 0; font-size: clamp(14px, 1vw, 15px); line-height: 1.55; color: var(--saal-il-text); } .saal-iconlist__link { color: inherit; text-decoration: none; transition: color .2s; } .saal-iconlist__link:hover { color: var(--saal-il-accent); } /* Hover lifts the icon slightly */ .saal-iconlist__item:hover .saal-iconlist__mark { transform: scale(1.06); } /* Connecting line between items (timeline style) */ .saal-iconlist--connector-solid .saal-iconlist__item:not(:last-child)::before, .saal-iconlist--connector-dashed .saal-iconlist__item:not(:last-child)::before, .saal-iconlist--connector-dotted .saal-iconlist__item:not(:last-child)::before { content: ""; position: absolute; left: 0; top: 50%; bottom: -50%; width: 2px; transform: translateY(0); pointer-events: none; z-index: 0; } .saal-iconlist--connector-solid .saal-iconlist__item::before { background: var(--saal-il-line); } .saal-iconlist--connector-dashed .saal-iconlist__item::before { background: repeating-linear-gradient(to bottom, var(--saal-il-line) 0 6px, transparent 6px 12px); } .saal-iconlist--connector-dotted .saal-iconlist__item::before { background: repeating-linear-gradient(to bottom, var(--saal-il-line) 0 2px, transparent 2px 6px); } /* Position the line to run through the center of the icon mark */ .saal-iconlist--size-sm.saal-iconlist--connector-solid .saal-iconlist__item::before, .saal-iconlist--size-sm.saal-iconlist--connector-dashed .saal-iconlist__item::before, .saal-iconlist--size-sm.saal-iconlist--connector-dotted .saal-iconlist__item::before { left: 15px; } .saal-iconlist--size-md.saal-iconlist--connector-solid .saal-iconlist__item::before, .saal-iconlist--size-md.saal-iconlist--connector-dashed .saal-iconlist__item::before, .saal-iconlist--size-md.saal-iconlist--connector-dotted .saal-iconlist__item::before { left: 21px; } .saal-iconlist--size-lg.saal-iconlist--connector-solid .saal-iconlist__item::before, .saal-iconlist--size-lg.saal-iconlist--connector-dashed .saal-iconlist__item::before, .saal-iconlist--size-lg.saal-iconlist--connector-dotted .saal-iconlist__item::before { left: 27px; } /* Stagger animations (CSS-only, scroll in via intersection observer fallback — always-in for now) */ .saal-iconlist--anim-fade-up .saal-iconlist__item, .saal-iconlist--anim-fade-right .saal-iconlist__item { opacity: 0; animation: saal-il-reveal .6s cubic-bezier(.2,.7,.2,1) forwards; } .saal-iconlist--anim-fade-up .saal-iconlist__item { animation-name: saal-il-reveal-up; } .saal-iconlist--anim-fade-right .saal-iconlist__item { animation-name: saal-il-reveal-right; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(1), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(1) { animation-delay: 0s; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(2), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(2) { animation-delay: .08s; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(3), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(3) { animation-delay: .16s; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(4), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(4) { animation-delay: .24s; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(5), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(5) { animation-delay: .32s; } .saal-iconlist--anim-fade-up .saal-iconlist__item:nth-child(n+6), .saal-iconlist--anim-fade-right .saal-iconlist__item:nth-child(n+6) { animation-delay: .4s; } @keyframes saal-il-reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes saal-il-reveal-right { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .saal-iconlist .saal-iconlist__item { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================================ Saal Split Heading — word-by-word reveal ============================================================================ */ .saal-splith { font-weight: 700; margin: 0; } .saal-splith__word { display: inline-block; opacity: 0; will-change: transform, opacity; } .saal-splith--fade-up .saal-splith__word { transform: translateY(28px); } .saal-splith--fade .saal-splith__word { } .saal-splith--slide-left .saal-splith__word { transform: translateX(-30px); } .saal-splith--clip-up .saal-splith__word { transform: translateY(100%); } .saal-splith--clip-up { overflow: hidden; line-height: 1; } .saal-splith.is-in .saal-splith__word { opacity: 1; transform: translate(0, 0); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { .saal-splith__word { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================================ Saal Milestone — counter ============================================================================ */ .saal-ms { display: flex; flex-direction: column; gap: 4px; } .saal-ms--align-center { text-align: center; align-items: center; } .saal-ms__icon { color: var(--saal-card-accent, var(--wpb-primary, #4a23d1)); font-size: 24px; margin-bottom: 8px; } .saal-ms__number { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--saal-ms-size, clamp(3rem, 7vw, 6rem)); font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .saal-ms__affix { font-weight: 700; opacity: .8; font-size: 0.7em; } .saal-ms__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-top: 6px; } .saal-ms__text { font-size: 14px; color: #64748b; margin: 6px 0 0; line-height: 1.55; max-width: 40ch; } .saal-ms--gradient .saal-ms__number, .saal-ms--gradient .saal-ms__affix { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ============================================================================ Saal Team Member ============================================================================ */ .saal-team { --saal-card-accent: var(--wpb-primary, #4a23d1); display: block; text-decoration: none; color: inherit; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; overflow: hidden; } .saal-team--radius-md { border-radius: 16px; } .saal-team--radius-sm { border-radius: 8px; } .saal-team--radius-lg { border-radius: 24px; } .saal-team--radius-pill { border-radius: 999px; } .saal-team--radius-none { border-radius: 0; } .saal-team:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.2); } .saal-team__media { position: relative; overflow: hidden; background: #f1f5f9; } .saal-team__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .saal-team--aspect-4-5 .saal-team__media { aspect-ratio: 4/5; } .saal-team--aspect-1-1 .saal-team__media { aspect-ratio: 1/1; } .saal-team--aspect-3-4 .saal-team__media { aspect-ratio: 3/4; } .saal-team:hover .saal-team__img { transform: scale(1.04); } .saal-team__body { padding: 20px 22px; } .saal-team__name { font-size: clamp(18px, 1.3vw, 20px); font-weight: 700; line-height: 1.25; margin: 0 0 4px; color: #0f172a; } .saal-team__role { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--saal-card-accent); } .saal-team__bio { font-size: 14px; line-height: 1.55; color: #64748b; margin: 10px 0 0; } .saal-team__socials { display: flex; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; } .saal-team__socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(15,23,42,.06); color: #0f172a; text-decoration: none; transition: background .2s, color .2s, transform .2s; } .saal-team__socials a:hover { background: var(--saal-card-accent); color: #fff; transform: translateY(-2px); } .saal-team__socials svg { width: 14px; height: 14px; } /* Overlay style */ .saal-team--overlay { position: relative; } .saal-team--overlay .saal-team__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.8) 100%); } .saal-team--overlay .saal-team__body { position: absolute; inset: auto 0 0 0; padding: 24px; color: #fff; z-index: 2; } .saal-team--overlay .saal-team__name, .saal-team--overlay .saal-team__bio { color: #fff; } .saal-team--overlay .saal-team__role { color: rgba(255,255,255,.82); } .saal-team--overlay .saal-team__socials a { background: rgba(255,255,255,.15); color: #fff; } /* Split style */ .saal-team--split { display: grid; grid-template-columns: 1fr 1.2fr; align-items: stretch; } .saal-team--split .saal-team__media { aspect-ratio: auto; height: 100%; } @media (max-width: 640px) { .saal-team--split { grid-template-columns: 1fr; } } /* Hover-reveal style */ .saal-team--hover-reveal .saal-team__reveal { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%); opacity: 0; transition: opacity .35s; color: #fff; } .saal-team--hover-reveal:hover .saal-team__reveal { opacity: 1; } .saal-team--hover-reveal .saal-team__reveal .saal-team__bio { color: rgba(255,255,255,.9); } /* ============================================================================ Saal Flip Box — 3D flip on hover ============================================================================ */ .saal-flip { perspective: 1400px; position: relative; } .saal-flip--radius-md .saal-flip__face { border-radius: 16px; } .saal-flip--radius-sm .saal-flip__face { border-radius: 8px; } .saal-flip--radius-lg .saal-flip__face { border-radius: 24px; } .saal-flip--radius-none .saal-flip__face { border-radius: 0; } .saal-flip__inner { position: relative; width: 100%; min-height: inherit; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.7,.2,1); } .saal-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px, 3vw, 40px); text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,.15); } .saal-flip__back { transform: rotateY(180deg); } /* Direction variants */ .saal-flip--dir-x .saal-flip__back { transform: rotateX(180deg); } .saal-flip--dir-x:hover .saal-flip__inner { transform: rotateX(180deg); } .saal-flip--dir-y:hover .saal-flip__inner { transform: rotateY(180deg); } .saal-flip--dir-cube .saal-flip__back { transform: rotateY(180deg) translateZ(0); } .saal-flip--dir-cube:hover .saal-flip__inner { transform: rotateY(180deg) scale(.97); } .saal-flip__icon { font-size: 36px; margin-bottom: 14px; } .saal-flip__title { font-size: clamp(20px, 1.5vw, 24px); font-weight: 700; margin: 0 0 10px; line-height: 1.25; } .saal-flip__text { font-size: 15px; line-height: 1.55; margin: 0; opacity: .85; } .saal-flip__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 10px 18px; background: rgba(255,255,255,.15); color: inherit; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; } .saal-flip__btn:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); } .saal-flip__btn svg { transition: transform .2s; } .saal-flip__btn:hover svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .saal-flip__inner { transition: none; } } /* ============================================================================ Saal Testimonial ============================================================================ */ .saal-t { --saal-card-accent: var(--wpb-primary, #4a23d1); margin: 0; padding: clamp(24px, 2.4vw, 36px); border-radius: 16px; transition: transform .3s, box-shadow .3s; } .saal-t--align-center { text-align: center; } .saal-t--card { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.06); } .saal-t--outlined { background: #fff; border: 1px solid rgba(15,23,42,.1); } .saal-t--filled { background: color-mix(in srgb, var(--saal-card-accent) 8%, #fff); } .saal-t--dark { background: #0f172a; color: #fff; } .saal-t--minimal { padding: 0; background: transparent; } .saal-t:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.18); } .saal-t--minimal:hover { transform: none; box-shadow: none; } .saal-t__stars { display: inline-flex; gap: 2px; margin-bottom: 14px; } .saal-t--align-center .saal-t__stars { justify-content: center; width: 100%; } .saal-t__star { color: rgba(15,23,42,.18); font-size: 18px; line-height: 1; } .saal-t__star.is-full, .saal-t__star.is-half { color: #fbbf24; } .saal-t__star.is-half { background: linear-gradient(90deg, #fbbf24 50%, rgba(15,23,42,.18) 50%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .saal-t--dark .saal-t__star { color: rgba(255,255,255,.18); } .saal-t__quote { margin: 0; position: relative; padding-left: 0; } .saal-t__mark { width: 32px; height: 32px; color: var(--saal-card-accent); opacity: .25; margin-bottom: 8px; display: block; } .saal-t--align-center .saal-t__mark { margin-left: auto; margin-right: auto; } .saal-t--minimal .saal-t__mark { width: 44px; height: 44px; } .saal-t__text { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; font-weight: 500; margin: 0; color: inherit; } .saal-t--minimal .saal-t__text { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; line-height: 1.4; } .saal-t__author { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .saal-t--align-center .saal-t__author { justify-content: center; } .saal-t__avatar-wrap { flex: 0 0 auto; } .saal-t__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; } .saal-t__meta { line-height: 1.3; } .saal-t__name { font-size: 15px; font-weight: 700; } .saal-t__role { font-size: 13px; opacity: .7; } /* ============================================================================ Saal Highlighted Text ============================================================================ */ .saal-hl { --saal-hl-color: hsl(48, 100%, 75%); display: inline-block; position: relative; } .saal-hl__text { position: relative; z-index: 1; display: inline-block; } /* Marker — a soft block behind the text */ .saal-hl--marker .saal-hl__text::before { content: ""; position: absolute; left: -4px; right: -4px; top: 12%; bottom: 12%; background: var(--saal-hl-color); z-index: -1; transform: skewX(-6deg) scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .saal-hl--marker.is-in .saal-hl__text::before, .saal-hl--marker:not(.saal-hl--scroll) .saal-hl__text::before { transform: skewX(-6deg) scaleX(1); } /* Underline — single animated line */ .saal-hl--underline .saal-hl__text::after, .saal-hl--underline-double .saal-hl__text::after, .saal-hl--wavy .saal-hl__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--saal-hl-color); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .saal-hl--underline.is-in .saal-hl__text::after, .saal-hl--underline-double.is-in .saal-hl__text::after, .saal-hl--wavy.is-in .saal-hl__text::after, .saal-hl--underline:not(.saal-hl--scroll) .saal-hl__text::after, .saal-hl--underline-double:not(.saal-hl--scroll) .saal-hl__text::after, .saal-hl--wavy:not(.saal-hl--scroll) .saal-hl__text::after { transform: scaleX(1); } .saal-hl--underline-double { text-decoration: underline; text-decoration-color: var(--saal-hl-color); text-decoration-thickness: 2px; text-underline-offset: 6px; } .saal-hl--wavy { text-decoration: wavy underline; text-decoration-color: var(--saal-hl-color); text-underline-offset: 4px; } /* Circle — hand-drawn circle around phrase */ .saal-hl--circle { padding: 0 .2em; } .saal-hl--circle::before { content: ""; position: absolute; inset: -6% -8%; border: 2px solid var(--saal-hl-color); border-radius: 50%; transform: rotate(-3deg) scale(.85); opacity: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; } .saal-hl--circle.is-in::before, .saal-hl--circle:not(.saal-hl--scroll)::before { transform: rotate(-2deg) scale(1); opacity: 1; } /* Strikethrough */ .saal-hl--strike .saal-hl__text::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: 2px; background: var(--saal-hl-color); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .saal-hl--strike.is-in .saal-hl__text::after, .saal-hl--strike:not(.saal-hl--scroll) .saal-hl__text::after { transform: scaleX(1); } /* Outlined */ .saal-hl--outline .saal-hl__text { -webkit-text-stroke: 1px var(--saal-hl-color); color: transparent; } @media (prefers-reduced-motion: reduce) { .saal-hl__text::before, .saal-hl__text::after, .saal-hl::before { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ============================================================================ Responsive tweaks ============================================================================ */ @media (max-width: 640px) { .saal-feature, .saal-stat--outlined, .saal-stat--filled { padding: 20px; } .saal-icon-row { gap: 12px; } .saal-icon-row__mark { width: 40px; height: 40px; font-size: 16px; } .saal-video__play { width: 64px; height: 64px; } .saal-cta__inner { padding: 40px 20px; } }