feat: add printable checklists for SFC certifications

.gitignore

@@ -39,4 +39,7 @@ CLAUDE.md
 # Build folder
 **/dist/
 
+# Generated printable checklists
+docs/public/printable/
+
 .direnv

components/cert/CertList.tsx

@@ -78,6 +78,14 @@ export function CertList({ sections, name }: CertListProps) {
                 >
                     Import
                 </button>
+                <a
+                    href={`/printable/${name}.html`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="cert-action-btn cert-print-btn"
+                >
+                    Print
+                </a>
                 <input
                     ref={fileInputRef}
                     type="file"

components/cert/control.css

@@ -283,6 +283,24 @@
   transform: scale(0.98);
 }
 
+.cert-print-btn {
+  background: transparent;
+  border-color: var(--border-card);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cert-print-btn:hover {
+  background: var(--bg-card);
+  border-color: var(--color-text-primary);
+}
+
+.cert-print-btn:active {
+  transform: scale(0.98);
+}
+
 /* Error Message */
 .cert-error-message {
   padding: 12px 16px;

docs/styles.css

@@ -106,4 +106,139 @@ details .vocs_Paragraph {
 
 .vocs_Outline_item {
     margin-bottom: 0.3rem;
+}
+
+/* Print stylesheet - hide chrome, optimize for paper */
+@media print {
+  /* Force light color scheme */
+  :root {
+    color-scheme: light only !important;
+  }
+  /* Hide navigation and decorative elements */
+  .vocs_Banner,
+  .vocs_DesktopTopNav,
+  .vocs_DesktopTopNav_curtain,
+  .vocs_DesktopSearch_search,
+  .vocs_MobileTopNav,
+  .vocs_Sidebar,
+  .vocs_DocsLayout_gutterLeft,
+  .vocs_DocsLayout_gutterRight,
+  .vocs_DocsLayout_gutterTop,
+  .vocs_DocsLayout_gutterTop_offsetLeftGutter,
+  .vocs_DocsLayout_gutterTopCurtain,
+  .vocs_DocsLayout_gutterTopCurtain_withSidebar,
+  .vocs_Outline,
+  .vocs_AiCtaDropdown,
+  .vocs_Sidebar_backLink,
+  .vocs_Footer,
+  .cert-actions,
+  .tag-filter {
+    display: none !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  /* Full width content */
+  .vocs_DocsLayout_content {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0.3in !important;
+  }
+
+  /* Force light mode backgrounds on everything */
+  html,
+  body,
+  .vocs_DocsLayout,
+  .vocs_DocsLayout_content,
+  main,
+  article,
+  section,
+  div {
+    background: white !important;
+    background-color: white !important;
+  }
+
+  /* Ensure all text is black */
+  *,
+  *::before,
+  *::after {
+    color: black !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  /* Don't break inside these elements */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+  }
+
+  pre, blockquote, table {
+    page-break-inside: avoid;
+  }
+
+  /* === Certification checklist print styles === */
+
+  /* Hide interactive elements in cert pages */
+  .section-progress,
+  .cert-section-toggle,
+  .control-info-btn,
+  .control-expanded-content,
+  .control-inputs-section {
+    display: none !important;
+  }
+
+  /* Force sections to expand */
+  .cert-section-content {
+    grid-template-rows: 1fr !important;
+  }
+
+  .cert-section-content > * {
+    overflow: visible !important;
+  }
+
+  /* Clean control cards for print */
+  .control-card {
+    padding: 6px 0 !important;
+    border: none !important;
+    border-bottom: 1px solid #ddd !important;
+    border-radius: 0 !important;
+    background: white !important;
+    background-color: white !important;
+    break-inside: avoid !important;
+    page-break-inside: avoid !important;
+  }
+
+  /* Control list container */
+  .control-list,
+  .cert-list-container,
+  .cert-section {
+    background: white !important;
+    background-color: white !important;
+  }
+
+  /* Checkbox styling for print */
+  .control-state-btn {
+    border: 1.5px solid #222 !important;
+    border-radius: 2px !important;
+    background: white !important;
+    background-color: white !important;
+    color: transparent !important;
+  }
+
+  /* Section headers */
+  .cert-section-header {
+    background: white !important;
+    background-color: white !important;
+    border-color: #ddd !important;
+  }
+
+  /* Control text colors */
+  .control-title {
+    color: black !important;
+  }
+
+  .control-description {
+    color: #333 !important;
+  }
 }

package.json

@@ -13,13 +13,14 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "docs:dev": "pnpm run generate-tags && pnpm run generate-indexes && pnpm run mermaid-wrapper && vocs dev --host 0.0.0.0 --port 5173",
-    "docs:build": "pnpm run generate-tags && pnpm run generate-indexes && pnpm run mermaid-wrapper && vocs build",
+    "docs:dev": "pnpm run generate-tags && pnpm run generate-indexes && pnpm run mermaid-wrapper && pnpm run generate-printables && vocs dev --host 0.0.0.0 --port 5173",
+    "docs:build": "pnpm run generate-tags && pnpm run generate-indexes && pnpm run mermaid-wrapper && pnpm run generate-printables && vocs build",
     "postdocs:build": "node utils/searchbar-indexing.js",
     "docs:preview": "vocs preview",
     "generate-tags": "node utils/tags-fetcher.js",
     "mermaid-wrapper": "node utils/mermaid-block-wrapper.js",
-    "generate-indexes": "node utils/generate-folder-indexes.js"
+    "generate-indexes": "node utils/generate-folder-indexes.js",
+    "generate-printables": "node utils/generate-printable-checklists.js"
   },
   "keywords": [],
   "author": "",