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': 'fidelitynationaltitle' }); /* ── DESIGN TOKENS ─────────────────────────────────────────── */ :root { --bg-dark: #163300; --bg-mid: #054d28; --bg-light: #f5f5f0; --brand: #9fe870; --brand-2: #7ed957; --text-dark: #f7f8f8; --text-light: #0e0f0c; --text-muted: #a8c49a; --border: #2d5a1e; --font-display: 'Fraunces', serif; --font-body: 'Manrope', 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/fidelitynationaltitleh/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; } }

real estate

Secure Your Property Future

Expert title solutions for seamless transactions.

Get Started Today Learn More
Scroll
10+
Years in Business
500+
Successful Closings
98%
Customer Satisfaction
$2B+
Transactions Secured

What We Do

Our Services

Title Insurance

Ensure your property's ownership with our comprehensive title insurance.

Closing & Escrow

Seamlessly transfer ownership with our expert closing services.

1031 Exchange

Maximize investment returns with our tailored 1031 exchange services.

Recording & Projects

Secure your documents with our reliable recording services.

How It Works

Our Process

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

01

Consultation

Discuss your needs with our expert team.

02

Custom Solution

Receive a tailored plan for your transaction.

03

Secure Closure

Experience a smooth and secure closing process.

About Fidelity National Title

Our Story

About Fidelity National Title

Based in Salt Lake City, Utah, Fidelity National Title has over a decade of experience in providing secure and efficient real estate solutions. Our commitment to excellence and innovation sets us apart in the industry.

Discover Our Story

Client Stories

What Our Clients Say

★★★★★

"Fidelity National Title made our closing process effortless and stress-free."

John SmithCEO, Real Estate Co.
★★★★★

"Their attention to detail and expertise is unmatched in the industry."

Jane DoeCFO, Property Group
★★★★★

"We trust Fidelity National Title for all our real estate transactions."

Mike JohnsonManaging Director, InvestCo

Ready to Secure Your Future?

Contact us today and experience seamless real estate transactions.

Contact Us Now Send a Message
✦ Redesign preview by M. Samuels Media · This is a concept mockup ✦