103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import typography from '@tailwindcss/typography';
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
surface: {
|
|
950: '#0a0a08',
|
|
900: '#121210',
|
|
850: '#1a1a17',
|
|
800: '#22221e',
|
|
700: '#2e2e28',
|
|
600: '#3a3a33',
|
|
500: '#52524a',
|
|
400: '#6b6b62',
|
|
300: '#8a8a80',
|
|
200: '#b0b0a6',
|
|
100: '#d4d4cc',
|
|
50: '#f0f0eb',
|
|
},
|
|
accent: {
|
|
950: '#021c1c',
|
|
900: '#053838',
|
|
800: '#0a5454',
|
|
700: '#107070',
|
|
600: '#178c8c',
|
|
500: '#20a8a8',
|
|
400: '#38c4c4',
|
|
300: '#5ee0e0',
|
|
200: '#8aecec',
|
|
100: '#b8f4f4',
|
|
50: '#e0fafa',
|
|
},
|
|
warm: {
|
|
500: '#d4a853',
|
|
400: '#e0bc6a',
|
|
300: '#ecd08a',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
display: ['"Playfair Display"', 'Georgia', 'serif'],
|
|
body: ['"DM Sans"', 'system-ui', 'sans-serif'],
|
|
mono: ['"IBM Plex Mono"', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'7xl': ['4.5rem', { lineHeight: '1.05', letterSpacing: '-0.03em' }],
|
|
'8xl': ['6rem', { lineHeight: '1', letterSpacing: '-0.04em' }],
|
|
'9xl': ['8rem', { lineHeight: '0.95', letterSpacing: '-0.04em' }],
|
|
},
|
|
animation: {
|
|
'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
'fade-in': 'fadeIn 0.6s ease forwards',
|
|
'glow-pulse': 'glowPulse 4s ease-in-out infinite',
|
|
'scan': 'scan 8s linear infinite',
|
|
'tv-scan': 'tvScan 3s linear infinite',
|
|
'tv-flicker': 'tvFlicker 0.15s infinite',
|
|
'tv-glow': 'tvGlow 2s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
fadeUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
glowPulse: {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '0.8' },
|
|
},
|
|
scan: {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
tvScan: {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
tvFlicker: {
|
|
'0%': { opacity: '0.97' },
|
|
'5%': { opacity: '0.95' },
|
|
'10%': { opacity: '0.98' },
|
|
'15%': { opacity: '0.94' },
|
|
'20%': { opacity: '0.98' },
|
|
'50%': { opacity: '0.96' },
|
|
'80%': { opacity: '0.98' },
|
|
'90%': { opacity: '0.95' },
|
|
'100%': { opacity: '0.98' },
|
|
},
|
|
tvGlow: {
|
|
'0%, 100%': { boxShadow: '0 0 30px rgba(32, 168, 168, 0.3), 0 0 60px rgba(32, 168, 168, 0.1), inset 0 0 30px rgba(32, 168, 168, 0.05)' },
|
|
'50%': { boxShadow: '0 0 40px rgba(32, 168, 168, 0.4), 0 0 80px rgba(32, 168, 168, 0.15), inset 0 0 40px rgba(32, 168, 168, 0.08)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [typography],
|
|
};
|