1. Font consistency: add Noto Sans as fallback for both display and body fonts so Greek characters render in the same visual weight as Latin 2. Category panel gradients: reduce top opacity 0.85 → 0.65 (20% less) 3. Mobile full-width: remove max-w cap on mobile; sm:max-w-[960px] on desktop (2× wider than before); shadow only on sm+ breakpoint 4. Smaller Add button (h-9→h-8, text-13→12) and price (22px→18px) 5. More spacing between description and footer hairline (pt-3 mt-3) 6. Square hero image in product detail sheet (aspect-square instead of h-44) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx}'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
display: ['Bricolage Grotesque', 'Noto Sans', 'system-ui', 'sans-serif'],
|
|
sans: ['Hanken Grotesk', 'Noto Sans', 'system-ui', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
dark: '#2d3b2d',
|
|
hover: '#26331f',
|
|
},
|
|
cream: '#faf7f0',
|
|
card: '#fcfbf7',
|
|
gold: '#c9a24b',
|
|
terracotta: '#c2602f',
|
|
sage: '#9caf88',
|
|
success: '#3f7d4e',
|
|
},
|
|
borderRadius: {
|
|
card: '20px',
|
|
section: '22px',
|
|
sheet: '24px',
|
|
},
|
|
boxShadow: {
|
|
card: '0 5px 16px -10px rgba(45,42,31,0.45)',
|
|
'card-hover': '0 10px 24px -12px rgba(45,42,31,0.5)',
|
|
cart: '0 12px 28px -8px rgba(45,59,45,0.55)',
|
|
},
|
|
keyframes: {
|
|
fade: { from: { opacity: 0 }, to: { opacity: 1 } },
|
|
slideup: {
|
|
from: { transform: 'translateY(100%)' },
|
|
to: { transform: 'translateY(0)' },
|
|
},
|
|
pop: {
|
|
'0%': { transform: 'scale(1)' },
|
|
'50%': { transform: 'scale(1.06)' },
|
|
'100%': { transform: 'scale(1)' },
|
|
},
|
|
},
|
|
animation: {
|
|
fade: 'fade 0.2s ease',
|
|
slideup: 'slideup 0.28s cubic-bezier(0.22,1,0.36,1)',
|
|
pop: 'pop 0.32s ease',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|