source: trunk/client/temi/spectral/assets/sass/main.scss@ 418

Last change on this file since 418 was 241, checked in by luc, 9 years ago

Aggiunta del widget Privacy e CookieLaw per l'informativa sui cookie - Aggiunto Tema Realistic - Aggiunto Tema Spectral
  • Property svn:executable set to *
File size: 30.9 KB
Line 
1@import 'libs/vars';
2@import 'libs/functions';
3@import 'libs/mixins';
4@import 'font-awesome.min.css';
5@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic');
6
7/*
8 Spectral by HTML5 UP
9 html5up.net | @n33co
10 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
11*/
12
13 @import 'libs/skel';
14
15 @include skel-breakpoints((
16 xlarge: '(max-width: 1680px)',
17 large: '(max-width: 1280px)',
18 medium: '(max-width: 980px)',
19 small: '(max-width: 736px)',
20 xsmall: '(max-width: 480px)'
21 ));
22
23 @include skel-layout((
24 reset: 'full',
25 boxModel: 'border',
26 grid: ( gutters: 1.5em )
27 ));
28
29/* Basic */
30
31 @-ms-viewport {
32 width: device-width;
33 }
34
35 body {
36 background: _palette(bg);
37
38 &.is-loading {
39 *, *:before, *:after {
40 @include vendor('animation', 'none !important');
41 @include vendor('transition', 'none !important');
42 }
43 }
44 }
45
46 body, input, select, textarea {
47 color: _palette(fg);
48 font-family: _font(family);
49 font-size: 15pt;
50 font-weight: _font(weight);
51 letter-spacing: _size(letter-spacing);
52 line-height: 1.65em;
53
54 @include breakpoint(xlarge) {
55 font-size: 13pt;
56 }
57
58 @include breakpoint(large) {
59 font-size: 12pt;
60 }
61
62 @include breakpoint(small) {
63 font-size: 11pt;
64 letter-spacing: _size(letter-spacing) * 0.5;
65 }
66 }
67
68 a {
69 @include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
70 border-bottom: dotted 1px;
71 color: inherit;
72 text-decoration: none;
73
74 &:hover {
75 border-bottom-color: transparent;
76 }
77 }
78
79 strong, b {
80 color: _palette(fg-bold);
81 font-weight: _font(weight-bold);
82 }
83
84 em, i {
85 font-style: italic;
86 }
87
88 p {
89 margin: 0 0 _size(element-margin) 0;
90 }
91
92 h1, h2, h3, h4, h5, h6 {
93 color: _palette(fg-bold);
94 font-weight: _font(weight-extrabold);
95 letter-spacing: _size(letter-spacing-alt);
96 line-height: 1em;
97 margin: 0 0 (_size(element-margin) * 0.5) 0;
98 text-transform: uppercase;
99
100 a {
101 color: inherit;
102 text-decoration: none;
103 }
104 }
105
106 h2 {
107 font-size: 1.35em;
108 line-height: 1.75em;
109
110 @include breakpoint(small) {
111 font-size: 1.1em;
112 line-height: 1.65em;
113 }
114 }
115
116 h3 {
117 font-size: 1.15em;
118 line-height: 1.75em;
119
120 @include breakpoint(small) {
121 font-size: 1em;
122 line-height: 1.65em;
123 }
124 }
125
126 h4 {
127 font-size: 1em;
128 line-height: 1.5em;
129 }
130
131 h5 {
132 font-size: 0.8em;
133 line-height: 1.5em;
134 }
135
136 h6 {
137 font-size: 0.7em;
138 line-height: 1.5em;
139 }
140
141 sub {
142 font-size: 0.8em;
143 position: relative;
144 top: 0.5em;
145 }
146
147 sup {
148 font-size: 0.8em;
149 position: relative;
150 top: -0.5em;
151 }
152
153 hr {
154 border: 0;
155 border-bottom: solid 2px _palette(border);
156 margin: (_size(element-margin) * 1.5) 0;
157
158 &.major {
159 margin: (_size(element-margin) * 2.25) 0;
160 }
161 }
162
163 blockquote {
164 border-left: solid 4px _palette(border);
165 font-style: italic;
166 margin: 0 0 _size(element-margin) 0;
167 padding: 0.5em 0 0.5em 2em;
168 }
169
170 code {
171 background: _palette(border-bg);
172 border-radius: 3px;
173 font-family: _font(family-fixed);
174 font-size: 0.9em;
175 letter-spacing: 0;
176 margin: 0 0.25em;
177 padding: 0.25em 0.65em;
178 }
179
180 pre {
181 -webkit-overflow-scrolling: touch;
182 font-family: _font(family-fixed);
183 font-size: 0.9em;
184 margin: 0 0 _size(element-margin) 0;
185
186 code {
187 display: block;
188 line-height: 1.75em;
189 padding: 1em 1.5em;
190 overflow-x: auto;
191 }
192 }
193
194 .align-left {
195 text-align: left;
196 }
197
198 .align-center {
199 text-align: center;
200 }
201
202 .align-right {
203 text-align: right;
204 }
205
206/* Section/Article */
207
208 section, article {
209 &.special {
210 text-align: center;
211 }
212 }
213
214 header {
215 p {
216 color: _palette(fg-light);
217 position: relative;
218 top: -0.25em;
219 }
220
221 h2 + p {
222 }
223
224 h3 + p {
225 font-size: 1.1em;
226 }
227
228 h4 + p,
229 h5 + p,
230 h6 + p {
231 font-size: 0.9em;
232 }
233
234 &.major {
235 margin: 0 0 (_size(element-margin) * 1.75) 0;
236
237 h2, h3, h4, h5, h6 {
238 border-bottom: solid 2px _palette(border);
239 display: inline-block;
240 padding-bottom: 1em;
241 position: relative;
242
243 &:after {
244 content: '';
245 display: block;
246 height: 1px;
247 }
248 }
249
250 p {
251 color: _palette(fg);
252 top: 0;
253 }
254
255 @include breakpoint(small) {
256 margin: 0 0 _size(element-margin) 0;
257 }
258 }
259
260 @include breakpoint(medium) {
261 br {
262 display: none;
263 }
264 }
265 }
266
267/* Form */
268
269 form {
270 margin: 0 0 _size(element-margin) 0;
271 }
272
273 label {
274 color: _palette(fg-bold);
275 display: block;
276 font-size: 0.9em;
277 font-weight: _font(weight-bold);
278 margin: 0 0 (_size(element-margin) * 0.5) 0;
279 }
280
281 input[type="text"],
282 input[type="password"],
283 input[type="email"],
284 select,
285 textarea {
286 @include vendor('appearance', 'none');
287 background: _palette(border-bg);
288 border-radius: 3px;
289 border: none;
290 color: inherit;
291 display: block;
292 outline: 0;
293 padding: 0 1em;
294 text-decoration: none;
295 width: 100%;
296
297 &:invalid {
298 box-shadow: none;
299 }
300
301 &:focus {
302 box-shadow: 0 0 0 2px _palette(accent1, bg);
303 }
304 }
305
306 .select-wrapper {
307 @include icon;
308 display: block;
309 position: relative;
310
311 &:before {
312 @include vendor('pointer-events', 'none');
313 color: _palette(border);
314 content: '\f078';
315 display: block;
316 height: _size(element-height);
317 line-height: _size(element-height);
318 position: absolute;
319 right: 0;
320 text-align: center;
321 top: 0;
322 width: _size(element-height);
323 }
324
325 select::-ms-expand {
326 display: none;
327 }
328 }
329
330 input[type="text"],
331 input[type="password"],
332 input[type="email"],
333 select {
334 height: _size(element-height);
335 }
336
337 textarea {
338 padding: 0.75em 1em;
339 }
340
341 input[type="checkbox"],
342 input[type="radio"], {
343 @include vendor('appearance', 'none');
344 display: block;
345 float: left;
346 margin-right: -2em;
347 opacity: 0;
348 width: 1em;
349 z-index: -1;
350
351 & + label {
352 @include icon;
353 color: _palette(fg);
354 cursor: pointer;
355 display: inline-block;
356 font-size: 1em;
357 font-weight: _font(weight);
358 padding-left: (_size(element-height) * 0.6) + 0.75em;
359 padding-right: 0.75em;
360 position: relative;
361
362 &:before {
363 background: _palette(border-bg);
364 border-radius: 3px;
365 content: '';
366 display: inline-block;
367 height: (_size(element-height) * 0.6);
368 left: 0;
369 line-height: (_size(element-height) * 0.575);
370 position: absolute;
371 text-align: center;
372 top: 0;
373 width: (_size(element-height) * 0.6);
374 }
375 }
376
377 &:checked + label {
378 &:before {
379 background: _palette(bg);
380 color: _palette(fg-bold);
381 content: '\f00c';
382 }
383 }
384
385 &:focus + label {
386 &:before {
387 box-shadow: 0 0 0 2px _palette(accent1, bg);
388 }
389 }
390 }
391
392 input[type="checkbox"] {
393 & + label {
394 &:before {
395 border-radius: 3px;
396 }
397 }
398 }
399
400 input[type="radio"] {
401 & + label {
402 &:before {
403 border-radius: 100%;
404 }
405 }
406 }
407
408 ::-webkit-input-placeholder {
409 color: _palette(fg-light) !important;
410 opacity: 1.0;
411 }
412
413 :-moz-placeholder {
414 color: _palette(fg-light) !important;
415 opacity: 1.0;
416 }
417
418 ::-moz-placeholder {
419 color: _palette(fg-light) !important;
420 opacity: 1.0;
421 }
422
423 :-ms-input-placeholder {
424 color: _palette(fg-light) !important;
425 opacity: 1.0;
426 }
427
428 .formerize-placeholder {
429 color: _palette(fg-light) !important;
430 opacity: 1.0;
431 }
432
433/* Box */
434
435 .box {
436 border-radius: 3px;
437 border: solid 2px _palette(border);
438 margin-bottom: _size(element-margin);
439 padding: 1.5em;
440
441 > :last-child,
442 > :last-child > :last-child,
443 > :last-child > :last-child > :last-child {
444 margin-bottom: 0;
445 }
446
447 &.alt {
448 border: 0;
449 border-radius: 0;
450 padding: 0;
451 }
452 }
453
454/* Icon */
455
456 .icon {
457 @include icon;
458 border-bottom: none;
459 position: relative;
460
461 > .label {
462 display: none;
463 }
464
465 &.major {
466 @include vendor('transform', 'rotate(-45deg)');
467 border-radius: 3px;
468 border: solid 2px _palette(border);
469 display: inline-block;
470 font-size: 1.35em;
471 height: calc(3em + 2px);
472 line-height: 3em;
473 text-align: center;
474 width: calc(3em + 2px);
475
476 &:before {
477 @include vendor('transform', 'rotate(45deg)');
478 display: inline-block;
479 font-size: 1.5em;
480 }
481
482 @include breakpoint(small) {
483 font-size: 1em;
484 }
485 }
486
487 &.style1 {
488 color: _palette(accent2, bg);
489 }
490
491 &.style2 {
492 color: _palette(accent3, bg);
493 }
494
495 &.style3 {
496 color: _palette(accent4, bg);
497 }
498 }
499
500/* Image */
501
502 .image {
503 border-radius: 3px;
504 border: 0;
505 display: inline-block;
506 position: relative;
507
508 img {
509 border-radius: 3px;
510 display: block;
511 }
512
513 &.left {
514 float: left;
515 margin: 0 2em 2em 0;
516 top: 0.25em;
517 }
518
519 &.right {
520 float: right;
521 margin: 0 0 2em 2em;
522 top: 0.25em;
523 }
524
525 &.left,
526 &.right {
527 max-width: 40%;
528
529 img {
530 width: 100%;
531 }
532 }
533
534 &.fit {
535 display: block;
536 margin: 0 0 _size(element-margin) 0;
537 width: 100%;
538
539 img {
540 width: 100%;
541 }
542 }
543 }
544
545/* List */
546
547 ol {
548 list-style: decimal;
549 margin: 0 0 _size(element-margin) 0;
550 padding-left: 1.25em;
551
552 li {
553 padding-left: 0.25em;
554 }
555 }
556
557 ul {
558 list-style: disc;
559 margin: 0 0 _size(element-margin) 0;
560 padding-left: 1em;
561
562 li {
563 padding-left: 0.5em;
564 }
565
566 &.alt {
567 list-style: none;
568 padding-left: 0;
569
570 li {
571 border-top: solid 1px _palette(border);
572 padding: 0.5em 0;
573
574 &:first-child {
575 border-top: 0;
576 padding-top: 0;
577 }
578 }
579 }
580
581 &.icons {
582 cursor: default;
583 list-style: none;
584 padding-left: 0;
585
586 li {
587 display: inline-block;
588 padding: 0 1em 0 0;
589
590 &:last-child {
591 padding-right: 0 !important;
592 }
593 }
594
595 &.major {
596 padding: 1em 0;
597
598 li {
599 padding-right: 3.5em;
600
601 @include breakpoint(small) {
602 padding: 0 1em !important;
603 }
604 }
605 }
606 }
607
608 &.actions {
609 cursor: default;
610 list-style: none;
611 padding-left: 0;
612
613 li {
614 display: inline-block;
615 padding: 0 (_size(element-margin) * 0.75) 0 0;
616 vertical-align: middle;
617
618 &:last-child {
619 padding-right: 0;
620 }
621 }
622
623 &.small {
624 li {
625 padding: 0 (_size(element-margin) * 0.375) 0 0;
626 }
627 }
628
629 &.vertical {
630 li {
631 display: block;
632 padding: (_size(element-margin) * 0.75) 0 0 0;
633
634 &:first-child {
635 padding-top: 0;
636 }
637
638 > * {
639 margin-bottom: 0;
640 }
641 }
642
643 &.small {
644 li {
645 padding: (_size(element-margin) * 0.375) 0 0 0;
646
647 &:first-child {
648 padding-top: 0;
649 }
650 }
651 }
652 }
653
654 &.fit {
655 display: table;
656 margin-left: (_size(element-margin) * -0.75);
657 padding: 0;
658 table-layout: fixed;
659 width: calc(100% + #{(_size(element-margin) * 0.75)});
660
661 li {
662 display: table-cell;
663 padding: 0 0 0 (_size(element-margin) * 0.75);
664
665 > * {
666 margin-bottom: 0;
667 }
668 }
669
670 &.small {
671 margin-left: (_size(element-margin) * -0.375);
672 width: calc(100% + #{(_size(element-margin) * 0.375)});
673
674 li {
675 padding: 0 0 0 (_size(element-margin) * 0.375);
676 }
677 }
678 }
679
680 @include breakpoint(small) {
681 li {
682 display: block;
683 padding: (_size(element-margin) * 0.5) 0 0 0;
684 text-align: center;
685 width: 100%;
686
687 &:first-child {
688 padding-top: 0;
689 }
690
691 > * {
692 margin: 0 auto !important;
693 max-width: 30em;
694 width: 100%;
695
696 &.icon {
697 &:before {
698 margin-left: -1em;
699 }
700 }
701 }
702 }
703
704 &.small {
705 li {
706 padding: (_size(element-margin) * 0.25) 0 0 0;
707
708 &:first-child {
709 padding-top: 0;
710 }
711 }
712 }
713 }
714 }
715 }
716
717 dl {
718 margin: 0 0 _size(element-margin) 0;
719 }
720
721/* Table */
722
723 .table-wrapper {
724 -webkit-overflow-scrolling: touch;
725 overflow-x: auto;
726 }
727
728 table {
729 margin: 0 0 _size(element-margin) 0;
730 width: 100%;
731
732 tbody {
733 tr {
734 border: solid 1px _palette(border);
735 border-left: 0;
736 border-right: 0;
737
738 &:nth-child(2n + 1) {
739 background-color: _palette(border-bg);
740 }
741 }
742 }
743
744 td {
745 padding: 0.75em 0.75em;
746 }
747
748 th {
749 color: _palette(fg-bold);
750 font-size: 0.9em;
751 font-weight: _font(weight-bold);
752 padding: 0 0.75em 0.75em 0.75em;
753 text-align: left;
754 }
755
756 thead {
757 border-bottom: solid 2px _palette(border);
758 }
759
760 tfoot {
761 border-top: solid 2px _palette(border);
762 }
763
764 &.alt {
765 border-collapse: separate;
766
767 tbody {
768 tr {
769 td {
770 border: solid 1px _palette(border);
771 border-left-width: 0;
772 border-top-width: 0;
773
774 &:first-child {
775 border-left-width: 1px;
776 }
777 }
778
779 &:first-child {
780 td {
781 border-top-width: 1px;
782 }
783 }
784 }
785 }
786
787 thead {
788 border-bottom: 0;
789 }
790
791 tfoot {
792 border-top: 0;
793 }
794 }
795 }
796
797/* Button */
798
799 input[type="submit"],
800 input[type="reset"],
801 input[type="button"],
802 button,
803 .button {
804 @include vendor('appearance', 'none');
805 @include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
806 background-color: transparent;
807 border-radius: 3px;
808 border: 0;
809 box-shadow: inset 0 0 0 2px _palette(border);
810 color: _palette(fg-bold);
811 cursor: pointer;
812 display: inline-block;
813 font-size: 0.8em;
814 font-weight: _font(weight-bold);
815 height: 3.125em;
816 letter-spacing: _size(letter-spacing-alt);
817 line-height: 3.125em;
818 padding: 0 2.75em;
819 text-align: center;
820 text-decoration: none;
821 text-transform: uppercase;
822 white-space: nowrap;
823 overflow: hidden;
824 text-overflow: ellipsis;
825
826 &:hover {
827 background-color: _palette(border-bg);
828 }
829
830 &:active {
831 background-color: _palette(border2-bg);
832 }
833
834 &.icon {
835 &:before {
836 margin-right: 0.5em;
837 }
838 }
839
840 &.fit {
841 display: block;
842 margin: 0 0 (_size(element-margin) * 0.5) 0;
843 width: 100%;
844 }
845
846 &.small {
847 font-size: 0.8em;
848 }
849
850 &.big {
851 font-size: 1.35em;
852 }
853
854 &.special {
855 background-color: _palette(accent6, bg);
856 box-shadow: none !important;
857 color: _palette(accent6, fg-bold) !important;
858
859 &:hover {
860 background-color: lighten(_palette(accent6, bg), 5) !important;
861 }
862
863 &:active {
864 background-color: darken(_palette(accent6, bg), 5) !important;
865 }
866 }
867
868 &.disabled,
869 &:disabled {
870 @include vendor('pointer-events', 'none');
871 opacity: 0.25;
872 }
873
874 @include breakpoint(small) {
875 height: 3.75em;
876 line-height: 3.75em;
877 }
878 }
879
880/* Features */
881
882 .features {
883 @include vendor('display', 'flex');
884 @include vendor('flex-wrap', 'wrap');
885 @include vendor('justify-content', 'center');
886 list-style: none;
887 padding: 0;
888 width: 100%;
889
890 li {
891 @include padding(4em, 4em, (0,0,0,2em));
892 display: block;
893 position: relative;
894 text-align: left;
895 width: 50%;
896
897 @for $i from 1 through _misc(max-features) {
898 $j: 0.035 * $i;
899
900 &:nth-child(#{$i}) {
901 background-color: rgba(0,0,0, $j);
902 }
903 }
904
905 &:before {
906 display: block;
907 color: _palette(accent2, bg);
908 position: absolute;
909 left: 1.75em;
910 top: 2.75em;
911 font-size: 1.5em;
912 }
913
914 &:nth-child(1) {
915 border-top-left-radius: 3px;
916 }
917
918 &:nth-child(2) {
919 border-top-right-radius: 3px;
920 }
921
922 &:nth-last-child(1) {
923 border-bottom-right-radius: 3px;
924 }
925
926 &:nth-last-child(2) {
927 border-bottom-left-radius: 3px;
928 }
929
930 @include breakpoint(medium) {
931 @include padding(3em, 2em);
932 text-align: center;
933
934 &:before {
935 left: 0;
936 margin: 0 0 (_size(element-margin) * 0.5) 0;
937 position: relative;
938 top: 0;
939 }
940 }
941
942 @include breakpoint(small) {
943 @include padding(3em, 0);
944 background-color: transparent !important;
945 border-top: solid 2px _palette(border);
946 width: 100%;
947
948 &:first-child {
949 border-top: 0;
950 }
951 }
952 }
953 }
954
955/* Spotlight */
956
957 .spotlight {
958 @include vendor('align-items', 'center');
959 @include vendor('display', 'flex');
960
961 .image {
962 @include vendor('order', '1');
963 border-radius: 0;
964 width: 40%;
965
966 img {
967 border-radius: 0;
968 width: 100%;
969 }
970 }
971
972 .content {
973 @include padding(2em, 4em);
974 @include vendor('order', '2');
975 max-width: 48em;
976 width: 60%;
977 }
978
979 &:nth-child(2n) {
980 @include vendor('flex-direction', 'row-reverse');
981 }
982
983 @for $i from 1 through _misc(max-spotlights) {
984 $j: 0.075 * $i;
985
986 &:nth-child(#{$i}) {
987 background-color: rgba(0,0,0, $j);
988 }
989 }
990
991 @include breakpoint(large) {
992 .image {
993 width: 45%;
994 }
995
996 .content {
997 width: 55%;
998 }
999 }
1000
1001 @include breakpoint(medium) {
1002 display: block;
1003
1004 br {
1005 display: none;
1006 }
1007
1008 .image {
1009 width: 100%;
1010 }
1011
1012 .content {
1013 @include padding(4em, 3em);
1014 max-width: none;
1015 text-align: center;
1016 width: 100%;
1017 }
1018 }
1019
1020 @include breakpoint(small) {
1021 .content {
1022 @include padding(3em, 2em);
1023 }
1024 }
1025 }
1026
1027/* Wrapper */
1028
1029 @mixin wrapper($p) {
1030 background-color: _palette($p, bg);
1031 color: _palette($p, fg);
1032
1033 // Basic
1034
1035 strong, b {
1036 color: _palette($p, fg-bold);
1037 }
1038
1039 h2, h3, h4, h5, h6 {
1040 color: _palette($p, fg-bold);
1041 }
1042
1043 hr {
1044 border-color: _palette($p, border);
1045 }
1046
1047 blockquote {
1048 border-color: _palette($p, border);
1049 }
1050
1051 code {
1052 background: _palette($p, border-bg);
1053 }
1054
1055 // Section/Article
1056
1057 header {
1058 p {
1059 color: _palette($p, fg-light);
1060 }
1061
1062 &.major {
1063 h2, h3, h4, h5, h6 {
1064 border-color: _palette($p, border);
1065 }
1066
1067 p {
1068 color: _palette($p, fg);
1069 }
1070 }
1071 }
1072
1073 // Form
1074
1075 label {
1076 color: _palette($p, fg-bold);
1077 }
1078
1079 input[type="text"],
1080 input[type="password"],
1081 input[type="email"],
1082 select,
1083 textarea {
1084 background: _palette($p, border-bg);
1085 }
1086
1087 .select-wrapper {
1088 &:before {
1089 color: _palette($p, border);
1090 }
1091 }
1092
1093 input[type="checkbox"],
1094 input[type="radio"], {
1095 & + label {
1096 color: _palette($p, fg);
1097
1098 &:before {
1099 background: _palette($p, border-bg);
1100 }
1101 }
1102
1103 &:checked + label {
1104 &:before {
1105 background: _palette($p, fg-bold);
1106 color: _palette($p, bg);
1107 }
1108 }
1109 }
1110
1111 ::-webkit-input-placeholder {
1112 color: _palette($p, fg-light) !important;
1113 }
1114
1115 :-moz-placeholder {
1116 color: _palette($p, fg-light) !important;
1117 }
1118
1119 ::-moz-placeholder {
1120 color: _palette($p, fg-light) !important;
1121 }
1122
1123 :-ms-input-placeholder {
1124 color: _palette($p, fg-light) !important;
1125 }
1126
1127 .formerize-placeholder {
1128 color: _palette($p, fg-light) !important;
1129 }
1130
1131 // Icon
1132
1133 .icon {
1134 &.major {
1135 border-color: _palette($p, border);
1136 }
1137 }
1138
1139 // List
1140
1141 ul {
1142 &.alt {
1143 li {
1144 border-color: _palette($p, border);
1145 }
1146 }
1147 }
1148
1149 // Table
1150
1151 table {
1152 tbody {
1153 tr {
1154 border-color: _palette($p, border);
1155
1156 &:nth-child(2n + 1) {
1157 background-color: _palette($p, border-bg);
1158 }
1159 }
1160 }
1161
1162 th {
1163 color: _palette($p, fg-bold);
1164 }
1165
1166 thead {
1167 border-color: _palette($p, border);
1168 }
1169
1170 tfoot {
1171 border-color: _palette($p, border);
1172 }
1173
1174 &.alt {
1175 tbody {
1176 tr {
1177 td {
1178 border-color: _palette($p, border);
1179 }
1180 }
1181 }
1182 }
1183 }
1184
1185 // Button
1186
1187 input[type="submit"],
1188 input[type="reset"],
1189 input[type="button"],
1190 button,
1191 .button {
1192 box-shadow: inset 0 0 0 2px _palette($p, border);
1193 color: _palette($p, fg-bold);
1194
1195 &:hover {
1196 background-color: _palette($p, border-bg);
1197 }
1198
1199 &:active {
1200 background-color: _palette($p, border2-bg);
1201 }
1202 }
1203
1204 // Features
1205
1206 .features {
1207 li {
1208 @include breakpoint(small) {
1209 border-top-color: _palette($p, border);
1210 }
1211 }
1212 }
1213
1214 }
1215
1216 .wrapper {
1217 @include padding(6em, 0);
1218
1219 > .inner {
1220 width: 60em;
1221 margin: 0 auto;
1222
1223 @include breakpoint(large) {
1224 width: 90%;
1225 }
1226
1227 @include breakpoint(medium) {
1228 width: 100%;
1229 }
1230 }
1231
1232 &.alt {
1233 padding: 0;
1234 }
1235
1236 &.style1 {
1237 @include wrapper(accent1);
1238 }
1239
1240 &.style2 {
1241 background-color: _palette(bg);
1242 }
1243
1244 &.style3 {
1245 @include wrapper(accent5);
1246 }
1247
1248 &.style4 {
1249 background-color: transparent;
1250 }
1251
1252 &.style5 {
1253 @include wrapper(accent7);
1254 }
1255
1256 @include breakpoint(medium) {
1257 @include padding(4em, 3em);
1258 }
1259
1260 @include breakpoint(small) {
1261 @include padding(3em, 2em);
1262 }
1263 }
1264
1265/* Page Wrapper + Menu */
1266
1267 #page-wrapper {
1268 @include vendor('transition', 'opacity #{_duration(menu)} ease');
1269 opacity: 1;
1270 padding-top: 3em;
1271
1272 &:before {
1273 background: rgba(0,0,0,0);
1274 content: '';
1275 display: block;
1276 display: none;
1277 height: 100%;
1278 left: 0;
1279 position: fixed;
1280 top: 0;
1281 width: 100%;
1282 z-index: _misc(z-index-base) + 1;
1283 }
1284 }
1285
1286 #menu {
1287 @include vendor('transform', 'translateX(20em)');
1288 @include vendor('transition', 'transform #{_duration(menu)} ease');
1289 -webkit-overflow-scrolling: touch;
1290 background: _palette(accent1, bg);
1291 color: _palette(accent1, fg-bold);
1292 height: 100%;
1293 max-width: 80%;
1294 overflow-y: auto;
1295 padding: 3em 2em;
1296 position: fixed;
1297 right: 0;
1298 top: 0;
1299 width: 20em;
1300 z-index: _misc(z-index-base) + 2;
1301
1302 ul {
1303 list-style: none;
1304 padding: 0;
1305
1306 > li {
1307 border-top: solid 1px _palette(accent1, border);
1308 margin: 0.5em 0 0 0;
1309 padding: 0.5em 0 0 0;
1310
1311 &:first-child {
1312 border-top: 0 !important;
1313 margin-top: 0 !important;
1314 padding-top: 0 !important;
1315 }
1316
1317 > a {
1318 border: 0;
1319 color: inherit;
1320 display: block;
1321 font-size: 0.8em;
1322 letter-spacing: _size(letter-spacing-alt);
1323 outline: 0;
1324 text-decoration: none;
1325 text-transform: uppercase;
1326
1327 @include breakpoint(small) {
1328 line-height: 3em;
1329 }
1330 }
1331 }
1332 }
1333
1334 .close {
1335 background-image: url('images/close.svg');
1336 background-position: 4.85em 1em;
1337 background-repeat: no-repeat;
1338 border: 0;
1339 cursor: pointer;
1340 display: block;
1341 height: 3em;
1342 position: absolute;
1343 right: 0;
1344 top: 0;
1345 vertical-align: middle;
1346 width: 7em;
1347 }
1348
1349 @include breakpoint(small) {
1350 padding: 3em 1.5em;
1351 }
1352 }
1353
1354 body.is-menu-visible {
1355 #page-wrapper {
1356 opacity: 0.35;
1357
1358 &:before {
1359 display: block;
1360 }
1361 }
1362
1363 #menu {
1364 @include vendor('transform', 'translateX(0)');
1365 }
1366 }
1367
1368/* Header */
1369
1370 #header {
1371 @include vendor('transition', 'background-color #{_duration(transitions)} ease');
1372 background: _palette(bg);
1373 height: 3em;
1374 left: 0;
1375 line-height: 3em;
1376 position: fixed;
1377 top: 0;
1378 width: 100%;
1379 z-index: _misc(z-index-base);
1380
1381 h1 {
1382 @include vendor('transition', 'opacity #{_duration(transitions)} ease');
1383 height: inherit;
1384 left: 1.25em;
1385 line-height: inherit;
1386 position: absolute;
1387 top: 0;
1388
1389 a {
1390 border: 0;
1391 display: block;
1392 height: inherit;
1393 line-height: inherit;
1394
1395 @include breakpoint(small) {
1396 font-size: 0.8em;
1397 }
1398 }
1399 }
1400
1401 nav {
1402 height: inherit;
1403 line-height: inherit;
1404 position: absolute;
1405 right: 0;
1406 top: 0;
1407
1408 > ul {
1409 list-style: none;
1410 margin: 0;
1411 padding: 0;
1412 white-space: nowrap;
1413
1414 > li {
1415 display: inline-block;
1416 padding: 0;
1417
1418 > a {
1419 border: 0;
1420 color: _palette(fg-bold);
1421 display: block;
1422 font-size: 0.8em;
1423 letter-spacing: _size(letter-spacing-alt);
1424 padding: 0 1.5em;
1425 text-transform: uppercase;
1426
1427 &.menuToggle {
1428 outline: 0;
1429 position: relative;
1430
1431 &:after {
1432 background-image: url('images/bars.svg');
1433 background-position: right center;
1434 background-repeat: no-repeat;
1435 content: '';
1436 display: inline-block;
1437 height: 3.75em;
1438 vertical-align: top;
1439 width: 2em;
1440 }
1441
1442 @include breakpoint(small) {
1443 padding: 0 1.5em;
1444
1445 span {
1446 display: none;
1447 }
1448 }
1449 }
1450
1451 @include breakpoint(small) {
1452 padding: 0 0 0 1.5em;
1453 }
1454 }
1455
1456 &:first-child {
1457 margin-left: 0;
1458 }
1459 }
1460 }
1461 }
1462
1463 &.alt {
1464 background: transparent;
1465
1466 h1 {
1467 @include vendor('pointer-events', 'none');
1468 opacity: 0;
1469 }
1470 }
1471 }
1472
1473/* Banner */
1474
1475 #banner {
1476 @include vendor('display', 'flex');
1477 @include vendor('flex-direction', 'column');
1478 @include vendor('justify-content', 'center');
1479 cursor: default;
1480 height: 100vh;
1481 min-height: 35em;
1482 overflow: hidden;
1483 position: relative;
1484 text-align: center;
1485
1486 h2 {
1487 @include vendor('transform', 'scale(1)');
1488 @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
1489 display: inline-block;
1490 font-size: 1.75em;
1491 opacity: 1;
1492 padding: 0.35em 1em;
1493 position: relative;
1494 z-index: 1;
1495
1496 &:before, &:after {
1497 @include vendor('transition', 'width 0.85s ease');
1498 @include vendor('transition-delay', '0.25s');
1499 background: _palette(fg-bold);
1500 content: '';
1501 display: block;
1502 height: 2px;
1503 position: absolute;
1504 width: 100%;
1505 }
1506
1507 &:before {
1508 top: 0;
1509 left: 0;
1510 }
1511
1512 &:after {
1513 bottom: 0;
1514 right: 0;
1515 }
1516 }
1517
1518 p {
1519 letter-spacing: _size(letter-spacing-alt);
1520 text-transform: uppercase;
1521
1522 a {
1523 color: inherit;
1524 }
1525 }
1526
1527 .more {
1528 @include vendor('transition', ('transform 0.75s ease', 'opacity 0.75s ease'));
1529 @include vendor('transition-delay', '3.5s');
1530 @include vendor('transform', 'translateY(0)');
1531 border: none;
1532 bottom: 0;
1533 color: inherit;
1534 font-size: 0.8em;
1535 height: 8.5em;
1536 left: 50%;
1537 letter-spacing: _size(letter-spacing-alt);
1538 margin-left: -8.5em;
1539 opacity: 1;
1540 outline: 0;
1541 padding-left: _size(letter-spacing-alt);
1542 position: absolute;
1543 text-align: center;
1544 text-transform: uppercase;
1545 width: 16em;
1546 z-index: 1;
1547
1548 &:after {
1549 background-image: url('images/arrow.svg');
1550 background-position: center;
1551 background-repeat: no-repeat;
1552 background-size: contain;
1553 bottom: 4em;
1554 content: '';
1555 display: block;
1556 height: 1.5em;
1557 left: 50%;
1558 margin: 0 0 0 -0.75em;
1559 position: absolute;
1560 width: 1.5em;
1561 }
1562 }
1563
1564 &:after {
1565 @include vendor('pointer-events', 'none');
1566 @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
1567 @include vendor('transition-delay', '1.25s');
1568 content: '';
1569 background: _palette(bg);
1570 display: block;
1571 width: 100%;
1572 height: 100%;
1573 position: absolute;
1574 left: 0;
1575 top: 0;
1576 opacity: 0;
1577 }
1578
1579 @include breakpoint(small) {
1580 @include padding(7em, 3em);
1581 height: auto;
1582 min-height: 0;
1583
1584 h2 {
1585 font-size: 1.25em;
1586 }
1587
1588 br {
1589 display: none;
1590 }
1591
1592 .more {
1593 display: none;
1594 }
1595 }
1596 }
1597
1598 body.is-loading {
1599 #banner {
1600 h2 {
1601 @include vendor('transform', 'scale(0.95)');
1602 opacity: 0;
1603
1604 &:before, &:after {
1605 width: 0;
1606 }
1607 }
1608
1609 .more {
1610 @include vendor('transform', 'translateY(8.5em)');
1611 opacity: 0;
1612 }
1613
1614 &:after {
1615 opacity: 1;
1616 }
1617 }
1618 }
1619
1620/* CTA */
1621
1622 #cta {
1623 .inner {
1624 @include vendor('display', 'flex');
1625 max-width: 45em;
1626
1627 header {
1628 @include vendor('order', '1');
1629 padding-right: 3em;
1630 width: 70%;
1631
1632 p {
1633 color: inherit;
1634 }
1635 }
1636
1637 .actions {
1638 @include vendor('order', '2');
1639 width: 30%;
1640 }
1641
1642 @include breakpoint(medium) {
1643 display: block;
1644 text-align: center;
1645
1646 header {
1647 padding-right: 0;
1648 width: 100%;
1649 }
1650
1651 .actions {
1652 margin-left: auto;
1653 margin-right: auto;
1654 max-width: 20em;
1655 width: 100%;
1656 }
1657 }
1658
1659 @include breakpoint(small) {
1660 .actions {
1661 max-width: none;
1662 }
1663 }
1664 }
1665 }
1666
1667/* Main */
1668
1669 #main {
1670 > header {
1671 @include padding(12em, 0);
1672 @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")'));
1673 background-attachment: fixed;
1674 background-position: center center;
1675 background-repeat: no-repeat;
1676 background-size: cover;
1677 text-align: center;
1678
1679 h2 {
1680 font-size: 1.75em;
1681 margin: 0 0 (_size(element-margin) * 0.25) 0;
1682 }
1683
1684 p {
1685 color: inherit;
1686 letter-spacing: _size(letter-spacing-alt);
1687 text-transform: uppercase;
1688 top: 0;
1689
1690 a {
1691 color: inherit;
1692 }
1693 }
1694
1695 @include breakpoint(xlarge) {
1696 @include padding(10em, 0);
1697 }
1698
1699 @include breakpoint(large) {
1700 @include padding(8em, 3em);
1701 }
1702
1703 @include breakpoint(medium) {
1704 @include padding(10em, 3em);
1705 }
1706
1707 @include breakpoint(small) {
1708 @include padding(5em, 3em);
1709
1710 h2 {
1711 font-size: 1.25em;
1712 margin: 0 0 (_size(element-margin) * 0.5) 0;
1713 }
1714 }
1715 }
1716 }
1717
1718 body.is-mobile {
1719 #main {
1720 > header {
1721 background-attachment: scroll;
1722 }
1723 }
1724 }
1725
1726/* Footer */
1727
1728 #footer {
1729 @include padding(6em, 0);
1730 background-color: darken(_palette(bg), 8);
1731 text-align: center;
1732
1733 .icons {
1734 font-size: 1.25em;
1735
1736 a {
1737 color: _palette(fg-light);
1738
1739 &:hover {
1740 color: _palette(fg);
1741 }
1742 }
1743 }
1744
1745 .copyright {
1746 color: _palette(fg-light);
1747 font-size: 0.8em;
1748 letter-spacing: _size(letter-spacing-alt);
1749 list-style: none;
1750 padding: 0;
1751 text-transform: uppercase;
1752
1753 li {
1754 border-left: solid 1px _palette(fg-light);
1755 display: inline-block;
1756 line-height: 1em;
1757 margin-left: 1em;
1758 padding-left: 1em;
1759
1760 &:first-child {
1761 border-left: 0;
1762 margin-left: 0;
1763 padding-left: 0;
1764 }
1765
1766 a {
1767 color: inherit;
1768
1769 &:hover {
1770 color: _palette(fg);
1771 }
1772 }
1773
1774 @include breakpoint(xsmall) {
1775 border: 0;
1776 display: block;
1777 line-height: 1.65em;
1778 margin: 0;
1779 padding: 0.5em 0;
1780 }
1781 }
1782 }
1783
1784 @include breakpoint(medium) {
1785 @include padding(4em, 3em);
1786 }
1787
1788 @include breakpoint(small) {
1789 @include padding(3em, 2em);
1790 }
1791 }
1792
1793/* Landing */
1794
1795 body.landing {
1796 #page-wrapper {
1797 @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")'));
1798 background-attachment: fixed;
1799 background-position: center center;
1800 background-repeat: no-repeat;
1801 background-size: cover;
1802 padding-top: 0;
1803 }
1804
1805 #footer {
1806 background-color: darken(transparentize(_palette(bg), 0.1), 8);
1807 }
1808 }
1809
1810 body.is-mobile {
1811 &.landing {
1812 #page-wrapper {
1813 background: none;
1814 }
1815
1816 #banner,
1817 .wrapper.style4 {
1818 @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")'));
1819 background-position: center center;
1820 background-repeat: no-repeat;
1821 background-size: cover;
1822 }
1823
1824 #footer {
1825 background-color: darken(_palette(bg), 8);
1826 }
1827 }
1828 }
Note: See TracBrowser for help on using the repository browser.