@@ -464,12 +464,28 @@ def calc_savings(tokens_est: int, price_in: float, price_out: float, frac_in: fl
464464.app-header {
465465 position: sticky; top: 0; z-index: 50;
466466 display:flex; align-items:center; justify-content:space-between; gap:12px;
467- padding:12px 16px; background: var(--redis-red); color:#fff;
467+ padding:14px 16px; background: var(--redis-red); color:#fff;
468468 box-shadow: 0 2px 8px rgba(0,0,0,.18);
469469}
470- .app-header .brand { display:flex; align-items:center; gap:12px; }
471- .app-header .brand img { height:22px; display:block; }
472- .app-header .title { font-family: 'Space Grotesk', Inter, sans-serif; font-size:18px; font-weight:700; letter-spacing:.2px; }
470+ .app-header .brand { display:flex; align-items:center; gap:14px; flex:1; }
471+ .app-header .brand img { height:24px; display:block; }
472+ .app-header .brand-content { display:flex; flex-direction:column; gap:4px; flex:1; }
473+ .app-header .title {
474+ font-family: 'Space Grotesk', Inter, sans-serif;
475+ font-size:20px; font-weight:700; letter-spacing:.3px;
476+ line-height:1.2;
477+ }
478+ .app-header .meta {
479+ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
480+ font-size:12px; opacity:0.95; font-weight:500;
481+ }
482+ .app-header .meta-item {
483+ display:inline-flex; align-items:center; gap:6px;
484+ padding:3px 8px; background:rgba(255,255,255,0.15);
485+ border-radius:6px; white-space:nowrap;
486+ }
487+ .app-header .meta-item .label { opacity:0.8; }
488+ .app-header .meta-item .value { font-weight:600; }
473489.app-header .links { display:flex; gap:8px; }
474490.app-header .links a {
475491 display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none;
@@ -478,6 +494,17 @@ def calc_savings(tokens_est: int, price_in: float, price_out: float, frac_in: fl
478494}
479495.app-header .links a:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
480496
497+ /* Mobile responsive header */
498+ @media (max-width: 768px) {
499+ .app-header { flex-direction:column; align-items:flex-start; padding:12px; }
500+ .app-header .brand { flex-direction:column; align-items:flex-start; gap:10px; }
501+ .app-header .brand img { height:20px; }
502+ .app-header .title { font-size:16px; }
503+ .app-header .meta { gap:8px; }
504+ .app-header .meta-item { font-size:11px; padding:2px 6px; }
505+ .app-header .links { width:100%; justify-content:flex-start; }
506+ }
507+
481508/* HEADINGS */
482509.h1 {
483510 font-family: 'Space Grotesk', Inter, sans-serif;
@@ -595,7 +622,19 @@ def calc_savings(tokens_est: int, price_in: float, price_out: float, frac_in: fl
595622 <div class="app-header">
596623 <div class="brand">
597624 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Redis_logo.svg/2560px-Redis_logo.svg.png" alt="Redis">
598- <div class="title">Redis LangCache — Demo PT-BR - SemVer: v2.0.10-harness - PR GitHub: gacerioni</div>
625+ <div class="brand-content">
626+ <div class="title">Redis LangCache — Demo PT-BR</div>
627+ <div class="meta">
628+ <div class="meta-item">
629+ <span class="label">SemVer:</span>
630+ <span class="value">v2.0.11-harness</span>
631+ </div>
632+ <div class="meta-item">
633+ <span class="label">PR GitHub:</span>
634+ <span class="value">gacerioni</span>
635+ </div>
636+ </div>
637+ </div>
599638 </div>
600639 <div class="links">
601640 <a href="https://www.linkedin.com/in/gabrielcerioni/" target="_blank" rel="noopener">💼 LinkedIn do Gabs</a>
0 commit comments