/* Theme Name: Delve Video Essays Theme URI: https://viewportindustries.com/products/starkers Description: Delve Video Essays: built from the Starkers WordPress Theme by Adam Westbrook Version: 1.0 Author: Adam Westbrook, Elliot Jay Stocks & Keir Whitaker Author URI: https://viewportindustries.com Tags: video essays, delve, web video, documentaries, knowledge */ @import url(https://fonts.googleapis.com/css?family=Cardo:400,400italic|Montserrat); @import "wp-content/themes/delvetv/css/reset.css"; /* ====== TYPOGRAPHY ====== 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ html, body {height:100%;} body {font-size: 16px; color: #000;} h1#header_logo {font-family: 'Cardo', serif; font-style: italic; text-decoration: none; color: #fff; font-size: 90px;} h1#header_logo a {text-decoration: none; color: #fff;} h2 {font-size: 2.2em; text-align: center;} h3 {font-size: 1.8em; text-align: center; font-style: italic;} h4 {font-size: 2.5em; font-style: italic;} h5 {font-size: 1.2em; text-align: center; line-height: 50px;} h5 span {background-color: #fff; padding: 0 10px;} h6 {font-size: 1em;} a, a:hover {text-decoration: none; color: #555; text-decoration: underline;} #credits a {color: #eee; text-decoration: underline;} .black {color: #000;} .white {color: #fff;} .tertiary {color: #e8422d;} .left {float: left;} .right {float: right;} .clear {clear: both;} .contain {width: 80%; margin: 0 auto; display: block;} .contain80 {width: 80%; margin: 0 auto; display: block;} .contain50 {width: 50%; display: block; margin: 0 auto;} .contain30 {width: 33.333%; display: block;} .type_primary {font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.2em;} .type_secondary {font-family: 'Cardo', serif; line-height: 1.5em;} .aligncenter {display: block; margin-left: auto;margin-right: auto;} .alignleft {float: left; padding-right: 15px;} .alignright {float: right; padding-left: 15px;} .divider {width: 50%; margin: 30px auto 0; height: 30px; border-top: 1px dotted #000;} #about h2 {text-align: center; font-family: 'Montserrat', sans-serif; font-style: normal; padding: 25px 0; text-transform: uppercase; font-size: 1.5em;} #about p {font-family: 'Cardo', serif; line-height: 1.8em; font-size: 1.5em; padding: 10px 0;} /* ====== HEADER + NAVBAR + MAILING LIST) ===== */ header {width: 100%; display: block; height: 340px; background: url(img/header_bg.jpg) no-repeat center center fixed; background-size: cover;} #header_container {overflow: hidden; width: 250px; margin: 0 auto; position: relative;} #header_title {width: 240px; height: 240px; margin: 0 auto; border: 3px solid rgba(255,255,255,0.7); border-radius: 50%;} #header_title h1 {text-align: center; text-decoration: none; font-size: 5.5em; font-style: italic; line-height: 240px; text-shadow: 1px 1px 15px rgba(255,255,255,0.7);} #header_title h2 {text-align: center; text-decoration: none; font-size: 1em; margin-top: -90px;} #header_title a {text-decoration: none;} #header_social {width: 200px; margin: 30px auto;} #navbar {width: 100%; height: 60px; background-color: #000; text-align: center; clear: both; } #navbar ul li {line-height: 60px; display: inline;} #navbar ul li a {text-decoration: none; color: #fff; display: inline-block; padding: 0 15px;} #mailinglist {border: 1px dotted #000; padding: 0.8em; background-color: #f8f8f8; opacity: 0.7; -webkit-box-shadow: 1px 5px 10px #555; margin-top: 50px;} #listintro p {font-size: 1em; text-align: center; line-height: 1.8em;} .mc-field-group {margin-top: 2em; float: left; width: 50%;} input.required {width: 80%; margin: 0 auto; height: 30px;} input#mc-embedded-subscribe {width: 30%; height: 50px; margin: 1em auto; display: block;} .inputcontainer {width: 100%; padding: 0 5%; margin: 0 auto;} #abovefold #navbar {position: absolute; bottom: 0;} #abovefold {height: 100%; max-height: 700px; position: relative; display: block; background: #000 url(img/splash01_bg.jpg) no-repeat center center fixed; background-size: cover; margin-bottom: 50px;} #black_background {height: 100%; position: absolute; bottom: 0; background-color: #000; z-index: 10;} #splash_container {width: 90%; margin: 0 auto; padding: 18% 0 0;} #logo {width: 34%; text-align: center; float: left; height: 150px; } #slugline {width: 62%; text-align: center; float: right; height: 200px;} #fittext_logoh1 {font-style: italic; line-height: 150px ;text-shadow: 1px 1px 15px rgba(255,255,255,0.8);} #fittext_logoh2 {font-size: 1em; text-shadow: 2px 1px 6px #000;} #fittext_slugh2 {line-height: 200px; text-shadow: 2px 1px 6px #000;} #about_home {margin-bottom: 2em;} #about {margin-top: 3em;} /* ====== SINGLE ESSAY STYLES ===== */ section {padding: 3em 0;} #level1 {background-color: #fff; overflow: auto; border-bottom: 4px solid #e8422d;} #level2 {background-color: #eee; overflow: auto; border-bottom: 4px solid #e8422d;} #level3 {background-image: url(img/level3_bg.png); overflow: auto;} #video_top {width: 300px; height: 50px; margin: 3em auto; background-image: url(img/heading_backstripe.png); background-position: center center; background-repeat: no-repeat;} #video_middle {margin-bottom: 3em;} #video_bottom {} #fittext_title {margin-bottom: 0.5em;} #subtitle {margin-bottom: 3em;} #feather_container {width: 284px; margin: 0 auto;} #resources, #comments {width: 100%; border-top: 2px solid #000;} #resources_title, #comments_title {width: 40%; padding-top: 5px;} #resources_main, #comments_main {width: 60%; padding: 1em 0 3em;} #resources_main {line-height: 2em;} #resources_main li {padding-bottom: 8px;} #credits {line-height: 2em;} #social_follow {text-align: center;} /* ===== SINGLE INSTAGRAM STYLES ===== */ #instagram_singles {overflow: auto; min-height: 600px;} #instagram.contain {width: 80%; margin: 0 auto; border-top: 2px solid #000;} #instagram_heading h2, .instagram_heading h2 {text-align: left; font-size: 1.5em; } #instagram_heading h3, .instagram_heading h3 {text-align: left; font-size: 1em;} #instagram_singles {width: 80%; margin: 0 auto;} #instagram_heading, .instagram_heading {width: 40%; float: left; padding-top: 55px;} #instagram_video {width: 60%; float: right;} #instagram_header #social_share {padding: 3em 0;} #instagram_header h3 {max-width: 60%; margin: 0 auto;} /* ===== INSTAGRAM & ESSAY LOOPS ===== */ #instagram_loop, #essay_loop {margin-top: 60px;} .instagram-heading {width: 50%; float: left; margin-top: 49px; border-top: 1px solid #ccc; padding-top: 1em;} .instagram-video {width: 50%; float: right;} .instagram_title {text-align: left; font-size: 1.2em; padding-bottom: 1em;} .instagram_subtitle {text-align: left; font-size: 1.2em;} .instagram_title a {text-decoration: none; color: #000;} /*FOR RESPONSIVE INSTAGRAM VIDEOS*/ .videowrapper {position: relative; padding-bottom: 56.25%; padding-top: 25px;height: 0;} .videowrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #loop {margin-top: 3em; width: 60%; margin: 0 auto;} .loopbreaker {clear: both; margin-bottom: 3em; } /* ===== HOMEPAGE + FOOTER STYLES ====== */ footer {height: 50px; width: 100%; background-color: #000; clear: both;} p.colophon {text-align: center; line-height: 50px; font-size: 0.8em;} #latest_essay {width: 63%; float: left;} #latest_instagram {width: 35.5%; float: right;} #latest_essay_poster {width: 80%; margin: 0 auto;} #latest_instagram_poster {width: 80%; margin: 0 auto;} #latest_essay h2, #latest_instagram h2 {font-size: 1em; padding: 20px 0;} #mailinglist_home {clear: both;} #splash_404 {display:block; width: 100%; height: 100%; max-height: 900px; background: #000 url(img/splash01_bg.jpg) no-repeat center center fixed; background-size: cover;} #splash_404 h3 {padding-top: 30px; font-size: 1em; line-height: 4em;} #splash_404 h3 a {color: #fff;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /*IPAD LANDSCAPE (1024)*/ @media only screen and (max-width: 1024px) and (orientation: landscape) { #abovefold {height: 100%; max-height: 760px;} #splash_container {width: 70%; margin: 0 auto; padding: 22% 0;} #logo {width: 100%; text-align: center; float: none; height: 150px; } #slugline {width: 100%; text-align: center; float: none; height: 200px;} #fittext_logoh1 {font-style: italic; line-height: 220px;} #fittext_slugh2 {line-height: 350px;} } /*IPAD PORTRAIT (768)*/ @media only screen and (max-width: 768px) and (orientation: portrait) { body {font-size: 14px;} .contain {width: 85%} #credits {width: 50%; float: left;} #commons, #social_follow {width: 50%; float: right;} #loop {width: 95%;} .instagram-heading {width: 45%;} .instagram-video {width: 55%;} #abovefold {height: 100%; max-height: 1000px;} #splash_container {width: 70%; margin: 0 auto; padding: 22% 0;} #logo {width: 100%; text-align: center; float: none; height: 150px; } #slugline {width: 100%; text-align: center; float: none; height: 200px;} } /*MOBILE DEVICES*/ @media only screen and (max-width: 480px) { body {font-size: 12px;} h3 {font-size: 1.5em;} .contain {width: 90%;} .contain50 {width: 90%;} .mc-field-group {clear: left; width: 100%; font-size: 2em; margin-top: 1em;} input.required {width: 99%; height: 50px; padding-left: 0;} input#mc-embedded-subscribe {width: 100%;} .inputcontainer {padding: 0;} .left {clear: both;} .right {clear: both;} .alignleft {clear: left;} img.alignright {clear: both;} #resources_title, #comments_title {width: 100%; padding-top: 5px;} #resources_main, #comments_main {width: 100%; padding: 1em 0 3em;} #resources_title h4, #comments_title h4, #credits h4 {text-align: center;} .contain30 {width: 100%;} #credits, #commons {width: 100%; margin-bottom: 1em;} #social_follow {width: 200px; margin: 0 auto; } footer {bottom: 0px;} #loop {width: 95%;} .instagram-heading {clear: both; width: 100%; margin: 0 auto;} .instagram-video {clear: both; width: 100%; margin: 0 auto;} .videowrapper {padding-bottom: 100%;} h2.instagram_title {text-align: center; font-size: 2em;} h3.instagram_subtitle {text-align: center; font-size: 1.4em;} #instagram_singles {min-height: 600px;} #latest_essay {width: 100%; float: none;} #latest_instagram {width: 100%; float: none;} #latest_essay_poster {width: 90%; margin: 0 auto;} #latest_instagram_poster {width: 90%; margin: 0 auto;} #abovefold {height: 100%; max-height: 500px; background: url(img/splash01_bg_mob_port.jpg) no-repeat center center fixed; background-size: cover;} #splash_container {width: 95%; margin: 0 auto; padding: 12% 0;} #logo {width: 100%; text-align: center; float: none; height: 150px; } #slugline {width: 100%; text-align: center; float: none; height: 200px; } #fittext_logoh1 {font-style: italic; line-height: 150px;} #fittext_logoh2 {font-size: 1em;} #fittext_slugh2 {line-height: 200px;} #navbar {height: 200px;} #navbar ul li {line-height: 50px;} #navbar ul li a {font-size: 1.8em; padding: 0 80px;} }