ferst-core 0.1.0 → 0.2.0

package/components/recipes/Banner.astro

@@ -0,0 +1,134 @@
+---
+/**
+ * Banner — a Level-2 recipe: a full-bleed feature band with a fixed/parallax
+ * background image, a legibility scrim, and a floating "shaded" content card
+ * over it. Composes Heading + Button.
+ *
+ * Parallax is pure CSS (`background-attachment: fixed`) — no JS, GPU-composited.
+ * It's auto-disabled on touch/coarse pointers (where `fixed` is janky or ignored,
+ * e.g. iOS) and under `prefers-reduced-motion`, both falling back to a clean
+ * `scroll` background. The card uses the surface tokens (radius, shadow) so it
+ * matches every other surface, and a backdrop blur for the "shaded glass" look.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+
+interface Props {
+  image: string;
+  eyebrow?: string;
+  title: string;
+  text?: string;
+  cta?: { label: string; href: string };
+  overlay?: number;
+  align?: 'start' | 'center' | 'end';
+  parallax?: boolean;
+}
+const { image, eyebrow, title, text, cta, overlay = 50, align = 'start', parallax = true } = Astro.props;
+const scrim = overlay / 100;
+---
+
+<section
+  class="b-banner"
+  data-align={align}
+  data-parallax={parallax ? 'true' : 'false'}
+  style={`--banner-image: url('${image}'); --banner-scrim: ${scrim};`}
+>
+  <div class="b-banner__scrim" aria-hidden="true"></div>
+  <div class="b-banner__card">
+    {eyebrow && <p class="b-banner__eyebrow">{eyebrow}</p>}
+    <Heading text={title} level={2} align="start" />
+    {text && <p class="b-banner__text">{text}</p>}
+    {cta && (
+      <div class="b-banner__cta">
+        <Button href={cta.href} variant="cta">{cta.label}</Button>
+      </div>
+    )}
+  </div>
+</section>
+
+<style>
+  .b-banner {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    padding: clamp(3rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem);
+    min-height: min(60vh, 34rem);
+    border-radius: var(--radius);
+    overflow: hidden;
+    background-image: var(--banner-image);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  /* Parallax: pin the image to the viewport so it slides under the content.
+     Only on fine pointers with motion allowed — `fixed` is ignored/janky on
+     touch (iOS) and unwelcome under reduced-motion. */
+  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    .b-banner[data-parallax='true'] {
+      background-attachment: fixed;
+    }
+  }
+
+  .b-banner[data-align='start'] { justify-items: start; }
+  .b-banner[data-align='center'] { justify-items: center; text-align: center; }
+  .b-banner[data-align='end'] { justify-items: end; }
+
+  .b-banner__scrim {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: linear-gradient(to top, rgba(8, 10, 18, calc(var(--banner-scrim) + 0.2)), rgba(8, 10, 18, var(--banner-scrim)));
+  }
+
+  /* The floating "shaded glass" card. */
+  .b-banner__card {
+    max-width: 34rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: clamp(1.5rem, 3vw, 2.25rem);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
+    border: var(--card-border);
+    box-shadow: var(--shadow-lg);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    color: var(--fg);
+  }
+  .b-banner__eyebrow {
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    color: var(--gold);
+  }
+  .b-banner__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.65;
+  }
+  .b-banner__cta {
+    margin-top: 0.25rem;
+  }
+
+  /* Multi-layer parallax: the background is pinned (fixed), and the card itself
+     drifts at a different rate as the banner scrolls through view — two layers,
+     two speeds. Native scroll-timeline, so no JS; off under reduced-motion or
+     where unsupported (the card just sits still). Transforming the card is safe:
+     it's not an ancestor of the fixed background. */
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .b-banner__card {
+        animation: b-banner-drift linear both;
+        animation-timeline: view();
+        animation-range: cover;
+        will-change: transform;
+      }
+      @keyframes b-banner-drift {
+        from { transform: translateY(48px); }
+        to { transform: translateY(-48px); }
+      }
+    }
+  }
+</style>

package/components/recipes/Bento.astro

@@ -0,0 +1,138 @@
+---
+/** Bento — a Level-2 recipe: an asymmetric grid where each card picks a `size`
+ *  (sm / wide / tall / lg) and a `variant` look (surface / filled / gradient /
+ *  image). Dense auto-flow packs them like a Japanese bento box. Composes Icon;
+ *  radius/stroke/shadow come from the global surface tokens. */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+interface Item {
+  size?: 'sm' | 'wide' | 'tall' | 'lg';
+  variant?: 'surface' | 'filled' | 'gradient' | 'image';
+  icon?: string;
+  eyebrow?: string;
+  title: string;
+  text?: string;
+  href?: string;
+  image?: { src: string; alt?: string };
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  items?: Item[];
+}
+const { title, intro, items = [] } = Astro.props;
+---
+
+<section class="b-bento">
+  {(title || intro) && (
+    <div class="b-bento__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-bento__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-bento__grid">
+    {items.map((item) => {
+      const Tag = item.href ? 'a' : 'div';
+      const style = item.variant === 'image' && item.image ? `--bento-image: url('${item.image.src}')` : undefined;
+      return (
+        <Tag class="b-bento__item" data-size={item.size ?? 'sm'} data-variant={item.variant ?? 'surface'} href={item.href} style={style}>
+          {item.icon && isIconKey(item.icon) && (
+            <span class="b-bento__icon"><Icon name={item.icon} size={24} /></span>
+          )}
+          {item.eyebrow && <span class="b-bento__eyebrow">{item.eyebrow}</span>}
+          <h3 class="b-bento__title">{item.title}</h3>
+          {item.text && <p class="b-bento__text">{item.text}</p>}
+        </Tag>
+      );
+    })}
+  </div>
+</section>
+
+<style>
+  .b-bento {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-bento__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-bento__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-bento__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  @media (min-width: 48em) {
+    .b-bento__grid {
+      grid-template-columns: repeat(2, 1fr);
+      grid-auto-rows: minmax(11rem, auto);
+      grid-auto-flow: dense;
+    }
+    .b-bento__item[data-size='wide'] { grid-column: span 2; }
+    .b-bento__item[data-size='tall'] { grid-row: span 2; }
+    .b-bento__item[data-size='lg'] { grid-column: span 2; grid-row: span 2; }
+  }
+  @media (min-width: 64em) {
+    .b-bento__grid { grid-template-columns: repeat(4, 1fr); }
+  }
+
+  .b-bento__item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 1.5rem;
+    border-radius: var(--radius);
+    overflow: hidden;
+    isolation: isolate;
+    text-decoration: none;
+    color: var(--fg);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  }
+  .b-bento__item[data-variant='surface'] { background: var(--bg-surface); border: var(--card-border); box-shadow: var(--shadow-md); }
+  .b-bento__item[data-variant='filled'] { background: var(--gold-light); }
+  .b-bento__item[data-variant='gradient'] { background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold))); color: var(--text-light); }
+  .b-bento__item[data-variant='image'] { color: #fff; justify-content: flex-end; min-height: 11rem; }
+  .b-bento__item[data-variant='image']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-image: linear-gradient(to top, rgba(8,10,18,0.82), rgba(8,10,18,0.15)), var(--bento-image);
+    background-size: cover;
+    background-position: center;
+  }
+  a.b-bento__item:hover { transform: translateY(-3px); }
+  a.b-bento__item[data-variant='surface']:hover { box-shadow: var(--shadow-lg); }
+  a.b-bento__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) { .b-bento__item { transition: none; } a.b-bento__item:hover { transform: none; } }
+
+  .b-bento__icon { display: inline-flex; color: var(--gold); }
+  .b-bento__item[data-variant='gradient'] .b-bento__icon,
+  .b-bento__item[data-variant='image'] .b-bento__icon { color: currentColor; }
+  .b-bento__eyebrow {
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--gold);
+  }
+  .b-bento__item[data-variant='gradient'] .b-bento__eyebrow,
+  .b-bento__item[data-variant='image'] .b-bento__eyebrow { color: currentColor; opacity: 0.85; }
+  .b-bento__title { margin: 0; font-size: 1.15rem; color: inherit; }
+  .b-bento__text { margin: 0; line-height: 1.55; color: var(--muted); }
+  .b-bento__item[data-variant='gradient'] .b-bento__text,
+  .b-bento__item[data-variant='image'] .b-bento__text,
+  .b-bento__item[data-variant='filled'] .b-bento__text { color: inherit; opacity: 0.92; }
+</style>

package/components/recipes/ContactForm.astro

@@ -0,0 +1,172 @@
+---
+/**
+ * ContactForm — a Level-2 recipe: a labelled, accessible form in a centred
+ * column (optional heading + intro, a list of fields, a submit, optional note).
+ * Composes the Heading + Button primitives.
+ *
+ * `action` is optional. The core ships no backend, so with no action this
+ * renders a standard semantic form that a client later wires to their own
+ * endpoint (or a form service). Every colour reads a token, so the form
+ * recolours with the brand like every other block.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+
+interface Field {
+  name: string;
+  label: string;
+  type?: 'text' | 'email' | 'tel' | 'textarea';
+  required?: boolean;
+  placeholder?: string;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  action?: string;
+  method?: 'post' | 'get';
+  submitLabel?: string;
+  note?: string;
+  fields?: Field[];
+}
+const {
+  title,
+  intro,
+  action,
+  method = 'post',
+  submitLabel = 'Send message',
+  note,
+  fields = [],
+} = Astro.props;
+---
+
+<section class="b-contact-form">
+  {(title || intro) && (
+    <div class="b-contact-form__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-contact-form__intro">{intro}</p>}
+    </div>
+  )}
+  <form class="b-contact-form__form" action={action} method={method}>
+    {fields.map((field) => {
+      const id = `cf-${field.name}`;
+      const type = field.type ?? 'text';
+      return (
+        <div class="b-contact-form__field">
+          <label class="b-contact-form__label" for={id}>
+            {field.label}
+            {field.required && <span class="b-contact-form__req" aria-hidden="true"> *</span>}
+          </label>
+          {type === 'textarea' ? (
+            <textarea id={id} name={field.name} rows="5" required={field.required} placeholder={field.placeholder}></textarea>
+          ) : (
+            <input id={id} type={type} name={field.name} required={field.required} placeholder={field.placeholder} />
+          )}
+        </div>
+      );
+    })}
+    <div class="b-contact-form__action">
+      <Button type="submit" variant="cta">{submitLabel}</Button>
+    </div>
+    {note && <p class="b-contact-form__note">{note}</p>}
+  </form>
+</section>
+
+<style>
+  .b-contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 40rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-contact-form__head {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-contact-form__intro {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-contact-form__form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.1rem;
+  }
+  .b-contact-form__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+  .b-contact-form__label {
+    font-family: var(--font-body);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--fg);
+  }
+  .b-contact-form__req {
+    color: var(--gold);
+  }
+  .b-contact-form__form input,
+  .b-contact-form__form textarea {
+    font: inherit;
+    font-size: 1rem;
+    color: var(--fg);
+    background: var(--field-bg, var(--bg-surface));
+    border: var(--field-border, 1px solid var(--border));
+    border-radius: var(--field-radius, var(--radius-sm));
+    padding: 0.7rem 0.85rem;
+    width: 100%;
+    box-sizing: border-box;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  /* Site-wide input TREATMENT — chosen once (a `data-field` attribute on <html>,
+     like the theme), applied to every field. Boxed is the default above; these
+     override the field tokens for the other two looks. */
+  :global(html[data-field='filled']) .b-contact-form__form input,
+  :global(html[data-field='filled']) .b-contact-form__form textarea {
+    background: var(--bg-section);
+    border-color: transparent;
+  }
+  :global(html[data-field='underline']) .b-contact-form__form input,
+  :global(html[data-field='underline']) .b-contact-form__form textarea {
+    background: transparent;
+    border: none;
+    border-bottom: 1.5px solid var(--border);
+    border-radius: 0;
+    padding-inline: 0;
+  }
+  :global(html[data-field='underline']) .b-contact-form__form input:focus,
+  :global(html[data-field='underline']) .b-contact-form__form textarea:focus {
+    border-bottom-color: var(--gold);
+    box-shadow: none;
+  }
+  .b-contact-form__form textarea {
+    resize: vertical;
+    min-height: 7rem;
+  }
+  .b-contact-form__form input::placeholder,
+  .b-contact-form__form textarea::placeholder {
+    color: var(--muted);
+    opacity: 0.7;
+  }
+  .b-contact-form__form input:focus,
+  .b-contact-form__form textarea:focus {
+    outline: none;
+    border-color: var(--gold);
+    box-shadow: 0 0 0 3px var(--gold-light);
+  }
+  .b-contact-form__action {
+    margin-top: 0.25rem;
+  }
+  .b-contact-form__note {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+</style>

package/components/recipes/Cta.astro

@@ -0,0 +1,83 @@
+---
+/** CTA — a Level-2 recipe: a centred call-to-action band (heading + optional
+ *  text + a single button), composing the Heading + Button primitives. */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+
+interface Props {
+  title: string;
+  text?: string;
+  cta: { label: string; href: string };
+  background?: 'muted' | 'accent';
+}
+const { title, text, cta, background = 'accent' } = Astro.props;
+---
+
+<section class="b-cta" data-bg={background}>
+  <div class="b-cta__inner">
+    <Heading text={title} level={2} align="center" />
+    {text && <p class="b-cta__text">{text}</p>}
+    <div class="b-cta__action">
+      <Button href={cta.href} variant="primary">{cta.label}</Button>
+    </div>
+  </div>
+</section>
+
+<style>
+  .b-cta {
+    padding-block: 3rem;
+  }
+  .b-cta[data-bg='muted'] {
+    background: var(--bg-section);
+  }
+  .b-cta[data-bg='accent'] {
+    background: var(--gold-light);
+  }
+  /* Mesh: a soft drifting brand gradient behind the text (static under
+     reduced-motion). Low opacity + blur keeps the copy readable. */
+  .b-cta[data-bg='mesh'] {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    background: var(--bg);
+  }
+  .b-cta[data-bg='mesh']::before {
+    content: '';
+    position: absolute;
+    inset: -25%;
+    z-index: -1;
+    background:
+      radial-gradient(35% 50% at 18% 20%, var(--gold), transparent 70%),
+      radial-gradient(35% 50% at 82% 25%, var(--accent-2, var(--gold)), transparent 70%),
+      radial-gradient(45% 55% at 60% 90%, var(--gold-light), transparent 70%);
+    opacity: 0.35;
+    filter: blur(50px);
+    animation: b-cta-mesh 22s ease-in-out infinite alternate;
+  }
+  @keyframes b-cta-mesh {
+    from { transform: translate3d(-3%, -2%, 0) scale(1.06); }
+    to { transform: translate3d(3%, 4%, 0) scale(1.18); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .b-cta[data-bg='mesh']::before { animation: none; }
+  }
+  .b-cta__inner {
+    max-width: var(--max);
+    margin-inline: auto;
+    padding-inline: 1rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+  .b-cta__text {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-cta__action {
+    margin-top: 0.5rem;
+  }
+</style>

package/components/recipes/Faq.astro

@@ -0,0 +1,80 @@
+---
+/** FAQ — a Level-2 recipe: an optional heading over a list of expandable
+ *  question/answer items. Uses native <details>/<summary> — accessible and
+ *  interactive with zero JavaScript. Composes the Heading primitive. */
+import Heading from '../blocks/Heading.astro';
+
+interface Props {
+  title?: string;
+  items?: { question: string; answer: string }[];
+}
+const { title, items = [] } = Astro.props;
+---
+
+<section class="b-faq">
+  {title && <Heading text={title} level={2} align="center" />}
+  <div class="b-faq__list">
+    {items.map((item) => (
+      <details class="b-faq__item">
+        <summary class="b-faq__q">{item.question}</summary>
+        <div class="b-faq__a"><p>{item.answer}</p></div>
+      </details>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-faq {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding-inline: 1rem;
+  }
+  .b-faq__list {
+    max-width: var(--max);
+    margin-inline: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .b-faq__item {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 0.25rem 1rem;
+    background: var(--bg-surface);
+  }
+  .b-faq__q {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--fg);
+    padding: 0.75rem 0;
+    list-style: none;
+    display: flex;
+    align-items: baseline;
+  }
+  .b-faq__q::-webkit-details-marker {
+    display: none;
+  }
+  .b-faq__q::before {
+    content: '+';
+    color: var(--gold);
+    font-weight: 700;
+    margin-right: 0.6rem;
+  }
+  .b-faq__item[open] .b-faq__q::before {
+    content: '\2013'; /* en dash */
+  }
+  .b-faq__q:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-faq__a {
+    padding: 0 0 0.9rem;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-faq__a p {
+    margin: 0;
+  }
+</style>