/* pink:rgb(209,74,224); */ /* Basic Setup */ body {font-family: system, -apple-system, "Helvetica Neue", "Lucida Grande"; font-size:14px; margin:0; padding:0;} a {text-decoration:none; color:#000; border-bottom:1px solid #ccc;} a:hover {color:rgba(0,0,0,0.5);} p {line-height:2em;} p.intro {font-size:1.2em;} p.note {color:#bbb;} h1, h2, h3, h4 {margin:0;} h1 {font-weight:200;} h1 {font-size:4em; font-weight:100;} h2 {font-size:2.6em; line-height:1.6em; font-weight:300;} h2 span {color:#555;} h3 {font-size:2em; line-height:1.4em; font-weight:300; margin:0.5em 0;} h4 {font-size:1.4em; font-weight:500; text-transform: uppercase; color:#888; margin-top:0.8em;} i {padding:1px 3px 2px 3px; background-color:#eee; border-radius:2px; font-weight:normal;} hr {height:1px; border:none; border-top:1px solid #dedede; width:100px; margin:50px 0;} input, textarea {font-size:1em; padding:12px;} button, .button {background-color:rgb(0,0,0); color:#fff; border-radius:4px; padding:16px 16px; margin:6px 0; font-size:1em; border:none; text-transform: uppercase; transition:background-color 0.2s; display:inline-block;} button:hover, .button:hover {background-color:rgb(209,74,224); color:#fff;} .button.white {border:1px solid rgba(255, 255, 255, 0.5); background-color:rgba(255, 255, 255, 0.1);} .button.center {text-align: center;} button.outline, .button.outline {background-color:rgba(0,0,0,0); border:1px solid #000; color:#000;} ul, ol {padding-left:1.5em; line-height:1.6em;} ul.simple-vlist {list-style-type:none; margin:0; padding:0;} ul.simple-hlist {list-style-type:none; margin:0; padding:0;} ul.simple-hlist li {display:inline-block;} img {padding:0; margin:0; line-height:0; font-size:0; border:none; vertical-align: middle;} /* Core Layout */ .inset {margin:0 auto; padding:0px 30px; height:100%; max-width:1024px; position:relative;} .section {padding-top:60px; padding-bottom:60px;} .section-title {max-width:512px; margin:0 auto; text-align:center;} .center {text-align:center;} .columns {display:flex; flex-direction:row; flex-wrap:wrap;} .column-one {margin:0 auto; max-width:640px; position:relative;} .column-two {flex:1 0 50%; box-sizing:border-box; position:relative;} .column-two:first-child {padding-right:20px;} .column-two:last-child {padding-left:20px;} .column-three {flex:1 0 33%; box-sizing:border-box; position:relative;} .column-four {flex:1 0 25%; box-sizing:border-box; position:relative;} .grid {display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; box-sizing:border-box;} .grid-six {text-align:center; width:16.66%; box-sizing:border-box; flex-basis:16.66%; padding:30px 30px;} .grid-name {margin-top:10px;} .grid-description {color:#777; margin-top:10px;} /* Update Banner */ #update-banner {background-color:rgba(34,34,34,0.75); text-align:center; padding:10px 0; font-size:0.9em; -webkit-backdrop-filter: blur(10px);} #update-banner a {color:#fff;} #update-banner span {color:#888;} /* Global Navigation */ nav {width:100%; position:fixed; top:0; left:0; z-index:100; } #nav-global {height:52px; background-image:none; -webkit-backdrop-filter: blur(10px); box-shadow:0px 2px 3px rgba(0,0,0,0.3); transition:background-color 0.4s, color 0.2s; background-color:rgba(13,13,13,0.75); border-bottom:1px solid rgba(255, 255, 255, 0);} #logo {width:34px; height:100%; position:absolute; top:0; left:30px; background-size:34px 20px; display:inline-block; background-repeat:no-repeat; background-position:0 14px; background-image: url("../images/darkroom-logo-light.svg"); opacity:0.8; border-bottom:none;} #app-name {position:absolute; left:68px; font-weight:bold; font-size:21px; text-transform:uppercase; padding:14px 4px; color:#fff; border-bottom:none; opacity:0; display:none;} #faq #app-name, #updates #app-name, #about #app-name {display:inline-block; opacity:1.0;} #menu {position:absolute; right:22px; height:100%;} #menu li a {padding:14px 6px; margin:0 8px; display:inline-block; color:#999; transition:color 0.2s, opacity 0.2s; border-bottom:none;} #menu .get {transition:opacity 0.2s;} #menu .get img {width:17px; position:relative; top:-1px; margin-right:2px;} #menu .get span {vertical-align: baseline; color:rgb(209,74,224);} #menu .get:hover {opacity:0.8;} #nav-global a:hover {color:rgba(255,255,255,1);} #menu li a {position:relative;} #menu li a.active:after {position:absolute; height:2px; width:100%; background-color:#ddd; bottom:10px; left:0px; display:block; content:"";} /* Light Background Nav */ nav#nav-global.light {background-color:rgba(255,255,255,0.7);} #nav-global.light #logo {background-image: url("../images/darkroom-logo-dark.svg");} #nav-global.light #app-name {color:#000;} #nav-global.light a {color:#000;} #nav-global.light a:hover {color:rgba(0,0,0,0.5);} #nav a:hover.button {color:#fff;} /* Nav Highlight States */ #about #nav-global #nav-about {color:rgb(209,74,224);} /* Sub Navigation */ .subnav {background-color:#eee; padding:12px 12px; border-bottom:1px solid #ccc; text-align:left; margin-bottom:60px;} .subnav ul {} .subnav li {margin:0px 12px;} .subnav ul li:first-child {margin-left:0;} .subnav ul li:last-child {margin-right:0;} .subnav a {text-decoration:none;} #faq #subnav-support #subnav-support-faq, #updates #subnav-support #subnav-support-updates {opacity:0.4;} /* Footer */ footer {border-top:1px solid #eee; margin-top:40px; padding-top:40px; padding-bottom:40px;} footer li {color:#ddd; padding:2px 0px;} footer li a {border-bottom:none; color:#555;} footer li a:hover {border-bottom:1px solid #ccc;} #copyright {font-size:0.9em; line-height:1.6em; color:#ddd; text-align:center; margin-top:60px;} /* === Start of Pages === */ /* About Page */ #about main {padding-top:80px;} #about #people .person {margin-top:40px;} #about #people .person img {width:100px; border-radius:2px;} /* Help Page */ #faq main {padding-top:64px;} /* Tutorial Caoursel */ .carousel {width:100%; padding:20px; flex-direction:row; display:flex; box-sizing:border-box;} /* .carousel::-webkit-scrollbar {display:none;} */ .carousel-card {display:block; height:100%; margin:10px 10px; background-color:white; box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); transition:box-shadow 0.2s;} .carousel-card:hover {box-shadow:0px 1px 9px rgba(0, 0, 0, 0.25);} .carousel-image {height:140px; background-color:#eee; display:block;} .carousel-title {display:block; padding:10px;} .carousel-card-end {height:100%; width:20px;} /* Page Specific Overrides */ #faq .carousel {flex-wrap:nowrap; justify-content:initial; overflow-x:scroll; max-width: 1024px; padding:20px 2px; margin:20px auto; border-bottom:1px solid #eee;} #faq .carousel-card {margin:0 10px 0 0;} #faq .carousel-card-end {display:inline-block;} #home .carousel {flex-wrap:wrap; justify-content:center;} #home .carousel-card-end {display:none;} /* Updates Page */ #updates main {padding-top:120px;} #updates hr {width:100%; } #updates h3 {margin-bottom:0.2em; } #updates p.date {margin:0; color:#aaa;} #updates .columns div:first-child img {width:96px; margin-bottom:10px;} #updates #v10 div.hero {max-width:480px; margin:0 auto; text-align:center;} #updates #v10 div.hero img {width:128px;} /* Up Sell Pages */ #upsell img {width:100%;} #upsell p {text-align:center;} #upsell .button-area {position:absolute; bottom:10px; left:0; width:100%; padding:0 20px; box-sizing:border-box; } #upsell .button {width:100%; box-sizing:border-box; } /* === Home Page === */ #home {background-color:#0d0d0d; color:#bbb;} #home b {color:#fff;} #home .light {background-color:#fff; color:#555;} #home footer {margin-top:0;} /* temp update styles */ /* #home.update #filters {} */ /* Masthead */ #masthead {color:#fff; text-align:center; position:relative;} #hero-title {padding:80px 20px 0px 0px; flex:1 0 45%; align-self:center; text-align:left;} #hero-title h1#app-title {margin-bottom:20px; margin-top:20px; text-transform:uppercase;} #hero-title h2 {display:block; padding:0 20px;} #hero-title a {margin:30px 0; border:none; display:inline-block; transition:transform 0.2s;} #hero-title a:hover {transform: scale(1.05);} #hero-title a img { width:200px;} #hero-image {flex:1 0 55%; margin-top:100px;} #hero-image img {width:100%;} /* Nudge Arrow */ .nudge-arrow {display:block; width:60px; height:40px; position:absolute; bottom:30px; left:50%; margin-left:-30px; opacity:0.15; border:none;} .arrow {animation-name: floatingArrow; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;} @keyframes floatingArrow{0% {transform:translate(0, 0px);} 65% {transform:translate(0, 10px);} 100% {transform: translate(0, 0px);}} .arrow div:first-child{width:2px; height:40px; background-color:#fff; border-radius:2px; position:absolute; bottom:-34px; left:15px; transform: rotate(-45deg);} .arrow div:last-child {width:40px; height:2px; background-color:#fff; border-radius:2px; position:absolute; bottom:-15px; left:23px; transform: rotate(-45deg);} /* What's New Section */ #new, #apple {background-color:#191919;} #new a, #apple a {color:#fff;} #new-icons, #apple-icons {margin:60px auto 0px auto; font-weight:100; font-size:0.9em;} /* Testemonials */ #testemonials {line-height:2.4em; font-style:italic; font-size:1.1em; font-weight:lighter; text-align:center; background-color:#191919;} #testemonials a {color:#fff;} /* #testemonials .inset {padding:80px 0;} */ #testemonials .column-three {padding:0 30px;} #test-apple {font-size:2em; color:#fff;} #test-om {width:35px; height:35px; border-radius:18px; background-image:url("../images/main/testemonial/om.jpg"); background-size: cover; border:1px solid #fff; margin:0 auto;} #test-tv {height:20px; margin:8px auto; width:118px; background-image:url("../images/main/testemonial/theverge.svg"); background-size:contain; } /* Workflow */ #workflow {padding-top:60px; padding-bottom:0; background-color:#222; } #workflow .section-title {flex:1 0 100%; margin-bottom:20px;} #workflow-image-wrap {flex:1 0 100%; padding:0 60px;} #workflow-image {width:100%; transform-origin:50% bottom;} /* Filters */ #filters {border-bottom:none; padding-top:60px; padding-bottom:80px; background-color:#222;} #filters .section-title {margin-bottom:40px;} #filter-cards-bottom {position:relative; margin-top:20px; overflow:hidden;} .filter-cards {box-sizing: border-box; width:100%; white-space: nowrap; overflow:hidden; position:relative; text-align:center;} .filter-cards::-webkit-scrollbar {display:none;} .filter-card {border-radius:4px; display:inline-block; margin:8px 6px; overflow:hidden; transition:transform 0.2s; position:relative;} .filter-card:last-child {margin-right:20px;} .filter-image {height:130px; width:130px; background-color:#ddd;} .filter-image img {width:100%;} .filter-badge-custom {width:20px; height:20px; background-image:url("../images/main/filters-custom.svg"); position:absolute; top:4px; right:4px;} .filter-badge-premium {width:20px; height:20px; background-image:url("../images/main/filters-premium.svg"); position:absolute; top:4px; right:4px;} .filter-name {font-size:0.8em; background-color:#333; transition:background-color 0.2s; text-align:center; color:#aaa; padding:6px 0;} .filter-card:hover {transform: scale(1.05);} .filter-card:hover .filter-name {background-color:rgb(209,74,224); color:#fff;} #photo-credits {margin:40px auto 0 auto; padding:0 30px; text-align:center; line-height:1.8em; font-size:0.8em; max-width:480px; opacity:0.3; transition:opacity 0.2s;} #photo-credits:hover {opacity:1.0;} #photo-credits a {color:#fff;} /* ProKit */ #prokit {padding-bottom:0; border:none; background-color:#222;} #prokit-icon {width:48px; height:48px; display:inline-block;} #prokit img {width:100%;} /* grrr */ #prokit-image {position:relative; box-sizing:border-box; padding:0; } #prokit-image div {position:absolute; box-sizing:border-box; top:0; width:100%; height:100%; opacity:0.0; transition:opacity 1s; animation:crossFade 6s; animation-delay:2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate;} #prokit-image div img {height:100%; width:100%;} @keyframes crossFade {0% {opacity:0.0;} 50% {opacity:0.0;} 75% {opacity:1.0;} 100% {opacity:1.0;}} #prokit .column-two:first-child {flex:1 0 40%; align-self:center; text-align:left;} #prokit .column-two:last-child {flex:1 0 60%;} /* Tools */ #tools {margin:60px auto 0px auto; font-weight:100; font-size:0.9em; display:flex; flex-wrap:wrap; box-sizing:border-box; flex-direction:row; justify-content:center;} .tool {text-align:center; width:33.33%; box-sizing:border-box; flex-basis:33.33%; padding:30px 30px;} .tool-name {margin-top:10px;} .tool-description {color:#777; margin-top:10px;} /* Newsletter */ #newsletter {border-bottom:1px solid #eee; text-align:center;} #newsletter #mc_embed_signup input.email {width:300px; box-sizing:border-box; font-size:1em; padding:12px; height:auto;} #newsletter #mc_embed_signup input.button {width:auto; box-sizing:border-box; padding:14px 16px; background-color:#000; height:auto; line-height:initial; -webkit-appearance: none; -moz-appearance: none;} #newsletter #mc_embed_signup input.button:hover {background-color:rgb(209,74,224); color:#fff;} /* Mail Chimp specific style over ride */ #mc_embed_signup {clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} /* Home Help */ #home-help .carousel {max-width:1024px; margin:0 auto;} /* Devide Optimizations */ @media screen and (min-width: 1280px) {} /* desktop huge */ /* @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) {} retina desktop */ @media screen and (min-width: 1025px) and (max-width:1279px){} @media screen and (min-width: 769px) and (max-width:1024px){} /* hello desktop */ @media screen and (max-width: 768px) { /* most tablets */ /* Base Styles */ .columns {flex-direction:row; flex-wrap:wrap;} .column-four {flex:1 0 50%;} .column-two {flex:1 0 100%; box-sizing:border-box; position:relative;} .column-two:first-child {padding-right:0px;} .column-two:last-child {padding-left:0px;} .column-three {flex:1 0 100%;} .grid-six {width:33.33%; flex-basis:33.33%;} #hero-title {padding:80px 0px 0px 0px; max-width:640px; margin:0 auto; flex:1 0 100%; align-self:center; text-align:center;} #hero-image {margin-top:0px; flex:1 0 100%;} #workflow-image-wrap {padding:0px;} #testemonials .column-three {padding:30px 0px;} #testemonials .column-three:first-child {padding-top:0px;} #testemonials .column-three:last-child {padding-bottom:0px;} /* offset rows to make layout more interesting */ .filter-cards#fc-row1 .filter-card:first-child {margin-left:15px;} .filter-cards#fc-row2 .filter-card:first-child {margin-left:-60px;} #prokit .column-two:first-child, #prokit .column-two:last-child {flex:1 0 100%; align-self:center; text-align:center;} /* Updates Page */ #updates .columns div img {display:none;} #updates #v20.columns div.hero img {width:128px; display:block; margin:10px 0;} } @media screen and (max-width: 640px){} @media screen and (max-width: 640px) and (orientation:landscape) {} /* Mobile Landscape < iPhone 6 */ @media screen and (max-width: 480px) { /* phablet */ #update-banner {display:none;} .nudge-arrow {display:none;} .column-two:last-child {padding:0;} .section.light {text-align:left;} .light .section-title {text-align:left;} .grid-six {width:50%; flex-basis:50%;} /* nav menu */ #menu li a {padding:14px 6px; margin:0 0px;} #faq #app-name, #updates #app-name, #about #app-name {display:none;} /* upsell pages */ #upsell p {font-size:17px;} /* main page */ #app-title {font-size:3.4em;} #masthead .inset, #workflow .inset, #prokit .inset {padding:0px;} #masthead #hero-title, #workflow .section-title, #prokit .section-title {padding-left:30px; padding-right:30px;} #home .carousel {flex-wrap:nowrap; justify-content: initial; overflow-x:scroll; } #home .carousel-card {margin:0 10px 0 0;} #faq .carousel {padding-left:30px;} .tool {width:50%; box-sizing:border-box; flex-basis:50%; padding:20px 20px;} .grid-description {display:none;} #newsletter {} #newsletter #mc_embed_signup form {text-align:left;} #newsletter #mc_embed_signup input.email {width:200px;} footer li {padding:8px 0px;} footer #copyright {text-align:left;} } @media screen and (max-width: 320px) { /* small phones (original iphone) */ /* hide things on smallest devides */ .mhide, ul.simple-hlist li.mhide {display:none;} /* upsell pages */ #upsell p {line-height:2em; font-size:14px;} } @media screen and (device-aspect-ratio: 2/3) {} /* iPhone < 5: */