create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/themes/playful/globals.css

@@ -1,400 +1,406 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 99%;
-    --foreground: 260 25% 16%;
-    --primary: 330 75% 56%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 260 50% 94%;
-    --secondary-foreground: 260 25% 16%;
-    --muted: 270 30% 95%;
-    --muted-foreground: 260 10% 45%;
-    --accent: 280 60% 60%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 270 20% 88%;
-    --radius: 1rem;
-
-    /* Playful-specific tokens */
-    --pink: 330 75% 56%;
-    --purple: 280 60% 60%;
-    --lavender: 260 50% 94%;
-    --peach: 20 80% 88%;
-    --mint: 160 50% 88%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-    line-height: 1.65;
-  }
-
-  /* Playful typography — friendly, bold, tight */
-  h1,
-  h2,
-  h3,
-  h4 {
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-  }
-
-  h1 {
-    font-weight: 800;
-    letter-spacing: -0.03em;
-  }
-
-  /* Fun colorful selection */
-  ::selection {
-    background: hsl(var(--pink) / 0.25);
-    color: hsl(260 25% 16%);
-  }
-
-  /* Colorful focus rings */
-  :focus-visible {
-    outline: 2.5px solid hsl(var(--purple));
-    outline-offset: 3px;
-    border-radius: var(--radius);
-  }
-
-  /* Playful scrollbar */
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: hsl(var(--lavender));
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: linear-gradient(
-      180deg,
-      hsl(var(--pink)),
-      hsl(var(--purple))
-    );
-    border-radius: 999px;
-  }
-}
-
-@layer components {
-  /* ─── Buttons ─── */
-
-  /* Primary CTA — gradient with bounce and glow */
-  button[class*="bg-primary"],
-  a[class*="bg-primary"] {
-    font-weight: 700;
-    letter-spacing: 0.01em;
-    background: linear-gradient(
-      135deg,
-      hsl(var(--pink)),
-      hsl(330 80% 52%),
-      hsl(var(--purple))
-    ) !important;
-    background-size: 200% 200%;
-    box-shadow:
-      0 4px 14px hsl(var(--pink) / 0.3),
-      0 2px 6px hsl(var(--purple) / 0.15);
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    border: none;
-  }
-
-  button[class*="bg-primary"]:hover,
-  a[class*="bg-primary"]:hover {
-    transform: translateY(-3px) scale(1.03);
-    box-shadow:
-      0 8px 28px hsl(var(--pink) / 0.4),
-      0 4px 12px hsl(var(--purple) / 0.2);
-    background-position: 100% 0;
-    opacity: 1 !important;
-  }
-
-  button[class*="bg-primary"]:active,
-  a[class*="bg-primary"]:active {
-    transform: translateY(0) scale(0.97);
-    box-shadow: 0 2px 8px hsl(var(--pink) / 0.2);
-  }
-
-  /* Secondary buttons — soft pill with hover pop */
-  [class*="bg-secondary"] {
-    border-radius: 999px !important;
-    font-weight: 600;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="bg-secondary"]:hover {
-    background: hsl(var(--lavender)) !important;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px hsl(var(--purple) / 0.12);
-  }
-
-  /* ─── Product Cards ─── */
-
-  [class*="group"][class*="border"] {
-    border-radius: var(--radius);
-    overflow: hidden;
-    border: 2px solid hsl(var(--border));
-    background: white;
-    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="group"][class*="border"]:hover {
-    transform: translateY(-6px) rotate(-0.5deg);
-    border-color: hsl(var(--pink) / 0.3);
-    box-shadow:
-      0 16px 40px hsl(var(--purple) / 0.12),
-      0 6px 16px hsl(var(--pink) / 0.1);
-  }
-
-  /* Product image hover — fun overshoot zoom */
-  [class*="group-hover\\:scale-105"] {
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-  }
-
-  [class*="group"]:hover [class*="group-hover\\:scale-105"] {
-    transform: scale(1.08) !important;
-  }
-
-  /* ─── Form Elements ─── */
-
-  input[class*="border-border"],
-  select[class*="border-border"],
-  textarea[class*="border-border"] {
-    border-radius: var(--radius);
-    border-width: 2px;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  input[class*="border-border"]:focus,
-  select[class*="border-border"]:focus,
-  textarea[class*="border-border"]:focus {
-    border-color: hsl(var(--purple)) !important;
-    box-shadow: 0 0 0 4px hsl(var(--purple) / 0.1);
-    transform: scale(1.01);
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    color: hsl(var(--muted-foreground) / 0.6);
-  }
-
-  /* ─── Navigation & Header ─── */
-
-  header[class*="sticky"] {
-    border-bottom: none !important;
-    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
-    background: hsl(0 0% 99% / 0.9) !important;
-    backdrop-filter: blur(10px);
-  }
-
-  /* Nav link hover — colorful underline */
-  nav a {
-    position: relative;
-    font-weight: 600;
-    transition: color 0.2s ease;
-  }
-
-  nav a::after {
-    content: '';
-    position: absolute;
-    bottom: -2px;
-    left: 50%;
-    width: 0;
-    height: 3px;
-    background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--purple)));
-    border-radius: 999px;
-    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    transform: translateX(-50%);
-  }
-
-  nav a:hover::after {
-    width: 100%;
-  }
-
-  nav a:hover {
-    color: hsl(var(--pink));
-  }
-
-  /* ─── Badges & Tags ─── */
-
-  /* Category/filter pills */
-  [class*="bg-muted"][class*="text-xs"] {
-    border-radius: 999px;
-    font-weight: 700;
-    padding-left: 0.85rem;
-    padding-right: 0.85rem;
-    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  [class*="bg-muted"][class*="text-xs"]:hover {
-    background: hsl(var(--lavender)) !important;
-    transform: scale(1.05);
-  }
-
-  /* Sale/discount badges — fun wiggle + pill */
-  [class*="bg-destructive"] {
-    border-radius: 999px;
-    font-weight: 800;
-    box-shadow: 0 2px 8px hsl(0 84% 60% / 0.3);
-    animation: playful-wiggle 3s ease-in-out infinite;
-  }
-
-  /* ─── Price Display ─── */
-
-  [class*="font-bold"][class*="text-lg"],
-  [class*="font-bold"][class*="text-xl"],
-  [class*="font-bold"][class*="text-2xl"] {
-    color: hsl(var(--pink));
-  }
-
-  /* Strikethrough — more playful */
-  [class*="line-through"] {
-    opacity: 0.4;
-    text-decoration-color: hsl(var(--purple) / 0.4);
-    text-decoration-thickness: 2px;
-  }
-
-  /* ─── Dividers ─── */
-
-  hr {
-    border: none;
-    height: 3px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      hsl(var(--lavender)),
-      hsl(var(--pink) / 0.2),
-      hsl(var(--lavender)),
-      transparent
-    );
-    border-radius: 999px;
-  }
-
-  /* ─── Cart & Checkout ─── */
-
-  /* Sticky summary — playful card */
-  [class*="sticky"][class*="top-"] {
-    border-radius: var(--radius);
-    border: 2px solid hsl(var(--border));
-    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
-  }
-
-  /* Quantity buttons */
-  button[class*="h-8"][class*="w-8"],
-  button[class*="h-10"][class*="w-10"] {
-    border-radius: 999px !important;
-    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  button[class*="h-8"][class*="w-8"]:hover,
-  button[class*="h-10"][class*="w-10"]:hover {
-    transform: scale(1.1);
-    background: hsl(var(--lavender)) !important;
-  }
-
-  /* ─── Images ─── */
-
-  /* Product images — rounded */
-  [class*="aspect-square"] {
-    border-radius: calc(var(--radius) - 2px);
-    overflow: hidden;
-  }
-}
-
-/* ─── Animations ─── */
-
-/* Bouncy slide-up entrance */
-@keyframes playful-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(24px) scale(0.96);
-  }
-  50% {
-    transform: translateY(-6px) scale(1.01);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* Wiggle for discount badges */
-@keyframes playful-wiggle {
-  0%,
-  85%,
-  100% {
-    transform: rotate(0deg);
-  }
-  90% {
-    transform: rotate(-3deg);
-  }
-  95% {
-    transform: rotate(3deg);
-  }
-}
-
-/* Pop-in for grid items */
-@keyframes playful-pop-in {
-  from {
-    opacity: 0;
-    transform: scale(0.9) translateY(16px);
-  }
-  60% {
-    transform: scale(1.02) translateY(-2px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-main > * {
-  animation: playful-slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-}
-
-main > *:nth-child(2) {
-  animation-delay: 0.06s;
-}
-
-main > *:nth-child(3) {
-  animation-delay: 0.12s;
-}
-
-/* Staggered grid items — playful pop */
-[class*="grid"] > [class*="group"] {
-  animation: playful-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(2) {
-  animation-delay: 0.06s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(3) {
-  animation-delay: 0.12s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(4) {
-  animation-delay: 0.18s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(5) {
-  animation-delay: 0.24s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(6) {
-  animation-delay: 0.3s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(7) {
-  animation-delay: 0.36s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(8) {
-  animation-delay: 0.42s;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 99%;
+    --foreground: 260 25% 16%;
+    --primary: 330 75% 56%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 260 50% 94%;
+    --secondary-foreground: 260 25% 16%;
+    --muted: 270 30% 95%;
+    --muted-foreground: 260 10% 45%;
+    --accent: 280 60% 60%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 270 20% 88%;
+    --input: 270 20% 88%;
+    --ring: 330 75% 56%;
+    --card: 0 0% 100%;
+    --card-foreground: 260 25% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 260 25% 16%;
+    --radius: 1rem;
+
+    /* Playful-specific tokens */
+    --pink: 330 75% 56%;
+    --purple: 280 60% 60%;
+    --lavender: 260 50% 94%;
+    --peach: 20 80% 88%;
+    --mint: 160 50% 88%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    line-height: 1.65;
+  }
+
+  /* Playful typography — friendly, bold, tight */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-weight: 800;
+    letter-spacing: -0.03em;
+  }
+
+  /* Fun colorful selection */
+  ::selection {
+    background: hsl(var(--pink) / 0.25);
+    color: hsl(260 25% 16%);
+  }
+
+  /* Colorful focus rings */
+  :focus-visible {
+    outline: 2.5px solid hsl(var(--purple));
+    outline-offset: 3px;
+    border-radius: var(--radius);
+  }
+
+  /* Playful scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(var(--lavender));
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--pink)),
+      hsl(var(--purple))
+    );
+    border-radius: 999px;
+  }
+}
+
+@layer components {
+  /* ─── Buttons ─── */
+
+  /* Primary CTA — gradient with bounce and glow */
+  button[class*="bg-primary"],
+  a[class*="bg-primary"] {
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    background: linear-gradient(
+      135deg,
+      hsl(var(--pink)),
+      hsl(330 80% 52%),
+      hsl(var(--purple))
+    ) !important;
+    background-size: 200% 200%;
+    box-shadow:
+      0 4px 14px hsl(var(--pink) / 0.3),
+      0 2px 6px hsl(var(--purple) / 0.15);
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: none;
+  }
+
+  button[class*="bg-primary"]:hover,
+  a[class*="bg-primary"]:hover {
+    transform: translateY(-3px) scale(1.03);
+    box-shadow:
+      0 8px 28px hsl(var(--pink) / 0.4),
+      0 4px 12px hsl(var(--purple) / 0.2);
+    background-position: 100% 0;
+    opacity: 1 !important;
+  }
+
+  button[class*="bg-primary"]:active,
+  a[class*="bg-primary"]:active {
+    transform: translateY(0) scale(0.97);
+    box-shadow: 0 2px 8px hsl(var(--pink) / 0.2);
+  }
+
+  /* Secondary buttons — soft pill with hover pop */
+  [class*="bg-secondary"] {
+    border-radius: 999px !important;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="bg-secondary"]:hover {
+    background: hsl(var(--lavender)) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px hsl(var(--purple) / 0.12);
+  }
+
+  /* ─── Product Cards ─── */
+
+  [class*="group"][class*="border"] {
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 2px solid hsl(var(--border));
+    background: white;
+    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="group"][class*="border"]:hover {
+    transform: translateY(-6px) rotate(-0.5deg);
+    border-color: hsl(var(--pink) / 0.3);
+    box-shadow:
+      0 16px 40px hsl(var(--purple) / 0.12),
+      0 6px 16px hsl(var(--pink) / 0.1);
+  }
+
+  /* Product image hover — fun overshoot zoom */
+  [class*="group-hover\\:scale-105"] {
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+  }
+
+  [class*="group"]:hover [class*="group-hover\\:scale-105"] {
+    transform: scale(1.08) !important;
+  }
+
+  /* ─── Form Elements ─── */
+
+  input[class*="border-border"],
+  select[class*="border-border"],
+  textarea[class*="border-border"] {
+    border-radius: var(--radius);
+    border-width: 2px;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  input[class*="border-border"]:focus,
+  select[class*="border-border"]:focus,
+  textarea[class*="border-border"]:focus {
+    border-color: hsl(var(--purple)) !important;
+    box-shadow: 0 0 0 4px hsl(var(--purple) / 0.1);
+    transform: scale(1.01);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: hsl(var(--muted-foreground) / 0.6);
+  }
+
+  /* ─── Navigation & Header ─── */
+
+  header[class*="sticky"] {
+    border-bottom: none !important;
+    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
+    background: hsl(0 0% 99% / 0.9) !important;
+    backdrop-filter: blur(10px);
+  }
+
+  /* Nav link hover — colorful underline */
+  nav a {
+    position: relative;
+    font-weight: 600;
+    transition: color 0.2s ease;
+  }
+
+  nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--purple)));
+    border-radius: 999px;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transform: translateX(-50%);
+  }
+
+  nav a:hover::after {
+    width: 100%;
+  }
+
+  nav a:hover {
+    color: hsl(var(--pink));
+  }
+
+  /* ─── Badges & Tags ─── */
+
+  /* Category/filter pills */
+  [class*="bg-muted"][class*="text-xs"] {
+    border-radius: 999px;
+    font-weight: 700;
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  [class*="bg-muted"][class*="text-xs"]:hover {
+    background: hsl(var(--lavender)) !important;
+    transform: scale(1.05);
+  }
+
+  /* Sale/discount badges — fun wiggle + pill */
+  [class*="bg-destructive"] {
+    border-radius: 999px;
+    font-weight: 800;
+    box-shadow: 0 2px 8px hsl(0 84% 60% / 0.3);
+    animation: playful-wiggle 3s ease-in-out infinite;
+  }
+
+  /* ─── Price Display ─── */
+
+  [class*="font-bold"][class*="text-lg"],
+  [class*="font-bold"][class*="text-xl"],
+  [class*="font-bold"][class*="text-2xl"] {
+    color: hsl(var(--pink));
+  }
+
+  /* Strikethrough — more playful */
+  [class*="line-through"] {
+    opacity: 0.4;
+    text-decoration-color: hsl(var(--purple) / 0.4);
+    text-decoration-thickness: 2px;
+  }
+
+  /* ─── Dividers ─── */
+
+  hr {
+    border: none;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--lavender)),
+      hsl(var(--pink) / 0.2),
+      hsl(var(--lavender)),
+      transparent
+    );
+    border-radius: 999px;
+  }
+
+  /* ─── Cart & Checkout ─── */
+
+  /* Sticky summary — playful card */
+  [class*="sticky"][class*="top-"] {
+    border-radius: var(--radius);
+    border: 2px solid hsl(var(--border));
+    box-shadow: 0 4px 20px hsl(var(--purple) / 0.06);
+  }
+
+  /* Quantity buttons */
+  button[class*="h-8"][class*="w-8"],
+  button[class*="h-10"][class*="w-10"] {
+    border-radius: 999px !important;
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  button[class*="h-8"][class*="w-8"]:hover,
+  button[class*="h-10"][class*="w-10"]:hover {
+    transform: scale(1.1);
+    background: hsl(var(--lavender)) !important;
+  }
+
+  /* ─── Images ─── */
+
+  /* Product images — rounded */
+  [class*="aspect-square"] {
+    border-radius: calc(var(--radius) - 2px);
+    overflow: hidden;
+  }
+}
+
+/* ─── Animations ─── */
+
+/* Bouncy slide-up entrance */
+@keyframes playful-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.96);
+  }
+  50% {
+    transform: translateY(-6px) scale(1.01);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Wiggle for discount badges */
+@keyframes playful-wiggle {
+  0%,
+  85%,
+  100% {
+    transform: rotate(0deg);
+  }
+  90% {
+    transform: rotate(-3deg);
+  }
+  95% {
+    transform: rotate(3deg);
+  }
+}
+
+/* Pop-in for grid items */
+@keyframes playful-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(16px);
+  }
+  60% {
+    transform: scale(1.02) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+main > * {
+  animation: playful-slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+main > *:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+main > *:nth-child(3) {
+  animation-delay: 0.12s;
+}
+
+/* Staggered grid items — playful pop */
+[class*="grid"] > [class*="group"] {
+  animation: playful-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(3) {
+  animation-delay: 0.12s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(4) {
+  animation-delay: 0.18s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(5) {
+  animation-delay: 0.24s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(6) {
+  animation-delay: 0.3s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(7) {
+  animation-delay: 0.36s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(8) {
+  animation-delay: 0.42s;
+}