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>
This commit is contained in:
65
static/css/tailwind.config.js
Normal file
65
static/css/tailwind.config.js
Normal file
@@ -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: [],
|
||||
}
|
||||
Reference in New Issue
Block a user