A community based topic aggregation platform built on atproto

fix(web): improve coming soon badge styling on app store buttons

Integrate "Coming Soon" message into button text instead of using a
floating badge. Changes label from "Download on the" to "Coming soon to"
with coral accent color for better visual hierarchy.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Bretton daa27c93 4f515abb

+18 -19
+18 -19
internal/web/templates/landing.html
··· 372 372 /* Placeholder state for app buttons */ 373 373 .app-button-placeholder { 374 374 cursor: default; 375 - opacity: 0.7; 375 + background: transparent; 376 + border-color: var(--color-text-muted); 377 + color: var(--color-text-muted); 378 + } 379 + 380 + .app-button-placeholder svg { 381 + opacity: 0.6; 376 382 } 377 383 378 384 .app-button-placeholder:hover { 379 385 transform: none; 380 - background: var(--color-deep); 381 - border-color: var(--color-deep); 386 + background: transparent; 387 + border-color: var(--color-text-muted); 382 388 box-shadow: none; 383 389 } 384 390 ··· 386 392 left: -100%; 387 393 } 388 394 389 - .coming-soon-badge { 390 - position: absolute; 391 - top: 6px; 392 - right: 6px; 393 - background: var(--color-coral); 394 - color: var(--color-sand); 395 - font-size: 0.6rem; 395 + .app-button-placeholder .app-button-label { 396 + color: var(--color-coral); 396 397 font-weight: 700; 397 - text-transform: uppercase; 398 - letter-spacing: 0.05em; 399 - padding: 3px 8px; 400 - border-radius: 6px; 401 - z-index: 2; 398 + letter-spacing: 0.08em; 399 + } 400 + 401 + .app-button-placeholder .app-button-store { 402 + color: var(--color-text-muted); 402 403 } 403 404 404 405 /* Built on AT Protocol badge - teal accent */ ··· 590 591 <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/> 591 592 </svg> 592 593 <span class="app-button-text"> 593 - <span class="app-button-label">Download on the</span> 594 + <span class="app-button-label">Coming soon to</span> 594 595 <span class="app-button-store">App Store</span> 595 596 </span> 596 - <span class="coming-soon-badge">Coming Soon</span> 597 597 </div> 598 598 599 599 <div class="app-button app-button-placeholder" aria-label="Google Play - Coming Soon"> ··· 601 601 <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.5,12.92 20.16,13.19L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/> 602 602 </svg> 603 603 <span class="app-button-text"> 604 - <span class="app-button-label">Get it on</span> 604 + <span class="app-button-label">Coming soon to</span> 605 605 <span class="app-button-store">Google Play</span> 606 606 </span> 607 - <span class="coming-soon-badge">Coming Soon</span> 608 607 </div> 609 608 </div> 610 609