xmpp/converse/css/theme.css

   1 body {
   2   width: 100%;
   3   height: 100%;
   4   font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
   5   color: #ffffff;
   6   background-color: #211018;
   7 }
   8 html {
   9   width: 100%;
  10   height: 100%;
  11 }
  12 h1,
  13 h2,
  14 h3,
  15 h4,
  16 h5,
  17 h6 {
  18   margin: 0 0 35px;
  19   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  20   font-weight: 700;
  21   letter-spacing: 1px;
  22 }
  23 h1 {
  24   text-transform: uppercase;
  25 }
  26 p {
  27   margin: 0 0 25px;
  28   font-size: 18px;
  29   line-height: 1.5;
  30 }
  31 @media (min-width: 767px) {
  32   p {
  33     margin: 0 0 35px;
  34     font-size: 20px;
  35     line-height: 1.6;
  36   }
  37 }
  38 a {
  39   color: #82B397;
  40   -webkit-transition: all 0.2s ease-in-out;
  41   -moz-transition: all 0.2s ease-in-out;
  42   transition: all 0.2s ease-in-out;
  43 }
  44 a:hover,
  45 a:focus {
  46   text-decoration: none;
  47   color: #00aaff;
  48 }
  49 .light {
  50   font-weight: 400;
  51 }
  52 .navbar {
  53   margin-bottom: 0;
  54   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  55   text-transform: uppercase;
  56   font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  57   background-color: #211018;
  58 }
  59 .navbar-brand {
  60   font-weight: 700;
  61 }
  62 .navbar-brand:focus {
  63   outline: none;
  64 }
  65 .navbar-custom a {
  66   color: #ffffff;
  67 }
  68 .navbar-custom .nav li a {
  69   -webkit-transition: background 0.3s ease-in-out;
  70   -moz-transition: background 0.3s ease-in-out;
  71   transition: background 0.3s ease-in-out;
  72 }
  73 .navbar-custom .nav li a:hover,
  74 .navbar-custom .nav li a:focus,
  75 .navbar-custom .nav li.active {
  76   outline: none;
  77   background-color: rgba(255, 255, 255, 0.2);
  78 }
  79 .navbar-toggle {
  80   padding: 4px 6px;
  81   font-size: 16px;
  82   color: #ffffff;
  83 }
  84 .navbar-toggle:focus,
  85 .navbar-toggle:active {
  86   outline: none;
  87 }
  88 @media (min-width: 767px) {
  89   .navbar {
  90     padding: 20px 0;
  91     border-bottom: none;
  92     letter-spacing: 1px;
  93     background: transparent;
  94     -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  95     -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  96     transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  97   }
  98   .top-nav-collapse {
  99     padding: 0;
 100     background-color: #211018;
 101   }
 102   .navbar-custom.top-nav-collapse {
 103     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 104   }
 105 }
 106 @media (max-width: 480px) {
 107     .navbar {
 108         display: none;
 109     }
 110 }
 111
 112
 113 .features-section,
 114 .outro,
 115 .intro {
 116   width: 100%;
 117   padding: 100px 0;
 118   text-align: center;
 119   color: #fff;
 120 }
 121 .intro {
 122   background: url(images/header.jpg) no-repeat bottom center scroll;
 123   background-color: #211018;
 124   -webkit-background-size: cover;
 125   -moz-background-size: cover;
 126   background-size: cover;
 127   -o-background-size: cover;
 128 }
 129 .features-section {
 130   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 131 }
 132 .features-section a {
 133   color: #82B397;
 134 }
 135 .outro {
 136   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
 137 }
 138 .brand-heading {
 139   font-size: 2em;
 140   text-align: center;
 141   margin-top: 3em;
 142 }
 143 .intro-text {
 144   font-size: 18px;
 145 }
 146 @media (min-width: 767px) {
 147   .intro {
 148     height: 100%;
 149     padding: 0;
 150   }
 151   .brand-heading {
 152     font-size: 80px;
 153   }
 154   .intro-text {
 155     font-size: 25px;
 156   }
 157 }
 158 .btn-circle {
 159   width: 70px;
 160   height: 70px;
 161   margin-top: 15px;
 162   padding: 7px 16px;
 163   border: 2px solid #ffffff;
 164   border-radius: 35px;
 165   font-size: 40px;
 166   color: #ffffff;
 167   background: transparent;
 168   -webkit-transition: background 0.3s ease-in-out;
 169   -moz-transition: background 0.3s ease-in-out;
 170   transition: background 0.3s ease-in-out;
 171 }
 172 .btn-circle:hover,
 173 .btn-circle:focus {
 174   outline: none;
 175   color: #ffffff;
 176   background: rgba(255, 255, 255, 0.1);
 177 }
 178 .page-scroll .btn-circle i.animated {
 179   -webkit-transition-property: -webkit-transform;
 180   -webkit-transition-duration: 1s;
 181   -moz-transition-property: -moz-transform;
 182   -moz-transition-duration: 1s;
 183 }
 184 .page-scroll .btn-circle:hover i.animated {
 185   -webkit-animation-name: pulse;
 186   -moz-animation-name: pulse;
 187   -webkit-animation-duration: 1.5s;
 188   -moz-animation-duration: 1.5s;
 189   -webkit-animation-iteration-count: infinite;
 190   -moz-animation-iteration-count: infinite;
 191   -webkit-animation-timing-function: linear;
 192   -moz-animation-timing-function: linear;
 193 }
 194 /*
 195 @-webkit-keyframes pulse {
 196   0 {
 197     -webkit-transform: scale(1);
 198     transform: scale(1);
 199   }
 200   50% {
 201     -webkit-transform: scale(1.2);
 202     transform: scale(1.2);
 203   }
 204   100% {
 205     -webkit-transform: scale(1);
 206     transform: scale(1);
 207   }
 208 }
 209 @-moz-keyframes pulse {
 210   0 {
 211     -moz-transform: scale(1);
 212     transform: scale(1);
 213   }
 214   50% {
 215     -moz-transform: scale(1.2);
 216     transform: scale(1.2);
 217   }
 218   100% {
 219     -moz-transform: scale(1);
 220     transform: scale(1);
 221   }
 222 }
 223 */
 224 .content-section {
 225   padding-top: 100px;
 226 }
 227 .donate-section {
 228   width: 100%;
 229   padding: 50px 0;
 230   color: #ffffff;
 231   background-color: #211018;
 232 }
 233 .donate-section p.bitcoin-header {
 234   margin: 0 0 5px;
 235 }
 236 @media (min-width: 767px) {
 237   .content-section {
 238     padding-top: 150px;
 239     padding-bottom: 50px;
 240   }
 241   .donate-section {
 242     padding: 100px 0;
 243   }
 244 }
 245 .btn {
 246   text-transform: uppercase;
 247   font-family: FontAwesome;
 248   font-weight: 400;
 249   -webkit-transition: all 0.3s ease-in-out;
 250   -moz-transition: all 0.3s ease-in-out;
 251   transition: all 0.3s ease-in-out;
 252 }
 253 .btn-default {
 254   border: 1px solid #82B397;
 255   color: #82B397;
 256   background-color: transparent;
 257 }
 258 .btn-default:hover,
 259 .btn-default:focus {
 260   border: 1px solid #82B397;
 261   outline: none;
 262   color: #211018;
 263   background-color: #82B397;
 264 }
 265 .btn-huge {
 266   padding: 25px;
 267   font-size: 26px;
 268 }
 269 .banner-social-buttons {
 270     padding-top: 7em;
 271 }
 272 ::-moz-selection {
 273   text-shadow: none;
 274   background: #fcfcfc;
 275   background: rgba(255, 255, 255, 0.2);
 276 }
 277 ::selection {
 278   text-shadow: none;
 279   background: #fcfcfc;
 280   background: rgba(255, 255, 255, 0.2);
 281 }
 282 img::selection {
 283   background: transparent;
 284 }
 285 img::-moz-selection {
 286   background: transparent;
 287 }
 288 body {
 289   webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
 290 }
 291 ul.contact,
 292 ul.integration,
 293 ul.screencasts,
 294 ul.features {
 295   text-align: left;
 296   font-size: 19px;
 297 }
 298 .feature-icon {
 299   display: inline-block;
 300   position: relative;
 301   padding-bottom: 5em;
 302   margin-bottom: 2.75em;
 303   cursor: default;
 304   color: #fff;
 305 }
 306 .feature-icon .fa {
 307   display: inline-block;
 308   width: 2em;
 309   height: 2em;
 310   font-size: 4em;
 311   border-radius: 100%;
 312   box-shadow: inset 0 0 0 1px white;
 313   color: white;
 314   line-height: 2.1em;
 315 }
 316 .feature-icon:before {
 317   content: '';
 318   background: white;
 319   position: absolute;
 320   bottom: 0;
 321   left: 50%;
 322   margin-left: -0.325em;
 323   width: 0.65em;
 324   height: 0.65em;
 325   display: block;
 326   border-radius: 100%;
 327 }
 328 .feature-icon:after {
 329   content: '';
 330   position: absolute;
 331   left: 50%;
 332   bottom: 0.65em;
 333   width: 1px;
 334   height: 4.35em;
 335   background: white;
 336   margin-left: -0.5px;
 337 }
 338 .row {
 339     margin-left: 0;
 340     margin-right: 0;
 341 }