diff --git a/public/index.html b/public/index.html index ceef84b..244d110 100644 --- a/public/index.html +++ b/public/index.html @@ -289,6 +289,99 @@ color: #eaeaea; font-style: italic; } + + /* ============================================ */ + /* RESPONSIVE SIZING FOR 4K DISPLAYS */ + /* ============================================ */ + @media screen and (min-width: 2560px) { + .container { + padding: 40px 80px; + padding-bottom: 120px; + } + + .header { + gap: 60px; + margin-bottom: 50px; + padding-bottom: 30px; + } + + .logo-container img { + height: 180px; + } + + .location-title { + font-size: 40px; + } + + .header-center h1 { + font-size: 84px; + } + + .clock { + font-size: 56px; + } + + .connection-status { + padding: 20px 35px; + font-size: 32px; + gap: 15px; + } + + .status-dot { + width: 20px; + height: 20px; + } + + .section-title { + font-size: 72px; + margin-bottom: 30px; + padding: 24px 50px; + } + + .event-card { + padding: 60px 80px; + margin-bottom: 30px; + border-left: 100px solid; + } + + .event-title { + font-size: 64px; + } + + .event-ticket { + font-size: 48px; + padding: 16px 40px; + } + + .event-time { + font-size: 44px; + } + + .footer { + padding: 24px; + font-size: 36px; + } + + .no-events { + font-size: 64px; + padding: 80px 60px; + } + + .loading { + font-size: 64px; + padding: 80px 60px; + } + + .error-message { + font-size: 56px; + padding: 60px; + } + + .more-events { + font-size: 48px; + padding: 30px; + } + }