Submatter/apps/web/styles/marketing.css

/* Submatter marketing — Signal Editorial (ui-ux-pro-max: Swiss + interactive demo + bold type) */

.marketing-theme {
  --background: 40 18% 96%;
  --foreground: 220 20% 8%;

  --card: 0 0% 100%;
  --card-foreground: 220 20% 8%;

  --primary: 228 45% 22%;
  --primary-foreground: 40 20% 98%;

  --matter: 32 95% 52%;
  --matter-foreground: 220 20% 8%;

  --agent: 162 72% 38%;
  --agent-foreground: 0 0% 100%;

  --secondary: 40 12% 92%;
  --secondary-foreground: 220 20% 8%;

  --muted: 40 10% 93%;
  --muted-foreground: 220 8% 42%;

  --accent: 228 30% 94%;
  --accent-foreground: 228 45% 22%;

  --border: 40 8% 86%;
  --input: 40 8% 86%;
  --ring: 32 95% 52%;

  --hero: 240 6% 4%;
  --hero-foreground: 40 15% 96%;
  --hero-muted: 240 4% 55%;
  --hero-border: 240 4% 14%;

  --radius: 0.375rem;

  color-scheme: light;
}

.marketing-theme .font-display {
  font-family: var(--font-display), system-ui, sans-serif;
}

.marketing-theme .font-marketing {
  font-family: var(--font-marketing-sans), system-ui, sans-serif;
}

.marketing-theme .font-mono-brand {
  font-family: var(--font-mono-brand), ui-monospace, monospace;
}

/* Dot field (React Bits–style ambient grid) */
.marketing-dot-field {
  background-image: radial-gradient(
    circle at center,
    hsl(var(--hero-foreground) / 0.12) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 75%);
}

.marketing-scanline {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsl(var(--hero-foreground) / 0.02) 2px,
    hsl(var(--hero-foreground) / 0.02) 4px
  );
  pointer-events: none;
}

/* Border glow card (React Bits Border Glow–inspired) */
.marketing-glow-card {
  position: relative;
  background: hsl(var(--card));
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.marketing-glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    hsl(var(--matter) / 0),
    hsl(var(--matter) / 0.35),
    hsl(var(--agent) / 0.2),
    hsl(var(--matter) / 0)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.marketing-glow-card:hover::before,
.marketing-glow-card:focus-within::before {
  opacity: 1;
}

.marketing-glow-card:hover {
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 12px 40px -12px hsl(var(--foreground) / 0.12);
}

@keyframes marketing-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.marketing-cursor-blink {
  animation: marketing-blink 1.1s step-end infinite;
}

@keyframes marketing-pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}

.marketing-pulse-dot {
  animation: marketing-pulse-dot 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-cursor-blink,
  .marketing-pulse-dot {
    animation: none;
  }

  .marketing-glow-card::before {
    transition: none;
  }
}