Sales 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:20pt;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:18pt;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:9pt;}
.ps-mode-paged table{font-size:10pt;}
.ps-mode-paged blockquote{background:#eaf1ec;padding:8pt 12pt;}

/* Cover: a local raster illustration, placed in a flow-based CSS grid. */
.ps-mode-presentation .cover-image .ps-body{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:auto;gap:10pt 28pt;align-content:center;align-items:start;justify-items:start;}
.cover-image .ps-body>*{grid-column:1;margin:0;}
.ps-mode-presentation .cover-image h1{font-size:44pt;line-height:1.18;max-width:none;}
.ps-mode-presentation .cover-image .kicker{grid-column:1/-1;font-size:20pt;margin:0;}
.ps-mode-presentation .cover-image .ps-body>p{font-size:20pt;line-height:1.45;}
.ps-mode-presentation .cover-image blockquote{font-size:20pt;line-height:1.45;padding:0;margin:0;}
.ps-mode-presentation .cover-image .ps-body>p:last-of-type{font-size:20pt;line-height:1.5;}
.ps-mode-presentation .cover-image .cover-art{grid-column:2;grid-row:2/7;align-self:center;width:100%;margin:0;}
.cover-art img{display:block;width:100%;height:auto;border-radius:12pt;}
.cover-art figcaption{font-size:20pt;line-height:1.45;text-align:left;color:#50676c;margin-top:8pt;}

.wworpoint/project.json

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