diff --git a/static/css/style.css b/static/css/style.css index 78badbc..8c860fa 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -103,7 +103,7 @@ header { .header-top { display: flex; align-items: center; - gap: var(--space-xl); + gap: var(--space-2xl); max-width: 1400px; margin: 0 auto; } @@ -111,7 +111,7 @@ header { .header-left { display: flex; align-items: center; - gap: var(--space-xl); + gap: var(--space-2xl); } .logo { @@ -133,14 +133,15 @@ header { .nav { display: flex; - gap: var(--space-lg); + gap: var(--space-xl); } .nav a { font-size: var(--text-md); color: var(--text-muted); text-decoration: none; - transition: color 0.2s ease; + font-weight: 500; + transition: color 0.1s ease; } .nav a:hover { @@ -351,6 +352,16 @@ a:visited { object-fit: cover; background: var(--surface); transition: opacity 0.2s ease; + animation: pulse-bg 2s ease-in-out infinite; +} + +@keyframes pulse-bg { + 0%, 100% { + background-color: var(--surface); + } + 50% { + background-color: var(--surface-hover); + } } .catalog-item:hover .catalog-thumb, @@ -523,20 +534,20 @@ a.htmx-request { } .login-button { - padding: var(--space-sm); - background: var(--surface); - color: var(--text); - border: 1px solid var(--border); + padding: var(--space-md); + background: var(--text); + color: var(--bg); + border: none; font-size: var(--text-md); - font-weight: 500; + font-weight: 600; cursor: pointer; margin-top: var(--space-xs); font-family: inherit; + transition: opacity 0.15s; } .login-button:hover { - background: var(--surface-hover); - border-color: var(--link); + opacity: 0.8; } /* Watchlist */ @@ -725,7 +736,7 @@ a.htmx-request { /* Anime Page */ .anime-page { display: flex; - gap: var(--space-xl); + gap: var(--space-2xl); max-width: 1200px; } @@ -736,8 +747,8 @@ a.htmx-request { .anime-hero { display: flex; - gap: var(--space-lg); - margin-bottom: var(--space-xl); + gap: var(--space-xl); + margin-bottom: var(--space-2xl); } .anime-poster { @@ -807,7 +818,8 @@ a.htmx-request { .anime-synopsis p { font-size: var(--text-md); - line-height: 1.6; + line-height: 1.8; + max-width: 65ch; color: var(--text); margin: 0; } @@ -930,23 +942,24 @@ a.htmx-request { display: flex; align-items: center; gap: var(--space-sm); - padding: var(--space-sm) var(--space-lg); - background: var(--surface); - border: 1px solid var(--border); - color: var(--text); + padding: var(--space-md) var(--space-lg); + background: var(--text); + border: none; + color: var(--bg); font-size: var(--text-md); + font-weight: 600; font-family: inherit; cursor: pointer; + transition: opacity 0.15s; } .dropdown-trigger:hover { - background: var(--surface-hover); - border-color: var(--link); + opacity: 0.8; } .dropdown-arrow { font-size: var(--text-xs); - color: var(--text-muted); + color: var(--bg); } .dropdown-menu {