First Init

tailwind.config.mjs

@@ -0,0 +1,152 @@
+import typography from '@tailwindcss/typography';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    screens: {
+      'xs': '375px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#0891b2',
+          50: '#ecfeff',
+          100: '#cffafe',
+          200: '#a5f3fc',
+          300: '#67e8f9',
+          400: '#22d3ee',
+          500: '#0891b2',
+          600: '#0e7490',
+          700: '#155e75',
+          800: '#164e63',
+          900: '#083344',
+        },
+        secondary: {
+          DEFAULT: '#1e293b',
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        accent: {
+          DEFAULT: '#f59e0b',
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+      },
+      fontFamily: {
+        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'monospace'],
+      },
+      fontSize: {
+        // Display scale for hero sections
+        'display-xl': ['clamp(3rem, 8vw, 6rem)', { lineHeight: '1.05', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'display-lg': ['clamp(2.25rem, 6vw, 4.5rem)', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '700' }],
+      },
+      spacing: {
+        // Named spacers for section padding
+        'section': '6rem',        // py-24 equivalent
+        'section-sm': '4rem',     // py-16 equivalent
+        'section-lg': '8rem',     // py-32 equivalent
+      },
+      borderRadius: {
+        'card': '1rem',           // rounded-2xl (cards)
+        'card-lg': '1.5rem',      // rounded-3xl (large cards)
+      },
+      boxShadow: {
+        'card': '0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)',
+        'card-hover': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+        'primary-glow': '0 20px 25px -5px rgb(8 145 178 / 0.3)',
+        'accent-glow': '0 20px 25px -5px rgb(245 158 11 / 0.3)',
+      },
+      backgroundImage: {
+        // Named gradients for reuse
+        'hero-dark': 'linear-gradient(to bottom right, #0f172a, #1e293b, #083344)',
+        'hero-cta': 'linear-gradient(to bottom right, #0f172a, #083344, #0e7490)',
+        'primary-gradient': 'linear-gradient(to right, #0891b2, #0e7490)',
+        'primary-gradient-br': 'linear-gradient(to bottom right, #0891b2, #0e7490)',
+        'surface-gradient': 'linear-gradient(to bottom, #f8fafc, #ffffff)',
+        'card-gradient': 'linear-gradient(to bottom right, #f8fafc, #ffffff)',
+        'grid-pattern': 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
+      },
+      backgroundSize: {
+        'grid-80': '80px 80px',
+        'grid-64': '64px 64px',
+      },
+      transitionDuration: {
+        '400': '400ms',
+      },
+      animation: {
+        'slide-up': 'slide-up 0.8s ease-out forwards',
+        'fade-in': 'fade-in 0.8s ease-out forwards',
+        'pulse-slow': 'pulse-slow 4s ease-in-out infinite',
+        'pulse-slower': 'pulse-slower 6s ease-in-out infinite',
+        'float': 'float 3s ease-in-out infinite',
+        'spin-slow': 'spin 8s linear infinite',
+        'wiggle': 'wiggle 0.5s ease-in-out',
+        'ping-slow': 'ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite',
+        'shimmer': 'shimmer 2s linear infinite',
+        'gradient-shift': 'gradient-shift 6s ease infinite',
+      },
+      keyframes: {
+        'slide-up': {
+          from: { opacity: '0', transform: 'translateY(30px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'pulse-slow': {
+          '0%, 100%': { opacity: '0.4' },
+          '50%': { opacity: '0.6' },
+        },
+        'pulse-slower': {
+          '0%, 100%': { opacity: '0.2' },
+          '50%': { opacity: '0.4' },
+        },
+        'float': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-8px)' },
+        },
+        'wiggle': {
+          '0%, 100%': { transform: 'rotate(0deg)' },
+          '25%': { transform: 'rotate(-6deg)' },
+          '75%': { transform: 'rotate(6deg)' },
+        },
+        'gradient-shift': {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
+      },
+      maxWidth: {
+        'content': '65ch',        // Optimal reading width
+      },
+      lineHeight: {
+        'display': '1.05',
+        'heading': '1.2',
+      },
+    },
+  },
+  plugins: [typography],
+};