nipponboardspt 2.0.0

package/src/styles.css

@@ -0,0 +1,259 @@
+@import "tailwindcss" source(none);
+@source "../src";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Design system definition.
+ *
+ * The @theme inline block maps CSS custom properties to Tailwind utility
+ * classes (e.g. --color-primary -> bg-primary, text-primary).
+ *
+ * The :root and .dark blocks define the actual color values using oklch.
+ * All colors MUST use oklch format.
+ *
+ * To add a new semantic color:
+ * 1. Add the variable to :root (light value) and .dark (dark value)
+ * 2. Register it in @theme inline as --color-<name>: var(--<name>)
+ */
+
+@theme inline {
+  --font-sans: "Manrope", sans-serif;
+  --font-display: "Space Grotesk", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-ring-offset-background: var(--background);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-hero: var(--hero);
+  --color-hero-foreground: var(--hero-foreground);
+  --color-hero-muted: var(--hero-muted);
+  --color-surface: var(--surface);
+  --color-primary-bright: var(--primary-bright);
+  --shadow-action: var(--shadow-action);
+  --shadow-form: var(--shadow-form);
+}
+
+:root {
+  --radius: 0.25rem;
+  --background: oklch(0.985 0.003 90);
+  --foreground: oklch(0.18 0.005 255);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.56 0.22 26);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.48 0.01 255);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.984 0.003 247.858);
+  --border: oklch(0.86 0.006 255);
+  --input: oklch(0.86 0.006 255);
+  --ring: oklch(0.56 0.22 26);
+  --hero: oklch(0.16 0.006 255);
+  --hero-foreground: oklch(0.97 0.003 90);
+  --hero-muted: oklch(0.72 0.008 255);
+  --surface: oklch(0.955 0.005 90);
+  --primary-bright: oklch(0.65 0.24 27);
+  --shadow-action: 0 10px 26px -14px color-mix(in oklab, var(--primary) 75%, transparent);
+  --shadow-form: 0 24px 70px -50px color-mix(in oklab, var(--foreground) 55%, transparent);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.984 0.003 247.858);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    letter-spacing: 0;
+    scroll-behavior: smooth;
+  }
+
+  button, a, input, select, textarea { letter-spacing: 0; }
+  ::selection { background: var(--primary); color: var(--primary-foreground); }
+}
+
+@utility hero-overlay {
+  background: linear-gradient(90deg, color-mix(in oklab, var(--hero) 98%, transparent) 0%, color-mix(in oklab, var(--hero) 89%, transparent) 44%, color-mix(in oklab, var(--hero) 20%, transparent) 78%), linear-gradient(0deg, color-mix(in oklab, var(--hero) 88%, transparent) 0%, transparent 45%);
+}
+
+@utility section-light {
+  background-color: var(--background);
+  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
+  background-size: 64px 64px;
+  background-position: -1px -1px;
+}
+
+@utility eyebrow {
+  margin-bottom: 1rem;
+  font-size: 0.72rem;
+  line-height: 1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--primary);
+}
+
+@utility section-title {
+  font-family: var(--font-display);
+  font-size: clamp(2.2rem, 5vw, 4.5rem);
+  line-height: 1.05;
+  font-weight: 600;
+}
+
+@utility nav-link {
+  position: relative;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--hero-muted);
+  transition: color 180ms ease;
+  &:hover { color: var(--hero-foreground); }
+}
+
+@utility brand {
+  display: inline-flex;
+  align-items: baseline;
+  color: var(--foreground);
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  line-height: 1;
+  font-weight: 700;
+  white-space: nowrap;
+  & small { margin-left: 0.25rem; font-size: 0.78rem; font-weight: 400; color: var(--muted-foreground); }
+}
+
+@utility brand-light {
+  color: var(--hero-foreground);
+  & small { color: var(--hero-muted); }
+}
+
+@utility brand-disc {
+  display: inline-block;
+  width: 0.78em;
+  height: 0.78em;
+  margin-inline: 0.04em;
+  border-radius: 999px;
+  background: var(--primary);
+}
+
+@utility specialty-card {
+  min-height: 18rem;
+  transition: background-color 220ms ease;
+  &:hover { background-color: var(--surface); }
+}
+
+@utility field {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.55rem;
+  & > span:first-child { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--foreground); }
+  & input, & textarea, & select { width: 100%; border: 1px solid var(--input); border-radius: 0; background: var(--background); padding: 0.78rem 0.9rem; font-size: 0.9rem; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
+  & input:focus, & textarea:focus, & select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, transparent); }
+  & textarea { resize: vertical; }
+}
+
+@utility field-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
+@utility select-wrap { position: relative; display: flex; align-items: center; & svg { pointer-events: none; position: absolute; right: 0.8rem; color: var(--muted-foreground); } & select { appearance: none; } }
+@utility radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; & input { accent-color: var(--primary); } }
+@utility upload-box { display: flex; min-height: 8rem; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; border: 1px dashed var(--input); background: var(--surface); padding: 1rem; text-align: center; transition: border-color 180ms ease; &:hover { border-color: var(--primary); } & strong { font-size: 0.85rem; } & small { color: var(--muted-foreground); } }
+@utility faq-item { & summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; } & summary::-webkit-details-marker { display: none; } & p { max-width: 42rem; padding: 0 2rem 1.5rem 0; line-height: 1.75; color: var(--muted-foreground); } &[open] .faq-plus { transform: rotate(45deg); color: var(--primary); } }
+@utility faq-plus { font-size: 1.5rem; font-weight: 300; transition: transform 180ms ease; }
+@utility footer-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--hero-foreground); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "eslint.config.js"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,15 @@
+// @lovable.dev/vite-tanstack-config already includes the following — do NOT add them manually
+// or the app will break with duplicate plugins:
+//   - TanStack devtools (dev-only, first), tanstackStart, viteReact, tailwindcss, tsConfigPaths,
+//     nitro (build-only using cloudflare as a default target), VITE_* env injection, @ path alias,
+//     React/TanStack dedupe, error logger plugins, and sandbox detection (port/host/strictPort).
+// You can pass additional config via defineConfig({ vite: { ... }, etc... }) if needed.
+import { defineConfig } from "@lovable.dev/vite-tanstack-config";
+
+export default defineConfig({
+  tanstackStart: {
+    // Redirect TanStack Start's bundled server entry to src/server.ts (our SSR error wrapper).
+    // nitro/vite builds from this
+    server: { entry: "server" },
+  },
+});