From c09fdc7e0f9b5378227cee43f49c337b6f94e10f Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 16 May 2026 03:21:49 +0200
Subject: [PATCH] refactor(calc-02): simplify display and button styling

Remove layered shadows and pressed-state transforms from the calculator UI, and update the stack copy icon markup and active feedback to match the new flat design.
---
 samples/calc-02/index.css  | 46 +++++++++++++++++++++++++-------------
 samples/calc-02/index.html |  8 +++----
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css
index 9757cf8..54017b7 100644
--- a/samples/calc-02/index.css
+++ b/samples/calc-02/index.css
@@ -58,7 +58,7 @@ body {
 	padding: 8px;
 	border-radius: 8px;
 	background: var(--panel);
-	box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 	grid-template-columns: 1fr;
 	grid-template-rows: auto auto auto auto auto;
 	row-gap: 6px;
@@ -78,14 +78,14 @@ body {
 	border-radius: 8px;
 	border: 1px solid rgba(255, 255, 255, 0.06);
 	background: rgba(6, 10, 16, 0.16);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+	box-shadow: none;
 }
 
 .display-buttons-panel {
 	border-radius: 8px;
 	border: 1px solid rgba(255, 255, 255, 0.06);
 	background: rgba(6, 10, 16, 0.16);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+	box-shadow: none;
 }
 
 .display-block {
@@ -180,7 +180,7 @@ body {
 .display-button {
 	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
 	color: #eef2f7;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
+	box-shadow: none;
 }
 
 
@@ -213,7 +213,7 @@ body {
 	border-radius: 8px;
 		background: rgba(6, 10, 16, 0.16);
 	border: 1px solid rgba(255, 255, 255, 0.08);
-	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+	box-shadow: none;
 }
 
 .mode-menu-item {
@@ -304,8 +304,8 @@ button {
 	color: var(--btnText);
 	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
 	cursor: pointer;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
-	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+	box-shadow: none;
+	transition: filter 120ms ease, opacity 120ms ease;
 	line-height: 1;
 }
 
@@ -315,14 +315,29 @@ button:hover {
 
 
 button:active {
-	transform: translateY(2px);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.25);
+	transform: none;
+	box-shadow: none;
+}
+
+.stack-copy-button:active {
+	animation: stack-copy-flash 140ms ease-out;
+}
+
+@keyframes stack-copy-flash {
+	0% {
+		opacity: 0.7;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.7;
+	}
 }
 
 
 .stack-copy-button {
 	padding: 4px;
-	border-radius: 999px;
 	min-width: 24px;
 	width: 24px;
 	height: 24px;
@@ -330,8 +345,9 @@ button:active {
 	place-items: center;
 	opacity: 0;
 	pointer-events: none;
-	transform: scale(0.9);
+	transform: scale(1);
 	background: transparent;
+	border: none;
 	box-shadow: none;
 	color: rgba(31, 42, 18, 0.58);
 	margin-left: 0;
@@ -342,9 +358,9 @@ button:active {
 }
 
 .stack-copy-button svg {
-	width: 13px;
-	height: 13px;
-	fill: currentColor;
+	width: 15px;
+	height: 15px;
+	fill: #0a0a0a;
 	display: block;
 }
 
@@ -361,7 +377,7 @@ button:active {
 }
 
 .stack-copy-button:active {
-	transform: translateY(2px) scale(1);
+	transform: scale(1);
 	color: rgba(31, 42, 18, 0.95);
 }
 
diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html
index 7247ae1..19a6c84 100644
--- a/samples/calc-02/index.html
+++ b/samples/calc-02/index.html
@@ -14,10 +14,10 @@
 					<div class="status-bar" id="statusLine" aria-live="polite"></div>
 					<div class="display-frame">
 						<div class="display-grid">
-							<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
-							<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
-							<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
-							<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
 						</div>
 					</div>
 				</div>