/* Prevent navbar transition */
#navbar-transition-willow,
#navbar-transition {
  background-color: #FFF;
}

.dark #navbar-transition-willow,
.dark #navbar-transition {
  background-color: rgb(var(--background-dark)/.75);
}

/* Add some floating elements to the dark mode backgrounds to make them more interesting */
[data-theme="dark"] .loqate-container::before {
  content: "";
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(77, 77, 255, 0.1) 0%,
    transparent 70%
  );
  z-index: -1;
  animation: float 15s ease-in-out infinite alternate;
}

[data-theme="dark"] .loqate-container::after {
  content: "";
  position: fixed;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(120, 120, 255, 0.08) 0%,
    transparent 70%
  );
  z-index: -1;
  animation: float 20s ease-in-out infinite alternate-reverse;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(40px, 20px);
  }
}

/* Loqate Homepage Styles */

:root {
  --loqate-primary: #4D4DFF;
  --loqate-secondary: #7878FF;
  --loqate-dark: #333333;
  --loqate-light: #FFFFFF;
  --loqate-grey: #F5F5F5;
  --loqate-text: #333333;
  --loqate-text-light: #666666;
  --loqate-border: #E0E0E0;
  --loqate-shadow: rgba(0, 0, 0, 0.1);
  
  /* Dark mode variables */
  --loqate-bg-dark: #121212;
  --loqate-card-dark: #1E1E1E;
  --loqate-text-dark: #F5F5F5;
  --loqate-text-secondary-dark: #AAAAAA;
  --loqate-border-dark: rgba(255, 255, 255, 0.1);
}

/* Base container */
.loqate-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  color: var(--loqate-text);
  background-color: var(--loqate-light);
}

/* Dark mode adjustments */
[data-theme="dark"] .loqate-container {
  background-color: var(--loqate-bg-dark);
  color: var(--loqate-text-dark);
}

/* Main heading */
.main-heading {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  color: var(--loqate-text);
}

[data-theme="dark"] .main-heading {
  color: var(--loqate-text-dark);
}

/* CTA Container */
.cta-container {
  text-align: center;
  margin-bottom: 60px;
}

.cta-button {
  display: inline-block;
  background-color: var(--loqate-primary);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px var(--loqate-shadow);
}

.cta-button:hover {
  background-color: var(--loqate-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 8px var(--loqate-shadow);
}

.arrow-icon {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.cta-button:hover .arrow-icon {
  transform: translateX(4px);
}

/* Products Section */
.products-section {
  margin-bottom: 60px;
}

/* Section Heading */
.section-heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
  color: var(--loqate-dark);
}

[data-theme="dark"] .section-heading {
  color: var(--loqate-text-dark);
}

.products-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.intro-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.product-card {
  background-color: white;
  border: 1px solid var(--loqate-border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: var(--loqate-text);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--loqate-shadow);
}

[data-theme="dark"] .product-card {
  background-color: var(--loqate-card-dark);
  border-color: var(--loqate-border-dark);
  color: var(--loqate-text-dark);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--loqate-shadow);
}

.product-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.product-content {
  flex: 1;
}

.product-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--loqate-text);
}

[data-theme="dark"] .product-content h2 {
  color: var(--loqate-text-dark);
}

.product-content p {
  font-size: 0.9rem;
  color: var(--loqate-text-light);
  margin: 0;
  line-height: 1.5;
}

[data-theme="dark"] .product-content p {
  color: var(--loqate-text-secondary-dark);
}

.product-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--loqate-primary);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card:hover .product-link {
  opacity: 1;
  transform: translateX(4px);
}

/* Resources Section */
.resources-section {
  margin-bottom: 60px;
  padding: 40px 0;
  background-color: var(--loqate-grey);
  border-radius: 12px;
}

[data-theme="dark"] .resources-section {
  background-color: rgba(255, 255, 255, 0.05);
}

.resources-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 0 24px;
}

.resource-card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  text-decoration: none;
  color: var(--loqate-text);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--loqate-shadow);
}

[data-theme="dark"] .resource-card {
  background-color: var(--loqate-card-dark);
  color: var(--loqate-text-dark);
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--loqate-shadow);
}

.resource-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.resource-content {
  flex: 1;
}

.resource-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--loqate-text);
}

[data-theme="dark"] .resource-content h3 {
  color: var(--loqate-text-dark);
}

.resource-content p {
  font-size: 0.9rem;
  color: var(--loqate-text-light);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

[data-theme="dark"] .resource-content p {
  color: var(--loqate-text-secondary-dark);
}

.btn-action {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--loqate-primary);
}

/* Support Section */
.support-section {
  margin-bottom: 40px;
}

.support-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.support-card {
  background-color: white;
  border: 1px solid var(--loqate-border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--loqate-text);
  transition: all 0.3s ease;
}

[data-theme="dark"] .support-card {
  background-color: var(--loqate-card-dark);
  border-color: var(--loqate-border-dark);
  color: var(--loqate-text-dark);
}

.support-card:hover {
  border-color: var(--loqate-primary);
  box-shadow: 0 4px 8px var(--loqate-shadow);
}

.support-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.support-content p {
  font-size: 0.9rem;
  color: var(--loqate-text-light);
  margin: 0;
}

[data-theme="dark"] .support-content p {
  color: var(--loqate-text-secondary-dark);
}

.arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--loqate-primary);
  transition: transform 0.2s ease;
}

.support-card:hover .arrow-button {
  transform: translateX(4px);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .products-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .support-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .main-heading {
    font-size: 2rem;
  }
  
  .products-row,
  .resources-row,
  .support-row {
    grid-template-columns: 1fr;
  }
  
  .product-card,
  .resource-card,
  .support-card {
    padding: 16px;
  }
}


Returning the distance or directions between two or more points

Distances and Directions APIs

This site is currently a work in progress - please visit [Loqate.com](https://www.loqate.com/developers/) for the current Loqate documentation.

Loqate Docs

Home

Welcome to the Loqate documentation

This document provides a user guide help you implement Loqate’s Utilities Register 2.0.

Utilities Register

Loqate Utilities Register 2.0

All of the third party tools we integrate with.

All integrations

Adobe Commerce (Magento)

Adobe Commerce (Magento) Integration Guide 

Get Loqate services running in BigCommerce in just a few minutes

BigCommerce

BigCommerce Integration Guide

Get Loqate services running in Microsoft Dynamics 365 in just a few minutes

Microsoft Dynamics 365

Microsoft Dynamics 365 Integration Guide

Get Loqate services running in Salesforce CRM in just a few minutes

Salesforce CRM

Salesforce CRM Integration Guide

Get Loqate services running in Shopware in just a few minutes

Shopware 6

Shopware Integration Guide

APIs overview

The following errors are common across our APIs. More specific errors can be found in each API page.

API Documentation

Products

Directions

Distance