unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix CSS cascade layers and header layout

Browse Source 
- 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
This commit is contained in:
Unchained
2026-03-21 17:21:00 +02:00
parent 7c05bd2346
commit ec287c85ea
4 changed files with 347 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/app/globals.css
View File

@@ -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,15 +85,10 @@
}
/* ============================================
BASE STYLES
BASE STYLES (in Tailwind base layer)
============================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@layer base {
html {
scroll-behavior: smooth;
}
@@ -121,10 +103,6 @@ body {
-moz-osx-font-smoothing: grayscale;
}
/* ============================================
TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 500;
@@ -144,40 +122,27 @@ 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 {
input, textarea, select {
font-family: var(--font-body);
font-size: 16px;
}
.text-uppercase {
text-transform: uppercase;
letter-spacing: 0.05em;
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-foreground);
}
.text-caption {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
:focus-visible {
outline: 2px solid var(--color-foreground);
outline-offset: 2px;
}
.text-muted {
color: var(--color-foreground-muted);
}
.text-subtle {
color: var(--color-foreground-subtle);
}
/* ============================================
UTILITY CLASSES
COMPONENTS
============================================ */
@layer components {
.container {
width: 100%;
max-width: 1400px;
@@ -209,29 +174,6 @@ h3 {
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
============================================ */
/* Button Base */
.btn {
display: inline-flex;
align-items: center;
@@ -267,7 +209,6 @@ h3 {
border-color: var(--color-foreground);
}
/* Link underline animation */
.link-underline {
position: relative;
text-decoration: none;
@@ -288,24 +229,58 @@ h3 {
width: 100%;
}
/* ============================================
FORM ELEMENTS
============================================ */
.text-display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
}
input, textarea, select {
.text-body {
font-family: var(--font-body);
font-size: 16px;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-foreground);
.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;
}
}
/* ============================================
SCROLLBAR
UTILITIES
============================================ */
@layer utilities {
.section {
padding-top: 96px;
padding-bottom: 96px;
}
.section-sm {
padding-top: 48px;
padding-bottom: 48px;
}
::-webkit-scrollbar {
width: 8px;
}
@@ -323,41 +298,6 @@ input:focus, textarea:focus, select:focus {
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;
}
@@ -370,14 +310,24 @@ input:focus, textarea:focus, select:focus {
animation: slideInRight var(--transition-slow) forwards;
}
/* Marquee 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); }
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
@@ -388,17 +338,23 @@ input:focus, textarea:focus, select:focus {
animation: marquee 35s linear infinite;
}
/* ============================================
ACCESSIBILITY
============================================ */
/* Focus visible styles */
:focus-visible {
outline: 2px solid var(--color-foreground);
outline-offset: 2px;
.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;
}
}
/* Reduced motion */
/* ============================================
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;
}

6
src/app/page.tsx
View File

@@ -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.
</p>
{/* Newsletter Form - Centered */}
<form className="flex flex-col sm:flex-row items-center justify-center w-full sm:w-auto gap-0">
<form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
<input
type="email"
placeholder="Enter your email"
className="w-full sm:w-64 md:w-80 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left"
className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none"
/>
<button
type="submit"
className="w-full sm:w-auto px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0"
className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none"
>
Subscribe
</button>

2
src/app/products/page.tsx
View File

@@ -24,7 +24,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
<main className="min-h-screen bg-white">
{/* Page Header */}
<div className="pt-[140px] lg:pt-[160px]">
<div className="pt-[72px] lg:pt-[72px]">
<div className="border-b border-[#e5e5e5]">
<div className="container py-8 md:py-12">
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">

36
src/components/layout/Header.tsx
View File

@@ -53,11 +53,10 @@ 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"
}`}
>
<div className="container">
<div className="flex items-center justify-between h-[72px]">
<div className="relative flex items-center justify-between h-[72px]">
{/* Mobile Menu Button */}
<button
className="lg:hidden p-2 -ml-2 hover:bg-black/5 rounded-full transition-colors"
@@ -67,20 +66,8 @@ export default function Header() {
<Menu className="w-5 h-5" />
</button>
{/* Logo */}
<Link href="/" className="flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
<Image
src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
alt="ManoonOils"
width={150}
height={40}
className="h-7 w-auto object-contain"
priority
/>
</Link>
{/* Desktop Navigation - Centered */}
<nav className="hidden lg:flex items-center gap-10 mx-auto">
{/* Left side - Desktop Nav */}
<nav className="hidden lg:flex items-center gap-10">
{navLinks.map((link) => (
<Link
key={link.href}
@@ -93,7 +80,19 @@ export default function Header() {
))}
</nav>
{/* Icons */}
{/* Logo - Centered (absolute on desktop, flex on mobile) */}
<Link href="/" className="flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
<Image
src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
alt="ManoonOils"
width={150}
height={40}
className="h-7 w-auto object-contain"
priority
/>
</Link>
{/* Right side - Icons */}
<div className="flex items-center gap-1">
<button
className="p-2 hover:bg-black/5 rounded-full transition-colors hidden sm:block"
@@ -116,7 +115,6 @@ export default function Header() {
</button>
</div>
</div>
</div>
</header>
{/* Mobile Menu Overlay */}