/* Extra reset */ h1, h2, h3, h4, p, ul, ol, dl { margin: 0; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; position: relative; min-height: 100%; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } a { color: inherit; text-decoration: none; } body { background: #e6e6e6; color: #677987; font-weight: 600; font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 1; margin: 0 0 100px; } body.body-dark { background: #13171a; } h1 { font-size: 48px; font-weight: 600; color: #d14e4e; } h2 { font-size: 28px; font-weight: 600; } h3 { font-size: 24px; font-weight: 600; } h4 { font-size: 24px; font-weight: 600; } a { text-decoration: none; } p { margin-bottom: 20px; line-height: 1.4; } ul { margin-bottom: 20px; list-style: disc outside; } ul li { line-height: 1.5;} /* Wrappers */ .outer-wrapper { width: 1080px; margin: 0 auto; } .outer-wrapper::after { clear: both; content: ""; display: table; } .inner-wrapper { width: 850px; margin: 0 auto; } .cookbook-version-selector { height: 40px; padding: 6px 10px; background-color: #f5f5f5; border: 1px solid #d9d9d9; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Code blocks */ pre code { display: block; padding: 20px; font-size: 14px; line-height: 20px; } code { font-family: Consolas, Menlo, Courier, monospace; font-weight: normal; white-space: pre; background-color: #cecece; border-radius: 3px; color: #1d252a; padding: 2px; margin: 0 3px; } .install-instructions { font-family: "Maven Pro", sans-serif; display: block; padding: 20px; font-weight: 700; margin-left: 25px; margin-bottom: 25px; font-size: 18px; } .install-instructions:first-line { line-height: 0; } /* Forms */ form { border-bottom: 1px solid #d9d9d9; } /* Buttons */ .button { font-size: 18px; font-weight: 400; background-color: #d14e4e; color: #fff; padding: 10px 15px; border-radius: 3px; text-align: center; display: inline-block; } .button:hover { background-color: #bb3131; } #paginator .button { background-color: #e6e6e6; font-size: 14px; color: #1D252A; margin: 0 0; display: inline-block; float: left; padding: 10px 8px; } #paginator .button.disabled { pointer-events: none; background-color: #d14e4e; color: #fff; } /* Cookbook items */ .cookbook-item { width: 100%; border: 1px solid #d9d9d9; border-radius: 3px; background: #f5f5f5; font-size: 14px; font-weight: 600; margin-bottom: 30px; } .cookbook-item__titlebar { border-bottom: 1px solid #d9d9d9; padding: 15px 20px; } .cookbook-item__titlebar .item-title { display: inline-block; margin-right: 30px; font-size: 18px; font-weight: 700; color: #1d252a; } .cookbook-item__titlebar .item-title:last-child { float: right; margin-right: 0; } .cookbook-item__titlebar .item-title--small { font-size: 14px; font-weight: 600; color: #677987; } .cookbook-item__titlebar .item-title--light { color: #718493; } .cookbook-item__titlebar a:hover { color: #d14e4e; } .cookbook-item__content { padding: 15px 20px; font-size: 18px; border-bottom: 1px solid #d9d9d9; } .cookbook-item__footer { padding: 10px 20px; } .cookbook-item__footer::after { clear: both; content: ""; display: table; } .cookbook-item__action { float: right; } /* Detail main content */ .detail-content { width: 780px; float: left; padding-top: 70px; padding-bottom: 60px; } .detail-content__title { font-weight: 700; font-size: 30px; color: #677987; border-bottom: 1px solid #d9d9d9; padding-bottom: 10px; margin-bottom: 10px; } .detail-content__title span { font-size: 14px; font-weight: 600; padding-left: 30px; } /** Markdown Content **/ .markdown { word-wrap: break-word; font-size: 16px; } .markdown code { word-wrap: normal; overflow-x: scroll; } .markdown h1 { font-weight: 700; font-size: 36px; color: #1d252a; margin-bottom: 25px; } .markdown h2 { margin-bottom: 25px; font-size: 30px; color: #1d252a; } .markdown h3, h4, h5, h6 { margin-bottom: 20px; color: #1d252a; } .markdown a { color: #d14e4e; } .markdown a:hover { text-decoration: underline; } .markdown li p { white-space: pre-wrap; } .markdown table { margin-bottom: 20px; width: 100%; } .markdown table tr { border-bottom: 1px solid #cecece; } .markdown table tr:last-child { border-bottom: none; } .markdown th, td { padding: 10px 15px; text-align: left; } .dependency-list a:hover { color: #d14e4e; } .detail-content__tabs { border-top: 1px solid #d9d9d9; padding-top: 30px; margin-bottom: 20px; margin-left: 0; padding-left: 0; list-style-type: none; } .detail-content__tabs::after { clear: both; content: ""; display: table; } .detail-content__tabs li { float: left; margin-right: 20px; } .detail-content__tabs li:before { content: ""; padding-right: 0; } .detail-content__tabs a { color: #d14e4e; text-transform: uppercase; font-size: 14px; } .detail-content__tabs li.active, .detail-content__tabs li:hover { border-bottom: 3px solid #d14e4e; } /* Detail sidebar */ .detail-sidebar { padding: 10px; float: right; width: 275px; border: 1px solid #d9d9d9; border-radius: 3px; background: #f5f5f5; margin-top: 70px; font-size: 14px; font-weight: 600; } .detail-sidebar h3, .detail-sidebar h4, .detail-sidebar dt { font-size: 14px; font-weight: 700; margin-bottom: 5px; color: #677987; } .detail-sidebar__button { width: 100%; margin-top: 20px; } .detail-sidebar__halfbutton { width: 49%; font-size: 14px; margin-top: 20px; } /* Feature blocks */ .feature-block { padding-top: 90px; padding-left: 310px; color: #94a7b4; } .feature-block + .feature-block { padding-top: 100px; } .feature-block:nth-child(even) { padding-left: 0; padding-right: 310px; } .feature-block__title { font-size: 36px; } .feature-block__media { float: left; width: 250px; margin-left: -310px; } .feature-block:nth-child(even) .feature-block__media { float: right; margin-left: 0; margin-right: -310px; } .feature-block__body { font-family: "Maven Pro", sans-serif; font-weight: 400; padding-top: 25px; } .feature-block__body p { line-height: 1.2; } /* Footer */ .footer { background: #0e1113; color: #95a7b4; text-align: center; line-height: 62px; display: block; bottom: 0; width: 100%; position: absolute; } .footer__logo { display: inline-block; margin-left: 8px; position: relative; top: 2px; } /* App page header */ .header-slim { height: 220px; border-top: solid 5px #d14e4e; padding-top: 70px; background: url(../images/header-slim.jpg) bottom center no-repeat #1d252a; } .header-slim__container { padding-left: 540px; width: 1080px; margin: 0 auto; } .header-slim__subtitle { font-size: 28px; color: #fff; } /* Home page hero */ .home-hero { z-index: 0; height: 670px; text-align: center; text-shadow: 1px 0 1px rgba(0, 0, 0, 0.35); background: #333; overflow: hidden; position: relative; } .home-hero__inner { width: 766px; margin: 0 auto; height: 100%; position: relative; background: url(../images/home-hero-bg.png) no-repeat -550px 0 #27323a; } .home-hero__moon { position: absolute; left: 50px; top: 0; margin-top: 200px; width: 64px; height: 80px; background: url(../images/home-hero-moon.png) no-repeat 0 0; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .home-hero__buildings-bg { position: absolute; left: 0px; bottom: 0; width: 902px; height: 348px; background: url(../images/home-hero-buildings-bg.png) no-repeat 0 0; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .home-hero__title { font-weight: 700; padding-top: 60px; } .home-hero__subtitle { font-size: 24px; color: #fff; } .home-hero__title + .home-hero__subtitle { margin-top: -4px; } .home-hero__bg { height: 100%; position: absolute; bottom: 0; background: none no-repeat 0 100% #1d252a; z-index: 1; width: 0; } .home-hero__bg--left { margin-left: -999px; padding-left: 999px; left: 0; background-position: 100% 100%; background-image: url(../images/home-hero-bg-left.png); } .home-hero__bg--right { margin-right: -999px; padding-right: 999px; right: 0; background-image: url(../images/home-hero-bg-right.png); } .home-hero__stars { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .home-hero__stars .home-hero__star { position: absolute; left: 200px; top: 100px; background: #f9f7b2; width: 4px; height: 4px; border-radius: 50px; opacity: 0; -webkit-animation: twinkle 5s 1s ease-in; -moz-animation: twinkle 5s 1s ease-in; animation: twinkle 5s 1s ease-in; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .home-hero__stars .home-hero__star:nth-child(2) { left: 250px; top: 120px; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .home-hero__stars .home-hero__star:nth-child(3) { top: 125px; left: 280px; width: 2px; height: 2px; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; animation-delay: 4s; } .home-hero__stars .home-hero__star:nth-child(4) { top: 220px; left: 320px; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; animation-delay: 4s; } .home-hero__stars .home-hero__star:nth-child(5) { left: 600px; top: 250px; opacity: 1; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .home-hero__stars .home-hero__star:nth-child(6) { left: 630px; top: 210px; opacity: 1; width: 2px; height: 2px; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; animation-delay: 4s; } .home-hero__stars .home-hero__star:nth-child(7) { left: 550px; top: 255px; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; animation-delay: 4s; } .home-hero__stars .home-hero__star:nth-child(8) { left: 400px; top: 225px; } .home-hero__buildings { background-image: url(../images/home-hero-buildings.png); background-repeat: no-repeat; background-position: 70px 0; width: 902px; height: 392px; position: absolute; bottom: -14px; } /* Lamp post */ .wrapper-for-lamppost { position: relative; } .wrapper-for-lamppost__inner { position: relative; height: 100%; } .lamppost { position: absolute; width: 439px; height: 364px; bottom: -47px; right: -69px; } .lamppost__main, .lamppost__bulb, .lamppost__highlight { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .lamppost__main { background: url(../images/lamppost.png) no-repeat 0 0; } .lamppost__bulb { background: url(../images/lamppost-bulb.png) no-repeat 0 0; -webkit-animation: flicker 5s 1s ease-in; -moz-animation: flicker 5s 1s ease-in; animation: flicker 5s 1s ease-in; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .lamppost__highlight { background: url(../images/lamppost-highlight.png) no-repeat 0 0; -webkit-animation: flicker 5s 1s ease-in; -moz-animation: flicker 5s 1s ease-in; animation: flicker 5s 1s ease-in; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .ground-highlight { background: url(../images/ground-highlight.png) no-repeat 0 0; width: 621px; height: 31px; position: absolute; bottom: -31px; right: -131px; -webkit-animation: flicker 5s 1s ease-in; -moz-animation: flicker 5s 1s ease-in; animation: flicker 5s 1s ease-in; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Home main */ .home-main { padding-bottom: 60px; background: url(../images/main-gradient.png) no-repeat 0 0; } /* Supported platform list */ .platform-list { float: left; } .platform-list dt { font-size: 12px; text-transform: uppercase; padding-bottom: 5px; } .platform-list dd { float: left; display: inline; margin-left: 0; margin-right: 5px; } /* Cookbook results title */ .results-title { padding: 20px 0 25px; font-family: "Maven Pro", sans-serif; } /* Scroll reveal */ .scroll-reveal { opacity: 0; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease; -webkit-transform: translate3d(0px, 50px, 0px); -moz-transform: translate3d(0px, 50px, 0px); -ms-transform: translate3d(0px, 50px, 0px); -o-transform: translate3d(0px, 50px, 0px); transform: translate3d(0px, 50px, 0px); } .scroll-reveal.is-visible { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } /* Search bar */ .search { width: 860px; display: table; margin: 0 auto; padding: 45px 0 40px; table-layout: fixed; font-size: 24px; font-weight: 400; } .search__td { display: table-cell; vertical-align: top; } .search__td input { width: 100%; height: 58px; line-height: 58px; padding-left: 70px; border: none; color: #fff; border-top-left-radius: 3px; border-bottom-left-radius: 3px; background: url(../images/icon-search.png) 20px 20px no-repeat #677987; outline: none; } .search__td input::-webkit-input-placeholder { color: #fff; } .search__td input::-moz-placeholder { color: #fff; } .search__td input:-moz-placeholder { color: #fff; } .search__td input:-ms-input-placeholder { color: #fff; } .search__td button { line-height: 60px; padding: 0 20px; background-color: #d14e4e; color: #fff; border: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .search__td button:hover { background: #bb3131; } .search__td--btn { width: 115px; } /* Fixed top bar */ .top-bar { position: fixed; z-index: 1; top: 0; left: 0; height: 65px; width: 100%; background: rgba(24, 31, 34, 0.8); } .top-bar__inner { display: table; table-layout: fixed; height: 100%; } .top-bar__cell { display: table-cell; vertical-align: middle; width: 50%; } .top-bar__actions { text-align: right; } .top-bar__logo { width: 242px; height: auto; display: block; } .after-top-bar { padding-top: 65px; } /** Normalizing Icon Names **/ .icon-apple, .icon-laptop, .icon-question, .icon-windows { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-apple:before { content: "\f179"; } .icon-laptop:before { content: "\f109"; } .icon-question:before { content: "\f128" } .icon-windows:before { content: "\f17a"; }