From bea54d0543444bf2e14b69dff86a1658806ba4ec Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 21:22:35 +0000 Subject: [PATCH 1/7] Add 3D crease between screen and buttons for realistic look - Add crease divider element between screen-container and keys with gradient, inset shadows, and highlight/shadow edge lines for depth - Enhance LCD screen with greenish gradient and inset shadow to mimic a real calculator display - Add subtle text-shadow on logo and style the model number (7000) with letter-spacing and muted color https://claude.ai/code/session_018YY3VUuyZabdjgoiyzGu7Y --- .../Calculators/BasicCalculator.tsx | 1 + src/styles/calculator.scss | 47 ++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/components/Calculators/BasicCalculator.tsx b/src/components/Calculators/BasicCalculator.tsx index f78227b..4ca14c7 100644 --- a/src/components/Calculators/BasicCalculator.tsx +++ b/src/components/Calculators/BasicCalculator.tsx @@ -192,6 +192,7 @@ const BasicCalculator = () => { +
diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index e2b57b2..fe9c8f0 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -84,10 +84,14 @@ button:focus { > p { font-size: 32px; font-weight: bold; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } > h4 { margin-top: -8px; + letter-spacing: 2px; + font-size: 11px; + color: darken($primary-bland, 40%); } } @@ -133,8 +137,12 @@ button:focus { padding: 8px; height: 60px; border-radius: 4px; - background: gray; + background: linear-gradient(to bottom, #a8b0a0, #b8c0b0 30%, #c0c8b8 70%, #a8b0a0); border: 1px solid $primary_black; + box-shadow: + inset 0 2px 6px rgba(0, 0, 0, 0.4), + inset 0 -1px 2px rgba(0, 0, 0, 0.15), + 0 1px 0 rgba(255, 255, 255, 0.2); display: flex; align-items: flex-end; justify-content: flex-end; @@ -149,6 +157,43 @@ button:focus { background-color: $primary-bland; } +.basic > .crease { + width: 100%; + height: 6px; + position: relative; + background: linear-gradient( + to bottom, + darken($primary-bland, 12%) 0%, + darken($primary-bland, 18%) 40%, + darken($primary-bland, 8%) 60%, + $primary-bland 100% + ); + box-shadow: + inset 0 1px 3px rgba(0, 0, 0, 0.35), + inset 0 -1px 2px rgba(255, 255, 255, 0.25), + 0 2px 4px rgba(0, 0, 0, 0.15); + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: rgba(0, 0, 0, 0.2); + } + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: rgba(255, 255, 255, 0.3); + } +} + .basic > .basic-keys-container { background-color: $primary-bland; display: flex; From c99b2a24391f215399624b4a09469614699fdafa Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 21:38:00 +0000 Subject: [PATCH 2/7] Style 3D buttons with hover/active states and fix crease color - Replace blanchedalmond-derived crease gradient with neutral rgba tones to remove the yellow/orange tint - Add 3D box-shadow to all calculator buttons (number keys, operator keys, and bottom-container buttons) for a raised look - Add hover state with slightly enhanced shadow - Add active state that translates buttons down and flattens shadow to simulate physical button depression - Add brightness filter on top-row operator button hover/active https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 81 +++++++++++++++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 6 deletions(-) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index fe9c8f0..31c31cb 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -163,10 +163,10 @@ button:focus { position: relative; background: linear-gradient( to bottom, - darken($primary-bland, 12%) 0%, - darken($primary-bland, 18%) 40%, - darken($primary-bland, 8%) 60%, - $primary-bland 100% + rgba(0, 0, 0, 0.15) 0%, + rgba(0, 0, 0, 0.25) 40%, + rgba(0, 0, 0, 0.10) 60%, + rgba(255, 255, 255, 0.05) 100% ); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), @@ -180,7 +180,7 @@ button:focus { left: 0; right: 0; height: 1px; - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.25); } &::after { @@ -190,7 +190,7 @@ button:focus { left: 0; right: 0; height: 1px; - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.2); } } @@ -209,6 +209,14 @@ button:focus { > button { border-radius: 4px; height: 65%; + + &:hover { + filter: brightness(1.1); + } + + &:active { + filter: brightness(0.95); + } } } @@ -221,6 +229,26 @@ button:focus { > button { flex: 1; margin: 4px; + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.4), + 0 4px 6px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + transition: box-shadow 0.1s ease, transform 0.1s ease; + + &:hover { + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.45), + 0 5px 8px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } + + &:active { + transform: translateY(2px); + box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.4), + 0 1px 2px rgba(0, 0, 0, 0.2), + inset 0 1px 3px rgba(0, 0, 0, 0.15); + } } } @@ -258,6 +286,27 @@ button:focus { transform: skewX(-4deg); font-size: 42px; flex: 1; + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.4), + 0 4px 6px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + transition: box-shadow 0.1s ease, transform 0.1s ease; + + &:hover { + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.45), + 0 5px 8px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + brightness: 1.05; + } + + &:active { + transform: skewX(-4deg) translateY(2px); + box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.4), + 0 1px 2px rgba(0, 0, 0, 0.2), + inset 0 1px 3px rgba(0, 0, 0, 0.15); + } } .basic-arithmetic { @@ -300,6 +349,26 @@ button:focus { > button { flex: 0.208; margin: 4px; + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.4), + 0 4px 6px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + transition: box-shadow 0.1s ease, transform 0.1s ease; + + &:hover { + box-shadow: + 0 3px 1px rgba(0, 0, 0, 0.45), + 0 5px 8px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } + + &:active { + transform: translateY(2px); + box-shadow: + 0 1px 1px rgba(0, 0, 0, 0.4), + 0 1px 2px rgba(0, 0, 0, 0.2), + inset 0 1px 3px rgba(0, 0, 0, 0.15); + } @media screen and (max-width: 412px) { flex: 0.225; From f3378b9ad6ed4a6c3fdd819f8718aa69d65418b8 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 22:41:50 +0000 Subject: [PATCH 3/7] Simplify crease to match calculator body color with inset shadow Use the same $primary-bland background as the rest of the calculator and rely solely on an inset box-shadow to create the crease effect. https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 36 ++++-------------------------------- 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index 31c31cb..cacd06d 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -159,39 +159,11 @@ button:focus { .basic > .crease { width: 100%; - height: 6px; - position: relative; - background: linear-gradient( - to bottom, - rgba(0, 0, 0, 0.15) 0%, - rgba(0, 0, 0, 0.25) 40%, - rgba(0, 0, 0, 0.10) 60%, - rgba(255, 255, 255, 0.05) 100% - ); + height: 4px; + background-color: $primary-bland; box-shadow: - inset 0 1px 3px rgba(0, 0, 0, 0.35), - inset 0 -1px 2px rgba(255, 255, 255, 0.25), - 0 2px 4px rgba(0, 0, 0, 0.15); - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: rgba(0, 0, 0, 0.25); - } - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: rgba(255, 255, 255, 0.2); - } + inset 0 2px 3px rgba(0, 0, 0, 0.3), + inset 0 -1px 2px rgba(255, 255, 255, 0.2); } .basic > .basic-keys-container { From e90d81163433f4f14365da0eb0d0d939d71cdd5d Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 22:45:10 +0000 Subject: [PATCH 4/7] Widen crease and soften shadow edges for a more fluid look Increase crease height from 4px to 8px and use larger, softer blur radii on the inset shadows so the transition feels smoother. https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index cacd06d..8e9c56b 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -159,11 +159,11 @@ button:focus { .basic > .crease { width: 100%; - height: 4px; + height: 8px; background-color: $primary-bland; box-shadow: - inset 0 2px 3px rgba(0, 0, 0, 0.3), - inset 0 -1px 2px rgba(255, 255, 255, 0.2); + inset 0 3px 4px rgba(0, 0, 0, 0.25), + inset 0 -2px 3px rgba(255, 255, 255, 0.15); } .basic > .basic-keys-container { From 73dd23668ac2636d9dfb14e82ef55c9f5cb96144 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Feb 2026 01:24:20 +0000 Subject: [PATCH 5/7] Increase crease to 12px with deeper layered inset shadows Add a third inset shadow layer for more depth and increase blur radii for a softer, more dimensional crease effect. https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index 8e9c56b..5bc0f28 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -159,11 +159,12 @@ button:focus { .basic > .crease { width: 100%; - height: 8px; + height: 12px; background-color: $primary-bland; box-shadow: - inset 0 3px 4px rgba(0, 0, 0, 0.25), - inset 0 -2px 3px rgba(255, 255, 255, 0.15); + inset 0 4px 6px rgba(0, 0, 0, 0.3), + inset 0 -3px 5px rgba(255, 255, 255, 0.15), + inset 0 1px 2px rgba(0, 0, 0, 0.15); } .basic > .basic-keys-container { From 895f3f262d71bc9857ac9a11a91df5e719b8eeeb Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Feb 2026 01:27:56 +0000 Subject: [PATCH 6/7] Add worn/used look to calculator edges and button text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add subtle radial gradient overlays on the calculator body to simulate edge wear and discoloration from handling - Add worn text effect on heavily used buttons (=, 0) where the center of the text fades out as if the print has rubbed off - Medium wear on 1 and + buttons - Light wear on 5, 2, and รท buttons - Uses background-clip: text with a vertical gradient that fades the middle of the character for a realistic worn print look https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 71 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index 5bc0f28..ab8ef27 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -21,6 +21,10 @@ button:focus { align-items: center; -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.62); box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.62); + background-image: + radial-gradient(ellipse at 15% 10%, rgba(0, 0, 0, 0.03) 0%, transparent 50%), + radial-gradient(ellipse at 85% 95%, rgba(0, 0, 0, 0.04) 0%, transparent 40%), + radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 70%); @media screen and (max-width: 416px) { width: 100%; @@ -373,3 +377,70 @@ button:focus { .red { background-color: $primary-power-red; } + +// Worn text effect for heavily used buttons +// The center of the text fades as if the print has rubbed off + +@mixin worn-text-heavy { + $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.35); + $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.25); + background: linear-gradient( + to bottom, + $super_white 0%, + $faded 40%, + $faded-mid 60%, + $super_white 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +@mixin worn-text-medium { + $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.5); + $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.45); + background: linear-gradient( + to bottom, + $super_white 0%, + $faded 45%, + $faded-mid 55%, + $super_white 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +@mixin worn-text-light { + $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.65); + $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.6); + background: linear-gradient( + to bottom, + $super_white 0%, + $faded 45%, + $faded-mid 55%, + $super_white 100% + ); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +// Heavy wear - most used buttons +.basic-key.clear, +.basic-key.zero { + @include worn-text-heavy; +} + +// Medium wear +.basic-key.one, +.operator-key.plus { + @include worn-text-medium; +} + +// Light wear +.basic-key.\35, +.basic-key.two, +.operator-key.divide { + @include worn-text-light; +} From c71e3cfeade037aa432d0ca6d2bb52ab470970d7 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Feb 2026 01:34:22 +0000 Subject: [PATCH 7/7] Fix worn button text and blend crease edges - Fix worn text effect: use a radial gradient pseudo-element overlay that covers the center of the button, fading the text into the black background rather than replacing the button background entirely - Blend crease edges: replace hard-edged box-shadow-only crease with a vertical gradient that transitions smoothly from the surrounding blanchedalmond color into a slightly darker center and back out https://claude.ai/code/session_012pLLn88rRBCXKX98xm8cxZ --- src/styles/calculator.scss | 83 +++++++++++++++----------------------- 1 file changed, 32 insertions(+), 51 deletions(-) diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index ab8ef27..5b03ee9 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -164,11 +164,17 @@ button:focus { .basic > .crease { width: 100%; height: 12px; - background-color: $primary-bland; + background: linear-gradient( + to bottom, + $primary-bland 0%, + darken($primary-bland, 6%) 30%, + darken($primary-bland, 8%) 50%, + darken($primary-bland, 6%) 70%, + $primary-bland 100% + ); box-shadow: - inset 0 4px 6px rgba(0, 0, 0, 0.3), - inset 0 -3px 5px rgba(255, 255, 255, 0.15), - inset 0 1px 2px rgba(0, 0, 0, 0.15); + inset 0 4px 6px rgba(0, 0, 0, 0.2), + inset 0 -3px 5px rgba(255, 255, 255, 0.1); } .basic > .basic-keys-container { @@ -379,68 +385,43 @@ button:focus { } // Worn text effect for heavily used buttons -// The center of the text fades as if the print has rubbed off - -@mixin worn-text-heavy { - $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.35); - $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.25); - background: linear-gradient( - to bottom, - $super_white 0%, - $faded 40%, - $faded-mid 60%, - $super_white 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} +// Overlays a gradient that masks the center of the text to look faded -@mixin worn-text-medium { - $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.5); - $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.45); - background: linear-gradient( - to bottom, - $super_white 0%, - $faded 45%, - $faded-mid 55%, - $super_white 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -@mixin worn-text-light { - $faded: rgba(red($super_white), green($super_white), blue($super_white), 0.65); - $faded-mid: rgba(red($super_white), green($super_white), blue($super_white), 0.6); - background: linear-gradient( - to bottom, - $super_white 0%, - $faded 45%, - $faded-mid 55%, - $super_white 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; +@mixin worn-overlay($opacity) { + position: relative; + overflow: hidden; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + ellipse at center, + $primary_black $opacity, + transparent 70% + ); + pointer-events: none; + } } // Heavy wear - most used buttons .basic-key.clear, .basic-key.zero { - @include worn-text-heavy; + @include worn-overlay(35%); } // Medium wear .basic-key.one, .operator-key.plus { - @include worn-text-medium; + @include worn-overlay(25%); } // Light wear .basic-key.\35, .basic-key.two, .operator-key.divide { - @include worn-text-light; + @include worn-overlay(15%); }