A4 proposal / Shared CSS and settings

These are the CSS and project settings shared by all pages of this example. The CSS extends the product’s business preset. Use them together with the individual page sources.

Back to example overview

design/theme.css

/* Original illustrative sales proposal. Extends MIT-0 business theme. */
:root{--accent:#174d49;--text:#172d38;--muted:#4d646b;--background:#fffdf9;}
.ps-mode-presentation{font-size:24pt;line-height:1.45;}
.ps-mode-presentation .ps-body{padding:38pt 58pt 50pt;}
.ps-mode-presentation h1{font-size:46pt;line-height:1.3;letter-spacing:-.025em;}
.ps-mode-presentation h2{font-size:32pt;border-bottom:2pt solid #c9d7cd;padding-bottom:10pt;}
.ps-mode-presentation h3{font-size:26pt;}
.ps-mode-presentation table{font-size:20pt;}
th{background:#e4eee7;color:#174d49;}td,th{border-color:#ccd8d3;padding:.4em .65em;}
.ps-mode-presentation .ps-layout-title{background:linear-gradient(125deg,#e0ede5,#faf0df);}
.ps-layout-title .ps-body{align-items:flex-start;text-align:left;}
.ps-mode-presentation .ps-layout-title h1{font-size:52pt;max-width:800pt;}
.ps-section::after{content:"ILLUSTRATIVE / FICTIONAL COMPANY, METRICS AND PROPOSAL";position:absolute;bottom:16pt;left:58pt;color:#50676c;font-size:18pt;letter-spacing:.06em;}
.ps-layout-title blockquote{color:#174d49;border:0;font-weight:700;margin:12pt 0;padding:0;}
.ps-mode-presentation .kicker{font-size:20pt;letter-spacing:.1em;color:#50676c;margin-bottom:14pt;}
.ps-mode-presentation figure{margin:6pt 0 12pt;}
.ps-mode-presentation blockquote{background:#eaf1ec;padding:12pt 18pt;border-radius:6pt;color:#174d49;}
.ps-mode-paged{font-size:11pt;line-height:1.65;}
.ps-mode-paged h1{font-size:27pt;letter-spacing:-.02em;}
.ps-mode-paged h2{font-size:17pt;margin-top:16pt;}
.ps-mode-paged h3{font-size:13pt;}
.ps-mode-paged .ps-fixed>.ps-body{padding:18mm 18mm 20mm;}
.ps-mode-paged figure{margin:8pt 0;}
.ps-mode-paged .ps-section::after{left:18mm;bottom:9mm;font-size:10pt;}
.ps-mode-paged table{font-size:10pt;}
.ps-mode-paged blockquote{background:#eaf1ec;padding:8pt 12pt;}

/* Wide comparison appendix; existing portrait pages retain their styling. */
.ps-mode-paged .comparison-appendix table{font-size:10pt;line-height:1.5;}
.ps-mode-paged .comparison-appendix td,.ps-mode-paged .comparison-appendix th{padding:.5em .6em;}
.ps-mode-paged .ps-fixed.comparison-appendix>.ps-body{padding:14mm 18mm 16mm;}

.wworpoint/project.json

{
  "schemaVersion": 1,
  "name": "proposal-en",
  "entry": "document.md",
  "document": {
    "mode": "paged",
    "lang": "en-US",
    "defaultPage": {
      "size": "A4",
      "orientation": "portrait"
    }
  },
  "theme": {
    "preset": "business",
    "entry": "design/theme.css"
  },
  "output": {
    "directory": "dist",
    "formats": [
      "pdf"
    ]
  },
  "security": {
    "html": "none",
    "sharedAssetRoots": []
  }
}