@import "../vendor/normalize.less"; @import "../vendor/print.less"; @import "branding.less"; @import "../helpers/helpers.less"; // HEADER @chevronOffsetHeader: 60px; .page-template-template-tour header { height: 815px; margin-bottom: @chevronOffsetHeader; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; nav { float: left; margin-top: 35px; margin-left: 20px; .tourNavText; } ul { list-style: none; } .description { clear: both; width: 80%; margin: 190px auto 0; text-align: center; } h1 { .heroText; margin-bottom: 160px; } .chevron-divider { position: absolute; bottom: -@chevronOffsetHeader; height: 150px; } } .logo { float:left; margin-top: 25px; } .app-links { float: right; margin-top: 25px; .signInUpText; a { .signInUpText; } } // SUBTEMPLATES .feature-circles { padding: 75px 0 160px; .column-container { width: calc(~"100% + 100px"); } .feature-circle { .ttl-columns.column-3; padding-right: 100px; } img { width: 105px; display: block; margin: 0 auto 26px; } h1 { .featureCircleH1; text-align: center; } .description { .copyTextSmall; } } .case-studies { height: 685px; background-color: #888; position: relative; .case-study { position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; .transition(all,0.3s); visibility: visible; opacity: 1; &.hidden { visibility: hidden; opacity: 0; } } .slide-container { width: 100%; height: 100%; position: relative; left: 0px; } .centered-header { position: relative; width: 100%; height: 100%; } .description { white-space: normal; width: 60%; background: fade(@black,64); padding: 25px; position: absolute; bottom: 35px; right:0; .caseStudyText; } p { margin:0; } .slider-action { width: 80px; height: 80px; background-color: @white; background-position: center; background-repeat: no-repeat; cursor: pointer; position: absolute; top: calc(~"50% - 40px"); z-index: 2; } #back { background-image: url(../../images/left.png); left:0; } #forward { background-image: url(../../images/right.png); right:0; } } .old-new { padding-top: 130px; padding-bottom: 175px; h1 { .h1; text-align: center; } th { .oldWayNewWayTH; text-transform: uppercase; padding-bottom: 15px; } table { border-collapse: collapse; } td { border: 1px solid @blueLight; } td { vertical-align: middle; .copyTextSmall; width: 50%; padding: 45px 0; p { width: 60%; margin: 0 auto; } } .new { border-bottom-color: @white; position: relative; background-color: @blueLight; &:before { position: absolute; left:-30px; top: calc(~"50% - 30px"); content: ''; display: block; width: 60px; height: 60px; background-image: url(../../images/ascribeicon-circles.png); background-size:60px; background-repeat: no-repeat; } } tr { &:last-of-type { .new { border-bottom-color: @blueLight; } } } } .product-overview { padding: 175px 0; border-top: 1px solid @greyHr; h1 { .h1; } p { .copyTextSmall; } &:nth-of-type(odd) { img { float: left; } .text-column { float: right; } } &:nth-of-type(even) { img { float: right; } } .text-column { width: 45%; } } .blue-box { padding: 175px 0; background-color: @greyBg; .blueBoxCopy; .blue-copy { background-color: @blueBright; padding: 70px 0 110px; div { width: 80%; margin: 0 auto; text-align: center; } } h1 { .blueBoxTitle; } } .sign-up { padding: 240px 0 210px; text-align: center; a { margin: 0 auto; } } .galleries-marketplaces { padding: 145px 0 130px; text-align: center; h1 { .galleriesPressTitle; } img { display:block; margin-bottom: 80px; } } .blog-features { background-color: @greyBg; padding: 75px 0; .blog { .ttl-columns.column-3; margin-bottom: 40px; div { background-color: white; padding-bottom: 15px; min-height: 225px; } } h2 { .featureBlogDesc; margin:10px 10px 0; } h1 { .featureBlogTitle; margin:0 10px; } } .team { background-color: @greyBg; padding: 70px 0; .copyTextSmall; .intro { margin-bottom: 60px; } p { margin:0; } .team-member { .ttl-columns.column-3; text-align: center; } img { border-radius: 100%; filter: grayscale(100%); &:hover { filter: none; } } h1 { .teamName; margin-top: 20px; margin-bottom:0; } h2 { .copyText; margin-top:2px; } }