/*===================================== = Master Styles = =====================================*/ /* Project: Matrix Version: 1 Last change: Initial RELEASED Primary use: MultiPurpose Template Author : TopOne themeforest Account : http://www.themeforest.net/user/topone */ /* ## ## ### ######## ######## #### ## ## ### ### ## ## ## ## ## ## ## ## #### #### ## ## ## ## ## ## ## ## ## ### ## ## ## ## ######## ## ### ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## */ /* ######## ####### ######## ####### ## ## ######## ## ## ## ## ## ## ## ### ## ## ## ## ## ## ## ## ## #### ## ## ## ## ## ######## ## ## ## ## ## ###### ## ## ## ## ## ## ## #### ## ## ## ## ## ## ## ## ### ## ## ####### ## ####### ## ## ######## */ /* @base --------------------------------------------------------- Your CSS begins with some global variables, a reset which is basically Normalize, some mixins, and a print stylesheet. ----------------------------------------------------- */ /** @variables --------------------------------------------------------- base/_vars.scss -------------------------------------------------------- Global variables are defined here. Define your colors, spacing and grid settings. ----------------------------------------------------- */ /* @colors -------------------------------------------------------- All color variables are defined here. We use real color names here. Although naming something like 'brand' is in fact more generic and reusable, we've found that you end up creating variables like $brand-2, $brand-alt, $brand-complimentary etc. While coding, it's too easy to forget what those mean. If the design changes drastically and the brand changes from, let's say, blue to green, just do a global find/replace - that's what text editors are for. ------------------------------------------------------ */ /* @breakpoints --------------------------------------------------------- Define global breakpoints as xs, sm, md, lg, xl, xxl --------------------------------------------------------- */ /* @global spacing unit --------------------------------------------------------- Define an em value for $unit. $unit is a helpful little variable that serves to keep your spacing consistent. Most often, 1 $unit is equal to your baseline height. So if your baseline height is 1.125ems (which is 18px), that's the value of 1 $unit. --------------------------------------------------------- */ /** @reset --------------------------------------------------------- base/_reset.scss -------------------------------------------------------- This reset institutes the border-box box model and then block and margin/padding resets. Throughout Skyline, each partial has it's own resets. This allows you to only use what you need. Credit goes to Normalize http://normalize.css v2.1.0 http://git.io/normalize --------------------------------------------------------- */ @import url("http://fonts.googleapis.com/css?family=Montserrat:400,700"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,700,800,600"); *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, audio, canvas, video { display: block; } /** @breakpoints mixin ----------------------------------------------------- base/_mixin-breakpoints.scss ----------------------------------------------------- This mixin makes using inline media queries easy. Options include bp-at-least for min-width, bp-until for max-width, and bp-between for min and max widths. You can use your breakpoint vars, or any other value. Usage: styles at medium breakpoint .some-element { @include bp-at-least($breakpoint__md){ your-styles: go-here; } } Usage: styles at custom breakpoint .another-element { @include bp-until(83.45em){ your-styles: go-here; } } ----------------------------------------------------- */ /** @clearfix mixin --------------------------------------------------------- base/_clearfix.scss -------------------------------------------------------- Use @include clearfix(); in your CSS Usage: clearfix mixin .element-to-clearfix { @include cleafix(); } --------------------------------------------------------- */ .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /** @font-face importer mixin ----------------------------------------------------------- _base/_mixin-font-face-importer.scss ----------------------------------------------------------- Use this mixin to embed a font $font-name is used in your css in font-family declarations $font-filepath-and-name is the location of your font file and the filename WITHOUT the file extension. The extensions are added here in the mixin Usage: @include embed-font($font-name, $font-filepath-and-name); --------------------------------------------------------- */ /** @gradual media queries mixin -------------------------------------------------------- base/_mixin-gradual-media-queries.scss -------------------------------------------------------- The mixin takes arguments of start-width, start-fontsize, end-width, and end-fontsize and then creates media queries between those start and end points at another argument value, increment-width. Usage: Gradually increase the font size of the html html { @include gradual-queries(20em, 80%, 70em, 100%, 10em) } In the above usage, the html fontsize will start out at 80% at 20em and end up at 100% at 70em - and the gradual changes in the fontsize percentage will be calculated at 10em intervals. See http://codepen.io/jeffschram/pen/IixqA ------------------------------------------------------ */ /** @fonts -------------------------------------------------------- base/_fonts.scss -------------------------------------------------------- Define the fonts used in this app and declare silent classes to be used in your CSS. If you are using a webfont that you're hosting, add the @embed-font() mixin from base/_mixin-font-face-importer.scs before you declare your fonts. Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions) @include embed-font("interstate-light", "/fonts/interstate_light-webfont"); If you are using Google Fonts, you can add the import code before you declare your fonts. @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700); -------------------------------------------------------- */ /* @sans -------------------------------------------------------- This is your basic sans font. Usage: use sans regular on a p p { @extend %sans--regular; } ------------------------------------------------------ */ .site-credits { font-family: "Open Sans", sans-serif; font-weight: 300; font-style: normal; } body, .btn { font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; } /* @monte -------------------------------------------------------- This is your basic serif font. Usage: use serif regular on a p p { @extend %serif--regular; } -------------------------------------------------------- */ input, input::-webkit-input-placeholder, input:-moz-placeholder, textarea { font-family: "Montserrat", sans-serif; font-weight: 300; } body { background-color: #f5f5f5; } /** @dev helpers -------------------------------------------------------- base/_dev-helpers.scss -------------------------------------------------------- Dev helpers highlight elements and/or show information about the site and its current state (breakpoints, etc.) These are made active by adding classes to the HTML element. A JS system to toggle these classes is in the works. This partial requires: * base/_vars.scss * base/_mixin-breakpoints.scss -------------------------------------------------------- */ /* @highlight elements at breakpoint -------------------------------------------------------- Highlight an element at certain breakpoints by changing its color; Add .dev--highlight to the HTML element to enable this. Example: Highlight a title at MD breakpoint

I will change color at MD breakpoint

-------------------------------------------------------- */ @media screen and (min-width: 20em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .xs-highlight { color: #94c1c8; } } @media screen and (min-width: 34.375em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .sm-highlight { color: #a2bb60; } } @media screen and (min-width: 48em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .md-highlight { color: #eb6d58; } } @media screen and (min-width: 64em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .lg-highlight { color: #0D699C; } } @media screen and (min-width: 78.5em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .xl-highlight { color: #c492bc; } } @media screen and (min-width: 100em) { .dev--highlight-elements [class*="-highlight"] { color: inherit; } .dev--highlight-elements .xxl-highlight { color: #76400b; } } /* @highlight grids in dev mode -------------------------------------------------------- Indicate grids using responsive widths at certain breakpoints. Add .dev--grids to the HTML element to enable this. No extra classes are needed on the grids themselves. -------------------------------------------------------- */ .dev--highlight-grids .g > *, .dev--highlight-grids .grid > * { min-height: 4em; background: rgba(193, 199, 208, 0.5); border: 1px solid rgba(193, 199, 208, 0.5); } @media screen and (min-width: 20em) { .dev--highlight-grids .g[class*="xs-"] > *, .dev--highlight-grids .grid[class*="xs-"] > * { border-color: #94c1c8; background: rgba(148, 193, 200, 0.25); } } @media screen and (min-width: 34.375em) { .dev--highlight-grids .g[class*="sm-"] > *, .dev--highlight-grids .grid[class*="sm-"] > * { border-color: #a2bb60; background: rgba(162, 187, 96, 0.25); } } @media screen and (min-width: 48em) { .dev--highlight-grids .g[class*="md-"] > *, .dev--highlight-grids .grid[class*="md-"] > * { border-color: #eb6d58; background: rgba(235, 109, 88, 0.25); } } @media screen and (min-width: 64em) { .dev--highlight-grids .g[class*="lg-"] > *, .dev--highlight-grids .grid[class*="lg-"] > * { border-color: #0D699C; background: rgba(13, 105, 156, 0.25); } } @media screen and (min-width: 78.5em) { .dev--highlight-grids .g[class*="xl-"] > *, .dev--highlight-grids .grid[class*="xl-"] > * { border-color: #c492bc; background: rgba(196, 146, 188, 0.25); } } @media screen and (min-width: 100em) { .dev--highlight-grids .g[class*="xxl-"] > *, .dev--highlight-grids .grid[class*="xxl-"] > * { border-color: #76400b; background: rgba(118, 64, 11, 0.25); } } @media screen and (min-width: 20em) { .dev--highlight-grids .gw[class*="xs-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xs-"][class*="-up"] > * > * { border-color: #94c1c8; background: rgba(148, 193, 200, 0.25); } } @media screen and (min-width: 34.375em) { .dev--highlight-grids .gw[class*="sm-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="sm-"][class*="-up"] > * > * { border-color: #a2bb60; background: rgba(162, 187, 96, 0.25); } } @media screen and (min-width: 48em) { .dev--highlight-grids .gw[class*="md-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="md-"][class*="-up"] > * > * { border-color: #eb6d58; background: rgba(235, 109, 88, 0.25); } } @media screen and (min-width: 64em) { .dev--highlight-grids .gw[class*="lg-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="lg-"][class*="-up"] > * > * { border-color: #0D699C; background: rgba(13, 105, 156, 0.25); } } @media screen and (min-width: 78.5em) { .dev--highlight-grids .gw[class*="xl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xl-"][class*="-up"] > * > * { border-color: #c492bc; background: rgba(196, 146, 188, 0.25); } } @media screen and (min-width: 100em) { .dev--highlight-grids .gw[class*="xxl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xxl-"][class*="-up"] > * > * { border-color: #76400b; background: rgba(118, 64, 11, 0.25); } } /* @show the current breakpoint -------------------------------------------------------- Adds a badge to the bottom right of the body to show the current breakpoint. To enable this, add .dev--show-breakpoint to the HTML element -------------------------------------------------------- */ .dev--show-breakpoint body:before { content: "-"; position: fixed; bottom: 0; right: 0; padding: 1em; border: 1px solid #b0b3b3; background: rgba(176, 179, 179, 0.25); font-size: .25em; line-height: 1; color: #b0b3b3; } @media screen and (min-width: 20em) { .dev--show-breakpoint body:before { content: "XS"; color: #94c1c8; background: rgba(148, 193, 200, 0.25); border-color: #94c1c8; } } @media screen and (min-width: 34.375em) { .dev--show-breakpoint body:before { content: "SM"; color: #a2bb60; background: rgba(162, 187, 96, 0.25); border-color: #a2bb60; } } @media screen and (min-width: 48em) { .dev--show-breakpoint body:before { content: "MD"; color: #eb6d58; background: rgba(235, 109, 88, 0.25); border-color: #eb6d58; } } @media screen and (min-width: 64em) { .dev--show-breakpoint body:before { content: "LG"; color: #0D699C; background: rgba(13, 105, 156, 0.25); border-color: #0D699C; } } @media screen and (min-width: 78.5em) { .dev--show-breakpoint body:before { content: "XL"; color: #c492bc; background: rgba(196, 146, 188, 0.25); border-color: #c492bc; } } @media screen and (min-width: 100em) { .dev--show-breakpoint body:before { content: "XXL"; color: #76400b; background: rgba(118, 64, 11, 0.25); border-color: #76400b; } } /** @print -------------------------------------------------------- base/_print.scss -------------------------------------------------------- Print Stylesheet from http://h5bp.com/r ----------------------------------------------------- */ /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r CREDIT: HTML5 Boilerplate ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*** @elements --------------------------------------------------------- Global styling of elements. --------------------------------------------------------- */ /** @body -------------------------------------------------------- elements/_body.scss -------------------------------------------------------- Body should contain the document's default font and background color for the content, if that background color is different than the html. ------------------------------------------------------ */ body { line-height: 1.5; color: #515554; } /** @buttons -------------------------------------------------------- elements/_buttons.scss -------------------------------------------------------- Buttons are a common UI component in sites/apps. They are usually either anchor, button, or input elements with a classname of 'btn'. They provide an easily identified clickable target. Buttons commonly have modifying classes that apply specific styles. Examples of these are .btn--large and .btn--inline Example: Buttons using anchors

Regular Button

Example: Buttons using buttons

------------------------------------------------------ */ button:focus, button:active { outline: none; box-shadow: none; border: none; } .btn { -webkit-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; background: #515554; color: #fff; border: none; font-size: 1.25em; text-transform: uppercase; text-decoration: none; letter-spacing: .225em; padding: 1em 1.25em; } .btn:hover, .btn:focus, .btn:active { outline: none; opacity: .85; } /* @btn--secondary -------------------------------------------------------- A btn modifier, secondary Example: .btn--secondary Secondary button ------------------------------------------------------ */ .btn--secondary { background: none; border: 1px solid #fff; color: #fff; } /* @btn--large -------------------------------------------------------- A btn modifier, large Example: .btn--large Large button ------------------------------------------------------ */ @media screen and (min-width: 34.375em) { .btn--large { font-size: 1.25em; padding: 1.25em 2.75em; } } /* @btn--inline -------------------------------------------------------- A btn modifier, if this button is in a paragraph or in anything else that has a defined font-size, this modifier will make the btn inherit the font-size of the partent. Example: .btn--inline

Here's some text Cool button text keeps going

------------------------------------------------------ */ .btn--inline { font-size: 1em; } /* @btn--block -------------------------------------------------------- A btn modifier - makes the button display block, 100% width and aligns the text to the center. Removes left and right padding since the text is center aligned, it is not needed. Actually sometimes having the padding on the left and right causes problems if the centered text is quite long - so we just remove it. Example: .btn--block Block button ------------------------------------------------------ */ .btn--block { display: block; width: 100%; text-align: center; padding-right: 0; padding-left: 0; } /* @btn--icon -------------------------------------------------------- A btn modifier - makes the button display block, 100% width and aligns the text to the center. Removes left and right padding since the text is center aligned, it is not needed. Actually sometimes having the padding on the left and right causes problems if the centered text is quite long - so we just remove it. Example: .btn--icon ------------------------------------------------------ */ .btn--icon { background: transparent; border: none; padding: 0; font-size: 1em; } /** @code -------------------------------------------------------- elements/_code.scss -------------------------------------------------------- Code elements like and 

  Example: Code in a paragraph
  
This is a cool paragraph about a classname called .franz



-----------------------------------------------------  */
code {
  vertical-align: middle;
  padding: .25em .5em;
  background: rgba(193, 199, 208, 0.3);
}

/**

  @forms
---------------------------------------------------------
  elements/_forms.scss
--------------------------------------------------------

  Base styles for all forms and form related elements

  Below you'll set styles for all forms, and if you have
  any specific kinds of forms, like a search form that you
  create a classname of form--search, put that at the
  bottom of this partial.

  This scss partial is pretty big.  Here's how it is
  organized.

  * Base styling on form elements

  * Styles for form & form modules


--------------------------------------------------------- */
/* @text inputs
--------------------------------------------------------

  Base styles for inputs

  Example: Text Input
  

  Inputs can use sizing classes, .input--s .input--l

  Example: Text Small Input
  

  Example: Text Input
  

------------------------------------------------------ */
input {
  -webkit-appearance: none;
  border-radius: 0;
  width: 100%;
  padding: 1em;
  border: 1px solid #515554;
  color: #515554;
}
input:focus {
  outline: none;
}
input.input--s {
  font-size: .5rem;
}
input.input--l {
  font-size: 1.5rem;
}

input::-webkit-input-placeholder {
  color: #515554;
}
input:-moz-placeholder {
  color: #515554;
}
input::-moz-placeholder {
  color: #515554;
}
input:-ms-input-placeholder {
  color: #515554;
}

input:focus::-webkit-input-placeholder {
  opacity: .3;
}
input:focus:-moz-placeholder {
  opacity: .3;
}
input:focus::-moz-placeholder {
  opacity: .3;
}
input:focus:-ms-input-placeholder {
  opacity: .3;
}

/* @select inputs
--------------------------------------------------------

  Base styling for all selects

  Example: Select Input
  

  Selects can have added sizing classes, .select--s and .select--l

  Example: Small select
  

  Example: Large select
  

------------------------------------------------------ */
select {
  width: 100%;
  font-size: 1rem;
}
select.select--sm {
  font-size: .5rem;
}
select.select--lg {
  font-size: 1.5rem;
}

/* @textareas
--------------------------------------------------------

  Base styling for textareas

  Textareas can have .textarea--s or .textarea--l classes
  for different sizes

  Example: Textarea
  

  Example: Small Textarea
  

  Example: Large Textarea
  

------------------------------------------------------ */
textarea {
  width: 100%;
  min-height: 6em;
  padding: 1em;
  border: solid 1px #515554;
}
textarea:focus {
  outline: none;
}
textarea.textarea--s {
  font-size: .5rem;
}
textarea.textarea--l {
  font-size: 1.5rem;
}

/* @radio inputs
--------------------------------------------------------

  Base styling for radio inputs.  Radios are surrounded
  by a label for better click targets.

  Example: Radio
  

  Example: Radio with super-long label
  


------------------------------------------------------ */
input[type=radio] {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #444;
  background: transparent;
}
input[type=radio]:checked {
  background: #222;
}

.label--radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 1em;
}
.label--radio input {
  position: absolute;
  top: .7em;
  left: 0;
}

/* @checkbox inputs
--------------------------------------------------------

  Base styling for checkbox inputs.  Checkboxes are surrounded
  by a label for better click targets.

  Example: Checkbox
  

  Example: Checkbox with super-long label
  


------------------------------------------------------ */
input[type=checkbox] {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  border: 1px solid #444;
  background: transparent;
}
input[type=checkbox]:checked {
  background: #222;
}

.label--checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 1em;
}
.label--checkbox input {
  position: absolute;
  top: .7em;
  left: 0;
}

/* @textareas
--------------------------------------------------------

  Base styling for textareas

  Example: Textarea
  

------------------------------------------------------ */
textarea {
  width: 100%;
}

/* @labels
--------------------------------------------------------

  Base styling for labels

  Example: label