@easy-web/content-blocks 1.0.0

package/src/components/HeaderFlyout.astro

@@ -0,0 +1,373 @@
+---
+/**
+ * HeaderFlyout – responsive site header with dropdown flyout navigation.
+ * Pure Astro component with scoped vanilla JS for mobile and flyout behavior.
+ */
+import type { NavItem } from '@easy-web/cms-adapters';
+import ThemeToggle from './ThemeToggle.astro';
+import LanguageSwitch from './LanguageSwitch.astro';
+
+interface Props {
+  siteName: string;
+  navItems: NavItem[];
+  currentLang: string;
+  pathname: string;
+  /** Explicit alternate locale URL to pass to LanguageSwitch. */
+  alternateHref?: string;
+  /** Accessible label for the mobile menu toggle button. */
+  menuLabel?: string;
+  /** Optional logo URL. When provided, renders an <img> in the brand area instead of site name text. */
+  logo?: string;
+}
+
+const { siteName, navItems, currentLang, pathname, alternateHref, menuLabel = 'Toggle navigation menu', logo } = Astro.props;
+const navId = `ew-header-flyout-nav-${Math.random().toString(36).slice(2, 9)}`;
+const dropdownIdPrefix = `${navId}-dropdown`;
+---
+
+<header class="ew-header-flyout" data-testid="header-flyout">
+  <div class="ew-header-flyout__inner">
+    <a href={currentLang === 'de' ? '/' : `/${currentLang}/`} class="ew-header-flyout__brand">
+      {logo ? <img src={logo} alt={siteName} class="ew-header-flyout__logo" /> : siteName}
+    </a>
+
+    <button
+      type="button"
+      class="ew-header-flyout__menu-btn"
+      aria-label={menuLabel}
+      aria-expanded="false"
+      aria-controls={navId}
+      data-testid="mobile-menu-toggle"
+    >
+      <svg class="ew-header-flyout__menu-icon ew-header-flyout__menu-icon--open" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <line x1="3" y1="12" x2="21" y2="12"></line>
+        <line x1="3" y1="18" x2="21" y2="18"></line>
+      </svg>
+      <svg class="ew-header-flyout__menu-icon ew-header-flyout__menu-icon--close" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+
+    <nav id={navId} class="ew-header-flyout__nav" aria-label="Main navigation">
+      <ul class="ew-header-flyout__links">
+        {navItems.map((item, index) => {
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          const dropdownId = `${dropdownIdPrefix}-${index}`;
+          return (
+            <li class="ew-header-flyout__item">
+              {hasChildren ? (
+                <div class="ew-header-flyout__dropdown-wrapper">
+                  <button
+                    type="button"
+                    class:list={[
+                      'ew-header-flyout__link',
+                      'ew-header-flyout__trigger',
+                      { 'ew-header-flyout__link--active': pathname === item.href }
+                    ]}
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-controls={dropdownId}
+                  >
+                    <span>{item.label}</span>
+                    <svg class="ew-header-flyout__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M4 6l4 4 4-4"></path>
+                    </svg>
+                  </button>
+                  <ul id={dropdownId} class="ew-header-flyout__dropdown" role="menu">
+                    {item.children?.map((child) => (
+                      <li class="ew-header-flyout__dropdown-item" role="none">
+                        <a
+                          href={child.href}
+                          class:list={[
+                            'ew-header-flyout__dropdown-link',
+                            { 'ew-header-flyout__dropdown-link--active': pathname === child.href }
+                          ]}
+                          role="menuitem"
+                        >
+                          {child.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ) : (
+                <a href={item.href} class:list={['ew-header-flyout__link', { 'ew-header-flyout__link--active': pathname === item.href }]}> 
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      <div class="ew-header-flyout__actions">
+        <slot name="actions">
+          <ThemeToggle />
+          <LanguageSwitch currentLang={currentLang} pathname={pathname} alternateHref={alternateHref} />
+        </slot>
+      </div>
+    </nav>
+  </div>
+</header>
+
+<style>
+  .ew-header-flyout {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--ew-surface);
+    border-bottom: 1px solid var(--ew-border);
+  }
+  .ew-header-flyout__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: var(--ew-space-3) var(--ew-space-5);
+  }
+  .ew-header-flyout__brand {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-lg);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    text-decoration: none;
+    letter-spacing: -0.01em;
+  }
+  .ew-header-flyout__brand:hover {
+    color: var(--ew-primary);
+  }
+  .ew-header-flyout__logo {
+    height: 1.5rem;
+    width: auto;
+    display: block;
+  }
+
+  .ew-header-flyout__menu-btn {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--ew-on-surface);
+    cursor: pointer;
+    padding: var(--ew-space-1);
+  }
+  .ew-header-flyout__menu-btn:focus-visible,
+  .ew-header-flyout__link:focus-visible,
+  .ew-header-flyout__dropdown-link:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+  .ew-header-flyout__menu-icon--close { display: none; }
+
+  .ew-header-flyout__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--ew-space-5);
+  }
+  .ew-header-flyout__links {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--ew-space-1);
+  }
+  .ew-header-flyout__item {
+    margin: 0;
+  }
+  .ew-header-flyout__link {
+    display: flex;
+    align-items: center;
+    gap: var(--ew-space-1);
+    padding: var(--ew-space-2) var(--ew-space-3);
+    border: none;
+    border-radius: var(--ew-radius-md);
+    background: transparent;
+    color: var(--ew-muted);
+    cursor: pointer;
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    font-weight: 500;
+    line-height: var(--ew-leading-normal);
+    text-decoration: none;
+  }
+  .ew-header-flyout__link:hover,
+  .ew-header-flyout__link[aria-expanded="true"] {
+    color: var(--ew-on-surface);
+    background: var(--ew-surface-muted);
+  }
+  .ew-header-flyout__link--active {
+    color: var(--ew-on-surface);
+    background: var(--ew-surface-muted);
+  }
+  .ew-header-flyout__trigger[aria-expanded="true"] .ew-header-flyout__chevron {
+    transform: rotate(180deg);
+  }
+  .ew-header-flyout__chevron {
+    flex: none;
+  }
+  .ew-header-flyout__dropdown-wrapper {
+    position: relative;
+  }
+  .ew-header-flyout__dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 12rem;
+    background: var(--ew-surface);
+    border: 1px solid var(--ew-border);
+    border-radius: var(--ew-radius-md);
+    padding: var(--ew-space-2);
+    list-style: none;
+    margin: 0;
+    z-index: 200;
+  }
+  .ew-header-flyout__dropdown[data-open] {
+    display: block;
+  }
+  .ew-header-flyout__dropdown-link {
+    display: block;
+    padding: var(--ew-space-2) var(--ew-space-3);
+    border-radius: var(--ew-radius-sm);
+    color: var(--ew-muted);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    font-weight: 500;
+    text-decoration: none;
+  }
+  .ew-header-flyout__dropdown-link:hover,
+  .ew-header-flyout__dropdown-link--active {
+    color: var(--ew-on-surface);
+    background: var(--ew-surface-muted);
+  }
+  .ew-header-flyout__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ew-space-2);
+    border-left: 1px solid var(--ew-border);
+    padding-left: var(--ew-space-3);
+    margin-left: var(--ew-space-1);
+  }
+
+  @media (max-width: 768px) {
+    .ew-header-flyout__menu-btn {
+      display: flex;
+    }
+    .ew-header-flyout__nav {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      align-items: stretch;
+      background: var(--ew-surface);
+      border-bottom: 1px solid var(--ew-border);
+      padding: var(--ew-space-4) var(--ew-space-5);
+      gap: var(--ew-space-4);
+    }
+    .ew-header-flyout__nav[data-open] {
+      display: flex;
+    }
+    .ew-header-flyout__links {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--ew-space-1);
+    }
+    .ew-header-flyout__link {
+      width: 100%;
+      justify-content: space-between;
+    }
+    .ew-header-flyout__dropdown {
+      position: static;
+      min-width: 0;
+      margin-top: var(--ew-space-1);
+      border-radius: var(--ew-radius-md);
+    }
+    .ew-header-flyout__actions {
+      border-left: none;
+      padding-left: 0;
+      margin-left: 0;
+      padding-top: var(--ew-space-3);
+      border-top: 1px solid var(--ew-border);
+    }
+    .ew-header-flyout__menu-btn[aria-expanded="true"] .ew-header-flyout__menu-icon--open { display: none; }
+    .ew-header-flyout__menu-btn[aria-expanded="true"] .ew-header-flyout__menu-icon--close { display: block; }
+  }
+</style>
+
+<script>
+  function initHeader(headerEl: Element) {
+    const menuBtn = headerEl.querySelector('.ew-header-flyout__menu-btn') as HTMLButtonElement | null;
+    const nav = headerEl.querySelector('.ew-header-flyout__nav') as HTMLElement | null;
+
+    if (menuBtn && nav) {
+      menuBtn.addEventListener('click', () => {
+        const isOpen = menuBtn.getAttribute('aria-expanded') === 'true';
+        menuBtn.setAttribute('aria-expanded', String(!isOpen));
+        isOpen ? nav.removeAttribute('data-open') : nav.setAttribute('data-open', '');
+      });
+    }
+
+    const closeAllDropdowns = () => {
+      headerEl.querySelectorAll('.ew-header-flyout__trigger').forEach((trigger) => {
+        const wrapper = trigger.closest('.ew-header-flyout__dropdown-wrapper');
+        const dropdown = wrapper?.querySelector('.ew-header-flyout__dropdown');
+        trigger.setAttribute('aria-expanded', 'false');
+        dropdown?.removeAttribute('data-open');
+      });
+    };
+
+    headerEl.querySelectorAll('.ew-header-flyout__trigger').forEach((trigger) => {
+      const button = trigger as HTMLButtonElement;
+      const wrapper = button.closest('.ew-header-flyout__dropdown-wrapper');
+      const dropdown = wrapper?.querySelector('.ew-header-flyout__dropdown') as HTMLElement | null;
+      if (!wrapper || !dropdown) return;
+
+      const open = () => {
+        closeAllDropdowns();
+        button.setAttribute('aria-expanded', 'true');
+        dropdown.setAttribute('data-open', '');
+      };
+      const close = () => {
+        button.setAttribute('aria-expanded', 'false');
+        dropdown.removeAttribute('data-open');
+      };
+
+      wrapper.addEventListener('mouseenter', open);
+      wrapper.addEventListener('mouseleave', close);
+      wrapper.addEventListener('focusin', open);
+      wrapper.addEventListener('focusout', (event) => {
+        const nextTarget = event.relatedTarget as Node | null;
+        if (!nextTarget || !wrapper.contains(nextTarget)) close();
+      });
+
+      button.addEventListener('click', () => {
+        button.getAttribute('aria-expanded') === 'true' ? close() : open();
+      });
+      button.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          open();
+        }
+        if (event.key === 'Escape') {
+          close();
+        }
+      });
+      dropdown.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+          close();
+          button.focus();
+        }
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!headerEl.contains(event.target as Node)) closeAllDropdowns();
+    });
+  }
+
+  document.querySelectorAll('.ew-header-flyout').forEach(initHeader);
+</script>

package/src/components/HeaderHideOnScroll.astro

@@ -0,0 +1,237 @@
+---
+import ThemeToggle from './ThemeToggle.astro';
+import LanguageSwitch from './LanguageSwitch.astro';
+
+interface Props {
+  siteName: string;
+  navItems: Array<{ label: string; href: string }>;
+  currentLang: string;
+  pathname: string;
+  /** Explicit alternate locale URL to pass to LanguageSwitch. */
+  alternateHref?: string;
+  /** Accessible label for the mobile menu toggle button. */
+  menuLabel?: string;
+  /** Optional logo URL. When provided, renders an <img> in the brand area instead of site name text. */
+  logo?: string;
+}
+
+const { siteName, navItems, currentLang, pathname, alternateHref, menuLabel = 'Toggle navigation menu', logo } = Astro.props;
+const navId = `ew-header-hos-nav-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<header class="ew-header-hide-on-scroll" data-testid="header-hide-on-scroll">
+  <div class="ew-header-hide-on-scroll__inner">
+    <a href={currentLang === 'de' ? '/' : `/${currentLang}/`} class="ew-header-hide-on-scroll__brand">
+      {logo ? <img src={logo} alt={siteName} class="ew-header-hide-on-scroll__logo" /> : siteName}
+    </a>
+
+    <button
+      type="button"
+      class="ew-header-hide-on-scroll__menu-btn"
+      aria-label={menuLabel}
+      aria-expanded="false"
+      aria-controls={navId}
+      data-testid="mobile-menu-toggle"
+    >
+      <svg class="ew-header-hide-on-scroll__menu-icon ew-header-hide-on-scroll__menu-icon--open" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <line x1="3" y1="6" x2="21" y2="6"></line>
+        <line x1="3" y1="12" x2="21" y2="12"></line>
+        <line x1="3" y1="18" x2="21" y2="18"></line>
+      </svg>
+      <svg class="ew-header-hide-on-scroll__menu-icon ew-header-hide-on-scroll__menu-icon--close" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+
+    <nav id={navId} class="ew-header-hide-on-scroll__nav" aria-label="Main navigation">
+      <ul class="ew-header-hide-on-scroll__links">
+        {navItems.map((item) => (
+          <li>
+            <a href={item.href} class:list={['ew-header-hide-on-scroll__link', { 'ew-header-hide-on-scroll__link--active': pathname === item.href }]}> 
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <div class="ew-header-hide-on-scroll__actions">
+        <slot name="actions">
+          <ThemeToggle />
+          <LanguageSwitch currentLang={currentLang} pathname={pathname} alternateHref={alternateHref} />
+        </slot>
+      </div>
+    </nav>
+  </div>
+</header>
+
+<style>
+  .ew-header-hide-on-scroll {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    transition: transform 0.3s ease;
+    background: var(--ew-surface);
+    border-bottom: 1px solid var(--ew-border);
+  }
+  .ew-header-hide-on-scroll--hidden {
+    transform: translateY(-100%);
+  }
+  .ew-header-hide-on-scroll__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 72rem;
+    margin: 0 auto;
+    padding: var(--ew-space-3) var(--ew-space-5);
+  }
+  .ew-header-hide-on-scroll__brand {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-lg);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    text-decoration: none;
+    letter-spacing: -0.01em;
+  }
+  .ew-header-hide-on-scroll__brand:hover {
+    color: var(--ew-primary);
+  }
+  .ew-header-hide-on-scroll__logo {
+    height: 1.5rem;
+    width: auto;
+    display: block;
+  }
+
+  .ew-header-hide-on-scroll__menu-btn {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--ew-on-surface);
+    cursor: pointer;
+    padding: var(--ew-space-1);
+  }
+  .ew-header-hide-on-scroll__menu-btn:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+  .ew-header-hide-on-scroll__menu-icon--close { display: none; }
+
+  .ew-header-hide-on-scroll__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--ew-space-5);
+  }
+  .ew-header-hide-on-scroll__links {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--ew-space-1);
+  }
+  .ew-header-hide-on-scroll__link {
+    display: block;
+    padding: var(--ew-space-2) var(--ew-space-3);
+    border-radius: var(--ew-radius-md);
+    color: var(--ew-muted);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    font-weight: 500;
+    text-decoration: none;
+  }
+  .ew-header-hide-on-scroll__link:hover {
+    color: var(--ew-on-surface);
+    background: var(--ew-surface-muted);
+  }
+  .ew-header-hide-on-scroll__link--active {
+    color: var(--ew-on-surface);
+    background: var(--ew-surface-muted);
+  }
+  .ew-header-hide-on-scroll__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ew-space-2);
+    border-left: 1px solid var(--ew-border);
+    padding-left: var(--ew-space-3);
+    margin-left: var(--ew-space-1);
+  }
+
+  @media (max-width: 768px) {
+    .ew-header-hide-on-scroll__menu-btn {
+      display: flex;
+    }
+    .ew-header-hide-on-scroll__nav {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      background: var(--ew-surface);
+      border-bottom: 1px solid var(--ew-border);
+      padding: var(--ew-space-4) var(--ew-space-5);
+      gap: var(--ew-space-4);
+    }
+    .ew-header-hide-on-scroll__nav[data-open] {
+      display: flex;
+    }
+    .ew-header-hide-on-scroll__links {
+      flex-direction: column;
+      gap: var(--ew-space-1);
+    }
+    .ew-header-hide-on-scroll__actions {
+      border-left: none;
+      padding-left: 0;
+      margin-left: 0;
+      padding-top: var(--ew-space-3);
+      border-top: 1px solid var(--ew-border);
+    }
+    .ew-header-hide-on-scroll__menu-btn[aria-expanded="true"] .ew-header-hide-on-scroll__menu-icon--open { display: none; }
+    .ew-header-hide-on-scroll__menu-btn[aria-expanded="true"] .ew-header-hide-on-scroll__menu-icon--close { display: block; }
+  }
+</style>
+
+<script>
+  function initHeader(headerEl: Element) {
+    const applyPadding = () => {
+      document.body.style.paddingTop = `${headerEl.getBoundingClientRect().height}px`;
+    };
+    applyPadding();
+
+    let lastScrollY = window.scrollY;
+    let ticking = false;
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY;
+          if (currentScrollY > lastScrollY && currentScrollY > 80) {
+            headerEl.classList.add('ew-header-hide-on-scroll--hidden');
+          } else {
+            headerEl.classList.remove('ew-header-hide-on-scroll--hidden');
+          }
+          lastScrollY = currentScrollY;
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', applyPadding);
+
+    const resizeObserver = 'ResizeObserver' in window ? new ResizeObserver(applyPadding) : null;
+    resizeObserver?.observe(headerEl);
+
+    const btn = headerEl.querySelector('.ew-header-hide-on-scroll__menu-btn') as HTMLButtonElement | null;
+    const nav = headerEl.querySelector('.ew-header-hide-on-scroll__nav') as HTMLElement | null;
+    if (btn && nav) {
+      btn.addEventListener('click', () => {
+        const isOpen = btn.getAttribute('aria-expanded') === 'true';
+        btn.setAttribute('aria-expanded', String(!isOpen));
+        isOpen ? nav.removeAttribute('data-open') : nav.setAttribute('data-open', '');
+      });
+    }
+  }
+  document.querySelectorAll('.ew-header-hide-on-scroll').forEach(initHeader);
+</script>

package/src/components/Hero.astro

@@ -0,0 +1,78 @@
+---
+/**
+ * Hero – prominent page banner with title, optional subtitle, and optional CTA.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  title: string;
+  subtitle?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+  variant?: 'centered' | 'left-aligned';
+}
+
+const { title, subtitle, ctaLabel, ctaHref, variant = 'centered' } = Astro.props;
+---
+
+<section class:list={['ew-hero', `ew-hero--${variant}`]}>
+  <div class="ew-hero__inner">
+    <h1 class="ew-hero__title">{title}</h1>
+    {subtitle && <p class="ew-hero__subtitle">{subtitle}</p>}
+    {ctaLabel && ctaHref && (
+      <a href={ctaHref} class="ew-hero__cta">{ctaLabel}</a>
+    )}
+  </div>
+</section>
+
+<style>
+  .ew-hero {
+    background: var(--ew-surface-muted);
+    padding: var(--ew-space-9) var(--ew-space-5);
+  }
+  .ew-hero__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-hero--centered {
+    text-align: center;
+  }
+  .ew-hero--centered .ew-hero__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .ew-hero--left-aligned {
+    text-align: left;
+  }
+  .ew-hero__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-3xl);
+    font-weight: 800;
+    line-height: var(--ew-leading-tight);
+    color: var(--ew-on-surface);
+    margin: 0;
+  }
+  .ew-hero__subtitle {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    line-height: var(--ew-leading-normal);
+    color: var(--ew-muted);
+    margin: var(--ew-space-4) 0 0;
+    max-width: 40rem;
+  }
+  .ew-hero__cta {
+    display: inline-block;
+    margin-top: var(--ew-space-6);
+    padding: var(--ew-space-3) var(--ew-space-6);
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--ew-radius-md);
+  }
+  .ew-hero__cta:hover {
+    opacity: 0.9;
+  }
+</style>