/* ArbitrageRadar PRO — site styles Theme is driven by [data-theme="light"|"dark"] on . */ :root { --brand: #2BA189; /* AR PRO badge green */ --brand-2: #34d399; /* profit / accent */ --brand-deep: #0f3b34; --green: #10b981; --red: #f87171; --purple: #7c3aed; --purple-bg: rgba(124,58,237,0.10); --purple-bd: rgba(124,58,237,0.28); --purple-tx: rgba(120,80,220,0.95); /* Light defaults */ --bg: #f5f6f8; --bg-2: #ffffff; --bg-elev: #ffffff; --text: #0b1220; --text-soft: #475569; --text-fade: #94a3b8; --hair: #e5e7eb; --hair-2: #f1f3f5; --shadow-lg: 0 30px 80px -20px rgba(15,23,42,0.18), 0 10px 30px -10px rgba(15,23,42,0.08); --shadow-md: 0 12px 32px -8px rgba(15,23,42,0.10), 0 4px 10px -4px rgba(15,23,42,0.05); --shadow-sm: 0 6px 18px -6px rgba(15,23,42,0.10); --nav-bg: rgba(255,255,255,0.72); --nav-bd: rgba(15,23,42,0.08); } [data-theme="dark"] { --bg: #0a0f14; --bg-2: #0e1116; --bg-elev: #11161d; --text: #e5e7eb; --text-soft: #cbd5e1; --text-fade: #64748b; --hair: #1f2937; --hair-2: #161b22; --shadow-lg: 0 30px 80px -10px rgba(0,0,0,0.6), 0 10px 30px -10px rgba(0,0,0,0.4); --shadow-md: 0 14px 36px -10px rgba(0,0,0,0.55); --shadow-sm: 0 6px 18px -6px rgba(0,0,0,0.5); --nav-bg: rgba(10,15,20,0.65); --nav-bd: rgba(255,255,255,0.06); } html, body { background: var(--bg); color: var(--text); } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-feature-settings: 'ss01','cv11'; letter-spacing: -0.005em; } .font-display { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; letter-spacing: -0.035em; font-weight: 800; } .eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-fade); font-weight: 700; } .dotpulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: dotpulse 1.6s ease-out infinite; display: inline-block; } @keyframes dotpulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); } 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } /* ============================== MATCH CARD ============================== */ .ar-card { position: relative; border-radius: 14px; padding: 10px 12px; border: 1px solid var(--hair); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-md); width: 340px; overflow: hidden; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; transition: transform .35s ease, box-shadow .35s ease; } .ar-card-dark { background: #0e1116; color: #e5e7eb; border-color: #1f2937; box-shadow: 0 14px 36px -10px rgba(0,0,0,0.55); } .ar-card-compact { width: 324px; padding: 9px 11px; border-radius: 12px; } .ar-flash { position: absolute; inset: 0; pointer-events: none; background: var(--flash, transparent); transition: background .55s ease; border-radius: inherit; } .ar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; position: relative; } .ar-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; } .ar-coin { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .ar-card-compact .ar-coin { font-size: 15px; } .ar-pair { border-radius: 6px; padding: 3px 7px; border: 1px solid var(--hair); background: var(--hair-2); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-soft); } .ar-card-dark .ar-pair { background: #161b22; border-color: #1f2937; color: #94a3b8; } .ar-pair.ar-pair-cross { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple-tx); } .ar-head-r { display: flex; align-items: center; gap: 10px; position: relative; } .ar-profit { font-size: 16px; font-weight: 800; color: var(--green); letter-spacing: -0.01em; } .ar-card-compact .ar-profit { font-size: 14px; } .ar-profit.neg { color: var(--red); } .ar-star { font-size: 18px; color: #c7ccd3; } .ar-card-dark .ar-star { color: #4b5563; } .ar-bell { position: relative; display: inline-block; width: 22px; text-align: center; font-size: 16px; filter: grayscale(1) opacity(0.85); } .ar-bell-strike { position: absolute; left: 0; right: 0; top: 11px; height: 2.5px; background: #FF2020; border-radius: 1.5px; transform: rotate(35deg); } .ar-divider { height: 1px; background: var(--hair-2); margin-bottom: 7px; } .ar-card-dark .ar-divider { background: #161b22; } .ar-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 5px; position: relative; } .ar-badge { width: 36px; text-align: center; border-radius: 6px; padding: 3px 0; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; border: 1px solid; } .ar-buy { color: #10b981; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.22); } .ar-sell { color: #ef4444; background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.22); } .ar-main { flex: 1; min-width: 0; } .ar-line { display: flex; align-items: center; gap: 6px; } .ar-line-meta { margin-top: 1px; } .ar-exch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; } .ar-exch > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-card-compact .ar-exch { font-size: 13px; } .ar-price { font-size: 14.5px; font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; margin-left: auto; } .ar-card-compact .ar-price { font-size: 13px; } .ar-sym { flex: 1; font-size: 10.5px; color: var(--text-fade); letter-spacing: 0.02em; } .ar-vol { font-size: 10.5px; color: var(--text-fade); white-space: nowrap; } .ar-orig { font-size: 10.5px; color: var(--text-fade); margin-right: 4px; white-space: nowrap; } /* ============================== NAV ============================== */ .ar-nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--nav-bd); } /* ============================== IPHONE 17 PRO FRAME ============================== */ .iphone-frame { position: relative; border-radius: 56px; padding: 12px; /* Natural Titanium-ish brushed metal — darker rim w/ soft highlights */ background: linear-gradient(155deg, #4a4744 0%, #2a2826 28%, #1a1816 58%, #3c3936 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), inset 0 0 0 2.5px #0a0908, inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.4), 0 70px 110px -30px rgba(0,0,0,0.55), 0 24px 60px -20px rgba(0,0,0,0.4); } [data-theme="light"] .iphone-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 0 0 2.5px #0a0908, inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.4), 0 70px 110px -30px rgba(15,23,42,0.28), 0 24px 60px -20px rgba(15,23,42,0.18); } /* Physical buttons */ .iphone-frame::before, .iphone-frame::after { content: ''; position: absolute; background: linear-gradient(90deg, #1a1816, #3a3633, #1a1816); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.5); } /* Power button (right) */ .iphone-frame::after { right: -1.5px; top: 27%; width: 3px; height: 90px; border-radius: 2px; } /* Volume buttons (left) */ .iphone-frame::before { left: -1.5px; top: 22%; width: 3px; height: 60px; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.5), 0 78px 0 0 #2a2624, 0 90px 0 0 #2a2624, 0 100px 0 0 #2a2624; } .iphone-screen { position: relative; border-radius: 46px; overflow: hidden; background: #fff; width: 100%; height: 100%; } .iphone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 32px; background: #000; border-radius: 20px; z-index: 3; box-shadow: 0 0 0 2px #0a0908; } .iphone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; } /* Hero gradient backdrop */ .hero-glow { position: absolute; pointer-events: none; inset: 0; overflow: hidden; } .hero-glow::before, .hero-glow::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .hero-glow::before { width: 520px; height: 520px; left: -100px; top: -120px; background: radial-gradient(circle, rgba(43,161,137,0.45), transparent 60%); } .hero-glow::after { width: 600px; height: 600px; right: -160px; bottom: -200px; background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 60%); } [data-theme="dark"] .hero-glow::before { opacity: 0.42; } [data-theme="dark"] .hero-glow::after { opacity: 0.30; } /* Floating hero cards */ .floatie { position: absolute; transform-origin: center; will-change: transform; } .floatie .ar-card { backdrop-filter: blur(8px); } @keyframes floatA { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes floatB { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } } @keyframes floatC { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @keyframes floatD { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } .floatie.fA { animation: floatA 6s ease-in-out infinite; } .floatie.fB { animation: floatB 7s ease-in-out infinite; } .floatie.fC { animation: floatC 6.5s ease-in-out infinite; } .floatie.fD { animation: floatD 7.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .floatie.fA, .floatie.fB, .floatie.fC, .floatie.fD { animation: none; } } /* ============================== iPhone AURA — Gemini-style radial glow ============================== */ /* Wrap the iPhone with this to give it a breathing concentric halo. Multiple stacked radial gradients create the layered "rings" effect. */ .iphone-aura { position: relative; display: inline-block; isolation: isolate; } .iphone-aura::before { content: ''; position: absolute; inset: -75% -75%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(43,161,137,0.95) 0%, rgba(43,161,137,0.62) 14%, rgba(43,161,137,0.38) 28%, rgba(43,161,137,0.18) 46%, transparent 70%), radial-gradient(ellipse 65% 55% at center, rgba(124,58,237,0.28) 0%, transparent 70%); filter: blur(50px); animation: auraBreathe 7s ease-in-out infinite; will-change: transform, opacity; } .iphone-aura::after { /* Inner concentric "ripples" — closer, tighter rings */ content: ''; position: absolute; inset: -38% -38%; z-index: -1; pointer-events: none; background: radial-gradient(circle at center, rgba(43,161,137,0.72) 0%, rgba(43,161,137,0.38) 22%, rgba(43,161,137,0.14) 42%, transparent 62%); filter: blur(28px); animation: auraBreathe 5s ease-in-out infinite reverse; will-change: transform, opacity; } [data-theme="light"] .iphone-aura::before { opacity: 1; } [data-theme="light"] .iphone-aura::after { opacity: 0.95; } [data-theme="dark"] .iphone-aura::before { opacity: 1; } [data-theme="dark"] .iphone-aura::after { opacity: 1; } @keyframes auraBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.82; } } /* Drop-shadow halo for the 3 secondary mockups (Features + CTA). Tight, dark-colored shadow that grounds the phone — black-toned, not green. */ .iphone-aura-soft { position: relative; display: inline-block; isolation: isolate; } .iphone-aura-soft::before { /* Wide dark halo — gives the phone weight */ content: ''; position: absolute; inset: -20% -20%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.30) 30%, rgba(15,23,42,0.12) 50%, transparent 72%); filter: blur(36px); } .iphone-aura-soft::after { /* Tight under-shadow — the phone "casts" onto surface */ content: ''; position: absolute; bottom: -8%; left: 8%; right: 8%; height: 22%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 45%, transparent 75%); filter: blur(24px); } [data-theme="light"] .iphone-aura-soft::before { opacity: 0.55; } [data-theme="light"] .iphone-aura-soft::after { opacity: 0.7; } [data-theme="dark"] .iphone-aura-soft::before { opacity: 0.9; } [data-theme="dark"] .iphone-aura-soft::after { opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .iphone-aura::before, .iphone-aura::after { animation: none; } } /* Alert-popup breathing pulse: 1.0× → 1.1× → 1.0× (one-way pulse, loops). */ @keyframes alertPopupPulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } } .alert-popup-pulse { animation: alertPopupPulse 2.4s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .alert-popup-pulse { animation: none; transform: translateX(-50%) scale(1); } } /* Feature-C (57+ exchanges) mockup — gentle fade-in + slight pop in place */ @keyframes fadeInPop { 0% { opacity: 0; transform: scale(0.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } .fadein-pop { opacity: 0; transform: scale(0.92); will-change: transform, opacity; } .fadein-pop.is-visible { animation: fadeInPop 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @media (prefers-reduced-motion: reduce) { .fadein-pop, .fadein-pop.is-visible { opacity: 1; transform: none; animation: none; } } /* CTA App Store mockup slide-in from left when scrolled into view */ @keyframes ctaSlideInLeft { 0% { transform: translateX(-80px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .cta-slide-in { opacity: 0; transform: translateX(-80px); will-change: transform, opacity; } .cta-slide-in.is-visible { animation: ctaSlideInLeft 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @media (prefers-reduced-motion: reduce) { .cta-slide-in, .cta-slide-in.is-visible { opacity: 1; transform: none; animation: none; } } /* ============================== HERO BACKDROP (simple blob gradients) ============================== */ .hero-backdrop { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } /* Top-right brand-green blob */ .hero-blob-1 { width: 720px; height: 720px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(43,161,137,0.55), transparent 65%); animation: blobDrift1 22s ease-in-out infinite; } /* Bottom-left purple blob */ .hero-blob-2 { width: 600px; height: 600px; left: -160px; bottom: -200px; background: radial-gradient(circle, rgba(124,58,237,0.40), transparent 65%); animation: blobDrift2 26s ease-in-out infinite; } [data-theme="dark"] .hero-blob-1 { opacity: 0.45; } [data-theme="dark"] .hero-blob-2 { opacity: 0.35; } @keyframes blobDrift1 { 0%,100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } } @keyframes blobDrift2 { 0%,100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .hero-blob-1, .hero-blob-2 { animation: none; } } /* ============================== MARQUEE ============================== */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 18px; width: max-content; will-change: transform; } .marquee-left .marquee-track { animation: scrollLeft 55s linear infinite; } .marquee-right .marquee-track { animation: scrollRight 65s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .marquee-left .marquee-track, .marquee-right .marquee-track { animation-duration: 200s; } } /* ============================== STORE BUTTONS ============================== */ .store-btn { display: inline-flex; align-items: center; gap: 10px; background: #0a0a0c; color: #fff; border-radius: 12px; padding: 10px 18px; border: 1px solid rgba(255,255,255,0.08); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 10px 30px -10px rgba(15,23,42,0.45); } .store-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(15,23,42,0.55); } .store-btn .glyph { width: 26px; height: 26px; } .store-btn .small { font-size: 10px; opacity: 0.7; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .store-btn .big { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } /* Disabled state — visual: dim + no hover lift + cursor not-allowed */ .store-btn-disabled { opacity: 0.45; filter: grayscale(0.4); cursor: not-allowed; pointer-events: none; box-shadow: none; } .store-btn-disabled:hover { transform: none; box-shadow: none; } .store-coming-soon { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; text-align: center; padding: 2px 6px; } /* ============================== FAQ ============================== */ .faq-item { border-top: 1px solid var(--hair); } .faq-item:last-child { border-bottom: 1px solid var(--hair); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 4px; text-align: left; font-size: 18px; font-weight: 600; color: var(--text); background: transparent; border: none; cursor: pointer; letter-spacing: -0.01em; } .faq-q .plus { transition: transform .35s ease; color: var(--brand); font-weight: 600; font-size: 22px; } .faq-item[data-open="true"] .plus { transform: rotate(45deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; } .faq-a > div { overflow: hidden; } .faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; } .faq-a p { padding: 0 4px 22px; color: var(--text-soft); line-height: 1.65; font-size: 15.5px; max-width: 70ch; } /* ============================== UTILS ============================== */ .hairline { border: 1px solid var(--hair); } .soft-card { background: var(--bg-elev); border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--shadow-sm); } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--hair); background: var(--hair-2); color: var(--text-soft); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; } /* Focus ring */ *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }