themes-pastel-dream/assets/css/pastel-dream.css

/* Pastel Dream — theme-specific CSS appended to host Tailwind input.
 *
 * Rules:
 *  - All colors must consume tokens via hsl(var(--token)). No hardcoded hex/rgb/named colors.
 *  - All font-family declarations must consume var(--font-*) with a graceful fallback stack.
 *  - Animations must be guarded by prefers-reduced-motion: reduce.
 */

:root {
  --radius-soft: 20px;
}

/* --- Watercolor utility classes ---------------------------------------- */
/* Soft radial wash backgrounds, tinted from the active palette via primary
 * and accent tokens. Used as decorative layers behind hero and footer.
 */
.bg-watercolor-blush {
  background-image:
    radial-gradient(60% 70% at 20% 30%, hsl(var(--primary) / 0.18) 0%, transparent 65%),
    radial-gradient(50% 60% at 80% 70%, hsl(var(--accent) / 0.15) 0%, transparent 60%);
}

.bg-watercolor-mint {
  background-image:
    radial-gradient(60% 70% at 25% 35%, hsl(var(--secondary) / 0.45) 0%, transparent 65%),
    radial-gradient(55% 65% at 75% 65%, hsl(var(--primary) / 0.12) 0%, transparent 60%);
}

/* --- Soft shadow utilities -------------------------------------------- */
/* Shadows are large, low-alpha, and tinted toward primary rather than grey. */
.shadow-soft {
  box-shadow: 0 12px 40px -8px hsl(var(--primary) / 0.18),
              0 4px 12px -2px hsl(var(--primary) / 0.10);
}

.shadow-soft-hover {
  box-shadow: 0 16px 48px -8px hsl(var(--primary) / 0.24),
              0 6px 16px -2px hsl(var(--primary) / 0.14);
}

/* --- Deckle edge ------------------------------------------------------- */
/* Hand-torn paper effect for testimonial cards. Uses mask-image so it
 * renders against whatever background lies beneath.
 */
.deckle-edge {
  -webkit-mask-image:
    radial-gradient(circle at 6px 6px, transparent 4px, hsl(var(--card)) 4.5px),
    linear-gradient(to bottom, hsl(var(--card)) 0%, hsl(var(--card)) 100%);
  mask-image:
    radial-gradient(circle at 6px 6px, transparent 4px, hsl(var(--card)) 4.5px),
    linear-gradient(to bottom, hsl(var(--card)) 0%, hsl(var(--card)) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  border: 1px dashed hsl(var(--border));
}

/* --- Pill button override --------------------------------------------- */
/* Spec §"Block overrides": every button is pill (9999px), tinted shadow,
 * 2px hover lift, easing cubic-bezier(.22,1,.36,1).
 */
.pastel-pill {
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body, "Nunito", "Quicksand", system-ui, sans-serif);
  font-weight: 600;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 24px -6px hsl(var(--primary) / 0.40);
  transition: transform 240ms cubic-bezier(.22,1,.36,1),
              box-shadow 240ms cubic-bezier(.22,1,.36,1),
              background-color 240ms cubic-bezier(.22,1,.36,1);
  border: none;
  cursor: pointer;
  display: inline-block;
}

.pastel-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -6px hsl(var(--primary) / 0.50);
  background-color: hsl(var(--primary) / 0.92);
}

.pastel-pill:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* --- Soft card -------------------------------------------------------- */
.pastel-card {
  border-radius: var(--radius-soft);
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 12px 40px -8px hsl(var(--primary) / 0.18),
              0 4px 12px -2px hsl(var(--primary) / 0.10);
}

/* --- Brush-stroke underline for headings ------------------------------ */
.brush-underline {
  position: relative;
  display: inline-block;
}

.brush-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 0.22em;
  background-color: hsl(var(--accent) / 0.55);
  border-radius: 9999px;
  z-index: -1;
}

/* --- Typography fallbacks --------------------------------------------- */
/* Spec §"Visual language" pairs Caveat Brush + Nunito; admin can override
 * via the font picker. Fallback stacks degrade gracefully.
 */
.font-display {
  font-family: var(--font-heading, "Caveat Brush", "Sacramento", "Brush Script MT", cursive);
  letter-spacing: 0.01em;
}

.font-body {
  font-family: var(--font-body, "Nunito", "Quicksand", "Helvetica Neue", system-ui, sans-serif);
  line-height: 1.75;
}

.font-mono {
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", ui-monospace, monospace);
}

/* --- Animations ------------------------------------------------------- */
/* @keyframes pastel-shimmer — drift the accent overlay slowly across the
 * affirmation strip. Spec §13.10: animation-duration >= 6s.
 */
@keyframes pastel-shimmer {
  0% {
    background-position: 0% 50%;
    opacity: 0.85;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.85;
  }
}

/* @keyframes breathe — gentle scale pulse, used by hero CTA and watercolor
 * blobs for an in-and-out breath rhythm.
 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

.animate-pastel-shimmer {
  background-size: 200% 200%;
  animation: pastel-shimmer 8s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 6s ease-in-out infinite;
}

/* --- Accessibility: respect prefers-reduced-motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-pastel-shimmer,
  .animate-breathe,
  .pastel-pill {
    animation: none !important;
    transition: none !important;
  }
  .pastel-pill:hover {
    transform: none;
  }
}