diff --git a/index.html b/index.html index 78814c6..ca6c03c 100644 --- a/index.html +++ b/index.html @@ -120,15 +120,21 @@ border-bottom: 1px solid var(--border); } .topbar-inner { + position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { height: 30px; width: auto; flex: 0 0 auto; display: block; } - .brand-sep { width: 1px; height: 22px; background: var(--border-strong); flex: 0 0 auto; } - .brand-app { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } - @media (max-width: 640px) { .brand-logo { height: 26px; } } - @media (max-width: 480px) { .brand-sep, .brand-app { display: none; } } + /* Centered wordmark — all caps, 400 weight, cap-height matched to the + logo icon's outer coloured edge (~28.7px → ~41px Montserrat). */ + .brand-app { + position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); + margin: 0; font-size: 41px; line-height: 1; font-weight: 400; + text-transform: uppercase; letter-spacing: .04em; color: var(--ink); + white-space: nowrap; pointer-events: none; + } + @media (max-width: 640px) { .brand-logo { height: 26px; } .brand-app { display: none; } } .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: block; } @@ -160,7 +166,7 @@ .hero { padding: 46px 0 8px; } .hero h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.025em; - line-height: 1.08; max-width: 18ch; + line-height: 1.08; max-width: 24ch; } .hero p.lede { margin-top: 14px; color: var(--muted); font-size: 1.08rem; max-width: 62ch; } @media (max-width: 768px) { .hero { padding: 30px 0 4px; } .hero h1 { font-size: 1.7rem; } } @@ -366,12 +372,10 @@
- - Local-Bench
+ Local Bench
Connecting… - Local-first