styles.css

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");



[data-component-part="step-line"] {
  background-color: rgb(167,56,149);
  width:3px;
}


[data-component-part="step-title"] {
  margin: 2px !important;
}

.nav-anchors a, #page-title {
  color: #4E2F6C;
  font-weight: 700;
}


.dark .nav-anchors a, .dark #page-title {
  color: #0197D8;
  font-weight: 700;
}



/* Footer email under socials */
footer .footer-socials::after {
  content: "info@visual-layer.com";
  display: block;
  margin-top: 0.75rem;
  color: var(--muted-text-color, #888);
  font-size: 0.875rem;
}
th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: left !important
}

.integration-table table {
  margin: -30px !important;
}



.integration-table, .integration-table th,
.integration-table td {
  /* left-align table */
  margin-left: 0;
  margin-right: auto;
  border-collapse: collapse;

  /* left-align text in both headers and data cells */
  text-align: left !important;

 /* breathing room */
  padding: 0.5em 1em;
}



:root {
  --dark-mode-aware-p-color-alt : rgba(0, 0, 0, 0.50);
  --dark-mode-aware-dark-background-color: #1A283B;
  --dark-mode-aware-dark-border-color: #666;
  --dark-mode-aware-dark-text-color: #eee;
  --dark-mode-aware-dark-wrapper-background-color: #364150;
  --dark-mode-aware-dark-link-color: #ffffff;
  --dark-mode-aware-keybpoard-shortcut: "rgba(18, 18, 18, 0.85)";

}

body,
p,
h1,
h2,
h3,
h4 {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  letter-spacing: normal !important;
}

.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-right: 7px;
  
}

#fc .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-right: 7px;
  
}

#fc-actions .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-bottom: 2em !important;
  margin-right: 7px;
}


.hero-text h1{
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 60px;
  font-style: normal;
  font-weight: 800;
  line-height: 63px;
  letter-spacing: 2.4px;
}

.hero-text h3{
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 25.2px;
  letter-spacing: 0.96px;
}

.background-image{
 background-image: var(--landing-page-image-light);
 height: 330px;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 position: relative;
 width: 100%; 
 display: flex; 
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

.dark .background-image{
  background-image: var(--landing-page-image-dark);
}


.paragraph-block{
  text-align: start;
  text-wrap:inherit;
}

.paragraph{
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
 line-height: normal;
 color: var(----dark-mode-aware-p-color)
}

.dark .paragraph{
  color: #ffffff;
}

.iframe {
  height: 800px;
  width: 100%;
}

.iframe-wrapper {
  display: unset;
}

.iframe-media {
  display: none;
}

.hero {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 2rem, 2rem, 2rem, 2rem;
  background-image: var(--hero-background-image-light);
  height: 326px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.dark .hero {
  background-image: var(--hero-background-image-dark);
}


.hero-content {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: black;
}

.search-bar {
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid #d6d8db;
  border-radius: 0.5rem;
  overflow: hidden;
}

.search-bar input {
  border: none;
  padding: 0.75rem 1rem;
  width: 400px;
  height: 43px;
  background: transparent;
  font-size: 1rem;
  flex-grow: 1;
  outline: none;
  border-radius: var(--Sizes-Radius-R-4-px, 4px);
  border: 1px solid var(--Color-Transparent-White-10, rgba(255, 255, 255, 0.10));
  background: var(--Color-Transparent-White-05, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(8px);
}

.keyboard-shortcut {
  display: flex;
  align-items: center;
  background:transparent;
  border-radius: var(--Sizes-Radius-R-4-px, 4px);
  border: 1px solid var(--Color-Transparent-White-10, rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(8px);
  padding: 0.5rem;
}

.keys span {
  font-size: 14px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(62, 149, 255, 0.04);
  color: rgba(18, 18, 18, 0.85);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0 0.2rem;
}

.dark .keys span{
  background-color: rgba(62, 149, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(62, 149, 255, 0.04);
}

.grid-table{
  margin-top: 2rem;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
   display: flex;
  align-items: center;
}

#api-grid {
  grid-column-gap: 5rem;
  grid-row-gap: 1.25rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  justify-items: center;
}

.api-item {
  display: flex;
  padding: var(--Sizes-Padding-Possitive-32-px, 32px) var(--Sizes-Padding-Possitive-16-px, 16px);
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  height: 100px;
  width: 300px;
  border-radius: 16px;
  border: 1px solid rgba(62, 149, 255, 0.04);
  background: #F4F4F4;
}

.api-item img {
  height: 24px;
  width: 24px;
  padding: 9px, 9px,9px 9px;
}

.api-item span {
  font-size: 1rem;
  font-weight: 400;
  color: #FFF;
}

.vendor-link{ 
color: #000000;
text-overflow: ellipsis;
font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
font-size: 20px;
font-style: normal;
font-weight: 500;
padding-left: 24px;
letter-spacing: 1.12px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #E3DFDF;
}

.dark .dark-mode-aware {
  border: 1px solid rgba(62, 149, 255, 0.04);
  background: #1A283B;
}

.dark .wrapper {
  background-color: #364150;
}

.dark .vendor-link {
color: #ffffff;
text-overflow: ellipsis;
font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
font-size: 20px;
font-style: normal;
font-weight: 500;
padding-left: 24px;
letter-spacing: 1.12px;
}

table {
  display: table;
  max-width: 90%;
  margin: 20px auto;
}

#content-area {
  max-width: 800px; /* adjust as needed */
}

.integrations-table table {
  border-collapse: collapse;
  border-style: solid;

  max-width: fit-content;
  text-align: left;
  table-layout: fixed;
  align-items: left;
  border-color: #000000;
}

.integrations-table code a {
  pointer-events: none;
  text-decoration: none;
  color: var(--ifm-table-cell-color);
  cursor: default;
}

.integrations-table th:first-child {
  width: fit-content;
}


.integrations-table th:second-child {
  width: 50%;
  padding-right: 10px;
}

.integrations-table th:nth-child(3) {
  width: 50%;
}


/* Config reference tables — 4 columns with Description taking majority width */
.config-table table {
  border-collapse: collapse;
  border-style: solid;
  max-width: fit-content;
  text-align: left;
  table-layout: fixed;
  border-color: #000000;
}

.config-table th:first-child,
.config-table td:first-child {
  width: 20%;
  word-break: break-all;
}

.config-table th:nth-child(2),
.config-table td:nth-child(2) {
  width: 10%;
}

.config-table th:nth-child(3),
.config-table td:nth-child(3) {
  width: 10%;
}

.config-table th:nth-child(4),
.config-table td:nth-child(4) {
  width: 40%;
}

#var-table th:first-child {
  width: 25%;
}

#var-table  th:nth-child(2){
  width: 50%;
}


.flow-table {
  width: 100%;
  overflow-x: auto; 
}

.flow-table td {
  line-height: 1;
  height: 15px; 
  vertical-align: middle; 
}


.flow-table table {
  border-collapse: collapse;
  border-style: solid;
  width: 100%;
  max-width: 100%;
  text-align: left;
  table-layout: fixed;
  align-items: left;
}

.flow-table th,
.flow-table td {
  width: 25%;
  height:25%;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.table-functions {
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  max-width: 100%;
  text-align: left;
  table-layout: fixed;
}


#footer > * {
  padding: 7px;

}


[data-component-part="card-content"]>*, [data-component-part="callout-content"]{
  font-size:90% !important;
}


#footer {
  background-color: #0f1117 !important;
  color: white !important;
  padding: 1.5rem 0 0.5rem 0 !important;
  margin-top: 0 !important;
}

#footer hr,
#footer [class*="divider"],
#footer [class*="border"] {
  margin: 0 !important;
  padding: 0 !important;
}

#footer > * {
  padding: 0.25rem !important;
  margin: 0 !important;
}

#footer a,
#footer span,
#footer p,
#footer h3,
#footer h4 {
  color: white !important;
  margin: 0 !important;
  padding: 0 !important;
}

#footer h3,
#footer h4 {
  margin-bottom: 0.5rem !important;
}

#footer ul {
  margin: 0 !important;
  padding: 0 !important;
}

#footer li {
  margin: 0.15rem 0 !important;
  padding: 0 !important;
}

#footer svg {
  color: white !important;
  fill: white !important;
}


.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.footer-icons {
  display: flex;
  gap: 32px;
}

.footer-title {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.footer-display{
  display: flex;
  flex-direction: row;
}

.flow-control{
  display: flex;
}


@media only screen and (max-width: 768px) {

  .hero{
    flex-direction: column;
    justify-content: center;
  }

  #api-grid {
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 2rem;
  }

  .iframe {
    max-height: 100%;
    height: unset;
    border-radius: 32px;
  }

  .iframe-wrapper {
    display: block;
    position: relative;
    max-height: 200px;
    border-radius: 32px;
  }

  .iframe-media {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    backdrop-filter: blur(0.5em);
    background-color: rgba(34, 33, 38, 0.8);
    border-radius: 32px;
  }

  .table-functions th:first-child {
  width: 17%;
}

}
 

@media (max-width: 996px) {

  .hero{
    flex-direction: column;
    justify-content: center;
  }

  #api-grid {
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 2rem;
  }
  
}

/* Existing CSS code remains unchanged */
/* Navbar styling */
.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Dropdown container styling */
.dropdown-container {
  position: absolute;
  right: 0; /* Position dropdown to the right */
  top: 100%; /* Position below the navbar */
  background-color: white;
  padding: 10px;
  display: none; /* Hidden by default */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Primary button styling for "Try Now" */
.navbar .primary {
  background-color: #0097D9;
  color: white;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  z-index: 1; /* Ensure "Try Now" button stays on top */
}

/* Dropdown button styling */
.dropdown-btn {
  background-color: #f2f2f2;
  color: black;
  font-size: 14px;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  z-index: 2; /* Ensure the button stays clickable above the dropdown */
}

/* Show dropdown content when hovering the dropdown button */
.navbar .dropdown-btn:hover + .dropdown-container {
  display: block; /* Show the dropdown when hovering over the button */
}

/* Dropdown content links styling */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  z-index: 3; /* Ensure dropdown content stays above the button */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Ensure the dropdown stays below the button */
.dropdown-container {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  visibility: hidden;
}

/* Hover to show the dropdown */
.navbar .dropdown-container:hover {
  visibility: visible;
}

/* Accordion styling */
[data-component-part="accordion-caret-right"] svg {
  width: 14pt !important;
  height: 14pt !important;
}

[data-component-part="accordion-icon"] svg {
  background-color: #a73895 !important;
}

[data-component-part="card-icon"] svg {
  background-color: #a73895 !important;
}

/* Process headings (h6) styling */
h6 {
  font-size: 1.05rem !important;
  text-transform: uppercase;
  color: #4E2F6C !important;
  font-weight: 600 !important;
  text-emphasis: dot;
  text-emphasis-position: under;
  margin-top: 45px !important;
  margin-bottom: 0px !important;
  text-underline-position: under;
}

.dark h6 {
  color: #0197D8 !important;
}

/* Sidebar dropdown gradient border */
#navigation-items button[id^="radix-"] {
  position: relative;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #A73895, #0097D9) border-box !important;
}

.dark #navigation-items button[id^="radix-"] {
  background:
    linear-gradient(#121212, #121212) padding-box,
    linear-gradient(135deg, #A73895, #0097D9) border-box !important;
}

/* ── Landing page ── */

.vl-landing {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Hero: white background with diagonal gradient band */
.vl-landing-hero {
  background: #ffffff;
  padding: 6rem 2rem 12rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dark .vl-landing-hero {
  background: #0f1117;
}

/* Diagonal gradient band — smooth curve via SVG clipPath */
.vl-landing-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #A63B94 0%, #0197D8 50%, #1BC07D 100%);
  clip-path: url(#hero-curve);
  opacity: 0.5;
  filter: blur(30px);
  pointer-events: none;
}

/* Hide the SVG defs element */
.vl-landing-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Soft fade at the bottom edge */
.vl-landing-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
  z-index: 1;
}

.dark .vl-landing-hero::after {
  background: linear-gradient(to bottom, transparent, #0f1117);
}

.vl-landing-hero-inner {
  max-width: 770px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.vl-landing-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.5rem;
  display: block;
}

.vl-landing-title {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #4E2F6C;
  margin: 0 0 1rem;
}

.dark .vl-landing-title {
  color: #ffffff;
}

.vl-landing-subtitle {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  color: #251649;
  margin: 0 0 2rem;
}

/* CTA buttons */
.vl-landing-cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.vl-landing-cta-primary,
.vl-landing-cta-secondary {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.vl-landing-cta-primary {
  background: #4E2F6C;
  color: #ffffff;
}

.dark .vl-landing-cta-primary {
  background: #ffffff;
  color: #251649;
}

.vl-landing-cta-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #251649;
  border: 1px solid rgba(37, 22, 73, 0.3);
}

.vl-landing-cta-primary:hover,
.vl-landing-cta-secondary:hover {
  opacity: 0.85;
}

/* Tertiary: text-only link below the two buttons */
.vl-landing-cta-tertiary-row {
  margin-top: 1rem;
  text-align: center;
}

.vl-landing-cta-tertiary {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(37, 22, 73, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 22, 73, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.vl-landing-cta-tertiary:hover {
  color: #251649;
  border-color: rgba(37, 22, 73, 0.8);
}

/* Search bar on landing page */

/* Sections below the hero */
.vl-landing-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 2rem 1rem;
}

.vl-landing-section-last {
  padding-bottom: 4rem;
}

.vl-landing-section-title {
  font-family: 'Inter', Helvetica Neue, Arial, sans-serif !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: #4E2F6C;
  margin: 0 0 1.5rem;
  text-align: center;
}

.dark .vl-landing-section-title {
  color: #e4e4e7;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .vl-landing-hero {
    padding: 4rem 1.5rem 6rem;
  }

  .vl-landing-title {
    font-size: 2rem;
  }

  .vl-landing-subtitle {
    font-size: 1.1rem;
  }

  .vl-landing-section {
    padding: 2rem 1rem 0.5rem;
  }
}

/* Cap screenshot height and prevent width stretching */
.prose img,
article img {
  max-height: 500px;
  width: auto !important;
}

/* Horizontal/landscape screenshots — allow larger */
@container (min-width: 0px) {
  .prose img[src$=".png"],
  article img[src$=".png"] {
    max-height: 500px;
  }
}

/* Vertical/portrait screenshots — constrain more */
.img-sm { max-height: 250px !important; }

/* Strip Frame background and shrink-wrap to image */
div.rounded-xl.overflow-hidden.flex.justify-center {
  background: transparent !important;
  border: none !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Portrait frame width cap */
.frame-portrait {
  max-width: 320px;
  margin: 0 auto;
}
.img-md { max-height: 450px !important; width: auto !important; }
.img-lg { max-height: 600px !important; width: auto !important; }
.img-portrait { height: auto !important; }

/* Limit lightbox zoom for small images */
img.img-sm[data-rmiz-modal-img] {
  max-width: 30% !important;
  max-height: 90% !important;
}

/* End of CSS */