e845f8c062c77f3ca9833b479db7f3d8ba259aa7
[fsf-giving-guide.git] / v11 / 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: #602217;
12 }
13
14 .navbar-header {
15 border: 0;
16 background: #602217;
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: #602217;
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: #602217;
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 color: #602217;
182 text-decoration: none;
183 font-weight: bold;
184 transition: .3s all ease;
185 }
186
187 a:hover {
188 color: #0f4639;
189 text-decoration: none;
190 }
191
192 section {
193 padding-top: 30px;
194 padding-bottom: 30px;
195 }
196
197 /*Header*/
198
199 /*Navbar*/
200
201 .icon-bar {
202 transition: .3s all ease;
203 }
204
205 .bar2 {
206 width: 30px !important;
207 }
208
209 .bar3 {
210 width: 25px !important;
211 }
212
213 .navbar-toggle:hover .bar1 {
214 width: 42px !important;
215 }
216
217 .navbar-toggle:hover .bar2 {
218 width: 25px !important;
219 }
220
221 .navbar-toggle:hover .bar3 {
222 width: 15px !important;
223 }
224
225 .navbar li {
226 padding-top: 20px;
227 color: #9b9b9b;
228 text-align: center;
229 font-size: 30px;
230 font-family: "Signika Regular";
231 }
232
233 .navbar-brand {
234 border-bottom: 0;
235 }
236
237 .navbar-nav li a {
238 border-bottom: 0;
239 }
240
241 /*Intro*/
242
243 .intro,
244 .intro-text {
245 padding-top: 20px;
246 padding-bottom: 0;
247 background: #602217;
248 }
249
250 .intro-text h1 {
251 color: #602217;
252 }
253
254 .illustration {
255 padding-bottom: 60px;
256 }
257
258 .intro-text {
259 padding-bottom: 40px;
260 background: #fff;
261 }
262
263 /*Actions*/
264
265 .actions {
266 background: #fffae5;
267 }
268
269 .action {
270 position: relative;
271 padding-top: 30px;
272 padding-bottom: 30px;
273 }
274
275 .action-button {
276 position: relative;
277 bottom: 10px;
278 margin-bottom: 30px;
279 padding: 6px 35px;
280 border: 0;
281 border-bottom: 0;
282 border-radius: 100px;
283 background: #FFD429;
284 color: #4B423B;
285 font-size: 22px;
286 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
287 font-family: "Signika Regular";
288 }
289
290 .action-button:hover {
291 background: #602217;
292 color: white;
293 }
294
295 .actions p {
296 font-size: 15px;
297 color: #8a6d3b;
298 }
299
300 /*Comparisons*/
301
302 .title {
303 margin-top: 40px;
304 padding-bottom: 8px;
305 background-image: url("../img/underline.svg");
306 background-position: center bottom;
307 background-repeat: no-repeat;
308 }
309
310 .sale {
311 /*display: none; */ /* uncomment when needed*/
312 position: absolute;
313 top: -10%;
314 right: -20%;
315 padding: 1px 10px;
316 border-radius: 100px;
317 background-color: #0AD778;
318 color: white;
319 text-transform: uppercase;
320 font-size: 15px;
321 font-family: "Open Sans";
322 }
323
324 .sale-info {
325 font-size: 15px;
326 color: gray;
327 }
328
329 .links {
330 margin-top: -20px;
331 margin-bottom: 40px;
332 }
333
334 .bad,
335 .good {
336 overflow: hidden;
337 margin-top: 30px;
338 padding-top: 30px;
339 padding-bottom: 30px;
340 }
341
342 .bad {
343 background-color: transparent;
344 background-image: url("../img/bad-pattern.png");
345 background-size: 40px;
346 background-repeat: repeat;
347 }
348
349 .pros li {
350 background-image: url("../img/good.svg");
351 }
352
353 .cons li {
354 background-image: url("../img/bad.svg");
355 }
356
357 li.neutral {
358 background-image: url("../img/neutral.svg");
359 }
360
361 .cons,
362 .pros {
363 padding-left: 15px;
364 }
365
366 .cons li,
367 .pros li,
368 .info {
369 padding-left: 30px;
370 background-position: top left;
371 background-repeat: no-repeat;
372 list-style: none;
373 }
374
375 .bad img,
376 .good img,
377 .recommended-img img {
378 margin-bottom: 70px;
379 width: 250px;
380 height: 250px;
381 }
382
383 .get-item {
384 position: absolute;
385 top: 300px;
386 right: 50%;
387 left: 50%;
388 margin-left: -60px;
389 padding: 5px;
390 width: 120px;
391 border-bottom: 0;
392 border-radius: 100px;
393 background: #2B81E3;
394 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
395 color: white;
396 vertical-align: middle;
397 text-align: center;
398 text-decoration: none;
399 font-size: 21px;
400 font-family: "Signika Regular";
401 }
402
403 .get-item:active,
404 .get-item:focus,
405 .get-item:hover {
406 background: #6eadf5;
407 color: white;
408 text-decoration: none;
409 }
410
411 .get-item:active {
412 background: #2B81E3;
413 }
414
415 .seller-group {
416 padding: 15px;
417 text-align: center;
418 transition: all 0.3s ease;
419 }
420
421 .seller {
422 min-width: 150px;
423 max-width: 200px;
424 display: block;
425 margin: 20px auto;
426 text-align: center;
427 }
428
429 .info {
430 margin-bottom: 0;
431 background-image: url("../img/info.svg");
432 background-position: center left;
433
434 }
435
436 .info p {
437 margin-bottom: 0;
438 }
439
440 /*Recommended Lines*/
441
442 .recommended-section {
443 margin-top: 20px;
444 margin-bottom: 20px;
445 padding-top: 30px;
446 padding-bottom: 30px;
447 background: #F5FFF7;
448 }
449
450 /*Charities*/
451 .charities {
452 margin-bottom: 0;
453 background-color: #F5FFF7;
454 }
455
456 /*Promotion details*/
457 .promotion-details {
458 margin-bottom: 0;
459 background-color: #fffae5;
460 }
461
462 .promotion-details .panel-default .panel-heading {
463 border: 0;
464 background-color: #fffae5;
465 box-shadow: 0 0 0 transparent;
466 }
467
468 /*Licenses*/
469 .licenses {
470 margin-bottom: 0;
471 background-color: #F5FFF7;
472 }
473
474 .licenses .panel-default .panel-heading {
475 border: 0;
476 background-color: #F5FFF7;
477 box-shadow: 0 0 0 transparent;
478 }
479
480 .fix-margin {
481 margin: 0;
482 }
483
484 /*Footer*/
485 footer {
486 padding-top: 30px;
487 background-color: #602217;
488 /* background-color: #4B423B; */
489 }
490
491 footer p {
492 color: #cdcac8;
493 color: rgba(255,255,255,0.72);
494 }
495
496 footer a {
497 color: #FFD429;
498 font-weight: 700;
499 }
500
501 footer a:hover {
502 color: white;
503 }
504
505 .footer-logo {
506 margin-bottom: 15px;
507 max-height: 150px;
508 }
509
510 /* Media Queries */
511
512 /*Smallest devices*/
513 /*@media (max-width: 350px) {
514 .seller {
515 display: block;
516 margin: 20px auto;
517 }
518 }*/
519
520 /* Small devices (tablets, 768px and up) */
521 @media (min-width: 768px) {
522 /*Navbar*/
523 .navbar-nav {
524 float: right;
525 margin: 10px;
526 /*margin-left: 100px;*/
527 }
528
529 .navbar-default .navbar-nav > li > a {
530 padding: 7px;
531 color: #602217;
532 }
533
534 .navbar li {
535 padding: 0 25px;
536 border-right: 1px #9BD2BF solid;
537 background-color: white;
538 list-style-type: none;
539 font-size: 1.1em;
540 font-family: "Signika Regular";
541 transition: .3s all ease;
542 }
543
544 .navbar li:first-child {
545 border-radius: 100px 0 0 100px;
546 }
547
548 .navbar li:last-child {
549 border-right: 0;
550 border-radius: 0 100px 100px 0;
551 }
552
553 .navbar li:hover {
554 background-color: #FFDD55;
555 }
556
557 .navbar li a {
558 display: block;
559 text-decoration: none;
560 transition: .3s all ease;
561 }
562
563 .navbar li a:hover {
564 color: #602217;
565 /* color: #4B423B; */
566 }
567
568 .intro {
569 margin-bottom: 0;
570 }
571
572 .join {
573 display: none;
574 }
575
576 .is-table-row {
577 display: table;
578 }
579 .is-table-row [class*="col-"] {
580 display: table-cell;
581 float: none;
582 vertical-align: top;
583 }
584
585 .title {
586 margin-bottom: 30px;
587 }
588
589 .recommended-section h5 {
590 padding-left: 46px;
591 text-align: left;
592 }
593
594 .charities img {
595 width: 80%;
596 filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
597 transition: .3s all ease;
598 }
599
600 .charities img:hover {
601 filter: brightness(1) contrast(100%) opacity(1) saturate(1);
602 transform: scale(1.1);
603 }
604
605 /*Footer*/
606 .footer-logo {
607 margin-bottom: 0;
608 }
609
610 .footer-logo img {
611 width: 85%;
612 }
613 }
614 /* Medium devices (desktops, 992px and up) */
615 @media (min-width: 992px) {
616 /*Navbar*/
617 .navbar-nav {
618 margin: 10px 10px 10px 100px;
619 }
620
621 .navbar-default .navbar-nav > li > a {
622 padding: 7px;
623 color: #333;
624 }
625
626 .navbar li {
627 padding: 0 30px;
628 border-right: 1px #9BD2BF solid;
629 background-color: white;
630 list-style-type: none;
631 font-size: 1.2em;
632 font-family: "Signika Regular";
633 transition: .3s all ease;
634 }
635
636 .navbar li:first-child {
637 border-radius: 100px 0 0 100px;
638 }
639
640 .navbar li:last-child {
641 border-right: 0;
642 border-radius: 0 100px 100px 0;
643 }
644
645 .navbar li:hover {
646 background-color: #FFDD55;
647 }
648
649 .navbar li a {
650 display: block;
651 text-decoration: none;
652 transition: .3s all ease;
653 }
654
655 .navbar li:hover a {
656 color: #602217;
657 /* color: #4B423B; */
658 }
659
660 .join {
661 display: block;
662 }
663
664 .join img {
665 margin: 10px;
666 width: 200px;
667 }
668 /*Intro*/
669 .intro {
670 margin-bottom: 0;
671 }
672
673 .intro-text {
674 background: transparent;
675 }
676
677 .intro-text h1 {
678 margin-top: 0;
679 color: white;
680 color: rgba(255, 255, 255, 0.95);
681 }
682
683 .intro-text p {
684 color: rgba(255, 255, 255, 0.79);
685 }
686
687 .intro-text a {
688 color: gold;
689 }
690
691 .intro-text h4 {
692 color: #FFDD55;
693 font-family: "Signika Light";
694 }
695
696 .illustration img {
697 margin-top: 30px;
698 width: 90%;
699 }
700 /*Footer*/
701 .footer-logo img {
702 width: 50%;
703 }
704 }
705 /* Large devices (large desktops, 1200px and up) */
706 @media (min-width: 1200px) {
707 .illustration img {
708 margin-top: 10px;
709 width: 70%;
710 }
711
712 }