@fluid-theme/core 0.4.3

package/src/components/card.css

@@ -0,0 +1,650 @@
+/**
+ * Fluid Framework - Card Component
+ * @layer components
+ *
+ * Cards are containers that group related content.
+ * They provide subtle elevation and visual boundaries.
+ * Uses container queries for truly responsive behavior.
+ *
+ * Usage:
+ *   <article class="card">...</article>
+ *   <div class="card" data-variant="elevated">...</div>
+ *   <article class="card" data-variant="outlined">...</article>
+ *   <a href="#" class="card" data-interactive>Clickable card</a>
+ *
+ * Structure (optional):
+ *   <article class="card">
+ *     <img class="card__media" src="..." alt="...">
+ *     <div class="card__content">
+ *       <h3 class="card__title">Title</h3>
+ *       <p class="card__description">Description</p>
+ *     </div>
+ *     <footer class="card__footer">Actions</footer>
+ *   </article>
+ */
+
+@layer components {
+  /* Base card */
+  .card {
+    /* Container for queries - only when explicitly enabled */
+    container-name: card;
+
+    /* Layout */
+    display: flex;
+    flex-direction: column;
+
+    /* Prevent collapse in grid/flex layouts */
+    min-inline-size: 0;
+
+    /* Visual */
+    background-color: var(--_card-bg, var(--color-surface-raised));
+    border: var(--border-width) solid var(--_card-border, var(--color-border-subtle));
+    border-radius: var(--radius-card, var(--radius-xl));
+
+    /* Overflow: clip media but allow focus rings and shadows to paint */
+    overflow: clip;
+    overflow-clip-margin: 4px;
+
+    /* Transitions */
+    transition:
+      box-shadow var(--duration-normal) var(--ease-fluid),
+      border-color var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-normal) var(--ease-settle);
+  }
+
+  /* Enable container queries only when needed */
+  .card[data-container] {
+    container-type: inline-size;
+  }
+
+
+  /* ========================================
+     VARIANTS
+     Different visual treatments
+     ======================================== */
+
+  /* Elevated - floating appearance */
+  .card[data-variant="elevated"] {
+    --_card-border: transparent;
+    box-shadow: var(--shadow-md);
+  }
+
+  .card[data-variant="elevated"]:hover {
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Dark mode: use accent glow since shadows are barely visible on dark */
+  @media (prefers-color-scheme: dark) {
+    .card[data-variant="elevated"] {
+      box-shadow:
+        0 0 0 1px oklch(from var(--accent) l c h / 0.15),
+        0 4px 20px oklch(from var(--accent) l c h / 0.1);
+    }
+
+    .card[data-variant="elevated"]:hover {
+      box-shadow:
+        0 0 0 1px oklch(from var(--accent) l c h / 0.25),
+        0 8px 30px oklch(from var(--accent) l c h / 0.15);
+    }
+  }
+
+  /* Also support explicit dark theme */
+  [data-theme="dark"] .card[data-variant="elevated"] {
+    box-shadow:
+      0 0 0 1px oklch(from var(--accent) l c h / 0.15),
+      0 4px 20px oklch(from var(--accent) l c h / 0.1);
+  }
+
+  [data-theme="dark"] .card[data-variant="elevated"]:hover {
+    box-shadow:
+      0 0 0 1px oklch(from var(--accent) l c h / 0.25),
+      0 8px 30px oklch(from var(--accent) l c h / 0.15);
+  }
+
+  /* Outlined - border emphasis */
+  .card[data-variant="outlined"] {
+    --_card-bg: transparent;
+    --_card-border: var(--color-border);
+  }
+
+  /* Ghost - minimal, content-focused */
+  .card[data-variant="ghost"] {
+    --_card-bg: transparent;
+    --_card-border: transparent;
+  }
+
+  /* Filled - solid background */
+  .card[data-variant="filled"] {
+    --_card-bg: var(--color-surface);
+    --_card-border: transparent;
+  }
+
+
+  /* ========================================
+     INTERACTIVE CARDS
+     Clickable/hoverable cards
+     ======================================== */
+
+  .card[data-interactive],
+  a.card {
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .card[data-interactive]:hover,
+  a.card:hover {
+    --_card-border: var(--accent);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .card[data-interactive]:active,
+  a.card:active {
+    transform: scale(0.99);
+  }
+
+  .card[data-interactive]:focus-visible,
+  a.card:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow:
+      var(--shadow-glow),
+      0 0 0 2px var(--color-background),
+      0 0 0 4px var(--accent);
+  }
+
+
+  /* ========================================
+     CARD STRUCTURE
+     Optional semantic sections
+     ======================================== */
+
+  /* Media - images, video, etc. */
+  .card__media {
+    /* Full width, maintain aspect */
+    inline-size: 100%;
+    block-size: auto;
+    object-fit: cover;
+
+    /* Remove from flow for overlay positioning */
+    flex-shrink: 0;
+
+    /* Auto-apply theme-aware duotone tint */
+    filter: grayscale(100%) contrast(1.1);
+    transition: filter var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Duotone wrapper for blend mode overlay */
+  .card__media-wrap {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card__media-wrap::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      var(--duotone-dark, oklch(0.3 0.1 220)) 0%,
+      var(--duotone-light, oklch(0.7 0.1 200)) 100%
+    );
+    mix-blend-mode: multiply;
+    opacity: 0.85;
+    pointer-events: none;
+    transition: opacity var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Hover: reveal more of original image */
+  .card:hover .card__media {
+    filter: grayscale(60%) contrast(1.05);
+  }
+
+  .card:hover .card__media-wrap::after {
+    opacity: 0.6;
+  }
+
+  /* Opt-out of duotone effect */
+  .card__media[data-no-duotone],
+  .card[data-no-duotone] .card__media {
+    filter: none;
+  }
+
+  /* Focal point control for card media */
+  .card__media[data-focus="top"] { object-position: center top; }
+  .card__media[data-focus="bottom"] { object-position: center bottom; }
+  .card__media[data-focus="left"] { object-position: left center; }
+  .card__media[data-focus="right"] { object-position: right center; }
+  .card__media[data-focus="center"] { object-position: center center; }
+
+  /* Custom focal point via CSS custom properties */
+  .card__media[style*="--focus"] {
+    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
+  }
+
+  /* Aspect ratio variants for media */
+  .card__media[data-aspect="square"] {
+    aspect-ratio: 1;
+  }
+
+  .card__media[data-aspect="video"] {
+    aspect-ratio: 16 / 9;
+  }
+
+  .card__media[data-aspect="portrait"] {
+    aspect-ratio: 3 / 4;
+  }
+
+  .card__media[data-aspect="wide"] {
+    aspect-ratio: 21 / 9;
+  }
+
+  /* Content area */
+  .card__content {
+    flex: 1;
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  /* Title */
+  .card__title {
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    margin: 0;
+  }
+
+  /* Description */
+  .card__description {
+    color: var(--color-text-muted);
+    margin: 0;
+  }
+
+  /* Metadata - tags, dates, etc. */
+  .card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-subtle);
+  }
+
+  /* Footer - actions, links */
+  .card__footer {
+    padding: var(--space-4) var(--space-5);
+    border-block-start: 1px solid var(--color-border-subtle);
+    display: flex;
+    gap: var(--space-3);
+    align-items: center;
+  }
+
+  /* Push footer actions to end */
+  .card__footer[data-align="end"] {
+    justify-content: flex-end;
+  }
+
+  .card__footer[data-align="between"] {
+    justify-content: space-between;
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     Compact for lists, spacious for features
+     ======================================== */
+
+  .card[data-size="sm"] .card__content {
+    padding: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .card[data-size="sm"] .card__title {
+    font-size: var(--font-size-base);
+  }
+
+  .card[data-size="sm"] .card__footer {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .card[data-size="lg"] .card__content {
+    padding: var(--space-6);
+    gap: var(--space-4);
+  }
+
+  .card[data-size="lg"] .card__title {
+    font-size: var(--font-size-xl);
+  }
+
+  .card[data-size="lg"] .card__footer {
+    padding: var(--space-5) var(--space-6);
+  }
+
+
+  /* ========================================
+     CONTAINER QUERY RESPONSIVE
+     Cards adapt to their container, not viewport
+     ======================================== */
+
+  /* Compact card in narrow containers */
+  @container card (max-width: 20rem) {
+    .card__content {
+      padding: var(--space-4);
+    }
+
+    .card__title {
+      font-size: var(--font-size-base);
+    }
+
+    .card__footer {
+      padding: var(--space-3) var(--space-4);
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  /* Horizontal layout in wider containers */
+  @container card (min-width: 30rem) {
+    .card[data-layout="horizontal"] {
+      flex-direction: row;
+    }
+
+    .card[data-layout="horizontal"] .card__media {
+      inline-size: 40%;
+      max-inline-size: 16rem;
+      block-size: auto;
+    }
+
+    .card[data-layout="horizontal"] .card__content {
+      justify-content: center;
+    }
+  }
+
+
+  /* ========================================
+     SPECIAL CARD TYPES
+     Common card patterns
+     ======================================== */
+
+  /* Profile card */
+  .card[data-type="profile"] {
+    text-align: center;
+  }
+
+  .card[data-type="profile"] .card__media {
+    inline-size: 6rem;
+    block-size: 6rem;
+    border-radius: var(--radius-full);
+    margin: var(--space-5) auto 0;
+  }
+
+  /* Stat card */
+  .card[data-type="stat"] .card__content {
+    text-align: center;
+    gap: var(--space-2);
+  }
+
+  .card[data-type="stat"] .card__value {
+    font-size: var(--font-size-3xl);
+    font-weight: var(--weight-bold);
+    line-height: var(--leading-none);
+    color: var(--accent);
+  }
+
+  .card[data-type="stat"] .card__title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-normal);
+    color: var(--color-text-muted);
+  }
+
+  /* Feature card - emphasized */
+  .card[data-type="feature"] {
+    text-align: center;
+    padding: var(--space-6);
+  }
+
+  .card[data-type="feature"] .card__icon {
+    inline-size: 3rem;
+    block-size: 3rem;
+    margin-inline: auto;
+    margin-block-end: var(--space-4);
+    color: var(--accent);
+  }
+
+  /* Testimonial card - quote with attribution */
+  .card[data-type="testimonial"] .card__content {
+    gap: var(--space-4);
+  }
+
+  .card[data-type="testimonial"] .card__rating {
+    display: flex;
+    gap: 0.125rem;
+    color: var(--color-rating);
+  }
+
+  .card[data-type="testimonial"] .card__quote {
+    font-style: italic;
+    line-height: var(--leading-relaxed);
+    color: var(--color-text);
+  }
+
+  .card[data-type="testimonial"] .card__quote::before {
+    content: "\201C";
+    font-size: var(--font-size-3xl);
+    font-style: normal;
+    line-height: 0;
+    vertical-align: -0.35em;
+    color: var(--accent);
+    margin-inline-end: var(--space-1);
+  }
+
+  .card[data-type="testimonial"] .card__attribution {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--font-size-sm);
+  }
+
+  .card[data-type="testimonial"] .card__author {
+    font-weight: var(--weight-semibold);
+    font-style: normal;
+    color: var(--color-text);
+  }
+
+  .card[data-type="testimonial"] .card__role {
+    color: var(--color-text-muted);
+  }
+
+  /* Pricing card - plan comparison */
+  .card[data-type="pricing"] {
+    text-align: center;
+    overflow: visible;
+    position: relative;
+  }
+
+  .card[data-type="pricing"] .card__price {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--weight-bold);
+    line-height: var(--leading-none);
+    margin-block-end: var(--space-1);
+  }
+
+  .card[data-type="pricing"] .card__price-period {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    font-weight: var(--weight-normal);
+  }
+
+  /* Featured/popular pricing card */
+  .card[data-type="pricing"][data-featured] {
+    border: 2px solid var(--accent);
+    transform: scale(1.03);
+  }
+
+  .card[data-type="pricing"][data-featured] > .badge {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Pricing feature list */
+  .card[data-type="pricing"] .card__features {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .card[data-type="pricing"] .card__features li {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-block: var(--space-2);
+    border-block-end: var(--border-width) solid var(--color-border-subtle);
+  }
+
+  .card[data-type="pricing"] .card__features li:last-child {
+    border-block-end: none;
+  }
+
+  .card[data-type="pricing"] .card__features .check {
+    color: var(--color-success);
+    flex-shrink: 0;
+  }
+
+
+  /* ========================================
+     CARD GROUPS
+     Multiple cards together
+     ======================================== */
+
+  .card-group {
+    display: grid;
+    gap: var(--space-5);
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, var(--card-min-width, 18rem)), 1fr)
+    );
+  }
+
+  /* Equal height cards */
+  .card-group[data-equal-height] > .card {
+    block-size: 100%;
+  }
+
+  .card-group[data-equal-height] > .card .card__content {
+    flex: 1;
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC CARD STYLES
+     Motion styles affect card appearance
+     ======================================== */
+
+  /* Still: Crisp, no-nonsense borders */
+  [data-motion="still"] .card {
+    border-width: 1px;
+    border-color: var(--color-border);
+    box-shadow: none;
+  }
+
+  /* Serene: Extra soft, pillowy cards with gentle shadows */
+  [data-motion="serene"] .card {
+    box-shadow: var(--shadow-sm);
+  }
+  [data-motion="serene"] .card[data-variant="elevated"] {
+    box-shadow: var(--shadow-md);
+  }
+  [data-motion="serene"] .card:hover {
+    box-shadow: var(--shadow-md);
+  }
+
+  /* Cascade: Prominent layered shadows, bubbly elevated feel */
+  [data-motion="cascade"] .card {
+    box-shadow:
+      0 4px 12px oklch(0 0 0 / 0.06),
+      0 12px 28px oklch(0 0 0 / 0.1);
+  }
+  [data-motion="cascade"] .card:hover {
+    transform: translateY(-4px);
+    box-shadow:
+      0 8px 20px oklch(0 0 0 / 0.08),
+      0 20px 40px oklch(0 0 0 / 0.14);
+  }
+  [data-motion="cascade"] .card[data-variant="elevated"] {
+    box-shadow:
+      0 8px 20px oklch(0 0 0 / 0.08),
+      0 24px 48px oklch(0 0 0 / 0.12);
+  }
+
+  /* Rapids: Hard offset shadows, energetic hover */
+  [data-motion="rapids"] .card {
+    box-shadow: var(--shadow-offset);
+    transition:
+      transform 150ms var(--ease-fluid),
+      box-shadow 150ms var(--ease-fluid);
+  }
+  [data-motion="rapids"] .card:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-offset-hover);
+  }
+  [data-motion="rapids"] .card:active {
+    transform: translate(1px, 1px);
+    box-shadow: 2px 2px 0 oklch(0 0 0 / 0.15);
+  }
+
+  /* Tsunami: 3D depth effect with dramatic shadows */
+  [data-motion="tsunami"] .card {
+    transform-style: preserve-3d;
+    transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s var(--ease-fluid);
+    box-shadow:
+      0 15px 35px oklch(0 0 0 / 0.2),
+      0 5px 15px oklch(0 0 0 / 0.1);
+  }
+  [data-motion="tsunami"] .card:hover {
+    transform: translateY(-8px) scale(1.01);
+    box-shadow:
+      0 25px 50px oklch(0 0 0 / 0.25),
+      0 10px 20px oklch(0 0 0 / 0.15),
+      0 0 40px oklch(from var(--accent) l c h / 0.15);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+
+    .card[data-interactive]:active,
+    a.card:active {
+      transform: none;
+    }
+
+    [data-motion="cascade"] .card:hover,
+    [data-motion="rapids"] .card:hover,
+    [data-motion="rapids"] .card:active,
+    [data-motion="tsunami"] .card:hover {
+      transform: none;
+      transition: none;
+    }
+
+    [data-motion="rapids"] .card {
+      transition: none;
+    }
+
+    [data-motion="tsunami"] .card {
+      transition: none;
+    }
+
+    .card__media,
+    .card__media-wrap::after {
+      transition: none;
+    }
+  }
+}