@fluid-theme/core 0.4.3

package/src/sections/footer.css

@@ -0,0 +1,283 @@
+/**
+ * Fluid Framework - Footer Sections
+ * @layer components
+ *
+ * Page-level footer layouts. Three variants via data-type attribute.
+ * Uses <footer> element with <nav> for link groups.
+ *
+ * Usage:
+ *   <!-- Simple (default) -->
+ *   <footer class="site-footer">
+ *     <div class="site-footer__inner">
+ *       <p class="site-footer__copyright">&copy; 2026 Company</p>
+ *       <nav class="site-footer__links" aria-label="Footer">
+ *         <a href="#">Privacy</a>
+ *         <a href="#">Terms</a>
+ *         <a href="#">Contact</a>
+ *       </nav>
+ *     </div>
+ *   </footer>
+ *
+ *   <!-- Standard multi-column -->
+ *   <footer class="site-footer" data-type="standard">
+ *     <div class="site-footer__grid">
+ *       <div class="site-footer__column">
+ *         <h3 class="site-footer__title">Company</h3>
+ *         <nav class="site-footer__links" aria-label="Company links">
+ *           <a href="#">About</a>
+ *           <a href="#">Careers</a>
+ *         </nav>
+ *       </div>
+ *       <div class="site-footer__column">
+ *         <h3 class="site-footer__title">Product</h3>
+ *         <nav class="site-footer__links" aria-label="Product links">
+ *           <a href="#">Features</a>
+ *           <a href="#">Pricing</a>
+ *         </nav>
+ *       </div>
+ *     </div>
+ *     <div class="site-footer__bottom">
+ *       <p class="site-footer__copyright">&copy; 2026 Company</p>
+ *     </div>
+ *   </footer>
+ *
+ *   <!-- Mega footer -->
+ *   <footer class="site-footer" data-type="mega">
+ *     <div class="site-footer__brand">
+ *       <h2>Brand Name</h2>
+ *       <p>A short tagline about the company.</p>
+ *       <div class="site-footer__social">
+ *         <a href="#" aria-label="Twitter"><svg>...</svg></a>
+ *         <a href="#" aria-label="GitHub"><svg>...</svg></a>
+ *       </div>
+ *     </div>
+ *     <div class="site-footer__grid">
+ *       <!-- columns -->
+ *     </div>
+ *     <div class="site-footer__bottom">
+ *       <p class="site-footer__copyright">&copy; 2026 Company</p>
+ *     </div>
+ *   </footer>
+ */
+
+@layer components {
+
+  /* ========================================
+     BASE FOOTER
+     ======================================== */
+
+  .site-footer {
+    --_footer-bg: var(--color-surface);
+    --_footer-text: var(--color-text-muted);
+    --_footer-border: var(--color-border-subtle);
+    --_footer-padding: var(--space-10);
+
+    background-color: var(--_footer-bg);
+    color: var(--_footer-text);
+    padding-block: var(--_footer-padding);
+    padding-inline: var(--space-5);
+    border-block-start: var(--border-width) solid var(--_footer-border);
+  }
+
+  .site-footer a {
+    color: var(--_footer-text);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .site-footer a:hover {
+    color: var(--color-text);
+  }
+
+  .site-footer a:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+
+  /* ========================================
+     SIMPLE (default)
+     Copyright + horizontal links
+     ======================================== */
+
+  .site-footer__inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+  }
+
+  .site-footer__copyright {
+    font-size: var(--font-size-sm);
+    margin: 0;
+  }
+
+  .site-footer:not([data-type]) .site-footer__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-5);
+    font-size: var(--font-size-sm);
+  }
+
+
+  /* ========================================
+     STANDARD
+     Multi-column grid with bottom bar
+     ======================================== */
+
+  .site-footer[data-type="standard"],
+  .site-footer[data-type="mega"] {
+    --_footer-padding: var(--space-16);
+  }
+
+  .site-footer__grid {
+    display: grid;
+    gap: var(--space-8);
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 12rem), 1fr)
+    );
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+  }
+
+  .site-footer__column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .site-footer__title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-semibold, 600);
+    color: var(--color-text);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wider);
+    margin: 0;
+    margin-block-end: var(--space-2);
+  }
+
+  .site-footer__column .site-footer__links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    font-size: var(--font-size-sm);
+  }
+
+  .site-footer__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+    margin-block-start: var(--space-10);
+    padding-block-start: var(--space-6);
+    border-block-start: var(--border-width) solid var(--_footer-border);
+    font-size: var(--font-size-sm);
+  }
+
+
+  /* ========================================
+     MEGA FOOTER
+     Brand section + columns + bottom bar
+     ======================================== */
+
+  .site-footer__brand {
+    max-inline-size: 20rem;
+    margin-inline: auto;
+    margin-block-end: var(--space-10);
+  }
+
+  .site-footer[data-type="mega"] .site-footer__brand {
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+    margin-block-end: var(--space-10);
+  }
+
+  .site-footer__brand h2 {
+    font-size: var(--font-size-xl);
+    font-weight: var(--weight-bold);
+    color: var(--color-text);
+    margin: 0;
+    margin-block-end: var(--space-2);
+  }
+
+  .site-footer__brand p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin: 0;
+    margin-block-end: var(--space-4);
+    max-inline-size: 20rem;
+  }
+
+  .site-footer__social {
+    display: flex;
+    gap: var(--space-3);
+  }
+
+  .site-footer__social a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    border-radius: var(--radius-full);
+    color: var(--color-text-muted);
+    background-color: color-mix(in oklch, var(--color-text) 8%, transparent);
+    transition:
+      color var(--duration-fast) var(--ease-fluid),
+      background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .site-footer__social a:hover {
+    color: var(--white);
+    background-color: var(--accent);
+  }
+
+  .site-footer__social svg {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+
+
+  /* ========================================
+     DARK VARIANT
+     Darker background for contrast with page
+     ======================================== */
+
+  .site-footer[data-dark] {
+    --_footer-bg: var(--theme-dark, var(--gray-15));
+    --_footer-text: var(--gray-60);
+    --_footer-border: var(--gray-20);
+  }
+
+  .site-footer[data-dark] a:hover {
+    color: var(--white);
+  }
+
+  .site-footer[data-dark] .site-footer__title {
+    color: var(--gray-80);
+  }
+
+  .site-footer[data-dark] .site-footer__brand h2 {
+    color: var(--white);
+  }
+
+
+  /* ========================================
+     ACCESSIBILITY
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .site-footer a,
+    .site-footer__social a {
+      transition: none;
+    }
+  }
+}

package/src/sections/stats.css

@@ -0,0 +1,234 @@
+/**
+ * Fluid Framework - Stats/Metrics Section
+ * @layer components
+ *
+ * Counter blocks for displaying key metrics, achievements, or numbers.
+ * Uses <dl> (description list) for semantic markup.
+ *
+ * Usage:
+ *   <section class="stats" aria-label="Key metrics">
+ *     <header class="stats__header">
+ *       <h2>By the numbers</h2>
+ *     </header>
+ *     <dl class="stats__grid">
+ *       <div class="stat">
+ *         <dd class="stat__value">10K+</dd>
+ *         <dt class="stat__label">Happy Users</dt>
+ *       </div>
+ *       <div class="stat">
+ *         <dd class="stat__value">99.9%</dd>
+ *         <dt class="stat__label">Uptime</dt>
+ *       </div>
+ *       <div class="stat">
+ *         <dd class="stat__value">50M</dd>
+ *         <dt class="stat__label">API Requests</dt>
+ *       </div>
+ *       <div class="stat">
+ *         <dd class="stat__value">4.9</dd>
+ *         <dt class="stat__label">Star Rating</dt>
+ *       </div>
+ *     </dl>
+ *   </section>
+ */
+
+@layer components {
+
+  /* ========================================
+     BASE STATS SECTION
+     ======================================== */
+
+  .stats {
+    padding-block: var(--space-16);
+    padding-inline: var(--space-5);
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+  }
+
+  .stats__header {
+    text-align: center;
+    max-inline-size: var(--container-md);
+    margin-inline: auto;
+    margin-block-end: var(--space-12);
+  }
+
+  .stats__header h2 {
+    font-size: var(--font-size-3xl);
+    font-weight: var(--weight-bold);
+    color: var(--color-text);
+    margin-block-end: var(--space-3);
+  }
+
+  .stats__header p {
+    font-size: var(--font-size-lg);
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     STATS GRID
+     ======================================== */
+
+  .stats__grid {
+    display: grid;
+    gap: var(--space-6);
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 10rem), 1fr)
+    );
+    margin: 0;
+    padding: 0;
+  }
+
+
+  /* ========================================
+     INDIVIDUAL STAT
+     ======================================== */
+
+  .stat {
+    --_stat-padding: var(--space-6);
+    --_stat-bg: var(--color-surface);
+    --_stat-border: var(--color-border-subtle);
+    --_stat-radius: var(--radius-lg);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--space-2);
+    padding: var(--_stat-padding);
+    background-color: var(--_stat-bg);
+    border: var(--border-width) solid var(--_stat-border);
+    border-radius: var(--_stat-radius);
+  }
+
+  .stat__value {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--weight-bold);
+    color: var(--accent);
+    line-height: 1.1;
+    margin: 0;
+  }
+
+  .stat__label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    font-weight: var(--weight-medium, 500);
+  }
+
+  .stat__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    font-size: var(--font-size-xl);
+    margin-block-end: var(--space-2);
+  }
+
+  .stat__icon svg {
+    inline-size: 1.5em;
+    block-size: 1.5em;
+    stroke: currentColor;
+    stroke-width: 2;
+  }
+
+
+  /* ========================================
+     BORDERLESS VARIANT
+     Minimal stat blocks without cards
+     ======================================== */
+
+  .stats[data-variant="borderless"] .stat {
+    --_stat-bg: transparent;
+    --_stat-border: transparent;
+  }
+
+  .stats[data-variant="borderless"] .stat__value {
+    font-size: var(--font-size-5xl);
+  }
+
+
+  /* ========================================
+     DIVIDER VARIANT
+     Stats separated by vertical lines
+     ======================================== */
+
+  .stats[data-variant="divider"] .stats__grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .stats[data-variant="divider"] .stat {
+    --_stat-bg: transparent;
+    --_stat-border: transparent;
+    border-radius: 0;
+    padding-inline: var(--space-8);
+    border-inline-end: var(--border-width) solid var(--color-border-subtle);
+  }
+
+  .stats[data-variant="divider"] .stat:last-child {
+    border-inline-end: none;
+  }
+
+  @media (max-width: 40rem) {
+    .stats[data-variant="divider"] .stat {
+      border-inline-end: none;
+      border-block-end: var(--border-width) solid var(--color-border-subtle);
+      padding-inline: var(--space-6);
+      padding-block: var(--space-4);
+    }
+
+    .stats[data-variant="divider"] .stat:last-child {
+      border-block-end: none;
+    }
+  }
+
+
+  /* ========================================
+     COUNT-UP ANIMATION
+     Plays once when section enters viewport
+     ======================================== */
+
+  @keyframes stat-fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .stats[data-animate] .stat {
+    animation: stat-fade-up var(--duration-slow) var(--ease-settle) both;
+  }
+
+  .stats[data-animate] .stat:nth-child(2) {
+    animation-delay: 100ms;
+  }
+
+  .stats[data-animate] .stat:nth-child(3) {
+    animation-delay: 200ms;
+  }
+
+  .stats[data-animate] .stat:nth-child(4) {
+    animation-delay: 300ms;
+  }
+
+  .stats[data-animate] .stat:nth-child(5) {
+    animation-delay: 400ms;
+  }
+
+
+  /* ========================================
+     ACCESSIBILITY
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .stats[data-animate] .stat {
+      animation: none;
+    }
+  }
+}

package/src/sections/team.css

@@ -0,0 +1,181 @@
+/**
+ * Fluid Framework - Team Section
+ * @layer components
+ *
+ * Grid of team member cards with avatar, name, role, and optional bio.
+ * Integrates with the existing avatar component.
+ *
+ * Usage:
+ *   <section class="team">
+ *     <header class="team__header">
+ *       <h2>Our Team</h2>
+ *       <p>The people behind the product.</p>
+ *     </header>
+ *     <div class="team__grid">
+ *       <article class="team-member">
+ *         <img class="avatar avatar--xl" src="..." alt="Jane Doe">
+ *         <h3 class="team-member__name">Jane Doe</h3>
+ *         <p class="team-member__role">CEO & Co-founder</p>
+ *         <p class="team-member__bio">Short bio about Jane.</p>
+ *         <nav class="team-member__social" aria-label="Jane's social links">
+ *           <a href="#" aria-label="Twitter"><svg>...</svg></a>
+ *           <a href="#" aria-label="LinkedIn"><svg>...</svg></a>
+ *         </nav>
+ *       </article>
+ *     </div>
+ *   </section>
+ */
+
+@layer components {
+
+  /* ========================================
+     BASE TEAM SECTION
+     ======================================== */
+
+  .team {
+    padding-block: var(--space-16);
+    padding-inline: var(--space-5);
+    max-inline-size: var(--container-xl);
+    margin-inline: auto;
+  }
+
+  .team__header {
+    text-align: center;
+    max-inline-size: var(--container-md);
+    margin-inline: auto;
+    margin-block-end: var(--space-12);
+  }
+
+  .team__header h2 {
+    font-size: var(--font-size-3xl);
+    font-weight: var(--weight-bold);
+    color: var(--color-text);
+    margin-block-end: var(--space-3);
+  }
+
+  .team__header p {
+    font-size: var(--font-size-lg);
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     TEAM GRID
+     ======================================== */
+
+  .team__grid {
+    display: grid;
+    gap: var(--space-8);
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 14rem), 1fr)
+    );
+  }
+
+
+  /* ========================================
+     TEAM MEMBER CARD
+     ======================================== */
+
+  .team-member {
+    --_member-bg: var(--color-surface);
+    --_member-border: var(--color-border-subtle);
+    --_member-radius: var(--radius-xl);
+    --_member-padding: var(--space-6);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--space-2);
+    padding: var(--_member-padding);
+    background-color: var(--_member-bg);
+    border: var(--border-width) solid var(--_member-border);
+    border-radius: var(--_member-radius);
+    transition:
+      box-shadow var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-normal) var(--ease-settle);
+  }
+
+  .team-member:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+  }
+
+  .team-member .avatar {
+    margin-block-end: var(--space-2);
+  }
+
+  .team-member__name {
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-semibold, 600);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .team-member__role {
+    font-size: var(--font-size-sm);
+    color: var(--accent);
+    margin: 0;
+  }
+
+  .team-member__bio {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    line-height: var(--leading-relaxed);
+    margin: 0;
+    margin-block-start: var(--space-2);
+  }
+
+
+  /* ========================================
+     SOCIAL LINKS
+     ======================================== */
+
+  .team-member__social {
+    display: flex;
+    gap: var(--space-2);
+    margin-block-start: var(--space-3);
+  }
+
+  .team-member__social a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border-radius: var(--radius-full);
+    color: var(--color-text-muted);
+    transition: color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .team-member__social a:hover {
+    color: var(--accent);
+  }
+
+  .team-member__social a:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .team-member__social svg {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+
+  /* ========================================
+     ACCESSIBILITY
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .team-member,
+    .team-member__social a {
+      transition: none;
+    }
+
+    .team-member:hover {
+      transform: none;
+    }
+  }
+}