2712df9c3bed1a884bd309e5b747c885e2ddb229
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / style.css
1 /*
2 Theme Name: WebKit
3 Theme URI: http://webkit.org/
4 Author: The WebKit Team
5 Author URI: http://webkit.org/
6 Description: Modern, adaptive theme for the WebKit project.
7 Version: 1.0
8 */
9
10 /** Resets **/
11 html, body, div, span, object, iframe,
12 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13 a, abbr, acronym, address, big, cite, code,
14 del, dfn, em, img, ins, kbd, q, samp,
15 small, strike, strong, sub, sup, tt, var,
16 dl, dt, dd, ol, ul, li,
17 fieldset, form, label, legend,
18 table, caption, tbody, tfoot, thead, tr, th, td,
19 article, aside, canvas, details,
20 figure, figcaption, footer, header, hgroup,
21 menu, nav, output, section, summary,
22 time, mark, audio, video {
23     margin: 0;
24     padding: 0;
25     border: 0;
26     font: inherit;
27     vertical-align: baseline;
28 }
29 /* HTML5 display-role reset for older browsers */
30 article, aside, details, figcaption, figure,
31 footer, header, hgroup, menu, nav, section {
32     display: block;
33 }
34 html {
35     font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
36     font-size: 62.5%;
37     font-synthesis: none;
38 }
39 body {
40     background-color: #00253D;
41     font-size: 1.7rem;
42     font-weight: 400;
43     line-height: 1.52947;
44     letter-spacing: -0.021rem;
45     color: #333333;
46 }
47 ol, ul {
48     list-style: none;
49 }
50 dl {
51     margin: 2rem 0;
52 }
53 dt {
54     font-weight: bold;
55 }
56 dd {
57     margin: 0 3rem;
58 }
59 blockquote, q {
60     quotes: none;
61 }
62 blockquote:before, blockquote:after,
63 q:before, q:after {
64     content: '';
65     content: none;
66 }
67 table {
68     border-collapse: collapse;
69     border-spacing: 0;
70 }
71 p:empty {
72     display: none;
73 }
74 a {
75     color: #08c;
76     text-decoration: none;
77     transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* ease-out-exponential */
78 }
79 a:hover {
80     text-decoration: underline;
81 }
82 a > code {
83     color: #08c;
84 }
85
86 h1 a:hover {
87     text-decoration: none;
88 }
89 hr {
90     border: none;
91     border-bottom: 1px solid #ddd;
92 }
93 strong {
94     font-weight: 600;
95 }
96 em {
97     font-style: italic;
98     font-weight: 300;
99 }
100 sup {
101     vertical-align: super;
102     font-size: smaller;
103     line-height: 1;
104 }
105 code {
106     font-family: "SF Mono", "Menlo", monospace;
107     background: #f2f2f2;
108     border-radius: 2px;
109     border: 1px solid #e7e7e7;
110     padding: 0 0.5rem;
111     font-size: 80%;
112     color: #444;
113 }
114
115 main {
116     background-color: #f7f7f7;
117 }
118
119 /** Accessibility Helpers **/
120 a[name] {
121     display: inline-block;
122     position: relative;
123     top: -3rem;
124     color: #ddd;
125     width: 0;
126 }
127
128 p > a[name]::before {
129     content: "#";
130     margin-left: -1.7rem;
131     position: relative;
132     top: 3rem;
133
134 }
135
136 a[name]:hover {
137     color: #08c;
138     text-decoration: none;
139 }
140
141 h1,
142 h2,
143 h3,
144 h4,
145 h5,
146 h6 {
147     text-rendering: optimizeLegibility;
148 }
149
150 h1 a[name],
151 h2 a[name],
152 h3 a[name],
153 h4 a[name],
154 h5 a[name],
155 h6 a[name] {
156     display: block;
157     visibility: hidden;
158 }
159
160 input[type=text] {
161     display: inline-block;
162     box-sizing: border-box;
163     vertical-align: top;
164     height: 4.2rem;
165     padding-top: 3px;
166     margin-bottom: 3rem;
167     padding-left: 1.5rem;
168     padding-right: 1.5rem;
169     color: #333333;
170     text-align: left;
171     border: 1px solid #d6d6d6;
172     border-radius: 4px;
173     background: white;
174     background-clip: padding-box;
175     font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
176     line-height: 1.33333;
177     font-weight: 400;
178     letter-spacing: normal;
179     font-size: 2rem;
180 }
181
182 input[type=submit] {
183     background-color: #1d9bd9;
184     background: linear-gradient(#3baee7, #0088cc);
185     border-radius: 4px;
186     color: white;
187     cursor: pointer;
188     font-size: 1.5rem;
189     font-weight: 500;
190     text-align: center;
191     border: 0;
192 }
193
194 .admin-bar a[name] {
195     top: calc(-32px - 3rem);
196 }
197
198 .admin-bar p > a[name]::before {
199     top: calc(32px + 3rem);
200 }
201
202 .screen-reader-text {
203     clip: rect(1px, 1px, 1px, 1px);
204     position: absolute !important;
205     height: 1px;
206     width: 1px;
207     overflow: hidden;
208 }
209
210 .screen-reader-text:focus {
211     background-color: #f1f1f1;
212     border-radius: 3px;
213     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
214     clip: auto !important;
215     color: #21759b;
216     display: block;
217     font-size: 14px;
218     font-size: 0.875rem;
219     font-weight: bold;
220     height: auto;
221     left: 5px;
222     line-height: normal;
223     padding: 15px 23px 14px;
224     text-decoration: none;
225     top: 5px;
226     width: auto;
227     z-index: 100000; /* Above WP toolbar. */
228 }
229
230 /** Page Layout **/
231 .page-width {
232     max-width: 1140px;
233     margin: 0 auto;
234 }
235
236 /** Header **/
237 header {
238     overflow: visible;
239     width: 100vw;
240     max-width: 100%;
241     padding-top: 1.5rem;
242     margin: 0;
243     position: relative;
244     z-index: 500;
245 }
246
247 .home header {
248     background-color: transparent;
249     transition: background 500ms ease-out, border 250ms ease-out;
250 }
251
252 @supports ( -webkit-backdrop-filter: blur(10px) ) {
253
254     .home header {
255         background-color: transparent;
256         backdrop-filter: blur(0px);
257         -webkit-backdrop-filter: blur(0px);
258     }
259
260     .sub-menu-layer {
261         backdrop-filter: blur(10px);
262         -webkit-backdrop-filter: blur(10px);
263     }
264 }
265
266 .nextrouter .link,
267 a.readmore {
268     background: url('images/chevron.svg') right no-repeat;
269     background-position-y: 0.6rem;
270     background-size: 0.5rem;
271     padding-right: 1rem;
272 }
273
274 a.download {
275     background: url('images/download.svg') right no-repeat;
276     padding-right: 4rem;
277 }
278
279 /** Pagination **/
280 .pagination {
281     text-align: center;
282     margin: 3rem auto 0;
283 }
284
285 .pagination::after {
286     content: ' ';
287     display: table;
288     padding-bottom: 3rem;
289 }
290
291 .pagination .page-numbers {
292     display: inline-block;
293     padding: 0.3rem 1rem 0.5rem;
294     background: white;
295     border-radius: 4px;
296     box-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px;
297     height: 2rem;
298     font-size: 1.7rem;
299     line-height: 1.29412;
300     font-weight: 400;
301     letter-spacing: -0.021em;
302 }
303
304 .pagination .page-numbers:not(.current, .dots):hover {
305     text-decoration: none;
306     background: #08c;
307     color: white;
308 }
309
310 .pagination .dots,
311 .pagination .page-numbers.current {
312     background: none;
313     box-shadow: none;
314 }
315
316 .pagination .prev-post,
317 .pagination .next-post {
318     min-width: 25%;
319 }
320
321 .pagination .prev-post {
322     text-align: right;
323 }
324
325 .pagination .next-post {
326     text-align: left;
327 }
328
329 .pagination .prev-post span,
330 .pagination .next-post span {
331     display: block;
332     font-size: 1.4rem;
333     font-weight: normal;
334 }
335
336 /* Front page next button */
337 .pagination .next-button {
338     display: inline-block;
339     min-width: calc(33.33% - 3rem);
340     padding: 0.5rem 1rem 0.7rem;
341 }
342
343 .nextrouter {
344     position: relative;
345     background-color: #fafafa;
346     padding: 0;
347     width: 100vw;
348     left: 50%;
349     transform: translateX(-50%);
350 }
351
352 .nextrouter:hover {
353     background-color: #ffffff;
354     transition: background-color 300ms ease-out;
355 }
356
357 .nextrouter.previous {
358     text-align: right;
359     background-color: #f4f4f4;
360 }
361
362 .nextrouter.previous:hover {
363     background-color: #ffffff;
364 }
365
366 .nextrouter .bodycopy {
367     max-width: 1140px;
368     margin: 0 auto;
369 }
370
371 .nextrouter a {
372     display: block;
373     cursor: pointer;
374     color: #444444;
375     width: 66%;
376     margin: 0 auto;
377 }
378
379 .nextrouter a:hover {
380     text-decoration: none;
381 }
382
383 .nextrouter-copy {
384     padding: 10rem 0 9.5rem 0;
385     font-size: 3.2rem;
386     line-height: 1.09375;
387     font-weight: 500;
388     letter-spacing: 0.011rem;
389 }
390
391 .nextrouter .label {
392     font-size: 2.2rem;
393     line-height: 1;
394     font-weight: 300;
395     letter-spacing: 0.016rem;
396     color: #666666;
397     display: block;
398     margin-bottom: 1.8rem;
399 }
400
401 .nextrouter .title {
402     display: block;
403 }
404
405 .nextrouter .link {
406     clear: left;
407     display: inline-block;
408     font-size: 1.7rem;
409     font-weight: 400;
410     line-height: 1.52947;
411     letter-spacing: -0.021rem;
412     color: #08c;
413     background-position-y: 1rem;
414 }
415
416 .nextrouter a:hover .link {
417     text-decoration: underline;
418 }
419
420 /** Footer **/
421 footer {
422     content: "";
423     display: table;
424     clear: both;
425     width: 100%;
426     padding-bottom: 1.65rem;
427     box-sizing: border-box;
428 }
429
430 footer .menu {
431     font-size: 1.3rem;
432 }
433
434 /** Tiles **/
435 .tiles {
436     font-size: 0;
437     display: -webkit-flex;
438     display: flex;
439     -webkit-flex-wrap: wrap;
440     flex-wrap: wrap;
441     -webkit-justify-content: space-between;
442     justify-content: space-between;
443     box-sizing: border-box;
444     width: 100%;
445 }
446
447 .tile {
448     background: #ffffff;
449     display: block;
450     margin: 0 0 15px;
451     position: relative;
452     vertical-align: top;
453     box-sizing: border-box;
454     overflow: hidden;
455     box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
456 }
457
458 .tile.spacer {
459     background: none;
460     box-shadow: none;
461 }
462
463 .tile-link,
464 .tile-link:hover {
465     text-decoration: none;
466     display: block;
467     position: absolute;
468     top: 0;
469     left: 0;
470     width: 100%;
471     height: 100%;
472     font-size: 0;
473     z-index: 1;
474 }
475
476 .third-tile {
477     width: calc(33.33% - 10px);
478 }
479
480 .two-thirds-tile {
481     width: calc(66.66% - 5px);
482 }
483
484 .featured-tile {
485     padding: 0;
486 }
487
488 #icons {
489     display: none;
490 }
491
492 .tile .background-image {
493     position: relative;
494     margin-top: -1px;
495     height: 0;
496     padding-bottom: 80%;
497     overflow: hidden;
498     width: 100%;
499
500     background-color: #636a74;
501 }
502
503 .tile .background-image svg {
504     position: relative;
505     top: -12%;
506     width: 209%;
507     height: auto;
508 }
509
510 .tile .background-image.has-featured-image {
511     transition: filter 1s ease-in;
512     -webkit-filter: saturate(0);
513             filter: saturate(0);
514 }
515
516 .tile:not(.has-post-thumbnail) .featured-image {
517     display: none;
518 }
519
520 .tile.category-web-inspector svg {
521     background-color: #08c;
522 }
523
524 .tile.category-performance svg {
525     background-color: rgb(152, 188, 77);
526 }
527
528 .tile.category-javascript svg {
529     background-color: #997FA6;
530 }
531
532 .tile.category-css svg {
533     background-color: #bf6d71;
534 }
535
536 .tile.category-standards svg {
537     top: -20%;
538     background-color: #BF7600;
539 }
540
541 .tile.category-contributing svg {
542     background-color: #CBAA44;
543 }
544
545 .tile.category-storage svg {
546     background-color: #997FA6;
547 }
548
549 .tile.category-layout svg {
550     background-color: #bf6d71;
551 }
552
553 .tile.category-safari-technology-preview svg {
554     background-color: #8e56b1;
555 }
556
557 .tile.category-accessibility svg {
558     top: -8%;
559     background-color: #08c;
560 }
561
562 .tile.category-security svg {
563     background-color: #CBAA44;
564 }
565
566 .tile.category-privacy svg {
567     background-color: #CBAA44;
568 }
569
570 .tile .background-image.loaded {
571     background: none;
572     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
573     -webkit-filter: saturate(1);
574             filter: saturate(1);
575 }
576
577 .tile .featured-image::before {
578     padding-bottom: 80%;
579     content: '';
580     display: block;
581 }
582
583 .tile .featured-image {
584     position: relative;
585     max-height: 450px;
586     background-size: cover;
587     background-position: 50% 50%;
588     background-repeat: no-repeat;
589
590     opacity: 0;
591     transition: opacity 0.4s ease-in;
592 }
593
594 .tile:not(.has-post-thumbnail) .background-image,
595 .tile .background-vignette {
596     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0 1px;
597 }
598
599 .has-post-thumbnail .background-image {
600     filter: saturate(0);
601     -webkit-filter: saturate(0);
602     opacity: 0.1;
603 }
604
605 .has-post-thumbnail .background-image.loaded,
606 .tile .background-image.loaded .featured-image {
607     opacity: 1;
608 }
609
610 .featured-tile .background-image {
611     padding-bottom: 60%;
612     margin-bottom: 0;
613 }
614
615 .tile .tile-content {
616     font-size: 1.6rem;
617     line-height: 3rem;
618     max-width: 100%;
619     box-sizing: border-box;
620     padding: 2rem;
621 }
622
623 .featured-tile .tile-content {
624     padding: 0 24px;
625     box-sizing: border-box;
626     position: absolute;
627     -webkit-transform: none;
628     transform: none;
629     bottom: 15px;
630     top: auto;
631 }
632
633 .background-vignette {
634     width: 100%;
635     padding-bottom: 60%;
636     position: absolute;
637     top:0;
638     background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 1));
639 }
640
641 .tag-window .background-image {
642     background-color: #f2f2f2;
643 }
644
645 .tag-window .background-vignette {
646     background-image: linear-gradient(-180deg, rgba(242,242,242,0) 25%,rgba(242,242,242,1) 65%);
647 }
648
649 .featured-tile.tag-dark.tile {
650     background: black;
651 }
652
653 .featured-tile.tag-dark .background-vignette {
654     background-image: linear-gradient(-180deg, rgba(0,0,0,0) 33%,rgba(0,0,0,0.85));
655 }
656
657 .featured-tile.tag-dark .tile-content {
658     color: white;
659 }
660
661 .featured-tile.tag-dark .tile-content a {
662     color: #6cf;
663 }
664
665 .tag-transparent:not(.featured-tile) .featured-image {
666     box-shadow: none;
667     background-size: contain;
668 }
669
670 .tag-transparent:not(.featured-tile) .background-image.loaded {
671     border-bottom: none;
672 }
673
674 .tile-content p {
675     margin: 0;
676 }
677
678 .tile h1 {
679     font-size: 2.4rem;
680     line-height: 1.20849;
681     font-weight: 500;
682     letter-spacing: 0.015rem;
683     text-align: left;
684     white-space: no-wrap;
685 }
686
687 .tile h2 {
688     font-size: 2.4rem;
689     line-height: 1.20849;
690     font-weight: 200;
691     text-align: inherit;
692 }
693
694 .tile .summary,
695 .tile p {
696     margin-top: 1.65rem;
697 }
698
699 .icon-tile {
700     text-align: center;
701     font-size: 2rem;
702 }
703
704 .icon-tile h2 + p {
705     font-weight: 200;
706     margin-bottom: 1rem;
707 }
708
709 .icon-tile .icon {
710     position: relative;
711     background: url('images/compass.svg') no-repeat;
712     background-position: 50% 50%;
713     margin: 0 auto 3rem;
714     padding: 40%;
715     color: #fff;
716 }
717
718 .icon-tile.download .icon {
719     background-image: url('images/download.svg');
720 }
721
722 .icon-tile.developer .icon {
723     background-image: url('images/developer.svg');
724 }
725
726 .icon-tile, .icon-tile a {
727     color: white;
728 }
729 .amber-tile {
730     background-color: #FFCC00;
731 }
732 .gray-tile, .gray-tile a {
733     color: #017BFD;
734 }
735
736 .gray-tile {
737     background: linear-gradient(rgb(40, 40, 40), rgb(74, 74, 74));
738 }
739 .gray-tile, .gray-tile a {
740     color: #fff;
741 }
742
743 .amber-tile {
744     background-color: #FFCC00;
745 }
746 .blue-tile {
747     background-color: #08c;
748 }
749
750 .twitter-tile {
751     background-color: #34AADC;
752 }
753
754 .twitter-tile, .twitter-tile a {
755     color: white;
756 }
757
758 .tile-content a {
759     position: relative;
760     z-index: 200;
761 }
762
763 .twitter-tile .tile-content {
764     position: relative;
765     box-sizing: border-box;
766     font-size: 2rem;
767     text-align: center;
768 }
769
770 .twitter-tile.text-only {
771     display: -webkit-flex;
772     display: flex;
773     justify-content: center;
774     text-align: left;
775 }
776
777 .twitter-tile .media {
778     text-align: center;
779 }
780
781 .twitter-tile.text-only .tile-content {
782     font-size: 2.5rem;
783     font-weight: 400;
784     line-height: 3rem;
785     align-self: center;
786     padding-bottom: 6rem;
787 }
788
789 .twitter-tile img {
790     display: inline-block;
791     width: auto;
792     height: auto;
793     max-width: 100%;
794     max-height: 256px;
795 }
796
797 .twitter-controls {
798     padding: 0 1.5rem;
799     box-sizing: border-box;
800     width: 100%;
801     font-size: 1.5rem;
802     line-height: 3rem;
803     text-align: center;
804     font-weight: 600;
805     position: absolute;
806     left: 0;
807     bottom: 15px;
808     z-index: 200;
809     display: -webkit-flex;
810     display: flex;
811     -webkit-flex-wrap: wrap;
812     flex-wrap: wrap;
813     -webkit-justify-content: space-between;
814     justify-content: space-between;
815 }
816
817 .twitter-controls li {
818     display: inline-block;
819     margin: 0 1.3rem;
820 }
821
822 .twitter-controls a {
823     opacity: 0.66;
824     transition: opacity 300ms ease-out;
825 }
826 .twitter-controls a:hover {
827     opacity: 1;
828     text-decoration: none;
829 }
830
831 /** Twitter Icons **/
832
833 .twitter-icon {
834     background: url('images/twitter.svg') no-repeat;
835     background-size: cover;
836 }
837
838 .icon.twitter-icon {
839     position: relative;
840     margin: 3rem auto 3rem;
841     width: 1px;
842     padding: 33%;
843     color: #ffffff;
844     opacity: 0.33;
845 }
846
847 .twitter-tile h2 {
848     text-align: center;
849 }
850
851 .twitter-controls .twitter-icon {
852     text-indent: -9999em;
853     display: inline-block;
854     width: 2.5rem;
855     height: 2.5rem;
856 }
857
858 .twitter-icon.reply-icon {
859     background-position-y: 33%;
860 }
861
862 .twitter-icon.retweet-icon {
863     background-position-y: 66%;
864 }
865
866 .twitter-icon.favorite-icon {
867     background-position-y: 99%;
868 }
869
870 /** Code Syntax Highlighting **/
871 pre {
872     width: calc(100% + 6rem);
873     overflow: auto;
874     -webkit-overflow-scrolling: touch;
875     background: #f2f2f2;
876     border: 1px solid #E6E6E6;
877     border-radius: 2px;
878
879     box-sizing: border-box;
880     padding: 3rem;
881     margin-left: -3rem;
882 }
883
884 code {
885     color: #555555;
886     font-size: 1.6rem;
887     line-height: 2.5rem;
888 }
889
890 pre code {
891     border: none;
892     padding: 0;
893 }
894
895 code .keyword,
896 code.html .tag { color: #708; }
897 code .keyword.builtin,
898 code .keyword.literal { color: #aa0d91;}
899 code .keyword.type { color: #cb4b16; }
900 code .preprocessor { color: #996; }
901 code .comment { color: #93a1a1; float: none; display: inline; }
902 code .comment .doc { color: #839496; font-weight: bold; }
903 code .identifier { color: #1C63A8; }
904 code .string, code .char { color: #5B6E04; }
905 code .escaped { color: #AAA; }
906 code .number, code .tag { color: #586e75; }
907 code .regex, code .attribute { color: rgb(131, 108, 40); }
908 code .attribute.value { color: rgb(196, 26, 22) ;}
909 code .operator { color: #888; }
910 code .keyword.operator { color: #A90007; }
911 code .whitespace { background: #333; }
912 code .error { border-bottom: 1px solid red; }
913 code .doctype { color: rgb(192, 192, 192); }
914 code .property { color: #881391; }
915
916 code.xml .comment,
917 code.html .comment { color: rgb(0, 116, 0); }
918
919 code.xml .preprocessor .keyword { color: #996; }
920 code.xml .meta, code.xml .meta .keyword { color: #399; }
921
922 code.cpp .preprocessor .identifier { color: #996; }
923
924 code::-moz-selection, code span::-moz-selection {
925     background: #A3CDFE;
926 }
927
928 code::selection, code span::selection {
929     background: #A3CDFE;
930 }
931
932 code.syntax { white-space: normal; }
933 code.syntax .newlines { white-space: pre; display: block; }
934
935 code.css .attribute,
936 code.css .identifier,
937 code.css .preprocessor { color: rgb(170, 13, 145); }
938
939 code.css .keyword { color: black; }
940 code.css .number { color: rgb(28, 0, 207); }
941
942 /** Post Typography **/
943
944 main {
945     width: 100vw;
946     max-width: 100%;
947     overflow-x: hidden;
948     box-sizing: border-box;
949     padding: 3rem 0 0;
950 }
951
952 article {
953     padding-bottom: 3rem;
954 }
955
956 article::after {
957     clear: both;
958     content: ' ';
959     display: table;
960 }
961
962 article h1 {
963     font-size: 5.6rem;
964     line-height: 1.10746;
965     font-weight: 500;
966     letter-spacing: 0.004rem;
967     text-align: center;
968     color: #037DFD;
969     margin: 0 auto 3rem;
970 }
971
972 article h1 a {
973     color: #444444;
974     text-decoration: none;
975 }
976
977 article h2 {
978     font-size: 3.2rem;
979     line-height: 1.09375;
980     font-weight: 500;
981     letter-spacing: -0.011rem;
982     margin: 4rem 0 1rem;
983 }
984
985 article h3 {
986     font-size: 2.4rem;
987     line-height: 1.09375;
988     font-weight: 500;
989     letter-spacing: -0.011rem;
990 }
991
992 article h4 {
993     font-size: 2.2rem;
994     line-height: 1.09375;
995     font-weight: 500;
996 }
997
998 article h5 {
999     font-size: 2rem;
1000     line-height: 1.09375;
1001     font-weight: 500;
1002 }
1003
1004 article h6 {
1005     font-size: 1.7rem;
1006     line-height: 1.09375;
1007     font-weight: 500;
1008 }
1009
1010 article h3,
1011 article h4,
1012 article h5,
1013 article h6 {
1014     margin-bottom: 0.5rem;
1015 }
1016
1017 article h2 + h3,
1018 article h3 + h4,
1019 article h4 + h5,
1020 article h5 + h6 {
1021     margin-top: 0;
1022 }
1023
1024 article p,
1025 article div > img,
1026 article pre,
1027 article hr {
1028     margin-bottom: 3rem;
1029 }
1030
1031 article .byline p {
1032     font-size: 1.5rem;
1033     line-height: 3rem;
1034     margin-bottom: 0;
1035     color: #8E8E93;
1036 }
1037
1038 article .byline .date {
1039     font-weight: 900;
1040 }
1041
1042 article .byline .author {
1043     white-space: nowrap;
1044
1045 }
1046
1047 article table {
1048     font-size: 1.6rem;
1049     border-collapse: collapse;
1050     border-spacing: 0;
1051     margin: 3rem 0;
1052     width: 100%;
1053 }
1054
1055 article thead, article tfoot {
1056     border-top: 1px solid #bbbbbb;
1057     border-bottom: 1px solid #e0e0e0;
1058 }
1059
1060 article tr {
1061     border-top: 1px solid #e0e0e0;
1062 }
1063
1064 article tr:first-child {
1065     border-top: 0 none;
1066 }
1067
1068 article th {
1069     font-weight: bold;
1070     vertical-align: bottom;
1071     text-align: left;
1072
1073 }
1074 article td, th {
1075     padding: 1.754386%;
1076 }
1077 article th:first-child {
1078     padding-left: 0;
1079 }
1080
1081 article ol,
1082 article ul {
1083     padding-left: 3rem;
1084     margin: 3rem 0;
1085 }
1086
1087 article ol {
1088     list-style-type: decimal;
1089 }
1090
1091 article ul {
1092     list-style-type: square;
1093 }
1094
1095 article ul ul,
1096 article ul ol,
1097 article ol ul,
1098 article ol ol {
1099     margin-top: 0;
1100     margin-bottom: 0;
1101 }
1102
1103 article blockquote {
1104     width: 100vw;
1105     height: auto;
1106     padding: 0 3rem;
1107     left: 50%;
1108     position: relative;
1109     margin-left: -50vw;
1110     box-sizing: border-box;
1111     font-weight: 200;
1112     font-size: 3rem;
1113     line-height: 4.2rem;
1114     text-align: center;
1115     color: #555555;
1116 }
1117 article blockquote > * {
1118     max-width: 1140px;
1119     margin-left: auto;
1120     margin-right: auto;
1121 }
1122
1123 article blockquote:first-child {
1124     width: 100%;
1125     text-align: left;
1126     margin: 0 auto;
1127     left: 0;
1128     padding: 0;
1129 }
1130
1131 .post .bodycopy > p:last-child:after {
1132     content: " \220E"; /* Tombstone */
1133     color: #666666;
1134 }
1135
1136 article div.note {
1137     margin-left: -3rem;
1138     margin-right: -3rem;
1139     padding: 3rem;
1140     background-color: hsl(50, 100%, 94%);
1141     border: 1px solid hsl(40, 100%, 90%);
1142     color: hsl(30, 90%, 35%);
1143     border-radius: 3px;
1144     margin-bottom: 3rem;
1145     box-sizing: normal;
1146 }
1147
1148 article .foreword {
1149     padding: 1.6rem 2.2rem 1.6rem;
1150     line-height: 2.6rem;
1151     background-color: #f0f0f0;
1152     border: 1px solid #e6e6e6;
1153     color: #8E8E93;
1154     border-radius: 3px;
1155     margin-bottom: 3rem;
1156     box-sizing: normal;
1157     font-size: 1.6rem;
1158     font-style: italic;
1159 }
1160
1161 article .two-columns {
1162     columns: 2;
1163     column-gap: 6rem;
1164     margin: 3rem 0;
1165 }
1166
1167 article .two-columns h2,
1168 article .two-columns h3,
1169 article .two-columns h4,
1170 article .two-columns h5,
1171 article .two-columns h6 {
1172     break-after: avoid-column; /* https://bugs.webkit.org/show_bug.cgi?id=148814 */
1173 }
1174
1175 article .two-columns p {
1176     break-inside: avoid-column;
1177 }
1178
1179 /** Post Layout **/
1180
1181 article .byline {
1182     float: left;
1183     width: 191px;
1184     text-align: right;
1185     padding-right: 4rem;
1186     box-sizing: border-box;
1187 }
1188
1189 article .bodycopy {
1190     width: 66%;
1191     margin: 0 auto;
1192     position: relative;
1193 }
1194
1195 article .aligncenter .wp-caption-text {
1196     right: -50%;
1197 }
1198
1199 article .alignleft {
1200     float: left;
1201     margin: 1.5rem 1.5rem 1.5rem 0;
1202 }
1203
1204 article .aligncenter {
1205     clear: both;
1206     display: block;
1207     margin: 0 auto 3rem;
1208 }
1209
1210 article div.aligncenter {
1211     position: relative;
1212     float: right;
1213     right: 50%;
1214 }
1215
1216 article div.aligncenter img {
1217     position: relative;
1218     right: -50%;
1219 }
1220
1221 article .alignright {
1222     float: right;
1223     margin: 1.5rem 0 1.5rem 1.5rem;
1224 }
1225
1226 article .alignnone {
1227     display: block;
1228     float: none;
1229 }
1230
1231 article .alignnone.size-full {
1232     width: 100vw;
1233     height: auto;
1234     left: 50%;
1235     position: relative;
1236     -webkit-transform: translate(-50vw, 0);
1237     transform: translate(-50vw, 0);
1238 }
1239
1240 article .abovetitle {
1241     margin-top: -0.4em;
1242 }
1243
1244 article .pull-left {
1245     float: left;
1246     margin: 1.5rem 1.5rem 1.5rem -25%;
1247 }
1248
1249 article .pull-right {
1250     float: right;
1251     margin: 1.5rem -25% 1.5rem 1.5rem;
1252 }
1253
1254 article .cliptop {
1255     border-top: 1px solid #dddddd;
1256 }
1257
1258 article .clipbottom {
1259     border-bottom: 1px solid #dddddd;
1260 }
1261
1262 article .clipright {
1263     border-right: 1px solid #dddddd;
1264 }
1265
1266 article .clipleft {
1267     border-left: 1px solid #dddddd;
1268 }
1269
1270 article .mattewhite {
1271     background: white;
1272     border-top: 1px solid #e7e7e7;
1273     border-bottom: 1px solid #e7e7e7;
1274     padding-top: 3rem;
1275     padding-bottom: 3rem;
1276 }
1277
1278 article .mattewhite:not(.widescreen) {
1279     border: 1px solid #e7e7e7;
1280     padding: 3rem;
1281     margin-left: -3rem;
1282     margin-right: -3rem;
1283 }
1284
1285 article .mattewhite.tightwad {
1286     padding: 0;
1287 }
1288
1289 /** Article Figures **/
1290
1291 article figure {
1292     margin-bottom: 3rem;
1293     text-align: center;
1294 }
1295 article figure > img {
1296     display: inline-block;
1297     max-width: 100%;
1298     max-height: 540px;
1299     height: auto;
1300     width: auto;
1301 }
1302
1303 figure.widescreen {
1304     position: relative;
1305     width: 100vw;
1306     left: 50%;
1307     transform: translate(-50%);
1308 }
1309
1310 figure.widescreen img,
1311 figure.widescreen figcaption {
1312     display: block;
1313     margin: 0 auto;
1314 }
1315
1316 figure.widescreen figcaption {
1317     margin-top: 3rem;
1318 }
1319
1320 figure.widescreen video {
1321     max-height: 420px;
1322     max-width: 66%;
1323 }
1324
1325 article video.alignleft,
1326 article video.alignright {
1327     max-width: 50%;
1328 }
1329
1330 article .alignleft:first-child,
1331 article .alignright:first-child {
1332     margin-top: 0.5rem;
1333     margin-bottom: 0.5rem;
1334 }
1335
1336 article figcaption {
1337     text-align: left;
1338     margin-top: 1.5rem;
1339     line-height: 1.5;
1340     max-width: 970px;
1341     padding-left: 1.5rem;
1342     box-sizing: border-box;
1343     font-size: 1.3rem;
1344     font-weight: 400;
1345     color: #666666;
1346     position: relative;
1347 }
1348
1349 article figcaption::before {
1350     left: 1.5rem;
1351     width: 15%;
1352     height: 100%;
1353     bottom: 2.5rem;
1354     border-top: 1px solid #cccccc;
1355     content: '';
1356     opacity: 1;
1357     display: inline-block;
1358     box-sizing: border-box;
1359     position: absolute;
1360 }
1361
1362 figure.aligncenter figcaption {
1363     text-align: center;
1364     padding-left: 0;
1365 }
1366
1367 figure.aligncenter figcaption::before {
1368     margin: 0 auto;
1369     width: 20%;
1370     left: 50%;
1371     transform: translate(-50%);
1372 }
1373
1374 article .clipbottom + p + figcaption {
1375     margin-top: 1rem;
1376 }
1377
1378 article .clipbottom + p + figcaption::before {
1379     width: 0;
1380 }
1381
1382 /** Page Layout **/
1383 article.page h1 {
1384     text-align: left;
1385     width: 66%;
1386 }
1387
1388 .page .bodycopy h1 {
1389     width: 100%;
1390 }
1391
1392 /** Load Effects **/
1393
1394 @keyframes fade-in {
1395     from {
1396         opacity: 0;
1397     }
1398
1399     to {
1400         opacity: 1;
1401     }
1402 }
1403
1404 @-webkit-keyframes fade-in {
1405     from {
1406         opacity: 0;
1407     }
1408
1409     to {
1410         opacity: 1;
1411     }
1412 }
1413
1414 @keyframes fade-in-move-down {
1415     from {
1416         opacity: 0;
1417         -webkit-transform: translateY(-3rem);
1418         transform: translateY(-3rem)
1419     }
1420
1421     to {
1422         opacity: 1;
1423         -webkit-transform: translateY(0);
1424         transform: translateY(0)
1425     }
1426 }
1427
1428 @-webkit-keyframes fade-in-move-down {
1429     from {
1430         opacity: 0;
1431         -webkit-transform: translateY(-3rem);
1432         transform: translateY(-3rem)
1433     }
1434
1435     to {
1436         opacity: 1;
1437         -webkit-transform: translateY(0);
1438         transform: translateY(0)
1439     }
1440 }
1441
1442 article,
1443 .feature-status-page {
1444     -webkit-animation: fade-in-move-down 0.7s;
1445     animation: fade-in-move-down 0.7s;
1446 }
1447
1448 .tile {
1449     -webkit-animation: fade-in 0.4s;
1450     animation: fade-in 0.4s;
1451 }
1452
1453 /** Page Table of Contents **/
1454
1455 .table-of-contents {
1456     float: right;
1457     box-sizing: border-box;
1458     padding: 2.5rem 0 0 0;
1459     margin: 0 0 2.5rem 3rem;
1460
1461     max-width: 33%;
1462     z-index: 5;
1463     font-size: 1.4rem;
1464     line-height: 1.20849;
1465     border-top: 1px solid #d6d6d6;
1466
1467 }
1468
1469 article .table-of-contents label {
1470     font-size: 1.7rem;
1471     font-weight: 500;
1472     margin-bottom: 1.65rem;
1473 }
1474
1475 .table-of-contents ul {
1476     margin: 0;
1477     list-style: none;
1478     margin-top: 1.65rem;
1479 }
1480
1481 .table-of-contents .list > ul {
1482     padding-left: 0;
1483 }
1484
1485 .table-of-contents ul li {
1486     margin-bottom: 1.65rem;
1487 }
1488
1489 .table-of-contents ul li:last-child {
1490     margin-bottom: 0;
1491 }
1492
1493 .table-of-contents ul li > ul {
1494     margin-top: 1.65rem;
1495 }
1496
1497 .with-toc pre:nth-child(-n+6),
1498 #post-4132 pre:nth-child(-n+10) {
1499     width: 55%;
1500     z-index: -1;
1501 }
1502
1503 /** Logo **/
1504 .site-logo {
1505     float: left;
1506     font-size: 3rem;
1507     line-height: 1.04167;
1508     letter-spacing: 0.015rem;
1509     font-weight: 500;
1510     text-rendering: optimizeLegibility;
1511     display: inline-block;
1512     background: url('images/webkit.svg') no-repeat;
1513     padding: 1rem 0 1rem 5.5rem;
1514     color: #ffffff;
1515 }
1516
1517 .hero .logo {
1518     background-image: url('images/webkit.svg');
1519 }
1520
1521 /** Status Page **/
1522
1523 .feature-header:after {
1524     display: inline-block;
1525     content: "";
1526     background: url('images/menu-down.svg') no-repeat 50%;
1527     background-size: 2rem;
1528 }
1529
1530 .feature.opened .feature-header:after {
1531     -webkit-transform: rotateX(-180deg);
1532     -moz-transform: rotateX(-180deg);
1533     transform: rotateX(-180deg);
1534     perspective: 600;
1535 }
1536
1537 /** Navigation **/
1538
1539 .label-toggle {
1540     cursor: pointer;
1541 }
1542
1543 header nav {
1544     text-align: right;
1545 }
1546
1547 /* Hide menu toggle checkboxes */
1548 input.menu-toggle {
1549     visibility: hidden;
1550     position: absolute;
1551     top: 0;
1552     left: 0;
1553 }
1554
1555 footer {
1556
1557 }
1558
1559 footer nav {
1560     padding: 1.65rem 0 0;
1561 }
1562
1563 header nav li {
1564     display: inline-block;
1565     padding: 1.5rem 0 1.5rem 3rem;
1566 }
1567
1568 footer nav li {
1569     display: inline-block;
1570     position: relative;
1571     padding: 0 0 1.5rem 3rem;
1572 }
1573
1574 footer nav li:first-child {
1575     padding-left: 0;
1576 }
1577
1578 header nav a,
1579 .sub-menu a,
1580 footer nav a {
1581     position: relative;
1582     display: inline-block;
1583     text-decoration: none;
1584     font-size: 1.4rem;
1585     line-height: 1.5455;
1586     letter-spacing: -0.015rem;
1587     letter-spacing: 0;
1588     cursor: pointer;
1589     font-weight: 500;
1590     color: #333333;
1591 }
1592
1593 header nav a,
1594 footer nav a {
1595     color: #ffffff;
1596 }
1597
1598 header nav a:hover,
1599 footer nav a:hover {
1600     color: #08c;
1601     text-decoration: none;
1602 }
1603
1604 header .menu-item-has-children .label-toggle::after {
1605     background: url('images/menu-down.svg') no-repeat;
1606     background-size: 1.2rem;
1607     display: inline-block;
1608     padding-right: 1.2rem;
1609     padding-top: 0.8rem;
1610     margin-left: 0.5rem;
1611     margin-top: -0.1rem;
1612     content: '';
1613
1614     -webkit-filter: invert(100%);
1615     filter: invert(100%);
1616     perspective: 600;
1617
1618     transition: transform 0.3s ease-out;
1619 }
1620
1621 header .menu-item { /* add bottom dimension to main menu items */
1622     padding-bottom: 2.5rem;
1623 }
1624
1625 .sub-menu-layer {
1626     text-align: center;
1627     padding: 3rem;
1628     box-sizing: border-box;
1629
1630     width: 21rem;
1631     margin-left: -11rem;
1632     margin-top: -99rem;
1633
1634     position: absolute;
1635     top: 7rem;
1636     transform: translateY(-1rem);
1637
1638     background: rgba(255,255,255,0.95);
1639     box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
1640     border: 1px solid #e7e7e7;
1641     border-radius: 5px;
1642
1643     transition: opacity 0.6s;
1644     opacity: 0;
1645 }
1646
1647 .sub-menu-layer:after, .sub-menu-layer:before {
1648     bottom: 100%;
1649     left: 71%;
1650     border: solid transparent;
1651     content: " ";
1652     height: 0;
1653     width: 0;
1654     position: absolute;
1655     pointer-events: none;
1656
1657 }
1658
1659 .sub-menu-layer:after {
1660     border-bottom-color: rgba(255,255,255,0.9);
1661     border-width: 10px;
1662     margin-left: -10px;
1663 }
1664
1665 .sub-menu-layer:before {
1666     border-bottom-color: #e7e7e7;
1667     border-width: 11px;
1668     margin-left: -11px;
1669 }
1670
1671 .sub-menu-layer .menu-item {
1672     padding: 1.5rem 0 0 0;
1673     width: 100%;
1674 }
1675
1676 .sub-menu-layer .menu-item:first-child {
1677     padding: 0;
1678 }
1679
1680 .menu > .menu-item > a:focus ~ .sub-menu,
1681 .menu > .menu-item.open-menu > .sub-menu,
1682 .menu > .menu-item:hover > .sub-menu,
1683 .menu > .menu-item > .menu-toggle:checked + .sub-menu {
1684     display: block;
1685     box-sizing: border-box;
1686     z-index: 1;
1687     opacity: 1;
1688     transform: translateY(0);
1689     margin-top: 0;
1690 }
1691
1692 /** Accessibility **/
1693
1694 @media (prefers-reduced-motion) {
1695     article,
1696     .feature-status-page {
1697         -webkit-animation: fade-in 0.7s;
1698         animation: fade-in 0.7s;
1699     }
1700 }
1701
1702 /** Screen Breakpoints **/
1703
1704 @media only screen and (max-width: 1180px) {
1705     .page-width {
1706         max-width: 1140px;
1707         padding-left: 2rem;
1708         padding-right: 2rem;
1709     }
1710
1711     article .byline {
1712         width: 60%;
1713         margin: 0 auto;
1714         float: none;
1715         text-align: center;
1716         margin-bottom: 3rem;
1717         padding-right: 0;
1718     }
1719
1720     article .byline p {
1721         display: inline;
1722     }
1723 }
1724
1725 @media only screen and (max-width: 1000px) {
1726     article.page h1 {
1727         width: 90%;
1728         margin-bottom: 3rem;
1729     }
1730
1731     article .byline {
1732         width: 60%;
1733         margin: 0 auto;
1734         float: none;
1735         text-align: center;
1736         margin-bottom: 3rem;
1737     }
1738
1739     article .byline p {
1740         display: inline;
1741     }
1742
1743     article .bodycopy {
1744         width: 90%;
1745     }
1746 }
1747
1748 @media only screen and (max-width: 920px) {
1749     .main-menu.label-toggle {
1750         display: inline-block;
1751         margin: 1.5rem 0 2.5rem;
1752         height: 3rem;
1753         width: 3rem;
1754         background: url('images/menu-down.svg') no-repeat 50%;
1755         cursor: pointer;
1756
1757         transition: transform 0.3s ease-out;
1758
1759         -webkit-filter: invert(100%);
1760         filter: invert(100%);
1761         perspective: 600;
1762         transform: translateZ(10rem);
1763     }
1764
1765     .menu-toggle:checked + .main-menu.label-toggle,
1766     header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
1767         -webkit-transform: rotateX(-180deg);
1768         -moz-transform: rotateX(-180deg);
1769         transform: rotateX(-180deg);
1770         perspective: 600;
1771     }
1772
1773     header .menu {
1774         display: none;
1775         position: absolute;
1776         left: 0;
1777         margin-top: 1px;
1778         padding-top: 3rem;
1779         text-align: left;
1780         width: 100vw;
1781         overflow: hidden;
1782         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
1783
1784         backdrop-filter: blur(20px);
1785         -webkit-backdrop-filter: blur(10px);
1786         background-color: rgba(255,255,255,0.8);
1787     }
1788
1789     header nav a {
1790         color: #333333;
1791     }
1792
1793     header .menu-toggle:checked ~ ul {
1794         display: block;
1795         opacity: 1;
1796     }
1797
1798     header .menu-item-has-children .label-toggle::after {
1799         -webkit-filter: invert(0%);
1800         filter: invert(0%);
1801     }
1802
1803     header .menu-main-menu-container >  ul > li {
1804         width: 100vw;
1805         position: relative;
1806         padding: 0 3rem 3rem;
1807         box-sizing: border-box;
1808         transition: opacity 0.6s;
1809     }
1810
1811     header .menu > .menu-item > .sub-menu {
1812         box-shadow: none;
1813         border-bottom: 1px solid #e7e7e7;
1814     }
1815
1816     header .menu > .menu-item-has-children {
1817         margin-left: 0;
1818     }
1819
1820     header .sub-menu-layer {
1821         text-align: left;
1822         width: 100vw;
1823         left: 50%;
1824         margin-left: -50vw;
1825         border-radius: 0;
1826         border-left: none;
1827         border-right: none;
1828         opacity: 0;
1829         transform: translateY(0);
1830         transition: opacity 0.6s;
1831     }
1832
1833     header .sub-menu-layer:after, .sub-menu-layer:before {
1834         bottom: 100%;
1835         left: 71%;
1836         border: solid transparent;
1837         content: " ";
1838         height: 0;
1839         width: 0;
1840         position: absolute;
1841         pointer-events: none;
1842     }
1843
1844     header .sub-menu-layer:after {
1845         border: none;
1846         margin-left: -10px;
1847     }
1848
1849     header .sub-menu-layer:before {
1850         border: none;
1851         margin-left: -11px;
1852     }
1853
1854     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1855         position: relative;
1856         top: 1.5rem;
1857         margin-top: 0;
1858     }
1859
1860     footer nav li {
1861         padding: 0 3rem 3rem 0;
1862     }
1863
1864 }
1865
1866 @media only screen and (max-width: 690px) {
1867     article h1 {
1868         font-size: 3.4rem;
1869     }
1870
1871     .featured-tile {
1872         padding: 0;
1873     }
1874
1875     .tile.spacer {
1876         height: 0;
1877         min-height: 0;
1878         margin-bottom: 0;
1879     }
1880
1881     .page-width {
1882         max-width: 100vw;
1883         padding-left: 1rem;
1884         padding-right: 1rem;
1885         overflow: hidden;
1886         box-sizing: border-box;
1887     }
1888
1889     .tile {
1890         min-height: 375px;
1891     }
1892
1893     .third-tile,
1894     .two-thirds-tile {
1895         width: calc(100% - 1px);
1896     }
1897
1898     .icon-tile .icon {
1899         margin-top: -40%;
1900     }
1901
1902     .with-toc pre:nth-child(-n+8),
1903     article pre {
1904         position: relative;
1905         width: 100vw;
1906         left: 50%;
1907         transform: translate(-50%);
1908         margin-left: 0;
1909         border-radius: 0;
1910         border-left: none;
1911         border-right: none;
1912     }
1913
1914     .table-of-contents { /* hug the edge */
1915         right: 0;
1916     }
1917
1918     .pagination .prev-post,
1919     .pagination .next-post {
1920         min-width: auto;
1921         width: 90%;
1922         text-align: right;
1923     }
1924
1925     .pagination .prev-post {
1926         margin-bottom: 1rem;
1927         text-align: left;
1928     }
1929
1930     .nextrouter-copy {
1931         font-size: 2.2rem;
1932     }
1933
1934     article .scrollable {
1935         overflow: auto;
1936         -webkit-overflow-scrolling: touch;
1937         position: relative;
1938         width: 100vw;
1939         left: 50%;
1940         transform: translate(-50%);
1941         margin: 3rem 0;
1942         border: 1px solid #cccccc;
1943         border-left: none;
1944         border-right: none;
1945     }
1946
1947     article video.alignleft,
1948     article video.alignright {
1949         min-width: 30rem;
1950     }
1951
1952     .scrollable .scrollable-padding {
1953         display: inline-block;
1954         padding: 0 3rem;
1955     }
1956 }
1957
1958 @media only screen and (max-width: 600px) {
1959     header {
1960         padding-top: 1rem;
1961     }
1962
1963     .site-logo {
1964         font-size: 4rem;
1965         padding-left: 6.4rem;
1966     }
1967
1968     header nav .main-menu.label-toggle {
1969         margin-top: 2rem;
1970         margin-bottom: 2rem;
1971     }
1972
1973     #wpadminbar {
1974         position: absolute;
1975     }
1976
1977     .table-of-contents {
1978         height: 9rem;
1979         overflow: hidden;
1980         margin-right: -10%;
1981     }
1982
1983     .menu-toggle:checked ~ .table-of-contents {
1984         height: auto;
1985     }
1986
1987     .table-of-contents label {
1988         display: block;
1989     }
1990
1991     .table-of-contents label:after {
1992         display: inline-block;
1993         content: "";
1994         background: url('images/menu-down.svg') no-repeat 50%;
1995         background-size: 2rem;
1996         width: 2rem;
1997         height: 2rem;
1998         position: absolute;
1999         right: 3rem;
2000         top: 3.5rem;
2001         transition: transform 0.3s ease-out;
2002         perspective: 600;
2003     }
2004
2005     .menu-toggle:checked ~ .table-of-contents label:after {
2006         -webkit-transform: rotateX(-180deg);
2007         -moz-transform: rotateX(-180deg);
2008         transform: rotateX(-180deg);
2009     }
2010
2011     .table-of-contents h6 {
2012         margin-bottom: 3rem;
2013     }
2014
2015     .with-toc pre:nth-child(-n+6),
2016     #post-4132 pre:nth-child(-n+8) {
2017         width: 100vw;
2018     }
2019
2020     article video.alignleft,
2021     article video.alignright {
2022         max-width: 100%;
2023         min-width: none;
2024         width: 100%;
2025     }
2026
2027     article .alignleft:first-child,
2028     article .alignright:first-child {
2029         margin-bottom: 3rem;
2030     }
2031
2032 }
2033
2034 @media only screen and (max-width: 415px) {
2035     .table-of-contents {
2036         /* Go one-column */
2037         width: 100vw;
2038         left: 50%;
2039         position: relative;
2040         transform: translate(-50%);
2041         float: none;
2042         margin: 0 0 3rem 0;
2043     }
2044
2045     .nextrouter-copy {
2046         font-size: 1.7rem;
2047         letter-spacing: -0.016rem;
2048     }
2049 }
2050
2051 @media only screen and (max-height: 415px) {
2052
2053     .home .site-logo {
2054         opacity: 1;
2055         margin-top: 0;
2056     }
2057
2058     header,
2059     .home header {
2060         padding-top: 1rem;
2061     }
2062
2063     @supports(padding:max(0px)) {
2064         header,
2065         header .menu,
2066         .home header,
2067         .home .hero .content,
2068         .feature-filters,
2069         #content,
2070         #nightly,
2071         footer {
2072             box-sizing: border-box;
2073             padding-left: env(safe-area-inset-left);
2074             padding-right: env(safe-area-inset-right);
2075         }
2076
2077         header .menu .menu-item > .sub-menu {
2078             border: none;
2079             background: none;
2080         }
2081
2082         .sub-menu-layer {
2083             padding: 0 3rem;
2084         }
2085
2086         .sub-menu-layer .menu-item:first-child,
2087         .sub-menu-layer .menu-item {
2088             padding: 0 0 1.5rem 1.5rem;
2089         }
2090
2091     }
2092
2093     .tile {
2094         overflow: hidden;
2095     }
2096
2097     .tile .background-image {
2098         padding-bottom: 33%;
2099     }
2100
2101     .tile .background-image svg {
2102         top: -65%;
2103     }
2104
2105
2106     .table-of-contents {
2107         height: 9rem;
2108         overflow: hidden;
2109         margin-right: -10%;
2110     }
2111
2112     .menu-toggle:checked ~ .table-of-contents {
2113         height: auto;
2114     }
2115
2116     .table-of-contents label {
2117         display: block;
2118     }
2119
2120     .table-of-contents label:after {
2121         display: inline-block;
2122         content: "";
2123         background: url('images/menu-down.svg') no-repeat 50%;
2124         background-size: 2rem;
2125         width: 2rem;
2126         height: 2rem;
2127         position: absolute;
2128         right: 3rem;
2129         top: 3.5rem;
2130         transition: transform 0.3s ease-out;
2131         perspective: 600;
2132     }
2133
2134     .menu-toggle:checked ~ .table-of-contents label:after {
2135         -webkit-transform: rotateX(-180deg);
2136         -moz-transform: rotateX(-180deg);
2137         transform: rotateX(-180deg);
2138     }
2139
2140     .table-of-contents h6 {
2141         margin-bottom: 3rem;
2142     }
2143
2144     .with-toc pre:nth-child(-n+6),
2145     #post-4132 pre:nth-child(-n+8) {
2146         width: 100vw;
2147     }
2148 }
2149
2150 #template {
2151     background-image: url('images/template.svg');
2152 }
2153
2154 #compass {
2155     background-image: url('images/compass.svg');
2156 }