typo
[fsf-giving-guide.git] / v7 / css / master.css
1 html {
2 text-rendering: optimizeLegibility !important;
3 -webkit-font-smoothing: antialiased !important;
4 }
5
6 /*Bootstrap overrides*/
7 .navbar {
8 margin-bottom: 0;
9 border: 0;
10 border-radius: 0;
11 background: #2caf8f;
12 }
13
14 .navbar-header {
15 border: 0;
16 background: #2caf8f;
17 box-shadow: none;
18 }
19
20 .navbar-toggle {
21 border: 0;
22 }
23
24 .navbar-brand {
25 padding-top: 10px;
26 }
27
28 .navbar-default .navbar-toggle .icon-bar {
29 width: 40px;
30 height: 5px;
31 border-radius: 6px;
32 background-color: #ffd429;
33 }
34
35 .navbar-default .navbar-toggle:focus,
36 .navbar-default .navbar-toggle:hover {
37 background-color: transparent;
38 }
39
40 .navbar-default .navbar-collapse,
41 .navbar-default .navbar-form {
42 border: 0;
43 }
44
45 .navbar-collapse {
46 background: #2caf8f;
47 }
48
49 .navbar-default .navbar-nav > li > a {
50 color: white;
51 }
52
53 .alert-link {
54 color: #ffd429 !important;
55 }
56
57 .alert-link:hover {
58 color: white !important;
59 }
60
61 .alert {
62 margin-top: 20px;
63 max-width: 700px;
64 border: 0;
65 }
66
67 .alert-success {
68 background: #2caf8f;
69
70 }
71
72 .alert-success p {
73 color: #E8FBF2 !important;
74 color: rgba(255,255,255,0.9) !important;
75 }
76
77 .alert-info {
78 background: #6eadf5;
79 color: #F1F7FE;
80 color: rgba(255,255,255,0.9);
81 }
82
83
84 .panel-body {
85 padding: 0;
86 }
87
88 /*Typography*/
89 @font-face {
90 font-weight: 400;
91 font-style: normal;
92 font-family: "Open Sans";
93 src: url('../fonts/opensans-regular-webfont-webfont.svg#open_sansregular') format('svg');
94 src: url("../fonts/opensans-regular-webfont.eot");
95 src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype');
96 }
97 @font-face {
98 font-weight: 700;
99 font-style: normal;
100 font-family: "Open Sans Bold";
101 src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
102 src: url("../fonts/opensans-bold-webfont.eot");
103 src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype');
104 }
105 @font-face {
106 font-weight: 600;
107 font-style: normal;
108 font-family: "Signika Bold";
109 src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
110 src: url("../fonts/signika-bold-webfont.eot");
111 src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype');
112 }
113 @font-face {
114 font-weight: 100;
115 font-style: normal;
116 font-family: "Signika Light";
117 src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
118 src: url("../fonts/signika-light-webfont.eot");
119 src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype');
120 }
121 @font-face {
122 font-weight: 400;
123 font-style: normal;
124 font-family: "Signika Regular";
125 src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
126 src: url("../fonts/signika-regular-webfont.eot");
127 src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype');
128 }
129
130 /*Text Styles*/
131
132 h1 {
133 margin-bottom: 20px;
134 color: #4B423B;
135 font-size: 35px;
136 font-family: "Signika Light";
137 }
138
139 h2 {
140 color: #4B423B;
141 font-size: 28px;
142 font-family: "Signika Light";
143 }
144
145 h3 {
146 color: #333;
147 font-size: 25px;
148 font-family: "Signika Regular";
149 }
150
151 h4 {
152 color: #9b9b9b;
153 font-size: 24px;
154 font-family: "Signika Light";
155 }
156
157 h5 {
158 color: #4a4a4a;
159 font-size: 20px;
160 font-family: "Signika Regular";
161 }
162
163 li,
164 p {
165 margin-bottom: 20px;
166 color: #1c1c1c;
167 list-style: outside;
168 font-size: 17px;
169 font-family: "Open Sans";
170 line-height: 30px;
171 }
172
173 li {
174 margin-bottom: 20px;
175 list-style-type: disc;
176 }
177
178 a {
179 border-bottom: 2px solid #ffd429;
180 color: #2caf8f;
181 text-decoration: none;
182 transition: .3s all ease;
183 }
184
185 a:hover {
186 color: #0f4639;
187 text-decoration: none;
188 }
189
190 section {
191 padding-top: 30px;
192 padding-bottom: 30px;
193 }
194
195 /*Header*/
196
197 /*Navbar*/
198
199 .icon-bar {
200 transition: .3s all ease;
201 }
202
203 .bar2 {
204 width: 30px !important;
205 }
206
207 .bar3 {
208 width: 25px !important;
209 }
210
211 .navbar-toggle:hover .bar1 {
212 width: 42px !important;
213 }
214
215 .navbar-toggle:hover .bar2 {
216 width: 25px !important;
217 }
218
219 .navbar-toggle:hover .bar3 {
220 width: 15px !important;
221 }
222
223 .navbar li {
224 padding-top: 20px;
225 color: #9b9b9b;
226 text-align: center;
227 font-size: 30px;
228 font-family: "Signika Regular";
229 }
230
231 .navbar-brand {
232 border-bottom: 0;
233 }
234
235 .navbar-nav li a {
236 border-bottom: 0;
237 }
238
239 /*Intro*/
240
241 .intro,
242 .intro-text {
243 padding-top: 20px;
244 padding-bottom: 0;
245 background: #2caf8f;
246 }
247
248 .intro-text h1 {
249 color: #2caf8f;
250 }
251
252 .illustration {
253 padding-bottom: 60px;
254 }
255
256 .intro-text {
257 padding-bottom: 40px;
258 background: #fff;
259 }
260
261 /*Actions*/
262
263 .actions {
264 background: #fffae5;
265 }
266
267 .action {
268 position: relative;
269 padding-top: 30px;
270 padding-bottom: 30px;
271 }
272
273 .action-button {
274 position: relative;
275 bottom: 10px;
276 margin-bottom: 30px;
277 padding: 6px 35px;
278 border: 0;
279 border-bottom: 0;
280 border-radius: 100px;
281 background: #FFD429;
282 color: #4B423B;
283 font-size: 22px;
284 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
285 font-family: "Signika Regular";
286 }
287
288 .action-button:hover {
289 background: #2caf8f;
290 color: white;
291 }
292
293 .actions p {
294 font-size: 15px;
295 color: #8a6d3b;
296 }
297
298 /*Comparisons*/
299
300 .title {
301 margin-top: 40px;
302 padding-bottom: 8px;
303 background-image: url("../img/underline.svg");
304 background-position: center bottom;
305 background-repeat: no-repeat;
306 }
307
308 .sale {
309 /*display: none; */ /* uncomment when needed*/
310 position: absolute;
311 top: -10%;
312 right: -20%;
313 padding: 1px 10px;
314 border-radius: 100px;
315 background-color: #0AD778;
316 color: white;
317 text-transform: uppercase;
318 font-size: 15px;
319 font-family: "Open Sans";
320 }
321
322 .sale-info {
323 font-size: 15px;
324 color: gray;
325 }
326
327 .links {
328 margin-top: -20px;
329 margin-bottom: 40px;
330 }
331
332 .bad,
333 .good {
334 overflow: hidden;
335 margin-top: 30px;
336 padding-top: 30px;
337 padding-bottom: 30px;
338 }
339
340 .bad {
341 background-color: transparent;
342 background-image: url("../img/bad-pattern.png");
343 background-size: 40px;
344 background-repeat: repeat;
345 }
346
347 .pros li {
348 background-image: url("../img/good.svg");
349 }
350
351 .cons li {
352 background-image: url("../img/bad.svg");
353 }
354
355 li.neutral {
356 background-image: url("../img/neutral.svg");
357 }
358
359 .cons,
360 .pros {
361 padding-left: 15px;
362 }
363
364 .cons li,
365 .pros li,
366 .info {
367 padding-left: 30px;
368 background-position: top left;
369 background-repeat: no-repeat;
370 list-style: none;
371 }
372
373 .bad img,
374 .good img,
375 .recommended-img img {
376 margin-bottom: 20px;
377 width: 250px;
378 height: 250px;
379 }
380
381 .get-item {
382 position: absolute;
383 top: 250px;
384 right: 50%;
385 left: 50%;
386 margin-left: -60px;
387 padding: 5px;
388 width: 120px;
389 border-bottom: 0;
390 border-radius: 100px;
391 background: #2B81E3;
392 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
393 color: white;
394 vertical-align: middle;
395 text-align: center;
396 text-decoration: none;
397 font-size: 21px;
398 font-family: "Signika Regular";
399 }
400
401 .get-item:active,
402 .get-item:focus,
403 .get-item:hover {
404 background: #6eadf5;
405 color: white;
406 text-decoration: none;
407 }
408
409 .get-item:active {
410 background: #2B81E3;
411 }
412
413 .seller-group {
414 padding: 15px;
415 text-align: center;
416 transition: all 0.3s ease;
417 }
418
419 .seller {
420 min-width: 150px;
421 max-width: 200px;
422 display: block;
423 margin: 20px auto;
424 text-align: center;
425 }
426
427 .info {
428 margin-bottom: 0;
429 background-image: url("../img/info.svg");
430 background-position: center left;
431
432 }
433
434 .info p {
435 margin-bottom: 0;
436 }
437
438 /*Recommended Lines*/
439
440 .recommended-section {
441 margin-top: 20px;
442 margin-bottom: 20px;
443 padding-top: 30px;
444 padding-bottom: 30px;
445 background: #F5FFF7;
446 }
447
448 /*Charities*/
449 .charities {
450 margin-bottom: 0;
451 background-color: #F5FFF7;
452 }
453
454 /*Promotion details*/
455 .promotion-details {
456 margin-bottom: 0;
457 background-color: #fffae5;
458 }
459
460 .promotion-details .panel-default .panel-heading {
461 border: 0;
462 background-color: #fffae5;
463 box-shadow: 0 0 0 transparent;
464 }
465
466 /*Licenses*/
467 .licenses {
468 margin-bottom: 0;
469 background-color: #F5FFF7;
470 }
471
472 .licenses .panel-default .panel-heading {
473 border: 0;
474 background-color: #F5FFF7;
475 box-shadow: 0 0 0 transparent;
476 }
477
478 .fix-margin {
479 margin: 0;
480 }
481
482 /*Footer*/
483 footer {
484 padding-top: 30px;
485 background-color: #4B423B;
486 }
487
488 footer p {
489 color: #cdcac8;
490 color: rgba(255,255,255,0.72);
491 }
492
493 footer a {
494 color: #FFD429;
495 font-weight: 700;
496 }
497
498 footer a:hover {
499 color: white;
500 }
501
502 .footer-logo {
503 margin-bottom: 15px;
504 max-height: 150px;
505 }
506
507 /* Media Queries */
508
509 /*Smallest devices*/
510 /*@media (max-width: 350px) {
511 .seller {
512 display: block;
513 margin: 20px auto;
514 }
515 }*/
516
517 /* Small devices (tablets, 768px and up) */
518 @media (min-width: 768px) {
519 /*Navbar*/
520 .navbar-nav {
521 float: right;
522 margin: 10px;
523 /*margin-left: 100px;*/
524 }
525
526 .navbar-default .navbar-nav > li > a {
527 padding: 7px;
528 color: #2caf8f;
529 }
530
531 .navbar li {
532 padding: 0 25px;
533 border-right: 1px #9BD2BF solid;
534 background-color: white;
535 list-style-type: none;
536 font-size: 1.1em;
537 font-family: "Signika Regular";
538 transition: .3s all ease;
539 }
540
541 .navbar li:first-child {
542 border-radius: 100px 0 0 100px;
543 }
544
545 .navbar li:last-child {
546 border-right: 0;
547 border-radius: 0 100px 100px 0;
548 }
549
550 .navbar li:hover {
551 background-color: #FFDD55;
552 }
553
554 .navbar li a {
555 display: block;
556 text-decoration: none;
557 transition: .3s all ease;
558 }
559
560 .navbar li a:hover {
561 color: #4B423B;
562 }
563
564 .intro {
565 margin-bottom: 0;
566 }
567
568 .join {
569 display: none;
570 }
571
572 .is-table-row {
573 display: table;
574 }
575 .is-table-row [class*="col-"] {
576 display: table-cell;
577 float: none;
578 vertical-align: top;
579 }
580
581 .title {
582 margin-bottom: 30px;
583 }
584
585 .recommended-section h5 {
586 padding-left: 46px;
587 text-align: left;
588 }
589
590 .charities img {
591 width: 80%;
592 filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
593 transition: .3s all ease;
594 }
595
596 .charities img:hover {
597 filter: brightness(1) contrast(100%) opacity(1) saturate(1);
598 transform: scale(1.1);
599 }
600
601 /*Footer*/
602 .footer-logo {
603 margin-bottom: 0;
604 }
605
606 .footer-logo img {
607 width: 85%;
608 }
609 }
610 /* Medium devices (desktops, 992px and up) */
611 @media (min-width: 992px) {
612 /*Navbar*/
613 .navbar-nav {
614 margin: 10px 10px 10px 100px;
615 }
616
617 .navbar-default .navbar-nav > li > a {
618 padding: 7px;
619 color: #2caf8f;
620 }
621
622 .navbar li {
623 padding: 0 30px;
624 border-right: 1px #9BD2BF solid;
625 background-color: white;
626 list-style-type: none;
627 font-size: 1.2em;
628 font-family: "Signika Regular";
629 transition: .3s all ease;
630 }
631
632 .navbar li:first-child {
633 border-radius: 100px 0 0 100px;
634 }
635
636 .navbar li:last-child {
637 border-right: 0;
638 border-radius: 0 100px 100px 0;
639 }
640
641 .navbar li:hover {
642 background-color: #FFDD55;
643 }
644
645 .navbar li a {
646 display: block;
647 text-decoration: none;
648 transition: .3s all ease;
649 }
650
651 .navbar li:hover a {
652 color: #4B423B;
653 }
654
655 .join {
656 display: block;
657 }
658
659 .join img {
660 margin: 10px;
661 width: 200px;
662 }
663 /*Intro*/
664 .intro {
665 margin-bottom: 0;
666 }
667
668 .intro-text {
669 background: transparent;
670 }
671
672 .intro-text h1 {
673 margin-top: 0;
674 color: white;
675 color: rgba(255, 255, 255, 0.95);
676 }
677
678 .intro-text p {
679 color: rgba(255, 255, 255, 0.79);
680 }
681
682 .intro-text h4 {
683 color: #FFDD55;
684 font-family: "Signika Light";
685 }
686
687 .illustration img {
688 margin-top: 30px;
689 width: 90%;
690 }
691 /*Footer*/
692 .footer-logo img {
693 width: 50%;
694 }
695 }
696 /* Large devices (large desktops, 1200px and up) */
697 @media (min-width: 1200px) {
698 .illustration img {
699 margin-top: 10px;
700 width: 70%;
701 }
702
703 }