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.theme-toggle {
393 flex: 0 0 auto;
394 background: var(--color-bg-secondary);
395 border: 2px solid var(--color-border);
396 border-radius: 50%;
397 padding: 0;
398 cursor: pointer;
399 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
400 display: flex;
401 align-items: center;
402 justify-content: center;
403 width: 44px;
404 height: 44px;
405 color: var(--openssf-purple);
406 font-size: 1.25rem;
407 box-shadow: var(--shadow-sm);
408 position: relative;
409 overflow: hidden;
410
411 &::before {
412 content: '';
413 position: absolute;
414 top: 50%;
415 left: 50%;
416 width: 0;
417 height: 0;
418 border-radius: 50%;
419 background: var(--openssf-purple);
420 opacity: 0.1;
421 transform: translate(-50%, -50%);
422 transition: width 0.4s ease, height 0.4s ease;
423 }
424
425 &:hover {
426 background: var(--color-bg-tertiary);
427 border-color: var(--openssf-purple);
428 color: var(--openssf-purple);
429 transform: translateY(-2px) scale(1.05);
430 box-shadow: var(--shadow-md);
431
432 &::before {
433 width: 100%;
434 height: 100%;
435 }
436 }
437
438 &:active {
439 transform: translateY(0) scale(0.98);
440 box-shadow: var(--shadow-sm);
441 }
442
443 &:focus {
444 outline: 3px solid var(--openssf-green);
445 outline-offset: 3px;
446 }
447
448 &:focus:not(:focus-visible) {
449 outline: none;
450 }
451
452 i {
453 display: block;
454 line-height: 1;
455 position: relative;
456 z-index: 1;
457 transition: transform 0.3s ease, color 0.3s ease;
458 }
459
460 &:hover i {
461 transform: rotate(15deg) scale(1.1);
462 }
463
464 @media screen and (max-width: 768px) {
465 position: absolute;
466 top: var(--spacing-md);
467 right: var(--spacing-md);
468 width: 40px;
469 height: 40px;
470 font-size: 1.1rem;
471 z-index: 10;
472 }
473
474 @media screen and (max-width: 600px) {
475 width: 36px;
476 height: 36px;
477 font-size: 1rem;
478 }
479}
480
481.site-title {
482 font-size: 3rem;
483 font-weight: 400;
484 margin: 0;
485 padding: 0;
486 line-height: 1.2;
487
488 a {
489 color: var(--openssf-purple-dark);
490 text-decoration: none;
491 border-bottom: none !important;
492 transition: color 0.2s ease;
493
494 &:hover {
495 color: var(--openssf-purple);
496 border-bottom: none !important;
497 }
498
499 &:visited {
500 color: var(--openssf-purple-dark);
501 }
502 }
503
504 @media screen and (max-width: 900px) {
505 font-size: 3.00rem;
506 }
507
508 @media screen and (max-width: 600px) {
509 font-size: 1.00rem;
510 }
511}
512
513.site-tagline {
514 font-size: 1.25rem;
515 font-weight: 400;
516 color: var(--color-text-secondary);
517 line-height: 1.4;
518 margin: var(--spacing-xs) 0 0 0;
519
520 @media screen and (max-width: 900px) {
521 font-size: 1.1rem;
522 }
523
524 @media screen and (max-width: 600px) {
525 font-size: 1rem;
526 }
527}
528
529/* ============================================
530 Navigation
531 ============================================ */
532
533.site-nav {
534 padding-top: var(--spacing-md);
535
536 .nav-trigger {
537 display: none;
538 }
539
540 .menu-icon {
541 display: none;
542 }
543
544 .trigger {
545 display: flex;
546 flex-wrap: wrap;
547 gap: var(--spacing-sm);
548 align-items: center;
549 }
550
551 .page-link {
552 color: var(--color-text-primary);
553 font-weight: 500;
554 font-size: 1rem;
555 padding: var(--spacing-xs) var(--spacing-md);
556 border-radius: var(--radius-sm);
557 transition: all 0.2s ease;
558 text-decoration: none;
559 border-bottom: none !important;
560
561 &:hover {
562 background: var(--color-bg-secondary);
563 color: var(--openssf-purple);
564 border-bottom: none !important;
565 }
566
567 &:visited {
568 color: var(--color-text-primary);
569 }
570 }
571
572 @media screen and (max-width: 768px) {
573 position: relative;
574
575 label[for="nav-trigger"] {
576 display: block;
577 float: right;
578 width: 36px;
579 height: 36px;
580 z-index: 2;
581 cursor: pointer;
582 }
583
584 .menu-icon {
585 display: block;
586 float: right;
587 width: 36px;
588 height: 26px;
589 line-height: 0;
590 padding-top: 10px;
591 text-align: center;
592
593 > svg {
594 fill: var(--openssf-purple);
595 }
596 }
597
598 input ~ .trigger {
599 display: none;
600 }
601
602 input:checked ~ .trigger {
603 display: flex;
604 flex-direction: column;
605 align-items: flex-start;
606 padding: var(--spacing-md) 0;
607 width: 100%;
608 }
609
610 .page-link {
611 display: block;
612 width: 100%;
613 padding: var(--spacing-sm) var(--spacing-md);
614 }
615 }
616}
617
618/* ============================================
619 Main Content Area
620 ============================================ */
621
622.main-wrapper {
623 display: flex;
624 gap: var(--spacing-xl);
625 max-width: 1600px;
626 margin: 0 auto;
627 padding: 0 1rem;
628 background-color: var(--color-bg-primary);
629 transition: background-color 0.3s ease;
630
631
632 @media screen and (min-width: 1000px) {
633 padding: 0 2rem;
634 }
635
636 @media screen and (min-width: 1200px) {
637 padding: 0 3rem;
638 }
639
640 @media screen and (max-width: 900px) {
641 flex-direction: column;
642 padding: 0 var(--spacing-md);
643 }
644}
645
646.page-content {
647 padding: var(--spacing-xl) 0;
648 flex: 1;
649 min-width: 0; /* Allows flex item to shrink below content size */
650 background-color: var(--color-bg-primary);
651 transition: background-color 0.3s ease;
652}
653
654/* Constrain the readable text column on sidebar pages only (not the home layout). */
655.main-wrapper .page-content > .wrapper {
656 max-width: none;
657}
658
659.home,
660.page {
661 max-width: 100%;
662}
663
664/* ============================================
665 Sidebar
666 ============================================ */
667
668.site-sidebar {
669 width: 250px;
670 flex-shrink: 0;
671 padding: var(--spacing-xl) 0;
672 position: sticky;
673 top: var(--spacing-lg);
674 align-self: flex-start;
675 max-height: calc(100vh - var(--spacing-xxl));
676 overflow-y: auto;
677
678 @media screen and (max-width: 900px) {
679 width: 100%;
680 position: relative;
681 top: 0;
682 max-height: none;
683 padding: var(--spacing-lg) 0;
684 border-bottom: 2px solid var(--color-border);
685 margin-bottom: var(--spacing-lg);
686 }
687}
688
689.sidebar-content {
690 background: var(--color-bg-secondary);
691 border: 1px solid var(--color-border);
692 border-radius: var(--radius-md);
693 padding: var(--spacing-md);
694 box-shadow: var(--shadow-sm);
695}
696
697.sidebar-title {
698 font-family: "IBMPlexSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
699 font-size: 1.25rem;
700 font-weight: 600;
701 color: var(--openssf-purple-dark);
702 margin: 0 0 var(--spacing-md) 0;
703 padding-bottom: var(--spacing-sm);
704 border-bottom: 2px solid var(--openssf-purple-light);
705}
706
707.sidebar-nav {
708 display: flex;
709 flex-direction: column;
710 gap: var(--spacing-sm);
711}
712
713.sidebar-link {
714 display: block;
715 padding: var(--spacing-sm) var(--spacing-md);
716 color: var(--color-text-primary);
717 text-decoration: none;
718 border-radius: var(--radius-sm);
719 transition: all 0.2s ease;
720 border-bottom: none !important;
721
722 &:hover {
723 background: var(--color-bg-tertiary);
724 color: var(--openssf-purple);
725 border-bottom: none !important;
726 }
727
728 &:visited {
729 color: var(--color-text-primary);
730 }
731
732 &:active {
733 color: var(--openssf-purple) !important;
734 background: var(--color-bg-tertiary) !important;
735 }
736}
737
738.sidebar-details {
739 margin: 0;
740 padding: 0;
741
742 summary {
743 list-style: none;
744 cursor: pointer;
745 user-select: none;
746 display: flex;
747 justify-content: space-between;
748 align-items: center;
749
750 &::-webkit-details-marker {
751 display: none;
752 }
753
754 &::after {
755 content: "â–¶";
756 display: inline-block;
757 margin-left: var(--spacing-xs);
758 transition: transform 0.2s ease;
759 font-size: 0.75em;
760 color: var(--color-text-tertiary);
761 flex-shrink: 0;
762 }
763 }
764
765 &[open] summary::after {
766 transform: rotate(90deg);
767 }
768}
769
770.sidebar-summary {
771 font-weight: 500;
772 display: block;
773 padding: var(--spacing-sm) var(--spacing-md);
774 color: var(--color-text-primary);
775 border-radius: var(--radius-sm);
776 transition: all 0.2s ease;
777 border-bottom: none !important;
778
779 &:hover {
780 background: var(--color-bg-tertiary);
781 color: var(--openssf-purple);
782 border-bottom: none !important;
783 }
784}
785
786.sidebar-summary-link {
787 color: inherit;
788 text-decoration: none;
789 border-bottom: none !important;
790 flex: 1;
791
792 &:hover {
793 color: inherit;
794 border-bottom: none !important;
795 }
796
797 &:visited {
798 color: inherit;
799 }
800}
801
802.sidebar-nested {
803 display: flex;
804 flex-direction: column;
805 gap: var(--spacing-xs);
806 margin-top: var(--spacing-xs);
807 margin-left: var(--spacing-md);
808 padding-left: var(--spacing-md);
809 border-left: 2px solid var(--color-border-light);
810}
811
812.sidebar-nested-link {
813 font-size: 0.9rem;
814 padding: var(--spacing-xs) var(--spacing-sm);
815 color: var(--color-text-secondary);
816
817 &:hover {
818 color: var(--openssf-purple);
819 background: var(--color-bg-tertiary);
820 }
821}
822
823.sidebar-details-nested {
824 margin: 0;
825 padding: 0;
826
827 > .sidebar-summary {
828 font-weight: 600;
829 font-size: 0.9rem;
830 padding: var(--spacing-xs) var(--spacing-sm);
831 color: var(--color-text-primary);
832 }
833
834 > .sidebar-nested {
835 margin-left: var(--spacing-sm);
836 padding-left: var(--spacing-sm);
837 }
838}
839
840/* ============================================
841 Logo and Title (Homepage)
842 ============================================ */
843
844.gemara-logo {
845 float: right;
846 max-width: 120px;
847 height: auto;
848 margin: 0 0 var(--spacing-md) var(--spacing-lg);
849
850 @media screen and (max-width: 600px) {
851 float: none;
852 display: block;
853 margin: var(--spacing-md) auto;
854 max-width: 80px;
855 }
856}
857
858.pronunciation {
859 font-size: 0.5em;
860 font-weight: 400;
861 color: var(--color-text-secondary);
862 font-style: italic;
863}
864
865/* ============================================
866 Gemara Layer Diagram (for model page)
867 ============================================ */
868
869.gemara-layer-diagram {
870 background: transparent;
871 padding: var(--spacing-xl);
872 border-radius: var(--radius-md);
873 max-width: 800px;
874 display: flex;
875 flex-direction: column;
876 gap: var(--spacing-md);
877}
878
879.layer-banner {
880 display: flex;
881 align-items: center;
882 padding: var(--spacing-sm) var(--spacing-xl);
883 color: var(--color-text-primary);
884 font-family: "IBMPlexSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
885 position: relative;
886
887 .layer-number {
888 font-size: 3rem;
889 font-weight: 700;
890 line-height: 1;
891 margin-right: var(--spacing-lg);
892 flex-shrink: 0;
893 }
894
895 .layer-content {
896 flex: 1;
897 text-align: center;
898
899 .layer-title {
900 font-size: 1.5rem;
901 font-weight: 700;
902 margin-bottom: var(--spacing-xs);
903 line-height: 1.2;
904 }
905
906 .layer-description {
907 font-size: 1rem;
908 font-weight: 400;
909 line-height: 1.4;
910 opacity: 0.95;
911 }
912 }
913}
914
915.layer-1 {
916 background: #9b59b6; /* Purple - bottom */
917 border-radius: 0 0 50px 50px;
918}
919
920.layer-2 {
921 background: #6c5ce7; /* Indigo */
922}
923
924.layer-3 {
925 background: #3498db; /* Blue */
926 border-radius: 50px 50px 0 0;
927}
928
929.layer-4 {
930 background: #2ecc71; /* Green */
931 border-radius: 50px;
932}
933
934.layer-5 {
935 background: #f1c40f; /* Yellow */
936 border-radius: 0 0 50px 50px;
937}
938
939.layer-6 {
940 background: #f39c12; /* Orange */
941}
942
943.layer-7 {
944 background: #e74c3c; /* Red - top */
945 border-radius: 50px 50px 0 0;
946}
947
948@media screen and (max-width: 768px) {
949 .gemara-layer-diagram {
950 padding: var(--spacing-md);
951 gap: var(--spacing-sm);
952 }
953
954 .layer-banner {
955 padding: var(--spacing-md) var(--spacing-lg);
956
957 .layer-number {
958 font-size: 2rem;
959 margin-right: var(--spacing-md);
960 }
961
962 .layer-content {
963 .layer-title {
964 font-size: 1.25rem;
965 }
966
967 .layer-description {
968 font-size: 0.9rem;
969 }
970 }
971 }
972
973 .layer-4 {
974 width: 85%;
975 }
976}
977
978/* ============================================
979 Shared Card Base Styles
980 ============================================ */
981
982@mixin card-base {
983 background: linear-gradient(180deg,
984 var(--color-bg-primary) 0%,
985 var(--color-bg-secondary) 100%);
986 border: 2px solid var(--color-border);
987 border-radius: var(--radius-md);
988 padding: var(--spacing-xl);
989 transition: all 0.3s ease;
990 position: relative;
991 display: block;
992 text-decoration: none;
993 color: inherit;
994
995 &:hover {
996 box-shadow: var(--shadow-md);
997 border-color: var(--openssf-purple-light);
998 transform: translateY(-2px);
999 background: linear-gradient(180deg,
1000 var(--color-bg-primary) 0%,
1001 rgba(114, 83, 237, 0.05) 100%);
1002 }
1003
1004 [data-theme="dark"] & {
1005 &:hover {
1006 background: linear-gradient(180deg,
1007 var(--color-bg-primary) 0%,
1008 rgba(167, 139, 250, 0.1) 100%);
1009 }
1010 }
1011
1012 &:visited {
1013 color: inherit;
1014 }
1015
1016 // Remove link styling from nested elements
1017 a {
1018 border-bottom: none !important;
1019 text-decoration: none;
1020 }
1021
1022 // Ensure text colors are preserved
1023 p, h2, h3, h4 {
1024 color: inherit;
1025 }
1026}
1027
1028.component-card,
1029.layer-card {
1030 @include card-base;
1031}
1032
1033/* ============================================
1034 Grid Layouts (shared base)
1035 ============================================ */
1036
1037.layer-grid,
1038.component-grid {
1039 display: grid;
1040 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1041 gap: var(--spacing-xl);
1042 margin: var(--spacing-xxl) 0;
1043
1044 // Apply card styles to direct children
1045 > div.component-card,
1046 > div.layer-card,
1047 > section,
1048 > a.component-card,
1049 > a.layer-card {
1050 @include card-base;
1051 }
1052}
1053
1054/* ============================================
1055 Component Grid Specific Styles
1056 ============================================ */
1057
1058.component-grid {
1059 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1060
1061 h2 {
1062 color: var(--openssf-purple-dark);
1063 margin-top: 0;
1064 margin-bottom: var(--spacing-md);
1065 font-size: 1.75rem;
1066 display: flex;
1067 align-items: center;
1068 justify-content: space-between;
1069 flex-wrap: wrap;
1070 gap: var(--spacing-sm);
1071 border-bottom: none !important;
1072 }
1073}
1074
1075/* ============================================
1076 Layer Grid Specific Styles
1077 ============================================ */
1078
1079.layer-grid {
1080 h3 {
1081 color: var(--openssf-purple);
1082 margin-top: 0;
1083 font-size: 1.25rem;
1084 }
1085
1086 h4 {
1087 color: var(--openssf-purple-dark);
1088 margin-top: var(--spacing-md);
1089 }
1090}
1091
1092.layer-badge {
1093 display: inline-block;
1094 float: right;
1095 padding: var(--spacing-xs) var(--spacing-md);
1096 border-radius: var(--radius-sm);
1097 font-size: 0.7rem;
1098 font-weight: 600;
1099 text-transform: uppercase;
1100 letter-spacing: 0.05em;
1101 background: rgba(114, 83, 237, 0.12);
1102 color: var(--openssf-purple-dark);
1103 border: 1px solid rgba(114, 83, 237, 0.25);
1104 margin-bottom: var(--spacing-xs);
1105}
1106
1107[data-theme="dark"] .layer-badge {
1108 background: rgba(167, 139, 250, 0.15);
1109 color: var(--openssf-purple);
1110 border: 1px solid rgba(167, 139, 250, 0.3);
1111}
1112
1113/* ============================================
1114 Badge Styling (for components)
1115 ============================================ */
1116
1117.badge {
1118 display: inline-block;
1119 padding: var(--spacing-xs) var(--spacing-md);
1120 border-radius: var(--radius-sm);
1121 font-size: 0.75rem;
1122 font-weight: 600;
1123 text-transform: uppercase;
1124 letter-spacing: 0.05em;
1125 line-height: 1.4;
1126 white-space: nowrap;
1127 vertical-align: baseline;
1128}
1129
1130.badge-stable {
1131 background: rgba(4, 238, 95, 0.15);
1132 color: #006b3c;
1133 border: 1px solid rgba(4, 238, 95, 0.3);
1134}
1135
1136[data-theme="dark"] .badge-stable {
1137 background: rgba(52, 211, 153, 0.2);
1138 color: #34d399;
1139 border: 1px solid rgba(52, 211, 153, 0.4);
1140}
1141
1142.badge-evolving {
1143 background: rgba(114, 83, 237, 0.15);
1144 color: var(--openssf-purple-dark);
1145 border: 1px solid rgba(114, 83, 237, 0.3);
1146}
1147
1148[data-theme="dark"] .badge-evolving {
1149 background: rgba(167, 139, 250, 0.2);
1150 color: var(--openssf-purple);
1151 border: 1px solid rgba(167, 139, 250, 0.4);
1152}
1153
1154.badge-active {
1155 background: rgba(69, 32, 140, 0.15);
1156 color: var(--openssf-purple-dark);
1157 border: 1px solid rgba(69, 32, 140, 0.3);
1158}
1159
1160[data-theme="dark"] .badge-active {
1161 background: rgba(139, 92, 246, 0.2);
1162 color: var(--openssf-purple-light);
1163 border: 1px solid rgba(139, 92, 246, 0.4);
1164}
1165
1166.badge-experimental {
1167 background: rgba(243, 156, 18, 0.15);
1168 color: #b45309;
1169 border: 1px solid rgba(243, 156, 18, 0.3);
1170}
1171
1172[data-theme="dark"] .badge-experimental {
1173 background: rgba(251, 191, 36, 0.2);
1174 color: #fbbf24;
1175 border: 1px solid rgba(251, 191, 36, 0.4);
1176}
1177
1178.badge-deprecated {
1179 background: rgba(231, 76, 60, 0.15);
1180 color: #c0392b;
1181 border: 1px solid rgba(231, 76, 60, 0.3);
1182}
1183
1184[data-theme="dark"] .badge-deprecated {
1185 background: rgba(239, 68, 68, 0.2);
1186 color: #ef4444;
1187 border: 1px solid rgba(239, 68, 68, 0.4);
1188}
1189
1190/* ============================================
1191 Component Content Styling
1192 ============================================ */
1193
1194.component-description {
1195 font-size: 1rem;
1196 line-height: 1.6;
1197 color: var(--color-text-primary);
1198 margin-bottom: var(--spacing-md);
1199 font-weight: 500;
1200}
1201
1202.component-content {
1203 font-size: 0.95rem;
1204 line-height: 1.6;
1205 color: var(--color-text-secondary);
1206 margin-bottom: 0;
1207}
1208
1209/* ============================================
1210 Code Blocks
1211 ============================================ */
1212
1213/* Enhance code block styling */
1214pre,
1215code {
1216 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, "Monaco", monospace;
1217}
1218
1219pre {
1220 background: var(--color-bg-tertiary);
1221 border: 1px solid var(--color-border);
1222 border-left: 3px solid var(--openssf-purple);
1223 border-radius: var(--radius-md);
1224 padding: var(--spacing-lg);
1225 overflow-x: auto;
1226 margin: var(--spacing-lg) 0;
1227 box-shadow: var(--shadow-sm);
1228
1229 code {
1230 background: transparent;
1231 padding: 0;
1232 border: none;
1233 color: var(--color-text-primary);
1234 }
1235}
1236
1237/* Inline code */
1238code {
1239 background: rgba(114, 83, 237, 0.1);
1240 color: var(--openssf-purple-dark);
1241 padding: 0.2em 0.4em;
1242 border-radius: var(--radius-sm);
1243 font-size: 0.9em;
1244 border: 1px solid rgba(114, 83, 237, 0.2);
1245}
1246
1247/* Code block with language label */
1248pre[class*="language-"]::before,
1249pre[class*="highlight"]::before {
1250 content: attr(data-lang);
1251 display: block;
1252 text-align: right;
1253 font-size: 0.75rem;
1254 color: var(--color-text-tertiary);
1255 margin-bottom: var(--spacing-sm);
1256 text-transform: uppercase;
1257 letter-spacing: 0.05em;
1258}
1259
1260/* ============================================
1261 Tables - OSPS Baseline Style
1262 ============================================ */
1263
1264table {
1265 border-collapse: separate;
1266 border-spacing: 0;
1267 width: 100%;
1268 margin: var(--spacing-xl) 0;
1269 border: 1px solid var(--color-border);
1270 border-radius: var(--radius-md);
1271 overflow: hidden;
1272 box-shadow: var(--shadow-sm);
1273
1274 th,
1275 td {
1276 padding: var(--spacing-md) var(--spacing-lg);
1277 text-align: left;
1278 border-bottom: 1px solid var(--color-border-light);
1279 }
1280
1281 th {
1282 background: linear-gradient(180deg,
1283 rgba(114, 83, 237, 0.15) 0%,
1284 rgba(114, 83, 237, 0.1) 100%);
1285 color: var(--openssf-purple-dark);
1286 font-weight: 600;
1287 font-size: 0.875rem;
1288 text-transform: uppercase;
1289 letter-spacing: 0.05em;
1290 border-bottom: 2px solid var(--openssf-purple-light);
1291 }
1292
1293 th:last-child {
1294 min-width: 9rem;
1295 white-space: nowrap;
1296 }
1297
1298 td:last-child {
1299 min-width: 9rem;
1300 }
1301
1302 tbody tr {
1303 transition: background-color 0.2s ease;
1304
1305 &:hover {
1306 background: var(--color-bg-secondary);
1307 }
1308
1309 &:last-child td {
1310 border-bottom: none;
1311 }
1312 }
1313
1314 tbody tr:nth-child(even) {
1315 background: rgba(0, 0, 0, 0.02);
1316 }
1317}
1318
1319/* ============================================
1320 Theme-aware Images (light/dark swap)
1321 ============================================ */
1322
1323.theme-image {
1324 margin: var(--spacing-xl) 0;
1325}
1326
1327.theme-image__img {
1328 display: block;
1329 max-width: 100%;
1330 height: auto;
1331 margin: 0 auto;
1332 border-radius: var(--radius-md);
1333 border: 1px solid var(--color-border);
1334 background: var(--color-bg-secondary);
1335 box-shadow: var(--shadow-sm);
1336}
1337
1338.theme-image__img--dark {
1339 display: none;
1340}
1341
1342[data-theme="dark"] .theme-image__img--light {
1343 display: none;
1344}
1345
1346[data-theme="dark"] .theme-image__img--dark {
1347 display: block;
1348}
1349
1350.theme-image__caption {
1351 margin-top: var(--spacing-sm);
1352 color: var(--color-text-secondary);
1353 font-size: 0.95rem;
1354 text-align: center;
1355}
1356
1357/* ============================================
1358 Footer
1359 ============================================ */
1360
1361.site-footer {
1362 border-top: 2px solid var(--openssf-purple);
1363 background: var(--color-bg-secondary);
1364 margin-top: var(--spacing-xxl);
1365 padding: var(--spacing-xxl) 0 var(--spacing-xl);
1366
1367 .wrapper {
1368 color: var(--color-text-secondary);
1369 }
1370
1371 .footer-col-wrapper {
1372 display: flex;
1373 flex-wrap: wrap;
1374 gap: var(--spacing-xl);
1375 margin-bottom: var(--spacing-lg);
1376
1377 @media screen and (max-width: 600px) {
1378 flex-direction: column;
1379 }
1380 }
1381
1382 .footer-col {
1383 flex: 1;
1384 min-width: 200px;
1385 }
1386
1387 .contact-list {
1388 list-style: none;
1389 margin: 0;
1390 padding: 0;
1391
1392 li {
1393 margin-bottom: var(--spacing-sm);
1394 }
1395 }
1396
1397 .social-media-list {
1398 list-style: none;
1399 margin: var(--spacing-lg) 0;
1400 padding: 0;
1401 display: flex;
1402 justify-content: center;
1403 gap: var(--spacing-md);
1404
1405 li {
1406 margin: 0;
1407 }
1408
1409 a {
1410 display: flex;
1411 align-items: center;
1412 justify-content: center;
1413 text-decoration: none;
1414 width: 40px;
1415 height: 40px;
1416
1417 i.fa-brands {
1418 font-size: 24px;
1419 color: var(--openssf-purple);
1420 }
1421
1422 &:hover i.fa-brands {
1423 color: var(--openssf-purple-dark);
1424 }
1425 }
1426 }
1427
1428 .footer-copyright {
1429 text-align: center;
1430 }
1431
1432 a {
1433 color: var(--openssf-purple);
1434
1435 &:hover {
1436 color: var(--openssf-purple-dark);
1437 }
1438 }
1439
1440 p {
1441 color: var(--color-text-secondary);
1442 font-size: 0.9rem;
1443 line-height: 1.6;
1444 }
1445}
1446
1447/* ============================================
1448 Responsive Design
1449 ============================================ */
1450
1451@media screen and (max-width: 900px) {
1452 h1 {
1453 font-size: 2rem;
1454 }
1455
1456 h2 {
1457 font-size: 1.75rem;
1458 }
1459
1460 h3 {
1461 font-size: 1.5rem;
1462 }
1463}
1464
1465@media screen and (max-width: 600px) {
1466 :root {
1467 font-size: 14px;
1468 }
1469
1470 .wrapper {
1471 padding: 0 0.75rem;
1472 }
1473
1474 .main-wrapper {
1475 padding: 0 0.75rem;
1476 }
1477
1478 .layer-grid,
1479 .component-grid {
1480 grid-template-columns: 1fr;
1481 }
1482
1483 .site-title {
1484 font-size: 1.5rem;
1485 }
1486
1487 table {
1488 font-size: 0.875rem;
1489
1490 th, td {
1491 padding: var(--spacing-sm) var(--spacing-md);
1492 }
1493 }
1494}
1495
1496/* ============================================
1497 Print Styles
1498 ============================================ */
1499
1500@media print {
1501 :root {
1502 --color-bg-primary: #ffffff;
1503 --color-bg-secondary: #ffffff;
1504 --color-text-primary: #000000;
1505 }
1506
1507 .site-nav,
1508 .site-footer {
1509 display: none;
1510 }
1511
1512 .site-header {
1513 border-bottom: 2px solid #000000;
1514 box-shadow: none;
1515 }
1516
1517 a {
1518 color: #000000;
1519 text-decoration: underline;
1520 }
1521
1522 a[href^="#"]:after,
1523 a[href^="/"]:after {
1524 content: "";
1525 }
1526
1527 pre {
1528 border: 1px solid #cccccc;
1529 page-break-inside: avoid;
1530 }
1531
1532 h1, h2, h3, h4, h5, h6 {
1533 page-break-after: avoid;
1534 }
1535
1536 table {
1537 page-break-inside: avoid;
1538 }
1539}
1540
1541/* ============================================
1542 Accessibility Enhancements
1543 ============================================ */
1544/* Focus indicators */
1545button:focus,
1546input:focus,
1547textarea:focus,
1548select:focus {
1549 outline: 3px solid var(--openssf-green);
1550 outline-offset: 2px;
1551}
1552
1553/* Reduced motion for users who prefer it */
1554@media (prefers-reduced-motion: reduce) {
1555 *,
1556 *::before,
1557 *::after {
1558 animation-duration: 0.01ms !important;
1559 animation-iteration-count: 1 !important;
1560 transition-duration: 0.01ms !important;
1561 }
1562}
1563
1564/* High contrast mode */
1565@media (prefers-contrast: high) {
1566 :root {
1567 --color-border: #000000;
1568 --color-text-primary: #000000;
1569 --color-text-secondary: #000000;
1570 }
1571}