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