window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DE792WQGP6', { 'page_title': document.title, 'page_location': window.location.href, 'custom_map': {'dimension1': 'preview_company'} }); gtag('event', 'preview_view', { 'event_category': 'mockup_preview', 'event_label': 'ligolabinformaticsplatform' }); /* ── DESIGN TOKENS ─────────────────────────────────────────── */ :root { --bg-dark: #0A1A3D; --bg-mid: #1F2D5D; --bg-light: #E6F2FF; --brand: #0088FF; --brand-2: #FC0000; --text-dark: #F2F2F2; --text-light: #111111; --text-muted: #A3A3A3; --border: #D1D5DB; --font-display: 'DM Serif Display', serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius: 6px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--bg-dark); color: var(--text-dark); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* ── ANIMATIONS ─────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity:0; transform:translateY(32px) } to { opacity:1; transform:translateY(0) } } @keyframes fadeIn { from { opacity:0 } to { opacity:1 } } @keyframes scaleIn { from { opacity:0; transform:scale(0.96) } to { opacity:1; transform:scale(1) } } @keyframes slideRight { from { transform:translateX(-20px); opacity:0 } to { transform:translateX(0); opacity:1 } } .anim-1 { animation: fadeUp 0.7s ease both; } .anim-2 { animation: fadeUp 0.7s 0.15s ease both; } .anim-3 { animation: fadeUp 0.7s 0.3s ease both; } .anim-4 { animation: fadeUp 0.7s 0.45s ease both; } .anim-5 { animation: fadeUp 0.7s 0.6s ease both; } /* ── BUTTONS ─────────────────────────────────────────────────── */ /* All buttons are hardcoded — never broken */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; border-radius: var(--radius); cursor: pointer; border: none; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--brand); color: #ffffff !important; box-shadow: 0 0 0 0 var(--brand); } .btn-primary:hover { background: var(--brand-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .btn-outline { background: transparent; color: var(--text-dark) !important; border: 1.5px solid rgba(255,255,255,0.25); } .btn-outline:hover { border-color: var(--brand); color: var(--brand) !important; transform: translateY(-2px); } .btn-brand-outline { background: transparent; color: var(--brand) !important; border: 1.5px solid var(--brand); } .btn-brand-outline:hover { background: var(--brand); color: #ffffff !important; } /* ── NAVIGATION ─────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10,10,15,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); height: 68px; display: flex; align-items: center; } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-dark) !important; letter-spacing: -0.03em; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { font-size: 0.875rem; font-weight: 400; color: var(--text-muted) !important; padding: 8px 14px; border-radius: 4px; transition: var(--transition); } .nav-link:hover { color: var(--text-dark) !important; background: rgba(255,255,255,0.06); } .nav-cta { margin-left: 16px; padding: 9px 22px; background: var(--brand); color: #ffffff !important; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); transition: var(--transition); } .nav-cta:hover { background: var(--brand-2); transform: translateY(-1px); } /* Mobile nav */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-dark); border-radius: 2px; transition: var(--transition); } #nav-check { display: none; } @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--bg-mid); border-bottom: 1px solid var(--border); flex-direction: column; align-items: flex-start; padding: 16px 24px; gap: 4px; } .nav-cta { margin: 12px 0 0; } #nav-check:checked ~ .nav-inner .nav-links { display: flex; } } /* ── HERO ────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 32px 80px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-image: url('https://picsum.photos/seed/ligolabinformaticsplatformh/1920/1080'); background-size: cover; background-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.4) 100% ); } /* Decorative brand accent line */ .hero-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, transparent, var(--brand), transparent); } .hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; } .hero-label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); padding: 5px 14px; border-radius: 20px; margin-bottom: 28px; } .hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; color: #ffffff !important; /* ALWAYS white on hero */ max-width: 800px; margin-bottom: 24px; } .hero h1 .accent { color: var(--brand); } .hero-sub { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 300; color: rgba(255,255,255,0.75) !important; /* ALWAYS readable on hero */ max-width: 560px; line-height: 1.7; margin-bottom: 40px; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.4) !important; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; animation: fadeIn 1s 1.2s both; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation: fadeIn 1s 1.5s both; } /* ── STATS BAR ───────────────────────────────────────────────── */ .stats-bar { background: var(--brand); padding: 0; } .stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); } .stat-item { padding: 40px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,0.15); } .stat-item:last-child { border-right: none; } .stat-number { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 900; color: #ffffff !important; /* ALWAYS white on brand bg */ line-height: 1; letter-spacing: -0.03em; } .stat-label { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.75) !important; /* ALWAYS readable on brand bg */ text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; } /* ── SECTION COMMONS ─────────────────────────────────────────── */ .section { padding: 100px 32px; } .section-light { background: var(--bg-light); } .section-dark { background: var(--bg-mid); } .section-inner { max-width: 1200px; margin: 0 auto; } .section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } /* Label color by context */ .section-light .section-label { color: var(--brand); } .section-dark .section-label { color: var(--brand); } .section-hero .section-label { color: var(--brand); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 48px; } /* Title color by section */ .section-light .section-title { color: var(--text-light) !important; } .section-dark .section-title { color: var(--text-dark) !important; } /* ── SERVICES ────────────────────────────────────────────────── */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .service-card { background: var(--bg-mid); padding: 40px 32px; transition: var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--brand); transform: scaleY(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleY(1); } .service-card:hover { background: rgba(255,255,255,0.04); transform: translateY(-4px); } .service-icon { width: 44px; height: 44px; color: var(--brand); margin-bottom: 20px; } .service-icon svg { width: 100%; height: 100%; } .service-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text-dark) !important; /* ALWAYS light on dark card */ margin-bottom: 10px; letter-spacing: -0.01em; } .service-desc { font-size: 0.9rem; line-height: 1.65; color: var(--text-muted) !important; } /* ── PROCESS ─────────────────────────────────────────────────── */ .process-header { max-width: 640px; margin-bottom: 56px; } .process-header .section-title { margin-bottom: 16px; } .process-intro { font-size: 1.1rem; line-height: 1.75; color: var(--text-light) !important; opacity: 0.65; margin-top: 0; } .process-list { display: flex; flex-direction: column; gap: 0; } .process-step { display: flex; gap: 40px; align-items: flex-start; padding: 40px 0; border-bottom: 1px solid var(--border); transition: var(--transition); } .process-step:last-child { border-bottom: none; } .process-step:hover { padding-left: 8px; } .process-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 900; color: var(--brand); line-height: 1; min-width: 80px; letter-spacing: -0.05em; opacity: 0.9; } .process-content h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text-dark) !important; margin-bottom: 10px; letter-spacing: -0.01em; } .process-content p { font-size: 1.05rem; line-height: 1.8; color: var(--text-dark) !important; opacity: 0.72; max-width: 580px; margin-top: 4px; } /* ── ABOUT ───────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; position: relative; } .about-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .about-image:hover img { transform: scale(1.04); } /* Decorative corner accents */ .about-image::before, .about-image::after { content: ''; position: absolute; width: 40px; height: 40px; border-color: var(--brand); border-style: solid; z-index: 1; } .about-image::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; } .about-image::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; } .about-text .section-title { margin-bottom: 20px; } .about-body { font-size: 1rem; line-height: 1.8; color: var(--text-muted) !important; margin-bottom: 32px; } /* About section on dark bg */ .section-dark .about-body { color: rgba(255,255,255,0.6) !important; } /* ── TESTIMONIALS ────────────────────────────────────────────── */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .testimonial-card { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 12px; padding: 36px; transition: var(--transition); } .testimonial-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } .testimonial-stars { margin-bottom: 16px; } .star { color: #F59E0B; font-size: 1rem; } /* Gold stars — always visible */ .testimonial-quote { font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,0.75) !important; /* ALWAYS readable on dark card */ font-style: italic; margin-bottom: 24px; } .testimonial-author { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border); padding-top: 16px; } .testimonial-author strong { font-size: 0.9rem; font-weight: 600; color: var(--text-dark) !important; } .testimonial-author span { font-size: 0.8rem; color: var(--text-muted) !important; } /* ── CTA SECTION ─────────────────────────────────────────────── */ .cta-section { padding: 120px 32px; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%); position: relative; overflow: hidden; text-align: center; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--brand-rgb, 37,99,235),0.12) 0%, transparent 70%); pointer-events: none; } /* Brand glow border */ .cta-section::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(to right, transparent, var(--brand), transparent); } .cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .cta-inner h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; color: #ffffff !important; /* ALWAYS white */ letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; } .cta-inner p { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.65) !important; margin-bottom: 40px; } .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── FOOTER ──────────────────────────────────────────────────── */ .footer { background: var(--bg-dark); border-top: 1px solid var(--border); padding: 64px 32px 32px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand .footer-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-dark) !important; letter-spacing: -0.03em; margin-bottom: 12px; display: block; } .footer-tagline { font-size: 0.875rem; line-height: 1.65; color: var(--text-muted) !important; max-width: 240px; } .footer-col h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dark) !important; margin-bottom: 16px; } .footer-col a { display: block; font-size: 0.875rem; color: var(--text-muted) !important; padding: 4px 0; transition: color 0.2s; } .footer-col a:hover { color: var(--brand) !important; } .footer-bottom { max-width: 1200px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 0.8rem; color: var(--text-muted) !important; } /* ── PREVIEW BADGE ───────────────────────────────────────────── */ .preview-badge { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--brand); padding: 8px 16px; text-align: center; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: #ffffff !important; letter-spacing: 0.08em; } .preview-badge a { color: rgba(255,255,255,0.85) !important; text-decoration: underline; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } .about-image { max-width: 560px; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .section { padding: 72px 20px; } .hero { padding: 100px 20px 80px; } .stats-inner { grid-template-columns: repeat(2, 1fr); } .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); } .stat-item:nth-child(even) { border-right: none; } .process-step { flex-direction: column; gap: 16px; } .process-num { font-size: 2.5rem; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; text-align: center; } }

medical practice

Transform Your Lab Operations

Empowering labs with seamless, integrated informatics solutions.

Request a Demo Explore Solutions
Scroll
10+
Years of Innovation
500+
Labs Transformed
98%
Client Satisfaction
$2B+
Revenue Processed Annually

What We Do

Our Services

Anatomic Pathology

Streamline pathology workflows for accurate and timely results.

Clinical Laboratory

Enhance efficiency with comprehensive lab management solutions.

Revenue Cycle Management

Optimize financial performance with robust billing solutions.

Direct to Consumer

Empower patients with direct access to lab results.

How It Works

Our Process

A clear, proven approach — so you always know what to expect.

01

Consultation

Understand your lab's unique needs and challenges.

02

Implementation

Seamlessly integrate our platform with your operations.

03

Support

Ongoing support to ensure continuous improvement.

About LigoLab Informatics Platform

Our Story

Innovating Healthcare from Los Angeles

Founded over a decade ago in Los Angeles, LigoLab is at the forefront of laboratory informatics, delivering innovative solutions that set us apart. Our commitment to precision and client success drives everything we do.

Discover Our Story

Client Stories

What Our Clients Say

★★★★★

"LigoLab revolutionized our lab operations, enhancing both speed and accuracy."

Jane DoeLab Director, MedLabs
★★★★★

"Their platform is intuitive and has significantly improved our workflow efficiency."

John SmithCEO, HealthTech Labs
★★★★★

"With LigoLab, our revenue cycle management has never been more streamlined."

Emily JohnsonCFO, Pathology Partners

Ready to Elevate Your Lab?

Join hundreds of labs in transforming operations with LigoLab. Click to start your journey.

Get Started Today Send a Message
✦ Redesign preview by M. Samuels Media · This is a concept mockup ✦