c8fb816775
- Created complete Next.js 15 teaser website with CHORUS brand styling - Implemented mobile-responsive 3D logo (128px mobile, 512px desktop) - Added proper Exo font loading via Next.js Google Fonts for iOS/Chrome compatibility - Built comprehensive early access form with GDPR compliance and rate limiting - Integrated PostgreSQL database with complete schema for lead capture - Added scroll indicators that auto-hide when scrolling begins - Optimized mobile modal forms with proper scrolling and submit button access - Deployed via Docker Swarm with Traefik SSL termination at chorus.services - Includes database migrations, consent tracking, and email notifications 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
268 lines
8.0 KiB
JavaScript
268 lines
8.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Core Brand Colors
|
|
'carbon': {
|
|
950: '#000000',
|
|
900: '#0a0a0a',
|
|
800: '#1a1a1a',
|
|
700: '#2a2a2a',
|
|
600: '#666666',
|
|
500: '#808080',
|
|
400: '#a0a0a0',
|
|
300: '#c0c0c0',
|
|
200: '#e0e0e0',
|
|
100: '#f0f0f0',
|
|
50: '#f8f8f8'
|
|
},
|
|
'mulberry': {
|
|
950: '#0b0213',
|
|
900: '#1a1426',
|
|
800: '#2a2639',
|
|
700: '#3a384c',
|
|
600: '#4a4a5f',
|
|
500: '#5a5c72',
|
|
400: '#7a7e95',
|
|
300: '#9aa0b8',
|
|
200: '#bac2db',
|
|
100: '#dae4fe',
|
|
50: '#f0f4ff'
|
|
},
|
|
'walnut': {
|
|
950: '#1E1815',
|
|
900: '#403730',
|
|
800: '#504743',
|
|
700: '#605756',
|
|
600: '#706769',
|
|
500: '#80777c',
|
|
400: '#90878f',
|
|
300: '#a09aa2',
|
|
200: '#b0adb5',
|
|
100: '#c0c0c8',
|
|
50: '#d0d3db',
|
|
25: '#e0e6ee'
|
|
},
|
|
'nickel': {
|
|
950: '#171717',
|
|
900: '#2a2a2a',
|
|
800: '#3d3d3d',
|
|
700: '#505050',
|
|
600: '#636363',
|
|
500: '#767676',
|
|
400: '#c1bfb1',
|
|
300: '#d4d2c6',
|
|
200: '#e7e5db',
|
|
100: '#faf8f0',
|
|
50: '#fdfcf8'
|
|
},
|
|
// System Colors
|
|
'ocean': {
|
|
950: '#2a3441',
|
|
900: '#3a4654',
|
|
800: '#4a5867',
|
|
700: '#5a6c80',
|
|
600: '#6a7e99',
|
|
500: '#7a90b2',
|
|
400: '#8ba3c4',
|
|
300: '#9bb6d6',
|
|
200: '#abc9e8',
|
|
100: '#bbdcfa',
|
|
50: '#cbefff'
|
|
},
|
|
'eucalyptus': {
|
|
950: '#2a3330',
|
|
900: '#3a4540',
|
|
800: '#4a5750',
|
|
700: '#515d54',
|
|
600: '#5a6964',
|
|
500: '#6a7974',
|
|
400: '#7a8a7f',
|
|
300: '#8a9b8f',
|
|
200: '#9aac9f',
|
|
100: '#aabdaf',
|
|
50: '#bacfbf'
|
|
},
|
|
'sand': {
|
|
950: '#8E7B5E',
|
|
900: '#99886E',
|
|
800: '#A4957E',
|
|
700: '#AFA28E',
|
|
600: '#BAAF9F',
|
|
500: '#C5BCAF',
|
|
400: '#D0C9BF',
|
|
300: '#DBD6CF',
|
|
200: '#E6E3DF',
|
|
100: '#F1F0EF',
|
|
50: '#F1F0EF',
|
|
},
|
|
'coral': {
|
|
950: '#6A4A48',
|
|
900: '#7B5D5A',
|
|
800: '#8C706C',
|
|
700: '#9D8380',
|
|
600: '#AE9693',
|
|
500: '#BFAAA7',
|
|
400: '#D0BDBB',
|
|
300: '#E1D1CF',
|
|
200: '#F2E4E3',
|
|
100: '#9e979c',
|
|
50: '#aea7ac'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['var(--font-inter)', 'Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['Inconsolata', 'ui-monospace', 'monospace'],
|
|
logo: ['var(--font-exo)', 'Exo', 'Inter Tight', 'sans-serif']
|
|
},
|
|
spacing: {
|
|
'chorus-xxs': '0.854rem',
|
|
'chorus-xs': '0.945rem',
|
|
'chorus-sm': '1.0rem',
|
|
'chorus-base': '1.25rem',
|
|
'chorus-md': '1.953rem',
|
|
'chorus-lg': '2.441rem',
|
|
'chorus-xl': '3.052rem',
|
|
'chorus-xxl': '6.1rem',
|
|
},
|
|
fontSize: {
|
|
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }],
|
|
'sm': ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }],
|
|
'base': ['1rem', { lineHeight: '1.50rem', fontWeight: '400' }],
|
|
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }],
|
|
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }],
|
|
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }],
|
|
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }],
|
|
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }],
|
|
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }],
|
|
'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }],
|
|
'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }],
|
|
'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }],
|
|
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }],
|
|
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }],
|
|
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }],
|
|
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }],
|
|
'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }],
|
|
'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }],
|
|
'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }],
|
|
},
|
|
width: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
height: {
|
|
'rem-xs': '0.640rem',
|
|
'rem-sm': '0.800rem',
|
|
'rem-base': '1.000rem',
|
|
'rem-lg': '1.250rem',
|
|
'rem-xl': '1.563rem',
|
|
'rem-2xl': '1.953rem',
|
|
'rem-3xl': '2.441rem',
|
|
'rem-4xl': '3.052rem',
|
|
'rem-5xl': '3.815rem',
|
|
},
|
|
borderRadius: {
|
|
'none': '0',
|
|
'micro': '0.125rem',
|
|
'sm': '0.25rem',
|
|
'base': '0.375rem',
|
|
'md': '0.5rem',
|
|
'lg': '0.75rem',
|
|
'xl': '1rem',
|
|
'full': '9999px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.6s ease-out',
|
|
'slide-up': 'slideUp 0.8s ease-out',
|
|
'mobius-rotate': 'mobiusRotate 20s linear infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(2rem)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
mobiusRotate: {
|
|
'0%': { transform: 'rotateY(0deg) rotateX(10deg)' },
|
|
'100%': { transform: 'rotateY(360deg) rotateX(10deg)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
function({ addUtilities }) {
|
|
addUtilities({
|
|
// H7 Utility Class
|
|
'.h7': {
|
|
fontSize: '0.8rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: '700',
|
|
letterSpacing: '0.05em',
|
|
textTransform: 'uppercase'
|
|
},
|
|
|
|
// Complete H1-H7 Typography Utilities
|
|
'.text-h1': {
|
|
fontSize: '4.768rem',
|
|
lineHeight: '6.96rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-exo), Exo, Inter Tight, sans-serif'
|
|
},
|
|
'.text-h2': {
|
|
fontSize: '3.052rem',
|
|
lineHeight: '4.768rem',
|
|
fontWeight: '700',
|
|
fontFamily: 'var(--font-exo), Exo, Inter Tight, sans-serif'
|
|
},
|
|
'.text-h3': {
|
|
fontSize: '2.441rem',
|
|
lineHeight: '3.052rem',
|
|
fontWeight: '600',
|
|
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
|
},
|
|
'.text-h4': {
|
|
fontSize: '1.953rem',
|
|
lineHeight: '2.441rem',
|
|
fontWeight: '600',
|
|
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
|
},
|
|
'.text-h5': {
|
|
fontSize: '1.563rem',
|
|
lineHeight: '1.953rem',
|
|
fontWeight: '500',
|
|
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
|
},
|
|
'.text-h6': {
|
|
fontSize: '1.250rem',
|
|
lineHeight: '1.563rem',
|
|
fontWeight: '500',
|
|
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
|
},
|
|
'.text-h7': {
|
|
fontSize: '1.000rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: '400',
|
|
fontFamily: 'var(--font-inter), Inter Tight, sans-serif'
|
|
}
|
|
})
|
|
}
|
|
],
|
|
} |