1---
2---
3
4/* ============================================
5 Gemara Documentation Site Styles
6 https://openssf.org/brand-guidelines/
7 ============================================ */
8
9/* ============================================
10 Base Reset & Box Sizing
11 ============================================ */
12
13* {
14 box-sizing: border-box;
15}
16
17html, body {
18 margin: 0;
19 padding: 0;
20}
21
22.wrapper {
23 max-width: 1600px;
24 margin: 0 auto;
25 padding: 0 1rem;
26}
27
28@media screen and (min-width: 1000px) {
29 .wrapper {
30 padding: 0 2rem;
31 }
32}
33
34@media screen and (min-width: 1200px) {
35 .wrapper {
36 padding: 0 3rem;
37 }
38}
39
40/* ============================================
41 CSS Variables for Theming
42 ============================================ */
43
44:root {
45 /* OpenSSF Brand Colors */
46 --openssf-purple: #45208c;
47 --openssf-purple-dark: #170D34;
48 --openssf-purple-light: #604693;
49 --openssf-purple-lighter: #7253ED;
50 --openssf-green: #04ee5f;
51 --openssf-green-light: #2fff7a;
52
53 /* Neutral Colors */
54 --color-bg-primary: #ffffff;
55 --color-bg-secondary: #f6f8fa;
56 --color-bg-tertiary: #f0f2f5;
57 --color-border: #d0d7de;
58 --color-border-light: #e7ecf0;
59 --color-text-primary: #24292f;
60 --color-text-secondary: #57606a;
61 --color-text-tertiary: #6e7781;
62
63 /* Shadows */
64 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
65 --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
66
67 /* Spacing */
68 --spacing-xs: 0.25rem;
69 --spacing-sm: 0.5rem;
70 --spacing-md: 1rem;
71 --spacing-lg: 1.5rem;
72 --spacing-xl: 2rem;
73 --spacing-xxl: 3rem;
74
75 /* Border Radius */
76 --radius-sm: 4px;
77 --radius-md: 6px;
78 --radius-lg: 8px;
79 --radius-super: 50px;
80}
81
82/* ============================================
83 Dark Mode Theme Variables
84 ============================================ */
85
86[data-theme="dark"] {
87 /* OpenSSF Brand Colors - adjusted for dark mode */
88 --openssf-purple: #a78bfa;
89 --openssf-purple-dark: #c4b5fd;
90 --openssf-purple-light: #8b5cf6;
91 --openssf-purple-lighter: #a78bfa;
92 --openssf-green: #34d399;
93 --openssf-green-light: #6ee7b7;
94
95 /* Neutral Colors - dark mode (warmer, less harsh) */
96 --color-bg-primary: #1a1b23;
97 --color-bg-secondary: #252732;
98 --color-bg-tertiary: #2f3142;
99 --color-border: #3d4054;
100 --color-border-light: #2f3142;
101 --color-text-primary: #e2e8f0;
102 --color-text-secondary: #94a3b8;
103 --color-text-tertiary: #64748b;
104
105 /* Shadows - adjusted for dark mode */
106 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
107 --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
108}
109
110/* ============================================
111 Custom Font Definitions
112 ============================================ */
113
114@font-face {
115 font-family: "Cairo";
116 src: url("{{ '/assets/fonts/Cairo/static/Cairo-Regular.ttf' | relative_url }}") format("truetype");
117 font-weight: 400;
118 font-style: normal;
119 font-display: swap;
120}
121
122@font-face {
123 font-family: "Cairo";
124 src: url("{{ '/assets/fonts/Cairo/static/Cairo-Medium.ttf' | relative_url }}") format("truetype");
125 font-weight: 500;
126 font-style: normal;
127 font-display: swap;
128}
129
130@font-face {
131 font-family: "Cairo";
132 src: url("{{ '/assets/fonts/Cairo/static/Cairo-SemiBold.ttf' | relative_url }}") format("truetype");
133 font-weight: 600;
134 font-style: normal;
135 font-display: swap;
136}
137
138@font-face {
139 font-family: "Cairo";
140 src: url("{{ '/assets/fonts/Cairo/static/Cairo-Bold.ttf' | relative_url }}") format("truetype");
141 font-weight: 700;
142 font-style: normal;
143 font-display: swap;
144}
145
146@font-face {
147 font-family: "IBMPlexSans";
148 src: url("{{ '/assets/fonts/IBMPlexSans/IBMPlexSans-Regular.ttf' | relative_url }}") format("truetype");
149 font-weight: 400;
150 font-style: normal;
151 font-display: swap;
152}
153
154@font-face {
155 font-family: "IBMPlexSans";
156 src: url("{{ '/assets/fonts/IBMPlexSans/IBMPlexSans-Bold.ttf' | relative_url }}") format("truetype");
157 font-weight: 700;
158 font-style: normal;
159 font-display: swap;
160}
161
162@font-face {
163 font-family: "IBMPlexSans";
164 src: url("{{ '/assets/fonts/IBMPlexSans/IBMPlexSans-Medium.ttf' | relative_url }}") format("truetype");
165 font-weight: 500;
166 font-style: normal;
167 font-display: swap;
168}
169
170/* ============================================
171 Typography
172 ============================================ */
173
174body {
175 font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
176 color: var(--color-text-primary);
177 background-color: var(--color-bg-primary);
178 line-height: 1.6;
179 font-size: 16px;
180 transition: background-color 0.3s ease, color 0.3s ease;
181}
182
183h1, h2, h3, h4, h5, h6 {
184 font-family: "IBMPlexSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
185 font-weight: 600;
186 line-height: 1.25;
187 margin-top: var(--spacing-xl);
188 margin-bottom: var(--spacing-md);
189 color: var(--openssf-purple-dark);
190 break-after: avoid-page;
191}
192
193h1 {
194 font-size: 2.5rem;
195 font-weight: 700;
196 margin-bottom: var(--spacing-xl);
197}
198
199h2 {
200 font-size: 2rem;
201 margin-top: var(--spacing-xxl);
202}
203
204h3 {
205 font-size: 1.5rem;
206 color: var(--openssf-purple);
207}
208
209h4 {
210 font-size: 1.25rem;
211}
212
213h5, h6 {
214 font-size: 1rem;
215 color: var(--color-text-secondary);
216}
217
218/* ============================================
219 Text Styling
220 ============================================ */
221
222/* Increase weight so bold/strong are easier to identify. */
223b, strong {
224 font-weight: 700;
225 color: var(--color-text-primary);
226}
227
228/* Emphasis */
229em, i {
230 font-style: italic;
231 color: var(--color-text-secondary);
232}
233
234/* Avoid creating orphans at the bottom of the page when printing. */
235h1, h2, h3, h4, h5, h6 {
236 break-after: avoid-page;
237}
238
239/* Paragraphs */
240p {
241 margin-bottom: var(--spacing-md);
242 color: var(--color-text-primary);
243}
244
245/* Status line styling - make entire status line larger */
246.page-content h1 + p,
247.page-content > p:first-of-type {
248 font-size: 1.25em;
249 line-height: 1.6;
250 margin-bottom: var(--spacing-lg);
251
252 /* Ensure badges in status lines are appropriately sized */
253 .badge {
254 font-size: 0.875rem;
255 vertical-align: middle;
256 margin-left: var(--spacing-sm);
257 }
258}
259
260/* Lists */
261ul, ol {
262 margin-bottom: var(--spacing-md);
263 padding-left: var(--spacing-xl);
264}
265
266li {
267 margin-bottom: var(--spacing-sm);
268}
269
270/* Blockquotes */
271blockquote {
272 border-left: 4px solid var(--openssf-purple-light);
273 padding: var(--spacing-md) var(--spacing-lg);
274 margin: var(--spacing-lg) 0;
275 background: var(--color-bg-secondary);
276 border-radius: var(--radius-sm);
277 color: var(--color-text-secondary);
278 font-style: italic;
279}
280
281blockquote p:last-child {
282 margin-bottom: 0;
283}
284
285/* Horizontal Rules */
286hr {
287 border: none;
288 border-top: 2px solid var(--color-border-light);
289 margin: var(--spacing-xxl) 0;
290}
291
292/* ============================================
293 Links
294 ============================================ */
295
296a {
297 color: var(--openssf-purple);
298 text-decoration: none;
299 transition: color 0.2s ease, border-bottom 0.2s ease;
300 border-bottom: 1px solid transparent;
301}
302
303a:hover {
304 color: var(--openssf-purple-dark);
305 border-bottom: 1px solid var(--openssf-purple-dark);
306}
307
308a:visited {
309 color: var(--openssf-purple-light);
310}
311
312a:active {
313 color: var(--openssf-green);
314}
315
316a:focus {
317 outline: 3px solid var(--openssf-green);
318 outline-offset: 2px;
319}
320
321/* External links indicator */
322a[href^="http"]:not([href*="gemara"]):not([href*="openssf"]):not(.social-media-list a)::after {
323 content: " ↗";
324 font-size: 0.85em;
325 color: var(--color-text-tertiary);
326}
327
328/* ============================================
329 Header Layout
330 ============================================ */
331
332.site-header {
333 border-bottom: 2px solid var(--openssf-purple);
334 background: var(--color-bg-primary);
335 box-shadow: var(--shadow-sm);
336 padding: var(--spacing-lg) 0 var(--spacing-md) 0;
337 transition: background-color 0.3s ease, border-color 0.3s ease;
338}
339
340.header-top {
341 display: flex;
342 justify-content: space-between;
343 align-items: center;
344 margin-bottom: var(--spacing-md);
345 flex-wrap: wrap;
346 gap: var(--spacing-lg);
347 position: relative;
348
349 @media screen and (max-width: 768px) {
350 flex-direction: column;
351 align-items: flex-start;
352 gap: var(--spacing-md);
353 }
354}
355
356.site-logo {
357 flex: 0 0 auto;
358
359 a {
360 display: block;
361 border-bottom: none !important;
362
363 &:hover {
364 opacity: 0.85;
365 border-bottom: none !important;
366 }
367 }
368
369 img {
370 display: block;
371 height: 90px;
372 width: auto;
373 max-width: 100%;
374 }
375
376 @media screen and (max-width: 768px) {
377 img {
378 height: 70px;
379 }
380 }
381}
382
383.site-branding {
384 flex: 1 1 auto;
385 text-align: right;
386
387 @media screen and (max-width: 768px) {
388 text-align: left;
389 }
390}
391
392.header-actions {
393 flex: 0 0 auto;
394 display: flex;
395 align-items: center;
396 gap: var(--spacing-sm);
397
398 @media screen and (max-width: 768px) {
399 position: absolute;
400 top: var(--spacing-md);
401 right: var(--spacing-md);
402 z-index: 10;
403 }
404}
405
406.theme-toggle,
407.site-github {
408 flex: 0 0 auto;
409 background: var(--color-bg-secondary);
410 border: 2px solid var(--color-border);
411 border-radius: 50%;
412 padding: 0;
413 cursor: pointer;
414 text-decoration: none;
415 border-bottom: none !important;
416 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
417 display: flex;
418 align-items: center;
419 justify-content: center;
420 width: 44px;
421 height: 44px;
422 color: var(--openssf-purple);
423 font-size: 1.25rem;
424 box-shadow: var(--shadow-sm);
425 position: relative;
426 overflow: hidden;
427
428 &::before {
429 content: '';
430 position: absolute;
431 top: 50%;
432 left: 50%;
433 width: 0;
434 height: 0;
435 border-radius: 50%;
436 background: var(--openssf-purple);
437 opacity: 0.1;
438 transform: translate(-50%, -50%);
439 transition: width 0.4s ease, height 0.4s ease;
440 }
441
442 &:hover {
443 background: var(--color-bg-tertiary);
444 border-color: var(--openssf-purple);
445 color: var(--openssf-purple);
446 transform: translateY(-2px) scale(1.05);
447 box-shadow: var(--shadow-md);
448
449 &::before {
450 width: 100%;
451 height: 100%;
452 }
453 }
454
455 &:active {
456 transform: translateY(0) scale(0.98);
457 box-shadow: var(--shadow-sm);
458 }
459
460 &:focus {
461 outline: 3px solid var(--openssf-green);
462 outline-offset: 3px;
463 }
464
465 &:focus:not(:focus-visible) {
466 outline: none;
467 }
468
469 i {
470 display: block;
471 line-height: 1;
472 position: relative;
473 z-index: 1;
474 transition: transform 0.3s ease, color 0.3s ease;
475 }
476
477 &:hover i {
478 transform: rotate(15deg) scale(1.1);
479 }
480
481 @media screen and (max-width: 768px) {
482 width: 40px;
483 height: 40px;
484 font-size: 1.1rem;
485 }
486
487 @media screen and (max-width: 600px) {
488 width: 36px;
489 height: 36px;
490 font-size: 1rem;
491 }
492}
493
494.site-title {
495 font-size: 3rem;
496 font-weight: 400;
497 margin: 0;
498 padding: 0;
499 line-height: 1.2;
500
501 a {
502 color: var(--openssf-purple-dark);
503 text-decoration: none;
504 border-bottom: none !important;
505 transition: color 0.2s ease;
506
507 &:hover {
508 color: var(--openssf-purple);
509 border-bottom: none !important;
510 }
511
512 &:visited {
513 color: var(--openssf-purple-dark);
514 }
515 }
516
517 @media screen and (max-width: 900px) {
518 font-size: 3.00rem;
519 }
520
521 @media screen and (max-width: 600px) {
522 font-size: 1.00rem;
523 }
524}
525
526.site-tagline {
527 font-size: 1.25rem;
528 font-weight: 400;
529 color: var(--color-text-secondary);
530 line-height: 1.4;
531 margin: var(--spacing-xs) 0 0 0;
532
533 @media screen and (max-width: 900px) {
534 font-size: 1.1rem;
535 }
536
537 @media screen and (max-width: 600px) {
538 font-size: 1rem;
539 }
540}
541
542/* ============================================
543 Navigation
544 ============================================ */
545
546.site-nav {
547 padding-top: var(--spacing-md);
548
549 .nav-trigger {
550 display: none;
551 }
552
553 .menu-icon {
554 display: none;
555 }
556
557 .trigger {
558 display: flex;
559 flex-wrap: wrap;
560 gap: var(--spacing-sm);
561 align-items: center;
562 }
563
564 .page-link {
565 color: var(--color-text-primary);
566 font-weight: 500;
567 font-size: 1rem;
568 padding: var(--spacing-xs) var(--spacing-md);
569 border-radius: var(--radius-sm);
570 transition: all 0.2s ease;
571 text-decoration: none;
572 border-bottom: none !important;
573
574 &:hover {
575 background: var(--color-bg-secondary);
576 color: var(--openssf-purple);
577 border-bottom: none !important;
578 }
579
580 &:visited {
581 color: var(--color-text-primary);
582 }
583 }
584
585 @media screen and (max-width: 768px) {
586 position: relative;
587
588 label[for="nav-trigger"] {
589 display: block;
590 float: right;
591 width: 36px;
592 height: 36px;
593 z-index: 2;
594 cursor: pointer;
595 }
596
597 .menu-icon {
598 display: block;
599 float: right;
600 width: 36px;
601 height: 26px;
602 line-height: 0;
603 padding-top: 10px;
604 text-align: center;
605
606 > svg {
607 fill: var(--openssf-purple);
608 }
609 }
610
611 input ~ .trigger {
612 display: none;
613 }
614
615 input:checked ~ .trigger {
616 display: flex;
617 flex-direction: column;
618 align-items: flex-start;
619 padding: var(--spacing-md) 0;
620 width: 100%;
621 }
622
623 .page-link {
624 display: block;
625 width: 100%;
626 padding: var(--spacing-sm) var(--spacing-md);
627 }
628 }
629}
630
631/* ============================================
632 Main Content Area
633 ============================================ */
634
635.main-wrapper {
636 display: flex;
637 gap: var(--spacing-xl);
638 max-width: 1600px;
639 margin: 0 auto;
640 padding: 0 1rem;
641 background-color: var(--color-bg-primary);
642 transition: background-color 0.3s ease;
643
644
645 @media screen and (min-width: 1000px) {
646 padding: 0 2rem;
647 }
648
649 @media screen and (min-width: 1200px) {
650 padding: 0 3rem;
651 }
652
653 @media screen and (max-width: 900px) {
654 flex-direction: column;
655 padding: 0 var(--spacing-md);
656 }
657}
658
659.page-content {
660 padding: var(--spacing-xl) 0;
661 flex: 1;
662 min-width: 0; /* Allows flex item to shrink below content size */
663 background-color: var(--color-bg-primary);
664 transition: background-color 0.3s ease;
665}
666
667/* Constrain the readable text column on sidebar pages only (not the home layout). */
668.main-wrapper .page-content > .wrapper {
669 max-width: none;
670}
671
672.home,
673.page {
674 max-width: 100%;
675}
676
677/* ============================================
678 Sidebar
679 ============================================ */
680
681.site-sidebar {
682 width: 250px;
683 flex-shrink: 0;
684 padding: var(--spacing-xl) 0;
685 position: sticky;
686 top: var(--spacing-lg);
687 align-self: flex-start;
688 max-height: calc(100vh - var(--spacing-xxl));
689 overflow-y: auto;
690
691 @media screen and (max-width: 900px) {
692 width: 100%;
693 position: relative;
694 top: 0;
695 max-height: none;
696 padding: var(--spacing-lg) 0;
697 border-bottom: 2px solid var(--color-border);
698 margin-bottom: var(--spacing-lg);
699 }
700}
701
702.sidebar-content {
703 background: var(--color-bg-secondary);
704 border: 1px solid var(--color-border);
705 border-radius: var(--radius-md);
706 padding: var(--spacing-md);
707 box-shadow: var(--shadow-sm);
708}
709
710.sr-only {
711 position: absolute;
712 width: 1px;
713 height: 1px;
714 padding: 0;
715 margin: -1px;
716 overflow: hidden;
717 clip: rect(0, 0, 0, 0);
718 white-space: nowrap;
719 border: 0;
720}
721
722.sidebar-search {
723 position: relative;
724 margin: 0 0 var(--spacing-md) 0;
725}
726
727.sidebar-search-input {
728 width: 100%;
729 padding: var(--spacing-sm) var(--spacing-md);
730 background: var(--color-bg-primary);
731 border: 1px solid var(--color-border);
732 border-radius: var(--radius-md);
733 color: var(--color-text-primary);
734 font-family: inherit;
735 font-size: 0.95rem;
736 transition: border-color 0.2s ease, box-shadow 0.2s ease;
737
738 &:focus {
739 outline: none;
740 border-color: var(--openssf-purple);
741 box-shadow: 0 0 0 3px var(--openssf-purple-light);
742 }
743
744 &::placeholder {
745 color: var(--color-text-tertiary);
746 }
747}
748
749.sidebar-search-results {
750 list-style: none;
751 margin: var(--spacing-xs) 0 0 0;
752 padding: var(--spacing-xs) 0;
753 background: var(--color-bg-primary);
754 border: 1px solid var(--color-border);
755 border-radius: var(--radius-md);
756 box-shadow: var(--shadow-md);
757 max-height: 360px;
758 overflow-y: auto;
759
760 &[hidden] {
761 display: none;
762 }
763
764 li {
765 margin: 0;
766 padding: 0;
767 }
768
769 a {
770 display: block;
771 padding: var(--spacing-xs) var(--spacing-md);
772 color: var(--color-text-primary);
773 text-decoration: none;
774 border-bottom: none;
775
776 &:hover,
777 &:focus {
778 background: var(--color-bg-tertiary);
779 color: var(--openssf-purple);
780 border-bottom: none;
781 }
782 }
783
784 .search-empty {
785 padding: var(--spacing-xs) var(--spacing-md);
786 color: var(--color-text-tertiary);
787 font-style: italic;
788 }
789}
790
791.sidebar-title {
792 font-family: "IBMPlexSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
793 font-size: 1.25rem;
794 font-weight: 600;
795 color: var(--openssf-purple-dark);
796 margin: 0 0 var(--spacing-md) 0;
797 padding-bottom: var(--spacing-sm);
798 border-bottom: 2px solid var(--openssf-purple-light);
799}
800
801.sidebar-nav {
802 display: flex;
803 flex-direction: column;
804 gap: var(--spacing-sm);
805}
806
807.sidebar-link {
808 display: block;
809 padding: var(--spacing-sm) var(--spacing-md);
810 color: var(--color-text-primary);
811 text-decoration: none;
812 border-radius: var(--radius-sm);
813 transition: all 0.2s ease;
814 border-bottom: none !important;
815
816 &:hover {
817 background: var(--color-bg-tertiary);
818 color: var(--openssf-purple);
819 border-bottom: none !important;
820 }
821
822 &:visited {
823 color: var(--color-text-primary);
824 }
825
826 &:active {
827 color: var(--openssf-purple) !important;
828 background: var(--color-bg-tertiary) !important;
829 }
830}
831
832.sidebar-details {
833 margin: 0;
834 padding: 0;
835
836 summary {
837 list-style: none;
838 cursor: pointer;
839 user-select: none;
840 display: flex;
841 justify-content: space-between;
842 align-items: center;
843
844 &::-webkit-details-marker {
845 display: none;
846 }
847
848 &::after {
849 content: "â–¶";
850 display: inline-block;
851 margin-left: var(--spacing-xs);
852 transition: transform 0.2s ease;
853 font-size: 0.75em;
854 color: var(--color-text-tertiary);
855 flex-shrink: 0;
856 }
857 }
858
859 &[open] summary::after {
860 transform: rotate(90deg);
861 }
862}
863
864.sidebar-summary {
865 font-weight: 500;
866 display: block;
867 padding: var(--spacing-sm) var(--spacing-md);
868 color: var(--color-text-primary);
869 border-radius: var(--radius-sm);
870 transition: all 0.2s ease;
871 border-bottom: none !important;
872
873 &:hover {
874 background: var(--color-bg-tertiary);
875 color: var(--openssf-purple);
876 border-bottom: none !important;
877 }
878}
879
880.sidebar-summary-link {
881 color: inherit;
882 text-decoration: none;
883 border-bottom: none !important;
884 flex: 1;
885
886 &:hover {
887 color: inherit;
888 border-bottom: none !important;
889 }
890
891 &:visited {
892 color: inherit;
893 }
894}
895
896.sidebar-nested {
897 display: flex;
898 flex-direction: column;
899 gap: var(--spacing-xs);
900 margin-top: var(--spacing-xs);
901 margin-left: var(--spacing-md);
902 padding-left: var(--spacing-md);
903 border-left: 2px solid var(--color-border-light);
904}
905
906.sidebar-nested-link {
907 font-size: 0.9rem;
908 padding: var(--spacing-xs) var(--spacing-sm);
909 color: var(--color-text-secondary);
910
911 &:hover {
912 color: var(--openssf-purple);
913 background: var(--color-bg-tertiary);
914 }
915}
916
917.sidebar-details-nested {
918 margin: 0;
919 padding: 0;
920
921 > .sidebar-summary {
922 font-weight: 600;
923 font-size: 0.9rem;
924 padding: var(--spacing-xs) var(--spacing-sm);
925 color: var(--color-text-primary);
926 }
927
928 > .sidebar-nested {
929 margin-left: var(--spacing-sm);
930 padding-left: var(--spacing-sm);
931 }
932}
933
934/* ============================================
935 Logo and Title (Homepage)
936 ============================================ */
937
938.gemara-logo {
939 float: right;
940 max-width: 120px;
941 height: auto;
942 margin: 0 0 var(--spacing-md) var(--spacing-lg);
943
944 @media screen and (max-width: 600px) {
945 float: none;
946 display: block;
947 margin: var(--spacing-md) auto;
948 max-width: 80px;
949 }
950}
951
952.pronunciation {
953 font-size: 0.5em;
954 font-weight: 400;
955 color: var(--color-text-secondary);
956 font-style: italic;
957}
958
959/* ============================================
960 Gemara Layer Diagram (for model page)
961 ============================================ */
962
963.gemara-layer-diagram {
964 background: transparent;
965 padding: var(--spacing-xl);
966 border-radius: var(--radius-md);
967 max-width: 800px;
968 display: flex;
969 flex-direction: column;
970 gap: var(--spacing-md);
971}
972
973.layer-banner {
974 display: flex;
975 align-items: center;
976 padding: var(--spacing-sm) var(--spacing-xl);
977 color: var(--color-text-primary);
978 font-family: "IBMPlexSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
979 position: relative;
980
981 .layer-number {
982 font-size: 3rem;
983 font-weight: 700;
984 line-height: 1;
985 margin-right: var(--spacing-lg);
986 flex-shrink: 0;
987 }
988
989 .layer-content {
990 flex: 1;
991 text-align: center;
992
993 .layer-title {
994 font-size: 1.5rem;
995 font-weight: 700;
996 margin-bottom: var(--spacing-xs);
997 line-height: 1.2;
998 }
999
1000 .layer-description {
1001 font-size: 1rem;
1002 font-weight: 400;
1003 line-height: 1.4;
1004 opacity: 0.95;
1005 }
1006 }
1007}
1008
1009.layer-1 {
1010 background: #9b59b6; /* Purple - bottom */
1011 border-radius: 0 0 50px 50px;
1012}
1013
1014.layer-2 {
1015 background: #6c5ce7; /* Indigo */
1016}
1017
1018.layer-3 {
1019 background: #3498db; /* Blue */
1020 border-radius: 50px 50px 0 0;
1021}
1022
1023.layer-4 {
1024 background: #2ecc71; /* Green */
1025 border-radius: 50px;
1026}
1027
1028.layer-5 {
1029 background: #f1c40f; /* Yellow */
1030 border-radius: 0 0 50px 50px;
1031}
1032
1033.layer-6 {
1034 background: #f39c12; /* Orange */
1035}
1036
1037.layer-7 {
1038 background: #e74c3c; /* Red - top */
1039 border-radius: 50px 50px 0 0;
1040}
1041
1042@media screen and (max-width: 768px) {
1043 .gemara-layer-diagram {
1044 padding: var(--spacing-md);
1045 gap: var(--spacing-sm);
1046 }
1047
1048 .layer-banner {
1049 padding: var(--spacing-md) var(--spacing-lg);
1050
1051 .layer-number {
1052 font-size: 2rem;
1053 margin-right: var(--spacing-md);
1054 }
1055
1056 .layer-content {
1057 .layer-title {
1058 font-size: 1.25rem;
1059 }
1060
1061 .layer-description {
1062 font-size: 0.9rem;
1063 }
1064 }
1065 }
1066
1067 .layer-4 {
1068 width: 85%;
1069 }
1070}
1071
1072/* ============================================
1073 Shared Card Base Styles
1074 ============================================ */
1075
1076@mixin card-base {
1077 background: linear-gradient(180deg,
1078 var(--color-bg-primary) 0%,
1079 var(--color-bg-secondary) 100%);
1080 border: 2px solid var(--color-border);
1081 border-radius: var(--radius-md);
1082 padding: var(--spacing-xl);
1083 transition: all 0.3s ease;
1084 position: relative;
1085 display: block;
1086 text-decoration: none;
1087 color: inherit;
1088
1089 &:hover {
1090 box-shadow: var(--shadow-md);
1091 border-color: var(--openssf-purple-light);
1092 transform: translateY(-2px);
1093 background: linear-gradient(180deg,
1094 var(--color-bg-primary) 0%,
1095 rgba(114, 83, 237, 0.05) 100%);
1096 }
1097
1098 [data-theme="dark"] & {
1099 &:hover {
1100 background: linear-gradient(180deg,
1101 var(--color-bg-primary) 0%,
1102 rgba(167, 139, 250, 0.1) 100%);
1103 }
1104 }
1105
1106 &:visited {
1107 color: inherit;
1108 }
1109
1110 // Remove link styling from nested elements
1111 a {
1112 border-bottom: none !important;
1113 text-decoration: none;
1114 }
1115
1116 // Ensure text colors are preserved
1117 p, h2, h3, h4 {
1118 color: inherit;
1119 }
1120}
1121
1122.component-card,
1123.layer-card {
1124 @include card-base;
1125}
1126
1127/* ============================================
1128 Grid Layouts (shared base)
1129 ============================================ */
1130
1131.layer-grid,
1132.component-grid {
1133 display: grid;
1134 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1135 gap: var(--spacing-xl);
1136 margin: var(--spacing-xxl) 0;
1137
1138 // Apply card styles to direct children
1139 > div.component-card,
1140 > div.layer-card,
1141 > section,
1142 > a.component-card,
1143 > a.layer-card {
1144 @include card-base;
1145 }
1146}
1147
1148/* ============================================
1149 Component Grid Specific Styles
1150 ============================================ */
1151
1152.component-grid {
1153 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1154
1155 h2 {
1156 color: var(--openssf-purple-dark);
1157 margin-top: 0;
1158 margin-bottom: var(--spacing-md);
1159 font-size: 1.75rem;
1160 display: flex;
1161 align-items: center;
1162 justify-content: space-between;
1163 flex-wrap: wrap;
1164 gap: var(--spacing-sm);
1165 border-bottom: none !important;
1166 }
1167}
1168
1169/* ============================================
1170 Layer Grid Specific Styles
1171 ============================================ */
1172
1173.layer-grid {
1174 h3 {
1175 color: var(--openssf-purple);
1176 margin-top: 0;
1177 font-size: 1.25rem;
1178 }
1179
1180 h4 {
1181 color: var(--openssf-purple-dark);
1182 margin-top: var(--spacing-md);
1183 }
1184}
1185
1186.layer-badge {
1187 display: inline-block;
1188 float: right;
1189 padding: var(--spacing-xs) var(--spacing-md);
1190 border-radius: var(--radius-sm);
1191 font-size: 0.7rem;
1192 font-weight: 600;
1193 text-transform: uppercase;
1194 letter-spacing: 0.05em;
1195 background: rgba(114, 83, 237, 0.12);
1196 color: var(--openssf-purple-dark);
1197 border: 1px solid rgba(114, 83, 237, 0.25);
1198 margin-bottom: var(--spacing-xs);
1199}
1200
1201[data-theme="dark"] .layer-badge {
1202 background: rgba(167, 139, 250, 0.15);
1203 color: var(--openssf-purple);
1204 border: 1px solid rgba(167, 139, 250, 0.3);
1205}
1206
1207/* ============================================
1208 Badge Styling (for components)
1209 ============================================ */
1210
1211.badge {
1212 display: inline-block;
1213 padding: var(--spacing-xs) var(--spacing-md);
1214 border-radius: var(--radius-sm);
1215 font-size: 0.75rem;
1216 font-weight: 600;
1217 text-transform: uppercase;
1218 letter-spacing: 0.05em;
1219 line-height: 1.4;
1220 white-space: nowrap;
1221 vertical-align: baseline;
1222}
1223
1224.badge-stable {
1225 background: rgba(4, 238, 95, 0.15);
1226 color: #006b3c;
1227 border: 1px solid rgba(4, 238, 95, 0.3);
1228}
1229
1230[data-theme="dark"] .badge-stable {
1231 background: rgba(52, 211, 153, 0.2);
1232 color: #34d399;
1233 border: 1px solid rgba(52, 211, 153, 0.4);
1234}
1235
1236.badge-evolving {
1237 background: rgba(114, 83, 237, 0.15);
1238 color: var(--openssf-purple-dark);
1239 border: 1px solid rgba(114, 83, 237, 0.3);
1240}
1241
1242[data-theme="dark"] .badge-evolving {
1243 background: rgba(167, 139, 250, 0.2);
1244 color: var(--openssf-purple);
1245 border: 1px solid rgba(167, 139, 250, 0.4);
1246}
1247
1248.badge-active {
1249 background: rgba(69, 32, 140, 0.15);
1250 color: var(--openssf-purple-dark);
1251 border: 1px solid rgba(69, 32, 140, 0.3);
1252}
1253
1254[data-theme="dark"] .badge-active {
1255 background: rgba(139, 92, 246, 0.2);
1256 color: var(--openssf-purple-light);
1257 border: 1px solid rgba(139, 92, 246, 0.4);
1258}
1259
1260.badge-experimental {
1261 background: rgba(243, 156, 18, 0.15);
1262 color: #b45309;
1263 border: 1px solid rgba(243, 156, 18, 0.3);
1264}
1265
1266[data-theme="dark"] .badge-experimental {
1267 background: rgba(251, 191, 36, 0.2);
1268 color: #fbbf24;
1269 border: 1px solid rgba(251, 191, 36, 0.4);
1270}
1271
1272.badge-deprecated {
1273 background: rgba(231, 76, 60, 0.15);
1274 color: #c0392b;
1275 border: 1px solid rgba(231, 76, 60, 0.3);
1276}
1277
1278[data-theme="dark"] .badge-deprecated {
1279 background: rgba(239, 68, 68, 0.2);
1280 color: #ef4444;
1281 border: 1px solid rgba(239, 68, 68, 0.4);
1282}
1283
1284/* ============================================
1285 Component Content Styling
1286 ============================================ */
1287
1288.component-description {
1289 font-size: 1rem;
1290 line-height: 1.6;
1291 color: var(--color-text-primary);
1292 margin-bottom: var(--spacing-md);
1293 font-weight: 500;
1294}
1295
1296.component-content {
1297 font-size: 0.95rem;
1298 line-height: 1.6;
1299 color: var(--color-text-secondary);
1300 margin-bottom: 0;
1301}
1302
1303/* ============================================
1304 Code Blocks
1305 ============================================ */
1306
1307/* Enhance code block styling */
1308pre,
1309code {
1310 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Monaco", monospace;
1311}
1312
1313pre {
1314 background: var(--color-bg-tertiary);
1315 border: 1px solid var(--color-border);
1316 border-left: 3px solid var(--openssf-purple);
1317 border-radius: var(--radius-md);
1318 padding: var(--spacing-lg);
1319 overflow-x: auto;
1320 margin: var(--spacing-lg) 0;
1321 box-shadow: var(--shadow-sm);
1322
1323 code {
1324 background: transparent;
1325 padding: 0;
1326 border: none;
1327 color: var(--color-text-primary);
1328 }
1329}
1330
1331/* Inline code */
1332code {
1333 background: rgba(114, 83, 237, 0.1);
1334 color: var(--openssf-purple-dark);
1335 padding: 0.2em 0.4em;
1336 border-radius: var(--radius-sm);
1337 font-size: 0.9em;
1338 border: 1px solid rgba(114, 83, 237, 0.2);
1339}
1340
1341/* Code block with language label */
1342pre[class*="language-"]::before,
1343pre[class*="highlight"]::before {
1344 content: attr(data-lang);
1345 display: block;
1346 text-align: right;
1347 font-size: 0.75rem;
1348 color: var(--color-text-tertiary);
1349 margin-bottom: var(--spacing-sm);
1350 text-transform: uppercase;
1351 letter-spacing: 0.05em;
1352}
1353
1354/* ============================================
1355 Tables - OSPS Baseline Style
1356 ============================================ */
1357
1358table {
1359 border-collapse: separate;
1360 border-spacing: 0;
1361 width: 100%;
1362 margin: var(--spacing-xl) 0;
1363 border: 1px solid var(--color-border);
1364 border-radius: var(--radius-md);
1365 overflow: hidden;
1366 box-shadow: var(--shadow-sm);
1367
1368 th,
1369 td {
1370 padding: var(--spacing-md) var(--spacing-lg);
1371 text-align: left;
1372 border-bottom: 1px solid var(--color-border-light);
1373 }
1374
1375 th {
1376 background: linear-gradient(180deg,
1377 rgba(114, 83, 237, 0.15) 0%,
1378 rgba(114, 83, 237, 0.1) 100%);
1379 color: var(--openssf-purple-dark);
1380 font-weight: 600;
1381 font-size: 0.875rem;
1382 text-transform: uppercase;
1383 letter-spacing: 0.05em;
1384 border-bottom: 2px solid var(--openssf-purple-light);
1385 }
1386
1387 th:last-child {
1388 min-width: 9rem;
1389 white-space: nowrap;
1390 }
1391
1392 td:last-child {
1393 min-width: 9rem;
1394 }
1395
1396 tbody tr {
1397 transition: background-color 0.2s ease;
1398
1399 &:hover {
1400 background: var(--color-bg-secondary);
1401 }
1402
1403 &:last-child td {
1404 border-bottom: none;
1405 }
1406 }
1407
1408 tbody tr:nth-child(even) {
1409 background: rgba(0, 0, 0, 0.02);
1410 }
1411}
1412
1413/* ============================================
1414 Theme-aware Images (light/dark swap)
1415 ============================================ */
1416
1417.theme-image {
1418 margin: var(--spacing-xl) 0;
1419}
1420
1421.theme-image__img {
1422 display: block;
1423 max-width: 100%;
1424 height: auto;
1425 margin: 0 auto;
1426 border-radius: var(--radius-md);
1427 border: 1px solid var(--color-border);
1428 background: var(--color-bg-secondary);
1429 box-shadow: var(--shadow-sm);
1430}
1431
1432.theme-image__img--dark {
1433 display: none;
1434}
1435
1436[data-theme="dark"] .theme-image__img--light {
1437 display: none;
1438}
1439
1440[data-theme="dark"] .theme-image__img--dark {
1441 display: block;
1442}
1443
1444.theme-image__caption {
1445 margin-top: var(--spacing-sm);
1446 color: var(--color-text-secondary);
1447 font-size: 0.95rem;
1448 text-align: center;
1449}
1450
1451/* ============================================
1452 Footer
1453 ============================================ */
1454
1455.site-footer {
1456 border-top: 2px solid var(--openssf-purple);
1457 background: var(--color-bg-secondary);
1458 margin-top: var(--spacing-xxl);
1459 padding: var(--spacing-xxl) 0 var(--spacing-xl);
1460
1461 .wrapper {
1462 color: var(--color-text-secondary);
1463 }
1464
1465 .footer-col-wrapper {
1466 display: flex;
1467 flex-wrap: wrap;
1468 gap: var(--spacing-xl);
1469 margin-bottom: var(--spacing-lg);
1470
1471 @media screen and (max-width: 600px) {
1472 flex-direction: column;
1473 }
1474 }
1475
1476 .footer-col {
1477 flex: 1;
1478 min-width: 200px;
1479 }
1480
1481 .contact-list {
1482 list-style: none;
1483 margin: 0;
1484 padding: 0;
1485
1486 li {
1487 margin-bottom: var(--spacing-sm);
1488 }
1489 }
1490
1491 .social-media-list {
1492 list-style: none;
1493 margin: var(--spacing-lg) 0;
1494 padding: 0;
1495 display: flex;
1496 justify-content: center;
1497 gap: var(--spacing-md);
1498
1499 li {
1500 margin: 0;
1501 }
1502
1503 a {
1504 display: flex;
1505 align-items: center;
1506 justify-content: center;
1507 text-decoration: none;
1508 width: 40px;
1509 height: 40px;
1510
1511 i.fa-brands {
1512 font-size: 24px;
1513 color: var(--openssf-purple);
1514 }
1515
1516 &:hover i.fa-brands {
1517 color: var(--openssf-purple-dark);
1518 }
1519 }
1520 }
1521
1522 .footer-copyright {
1523 text-align: center;
1524 }
1525
1526 a {
1527 color: var(--openssf-purple);
1528
1529 &:hover {
1530 color: var(--openssf-purple-dark);
1531 }
1532 }
1533
1534 p {
1535 color: var(--color-text-secondary);
1536 font-size: 0.9rem;
1537 line-height: 1.6;
1538 }
1539}
1540
1541/* ============================================
1542 Responsive Design
1543 ============================================ */
1544
1545@media screen and (max-width: 900px) {
1546 h1 {
1547 font-size: 2rem;
1548 }
1549
1550 h2 {
1551 font-size: 1.75rem;
1552 }
1553
1554 h3 {
1555 font-size: 1.5rem;
1556 }
1557}
1558
1559@media screen and (max-width: 600px) {
1560 :root {
1561 font-size: 14px;
1562 }
1563
1564 .wrapper {
1565 padding: 0 0.75rem;
1566 }
1567
1568 .main-wrapper {
1569 padding: 0 0.75rem;
1570 }
1571
1572 .layer-grid,
1573 .component-grid {
1574 grid-template-columns: 1fr;
1575 }
1576
1577 .site-title {
1578 font-size: 1.5rem;
1579 }
1580
1581 table {
1582 font-size: 0.875rem;
1583
1584 th, td {
1585 padding: var(--spacing-sm) var(--spacing-md);
1586 }
1587 }
1588}
1589
1590/* ============================================
1591 Print Styles
1592 ============================================ */
1593
1594@media print {
1595 :root {
1596 --color-bg-primary: #ffffff;
1597 --color-bg-secondary: #ffffff;
1598 --color-text-primary: #000000;
1599 }
1600
1601 .site-nav,
1602 .site-footer {
1603 display: none;
1604 }
1605
1606 .site-header {
1607 border-bottom: 2px solid #000000;
1608 box-shadow: none;
1609 }
1610
1611 a {
1612 color: #000000;
1613 text-decoration: underline;
1614 }
1615
1616 a[href^="#"]:after,
1617 a[href^="/"]:after {
1618 content: "";
1619 }
1620
1621 pre {
1622 border: 1px solid #cccccc;
1623 page-break-inside: avoid;
1624 }
1625
1626 h1, h2, h3, h4, h5, h6 {
1627 page-break-after: avoid;
1628 }
1629
1630 table {
1631 page-break-inside: avoid;
1632 }
1633}
1634
1635/* ============================================
1636 Accessibility Enhancements
1637 ============================================ */
1638/* Focus indicators */
1639button:focus,
1640input:focus,
1641textarea:focus,
1642select:focus {
1643 outline: 3px solid var(--openssf-green);
1644 outline-offset: 2px;
1645}
1646
1647/* Reduced motion for users who prefer it */
1648@media (prefers-reduced-motion: reduce) {
1649 *,
1650 *::before,
1651 *::after {
1652 animation-duration: 0.01ms !important;
1653 animation-iteration-count: 1 !important;
1654 transition-duration: 0.01ms !important;
1655 }
1656}
1657
1658/* High contrast mode */
1659@media (prefers-contrast: high) {
1660 :root {
1661 --color-border: #000000;
1662 --color-text-primary: #000000;
1663 --color-text-secondary: #000000;
1664 }
1665}