From 4e4b6108ce5e1944a3da2f72f7d2fc134a6612a8 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 8 Aug 2026 14:09:50 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=81=B4=EB=A6=AD/?=
 =?UTF-8?q?=ED=84=B0=EC=B9=98=20=ED=94=BC=EB=93=9C=EB=B0=B1=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94(active)=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .Jules/palette.md |  4 ++++
 styles.css        | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a7cf4c..7134e0a 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -21,3 +21,7 @@
 ## 2024-07-15 - Expand clickable area of project cards
 **Learning:** Using an anchor tag to wrap an entire card (block-level element) can result in verbose and confusing screen reader output. However, restricting the clickable area to just the title makes the UI harder to interact with (violating Fitts's Law).
 **Action:** Apply `position: relative` to the card container and use a `::after` pseudo-element with `position: absolute; inset: 0;` on the title's anchor tag. This expands the clickable area to the whole card while keeping semantic and accessible HTML structure.
+
+## 2026-08-08 - Added active states for tactile feedback
+**Learning:** Users lack immediate visual confirmation when clicking buttons or language toggles before the resulting action or navigation occurs. This makes the interface feel unresponsive.
+**Action:** Added `:active` states with a slight `transform: scale()` reduction to buttons to simulate physical depression, providing immediate tactile feedback during interactions.
diff --git a/styles.css b/styles.css
index e3de699..a3af03f 100644
--- a/styles.css
+++ b/styles.css
@@ -108,13 +108,17 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
   opacity: 0.8;
 }
 
+.language-switch button:active {
+  transform: scale(0.95);
+}
+
 .language-switch button[aria-pressed="true"] {
   background: var(--ink);
   color: var(--white);
@@ -218,13 +222,17 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .button:hover {
   opacity: 0.8;
 }
 
+.button:active {
+  transform: scale(0.98);
+}
+
 .button.primary {
   background: var(--ink);
   color: var(--white);