feat(marketing): bootstrap Tailwind v4 + design tokens FlexiHub

Adds Tailwind v4 / PostCSS pipeline that compiles to static/css/marketing.css,
to be loaded only by future templates/marketing/** templates and to coexist
with the existing legacy v3 JIT runtime used by index.html / account.html /
admin.html. The legacy v3 runtime stays untouched.

- package.json: postcss-cli build:css and watch:css scripts
- postcss.config.js: @tailwindcss/postcss + autoprefixer
- static/css/tailwind.config.js: brand tokens (b1/b2/b3, navy, navy2, navy3,
  bg, border), font families, brand-grad, cta shadows, FlexiHub keyframes
  (tc-fade-in-up/right, tc-float-y, tc-pulse-glow, plus-breathe). content
  paths scoped to marketing/legal/billing/macros only - purge cannot touch
  legacy templates.
- static/css/input.css: @import "tailwindcss"; + @config directive (Tailwind
  v4 backward-compat for v3-style JS config). @font-face Inter Variable +
  JetBrains Mono Variable (woff2). base layer body font/color, h1-h3
  letter-spacing. utilities: grad-text, grad-bg, eyebrow.
- Dockerfile: new stage 3 'assets-builder' (node:20-alpine) compiles CSS;
  runtime stage copies the built file in via --from=assets-builder, after
  COPY . . so the freshly-built file always wins.
- .gitignore + .dockerignore: exclude node_modules.

Build verified locally: marketing.css = 121 KB minified (Tailwind v4 ships
all default theme tokens + reset properties even with empty content;
realistic baseline, will not grow much as marketing markup is added).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.dockerignore

@@ -48,6 +48,7 @@ tests/
 .claude/
 .migrate/
 .github/
+node_modules/
 
 # IDE and editor files
 .idea/

.gitignore

@@ -1,5 +1,6 @@
 .playwright-mcp/
 venv/
+node_modules/
 __pycache__/
 instance/
 uploads/

Dockerfile

@@ -43,7 +43,17 @@ RUN apt-get update && apt-get install -y --no-install-recommends wget xz-utils \
     && rm -rf /tmp/ff.tar.xz /tmp/ffmpeg-dir
 
 ###############################################################################
-# Stage 3: Runtime — lean final image with only what's needed
+# Stage 3: Assets builder — compile Tailwind v4 marketing CSS
+###############################################################################
+FROM node:20-alpine AS assets-builder
+WORKDIR /app
+COPY package.json postcss.config.js ./
+COPY static/css ./static/css
+COPY templates ./templates
+RUN npm install --no-audit --no-fund && npm run build:css
+
+###############################################################################
+# Stage 4: Runtime — lean final image with only what's needed
 ###############################################################################
 FROM python:3.11-slim
 
@@ -62,6 +72,9 @@ COPY --from=builder /app/static/vendor /app/static/vendor
 # Copy application code
 COPY . .
 
+# Copy compiled marketing CSS (overrides any stale file from `COPY . .`)
+COPY --from=assets-builder /app/static/css/marketing.css /app/static/css/marketing.css
+
 # Create necessary directories
 RUN mkdir -p /data/uploads /data/instance && chmod 755 /data/uploads /data/instance
 

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "dictia-marketing",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build:css": "postcss static/css/input.css -o static/css/marketing.css --minify",
+    "watch:css": "postcss static/css/input.css -o static/css/marketing.css --watch"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "autoprefixer": "^10.4.19"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  }
+}

static/css/input.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+@config "./tailwind.config.js";
+
+@layer base {
+  @font-face {
+    font-family: 'Inter Variable';
+    src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations');
+    font-weight: 100 900;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'JetBrains Mono Variable';
+    src: url('/static/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
+    font-weight: 100 800;
+    font-display: swap;
+  }
+  body {
+    @apply font-sans bg-white text-brand-navy antialiased;
+  }
+  h1, h2, h3 { @apply font-black; letter-spacing: -2.5px; }
+  h1 { letter-spacing: -3px; }
+}
+
+@layer utilities {
+  .grad-text {
+    @apply bg-brand-grad bg-clip-text text-transparent;
+  }
+  .grad-bg {
+    @apply bg-brand-grad text-white;
+  }
+  .eyebrow {
+    @apply text-[11px] uppercase font-bold tracking-[0.18em];
+  }
+}

static/css/tailwind.config.js

@@ -0,0 +1,65 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./templates/marketing/**/*.html', './templates/legal/**/*.html', './templates/billing/**/*.html', './templates/macros/**/*.html', './src/marketing/**/*.py', './src/legal/**/*.py', './src/billing/**/*.py'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          b1: '#0062ff',
+          b2: '#00bdd8',
+          b3: '#00c896',
+          navy: '#060d1a',
+          navy2: '#0b1525',
+          navy3: '#0f1e35',
+          bg: '#f7f9fc',
+          border: '#e6ebf2',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter Variable', 'Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono Variable', 'JetBrains Mono', 'monospace'],
+      },
+      backgroundImage: {
+        'brand-grad': 'linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896)',
+      },
+      boxShadow: {
+        'cta': '0 4px 20px rgba(0, 98, 255, 0.28)',
+        'cta-hover': '0 8px 32px rgba(0, 98, 255, 0.42)',
+      },
+      borderRadius: {
+        DEFAULT: '0.75rem',
+      },
+      keyframes: {
+        'tc-fade-in-up': {
+          '0%': { opacity: '0', transform: 'translateY(16px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'tc-fade-in-right': {
+          '0%': { opacity: '0', transform: 'translateX(-16px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        'tc-float-y': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-8px)' },
+        },
+        'tc-pulse-glow': {
+          '0%, 100%': { boxShadow: '0 4px 20px rgba(0, 98, 255, 0.28)' },
+          '50%': { boxShadow: '0 8px 32px rgba(0, 98, 255, 0.42)' },
+        },
+        'plus-breathe': {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.05)' },
+        },
+      },
+      animation: {
+        'tc-fade-in-up': 'tc-fade-in-up 600ms ease-out forwards',
+        'tc-fade-in-right': 'tc-fade-in-right 600ms ease-out forwards',
+        'tc-float-y': 'tc-float-y 4s ease-in-out infinite',
+        'tc-pulse-glow': 'tc-pulse-glow 3s ease-in-out infinite',
+        'plus-breathe': 'plus-breathe 2s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [],
+}