From bc0df9c764f27118d9d6b475e85f38b7e235db35 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:45:13 -0700
Subject: Show ratings inline with year/director using brand logos

IMDb, Rotten Tomatoes, and Metacritic scores now appear on the same
row as the subtitle with SVG brand logos instead of plain text chips.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/styles.css | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

(limited to 'static/styles.css')

diff --git a/static/styles.css b/static/styles.css
index c7be672..9f8619b 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -548,36 +548,32 @@ h2 {
   color: var(--accent);
 }
 
-.ratings-row {
+.detail-subtitle {
   display: flex;
+  align-items: center;
+  gap: 16px;
   flex-wrap: wrap;
-  gap: 10px;
-  margin: 16px 0 20px;
+  margin-bottom: 20px;
 }
 
-.rating-chip {
+.ratings-inline {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel);
-  padding: 10px 14px;
-  min-width: 90px;
+  align-items: center;
+  gap: 14px;
 }
 
-.rating-chip-label {
+.rating-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   color: var(--muted);
-  font-size: 0.72rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-size: 0.88rem;
+  font-weight: 600;
 }
 
-.rating-chip-value {
-  color: var(--text);
-  font-size: 1.05rem;
-  font-weight: 600;
+.rating-badge img {
+  display: block;
+  flex-shrink: 0;
 }
 
 .detail-tagline {
-- 
cgit v1.3-2-g0d8e