npm - @sociallane/elements - Versions diffs - 1.0.0 - Mend

@sociallane/elements 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (767) hide show

package/assets/css/tailwind.css ADDED Viewed

@@ -0,0 +1,740 @@
+/**
+ * Tailwind CSS v4 Entry Point
+ *
+ * Main CSS file for SocialLane Elements.
+ * @see https://tailwindcss.com/docs/theme
+ */
+/* Fonts first so @import precedes all other rules in output */
+@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@100..900&display=swap');
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@import './lenis.css';
+/* Class-based dark mode: Nav theme switcher toggles .dark on <html> */
+@custom-variant dark (&:where(.dark, .dark *));
+/* Explicitly include PHP templates (Tailwind v4 auto-detects, but ensure plugin root) */
+@source '../../';
+/*
+|--------------------------------------------------------------------------
+| Theme Variables (CSS-first configuration)
+|--------------------------------------------------------------------------
+*/
+@theme {
+  /* Blue Chill (SocialLane Primary) */
+  --color-blue-chill-50: oklch(0.984 0.012 192.5);
+  --color-blue-chill-100: oklch(0.964 0.034 192.4);
+  --color-blue-chill-200: oklch(0.937 0.063 192.3);
+  --color-blue-chill-300: oklch(0.882 0.118 192.2);
+  --color-blue-chill-400: oklch(0.827 0.165 192.9);
+  --color-blue-chill-500: oklch(0.778 0.138 192.7);
+  --color-blue-chill-600: oklch(0.652 0.119 192.5);
+  --color-blue-chill-700: oklch(0.523 0.098 192.4);
+  --color-blue-chill-800: oklch(0.443 0.075 192.3);
+  --color-blue-chill-900: oklch(0.382 0.058 192.2);
+  --color-blue-chill-950: oklch(0.279 0.042 192.1);
+  /* Web Orange (SocialLane Secondary) */
+  --color-web-orange-50: oklch(0.984 0.038 95.8);
+  --color-web-orange-100: oklch(0.958 0.088 95.5);
+  --color-web-orange-200: oklch(0.912 0.158 95.2);
+  --color-web-orange-300: oklch(0.858 0.188 94.9);
+  --color-web-orange-400: oklch(0.818 0.178 85.2);
+  --color-web-orange-500: oklch(0.768 0.168 70.5);
+  --color-web-orange-600: oklch(0.652 0.158 55.2);
+  --color-web-orange-700: oklch(0.532 0.138 45.1);
+  --color-web-orange-800: oklch(0.448 0.108 48.2);
+  --color-web-orange-900: oklch(0.398 0.088 55.3);
+  --color-web-orange-950: oklch(0.268 0.068 45.5);
+  /* Primary - dark gray (emphasis, buttons, links) */
+  --color-primary: oklch(0.45 0 0);
+  --color-primary-light: oklch(0.65 0 0);
+  --color-primary-dark: oklch(0.25 0 0);
+  /* Secondary - mid gray (borders, secondary UI) */
+  --color-secondary: oklch(0.55 0 0);
+  --color-secondary-light: oklch(0.75 0 0);
+  --color-secondary-dark: oklch(0.35 0 0);
+  /* Neutral - backgrounds and text */
+  --color-neutral: oklch(0.55 0 0);
+  --color-neutral-light: oklch(0.97 0 0);
+  --color-neutral-dark: oklch(0.2 0 0);
+  /* Fonts: headings = Bricolage Grotesque, body/buttons = Inter */
+  --font-heading: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  /* Typography (used by .prose-content) */
+  --text-base: 1rem;
+  --leading-normal: 1.5;
+  --font-weight-semibold: 600;
+  /* Animations */
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-slide-up: slide-up 0.3s ease-out;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes slide-up {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes sl-logo-carousel-scroll {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+}
+/*
+|--------------------------------------------------------------------------
+| Base Styles
+|--------------------------------------------------------------------------
+*/
+@layer base {
+  /* Body: light/dark background and text so page reacts to Nav theme switcher (html.dark) */
+  body {
+    @apply bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100;
+  }
+  /* No underlines on links by default; prose-content restores for body copy only */
+  a {
+    text-decoration: none;
+  }
+  :focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 2px;
+  }
+  :focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+  .dark {
+    --color-neutral-light: oklch(0.22 0 0);
+    --color-neutral-dark: oklch(0.92 0 0);
+  }
+}
+/*
+|--------------------------------------------------------------------------
+| Custom Utilities (v4 @utility directive)
+|--------------------------------------------------------------------------
+*/
+@utility sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+/*
+|--------------------------------------------------------------------------
+| Component Styles (sr-only-focusable, prose-content)
+|--------------------------------------------------------------------------
+*/
+@layer components {
+  /* Testimonials: masonry – left/right uniform, middle variable height */
+  .sl-masonry-col-uniform {
+    display: flex;
+    flex-direction: column;
+  }
+  .sl-masonry-col-uniform > * {
+    flex: 1 1 0;
+    min-height: 0;
+  }
+  /* Testimonials: bento grid - responsive, stacked on mobile */
+  @media (max-width: 767px) {
+    .sl-testimonials-bento > * {
+      grid-column: 1 !important;
+      grid-row: auto !important;
+    }
+  }
+  /* Bento grid: bar chart and code block */
+  .sl-bento-bars {
+    min-height: 2rem;
+  }
+  .sl-bento-code-block pre {
+    max-height: 12rem;
+  }
+  /* Logo grid row carousel: autoplay when more than 6 logos */
+  .sl-logo-row-carousel__track {
+    animation: sl-logo-carousel-scroll 40s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sl-logo-row-carousel__track {
+      animation: none;
+    }
+    .sl-logo-row-carousel {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: thin;
+    }
+  }
+  .sr-only-focusable {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 1rem;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+  .prose-content {
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    color: var(--color-neutral-dark);
+  }
+  .prose-content h1,
+  .prose-content h2,
+  .prose-content h3 {
+    font-family: var(--font-heading);
+    font-weight: var(--font-weight-semibold);
+  }
+  .prose-content a {
+    color: var(--color-primary);
+  }
+  /* Underline only for links in body copy (e.g. inside p), not in headings or nav/buttons */
+  .prose-content a:hover {
+    text-decoration: underline;
+  }
+  /* No underlines on links inside headings */
+  .prose-content h1 a,
+  .prose-content h2 a,
+  .prose-content h3 a,
+  .prose-content h4 a,
+  .prose-content h5 a,
+  .prose-content h6 a {
+    text-decoration: none;
+  }
+  .prose-content h1 a:hover,
+  .prose-content h2 a:hover,
+  .prose-content h3 a:hover,
+  .prose-content h4 a:hover,
+  .prose-content h5 a:hover,
+  .prose-content h6 a:hover {
+    text-decoration: none;
+  }
+  /* Force no underlines in nav (overrides theme link styles) */
+  .sl-nav a,
+  .sl-nav a:hover,
+  .sl-nav a:focus {
+    text-decoration: none;
+  }
+  /* Hero Collage: subtle grid overlay on section */
+  .sl-hero-collage-bg {
+    background-image:
+      linear-gradient(to right, rgb(0 0 0 / 0.03) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(0 0 0 / 0.03) 1px, transparent 1px);
+    background-size: 2rem 2rem;
+  }
+  .dark .sl-hero-collage-bg {
+    background-image:
+      linear-gradient(to right, rgb(255 255 255 / 0.06) 1px, transparent 1px),
+      linear-gradient(to bottom, rgb(255 255 255 / 0.06) 1px, transparent 1px);
+  }
+  /* Intro Pattern: subtle repeating rounded slanted rectangles */
+  .sl-bg-pattern-intro {
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4d4d4' stroke-width='0.5' opacity='0.6'%3E%3Crect x='2' y='2' width='12' height='8' rx='2' transform='rotate(-12 8 6)'/%3E%3Crect x='22' y='12' width='14' height='7' rx='2' transform='rotate(8 29 15.5)'/%3E%3Crect x='38' y='4' width='10' height='6' rx='1.5' transform='rotate(-6 43 7)'/%3E%3Crect x='8' y='28' width='11' height='6' rx='1.5' transform='rotate(10 13.5 31)'/%3E%3Crect x='32' y='32' width='13' height='7' rx='2' transform='rotate(-8 38.5 35.5)'/%3E%3Crect x='48' y='26' width='8' height='5' rx='1' transform='rotate(5 52 28.5)'/%3E%3C/g%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 60px 60px;
+  }
+  .dark .sl-bg-pattern-intro {
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23757575' stroke-width='0.4' opacity='0.35'%3E%3Crect x='2' y='2' width='12' height='8' rx='2' transform='rotate(-12 8 6)'/%3E%3Crect x='22' y='12' width='14' height='7' rx='2' transform='rotate(8 29 15.5)'/%3E%3Crect x='38' y='4' width='10' height='6' rx='1.5' transform='rotate(-6 43 7)'/%3E%3Crect x='8' y='28' width='11' height='6' rx='1.5' transform='rotate(10 13.5 31)'/%3E%3Crect x='32' y='32' width='13' height='7' rx='2' transform='rotate(-8 38.5 35.5)'/%3E%3Crect x='48' y='26' width='8' height='5' rx='1' transform='rotate(5 52 28.5)'/%3E%3C/g%3E%3C/svg%3E");
+  }
+  /*
+   * Newsletter: Gravity Forms reset and styling
+   * Tailwind Forms provides base form reset; these override GF-specific styles.
+   */
+  .sl-newsletter-form .gform_wrapper {
+    margin: 0;
+    padding: 0;
+  }
+  h2.gform_title {
+    display: none;
+  }
+  .sl-newsletter-form .gform_wrapper form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  @media (min-width: 640px) {
+    .sl-newsletter-form .gform_wrapper form {
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: center;
+    }
+  }
+  .sl-newsletter-form .gform_body {
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    min-width: 0;
+  }
+  .sl-newsletter-form .gform_footer {
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+  }
+  .sl-newsletter-form .gform_fields {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+  .sl-newsletter-form .gfield {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+  }
+  .sl-newsletter-form .gfield_label,
+  .sl-newsletter-form .gfield_description,
+  .sl-newsletter-form .gfield_required {
+    display: none;
+  }
+  .sl-newsletter-form .ginput_container {
+    margin: 0;
+  }
+  /* Light theme (default): form inputs and button */
+  .sl-newsletter-form input[type='text'],
+  .sl-newsletter-form input[type='email'] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    background-color: var(--color-neutral-light);
+    border: 1px solid var(--color-secondary-light);
+    border-radius: 0.5rem;
+    color: var(--color-neutral-dark);
+  }
+  .sl-newsletter-form input[type='text']::placeholder,
+  .sl-newsletter-form input[type='email']::placeholder {
+    color: var(--color-secondary-dark);
+  }
+  .sl-newsletter-form input[type='text']:focus,
+  .sl-newsletter-form input[type='email']:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 0;
+  }
+  .sl-newsletter-form input[type='submit'],
+  .sl-newsletter-form button[type='submit'] {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    background-color: var(--color-primary);
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .sl-newsletter-form input[type='submit']:hover,
+  .sl-newsletter-form button[type='submit']:hover {
+    background-color: var(--color-primary-dark);
+  }
+  .sl-newsletter-form input[type='submit']:focus,
+  .sl-newsletter-form button[type='submit']:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 2px;
+  }
+  /* Dark theme: Nav theme switcher adds .dark on html */
+  .dark .sl-newsletter-form input[type='text'],
+  .dark .sl-newsletter-form input[type='email'] {
+    background-color: var(--color-primary-dark);
+    border-color: var(--color-secondary);
+    color: var(--color-neutral-light);
+  }
+  .dark .sl-newsletter-form input[type='text']::placeholder,
+  .dark .sl-newsletter-form input[type='email']::placeholder {
+    color: var(--color-secondary);
+  }
+  /* Card layout: form row left-aligned, email input with envelope icon */
+  .sl-newsletter-form--card .gform_wrapper form {
+    justify-content: flex-start;
+  }
+  .sl-newsletter-form--card input[type='email'] {
+    padding-left: 2.75rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23717171'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 0.75rem center;
+    background-size: 1.25rem 1.25rem;
+  }
+  .dark .sl-newsletter-form--card input[type='email'] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a3a3a3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
+  }
+  /*
+   * Contact Form: Gravity Forms overrides (Tailwind form overrides)
+   * Labels visible; inputs/textarea dark grey bg, white text; primary button.
+   */
+  .sl-contact-form .gform_wrapper {
+    margin: 0;
+    padding: 0;
+  }
+  .sl-contact-form .gform_title {
+    display: none;
+  }
+  .sl-contact-form .gform_wrapper form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+  .sl-contact-form .gform_body,
+  .sl-contact-form .gform_footer {
+    margin: 0;
+    padding: 0;
+  }
+  .sl-contact-form .gform_fields {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem 1.25rem;
+  }
+  @media (min-width: 640px) {
+    .sl-contact-form .gform_fields {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  .sl-contact-form .gfield.gfield--width-full,
+  .sl-contact-form .gfield[data-field-type="textarea"] {
+    grid-column: 1 / -1;
+  }
+  .sl-contact-form .gfield {
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+  .sl-contact-form .gfield_label {
+    display: block;
+    margin-bottom: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+  .sl-contact-form .gfield_description,
+  .sl-contact-form .gfield_required {
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+  }
+  .sl-contact-form .ginput_container {
+    margin: 0;
+  }
+  /* Light: inputs and textarea */
+  .sl-contact-form input[type='text'],
+  .sl-contact-form input[type='email'],
+  .sl-contact-form input[type='url'],
+  .sl-contact-form input[type='tel'],
+  .sl-contact-form input[type='number'],
+  .sl-contact-form select,
+  .sl-contact-form textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-family: var(--font-body);
+    background-color: var(--color-neutral-light);
+    border: 1px solid var(--color-secondary-light);
+    border-radius: 0.5rem;
+    color: var(--color-neutral-dark);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .sl-contact-form textarea {
+    min-height: 7rem;
+    resize: vertical;
+  }
+  .sl-contact-form input::placeholder,
+  .sl-contact-form textarea::placeholder {
+    color: var(--color-secondary-dark);
+  }
+  .sl-contact-form input:focus,
+  .sl-contact-form select:focus,
+  .sl-contact-form textarea:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 0;
+  }
+  .sl-contact-form .gfield_label {
+    color: oklch(0.2 0 0);
+  }
+  .sl-contact-form input[type='submit'],
+  .sl-contact-form button[type='submit'] {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: var(--font-body);
+    background-color: var(--color-primary);
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  .sl-contact-form input[type='submit']:hover,
+  .sl-contact-form button[type='submit']:hover {
+    background-color: var(--color-primary-dark);
+  }
+  .sl-contact-form input[type='submit']:focus,
+  .sl-contact-form button[type='submit']:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 2px;
+  }
+  /* Dark theme: contact form */
+  .dark .sl-contact-form .gfield_label {
+    color: var(--color-neutral-light);
+  }
+  .dark .sl-contact-form input[type='text'],
+  .dark .sl-contact-form input[type='email'],
+  .dark .sl-contact-form input[type='url'],
+  .dark .sl-contact-form input[type='tel'],
+  .dark .sl-contact-form input[type='number'],
+  .dark .sl-contact-form select,
+  .dark .sl-contact-form textarea {
+    background-color: var(--color-primary-dark);
+    border-color: var(--color-secondary);
+    color: var(--color-neutral-light);
+  }
+  .dark .sl-contact-form input::placeholder,
+  .dark .sl-contact-form textarea::placeholder {
+    color: var(--color-secondary);
+  }
+  /*
+   * CTA Notify: Gravity Forms layout + styling via Tailwind @apply (GF markup not editable)
+   */
+  .sl-cta-notify-form .gform_wrapper {
+    @apply m-0 p-0;
+  }
+  .sl-cta-notify-form .gform_title {
+    @apply hidden;
+  }
+  .sl-cta-notify-form .gform_wrapper form {
+    @apply flex flex-col gap-3 items-stretch sm:flex-row sm:justify-center sm:items-stretch sm:gap-2;
+  }
+  .sl-cta-notify-form .gform_body,
+  .sl-cta-notify-form .gform_footer {
+    @apply m-0 p-0;
+  }
+  .sl-cta-notify-form .gform_fields {
+    @apply list-none m-0 p-0 flex flex-1 min-w-0 max-w-80 sm:max-w-none;
+  }
+  .sl-cta-notify-form .gfield {
+    @apply flex flex-1 min-w-0 m-0 p-0;
+  }
+  .sl-cta-notify-form .gfield_label,
+  .sl-cta-notify-form .gfield_description,
+  .sl-cta-notify-form .gfield_required {
+    @apply hidden;
+  }
+  .sl-cta-notify-form .ginput_container {
+    @apply m-0;
+  }
+  .sl-cta-notify-form input[type='email'],
+  .sl-cta-notify-form input[type='text'] {
+    @apply w-full px-4 py-3 text-base leading-normal font-sans bg-neutral-800 border border-neutral-600 rounded-lg text-neutral-100 placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-0;
+  }
+  .sl-cta-notify-form input[type='submit'],
+  .sl-cta-notify-form button[type='submit'] {
+    @apply px-6 py-3 text-base font-semibold font-sans bg-white text-neutral-900 border-0 rounded-lg cursor-pointer whitespace-nowrap shrink-0 hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900;
+  }
+  /*
+   * FAQ: smooth accordion open/close and answer content (links, buttons)
+   */
+  .faq-answer-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-out;
+  }
+  .faq-details[open] .faq-answer-wrapper {
+    grid-template-rows: 1fr;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .faq-answer-wrapper {
+      transition: none;
+    }
+  }
+  .faq-answer-content a {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  .faq-answer-content a:hover {
+    text-decoration-thickness: 2px;
+  }
+  .faq-answer-content a:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 2px;
+  }
+  .faq-answer-content .button,
+  .faq-answer-content a.button,
+  .faq-answer-content .wp-block-button__link,
+  .faq-answer-content button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    background-color: var(--color-primary);
+    color: white;
+    border: none;
+  }
+  .faq-answer-content .button:hover,
+  .faq-answer-content a.button:hover,
+  .faq-answer-content .wp-block-button__link:hover,
+  .faq-answer-content button:hover {
+    text-decoration: none;
+    background-color: var(--color-primary-dark);
+    color: white;
+  }
+  .faq-answer-content .button:focus,
+  .faq-answer-content a.button:focus,
+  .faq-answer-content .wp-block-button__link:focus,
+  .faq-answer-content button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+    outline-offset: 2px;
+  }
+  /* Hero Overlay: slider slide visibility and transition */
+  .hero-overlay__slide {
+    transition: opacity 0.4s ease-out;
+    z-index: 0;
+  }
+  .hero-overlay__slide--hidden {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+  .hero-overlay__slide--active {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+    z-index: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero-overlay__slide {
+      transition: none;
+    }
+  }
+  /* Card Hover Reveal: collapsible content collapses to height 0 */
+  [data-sl-hover-reveal-collapsible] {
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-sl-hover-reveal-collapsible] {
+      height: auto;
+      overflow: visible;
+      opacity: 1;
+      transform: none;
+    }
+  }
+  /*
+   * Split Text Masked Reveal Animation
+   * GSAP SplitText with mask: true adds wrapper elements with overflow: clip.
+   * These styles ensure proper rendering and fallback for reduced motion.
+   */
+  [data-sl-split] {
+    /* Prevent kerning shifts when text is split into individual elements */
+    font-kerning: none;
+    text-rendering: optimizeSpeed;
+  }
+  /* SplitText mask wrappers (auto-generated by GSAP when mask option is used) */
+  .sl-split-line,
+  .sl-split-word,
+  .sl-split-char {
+    will-change: transform, opacity;
+  }
+  /* Initial state: elements start hidden below the mask (translateY 100%) */
+  [data-sl-split] .sl-split-line,
+  [data-sl-split] .sl-split-word,
+  [data-sl-split] .sl-split-char {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  /* Reduced motion: skip animations, show text immediately */
+  @media (prefers-reduced-motion: reduce) {
+    [data-sl-split] .sl-split-line,
+    [data-sl-split] .sl-split-word,
+    [data-sl-split] .sl-split-char {
+      opacity: 1 !important;
+      transform: none !important;
+    }
+  }
+}