Landing: float Sign In to far top-right, separate from Start Free Trial

Sign In now lives outside the nav-links cluster with margin-left:auto,
pinning it to the top-right corner with visible separation from the
primary CTA.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ScreenTinker 2026-04-21 19:30:33 -05:00
parent 87a935cb74
commit e0bfa76545

View file

@ -38,10 +38,11 @@
/* Nav */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(17,24,39,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1200px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--accent); }
.nav-inner { max-width:1200px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--accent); flex-shrink:0; }
.nav-links a { color:var(--muted); margin-left:24px; font-size:14px; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-signin { margin-left:auto; flex-shrink:0; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; font-weight:600; font-size:14px; transition:all 0.2s; border:none; cursor:pointer; }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:#2563eb; }
@ -123,11 +124,10 @@
.nav-links { display:flex; align-items:center; flex-wrap:nowrap; }
.btn-short { display:none; }
@media (max-width:768px) {
/* Hide section anchor links on mobile; keep Sign In + primary CTA */
/* Hide section anchor links on mobile; keep Try Free + Sign In */
.nav-links a:not(.btn) { display:none; }
.nav-links { margin-left:auto; gap:8px; }
.nav-inner { padding:12px 14px; }
.nav-links .btn { padding:8px 12px; font-size:13px; margin-left:0 !important; flex-shrink:0; min-height:0; }
.nav-inner { padding:12px 14px; gap:8px; }
.nav-links .btn, .nav-signin { padding:8px 12px; font-size:13px; margin-left:0 !important; flex-shrink:0; min-height:0; }
.btn-full { display:none; }
.btn-short { display:inline; }
}
@ -162,9 +162,9 @@
<a href="#platforms">Platforms</a>
<a href="#pricing">Pricing</a>
<a href="#compare">Compare</a>
<a href="/app#/login" class="btn btn-outline" style="margin-left:16px">Sign In</a>
<a href="/app#/login" class="btn btn-primary" style="margin-left:8px"><span class="btn-full">Start Free Trial</span><span class="btn-short">Try Free</span></a>
<a href="/app#/login" class="btn btn-primary" style="margin-left:16px"><span class="btn-full">Start Free Trial</span><span class="btn-short">Try Free</span></a>
</div>
<a href="/app#/login" class="btn btn-outline nav-signin">Sign In</a>
</div>
</nav>