/* Southern Pines Reformed Baptist — hand-written stylesheet. One file, no framework, no build step. Light + dark via prefers-color-scheme. Typography tuned for long-form reading: serif body, generous line-height, ~68ch measure. */ :root { --measure: 68ch; --bg: #fbfaf7; --bg-raised: #ffffff; --fg: #22201c; --fg-muted: #5c574e; --accent: #6b4f2a; /* warm brown — bookish */ --accent-hover: #4d3a1e; --rule: #e5e0d6; --nav-bg: #f2eee5; --code-bg: #efe9dd; --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #17150f; --bg-raised: #201d16; --fg: #e9e4d8; --fg-muted: #a79f8d; --accent: #cda86a; --accent-hover: #e2c288; --rule: #343026; --nav-bg: #201d16; --code-bg: #2a261d; } } /* Explicit theme overrides (viewer toggle stamps data-theme on ) */ :root[data-theme="dark"] { --bg: #17150f; --bg-raised: #201d16; --fg: #e9e4d8; --fg-muted: #a79f8d; --accent: #cda86a; --accent-hover: #e2c288; --rule: #343026; --nav-bg: #201d16; --code-bg: #2a261d; } :root[data-theme="light"] { --bg: #fbfaf7; --bg-raised: #ffffff; --fg: #22201c; --fg-muted: #5c574e; --accent: #6b4f2a; --accent-hover: #4d3a1e; --rule: #e5e0d6; --nav-bg: #f2eee5; --code-bg: #efe9dd; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; text-rendering: optimizeLegibility; } /* ---------- Header + navigation ---------- */ .site-header { background: var(--nav-bg); border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: 72rem; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; } .site-title { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.01em; margin: 0; } .site-title a { color: var(--fg); text-decoration: none; } .site-title a:hover { color: var(--accent); } .mainnav { font-family: var(--sans); font-size: 0.98rem; } .mainnav ul { list-style: none; margin: 0; padding: 0; } .mainnav > ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; } .mainnav a, .mainnav .nav-group > span { display: inline-block; padding: 0.2rem 0; color: var(--fg); text-decoration: none; cursor: pointer; } .mainnav a:hover { color: var(--accent); } .mainnav .nav-group { position: relative; } .mainnav .nav-group > span::after { content: " \25be"; color: var(--fg-muted); font-size: 0.8em; } /* Submenus: shown on hover/focus for pointer + keyboard on wide screens */ .mainnav .submenu { position: absolute; left: 0; top: 100%; min-width: 15rem; background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 0.35rem 0; display: none; z-index: 20; } .mainnav .submenu li { display: block; } .mainnav .submenu a { display: block; padding: 0.35rem 1rem; } .mainnav .submenu a:hover { background: var(--nav-bg); } .mainnav .submenu .submenu { position: static; border: 0; box-shadow: none; padding: 0 0 0 1rem; display: block; min-width: 0; } .mainnav .submenu .subhead { display: block; padding: 0.35rem 1rem 0.1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); } .mainnav .nav-group:hover > .submenu, .mainnav .nav-group:focus-within > .submenu { display: block; } /* On touch / narrow screens hover is unreliable — lay submenus out inline. */ @media (max-width: 720px) { .site-header__inner { flex-direction: column; align-items: stretch; } .mainnav > ul { flex-direction: column; gap: 0.15rem; } .mainnav .nav-group > span::after { content: ""; } .mainnav .submenu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0.4rem 1rem; min-width: 0; background: transparent; } .mainnav .nav-group > span { color: var(--fg-muted); font-weight: 600; } } /* ---------- Main content ---------- */ main { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } main.wide { max-width: 78rem; } /* for index/library grids */ .page-title { font-size: 2rem; line-height: 1.2; margin: 0 0 0.25rem; } .eyebrow { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin: 0 0 1.5rem; } main h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.2rem 0 0.6rem; } main h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.8rem 0 0.5rem; } main h4 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; } main p { margin: 0 0 1.1rem; } main a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } main a:hover { color: var(--accent-hover); } main ul, main ol { margin: 0 0 1.1rem; padding-left: 1.5rem; } main li { margin: 0.35rem 0; } blockquote { margin: 1.2rem 0; padding: 0.4rem 1.1rem; border-left: 3px solid var(--accent); color: var(--fg-muted); font-style: italic; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; } code, pre { background: var(--code-bg); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } code { padding: 0.1em 0.35em; font-size: 0.9em; } pre { padding: 1rem; overflow-x: auto; } img { max-width: 100%; height: auto; } /* Wide elements scroll rather than blow out the page */ .scroll-x { overflow-x: auto; } .note { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 6px; padding: 0.9rem 1.1rem; color: var(--fg-muted); font-size: 0.98rem; } /* Status pills for the library index */ .status { font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-muted); white-space: nowrap; } .status--published { color: #1e6b34; border-color: #9ccca6; } .status--placeholder { color: #8a6d1e; border-color: #d8c48a; } @media (prefers-color-scheme: dark) { .status--published { color: #8fd8a3; border-color: #3c5a44; } .status--placeholder { color: #e2c288; border-color: #5a4d2c; } } /* Library list */ .library { list-style: none; padding: 0; margin: 2rem 0 0; } .library > li { border-top: 1px solid var(--rule); padding: 1.25rem 0; } .library h3 { margin: 0 0 0.3rem; } .library h3 a { text-decoration: none; } .library .meta { font-size: 0.95rem; color: var(--fg-muted); margin: 0 0 0.4rem; } .library .titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--rule); background: var(--nav-bg); font-family: var(--sans); font-size: 0.9rem; color: var(--fg-muted); } .site-footer__inner { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } .site-footer a { color: var(--accent); }