From 5e4b4ca48f60d3fd57124176823bd7cc818fb2c9 Mon Sep 17 00:00:00 2001
From: kevin-asprec <kevin.asprec@irely.com>
Date: Tue, 17 Mar 2026 06:20:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20move=20.page-container=20into=20@layer?=
 =?UTF-8?q?=20utilities=20=E2=80=94=20resolves=20padding=20cascade=20confl?=
 =?UTF-8?q?ict?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: .page-container was declared outside any CSS layer, giving it higher
specificity than Tailwind's @layer utilities classes. This caused all py-, px-,
gap- utilities on elements that also had .page-container to be overridden.

Fix: wrap .page-container and its responsive breakpoints inside @layer utilities
so the cascade order is: base < components < utilities (correct Tailwind v4 order).
---
 src/style.css | 66 +++++++++++++++++++++++++--------------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/style.css b/src/style.css
index dea61cb..61c2876 100644
--- a/src/style.css
+++ b/src/style.css
@@ -54,46 +54,44 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 }
 
-/* ─── Base Reset ────────────────────────────────────────── */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+/* ─── Base overrides ─────────────────────────────────────── */
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
 
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  color: #475569;
-  background-color: #ffffff;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ─── Page Container ────────────────────────────────────── */
-.page-container {
-  max-width: 1440px;
-  margin-inline: auto;
-  padding-inline: 100px;
-}
-
-@media (max-width: 1280px) {
-  .page-container {
-    padding-inline: 64px;
+  body {
+    font-family: var(--font-sans);
+    color: #475569;
+    background-color: #ffffff;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 }
 
-@media (max-width: 1024px) {
+/* ─── Custom component utilities ─────────────────────────── */
+@layer utilities {
   .page-container {
-    padding-inline: 40px;
+    max-width: 1440px;
+    margin-inline: auto;
+    padding-inline: 100px;
   }
-}
 
-@media (max-width: 640px) {
-  .page-container {
-    padding-inline: 24px;
+  @media (max-width: 1280px) {
+    .page-container {
+      padding-inline: 64px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .page-container {
+      padding-inline: 40px;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .page-container {
+      padding-inline: 24px;
+    }
   }
 }