/home/bdqbpbxa/demo-subdomains/nanobiomedical.goodface.com.ua/frontend/css/ui-kit.css
/* Fonts */
@font-face {
font-family: NAMU;
src: url('../fonts/namu-pro.woff2');
font-weight: 900;
}
@font-face {
font-family: Jeko-Bold;
src: url('../fonts/jeko-bold.woff2');
}
@font-face {
font-family: 'TTRamillas-LightItalic';
src: url('../fonts/TTRamilas/webFonts/TTRamillasLightItalic/font.woff2');
}
/* Reset */
html,
body,
body * {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
font-family: NAMU, sans-serif;
color: var(--dark);
background-color: #fff;
}
body * {
margin: 0;
padding: 0;
outline: 0;
background-repeat: no-repeat;
background-position: center;
font-weight: normal;
font-style: normal;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
border: none;
-webkit-user-drag: none;
}
input,
textarea {
border-radius: 0;
}
input::-ms-reveal,
input::-ms-clear {
display: none;
}
textarea {
resize: none;
}
/* Scroll lock */
html.-scroll-lock,
html.-scroll-lock body {
height: 100vh;
height: calc(var(--window-inner-height));
overflow: hidden;
}
html.-scroll-lock body {
position: relative;
padding-right: calc(var(--scrollbar-width));
}
html.-scroll-lock .header {
padding-right: calc(var(--scrollbar-width));
}
/* Global (Global css and params) */
:root {
--gradient: linear-gradient(108.06deg, #BEDDFB -6.89%, #D1F2F8 43.95%, #D9FFE3 106.62%);
--dark-gradient: linear-gradient(225deg, #99FFB3 9.81%, #53C2C0 49.48%, #065EB3 90.18%);
--blue: #065EB2;
--dark: #394047;
--grey-blue: #687D89;
--dark-grey: #808589;
--brown-grey: #A9ABAE;
--light: #E1E3E5;
--error: #F43B3B;
--product-card-bg: #F7F3F2;
}
.--mob-display,
.--tablet-display {
display: none;
}
.--pc-display {
display: block;
}
/* Texts */
.description-1,
.description-1 * {
font-size: 32px;
font-weight: 900;
line-height: 130%;
letter-spacing: -0.5px;
}
.description-2,
.description-2 * {
font-size: 24px;
font-weight: 900;
line-height: 130%;
letter-spacing: -0.5px;
font-feature-settings: 'cv11' on;
}
.title-1,
.title-1 * {
font-size: 80px;
font-weight: 900;
line-height: 100%;
letter-spacing: -3px;
font-feature-settings: 'cv11' on;
}
.title-1.-ttramillas,
.title-1.-ttramillas *,
.title-1 em,
.title-2.-ttramillas,
.title-2.-ttramillas *,
.title-2 em {
font-family: 'TTRamillas-LightItalic', sans-serif;
font-weight: 300;
}
.title-2,
.title-2 * {
font-size: 48px;
font-weight: 300;
line-height: 110%;
letter-spacing: -1px;
font-feature-settings: 'cv11' on;
}
.text-1,
.text-1 * {
font-size: 16px;
font-weight: 900;
line-height: 150%;
letter-spacing: normal;
font-feature-settings: 'pnum' on, 'lnum' on, 'salt' on, 'cv11' on;
}
.text-2,
.text-2 * {
font-size: 13px;
font-weight: 900;
line-height: 150%;
font-feature-settings: 'pnum' on, 'lnum' on, 'cv11' on;
}
.text.-bold,
.text.-bold * {
font-family: Jeko-Bold, sans-serif;
font-weight: bold;
}
.text-2.-bold,
.text-2.-bold * {
font-size: 16px;
}
.caption,
.caption * {
font-size: 12px;
font-weight: 900;
line-height: 100%;
font-feature-settings: 'pnum' on, 'lnum' on, 'cv11' on;
}
ol.default-list {
counter-reset: section;
}
.default-list li {
position: relative;
padding-left: 22px;
color: var(--dark-grey);
font-feature-settings: 'pnum' on, 'lnum' on, 'salt' on, 'cv11' on;
}
.default-list li:before {
content: '';
position: absolute;
top: 10px;
left: 0;
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blue);
}
ol.default-list li::before {
content: counter(section)".";
position: absolute;
top: 0;
counter-increment: section;
display: inline-block;
width: auto;
min-width: 14px;
height: auto;
margin-right: 8px;
border-radius: 0;
background: none;
}
.default-list li:not(:last-child) {
margin-bottom: 10px;
}
/* Links */
.link {
position: relative;
display: block;
width: fit-content;
color: var(--dark);
transition: color 0.4s;
}
.link.-has-arrow-to-bot svg path {
transition: fill 0.4s;
}
.link.-has-border-line {
border-bottom: 1px solid var(--light);
}
.link.-has-line {
white-space: nowrap;
}
.link.-has-line:before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
display: block;
height: 1px;
width: 0;
background: var(--light);
transition: width 0.4s;
}
.link.-has-border-line.-has-line:before {
background: var(--dark);
}
.link.-has-arrow {
margin-right: 24px;
}
.link.-has-arrow:after {
content: '';
position: absolute;
top: 50%;
right: -24px;
display: block;
width: 14px;
height: 14px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUzMDMzIDAuNDY5NjY2TDEzLjA2MDcgN0w2LjUzMDMzIDEzLjUzMDNMNS40Njk2NyAxMi40Njk3TDEwLjE4OTMgNy43NUgwVjYuMjVIMTAuMTg5M0w1LjQ2OTY3IDEuNTMwMzNMNi41MzAzMyAwLjQ2OTY2NloiIGZpbGw9IiMzOTQwNDciLz4KPC9zdmc+Cg==');
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.4s;
pointer-events: none;
}
.link.-has-arrow-to-bot {
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
}
.link.-has-arrow-to-bot svg {
min-width: 14px;
height: 14px;
margin-left: 10px;
}
/* Buttons */
.button {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
min-width: 250px;
height: 60px;
padding: 0 39px;
border: 1px solid var(--dark);
border-radius: 80px;
font-size: 16px;
font-weight: 900;
line-height: 150%;
color: var(--dark);
white-space: nowrap;
transition: background 0.4s, color 0.4s, opacity 0.4s;
cursor: pointer;
user-select: none;
}
.button.-dark {
background: var(--dark);
color: #fff;
}
.button.-white {
border: none;
background: #fff;
color: var(--dark);
}
.button.-has-arrow svg {
display: block;
max-width: 14px;
min-width: 14px;
margin-left: 10px;
}
.button.-has-icon-left svg {
display: block;
max-width: 14px;
min-width: 14px;
margin-right: 10px;
}
.button.-dark.-has-arrow svg path:not(.stroke-hover),
.button.-dark.-has-icon-left svg path:not(.stroke-hover) {
fill: #fff;
}
.button.-dark.-has-arrow svg path.stroke-hover,
.button.-dark.-has-icon-left svg path.stroke-hover {
stroke: #fff;
}
.button.-has-arrow svg path,
.button.-has-icon-left svg path {
transition: fill 0.4s, stroke 0.4s;
}
@media screen and (max-width: 1400px) {
/* Global (Global css and params) */
/* Texts */
/* Links */
/* Buttons */
}
@media screen and (max-width: 1260px) {
/* Global (Global css and params) */
.--mob-display {
display: block;
}
.--pc-display {
display: none;
}
/* Texts */
.mob-text-1,
.mob-text-1 * {
font-size: 18px;
line-height: 150%;
letter-spacing: -0.5px;
}
.mob-text-2,
.mob-text-2 * {
font-size: 15px;
line-height: 130%;
letter-spacing: -0.3px;
font-feature-settings: 'pnum' on, 'lnum' on, 'cv11' on;
}
.text.-bold,
.text.-bold * {
font-family: NAMU, sans-serif;
font-weight: 900;
}
.mob-text-2.-bold,
.mob-text-2.-bold * {
font-size: inherit;
}
.mob-text-3,
.mob-text-3 * {
font-family: NAMU, sans-serif;
font-size: 12px;
font-weight: 900;
line-height: 130%;
font-feature-settings: 'pnum' on, 'lnum' on, 'cv11' on;
}
.mob-description-1,
.mob-description-1 * {
font-size: 24px;
line-height: 120%;
letter-spacing: -0.5px;
}
.mob-title-1,
.mob-title-1 * {
font-size: 42px;
line-height: 100%;
letter-spacing: -2px;
font-feature-settings: 'cv11' on;
}
.mob-title-1.-ttramillas,
.mob-title-1.-ttramillas * {
font-family: 'TTRamillas-LightItalic', sans-serif;
font-weight: 300;
}
.mob-title-2,
.mob-title-2 * {
font-size: 34px;
line-height: 100%;
letter-spacing: -1px;
font-feature-settings: 'cv11' on;
}
.mob-caption,
.mob-caption * {
font-size: 10px;
font-weight: 900;
line-height: 100%;
letter-spacing: normal;
font-feature-settings: 'pnum' on, 'lnum' on, 'cv11' on;
}
.default-list li {
padding-left: 20px;
font-feature-settings: 'pnum' on, 'lnum' on, 'salt' on, 'cv11' on;
}
.default-list li:before {
top: 8px;
}
ol.default-list li::before {
margin-right: 6px;
}
/* Links */
.link.-has-line {
display: inline;
white-space: normal;
border-bottom: 1px solid var(--light);
}
.link.-has-line:before {
display: none;
}
/* Buttons */
.button {
height: 52px;
font-size: 15px;
line-height: 130%;
letter-spacing: -0.3px;
}
}
@media screen and (max-width: 760px) {
/* Global (Global css and params) */
/* Texts */
/* Links */
/* Buttons */
}