/** * @package IcoFont by ThemeHunt - https://themehunt.com * @version 1.0.0 Beta * @author IcoFont http://icofont.com * @copyright Copyright (c) 2018 IcoFont * @license - http://icofont.com/license/ */ @font-face { font-family: 'icofont'; src: url('../fonts/icofont.eot?v=1.0.0-beta'); src: url('../fonts/icofont.eot?v=1.0.0-beta#iefix') format('embedded-opentype'), url('../fonts/icofont.ttf?v=1.0.0-beta') format('truetype'), url('../fonts/icofont.woff?v=1.0.0-beta') format('woff'), url('../fonts/icofont.svg?v=1.0.0-beta#icofont') format('svg'); font-weight: normal; font-style: normal; } .icofont { font-family: 'IcoFont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icofont-radio:before { content: "\f0b3"; } .icofont-disc:before { content: "\efda"; } .icofont-people:before { content: "\ea7e"; } .icofont-home:before { content: "\f01f"; } .icofont-finger-print:before { content: "\eca3"; } .icofont-rss-feed:before { content: "\f0c1"; } .iconfont-shop:before { content: "\eaa0"; } .icofont-newspaper:before { content: "\f085"; } .icofont-link:before { content: "\f04e"; } /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik/Rubik-Light.ttf'); } @font-face { font-family: 'RubikI'; src: url('../fonts/Rubik/Rubik-LightItalic.ttf'); } @font-face { font-family: 'RubikB'; src: url('../fonts/Rubik/Rubik-Medium.ttf'); } @font-face { font-family: 'RubikBI'; src: url('../fonts/Rubik/Rubik-MediumItalic.ttf'); } @font-face { font-family: 'plex'; src: url('../fonts/Bungee/Bungee-Regular.ttf'); font-weight: normal; font-style: normal; } /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html, body { height: 100%; background: #879976; color: #313d26; } body { display: flex; margin: 0; } html { font-family: Rubik, Helevetica, Arial, sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; text-transform: uppercase; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-family: RubikB, Helevetica, Arial, sans-serif; /* 1 */ } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /******* NAV MENU *******/ #navigation { /* background: linear-gradient(to bottom, #f4ffe8 400px, #f4ffe8, #60784a); */ background: #f4ffe8; flex: 0 0 50px; padding-top: 0px; } #navigation ul { margin: 0; padding: 0; font-size: 2em; } #navigation li { list-style-type: none; margin-top: 0.8em; text-align: center; } #navigation a { color:#60784a; transition-property: hover; transition: color 0.3s ease-in-out; } #navigation a:hover { color: #560784; background-color: transparent; } #navigation a.current { color: #1b2241; } /*! basspistol sheet */ h1, h2, h3, h4 { /* letter-spacing: -0.05em; */ font-family: plex; font-weight: normal; } h2 { font-size: 1.5em; } a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; } a, a:link, a:visited { color: #1b2241; transition-property: hover; transition: color 0.3s ease-in-out; } a:hover { color: #fafbff; border-radius: 2px; } a:active { color: #fafbff; } p { font-size: 1em; } /*! LAYOUT */ #content { flex-grow: 1; overflow-x: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #content a { text-decoration: underline; } #content a:hover { text-decoration: underline; } .fitter { padding: 10px; display: flex; flex-wrap: wrap; } #footer { font-size: .6em; text-align: left; line-height: 130%; width: 100%; padding-top: 100px; } /*********** RADIO PLAYER ***********/ audio{ position:fixed; right:0; bottom:0; min-width:100%; min-height:100%; width:100%; height:100%; background-size:cover; opacity:0.7; -webkit-transition:1s opacity;transition:1s opacity; display: block; } button { line-height: 1em; font-size:0.85em; text-transform: uppercase; padding: 7px; border-radius: 300px; border:none; background:#1b2241; -webkit-transition:.3s background; transition:.3s background; color: #f4ffe8; } button:hover { background:#560784; color: #f4ffe8; } #ffwd, #rwd { line-height: 1em; font-size:0.85em; text-transform: uppercase; padding: 3px 5px 3px 5px; border-radius: 50px; border:none; background:#1b2241; -webkit-transition:.3s background; transition:.3s background; color: #f4ffe8; text-decoration: none !important; } #ffwd:hover, #rwd:hover { background:#560784; color: #f4ffe8; text-decoration: none; } #mu_pause { width: 100px; height: 100px; font-size: 1.2em; text-align: center; } button #mu_pause { border-radius: 300px; } /******* AL PAGES ********/ .description { margin: 0 10px 10px 0; flex: 1 1 100%; } /*********** RECORDS PAGE ***********/ .records { margin: 0 10px 10px 0; flex: 1 1 300px; max-width: 500px; border-bottom: solid 1px #f4ffe8; } .recordthumbs { width: 100%; border-radius:3px; filter:sepia(1) hue-rotate(35deg); transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: .5; } img.recordthumbs:hover { width: 100%; border-radius:3px; filter:sepia(0) hue-rotate(0deg); opacity: 1; } .recordthumbs_mini { width: 100px; border-radius:3px; filter:sepia(1) hue-rotate(35deg); transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: .5; float:left; margin-right: 10px; } img.recordthumbs_mini:hover { width: 100px; border-radius:3px; filter:sepia(0) hue-rotate(0deg); opacity: 1; } /************* Articles Grid **************/ .articles { margin: 0 10px 10px 0; flex: 1 1 300px; max-width: 500px; } .articlethumbs { width: 100%; height: 200px; border-radius:3px; filter:sepia(1) hue-rotate(30deg); opacity: 0.75; transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; } img.articlethumbs:hover { width: 100%; border-radius:3px; filter:sepia(0) hue-rotate(0deg); opacity: 1; } .articles-pargraph { margin: 0 10px 10px 0; flex: 1 1 300px; max-width: 800px; } .article-nav-share { margin: 0 10px 10px 0; flex: 1 1 300px; max-width: 300px; } .square-image { width: 128px; height: 128px; border-radius: 200px; background-size:cover; background-repeat:no-repeat; margin: 0 10px 0 0; float: left; } /*********** VIDEO PLAYER ***********/ #bgvid { object-fit: cover; width: 100%; height: 100%; } #bgpic { object-fit: cover; width: 100%; height: 100%; display: inline-block; } @media screen and (max-width: 730px) { video { display: none; } } @media screen and (min-width: 731px) { #bgpic { display: none; } } /*********** ARTIST PAGE ***********/ .artistimg { background-size: cover; background-position: 50% 50%; padding: 100px; border-radius: 3px; filter:sepia(1) hue-rotate(30deg); transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; } .artistimg:hover { filter:sepia(0) hue-rotate(0deg); opacity: 1; } /*********** HEADLINERS ***********/ #headline { position: fixed; top: 0px; left: 50px; color: #f4ffe8; text-shadow: 0px 0px 10px #313d26; padding: 0 0 0 10px; margin-right:10px; border-radius: 3px; opacity: 1; font-size: 1em; z-index: 100; } /**************** HIGHLIGHT LINKS ****************/ #linkhead { object-fit: cover; width: 100%; height: 100%; display: inline-block; } #linkheadthumb { object-fit: cover; width: 100%; height: 100%; display: inline-block; } @media screen and (max-width: 730px) { #linkhead { display: none; } } @media screen and (min-width: 731px) { #linkheadthumb { display: none; } } .padded { padding: 10px; } #highlightlink { line-height: 1em; font-size:1em; text-transform: uppercase; padding: 20px; border-radius: 300px; border:none; background:#1b2241; -webkit-transition:.3s background; transition:.3s background; color: #f4ffe8; } #highlightlink:hover { background:#560784; color: #f4ffe8; } #commentlink { line-height: 1em; font-size:1em; text-transform: uppercase; padding: 20px; border-radius: 300px; border:none; background:#1b2241; -webkit-transition:.3s background; transition:.3s background; color: #f4ffe8; } #commentlink:hover { background:#560784; color: #f4ffe8; } .hilightindex { height: 250px; padding: 0 10px 0 10px; position: relative; border-radius: 3px 3px 0 0; filter:sepia(1) hue-rotate(30deg); transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: .5; } .hilightindex:hover { filter:sepia(0) hue-rotate(0deg); opacity: 1; } .highlights { margin: 0 10px 10px 0; flex: 1 1 300px; max-width: 500px; border-radius: 3px; height: 400px; opacity: .5; padding: 0 10px 0 10px; position: relative; filter:sepia(1) hue-rotate(30deg); transition-property: hover; transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; color: #1b2241; text-decoration: 0; background-position: center; background-size: cover; } .highlights:hover { filter:sepia(0) hue-rotate(0deg); opacity: 1; } .highlights h1 { background-color: #879976d7;; border-radius: 3px; padding: 0 10px 0 10px; text-decoration: none; } .hicontain { background-color: #f4ffe879; border-radius: 3px; margin-bottom: 10px; padding: 10px; max-height: 500px; } /* TRACK and ALBUM PAGES */ .download { padding: 20px; border-radius: 300px; border:none; background:#1b2241; -webkit-transition:.3s background; transition:.3s background; color: #f4ffe8; } .download:hover { background:#560784; color: #f4ffe8; }