/* Christ Our Hope — brand stylesheet (source of truth). Copied verbatim into each output root's assets/ at build time, so the web pages and PDFs in that tree share one set of files. Edit the brand here. */ /* Brand fonts. Sans (Montserrat) is self-hosted here — url() resolves relative to this stylesheet (/assets/). Montserrat is SIL OFL, so it is safe to ship. Serif: the web pages use "Libre Caslon Text" (SIL OFL, an open Caslon revival), loaded from Google Fonts in the page — see templates/ base.html. The parish brand font, Adobe Caslon Pro, is licensed and NOT served on the web; it is embedded into the PDFs only, at build time (build.py: pdf_font_css), which overrides --serif for the PDF. */ @font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; src: url("fonts/Montserrat-Regular.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; src: url("fonts/Montserrat-Medium.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; src: url("fonts/Montserrat-SemiBold.ttf"); } @font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; src: url("fonts/Montserrat-Bold.ttf"); } :root { --ink: #383842; /* primary brand charcoal */ --muted: #777777; /* brand grey */ --rule: #dcdce0; /* light cool grey for hairlines */ --accent: #383842; /* charcoal-only treatment */ --bg: #ffffff; --paper: #ffffff; --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --serif: "Libre Caslon Text", Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } body { font-family: var(--serif); color: var(--ink); background: var(--paper); line-height: 1.54; margin: 0; -webkit-font-smoothing: antialiased; } .wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; } .masthead { text-align: center; border-bottom: 2px solid var(--accent); padding-bottom: 1.25rem; margin-bottom: 2.5rem; } .masthead img { height: 84px; width: auto; } /* The PDF uses a pure-black recolor of the logo; the web uses the brand charcoal. The print toggle lives in the @media print block below. */ .logo-print { display: none; } .masthead .loc { font-family: var(--sans); color: var(--muted); font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; margin-top: .85rem; } h1 { font-family: var(--sans); font-weight: 700; font-size: 1.55rem; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--ink); } .subtitle { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1rem; margin: 0 0 .9rem; } .meta { font-family: var(--sans); font-size: .72rem; color: var(--muted); border: 1px solid var(--rule); background: var(--bg); border-radius: 4px; padding: .55rem .8rem; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: .06em; } .meta .status { font-weight: 700; color: var(--ink); } /* Section headings: Swiss-modern — sans, uppercase, strongly tracked, set off by a full-width hairline and generous space above. */ h2 { font-family: var(--sans); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin: 2.6rem 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule); } h3 { font-family: var(--sans); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 1.8rem 0 .45rem; color: var(--muted); } p, li { font-size: 1.06rem; } p { margin: 0 0 .85em; } blockquote { border-left: 2px solid var(--rule); margin: 1.3rem 0; padding: .15rem 1.1rem; color: var(--muted); font-style: italic; } /* Teacher-only material (the -teacher edition of an "other" doc): a shaded box. */ .teacher-note { background: #f1f1f4; border: 1px solid var(--rule); border-radius: 4px; padding: .5rem 1rem; margin: 1.1rem 0; } .teacher-note > :first-child { margin-top: 0; } .teacher-note > :last-child { margin-bottom: 0; } /* Two-column list (e.g. the catechesis class overview). Each entry — a title + date paragraph followed by its topic list — is kept whole within a column. */ .overview-cols { column-count: 2; column-gap: 2.2rem; margin-top: 1rem; } .overview-cols p { break-after: avoid; margin: 0 0 .15rem; } .overview-cols ul { break-inside: avoid; margin: 0 0 1rem; } ol, ul { padding-left: 1.4rem; } li { margin: .35em 0; } ol ol, ul ul, ol ul, ul ol { margin: .35rem 0; } /* Legal outline (documents with `numbering: legal`): the section headings carry the Roman level (I, II, III); the ordered lists below them run A, B, C then 1, 2, 3, then a, b, c for any deeper nesting. */ .outline-legal ol { list-style-type: upper-alpha; } .outline-legal ol ol { list-style-type: decimal; } .outline-legal ol ol ol { list-style-type: lower-alpha; } .outline-legal ol ol ol ol { list-style-type: lower-roman; } a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; } .toc { border: 1px solid var(--rule); border-radius: 6px; padding: 1.25rem 1.5rem; } .toc h2 { border: none; margin-top: 0; } .toc ul { list-style: none; padding-left: 0; } .toc li { margin: .65rem 0; } .toc .status { font-family: var(--sans); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .toc .links { font-family: var(--sans); font-size: .72rem; } .footer { font-family: var(--sans); margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .65rem; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .12em; } .backlink { font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.5rem; display: inline-block; text-decoration: none; } @media print { /* Key the whole rem scale off 11pt in print, so body (1rem) prints at 11pt and every heading/spacing follows proportionally. Screen keeps the 16px browser default, so on-screen body stays at 1rem = 16px. */ html { font-size: 11pt; } /* Body is set larger than 1rem for screen reading; pin it back to exactly 11pt (= 1rem at the print root) so the PDF body stays at 11pt. */ p, li { font-size: 1rem; } /* Print darker than the on-screen brand charcoal so nothing comes out faint on paper: text pure black, muted greys near-black, hairline rules and the masthead rule dark enough to actually print, the logo recolored to match. */ :root { --ink: #000000; --muted: #1a1a1a; --rule: #78787a; --accent: #000000; } .logo-screen { display: none; } .logo-print { display: inline; } .footer { color: #000000; } /* tiny, so push to full black */ blockquote { font-weight: 600; } /* semibold italic — less faint */ .teacher-note { background: #8a8a8d; border-color: #5e5e61; } /* Keep at least three lines together at a page break — no single line of a paragraph stranded at the foot (orphan) or top (widow) of a page. */ body { background: #fff; orphans: 3; widows: 3; } /* Don't strand a heading at the bottom, and keep these blocks whole. */ h1, h2, h3 { break-after: avoid; } blockquote, .teacher-note, li { break-inside: avoid; } .wrap { max-width: none; padding: 0; } .backlink { display: none; } a { color: var(--ink); text-decoration: none; } } @page { size: Letter; margin: 2.2cm 1.5in 2cm; @bottom-center { content: "Christ Our Hope Anglican Church"; font-family: "Montserrat", sans-serif; font-size: 7pt; letter-spacing: .1em; text-transform: uppercase; color: #000000; } @bottom-right { content: counter(page); font-family: "Montserrat", sans-serif; font-size: 8pt; color: #000000; } }