new-age.less (9995B)
1 @import "variables.less"; 2 @import "mixins.less"; 3 4 // Global Components 5 html, 6 body { 7 height: 100%; 8 width: 100%; 9 } 10 11 body { 12 .body-font; 13 } 14 15 a { 16 .transition-all; 17 color: @theme-primary; 18 &:hover, 19 &:focus { 20 color: darken(@theme-primary, 10%); 21 } 22 } 23 24 hr { 25 max-width: 100px; 26 margin: 25px auto 0; 27 border-width: 1px; 28 border-color: fade(@gray-darker, 10%); 29 } 30 31 hr.light { 32 border-color: white; 33 } 34 35 h1, 36 h2, 37 h3, 38 h4, 39 h5, 40 h6 { 41 .heading-font; 42 } 43 44 p { 45 font-size: 18px; 46 line-height: 1.5; 47 margin-bottom: 20px; 48 } 49 50 // Navigation 51 52 .navbar-default { 53 background-color: white; 54 border-color: fade(@gray-darker, 5%); 55 .transition-all; 56 .heading-font; 57 .navbar-header .navbar-brand { 58 .heading-font; 59 color: @theme-primary; 60 &:hover, 61 &:focus { 62 color: darken(@theme-primary, 10%); 63 } 64 } 65 .navbar-header .navbar-toggle { 66 font-size: 12px; 67 color: @gray-darker; 68 padding: 8px 10px; 69 } 70 .nav { 71 > li { 72 > a { 73 .alt-font; 74 font-size: 11px; 75 } 76 > a, 77 > a:focus { 78 color: @gray-darker; 79 &:hover { 80 color: @theme-primary; 81 } 82 } 83 &.active { 84 > a, 85 > a:focus { 86 color: @theme-primary !important; 87 background-color: transparent; 88 &:hover { 89 background-color: transparent; 90 } 91 } 92 } 93 } 94 } 95 @media (min-width: 768px) { 96 background-color: transparent; 97 border-color: transparent; 98 .navbar-header .navbar-brand { 99 color: fade(white, 70%); 100 &:hover, 101 &:focus { 102 color: white; 103 } 104 } 105 .nav > li > a, 106 .nav > li > a:focus { 107 color: fade(white, 70%); 108 &:hover { 109 color: white; 110 } 111 } 112 &.affix { 113 background-color: white; 114 border-color: fade(@gray-darker, 10%); 115 .navbar-header .navbar-brand { 116 color: @gray-darker; 117 &:hover, 118 &:focus { 119 color: @theme-primary; 120 } 121 } 122 .nav > li > a, 123 .nav > li > a:focus { 124 color: @gray-darker; 125 &:hover { 126 color: @theme-primary; 127 } 128 } 129 } 130 } 131 } 132 133 // Homepage Header 134 135 header { 136 position: relative; 137 width: 100%; 138 min-height: auto; 139 overflow-y: hidden; 140 background: url("../img/bg-pattern.png"), @theme-secondary; /* fallback for old browsers */ 141 background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, @theme-secondary , @theme-tertiary); /* Chrome 10-25, Safari 5.1-6 */ 142 background: url("../img/bg-pattern.png"), linear-gradient(to left, @theme-secondary , @theme-tertiary); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 143 color: white; 144 .header-content { 145 text-align: center; 146 padding: 150px 0 50px; 147 position: relative; 148 .header-content-inner { 149 position: relative; 150 max-width: 500px; 151 margin: 0 auto; 152 h1 { 153 margin-top: 0; 154 margin-bottom: 30px; 155 font-size: 30px; 156 } 157 .list-badges { 158 margin-bottom: 25px; 159 img { 160 height: 50px; 161 margin-bottom: 25px; 162 } 163 } 164 } 165 } 166 .device-container { 167 max-width: 300px; 168 margin: 0 auto 100px; 169 .screen img { 170 border-radius: 3px; 171 } 172 } 173 @media (min-width: 768px) { 174 min-height: 100%; 175 .header-content { 176 text-align: left; 177 padding: 0; 178 height: 100vh; 179 .header-content-inner { 180 max-width: none; 181 margin: 0; 182 position: absolute; 183 top: 50%; 184 transform: translateY(-50%); 185 h1 { 186 font-size: 35px; 187 } 188 } 189 } 190 .device-container { 191 max-width: none; 192 max-height: calc(100vh - 100px); 193 margin: 100px auto 0; 194 } 195 } 196 @media (min-width: 992px) { 197 .header-content .header-content-inner h1 { 198 font-size: 50px; 199 } 200 } 201 } 202 203 // Sections 204 205 section { 206 padding: 100px 0; 207 h2 { 208 font-size: 50px; 209 } 210 } 211 212 section.download { 213 padding: 150px 0; 214 position: relative; 215 h2 { 216 margin-top: 0; 217 font-size: 50px; 218 } 219 .badges { 220 .badge-link { 221 display: block; 222 margin-bottom: 25px; 223 &:last-child { 224 margin-bottom: 0; 225 } 226 img { 227 height: 60px; 228 } 229 @media(min-width: 768px) { 230 display: inline-block; 231 margin-bottom: 0; 232 } 233 } 234 } 235 @media(min-width: 768px) { 236 h2 { 237 font-size: 70px; 238 } 239 } 240 } 241 242 section.features { 243 .section-heading { 244 h2 { 245 margin-top: 0; 246 } 247 p { 248 margin-bottom: 0; 249 } 250 margin-bottom: 100px; 251 } 252 .device-container, 253 .feature-item { 254 max-width: 300px; 255 margin: 0 auto; 256 } 257 .device-container { 258 margin-bottom: 100px; 259 @media(min-width: 992px) { 260 margin-bottom: 0; 261 } 262 } 263 .feature-item { 264 text-align: center; 265 margin-bottom: 100px; 266 h3 { 267 font-size: 30px; 268 } 269 i { 270 font-size: 80px; 271 background: -webkit-linear-gradient(to left, @theme-secondary , @theme-tertiary); 272 background: linear-gradient(to left, @theme-secondary , @theme-tertiary); 273 -webkit-background-clip: text; 274 -webkit-text-fill-color: transparent; 275 } 276 } 277 @media(min-width: 992px) { 278 .device-container, 279 .feature-item { 280 max-width: none; 281 } 282 } 283 } 284 285 section.cta { 286 position: relative; 287 .background-cover; 288 background-position: center; 289 background-image: url('../img/bg-cta.jpg'); 290 padding: 250px 0; 291 .cta-content { 292 position: relative; 293 z-index: 1; 294 h2 { 295 margin-top: 0; 296 margin-bottom: 25px; 297 color: white; 298 max-width: 450px; 299 font-size: 50px; 300 } 301 @media (min-width: 768px) { 302 h2 { 303 font-size: 80px; 304 } 305 } 306 } 307 .overlay { 308 height: 100%; 309 width: 100%; 310 background-color: fade(black, 50%); 311 position: absolute; 312 top: 0; 313 left: 0; 314 } 315 } 316 317 section.contact { 318 text-align: center; 319 h2 { 320 margin-top: 0; 321 margin-bottom: 25px; 322 i { 323 color: @brand-google-plus; 324 } 325 } 326 ul.list-social { 327 margin-bottom: 0; 328 li { 329 a { 330 display: block; 331 height: 80px; 332 width: 80px; 333 line-height: 80px; 334 font-size: 40px; 335 border-radius: 100%; 336 color: white; 337 } 338 &.social-twitter { 339 a { 340 background-color: @brand-twitter; 341 &:hover { 342 background-color: darken(@brand-twitter, 5%); 343 } 344 } 345 } 346 &.social-facebook { 347 a { 348 background-color: @brand-facebook; 349 &:hover { 350 background-color: darken(@brand-facebook, 5%); 351 } 352 } 353 } 354 &.social-google-plus { 355 a { 356 background-color: @brand-google-plus; 357 &:hover { 358 background-color: darken(@brand-google-plus, 5%); 359 } 360 } 361 } 362 } 363 } 364 } 365 366 footer { 367 background-color: @gray-darker; 368 padding: 25px 0; 369 color: fade(white, 30%); 370 text-align: center; 371 p { 372 font-size: 12px; 373 margin: 0; 374 } 375 ul { 376 margin-bottom: 0; 377 li { 378 a { 379 font-size: 12px; 380 color: fade(white, 30%); 381 &:hover, 382 &:focus, 383 &:active, 384 &.active { 385 text-decoration: none; 386 } 387 } 388 } 389 } 390 } 391 392 // Bootstrap Overrides 393 394 .bg-primary { 395 background: @theme-primary; 396 background: -webkit-linear-gradient(@theme-primary , darken(@theme-primary, 5%)); 397 background: linear-gradient(@theme-primary , darken(@theme-primary, 5%)); 398 } 399 400 .text-primary { 401 color: @theme-primary; 402 } 403 404 .no-gutter > [class*='col-'] { 405 padding-right:0; 406 padding-left:0; 407 } 408 409 // Button Styles 410 .btn-outline { 411 color: white; 412 border-color: white; 413 border: 1px solid; 414 &:hover, 415 &:focus, 416 &:active, 417 &.active { 418 color: white; 419 background-color: @theme-primary; 420 border-color: @theme-primary; 421 } 422 } 423 424 .btn { 425 .alt-font; 426 border-radius: 300px; 427 } 428 429 .btn-xl { 430 padding: 15px 45px; 431 font-size: 11px; 432 } 433 434 // Extras 435 // -- Highlight Color Customization 436 ::-moz-selection { 437 color: white; 438 text-shadow: none; 439 background: @gray-darker; 440 } 441 442 ::selection { 443 color: white; 444 text-shadow: none; 445 background: @gray-darker; 446 } 447 448 img::selection { 449 color: white; 450 background: transparent; 451 } 452 453 img::-moz-selection { 454 color: white; 455 background: transparent; 456 } 457 458 body { 459 webkit-tap-highlight-color: @gray-darker; 460 }