Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
Commit3a5755eunknown_key

polish(2026): real web fonts + animated hero + bigger headline (session 1.1)

polish(2026): real web fonts + animated hero + bigger headline (session 1.1)

Phase 1 polish — modernizing the marketing surface to 2026 standards.
This commit lays the typographic foundation that propagates everywhere
plus polishes the most-visible page (landing hero).

  1. Web fonts loaded from Google Fonts CDN with display=swap so they
     never block first paint:
       - Inter (400/500/600/700) — primary sans
       - Inter Tight (600/700/800) — display / headlines
       - JetBrains Mono (400/500) — code + monospace
     System fallbacks remain so a CDN failure still renders cleanly.

  2. Design tokens updated in layout.tsx:
       --font-sans: 'Inter' first, falls back to system stack
       --font-display: 'Inter Tight' first, for hero / display copy
       --font-mono: 'JetBrains Mono' first, for code + .meta-mono

  3. Landing hero polish (src/views/landing.tsx):
       - Headline grew from clamp(32-64px) to clamp(40-84px), weight
         700 → 800, tracking -0.025em → -0.032em (the Vercel/Linear/
         Cursor 'modern AI startup' headline aesthetic)
       - Headline font now uses --font-display (Inter Tight 800)
       - Gradient text gets a third stop (#36c5d6 cyan) for more depth
         + a subtle drop-shadow for atmospheric glow
       - Subheading bumped to clamp(16-22px), slightly heavier

  4. Hero background blobs animate now (24s / 28s ease-in-out drift,
     12s breath on the orb). Subtle but signals 'live product'
     instead of static landing page. Honors prefers-reduced-motion.

Tests: 2003/2003 pass. tsc clean.

Phase 1 continues in next commit: pricing tagline polish + 'vs GitHub
bundle' section + hero CTA glow refinement.
Claude committed on May 17, 2026Parent: a3b6378
2 files changed+59−193a5755eaebb190acec63cebd8f38ce44c520a7a0
2 changed files+59−19
Modifiedsrc/views/landing.tsx+41−13View fileUnifiedSplit
15661566 border-radius: 50%;
15671567 filter: blur(80px);
15681568 opacity: 0.55;
1569 will-change: transform;
15691570 }
15701571 .landing-hero-blob-1 {
15711572 top: -10%;
15721573 left: 30%;
15731574 width: 480px;
15741575 height: 480px;
1575 background: radial-gradient(circle, rgba(140,109,255,0.55), transparent 65%);
1576 background: radial-gradient(circle, rgba(140,109,255,0.65), transparent 65%);
1577 /* 2026 polish — slow drift gives the hero "this is a live product"
1578 feel without being distracting. 24s loop, eased, contained motion. */
1579 animation: landingBlobDrift1 24s ease-in-out infinite;
15761580 }
15771581 .landing-hero-blob-2 {
15781582 top: 10%;
15791583 left: 50%;
15801584 width: 380px;
15811585 height: 380px;
1582 background: radial-gradient(circle, rgba(54,197,214,0.40), transparent 65%);
1586 background: radial-gradient(circle, rgba(54,197,214,0.50), transparent 65%);
1587 animation: landingBlobDrift2 28s ease-in-out infinite;
15831588 }
15841589 /* U1 — subtle, low-opacity accent-gradient orb behind the headline.
15851590 Sits dead-centre, very blurred, so the hero reads as a real product
1586 surface rather than flat-bg + text. */
1591 surface rather than flat-bg + text. 2026 polish — gentle breathing
1592 pulse to give the surface a soft heartbeat. */
15871593 .landing-hero-orb {
15881594 top: 18%;
15891595 left: 50%;
15901596 transform: translateX(-50%);
15911597 width: 720px;
15921598 height: 720px;
1593 background: radial-gradient(circle, rgba(140,109,255,0.22), rgba(54,197,214,0.12) 45%, transparent 70%);
1599 background: radial-gradient(circle, rgba(140,109,255,0.28), rgba(54,197,214,0.16) 45%, transparent 70%);
15941600 filter: blur(120px);
1595 opacity: 0.55;
1601 opacity: 0.6;
15961602 z-index: 0;
1603 animation: landingOrbBreath 12s ease-in-out infinite;
15971604 }
15981605 :root[data-theme='light'] .landing-hero-orb {
15991606 opacity: 0.32;
16001607 }
1608 @keyframes landingBlobDrift1 {
1609 0%, 100% { transform: translate(0, 0) scale(1); }
1610 33% { transform: translate(40px, -30px) scale(1.08); }
1611 66% { transform: translate(-30px, 25px) scale(0.95); }
1612 }
1613 @keyframes landingBlobDrift2 {
1614 0%, 100% { transform: translate(0, 0) scale(1); }
1615 50% { transform: translate(-50px, 35px) scale(1.12); }
1616 }
1617 @keyframes landingOrbBreath {
1618 0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
1619 50% { opacity: 0.72; transform: translateX(-50%) scale(1.06); }
1620 }
16011621 @media (prefers-reduced-motion: reduce) {
16021622 .landing-hero-blob-1,
16031623 .landing-hero-blob-2,
16491669 }
16501670
16511671 .landing-hero-title {
1652 font-size: clamp(32px, 5.5vw, 64px);
1653 line-height: 1.05;
1654 letter-spacing: -0.025em;
1655 font-weight: 700;
1672 /* 2026 polish — bigger, bolder, tighter. Inter Tight at 800 weight
1673 with -0.03em tracking is the modern "AI-startup hero" look that
1674 Vercel/Linear/Cursor all use. clamp() scales gracefully on mobile. */
1675 font-size: clamp(40px, 7vw, 84px);
1676 line-height: 1.02;
1677 letter-spacing: -0.032em;
1678 font-weight: 800;
1679 font-family: var(--font-display);
16561680 margin: 0 0 var(--space-6);
16571681 color: var(--text-strong);
16581682 }
16591683 .landing-hero-title .gradient-text {
1660 background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #6d4dff 100%);
1684 /* Richer gradient with a third stop for more depth. Drop-shadow
1685 gives the impression of subtle glow without overpowering the type. */
1686 background-image: linear-gradient(135deg, #c2a8ff 0%, #8c6dff 40%, #5d3dff 70%, #36c5d6 100%);
16611687 -webkit-background-clip: text;
16621688 background-clip: text;
16631689 -webkit-text-fill-color: transparent;
16641690 color: transparent;
1691 filter: drop-shadow(0 4px 32px rgba(140, 109, 255, 0.18));
16651692 }
16661693
16671694 .landing-hero-sub {
1668 font-size: clamp(15px, 1.6vw, 19px);
1695 font-size: clamp(16px, 1.8vw, 22px);
16691696 color: var(--text-muted);
16701697 max-width: 680px;
16711698 margin: 0 auto var(--space-6);
1672 line-height: 1.55;
1673 letter-spacing: -0.005em;
1699 line-height: 1.5;
1700 letter-spacing: -0.008em;
1701 font-weight: 400;
16741702 }
16751703
16761704 .landing-hero-ctas {
Modifiedsrc/views/layout.tsx+18−6View fileUnifiedSplit
5858 <meta charset="UTF-8" />
5959 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6060 <meta name="theme-color" content="#0d1117" />
61 {/* 2026 polish — load Inter + Inter Tight + JetBrains Mono for
62 crisp modern typography. `preconnect` keeps the handshake
63 cost off the critical path; `display=swap` means we never
64 block first paint waiting on fonts. */}
65 <link rel="preconnect" href="https://fonts.googleapis.com" />
66 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
67 <link
68 rel="stylesheet"
69 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
70 />
6171 {/* PWA removed 2026-05-16 — repeated reload-loop bugs (admin
6272 dashboard, deploy pill, admin-screen flash). A git host has
6373 no use for service workers or install-as-app. Manifest link
869879 --amber: #fbbf24;
870880 --blue: #60a5fa;
871881
872 /* Type — system fonts FIRST so we never depend on Google Fonts loading.
873 Segoe UI (Win), -apple-system / SF (Mac), Roboto (Android), Inter as
874 optional upgrade if the user already has it. NEVER falls back to serif. */
875 --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
876 --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, 'Inter', sans-serif;
877 --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, 'Inter Tight', 'Inter', sans-serif;
882 /* Type — 2026 polish pass. Inter is the primary sans, Inter Tight for
883 display (headlines), JetBrains Mono for code. All three loaded from
884 Google Fonts with display:swap so we never block first paint. System
885 fallbacks remain in place — if the CDN is unreachable the site still
886 renders cleanly with Segoe UI (Win) / SF (Mac) / Roboto (Android). */
887 --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
888 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
889 --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
878890 --mono-feat: 'calt', 'liga', 'ss01';
879891
880892 /* Radius — sharper than before */
881893