/* Theme Name: Bare Author: Michael Worobec Author URI: http://www.creativeunit.com.au/ Version: 1.2.1 */ /* ----------------------------------------------------------------------------- CONTENTS ----------------------------------------------------------------------------- 1. Constants 2. Boilerplate overrides 2.1. Base 2.2. Links 2.3. Typography 2.4. Forms 3. Globals 3.1. Tags -- headings, etc. 3.2. Classes 4. Template styles 4.1. Header 4.2. Footer 4.3. Content 5. Page-specific styles 5.1. Home 5.2. Single 5.3. Archive 5.4. Search 5.5. Contact /* ----------------------------------------------------------------------------- CONSTANTS 1 -------------------------------------------------------------------------- */ /* Colours Name 100% 50% 25% The Red #bf1e2e /* Fonts OpenSansLight OpenSansLightItalic OpenSansRegular OpenSansItalic OpenSansSemibold OpenSansSemiboldItalic OpenSansBold OpenSansBoldItalic OpenSansExtrabold OpenSansExtraboldItalic /* ----------------------------------------------------------------------------- BOILERPLATE OVERRIDES 2 -------------------------------------------------------------------------- */ /* Base */ html { font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'OpenSansLight', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } body { background: url('img/bg.jpg') no-repeat fixed 50% 50%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 100%; } /* Links */ a, a:visited { color: #bf1e2e; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } a:hover { color: #000; } /* Typography */ q:before { content: '\201C'; } q:after { content: '\201D'; } /* Forms */ input, select, textarea { border: 1px solid #ddd; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'OpenSansLight', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; padding: 9px; } select { -webkit-appearance: none; background: #fff url('img/arr.png') 100% 50% no-repeat; border-radius: 0; } input[type="submit"] { background-color: #bf1e2e; color: #fff; } input[type="submit"][disabled="disabled"] { background-color: #ddd; color: #fff; } /* ----------------------------------------------------------------------------- GLOBALS 3 -------------------------------------------------------------------------- */ /* Tags 3.1 */ h2, h3, h4, h5, h6 { font-weight: normal; } h2 { color: #fff; font-size: 2em; left: 0; line-height: 70px; margin: 0; position: absolute; text-transform: uppercase; top: 0; } h3 { color: #bf1e2e; font-size: 1.5em; text-transform: uppercase; } /* Classes 3.2 */ .alignleft { float: left; margin: 0 15px 10px 0; } .cats { color: #ccc; font-size: small; } .cats:hover { color: #999; } .cats a { color: #ccc; } .cats a:hover { color: #999; } .col_1 { float: left; margin: 0 5px; } .col_2 { float: right; margin: 0 5px; } .content-box { background: #fff; clear: both; margin: 1em 0; padding: 25px; } .content-box h3 { margin: 0.67em 0; } .content-box img { max-width: 100%; } .freeze { transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; } .transition { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } /* ----------------------------------------------------------------------------- TEMPLATE STYLES 4 -------------------------------------------------------------------------- */ /* Header 4.1 */ #main-header { position: fixed; } h1 { background: url('img/logo.png') no-repeat; height: 194px; margin: 35px 0 0; overflow: hidden; text-indent: -999em; width: 310px; } #main-nav { font-size: 1.5em; text-transform: uppercase; } #main-nav ul { padding: 0; } #main-nav ul li a { background: 100% 50%; color: #fff; display: block; padding-right: 84px; text-decoration: none; } #main-nav ul:hover li a { color: rgba(255, 255, 255, 0.4); } #main-nav ul li a:hover { background: url('img/disc.png') no-repeat 100% 50%; color: #fff; padding-right: 44px; text-align: right; } #main-nav ul li.current_page_item a { text-align: left; } /* Footer 4.2 */ #main-footer { background: #bf1e2e; bottom: 0; color: #fff; font-size: small; left: 0; overflow: hidden; position: fixed; text-transform: uppercase; width: 100%; z-index: 999; } #main-footer .col_1 { padding: 19px 0; } #main-footer .col_2 { padding: 19px 0; position: relative; } #back-to-top { color: #fff; display: none; position: absolute; right: 0; top: 0; white-space: nowrap; } #back-to-top:hover { text-decoration: none; top: -100%; } #back-to-top span { display: block; padding: 19px 0; } #watermark { background: url('img/watermark.png') no-repeat 50% -45px; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -2; } #curr { background: url('img/curr.png') no-repeat -999em 0; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1; } #supersized { list-style: none; margin: 0; padding: 0; } #supersized-loader { display: none; } /* Content 4.3 */ #content { position: relative; } #social-media { float: right; height: 70px; } #social-media ul { margin: 0; padding: 19px 0; } #social-media ul li { float: left; margin-left: 5px; } #social-media ul li a { background: url('img/icons.png'); border: 3px solid #fff; border-radius: 16px; display: block; height: 26px; overflow: hidden; text-indent: -999em; width: 26px; } #social-media ul li a.facebook { background-position: -26px 0; } #social-media ul li a.youtube { background-position: -52px 0; } #social-media ul li a.instagram { background-position: -104px 0; } #social-media ul li a.google- { background-position: -78px 0; } #social-media ul li a.facebook:hover { background-position: -26px -26px; } #social-media ul li a.youtube:hover { background-position: -52px -26px; } #social-media ul li a.instagram:hover { background-position: -104px -26px; } #social-media ul li a.google-:hover { background-position: -78px -26px; } #searchform { float: right; margin: 19px 0; position: relative; } #s { background: none; border: 3px solid #fff; border-radius: 16px; color: transparent; font-size: small; font-weight: bold; height: 26px; padding: 0 0 0 13px; width: 13px; } #searchform:hover #s { color: #fff; padding-right: 52px; width: 200px; } #searchsubmit { background: url('img/icons.png'); border: 3px solid transparent; border-radius: 16px; height: 32px; position: absolute; right: 0; text-indent: -999em; top: 0; width: 32px; } #searchsubmit:hover { background-position: 0 -26px; } #social-media-title { color: #fff; float: right; font-size: 1.5em; height: 70px; line-height: 70px; margin-right: 45px; text-transform: uppercase; } #push { font-size: small; padding: 19px 0; } /* ----------------------------------------------------------------------------- PAGE-SPECIFIC STYLES 5 -------------------------------------------------------------------------- */ /* Home 5.1 */ .home .content-box .col_1 { margin: 0 15px; text-align: right; width: 90px; } .home .content-box .col_2 { float: left; margin: 0 15px; width: 430px; } .home .content-box h3 { margin-bottom: 0; } .home .content-box h3 a { text-decoration: none; } .home .content-box h5 { color: #ccc; font-size: 1em; line-height: 1; margin-top: 0; text-transform: uppercase; } .home .content-box h5 a { color: #ccc; } .home .content-box h5 a:hover { color: #999; } /* Single 5.2 */ .single .content-box .col_1 { margin: 0 15px; text-align: right; width: 90px; } .single .content-box .col_2 { float: left; margin: 0 15px; width: 430px; } .single .content-box h3 { margin-bottom: 0; } .single .content-box h3 a { text-decoration: none; } .single .content-box h5 { color: #ccc; font-size: 1em; line-height: 1; margin-top: 0; text-transform: uppercase; } .single .content-box h5 a { color: #ccc; } .single .content-box h5 a:hover { color: #999; } /* Archive 5.3 */ .archive .content-box .col_1 { margin: 0 15px; text-align: right; width: 90px; } .archive .content-box .col_2 { float: left; margin: 0 15px; width: 430px; } .archive .content-box h3 { margin-bottom: 0; } .archive .content-box h3 a { text-decoration: none; } .archive .content-box h5 { color: #ccc; font-size: 1em; line-height: 1; margin-top: 0; text-transform: uppercase; } .archive .content-box h5 a { color: #ccc; } .archive .content-box h5 a:hover { color: #999; } /* Search 5.4 */ .search .content-box .col_1 { margin: 0 15px; text-align: right; width: 90px; } .search .content-box .col_2 { float: left; margin: 0 15px; width: 430px; } .search .content-box h3 { margin-bottom: 0; } .search .content-box h3 a { text-decoration: none; } .search .content-box h5 { color: #ccc; font-size: 1em; line-height: 1; margin-top: 0; text-transform: uppercase; } .search .content-box h5 a { color: #ccc; } .search .content-box h5 a:hover { color: #999; } /* Contact 5.5 */ .wpcf7-form-fields { list-style: none; margin: 0; padding: 0; } .wpcf7-form-fields li { margin: 5px 0; } .wpcf7-form-fields input, .wpcf7-form-fields textarea { width: 300px; } .wpcf7-form-fields select { width: 320px; } .wpcf7-form-fields input[type="submit"] { text-transform: uppercase; width: 320px; } .wpcf7-validates-as-required, .wpcf7-quiz { background-image: url('img/asterisk.png'); background-position: 100% 10px; background-repeat: no-repeat; } .wpcf7-form-fields .empty { color: #bbb; } .wpcf7-form-fields .valid { background-color: #dfd; background-image: none; } .wpcf7-form-fields .invalid, .wpcf7-not-valid { background-color: #fdd; background-image: none; color: #222; } .wpcf7-not-valid-tip-no-ajax { clear: both; display: block; font-size: small; padding: 5px 10px; } .wpcf7-response-output { background-color: #eee; padding: 10px; text-align: center; width: 300px; } .wpcf7-display-none { display: none; } .wpcf7-mail-sent-ok { background-color: #dfd; } .wpcf7-validation-errors { background-color: #fdd; }