diff --git a/client/src/App.css b/client/src/App.css index 8b2b5ac..227c5b4 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -27,16 +27,16 @@ gap: 0.75rem; color: var(--text-primary); font-weight: 700; - font-size: 2.25rem; /* +30% from 1.5rem */ + font-size: 2.25rem; text-decoration: none; transition: var(--transition); } .nav-brand:hover { - color: var(--primary-light); + opacity: 0.9; } -/* Square logo: doubled from 2.5rem to 5rem */ +/* Square logo */ .brand-logo { width: 5rem; height: 5rem; @@ -45,7 +45,6 @@ display: block; border-radius: 4px; flex-shrink: 0; - /* Subtle diffuse black drop shadow for depth */ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30)); } @@ -58,7 +57,7 @@ height: 5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: var(--radius); - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + box-shadow: 0 4px 12px rgba(194, 134, 42, 0.3); } /* Title gradient: medium-dark gold → rusty dark red-gold */ @@ -68,7 +67,6 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - /* text-shadow doesn't work with background-clip:text — use filter instead */ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.50)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30)); } @@ -76,6 +74,7 @@ .nav-links { display: flex; gap: 0.5rem; + align-items: center; } .nav-link { @@ -99,9 +98,22 @@ } .nav-link.active { - background: var(--primary); - color: white; - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + background: linear-gradient(135deg, rgba(201,148,10,0.2) 0%, rgba(139,37,0,0.2) 100%); + color: var(--primary-light); + border-color: rgba(194, 134, 42, 0.4); + box-shadow: 0 2px 8px rgba(194, 134, 42, 0.15); +} + +/* Settings link — slightly different treatment, sits at end */ +.nav-link-settings { + margin-left: 0.5rem; + padding: 0.5rem; + border-radius: var(--radius-sm); + color: var(--text-muted); +} + +.nav-link-settings:hover { + color: var(--primary-light); } .main-content { @@ -114,10 +126,9 @@ } .nav-brand { - font-size: 1.625rem; /* +30% from 1.25rem */ + font-size: 1.625rem; } - /* Scale square logo down on mobile (doubled from 2rem) */ .brand-logo { width: 4rem; height: 4rem;