From 4f247c086a60538364ec94eb2fad23ff9da2d2b1 Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Fri, 26 Dec 2025 19:13:19 +0100
Subject: [PATCH] resize frame when hint is enabled

---
 src/App.css              | 10 ++++++++--
 src/App.tsx              |  2 +-
 src/styles/variables.css | 32 +++++++++++++++++++++-----------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9665940..e9eb481 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,8 +16,10 @@
 }
 
 .logo {
+  font-family: var(--font-family-serif);
   font-weight: 700;
-  font-size: var(--font-size-lg);
+  font-size: 1.5rem;
+  letter-spacing: -0.02em;
   color: var(--color-primary);
 }
 
@@ -48,8 +50,12 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  max-width: 600px;
+  transition: max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease;
+}
+
+.card.has-hint {
   max-width: 850px;
-  transition: transform 0.2s ease;
 }
 
 .sheet-music-container {
diff --git a/src/App.tsx b/src/App.tsx
index 4d14706..4f15783 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -342,7 +342,7 @@ function App() {
       )}
 
       <main className="main-stage">
-        <div className="card sheet-music-card">
+        <div className={`card sheet-music-card ${settings.showHint ? 'has-hint' : ''}`}>
           <div className="sheet-music-container">
             <SheetMusic
               targetMidi={targetMidi}
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 66d1c50..e87b7ed 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,16 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
+
 :root {
   /* HSL Colors for easy manipulation */
-  --hue-primary: 250;
+  /* Dark Red / Brownish Tone */
+  --hue-primary: 0;
   --hue-success: 150;
   --hue-error: 10;
-  --hue-text: 220;
+  --hue-text: 30;
+  /* Warmer text */
 
-  --color-bg: hsl(220, 20%, 97%);
+  --color-bg: hsl(30, 20%, 97%);
+  /* Warm paper-like bg */
   --color-surface: hsl(0, 0%, 100%);
-  --color-primary: hsl(var(--hue-primary), 60%, 50%);
-  --color-primary-dark: hsl(var(--hue-primary), 60%, 40%);
-  --color-text-main: hsl(var(--hue-text), 20%, 20%);
-  --color-text-muted: hsl(var(--hue-text), 10%, 60%);
+
+  /* Deep Classic Red */
+  --color-primary: hsl(var(--hue-primary), 65%, 40%);
+  --color-primary-dark: hsl(var(--hue-primary), 65%, 30%);
+
+  --color-text-main: hsl(var(--hue-text), 10%, 20%);
+  --color-text-muted: hsl(var(--hue-text), 5%, 60%);
 
   --color-success: hsl(var(--hue-success), 60%, 45%);
   --color-error: hsl(var(--hue-error), 70%, 55%);
@@ -26,6 +34,8 @@
 
   /* Typography */
   --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-family-serif: 'Playfair Display', serif;
+
   --font-size-base: 16px;
   --font-size-lg: 1.25rem;
   --font-size-xl: 1.5rem;
@@ -44,10 +54,10 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg: hsl(220, 20%, 10%);
-    --color-surface: hsl(220, 20%, 15%);
-    --color-text-main: hsl(220, 10%, 90%);
-    --color-text-muted: hsl(220, 10%, 60%);
+    --color-bg: hsl(30, 20%, 10%);
+    --color-surface: hsl(30, 20%, 15%);
+    --color-text-main: hsl(30, 10%, 90%);
+    --color-text-muted: hsl(30, 10%, 60%);
   }
 }