*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #0068C1; --blue-bright: #1a8cff; --teal: #00b4b0; --green: #3fb950; --amber: #d29922; --red: #f85149; --bg-page: #ffffff; --bg-dark: #0d1117; --bg-card: #0d1117; --bg-card-2: #161b22; --border: #21262d; --border-light: #e5e7eb; --text-primary: #1a1a2e; --text-muted: #6b7280; --text-faint: #9ca3af; --mono: 'JetBrains Mono', monospace; --sans: 'Inter', system-ui, sans-serif; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg-page); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; } /* ── SCAN LINE / NOISE OVERLAY ── */ body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.012) 2px, rgba(0,0,0,0.012) 4px ); pointer-events: none; z-index: 0; } /* ── HERO SECTION ── */ .hero { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 28px; overflow: hidden; } /* Background grid pattern */ .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,104,193,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,104,193,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 100%); pointer-events: none; } /* Glow orb behind logo */ .hero-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 500px; height: 300px; background: radial-gradient(ellipse, rgba(0,104,193,0.08) 0%, transparent 70%); pointer-events: none; } .hero-inner { width: 100%; max-width: 680px; padding: 64px 0 52px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } /* ── LOGO ── */ .logo-wrap { position: relative; margin-bottom: 36px; opacity: 0; transform: translateY(-16px); animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; } .site-logo { max-width: 200px; height: auto; display: block; } /* Subtle logo shadow glow */ .site-logo { filter: drop-shadow(0 8px 24px rgba(0,104,193,0.18)); } /* ── STATUS PILL ── */ .status-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,104,193,0.06); border: 1px solid rgba(0,104,193,0.18); border-radius: 99px; padding: 5px 14px 5px 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--blue); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } /* ── HEADLINE ── */ .hero-headline { font-family: var(--sans); font-size: clamp(26px, 6vw, 38px); font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 20px; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; } .hero-headline .accent { background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── HERO BODY TEXT ── */ .hero-body { font-size: 15.5px; color: var(--text-muted); line-height: 1.8; max-width: 520px; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; } /* ── META LINES ── */ .meta-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; } .meta-item { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-muted); } .meta-icon { font-size: 14px; flex-shrink: 0; } .meta-item a { color: var(--blue); text-decoration: none; font-weight: 500; } .meta-item a:hover { text-decoration: underline; } /* ── CREDITS ── */ .credits { font-size: 12.5px; color: var(--text-faint); line-height: 1.9; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards; } .credits a { color: #0068C1; font-weight: 600; text-decoration: none; } .credits a:hover { text-decoration: underline; } /* ── STATS BAR ── */ .stats-bar { width: 100%; max-width: 680px; padding: 0 28px; margin-bottom: 44px; opacity: 0; animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards; } .stats-inner { display: flex; align-items: stretch; background: #f8fafc; border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; } .stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 12px; position: relative; } .stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--border-light); } .stat-value { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 5px; letter-spacing: -0.5px; } .stat-value .stat-accent { color: var(--blue); } .stat-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; text-align: center; } /* ── SECTION DIVIDER ── */ .section-divider { width: 100%; max-width: 680px; padding: 0 28px; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards; } .divider-label { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-light), transparent); } .divider-text { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #aaa; white-space: nowrap; } .section-intro { text-align: center; font-size: 13px; color: var(--text-faint); margin-top: 6px; } /* ── TOOLS GRID ── */ .tools-section { width: 100%; max-width: 680px; padding: 0 28px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ── TOOL CARD ── */ .tool-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.25s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s; position: relative; opacity: 0; } .tool-card.animate-in { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .tool-card:nth-child(1) { animation-delay: 0.9s; } .tool-card:nth-child(2) { animation-delay: 1.0s; } .tool-card:nth-child(3) { animation-delay: 1.1s; } .tool-card:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,104,193,0.2), 0 2px 8px rgba(0,0,0,0.15); text-decoration: none; } /* Accent stripe */ .tool-card::before { content: ''; display: block; height: 3px; width: 100%; flex-shrink: 0; transition: opacity 0.2s; } .card-stripe-blue::before { background: linear-gradient(90deg, #0068C1, #1a8cff, #00b4b0); } .card-stripe-teal::before { background: linear-gradient(90deg, #00b4b0, #0068C1, #1a8cff); } .card-stripe-green::before { background: linear-gradient(90deg, #3fb950, #00b4b0, #0068C1); } /* Coming Soon card state */ .tool-card.card-coming-soon { opacity: 0.72; cursor: default; pointer-events: none; } .tool-card.card-coming-soon:hover { border-color: var(--border); transform: none; box-shadow: none; } .card-coming-soon .card-arrow { color: #3d444d; } .card-coming-soon .card-url { color: #3d444d; } /* ── CARD PREVIEW MOCKUPS ── */ .card-preview-placeholder { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-dark); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; } .mock-topbar { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: #161b22; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 10px; gap: 6px; } .mock-dot { width: 5px; height: 5px; border-radius: 50%; } .mock-layout { position: absolute; top: 22px; left: 0; right: 0; bottom: 0; display: flex; } .mock-sidebar { width: 28%; background: #161b22; border-right: 1px solid var(--border); padding: 6px 5px; display: flex; flex-direction: column; gap: 3px; } .mock-nav-item { height: 5px; border-radius: 2px; background: #21262d; } .mock-nav-item.active { background: var(--blue); width: 70%; } .mock-main { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .mock-title { height: 7px; background: #30363d; border-radius: 2px; width: 60%; } .mock-panel { background: #161b22; border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; } .mock-input-row { display: flex; gap: 4px; } .mock-input { flex: 1; height: 5px; background: #21262d; border-radius: 2px; } .mock-btn { height: 8px; background: var(--blue); border-radius: 2px; width: 50%; margin-top: 2px; } .mock-result { background: rgba(0,104,193,0.1); border: 1px solid rgba(0,104,193,0.3); border-radius: 4px; padding: 5px 7px; display: flex; align-items: center; gap: 6px; } .mock-number { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #e6edf3; line-height: 1; } .mock-code { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 3px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; } .mock-code-line { height: 3px; border-radius: 1px; } .mock-bar-row { display: flex; gap: 2px; margin-top: 2px; } .mock-bar-seg { flex: 1; height: 3px; border-radius: 2px; } /* ShellGen preview */ .mock-shellgen-bg { position: absolute; inset: 22px 0 0; background: var(--bg-dark); display: flex; flex-direction: column; gap: 0; } .mock-prompt-line { display: flex; align-items: center; gap: 5px; padding: 3px 10px; } .mock-prompt-char { color: var(--green); font-family: var(--mono); font-size: 8px; flex-shrink: 0; } .mock-prompt-text { height: 3px; border-radius: 1px; } .mock-cursor { width: 4px; height: 8px; background: #e6edf3; border-radius: 1px; flex-shrink: 0; animation: blink 1.1s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── CARD BODY ── */ .card-body { padding: 15px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 7px; } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .card-name { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #e6edf3; line-height: 1.3; letter-spacing: -0.2px; } .card-version { color: #484f58; font-size: 9.5px; font-weight: 400; display: block; margin-top: 1px; } .card-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.3px; } .badge-blue { background: rgba(0,104,193,0.18); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); } .badge-teal { background: rgba(0,180,176,0.12); color: #00b4b0; border: 1px solid rgba(0,180,176,0.2); } .badge-green { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.2); } .badge-amber { background: rgba(210,153,34,0.12); color: #d29922; border: 1px solid rgba(210,153,34,0.2); } .badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .badge-blue .badge-dot { background: #58a6ff; } .badge-teal .badge-dot { background: #00b4b0; } .badge-green .badge-dot { background: #3fb950; } .badge-amber .badge-dot { background: #d29922; } .card-desc { font-size: 11.5px; color: #8b949e; line-height: 1.6; } .card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; } .tag { font-family: var(--mono); font-size: 9px; color: #484f58; background: #161b22; border: 1px solid #21262d; padding: 2px 6px; border-radius: 4px; transition: color 0.15s, border-color 0.15s; } .tool-card:hover .tag { color: #8b949e; border-color: #30363d; } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #21262d; } .card-url { font-family: var(--mono); font-size: 9.5px; color: #3d444d; transition: color 0.15s; } .tool-card:hover .card-url { color: #58a6ff; } .card-arrow { font-size: 15px; color: var(--blue); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; } .tool-card:hover .card-arrow { transform: translateX(5px); } /* ── FOOTER ── */ .site-footer { width: 100%; border-top: 1px solid var(--border-light); padding: 20px 28px 32px; text-align: center; opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; } .footer-inner { max-width: 680px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 12px; color: var(--text-faint); } .footer-links { display: flex; align-items: center; gap: 16px; } .footer-links a { font-size: 12px; color: var(--text-faint); text-decoration: none; transition: color 0.15s; } .footer-links a:hover { color: var(--blue); } /* ── ANIMATIONS ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── SCROLL REVEAL ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE ── */ @media (max-width: 600px) { .tools-section { grid-template-columns: 1fr; padding: 0 16px 56px; } .hero-inner { padding: 44px 0 36px; } .stats-bar { padding: 0 16px; } .section-divider { padding: 0 16px; } .hero { padding: 0 16px; } .tool-card:nth-child(2) { animation-delay: 1.05s; } .tool-card:nth-child(3) { animation-delay: 1.1s; } } @media (max-width: 480px) { .hero-headline { font-size: 24px; } .hero-body { font-size: 14.5px; } .site-logo { max-width: 160px; } .stats-inner { flex-wrap: wrap; } .stat-item { min-width: 50%; } .stat-item:nth-child(3)::before { display: none; } .stat-item:nth-child(3) { border-top: 1px solid var(--border-light); } .stat-item:nth-child(4) { border-top: 1px solid var(--border-light); } .card-body { padding: 13px 13px 13px; } .card-preview-placeholder { aspect-ratio: 16 / 7; } .site-footer { padding: 16px 16px 28px; } .footer-inner { flex-direction: column; align-items: center; text-align: center; } .meta-grid { gap: 8px 16px; } .meta-item { font-size: 13px; } } @supports (padding-bottom: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } } .tool-card { -webkit-tap-highlight-color: transparent; }

Platform launching soon

Spinning Into
Action Soon!

We're building an informative, engaging platform dedicated to MRI technology, insights, and innovations. While the main site launches, our live tools are ready to use today.

📅 Launch Date: Coming Soon

📸 @mrispincom

📧 info@mrispin.com

Developed by Fahad Joman · Powered by PSM Co.

Calculators

Live Tools

40+

Pipeline Steps

∞

Researchers Served

Available Now

Explore our live tools while the main platform prepares to launch

87.4

Renal Function
Calculator v1.7.1

Live

Four validated kidney function equations — eGFR (CKD-EPI 2021), Cockcroft-Gault CrCl, Cystatin C eGFR, and MDRD — with side-by-side comparison.

eGFR CrCl CKD-EPI 2021 Drug Dosing MDRD

mrispin.com/spincalc →

SpinLab
Neuroimaging Tools v11.4

Beta

Browser-based neuroimaging pipeline builder. Generates complete, runnable bash & Python scripts for FSL, FreeSurfer, ANTs, AFNI, MRtrix3 and more.

FSL FreeSurfer ANTs BIDS SLURM

mrispin.com/spinlab →

ShellGen
AI Script Generator v1.0

Coming Soon

AI-powered shell script generator. Describe what you need in plain English and get production-ready Bash or Python scripts instantly — with admin panel, rate limiting, and logging.

SpinAI Bash Python AI

mrispin.com/shellgen — launching soon →

// Intersection Observer for scroll-reveal elements const observer = new IntersectionObserver((entries) => { entries.forEach(el => { if (el.isIntersecting) { el.target.classList.add('visible'); observer.unobserve(el.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); // Animated stat counter function animateCounter(el, target, suffix = '') { const duration = 1200; const start = performance.now(); const isSymbol = isNaN(target); if (isSymbol) { el.innerHTML = target; return; } const update = (now) => { const elapsed = now - start; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const current = Math.round(eased * target); el.textContent = current + suffix; if (progress { if (entries[0].isIntersecting) { const values = [4, 3, '40+', '∞']; document.querySelectorAll('.stat-accent').forEach((el, i) => { if (i === 0) animateCounter(el, 4); else if (i === 1) animateCounter(el, 3); else if (i === 2) { setTimeout(() => { el.innerHTML = '40+'; }, 400); } else el.textContent = '∞'; }); statsObserver.unobserve(statsBar); } }, { threshold: 0.5 }); if (statsBar) statsObserver.observe(statsBar);

Spinning Into Action Soon!

Spinning Into
Action Soon!