style.css

/**
Styling the entire site
*/

@font-face {
  font-family: "ABCFavorit-Bold";
  src: url("./ABCFavorit-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

body {
  --dg-light-gray: #a9a9ad;
  --dg-dark-gray: #2c2c33;
  --font-family: "Inter", Helvetica Neue, sans-serif;
  --container-lg: 1536px;
  --hub-playground-width: 530px;
  --markdown-title-marginTop: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "ABCFavorit-Bold", sans-serif;
}

body .field-description h1,
body .field-description h2,
body .field-description h3,
body .field-description h4,
body .field-description h5,
body .field-description h6,
body .markdown-body h1,
body .markdown-body h2,
body .markdown-body h3,
body .markdown-body h4,
body .markdown-body h5,
body .markdown-body h6 {
  margin-top: 2em;
}

body .App .rdmd-html {
  margin-bottom: 26px !important;
}

body .rm-Sidebar-list .rm-Sidebar-link {
  font-size: 15px;
}

body .App .rm-Guides,
body .App .rm-ReferenceMain,
body .App .rm-CustomPage {
  --markdown-font-size: 16px;
}

.InputGroup-input {
  text-security: disc;
  -webkit-text-security: disc;
}

body .markdown-body pre > code {
  max-height: 400px;
}

/**
Styling darkmode globals
*/

[data-color-mode="dark"] {
  color-scheme: dark;
}

[data-color-mode="dark"] body {
  --color-text-default: #ededf2;
  --color-link-default: #79affa;
  --color-bg-page: #1c1c20;
  --color-bg-page-rgb: #1c1c20;
  --color-input-background: #000000;
  --color-input-border: var(--md-code-background);
  --color-input-border-hover: #1c1c20;
}

/**
Styling the darkmode site
*/

[data-color-mode="dark"] .App .rm-SuggestedEdits .markdown-body a,
[data-color-mode="dark"] .App .rm-SuggestedEdits .content-body a,
[data-color-mode="dark"] .App .rm-SuggestionDiff .markdown-body a,
[data-color-mode="dark"] .App .rm-SuggestionDiff .content-body a,
[data-color-mode="dark"] .App .rm-Guides .markdown-body a,
[data-color-mode="dark"] .App .rm-Guides .content-body a,
[data-color-mode="dark"] .App .rm-ReferenceMain .markdown-body a,
[data-color-mode="dark"] .App .rm-ReferenceMain .content-body a,
[data-color-mode="dark"] .App .rm-Changelog .markdown-body a,
[data-color-mode="dark"] .App .rm-Changelog .content-body a,
[data-color-mode="dark"] .App .rm-Discuss .markdown-body a,
[data-color-mode="dark"] .App .rm-Discuss .content-body a,
[data-color-mode="dark"] .App .rm-CustomPage .markdown-body a,
[data-color-mode="dark"] .App .rm-CustomPage .content-body a {
  color: var(--color-link-default);
}

[data-color-mode="dark"] .App .rm-SuggestedEdits .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-SuggestedEdits .content-body a:hover,
[data-color-mode="dark"] .App .rm-SuggestionDiff .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-SuggestionDiff .content-body a:hover,
[data-color-mode="dark"] .App .rm-Guides .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-Guides .content-body a:hover,
[data-color-mode="dark"] .App .rm-ReferenceMain .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-ReferenceMain .content-body a:hover,
[data-color-mode="dark"] .App .rm-Changelog .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-Changelog .content-body a:hover,
[data-color-mode="dark"] .App .rm-Discuss .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-Discuss .content-body a:hover,
[data-color-mode="dark"] .App .rm-CustomPage .markdown-body a:hover,
[data-color-mode="dark"] .App .rm-CustomPage .content-body a:hover {
  color: #fbfbff;
}

/**
External links
*/

a[target="_blank"]:not(.rm-Sidebar-link)::after,
a[to*="https://"]::after
{
  speak: never;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: 8px;
  font-size: 0.8em;
  opacity: 0.6;
  font-family: "Font Awesome 6 Pro";
  content: "\f08e";
}

/**
DG classes
*/

.App .rdmd-html span.dg-badge,
.App .rdmd-html a.dg-badge {
  margin-right: 6px;
  color: #bbbbbf !important;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 8px;

  background-origin: border-box;
  border: solid 1px transparent;
  background-image: linear-gradient(90deg, #201cff -91.5%, #13ef95 80.05%);
  box-shadow: 2px 1000px 1px var(--md-code-background) inset;
}

.App .rdmd-html span.dg-badge::before,
.App .rdmd-html a.dg-badge::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Font Awesome 6 Pro";
}

.App .rdmd-html span.dg-badge.live::before,
.App .rdmd-html a.dg-badge.live::before,
.App .rdmd-html span.dg-badge.prerecorded::before,
.App .rdmd-html a.dg-badge.prerecorded::before,
.App .rdmd-html span.dg-badge.tts::before,
.App .rdmd-html a.dg-badge.tts::before,
.App .rdmd-html span.dg-badge.agent::before,
.App .rdmd-html a.dg-badge.agent::before,
.App .rdmd-html a.dg-badge.language::before {
  margin-right: 8px;
}

.App .rdmd-html span.dg-badge.prerecorded::before,
.App .rdmd-html a.dg-badge.prerecorded::before {
  font-weight: 900;
  content: "\f15b";
}

.App .rdmd-html span.dg-badge.live::before,
.App .rdmd-html a.dg-badge.live::before {
  content: "\f8f2";
}

.App .rdmd-html span.dg-badge.tts::before,
.App .rdmd-html a.dg-badge.tts::before {
  content: "\f675";
  font-weight: 900;
}

.App .rdmd-html span.dg-badge.agent::before,
.App .rdmd-html a.dg-badge.agent::before {
  content: "\f590";
  font-weight: 900;
}

.App .rdmd-html span.dg-badge.beta,
.App .rdmd-html a.dg-badge.beta {
  background-image: linear-gradient(82.38deg, #ff2eea -99.24%, #4b3cff 99.26%);
}

.App .rdmd-html span.dg-badge.beta::before,
.App .rdmd-html a.dg-badge.beta::before {
  content: "\f492";
  margin-right: 8px;
}

.App .rdmd-html span.dg-badge.language,
.App .rdmd-html a.dg-badge.language {
  background-image: linear-gradient(85deg, #ee028b 5.66%, #ae29ff 99.14%);
}

.App .rdmd-html span.dg-badge.language::before,
.App .rdmd-html a.dg-badge.language::before {
  content: "\f1ab";
  font-weight: 900;
}

.App .rdmd-html span.dg-badge.unavailable,
.App .rdmd-html a.dg-badge.unavailable {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: line-through;
  color: var(--dg-light-gray);
  background: var(--dg-dark-gray);
}

.App .rdmd-html span.dg-badge.deprecated,
.App .rdmd-html a.dg-badge.deprecated {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--dg-light-gray);
  background: red;
}

.App .rdmd-html span.dg-badge.deprecated::before,
.App .rdmd-html a.dg-badge.deprecated::before {
  content: "\f05e";
  margin-right: 8px;
}

.App .rdmd-html span.dg-badge.unavailable::before,
.App .rdmd-html a.dg-badge.unavailable::before {
  background: var(--md-code-background);
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  color: currentColor;
}

[data-color-mode="dark"] .starter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

[data-color-mode="dark"] .starter-card {
  display: block;
  justify-content: center;
  text-align: center;
  border: 2px solid var(--dg-dark-gray);
  background: var(--md-code-background);
  color: var(--color-text-default);
  padding: 1.5rem;
  text-decoration: none !important;
  border-radius: 8px;
}

[data-color-mode="dark"] .starter-card:hover {
  border: 2px solid var(--color-link-default);
}

/**
Styling sidebar links.
*/

[data-color-mode="dark"] body .rm-Sidebar-heading {
  color: #b2d1fc;
}

/**
Override for "header-top" search button position.
*/

.rm-Header .rm-Header-top .rm-Container div:last-child {
  flex-direction: row-reverse;
}

/**
Resets for "header-bottom" nav.
*/

[data-color-mode="dark"] .rm-Header-bottom-link.Button:active,
[data-color-mode="dark"] .rm-Header-bottom-link.Button:focus-within {
  border-color: transparent !important;
}

[data-color-mode="dark"] .rm-Header-bottom-link:active,
[data-color-mode="dark"] .rm-Header-bottom-link {
  border: 0px solid transparent !important;
  border-bottom: solid 3px transparent !important;
  border-radius: 0px !important;
  background-color: transparent !important;
  outline: 0px !important;
  box-shadow: 3px 1000px 1px #101014 inset !important;
  padding: 16px !important;
}

/**
Styling for "header-bottom" nav.
*/

[data-color-mode="dark"] .rm-Container > nav {
  padding-bottom: 0px;
}

[data-color-mode="dark"] a.rm-Header-bottom-link:active,
[data-color-mode="dark"] a.rm-Header-bottom-link:hover,
[data-color-mode="dark"] a.rm-Header-bottom-link.active {
  background: linear-gradient(
    85.5deg,
    rgba(238, 2, 139, 1) 5.66%,
    rgba(174, 41, 255, 1) 99.14%
  ) !important;
  box-shadow: 3px 1000px 1px #101014 inset !important;
  background-origin: border-box !important;
}

/**
Styling for version pop-up box
*/
[data-color-mode="dark"] .tippy-box .Menu.Menu_light {
  background-image: linear-gradient(
    85.5deg,
    rgba(238, 2, 139, 0.4) 5.66%,
    rgba(174, 41, 255, 0.4) 99.14%
  );
  box-shadow: 2px 1000px 1px #101014 inset;
  background-origin: border-box;
  border: solid 2px transparent;
}

/**
Styling for glossary item and pop-up box
*/
[data-color-mode="dark"] .GlossaryItem-trigger {
  border-bottom: 2px solid var(--color-link-default);
  border-style: dashed;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

[data-color-mode="dark"] .GlossaryItem-tooltip-content {
  background-image: linear-gradient(
    85.5deg,
    rgba(238, 2, 139, 0.4) 5.66%,
    rgba(174, 41, 255, 0.4) 99.14%
  );
  box-shadow: 2px 1000px 1px #101014 inset;
  background-origin: border-box;
  border: solid 2px transparent;
}

/**
Styling the API ref parameters table, playground, request examples, and response.
*/

[data-color-mode="dark"] .rm-APILogInfo {
  --APILogInfo-bg: var(--md-code-background) !important;
}

[data-color-mode="dark"] .rm-APILogsTable {
  --APILogsTable-bg: var(--md-code-background) !important;
}

[data-color-mode="dark"] .InputGroup {
  --APIAuthInputGroup-bg: var(--md-code-background) !important;
}

[data-color-mode="dark"] .rm-PlaygroundRequest {
  --APIRequest-bg: var(--md-code-background) !important;
}

[data-color-mode="dark"]
  .rm-PlaygroundRequest
  .CodeSnippet
  .CodeMirror-gutters {
  background: var(--md-code-background) !important;
}

[data-color-mode="dark"] .rm-PlaygroundResponse {
  --APIResponse-bg: var(--md-code-background) !important;
}

[data-color-mode="dark"] .rm-ParamContainer {
  --ParamContainer-bg: var(--md-code-background) !important;
  --ParamContainer-bg-alt: var(--md-code-background) !important;
}

[data-color-mode="dark"] .rm-APIResponseSchemaPicker {
  --APIResponseSchemaPicker-bg: var(--md-code-background) !important;
  --APIResponseSchemaPicker-bg-alt: var(--md-code-background) !important;
  --APIResponseSchemaPicker-bg-hover: #1c1c20 !important;
}

[data-color-mode="dark"] .rm-Guides_loading {
  --Spinner-element: #1c1c20 !important;
  --Spinner-ring: #00e878 !important;
}

/**
Styling sidebar links.
*/

[data-color-mode="dark"] body .rm-Sidebar a:hover,
[data-color-mode="dark"] body .rm-Sidebar a:focus {
  background: none;
}

[data-color-mode="dark"] body .rm-Sidebar a.active {
  color: var(--color-link-default);
  background: none;
}

[data-color-mode="dark"] body a.rm-Sidebar-link:hover {
  color: var(--color-link-default);
}

/**
Styling search background.
*/

[data-color-mode="dark"] #AppSearch {
  --AlgoliaSearch-background: 16, 16, 20 !important;
}

/**
Styling code-blocks and tables in the reference and inline code everywhere.
*/

[data-color-mode="dark"] .App .rm-SuggestedEdits,
[data-color-mode="dark"] .App .rm-SuggestionDiff,
[data-color-mode="dark"] .App .rm-Guides,
[data-color-mode="dark"] .App .rm-ReferenceMain,
[data-color-mode="dark"] .App .rm-Changelog,
[data-color-mode="dark"] .App .rm-Discuss,
[data-color-mode="dark"] .App .rm-CustomPage {
  --md-code-background: #101014 !important;
  --md-code-tabs: transparent !important;
  --table-edges: #3a4348 !important;
  --table-head: var(--md-code-background) !important;
  --table-stripe: var(--md-code-background) !important;
}

[data-color-mode="dark"] *:not(pre) > code {
  border: 1px solid #2c2c33 !important;
  color: #fef0c7;
  background: #101014;
}

[data-color-mode="dark"] .CodeTabs-inner pre {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

[data-color-mode="dark"] .CodeTabs-toolbar {
  align-items: center;
  background-color: #28282b;
  justify-content: start;
}

[data-color-mode="dark"] .CodeTabs-toolbar button {
  padding-top: 0.6em;
}

[data-color-mode="dark"]
  .CodeTabs.CodeTabs_initial
  .CodeTabs-toolbar
  button:first-child,
[data-color-mode="dark"] .CodeTabs-toolbar button.CodeTabs_active {
  background-image: linear-gradient(
    85.5deg,
    #ee028b 5.66%,
    #ae29ff 99.14%
  ) !important;
  box-shadow: 3px 1000px 1px #101014 inset !important;
}

[data-color-mode="dark"] .CodeTabs-toolbar button {
  min-width: 90px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background-origin: border-box !important;
  border-bottom: solid 3px transparent !important;
}

/**
Callout styling
*/

.markdown-body .callout {
  --text: var(--color-text-default);
}

.markdown-body .callout p {
  margin-left: calc(1.75rem + 1.5rem);
}

.markdown-body .callout.callout_default {
  --background: var(--md-code-background);
  --title: var(--color-text-default);
  border: solid var(--color-text-default);
  border-width: 1px 1px 1px 3px;
  border-radius: 4px;
}

.markdown-body .callout.callout_info {
  --title: #149afb;
  --background: #1c2d44;
  --emoji: unset;
  --icon: "\f05a";
  --icon-color: var(--color-text-default);
  border: solid #149afb;
  border-width: 1px 1px 1px 3px;
  border-radius: 4px;
}

.markdown-body .callout.callout_okay {
  --title: #00e878;
  --background: #00e87810;
  --emoji: unset;
  --icon: "\f058";
  --icon-color: var(--color-text-default);
  border: solid #00e878;
  border-width: 1px 1px 1px 3px;
  border-radius: 4px;
}

.markdown-body .callout.callout_warn {
  --title: #fdb022;
  --background: #fdb02210;
  --emoji: unset;
  --icon: "\f071";
  --icon-color: var(--color-text-default);
  border: solid #fdb022;
  border-width: 1px 1px 1px 3px;
  border-radius: 4px;
}

.markdown-body .callout.callout_error {
  --title: #f97066;
  --background: #f9706610;
  --emoji: unset;
  --icon: "\f057";
  --icon-color: var(--color-text-default);
  border: solid #f97066;
  border-width: 1px 1px 1px 3px;
  border-radius: 4px;
}

.markdown-body .callout[theme="🌐"] {
  background-origin: border-box;
  border: solid #1c1c20;
  border-left: solid 0.25em transparent;
  background-image: linear-gradient(2.23deg, #201cff -19.1%, #13ef95 84.06%);
  box-shadow: 0.25em 1000px 1px #101014 inset;
  --emoji: unset;
  --icon: "\f0ac";
  --icon-color: var(--color-text-default);
}

.markdown-body .callout[theme="🌈"] {
  background-origin: border-box;
  border: 0.125em solid transparent;
  background-image: linear-gradient(
    82.38deg,
    #ff2eea -99.24%,
    #4b3cff 99.26%
  ) !important;
  box-shadow: 0.125em 1000px 1px #101014 inset;

  --emoji: unset;
}

.markdown-body .callout[theme="🌈"] > .callout-heading.empty {
  float: none;
  margin-top: 0;
}

.markdown-body .callout[theme="🛝"] {
  background-origin: border-box;
  border: 0.125em solid transparent;
  background-image: linear-gradient(
    82.38deg,
    #ff2eea -99.24%,
    #4b3cff 99.26%
  ) !important;
  box-shadow: 0.125em 1000px 1px #101014 inset;
  --icon: url("https://res.cloudinary.com/deepgram/image/upload/v1717523786/devex/codey-greeting_rekqe1.svg");
  --emoji: unset;
}

.callout.callout .callout-heading.empty > .callout-icon {
  float: left;
  margin-top: 0.5rem;
  margin-right: 1.75rem;
  margin-left: 0.15rem;
  transform: scaleX(-1);
}

.callout.callout .callout-heading.empty > .callout-icon::before {
  top: -7px;
}

/**
HTTP request types
*/

body .APIMethod_fixedWidth {
  width: 40px;
}

body .APIMethod {
  border-radius: calc(var(--border-radius) * 2.5);
  height: auto;
  padding: 3px;
  line-height: normal;
  text-shadow: 4px 3px 0 var(--md-code-background);
}

body .APIMethod_post,
body .APIMethod_cnnct {
  background: #1c2d44;
  border: 1px solid #1c6fd6;
  text-shadow: inherit;
}

body .APIMethod_error,
body .APIMethod_delete {
  background: #43211e;
  border: 1px solid #d92d20;
  text-shadow: inherit;
}

body .APIMethod_deprecated {
  background: #88888c80;
  border: 1px solid #88888c;
  text-shadow: inherit;
}

body .APIMethod_rqbdy,
body .APIMethod_rspns,
body .APIMethod_descr {
  background: #61616580;
  border: 1px solid #616165;
  text-shadow: inherit;
}

body .APIMethod_fn {
  background: #dd007080;
  border: 1px solid #dd0070;
  text-shadow: inherit;
}

body .APIMethod_head {
  background: #4e4e5280;
  border: 1px solid #4e4e52;
  text-shadow: inherit;
}

body .APIMethod_get {
  background: #184129;
  border: 1px solid #00cf56;
  text-shadow: inherit;
}

body .APIMethod_link {
  background: #12b76a80;
  border: 1px solid #12b76a;
  text-shadow: inherit;
}

body .APIMethod_optns {
  background: #fdb02280;
  border: 1px solid #fdb022;
  text-shadow: inherit;
}

body .APIMethod_patch {
  background: #442d19;
  border: 1px solid #dc6803;
  text-shadow: inherit;
}

body .APIMethod_put {
  background: #301847;
  border: 1px solid #7800ed;
  text-shadow: inherit;
}

body .rm-Sidebar-link[href="/reference/streaming"]::after {
  content: "WSS";
  background: #ff2eea30;
  border-radius: calc(var(--border-radius) * 2.5);
  border: 1px solid #ff2eea;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: var(--font-family);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  height: 18px;
  justify-content: center;
  line-height: normal;
  padding-top: 3px;
  text-align: center;
  text-shadow: 4px 3px 0 var(--md-code-background);
  text-transform: uppercase;
  white-space: nowrap;
  width: 40px;
}

/* AI Bot Overrides */

[data-color-mode="dark"] .tippy-box div[class*="ChatGPT"] {
  background-image: none !important;
  box-shadow: 2px 10000px 1px #101014 inset !important;
  --md-code-background: #101014 !important;
}

[data-color-mode="dark"]
  .tippy-box
  div[class*="ChatGPT"]
  .CodeTabs-toolbar
  button {
  color: #ededf2 !important;
}

[data-color-mode="dark"]
  .tippy-box
  div[class*="ChatGPT"]
  .CodeTabs
  .CodeTabs-inner
  pre
  code {
  color: #676e95 !important;
}

[data-color-mode="dark"] .tippy-box div[class*="ChatGPT"] a {
  color: #ceced2 !important;
}

[data-color-mode="dark"] .tippy-box div[class*="ChatGPT"] a:hover {
  color: #fbfbff !important;
}
/**
Enlarged image background
*/
span.lightbox-inner {
  background-color: #000;
}

/**
Make inputs visible on api docs
*/
.rm-ParamContainer .Input {
  border: 1px solid #505050;
}

.rm-ParamContainer .Select {
  border: 1px solid #505050;
}

/**
 * Add markdown table styling for API references
 */
.markdown-body.content-body .rdmd-table {
  background: var(--md-code-background);
  border: var(--border-width) solid var(--color-border-default);
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  font-size: 14px;
  padding: 6px 0;
}

.markdown-body.content-body .rdmd-table .rdmd-table-inner,
.markdown-body.content-body .rdmd-table .rdmd-table-inner table,
.markdown-body.content-body .rdmd-table .rdmd-table-inner table td, 
.markdown-body.content-body .rdmd-table .rdmd-table-inner table th,
.markdown-body.content-body .rdmd-table .rdmd-table-inner table tr,
.markdown-body.content-body .rdmd-table .rdmd-table-inner table tr+tr {
  background: none;
  border: none;
}

.markdown-body.content-body .rdmd-table .rdmd-table-inner table {
	border: 0;
}

.markdown-body.content-body .rdmd-table .rdmd-table-inner table td,
.markdown-body.content-body .rdmd-table .rdmd-table-inner table tr:not(:first-child) {
  border-top: var(--border-width) solid var(--color-border-default);
}