/*! * sos-content.css — styling for pages written after the WordPress rebuild. * * Every page the crawler mirrored carries ~66 KB of Elementor CSS inlined in * its own , generated for that page's specific widgets. Building a new * page by pasting Elementor widget markup into a cloned shell therefore works * only until the new page needs a widget the donor did not have — and then it * breaks in a way that is very hard to see. * * So new content does not use Elementor widgets at all. It is plain semantic * HTML inside .sos-content, styled here, in one site-wide file. Same reasoning * as sos-site.css, which already proved the point: the services-alignment fix * shipped by uploading one file instead of editing 199. * * Colours are the site's own, measured from the live pages rather than picked: * #062123 ink / dark bars #FFF7EB cream page background * #1B5E5F links #E8DCC8 rules and borders */ .sos-content { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; color: #062123; font-size: 1.125rem; line-height: 1.75; } /* Headings ---------------------------------------------------------------- */ .sos-content h2, .sos-content h3, .sos-content h4 { color: #062123; line-height: 1.25; /* Asymmetric margins: a heading belongs to what follows it, not to what came before. Expressed in em, so the gap scales with the heading's own size rather than being uniform between an h2 and an h4. */ margin: 1.6em 0 0.5em; } .sos-content h2 { font-size: 1.7em; } .sos-content h3 { font-size: 1.3em; } .sos-content h4 { font-size: 1.1em; } .sos-content > :first-child { margin-top: 0; } /* Flow -------------------------------------------------------------------- */ .sos-content p, .sos-content ul, .sos-content ol { margin: 0 0 1.25em; } .sos-content ul, .sos-content ol { padding-left: 1.4em; } .sos-content li { margin-bottom: 0.4em; } .sos-content li > ul, .sos-content li > ol { margin: 0.4em 0 0.6em; } .sos-content a { color: #1B5E5F; text-decoration: underline; text-underline-offset: 0.15em; } .sos-content a:hover { text-decoration-thickness: 2px; } .sos-content strong { font-weight: 700; } /* Figures and images ------------------------------------------------------ */ .sos-content img { max-width: 100%; height: auto; display: block; margin: 2em auto; border-radius: 6px; } .sos-content figure { margin: 2em 0; } .sos-content figcaption { font-size: 0.9em; opacity: 0.75; text-align: center; margin-top: 0.6em; } /* Quotes ------------------------------------------------------------------ */ .sos-content blockquote { margin: 2em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 4px solid #1B5E5F; font-style: italic; } .sos-content blockquote p:last-child { margin-bottom: 0; } /* Code -------------------------------------------------------------------- */ .sos-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: #F2E9D8; padding: 0.15em 0.4em; border-radius: 4px; } .sos-content pre { background: #062123; color: #FFF7EB; padding: 1.1em 1.3em; border-radius: 8px; /* A long line must scroll inside its own box; the page itself must never scroll sideways. */ overflow-x: auto; margin: 1.8em 0; font-size: 0.95rem; line-height: 1.6; } .sos-content pre code { background: none; padding: 0; font-size: inherit; color: inherit; } /* Tables ------------------------------------------------------------------ */ .sos-content .sos-table-wrap { overflow-x: auto; margin: 1.8em 0; } .sos-content table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } .sos-content th, .sos-content td { border-bottom: 1px solid #E8DCC8; padding: 0.6em 0.8em; text-align: left; vertical-align: top; } .sos-content th { font-weight: 700; border-bottom-width: 2px; } .sos-content hr { border: 0; border-top: 1px solid #E8DCC8; margin: 2.5em 0; } @media (max-width: 640px) { .sos-content { font-size: 1.0625rem; } .sos-content h2 { font-size: 1.45em; } } /* A landing page's h1 comes from the body rather than from an Elementor heading widget, so it needs its own size here. */ .sos-content h1 { font-size: 2.4em; line-height: 1.15; margin: 0 0 0.6em; color: #062123; } @media (max-width: 640px) { .sos-content h1 { font-size: 1.9em; } }