@charset "UTF-8"; /* CSS Document */ @font-face { font-family: 'BarlowLight'; src: url('../assets/fonts/Barlow-Light.ttf'); font-display: swap; } @font-face { font-family: 'BarlowMedium'; src: url('../assets/fonts/Barlow-Medium.ttf'); font-display: swap; } @font-face { font-family: 'BarlowRegular'; src: url('../assets/fonts/Barlow-Regular.ttf'); font-display: swap; } @font-face { font-family: 'BarlowBold'; src: url('../assets/fonts/Barlow-Bold.ttf'); font-display: swap; } @font-face { font-family: 'BarlowSemiBold'; src: url('../assets/fonts/Barlow-SemiBold.ttf'); font-display: swap; } @font-face { font-family: 'BarlowSemiCondensed-Medium'; src: url('../assets/fonts/BarlowSemiCondensed-Medium.ttf'); font-display: swap; } /* Create variables at level */ :root { --vh: 100vh; --default-text-color: #19222b; --title-text-color: #406080; --category-text-color: #17a895; --highlight-text-color: #17a895; --header-highlight-text-color: #77b0c3; --hr-color: rgba(211,221,230,.5); /* --nav-height: 60px; */ --nav-height: 48px; --nav-background-color: #77b0c3; --nav-submenu-background-color: #99b8c2; --nav-text-color: #253341; --nav-highlight-color: white; --nav-padding: 40px; --header-background-color: #406080; --header-title-color: #17a895; --header-text-color: white; --content-light-background-color: white; --content-background-color: #ebeff3; --input-background-color: white; --input-text-color: #253341; --input-placeholder-text-color: #939ba2; --input-hover-outline-color: #b2b7bc; --input-active-outline-color: #253341; --system-button-background-color: #77b0c3; --system-button-text-color: white; --system-button-hover-outline-color: #b2b7bc; --system-button-active-outline-color: #406080; --padding-primary: 132px; --padding-secondary: 234px; --footer-background-color: #19222b; --footer-title-color: white; --footer-text-color: #d3dde6; --footer-link-color: #77b0c3; --footer-highlight-color: white; --home-header-image: ''; --home-header-image-half: ''; --home-header-image-portrait: ''; --home-header-scrim-color: rgba(38,62,87,.85); --home-header-scrim-transparent-color: rgba(38,62,87,0); --home-page-transition: all .75s ease; --resipher-header-image: ''; --resipher-header-image-half: ''; --resipher-header-image-portrait: ''; --content-block-gap: 60px; --content-caption-color: #406080; --content-date-color: #77b0c3; --paragraph-text-color: #406080; --spec-border-color: rgba(211,221,230,.75); --toggle-text-color: #939ba2; --toggle-text-highlight-color: #fff; --toggle-slider-color: #77b0c3; --text-translate-x: -40px; } html, body { margin: 0; padding: 0; overflow-x: hidden; font-family: 'BarlowRegular'; font-size: 17px; line-height: 23px; width: 100vw; color: var(--default-text-color); background-color: white; } html { overscroll-behavior-y: none; } p { margin: 0; padding: 0; } textarea { resize: none; } a { text-decoration: none; cursor: pointer; } #background-container { position: fixed; left: 0; top: 0; width: 100vw; height: var(--vh); } html[data-view="home"] #background-container { background-color: #fbfbfb; } #view-container { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; width: 100vw; } #home-view, #resipher-view, #ocr-view, #resources-view, #products-view, #about-view { display: none; } .content-section { width: 100vw; box-sizing: border-box; } html[data-view="home"] #home-view, html[data-view="resipher"] #resipher-view, html[data-view="ocr"] #ocr-view, html[data-view="resources"] #resources-view, html[data-view="notebook"] #resources-view, html[data-view="products"] #products-view, html[data-view="about"] #about-view { display: flex; flex-direction: column; } #file-download-anchor { display: none; } input, select, textarea { height: 40px; line-height: 50px; box-sizing: border-box; border-radius: 8px; outline: none; border: none; background-color: var(--input-background-color); color: var(--input-text-color); font-family: 'BarlowRegular'; font-size: 17px; } input:hover, select:hover, textarea:hover { box-shadow: 0 0 0 2px var(--input-hover-outline-color); } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--input-active-outline-color); } input::-webkit-calendar-picker-indicator { opacity: 0; } input::-webkit-list-button { opacity: 0; } input::placeholder { color: var(--input-placeholder-text-color); } textarea::placeholder { color: var(--input-placeholder-text-color); } input, select, textarea { padding: 0 12px 2px 12px; } select { appearance: none; background-image: url('../assets/images/icon_down_caret_blue.png'); background-position: right 14px center; background-repeat: no-repeat; background-size: 14px 8px; cursor: pointer; line-height: 40px; } select.placeholder { color: var(--input-placeholder-text-color); } .company-name { white-space: nowrap; } .highlight-text { color: var(--highlight-text-color); /* font-family: 'BarlowSemiBold'; */ font-family: 'BarlowLight'; } #resipher-header .highlight-text { color: var(--header-highlight-text-color); } .title { color: var(--title-text-color); font-size: 32px; line-height: 32px; height: 32px; } .subtitle { color: var(--title-text-color); font-size: 24px; line-height: 24px; } .system-button, .link-button { display: inline-block; height: 60px; line-height: 60px; width: auto; padding: 0 16px; border-radius: 8px; background-color: var(--system-button-background-color); color: var(--system-button-text-color); font-family: 'BarlowMedium'; font-size: 18px; text-align: center; cursor: pointer; box-sizing: border-box; } @media (min-width: 769px) { .system-button:hover, .link-button:hover { box-shadow: 0 0 0 2px var(--system-button-hover-outline-color); } } .system-button:active, .link-button:active { box-shadow: 0 0 0 2px var(--system-button-active-outline-color); } .link-button { background-color: #17a895; } .desktop, .mobile { white-space: pre-wrap; } .desktop { display: inline-block; } .mobile { display: none; height: 0; } .no-transition { transition: none !important; } /* Loader */ #loading-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: var(--vh); background-color: #19222b; z-index: 21; transition: opacity .5s ease; opacity: 1; } #loading-overlay.hide { opacity: 0; pointer-events: none; } #loading-overlay-logo { background: linear-gradient(-45deg, #17a895, #387c8f, #406080, #387c8f, #17a895, #387c8f, #406080); background-size: 450px 498px; width: 150px; height: 166px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mask-image: url('../assets/images/logo_white_loading.png'); mask-size: 150px 166px; mask-position: center; mask-repeat: no-repeat; animation: gradient 3s linear infinite, pulse 3s linear infinite; } #loading-overlay.hide #loading-overlay-logo { animation: none; } @keyframes gradient { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } } #hubspot-messages-iframe-container { opacity: 0; right: unset !important; left: 0 !important; transition: opacity .5s; } #hubspot-messages-iframe-container.show { opacity: 1; } .icon { width: 20px; height: 20px; background-color: var(--system-button-text-color); mask-size: auto 20px; mask-position: center; mask-repeat: no-repeat; cursor: pointer; } /* Nav Menu */ #nav-menu { position: fixed; width: calc(100vw - 2 * var(--nav-padding)); height: var(--nav-height); left: 0; top: 0; padding: 0 var(--nav-padding); display: flex; background-color: var(--nav-background-color); text-align: center; font-size: 16px; color: var(--nav-text-color); z-index: 20; font-family: 'BarlowSemiCondensed-Medium'; filter: drop-shadow(0 -4px 8px rgba(0,0,0,.8)); user-select: none; transition: all .5s ease; } #nav-menu-scrim { position: absolute; width: 100vw; height: calc(var(--vh) - var(--nav-height)); top: var(--nav-height); left: 0; background-color: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; } #nav-title { display: flex; flex-grow: 1; gap: 12px; align-items: center; font-size: 18px; font-family: 'BarlowBold'; color: white; cursor: pointer; box-sizing: border-box; } #nav-title .logo { width: 28px; height: 32px; background-image: url('../assets/images/logo_gradient.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } #nav-showhide-button { visibility: hidden; } .showhide-button { position: absolute; right: 0; height: var(--nav-height); width: 79px; pointer-events: none; cursor: pointer; } .showhide-button-line { position: absolute; width: 23px; height: 2px; right: 20px; background-color: var(--nav-text-color); transform-origin: center; transition: all .25s ease; } .showhide-button-line1 { top: 17px; } .showhide-button-line2 { top: 24px; } .showhide-button-line3 { top: 31px; } #nav-menu.show .showhide-button .showhide-button-line1 { top: 28px; height: 1px; transform: rotate(45deg); } #nav-menu.show .showhide-button .showhide-button-line2 { opacity: 0; } #nav-menu.show .showhide-button .showhide-button-line3 { top: 28px; height: 1px; transform: rotate(-45deg); } #nav-button-container-wrapper { background-color: var(--nav-background-color); transition: all .5s ease; } #nav-button-container { height: var(--nav-height); display: flex; align-items: center; gap: 40px; transition: all .5s ease; } .nav-button, .nav-mobile-button, #nav-submenus-container { font-family: 'BarlowSemiCondensed-Medium'; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; } .nav-button, .nav-mobile-button { cursor: pointer; color: var(--nav-text-color); /* transition: color .33s ease; */ } .nav-button.selected { color: var(--nav-highlight-color); } @media (min-width: 769px) { .nav-button:hover { color: var(--nav-highlight-color); } } .nav-button { display: flex; height: var(--nav-height); align-items: center; } .nav-mobile-button { display: none; } html[data-view="resipher"] .nav-button[data-id="resipher"], html[data-view="ocr"] .nav-button[data-id="ocr"], html[data-view="resources"] .nav-button[data-id="resources"], html[data-view="notebook"] .nav-button[data-id="resources"], html[data-view="products"] .nav-button[data-id="products"], html[data-view="about"] .nav-button[data-id="about"] { color: var(--nav-highlight-color); } #nav-submenus-container { position: fixed; top: var(--nav-height); left: 0; width: 100vw; height: var(--vh); overflow: hidden; pointer-events: none; } .nav-submenu { position: absolute; display: flex; flex-direction: column; gap: 20px; padding: 32px; background-color: var(--nav-background-color); text-align: left; transform: translateY(calc(-100% - 20px)); transition: transform .25s ease; border-radius: 0 0 12px 12px; box-sizing: border-box; pointer-events: auto; filter: drop-shadow(0px 0px 3px black); user-select: none; } .nav-submenu.show { transform: translateY(0); } #nav-submenu-tab { position: absolute; background-color: var(--nav-background-color); height: 8px; top: calc(var(--nav-height) - 8px); opacity: 0; transition: opacity .25s ease; } #nav-submenu-tab.show { opacity: 1; } .nav-submenu-item, .nav-submenu-secondary-item { cursor: pointer; color: var(--default-text-color); } .nav-submenu-item:hover, .nav-submenu-secondary-item:hover, .nav-submenu-item:active, .nav-submenu-secondary-item:active { color: var(--nav-highlight-color); } .nav-submenu-secondary-item { margin-left: 20px; font-size: 18px; } .nav-mobile-submenu-item { display: none; color: var(--default-text-color); } /* Header */ .header-container { position: relative; --header-element-delay: .25s } .header-content { position: relative; width: 100vw; height: 100%; background-image: url(../assets/images/header_background.jpg); background-size: cover; background-position: center bottom; } .header-item { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0 var(--padding-primary); box-sizing: border-box; gap: 80px; left: 0; top: 0; width: 100vw; height: 100%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: all .5s ease; pointer-events: none; } .header-item.show { opacity: 1; pointer-events: all; } .header-item[data-style="key-point-img-left"] { flex-direction: row-reverse; } .header-title { width: 100%; font-family: 'BarlowLight'; font-size: 66px; line-height: 66px; color: var(--header-title-color); text-align: center; } .header-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; max-width: 400px; font-family: 'BarlowMedium'; font-size: 21px; line-height: 29px; color: var(--header-text-color); transform: translateX(var(--text-translate-x)); opacity: 0; transition: all .5s ease; } .header-item.show .header-caption { transform: none; opacity: 1; transition: all .5s ease var(--header-element-delay); } .header-text-container { display: flex; flex-direction: column; justify-content: center; top: 0; left: 0; height: 100%; box-sizing: border-box; transition: all .5s ease; } .header-item .system-button { opacity: 0; transition: opacity .5s ease, box-shadow .25s; } .header-item.show .system-button { opacity: 1; transition: opacity .5s ease calc(2 * var(--header-element-delay)), box-shadow .25s; } .header-text { font-family: 'BarlowRegular'; font-size: 48px; line-height: 54px; color: white; transform: translateX(var(--text-translate-x)); opacity: 0; transition: all .5s ease; } .header-item.show .header-text { transform: none; opacity: 1; transition: all .5s ease var(--header-element-delay); } .header-image { width: 25vw; height: auto; object-fit: cover; opacity: 0; transition: all .5s ease; } .header-item.show .header-image { opacity: 1; transition: all .5s ease calc(2 * var(--header-element-delay)); } /* Home */ html[data-view="home"] { overflow-y: hidden; } html[data-view="home"] #view-container { transition: var(--home-page-transition); } html[data-view="home"][data-block-index="1"] #view-container { transform: translateY(calc(-1 * var(--vh))); } html[data-view="home"][data-block-index="2"] #view-container { transform: translateY(calc(-2 * var(--vh))); } html[data-view="home"][data-block-index="3"] #view-container { transform: translateY(calc(-3 * var(--vh))); } html[data-view="home"][data-block-index="4"] #view-container { transform: translateY(calc(-4 * var(--vh))); } html[data-view="home"][data-block-index="5"] #view-container { transform: translateY(calc(-5 * var(--vh))); } html[data-view="home"][data-block-index="6"] #view-container { transform: translateY(calc(-6 * var(--vh))); } html[data-view="home"][data-block-index="7"] #view-container { transform: translateY(calc(-7 * var(--vh))); } html[data-view="home"][data-block-index="8"] #view-container { transform: translateY(calc(-8 * var(--vh))); } html[data-view="home"][data-block-index="9"] #view-container { transform: translateY(calc(-9 * var(--vh))); } #background-particles { position: absolute; left: 0; top: 0; width: 100%; height: calc(4 * var(--vh)); opacity: 0; /* transition: var(--home-page-transition); */ --background-particles-height-divisor: 4; } html[data-view="home"] #background-particles, html[data-view="about"] #background-particles { opacity: .1; } html[data-view="home"] #background-particles, html[data-view="home"] #background-particles.dim { transition: var(--home-page-transition); } html[data-view="home"][data-block-index="1"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 1 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="2"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 2 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="3"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 3 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="4"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 4 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="5"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 5 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="6"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 6 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="7"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 7 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="8"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 8 / var(--background-particles-height-divisor))) } html[data-view="home"][data-block-index="9"] #background-particles { transform: translateY(calc(-1 * var(--vh) * 9 / var(--background-particles-height-divisor))) } #home-landing { background-image: url(../assets/images/home_01_background_v2.jpg); background-size: cover; background-position: center bottom; background-repeat: no-repeat; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0)); } #home-landing-paragraph, #home-landing-line-1, #home-landing-line-2 { position: absolute; font-size: 62px; line-height: 70px; font-family: 'BarlowLight'; color: #19222b; } #home-landing-line-1 { right: 45vw; top: 38vh; } #home-landing-line-2 { top: 45vh; left: 45vw; } .home-headline { display: flex; flex-direction: column; font-size: 36px; line-height: 44px; font-family: 'BarlowRegular'; } .home-headline-line { opacity: 0; transform: translateX(var(--text-translate-x)); transition: all .5s ease; } .content-block.show .home-headline-line { opacity: 1; transform: none; transition: opacity 1s ease, transform .5s ease; } .content-block.show .home-headline-line:nth-child(2) { transition: opacity 1s ease .1s, transform .5s ease .1s; } .content-block.show .home-headline-line:nth-child(3) { transition: opacity 1s ease .2s, transform .5s ease .2s; } .content-block.show .home-headline-line:nth-child(4) { transition: opacity 1s ease .3s, transform .5s ease .3s; } .content-block.show .home-headline-line:nth-child(5) { transition: opacity 1s ease .4s, transform .5s ease .4s; } .content-block.show .home-headline-line:nth-child(6) { transition: opacity 1s ease .5s, transform .5s ease .5s; } .content-block.show .home-headline-line:nth-child(8) { transition: opacity 1s ease .6s, transform .5s ease .6s; } .home-headline-bullet { display: flex; align-items: center; gap: 12px; padding-left: 40px; font-size: 26px; line-height: 34px; padding-top: 18px; } .home-headline-bullet::before { content: '—'; color: #17a895; font-weight: bolder; } #home-ocr-headline .home-headline-bullet:nth-child(2) { margin-top: 20px; } #home-ocr-button { margin-left: 40px; } .resipher { display: inline-block; font-family: 'BarlowSemiBold'; color: #17a895; } .headline .resipher { font-family: 'BarlowBold'; } #home-intro, #home-ocr, #home-setup { flex-direction: row; gap: 60px; padding: 0 var(--padding-primary); } #home-intro-video, #home-ocr-image, #home-setup-video { width: 30vw; height: auto; object-fit: contain; opacity: 0; transition: all 1s ease; } .content-block.show #home-intro-video, .content-block.show #home-ocr-image, .content-block.show #home-setup-video { opacity: 1; } #home-intro-headline, #home-ocr-headline, #home-setup-headline { width: calc(100% - 30vw - 60px); } #home-ocr-image { width: 40vw; } #home-showcase-graphic{ position: absolute; /*width: 40vw; */ height: 38vh; min-width:200px; flex-direction: row; gap: 60px; top: 8vh; right: 1vw; display: flex; justify-content: center; align-items: center; padding-top:12px; } #home-ocr-headline { width: calc(100% - 40vw - 60px); } #home-ocr.show .home-link-button { opacity: 1; transition: opacity .5s ease 1s, background-color .25s, color .25s; } .home-link-button { padding: 4px 20px; border-radius: 8px; background-color: white; border: 2px solid #17a895; color: #17a895; font-family: 'BarlowMedium'; font-size: 20px; line-height: 40px; width: fit-content; margin-top: 32px; opacity: 0; transition: opacity .5s ease, background-color .25s, color .25s; cursor: pointer; } .content-block.show .home-link-button { opacity: 1; transition: opacity .5s ease .7s, background-color .25s, color .25s; } .home-link-button:hover { background-color: #17a895; color: white; } #home-pagination { display: none; position: absolute; right: 0; bottom: 26px; height: var(--vh); flex-direction: column; padding-right: 26px; justify-content: flex-end; align-items: center; opacity: .75; pointer-events: none; } html[data-view="home"] #home-pagination { display: flex; } .home-pagination-page-wrapper { height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; pointer-events: all; } .home-pagination-page { width: 16px; height: 4px; background-color: #A1ACB7; transition: var(--home-page-transition); cursor: pointer; } html[data-view="home"][data-block-index="0"] .home-pagination-page-wrapper[data-index="0"] .home-pagination-page, html[data-view="home"][data-block-index="1"] .home-pagination-page-wrapper[data-index="1"] .home-pagination-page, html[data-view="home"][data-block-index="2"] .home-pagination-page-wrapper[data-index="2"] .home-pagination-page, html[data-view="home"][data-block-index="3"] .home-pagination-page-wrapper[data-index="3"] .home-pagination-page, html[data-view="home"][data-block-index="4"] .home-pagination-page-wrapper[data-index="4"] .home-pagination-page, html[data-view="home"][data-block-index="5"] .home-pagination-page-wrapper[data-index="5"] .home-pagination-page, html[data-view="home"][data-block-index="6"] .home-pagination-page-wrapper[data-index="6"] .home-pagination-page, html[data-view="home"][data-block-index="7"] .home-pagination-page-wrapper[data-index="7"] .home-pagination-page, html[data-view="home"][data-block-index="8"] .home-pagination-page-wrapper[data-index="8"] .home-pagination-page, html[data-view="home"][data-block-index="9"] .home-pagination-page-wrapper[data-index="9"] .home-pagination-page { background-color: #17a895; transform: scale(1.7); } #home-testimonials-container { position: absolute; left: 0; top: 0; height: 100%; display: flex; transition: all 1s ease; } .content-block[data-index="1"] #home-testimonials-container { transform: translateX(-100vw); } .content-block[data-index="2"] #home-testimonials-container { transform: translateX(-200vw); } .content-block[data-index="3"] #home-testimonials-container { transform: translateX(-300vw); } #home-testimonials-button-left, #home-testimonials-button-right { position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; top: 50%; transform: translateY(-50%); transition: opacity .5s, transform .25s ease; background-repeat: no-repeat; background-color: white; border: 1px solid #A1ACB7; border-radius: 50%; cursor: pointer; transition: transform .25s ease; } #home-testimonials-button-left:hover, #home-testimonials-button-right:hover { transform: translateY(-50%) scale(1.3); } #home-testimonials-button-left .icon, #home-testimonials-button-right .icon { width: 10px; height: 18px; background-color: #A1ACB7; } #home-testimonials-button-left { background-position: 14px; left: 20px; } #home-testimonials-button-left .icon { mask-image: url(../assets/images/icon_caret_left.png); } #home-testimonials-button-right { background-position: 16px; right: 20px; } #home-testimonials-button-right .icon { mask-image: url(../assets/images/icon_caret_right.png); } .home-testimonial { width: 100vw; height: 100%; display: flex; justify-content: center; padding: 0 var(--padding-secondary); box-sizing: border-box; gap: 60px; } .home-testimonial-author-container { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .home-testimonial-author-image { width: 200px; height: auto; opacity: 0; transition: all .5s ease; } .home-testimonial.show .home-testimonial-author-image { opacity: 1; } .home-testimonial-author { display: flex; flex-direction: column; font-size: 22px; line-height: 25px; } .home-testimonial-author-info { font-size: 12px; line-height: 15px; } .home-testimonial-author div { opacity: 0; transform: translateX(calc(var(--text-translate-x) * .5)); transition: all .5s ease; } .home-testimonial.show .home-testimonial-author div { opacity: 1; transform: none; } .home-testimonial.show .home-testimonial-author div:nth-child(2) { transition-delay: .1s; } .home-testimonial.show .home-testimonial-author div:nth-child(3) { transition-delay: .2s; } .home-testimonial.show .home-testimonial-author div:nth-child(4) { transition-delay: .3s; } .home-testimonial-author-name { font-family: 'BarlowMedium'; } .home-testimonial-quote-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 40px; } .home-testimonial-quote { font-family: 'BarlowLight'; font-size: 24px; line-height: 38px; opacity: 0; transform: translateX(var(--text-translate-x)); transition: all .5s ease; } .home-testimonial.show .home-testimonial-quote { opacity: 1; transform: none; transition-delay: .4s; } .home-testimonial-open-quote, .home-testimonial-close-quote { width: auto; height: 24px; } .home-testimonial-open-quote { position: absolute; transform: translate(-120%, -25%); } .home-testimonial-close-quote { transform: translate(25%, -25%); } .home-testimonial-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 40px; color: #17a895; font-size: 24px; opacity: 0; transition: all .5s ease; } .home-testimonial.show .home-testimonial-buttons { opacity: 1; transition-delay: 1s; } .home-testimonial-link { color: #17a895; box-shadow: 0 2px #17a895; padding-bottom: 4px; cursor: pointer; transition: all .25s ease; } .home-testimonial-link:hover { box-shadow: 0 4px #17a895; } #home-testimonials-pagination { position: absolute; bottom: 20px; width: 100vw; display: flex; align-items: center; justify-content: center; gap: 40px; opacity: 0; transition: all 1s ease; } .content-block.show #home-testimonials-pagination { opacity: 1; } .home-testimonials-pagination-dot { width: 10px; height: 10px; border-radius: 50%; /* background-color: #d3d3d3; */ box-shadow: 0 0 0 2px #d3d3d3; transition: all .25s; cursor: pointer; } #home-testimonials[data-index="0"] .home-testimonials-pagination-dot:nth-child(1), #home-testimonials[data-index="1"] .home-testimonials-pagination-dot:nth-child(2), #home-testimonials[data-index="2"] .home-testimonials-pagination-dot:nth-child(3), #home-testimonials[data-index="3"] .home-testimonials-pagination-dot:nth-child(4), #home-testimonials[data-index="4"] .home-testimonials-pagination-dot:nth-child(5), #home-testimonials[data-index="5"] .home-testimonials-pagination-dot:nth-child(6), #home-testimonials[data-index="6"] .home-testimonials-pagination-dot:nth-child(7), #home-testimonials[data-index="7"] .home-testimonials-pagination-dot:nth-child(8), #home-testimonials[data-index="8"] .home-testimonials-pagination-dot:nth-child(9) { background-color: #17a895; box-shadow: 0 0 0 2px #17a895; transform: scale(1.25); } /* Resipher */ #resipher-header { position: relative; width: 100vw; background-color: var(--header-background-color); background-size: cover; background-repeat: no-repeat; height: calc(100vw * 782 / 2400 + var(--nav-height)); } #resipher-header .system-button:hover { box-shadow: 0 0 0 4px white; } #resipher-header-hero { height: calc(100vw * 782 / 2400 + var(--nav-height)); background-size: cover; background-position: center bottom; background-image: url(../assets/images/background_bars_medblue.jpg); transition: none; } #resipher-header-purchase-button, #resipher-header-trial-button { height: 40px; line-height: 40px; padding: 0 16px; } #resipher-header-purchase-button { background-color: #17a895; } #resipher-spinning-video { width: 30vw; height: auto; } #resipher-content .headline-wrapper { display: flex; align-items: center; justify-content: center; padding: calc(var(--padding-primary) / 2) var(--padding-primary); background: linear-gradient(to top, var(--content-background-color), white); } #resipher-content .headline { width: 100%; font-size: 26px; line-height: 36px; text-align: left; } #resipher-overview { background-color: var(--content-background-color); padding-top: 40px; } #resipher-specs { background-color: var(--content-background-color); flex-direction: column; align-items: center; gap: 0; } #resipher-specs-dimensions { justify-content: center; margin: var(--content-block-gap) 0; } #resipher-specs-dimensions .media { width: 40vw; padding: 40px; object-fit: contain; background: white; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.25); } /* Why OCR? */ #ocr-content .headline-wrapper { background: linear-gradient(to bottom, var(--content-background-color), var(--content-background-color) 80%, white); } #ocr-content .content-block { padding: calc(var(--padding-primary) / 2) var(--padding-primary); gap: calc(var(--content-block-gap) / 2) var(--content-block-gap); } #ocr-content .content-block .caption { padding: 0; } #ocr-applications-header { padding-top: var(--padding-primary); } #ocr-resipher-benefits { background-color: var(--content-background-color); } #ocr-content .content-item-text { gap: 16px; } #ocr-content .content-block-title { font-size: 28px; line-height: 32px; font-family: 'BarlowLight'; text-align: center; padding: 0 4px 8px; box-shadow: 0 1px #17a895; } #ocr-content .content-block-description { margin-bottom: 20px; } #ocr-content .title { height: unset; font-size: 20px; line-height: 24px; letter-spacing: 1px; text-align: left; font-family: 'BarlowMedium'; text-transform: uppercase; color: #17a895; } #ocr-content .text { font-size: 23px; line-height: 31px; } #ocr-content .publication-category-link { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .25s; box-sizing: border-box; } #ocr-content .publication-category-link:hover { box-shadow: 0 0 0 1px #17a895; } #ocr-content .publication-category-link .icon { width: 30px; height: 30px; mask-image: url(../assets/images/icon_publications.png); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background-color: #17a895; cursor: pointer; } /* Resources */ #resources-view { position: static; } #resources-header { position: relative; display: flex; justify-content: center; width: 100vw; background-color: var(--content-background-color); } #resources-view .content-block { padding: 100px var(--padding-primary); } #resources-content .video-container { filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5)); } #resources-publications { flex-direction: column; background-color: var(--content-background-color); } #publications { padding: 0 !important; } .list-filters { display: flex; gap: 20px; } #publication-selected-categories { display: flex; flex-direction: column; gap: 8px; } .publication-selected-category { width: fit-content; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #77b0c3; padding: 0 14px; gap: 8px; border-radius: 12px; background-color: white; cursor: pointer; user-select: none; } .publication-selected-category .icon { width: 12px; height: 12px; background-color: #d3d3d3; mask-image: url('../assets/images/icon_x.png'); } #publication-search-container { display: flex; gap: 8px; align-items: center; height: 38px; } #publication-search-icon { background-color: var(--title-text-color); mask-image: url('../assets/images/icon_search.png'); } #publication-search-input, #publication-category-select { height: 38px; line-height: 38px; } #publication-category-select option[value="placeholder"] { color: var(--input-placeholder-text-color); } #publication-filter-clear-button { display: none; height: 34px; line-height: 34px; font-size: 17px; padding: 0 12px; } #publication-filter-clear-button.show { display: block; } #publications-list { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; } .publication { position: relative; display: none !important; overflow: hidden; } .publication.show { display: flex !important; } .publication.featured { box-shadow: 0 0 0 4px #17a895; } .featured-tag { position: absolute; width: 100%; font-size: 10px; line-height: 14px; color: #17a895; text-align: center; top: 0; left: 0; color: white; text-transform: uppercase; background-color: #17a895; font-family: 'BarlowSemiBold'; letter-spacing: 2px; padding-bottom: 4px; } .publication-header { flex-wrap: wrap; } .publication-categories { font-size: 12px; line-height: 16px; color: #77b0c3; } .publication-cell-lines { font-size: 12px; line-height: 12px; color: #17a895; font-family: 'BarlowMedium'; } .publication-overlay-title { font-family: 'BarlowMedium'; font-size: 32px; line-height: 36px; width: 80%; color: #17a895; } .publication-overlay-citation { font-family: 'BarlowLight'; font-size: 14px; line-height: 17px; width: 80%; } #resources-howtovideos { background-color: white; } #resources-documentation, #resources-notebook { background-color: var(--content-background-color); } #resources-documentation .title { margin-bottom: 40px; } #resources-documentation .link-list { justify-content: center; } #resources-publications .content-list-item .title, #publications .content-list-item .title { height: unset; font-size: 18px; line-height: 32px; flex-grow: 1; } #resources-publications .content-list-item, #publications .content-list-item { width: calc((100% - 2 * 20px) / 3); } #resources-publications .link-container, #publications .link-container { justify-content: flex-start; } /* Notebook */ #notebook-view { position: fixed; width: 100vw; left: 0; top: var(--nav-height); height: calc(var(--vh) - var(--nav-height)); z-index: 1; pointer-events: none; } html[data-view="notebook"] #notebook-view { pointer-events: all; } #notebook-iframe { position: absolute; width: 100vw; top: var(--nav-height); left: 100vw; top: 0; height: calc(var(--vh) - var(--nav-height)); background-color: white; transition: all .5s ease; } html[data-view="notebook"] #notebook-iframe { transform: translateX(-100vw); } #notebook-back-button { position: absolute; top: calc(var(--nav-height) * 2); left: 0; padding: 0 40px 0 48px; border-radius: 0 20px 20px 0; transform: translateX(-100%); transition: all .25s ease, transform .25s ease; z-index: 2; color: var(--title-text-color); background-color: var(--content-background-color); background-image: url(../assets/images/icon_caret_left_blue.png); background-size: auto 18px; background-repeat: no-repeat; background-position: center left 20px; } html[data-view="notebook"] #notebook-back-button { transform: translateX(0); transition: all .25s ease, transform .25s ease .5s; } #notebook-back-button::after { content: 'Back'; } /* Products */ #products-view { padding-top: 100px; gap: var(--content-block-gap); } #products-content { width: 100%; display: flex; flex-direction: column; } #products-content .content-block:first-child { padding-top: 40px; } #products-view .system-button { width: fit-content; margin-top: 20px; height: 40px; line-height: 40px; padding: 0 16px; } #products-content .media-caption { display: flex; flex-direction: column; } #products-content .content-block[data-style="Alternating Cards"] .media-wrapper:nth-child(even) .media-caption { align-items: flex-end; text-align: right; } #products-content .media { width: 46%; } .product-description .system-button { display: block; width: fit-content; } /* About */ #about-view { align-items: center; --about-leadership-gap: 1vw; } #about-content { width: 100%; padding: 48px calc(var(--padding-primary) / 2); display: flex; flex-direction: column; gap: 32px; } #about-mission { flex-direction: column; align-items: center; flex-wrap: unset; height: var(--vh); } #about-mission .content-block-description { display: flex; align-items: center; font-size: 28px; line-height: calc(36px + 12 * var(--vh) / 1080); font-family: 'BarlowLight'; flex-grow: 1; } #about-leadership-team, #about-leadership-board { display: flex; align-items: flex-start; justify-content: center; padding: 0 var(--padding-primary); gap: calc(2 * var(--about-leadership-gap)); } #about-content .text-item[data-style="Section Title"] { width: 100%; justify-content: center; } .person-wrapper { position: relative; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(calc(var(--text-translate-x) * .5)); transition: all .5s ease; } .content-block.show .person-wrapper { opacity: 1; transform: none; } .content-block.show .person-wrapper:nth-child(2) { transition-delay: .05s; } .content-block.show .person-wrapper:nth-child(3) { transition-delay: .1s; } .content-block.show .person-wrapper:nth-child(4) { transition-delay: .15s; } .content-block.show .person-wrapper:nth-child(5) { transition-delay: .2s; } .content-block.show .person-wrapper:nth-child(6) { transition-delay: .25s; } .content-block.show .person-wrapper:nth-child(7) { transition-delay: .3s; } .content-block.show .person-wrapper:nth-child(8) { transition-delay: .35s; } .content-block.show .person-wrapper:nth-child(9) { transition-delay: .4s; } .content-block.show .person-wrapper:nth-child(10) { transition-delay: .45s; } .content-block.show .person-wrapper:nth-child(11) { transition-delay: .5s; } .person-img { width: 200px; height: 200px; object-fit: cover; object-position: center; box-shadow: 0 0px 4px 2px rgba(0, 0, 0, .5); border-radius: 4px; filter: grayscale(1); } .about-leader-footer { display: flex; } .person-name-container { display: flex; flex-direction: column; align-items: center; } .person-name { font-family: 'BarlowSemiBold'; } .person-links { position: absolute; top: 176px; right: 4px; display: flex; align-items: center; flex-direction: row-reverse; gap: 8px; } .person-link { width: 20px; height: 20px; mask-size: cover; mask-position: center; background-color: white; cursor: pointer; } .person-link.gray { background-color: #d3dde6; } .person-link.dark { background-color: #19222b; } .person-link[data-type="LinkedIn"] { mask-image: url(../assets/images/icon_linkedin.png); } .person-link[data-type="bio"] { mask-image: url(../assets/images/icon_bio.png); } /* Footer */ #footer { display: flex; flex-direction: column; justify-content: flex-end; align-items: normal; gap: 20px; padding: var(--nav-height) var(--nav-padding) var(--nav-height) var(--nav-padding); background-color: var(--footer-background-color); color: var(--footer-text-color); } /* html[data-view="home"] #footer { mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(100% - var(--nav-height)), rgba(0, 0, 0, 0)); } */ #footer-wrapper { display: flex; gap: 40px; } .footer-content { display: flex; align-items: center; justify-content: center; } #footer-info { font-size: 16px; font-family: 'BarlowMedium'; line-height: 22px; gap: 40px; } #footer-contact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; flex-grow: 1; padding: 0 var(--padding-secondary); } #contact-title { color: white; } #contact-form-container-connect { display: flex; gap: 16px; } .contact-form-container { width: 100%; } .contact-form-container-left, .contact-form-container-right { width: 50%; display: flex; flex-direction: column; gap: 8px; } .contact-form-element { display: block; width: 100%; } .contact-form-select-container { display: flex; width: 100%; gap: 12px; align-items: center; } .contact-form-select-container select { flex-grow: 1; } #contact-form-message { height: 100px; } #contact-form-order-product-other, #contact-form-order-plate-other { width: 100%; display: none; } #contact-form-order-product-other.show, #contact-form-order-plate-other.show { display: block; } #contact-form-submit-container { width: 100%; text-align: center; } #contact-form-error, #contact-form-success { display: none; font-family: 'BarlowSemiBold'; } #contact-form-error { color: #f03636; } #contact-form-success { color: #17a851; } #contact-form-submit-container.error #contact-form-error, #contact-form-submit-container.success #contact-form-success { display: block; margin-bottom: 20px; } #contact-form-submit-button { padding: 0 40px; } .contact-form-multiple-choice { display: flex; align-items: center; gap: 12px; height: 40px; box-sizing: border-box; } .contact-form-choice { display: flex; align-items: center; gap: 4px; cursor: pointer; } .checkbox-container { cursor: pointer; display: flex; } .checkbox-background { display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 2px; border: 2px solid #17a895; box-sizing: border-box; background-size: auto 9px; background-position: center; background-repeat: no-repeat; } .checkbox-container.checked .checkbox-background { background-color: #17a895; background-image: url('../assets/images/icon_checkmark_white.png'); } #contact-form-structure-other { display: none; } #contact-form-structure-other.show { display: block; } #footer a { color: var(--footer-link-color); cursor: pointer; } #footer a:hover, #footer a:active { color: var(--footer-highlight-color); } #footer .logo { display: inline-block; height: 50px; width: auto; } #footer-company { font-family: 'BarlowBold'; color: var(--footer-title-color); } #footer-privacy-container { width: 100%; font-family: 'BarlowRegular'; font-size: 16px; text-align: center; color: var(--footer-text-color); } #footer-privacy { color: var(--footer-text-color); } #footer-privacy-container .divider { padding: 0 12px; } #footer-info-company-container, #footer-info-contact-container { display: flex; flex-direction: column; } #footer-social-container { display: flex; align-items: center; gap: 24px; } .footer-social-button { display: inline-block; width: 50px; height: 50px; border: none; background-color: var(--system-button-background-color); border-radius: 50%; } .footer-social-button:last-child { margin-right: 0; } @media (min-width: 769px) { .footer-social-button:hover { box-shadow: 0 0 0 2px var(--footer-highlight-color); } } .footer-social-button:active { box-shadow: 0 0 0 2px var(--footer-highlight-color); } .footer-social-button .icon { display: block; width: 50px; height: 50px; background-color: var(--system-button-text-color); mask-size: auto 27px; mask-position: center; mask-repeat: no-repeat; cursor: pointer; } #footer-social-button-facebook .icon { mask-image: url('../assets/images/icon_facebook.png'); } #footer-social-button-linkedin .icon { mask-image: url('../assets/images/icon_linkedin.png'); } #footer-social-button-twitter .icon { mask-image: url('../assets/images/icon_twitter.png'); } #footer-social-button-instagram .icon { mask-image: url('../assets/images/icon_instagram.png'); } /* Content */ .media-wrapper { width: 100%; display: flex; } .content-block[data-style="Cards"] .media-wrapper { flex-direction: column; align-items: center; gap: 40px; width: calc((100vw - var(--content-block-gap) - 2* var(--padding-primary)) / 2); } .content-block[data-style="Alternating Cards"] .media-wrapper { flex-wrap: nowrap; align-items: center; gap: calc(var(--padding-primary) / 2); } .content-block[data-style="Alternating Cards"] .media-wrapper:nth-child(even) { flex-direction: row-reverse; } .media { border-radius: 12px; } .content-block[data-style="Cards"] .media { width: 100%; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .25); } .content-block[data-style="Alternating Cards"] .media { width: 30vw; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.25); } .media-title { color: var(--title-text-color); font-size: 32px; line-height: 32px; height: 32px; } .media-caption { width: 100%; color: var(--content-caption-color); font-family: 'BarlowRegular'; box-sizing: border-box; } .content-block[data-style="Cards"] .media-caption { font-size: 17px; line-height: 25px; padding: 0 32px; } .content-block[data-style="Alternating Cards"] .media-caption { flex-grow: 1; font-size: 22px; line-height: 34px; } .text-item { display: flex; align-items: center; gap: 20px; } .text-item[data-style="Spec"] { width: 100%; justify-content: center; border-top: 1px solid var(--spec-border-color); padding: 20px; gap: 40px; } .text-item[data-style="Spec"] .text-item-primary { width: 35%; text-align: right; font-family: 'BarlowMedium'; } .text-item[data-style="Spec"] .text-item-secondary { width: 65%; text-align: left; } .text-item[data-style="Section Title"] { text-transform: uppercase; font-family: 'BarlowMedium'; color: #17a895; letter-spacing: 1px; font-size: 22px; text-align: center; opacity: 0; transform: translateX(var(--text-translate-x)); transition: all .5s ease; } .content-block.show .text-item[data-style="Section Title"] { opacity: 1; transform: none; } .content-subheading { display: flex; flex-direction: column; justify-content: start; box-sizing: border-box; font-family: 'BarlowSemiBold'; font-size: 18px; line-height: 18px; color: #17a895; text-transform: uppercase; } .video-play-button .icon { display: block; background-color: var(--content-caption-color); mask-position: center; mask-repeat: no-repeat; cursor: pointer; } .video-container { position: relative; width: calc((100vw - var(--content-block-gap) - 2 * var(--padding-primary)) / 2); height: calc(((100vw - var(--content-block-gap) - 2 * var(--padding-primary)) / 2) * 9 / 16); border-radius: 8px; overflow: hidden; } .video-container video, .video-play-button { position: absolute; top: 0; left: 0; } .video-container video { display: block; width: 100%; } .video-play-button { left: 50%; top: 50%; width: 138px; height: 138px; border-radius: 50%; background-color: var(--system-button-background-color); transform: translate(-50%, -50%); opacity: 1; transition: opacity .33s ease; } .video-container.playing .video-play-button { opacity: 0; pointer-events: none; } .video-play-button .icon { width: 138px; height: 138px; mask-image: url('../assets/images/icon_play.png'); mask-size: 40px auto; } .video-title { width: 100%; padding-left: 40px; color: var(--title-text-color); font-size: 41px; line-height: 50px; font-family: 'BarlowRegular'; box-sizing: border-box; flex-grow: 1; } .video-category { font-family: 'BarlowSemiBold'; font-size: 18px; line-height: 18px; height: 18px; text-transform: uppercase; color: var(--category-text-color); padding-left: 3px; } .headline-wrapper { box-sizing: border-box; padding: calc(var(--nav-height) + var(--padding-primary)) var(--padding-secondary) var(--padding-primary); text-align: center; } .headline { display: inline-block; color: var(--paragraph-text-color); font-size: 32px; line-height: 40px; } .content-block { display: flex; flex-wrap: wrap; gap: var(--content-block-gap); width: 100%; box-sizing: border-box; padding: 100px var(--padding-primary); /* background-color: var(--content-background-color); */ } .content-block-title-wrapper { width: 100%; display: flex; justify-content: center; } .content-block-title { width: fit-content; font-family: 'BarlowLight'; font-size: 66px; line-height: 66px; color: var(--header-title-color); } .content-block-description { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; font-family: 'BarlowRegular'; font-size: 22px; line-height: 28px; color: var(--default-text-color); } .content-block[data-style="page"] { position: relative; width: 100vw; height: var(--vh); padding: unset; background-color: unset; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .content-item { display: flex; flex-direction: column; align-items: center; gap: 40px; width: calc((100vw - var(--content-block-gap) - 2 * var(--padding-primary)) / 2); } .content-item-video { width: calc((100vw - var(--content-block-gap) - 2 * var(--padding-primary)) / 2); gap: 20px; } .content-item .title, .content-item .content-heading { width: 100%; text-align: center; } .content-item img { width: 100%; border-radius: 12px; box-shadow: 0px 0px 6px 0px rgba(0,0,0,.25); } .content-item .caption { width: 100%; padding: 0 32px; box-sizing: border-box; text-align: left; line-height: 25px; } .content-item a { color: var(--system-button-background-color); } .content-block[data-style='list'] { display: flex; flex-wrap: wrap; gap: 20px; } .content-block[data-style='list'] .title, .content-block[data-style='list'] .list-filters { width: 100%; } .content-list-item { display: flex; flex-direction: column; gap: 8px; width: calc((100% - 2 * 20px) / 2); padding: 20px; box-sizing: border-box; background-color: white; border-radius: 20px; } .content-list-item .header { width: 100%; display: flex; align-items: center; gap: 6px; /* justify-content: flex-end; */ } .content-list-item .footer { width: 100%; display: flex; align-items: center; } .content-list-item .link-container { display: flex; gap: 12px; flex-grow: 1; align-items: flex-end; justify-content: flex-end; } .content-list-item .link, .content-list-item .abstract-link, .content-list-item .share-link, #publication-overlay-link { display: inline-block; width: 28px; height: 28px; mask-size: cover; background-color: var(--content-caption-color); cursor: pointer; } .content-list-item .link, .web-link-icon, #publication-overlay-link { mask-image: url('../assets/images/icon_web_link.png'); } .content-list-item .abstract-link { mask-image: url('../assets/images/icon_info.png'); } .faq-wrapper { display: flex; flex-direction: column; gap: 20px; width: 100%; box-sizing: border-box; padding: 140px var(--padding-primary); } .faq-wrapper .subtitle { margin: 20px 0; } .faq-section { display: flex; flex-direction: column; gap: 20px; width: 100%; } .faq-item { background-color: var(--content-background-color); padding: 20px 40px; display: flex; flex-direction: column; border-radius: 20px; cursor: pointer; } .faq-question-container { display: flex; align-items: center; } .faq-question { flex-grow: 1; max-width: calc(100% - 19px - 12px); } .faq-caret { width: 19px; height: 11px; margin-left: 12px; background-color: var(--default-text-color); mask-image: url('../assets/images/icon_down_caret_blue.png'); mask-size: 19px 11px; mask-position: center; mask-repeat: no-repeat; transition: all .25s ease; } .faq-item.open .faq-caret { transform: rotate(180deg); } .faq-answer { max-height: 0; margin-top: 0; overflow: hidden; /* transition: all .25s ease; */ } .faq-item.open .faq-answer { max-height: var(--vh); margin-top: 20px; } /* List */ .content-block[data-style="List"] { flex-direction: row; } .list { display: flex; flex-direction: column; gap: 16px; } .list-icon { width: 22px; height: 22px; background-color: var(--content-caption-color); mask-size: cover; mask-position: center; mask-repeat: no-repeat; } .file-icon { mask-image: url(../assets/images/icon_file_download.png); } .notebook-icon { mask-image: url(../assets/images/icon_publications.png); } /* Old Link List */ .link-list { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .link-list-item { display: flex; align-items: center; color: var(--content-caption-color); font-family: 'BarlowRegular'; font-size: 22px; cursor: pointer; margin-left: 20px; gap: 12px; } .link-list-item:hover, .link-list-item:active { font-family: 'BarlowSemiBold'; text-decoration: underline; } .link-list-icon { height: 22px; width: auto; } #overlay-container, #overlay-scrim { position: absolute; left: 0; top: 0; width: 100vw; height: var(--vh); } #overlay-container { position: fixed; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all .5s ease; z-index: 99; } #overlay-container.show { opacity: 1; pointer-events: all; } #overlay-scrim { background-color: rgba(0,0,0,.7); cursor: pointer; } .overlay-content { display: none; position: absolute; width: 85%; max-height: 85%; padding: 60px; background-color: white; border-radius: 20px; box-sizing: border-box; } #overlay-container[data-type="publication"] #publication-overlay, #overlay-container[data-type="bio"] #bio-overlay { display: flex; flex-direction: column; gap: 20px; } #overlay-close-button { top: 8px; right: 8px; } .publication-overlay-title { font-size: 22px; line-height: 26px; width: unset; } #publication-overlay-abstract { max-height: 100%; overflow-y: scroll; } #publication-overlay-link-container { display: flex; justify-content: flex-end; gap: 12px } .overlay-content h1, .overlay-content h2, .overlay-content h3 { color: var(--title-text-color); font-size: 22px; } /* .overlay-content blockquote { } */ #overlay-close-button { position: absolute; top: 40px; right: 40px; width: 28px; height: 28px; background-color: #17a895; mask-image: url('../assets/images/icon_x.png'); mask-size: cover; mask-position: center; mask-repeat: no-repeat; cursor: pointer; } /* Tablet */ @media (max-width: 1280px) { :root { /* --nav-height: 56px; */ --padding-primary: 60px; --padding-secondary: 80px; } .video-wrapper { padding: var(--padding-primary); } .video-title { font-size: 28px; line-height: 34px; } .content-item .caption { padding: 0 12px; } .header-text-container { width: calc((100vw - (2 * var(--padding-primary))) * .5 + (2 * var(--padding-primary))); } } @media (max-width: 1024px) { :root { --padding-secondary: 60px; } .title { font-size: 25px; line-height: 25px; height: 25px; } .subtitle { font-size: 20px; line-height: 20px; } .header-title { font-size: 50px; line-height: 50px; color: var(--header-title-color); } .header-caption { font-size: 18px; line-height: 24px; } .content-item { width: calc((100% - var(--padding-primary)) / 2); margin-top: var(--padding-primary); } .content-item:nth-child(2n) { margin-left: var(--padding-secondary); } .content-heading { font-size: 25px; line-height: 25px; margin-bottom: 22px; } /* Home */ #home-landing { background-image: url(../assets/images/home_01_background_v2_half.jpg); } } /* Mobile */ @media (orientation: portrait) { :root { --nav-height: 48px; --nav-padding: 20px; --padding-primary: 32px; --padding-secondary: 32px; --content-block-gap: 32px; } html, body { font-size: 18px; line-height: 26px; } input, select, textarea { border-radius: 6px; line-height: 36px; font-size: 18px; } .system-button { font-size: 20px; } .desktop { display: none; } .mobile { display: block; } #view-container { overflow-x: hidden; } /* Nav Menu */ #nav-menu { filter: none; } #nav-menu.show #nav-menu-scrim { opacity: 1; pointer-events: auto; } #nav-title { width: 100vw; opacity: 1; font-size: 18px; text-align: left; } #nav-title .logo { width: 28px; margin-right: 8px; background-size: auto 28px; } #nav-showhide-button { visibility: visible; pointer-events: auto; z-index: 1; } #nav-wrapper { height: calc(var(--vh) - var(--nav-height)); top: var(--nav-height); pointer-events: none; } #nav-button-container-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: auto; padding: 20px 0; transform: translate(100%, 0%); } #nav-menu.show #nav-button-container-wrapper { transform: translate(0); pointer-events: auto; } #nav-button-container { display: block; width: min-content; height: auto; position: static; text-align: left; padding-right: 0; } .nav-button, .nav-mobile-button, .nav-mobile-submenu-item { display: inline-block; position: relative; width: 100%; height: 40px; line-height: 40px; margin-left: 40px; font-size: 24px; } .nav-mobile-button, .nav-mobile-submenu-item { font-family: 'BarlowRegular'; } #nav-submenu-tab { display: none !important; } .nav-mobile-submenu-item { margin-left: 80px; white-space: nowrap; font-size: 20px; } .nav-mobile-submenu-item::before { content: '—'; } /* Common Elements */ .header-title { font-size: 36px; line-height: 36px; } .header-caption { font-family: 'BarlowRegular'; font-size: 21px; line-height: 28px; } @media (max-height: 500px) { .header-caption { font-size: 15px; line-height: 21px; } } .content-block[data-style='list'] { gap: 12px; } .content-block-title-wrapper { justify-content: flex-start; } .content-block-title { width: 100%; text-align: center; } .content-list-item { width: 100%; padding: 12px; } .header-item { flex-direction: column-reverse; } .header-item[data-style="key-point-img-left"] { flex-direction: column; } .header-heading { font-size: 20px; } .header-text { font-size: 32px; line-height: 36px; } .header-image { width: 50vw; height: auto; } /* Home */ html[data-is-mobile="true"] #home-landing { background-image: url(../assets/images/home_01_background_portrait_v2.jpg); } #home-landing-line-1, #home-landing-line-2 { --home-landing-line-padding: 12vw; text-align: center; font-size: 48px; line-height: 54px; right: unset; left: var(--home-landing-line-padding); width: calc(100vw - 2 * var(--home-landing-line-padding)); } #home-landing-line-1 { top: calc(var(--vh) * .3 - 118px); } #home-landing-line-2 { text-align: center; left: unset; right: var(--home-landing-line-padding); top: calc(var(--vh) * .3); padding-top: 25px; } #home-intro, #home-ocr { flex-direction: column-reverse; align-items: flex-start; } #home-setup { flex-direction: column; align-items: flex-start; } #home-intro, #home-ocr, #home-setup { gap: 16px; height: unset; padding: calc(2 * var(--padding-primary)) var(--padding-primary); } #home-intro-video, #home-ocr-image, #home-setup-video { width: calc(100vw - 2 * var(--padding-primary)); } #home-intro-headline, #home-ocr-headline, #home-setup-headline { width: unset; } .home-headline { font-size: 24px; line-height: 36px; } .home-headline-bullet { font-size: 20px; line-height: 30px; } #home-testimonials-button-left { left: 12px; } #home-testimonials-button-right { right: 12px; } #home-testimonials-button-left:hover, #home-testimonials-button-right:hover { transform: translateY(-50%); } .home-testimonial { flex-direction: column; } .home-testimonial-quote { font-size: 14px; line-height: 20px; } .home-testimonial-open-quote, .home-testimonial-close-quote { height: 14px; } .home-testimonial-close-quote { transform: translateX(25%); } .home-testimonial-author-container { flex-direction: unset; } .home-testimonial-author-image { width: 30vw; } .home-testimonial-author { font-size: 16px; line-height: 22px; } .home-testimonial-quote-wrapper { width: calc(100% - 48px); padding-left: 24px; } .home-testimonial-buttons { font-size: 16px; align-items: flex-start; flex-direction: column; gap: 16px; } .home-testimonial-link { padding: 0; } /* Why OCR? */ #ocr-headline { height: unset; padding: calc(var(--nav-height) + var(--padding-primary)) var(--padding-primary) var(--padding-primary); } #ocr-content .content-block { gap: var(--content-block-gap); } #ocr-content .content-block-title { font-size: 23px; line-height: 29px; text-align: left; } #ocr-content .content-item-text { gap: 10px; } /* Resipher */ #resipher-header { height: unset; } #resipher-header-hero { position: unset; height: unset; gap: 20px; padding: var(--nav-height) var(--padding-primary); background-image: url(../assets/images/background_bars_medblue_portrait.jpg); background-position: center bottom; } #resipher-header-hero .header-text-container { width: 100%; justify-content: flex-start; } #resipher-header-hero .system-button { background-color: #17a895; } #resipher-headline { padding: var(--padding-primary); } #resipher-spinning-video { width: 80vw; } #resipher-specs-dimensions img { width: 100%; height: auto; padding: 12px; box-sizing: border-box; } #resipher-specs-list { padding: 0; } /* Resources */ #resources-view .content-block, #resources-faq { padding: 52px calc(var(--padding-primary) / 2); } #resources-publications { padding-top: calc(var(--nav-height) + 24px) !important; } #resources-publications .description { font-size: 18px; line-height: 24px; } #resources-publications .image-content-img { display: none; } #resources-publications .content-list-item .title, #publications .content-list-item .title { line-height: 24px; } #resources-view .content-block .image-wrapper { padding: 20px 0; } #resources-faq .faq-item { padding: 12px; } .list-filters { width: 100%; flex-direction: column; } #publication-search-container, #publication-category-select { width: 100%; } #publication-category-select { white-space: break-spaces; } #publication-search-input { flex-grow: 1; } .publication-category-button { font-size: 14px; } #publications-list { flex-direction: column; } #resources-publications .content-list-item, #publications .content-list-item { width: 100%; } .publication .header { display: none; } #overlay-container[data-type="publication"] #publication-overlay, #overlay-container[data-type="bio"] #bio-overlay { padding: 40px 20px; border-radius: 8px; } #bio-overlay-text { overflow-y: scroll; } #resources-documentation .title { margin: 0; } .faq-wrapper .subtitle { margin: 0; } /* Notebook */ #notebook-menu { padding: 20px var(--padding-primary) 60px var(--padding-primary); } .notebook-menu-item { padding: 12px 53px 12px 20px; font-size: 22px; line-height: 26px; background-size: 13px 22px; background-repeat: no-repeat; background-position: center right 20px; } #notebook-back-button { width: 48px; height: 48px; padding: 0; background-position: center left 14px; } #notebook-back-button::after { content: ''; } #notebook-iframe { transition: none; } /* Products */ #products-view { padding: calc(var(--nav-height) + 24px) 0 24px; } #products-content .media { width: 100%; } #products-content .content-block { padding-top: 0 !important; gap: 60px; } #products-content .media-caption { text-align: left !important; align-items: flex-start !important; } .product-description { align-items: start; font-size: 18px; line-height: 24px; } #products-view .system-button { margin-top: 8px; } /* About */ #about-view { --about-leadership-gap: 18px; --about-leadership-width: calc(100vw - var(--padding-primary)); } #about-mission { height: unset; padding-top: calc(var(--nav-height) + 24px); } #about-mission .content-block-description { font-size: 18px; line-height: 30px; } #about-content { padding: 48px calc(var(--padding-primary) / 2); box-sizing: border-box; gap: calc(2 * var(--about-leadership-gap)); } #about-leadership-team, #about-leadership-board { flex-wrap: wrap; width: var(--about-leadership-width); gap: var(--about-leadership-gap); } .person-wrapper { width: calc((var(--about-leadership-width) - var(--about-leadership-gap)) / 2); } .person-img { width: calc((var(--about-leadership-width) - var(--about-leadership-gap)) / 2); height: auto; } .person-links { top: 4px; } .person-link { width: 24px; height: 24px; top: 0; left: 0; mask-size: 24px; mask-repeat: no-repeat; } .person-name, .about-leader-title { text-align: center; } /* Footer */ #footer { height: unset; padding: 24px; font-size: 18px; line-height: 23px; gap: 40px; } #footer-contact { width: 100%; padding: unset; } .contact-form-container { flex-direction: column; } #contact-form-submit-container { text-align: left; } .contact-form-container-left, .contact-form-container-right { width: 100%; margin: 0; } .contact-form-container-left .contact-form-element:last-child { margin-bottom: 8px; } .contact-form-message { height: 156px; } #contact-form-submit-button { width: 100%; } #contact-form-submit-info { margin-bottom: 12px; } .contact-form-select-container { flex-direction: column; align-items: start; margin-top: 8px; } .contact-form-select-container select { width: 100%; } #footer-info { flex-direction: column; gap: 16px; } #footer .logo { height: 48px; width: auto; } #footer-info-company-container, #footer-info-contact-container { text-align: center; } #footer-social-container { padding: 16px 0; } #footer-privacy-container .divider { padding: 0 8px; } /* Content */ .image-content-img { margin: 0; } .image-wrapper { padding: 20px var(--padding-primary); gap: calc(var(--padding-primary) / 2) !important; } .video-container { width: 100%; height: calc((100vw - var(--padding-primary)) * 9 / 16); } .video-content { width: 100%; } .video-play-button { width: 90px; height: 90px; } .video-play-button .icon { width: 90px; height: 90px; mask-size: 26px auto; } .video-title { width: 100%; text-align: center !important; padding: 0; font-size: 31px; line-height: 40px; } .headline { width: 100%; font-size: 20px; line-height: 32px; } .content-block { padding: 52px var(--padding-secondary); } .content-block[data-style="Alternating Cards"] .media-wrapper { flex-direction: column !important; align-items: center !important; } .content-item { width: 100%; margin-top: 0; margin-left: 0 !important; gap: 16px; } .content-item:nth-child(1) { margin-top: 0 !important; } .content-item img { border-radius: 8px; } .content-item .caption { padding: 0; } .content-block-title { font-size: 32px; line-height: 36px; } .content-block-description { gap: 8px; font-size: 18px; line-height: 26px; } .overlay-content h1, .overlay-content h2, .overlay-content h3 { margin: 0; } } #home-landing-paragraph { white-space: collapse; left: 3vw; top: 15vh; width: 40vw; } /* Mobile by navigator.maxTouchPoints */ html[data-is-mobile="true"] { overflow-y: scroll !important; } html[data-is-mobile="true"] #home-pagination { display: none !important; } html[data-is-mobile="true"] #background-particles { transition: none !important; } html[data-is-mobile="true"] #home-landing { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(.94 * (100% - 50px)), rgba(0, 0, 0, 0) calc(100% - 50px)); background-position: center bottom 50px; transition: var(--home-page-transition); }