From ec287c85eaddca55a89c7809f4619f6b4638426e Mon Sep 17 00:00:00 2001 From: Unchained Date: Sat, 21 Mar 2026 17:21:00 +0200 Subject: [PATCH] Fix CSS cascade layers and header layout - Rewrite globals.css to work properly with Tailwind 4 cascade layers - Remove conflicting * { padding: 0 } reset that broke Tailwind utilities - Organize styles into @layer base, @layer components, @layer utilities - Fix newsletter centering (was off due to CSS layer conflicts) - Fix header overlap on products pages (proper pt-[72px] spacing) - Add solid header background (bg-white/80) instead of transparent - Fix logo/nav positioning on desktop Verified fixes with Playwright screenshots at 1280x800 and 390x844 --- src/app/globals.css | 635 ++++++++++++++----------------- src/app/page.tsx | 6 +- src/app/products/page.tsx | 2 +- src/components/layout/Header.tsx | 110 +++--- 4 files changed, 347 insertions(+), 406 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 263b147..389ff88 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,61 +2,11 @@ /* ============================================ MANOONOILS DESIGN SYSTEM - Inspired by premium skincare brands + Tailwind 4 compatible - uses CSS layers ============================================ */ -:root { - /* Primary Colors */ - --color-white: #ffffff; - --color-background: #fafafa; - --color-background-alt: #f5f5f5; - --color-foreground: #1a1a1a; - --color-foreground-muted: #666666; - --color-foreground-subtle: #999999; - - /* Accent Colors */ - --color-accent: #e8f0f5; - --color-accent-dark: #a8c5d8; - --color-accent-blue: #e8f0f5; - --color-gold: #c9a962; - --color-gold-light: #d4b978; - - /* UI Colors */ - --color-border: #e5e5e5; - --color-border-dark: #d1d1d1; - --color-cta: #000000; - --color-cta-hover: #333333; - --color-overlay: rgba(0, 0, 0, 0.4); - - /* Spacing */ - --space-xs: 4px; - --space-sm: 8px; - --space-md: 16px; - --space-lg: 24px; - --space-xl: 32px; - --space-2xl: 48px; - --space-3xl: 64px; - --space-4xl: 96px; - --space-5xl: 128px; - - /* Typography */ - --font-display: 'DM Sans', sans-serif; - --font-body: 'Inter', sans-serif; - - /* Transitions */ - --transition-fast: 150ms ease; - --transition-base: 250ms ease; - --transition-slow: 350ms ease; - - /* Shadows */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); -} - @theme inline { - /* Colors - reference :root variables */ + /* Colors - reference CSS variables */ --color-white: var(--color-white); --color-background: var(--color-background); --color-background-alt: var(--color-background-alt); @@ -79,6 +29,43 @@ --font-body: var(--font-body); } +/* ============================================ + CSS VARIABLES + ============================================ */ + +:root { + --color-white: #ffffff; + --color-background: #fafafa; + --color-background-alt: #f5f5f5; + --color-foreground: #1a1a1a; + --color-foreground-muted: #666666; + --color-foreground-subtle: #999999; + + --color-accent: #e8f0f5; + --color-accent-dark: #a8c5d8; + --color-accent-blue: #e8f0f5; + --color-gold: #c9a962; + --color-gold-light: #d4b978; + + --color-border: #e5e5e5; + --color-border-dark: #d1d1d1; + --color-cta: #000000; + --color-cta-hover: #333333; + --color-overlay: rgba(0, 0, 0, 0.4); + + --font-display: 'DM Sans', sans-serif; + --font-body: 'Inter', sans-serif; + + --transition-fast: 150ms ease; + --transition-base: 250ms ease; + --transition-slow: 350ms ease; + + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + /* ============================================ FONT IMPORTS ============================================ */ @@ -98,307 +85,276 @@ } /* ============================================ - BASE STYLES + BASE STYLES (in Tailwind base layer) ============================================ */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - scroll-behavior: smooth; -} - -body { - background: var(--color-background); - color: var(--color-foreground); - font-family: var(--font-body); - font-size: 16px; - line-height: 1.6; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +@layer base { + html { + scroll-behavior: smooth; + } + + body { + background: var(--color-background); + color: var(--color-foreground); + font-family: var(--font-body); + font-size: 16px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: 500; + line-height: 1.2; + letter-spacing: -0.02em; + } + + h1 { + font-size: clamp(2rem, 5vw, 3.5rem); + } + + h2 { + font-size: clamp(1.5rem, 4vw, 2.5rem); + } + + h3 { + font-size: clamp(1.25rem, 3vw, 1.75rem); + } + + input, textarea, select { + font-family: var(--font-body); + font-size: 16px; + } + + input:focus, textarea:focus, select:focus { + outline: none; + border-color: var(--color-foreground); + } + + :focus-visible { + outline: 2px solid var(--color-foreground); + outline-offset: 2px; + } } /* ============================================ - TYPOGRAPHY + COMPONENTS ============================================ */ -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-display); - font-weight: 500; - line-height: 1.2; - letter-spacing: -0.02em; -} - -h1 { - font-size: clamp(2rem, 5vw, 3.5rem); -} - -h2 { - font-size: clamp(1.5rem, 4vw, 2.5rem); -} - -h3 { - font-size: clamp(1.25rem, 3vw, 1.75rem); -} - -.text-display { - font-family: var(--font-display); - font-weight: 500; - letter-spacing: -0.02em; -} - -.text-body { - font-family: var(--font-body); -} - -.text-uppercase { - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.text-caption { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.1em; - font-weight: 500; -} - -.text-muted { - color: var(--color-foreground-muted); -} - -.text-subtle { - color: var(--color-foreground-subtle); -} - -/* ============================================ - UTILITY CLASSES - ============================================ */ - -.container { - width: 100%; - max-width: 1400px; - margin-left: auto; - margin-right: auto; - padding-left: 24px; - padding-right: 24px; -} - -@media (min-width: 640px) { +@layer components { .container { - padding-left: 32px; - padding-right: 32px; + width: 100%; + max-width: 1400px; + margin-left: auto; + margin-right: auto; + padding-left: 24px; + padding-right: 24px; } -} - -@media (min-width: 1024px) { - .container { - padding-left: 48px; - padding-right: 48px; + + @media (min-width: 640px) { + .container { + padding-left: 32px; + padding-right: 32px; + } + } + + @media (min-width: 1024px) { + .container { + padding-left: 48px; + padding-right: 48px; + } + } + + .container-narrow { + max-width: 1200px; + } + + .container-wide { + max-width: 1600px; + } + + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 32px; + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + border: none; + cursor: pointer; + transition: all var(--transition-base); + } + + .btn-primary { + background: var(--color-cta); + color: var(--color-white); + } + + .btn-primary:hover { + background: var(--color-cta-hover); + } + + .btn-secondary { + background: transparent; + color: var(--color-foreground); + border: 1px solid var(--color-border-dark); + } + + .btn-secondary:hover { + background: var(--color-foreground); + color: var(--color-white); + border-color: var(--color-foreground); + } + + .link-underline { + position: relative; + text-decoration: none; + } + + .link-underline::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 0; + height: 1px; + background: currentColor; + transition: width var(--transition-base); + } + + .link-underline:hover::after { + width: 100%; + } + + .text-display { + font-family: var(--font-display); + font-weight: 500; + letter-spacing: -0.02em; + } + + .text-body { + font-family: var(--font-body); + } + + .text-uppercase { + text-transform: uppercase; + letter-spacing: 0.05em; + } + + .text-caption { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.1em; + font-weight: 500; + } + + .text-muted { + color: var(--color-foreground-muted); + } + + .text-subtle { + color: var(--color-foreground-subtle); + } + + .flex-center { + display: flex; + align-items: center; + justify-content: center; } -} - -.container-narrow { - max-width: 1200px; -} - -.container-wide { - max-width: 1600px; -} - -/* Section spacing */ -.section { - padding-top: var(--space-4xl); - padding-bottom: var(--space-4xl); -} - -.section-sm { - padding-top: var(--space-2xl); - padding-bottom: var(--space-2xl); -} - -/* Flex utilities */ -.flex-center { - display: flex; - align-items: center; - justify-content: center; } /* ============================================ - INTERACTIVE ELEMENTS + UTILITIES ============================================ */ -/* Button Base */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 14px 32px; - font-size: 13px; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.05em; - border: none; - cursor: pointer; - transition: all var(--transition-base); -} - -.btn-primary { - background: var(--color-cta); - color: var(--color-white); -} - -.btn-primary:hover { - background: var(--color-cta-hover); -} - -.btn-secondary { - background: transparent; - color: var(--color-foreground); - border: 1px solid var(--color-border-dark); -} - -.btn-secondary:hover { - background: var(--color-foreground); - color: var(--color-white); - border-color: var(--color-foreground); -} - -/* Link underline animation */ -.link-underline { - position: relative; - text-decoration: none; -} - -.link-underline::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - width: 0; - height: 1px; - background: currentColor; - transition: width var(--transition-base); -} - -.link-underline:hover::after { - width: 100%; +@layer utilities { + .section { + padding-top: 96px; + padding-bottom: 96px; + } + + .section-sm { + padding-top: 48px; + padding-bottom: 48px; + } + + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--color-background-alt); + } + + ::-webkit-scrollbar-thumb { + background: var(--color-border-dark); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: var(--color-foreground-muted); + } + + .animate-fade-in { + animation: fadeIn var(--transition-slow) forwards; + } + + .animate-slide-up { + animation: slideUp var(--transition-slow) forwards; + } + + .animate-slide-in-right { + animation: slideInRight var(--transition-slow) forwards; + } + + @keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes slideUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } + } + + @keyframes slideInRight { + from { opacity: 0; transform: translateX(100%); } + to { opacity: 1; transform: translateX(0); } + } + + @keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } + } + + .animate-marquee { + animation: marquee 25s linear infinite; + } + + .animate-marquee-slow { + animation: marquee 35s linear infinite; + } + + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } } /* ============================================ - FORM ELEMENTS + REDUCED MOTION ============================================ */ -input, textarea, select { - font-family: var(--font-body); - font-size: 16px; -} - -input:focus, textarea:focus, select:focus { - outline: none; - border-color: var(--color-foreground); -} - -/* ============================================ - SCROLLBAR - ============================================ */ - -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: var(--color-background-alt); -} - -::-webkit-scrollbar-thumb { - background: var(--color-border-dark); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--color-foreground-muted); -} - -/* ============================================ - ANIMATIONS - ============================================ */ - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes slideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(100%); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.animate-fade-in { - animation: fadeIn var(--transition-slow) forwards; -} - -.animate-slide-up { - animation: slideUp var(--transition-slow) forwards; -} - -.animate-slide-in-right { - animation: slideInRight var(--transition-slow) forwards; -} - -/* Marquee Animations */ -@keyframes marquee { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.animate-marquee { - animation: marquee 25s linear infinite; -} - -.animate-marquee-slow { - animation: marquee 35s linear infinite; -} - -/* ============================================ - ACCESSIBILITY - ============================================ */ - -/* Focus visible styles */ -:focus-visible { - outline: 2px solid var(--color-foreground); - outline-offset: 2px; -} - -/* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, @@ -412,16 +368,3 @@ input:focus, textarea:focus, select:focus { scroll-behavior: auto; } } - -/* Screen reader only */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} diff --git a/src/app/page.tsx b/src/app/page.tsx index d282e65..bd877d5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -162,15 +162,15 @@ export default async function Homepage() { Subscribe to receive exclusive offers, beauty tips, and be the first to know about new products.

{/* Newsletter Form - Centered */} -
+ diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx index 547906e..bcdd9df 100644 --- a/src/app/products/page.tsx +++ b/src/app/products/page.tsx @@ -24,7 +24,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
{/* Page Header */} -
+
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 3a8bacc..e42e7ea 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -53,68 +53,66 @@ export default function Header() { className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${ scrolled ? "bg-white/95 backdrop-blur-md shadow-sm" - : "bg-transparent" + : "bg-white/80 backdrop-blur-sm" }`} > -
-
- {/* Mobile Menu Button */} +
+ {/* Mobile Menu Button */} + + + {/* Left side - Desktop Nav */} + + + {/* Logo - Centered (absolute on desktop, flex on mobile) */} + + ManoonOils + + + {/* Right side - Icons */} +
- {/* Logo */} - - ManoonOils - - - {/* Desktop Navigation - Centered */} - - - {/* Icons */} -
- - - -
+