3df875bd-3de5-46d4-bbca-c040fd6f398b/.claude/rules/styling.md

paths

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:

// 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:

// 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:

<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:

--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:

<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:

// 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:

<div className="bottom-[calc(var(--spacing-4)+var(--spacing-4))]" />
<div className="left-[calc(var(--vw-1)*2)]" />