/* Native Telegram-style landing. Light by day, native-dark by night. Palette ported from apps/web globals.css (.tg-* tokens). */ * { box-sizing: border-box; } html { background: #f4f6f9; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .tg-land { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 0; background: #f4f6f9; } /* night theme — applied to by app.js based on local hour */ html[data-theme="dark"], html[data-theme="dark"] body { background: #0e1621; } html[data-theme="dark"] .tg-land { background: linear-gradient(180deg, #18222d, #0e1621); } .tg-card { width: min(420px, calc(100% - 32px)); border-radius: 14px; padding: 40px 28px 32px; text-align: center; background: #fff; border: 1px solid #e7ebf0; box-shadow: 0 8px 30px rgba(0,0,0,.18); } html[data-theme="dark"] .tg-card { background: #1f2d3d; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 12px 40px rgba(0,0,0,.5); } .tg-avatar, .tg-avatar-fallback { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 22px; display: block; } .tg-avatar { object-fit: cover; } .tg-avatar-fallback { background: linear-gradient(140deg, #2f86eb, #4fa3f7); color: #fff; display: grid; place-items: center; font-size: 46px; font-weight: 700; } .tg-name { margin: 0 0 4px; font-size: 28px; font-weight: 800; color: #000; } html[data-theme="dark"] .tg-name { color: #f5f5f5; } .tg-user { font-size: 16px; margin-bottom: 8px; color: #8e8e93; } html[data-theme="dark"] .tg-user { color: #708499; } .tg-members { font-size: 14px; margin-bottom: 8px; color: #8e8e93; } html[data-theme="dark"] .tg-members { color: #708499; } .tg-desc { font-size: 15px; line-height: 1.45; margin: 6px 0 0; white-space: pre-wrap; color: #333; } html[data-theme="dark"] .tg-desc { color: #aebbc8; } .tg-cta-wrap { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tg-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border-radius: 999px; padding: 13px 34px; font-size: 15px; font-weight: 600; text-decoration: none; letter-spacing: .02em; text-transform: uppercase; background: #3390ec; position: relative; overflow: hidden; transition: background .15s, transform .06s, box-shadow .15s; } .tg-cta svg { flex-shrink: 0; } .tg-cta:hover { background: #2b7fd4; box-shadow: 0 4px 14px rgba(51,144,236,.4); } .tg-cta:active { transform: scale(.97); } /* periodic shine sweep */ .tg-cta::before { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; animation: tg-flash 2.6s ease-in-out infinite; } @keyframes tg-flash { 0% { left: -80%; } 55% { left: 130%; } 100% { left: 130%; } } /* JS ripple on pointerdown */ .tg-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: tg-ripple-anim .55s ease-out forwards; pointer-events: none; } @keyframes tg-ripple-anim { to { transform: scale(1); opacity: 0; } } .tg-fallback { font-size: 11.5px; color: #8a96a3; text-decoration: none; opacity: .8; } /* loading + not-found states */ .tg-loading { display: grid; place-items: center; min-height: 180px; } .tg-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(51,144,236,.25); border-top-color: #3390ec; animation: tg-spin .8s linear infinite; } @keyframes tg-spin { to { transform: rotate(360deg); } } .tg-error-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #000; } html[data-theme="dark"] .tg-error-title { color: #f5f5f5; } .tg-error-text { font-size: 15px; line-height: 1.45; margin: 0; color: #8e8e93; } html[data-theme="dark"] .tg-error-text { color: #708499; } /* системная заглушка корня (без слага) */ .tg-stub { text-align: center; } .tg-stub-mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; background: var(--tg-accent, #2f88ff); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 30px; font-family: var(--tg-display, system-ui), sans-serif; }