span.fixed.inset-0.pointer-events-none { background-repeat: no-repeat; background-size: cover; background-position: left -400px !important; } h1, h2, h3, h4, h5, h6 { line-height: 120% !important; letter-spacing: -0.02em !important; /* font-family: Aeonik; */ font-weight: 500 !important; } .table { width: 100%; table-layout: fixed; border-collapse: collapse; } .table th, .table td { text-align: left; word-wrap: break-word; } .table th:first-child, .table td:first-child { width: 30%; max-width: 30%; } .table th:not(:first-child), .table td:not(:first-child) { width: calc(70% / (var(--cols) - 1)); } ol ol { list-style-type: decimal !important; } :root { --tooltip-link-color: #b3a7ff; --bg: #fff; --text: #262626; --muted: #6b7280; --border: #e5e7eb; --accent: #2563eb; --section-icon-bg: #eef2ff; --card-bg: #fff; --card-shadow: rgba(0, 0, 0, 0.08); --input-bg: #fff; --input-border: #d1d5db; --input-placeholder: #9ca3af; --dash-color: #e9eaec; } .dark { --tooltip-link-color: #6742d5; --bg: #0f1115; --text: #e5e7eb; --muted: #a3a3a3; --border: #262a33; --accent: #60a5fa; --section-icon-bg: #1b1f2a; --card-bg: #151923; --card-shadow: rgba(255, 255, 255, 0.06); --input-bg: #141825; --input-border: #2a3140; --input-placeholder: #6b7280; --dash-color: rgba(255, 255, 255, 0.14); } .pipeline-wrapper { position: relative; width: 100%; max-width: 1202px; aspect-ratio: 1202 / 424; margin-bottom: 100px; } .pipeline-img { position: absolute; inset: 0; width: 100%; height: auto; display: block; } .pipeline-dim-circle { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255, 255, 255, 0.6); pointer-events: none; transition: background 0.15s ease; } .dark .pipeline-dim-circle { background: rgba(0, 0, 0, 0.5); } .pipeline-hotspot { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; border-bottom: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .pipeline-hotspot:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .dark .pipeline-hotspot:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .frame { margin: 20px 0; } .prose :where(a):not( :where([class~="not-prose"], [class~="not-prose"] *, [class~="card"]), [aria-label="Navigate to header"] ) { border-bottom: 1px solid #000; font-weight: 500; } .dark .prose :where(a):not( :where([class~="not-prose"], [class~="not-prose"] *, [class~="card"]), [aria-label="Navigate to header"] ) { border-bottom: 1px solid #fff; } .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])), .dark .prose :where(a:hover):not(:where([class~="not-prose"], [class~="not-prose"] *, [class~="card"])) { border-bottom-width: 2px; } a strong { font-weight: 700 !important; } #navigation-items::-webkit-scrollbar { width: 4px; } #navigation-items::-webkit-scrollbar-track { background: transparent; } #navigation-items::-webkit-scrollbar-thumb { background: #888888ae; border-radius: 4px; } #navigation-items { scrollbar-width: thin; /* options: auto | thin | none */ scrollbar-color: #888 transparent; } #content-container h5, #content-container h6 { font-weight: 700; } #content-container h5:not(.callout h5), #content-container h6:not(.callout h6) { margin-top: 36px !important; } .sdk_banner_container { background: linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); background-image: url("/images/library/header_bg.svg"), linear-gradient(99.42deg, #c376ff 0%, #635dff 100%); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } .quickstart_banner_container { background: linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); background-image: url("/images/library/header-bg.svg"), linear-gradient(333.17deg, rgb(62, 198, 235) -1.51%, rgb(99, 93, 255) 101.22%); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } #navbar > div:nth-child(2) { background-color: transparent !important; backdrop-filter: blur(20px); transition: background-color 0.2s ease, backdrop-filter 0.2s ease; } /* Opaque state - solid background */ #navbar[data-is-opaque="true"] > div:nth-child(2) { background-color: rgb(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); } /* Dark mode opaque state */ .dark #navbar[data-is-opaque="true"] > div:nth-child(2) { background-color: rgba(15, 17, 21, 0.75) !important; } /* Transparent state - just blur */ #navbar[data-is-opaque="false"] > div:nth-child(2) { background-color: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(20px); } /* Dark mode transparent state */ .dark #navbar[data-is-opaque="false"] > div:nth-child(2) { background-color: transparent !important; backdrop-filter: blur(20px); } /* Replace navigation border elements with dashed lines */ #navigation-items .px-1.py-3, .sidebar-group .px-1.py-3, .sidebar-groups .px-1.py-3 { /* Clear existing padding and convert to dashed line */ padding: 0 !important; height: 2px; width: 100%; background: repeating-linear-gradient( to right, var(--dash-color, #ccc) 0px, var(--dash-color, #ccc) 8px, transparent 8px, transparent 16px ) !important; margin: 20px 0 !important; } #navigation-items .px-1.py-3 > *, .sidebar-group .px-1.py-3 > *, .sidebar-groups .px-1.py-3 > * { display: none; } /* [data-callout-type="note"] [data-component-part="callout-icon"] svg { display: none; } [data-callout-type="note"] [data-component-part="callout-icon"]::before { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzIxYmFmYiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTMuNjYsODIuMzRsLTU2LTU2QTgsOCwwLDAsMCwxNTIsMjRINTZBMTYsMTYsMCwwLDAsNDAsNDBWMjE2YTE2LDE2LDAsMCwwLDE2LDE2SDIwMGExNiwxNiwwLDAsMCwxNi0xNlY4OEE4LDgsMCwwLDAsMjEzLjY2LDgyLjM0Wk0xNjAsNTEuMzEsMTg4LjY5LDgwSDE2MFpNMjAwLDIxNkg1NlY0MGg4OFY4OGE4LDgsMCwwLDAsOCw4aDQ4VjIxNlptLTMyLTgwYTgsOCwwLDAsMS04LDhIOTZhOCw4LDAsMCwxLDAtMTZoNjRBOCw4LDAsMCwxLDE2OCwxMzZabTAsMzJhOCw4LDAsMCwxLTgsOEg5NmE4LDgsMCwwLDEsMC0xNmg2NEE4LDgsMCwwLDEsMTY4LDE2OFoiPjwvcGF0aD48L3N2Zz4="); display: block; background-repeat: no-repeat; background-size: contain; position: relative; top: -4px; } */ .glossary_h2 { margin-bottom: 0 !important; } .glossary_h3 { margin-top: 30px !important; } .glossary_list li { list-style-type: none !important; padding-left: 0 !important; } .glossary_list li:before { content: none; } .label { display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; letter-spacing: 1px; background: transparent; } .label-danger { border: 1px solid #e74c3c; /* red */ color: #e74c3c; } .label-primary { border: 1px solid #3498db; /* blue */ color: #3498db; } .breadcrumb-list { display: flex; flex-wrap: wrap; } .breadcrumb-item { white-space: nowrap; } .z-10.absolute.w-full.h-full.border-b.border-gray-100, #sidebar-content, .dark #sidebar-content { border-color: transparent !important; } /* TOC LEFT LINE REMOVED */ #table-of-contents-content li a { border-left-width: 0 !important; } #topbar-cta-button a span { background-color: #000 !important; } .dark #topbar-cta-button a span { background-color: #fff !important; color: #000 !important; } #topbar-cta-button a svg { display: none; } .navbar-link a, .dark .navbar-link a { background-color: #fff; border: 1px solid #cecdca !important; padding-top: 7px; padding-bottom: 7px; } .dark .navbar-link a { background-color: rgb(255 255 255 / 0.1); border-color: #454545 !important; } .dark .navbar-link a:hover { background-color: rgba(255, 255, 255, 0.007); } .navbar-link a:hover .absolute.inset-0.bg-primary-dark.rounded-full, .dark #topbar-cta-button a:hover span { opacity: 1 !important; } .topbar-right-container ul.flex.items-center > li { order: 10; } /* baseline */ .topbar-right-container ul.flex.items-center > li:nth-child(1) { order: 1; } /* Log In */ .topbar-right-container ul.flex.items-center > li:nth-child(3) { order: 2; } /* Sign Up (mobile) */ .topbar-right-container ul.flex.items-center > li:nth-child(4) { order: 2; } /* Sign Up (desktop) */ .topbar-right-container ul.flex.items-center > li:nth-child(2) { order: 3; } /* Contact Sales */ ul.flex.items-center > li > a[href*="/u/login"] { order: 1; /* Log In */ background-color: transparent !important; border-color: transparent !important; } #code-snippet-feedback-button svg { display: none !important; } #code-snippet-feedback-button::after { content: ""; display: block; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(156 163 175)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } #code-snippet-feedback-button:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107 114 128)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .dark #code-snippet-feedback-button:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle-alert-icon lucide-triangle-alert'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .libraries_card { display: flex; flex-direction: column; justify-content: space-between; } .libraries_card:hover { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); } .dark .libraries_card:hover { background-color: transparent; box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px; } .login_list li::before { content: none; } .login_list h2 { margin: 0 !important; } .login_list a { border-bottom: none !important; } .libraries_cards a svg { width: 12px !important; height: 12px !important; } /* Default (light mode) — keep your existing */ [data-component-part="tooltip-content"] { text-align: left !important; padding: 6px 14px !important; border-radius: 4px !important; } [data-component-part="tooltip-content"] .flex { justify-content: flex-start !important; } /* Dark mode overrides */ .dark [data-component-part="tooltip-content"] { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; } /* Link override in dark mode */ [data-component-part="tooltip-content"] a { color: var(--tooltip-link-color) !important; text-align: left !important; opacity: 1; transition: opacity 0.2s ease-in-out; } [data-component-part="tooltip-content"] a:hover { opacity: 0.7; } .prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration: none !important; } .dark #sidebar-group a img { background-color: transparent !important; } /* .sidebar-group a { background-color: #efefef !important; } .dark .sidebar-group a { background-color: #282828 !important; } */ .nav-tabs a[href="/"] { display: none; } .dark .card, .dark .accordion, .dark .accordion-group { border-color: #9e9e9e; } .card:hover { background-color: rgb(var(--gray-100)); } .dark .card:hover { background-color: rgb(var(--gray-800)); } /* Default (light mode) */ a[href^="http"]:not([href="https://auth0.com"])::after { margin-left: 4px; position: relative; top: 1px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } a[href^="http"]:not([href="https://auth0.com"]):hover::after { margin-left: 4px; position: relative; top: 1px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236742d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } /* Dark mode */ .dark a[href^="http"]:not([href="https://auth0.com"])::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } .dark a[href^="http"]:not([href="https://auth0.com"]):hover::after { margin-left: 4px; position: relative; top: 1px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2399a7f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E"); } /* reset for other places */ #footer a[href^="http"]::after, #navbar a[href^="http"]::after, #sidebar-content a[href^="http"]::after, a.no_external_icon[href^="http"]::after, a.card[href^="http"]::after { content: none !important; } /* LINKS COLOR */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: #191919 !important; } .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):visited, .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { color: #6742d5 !important; border-bottom-color: #6742d5; } /* DARK LINKS COLOR */ .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: #efede9 !important; } .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):visited, .dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { color: #99a7f1 !important; border-bottom-color: #99a7f1; } /* CALLOUT LINKS COLOR */ .prose .callout a { color: inherit !important; } /* TABS */ .dark .tabs ul { border-color: #9e9e9e; } /* TABS item hover effect */ .cursor-pointer .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { border-color: #191919 !important; } .dark .cursor-pointer .flex.text-sm.items-center.leading-6.font-semibold.whitespace-nowrap.pt-3.max-w-max.border-b.text-gray-900.border-transparent:hover { border-color: #9e9e9e !important; } .code-block > div > div > div { color: black; }

Auth0 Onboarding

Learn the Basics

Configure Auth0

Plan and Design

Auth0 AI

Start Building

Learn about Auth0