diff --git a/app/globals.css b/app/globals.css deleted file mode 100644 index 7498e076b..000000000 --- a/app/globals.css +++ /dev/null @@ -1,121 +0,0 @@ -@import "tailwindcss"; -@plugin "@tailwindcss/typography"; - -@config "../tailwind.config.cjs"; - -/* E-TIB Custom Utilities */ -@layer utilities { - .text-balance { - text-wrap: balance; - } - - .hide-scrollbar { - -ms-overflow-style: none !important; /* IE and Edge */ - scrollbar-width: none !important; /* Firefox */ - } - .hide-scrollbar::-webkit-scrollbar { - display: none !important; /* Chrome, Safari and Opera */ - width: 0 !important; - height: 0 !important; - } - - @keyframes bg-pulse-15 { - 0%, 90%, 100% { opacity: 0.04; } - 95% { opacity: 0.10; filter: brightness(1.2); } - } - @keyframes bg-pulse-20 { - 0%, 90%, 100% { opacity: 0.07; } - 95% { opacity: 0.14; filter: brightness(1.2); } - } - .animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; } - .animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; } -} - -/* Base Styles */ -@layer base { - html { - scroll-behavior: smooth; - } - body { - @apply bg-neutral font-sans text-neutral-dark antialiased; - } - /* Interactive elements pointer */ - a, - button, - [role="button"], - input[type="button"], - input[type="submit"], - input[type="reset"], - select, - summary, - label[for] { - cursor: pointer; - } - - /* Ensure disabled elements don't show pointer */ - button:disabled, - [role="button"]:disabled, - input:disabled, - select:disabled, - button[disabled] { - cursor: not-allowed; - } - - /* Custom Modern Scrollbar */ - ::-webkit-scrollbar { - width: 14px; - height: 14px; - } - ::-webkit-scrollbar-track { - background: transparent; - } - ::-webkit-scrollbar-thumb { - background-color: rgba(14, 122, 92, 0.4); - border-radius: 10px; - border: 4px solid transparent; - background-clip: padding-box; - transition: background-color 0.2s ease; - } - ::-webkit-scrollbar-thumb:hover { - background-color: rgba(14, 122, 92, 0.8); - } - - /* Firefox */ - html { - scrollbar-color: rgba(14, 122, 92, 0.5) transparent; - scrollbar-width: thin; - } -} -/* trigger rebuild */ - -@layer utilities { - @keyframes hero-fade-in-up { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .animate-hero-fade-in-up { - animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; - } -} - -@layer utilities { - @keyframes hero-zoom-out { - from { - transform: scale(1.05); - } - to { - transform: scale(1); - } - } - - .animate-hero-zoom-out { - animation: hero-zoom-out 1.5s ease-out forwards; - } -} diff --git a/tailwind.config.cjs b/tailwind.config.cjs deleted file mode 100644 index de0eef4fc..000000000 --- a/tailwind.config.cjs +++ /dev/null @@ -1,226 +0,0 @@ -/* eslint-disable no-undef */ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - './app/**/*.{js,ts,jsx,tsx}', - './components/**/*.{js,ts,jsx,tsx}', - './content/**/*.{mdx,md}', - './node_modules/@mintel/annotator/dist/**/*.{js,ts,jsx,tsx,mjs}', - './node_modules/.pnpm/@mintel+annotator*/node_modules/@mintel/annotator/dist/**/*.{js,ts,jsx,tsx,mjs}' - ], - theme: { - extend: { - // Custom Breakpoints for KLZ Cables - screens: { - 'xs': '475px', - 'sm': '640px', - 'md': '768px', - 'lg': '1024px', - 'xl': '1280px', - '2xl': '1400px', - '3xl': '1600px', - }, - colors: { - // Brand Colors - primary: { - DEFAULT: '#0e7a5c', - dark: '#0a5742', - light: '#149d76', - }, - secondary: { - DEFAULT: '#194f3b', - light: '#20654c', - dark: '#13392a', - }, - accent: { - DEFAULT: '#0e7a5c', - light: '#149d76', - }, - neutral: { - DEFAULT: '#fafafa', - light: '#ffffff', - dark: '#333333', - black: '#1a1a1a', - }, - // Text Colors - text: { - primary: '#1a1a1a', - secondary: '#6c757d', - light: '#adb5bd', - }, - // Semantic Colors - success: '#28a745', - warning: '#ffc107', - danger: '#dc3545', - info: '#17a2b8', - }, - fontFamily: { - sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'], - heading: ['Inter', 'system-ui', 'sans-serif'], - body: ['Inter', 'system-ui', 'sans-serif'], - }, - // Standard Fluid Typography - // Responsive scaling is handled globally via the html selector percentage in globals.css - fontSize: { - 'xs': ['0.75rem', { lineHeight: '1.6' }], - 'sm': ['0.875rem', { lineHeight: '1.6' }], - 'base': ['1rem', { lineHeight: '1.7' }], - 'lg': ['1.125rem', { lineHeight: '1.7' }], - 'xl': ['1.25rem', { lineHeight: '1.6' }], - '2xl': ['1.5rem', { lineHeight: '1.5' }], - '3xl': ['1.875rem', { lineHeight: '1.4' }], - '4xl': ['2.25rem', { lineHeight: '1.3' }], - '5xl': ['3rem', { lineHeight: '1.25' }], - '6xl': ['3.75rem', { lineHeight: '1.2' }], - '7xl': ['4.5rem', { lineHeight: '1.15' }], - '8xl': ['6rem', { lineHeight: '1.1' }], - }, - fontWeight: { - regular: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - }, - borderRadius: { - 'sm': '0.25rem', - 'DEFAULT': '0.5rem', - 'lg': '0.75rem', - 'xl': '1rem', - '2xl': '1.5rem', - }, - boxShadow: { - 'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - 'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - 'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - 'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', - 'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', - }, - container: { - center: true, - padding: { - DEFAULT: '1rem', - sm: '1.5rem', - md: '2rem', - lg: '2.5rem', - xl: '3rem', - '2xl': '4rem', - }, - screens: { - xs: '475px', - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1400px', - '3xl': '1600px', - }, - }, - maxWidth: { - 'xs': '20rem', - 'sm': '24rem', - 'md': '28rem', - 'lg': '32rem', - 'xl': '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - }, - zIndex: { - '0': '0', - '10': '10', - '20': '20', - '30': '30', - '40': '40', - '50': '50', - 'auto': 'auto', - }, - }, - }, - plugins: [ - // Custom plugin for responsive utilities - function ({ addUtilities }) { - const newUtilities = { - // Touch target utilities - '.touch-target': { - minHeight: '44px', - minWidth: '44px', - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - }, - // Mobile-first responsive utilities - '.mobile-hidden': { - '@media (max-width: 767px)': { - display: 'none !important', - }, - }, - '.tablet-hidden': { - '@media (min-width: 768px) and (max-width: 1023px)': { - display: 'none !important', - }, - }, - '.desktop-hidden': { - '@media (min-width: 1024px)': { - display: 'none !important', - }, - }, - '.mobile-only': { - '@media (min-width: 768px)': { - display: 'none !important', - }, - }, - '.tablet-only': { - '@media (max-width: 767px), (min-width: 1024px)': { - display: 'none !important', - }, - }, - '.desktop-only': { - '@media (max-width: 1023px)': { - display: 'none !important', - }, - }, - // Fluid spacing utilities - '.fluid-spacing': { - padding: 'clamp(1rem, 3vw, 3rem)', - margin: 'clamp(0.5rem, 2vw, 2rem)', - }, - // Responsive text alignment - '.text-start-mobile': { - '@media (max-width: 767px)': { - textAlign: 'left', - }, - }, - '.text-center-mobile': { - '@media (max-width: 767px)': { - textAlign: 'center', - }, - }, - '.text-end-mobile': { - '@media (max-width: 767px)': { - textAlign: 'right', - }, - }, - // Mobile-optimized grid - '.grid-mobile-stacked': { - '@media (max-width: 767px)': { - display: 'flex', - flexDirection: 'column', - gap: '1rem', - }, - }, - // Safe area padding for mobile notch - '.safe-area-p': { - paddingTop: 'env(safe-area-inset-top)', - paddingBottom: 'env(safe-area-inset-bottom)', - paddingLeft: 'env(safe-area-inset-left)', - paddingRight: 'env(safe-area-inset-right)', - }, - }; - - addUtilities(newUtilities, ['responsive', 'hover', 'focus']); - }, - ], -} \ No newline at end of file