@normalFont: "Proxima Nova Regular", 'Helvetica Neue', Arial, Helvetica, sans-serif; @boldFont: "Proxima Nova Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif; @regularitalicFont: "Proxima Nova Regular Italic", 'Helvetica Neue', Arial, Helvetica, sans-serif; @semiboldFont: "Proxima Nova Semibold", 'Helvetica Neue', Arial, Helvetica, sans-serif; @lightFont: "Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; @thinFont: "proxima_nova_ththin", 'Helvetica Neue', Arial, Helvetica, sans-serif; @avenir: "AvenirNext-UltraLight", 'Helvetica Neue', Arial, Helvetica, sans-serif; @turquoise: #4BB0C0; body.homepage #world{ overflow-x: hidden; background-color: #FFF; } body.homepage .lander-module{ h1, h2, h3, h4, h5, h6, p, span, a{ color: #ffffff; font-family: @lightFont; } h1, h2, h3, h4, h5, h6{ text-transform: uppercase; } h1, h2, h3, h4, h5, h6 { font-family: @thinFont; } } body.homepage .threeby h3{ color: #1d6a9a; text-transform: none; background: url('/static/img/landing/icon-occipital-highlighted.png'); background: url('/static/img/landing/icon-occipital.png'); background-size: 25px 25px !important; background-repeat: no-repeat !important; padding-left: 30px; padding-right: 0px; } body.homepage .threeby h3:hover{ color: #42a8fb; background: url('/static/img/landing/icon-occipital-highlighted.png'); background-repeat: no-repeat !important; padding-left: 30px; } body.homepage #product_options{ height: 110px; display: none; .module{ text-align: center; a{ margin: 0px auto; } a h3{ width: 150px; font-size: 20px; } } } body.homepage div.lander-module.big_headline { background-color: #ffffff; background: url('/static/img/landing/header_blue_mesh.jpg') center center no-repeat; background-size: cover; height: 400px; margin-top: -140px !important; padding-top: 140px; h1{ padding-top: 40px; font-size: 2rem; line-height: 44px; max-width: 70%; margin: 0px auto; font-family: @normalFont; } .oneby { height: 100%; display: flex; justify-content: center; flex-direction: column; margin-top: -70px; } @media screen and (min-width: 768px) { .oneby > h1 { font-size: 3rem; } } @media screen and (min-width: 1024px) { .oneby { height: 100%; display: flex; justify-content: center; flex-direction: column; margin-top: -70px; } .oneby > h1 { font-size: 4rem; margin: -70px 0 0 0; align-self: center; } } @media screen and (min-width: 1440px) { background: url('/static/img/landing/header_blue_mesh@2x.jpg') center center no-repeat; background-size: cover; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { background: url('/static/img/landing/header_blue_mesh@2x.jpg') center center no-repeat; background-size: cover; } } body.homepage div.image_left_checkmarks_right { background: url('/static/img/landing/blueBG-LightRight.jpg'); @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { background-image: url('/static/img/landing/blueBG-LightRight@2x.jpg'); } background-size: contain !important; background-repeat: no-repeat !important; background-size: 100% !important; background-position: 100% 100% !important; } main { h1 { font-size: 4rem !important; } h2 { line-height: 2.25rem; font-size: 2rem; text-transform: uppercase; text-align: center; } p { font-size: 1 rem; line-height: 1.5rem; } .button-wrapper { display: flex; // padding: 20px; flex-wrap: wrap; justify-content: center; @media screen and (min-width: 768px){ padding: 20px 0px; .one-of-two { margin-right: 20px; } } @media screen and (min-width: 1024px) { justify-content: flex-start; } } //buttons that have SVGs inside them .svg-button { background: linear-gradient(#FEFEFE, #F1F1F1); border-radius: 50px; border: 1px solid #E0E0E0; display: flex; justify-content: center; height: 70px; width: 300px; svg { height: 30px; align-self: center; margin: 10px 20px; } } .svg-button:hover { background: linear-gradient(#F5F5F5, #E0E0E0); border: 1px solid #E0E0E0; transition: 0.2s all ease-in-out; } #bridge-engine-btn { svg { height: 50px; } } #occipital-tracking-btn { svg { margin-top: 15px; } } @media screen and (max-width: 1306px) { #bridge-btn { margin-bottom: 20px; } } article { @media screen and (min-width: 1024px) { min-height: 600px; } @media screen and (max-width: 1024px) { padding: 20px; } @media screen and (min-width: 450px) and (max-width: 1023px){ padding: 40px; } p { font-family: @lightFont; font-size: 1rem; line-height: 1.5rem; } div.product-grid-wrapper > .image { min-height: 150px; } } #product_module_a { background-color: #f7f7f7; div.product-grid-wrapper { .image { background: url('/static/img/landing/markii-on-11-inch-ipad.png') center center no-repeat; background-size: 250px auto; height: 250px; text-align: center; @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { background: url('/static/img/landing/markii-on-11-inch-ipad@2x.png') bottom center no-repeat; background-size: 250px auto; } @media screen and (min-width: 1024px) { height: unset; background: url('/static/img/landing/markii-on-11-inch-ipad@2x.png') center center no-repeat; background-size: contain; padding: 100px 0 0 0; } @media screen and (min-width: 1100px) { padding: 50px 0 0 0; } @media screen and (min-width: 1300px) { padding: 20px 0 0 0; } } } #new-badge { background-color: #4FB9FC; border-radius: 15px; color: #FFF; font-family: @semiboldFont; font-size: 1rem; letter-spacing: 1px; margin: 0; padding: 5px 11px 4px 13px; text-align: center; @media screen and (min-width: 1024px) { margin-top: 100px; } } } #product_module_b { .image { background: url('/static/img/landing/product-core.png') center center no-repeat; background-size: contain; text-align: center; padding: 0 40px; @media screen and (min-width: 550px) and (max-width: 1023px) { background: url('/static/img/landing/product-core.png') center center no-repeat; background-size: 400px auto; } @media screen and (min-width: 1024px) { background: url('/static/img/landing/product-core@2x.png') center 80px no-repeat; background-size: contain; margin-top: 80px; padding-top: 20px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { background-image: url('/static/img/landing/product-core@2x.png') center 80px no-repeat; } } } #product_module_c { h2, h6, p{ color: #FFF; } background: url('/static/img/landing/bkgd_blueprint.jpg') center center no-repeat; background-size: cover; .image { @media screen and (max-width: 1023px) { margin: 20px; height: 200px; } background: url('/static/img/landing/slam_diagram.svg') top center no-repeat; background-size: contain; padding: 0; @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { } } } #product_module_d { h2, h6, p{ color: #FFF; } background-color: @turquoise; div.product-grid-wrapper { h2 { padding: 0 0 35px 0; @media screen and (min-width: 1024px) { padding: 50px 0 35px 50px; } } .product-text-block { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, .1)); padding: 20px; @media screen and (min-width: 1024px) { padding: 0 0 20px 50px; } } .image { background: url('/static/img/landing/canvas-diagram.png') center center no-repeat; background-size: contain; margin: -40px -80px 20px -80px; @media screen and (min-width: 1024px) { background-size: contain; margin: 0 -30px; padding: 0; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { } } } } #product_module_e { background: url('/static/img/landing/bkgd_courthouse.jpg') center center no-repeat; background-size: cover; div.product-grid-wrapper { h2 { padding: 0 0 35px 0; @media screen and (min-width: 1024px) { padding: 50px 0 35px 50px; } } .product-text-block { background: linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, .5)); padding: 20px; @media screen and (min-width: 1024px) { padding: 0 0 20px 50px; } } .image { background: url('/static/img/landing/PX-80.png') top center no-repeat; background-size: contain; margin: 0 0 20px 0; @media screen and (min-width: 1024px) { margin: 50px; } @media screen and (min-width: 1440px) { margin: 100px; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { // background: url('/static/img/landing/PX-80@2x.png') ; } } } } #product_module_f { .image { background: url('/static/img/landing/bridge_hmd.png') top center no-repeat; background-size: contain; margin: 20px; @media screen and (min-width: 1024px) { background: url('/static/img/landing/bridge_hmd.png') top left no-repeat; margin: 0 0 0 -20px; } } } article#offices { background-color: #f7f7f7; padding: 20px 0; } #office-locations-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; h2 { font-size: 2rem; margin: 35px 0; @media screen and (min-width: 1024px){ font-size: 3rem; margin: 0 0 35px 0; } } @media screen and (min-width: 500) { margin: auto; max-width: 400px; } } #office-locations { display: flex; flex-direction: column; span { align-items: flex-end; color: #FFF; display: flex; font-family: @normalFont; font-size: 2rem; height: 100px; justify-content: flex-start; text-transform: uppercase; max-width: 400px; width: 90vw; margin: 5px 0px; padding: 5px; @media screen and (min-width: 800px) { height: 300px; flex-grow: 1; } @media screen and (min-width: 1024px) { flex-grow: 1; margin: 20px; width: 200px; } @media screen and (min-width: 1400px) { margin: 25px; text-indent: 1rem; line-height: 50px; width: 300px; } } @media screen and (min-width: 800px) { flex-direction: row; justify-content: space-around; width: 100%; } #office-sf { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-sf.jpg') center center no-repeat; background-size: 100% auto; @media screen and (min-width: 800px ) { background-position: 80% center; background-size: auto 100%; } } #office-bldr { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-bldr.jpg') center 10% no-repeat; background-size: 100% auto; @media screen and (min-width: 800px ) { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-bldr.jpg') center center no-repeat; background-size: auto 100%; } } #office-gville { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-gville.jpg') center 40% no-repeat; background-size: 100% auto ; @media screen and (min-width: 800px ) { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-gville@2x.jpg') bottom center no-repeat; background-size: auto 100%; } } #office-madrid { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-madrid.jpg') center 30% no-repeat; background-size: 100% auto ; @media screen and (min-width: 800px ) { background: linear-gradient(rgba(5, 5, 5, 0), rgba(0, 0, 0, 0.5)), url('/static/img/landing/office-madrid@2x.jpg') center center no-repeat; background-size: auto 100%; } } } } body.homepage #fireghost-occipital-footer, body.ar-vr-tracking #fireghost-occipital-footer { a:hover, a span:hover{ // color:#919191; color: #42a8fb; } text-align: center; h5{ color: #3A3A3C; font-family: @semiboldFont; } .twoby{ background-color: #F7F8F9; height: 65px; margin: 0px; max-width: 100%; .module{ text-align: center; } li{ display: inline; cursor: pointer; color: #3A3A3C; margin: 0 5px; } p, a{ color: #3A3A3C; font-size: 14px; margin: 0; line-height: 26px; } a:hover{ color: #42a8fb !important; } } .threeby { .module { text-align: left; } p, a, li, span { color: #3A3A3C; list-style: none; } a:hover, a span:hover{ color: #42a8fb !important; } .products { display: grid; grid-template-columns: auto auto; grid-column-gap: 10px; } .contactus{ li.email{ list-style-image: url('/static/img/landing/icon-email.png'); } li.loc1{ background: url('/static/img/landing/icon-location.png'); background-repeat: no-repeat; list-style: none; margin-left: -30px; padding-left: 30px; } } #social { display: grid; grid-template-columns: 10% auto; grid-column-gap: 10px; li { justify-self: start; } // SOCIAL ICONS ARE SVG EMBEDDED IN HTML svg { text-align: left; justify-self: center; align-self: center; } path { fill: #3A3A3C; } } } } // MEDIA QUERIES @media (min-width: 450px) { body.homepage div.lander-module.big_headline { background-size: cover; } body.homepage .lander-module .twoby span.image{ height: 350px; } body.homepage div#structure_core .twoby span.image, body.homepage div#structure_bridge .twoby span.image{ height: 250px; } } @media (max-width: 638px) { body.homepage #fireghost-occipital-footer, body.ar-vr-tracking #fireghost-occipital-footer { .threeby{ .module { text-align: left; width: 220px; margin: 0px auto; ul{ margin-top: 3px; margin-bottom: 35px; margin-left: 0px; } li{ margin-top: 7px; margin-bottom: 7px; } } .module .contactus{ text-align:left; margin-left: 70px; } .module #social{ // text-align:left; // margin-left: 100px; } margin-bottom: 30px; } .twoby{ .module{ margin-top: 10px; margin-bottom: 10px; } padding-bottom: 50px; } } } @media (min-width: 639px) { body.homepage div#structure_bridge { span.image{ background: url('/static/img/landing/bridge-scene-desktop.png') no-repeat !important; background-size: contain !important; } } .lander-module.image_left_checkmarks_right .twoby, .lander-module.image_right_copy_left .twoby{ height: 470px; } body.homepage #fireghost-occipital-footer .threeby, body.ar-vr-tracking #fireghost-occipital-footer .threeby { height: 300px; } body.homepage div.lander-module.big_headline { // background-size: 100% !important; background-position: 0% 0%; min-height: 300px; h1{ font-size: 35px; line-height: 49px; margin-top: -40px; } } body.homepage #fireghost-occipital-footer, body.ar-vr-tracking #fireghost-occipital-footer { text-align: left; .threeby { display: grid; grid-template-columns: 15% auto 20% 20%; #social-footer-wrapper { display: flex; flex-direction: column; align-items: center; div > #social { grid-column-gap: 17px; margin-left: 7px; } } } .threeby .module { width: 100%; ul { margin: 0; padding: 0; } li{ line-height: 26px; } } #products-footer-wrapper { width: 80%; } } body.homepage div.lander-module.image_right_copy_left { span.image{ float: right; } } body.homepage div.lander-module.image_left_checkmarks_right, body.homepage div.lander-module.image_right_copy_left { .module{ text-align: left; .cta-button-c{ margin: 0px 0px; } } } body.homepage .lander-module .twoby span.image{ height: 400px; margin: 0px 0px; } body.homepage #fireghost-occipital-footer, body.ar-vr-tracking #fireghost-occipital-footer { .threeby{ .contactus, .products { margin-left: 31px; } .getintouch{ margin-left: 0px; } } } body.homepage #product_options{ display: none; .threeby{ max-width: 900px; } .threeby .module.one, .threeby .module.two, .threeby .module.three{ padding-left: 20px; padding-right: -20px; } } body.homepage div#structure_core .twoby span.image, body.homepage div#structure_bridge .twoby span.image{ height: 400px; } } @media (min-width: 1024px) { body.homepage div.lander-module.big_headline { height: 450px; h1{ font-size: 50px; line-height: 64px; max-width: 460px; margin-top: 00px; } } body.homepage div.lander-module.image_right_copy_left, body.homepage div.lander-module.image_left_checkmarks_right { .twoby .module h2{ font-size: 40px; line-height: 54px; } p, .cta-button-c{ font-size: 18px; line-height: 30px; margin-top: 35px; } .cta-button-c{ padding: 15px 45px; } } body.homepage div.lander-module.big_headline { margin-top: -140px !important; // background-size: 120% !important; } body.homepage div.lander-module.big_headline { // min-height: 500px; // background-size: 100% !important; h1{ font-size: 60px; line-height: 70px; max-width: 860px; margin-top: 70px; } } body.homepage div.lander-module.image_right_copy_left, body.homepage div.lander-module.image_left_checkmarks_right { padding-top: 50px; padding-bottom: 30px; .twoby .module h2{ font-size: 60px; line-height: 72px; max-width: 400px; } p, .cta-button-c{ font-size: 18px; line-height: 30px; margin-top: 35px; } .cta-button-c{ margin-top: 50px; padding: 15px 45px; } } body.homepage #fireghost-occipital-footer, body.ar-vr-tracking #fireghost-occipital-footer { .twoby { .module { display: flex; li { margin: 0 10px; } p { line-height: 26px; margin: 0; } } .module:nth-of-type(odd) { justify-content: flex-start; } .module:nth-of-type(even) { justify-content: flex-end; } } .threeby { display: grid; grid-template-columns: 20% auto 25% 15%; width: 1000px; padding-bottom: 150px; #support-footer-module { padding-left: 30px; } .products { grid-template-columns: 50% 50%; } } .threeby .module{ padding-left: 0; width: unset; li { line-height: 36px; } } } main > article { display: flex; justify-content: center; } main > article > div.product-grid-wrapper { display: grid; padding: 100px; max-width: 1200px; h2 { font-family: @semiboldFont; font-size: 3rem; grid-area: headline; line-height: 4rem; margin-bottom: 35px; max-width: 520px; text-align: left; } p { font-size: 1.25rem; line-height: 2.5rem; margin-right: 200px; margin-bottom: 35px; @media screen and (max-width: 1299px) { margin-right: 100px; } } .image { grid-area: image; margin: 20px; } .product-text-block { grid-area: textarea; padding: 0 20px 0 0; width: 100%; } } //content articles with images on the right article:nth-of-type(odd) { div.product-grid-wrapper { grid-template-columns: 65% 35%; grid-template-areas: "headline image" "textarea image"; @media screen and (min-width: 1300px) { grid-template-columns: 800px 400px; } } } //content articles with images on the left article:nth-of-type(even) { div.product-grid-wrapper { grid-template-columns: 35% 65%; grid-column-gap: 70px; grid-template-areas: "image headline" "image textarea"; @media screen and (min-width: 1300px) { grid-template-columns: 400px 800px; } } } main > #product_module_b { div.product-grid-wrapper { @media screen and (min-width: 1300px) { grid-template-columns: 500px 700px; padding: 100px 100px 100px 50px; h2 { margin: 0 0 35px 0; } div.product-text-block > p { margin-right: 40px; } } .image { margin: 0; padding: 0; } } } main > #product_module_d { div.product-grid-wrapper { grid-template-columns: 40% 60%; grid-column-gap: 20px; padding: 40px 0; } h2 { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, .1)); padding: 20px; margin-bottom: 0px; max-width: unset; } div.product-text-block { width: unset; p { margin-right: 90px; } } } main > #product_module_e { div.product-grid-wrapper > h2 { background: linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, .90)); padding: 50px 40px 35px 50px; margin-bottom: 0px; max-width: unset; } div.product-text-block { width: unset; p { line-height: 2.25rem; margin-right: 60px; } } .product-grid-wrapper >.image { margin: 60px; } } main > #product_module_f { div.product-grid-wrapper { grid-template-columns: 40% 60%; grid-column-gap: 50px; padding: 100px 0; .image { background-size: 433px auto; } div.product-text-block { p { margin-right: 140px; } } } } } @media (min-width: 1100px) { body.homepage div.lander-module.big_headline { // min-height: 600px; // background-size: 100% !important; h1{ margin-top: 50px; } } } @media (min-width: 1200px) { body.homepage div.lander-module.big_headline { // min-height: 650px; h1{ margin-top: 70px; } } } @media (min-width: 1300px) { body.homepage div.lander-module.big_headline { // background: url('/static/img/landing/header@2x.jpg'); min-height: 600px; h1{ margin-top: 100px; } } } @media (min-width: 1500px) { body.homepage div.lander-module.big_headline { h1{ font-size: 80px; line-height: 100px; max-width: 900px; } } } @media (min-width: 638px) { @media (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25) { body.homepage div#structure_bridge { span.image{ background: url('/static/img/landing/bridge-scene-desktop@2x.png') no-repeat !important; background-size: contain !important; } } } }