Initial commit

2026-06-10 16:46:01 +00:00
commit 8452ff772e
313 changed files with 37762 additions and 0 deletions
--- a/.claude/rules/styling.md
+++ b/.claude/rules/styling.md
@@ -0,0 +1,188 @@
+---
+paths:
+  - "src/**/*.tsx"
+  - "src/**/*.css"
+---
+
+# Styling Patterns
+
+This codebase uses **custom-defined CSS variables** for all sizing, spacing, and dimensions. **DO NOT use default Tailwind classes** that are not defined in this system.
+
+---
+
+## What NOT to Use
+
+These default Tailwind classes are **NOT defined** and will not work:
+
+```tsx
+// DO NOT USE - undefined width classes
+w-xs, w-sm, w-md, w-lg, w-xl, w-2xl, w-3xl, w-4xl, w-5xl, w-6xl, w-7xl
+w-screen, w-min, w-max, w-fit (except these work)
+w-96, w-80, w-72, w-64, w-56, w-48 (fixed pixel widths)
+
+// DO NOT USE - undefined height classes
+h-screen (use h-svh instead), h-min, h-max
+h-96, h-80, h-72, h-64, h-56, h-48 (fixed pixel widths except defined ones)
+
+// DO NOT USE - undefined spacing beyond 8
+p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, etc.
+m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, etc.
+gap-9, gap-10, gap-11, gap-12, etc.
+
+// DO NOT USE - undefined border radius
+rounded-2xl, rounded-3xl (use rounded-theme or rounded-theme-capped)
+```
+
+---
+
+## What TO Use
+
+| Category | Use These | Don't Use |
+|----------|-----------|-----------|
+| **Width** | `w-5` to `w-100`, `w-content-width`, fractions | `w-xs`, `w-md`, `w-lg`, `w-96` |
+| **Height** | `h-4` to `h-12`, `h-30`, `h-90` to `h-150`, `h-svh` | `h-screen`, `h-96`, `h-80` |
+| **Padding** | `p-1` to `p-8` | `p-9`, `p-10`, `p-12`, `p-16` |
+| **Margin** | `m-1` to `m-8` | `m-9`, `m-10`, `m-12`, `m-16` |
+| **Gap** | `gap-1` to `gap-8` | `gap-9`, `gap-10`, `gap-12` |
+| **Text** | `text-2xs` to `text-9xl` | (all defined) |
+| **Radius** | `rounded-theme`, `rounded-theme-capped` | `rounded-2xl`, `rounded-3xl` |
+
+---
+
+## Spacing Scale (1-8 ONLY)
+
+All spacing uses VW-based fluid scaling. **Only values 1-8 are defined:**
+- `p-1` to `p-8`, `m-1` to `m-8`, `gap-1` to `gap-8`
+- Directional: `px-4`, `py-6`, `mx-2`, `my-4`, etc.
+
+---
+
+## Content Width (CRITICAL FOR SECTIONS)
+
+**`w-content-width`** is the most important width class - use it for all section content containers:
+
+```tsx
+// ALWAYS use w-content-width for section containers
+<section className="relative w-full">
+  <div className="w-content-width mx-auto">
+    {/* Section content goes here */}
+  </div>
+</section>
+
+<div className="w-content-width" />              // Main content width
+<div className="w-content-width-expanded" />     // Expanded (for carousels)
+```
+
+---
+
+## Width Scale
+
+| Pattern | Values | Notes |
+|---------|--------|-------|
+| `w-5` to `w-100` | Increments of 5 (5vw to 100vw) | Main width classes |
+| `w-7_5`, `w-12_5`, etc. | Increments of 2.5 | Half-step widths |
+| `w-carousel-item-3`, `w-carousel-item-4` | Carousel widths | For carousel items |
+| `w-full`, `w-1/2`, `w-1/3`, etc. | Standard fractions | Tailwind defaults work |
+
+---
+
+## Height Scale
+
+Heights use standard rem on desktop, but become vw-based on mobile (< 768px).
+
+- **Standard**: `h-4` to `h-12` (1rem to 3rem)
+- **Large**: `h-30`, `h-90` to `h-150` (for larger containers)
+- **Viewport**: Use `h-svh` instead of `h-screen`
+
+---
+
+## Text Sizes
+
+`text-2xs` to `text-9xl` - all fluid (clamp-based).
+
+Key sizes:
+- `text-base` - body text
+- `text-6xl` - section headings
+- `text-7xl`/`text-8xl` - hero headings
+
+---
+
+## Border Radius
+
+Use theme-aware classes:
+- `rounded-theme` - uses ThemeProvider setting
+- `rounded-theme-capped` - max xl
+
+---
+
+## Hero Page Padding
+
+Special padding for hero sections that accounts for navbar:
+
+```tsx
+<section className="py-hero-page-padding" />           // Standard
+<section className="py-hero-page-padding-half" />      // Half
+<section className="py-hero-page-padding-1_5" />       // 1.5x
+<section className="py-hero-page-padding-double" />    // Double
+```
+
+---
+
+## Color Variables
+
+Defined in `src/app/styles/variables.css`:
+
+```css
+--background: #f5f4ef        /* Page background */
+--card: #dad6cd              /* Card backgrounds */
+--foreground: #2a2928        /* Text color */
+--primary-cta: #2a2928       /* Primary button background */
+--primary-cta-text: #f5f4ef  /* Primary button text */
+--secondary-cta: #ecebea     /* Secondary button background */
+--secondary-cta-text: #2a2928 /* Secondary button text */
+--accent: #ffffff            /* Accent highlights, glows */
+--background-accent: #c6b180 /* Accent variant */
+```
+
+Use as Tailwind classes: `bg-background`, `text-foreground`, etc.
+
+---
+
+## Dynamic CSS Classes
+
+These classes are styled based on ThemeProvider configuration:
+
+```tsx
+<div className="card rounded-theme p-6">Card content</div>
+<button className="primary-button rounded-theme px-6 py-3">Primary</button>
+<button className="secondary-button rounded-theme px-6 py-3">Secondary</button>
+```
+
+---
+
+## Inverted Background Pattern
+
+For sections that need dark backgrounds:
+
+```typescript
+// Required prop - forces explicit choice
+useInvertedBackground: boolean
+
+// Usage in component
+<section className={cls("w-full", useInvertedBackground && "bg-foreground")}>
+  <p className={useInvertedBackground ? "text-background" : "text-foreground"}>
+    Content
+  </p>
+</section>
+```
+
+---
+
+## Using CSS Variables Directly
+
+When you need values not available as Tailwind classes:
+
+```tsx
+<div className="bottom-[calc(var(--spacing-4)+var(--spacing-4))]" />
+<div className="left-[calc(var(--vw-1)*2)]" />
+```