From 67fd43fab1061ebe583b2441a555883b30b98bb2 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 30 Apr 2026 18:27:01 +0000 Subject: [PATCH 1/3] Apply new color palette and switch logo to PNG - Introduce --bg-primary, --bg-secondary, and updated gold/text variables in :root - Rename --bg-base/--bg-surface usages to --bg-primary/--bg-secondary - Update inline gold rgba values to match new --gold (#D4AF37) - Reference assets/logo.png instead of logo.svg in index.html https://claude.ai/code/session_01TJSLtZQ8ZtxU1GnDUfkN9Y --- fabio-antunes-app/prototype/assets/styles.css | 74 +++++++++---------- fabio-antunes-app/prototype/index.html | 2 +- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/fabio-antunes-app/prototype/assets/styles.css b/fabio-antunes-app/prototype/assets/styles.css index adef3aa..e7dbd49 100644 --- a/fabio-antunes-app/prototype/assets/styles.css +++ b/fabio-antunes-app/prototype/assets/styles.css @@ -5,8 +5,8 @@ :root { /* Backgrounds */ - --bg-base: #0A0A0A; - --bg-surface: #141414; + --bg-primary: #0A0A0A; + --bg-secondary: #1A1A1A; --bg-elevated: #1C1C1C; --bg-overlay: rgba(20, 20, 20, 0.85); @@ -16,14 +16,14 @@ --border-strong: #3A3A3A; /* Brand — Gold */ - --gold: #DAAC2F; - --gold-light: #F5C75A; - --gold-dark: #CFA847; + --gold: #D4AF37; + --gold-light: #F4C430; + --gold-dark: #8B6914; --gold-muted: #8C7028; - --gold-glow: rgba(218, 172, 47, 0.18); + --gold-glow: rgba(212, 175, 55, 0.18); /* Text */ - --text-primary: #FAFAFA; + --text-primary: #FFFFFF; --text-secondary: #B8B8B8; --text-tertiary: #6E6E6E; --text-quaternary: #4A4A4A; @@ -58,7 +58,7 @@ /* Shadows */ --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.6); - --shadow-gold: 0 8px 32px -12px rgba(218, 172, 47, 0.4); + --shadow-gold: 0 8px 32px -12px rgba(212, 175, 55, 0.4); } /* Reset */ @@ -77,7 +77,7 @@ body { font-size: 15px; line-height: 1.5; color: var(--text-primary); - background: var(--bg-base); + background: var(--bg-primary); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } @@ -96,9 +96,9 @@ a { color: inherit; text-decoration: none; } align-items: center; justify-content: center; background: - radial-gradient(circle at 20% 0%, rgba(218, 172, 47, 0.06) 0%, transparent 50%), - radial-gradient(circle at 80% 100%, rgba(218, 172, 47, 0.04) 0%, transparent 50%), - var(--bg-base); + radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 50%), + radial-gradient(circle at 80% 100%, rgba(212, 175, 55, 0.04) 0%, transparent 50%), + var(--bg-primary); padding: var(--space-6) var(--space-4); } @@ -106,7 +106,7 @@ a { color: inherit; text-decoration: none; } width: 100%; max-width: 412px; min-height: 100dvh; - background: var(--bg-base); + background: var(--bg-primary); position: relative; overflow: hidden; } @@ -121,7 +121,7 @@ a { color: inherit; text-decoration: none; } 0 0 0 8px #050505, 0 0 0 9px #1a1a1a, 0 40px 80px -20px rgba(0,0,0,0.8), - 0 0 120px rgba(218, 172, 47, 0.05); + 0 0 120px rgba(212, 175, 55, 0.05); overflow: hidden; } } @@ -207,7 +207,7 @@ a { color: inherit; text-decoration: none; } width: 11px; height: 11px; background: var(--success); - border: 2px solid var(--bg-base); + border: 2px solid var(--bg-primary); border-radius: var(--radius-full); } @@ -241,8 +241,8 @@ a { color: inherit; text-decoration: none; } padding: var(--space-6); border-radius: var(--radius-lg); background: - linear-gradient(135deg, rgba(218, 172, 47, 0.08) 0%, transparent 50%), - var(--bg-surface); + linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 50%), + var(--bg-secondary); border: 1px solid var(--border); overflow: hidden; } @@ -341,7 +341,7 @@ a { color: inherit; text-decoration: none; } transition: transform 0.1s ease, box-shadow 0.2s ease; box-shadow: var(--shadow-gold); } -.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -10px rgba(218, 172, 47, 0.6); } +.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -10px rgba(212, 175, 55, 0.6); } .btn-primary:active { transform: translateY(0); } .btn-primary svg { width: 18px; height: 18px; } @@ -380,7 +380,7 @@ a { color: inherit; text-decoration: none; } gap: var(--space-3); } .goal-card { - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-4); @@ -408,7 +408,7 @@ a { color: inherit; text-decoration: none; } content: ''; position: absolute; inset: 4px; - background: var(--bg-surface); + background: var(--bg-secondary); border-radius: 50%; } .ring svg { @@ -447,7 +447,7 @@ a { color: inherit; text-decoration: none; } gap: var(--space-3); } .action { - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-4); @@ -500,7 +500,7 @@ a { color: inherit; text-decoration: none; } .coach-card { margin: 0 var(--space-5) var(--space-6); padding: var(--space-4); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); display: flex; @@ -587,7 +587,7 @@ a { color: inherit; text-decoration: none; } width: 40px; height: 40px; border-radius: var(--radius-full); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); display: grid; place-items: center; @@ -621,15 +621,15 @@ a { color: inherit; text-decoration: none; } padding: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border); } .banner-bg { position: absolute; inset: 0; background: - radial-gradient(circle at 100% 0%, rgba(218, 172, 47, 0.18), transparent 60%), - radial-gradient(circle at 0% 100%, rgba(218, 172, 47, 0.08), transparent 50%); + radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.18), transparent 60%), + radial-gradient(circle at 0% 100%, rgba(212, 175, 55, 0.08), transparent 50%); pointer-events: none; } .banner::before { @@ -698,7 +698,7 @@ a { color: inherit; text-decoration: none; } gap: var(--space-3); margin: 0 var(--space-5) var(--space-6); padding: var(--space-4); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-left: 3px solid var(--gold); border-radius: var(--radius); @@ -741,7 +741,7 @@ a { color: inherit; text-decoration: none; } align-items: center; gap: var(--space-3); padding: var(--space-3); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); transition: all 0.15s ease; @@ -880,7 +880,7 @@ a { color: inherit; text-decoration: none; } position: absolute; inset: 0; background: - radial-gradient(circle at 50% 50%, rgba(218, 172, 47, 0.12), transparent 60%); + radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.12), transparent 60%); } .exercise-media-icon { width: 60%; @@ -916,7 +916,7 @@ a { color: inherit; text-decoration: none; } .lastperf { margin: 0 var(--space-5) var(--space-6); padding: var(--space-4); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); } @@ -972,7 +972,7 @@ a { color: inherit; text-decoration: none; } Sets tracker ============================================ */ .sets { - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-3); @@ -1034,7 +1034,7 @@ a { color: inherit; text-decoration: none; } outline: none; transition: border-color 0.15s ease, background 0.15s ease; } -.set-input:focus { border-color: var(--gold); background: var(--bg-base); } +.set-input:focus { border-color: var(--gold); background: var(--bg-primary); } .set.active .set-input { border-color: var(--gold-muted); } .set-input::placeholder { color: var(--text-quaternary); } @@ -1161,7 +1161,7 @@ a { color: inherit; text-decoration: none; } font-weight: 600; color: var(--text-tertiary); border-radius: var(--radius-full); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); transition: all 0.15s ease; } @@ -1178,7 +1178,7 @@ a { color: inherit; text-decoration: none; } .metric-card { margin: 0 var(--space-5) var(--space-6); padding: var(--space-5); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } @@ -1279,14 +1279,14 @@ a { color: inherit; text-decoration: none; } align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); transition: border-color 0.15s ease; } .pr-card:hover { border-color: var(--gold-muted); } .pr-card.new { - background: linear-gradient(135deg, rgba(218, 172, 47, 0.1), transparent 60%), var(--bg-surface); + background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent 60%), var(--bg-secondary); border-color: var(--gold-muted); } .pr-icon { @@ -1334,7 +1334,7 @@ a { color: inherit; text-decoration: none; } } .health-card { padding: var(--space-4); - background: var(--bg-surface); + background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); } diff --git a/fabio-antunes-app/prototype/index.html b/fabio-antunes-app/prototype/index.html index 90f4613..6ff3ce1 100644 --- a/fabio-antunes-app/prototype/index.html +++ b/fabio-antunes-app/prototype/index.html @@ -35,7 +35,7 @@

Servus, Fabio

- +
Prime Coaching
From f4e9cf7741d43f734c61aa68a4f2721d0faaf34b Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 30 Apr 2026 18:29:26 +0000 Subject: [PATCH 2/3] Display full Fabio Antunes logo banner in brandbar - Drop duplicate "Prime Coaching" text since the logo PNG already contains it - Resize .brandbar-logo from 22x22 square to height 44px with auto width and object-fit contain so the wide logo renders at its natural ratio https://claude.ai/code/session_01TJSLtZQ8ZtxU1GnDUfkN9Y --- fabio-antunes-app/prototype/assets/styles.css | 10 +++++++--- fabio-antunes-app/prototype/index.html | 3 +-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/fabio-antunes-app/prototype/assets/styles.css b/fabio-antunes-app/prototype/assets/styles.css index e7dbd49..7b8cbb7 100644 --- a/fabio-antunes-app/prototype/assets/styles.css +++ b/fabio-antunes-app/prototype/assets/styles.css @@ -218,12 +218,16 @@ a { color: inherit; text-decoration: none; } display: flex; align-items: center; justify-content: center; - gap: var(--space-3); - padding: var(--space-3) 0 var(--space-2); + padding: var(--space-3) 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); margin: 0 var(--space-5) var(--space-4); } -.brandbar-logo { width: 22px; height: 22px; } +.brandbar-logo { + height: 44px; + width: auto; + max-width: 100%; + object-fit: contain; +} .brandbar-text { font-size: 11px; letter-spacing: 0.24em; diff --git a/fabio-antunes-app/prototype/index.html b/fabio-antunes-app/prototype/index.html index 6ff3ce1..693cb0c 100644 --- a/fabio-antunes-app/prototype/index.html +++ b/fabio-antunes-app/prototype/index.html @@ -35,8 +35,7 @@

Servus, Fabio

- -
Prime Coaching
+
From 9552033c1f95e25cbded17b0b96d5ee6069a5fb2 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 30 Apr 2026 18:32:54 +0000 Subject: [PATCH 3/3] Add GitHub Pages deploy workflow for the prototype Auto-publishes fabio-antunes-app/prototype to GitHub Pages on every push to the styling branch and main, so the prototype can be shared as a plain URL without any local setup. https://claude.ai/code/session_01TJSLtZQ8ZtxU1GnDUfkN9Y --- .github/workflows/pages.yml | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 .github/workflows/pages.yml diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..5155206 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,32 @@ +name: Deploy Prototype to Pages + +on: + push: + branches: + - claude/fitness-app-styling-7giJD + - main + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/configure-pages@v5 + - uses: actions/upload-pages-artifact@v3 + with: + path: fabio-antunes-app/prototype + - id: deployment + uses: actions/deploy-pages@v4