git.roojs.org Git - bootswatch/blob - erine-coming-soon/css/style.css

   1
   2 body {
   3     background: url('../img/backgrounds/1.jpg');
   4     font-family: 'Roboto', sans-serif;
   5     font-weight: 300;
   6     color: #fff;
   7     text-align: center;
   8 }
   9
  10 strong { font-weight: 700; }
  11
  12 a, a:hover, a:focus {
  13         color: #42bfc2;
  14         text-decoration: none;
  15     -o-transition: all .3s;
  16     -moz-transition: all .3s;
  17     -webkit-transition: all .3s;
  18     -ms-transition: all .3s;
  19     transition: all .3s;
  20 }
  21
  22 h2 {
  23         margin-top: 10px;
  24         font-size: 42px;
  25     font-weight: 100;
  26     line-height: 54px;
  27 }
  28
  29 img { max-width: 100%; }
  30
  31 ::-moz-selection { background: #42bfc2; color: #fff; text-shadow: none; }
  32 ::selection { background: #42bfc2; color: #fff; text-shadow: none; }
  33
  34
  35 /***** Coming Soon *****/
  36
  37 .coming-soon {
  38     margin: 0 auto;
  39 }
  40
  41 .inner-bg {
  42     padding: 75px 0 40px 0;
  43 }
  44
  45 .coming-soon .logo {
  46         padding-bottom: 20px;
  47 }
  48
  49 .coming-soon .logo h1 {
  50         margin: 0;
  51 }
  52
  53 .coming-soon .logo a {
  54         display: inline-block;
  55         width: 200px;
  56         height: 110px;
  57         text-indent: -99999px;
  58 }
  59 .coming-soon .logo a:focus { outline: 0; }
  60
  61
  62 /* these should be overridden */
  63 .coming-soon .logo a { background: url(../img/logo.png) center center no-repeat; }
  64
  65 .coming-soon .logo a:hover { background-image: url(../img/logo-hover.png); }
  66 .coming-soon .logo a:before { content: url(../img/logo-hover.png); }
  67
  68 .coming-soon .logo a:before {
  69         width: 0;
  70         height: 0;
  71         visibility: hidden;
  72 }
  73
  74 .coming-soon p {
  75         margin: 60px 0 10px 0;
  76         padding: 0 120px;
  77     font-size: 22px;
  78     line-height: 36px;
  79 }
  80
  81 .timer {
  82     margin-top: 60px;
  83 }
  84
  85 .timer .days-wrapper,
  86 .timer .hours-wrapper,
  87 .timer .minutes-wrapper,
  88 .timer .seconds-wrapper {
  89     display: inline-block;
  90     width: 160px;
  91     margin: 0 10px;
  92     font-size: 18px;
  93 }
  94
  95 .timer .days,
  96 .timer .hours,
  97 .timer .minutes,
  98 .timer .seconds {
  99     font-size: 80px;
 100     font-weight: 100;
 101     line-height: 90px;
 102 }
 103
 104 .subscribe {
 105         margin-top: 60px;
 106 }
 107
 108 .subscribe form input {
 109     width: 362px;
 110     height: 52px;
 111 }
 112
 113 .success-message, .error-message {
 114         margin-top: 20px;
 115         font-size: 18px;
 116     line-height: 32px;
 117 }
 118
 119
 120 /***** Footer *****/
 121
 122 footer {
 123         margin-top: 60px;
 124         padding: 20px 0 15px 0;
 125         background: #3d3d3d;
 126         background: rgba(61, 61, 61, 0.3);
 127 }
 128
 129 .footer-copyright p {
 130         margin: 0;
 131         font-size: 18px;
 132     line-height: 32px;
 133     color: #fff;
 134     text-align: left;
 135 }
 136
 137 .footer-copyright a { color: #fff; border-bottom: 1px dotted #fff; }
 138 .footer-copyright a:hover { color: #fff; border: 0; }
 139
 140 .footer-social {
 141         text-align: right;
 142 }
 143
 144 /* social icons */
 145 .social-icon {
 146         display: inline-block;
 147         width: 48px;
 148         height: 48px;
 149         margin: 5px;
 150         background: center center no-repeat;
 151 }
 152
 153 .social-icon.facebook { background-image: url(../img/social-icons/facebook.png); }
 154 .social-icon.twitter { background-image: url(../img/social-icons/twitter.png); }
 155 .social-icon.dribbble { background-image: url(../img/social-icons/dribbble.png); }
 156 .social-icon.google-plus { background-image: url(../img/social-icons/google-plus.png); }
 157