.rls-l { font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } .rls-sb { font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } .rls-xb { font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; } .os { font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } /*html{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }*/ body { color: #000000; background-color: #000000; font-size: 15px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } h1 { font-size: 42px; line-height: 42px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; margin-bottom: 24px; } h3 { font-size: 28px; line-height: 28px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } .btn-serf { color: #ffffff !important; background-color: #4592c5; border-radius: 4px; } .highlight { margin-bottom: 18px; } pre { background-color: #000000; color: #ffffff; font-size: 14px; font-weight: normal; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; border: none; padding: 20px; margin-bottom: 0; } @media (max-width: 992px) { .container { max-width: 970px; } } .navbar-nav { margin: 0; } .navbar-right { float: right !important; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } .center { text-align: center; } body.page-sub .terra-btn { background-color: #822ff7; } body.page-sub #header { height: 90px; background-color: #822ff7; } body.page-sub #header .navbar-collapse { background-color: rgba(255, 255, 255, 0.98); } body.page-sub #header .nav-logo { height: 90px; } body.page-sub #header .nav-white { height: 90px; background-color: white; } body.page-sub #header .main-links.navbar-nav { float: left !important; } body.page-sub #header .main-links.navbar-nav li > a { color: black; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } body.page-sub #header .buttons.nav > li > a, body.page-sub #header .buttons.nav > li > a { -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } body.page-sub #header .buttons.nav > li > a:hover, body.page-sub #header .buttons.nav > li > a:focus { background-color: black; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } body.page-sub #header .main-links.nav > li > a:hover, body.page-sub #header .main-links.nav > li > a:focus { color: #822ff7; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } #header { position: relative; color: #ffffff; text-rendering: optimizeLegibility; margin-bottom: 0; } #header.navbar-static-top { height: 70px; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1000; } #header a { color: #ffffff; } #header .navbar-toggle { margin-top: 26px; margin-bottom: 14px; margin-right: 0; border: 2px solid #ffffff; border-radius: 0; } #header .navbar-toggle .icon-bar { border: 1px solid #ffffff; border-radius: 0; } #header .navbar-brand.logo { margin-top: 15px; padding: 5px 0 0 68px; height: 56px; line-height: 56px; font-size: 24px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; text-transform: uppercase; background: url(../images/consul-header-logo.png) 0 0 no-repeat; background-image: url("../images/header-logo.png"); background-size: 50px 56px; -webkit-font-smoothing: default; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #header .navbar-brand.logo { background-image: url("../images/header-logo@2x.png"); background-size: 50px 56px; } } #header .navbar-nav { -webkit-font-smoothing: antialiased; } #header .navbar-nav li { position: relative; } #header .navbar-nav li > a { font-size: 12px; text-transform: uppercase; letter-spacing: 3px; padding-left: 22px; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } #header .navbar-nav li.first > a { padding-left: 15px; } #header .nav > li > a:hover, #header .nav > li > a:focus { background-color: transparent; color: #ae79fa; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } #header .main-links.navbar-nav { margin-top: 28px; } #header .main-links.navbar-nav li + li { padding-left: 6px; } #header .main-links.navbar-nav li + li::before { content: ""; position: absolute; left: 0; top: 7px; width: 1px; height: 12px; background-color: #822ff7; -webkit-transform: skewY(24deg); -moz-transform: skewY(24deg); -ms-transform: skewY(24deg); -o-transform: skewY(24deg); transform: skewY(24deg); padding-right: 0; } #header .main-links.navbar-nav li > a { line-height: 26px; margin: 0 8px; padding: 0 0 0 4px; } #header .buttons.navbar-nav { margin-top: 25px; margin-left: 30px; } #header .buttons.navbar-nav li.first { margin-right: 13px; } #header .buttons.navbar-nav li.download a { padding-left: 30px; background: url(../images/header-download-icon.png) 12px 8px no-repeat; background-image: url("../images/header-download-icon.png"); background-size: 12px 13px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #header .buttons.navbar-nav li.download a { background-image: url("../images/header-download-icon@2x.png"); background-size: 12px 13px; } } #header .buttons.navbar-nav li.github a { background: url(../images/header-github-icon.png) 12px 7px no-repeat; background-image: url("../images/header-github-icon.png"); background-size: 12px 13px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #header .buttons.navbar-nav li.github a { background-image: url("../images/header-github-icon@2x.png"); background-size: 12px 13px; } } #header .buttons.navbar-nav li > a { color: white; padding-top: 4px; padding-bottom: 4px; padding-left: 32px; padding-right: 12px; letter-spacing: 0.05em; } @media (min-width: 1200px) { #header .main-links.navbar-nav { margin-top: 28px; } #header .main-links.navbar-nav li + li { padding-left: 6px; } #header .main-links.navbar-nav li + li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 8px; background-color: #822ff7; -webkit-transform: skewY(24deg); -moz-transform: skewY(24deg); -ms-transform: skewY(24deg); -o-transform: skewY(24deg); transform: skewY(24deg); padding-right: 8px; } #header .main-links.navbar-nav li > a { line-height: 26px; margin: 0 12px; padding: 0 0 0 4px; } } @media (min-width: 992px) { .collapse { margin-top: 8px; } .page-home #header .main-links.navbar-nav li + li { padding-left: 6px; } .page-home #header .main-links.navbar-nav li + li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 8px; background-color: #822ff7; -webkit-transform: skewY(24deg); -moz-transform: skewY(24deg); -ms-transform: skewY(24deg); -o-transform: skewY(24deg); transform: skewY(24deg); padding-right: 8px; } } @media (min-width: 768px) and (max-width: 992px) { body.page-home .nav-logo { width: 30%; } body.page-home .nav-white { margin-top: 8px; width: 70%; } body.page-home .buttons.navbar-nav li > a { padding-right: 4px !important; text-indent: -9999px; white-space: nowrap; } } @media (max-width: 992px) { #header .navbar-brand.logo span { width: 120px; height: 39px; margin-top: 12px; background-size: 120px 39px; } } @media (max-width: 768px) { body.page-sub #header .nav-white { background-color: transparent; } #header .buttons.navbar-nav { float: none !important; margin: 0; padding-bottom: 0 !important; } #header .buttons.navbar-nav li.first { margin-right: 0; } #header .buttons.navbar-nav, #header .main-links.navbar-nav { display: block; padding-bottom: 15px; } #header .buttons.navbar-nav li, #header .main-links.navbar-nav li { display: block; float: none; margin-top: 15px; } #header .buttons.navbar-nav .li-under a::after, #header .main-links.navbar-nav .li-under a::after, #header .buttons.navbar-nav li + li::before, #header .main-links.navbar-nav li + li::before { display: none; } #header .main-links.navbar-nav { float: left !important; } #header .main-links.navbar-nav li > a { padding: 0; padding-left: 0; line-height: 22px; } } @media (max-width: 763px) { .navbar-static-top .nav-white { background-color: rgba(0, 0, 0, 0.5); } } @media (max-width: 320px) { #header .navbar-brand.logo { padding: 0 0 0 54px !important; font-size: 20px !important; line-height: 42px !important; margin-top: 23px !important ; background-image: url("../images/header-logo.png"); background-size: 39px 44px; } #feature-auto .terminal-text { line-height: 48px !important; font-size: 20px !important; } } @media (max-width: 320px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 320px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 320px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 320px) and only screen and (min-device-pixel-ratio: 2), (max-width: 320px) and only screen and (min-resolution: 192dpi), (max-width: 320px) and only screen and (min-resolution: 2dppx) { #header .navbar-brand.logo { background-image: url("../images/header-logo@2x.png"); background-size: 39px 44px; } } #footer-wrap { background-color: white; padding: 0 0 50px 0; } body.page-home #footer { margin-top: -40px; } #footer { padding: 140px 0 40px; color: black; background-color: white; } #footer .skew { -webkit-transform: skewY(-2deg); -moz-transform: skewY(-2deg); -ms-transform: skewY(-2deg); -o-transform: skewY(-2deg); transform: skewY(-2deg); } #footer > .container.skew { -webkit-transform: skewY(2deg); -moz-transform: skewY(2deg); -ms-transform: skewY(2deg); -o-transform: skewY(2deg); transform: skewY(2deg); } #footer a { color: black; } #footer .footer-links { margin-bottom: 20px; } #footer .footer-links .li-under a:hover::after, #footer .footer-links .li-under a:focus::after { opacity: 1; -webkit-transform: skewY(15deg) translateY(8px); -moz-transform: skewY(15deg) translateY(8px); transform: skewY(15deg) translateY(8px); } #footer .footer-links .li-under a::after { background-color: #822ff7; } #footer .footer-links li a { text-transform: uppercase; font-size: 12px; letter-spacing: 3px; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; font-weight: 400; } #footer .footer-links li a:hover { color: #822ff7; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; background-color: transparent; } #footer .buttons.navbar-nav { float: none; display: inline-block; margin-bottom: 30px; margin-top: 0px; } #footer .buttons.navbar-nav li.first { margin-right: 12px; } #footer .buttons.navbar-nav li.download a { background: url(../images/icon-download-purple.png) 8px 6px no-repeat; background-image: url("../images/icon-download-purple.png"); background-size: 20px 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer .buttons.navbar-nav li.download a { background-image: url("../images/icon-download-purple@2x.png"); background-size: 20px 20px; } } #footer .buttons.navbar-nav li.github a { background: url(../images/icon-github-purple.png) 8px 6px no-repeat; background-image: url("../images/icon-github-purple.png"); background-size: 20px 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer .buttons.navbar-nav li.github a { background-image: url("../images/icon-github-purple@2x.png"); background-size: 20px 20px; } } #footer .buttons.navbar-nav li > a { padding-top: 6px; padding-bottom: 6px; padding-left: 40px; } #footer .footer-hashi { float: right; padding-top: 5px; letter-spacing: 2px; } #footer .footer-hashi a { color: black; font-weight: 700; } #footer .footer-hashi span { margin-right: 10px; } #footer .footer-hashi .hashi-logo { display: inline-block; vertical-align: middle; } #footer .footer-hashi .hashi-logo i { display: inline-block; width: 37px; height: 40px; background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat; background-image: url("../images/footer-hashicorp-logo.png"); background-size: 37px 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer .footer-hashi .hashi-logo i { background-image: url("../images/footer-hashicorp-logo@2x.png"); background-size: 37px 40px; } } .page-sub #footer-wrap { padding: 0; } .page-sub #footer { padding: 140px 0 100px; background-color: #000000; transform: none; } .page-sub #footer > .container { transform: none; } .page-sub #footer a { color: white; } .page-sub #footer .footer-hashi { color: white; } .page-sub #footer .footer-hashi .hashi-logo i { background: url(../images/footer-hashicorp-white-logo.png) 0 0 no-repeat; background-image: url("../images/footer-hashicorp-white-logo.png"); background-size: 37px 40px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .page-sub #footer .footer-hashi .hashi-logo i { background-image: url("../images/footer-hashicorp-white-logo@2x.png"); background-size: 37px 40px; } } @media (max-width: 992px) { .page-sub #footer .footer-hashi, #footer .footer-hashi { padding-top: 14px; } .page-sub #footer .footer-hashi span, #footer .footer-hashi span { margin-right: 6px; } .page-sub #footer .footer-hashi .hashi-logo i, #footer .footer-hashi .hashi-logo i { margin-top: -6px; width: 20px; height: 22px; background-size: 20px 22px; } } @media (max-width: 768px) { #footer { padding: 100px 0 40px; text-align: center; } #footer .footer-links { float: none; display: inline-block; } #footer .footer-hashi { float: none; display: inline-block; } #footer .footer-hashi .pull-right { float: none !important; } } @media (max-width: 320px) { #footer { text-align: center; } #footer .footer-links .li-under { float: none !important; } } #jumbotron-mask { position: relative; z-index: 0; height: 700px; margin-top: -70px; background-color: black; } #jumbotron { position: relative; height: 700px; padding-top: 0; padding-bottom: 0; color: #ffffff; } #jumbotron.static { background-image: url(../images/bg-galaxy.jpg); background-position: 50% 50%; } #jumbotron.static .jumbotron-content { background-image: url(../images/bg-static.png); background-size: cover; background-position: 50% 50%; } #jumbotron .terraform-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; -ms-transition: opacity 2s ease-out; -o-transition: opacity 2s ease-out; transition: opacity 2s ease-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #jumbotron .jumbotron-content { position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #jumbotron .galaxy-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(../images/bg-galaxy.jpg); /* background-size:cover; */ background-position: 50% 50%; opacity: 0; -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; -ms-transition: opacity 2s ease-out; -o-transition: opacity 2s ease-out; transition: opacity 2s ease-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #jumbotron .galaxy-bg.show { opacity: 1; } .tag-line { position: absolute; width: 100%; top: 540px; color: #fff; text-align: center; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .animated-logo { position: absolute; z-index: 200; top: 50%; left: 50%; width: 140px; height: 140px; margin: -60px 0 0 -115px; opacity: 1; -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -ms-transition: -ms-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); } .state-one .animated-logo { -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); } .state-one.state-two.state-three.state-four .animated-logo { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); -moz-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); -ms-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); -o-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); } .state-one.state-two.state-three.state-four .white-block { background-color: #ffffff; } .white-block { position: absolute; width: 68px; height: 68px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* background-color:rgba(255,0,0,0.3); */ background-color: #fff; background-color: rgba(255, 255, 255, 0); border: 1px solid #fff; -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out; -moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out, background-color 300ms ease-out; -ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out, background-color 300ms ease-out; -o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out, background-color 300ms ease-out; transition: opacity 300ms ease-out, transform 300ms ease-out, background-color 300ms ease-out; } .block-1, .block-2, .block-3, .block-4 { top: 0; left: 72px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .block-1 { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0, 0); -moz-transform: translate3d(0, 0, 0) scale(0, 0); -ms-transform: translate3d(0, 0, 0) scale(0, 0); -o-transform: translate3d(0, 0, 0) scale(0, 0); transform: translate3d(0, 0, 0) scale(0, 0); } .block-2 { opacity: 0; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0) scale(0, 0); -moz-transform: translate3d(0, 0, 0) scale(0, 0); -ms-transform: translate3d(0, 0, 0) scale(0, 0); -o-transform: translate3d(0, 0, 0) scale(0, 0); transform: translate3d(0, 0, 0) scale(0, 0); } .block-3 { opacity: 0; top: 72px; -webkit-transform: translate3d(0, 0, 0) scale(0, 0); -moz-transform: translate3d(0, 0, 0) scale(0, 0); -ms-transform: translate3d(0, 0, 0) scale(0, 0); -o-transform: translate3d(0, 0, 0) scale(0, 0); transform: translate3d(0, 0, 0) scale(0, 0); } .block-4 { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); -moz-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); -ms-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); -o-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); } .state-one.state-two .block-1 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); -moz-transform: translate3d(0, 0, 0) scale(1, 1); -ms-transform: translate3d(0, 0, 0) scale(1, 1); -o-transform: translate3d(0, 0, 0) scale(1, 1); transform: translate3d(0, 0, 0) scale(1, 1); } .state-one .block-2 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); -moz-transform: translate3d(0, 0, 0) scale(1, 1); -ms-transform: translate3d(0, 0, 0) scale(1, 1); -o-transform: translate3d(0, 0, 0) scale(1, 1); transform: translate3d(0, 0, 0) scale(1, 1); } .state-one.state-two.state-three .block-3 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); -moz-transform: translate3d(0, 0, 0) scale(1, 1); -ms-transform: translate3d(0, 0, 0) scale(1, 1); -o-transform: translate3d(0, 0, 0) scale(1, 1); transform: translate3d(0, 0, 0) scale(1, 1); } .cursor { font-weight: bold; -webkit-animation: Blink 800ms infinite; -moz-animation: Blink 800ms infinite; -ms-animation: Blink 800ms infinite; -o-animation: Blink 800ms infinite; animation: Blink 800ms infinite; } @-webkit-keyframes Blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes Blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes Blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes Blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } @keyframes Blink { 0% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } .outline-btn { background-color: transparent; color: #ffffff; border: 2px solid #ffffff; text-decoration: none !important; -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } .outline-btn.purple { color: #822ff7; border: 2px solid #822ff7; } .outline-btn:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.2); -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } .outline-btn:hover.purple { background-color: rgba(255, 255, 255, 0.5); } .terra-btn { background-color: rgba(130, 47, 247, 0.36); -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .terra-btn:hover { background-color: rgba(130, 47, 247, 0.8); -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /*.li-under a::after { position: absolute; top: 68%; left: 50%; margin-left: -4px; width: 6px; height: 6px; background-color: white; content: ''; opacity: 0; text-decoration: none; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .li-under a:hover::after, .li-under a:focus::after { opacity: 1; -webkit-transform: skewY(15deg) translateY(10px); -moz-transform: skewY(15deg) translateY(10px); transform: skewY(15deg) translateY(10px); }*/ /*body.page-home{ background-color: #f8f8f8; }*/ .feature { padding: 240px 0; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } .feature h2 { text-align: right; font-size: 44px; line-height: 44px; letter-spacing: 2px; text-transform: uppercase; color: #822ff7; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } .feature p { font-size: 16px; letter-spacing: 1px; line-height: 1.5em; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } .feature .icn { display: block; width: 186px; height: 272px; margin: 0 auto; background-position: center 0; background-repeat: no-repeat; } #feature-auto { padding: 200px 0 300px; margin-top: -36px; background: #ffffff url(../images/white-wireframe.png) center top no-repeat; background-size: cover; -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #feature-auto > .container { -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #feature-auto h2 { font-size: 43px; } #feature-auto p { text-align: right; padding-left: 100px; } #feature-auto .terminal-text { background: black; color: white; line-height: 88px; text-align: center; margin: 81px 20px 0; font-size: 30px; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; } #feature-iterate { margin-top: -80px; padding: 280px 0 360px; color: white; background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat; border-top: 2px solid white; border-bottom: 2px solid #822ff7; background-size: cover; -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #feature-iterate > .container { -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #feature-iterate p { text-align: right; padding-left: 120px; font-weight: 100; } #feature-iterate .it-icon { margin-top: 40px; } #feature-iterate .t-block { background-color: #ffffff; width: 80px; height: 80px; -webkit-transform: skewY(26deg); -moz-transform: skewY(26deg); -ms-transform: skewY(26deg); -o-transform: skewY(26deg); transform: skewY(26deg); float: left; margin-right: 25px; } #feature-iterate .t-block.t2 { background-color: rgba(255, 255, 255, 0.8); } #feature-iterate .t-block.t3 { background-color: rgba(255, 255, 255, 0.6); } #feature-iterate .t-block.t4 { background-color: rgba(255, 255, 255, 0.4); } #feature-iterate h2 { color: white; } #feature-clone { margin-top: -80px; padding: 240px 0 300px; color: white; background-color: #822ff7; -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #feature-clone > .container { -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #feature-clone h2 { color: white; font-size: 37px; } #feature-clone p { text-align: right; } #feature-clone .clone-icon { padding-left: 80px; } #feature-clone .c-group { display: inline-block; margin-right: 20px; } #feature-clone .c-group.cg2 { opacity: .8; } #feature-clone .c-group.cg3 { opacity: .6; } #feature-clone .c-group .c-col { display: inline-block; float: left; } #feature-clone .c-group .c-col.c1 { padding-top: 16px; } #feature-clone .c-group .c-col.c3 { padding-top: 55px; } #feature-clone .c-group .c-col .c-block { background-color: white; width: 30px; height: 30px; -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); -ms-transform: skewY(30deg); -o-transform: skewY(30deg); transform: skewY(30deg); margin: 5px 5px 0 0; } #cta { padding: 180px 0 220px; background-color: #822ff7; -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #cta > .container { -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #cta .intro .left { text-align: right; } #cta .intro .right { margin-top: 2px; } #cta p { padding-top: 4px; color: white; font-size: 14px; letter-spacing: 1px; line-height: 1.5em; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 100; } #cta .outline-btn { padding: 16px 40px; display: inline-block; } #cta .outline-btn:focus { outline: 0; } #cta a { font-weight: 500; font-size: 24px; text-transform: uppercase; letter-spacing: 3px; color: white; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } #cta a:hover { text-decoration: none; } #demos { padding: 180px 0 60px; background-color: #000; margin-top: -80px; -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #demos > .container { -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #demos .explantion { margin: 40px 0 60px 15px; border-left: 8px solid #1e1e1e; } #demos .explantion h2 { margin-top: 0; font-size: 28px; color: #9148f8; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } #demos .explantion p { margin-bottom: 0; font-size: 16px; letter-spacing: 1px; line-height: 1.5em; color: #939393; font-weight: 400; } #demos .terminals { margin-bottom: 80px; } #demos .terminals .terminal-item { margin-bottom: 120px; } #demos .terminals .terminal-item.last { border-bottom: none; } #demos .terminals .terminal-item > header .left span.icn { display: inline-block; width: 83px; height: 74px; } #demos .terminals .terminal-item > header .right { padding-left: 25px; } #demos .terminals .terminal-item > header .right h2 { margin-top: 0; font-size: 28px; text-transform: uppercase; } #demos .terminals .terminal-item > header .right p { font-size: 16px; } #demos .terminals .terminal-item .terminal { border: 2px solid #1e1e1e; } #demos .terminals .terminal-item .terminal header { position: relative; text-align: center; padding: 3px; border-bottom: 2px solid #1e1e1e; } #demos .terminals .terminal-item .terminal header h4 { font-size: 14px; letter-spacing: 1px; color: white; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; } #demos .terminals .terminal-item .terminal header ul.shell-dots { position: absolute; top: 10px; left: 8px; padding-left: 0; } #demos .terminals .terminal-item .terminal header ul.shell-dots li { display: inline-block; width: 12px; height: 12px; border-radius: 6px; margin-left: 6px; } #demos .terminals .terminal-item .terminal header ul.shell-dots li.d1 { background-color: #4a08a7; } #demos .terminals .terminal-item .terminal header ul.shell-dots li.d2 { background-color: #6517cf; } #demos .terminals .terminal-item .terminal header ul.shell-dots li.d3 { background-color: #7b29ee; } #demos .terminals .terminal-item .terminal .terminal-window { min-height: 140px; padding: 20px; font-size: 15px; font-weight: normal; font-family: "Courier New", Monaco, Menlo, Consolas, monospace; color: #ffffff; background-color: transparent; } #demos .terminals .terminal-item .terminal .terminal-window .txt-r { color: #e47078; } #demos .terminals .terminal-item .terminal .terminal-window .txt-p { font-weight: bold; color: #87ee8e; } #demos .terminals .terminal-item .terminal .terminal-window p { margin-bottom: 2px; white-space: pre-wrap; } #demos .terminals .terminal-item .terminal .terminal-window .cursor { background-color: #NaNNaNNaN; } #demos .terminals .terminal-item .feature-bullets { list-style-type: none; padding-left: 35px; } #demos .terminals .terminal-item .feature-bullets li { padding: 5px 0 5px 45px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #demos .terminals .terminal-item .feature-bullets li { background-size: 12px 12px; } } @media (min-width: 1500px) { #feature-auto { padding: 270px 0 400px; } #feature-iterate { margin-top: -180px; padding: 300px 0 410px; } #feature-clone { margin-top: -180px; padding: 270px 0 430px; } #demos { margin-top: -180px; padding-top: 240px; } } @media (min-width: 1200px) { #feature-auto h2 { font-size: 41px; } #feature-auto .terminal-text { background: black; color: white; line-height: 88px; text-align: center; margin: 60px 20px 0; font-size: 32px; } } @media (max-width: 1200px) { #feature-iterate h2 { font-size: 40px; } #feature-iterate .it-icon { margin-top: 52px; } #feature-iterate .t-block { width: 73px; height: 73px; margin-right: 20px; } } @media (min-width: 992px) and (max-width: 1200px) { #cta a { margin-top: 15px; font-size: 18px; } #feature-clone .clone-icon { padding-left: 0 !important; } } @media (min-width: 768px) and (max-width: 992px) { #cta a { margin-top: 10px; } } @media (max-width: 992px) { .feature h2, .feature p { text-align: center !important; padding-left: 0 !important; } #feature-iterate .it-icon { width: 372px; margin: 0 auto 40px; padding-left: 0 !important; } #feature-clone .clone-icon { width: 382px; margin: 40px auto 0; padding-left: 0 !important; } #feature-auto h2 { font-size: 43px; } #feature-auto p { text-align: right; padding-left: 100px; } #feature-auto .terminal-text { background: black; color: white; line-height: 88px; text-align: center; margin: 60px 20px 0; font-size: 32px; } #demos .terminals .terminal-item > header .right { padding-left: 54px; } } @media (max-width: 768px) { .feature h2, .feature p { text-align: center; } #demos .explantion { margin: 40px 0 60px 0; } #demos .terminals .terminal-item > header .left span.icn { padding-bottom: 15px; } #demos .terminals .terminal-item > header .right { padding-left: 15px; } #cta .intro { text-align: center; } #cta .intro p { text-align: center; margin-bottom: 15px; } } @media (max-width: 480px) { #demos .explantion { margin: 40px 0 60px 0; } #feature-auto .terminal-text { font-size: 24px; } .feature h2 { text-align: center; font-size: 28px !important; line-height: 34px; overflow: hidden; } .feature p { text-align: center !important; padding: 0 !important; } #features { text-align: center; } } @media (max-width: 320px) { #feature-iterate { margin-top: -80px; padding: 280px 0 360px; color: white; background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat; border-top: 2px solid white; border-bottom: 2px solid #822ff7; background-size: cover; -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); } #feature-iterate > .container { -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); -o-transform: skewY(-3deg); transform: skewY(-3deg); } #feature-iterate p { text-align: right; padding-left: 120px; font-weight: 100; } #feature-iterate .it-icon { width: 245px; margin: 0 auto 40px 45px; padding-left: 0 !important; } #feature-iterate .t-block { background-color: #ffffff; width: 40px; height: 40px; -webkit-transform: skewY(26deg); -moz-transform: skewY(26deg); -ms-transform: skewY(26deg); -o-transform: skewY(26deg); transform: skewY(26deg); float: left; margin-right: 15px; } #feature-clone .clone-icon { width: 290px; margin: 40px auto 0; padding-left: 45px !important; } #feature-clone .c-group.cg2 { opacity: .7; } #feature-clone .c-group.cg3 { opacity: .5; } #feature-clone .c-group .c-col.c1 { padding-top: 8px; } #feature-clone .c-group .c-col.c3 { padding-top: 28px; } #feature-clone .c-group .c-col .c-block { background-color: white; width: 15px; height: 15px; -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); -ms-transform: skewY(30deg); -o-transform: skewY(30deg); transform: skewY(30deg); margin: 3px 3px 0 0; } #demos .explantion { border-left: 8px solid transparent; } #cta a { font-size: 14px; font-weight: 400; } } .people { margin-top: 30px; } .people .person { margin-bottom: 40px; } .people .person h3 { text-transform: none; } .people .person img { width: 125px; margin: auto auto; } .people .person .bio { padding-left: 150px; } body.page-sub { background-color: #242424; } body.layout-consul, body.layout-dnsimple, body.layout-cloudflare, body.layout-heroku, body.layout-digitalocean, body.layout-aws, body.layout-docs, body.layout-inner, body.layout-downloads, body.layout-intro { background: #242424 url('../images/sidebar-wire.png') left 62px no-repeat; } body.layout-consul > .container .col-md-8[role=main], body.layout-dnsimple > .container .col-md-8[role=main], body.layout-cloudflare > .container .col-md-8[role=main], body.layout-heroku > .container .col-md-8[role=main], body.layout-digitalocean > .container .col-md-8[role=main], body.layout-aws > .container .col-md-8[role=main], body.layout-docs > .container .col-md-8[role=main], body.layout-inner > .container .col-md-8[role=main], body.layout-downloads > .container .col-md-8[role=main], body.layout-intro > .container .col-md-8[role=main] { min-height: 800px; background-color: white; } body.layout-consul > .container .col-md-8[role=main] > div, body.layout-dnsimple > .container .col-md-8[role=main] > div, body.layout-cloudflare > .container .col-md-8[role=main] > div, body.layout-heroku > .container .col-md-8[role=main] > div, body.layout-digitalocean > .container .col-md-8[role=main] > div, body.layout-aws > .container .col-md-8[role=main] > div, body.layout-docs > .container .col-md-8[role=main] > div, body.layout-inner > .container .col-md-8[role=main] > div, body.layout-downloads > .container .col-md-8[role=main] > div, body.layout-intro > .container .col-md-8[role=main] > div { position: relative; z-index: 10; } .docs-sidebar { position: relative; z-index: 20; margin-bottom: 30px; margin-top: 50px; margin-right: 4%; } .docs-sidebar a { color: #822ff7; } .docs-sidebar .docs-sidenav { padding-top: 15px; padding-bottom: 15px; } .docs-sidebar .docs-sidenav :last-child { border-bottom: none; } .docs-sidebar .docs-sidenav li { position: relative; } .docs-sidebar .docs-sidenav li > a { color: white; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav li > a:hover, .docs-sidebar .docs-sidenav li > a:focus { background-color: transparent !important; color: white; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav > li { padding: 10px 0; margin: 0 30px; } .docs-sidebar .docs-sidenav > li > .nav li a { color: white; } .docs-sidebar .docs-sidenav > li.active { /*> a:hover, > a:focus { font-weight: @font-weight-lato-xb; }*/ } .docs-sidebar .docs-sidenav > li.active > a { color: #822ff7; font-weight: 500; } .docs-sidebar .docs-sidenav > li.active:before { content: ''; position: absolute; width: 6px; height: 8px; background-color: #822ff7; font-weight: 500; -webkit-transform: skewY(24deg); -moz-transform: skewY(24deg); -ms-transform: skewY(24deg); -o-transform: skewY(24deg); transform: skewY(24deg); top: 26px; left: -10px; } .docs-sidebar .docs-sidenav > li.active > a { -webkit-font-smoothing: antialiased; } .docs-sidebar .docs-sidenav > li.active .nav { display: block; } .docs-sidebar .docs-sidenav > li.active .nav li.active a { color: #822ff7; font-weight: 500; } .docs-sidebar .docs-sidenav > li > a { text-transform: uppercase; -webkit-font-smoothing: antialiased; } .docs-sidebar .docs-sidenav .nav { display: none; margin-bottom: 15px; } .docs-sidebar .docs-sidenav .nav > li { margin-left: 20px; } .docs-sidebar .docs-sidenav .nav > li > a { -webkit-font-smoothing: antialiased; padding: 6px 15px; } .docs-sidebar .docs-sidenav .nav-visible { display: block; } .bs-docs-section { padding-top: 10px; padding-left: 3%; padding-bottom: 80px; } .bs-docs-section .lead { margin-bottom: 48px; } .bs-docs-section .doc-sectional { margin-bottom: 48px; } .bs-docs-section p, .bs-docs-section li, .bs-docs-section .alert { font-size: 20px; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.5em; margin: 0 0 18px; -webkit-font-smoothing: antialiased; } .bs-docs-section pre { margin: 0 0 18px; } .bs-docs-section a { color: #822ff7; } .bs-docs-section a:hover { text-decoration: underline; } .bs-docs-section img { max-width: 650px; margin-top: 25px; margin-bottom: 25px; } .bs-docs-section h1 { color: #822ff7; text-transform: uppercase; padding-bottom: 24px; margin-top: 40px; margin-bottom: 24px; border-bottom: 1px solid #eeeeee; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; } .bs-docs-section h2, .bs-docs-section h3, .bs-docs-section h4 { margin-bottom: 16px; } .bs-docs-section #graph { margin-top: 30px; } @media (max-width: 992px) { body.layout-docs > .container .col-md-8[role=main], body.layout-inner > .container .col-md-8[role=main], body.layout-intro > .container .col-md-8[role=main] { min-height: 0; } body.layout-docs > .container .col-md-8[role=main]::before, body.layout-inner > .container .col-md-8[role=main]::before, body.layout-intro > .container .col-md-8[role=main]::before { border-left: 9999px solid white; } body.page-sub > .container { background-color: white; } .docs-sidebar { margin-top: 0px; margin-bottom: 0px; } .docs-sidebar .docs-sidenav { padding-bottom: 0; } .docs-sidebar .docs-sidenav li > a { color: black; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav li > a:hover, .docs-sidebar .docs-sidenav li > a:focus { color: #822ff7; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav > li > .nav li a { color: black; } .docs-sidebar .docs-sidenav > li > .nav li a:hover { color: #822ff7; } .bs-docs-section h1 { padding-top: 24px; border-top: 1px solid #eeeeee; } } @media (max-width: 480px) { .bs-docs-section img { max-width: 450px; } .bs-docs-section h1 { font-size: 32px; } } .downloads { margin-top: 20px; } .downloads .description { margin-bottom: 20px; } .downloads .download { border-bottom: 1px solid #b2b2b2; padding-bottom: 15px; margin-top: 10px; margin-bottom: 10px; } .downloads .download .details { padding-left: 95px; } .downloads .download .details h2 { margin-top: 0px; } .downloads .download .details ul { padding-left: 0px; } .downloads .download .details li { display: inline-block; } .downloads .download .details li:after { content: " | "; } .downloads .download .details li:last-child:after { content: ""; } .downloads .download .icon img { width: 75px; } .downloads .download .os-name { font-size: 40px; margin-bottom: -3px; } .downloads .poweredby { margin-top: 20px; } .downloads .poweredby img { display: block; margin: 0 auto; width: 122px; } /*@import "modals.less";*/