/* ======================================== TapTips v4 — Full Prototype CSS Transparent captions + Auth + Creator Profile ======================================== */ :root { --bg-primary: #0a0a0a; --bg-secondary: #141414; --bg-tertiary: #1e1e1e; --bg-elevated: #222222; --green: #00C853; --green-light: #69F0AE; --green-dark: #009624; --green-glow: rgba(0, 200, 83, 0.35); --green-subtle: rgba(0, 200, 83, 0.1); --gold: #FFD700; --gold-light: #FFE44D; --gold-glow: rgba(255, 215, 0, 0.25); --text-primary: #ffffff; --text-secondary: #aaaaaa; --text-muted: #666666; --border: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.12); --glass-card: rgba(12, 12, 12, 0.82); --shadow: 0 8px 32px rgba(0,0,0,0.4); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 100px; --nav-height: 68px; --status-height: 48px; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overflow: hidden; background: #050505; font-family: var(--font); color: var(--text-primary); -webkit-font-smoothing: antialiased; } body { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%, rgba(0,200,83,0.06) 0%, #050505 60%); } button { font-family: var(--font); cursor: pointer; border: none; outline: none; background: none; color: inherit; } input { font-family: var(--font); outline: none; border: none; } .hidden { display: none !important; } .green { color: var(--green) !important; } .gold { color: var(--gold) !important; } /* ==================== SPLASH ==================== */ #splash-screen { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-primary); overflow: hidden; animation: splashFadeIn 0.8s ease-out; } .splash-bg-glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%); animation: pulseGlow 3s ease-in-out infinite; pointer-events: none; } .splash-logo { margin-bottom: 32px; animation: splashLogoIn 1s var(--bounce) 0.2s both; } .splash-icon-ring { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px var(--green-glow), inset 0 0 30px var(--green-glow); animation: ringPulse 2s ease-in-out infinite; } .splash-icon { font-size: 48px; font-weight: 900; color: var(--green); text-shadow: 0 0 20px var(--green-glow); } .splash-title { font-size: 42px; font-weight: 900; letter-spacing: -1px; animation: splashLogoIn 1s var(--bounce) 0.4s both; } .splash-title span { background: linear-gradient(135deg, var(--green), var(--green-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .splash-tagline { font-size: 16px; color: var(--text-secondary); margin-top: 8px; animation: splashLogoIn 1s ease 0.6s both; } #splash-cta { margin-top: 48px; padding: 16px 48px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 4px 24px var(--green-glow); animation: splashLogoIn 1s ease 0.8s both; transition: transform 0.2s; } #splash-cta:hover { transform: scale(1.05); } #splash-cta:active { transform: scale(0.97); } #splash-install { margin-top: 14px; padding: 13px 40px; border-radius: var(--radius-full); background: transparent; color: var(--green-light); font-size: 15px; font-weight: 700; border: 1.5px solid rgba(0,200,83,0.45); animation: splashLogoIn 1s ease 0.9s both; transition: transform 0.2s; } #splash-install:hover { transform: scale(1.05); border-color: var(--green); } #splash-install:active { transform: scale(0.97); } .splash-footer { position: absolute; bottom: 40px; font-size: 13px; color: var(--text-muted); animation: splashLogoIn 1s ease 1s both; } #splash-lang { position: absolute; top: max(20px, env(safe-area-inset-top, 20px)); right: 20px; padding: 8px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); color: #fff; font-size: 13px; font-weight: 700; z-index: 5; } #splash-lang:active { transform: scale(0.95); } #splash-hiw { margin-top: 12px; padding: 8px 20px; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; animation: splashLogoIn 1s ease 1s both; } #splash-hiw:active { color: #fff; } #hiw-overlay { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 24px; } .hiw-card { width: 100%; max-width: 360px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 26px 22px; display: flex; flex-direction: column; gap: 16px; } .hiw-card h2 { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 2px; } .hiw-step { display: flex; gap: 14px; align-items: flex-start; } .hiw-emoji { font-size: 26px; flex-shrink: 0; margin-top: 2px; } .hiw-text h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; color: var(--green-light); } .hiw-text p { font-size: 13px; line-height: 1.45; color: var(--text-secondary); } #hiw-close { margin-top: 6px; } /* ==================== APP FRAME ==================== */ #app-frame { position: relative; width: 390px; height: 844px; border-radius: 44px; overflow: hidden; background: var(--bg-primary); box-shadow: 0 0 0 1px var(--border-light), 0 25px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0,200,83,0.07); animation: frameIn 0.6s ease-out; } #status-bar { position: absolute; top: 0; left: 0; right: 0; height: var(--status-height); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; z-index: 100; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%); pointer-events: none; } .status-time { font-size: 14px; font-weight: 600; } .status-right { display: flex; align-items: center; gap: 6px; } .status-icon { color: var(--text-primary); } /* Screens run edge-to-edge under the transparent nav; scrollable screens pad their bottom instead */ #screen-container { position: absolute; inset: 0; overflow: hidden; } .screen { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--bg-primary); } .screen.active { display: flex; animation: screenIn 0.35s ease-out; } .screen-scroll { overflow-y: auto; flex: 1; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 20px); } .screen-scroll::-webkit-scrollbar { display: none; } .screen-title { font-size: 28px; font-weight: 800; padding: 16px 20px 8px; } /* ==================== FEED HEADER ==================== */ #feed-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; padding-top: var(--status-height); background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%); } .feed-header-row { display: flex; align-items: center; justify-content: center; padding: 6px 16px 0; position: relative; } .feed-header-row .balance-chip { position: absolute; right: 12px; top: calc(50% + 3px); transform: translateY(-50%); max-width: 96px; } .feed-tabs { display: flex; gap: 4px; } .feed-tab { padding: 7px 13px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); border: 1px solid transparent; transition: var(--transition); } .feed-tab.active { color: #fff; background: rgba(0,200,83,0.15); border-color: rgba(0,200,83,0.4); box-shadow: 0 0 12px rgba(0,200,83,0.15); } /* Balance chip in feed header */ .balance-chip { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--radius-full); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,215,0,0.25); transition: var(--transition); } .balance-chip-amount { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .balance-chip:active { transform: scale(0.95); border-color: var(--gold); } .balance-chip-icon { font-size: 12px; } .balance-chip-amount { font-size: 13px; font-weight: 800; color: var(--gold); } .live-ticker { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px 10px; font-size: 11px; color: var(--text-secondary); } .ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: tickerPulse 1.5s ease-in-out infinite; box-shadow: 0 0 6px var(--green-glow); } .ticker-text strong { color: var(--gold); font-weight: 800; } /* ==================== VIDEO FEED ==================== */ #video-feed { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; -ms-overflow-style: none; scrollbar-width: none; } #video-feed::-webkit-scrollbar { display: none; } /* scroll-snap-stop: one video per swipe (TikTok behavior); contain: browser skips layout/paint work for off-screen cards */ .video-card { width: 100%; height: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: flex; flex-shrink: 0; overflow: hidden; contain: layout style paint; } .video-bg { position: absolute; inset: 0; /* simulate video motion: slow pan across an oversized gradient (!important beats the inline background shorthand) */ background-size: 220% 220% !important; animation: videoDrift 9s ease-in-out infinite alternate; animation-play-state: paused; /* only the on-screen card animates (see .video-card.active) */ } .video-card.active .video-bg { animation-play-state: running; } @keyframes videoDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } .video-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 30%, transparent 45%, rgba(0,0,0,0.6) 100%); } .video-playing-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; align-items: flex-end; height: 30px; opacity: 0.12; } .video-playing-indicator span { width: 4px; background: #fff; border-radius: 2px; animation: musicBar 0.8s ease-in-out infinite alternate; animation-play-state: paused; } .video-card.active .video-playing-indicator span { animation-play-state: running; } .video-playing-indicator span:nth-child(1) { height: 30%; animation-delay: 0s; } .video-playing-indicator span:nth-child(2) { height: 60%; animation-delay: 0.15s; } .video-playing-indicator span:nth-child(3) { height: 40%; animation-delay: 0.3s; } .video-playing-indicator span:nth-child(4) { height: 80%; animation-delay: 0.1s; } .video-playing-indicator span:nth-child(5) { height: 50%; animation-delay: 0.25s; } /* ==================== RIGHT-SIDE ACTION BUTTONS ==================== */ .action-buttons { position: absolute; right: 12px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 132px); display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 15; } .action-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.2s; } .action-btn:active { transform: scale(0.88); } /* no backdrop-filter here — blurring over a scrolling video layer is a major jank source on phones */ .action-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 50%; background: rgba(255,255,255,0.16); transition: var(--transition); } .action-count { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.8); text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .dollar-btn .action-icon { width: 54px; height: 54px; background: var(--green); font-size: 28px; font-weight: 900; color: #fff; box-shadow: 0 4px 20px var(--green-glow); } .dollar-btn .action-icon::before { content: '$'; font-size: 28px; font-weight: 900; } .dollar-btn .action-count { color: var(--gold); font-weight: 700; font-size: 12px; } .dollar-btn.tipped .action-icon { background: linear-gradient(135deg, var(--green), var(--gold)); box-shadow: 0 4px 24px var(--gold-glow), 0 0 20px var(--green-glow); } .dollar-btn.tipping .action-icon { animation: dollarPop 0.5s var(--bounce); } /* ==================== TRANSPARENT CAPTION (edge-to-edge) ==================== */ .video-caption-area { position: absolute; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 8px); left: 0; right: 74px; z-index: 10; padding: 0 14px; /* FULLY TRANSPARENT — no background! */ } .caption-creator-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .caption-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,0.4); flex-shrink: 0; cursor: pointer; transition: border-color 0.2s; } .caption-avatar:active { border-color: var(--green); } .caption-creator-name { font-size: 14px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5); } .caption-creator-name:active { color: var(--green); } .caption-right-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .earnings-chip { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(0,0,0,0.5); border: 1px solid rgba(255,215,0,0.25); cursor: pointer; transition: var(--transition); flex-shrink: 0; } .earnings-chip:active { background: rgba(255,215,0,0.15); border-color: var(--gold); transform: scale(1.05); } .earnings-chip-icon { font-size: 11px; } .earnings-chip-amount { font-size: 12px; font-weight: 800; color: var(--gold); text-shadow: none; } .earnings-chip-arrow { font-size: 9px; color: var(--text-muted); } .follow-chip { padding: 5px 12px; border-radius: var(--radius-full); border: 1.5px solid rgba(255,255,255,0.5); color: #fff; font-size: 12px; font-weight: 700; transition: var(--transition); flex-shrink: 0; text-shadow: none; } .follow-chip.following { background: var(--green); color: #000; border-color: var(--green); } .caption-text { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.9); margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .caption-music { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.6); text-shadow: 0 1px 4px rgba(0,0,0,0.7); } .music-note { animation: spin 3s linear infinite; animation-play-state: paused; } .caption-music-text { white-space: nowrap; overflow: hidden; max-width: 220px; } .caption-music-text span { display: inline-block; animation: marquee 10s linear infinite; animation-play-state: paused; } .video-card.active .music-note, .video-card.active .caption-music-text span { animation-play-state: running; } /* Flying dollars */ .flying-dollar { position: absolute; font-weight: 900; pointer-events: none; z-index: 999; animation: flyUp 1s ease-out forwards; } .flying-dollar.green { color: var(--green-light); text-shadow: 0 0 10px var(--green-glow); } .flying-dollar.gold { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); } /* ==================== BOTTOM NAV ==================== */ /* Transparent TikTok-style nav — content shows through behind a dark fade */ #bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-around; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, transparent 100%); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 200; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; color: var(--text-muted); transition: var(--transition); } .nav-item.active { color: var(--green); } .nav-item .nav-icon-svg { width: 24px; height: 24px; } .nav-label { font-size: 10px; font-weight: 600; } .nav-item.create-btn { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--green), var(--green-dark)); display: flex; align-items: center; justify-content: center; margin-top: -8px; padding: 0; box-shadow: 0 4px 16px var(--green-glow); } .nav-item.create-btn:active { transform: scale(0.92); } .create-icon { font-size: 24px; font-weight: 300; color: #fff; line-height: 1; } /* ==================== AUTH MODAL ==================== */ .auth-sheet { padding: 12px 24px 36px !important; } .auth-logo { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, var(--green), var(--green-dark)); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #fff; box-shadow: 0 4px 24px var(--green-glow); } .auth-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 4px; } .auth-subtitle { text-align: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .input-group { display: flex; flex-direction: column; gap: 5px; } .input-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .input-wrap { display: flex; align-items: center; background: var(--bg-tertiary); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0 14px; transition: border-color var(--transition); } .input-wrap:focus-within { border-color: var(--green); } .input-prefix { color: var(--text-muted); font-weight: 600; margin-right: 2px; font-size: 15px; } .input-wrap input { flex: 1; background: none; color: var(--text-primary); padding: 14px 0; font-size: 15px; } .input-wrap input::placeholder { color: var(--text-muted); } .auth-submit { margin-top: 8px; flex-direction: column !important; gap: 2px !important; } .auth-bonus { font-size: 11px; font-weight: 600; color: var(--gold); opacity: 0.9; } .auth-toggle { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); } .auth-toggle button { color: var(--green); font-weight: 700; font-size: 13px; margin-left: 4px; } /* ==================== CREATOR PROFILE MODAL ==================== */ .creator-backdrop { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; background: rgba(0,0,0,0.5) !important; } .creator-sheet { min-height: 72%; max-height: 85%; overflow-y: auto; padding: 12px 20px 28px !important; background: linear-gradient(180deg, #151515 0%, var(--bg-secondary) 100%) !important; border-top: 1px solid rgba(0,200,83,0.15) !important; -ms-overflow-style: none; scrollbar-width: none; } .creator-sheet::-webkit-scrollbar { display: none; } .cp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .cp-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; border: 2.5px solid var(--green); flex-shrink: 0; box-shadow: 0 0 16px var(--green-glow); } .cp-info { flex: 1; min-width: 0; } .cp-name { font-size: 18px; font-weight: 800; margin-bottom: 2px; } .cp-bio { font-size: 13px; color: var(--text-secondary); } .cp-follow { flex-shrink: 0; border-color: var(--green); color: var(--green); } .cp-stats { display: flex; align-items: center; justify-content: center; padding: 14px 0; margin-bottom: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cp-stat { flex: 1; text-align: center; } .cp-stat-value { display: block; font-size: 18px; font-weight: 800; } .cp-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; } .cp-stat-divider { width: 1px; height: 28px; background: var(--border-light); } /* Earnings progress bar */ .cp-progress-wrap { margin-bottom: 16px; } .cp-progress-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); } .cp-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width 0.6s ease; } .cp-progress-text { display: block; text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 5px; font-weight: 600; } .cp-section-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; letter-spacing: 0.3px; } /* Video carousel */ .cp-video-carousel { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; } .cp-video-carousel::-webkit-scrollbar { display: none; } .cp-video-item { flex-shrink: 0; width: 110px; aspect-ratio: 9/14; border-radius: var(--radius-md); overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s; } .cp-video-item:active { transform: scale(0.95); } .cp-video-bg { position: absolute; inset: 0; } .cp-video-earned { position: absolute; bottom: 6px; left: 6px; font-size: 11px; font-weight: 700; color: var(--green-light); text-shadow: 0 1px 4px rgba(0,0,0,0.7); } /* Creator supporters mini */ .cp-supporters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .cp-supp-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); } .cp-supp-item:first-child { background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.12); } .cp-supp-rank { font-size: 15px; width: 24px; text-align: center; } .cp-supp-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; } .cp-supp-name { flex: 1; font-size: 12px; font-weight: 600; } .cp-supp-amount { font-size: 13px; font-weight: 800; color: var(--gold); } .cp-tip-btn { margin-top: 4px; } /* ==================== DISCOVER ==================== */ .discover-search { padding: 56px 16px 4px; } .search-bar { display: flex; align-items: center; gap: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 12px 18px; transition: border-color var(--transition); } .search-bar:focus-within { border-color: var(--green); } .search-bar input { flex: 1; background: none; color: var(--text-primary); font-size: 15px; } .search-bar input::placeholder { color: var(--text-muted); } .section { margin-bottom: 24px; } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 12px; } .section-header h3 { font-size: 18px; font-weight: 700; } .see-all { font-size: 13px; color: var(--green); font-weight: 600; cursor: pointer; } .horizontal-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px; -ms-overflow-style: none; scrollbar-width: none; } .horizontal-scroll::-webkit-scrollbar { display: none; } .earner-card { flex-shrink: 0; width: 140px; background: var(--bg-tertiary); border-radius: var(--radius-lg); padding: 16px; text-align: center; border: 1px solid var(--border); transition: transform var(--transition); position: relative; cursor: pointer; } .earner-card:active { transform: scale(0.96); } .earner-card:hover { transform: translateY(-2px); border-color: var(--green); } .earner-avatar { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; } .earner-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .earner-amount { font-size: 15px; font-weight: 800; color: var(--gold); } .earner-rank { position: absolute; top: -4px; right: -4px; font-size: 18px; } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 16px; } .category-pill { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-secondary); transition: var(--transition); cursor: pointer; } .category-pill:hover { border-color: var(--green); color: var(--green); background: var(--green-subtle); } .category-emoji { font-size: 24px; } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 16px; } .grid-video { position: relative; aspect-ratio: 9/12; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; transition: transform 0.2s; } .grid-video:active { transform: scale(0.96); } .grid-video-bg { position: absolute; inset: 0; } .grid-video-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); } .grid-video-amount { font-size: 12px; font-weight: 700; color: var(--green-light); } /* ==================== WALLET ==================== */ .wallet-top { padding: 56px 20px 8px; } .balance-card { margin: 0 16px; padding: 28px 24px; border-radius: var(--radius-xl); background: var(--bg-tertiary); border: 1px solid var(--border-light); position: relative; overflow: hidden; } .balance-card-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,200,83,0.08) 0%, rgba(255,215,0,0.05) 100%); pointer-events: none; } .balance-label { display: block; font-size: 13px; color: var(--text-secondary); font-weight: 500; margin-bottom: 4px; position: relative; } .balance-amount { display: block; font-size: 44px; font-weight: 900; letter-spacing: -2px; background: linear-gradient(135deg, var(--green-light), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; margin-bottom: 20px; } .balance-actions { display: flex; gap: 12px; position: relative; } .wallet-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--radius-md); background: var(--green); color: #fff; font-size: 15px; font-weight: 700; transition: var(--transition); } .wallet-action-btn:active { transform: scale(0.97); } .wallet-action-btn.outline { background: transparent; border: 1.5px solid var(--border-light); color: var(--text-primary); } .wallet-action-icon { font-size: 18px; font-weight: 700; } .wallet-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; } .mini-stat-card { background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; border: 1px solid var(--border); } .mini-stat-icon { font-size: 20px; display: block; margin-bottom: 6px; } .mini-stat-value { display: block; font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 2px; } .mini-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; } .transaction-list { padding: 0 16px; } .transaction-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .transaction-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .transaction-info { flex: 1; min-width: 0; } .transaction-name { font-size: 14px; font-weight: 600; } .transaction-desc { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .transaction-amount { font-size: 15px; font-weight: 700; flex-shrink: 0; } .transaction-amount.positive { color: var(--green); } .transaction-amount.negative { color: var(--text-secondary); } /* ==================== PROFILE ==================== */ .profile-cover { height: 120px; background: linear-gradient(135deg, var(--green-dark), #004d25, var(--bg-primary)); position: relative; } .profile-cover::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, var(--bg-primary)); } .profile-info { text-align: center; margin-top: -36px; padding: 0 20px; position: relative; } .profile-avatar-wrap { position: relative; display: inline-block; } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green-dark)); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; border: 3px solid var(--bg-primary); margin: 0 auto; } .profile-avatar-badge { position: absolute; bottom: 0; right: -2px; width: 22px; height: 22px; background: var(--green); border-radius: 50%; border: 2px solid var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 11px; } .profile-name { font-size: 20px; font-weight: 800; margin-top: 10px; } .profile-bio { font-size: 14px; color: var(--text-secondary); margin-top: 6px; } .profile-stats-row { display: flex; align-items: center; justify-content: center; margin-top: 20px; } .profile-stat { padding: 0 20px; text-align: center; } .profile-stat-divider { width: 1px; height: 30px; background: var(--border-light); } .profile-stat-value { display: block; font-size: 20px; font-weight: 800; } .profile-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .edit-profile-btn { margin-top: 16px; padding: 10px 28px; border-radius: var(--radius-full); border: 1.5px solid var(--border-light); font-size: 14px; font-weight: 600; transition: var(--transition); } .edit-profile-btn:hover { border-color: var(--green); color: var(--green); } .profile-tabs { display: flex; border-bottom: 1px solid var(--border); margin: 20px 16px 12px; } .profile-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; position: relative; transition: var(--transition); } .profile-tab.active { color: var(--text-primary); } .profile-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px; background: var(--green); border-radius: 2px; } /* ==================== MODALS ==================== */ .modal { position: absolute; inset: 0; z-index: 500; display: none; align-items: flex-end; justify-content: center; } .modal.open { display: flex; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); animation: fadeIn 0.3s ease; } .modal-sheet { position: relative; width: 100%; background: var(--bg-secondary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 12px 20px 32px; animation: slideUp 0.35s var(--bounce); border-top: 1px solid var(--border-light); } .modal-sheet.tall { min-height: 50%; } .modal-handle { width: 40px; height: 4px; background: var(--text-muted); border-radius: 2px; margin: 0 auto 20px; opacity: 0.4; } .modal-title { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 16px; } .tip-header { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; } .tip-creator-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; } .tip-creator-name { font-size: 16px; font-weight: 700; } .tip-prompt { text-align: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; } .tip-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .tip-amount-btn { padding: 16px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1.5px solid var(--border); font-size: 20px; font-weight: 800; transition: var(--transition); } .tip-amount-btn.selected { background: var(--green-subtle); border-color: var(--green); color: var(--green); box-shadow: 0 0 16px var(--green-glow); } .tip-amount-btn.locked { opacity: 0.38; position: relative; } .tip-amount-btn.locked::after { content: '🔒'; position: absolute; top: 4px; right: 6px; font-size: 11px; opacity: 0.9; } .tip-balance-info { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .primary-btn { width: 100%; padding: 16px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--green), var(--green-dark)); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 20px var(--green-glow); transition: transform 0.2s; } .primary-btn:active { transform: scale(0.97); } .btn-icon { font-size: 20px; font-weight: 900; } .topup-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .topup-amount-btn { padding: 14px 8px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1.5px solid var(--border); font-size: 17px; font-weight: 700; transition: var(--transition); } .topup-amount-btn.selected { background: var(--green-subtle); border-color: var(--green); color: var(--green); } .payment-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .payment-method-btn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1.5px solid var(--border); font-size: 15px; font-weight: 600; color: var(--text-secondary); transition: var(--transition); } .payment-method-btn.active { border-color: var(--green); color: var(--text-primary); background: var(--green-subtle); } .create-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .create-option { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-tertiary); border: 1px solid var(--border); text-align: left; transition: var(--transition); } .create-option:hover { border-color: var(--green); background: var(--green-subtle); } .create-option-icon { font-size: 28px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-radius: var(--radius-md); } .create-option-label { font-size: 16px; font-weight: 700; display: block; } .create-option-desc { font-size: 13px; color: var(--text-muted); } .create-footer-text { text-align: center; font-size: 13px; color: var(--text-muted); } /* Supporters modal */ .supporters-header { margin-bottom: 16px; } .supporters-video-info { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-tertiary); border-radius: var(--radius-md); border: 1px solid var(--border); } .supporters-creator-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; } .supporters-meta { flex: 1; } .supporters-creator-name { font-size: 14px; font-weight: 700; display: block; } .supporters-total { font-size: 16px; font-weight: 800; color: var(--gold); } .supporters-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; } .supporter-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); } .supporter-item:first-child { background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.15); } .supporter-rank { font-size: 18px; width: 30px; text-align: center; flex-shrink: 0; } .supporter-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .supporter-info { flex: 1; } .supporter-name { font-size: 13px; font-weight: 700; } .supporter-tips { font-size: 11px; color: var(--text-muted); } .supporter-amount { font-size: 16px; font-weight: 800; color: var(--gold); flex-shrink: 0; } .supporters-footer { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 16px; } /* ==================== DOLLAR RAIN & TOAST ==================== */ .dollar-rain { position: absolute; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; } .rain-dollar { position: absolute; font-weight: 900; opacity: 0; animation: dollarRain 1.5s ease-out forwards; } .rain-dollar.green { color: var(--green); } .rain-dollar.gold { color: var(--gold); } .rain-dollar.white { color: rgba(255,255,255,0.6); } .toast { position: absolute; bottom: calc(var(--nav-height) + 16px); left: 16px; right: 16px; padding: 14px 20px; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border-light); font-size: 14px; font-weight: 600; display: none; align-items: center; gap: 10px; z-index: 600; box-shadow: var(--shadow); } .toast.show { display: flex; animation: toastIn 0.4s var(--bounce), toastOut 0.3s ease 2s forwards; } .toast-icon { font-size: 20px; } /* ==================== ANIMATIONS ==================== */ @keyframes splashFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes splashLogoIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } } @keyframes ringPulse { 0%, 100% { box-shadow: 0 0 30px var(--green-glow), inset 0 0 30px var(--green-glow); } 50% { box-shadow: 0 0 50px var(--green-glow), inset 0 0 50px var(--green-glow); } } @keyframes frameIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes screenIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @keyframes dollarPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes flyUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-90px) scale(1.4); } } @keyframes dollarRain { 0% { opacity: 0; transform: translateY(-20px) rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(400px) rotate(360deg); } } @keyframes musicBar { to { height: 100%; } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(20px); } } @keyframes tickerPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } /* ==================== RESPONSIVE ==================== */ @media (max-width: 430px) { body { background: var(--bg-primary); } #app-frame { width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; } /* Real phones have a real status bar — hide the fake demo one and pad by the device's safe area instead */ :root { --status-height: calc(env(safe-area-inset-top, 0px) + 8px); --nav-height: 60px; } #status-bar { display: none; } /* Sleeker bar on phones: icons sit lower, closer to the bottom edge */ #bottom-nav { padding-top: 3px; } } @media (min-width: 431px) and (max-width: 900px) { #app-frame { border-radius: 0; width: 100vw; height: 100vh; height: 100dvh; margin: 0; box-shadow: none; } } ::-webkit-scrollbar { width: 0; height: 0; } ::selection { background: var(--green); color: #000; } /* ==================== V5 — CAMPUS CHALLENGE, COMMENTS, UPLOAD ==================== */ /* Challenge banner (feed header) */ .challenge-banner { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 16px 8px; padding: 6px 12px; width: calc(100% - 32px); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--gold); background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.25); transition: var(--transition); cursor: pointer; } .challenge-banner:active { transform: scale(0.98); } .challenge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .challenge-text strong { font-weight: 800; } .challenge-arrow { opacity: 0.7; } .leaderboard-subtitle { text-align: center; font-size: 12px; color: var(--text-secondary); margin: -8px 0 14px; } /* Category pill active state */ .category-pill.active { border-color: var(--green); color: var(--green-light); background: rgba(0,200,83,0.08); } /* Empty states (feed + grids) */ .feed-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; color: var(--text-secondary); font-size: 14px; } .feed-empty .feed-empty-icon { font-size: 40px; } .grid-empty { grid-column: 1 / -1; text-align: center; padding: 24px 16px; color: var(--text-muted); font-size: 13px; } /* Saved state on bookmark button */ .save-btn.saved .action-icon { filter: drop-shadow(0 0 6px var(--gold-glow)); } .save-btn.saved .action-count { color: var(--gold); font-weight: 800; } /* Comments modal */ .comments-list { display: flex; flex-direction: column; gap: 12px; max-height: 320px; min-height: 120px; overflow-y: auto; margin-bottom: 14px; } .comment-item { display: flex; gap: 10px; align-items: flex-start; } .comment-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .comment-body { flex: 1; } .comment-author { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; } .comment-author.you { color: var(--green-light); } .comment-text { font-size: 13px; line-height: 1.4; } .comment-form { display: flex; gap: 8px; align-items: center; } .comment-form input { flex: 1; background: var(--bg-tertiary); border: 1.5px solid var(--border); border-radius: var(--radius-full); padding: 10px 16px; font-size: 13px; color: #fff; outline: none; transition: border-color var(--transition); } .comment-form input:focus { border-color: var(--green); } .comment-send { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; font-size: 15px; background: var(--green); color: #000; display: flex; align-items: center; justify-content: center; } .comment-send:active { transform: scale(0.92); } /* Upload modal gradient swatches */ .gradient-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .swatch { aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: var(--transition); } .swatch.selected { border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); transform: scale(1.06); } /* ==================== V6 — REAL VIDEO, INBOX, DELETE, BACK ==================== */ /* Real uploaded