/* Brand tokens mirrored from web-client/src/shared/styles/globals.css */ :root { --color-background: #d3e3eb; --color-foreground: #1c242b; --color-surface-1: #ffffff; --color-primary: #5866b8; /* swapPrimary */ --color-primary-hover: #4a5bd1; --color-accent: #ff733f; /* redeemPrimary */ --color-dark: #222222; --color-dark-blue-300: #8ca8c3; --color-muted-foreground: #555d65; --color-border: #d9e0e6; --color-gradient-start: #6dc2dd; --color-gradient-mid: #34a2c5; --color-gradient-end: #7562b9; --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Montserrat", var(--font-body); --radius-card: 24px; --shadow-card: 0 24px 60px rgba(28, 36, 43, 0.12); --shadow-cta: 0 10px 24px rgba(88, 102, 184, 0.32); } * { box-sizing: border-box; } /* The page fill lives on only: an opaque background on would paint over .glow, which sits at z-index -1. */ html { background-color: var(--color-background); } html, body { margin: 0; color: var(--color-foreground); } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-body); font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { text-decoration: none; color: inherit; } /* Soft brand-gradient wash behind the card, echoing the app's page fills. */ .glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vmax 50vmax at 15% 5%, rgba(109, 194, 221, 0.6), transparent 65%), radial-gradient(55vmax 45vmax at 88% 20%, rgba(117, 98, 185, 0.35), transparent 65%), radial-gradient(50vmax 40vmax at 65% 105%, rgba(255, 115, 63, 0.2), transparent 65%); } .masthead { padding: 28px clamp(20px, 5vw, 48px); } .brand img { display: block; width: 78px; height: auto; } .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px clamp(20px, 5vw, 48px) clamp(40px, 8vh, 80px); } .card { width: 100%; max-width: 640px; padding: clamp(28px, 5vw, 48px); border-radius: var(--radius-card); background: linear-gradient(165deg, rgba(255, 255, 255, 0.86) 10.76%, rgba(255, 255, 255, 0.97) 90.67%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 115, 63, 0.1); color: var(--color-accent); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(255, 115, 63, 0.6); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 115, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 115, 63, 0); } } h1 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5.2vw, 42px); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-dark); } .gradient { background: linear-gradient(90deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 99.9%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { margin: 0 auto 32px; max-width: 46ch; font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6; color: var(--color-muted-foreground); } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 4px solid rgba(255, 255, 255, 0.1); background: var(--color-primary); color: #ffffff; font-family: var(--font-display); font-size: 16px; font-weight: 700; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--shadow-cta); } .cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); } .cta:active { transform: translateY(0); } .cta:focus-visible { outline: 3px solid var(--color-gradient-start); outline-offset: 3px; } .cta-chain { border-radius: 50%; display: block; } .cta-arrow { transition: transform 0.2s ease; } .cta:hover .cta-arrow { transform: translateX(3px); } .meta { margin: 24px 0 0; font-size: 14px; color: var(--color-muted-foreground); } .mono { font-variant-numeric: tabular-nums; color: var(--color-foreground); font-weight: 500; } .count { display: inline-block; min-width: 1.2ch; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-primary); } .stop { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .stop:hover { color: var(--color-primary-hover); } .footnote { margin: 0; font-size: 13px; color: var(--color-dark-blue-300); } .footnote a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }