styles.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. @font-face {
  2. font-family: 'Lato';
  3. font-style: normal;
  4. font-weight: 300;
  5. src: local('Lato Light'), local('Lato-Light'), url(../fonts/Lato-Light.ttf) format('truetype');
  6. }
  7. @font-face {
  8. font-family: 'Lato';
  9. font-style: normal;
  10. font-weight: 400;
  11. src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/Lato-Regular.ttf) format('truetype');
  12. }
  13. @font-face {
  14. font-family: 'Bitter';
  15. font-style: normal;
  16. font-weight: 400;
  17. src: local('Bitter-Regular'), url(../fonts/Bitter-Regular.ttf) format('truetype');
  18. }
  19. html,body {
  20. height:100%;
  21. background:center no-repeat fixed url('/img/dino.jpg');
  22. background-size: cover;
  23. color:#444;
  24. font-family: 'Lato', sans-serif;
  25. }
  26. @media (min-width:768px) {
  27. h1, h2 {
  28. font-size: 4.5em;
  29. }
  30. }
  31. h3 {
  32. font-size: 3em;
  33. }
  34. p.answer {
  35. font-size: 1.5em;
  36. }
  37. a {
  38. color:#999;
  39. }
  40. a:hover {
  41. color:#777;
  42. }
  43. .btn,.well,.panel {
  44. border-radius:0;
  45. }
  46. .btn-danger {
  47. background-color:#f44d3c;
  48. }
  49. .text-danger, a.text-danger {
  50. color:#f44d3c;
  51. }
  52. .btn-huge {
  53. padding:17px 22px;
  54. font-size:22px;
  55. }
  56. .lato {
  57. font-family: 'Lato', sans-serif;
  58. }
  59. .bitter {
  60. font-family: 'Bitter', serif;
  61. }
  62. .icon-bar {
  63. background-color:#fff;
  64. }
  65. .navbar-trans {
  66. background-color:#2b2b2b;
  67. color:#cdcdcd;
  68. border-width:0;
  69. }
  70. .navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
  71. padding: 14px;
  72. color:#f44d3c;
  73. }
  74. .navbar-trans li>a:focus,.navbar-trans li.active {
  75. background-color:#f44d3c;
  76. color:#333;
  77. }
  78. .navbar-trans li>a:hover {
  79. background-color:#f44d3c;
  80. color:#fff;
  81. opacity:0.5;
  82. }
  83. .navbar-trans a{
  84. color:#cdcdcd;
  85. letter-spacing:1px;
  86. }
  87. .navbar-trans .form-control:focus {
  88. border-color: #eee;
  89. outline: 0;
  90. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
  91. box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
  92. }
  93. .scroll-down {
  94. position: absolute;
  95. left: 50%;
  96. bottom: 40px;
  97. border: 2px solid #fff;
  98. border-radius: 50%;
  99. height: 50px;
  100. width: 50px;
  101. margin-left: -15px;
  102. display: block;
  103. padding: 7px;
  104. text-align: center;
  105. z-index:-1
  106. }
  107. .scroll-up {
  108. position: fixed;
  109. display: none;
  110. z-index: 999;
  111. bottom: 2em;
  112. right: 2em;
  113. }
  114. .scroll-up a {
  115. background-color: rgba(135, 135, 135, 0.5);
  116. display: block;
  117. width: 35px;
  118. height: 35px;
  119. text-align: center;
  120. color: #fff;
  121. font-size: 15px;
  122. line-height: 30px;
  123. }
  124. section {
  125. padding-top:70px;
  126. padding-bottom:50px;
  127. min-height:100%;
  128. min-height:calc(100% - 0);
  129. -webkit-transform-style: preserve-3d;
  130. -moz-transform-style: preserve-3d;
  131. transform-style: preserve-3d;
  132. }
  133. @media (min-width:768px) {
  134. .v-center {
  135. height: 50%;
  136. overflow: visible;
  137. margin: auto;
  138. position: absolute;
  139. top: 0; left: 0; bottom: 0; right: 0;
  140. }
  141. }
  142. #home, #more-info {
  143. background-color: rgba(0,0,0,0.7);
  144. color:#fff;
  145. font-family: 'Bitter', serif;
  146. }
  147. #speakers {
  148. background-color: rgba(0,0,0,0.7);
  149. color:#fff;
  150. }
  151. #contact {
  152. background-color: #fff;
  153. }
  154. #more-info {
  155. background-color: rgba(0,0,0,0.9);
  156. }
  157. #schedule {
  158. background-color: #fff;
  159. }
  160. #who-we-are {
  161. background-color: #eee;
  162. min-height:130px;
  163. padding-top:40px;
  164. padding-bottom:40px;
  165. }
  166. #directions {
  167. background-color: #f44d3c;
  168. color: #f6f6f6;
  169. min-height:130px;
  170. padding-top:40px;
  171. padding-bottom:40px;
  172. }
  173. footer {
  174. background-color:#2b2b2b;
  175. color:#ddd;
  176. min-height:100px;
  177. padding-top:20px;
  178. padding-bottom:40px;
  179. }
  180. footer .nav>li>a {
  181. padding: 3px;
  182. color: #f44d3c;
  183. }
  184. footer .nav>li>a:hover {
  185. background-color:transparent;
  186. color:#fff;
  187. }
  188. .big-p {
  189. font-size: 2em;
  190. }
  191. .speaker, .logos {
  192. width: 20rem;
  193. }
  194. .speaker-mini {
  195. width: 10rem;
  196. }