app/assets/css/styles.css.erb
/* CSS reset from http://meyerweb.com/eric/tools/css/reset/ */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #182A4A;
}
input, select, .leaflet-popup, #map {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
strong {
font-weight: 700;
}
/*********** Text Styles **************/
.green {
color: #59b390;
}
.orange {
color: #e47c5d;
}
.red {
color: #e22e41;
}
.bold {
font-weight: 700;
}
.no-wrap {
white-space: nowrap;
}
/*********** Form Elements **************/
.bigButton {
color: #fff;
text-align: center;
border: 6px solid #fff;
border-radius: 15px;
padding: 20px;
font-size: 35px;
width: 100%;
display: inline-block;
font-weight: 700;
}
.bigButton:hover, .bigButton.selected {
background: #fff;
color: #E47C5D;
cursor: pointer;
}
.orangeButton {
color: #E47C5D;
border-color: #E47C5D;
}
.orangeButton:hover, .orangeButton.selected {
background: #E47C5D;
color: #fff;
}
.greenButton {
color: #59B390;
border-color: #59B390;
}
.greenButton:hover, .greenButton.selected {
background: #59B390;
color: #fff;
}
.disabledButton, .disabledButton:hover, .disabledButton.selected {
border-color: #d1d5d8;
background: #d1d5d8;
color: #fff;
}
.bigSelect select {
background-color: #F1F1F2;
width: 100%;
}
input, select {
margin-bottom: 10px;
height: 60px;
padding: 10px 16px;
font-size: 20px;
line-height: 1.428571429;
color: #717B84;
vertical-align: middle;
background-color: #FFF;
border: 2px solid #8A949D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-moz-appearance: none;
-webkit-appearance: none;
}
input:focus, select:focus {
outline: none;
border-color: #182A4A;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(24, 42, 74, 0.6);
}
header {
background: #182a4a;
background-size: cover;
min-height: 450px;
position: relative;
}
/*********** Header **************/
header .row {
padding: 30px 0px 40px 0px;
}
header .logo {
background: url(<%= asset_path 'icons/citygram-logo-white.png' %>) no-repeat;
background-size: 272px 68px;
height: 80px;
width: 320px;
}
header h1 {
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
color: #fff;
font-weight: 700;
line-height: 1em;
}
header h3 {
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
color: #FFF;
font-weight: 200;
line-height: 1.2em;
font-size: 2em;
}
header .startButton {
width: 240px;
}
/*********** Sections **************/
section {
padding: 30px 100px;
margin-bottom: 30px;
margin-top: 30px;
}
section .instruction {
padding-bottom: 10px;
margin-bottom: 20px;
}
section h2 {
font-weight: 800;
margin-bottom: 12px;
}
section h3 {
color: #717B84;
font-weight: 200;
}
.hide {
display: none;
}
/*********** Publisher Section **************/
#step1 .publishers {
padding-left: 5px;
}
#step1 .publisher {
position: relative;
display: inline-block;
background: #F1F1F2;
width: 220px;
height: 220px;
border-radius: 15px;
vertical-align: top;
margin: 10px;
text-align: center;
border: 1px solid #E8E8E9;
cursor: pointer;
}
#step1 .publisher .publisher-topic {
opacity: 1;
}
#step1 .publisher .publisher-description {
background-color: #8b969e;
color: #fff;
border-radius: 10px;
padding: 20px 15px;
line-height: 1.2;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0;
transition: opacity .2s linear;
}
#step1 .publisher .publisher-description .definition {
height: 65%;
overflow: auto;
}
#step1 .publisher.is-active .publisher-description {
opacity: 1;
}
#step1 .publisher.selected {
border: 5px solid #182A4A;
}
#step1 .publisher .city {
text-transform: uppercase;
border-bottom: 2px solid #BAC0C8;
font-size: 13px;
padding: 9px 0;
font-weight: 700;
padding-top: 12px;
}
#step1 .publisher img {
width: 100px;
height: 100px;
}
#step1 .publisher .title {
font-size: 32px;
padding: 8px;
line-height: 36px;
padding-top: 20px;
font-weight: 200;
}
#step1 .publisher.soon {
position: relative;
color: #8b969e;
}
#step1 .publisher.soon::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
background: url(<%= asset_path 'icons/coming-soon.png' %>);
background-size: 120px 120px;
width: 120px;
height: 120px;
}
/*********** Map Section **************/
.leaflet-popup {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
word-wrap: break-word;
}
#step2 .instruction {
position: relative;
}
#step2 #map {
height: 400px;
width: 100%;
border: 1px dashed #D1D5D8;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
#step2 #geolocate {
width: 100%;
}
/********************* digest *******************/
body {
font-weight: 300;
}
h1 {
font-size: 48px;
line-height: 54px;
margin-bottom: 30px;
}
h3 {
font-weight: 300;
margin-top: 15px;
}
h5 {
font-weight: 700;
margin-top: 7px;
}
.topic {
font-weight: 700;
}
.phone {
font-weight: 700;
color: #8a949d;
opacity: .7;
}
.logo {
margin-bottom: 20px;
}
.container {
margin-top: 30px;
}
.subscription-box {
background-color: #F3F5F5;
border-radius: 10px;
border-style: solid;
border-width: 1px;
border-color: #e7e8ea;
padding: 10px;
}
.icon {
width: 50px;
margin-left: 28%;
}
.orange {
color: #e57d5e;
font-weight: 700;
}
.red {
color: #e22e41;
font-weight: 700;
}
.navy {
font-weight: 700;
}
.green {
color: #59b390;
font-weight: 700;
}
.table {
margin-top: 40px;
font-size: 16px;
height: 100%;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
line-height: 1.6;
vertical-align: middle;
}
/*********************** end digest ***************/
/*
Comment out to test necessity of buttons
#step2 .geolocateButton {
padding: 9px;
position: relative;
top: 6px;
margin-left: 6px;
}
#step2 .mapButton {
min-width: 80%;
margin: 0 auto;
display: block;
margin-top: 30px;
}
*/
#map .map-key-panel {
position: absolute;
margin-top: 10px;
margin-left: 48px;
color: #5b5b5b;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 3px;
z-index: 1001;
padding: 10px;
font-size: 1.2em;
}
#map .map-key-panel .map-event-dot {
display: inline-block;
margin-right: 5px;
border-radius: 50%;
width: 11px;
height: 11px;
background-color: rgba(252,68,42,0.1);
border: 2px solid rgba(252,68,42,0.5);
}
.frequencyIcon {
margin-left: 40px;
display: inline-block;
vertical-align: middle;
}
.frequencyText {
margin-left: 30px;
display: inline-block;
font-weight: 300;
font-size: 1.5em;
line-height: 1.6;
vertical-align: middle;
}
.frequencyTitle {
font-size: 0.9em;
font-weight: 700;
text-transform: uppercase;
}
/*********** Contact Section **************/
#step3 .channelButtons {
text-align: center;
margin-bottom: 10px;
}
#step3 .smsButton, #step3 .emailButton {
margin-right: 1%;
margin-bottom: 15px;
position: relative;
}
#step3 .smsButton span, #step3 .emailButton span {
position: relative;
left: 25px;
}
#step3 .smsButton span::after, #step3 .emailButton span::after {
content: '';
position: absolute;
left: -60px;
top: -2px;
background: url(<%= asset_path 'icons/sms.png' %>) no-repeat;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
#step3 .smsButton:hover span::after, #step3 .smsButton.selected span::after, #step3 .smsButton.disabledButton span::after {
background: url(<%= asset_path 'icons/sms-inverted.png' %>) no-repeat;
background-size: 50px 50px;
}
#step3 .emailButton span::after {
background: url(<%= asset_path 'icons/email.png' %>) no-repeat;
background-size: 50px 50px;
top: -5px;
}
#step3 .emailButton:hover span::after, #step3 .emailButton.selected span::after, #step3 .emailButton.disabledButton span::after {
background: url(<%= asset_path 'icons/email-inverted.png' %>) no-repeat;
background-size: 50px 50px;
}
#step3 .emailButton.disabledButton, #step3 .smsButton.disabledButton {
cursor: default;
}
#step3 .emailButton:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
background-size: 160px 67px;
width: 160px;
height: 67px;
}
#step3 .disabledInfo {
font-size: 2em;
}
#step3 .extraInfo, #step3 .disabledInfo {
margin: 0 auto;
position: relative;
margin-top: 20px;
}
#step3 .phoneNumber, #step3 .emailAddress {
width: 100%;
display: inline-block
}
#step3 .subscribeButton {
font-size: 23px;
padding: 13px;
}
/*********** Confirmation Section **************/
#confirmation {
padding-top: 240px;
background: url(<%= asset_path 'icons/success.png' %>) center 60px no-repeat;
background-size: 150px 150px;
}
#confirmation .resetButton {
width: 100%;
margin-top: 30px;
}
#confirmation p {
font-size: 35px;
line-height: 50px;
text-align: center;
}
.menu-ui {
background:#fff;
position:absolute;
top:25px;right:20px;
z-index:1;
border-radius:3px;
width:120px;
border:1px solid rgba(0,0,0,0.4);
}
.menu-ui a {
font-size:0.75em;
color:#404040;
display:block;
margin:0;padding:0;
padding:10px;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.25);
text-align:center;
}
.menu-ui a.selected,
.menu-ui a.selected:hover {
color: #fff;
background-color: #182A4A;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}