v4.1.6 UX polish: homepage, navbar, tools consistency

Homepage:
- Minimal floating icons with gold hover effect
- Larger Stegasoo title (display-5)
- v4.1 badge repositioned to bottom-left of logo
- Tighter 8px gap between logo and title

Navbar:
- Container-fluid for fixed left positioning
- Reduced left padding, proper logo/badge spacing
- Channel fingerprint in gold, shield icon brighter

Tools page:
- Consistent font styling (0.62rem, weight 500, 1px spacing)
- Wider buttons (64px) with more gap
- Bolder text on hover (weight 600)

Typography consistency across nav, homepage, and tools.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-07 21:35:42 -05:00
parent b9d0fac535
commit 6338d6aab4
3 changed files with 26 additions and 23 deletions

View File

@@ -180,6 +180,10 @@ body {
z-index: 1030; /* Above page content for dropdowns */
}
.navbar > .container {
padding-left: 0;
}
/* Ensure navbar dropdown appears above all page content */
.navbar .dropdown-menu {
z-index: 1031;
@@ -219,9 +223,9 @@ body {
left: 50%;
transform: translateX(-50%) translateY(-4px);
font-size: 0.7rem;
font-weight: 700;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 1px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
@@ -1881,7 +1885,7 @@ footer {
.tools-ribbon-group {
display: flex;
align-items: center;
gap: 0.25rem;
gap: 0.5rem;
}
.tools-ribbon-divider {
@@ -1898,8 +1902,8 @@ footer {
flex-direction: column;
align-items: center;
justify-content: center;
width: 52px;
height: 48px;
width: 64px;
height: 52px;
padding: 0.25rem;
border: 1px solid transparent;
border-radius: 0.375rem;
@@ -1915,15 +1919,17 @@ footer {
}
.tool-icon-btn span {
font-size: 0.6rem;
font-size: 0.62rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
letter-spacing: 1px;
}
.tool-icon-btn:hover {
background: rgba(255, 230, 150, 0.1);
border-color: rgba(255, 230, 150, 0.3);
color: var(--header-gold);
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}