create-brainerce-store 1.51.0 → 1.52.0

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

@@ -1,399 +1,405 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 20 14% 4%;
-    --foreground: 38 25% 86%;
-    --primary: 38 60% 55%;
-    --primary-foreground: 20 14% 4%;
-    --secondary: 20 10% 10%;
-    --secondary-foreground: 38 25% 86%;
-    --muted: 20 10% 12%;
-    --muted-foreground: 30 10% 50%;
-    --accent: 38 60% 55%;
-    --accent-foreground: 20 14% 4%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 38 25% 86%;
-    --border: 30 10% 16%;
-    --radius: 0.25rem;
-
-    /* Luxury-specific tokens */
-    --gold: 38 60% 55%;
-    --gold-light: 38 50% 72%;
-    --gold-dark: 38 70% 40%;
-    --surface: 20 12% 7%;
-    --surface-elevated: 20 10% 10%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-    letter-spacing: 0.01em;
-    line-height: 1.7;
-  }
-
-  /* Luxury typography — editorial serif hierarchy */
-  h1,
-  h2,
-  h3,
-  h4 {
-    letter-spacing: 0.04em;
-    font-weight: 500;
-    line-height: 1.2;
-  }
-
-  h1 {
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    font-weight: 400;
-    line-height: 1.1;
-  }
-
-  h2 {
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
-  /* Elegant link underline animation */
-  a:not([class*="bg-"]) {
-    position: relative;
-    transition: color 0.3s ease, opacity 0.3s ease;
-  }
-
-  main a:not([class*="bg-"]):not([class*="group"])::after {
-    content: '';
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    width: 0;
-    height: 1px;
-    background: hsl(var(--gold));
-    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  main a:not([class*="bg-"]):not([class*="group"]):hover::after {
-    width: 100%;
-  }
-
-  /* Refined text selection */
-  ::selection {
-    background: hsl(var(--gold) / 0.3);
-    color: hsl(38 25% 96%);
-  }
-
-  /* Subtle body texture overlay */
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
-    pointer-events: none;
-    z-index: 9999;
-  }
-
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    width: 5px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: hsl(20 14% 4%);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: hsl(30 10% 18%);
-    border-radius: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--gold) / 0.5);
-  }
-
-  /* Smooth focus states */
-  :focus-visible {
-    outline: 1px solid hsl(var(--gold) / 0.5);
-    outline-offset: 3px;
-  }
-}
-
-@layer components {
-  /* ─── Buttons ─── */
-
-  /* Primary CTA — gold with shimmer sweep */
-  button[class*="bg-primary"],
-  a[class*="bg-primary"] {
-    position: relative;
-    overflow: hidden;
-    font-weight: 500;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    font-size: 0.78rem;
-    border: 1px solid hsl(var(--gold) / 0.3);
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  button[class*="bg-primary"]:hover,
-  a[class*="bg-primary"]:hover {
-    box-shadow:
-      0 0 20px hsl(var(--gold) / 0.2),
-      0 4px 16px hsl(0 0% 0% / 0.3);
-    border-color: hsl(var(--gold) / 0.6);
-    opacity: 1 !important;
-  }
-
-  button[class*="bg-primary"]::after,
-  a[class*="bg-primary"]::after {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -75%;
-    width: 50%;
-    height: 200%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      hsl(var(--gold-light) / 0.12),
-      hsl(var(--gold-light) / 0.2),
-      transparent
-    );
-    transform: skewX(-20deg);
-    transition: left 0.7s ease;
-    pointer-events: none;
-  }
-
-  button[class*="bg-primary"]:hover::after,
-  a[class*="bg-primary"]:hover::after {
-    left: 130%;
-  }
-
-  /* Secondary/ghost buttons — thin border, minimal */
-  [class*="bg-secondary"] {
-    border: 1px solid hsl(var(--border));
-    transition: all 0.3s ease;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    font-size: 0.8rem;
-  }
-
-  [class*="bg-secondary"]:hover {
-    border-color: hsl(var(--gold) / 0.4);
-    background: hsl(var(--surface-elevated)) !important;
-  }
-
-  /* ─── Product Cards ─── */
-
-  [class*="group"][class*="border"] {
-    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    border-color: hsl(var(--border) / 0.5);
-    background: hsl(var(--surface));
-  }
-
-  [class*="group"][class*="border"]:hover {
-    border-color: hsl(var(--gold) / 0.25);
-    box-shadow:
-      0 8px 40px hsl(0 0% 0% / 0.5),
-      0 0 0 1px hsl(var(--gold) / 0.08);
-  }
-
-  /* Product image — slow cinematic zoom */
-  [class*="group-hover\\:scale-105"] {
-    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
-  }
-
-  /* Product image overlay on hover — subtle dark gradient */
-  [class*="group"] [class*="aspect-square"] {
-    position: relative;
-  }
-
-  [class*="group"]:hover [class*="aspect-square"]::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      to top,
-      hsl(20 14% 4% / 0.3),
-      transparent 50%
-    );
-    pointer-events: none;
-    transition: opacity 0.5s ease;
-  }
-
-  /* ─── Form Elements ─── */
-
-  input[class*="border-border"],
-  select[class*="border-border"],
-  textarea[class*="border-border"] {
-    background: hsl(var(--surface)) !important;
-    transition: all 0.3s ease;
-  }
-
-  input[class*="border-border"]:focus,
-  select[class*="border-border"]:focus,
-  textarea[class*="border-border"]:focus {
-    border-color: hsl(var(--gold) / 0.5) !important;
-    box-shadow: 0 0 0 3px hsl(var(--gold) / 0.08);
-    background: hsl(var(--surface-elevated)) !important;
-  }
-
-  /* Placeholder text */
-  input::placeholder,
-  textarea::placeholder {
-    letter-spacing: 0.03em;
-    font-size: 0.85rem;
-  }
-
-  /* ─── Navigation & Header ─── */
-
-  header[class*="sticky"] {
-    backdrop-filter: blur(16px) saturate(1.2);
-    background: hsl(20 14% 4% / 0.8) !important;
-    border-bottom: 1px solid hsl(var(--gold) / 0.08) !important;
-  }
-
-  /* Nav links */
-  nav a {
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  /* ─── Badges & Tags ─── */
-
-  [class*="bg-muted"][class*="text-xs"] {
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    font-size: 0.6rem;
-    font-weight: 600;
-    border: 1px solid hsl(var(--border));
-  }
-
-  /* Sale badges — dark red, refined */
-  [class*="bg-destructive"] {
-    background: hsl(0 60% 38%) !important;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    font-size: 0.65rem;
-  }
-
-  /* ─── Price Display ─── */
-
-  /* Gold gradient on prices */
-  [class*="font-bold"][class*="text-lg"],
-  [class*="font-bold"][class*="text-xl"],
-  [class*="font-bold"][class*="text-2xl"] {
-    background: linear-gradient(
-      135deg,
-      hsl(var(--gold-light)),
-      hsl(var(--gold)),
-      hsl(var(--gold-dark))
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* Strikethrough original prices */
-  [class*="line-through"] {
-    opacity: 0.4;
-  }
-
-  /* ─── Dividers & Separators ─── */
-
-  hr {
-    border-color: hsl(var(--border) / 0.3);
-  }
-
-  /* Decorative gold separator */
-  main > section + section {
-    border-top: 1px solid hsl(var(--gold) / 0.06);
-  }
-
-  /* ─── Cart & Checkout ─── */
-
-  /* Sticky summary panel */
-  [class*="sticky"][class*="top-"] {
-    background: hsl(var(--surface));
-    border: 1px solid hsl(var(--border) / 0.5);
-  }
-}
-
-/* ─── Animations ─── */
-
-/* Elegant fade-in-up */
-@keyframes luxury-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-main > * {
-  animation: luxury-fade-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
-
-main > *:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-main > *:nth-child(3) {
-  animation-delay: 0.2s;
-}
-
-main > *:nth-child(4) {
-  animation-delay: 0.3s;
-}
-
-/* Staggered grid item reveal */
-@keyframes luxury-grid-item {
-  from {
-    opacity: 0;
-    transform: translateY(12px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-[class*="grid"] > [class*="group"] {
-  animation: luxury-grid-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(2) {
-  animation-delay: 0.08s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(3) {
-  animation-delay: 0.16s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(4) {
-  animation-delay: 0.24s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(5) {
-  animation-delay: 0.32s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(6) {
-  animation-delay: 0.4s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(7) {
-  animation-delay: 0.48s;
-}
-
-[class*="grid"] > [class*="group"]:nth-child(8) {
-  animation-delay: 0.56s;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 20 14% 4%;
+    --foreground: 38 25% 86%;
+    --primary: 38 60% 55%;
+    --primary-foreground: 20 14% 4%;
+    --secondary: 20 10% 10%;
+    --secondary-foreground: 38 25% 86%;
+    --muted: 20 10% 12%;
+    --muted-foreground: 30 10% 50%;
+    --accent: 38 60% 55%;
+    --accent-foreground: 20 14% 4%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 38 25% 86%;
+    --border: 30 10% 16%;
+    --input: 30 10% 16%;
+    --ring: 38 60% 55%;
+    --card: 20 12% 7%;
+    --card-foreground: 38 25% 86%;
+    --popover: 20 10% 10%;
+    --popover-foreground: 38 25% 86%;
+    --radius: 0.25rem;
+
+    /* Luxury-specific tokens */
+    --gold: 38 60% 55%;
+    --gold-light: 38 50% 72%;
+    --gold-dark: 38 70% 40%;
+    --surface: 20 12% 7%;
+    --surface-elevated: 20 10% 10%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    letter-spacing: 0.01em;
+    line-height: 1.7;
+  }
+
+  /* Luxury typography — editorial serif hierarchy */
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: 0.04em;
+    font-weight: 500;
+    line-height: 1.2;
+  }
+
+  h1 {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 400;
+    line-height: 1.1;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  /* Elegant link underline animation */
+  a:not([class*="bg-"]) {
+    position: relative;
+    transition: color 0.3s ease, opacity 0.3s ease;
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: hsl(var(--gold));
+    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  main a:not([class*="bg-"]):not([class*="group"]):hover::after {
+    width: 100%;
+  }
+
+  /* Refined text selection */
+  ::selection {
+    background: hsl(var(--gold) / 0.3);
+    color: hsl(38 25% 96%);
+  }
+
+  /* Subtle body texture overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: hsl(20 14% 4%);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(30 10% 18%);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gold) / 0.5);
+  }
+
+  /* Smooth focus states */
+  :focus-visible {
+    outline: 1px solid hsl(var(--gold) / 0.5);
+    outline-offset: 3px;
+  }
+}
+
+@layer components {
+  /* ─── Buttons ─── */
+
+  /* Primary CTA — gold with shimmer sweep */
+  button[class*="bg-primary"],
+  a[class*="bg-primary"] {
+    position: relative;
+    overflow: hidden;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-size: 0.78rem;
+    border: 1px solid hsl(var(--gold) / 0.3);
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  button[class*="bg-primary"]:hover,
+  a[class*="bg-primary"]:hover {
+    box-shadow:
+      0 0 20px hsl(var(--gold) / 0.2),
+      0 4px 16px hsl(0 0% 0% / 0.3);
+    border-color: hsl(var(--gold) / 0.6);
+    opacity: 1 !important;
+  }
+
+  button[class*="bg-primary"]::after,
+  a[class*="bg-primary"]::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -75%;
+    width: 50%;
+    height: 200%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      hsl(var(--gold-light) / 0.12),
+      hsl(var(--gold-light) / 0.2),
+      transparent
+    );
+    transform: skewX(-20deg);
+    transition: left 0.7s ease;
+    pointer-events: none;
+  }
+
+  button[class*="bg-primary"]:hover::after,
+  a[class*="bg-primary"]:hover::after {
+    left: 130%;
+  }
+
+  /* Secondary/ghost buttons — thin border, minimal */
+  [class*="bg-secondary"] {
+    border: 1px solid hsl(var(--border));
+    transition: all 0.3s ease;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+  }
+
+  [class*="bg-secondary"]:hover {
+    border-color: hsl(var(--gold) / 0.4);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* ─── Product Cards ─── */
+
+  [class*="group"][class*="border"] {
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-color: hsl(var(--border) / 0.5);
+    background: hsl(var(--surface));
+  }
+
+  [class*="group"][class*="border"]:hover {
+    border-color: hsl(var(--gold) / 0.25);
+    box-shadow:
+      0 8px 40px hsl(0 0% 0% / 0.5),
+      0 0 0 1px hsl(var(--gold) / 0.08);
+  }
+
+  /* Product image — slow cinematic zoom */
+  [class*="group-hover\\:scale-105"] {
+    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  }
+
+  /* Product image overlay on hover — subtle dark gradient */
+  [class*="group"] [class*="aspect-square"] {
+    position: relative;
+  }
+
+  [class*="group"]:hover [class*="aspect-square"]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top,
+      hsl(20 14% 4% / 0.3),
+      transparent 50%
+    );
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+  }
+
+  /* ─── Form Elements ─── */
+
+  input[class*="border-border"],
+  select[class*="border-border"],
+  textarea[class*="border-border"] {
+    background: hsl(var(--surface)) !important;
+    transition: all 0.3s ease;
+  }
+
+  input[class*="border-border"]:focus,
+  select[class*="border-border"]:focus,
+  textarea[class*="border-border"]:focus {
+    border-color: hsl(var(--gold) / 0.5) !important;
+    box-shadow: 0 0 0 3px hsl(var(--gold) / 0.08);
+    background: hsl(var(--surface-elevated)) !important;
+  }
+
+  /* Placeholder text */
+  input::placeholder,
+  textarea::placeholder {
+    letter-spacing: 0.03em;
+    font-size: 0.85rem;
+  }
+
+  /* ─── Navigation & Header ─── */
+
+  header[class*="sticky"] {
+    backdrop-filter: blur(16px) saturate(1.2);
+    background: hsl(20 14% 4% / 0.8) !important;
+    border-bottom: 1px solid hsl(var(--gold) / 0.08) !important;
+  }
+
+  /* Nav links */
+  nav a {
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* ─── Badges & Tags ─── */
+
+  [class*="bg-muted"][class*="text-xs"] {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: 0.6rem;
+    font-weight: 600;
+    border: 1px solid hsl(var(--border));
+  }
+
+  /* Sale badges — dark red, refined */
+  [class*="bg-destructive"] {
+    background: hsl(0 60% 38%) !important;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-size: 0.65rem;
+  }
+
+  /* ─── Price Display ─── */
+
+  /* Gold gradient on prices */
+  [class*="font-bold"][class*="text-lg"],
+  [class*="font-bold"][class*="text-xl"],
+  [class*="font-bold"][class*="text-2xl"] {
+    background: linear-gradient(
+      135deg,
+      hsl(var(--gold-light)),
+      hsl(var(--gold)),
+      hsl(var(--gold-dark))
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Strikethrough original prices */
+  [class*="line-through"] {
+    opacity: 0.4;
+  }
+
+  /* ─── Dividers & Separators ─── */
+
+  hr {
+    border-color: hsl(var(--border) / 0.3);
+  }
+
+  /* Decorative gold separator */
+  main > section + section {
+    border-top: 1px solid hsl(var(--gold) / 0.06);
+  }
+
+  /* ─── Cart & Checkout ─── */
+
+  /* Sticky summary panel */
+  [class*="sticky"][class*="top-"] {
+    background: hsl(var(--surface));
+    border: 1px solid hsl(var(--border) / 0.5);
+  }
+}
+
+/* ─── Animations ─── */
+
+/* Elegant fade-in-up */
+@keyframes luxury-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+main > * {
+  animation: luxury-fade-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+main > *:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+main > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+main > *:nth-child(4) {
+  animation-delay: 0.3s;
+}
+
+/* Staggered grid item reveal */
+@keyframes luxury-grid-item {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[class*="grid"] > [class*="group"] {
+  animation: luxury-grid-item 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(2) {
+  animation-delay: 0.08s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(3) {
+  animation-delay: 0.16s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(4) {
+  animation-delay: 0.24s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(5) {
+  animation-delay: 0.32s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(6) {
+  animation-delay: 0.4s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(7) {
+  animation-delay: 0.48s;
+}
+
+[class*="grid"] > [class*="group"]:nth-child(8) {
+  animation-delay: 0.56s;
+}