@x12i/connectix-docs 0.1.0

package/dist/web/assets/book.css

@@ -0,0 +1,783 @@
+/* =========================================================
+   x12i-ebooks — Case File book stylesheet
+   Screen: comfortable web reading column
+   Print: mm-based PDF/wkhtmltopdf rules (no @font-face)
+   ========================================================= */
+
+/* NOTE: DejaVu Serif / DejaVu Sans Condensed / DejaVu Sans Mono are already
+   installed system fonts, resolved by family name below. Declaring them again
+   via @font-face + local file:// URLs strips the ToUnicode CMap in this
+   wkhtmltopdf build, making the resulting PDF text unselectable/unextractable
+   — so we deliberately do NOT do that for print. Screen may use web fonts. */
+
+:root{
+  --ink:        #202b3c;
+  --navy:       #16324f;
+  --navy-deep:  #0f2438;
+  --paper:      #fcfaf4;
+  --tan:        #dec48c;
+  --tan-deep:   #c9a866;
+  --tan-light:  #f3e9d2;
+  --rust:       #b14a2c;
+  --rust-light: #f1ded5;
+  --teal:       #1f6e5c;
+  --teal-light: #dcece6;
+  --navy-tag:   #2b4570;
+  --navy-tag-light:#dde5f0;
+  --gold:       #a5710f;
+  --gold-light: #f3e6c8;
+  --rule:       #cabb92;
+  --code-bg:    #f2eee0;
+  --code-border:#ddd0a8;
+  --muted:      #5a6478;
+}
+
+*{ box-sizing: border-box; }
+
+html, body{
+  padding:0; margin:0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: 'DejaVu Serif', 'Liberation Serif', Georgia, serif;
+  font-size: 11.3pt;
+  line-height: 1.55;
+}
+
+body.book-document{
+  min-height: 100%;
+}
+
+/* ---------- Headings ---------- */
+
+h1, h2, h3, h4{
+  font-family: 'DejaVu Sans Condensed', 'DejaVu Sans', 'Segoe UI', sans-serif;
+  color: var(--navy-deep);
+  font-weight: bold;
+  letter-spacing: 0.02em;
+  page-break-after: avoid;
+}
+
+h1.chapter-title{
+  font-size: 27pt;
+  letter-spacing: 0.02em;
+  color: var(--navy-deep);
+  margin: 0 0 2mm 0;
+  padding: 0;
+  text-transform: none;
+  line-height: 1.15;
+}
+
+.book-shell{
+  width: 100%;
+}
+
+.chapter{
+  page-break-before: always;
+  padding-top: 2mm;
+}
+.chapter:first-of-type{ page-break-before: avoid; }
+
+.chapter-tab{
+  display:block;
+  background: var(--tab-color, var(--navy));
+  color: #fff;
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
+  font-size: 9pt;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 2.2mm 5mm;
+  width: fit-content;
+  border-radius: 1px 8px 1px 8px;
+  margin-bottom: 4mm;
+}
+
+.chapter-kicker{
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
+  font-size: 8.6pt;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tan-deep);
+  margin: 0 0 1mm 0;
+}
+
+.chapter-header{
+  margin-bottom: 6mm;
+  padding-bottom: 3mm;
+  border-bottom: 1px solid var(--rule);
+}
+
+.chapter-dek{
+  font-family: 'DejaVu Serif', Georgia, serif;
+  font-style: italic;
+  font-size: 12pt;
+  color: var(--muted);
+  border-top: 1px solid var(--rule);
+  padding-top: 3mm;
+  margin: 3mm 0 7mm 0;
+}
+
+.chapter-body > *:first-child{ margin-top: 0; }
+
+h2{
+  font-size: 15.5pt;
+  margin: 9mm 0 3mm 0;
+  padding-bottom: 1.5mm;
+  border-bottom: 2px solid var(--tan);
+}
+
+h3{
+  font-size: 12.3pt;
+  color: var(--navy);
+  margin: 6mm 0 2.5mm 0;
+  text-transform: none;
+  letter-spacing: 0.01em;
+}
+
+h3.-tag::before{
+  content: "▸ ";
+  color: var(--rust);
+}
+
+h4{
+  font-size: 10.6pt;
+  color: var(--navy);
+  margin: 4mm 0 1.5mm 0;
+  font-style: italic;
+  text-transform: none;
+}
+
+.subhead{
+  font-family: 'DejaVu Sans Condensed', 'DejaVu Sans', sans-serif;
+  font-weight: bold;
+  color: var(--navy);
+  font-size: 12.3pt;
+  letter-spacing: 0.01em;
+  margin: 6mm 0 2.5mm 0;
+  page-break-after: avoid;
+}
+.subhead.-tag::before{ content: "▸ "; color: var(--rust); }
+.subhead4{
+  font-family: 'DejaVu Sans Condensed', 'DejaVu Sans', sans-serif;
+  font-weight: bold;
+  font-size: 10.6pt;
+  color: var(--navy);
+  margin: 4mm 0 1.5mm 0;
+  font-style: italic;
+  page-break-after: avoid;
+}
+
+p{ margin: 0 0 3mm 0; text-align: left; orphans:3; widows:3; }
+strong{ color: var(--navy-deep); }
+em.term{ font-style: italic; color: var(--navy); }
+
+ul, ol{ margin: 0 0 3.5mm 0; padding-left: 5.5mm; }
+li{ margin-bottom: 1.3mm; }
+li > p{ margin: 0; }
+ul ul, ol ol, ul ol, ol ul{ margin-top: 1.5mm; margin-bottom: 1.5mm; }
+
+a{ color: var(--navy-tag); }
+
+hr, hr.divider{
+  border: none;
+  border-top: 1px dashed var(--rule);
+  margin: 6mm 0;
+}
+
+blockquote{
+  margin: 4mm 0;
+  padding: 3mm 4mm;
+  border-left: 3px solid var(--tan-deep);
+  background: var(--tan-light);
+  border-radius: 0 3px 3px 0;
+  color: var(--ink);
+}
+blockquote p:last-child{ margin-bottom: 0; }
+
+img{
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 4mm 0;
+  border: 1px solid var(--rule);
+  border-radius: 2px;
+}
+
+figcaption, .caption{
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  font-size: 9pt;
+  color: var(--muted);
+  margin: -2mm 0 4mm 0;
+}
+
+/* ---------- Code ---------- */
+
+code{
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
+  font-size: 9.3pt;
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: 2px;
+  padding: 0.3mm 1mm;
+  color: var(--navy-deep);
+}
+
+pre{
+  font-family: 'DejaVu Sans Mono', 'Liberation Mono', monospace;
+  font-size: 8.9pt;
+  line-height: 1.45;
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-left: 3px solid var(--tan-deep);
+  border-radius: 2px;
+  padding: 3mm 4mm;
+  margin: 0 0 4mm 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  page-break-inside: avoid;
+  color: var(--ink);
+  overflow-x: auto;
+}
+pre code{ background:none; border:none; padding:0; font-size: 8.9pt; }
+
+.snippet-label{
+  font-family: 'DejaVu Sans Mono', monospace;
+  font-size: 8pt;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #fff;
+  background: var(--navy);
+  display: inline-block;
+  padding: 1mm 2.5mm;
+  border-radius: 2px 2px 0 0;
+  margin: 3mm 0 -4mm 0;
+  position: relative;
+}
+.snippet-label.-good{ background: var(--teal); }
+.snippet-label.-bad{ background: var(--rust); }
+.snippet-wrap{ margin-bottom: 4mm; }
+.snippet-wrap pre{ margin-bottom:0; }
+
+/* ---------- Callout stamps ---------- */
+
+.box{
+  border: 1.5px solid var(--rule);
+  border-radius: 3px;
+  padding: 4mm 5mm;
+  margin: 5mm 0;
+  page-break-inside: avoid;
+  position: relative;
+}
+
+.box .stamp{
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  font-weight: bold;
+  font-size: 9pt;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  display: inline-block;
+  padding: 1mm 3mm;
+  border: 2px solid currentColor;
+  border-radius: 2px;
+  transform: rotate(-2deg);
+  margin-bottom: 2.5mm;
+}
+.box p:last-child{ margin-bottom:0; }
+
+.box.-tip{ background: var(--teal-light); border-color: var(--teal); }
+.box.-tip .stamp{ color: var(--teal); }
+
+.box.-remember{ background: var(--navy-tag-light); border-color: var(--navy-tag); }
+.box.-remember .stamp{ color: var(--navy-tag); }
+
+.box.-watch{ background: var(--rust-light); border-color: var(--rust); }
+.box.-watch .stamp{ color: var(--rust); }
+
+.box.-tech{ background: var(--gold-light); border-color: var(--gold); }
+.box.-tech .stamp{ color: var(--gold); }
+
+.box.-field{ background: var(--tan-light); border-color: var(--tan-deep); }
+.box.-field .stamp{ color: var(--tan-deep); }
+
+/* ---------- Tables ---------- */
+
+table{
+  width: 100%;
+  border-collapse: collapse;
+  margin: 3mm 0 5mm 0;
+  font-size: 9.6pt;
+  page-break-inside: avoid;
+}
+th{
+  background: var(--navy);
+  color: #fff;
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 8.7pt;
+  text-align: left;
+  padding: 2.2mm 3mm;
+}
+td{
+  padding: 2mm 3mm;
+  border-bottom: 1px solid var(--rule);
+  vertical-align: top;
+  word-break: break-word;
+}
+tr:nth-child(even) td{ background: #f6f1e4; }
+td code, th code{ font-size: 8.6pt; }
+
+/* ---------- misc components ---------- */
+
+.card-index{
+  font-family: 'DejaVu Sans Mono', monospace;
+  font-size: 9pt;
+  background: #fff;
+  border: 1px solid var(--rule);
+  border-left: 6px solid var(--navy);
+  padding: 3mm 4mm;
+  margin: 4mm 0;
+  page-break-inside: avoid;
+}
+.card-index .k{ color: var(--tan-deep); }
+
+.step-list{ counter-reset: step; list-style: none; padding-left:0; }
+.step-list > li{
+  counter-increment: step;
+  position: relative;
+  padding-left: 9mm;
+  margin-bottom: 3mm;
+}
+.step-list > li::before{
+  content: counter(step);
+  position: absolute;
+  left: 0; top: 0;
+  width: 6mm; height: 6mm;
+  background: var(--navy);
+  color: #fff;
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  font-weight: bold;
+  font-size: 9.5pt;
+  border-radius: 50%;
+  display: table;
+  line-height: 6mm; text-align: center;
+}
+
+.two-col{ display: table; width: 100%; table-layout: fixed; border-spacing: 4mm 0; }
+.two-col .col{ display: table-cell; width: 50%; vertical-align: top; }
+
+.tag-pill{
+  display:inline-block;
+  font-family:'DejaVu Sans Mono', monospace;
+  font-size: 8.4pt;
+  padding: 0.3mm 2mm;
+  border-radius: 8px;
+  background: var(--tan-light);
+  border: 1px solid var(--tan-deep);
+  color: var(--navy-deep);
+  margin: 0 1mm 1mm 0;
+}
+
+.pagebreak{ page-break-before: always; }
+
+.section-end{
+  text-align:center;
+  color: var(--tan-deep);
+  letter-spacing: 0.3em;
+  margin: 8mm 0 2mm 0;
+  font-family: 'DejaVu Sans Mono', monospace;
+  font-size: 9pt;
+}
+
+/* ---------- Cover page ---------- */
+
+body.cover{
+  background: var(--tan-light);
+  margin:0; padding:0;
+}
+.cover-page{
+  width: 100%;
+  min-height: 273mm;
+  padding: 26mm 22mm;
+  position: relative;
+  background: var(--tan-light);
+}
+.cover-frame{
+  border: 2.5px solid var(--navy-deep);
+  padding: 14mm 14mm 10mm 14mm;
+  min-height: 210mm;
+  position: relative;
+  background: var(--paper);
+}
+.cover-frame::before{
+  content: "";
+  position: absolute;
+  top: 5mm; left: 5mm; right: 5mm; bottom: 5mm;
+  border: 1px solid var(--tan-deep);
+  pointer-events: none;
+}
+.cover-tab{
+  position:absolute;
+  top: -6.2mm; left: 14mm;
+  background: var(--navy-deep);
+  color:#fff;
+  font-family: 'DejaVu Sans Mono', monospace;
+  letter-spacing: 0.2em;
+  font-size: 9.5pt;
+  padding: 2.5mm 6mm;
+  border-radius: 1px 10px 0 0;
+}
+.cover-kicker{
+  text-align:center;
+  font-family:'DejaVu Sans Mono', monospace;
+  letter-spacing: 0.35em;
+  font-size: 10pt;
+  color: var(--rust);
+  margin-top: 10mm;
+}
+.cover-title{
+  text-align:center;
+  font-family:'DejaVu Sans Condensed', sans-serif;
+  font-weight:bold;
+  font-size: 47pt;
+  line-height: 1.02;
+  letter-spacing: 0.01em;
+  color: var(--navy-deep);
+  text-transform: uppercase;
+  margin: 4mm 0 0 0;
+}
+.cover-title small{
+  display:block;
+  font-size: 22pt;
+  color: var(--rust);
+  margin-top: 2mm;
+}
+.cover-stamp-row{
+  text-align:center;
+  margin: 9mm 0;
+}
+.cover-stamp{
+  border: 3px double var(--rust);
+  color: var(--rust);
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  font-weight: bold;
+  letter-spacing: 0.18em;
+  font-size: 11pt;
+  padding: 3mm 7mm;
+  transform: rotate(-4deg);
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+.cover-subtitle{
+  text-align:center;
+  font-family: 'DejaVu Serif', serif;
+  font-style: italic;
+  font-size: 13.5pt;
+  color: var(--navy);
+  margin: 0 8mm 12mm 8mm;
+}
+.cover-rule{
+  border:none; border-top: 1.5px solid var(--tan-deep);
+  width: 60mm; margin: 0 auto 10mm auto;
+}
+.cover-blurb{
+  font-size: 10.3pt;
+  color: #3c4658;
+  margin: 0 6mm 10mm 6mm;
+  text-align:center;
+}
+.cover-card{
+  border-top: 1px dashed var(--rule);
+  margin-top: 14mm;
+  padding-top: 4mm;
+  display:table;
+  width: 100%;
+  font-family:'DejaVu Sans Mono', monospace;
+  font-size: 8pt;
+  color: #6a6250;
+}
+.cover-card span{ display:table-cell; }
+.cover-card span:last-child{ text-align:right; }
+
+/* ---------- TOC ---------- */
+
+.toc-page{ padding-top: 2mm; }
+.toc-masthead{
+  text-align:center;
+  margin-bottom: 10mm;
+}
+.toc-masthead .cover-kicker{ margin-top:0; }
+.toc-masthead h1{
+  font-size: 30pt;
+  text-transform: uppercase;
+  color: var(--navy-deep);
+  margin: 2mm 0 0 0;
+}
+.toc-table{ width:100%; border-collapse: collapse; }
+.toc-table td{ border: none; padding: 0; background: none !important; }
+.toc-row td{ padding-bottom: 5mm; vertical-align: bottom; }
+.toc-row .toc-num{
+  width: 11mm;
+  font-family: 'DejaVu Sans Mono', monospace;
+  font-size: 10.5pt;
+  color: var(--rust);
+  font-weight: bold;
+  vertical-align: bottom;
+  padding-bottom: 5.6mm;
+}
+.toc-row .toc-title{
+  font-family: 'DejaVu Sans Condensed', sans-serif;
+  font-weight: bold;
+  font-size: 13pt;
+  color: var(--navy-deep);
+  white-space: nowrap;
+  padding-right: 3mm;
+}
+.toc-row .toc-dek{
+  display:block;
+  font-family: 'DejaVu Serif', serif;
+  font-weight: normal;
+  font-style: italic;
+  font-size: 9.3pt;
+  color: #5a6478;
+  white-space: normal;
+  margin-top: 0.8mm;
+}
+.toc-row .toc-dots{
+  border-bottom: 1.5px dotted var(--tan-deep);
+  padding-bottom: 3.2mm;
+}
+.toc-row .toc-pagenum{
+  width: 12mm;
+  text-align: right;
+  font-family: 'DejaVu Sans Mono', monospace;
+  font-size: 11pt;
+  color: var(--navy);
+  font-weight: bold;
+  padding-left: 3mm;
+  padding-bottom: 3.2mm;
+}
+.toc-divider{
+  border: none; border-top: 2px solid var(--tan);
+  margin: 7mm 0 8mm 0;
+}
+
+/* =========================================================
+   SCREEN — web reader (comfortable column, webfonts OK)
+   ========================================================= */
+
+/* Webfonts are linked with media="screen" from md-to-casefile HTML
+   so print/PDF never loads them (keeps extractable DejaVu text). */
+
+@media screen {
+  html{
+    font-size: 17px;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  html, body{
+    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+    font-size: 1.05rem;
+    line-height: 1.7;
+    background: oklch(98% 0.003 260);
+    color: oklch(18% 0.01 260);
+  }
+
+  body.book-document{
+    padding: 1.5rem 1rem 3rem;
+  }
+
+  .book-shell{
+    max-width: 42rem;
+    margin: 0 auto;
+  }
+
+  h1, h2, h3, h4,
+  .subhead, .subhead4,
+  th, .stamp, .snippet-label,
+  .cover-title, .toc-row .toc-title{
+    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+    color: oklch(18% 0.01 260);
+  }
+
+  .chapter-tab,
+  .chapter-kicker,
+  code, pre,
+  .card-index, .tag-pill, .section-end{
+    font-family: "IBM Plex Mono", "DejaVu Sans Mono", ui-monospace, monospace;
+  }
+
+  .chapter-tab{
+    background: oklch(55% 0.15 260);
+  }
+
+  h2{
+    border-bottom-color: oklch(88% 0.006 260);
+  }
+
+  .chapter{
+    page-break-before: auto;
+    padding: 0 0 3rem;
+    margin-bottom: 2.5rem;
+    border-bottom: 1px dashed var(--rule);
+  }
+  .chapter:last-of-type{
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .chapter-tab{
+    font-size: 0.7rem;
+    letter-spacing: 0.16em;
+    padding: 0.35rem 0.85rem;
+    margin-bottom: 0.85rem;
+    border-radius: 2px 10px 2px 10px;
+  }
+
+  .chapter-header{
+    margin-bottom: 1.75rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .chapter-kicker{
+    font-size: 0.72rem;
+    margin: 0 0 0.4rem;
+  }
+
+  h1.chapter-title{
+    font-size: clamp(1.65rem, 4vw, 2.15rem);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    text-transform: none;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  h2{
+    font-size: 1.35rem;
+    margin: 2.25rem 0 0.85rem;
+    padding-bottom: 0.4rem;
+    border-bottom: 2px solid var(--tan);
+  }
+
+  h3{
+    font-size: 1.1rem;
+    margin: 1.75rem 0 0.65rem;
+  }
+
+  h4{
+    font-size: 1rem;
+    margin: 1.35rem 0 0.45rem;
+  }
+
+  p{ margin: 0 0 1rem; }
+
+  ul, ol{
+    margin: 0 0 1.15rem;
+    padding-left: 1.35rem;
+  }
+  li{ margin-bottom: 0.4rem; }
+
+  hr, hr.divider{ margin: 1.75rem 0; }
+
+  blockquote{
+    margin: 1.25rem 0;
+    padding: 0.85rem 1.1rem;
+    border-left-width: 4px;
+  }
+
+  code{
+    font-size: 0.88em;
+    padding: 0.1em 0.35em;
+    border-radius: 3px;
+  }
+
+  pre{
+    font-size: 0.82rem;
+    line-height: 1.55;
+    padding: 1rem 1.15rem;
+    margin: 0 0 1.25rem;
+    border-left-width: 4px;
+    border-radius: 4px;
+    background: #efe9d6;
+    border-color: var(--code-border);
+    border-left-color: var(--navy);
+  }
+
+  .box{
+    padding: 1rem 1.15rem;
+    margin: 1.5rem 0;
+    border-radius: 4px;
+  }
+  .box .stamp{
+    font-size: 0.7rem;
+    padding: 0.2rem 0.55rem;
+    margin-bottom: 0.65rem;
+  }
+
+  table{
+    font-size: 0.9rem;
+    margin: 1rem 0 1.5rem;
+    display: block;
+    overflow-x: auto;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+  }
+  th{
+    font-size: 0.72rem;
+    padding: 0.65rem 0.85rem;
+    text-transform: none;
+    letter-spacing: 0.04em;
+  }
+  td{
+    padding: 0.6rem 0.85rem;
+  }
+  tr:nth-child(even) td{ background: #f7f2e6; }
+
+  img{
+    margin: 1.25rem 0;
+    border-radius: 3px;
+  }
+
+  .step-list > li{
+    padding-left: 2.25rem;
+    margin-bottom: 0.85rem;
+  }
+  .step-list > li::before{
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    font-size: 0.8rem;
+  }
+}
+
+/* =========================================================
+   PRINT — keep mm rhythm; no webfonts / no flex traps
+   ========================================================= */
+
+@media print {
+  html, body{
+    font-family: 'DejaVu Serif', 'Liberation Serif', serif;
+    font-size: 11.3pt;
+    line-height: 1.55;
+    background: var(--paper) !important;
+  }
+
+  body.book-document{ padding: 0; }
+  .book-shell{ max-width: none; }
+
+  h1.chapter-title{
+    /* PDF covers still shout; chapter titles stay sentence case */
+    text-transform: none;
+  }
+
+  .chapter{
+    page-break-before: always;
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  .chapter:first-of-type{ page-break-before: avoid; }
+
+  table{ display: table; overflow: visible; }
+}