/home/bdqbpbxa/demo-subdomains/billine.goodface.com.ua/css/styles.css
/* Homepage */
/* Homepage | Main section */
.homepage-main-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 56px;
}
.homepage-main-section .homepage-main__text-box {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 32px;
width: 100%;
max-width: 596px;
}
.homepage-main-section .homepage-main__text *,
.homepage-main-section .homepage-main__text {
color: var(--shades-400);
}
.homepage-main-section .homepage-main__image {
position: relative;
max-width: 563px;
margin-right: 10%;
background-color: var(--white);
border: 1px solid var(--shades-150);
box-shadow: 0 16px 40px rgba(61, 62, 64, 0.04);
-webkit-border-radius: 16px;
border-radius: 16px;
}
.homepage-main-section .homepage-main__image:before {
content: "";
position: absolute;
top: 32px;
right: 32px;
left: 32px;
bottom: -24px;
z-index: -1;
background: linear-gradient(
45.9deg,
rgba(2, 104, 206, 0.5) 0%,
#9681ff 85.18%
);
filter: blur(34px);
-webkit-border-radius: 16px;
border-radius: 16px;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.homepage-main-section .homepage-main__image img,
.homepage-main-section .homepage-main__image svg {
display: block;
width: 100%;
height: auto;
}
/* Homepage | Partners section */
.partners-section .partners-section__description {
text-align: center;
margin-bottom: 16px;
}
.partners-section .partners-section__description *,
.partners-section .partners-section__description {
color: var(--shades-400);
}
.partners-section .partners-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 160px;
grid-gap: 8px;
}
.partners-section .partners-section__grid li {
border: 1px solid var(--shades-150);
-webkit-border-radius: 16px;
border-radius: 16px;
}
.partners-section .partners-section__grid img,
.partners-section .partners-section__grid svg {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: darken;
}
/* Homepage | Support section */
.support-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
padding: 48px 64px 48px 48px;
background-color: var(--shades-150);
-webkit-border-radius: var(--default-border-radius);
border-radius: var(--default-border-radius);
}
.support-section .support-section__image {
width: 100%;
max-width: 455px;
}
.support-section .support-section__image img {
display: block;
width: 100%;
height: auto;
max-height: 100%;
object-fit: cover;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.support-section .support-section__text-box {
max-width: 499px;
}
.support-section .support-section__text p:not(:first-child),
.support-section .support-section__text {
margin-top: 24px;
}
.support-section .support-section__text *,
.support-section .support-section__text {
color: var(--shades-400);
}
.support-section .support-section__button {
margin-top: 32px;
}
.support-section .support-section__messangers {
display: flex;
justify-content: flex-start;
gap: 8px;
margin-bottom: 32px;
}
.support-section .support-section__messangers > * {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
aspect-ratio: 1 / 1;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.support-section .support-section__messangers img {
display: block;
height: auto;
}
.support-section .support-section__email {
background-color: var(--shades-600);
}
.support-section .support-section__email .--mask-item {
width: 20px;
aspect-ratio: 1 / 1;
background-color: var(--white);
}
.support-section .support-section__telegram {
background: linear-gradient(0deg, #1d93d2 0%, #38b0e3 100%);
}
.support-section .support-section__telegram img {
width: 16px;
margin-left: -2px;
}
.support-section .support-section__viber {
background-color: #7f4da0;
}
.support-section .support-section__viber img {
width: 16px;
margin-bottom: -1px;
}
.support-section .support-section__watsap {
background-color: #25d366;
}
.support-section .support-section__watsap img {
width: 20px;
}
.support-section .support-section__skype {
background-color: #ffffff;
}
.support-section .support-section__skype img {
width: 22px;
}
/* About | Feature section */
.feature-section .feature-section__title {
text-align: center;
}
.feature-section .info-block__editor h1,
.feature-section .info-block__editor h2,
.feature-section .info-block__editor h3,
.feature-section .info-block__editor h4,
.feature-section .info-block__editor h5,
.feature-section .info-block__editor h6 {
font-size: 48px;
line-height: 115%;
letter-spacing: -0.03em;
}
.feature-section .feature-section__list > *:nth-child(even) {
flex-direction: row-reverse;
}
/* Connect | Main section */
.connect-main-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
}
.connect-main-section .connect-main__title,
.connect-main-section .connect-main__subtitle {
text-align: center;
}
.connect-main-section .connect-main__subtitle:after {
opacity: 1;
}
.connect-main-section .connect-main__way {
position: relative;
width: 100%;
}
.connect-main-section .connect-main__way-img {
position: absolute;
left: -86px;
top: 65px;
z-index: -1;
display: block;
width: 1380px;
height: 388px;
}
.connect-main-section .connect-main__way-img .way-img {
display: block;
width: 100%;
height: 100%;
}
.connect-main-section .connect-main__way-img .way-img:not(:first-child) {
display: none;
}
.connect-main-section .connect-main__way:after {
content: "";
position: absolute;
left: 100%;
bottom: 107px;
height: 2px;
width: calc(50vw - 573px);
background-color: var(--shades-150);
}
.connect-main-section .connect-way__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 197px 86px;
padding-right: 86px;
}
.connect-main-section .connect-way__list > *:nth-child(8) {
display: none;
}
.connect-main-section .connect-way__item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 24px;
}
.connect-main-section .connect-way__dot {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
aspect-ratio: 1 / 1;
background: linear-gradient(45deg, #0268ce 0%, #9681ff 100%);
-webkit-border-radius: 8px;
border-radius: 8px;
}
.connect-main-section .connect-way__dot:after {
content: "";
display: block;
width: 6px;
aspect-ratio: 1 / 1;
background: var(--white);
-webkit-border-radius: 2px;
border-radius: 2px;
}
.connect-main-section .connect-way__title {
height: 72px;
}
/* Connect way animations */
@keyframes timeDot {
0%,
1%,
50% {
opacity: 1;
}
51%,
99%,
100% {
opacity: 0;
}
}
.connect-main-section .container:not([data-animate]) .connect-way__time span {
animation: timeDot 2s steps(1, end) infinite;
animation-play-state: running;
}
.connect-main__way.-not-in-viewport .connect-way__dot {
animation-play-state: paused;
}
.connect-main-section .connect-way__item {
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
opacity: 0;
-webkit-transition: opacity 0.7s, transform 0.7s;
transition: opacity 0.7s, transform 0.7s;
}
.connect-main-section .way-arrow {
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
.connect-main-section .-animated .way-arrow {
opacity: 1;
}
.connect-main-section .-animated .connect-way__item {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
/* Contacts */
.contacts-main-container {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 32px;
}
.contacts-main-section .contacts-main__text {
max-width: 680px;
}
.contacts-main-section .contacts-main__text *,
.contacts-main-section .contacts-main__text {
color: var(--shades-400);
}
.contacts-main-section .contacts-main__button .default-button__icon {
width: 16px;
aspect-ratio: 1 / 1;
}
.contacts-address-section .info-block .info-block__editor a *,
.contacts-address-section .info-block .info-block__editor a,
.contacts-address-section .info-block .info-block__editor p *,
.contacts-address-section .info-block .info-block__editor p {
font-size: 19px;
line-height: 150%;
color: var(--shades-600);
}
.contacts-address-section .info-block .info-block__editor br {
display: block;
}
.contacts-address-section .info-block .info-block__editor strong {
font-weight: 700;
}
.contacts-address-section .info-block__image {
height: 420px;
}
.contacts-address-section .info-block__image iframe {
width: 100%;
height: 100%;
}
/* API */
body.-api main {
margin-top: 140px;
}
.api-section-container {
display: grid;
grid-template-columns: 302px 1fr;
align-items: start;
grid-column-gap: 48px;
}
.api-error {
display: none;
}
/* API | Navigation */
.api-navigation {
position: sticky;
top: 140px;
padding: 24px;
max-height: 680px;
overflow: hidden;
border: 1px solid var(--shades-150);
-webkit-border-radius: var(--default-border-radius);
border-radius: var(--default-border-radius);
}
.api-navigation .api-nav__button .--mask-item,
.api-navigation .api-nav__button p,
.api-navigation .api-nav__button a {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.api-navigation .api-nav__content .--accordion__content {
padding-top: 16px;
}
.api-navigation .api-nav__content ul {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 12px;
}
.api-navigation .api-nav__nav {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.api-navigation .api-nav__content .api-nav__request {
width: fit-content;
padding: 3px 3px 2px;
margin-right: 8px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-weight: 700;
font-size: 10px;
line-height: 100%;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
}
.api-navigation .api-nav__content .api-nav__request.-get {
background-color: #6bd1e6;
}
.api-navigation .api-nav__content .api-nav__request.-post {
background-color: var(--success-500);
}
.api-navigation .api-nav__nav-link {
margin-top: 2px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.api-navigation .api-nav__nav-link *,
.api-navigation .api-nav__nav-link {
line-height: 100%;
}
.api-navigation [href].-active:after {
opacity: 1;
}
.api-navigation .os-content {
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-direction: column;
gap: 24px;
}
.api-navigation .os-content:before,
.api-navigation .os-content:after {
display: none;
}
.api-navigation.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden
> .os-scrollbar-vertical {
top: 20px;
bottom: 20px;
right: 3px;
width: 5px;
padding: 1px;
-webkit-border-radius: var(--default-border-radius);
border-radius: var(--default-border-radius);
}
.api-navigation.os-theme-dark
> .os-scrollbar
> .os-scrollbar-track
> .os-scrollbar-handle,
.api-navigation.os-theme-light
> .os-scrollbar
> .os-scrollbar-track
> .os-scrollbar-handle {
background-color: var(--shades-250);
cursor: pointer;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.api-navigation.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.api-navigation.os-theme-light > .os-scrollbar > .os-scrollbar-track {
background-color: var(--shades-150);
}
/* API | Content block/container/box */
.api-content-container {
--title-space: 72px;
--element-space: 32px;
--line-space: 16px;
padding-top: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--shades-150);
}
.api-content-container .--margin-title-top {
margin-top: var(--title-space);
}
.api-content-container .--margin-element-top {
margin-top: var(--element-space);
}
.api-content-container .--margin-line-top {
margin-top: var(--line-space);
}
.api-content-container .api-content-box {
display: grid;
grid-template-columns: 1fr 330px;
align-items: start;
grid-column-gap: 48px;
}
.api-content-container:first-child {
padding-top: 0;
}
.api-content-container:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* API | Content */
.api-content > *:first-child {
margin-top: 0;
}
.api-content > *:last-child {
margin-bottom: 0;
}
.api-content code {
padding: 3px 7px;
border: 1px solid var(--shades-200);
background-color: var(--shades-150);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
font-family: "Source Code Pro";
font-size: 12px;
line-height: 2;
word-break: break-word;
}
/* API | Editor */
.api-editor > *:first-child {
margin-top: 0;
}
.api-editor > *:last-child {
margin-bottom: 0;
}
/*.api-content-box:first-child .api-editor:first-child > *:first-child {*/
/* margin-top: 0;*/
/*}*/
/*.api-content-box:last-child .api-editor:last-child > *:last-child {*/
/* margin-bottom: 0;*/
/*}*/
.api-editor h1,
.api-editor h2,
.api-editor h3,
.api-editor h4,
.api-editor h5,
.api-editor h6 {
margin-top: var(--title-space);
margin-bottom: var(--element-space);
}
.api-editor h1 *,
.api-editor h1 {
font-weight: 700;
font-size: 40px;
line-height: 120%;
letter-spacing: -0.02em;
}
.api-editor h2 *,
.api-editor h2 {
font-weight: 700;
font-size: 33px;
line-height: 125%;
letter-spacing: -0.02em;
}
.api-editor h3 *,
.api-editor h3 {
font-weight: 500;
font-size: 28px;
line-height: 125%;
}
.api-editor h4 *,
.api-editor h5 *,
.api-editor h6 *,
.api-editor h4,
.api-editor h5,
.api-editor h6 {
font-weight: 500;
font-size: 23px;
line-height: 135%;
}
.api-editor [id] {
width: fit-content;
cursor: pointer;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.api-editor [id] span {
display: inline-flex;
gap: 8px;
align-items: center;
white-space: normal;
}
.api-editor [id] span:after {
content: "";
display: block;
width: 24px;
min-width: 24px;
height: 24px;
background: url(../images/icons/link-simple.svg) no-repeat center;
-webkit-background-size: contain;
background-size: contain;
}
.api-editor li,
.api-editor p {
font-size: 16px;
line-height: 150%;
}
.api-editor a {
text-decoration: underline;
}
.api-editor img,
.api-editor p,
.api-editor ul,
.api-editor li {
margin-top: var(--line-space);
}
.api-editor li {
position: relative;
padding-left: 17px;
}
.api-editor li:before {
content: "";
position: absolute;
top: 10px;
left: 0;
display: block;
width: 5px;
aspect-ratio: 1 / 1;
background-color: var(--shades-600);
-webkit-border-radius: 50%;
border-radius: 50%;
}
.api-editor code {
color: var(--danger-500);
}
.api-editor p em {
font-style: italic;
}
.api-editor p strong {
font-weight: 700;
}
.api-editor img {
display: block;
width: 100%;
height: auto;
}
/* API | Accordion */
.api-accordion {
margin-top: var(--element-space);
margin-bottom: var(--element-space);
overflow: hidden;
}
.api-accordion .api-accordion__button {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 8px 16px;
background-color: #e7f4e1;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.api-accordion .api-accordion__button p strong {
font-weight: 700;
}
.api-accordion .api-accordion__button .--mask-item {
width: 16px;
min-width: 16px;
aspect-ratio: 1 / 1;
background-color: var(--shades-600);
margin-left: 8px;
margin-top: 4px;
}
.api-accordion .api-accordion__content .--accordion__content {
padding-top: var(--element-space);
padding-bottom: var(--element-space);
}
.api-accordion .api-accordion__content .--accordion__content .api-response {
margin-top: 0;
margin-bottom: 0;
}
/* API | Response */
.api-response {
padding-left: 16px;
padding-right: 16px;
margin-top: var(--element-space);
margin-bottom: var(--element-space);
}
.api-response .api-response__title {
margin-bottom: var(--element-space);
padding-bottom: 1px;
border-bottom: 1px solid var(--shades-250);
text-transform: uppercase;
color: var(--shades-300);
}
.api-response .api-response__title strong {
text-transform: none;
}
.api-response .api-response__precode {
margin-bottom: var(--line-space);
}
.api-response .api-response__subcode {
margin-top: var(--line-space);
}
.api-response .api-response__list {
margin-left: 32px;
}
.api-response .api-response__list li {
display: grid;
grid-template-columns: 166px 1fr;
grid-column-gap: var(--line-space);
margin-top: var(--line-space);
}
.api-response .api-response__list li:first-child {
margin-top: 0;
}
.api-response .api-response__response-box {
position: relative;
padding-left: 18px;
}
.api-response .api-response__response-box:before {
/*content: "├";*/
content: "\251C";
position: absolute;
top: 0;
left: 0;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
}
.api-response .api-response__subresponse {
color: var(--danger-500);
}
.api-response .api-response__description {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--shades-250);
}
/* API | Table */
.api-table {
margin-top: var(--element-space);
margin-bottom: var(--element-space);
}
.api-table table {
width: 100%;
border-collapse: collapse;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: hidden;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--shades-250); /* this draws the table border */
}
.api-table table,
.api-table th,
.api-table td {
border: 1px solid var(--shades-250);
}
.api-table th {
text-align: left;
font-weight: 700;
}
.api-table th,
.api-table td {
padding: 5px 5px;
}
.api-table td {
font-weight: 500;
}
.api-table td:nth-child(1),
.api-table td:nth-child(2) {
font-family: "Source Code Pro";
}
.api-table td:nth-child(1),
.api-table td:nth-child(2),
.api-table td:nth-child(3) {
width: 20%;
}
/* API | Additional info */
.api-addition-info > *:first-child {
margin-top: 0;
}
/* API | Additional info | Response */
.api-info-response {
overflow: hidden;
background: var(--white);
box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
-webkit-border-radius: 24px;
border-radius: 24px;
}
.api-info-response .api-info-response__button {
padding: 16px 24px;
}
.api-info-response .api-info-response__button-text {
display: flex;
align-items: center;
justify-content: flex-start;
}
.api-info-response .api-info-response__request {
padding: 8px;
margin-right: 8px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-weight: 700;
font-size: 10px;
line-height: 100%;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
}
.api-info-response .api-info-response__request.-get {
background-color: #6bd1e6;
}
.api-info-response .api-info-response__request.-post {
background-color: var(--success-500);
}
.-apple .api-info-response .api-info-response__button-text p {
margin-top: -2px;
}
.api-info-response .api-info-response__content .--accordion__content {
padding: 0 24px 16px;
}
.api-info-response .api-info-response__request-link {
word-break: break-word;
padding: 10px 8px;
border: 1px solid var(--shades-150);
-webkit-border-radius: 8px;
border-radius: 8px;
}
/* API | Additional info | Example */
.api-info-example {
margin-top: var(--element-space);
}
.api-info-example .api-info-example__number,
.api-info-example .api-info-example__title {
margin-bottom: var(--line-space);
}
.api-info-example .api-info-example__number {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 8px 24px;
background: var(--shades-600);
-webkit-border-radius: 8px;
border-radius: 8px;
}
.api-info-example .api-info-example__code-block {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
gap: 16px;
padding: 24px;
background-color: var(--white);
box-shadow: 0 16px 32px rgba(61, 62, 64, 0.08);
-webkit-border-radius: var(--default-border-radius);
border-radius: var(--default-border-radius);
overflow: hidden;
}
.api-info-example .api-info-example-code {
position: relative;
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
}
.api-info-example .api-info-example-code .os-content {
display: flex;
}
.api-info-example .api-info-example-code .os-content:after {
width: 24px;
min-width: 24px;
}
.api-info-example
.api-info-example-code:not(.os-host-scrollbar-horizontal-hidden) {
padding-bottom: 24px;
}
.api-info-example .os-theme-dark > .os-scrollbar,
.api-info-example .os-theme-light > .os-scrollbar {
right: 24px;
left: 24px;
height: 12px;
padding: 2px;
background-color: var(--shades-50);
-webkit-border-radius: var(--default-border-radius);
border-radius: var(--default-border-radius);
}
.api-info-example
.os-theme-dark
> .os-scrollbar
> .os-scrollbar-track
> .os-scrollbar-handle,
.api-info-example
.os-theme-light
> .os-scrollbar
> .os-scrollbar-track
> .os-scrollbar-handle,
.api-info-example .os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.api-info-example .os-theme-light > .os-scrollbar > .os-scrollbar-track {
-webkit-border-radius: 16px;
border-radius: 16px;
}
.api-info-example
.os-theme-dark
> .os-scrollbar
> .os-scrollbar-track
> .os-scrollbar-handle {
background-color: var(--shades-200);
cursor: pointer;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.api-info-example .api-info-example-code__type {
width: 100%;
padding: 14px 16px 13px;
background: var(--primary-blue-50);
-webkit-border-radius: 8px;
border-radius: 8px;
}
.api-info-example .api-info-example-code__box {
width: 100%;
}
.api-info-example .api-info-example-code__buttons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
margin-bottom: var(--line-space);
}
.api-info-example .api-info-example-code__button {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.api-info-example .api-info-example-code__button.-copied {
pointer-events: none;
}
.api-info-example .api-info-example-code__button.-copied:after {
-webkit-transition: 0s;
transition: 0s;
}
/* Code style */
div.code-toolbar > .toolbar {
display: none;
}
pre[class*="language-"] {
margin: 0;
padding: 0;
overflow: visible;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background-color: transparent;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.url,
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag,
.token.punctuation {
color: var(--shades-600);
background-color: transparent;
}
.token.boolean {
color: var(--danger-500);
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: var(--success-500);
}
.token a {
color: #6bd1e6;
text-decoration: underline;
}
.token.operator,
.token.number {
color: var(--primary-blue-500);
background-color: transparent;
}
code summary > span:first-child::before {
content: "+";
color: var(--shades-400);
cursor: pointer;
}
code details[open] > summary > span:first-child::before {
content: "-";
-webkit-transform: none;
transform: none;
}
code details:not([open]) > summary::after {
cursor: pointer;
}
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}