$yellow: #F2C45A; /* normalise.css v3 */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;} @font-face { font-family: 'brandon_grotesque'; src: url('../fonts/brandongrotesque-regular-webfont.eot'); src: url('../fonts/brandongrotesque-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/brandongrotesque-regular-webfont.woff') format('woff'), url('../fonts/brandongrotesque-regular-webfont.ttf') format('truetype'), url('../fonts/brandongrotesque-regular-webfont.svg#brandon_grotesque_regularRg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'brandon_grotesque'; src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot'); src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/brandongrotesque-mediumitalic-webfont.woff') format('woff'), url('../fonts/brandongrotesque-mediumitalic-webfont.ttf') format('truetype'), url('../fonts/brandongrotesque-mediumitalic-webfont.svg#brandon_grotesqueMdIt') format('svg'); font-weight: 500; font-style: italic; } @font-face { font-family: 'brandon_grotesque'; src: url('../fonts/brandongrotesque-blackitalic-webfont.eot'); src: url('../fonts/brandongrotesque-blackitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/brandongrotesque-blackitalic-webfont.woff') format('woff'), url('../fonts/brandongrotesque-blackitalic-webfont.ttf') format('truetype'), url('../fonts/brandongrotesque-blackitalic-webfont.svg#brandon_grotesqueblack_italic') format('svg'); font-weight: 700; font-style: italic; } @font-face { font-family: 'brandon_grotesque'; src: url('../fonts/brandongrotesque-black-webfont.eot'); src: url('../fonts/brandongrotesque-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/brandongrotesque-black-webfont.woff') format('woff'), url('../fonts/brandongrotesque-black-webfont.ttf') format('truetype'), url('../fonts/brandongrotesque-black-webfont.svg#brandon_grotesqueblack') format('svg'); font-weight: 700; font-style: normal; } ///////////////// // Semantic.gs // for SCSS: http://sass-lang.com/ ///////////////// // Defaults which you can freely override $column-width: 60px; $gutter-width: 20px; $columns: 12; // Utility function — you should never need to modify this @function gridsystem-width($columns:$columns) { @return ($column-width * $columns) + ($gutter-width * $columns); } // Set $total-width to 100% for a fluid layout $total-width: 100%; // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html // $min-width: 999999; // $correction: 0.5 / $min-width * 100; // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { *zoom:1; &:before, &:after { content:""; display:table; } &:after { clear:both; } } ////////// // GRID // ////////// body { width: 100%; @include clearfix(); background: #FAFAFA; line-height: 1.5em; font-family: 'brandon_grotesque', Helvetica, Arial, sans-serif; color: #666; padding-bottom: 0; } a { color: $yellow; text-decoration: none; &:hover { text-decoration: underline; } } @mixin row($columns:$columns) { display: block; width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns)); margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1); // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction; // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction; @include clearfix(); } @mixin column($x,$columns:$columns) { display: inline; float: left; width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns)); margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns)); // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction; // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction; } @mixin push($offset:1) { margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); } @mixin pull($offset:1) { margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); } /* CSS START */ header { background: #000; width: 100%; line-height: 0; padding: 1em 0; h1 { margin: 0; max-width: 748px; margin: 0 auto; padding: 0 2em; font-size: 1em; } h1 span { font-size: 0em; } img { height: auto; width: 100%; margin: 0 auto; display: block; } } form, section { max-width: 768px; margin: 0 auto; padding: 1em 2em; } form { padding-top: 0; h2 { text-transform: uppercase; font-weight: bold; letter-spacing: 0.1em; font-style: italic; padding-top: 1em; border-top: 1px solid #EEE; color: #333; font-size: 1.2em; margin-bottom: 0.5em; } fieldset { display: block; @include column(6); border: none; padding: 0; padding-bottom: 1em; label { padding-top: 2em; } } input { border: 1px solid #AAA; padding: 0.5em 2.5%; line-height: 1em; width: 95%; font-size: 0.9em; } } label, h3 { text-transform: uppercase; font-weight: bold; display: block; padding: 0.5em 0; padding-top: 1em; font-size: 0.9em; line-height: 1em; color: #555; font-style: italic; letter-spacing: 0.1em; } .popover-content { padding: 9px 14px; } .popover { text-align: left; white-space: normal; } .popover.top { margin-top: -10px; } .fade.in { opacity: 1; } span.popovertext { cursor:hand; cursor: pointer; color: #F2C45A; } .popover { text-align: left; white-space: normal; } .popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; max-width: 276px; padding: 1px; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); white-space: normal; } .fade { opacity: 0; -webkit-transition: opacity .15s linear; transition: opacity .15s linear; } .popover.top .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999; border-top-color: rgba(0,0,0,0.25); bottom: -11px; } .popover .arrow { border-width: 11px; } .popover .arrow, .popover .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } a:hover { text-decoration:none; } div#content { @include column(7); p { font-weight: bold; text-transform: uppercase; font-size: 0.9em; line-height: 1em; } textarea { -moz-box-shadow: inset 0 1px 2px #000; border: 1px solid #AAA; background: #FFF; padding: 2.5%; height: 500px; display: block; width: 95%; } input#email-checkbox { width: auto; padding: 0; display: inline; margin-right: 0.5em; margin-top: 1em; } label { display: inline; text-transform: none; font-weight: normal; letter-spacing: normal; font-size: 1.1em; font-style: normal; } input.cta-button { padding: 0.5em 0; } #read-more { text-align: center; font-size: 1.25em; font-style: italic; display: block; padding-top: 0; padding-bottom: 0.75em; margin-bottom: 1em; text-align: center; border-bottom: 1px solid #EEE; } } .cta-button, input.cta-button { font-weight: bold; display: block; background: $yellow; color: #333; padding: 0.75em 0; letter-spacing: 0.1em; font-size: 1.25em; display: block; font-style: italic; text-align: center; text-decoration: none; text-transform: uppercase; line-height: 1em; margin: 1em 0; width: 100%; border: none; border-bottom: 2px solid #EEE; &:hover { background: #333; color: $yellow; } &:active { background: #111; color: darken($yellow, 10%); } } aside { @include column(5); h3 { padding-bottom: 0.5em; padding-top: 0; margin-bottom: 1.5em; display: inline-block; border-bottom: 2px solid #EEE; } p { margin-top: 0; } ol { display: block; background: #FFF; padding: 0.5em 1.5em; padding-bottom: 1.5em; list-style-type: none; border-bottom: 3px solid #EEE; li { margin-bottom: 1.5em; &:last-child { padding:0; margin: 0; border: 0; } h4 { margin: 0; color: #333; } } } } footer { background: #000; width: 100%; padding: 1em 0; clear: both; div { max-width: 768px; padding: 0 2em; margin: 0 auto; @include clearfix; p { float: left; width: 51%; margin: 0; font-size: 0.85em; color: #FFF; line-height: 1.2em; } i { float: right; display: inline-block; vertical-align: middle; } } } /* Call Page */ .call { div#content { text-align: center; max-width: 600px; width: auto; margin: 0 auto; float: none; display: block; aside { width: auto; display: block; float: none; text-align: left; margin-top: 2em; font-size: 1.1em; p { font-style: normal; &:last-child { margin-bottom:0; } } } h2 { font-weight: normal; line-height: 1.25em; font-size: 1.25em; } img { margin-top: 1em; } a.cta-button { padding-left: 0; padding-right: 0; width: 98%; margin: 0 auto; } p { line-height: 1.5em; text-transform: none; font-weight: normal; font-style: italic; font-size: 1.05em; color: #777; a { white-space: nowrap; text-shadow: 0 1px 3px #FFF; } } ul#bill-details { text-align: left; padding: 0 1em; list-style-type: none; li { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #DDD; } &.invisible { display: none; } } } footer a { opacity: 0.6; transition: all 0.2s ease-in-out; &.tdwfb { opacity: 1; } img { height: auto; vertical-align: middle; width: 171px; &.twilio-privacy { width: 114px; } } &:hover { opacity: 0.9; } } } /* Thank You page */ .thank-you { background: #000; color: #EEE; text-align: center; font-size: 0.95em; line-height: 1.5em; padding-bottom: 1em; header { padding-bottom: 0; h1 { padding: 2em; padding-bottom: 0; max-width: 400px; } } form { padding: 0 2em; max-width: 400px; } input { margin: 0; width: 92%; padding: 1em 4%; border: none; line-height: normal; color: #333; &#submit { padding: 0.8em 0; width: 100%; border: none; margin-top: 0.15em; margin-bottom: 1em; font-size: 1em; box-shadow: none; } } section { max-width: 600px; padding-top: 0; p { font-size: 1.2em; span { display: block; } } .twilio-container { font-size: 0.8em; img { vertical-align: middle; } } } footer { background: #222; } h2 { text-transform: uppercase; padding-top: 1.5em; margin-top: 1.5em; font-size: 1.2em; border-top: 1px solid #333; } #also-call { h2 { padding: 0; margin-top: 1.5em; font-size: 1.5em; border: none; } .twilio-container a { opacity: 0.6; transition: all 0.2s ease-in-out; img { height: auto; vertical-align: middle; width: 171px; &.twilio-privacy { width: 114px; } } &:hover { opacity: 0.9; } } } a.cta-button { display: inline-block; width: auto; border: none; font-size: 0.9em; padding: 0.8em 2em; margin: 0; } i.i-logo { margin-top: 1.5em; } #social { padding-top: 2em; margin-bottom: 1em; text-align: center; @include clearfix; a { @include column(4); display: inline-block; position: relative; margin: 0 auto; transition: 0.2s ease-in-out all; opacity: 0.8; &:hover { opacity:0.95; } } .social-count:after { background: #FFF; text-transform: uppercase; font-style: italic; font-weight: bold; border-radius: 1px; top: -33px; color: #333; content: attr(count); display: block; left: 50%; margin-left: -32px; width: 54px; padding: 5px; line-height: 1em; text-align: center; position: absolute; white-space: nowrap; } .social-count:before { border: solid; border: 1px solid $yellow; border-color: #111 transparent; border-color:$yellow transparent; border-width: .2em .2em 0 .2em; top: -8px; content: ""; display: block; left: 50%; margin-left: -.2em; position: absolute; } .sicon { width: 54px; height: 54px; margin: 0 auto; position: relative; background-color: black; background-image: url('../imgs/social-icons.png'); } #sfb { background-position: 66.6666% 0; } #stwit { background-position: 33.3333% 0; } #sgplus { background-position: 0% 0; } } } /* =====================================*/ /* CSS Sprite */ /* =====================================*/ .i { background-image: url('../imgs/image.png'); background-repeat: no-repeat; display: block; margin: 0 auto; } .i-email { width: 172px; height: 19px; background-position: -1px -25px; margin-top:13px; } .i-call { width: 144px; height: 22px; background-position: -1px -1px; margin-top:30px; } .i-logo { width: 279px; height: 30px; background-position: -1px -46px; } /* =====================================*/ /* Media Queries */ /* =====================================*/ @media screen and (max-width: 600px) { body { font-size: 0.9em; padding: 0; } footer { position: static; text-align: center; font-size: 0.9em; margin-top: 2em; div { p { float: none; width: auto; margin-bottom: 1em; } i { float: none; margin: 0 auto; } } } form { padding-bottom: 2em; } aside { display: none; } div#content, div#content h2, .call aside { width: auto; float: none; margin: 0; display: block; } .call div#content img { margin-bottom: 1em; } h2 { clear: both; display: block; } } @media screen and (max-width: 400px) { form { fieldset { float: none; width: auto; margin: 0; display: block; } } } @media screen and (-webkit-min-device-pixel-ratio:0) { .thank-you input { padding-top: 1.2em; } .thank-you a.cta-button,.thank-you input#submit { padding-top: 1em; } form input, div#content input.cta-button { padding-top: 0.8em; } .cta-button, input.cta-button { padding-top: 0.95em; } }