| /* globals */ |
| |
| :root { |
| /* theme */ |
| --blackish: #0A1011; |
| --dark-green: #0C221D; |
| --green: #5CA2A2; |
| --light-green: #BBD1D5; |
| |
| /* basics */ |
| --primary-80: #254040; |
| --primary-65: #407171; |
| --primary: #5CA2A2; |
| --primary-35: #8dbebe; |
| --primary-20: #bddada; |
| |
| --black: #000000; |
| --gray-90: #1a1a1a; |
| --gray-80: #333333; |
| --gray-70: #4d4d4d; |
| --gray-60: #666666; |
| --gray-50: #808080; |
| --gray-40: #999999; |
| --gray-30: #b3b3b3; |
| --gray-20: #cccccc; |
| --gray-10: #e6e6e6; |
| --white: #ffffff; |
| } |
| |
| html, |
| body { |
| height: 100%; |
| } |
| html { |
| font-size: 62.5%; |
| } |
| html, * { |
| box-sizing: border-box; |
| } |
| body { |
| display: flex; |
| flex-direction: column; |
| min-width: 32rem; |
| font-size: 1.5rem; |
| line-height: 1.8; |
| font-family: 'Roboto', sans-serif; |
| margin: 0; |
| } |
| code, |
| pre { |
| font-family: Menlo, Consolas, monospace; |
| } |
| pre { |
| border-style: solid; |
| border-color: #E5E5E5; |
| border-width: .1rem .5rem; |
| overflow-x: scroll; |
| padding: 1rem 2rem 1.5rem; |
| color: var(--gray-70); |
| margin: 2rem 0; |
| background: #fff; |
| } |
| code { |
| border: .1rem solid #E5E5E5; |
| margin: 0 .3rem; |
| padding: .2rem .4rem; |
| background-color: #F4F9F9; |
| border-radius: 0.3rem; |
| } |
| pre code { |
| border: none; |
| border-radius: 0; |
| margin: 0; |
| padding: 0; |
| background-color: transparent; |
| } |
| code b, |
| pre b, |
| h1, |
| h2, |
| h3, |
| h4 { |
| line-height: 1.4; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-rendering: optimizeLegibility; |
| } |
| h1 a, |
| h2 a, |
| h3 a, |
| h4 a, |
| h5 a, |
| h6 a { |
| color: #000000; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-rendering: optimizeLegibility; |
| } |
| h1 { |
| font-family: Roboto; |
| font-weight: 900; |
| font-size: 3.8rem; |
| line-height: 4.5rem; |
| letter-spacing: 0.06rem; |
| text-transform: uppercase; |
| margin: 0 0 2rem 0; |
| } |
| h2 { |
| text-transform: uppercase; |
| font-size: 2rem; |
| font-weight: 700; |
| margin: 40px 0px 0px 0px; |
| } |
| h3, |
| h4 { |
| font-size: 2rem; |
| font-weight: 700; |
| } |
| h5 { |
| font-size: 1.6rem; |
| } |
| h3.bullet { |
| margin-bottom: 1rem; |
| } |
| h3.bullet::after { |
| content: ""; |
| display: block; |
| background-color: #000000; |
| height: .2rem; |
| width: 5rem; |
| } |
| a { |
| color: var(--green); |
| } |
| img { |
| max-width: 100%; |
| } |
| .btn { |
| background-color: #0B6D88; |
| color: #FFFFFF; |
| border-radius: .2rem; |
| -moz-border-radius: .2rem; |
| -webkit-border-radius: .2rem; |
| text-align: center; |
| text-transform: capitalize; |
| padding: .9rem 2rem; |
| box-sizing: border-box; |
| } |
| .btn--secondary { |
| color: #0B6D88; |
| border: .2rem solid #0B6D88; |
| background-color: transparent; |
| } |
| .btn--sm { |
| padding: .5rem 1rem; |
| } |
| .btn:hover { |
| background-color: #888888; |
| border-color: #888888; |
| color: #FFFFFF; |
| } |
| .btn-group a { |
| border: 1px solid #000000; |
| margin: 0; |
| float: left; |
| min-width: 10rem; |
| text-align: center; |
| height: 2.9rem; |
| line-height: 2.9rem; |
| margin-left: -.1rem; |
| color: #000000; |
| } |
| .btn-group a:hover { |
| cursor: pointer; |
| border-color: #888888; |
| background-color: #888888; |
| color: #FFFFFF; |
| } |
| .btn-group a:first-of-type { |
| border-radius: .2rem 0 0 .2rem; |
| } |
| .btn-group a:last-of-type { |
| border-radius: 0 .2rem .2rem 0; |
| } |
| .btn-group .selected { |
| background-color: #000000; |
| color: #ffffff; |
| } |
| ul { |
| padding-left: 2rem; |
| margin: 1rem 0 1rem 0; |
| } |
| .docs-nav { |
| position: relative; |
| width: 30rem; |
| } |
| .documentation--current .docs-nav { |
| width: 30rem; |
| position: fixed; |
| top: 11.5rem; |
| bottom: 0; |
| text-transform: uppercase; |
| margin-bottom: 5rem; |
| overflow: hidden; |
| overflow-y: auto; |
| } |
| .documentation--current .p-toc { |
| width: 30rem; |
| overflow: hidden; |
| overflow-y: auto; |
| } |
| .documentation--current.expanded .docs-nav { |
| width: 10rem; |
| } |
| .documentation--current.expanded .toc-handle-container { |
| width: 11.2rem; |
| } |
| .documentation--current .toc-handle-container { |
| width: 31.2rem; |
| position: fixed; |
| top: 11.5rem; |
| bottom: 0; |
| margin-bottom: 5rem; |
| } |
| .documentation--current .toc-handle { |
| font-weight: bold; |
| line-height: 1; |
| cursor: pointer; |
| padding: 2rem 0.2rem; |
| background: var(--light-green); |
| color: black; |
| position: absolute; |
| right: 0; |
| top: 46%; |
| z-index: 99; |
| } |
| .toc { |
| width: 30rem; |
| display: block; |
| } |
| .toc li { |
| margin 0; |
| list-style-type: none; |
| } |
| .toc > li { |
| margin-bottom: .6rem; |
| } |
| .toc a { |
| color: #000000; |
| } |
| .toc ul { |
| padding: .2rem 1.7rem 0; |
| text-transform: none; |
| font-weight: 400; |
| margin: 0 0 1rem; |
| } |
| .toc a:hover, |
| .toc ul a { |
| color: #0B6D88; |
| } |
| .toc ul ul { |
| padding: 0 1.8rem; |
| margin-bottom: 0; |
| } |
| ol.toc { |
| list-style: decimal; |
| padding: 0 0 0 1rem; |
| } |
| ol.toc > li { |
| padding-left: .2rem; |
| } |
| .data-table { |
| border: none; |
| border-collapse: collapse; |
| width: 100%; |
| overflow-x: scroll; |
| margin: 2rem 0; |
| } |
| .data-table tbody { |
| border-style: solid; |
| border-color: #E5E5E5; |
| border-width: 0; |
| } |
| .data-table td, |
| .data-table th { |
| border: .1rem solid #cccccc; |
| padding: .5rem 1rem; |
| min-width: 10rem; |
| } |
| .data-table th { |
| text-align: left; |
| background-color: #fff; |
| border: .1rem solid #222222; |
| color:#000; |
| font-weight: 400; |
| padding: 1rem; |
| text-transform: uppercase; |
| overflow: hidden; |
| vertical-align: top; |
| width: 25%; |
| } |
| .data-table td { |
| /* These are technically the same, but use both */ |
| |
| overflow-wrap: break-word; |
| word-wrap: break-word; |
| -ms-word-break: break-all; |
| /* This is the dangerous one in WebKit, as it breaks things wherever */ |
| |
| word-break: break-all; |
| /* Instead use this non-standard one: */ |
| |
| word-break: break-word; |
| /* Adds a hyphen where the word breaks, if supported (No Blink) */ |
| |
| -ms-hyphens: auto; |
| -moz-hyphens: auto; |
| -webkit-hyphens: auto; |
| hyphens: auto; |
| } |
| .data-table tr td:first-of-type { |
| -ms-hyphens: none; |
| -moz-hyphens: none; |
| -webkit-hyphens: none; |
| hyphens: none; |
| } |
| |
| .docutils { |
| border-collapse: collapse; |
| border-spacing: 0; |
| empty-cells: show; |
| background-color: transparent; |
| table-layout: fixed; width: 100%; |
| font-size:1.5rem; |
| line-height: 1.8; |
| } |
| |
| .docutils.literal, |
| .docutils.literal .pre { |
| overflow-wrap: break-word; |
| } |
| |
| td { |
| border: 1px solid #e1e4e5; |
| margin: 0; |
| padding: 16px; |
| overflow: hidden; |
| width: 200px; |
| } |
| |
| th { |
| border: 1px solid #e1e4e5; |
| margin: 0; |
| overflow: visible; |
| padding: 8px 16px; |
| text-align:left; |
| background-color:#ccc; |
| } |
| |
| tr:nth-child(even) { |
| background-color: #f2f2f2; |
| } |
| tr:nth-child(odd) { |
| background-color: white; |
| } |
| |
| /* Configuration lists */ |
| .config-list>li { |
| list-style-type: none; |
| padding: 15px 0px 15px 20px; |
| border-bottom: 1px solid black; |
| } |
| |
| .config-list h4 { |
| margin: 0; |
| } |
| |
| .config-list table *{ |
| border: 0; |
| background-color: transparent; |
| padding: 0; |
| } |
| |
| .config-list tr { |
| border-width: 0; |
| background-color: transparent; |
| } |
| |
| .config-list th { |
| text-align: right; |
| } |
| |
| .config-list td { |
| text-align: left; |
| padding: 0px 0px 0px 10px; |
| } |
| |
| .config-list>li:nth-child(odd) { |
| background: #f2f2f2; |
| } |
| |
| .horizontal-list li { |
| display: inline-block; |
| } |
| |
| .horizontal-list li:before { |
| content: '\00a0\00a0\2015\00a0'; |
| } |
| |
| .horizontal-list li:first-child:before { |
| content: ''; |
| } |
| |
| .highlight pre span { |
| font-size:1.4rem; |
| } |
| .logo-link { |
| display: inline-block; |
| width: 117px; |
| height: 65px; |
| background: url("/logos/kafka_logo--simple.png"); |
| background-size: auto 65px; |
| background-repeat: no-repeat; |
| /* small: 168 x 50 */ |
| } |
| .anchor-link, |
| .header-link { |
| position: relative; |
| top: -12rem; |
| left: 0; |
| } |
| #docs-top-link { |
| position: fixed; |
| bottom: 6.5rem; |
| right: 1rem; |
| display: block; |
| padding: .5rem 1.5rem; |
| background: linear-gradient(90deg, #427583 -15.13%, var(--green) 100%), #0A1011; |
| box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.38); |
| color: white !important; /* ignoring link colors */ |
| text-transform: uppercase; |
| text-align: center; |
| text-decoration: none; |
| } |
| .docs-toc-title { |
| margin-top: 0; |
| } |
| /* helper classes */ |
| |
| .centered { |
| display: block; |
| margin: auto; |
| } |
| .pb-10 { |
| display: inline-block; |
| padding-bottom: 1rem; |
| } |
| /* components */ |
| |
| .main { |
| width: auto; |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| .header { |
| padding: 2rem 0 1rem; |
| background-color: #FFFFFF; |
| position: fixed; |
| left: 0; |
| display: flex; |
| flex-direction: row; |
| justify-content: space-around; |
| padding: 2rem 2.2rem; |
| width: 100%; |
| box-sizing: border-box; |
| margin: 0 auto; |
| z-index: 99; |
| transition: box-shadow 0.5s; |
| } |
| .header.scrolled { |
| box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.38); |
| margin: 0; |
| } |
| .burger-toggle { |
| padding: .4rem; |
| border-radius: .3rem; |
| width: 4rem; |
| height: 4rem; |
| border: 1px solid #ccc; |
| background-color: white; |
| } |
| .burger-toggle .burger-line { |
| display: block; |
| width: 80%; |
| margin: 6px auto; |
| height: 2px; |
| background-color: black; |
| border-radius: 2px; |
| } |
| .top-nav-toggle { |
| display: none; |
| } |
| .top-nav-container { |
| display: flex; |
| box-sizing: border-box; |
| } |
| .top-nav { |
| font-family: Roboto; |
| font-style: normal; |
| font-weight: 600; |
| font-size: 1.2rem; |
| line-height: 14px; |
| display: flex; |
| align-items: center; |
| align-self: center; |
| text-align: center; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| /* fix inherited styles from nav selector */ |
| float: none; |
| width: auto; |
| } |
| .top-nav-list { |
| display: flex; |
| list-style-type: none; |
| padding: 0; |
| margin: 0; |
| } |
| .top-nav-item { |
| display: block; |
| padding: 0; |
| position: relative; |
| } |
| .top-nav-item-anchor { |
| display: block; |
| padding: 1.55rem 2.75rem; |
| position: relative; |
| cursor: pointer; |
| color: black; |
| } |
| .top-nav-item-anchor[href="#"] { |
| cursor: default; |
| } |
| .top-nav-menu { |
| display: none; |
| background: white; |
| list-style-type: none; |
| padding: 0; |
| margin: 0; |
| position: absolute; |
| top: 4rem; |
| left: 50%; |
| z-index: 60; |
| transform: translateX(-50%); |
| box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.38); |
| } |
| .top-nav-menu[aria-hidden="false"] { |
| display: block; |
| } |
| .top-nav-anchor { |
| display: inline-block; |
| padding: 1rem 0; |
| width: 16rem; |
| text-align: center; |
| font-family: inherit; |
| } |
| .top-nav-item-anchor:link, |
| .top-nav-item-anchor:active, |
| .top-nav-item-anchor:visited, |
| .top-nav-anchor:link, |
| .top-nav-anchor:active, |
| .top-nav-anchor:visited { |
| color: black; |
| text-decoration: none; |
| } |
| .top-nav-item-anchor:hover, |
| .top-nav-anchor:hover, |
| .top-nav-item-anchor:focus, |
| .top-nav-anchor:focus { |
| color: var(--green); |
| } |
| .top-nav-download { |
| font-size: 14px; |
| letter-spacing: 0.11rem; |
| line-height: 16px; |
| background: linear-gradient(115.55deg, #000000, rgba(255, 255, 255, 0.5) 131.3%), #0A1011; |
| box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.38); |
| border-radius: 0.2rem; |
| border: none; |
| color: white; |
| text-transform: uppercase; |
| padding: 1.5rem; |
| margin-left: 3rem; |
| cursor: pointer; |
| font-weight: normal; |
| text-decoration: none; |
| position: relative; |
| top: 1.4rem; |
| } |
| .top-nav-download:hover { |
| background-color: rgb(178, 178, 178); |
| } |
| .page-home .waves { |
| background: url("/images/waves.svg") no-repeat top center; |
| background-size: cover; |
| height: 24vw; |
| } |
| .page-home .content-bottom { |
| background: #363D3F; |
| color: white; |
| margin-top: -1px; /* fixes scaling issues from the little hack i'm doing */ |
| } |
| .page-home .content-bottom .content-section { |
| max-width: 110rem; |
| margin: 0 auto; |
| } |
| .page-home .content-bottom .content-section-separator { |
| max-width: 105.8rem; |
| height: 1px; |
| background-color: #969191; |
| margin: 0 auto 7rem; |
| border: none; |
| } |
| .page-home .content-bottom .content-section-title { |
| font-family: Roboto; |
| font-style: normal; |
| font-weight: bold; |
| font-size: 2.1rem; |
| line-height: 2.9rem; |
| text-transform: uppercase; |
| color: #A9CBD4; |
| padding: 0 0 0 2.2rem; |
| margin: 0 0 5rem 0; |
| } |
| .page-home .content-bottom .content-section-header { |
| font-size: 21px; |
| line-height: 2.9rem; |
| padding: 2.2rem; |
| height: 6rem; |
| } |
| .page-home .content-bottom .content-section-list { |
| list-style-type: none; |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| margin: 0; |
| padding: 0; |
| flex-wrap: wrap; |
| } |
| .page-home .content-bottom .content-section-item { |
| width: 25rem; |
| height: 38.4rem; |
| padding: 2.2rem; |
| } |
| .page-home .content-bottom .content-section-item-icon { |
| /* TODO */ |
| display: inline-block; |
| } |
| .page-home .content-bottom .content-section-item-title { |
| margin: 3.1rem 0 0; |
| font-size: 18px; |
| line-height: 2.5rem; |
| text-transform: uppercase; |
| color: #A9CBD4; |
| height: 6rem; |
| padding: 0; |
| } |
| .page-home .content-bottom .content-section-item-content { |
| font-family: "Roboto Condensed"; |
| font-weight: 300; |
| font-size: 1.6rem; |
| line-height: 2.2rem; |
| margin: 0; |
| padding: 0; |
| } |
| .page-home .content * { |
| box-sizing: border-box; |
| } |
| .page-home .content { |
| box-sizing: border-box; |
| width: auto; |
| margin: 25rem 0 0; |
| padding: 0; |
| max-width: none; |
| } |
| .page-home .content-top { |
| max-width: 76.7rem; |
| margin: 13rem auto 0; |
| text-align: center; |
| font-family: Roboto; |
| } |
| .page-home .content-top-title { |
| font-weight: 900; |
| font-size: 3.8rem; |
| line-height: 4.5rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| margin: 0 0 0.2rem; |
| } |
| .page-home .content-top-subtitle { |
| font-size: 21px; |
| font-style: italic; |
| line-height: 3rem; |
| margin: 0; |
| font-weight: 400; |
| } |
| .page-home .content-top-subtitle-strong { |
| color: var(--green); |
| font-weight: bold; |
| } |
| .page-home .content-top-text { |
| font-weight: 100; |
| font-size: 2.1rem; |
| line-height: 3rem; |
| padding: 0 .5rem 0; |
| } |
| .page-home .content-top-separator { |
| width: 10rem; |
| height: 1px; |
| background-color: black; |
| border: none; |
| margin: 3.5rem auto 0; |
| padding: 0; |
| } |
| .page-home .content-top-industry { |
| font-weight: bold; |
| font-size: 1.6rem; |
| line-height: 2.4rem; |
| margin-bottom: 0; |
| } |
| .page-home .content-top-industry-list { |
| list-style-type: none; |
| display: flex; |
| max-width: 53rem; |
| margin: 6rem auto; |
| padding: 0; |
| justify-content: space-between; |
| font-style: italic; |
| } |
| .page-home .content-top-industry-item { |
| display: flex; |
| flex-direction: column-reverse; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
| .page-home .content-top-industry-title { |
| margin: 0; |
| padding: 0.5rem 0.5rem 0 0; |
| font-size: 1.4rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| border-top: 1px solid black; |
| position: relative; |
| width: 100%; |
| left: -.5rem; |
| } |
| .page-home .content-top-industry-ratio { |
| font-size: 2.2rem; |
| font-weight: 700; |
| line-height: 2.6rem; |
| display: flex; |
| flex-direction: row; |
| margin: 1rem 0 0; |
| padding: .2rem .3rem .2rem 0; |
| align-items: center; |
| justify-content: center; |
| border-top: 1px solid black; |
| width: 100%; |
| } |
| .page-home .content-top-industry-ratio-stacked { |
| font-size: 0.9rem; |
| text-transform: uppercase; |
| width: 1.7rem; |
| line-height: 0.9rem; |
| text-align: left; |
| margin-left: .5rem; |
| font-weight: 400; |
| } |
| .quickstart-step { |
| border: 0.2rem solid var(--green); |
| padding: 1rem 10rem 2.5rem; |
| margin-bottom: 3rem; |
| } |
| .documentation .quickstart-step { |
| padding: 0; |
| border: 0; |
| } |
| .quickstart-step .anchor-heading { |
| margin-top: 2rem; |
| } |
| .quickstart-step .anchor-heading a { |
| text-decoration: none; |
| text-transform: uppercase; |
| } |
| .quickstart-step .anchor-link { |
| top: -16rem; |
| } |
| .quickstart-step .note { |
| font-style: italic; |
| color: var(--gray-70); |
| } |
| .figure { |
| position: relative; |
| width: 100%; |
| text-align: center; |
| margin: 0; |
| } |
| .figure-image { |
| max-width: 75%; |
| max-height: 300px; |
| } |
| .figure-caption { |
| text-align: center; |
| max-width: 75%; |
| margin: 0 auto; |
| font-style: italic; |
| } |
| .podcast-list { |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| } |
| .podcast-item { |
| display: flex; |
| flex-direction: column; |
| max-width: 24%; |
| min-width: 10rem; |
| height: max-content; |
| } |
| .podcast-figure { |
| width: 100%; |
| padding: 0; |
| margin: 0; |
| } |
| .podcast-figure-image { |
| width: 100%; |
| padding: 0.5rem; |
| border: 1px solid var(--green); |
| } |
| .podcast-title { |
| margin-top: 0; |
| padding-top: 0; |
| } |
| .content-top-industry-full-list { |
| position: relative; |
| color: var(--green); |
| text-decoration: underline; |
| text-align: center; |
| cursor: default; |
| text-transform: uppercase; |
| font-weight: bold; |
| padding: .5rem; |
| font-size: 1.2rem; |
| } |
| .content-top-industry-full-list:hover .content-top-industry-full-list-tooltip, |
| .content-top-industry-full-list:active .content-top-industry-full-list-tooltip { |
| display: block; |
| } |
| .content-top-industry-full-list-tooltip { |
| font-size: 1.4rem; |
| font-weight: 300; |
| display: none; |
| position: absolute; |
| top: 3rem; |
| left: 0; |
| text-align: left; |
| box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.25); |
| color: black; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 1.2rem 2.2rem; |
| background: white; |
| white-space: nowrap; |
| text-transform: none; |
| } |
| .page-home .content-top-disclaimer { |
| font-weight: 100; |
| font-size: 16px; |
| line-height: 2.4rem; |
| max-width: 38.5rem; |
| padding: 0 2rem; |
| margin: 0 auto; |
| } |
| .footer { |
| flex: 1; |
| min-height: 5.3rem; |
| position: relative; |
| } |
| .footer__inner { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| border-top: .1rem solid #dedede; |
| font-size: .9rem; |
| line-height: 1.2rem; |
| color: #888888; |
| padding: 2rem 0; |
| background: white; |
| text-align: center; |
| } |
| .footer__legal { |
| margin: 0 2rem; |
| } |
| .footer__legal a { |
| color: #666666; |
| } |
| .sub-header { |
| overflow: hidden; |
| margin: 3rem 0 1rem; |
| } |
| .breadcrumbs { |
| list-style: none; |
| padding: 0; |
| text-transform: uppercase; |
| margin-bottom: 0; |
| display: flex; |
| } |
| .breadcrumbs li { |
| display: flex; |
| align-items: center; |
| margin-right: .8rem; |
| } |
| .breadcrumbs li::after { |
| content: '\00BB'; |
| margin-left: .6rem; |
| height: 1rem; |
| line-height: .9rem; |
| } |
| .breadcrumbs a { |
| color: #000000; |
| } |
| .breadcrumbs a:hover { |
| color: #0B6D88; |
| } |
| .content { |
| width: 98rem; /* the original width (120) minus the padding that accounted for the left nav (22) */ |
| max-width: 98vw; |
| margin: 0 auto; |
| margin-top: 12rem; |
| padding: 0 0 12rem 0; |
| } |
| nav { |
| float: left; |
| text-transform: uppercase; |
| width: 16rem; |
| } |
| nav a { |
| text-decoration: none; |
| } |
| .nav__item, |
| .nav__item__with__subs { |
| color: #000000; |
| border-right: 2px solid #000000; |
| display: block; |
| padding-top: 1.5rem; |
| position: relative; |
| } |
| .nav__item__with__subs { |
| padding-top: 0; |
| } |
| .nav__sub__anchor, |
| .nav__sub__item { |
| border-right: none; |
| } |
| .nav__sub__item { |
| display: none; |
| color: #888888; |
| font-size: 1.2rem; |
| text-transform: capitalize; |
| } |
| .nav__item__with__subs--expanded .nav__sub__item { |
| display: block; |
| } |
| .nav__item:first-of-type { |
| padding-top: 0; |
| } |
| .nav__item__with__subs .nav__item:first-of-type { |
| padding-top: 1.5rem; |
| } |
| .nav__item::after { |
| content: ""; |
| display: block; |
| height: 1.1rem; |
| width: 1.1rem; |
| border-radius: 1rem; |
| -moz-border-radius: 1rem; |
| -webkit-border-radius: 1rem; |
| border: 2px solid #000000; |
| background: #FFFFFF; |
| position: absolute; |
| right: -.9rem; |
| top: 1.7rem; |
| opacity: 0; |
| transition: opacity .2s ease-out; |
| } |
| .nav__item.selected::after { |
| opacity: 1; |
| } |
| .nav__item.selected:first-of-type::after { |
| top: .2rem; |
| } |
| .nav__item__with__subs .nav__item:first-of-type::after { |
| top: 1.7rem; |
| } |
| nav .btn { |
| display: block; |
| margin-top: 4rem; |
| } |
| .social-links { |
| margin: 2rem 0 3rem; |
| font-size: 1.2rem; |
| } |
| .twitter { |
| color: #888888; |
| text-transform: none; |
| background-image: url(/images/twitter_logo.png); |
| background-size: contain; |
| background-repeat: no-repeat; |
| padding-left: 1.9rem; |
| } |
| .twitter:hover { |
| color: #888888; |
| opacity: 0.8; |
| } |
| .right { |
| min-height: 60rem; |
| overflow: hidden; |
| } |
| .apache-feather { |
| position: absolute; |
| bottom: 2rem; |
| right: 2rem; |
| } |
| .apache-feather:hover { |
| -webkit-animation-name: spin; |
| -webkit-animation-duration: 200ms; |
| -webkit-animation-iteration-count: infinite; |
| -webkit-animation-timing-function: linear; |
| -moz-animation-name: spin; |
| -moz-animation-duration: 200ms; |
| -moz-animation-iteration-count: infinite; |
| -moz-animation-timing-function: linear; |
| -ms-animation-name: spin; |
| -ms-animation-duration: 200ms; |
| -ms-animation-iteration-count: infinite; |
| -ms-animation-timing-function: linear; |
| animation-name: spin; |
| animation-duration: 200ms; |
| animation-iteration-count: infinite; |
| animation-timing-function: linear; |
| } |
| @-ms-keyframes spin { |
| from { |
| -ms-transform: rotate(0deg); |
| } |
| to { |
| -ms-transform: rotate(360deg); |
| } |
| } |
| @-moz-keyframes spin { |
| from { |
| -moz-transform: rotate(0deg); |
| } |
| to { |
| -moz-transform: rotate(360deg); |
| } |
| } |
| @-webkit-keyframes spin { |
| from { |
| -webkit-transform: rotate(0deg); |
| } |
| to { |
| -webkit-transform: rotate(360deg); |
| } |
| } |
| @keyframes spin { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| /* pages */ |
| |
| .index { |
| text-align: center; |
| padding-right: 25%; |
| } |
| .desc { |
| margin-bottom: 6rem; |
| overflow: hidden; |
| } |
| .desc-item { |
| float: left; |
| margin-left: 4.2rem; |
| overflow: hidden; |
| } |
| .desc-item:first-of-type { |
| margin-left: 0; |
| } |
| .desc-item h2 { |
| color: #000000; |
| margin-top: 20px; |
| } |
| .desc-item p { |
| color: #000000; |
| margin: 0; |
| width: 20rem; |
| } |
| .desc-item__cta { |
| margin-top: .5rem; |
| display: block; |
| } |
| .desc-item p:before { |
| content: ""; |
| border-top: 2px solid #000000; |
| display: block; |
| -webkit-transition: width .5s; |
| transition: width .5s; |
| width: 5rem; |
| margin: .2rem 0 1rem; |
| } |
| .desc-item:hover p:before { |
| border-color: #0C637B; |
| width: 22rem; |
| } |
| .desc-item:hover h2, |
| .desc-item:hover p { |
| color: #0C637B; |
| } |
| .news { |
| text-transform: uppercase; |
| color: #000; |
| display: inline-block; |
| border: solid 3px #000; |
| padding: 20px; |
| margin-left: 20px; |
| vertical-align: top; |
| } |
| .news h2 { |
| font-size: 18px; |
| margin: 0 0 10px; |
| } |
| |
| .news article { |
| display: flex; |
| flex-direction: column; |
| margin-bottom: 10px; |
| } |
| .news h3 { |
| font-size: 13px; |
| margin: 0; |
| } |
| .news h3 a { |
| color: #1471E2; |
| text-decoration: none; |
| } |
| .news time { |
| font-size: 10px; |
| } |
| .callout { |
| background-color: #F0F0F0; |
| padding: 1.5rem 2rem 3rem; |
| width: 33rem; |
| margin: 2rem auto 0; |
| position: relative; |
| text-align: center; |
| } |
| .callout--basic { |
| width: auto; |
| } |
| .callout::before { |
| content: ""; |
| width: 0; |
| height: 0; |
| border-style: solid; |
| border-width: 8rem 0 0 5rem; |
| border-color: transparent transparent transparent #F0F0F0; |
| top: -6rem; |
| right: 10rem; |
| position: absolute; |
| -ms-transform: rotate(-10deg); |
| -webkit-transform: rotate(-10deg); |
| transform: rotate(-10deg); |
| } |
| .callout--basic::before { |
| display: none; |
| } |
| .callout__action { |
| display: inline-block; |
| width: 10rem; |
| } |
| .documentation__banner { |
| background-color: rgba(0, 0, 0, 0.8); |
| color: #ffffff; |
| display: block; |
| padding: 1.5rem 2rem; |
| margin-bottom: 3rem; |
| border-bottom: 2px solid transparent; |
| } |
| .documentation__banner:hover { |
| background-color: #888888; |
| color: #ffffff; |
| cursor: pointer; |
| } |
| .content.documentation--current { |
| position: relative; |
| display: flex; |
| } |
| .content.documentation--current .right { |
| max-width: 65rem; |
| margin: 0 0 0 auto; |
| } |
| .content.documentation--current.expanded .right { |
| max-width: 85rem; |
| margin: 0 0 0 auto; |
| overflow: visible; |
| } |
| .grid { |
| margin: 2rem 0; |
| max-width: 100%; |
| } |
| .grid__item { |
| width: 23rem; |
| margin: .65rem; |
| border-radius: .4rem; |
| overflow: hidden; |
| border: 1px solid #888888; |
| } |
| .grid__item__link { |
| display: block; |
| height: 8rem; |
| margin-bottom: -.1rem; |
| text-align: center; |
| padding-top: 1rem; |
| text-decoration: none; |
| border-bottom: 1px solid #888888; |
| } |
| .grid__item__link:hover { |
| opacity: .8; |
| } |
| .grid__item__logo { |
| margin: auto; |
| width: 16rem; |
| height: 6rem; |
| display: block; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center center; |
| } |
| .grid__item__description { |
| margin: 0 2rem 2rem; |
| padding-top: 2rem; |
| } |
| .pagination { |
| margin-top: 5rem; |
| margin-bottom: 8rem; |
| display: flex; |
| justify-content: space-between; |
| } |
| .pagination__btn { |
| border: .1rem solid #0B6D88; |
| border-radius: .2rem; |
| padding: .3rem; |
| width: 8rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .pagination__btn__next::after { |
| content: '\00BB'; |
| margin-left: .6rem; |
| height: 1rem; |
| line-height: .9rem; |
| } |
| .pagination__btn__prev::before { |
| content: '\00AB'; |
| margin-right: .6rem; |
| height: 1rem; |
| line-height: .9rem; |
| } |
| .pagination__btn:hover { |
| opacity: .7; |
| } |
| .pagination__btn--disabled { |
| display: none; |
| } |
| /* Doc landing page */ |
| |
| .hero { |
| margin: 6rem 0 5rem; |
| display: flex; |
| justify-content: space-around; |
| } |
| .hero__diagram { |
| max-width: 50rem; |
| } |
| .hero__cta { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: flex-end; |
| flex-basis: 25rem; |
| flex-shrink: 0; |
| padding-bottom: 4rem; |
| } |
| .hero__cta .btn { |
| height: 5.8rem; |
| width: 25rem; |
| font-size: 2rem; |
| font-weight: 700; |
| margin-top: 1rem; |
| } |
| .cards { |
| display: flex; |
| height: 16rem; |
| max-width: 92rem; |
| margin-top: 6rem; |
| margin-bottom: 8rem; |
| } |
| .card { |
| flex: 1; |
| margin-right: 2rem; |
| border: .2rem solid #000000; |
| border-radius: .4rem; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| .card:hover { |
| border-color: #888888; |
| background: #888888 url('/images/icons/slash--white.png') no-repeat .5rem .5rem; |
| background-size: 2.5rem 2.4rem; |
| } |
| .cards .card:last-of-type { |
| margin-right: 0; |
| } |
| .card__icon, |
| .card__label { |
| display: flex; |
| } |
| .card__icon { |
| width: 8.1rem |
| } |
| .card__icon--hover { |
| display: none; |
| } |
| .card__label { |
| margin-top: 1rem; |
| color: #000000; |
| text-transform: uppercase; |
| } |
| .card:hover .card__label { |
| color: #FFFFFF; |
| } |
| .card:hover .card__icon { |
| display: none; |
| } |
| .card:hover .card__icon--hover { |
| display: flex; |
| } |
| .code-example { |
| box-sizing: border-box; |
| } |
| .code-example .btn-group { |
| display: inline-block; |
| margin-bottom: 2rem; |
| } |
| .code-example__snippet { |
| display: none; |
| } |
| .code-example .selected { |
| display: block; |
| } |
| .feature-list { |
| list-style: none; |
| padding: 0; |
| display: block; |
| overflow: hidden; |
| } |
| .feature-list li { |
| float: left; |
| width: 50%; |
| line-height: 3.2rem; |
| margin-bottom: 1rem; |
| } |
| .feature-list li::before { |
| content: ''; |
| display: block; |
| height: 2.8rem; |
| width: 2.8rem; |
| border: .2rem solid; |
| border-radius: 2rem; |
| float: left; |
| margin-right: .8rem; |
| background-image: url('/images/icons/check.png'); |
| background-size: contain; |
| } |
| |
| .download-version a{ |
| visibility: hidden; |
| padding-left:10px; |
| } |
| .svg-inline--fa.fa-w-16 { |
| width: 0.8em; |
| } |
| |
| #streams-use-case { |
| visibility: hidden; |
| opacity:0.7; |
| |
| } |
| |
| /* Responsive styles */ |
| |
| @media only screen and (max-width: 1240px) { |
| .main { |
| width: auto; |
| max-width: 100%; |
| margin: 0 2rem; |
| } |
| .page-home .main { |
| margin: 0; |
| } |
| .footer { |
| min-height: 6.4rem; |
| } |
| .footer__legal__one { |
| display: block; |
| } |
| .desc-item h2 { |
| margin-top: 4rem; |
| } |
| .news { |
| margin-left: 0; |
| margin-top: 4rem; |
| } |
| } |
| @media only screen and (min-width: 1126px) { |
| .video__series__grid { |
| flex-direction: row; |
| } |
| } |
| @media only screen and (max-width: 1125px) { |
| .news { |
| margin-top: 0; |
| } |
| .video__block { |
| padding-left: 0px!important; |
| padding-top: 15px; |
| } |
| .video__series__grid { |
| flex-direction: column; |
| margin: 0 auto 40px; |
| } |
| ul.video-list { |
| padding-left: 21px!important; |
| } |
| .desc { |
| margin-left: 0; |
| margin-bottom: 3rem; |
| } |
| .desc-item, |
| .desc-item:first-of-type { |
| float: none; |
| width: auto; |
| margin-left: 0; |
| display: block; |
| margin-bottom: 4rem; |
| } |
| .desc-item p { |
| width: auto; |
| } |
| .desc-item h2 { |
| margin-top: 0; |
| } |
| .desc-item:first-of-type h2 { |
| margin-top: 4rem; |
| } |
| .index { |
| padding-right: 0; |
| text-align: left; |
| } |
| .callout { |
| margin: 2rem 1.5rem; |
| } |
| .hero { |
| justify-content: flex-start; |
| } |
| .hero__diagram { |
| max-width: 42rem; |
| margin-right: 4rem; |
| } |
| .feature-list li { |
| width: 100%; |
| } |
| } |
| @media only screen and (max-width: 1035px) { |
| .apache-feather { |
| bottom: 2.8rem; |
| } |
| } |
| @media only screen and (max-width: 950px) { |
| .hero { |
| flex-direction: column; |
| } |
| .hero__diagram { |
| margin: 0; |
| max-width: 100%; |
| } |
| .hero__cta { |
| flex-direction: row; |
| justify-content: center; |
| flex-basis: inherit; |
| margin-top: 4rem; |
| } |
| .hero__cta .btn:first-of-type { |
| margin-right: 1rem; |
| } |
| .card { |
| margin-right: 1rem; |
| } |
| } |
| @media only screen and (max-width: 800px) { |
| .kafka-diagram { |
| width: 80%; |
| min-width: 28rem; |
| height: auto; |
| } |
| .callout { |
| width: 60%; |
| min-width: 21rem; |
| } |
| .callout::before { |
| right: 25%; |
| } |
| .footer { |
| min-height: 7.6rem; |
| } |
| .footer__legal__two { |
| display: block; |
| } |
| .hero__cta .btn { |
| font-size: 1.5rem; |
| font-weight: 400; |
| height: auto; |
| } |
| .cards { |
| flex-direction: column; |
| margin-top: 4rem; |
| height: auto; |
| margin-bottom: 4rem; |
| } |
| .card { |
| margin-right: 0; |
| margin-bottom: 1rem; |
| min-height: 10rem; |
| flex-direction: row; |
| justify-content: flex-start; |
| } |
| .card__icon { |
| width: 7rem; |
| margin: 0 2rem 0 2rem; |
| } |
| .card__label { |
| margin: 0; |
| } |
| } |
| @media only screen and (max-width: 650px) { |
| html, |
| body { |
| overflow-y: auto; |
| -webkit-overflow-scrolling: touch; |
| } |
| .main { |
| padding: 0 1rem; |
| margin: 0; |
| } |
| .page-home .main { |
| padding: 0; |
| } |
| .kafka-diagram { |
| display: block; |
| margin: 0 auto; |
| } |
| .callout { |
| margin: 2rem auto; |
| } |
| .right { |
| padding-bottom: 10rem; |
| } |
| .navindicator { |
| min-width: 32rem; |
| position: absolute; |
| top: -0.8rem; |
| left: 0; |
| width: 100%; |
| text-align: center; |
| z-index: 2; |
| } |
| .navindicator__item { |
| height: .2rem; |
| width: calc(79% / 12); |
| /* Note: width of mobile nav indicator should be divided by number of top level pages */ |
| |
| background-color: #888888; |
| display: inline-block; |
| margin: 0 .5%; |
| } |
| .navindicator__item.selected { |
| background-color: #FFFFFF; |
| } |
| nav { |
| display: block; |
| position: fixed; |
| background-color: #000000; |
| bottom: 0; |
| left: 0; |
| z-index: 1; |
| width: 100%; |
| } |
| .nav-scroller { |
| white-space: nowrap; |
| overflow-y: hidden; |
| overflow-x: scroll; |
| -webkit-overflow-scrolling: touch; |
| box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3); |
| } |
| .nav__inner { |
| width: 2000px; |
| } |
| .nav__item, |
| .nav__item:first-of-type { |
| color: #888888; |
| float: left; |
| padding: 2.6rem 1.1rem 1.8rem; |
| border: none; |
| } |
| .nav__item.selected, |
| .nav__item:hover { |
| color: #FFFFFF; |
| } |
| .nav__item::after, |
| .nav__item.selected::after, |
| nav.hovering .nav__item:hover::after, |
| nav .btn, |
| .social-links, |
| .footer { |
| display: none; |
| } |
| .nav__item__with__subs .nav__item:first-of-type, |
| .nav__item .nav__item { |
| padding: 0; |
| } |
| .nav__sub__item { |
| margin-left: 2rem; |
| line-height: 2.2rem; |
| } |
| .right { |
| margin: 0; |
| min-height: auto; |
| } |
| } |
| @media only screen and (max-width: 460px) { |
| body { |
| font-size: 1.2rem; |
| } |
| h1 { |
| font-size: 3.6rem; |
| } |
| h2, |
| h3, |
| h4 { |
| font-size: 1.6rem; |
| } |
| .logo { |
| width: 21.667rem; |
| height: auto; |
| } |
| .desc-item, |
| .desc-item:first-of-type { |
| margin-bottom: 2rem; |
| } |
| .grid__item { |
| width: 96% !important; |
| position: relative !important; |
| float: left !important; |
| top: auto !important; |
| left: auto !important; |
| margin-bottom: 2rem; |
| } |
| .btn-group a { |
| min-width: 0; |
| padding: 0 1rem; |
| } |
| .hero { |
| margin-bottom: 0; |
| } |
| .feature-list li { |
| line-height: 2.2rem; |
| } |
| .feature-list li:before { |
| height: 2rem; |
| width: 2rem; |
| } |
| } |
| @media only screen and (max-width: 390px) { |
| .hero__cta { |
| flex-direction: column; |
| } |
| .hero__cta .btn { |
| width: 100%; |
| } |
| .hero__cta .btn:first-of-type { |
| margin-right: 0; |
| } |
| } |
| .customer__cards { |
| display: flex; |
| height: 30rem; |
| max-width: 92rem; |
| } |
| .customer_cards_2 { |
| margin-top: 4.2rem; |
| display: flex; |
| height: 40rem; |
| max-width: 92rem; |
| } |
| .customer__card { |
| flex: 1; |
| margin-right: 2rem; |
| border-radius: .4rem; |
| display: flex; |
| flex-direction: column; |
| align-items: left; |
| text-align: justify; |
| } |
| .customer-right { |
| margin-right: 0rem; |
| } |
| .customer__card__icon { |
| align-items: center; |
| border: 1px solid #888; |
| border-radius: 4px; |
| display: flex; |
| height: 80px; |
| justify-content: center; |
| width: 268px; |
| } |
| .green_card { |
| background-color: #00b900; |
| } |
| .customer__card__label { |
| color: #000000; |
| margin-top: 2.4rem; |
| display: flex; |
| } |
| /* Streams page - adding video & cusomter logos*/ |
| |
| .sticky-top .active-menu-item { |
| width: 108px; |
| height: 2px; |
| border-bottom: solid 4px #000000; |
| color: #000!important; |
| padding-bottom: 0; |
| } |
| .sticky-top a { |
| color: #8c8888; |
| margin-top: 16px; |
| height: 28px; |
| font-family: Roboto; |
| font-size: 15px; |
| line-height: 1.87; |
| text-align: left; |
| margin-right: 30px; |
| text-transform: uppercase; |
| } |
| .sticky-top { |
| overflow-y: hidden; |
| -webkit-overflow-scrolling: touch; |
| } |
| .sticky-top > div { |
| height: auto !important; |
| } |
| .video__series__grid { |
| width: 92%; |
| display: -webkit-flex; |
| /* Safari */ |
| |
| display: flex; |
| margin-bottom: 60px; |
| /*flex-direction: row;*/ |
| } |
| .video-list li { |
| display: list-item; |
| font-family: Roboto; |
| font-size: 15px; |
| line-height: 2.67; |
| text-align: left; |
| color: #d8d8d8; |
| text-transform: capitalize; |
| } |
| .video-list .active { |
| color: #000; |
| } |
| .video-list .active:before { |
| background-color: #000; |
| border: solid 2px #000; |
| } |
| ul.video-list { |
| list-style-type: none; |
| /* Setup the counter. */ |
| |
| counter-reset: num; |
| padding-left: 0px; |
| } |
| .video-list { |
| margin-bottom: 1rem; |
| } |
| .video-list li:before { |
| /* Advance the number. */ |
| |
| counter-increment: num; |
| /* Use the counter number as content. */ |
| |
| content: counter(num); |
| color: #fff; |
| background-color: #d8d8d8; |
| width: 50px; |
| border-radius: 50%; |
| padding: 5px 10px; |
| margin-right: .8rem; |
| } |
| .grid__item__customer__description { |
| margin: 0 2rem 2.2rem; |
| padding-top: 0rem; |
| } |
| .stream__text { |
| margin-top: 5.2rem; |
| margin-bottom: 3.2rem; |
| } |
| .video__block h3 { |
| font-size: 15px; |
| line-height: 1.87; |
| font-family: Roboto; |
| } |
| .video__block { |
| padding-left: 42px; |
| } |
| .streams_intro { |
| margin-top: 42px; |
| margin-bottom: 15px; |
| } |
| .streams__description { |
| font-family: Roboto; |
| font-size: 15px; |
| line-height: 1.87; |
| text-align: justify; |
| color: #000000; |
| margin-bottom: 54px; |
| max-width: 91rem; |
| } |
| .separator { |
| width: 920px; |
| margin-right: 153px; |
| } |
| .customers__grid * { |
| box-sizing: border-box; |
| } |
| .customer__grid { |
| margin: 0; |
| padding-bottom: 20px; |
| } |
| .customer__item { |
| border-radius: 10px; |
| overflow: hidden; |
| padding: 0px; |
| width: 100%; |
| } |
| .streams_logo_grid { |
| border: solid 1px #888888; |
| } |
| .streams__ny__grid, |
| .streams__line__grid, |
| .streams__rabobank__grid, |
| .streams__zalando__grid { |
| height: auto; |
| } |
| .grid__logo__link { |
| display: block; |
| height: 8rem; |
| margin-bottom: 2rem; |
| text-align: center; |
| padding-top: 2rem; |
| } |
| .navbar-fixed { |
| position: fixed; |
| background-color: #fff; |
| color: #fff; |
| margin-top: 0px; |
| padding: 10px 0px 20px; |
| /*width: 92rem;*/ |
| |
| z-index: 50; |
| top: 0px; |
| overflow: auto; |
| width: 95%; |
| } |
| @media only screen and (max-width: 650px) { |
| .navbar-fixed { |
| position: fixed!important; |
| background-color: #fff; |
| color: #fff; |
| margin-top: 0px; |
| padding: 10px 0px 20px; |
| /*width: 92rem;*/ |
| |
| z-index: 50; |
| top: 0px; |
| left: 0; |
| z-index: 1; |
| width: 100%; |
| } |
| |
| } |
| .yt_series { |
| display: none; |
| width: 420px; |
| height: 315px; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border: none; |
| } |
| .video__series_grid .active { |
| display: block; |
| } |
| .first__app__btn { |
| background-color: #0B6D88; |
| color: #FFFFFF; |
| border-radius: .2rem; |
| -moz-border-radius: .2rem; |
| -webkit-border-radius: .2rem; |
| text-align: center; |
| text-transform: capitalize; |
| padding: .9rem 2rem; |
| box-sizing: border-box; |
| } |
| .first__app__btn:hover { |
| background-color: #888888; |
| border-color: #888888; |
| color: #FFFFFF; |
| } |
| /* Doc landing page */ |
| |
| .use-item-section { |
| margin: 2.2rem 0 3.8rem; |
| display: flex; |
| justify-content: flex-start; |
| } |
| .use__list__sec { |
| max-width: 50rem; |
| } |
| .first__app__cta { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| flex-basis: 25rem; |
| flex-shrink: 0; |
| padding-bottom: 4rem; |
| } |
| .first__app__cta .first__app__btn { |
| height: 5.8rem; |
| width: 25rem; |
| font-size: 2rem; |
| font-weight: 700; |
| margin-top: 1rem; |
| } |
| .use-feature-list { |
| list-style: none; |
| padding: 0; |
| display: block; |
| overflow: hidden; |
| padding-left: 1.5rem; |
| } |
| .use-feature-list li { |
| float: left; |
| line-height: 3rem; |
| margin-bottom: 1rem; |
| } |
| .use-feature-list li::before { |
| content: ''; |
| display: block; |
| height: 2.8rem; |
| width: 2.8rem; |
| border: .2rem solid; |
| border-radius: 2rem; |
| float: left; |
| margin-right: .8rem; |
| background-image: url('/images/icons/check.png'); |
| background-size: contain; |
| } |
| .video-number { |
| background-color: #d8d8d8; |
| color: #fff; |
| width: 50px; |
| border-radius: 50%; |
| padding: 5px 10px; |
| margin-right: .8rem; |
| } |
| .video__text { |
| font-family: Roboto; |
| font-size: 15px; |
| line-height: 2.67; |
| text-align: left; |
| color: #d8d8d8; |
| text-transform: capitalize; |
| } |
| .video__list .active .video-number { |
| background-color: #000; |
| color: #fff; |
| } |
| .video__list .active .video__text { |
| color: #000; |
| } |
| .video__item { |
| margin: 0px; |
| } |
| .yt__video__block { |
| -webkit-flex: 1; |
| /* Safari 6.1+ */ |
| |
| -ms-flex: 1; |
| /* IE 10 */ |
| |
| flex: 1; |
| } |
| .yt__video__inner__block { |
| position: relative; |
| padding-bottom: 56.25%; |
| padding-top: 0px; |
| height: 0; |
| overflow: hidden; |
| } |
| .extra__space{ |
| padding-bottom:2.8rem; |
| } |
| /* TODO: this may be repeatable -- let's pay attention to any new designs */ |
| .page-get-started .page-header { |
| margin-top: 10rem; |
| padding-top: 22rem; |
| } |
| .page-get-started .page-header-nav { |
| margin-bottom: 10rem; |
| } |
| .page-header { |
| margin-top: 5rem; |
| padding: 5rem 0; |
| width: 76.6rem; |
| margin: 0 auto; |
| } |
| .page-header-title, |
| .content-title { |
| font-family: Roboto; |
| font-weight: 900; |
| font-size: 3.8rem; |
| line-height: 4.5rem; |
| letter-spacing: 0.06rem; |
| text-transform: uppercase; |
| } |
| .page-header-title { |
| text-align: center; |
| } |
| .content-title { |
| margin-bottom: 2rem; |
| } |
| .page-header-text { |
| font-family: Roboto; |
| font-style: italic; |
| font-size: 2.1rem; |
| line-height: 3rem; |
| text-align: center; |
| } |
| .page-header-nav { |
| list-style-type: none; |
| display: flex; |
| flex-direction: row; |
| justify-content: center; |
| margin: 5rem 0 7rem; |
| padding: 0; |
| } |
| .page-header-nav-item { |
| display: inline-block; |
| margin: 0 1rem; |
| } |
| .page-header-nav-item-anchor { |
| display: flex; |
| width: 20rem; |
| height: 5.2rem; |
| justify-content: center; |
| align-items: center; |
| border: 0.2rem solid; |
| font-family: Roboto; |
| font-weight: bold; |
| font-size: 1.4rem; |
| line-height: 2rem; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| text-decoration: none; |
| } |
| .page-header-nav-item-anchor, |
| .page-header-nav-item-anchor:link { |
| color: var(--green); |
| } |
| .page-header-nav-item-anchor.current, |
| .page-header-nav-item-anchor.current:link { |
| background: var(--green); |
| color: #fff; |
| } |
| .page-header-video { |
| width: 76.6rem; |
| text-align: center; |
| } |
| .page-header-video-embed { |
| width: 48rem; |
| } |
| .page-get-started .content-subtitle { |
| font-style: italic; |
| font-size: 2.1rem; |
| } |
| .page-get-started .content-section-title { |
| font-weight: normal; |
| text-transform: none; |
| font-size: 1.8rem; |
| margin: 5rem 0 3.2rem; |
| } |
| .page-get-started .content-section-title::before { |
| content: " "; |
| width: 30px; |
| height: 4px; |
| background: var(--green); |
| display: block; |
| margin-bottom: 1.1rem; |
| } |
| .page-get-started .content-feature-list { |
| margin: 0; |
| list-style-type: none; |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| padding: 0; |
| } |
| .page-get-started .content-feature-item { |
| margin: 0; |
| width: 31.7%; |
| min-height: 19.5rem; |
| margin: 0; |
| padding: 3rem 3.5rem; |
| border: 0.2rem solid #A9CBD4; |
| display: flex; |
| align-content: flex-start; |
| flex-direction: column; |
| } |
| .page-get-started .content-feature-learn-more { |
| display: block; |
| margin-top: auto; |
| font-family: Roboto; |
| font-weight: bold; |
| font-size: 1.2rem; |
| line-height: 1.7rem; |
| text-decoration-line: underline; |
| text-transform: uppercase; |
| color: var(--green); |
| } |
| .page-get-started a.content-feature-learn-more:link { |
| color: var(--green); |
| } |
| .page-get-started .content-feature-title { |
| margin: 0 0 2.1rem; |
| font-family: Roboto; |
| font-weight: 900; |
| font-size: 1.8rem; |
| line-height: 2.1rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
| .page-get-started .content-feature-text { |
| font-family: "Roboto Condensed"; |
| font-size: 1.6rem; |
| line-height: 2.2rem; |
| margin-top: 0; |
| } |
| .page-get-started .content-feature-diagram { |
| width: 100%; |
| text-align: center; |
| padding: 3rem 0; |
| } |
| .page-get-started .content-feature-diagram-image { |
| width: 100%; |
| max-width: 64.5rem; |
| } |
| |
| /* Utilities */ |
| |
| .visually-hidden { |
| position: absolute !important; |
| height: 1px; |
| width: 1px; |
| overflow: hidden; |
| clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ |
| clip: rect(1px, 1px, 1px, 1px); |
| white-space: nowrap; /* added line */ |
| } |
| |
| /* Responsive styles */ |
| |
| @media only screen and (max-width: 1125px) { |
| .use-item-section { |
| justify-content: flex-start; |
| } |
| .use__list__sec { |
| max-width: 42rem; |
| margin-right: 4rem; |
| } |
| .use-feature-list li { |
| width: 100%; |
| } |
| .extra__space{ |
| padding-bottom:0rem; |
| } |
| .page-home .waves { |
| min-height: 24rem; |
| height: auto; |
| background-size: 100vw auto; |
| } |
| } |
| @media only screen and (max-width: 1000px) and (min-width: 461px) { |
| .page-home .content-bottom .content-section-list { |
| justify-content: space-around; |
| } |
| .page-home .content-bottom .content-section-item { |
| width: 40vw; |
| padding: 3vw; |
| } |
| .page-home .content-bottom .content-section-title { |
| margin-left: auto; |
| margin-right: auto; |
| width: 90vw; |
| padding-left: 3vw; |
| } |
| } |
| @media only screen and (max-width: 1000px) { |
| .page-streams .main { |
| margin: 0; |
| } |
| .content { |
| margin: 0 auto; |
| max-width: 95vw; |
| padding-top: 12rem; |
| } |
| .documentation--current .sticky-top { |
| white-space: normal; |
| overflow: auto; |
| } |
| .documentation--current .sticky-top .active-menu-item { |
| border-bottom: none; |
| font-weight: bold; |
| } |
| .documentation--current .sticky-top > div { |
| height: auto !important; /* override inline styles */ |
| } |
| } |
| @media only screen and (max-width: 950px) { |
| .use-item-section { |
| flex-direction: column-reverse; |
| margin: 0rem; |
| } |
| .use__list__sec { |
| margin: 0; |
| text-align: center; |
| max-width: 100%; |
| } |
| .use-feature-list li::before { |
| content: none; |
| } |
| .first__app__cta { |
| flex-direction: row; |
| justify-content: center; |
| flex-basis: inherit; |
| margin-top: 4rem; |
| } |
| .first__app__cta .first__app_btn:first-of-type { |
| margin-right: 1rem; |
| } |
| .content { |
| max-width: 90vw; |
| } |
| .page-home .content-top { |
| padding: 0 2rem; |
| margin-top: 10rem; |
| } |
| .page-home .waves { |
| min-height: 24rem; |
| background-size: 950px auto; |
| } |
| .header { |
| box-sizing: border-box; |
| position: fixed; |
| top: 0; |
| left: 0; |
| height: 8rem; |
| padding: 1.5rem; |
| z-index: 99; |
| text-align: center; |
| display: block; |
| background-color: var(--white); |
| } |
| .header.scrolled { |
| box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.38); |
| } |
| .page-home .content-home { |
| margin-top: 16rem; |
| } |
| .logo { |
| width: auto; |
| height: 5rem; |
| } |
| .top-nav-toggle { |
| display: inline-block; |
| position: absolute; |
| left: 1rem; |
| margin: 0.5rem; |
| } |
| .top-nav-toggle + .top-nav-container { |
| pointer-events: none; |
| position: absolute; |
| display: block; |
| text-align: left; |
| opacity: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 8rem; |
| width: 100vw; |
| height: calc(100vh - 8rem); |
| z-index: 99; |
| background: rgba(255, 255, 255, 0.95); |
| transition: all 0.35s; |
| overflow-x: hidden; |
| overflow: scroll; |
| } |
| .top-nav-toggle + .top-nav-container .top-nav { |
| margin-top: 0; |
| transition: all 0.35s; |
| background: transparent; |
| top: 10rem; |
| display: block; |
| overflow-y: auto; |
| } |
| .top-nav-toggle.active + .top-nav-container { |
| pointer-events: all; |
| opacity: 1; |
| } |
| .top-nav { |
| padding: 0.8rem 2.2rem; |
| margin-top: 0; |
| } |
| .top-nav-item { |
| margin-bottom: 1rem; |
| display: block; |
| } |
| .top-nav-list, |
| .top-nav-menu { |
| width: 100%; |
| position: static; |
| display: block; |
| box-shadow: none; |
| background: none; |
| transform: none; |
| left: 0; |
| text-align: left; |
| } |
| .top-nav-menu { |
| margin-left: 2rem; |
| } |
| .top-nav-item-anchor, |
| .top-nav-anchor { |
| width: auto; |
| text-align: left; |
| padding: 0.8rem 0; |
| font-size: 1.4rem; |
| font-weight: 400; |
| padding-left: 1rem; |
| } |
| .top-nav-download { |
| width: 78vw; |
| max-width: 30rem; |
| text-align: center; |
| margin: 3rem auto 0; |
| display: block; |
| position: static; |
| } |
| .docs-nav { |
| height: auto; |
| width: auto; |
| } |
| .documentation--current .docs-nav { |
| width: auto; |
| position: static; |
| margin-top: 0; |
| padding-top: 0; |
| text-transform: uppercase; |
| margin-bottom: 5rem; |
| overflow: hidden; |
| overflow-y: auto; |
| } |
| .documentation--current .toc-handle-container { |
| display: none; |
| } |
| .anchor-link, |
| .headerlink { |
| top: -10rem; |
| } |
| .quickstart-step { |
| border: 0.2rem solid var(--green); |
| padding: 1rem 2rem 2.5rem; |
| margin-bottom: 3rem; |
| } |
| .page-header-nav { |
| margin: 3rem auto; |
| display: block; |
| } |
| .page-header-nav-item { |
| width: 95vw; |
| margin: 0; |
| } |
| .page-header-nav-item-anchor { |
| width: 95vw; |
| padding: 1rem auto; |
| margin: 0; |
| } |
| .page-header { |
| margin-top: 3rem; |
| padding-top: 3rem; |
| width: 95vw; |
| margin: 0 auto; |
| } |
| .page-header-title, |
| .content-title { |
| font-size: 3rem; |
| line-height: 3.8rem; |
| } |
| .page-header-text { |
| font-size: 1.6rem; |
| line-height: 2.4rem; |
| } |
| .page-header-video { |
| width: 95vw; |
| height: auto; |
| } |
| .page-header-video-embed { |
| width: 95vw; |
| height: 24vh; |
| } |
| .content.documentation--current { |
| display: block; |
| } |
| .content.documentation--current .right { |
| width: 95vw; |
| margin: 0 auto; |
| max-width: none; |
| } |
| .page-home .content { |
| margin-top: 16rem; |
| } |
| .logo-link { |
| width: 100px; |
| height: 50px; |
| background-size: 93px auto; |
| background-repeat: no-repeat; |
| } |
| .content { |
| margin: 0 auto; |
| max-width: 95vw; |
| padding-top: 12rem; |
| } |
| .content-separator { |
| max-width: 95vw; |
| background-color: #969191; |
| border: none; |
| height: 1px; |
| } |
| #docs-top-link { |
| bottom: 1rem; |
| } |
| .podcast-list { |
| display: block; |
| } |
| .podcast-item { |
| display: flex; |
| flex-direction: row; |
| max-width: none; |
| margin-bottom: 2rem; |
| } |
| .podcast-figure { |
| display: inline-block; |
| width: 10rem; |
| height: 10rem; |
| margin-right: 1rem; |
| } |
| .podcast-figure-image { |
| display: inline-block; |
| width: 10rem; |
| height: 10rem; |
| max-width: none; |
| } |
| .podcast-title { |
| margin-bottom: .5rem; |
| } |
| .content-top-industry-full-list:hover .content-top-industry-full-list-tooltip, |
| .content-top-industry-full-list:active .content-top-industry-full-list-tooltip, |
| .content-top-industry-full-list-tooltip { |
| width: 90vw; |
| max-width: 450px; |
| white-space: normal; |
| } |
| } |
| @media only screen and (max-width: 800px) { |
| .first__app__cta .first__app_btn { |
| font-size: 1.5rem; |
| font-weight: 400; |
| height: auto; |
| } |
| .page-home .content-bottom { |
| padding-top: 1rem; |
| } |
| .page-home .content-bottom .content-section-item { |
| width: 47vw; |
| padding: 3vw; |
| } |
| .page-home .content-bottom .content-section-title { |
| margin-left: auto; |
| margin-right: auto; |
| width: 97vw; |
| padding-left: 3vw; |
| } |
| } |
| @media only screen and (max-width: 460px) { |
| .use-item-section { |
| margin-bottom: 0; |
| } |
| .use-feature-list li { |
| line-height: 2.2rem; |
| } |
| .use-feature-list li:before { |
| height: 2rem; |
| width: 2rem; |
| } |
| .page-home .content-top-industry-list { |
| flex-wrap: wrap; |
| justify-content: space-around; |
| } |
| .page-home .content-top-industry-item { |
| margin: 2rem 4rem; |
| } |
| .page-home .content-top-industry { |
| max-width: 26rem; |
| margin-left: auto; |
| margin-right: auto; |
| margin-bottom: 2rem; |
| } |
| .page-home .content-bottom .content-section-list { |
| justify-content: space-around; |
| } |
| .page-home .content-bottom .content-section-item { |
| margin-left: 2vw; |
| margin-right: 2vw; |
| margin-bottom: 3rem; |
| width: 80vw; |
| height: auto; |
| } |
| .page-home .content-bottom .content-section-title { |
| margin-left: auto; |
| margin-right: auto; |
| width: 80vw; |
| } |
| } |
| @media only screen and (max-width: 390px) { |
| .first__app__cta { |
| flex-direction: column; |
| } |
| .first__app__cta .first__app_btn { |
| width: 100%; |
| } |
| .first__app__cta .first__app_btn:first-of-type { |
| margin-right: 0; |
| } |
| } |
| @media only screen and (max-width: 1125px) { |
| .video__text { |
| display: none; |
| } |
| .video__list { |
| margin: 0 auto; |
| width: 200px; |
| padding-top: 20px; |
| text-align: center; |
| } |
| .video__item { |
| display: inline-block; |
| } |
| iframe { |
| width: 100%; |
| } |
| .sticky-top{ |
| overflow-x:scroll; |
| } |
| .video__block h3 { |
| display: none; |
| } |
| .video-list { |
| display: none; |
| } |
| } |
| @media only screen and (min-width: 1126px) { |
| .customers__grid { |
| -webkit-column-count: 2; |
| -moz-column-count: 2; |
| column-count: 2; |
| } |
| .customer__item { |
| break-inside: avoid; |
| } |
| .sticky-top{ |
| overflow-x:hidden; |
| } |
| } |
| |
| pre[class*="language-"].line-numbers { |
| position: relative; |
| padding-left: 3.8em; |
| counter-reset: linenumber; |
| } |
| |
| pre[class*="language-"].line-numbers > code { |
| position: relative; |
| white-space: inherit; |
| } |
| |
| .line-numbers .line-numbers-rows { |
| position: absolute; |
| pointer-events: none; |
| top: 0; |
| font-size: 100%; |
| left: -3.8em; |
| width: 3em; /* works for line-numbers below 1000 lines */ |
| letter-spacing: -1px; |
| border-right: 1px solid #999; |
| |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| |
| } |
| |
| .line-numbers-rows > span { |
| display: block; |
| counter-increment: linenumber; |
| } |
| |
| .line-numbers-rows > span:before { |
| content: counter(linenumber); |
| color: #999; |
| display: block; |
| padding-right: 0.8em; |
| text-align: right; |
| } |