perf: remove old tailwind config and duplicate globals.css
This commit is contained in:
121
app/globals.css
121
app/globals.css
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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']);
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user