/* ═══════════════════════════════════════════════════════════════════ STRYQE UI — shared design system. Opt-in components, no clobber. Pages keep their own per-page CSS; this layer adds reusable building blocks (toast, skeleton, empty state, spinner, splash, scroll-progress, cursor, orbs, button base, magnetic, tilt). Conventions: - All shared classes prefixed `stryqe-` to avoid collision - Design tokens prefixed `--stryqe-*` so pages don't accidentally override them by setting their own `--bg`/`--accent` ═══════════════════════════════════════════════════════════════════ */ :root { --stryqe-bg: #030708; --stryqe-accent: #00e676; --stryqe-accent2: #00bcd4; --stryqe-violet: #7c4dff; --stryqe-gold: #c8a84e; --stryqe-danger: #f44336; --stryqe-text: #e0e0e0; --stryqe-text-dim: rgba(255, 255, 255, .42); --stryqe-text-muted: rgba(255, 255, 255, .22); --stryqe-border: rgba(255, 255, 255, .06); --stryqe-radius: 14px; --stryqe-pill: 50px; --stryqe-ease: cubic-bezier(.18, .78, .34, 1.18); } /* ─────────── Logo color-key — strips PNG black background ─────────── */ .stryqe-logo-keyblack { filter: url(#stryqe-key-black); } /* ─────────── PEACH POLISH — ambient drifting orbs (opt-in) ─────────── */ /* Single source of truth — previously this block was duplicated across 9 pages. Pages opt in by adding `class="stryqe-peach"` to . Pages that have their own orb system (scanner pages with scanOrb*, landing with .orb divs) simply don't add the class. Same `peachOrbIn` keyframe names as before for byte-for-byte visual parity with the legacy per-page versions. */ body.stryqe-peach { position: relative; } body.stryqe-peach::before, body.stryqe-peach::after { content: ''; position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: 0; will-change: transform; } body.stryqe-peach::before { width: 480px; height: 480px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(0,230,118,.45), transparent 70%); animation: peachOrbIn 1.6s .4s ease forwards, peachOrbA 24s 2s ease-in-out infinite; } body.stryqe-peach::after { width: 380px; height: 380px; bottom: 80px; left: -140px; background: radial-gradient(circle, rgba(0,188,212,.4), transparent 70%); animation: peachOrbIn 1.6s .8s ease forwards, peachOrbB 30s 2s ease-in-out infinite; } @keyframes peachOrbIn { to { opacity: .42; } } @keyframes peachOrbA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,-50px); } } @keyframes peachOrbB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,40px); } } @media (max-width: 768px) { body.stryqe-peach::before { filter: blur(90px); width: 340px; height: 340px; } body.stryqe-peach::after { filter: blur(90px); width: 260px; height: 260px; } } /* Logo PNG black-bg key — re-applied here so peach pages don't need to repeat it */ body.stryqe-peach nav img[src*="logo"], body.stryqe-peach header img[src*="logo"], body.stryqe-peach .header-logo img, body.stryqe-peach .app-header img[src*="logo"], body.stryqe-peach .footer-brand img, body.stryqe-peach footer img[src*="logo"] { filter: url(#stryqe-key-black); } @media (prefers-reduced-motion: reduce) { body.stryqe-peach::before, body.stryqe-peach::after { animation: peachOrbIn 1.6s .4s ease forwards; } } /* ─────────── SKIP-TO-CONTENT LINK (a11y) ─────────── */ /* Hidden offscreen until focused via keyboard — first Tab on the page lands here, so keyboard users can bypass nav/decorative chrome. */ .stryqe-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--stryqe-accent); color: #000; padding: 10px 18px; border-radius: 0 0 12px 0; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px; text-decoration: none; transition: left .15s ease; } .stryqe-skip-link:focus, .stryqe-skip-link:focus-visible { left: 0; outline: 2px solid #000; outline-offset: -4px; } /* ─────────── SCROLL PROGRESS BAR ─────────── */ .stryqe-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--stryqe-accent), var(--stryqe-accent2), var(--stryqe-violet)); box-shadow: 0 0 12px rgba(0, 230, 118, .35); pointer-events: none; will-change: transform; } /* ─────────── DRIFTING GRADIENT ORBS (background depth) ─────────── */ .stryqe-orb { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 1; will-change: transform, opacity; mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease; } .stryqe-orb.in { opacity: 1; } .stryqe-orb.green { background: radial-gradient(circle, rgba(0, 230, 118, .55), transparent 70%); } .stryqe-orb.violet { background: radial-gradient(circle, rgba(124, 77, 255, .45), transparent 70%); } .stryqe-orb.cyan { background: radial-gradient(circle, rgba(0, 188, 212, .40), transparent 70%); } .stryqe-orb.gold { background: radial-gradient(circle, rgba(200, 168, 78, .35), transparent 70%); } @media (max-width: 768px) { .stryqe-orb { filter: blur(90px); } } /* ─────────── CUSTOM CURSOR ─────────── */ .stryqe-cursor-dot, .stryqe-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; mix-blend-mode: difference; will-change: transform; opacity: 0; transition: opacity .3s; } .stryqe-cursor-dot { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px; } .stryqe-cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .45); margin: -17px 0 0 -17px; transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background .25s ease, opacity .3s; } .stryqe-cursor-ring.hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: var(--stryqe-accent); background: rgba(0, 230, 118, .06); } body.stryqe-cursor-on .stryqe-cursor-dot, body.stryqe-cursor-on .stryqe-cursor-ring { opacity: 1; } body.stryqe-cursor-on, body.stryqe-cursor-on a, body.stryqe-cursor-on button { cursor: none; } @media (pointer: coarse), (hover: none) { .stryqe-cursor-dot, .stryqe-cursor-ring { display: none; } body.stryqe-cursor-on, body.stryqe-cursor-on a, body.stryqe-cursor-on button { cursor: auto; } } /* ─────────── TOAST NOTIFICATIONS ─────────── */ .stryqe-toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: calc(100vw - 48px); } .stryqe-toast { padding: 14px 14px 14px 16px; border-radius: 12px; font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; font-weight: 500; background: rgba(10, 14, 16, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .08); color: #fff; min-width: 240px; max-width: 380px; display: flex; align-items: flex-start; gap: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); pointer-events: auto; animation: stryqeToastIn .35s var(--stryqe-ease) forwards; transform-origin: 100% 100%; } .stryqe-toast.success { border-left: 3px solid var(--stryqe-accent); } .stryqe-toast.error { border-left: 3px solid var(--stryqe-danger); } .stryqe-toast.info { border-left: 3px solid var(--stryqe-accent2); } .stryqe-toast.warn { border-left: 3px solid var(--stryqe-gold); } .stryqe-toast.out { animation: stryqeToastOut .25s ease forwards; } .stryqe-toast .stryqe-toast-icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; } .stryqe-toast.success .stryqe-toast-icon { color: var(--stryqe-accent); } .stryqe-toast.error .stryqe-toast-icon { color: var(--stryqe-danger); } .stryqe-toast.info .stryqe-toast-icon { color: var(--stryqe-accent2); } .stryqe-toast.warn .stryqe-toast-icon { color: var(--stryqe-gold); } .stryqe-toast .stryqe-toast-body { flex: 1; line-height: 1.4; word-break: break-word; } .stryqe-toast .stryqe-toast-close { background: none; border: none; color: rgba(255, 255, 255, .45); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; transition: color .2s; align-self: flex-start; } .stryqe-toast .stryqe-toast-close:hover { color: #fff; } @keyframes stryqeToastIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes stryqeToastOut { to { opacity: 0; transform: translateX(20px) scale(.97); } } @media (max-width: 480px) { .stryqe-toast-stack { left: 16px; right: 16px; bottom: 16px; } .stryqe-toast { min-width: 0; max-width: none; } } /* ─────────── SKELETON LOADER ─────────── */ .stryqe-skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .03) 100%); background-size: 200% 100%; animation: stryqeSkeleton 1.4s linear infinite; border-radius: 8px; height: 14px; } .stryqe-skeleton.line { width: 100%; } .stryqe-skeleton.title { height: 22px; width: 60%; } .stryqe-skeleton.card { height: 90px; border-radius: 14px; } .stryqe-skeleton.row { height: 48px; border-radius: 12px; margin-bottom: 8px; } .stryqe-skeleton.circle{ border-radius: 50%; width: 40px; height: 40px; } @keyframes stryqeSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ─────────── EMPTY STATE ─────────── */ .stryqe-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 24px; text-align: center; color: var(--stryqe-text-dim); } .stryqe-empty .stryqe-empty-icon { font-size: 52px; opacity: .35; line-height: 1; margin-bottom: 4px; } .stryqe-empty .stryqe-empty-title { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .75); font-family: 'Outfit', sans-serif; } .stryqe-empty .stryqe-empty-body { font-size: 13px; color: var(--stryqe-text-dim); max-width: 320px; line-height: 1.6; } .stryqe-empty .stryqe-btn { margin-top: 8px; } /* ─────────── LOADING SPINNER ─────────── */ .stryqe-spinner { display: inline-block; vertical-align: middle; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, .08); border-top-color: var(--stryqe-accent); border-radius: 50%; animation: stryqeSpin .9s linear infinite; } .stryqe-spinner.lg { width: 36px; height: 36px; border-width: 3px; } .stryqe-spinner.sm { width: 16px; height: 16px; border-width: 2px; } @keyframes stryqeSpin { to { transform: rotate(360deg); } } /* ─────────── BUTTON BASE ─────────── */ .stryqe-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--stryqe-accent); color: #000; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px; border: none; border-radius: var(--stryqe-pill); cursor: pointer; transition: transform .25s var(--stryqe-ease), box-shadow .25s ease, background .25s; text-decoration: none; } .stryqe-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 230, 118, .25); } .stryqe-btn:active { transform: translateY(0); } .stryqe-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .18); } .stryqe-btn.ghost:hover { background: rgba(255, 255, 255, .05); border-color: #fff; box-shadow: none; } .stryqe-btn.danger { background: var(--stryqe-danger); color: #fff; } .stryqe-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ─────────── MAGNETIC + TILT (base, JS sets transforms) ─────────── */ [data-stryqe-magnetic] { will-change: transform; display: inline-block; } [data-stryqe-tilt] { transform-style: preserve-3d; will-change: transform; } /* ─────────── SPLASH (shared markup) ─────────── */ #stryqe-splash { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .7s, transform .7s; } #stryqe-splash.gone { opacity: 0; transform: scale(1.05); pointer-events: none; } #stryqe-splash img { width: min(220px, 55vw); opacity: 0; transform: scale(.85); animation: stryqeSplashLogo .8s ease .2s forwards; } #stryqe-splash .stryqe-splash-tag { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; color: var(--stryqe-gold); letter-spacing: 5px; text-transform: uppercase; margin-top: 16px; opacity: 0; animation: stryqeSplashFade .5s ease .7s forwards; } #stryqe-splash .stryqe-splash-bar { width: min(220px, 50vw); height: 2px; background: rgba(255, 255, 255, .06); border-radius: 4px; margin-top: 24px; overflow: hidden; opacity: 0; animation: stryqeSplashFade .5s ease 1s forwards; } #stryqe-splash .stryqe-splash-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--stryqe-gold), #f0d878, var(--stryqe-gold)); border-radius: 4px; animation: stryqeSplashFill 1.6s ease 1.1s forwards; } #stryqe-splash .stryqe-splash-stage { font-size: 9px; font-family: 'Orbitron', sans-serif; color: rgba(200, 168, 78, .55); margin-top: 12px; letter-spacing: 3px; text-transform: uppercase; min-height: 11px; opacity: 0; animation: stryqeSplashFade .5s ease 1.4s forwards; transition: opacity .15s; } @keyframes stryqeSplashLogo { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } @keyframes stryqeSplashFade { to { opacity: 1; } } @keyframes stryqeSplashFill { to { width: 100%; } } /* ─────────── CHART LOADING SKELETON — used while real chart fetches/renders ─────────── */ .stryqe-chart-skeleton { position: relative; height: 260px; background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; overflow: hidden; padding: 14px 16px 16px; display: flex; flex-direction: column; } .stryqe-chart-skeleton .skel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Outfit', sans-serif; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .stryqe-chart-skeleton .skel-tag { display: flex; align-items: center; gap: 7px; color: var(--stryqe-accent); } .stryqe-chart-skeleton .skel-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--stryqe-accent); box-shadow: 0 0 8px var(--stryqe-accent); animation: stryqeChartDot 1.3s ease-in-out infinite; } @keyframes stryqeChartDot { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } .stryqe-chart-skeleton .skel-grid { position: absolute; left: 16px; right: 16px; top: 42px; bottom: 36px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; z-index: 0; } .stryqe-chart-skeleton .skel-grid div { height: 1px; background: rgba(255,255,255,.04); } .stryqe-chart-skeleton .skel-bars { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; gap: 3px; } .stryqe-chart-skeleton .skel-bars span { flex: 1; height: var(--h, 50%); background: linear-gradient(180deg, rgba(0,230,118,.12), rgba(255,255,255,.10) 50%, rgba(255,255,255,.04)); background-size: 100% 200%; background-position: 0 100%; animation: stryqeChartShimmer 1.4s linear infinite; animation-delay: var(--d, 0s); border-radius: 2px; position: relative; } .stryqe-chart-skeleton .skel-bars span::after { content: ''; position: absolute; top: -6px; left: 50%; bottom: -6px; width: 1px; background: rgba(255,255,255,.06); transform: translateX(-50%); } @keyframes stryqeChartShimmer { 0% { background-position: 0 100%; opacity: .35; } 50% { background-position: 0 0; opacity: .85; } 100% { background-position: 0 -100%; opacity: .35; } } .stryqe-chart-skeleton .skel-footer { display: flex; justify-content: space-between; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(255,255,255,.25); } .stryqe-chart-skeleton .skel-footer .skel-status { color: rgba(200,168,78,.55); letter-spacing: 1px; text-transform: uppercase; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 10px; } @media (prefers-reduced-motion: reduce) { .stryqe-chart-skeleton .skel-bars span { animation-duration: 3s; } .stryqe-chart-skeleton .skel-tag::before { animation: none; } } /* ─────────── PAGE TRANSITIONS ─────────── */ /* Fade-to-black overlay shown briefly during internal navigation. Premium "app-feel" instead of the harsh white flash between pages. Activated by stryqe-motion.js click interceptor. */ .stryqe-page-fade { position: fixed; inset: 0; z-index: 99999; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.4, 0, .2, 1); will-change: opacity; } .stryqe-page-fade.active { opacity: 1; pointer-events: auto; } /* Subtle gold accent that draws on top of the overlay during transition (signals "loading next page") */ .stryqe-page-fade::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--stryqe-gold), transparent); transform: translateY(-50%) scaleX(0); transform-origin: 0% 50%; opacity: 0; } .stryqe-page-fade.active::after { animation: stryqePageFadeAccent .35s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes stryqePageFadeAccent { 0% { opacity: 0; transform: translateY(-50%) scaleX(0); transform-origin: 0% 50%; } 50% { opacity: 1; transform: translateY(-50%) scaleX(1); transform-origin: 0% 50%; } 100% { opacity: 0; transform: translateY(-50%) scaleX(1); transform-origin: 100% 50%; } } /* ─────────── MOBILE UX — tactile feel for touch devices ─────────── */ /* `(hover:none)` matches phones/tablets without a fine pointer. `(pointer:coarse)` is similar. */ @media (hover: none), (pointer: coarse) { /* Custom green tap highlight — replaces the harsh default Safari blue rectangle */ button, a, [role="button"], input[type="submit"], .stryqe-btn { -webkit-tap-highlight-color: rgba(0, 230, 118, .15); } /* Tactile scale-down on press for buttons + links */ button:active:not(:disabled), a:active:not(:disabled), [role="button"]:active:not(:disabled), .stryqe-btn:active:not(:disabled) { transform: scale(.96); transition: transform .08s ease; } /* Cards feel tactile on touch (smaller scale than buttons — they're bigger surfaces) */ .feat:active, .market-card:active, .coin-row:active, .stock-row:active, .signal-mock:active, .price-card:active { transform: scale(.985); transition: transform .1s ease; } /* Filter/sort pills + tabs */ .sort-btn:active, .tab:active, .icon-btn:active, .info-chip:active, .nav-item:active { transform: scale(.93); transition: transform .08s ease; } } /* Larger tap targets on mobile — Apple HIG recommends 44pt min */ @media (max-width: 480px) { .stryqe-btn, .nav-cta { min-height: 44px; padding-top: 14px; padding-bottom: 14px; } .icon-btn { min-width: 40px; min-height: 40px; } /* Prevent accidental input zoom on iOS Safari (font-size < 16px triggers zoom on focus) */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select { font-size: max(16px, 1em); } } /* ─────────── REDUCED MOTION ─────────── */ @media (prefers-reduced-motion: reduce) { .stryqe-orb, .stryqe-cursor-dot, .stryqe-cursor-ring { display: none; } .stryqe-skeleton { animation: none; } .stryqe-spinner { animation-duration: 2s; } .stryqe-toast { animation: none; } #stryqe-splash, #stryqe-splash * { animation-duration: .01ms !important; } .stryqe-page-fade { transition-duration: .15s; } }