/* town-charter — bluegold skin, matching andoverct.info. * Guides (document pages) use the light "report" look; the charter home page * uses the dark "index" look via . */ :root { --bg: #f4f6f9; /* page background (light docs) */ --bg-page: #ffffff; /* the document card */ --bg-soft: #eef4fb; /* callouts, table headers, TOC, code */ --ink: #19222e; --ink-soft: #4a566a; --ink-faint: #7a8699; --rule: #e3e8ef; --accent: #e8a800; /* gold */ --accent-2: #143862; /* navy — headings */ --navy: #0f2a4a; /* banner gradient top */ --banner-ink: #dde8f5; --link: #245c95; --link-hover: #1c4e80; --serif: Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 17px; scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); /* sans body, like the reports */ line-height: 1.65; } /* ===== Breadcrumb banner (guide/document pages) ===== */ .page-banner { background: linear-gradient(180deg, var(--navy), #143862); border-bottom: 3px solid var(--accent); color: var(--banner-ink); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.02em; } .page-banner-inner { max-width: 46rem; margin: 0 auto; padding: 0.7rem 1.5rem; } .crumbs a { color: var(--accent); text-decoration: none; border-bottom: none; } .crumbs a:hover { color: #fff; text-decoration: underline; } .crumbs .sep { color: var(--banner-ink); opacity: 0.5; margin: 0 0.45em; } .crumbs .current { color: #fff; } /* ===== Document card (the guides) ===== */ article { max-width: 46rem; margin: 2rem auto; padding: 2.4rem 2.6rem 3.5rem; background: var(--bg-page); border-radius: 4px; box-shadow: 0 0 0 1px rgba(15,42,74,0.05), 0 6px 22px rgba(15,42,74,0.06); } /* ===== Typography ===== */ h1, h2, h3, h4 { font-family: var(--serif); /* serif headings, like the reports */ color: var(--accent-2); line-height: 1.25; margin-top: 2.2rem; margin-bottom: 0.6rem; } h1 { font-size: 1.95rem; margin-top: 0.4rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); color: var(--ink); } h2 { font-size: 1.4rem; margin-top: 2.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rule); } h3 { font-size: 1.15rem; margin-top: 1.8rem; } h4 { font-size: 1rem; font-style: italic; color: var(--ink-soft); } p { margin: 0.85rem 0; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(36,92,149,0.3); transition: color 0.15s, border-color 0.15s; } a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } strong { color: var(--ink); font-weight: 700; } em { font-style: italic; } hr { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; } ul, ol { padding-left: 1.5rem; } li { margin-bottom: 0.35rem; } li > p { margin: 0.3rem 0; } blockquote { margin: 1.2rem 0; padding: 0.8rem 1.2rem; background: var(--bg-soft); border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0; color: var(--ink-soft); font-size: 0.97rem; } blockquote p { margin: 0.4rem 0; } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; } thead th { background: var(--bg-soft); text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--accent); font-weight: 600; color: var(--accent-2); font-family: var(--sans); } tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; } tbody tr:nth-child(even) { background: #f8fafc; } code { background: var(--bg-soft); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9rem; color: var(--accent-2); } pre { background: var(--bg-soft); padding: 1rem; border-radius: 4px; overflow-x: auto; } pre code { background: none; padding: 0; } /* ===== Table of Contents ===== */ .toc { background: var(--bg-soft); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 4px; padding: 1rem 1.4rem; margin: 1.5rem 0 2rem; font-family: var(--sans); font-size: 0.9rem; } .toc summary { font-size: 0.8rem; margin: 0 0 0.5rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; cursor: pointer; } .toc ul { list-style: none; padding-left: 0; margin: 0; } .toc li { margin-bottom: 0.25rem; } .toc li.toc-sub { padding-left: 1.2rem; font-size: 0.85rem; } .toc a { color: var(--link); border-bottom: none; } .toc a:hover { border-bottom: 1px solid var(--link); } /* Italic disclaimer at end of an article */ article > p:last-child > em:only-child { display: block; font-size: 0.85rem; color: var(--ink-faint); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); } /* =================================================================== Dark variant — the charter home page (), matching the site's dark index pages. =================================================================== */ body.dark { min-height: 100vh; background: radial-gradient(1100px 520px at 50% -8%, #1c4e80, transparent 60%), linear-gradient(180deg, #0f2a4a, #143862); background-attachment: fixed; color: #eef4fb; } body.dark article { background: transparent; box-shadow: none; padding-top: 0; } body.dark .crumbs { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.5rem 0 1.5rem; } body.dark .crumbs a { color: #b9c4cf; border-bottom: none; } body.dark .crumbs a:hover { color: #fff; } body.dark .crumbs .sep { color: #b9c4cf; opacity: 0.5; margin: 0 0.45em; } body.dark .crumbs .current { color: #fff; font-weight: 600; } body.dark h1 { color: #fff; border-bottom-color: rgba(221,232,245,0.22); } body.dark h2 { color: #fff; border-bottom: none; margin-top: 2.4rem; } body.dark h2 a { color: var(--accent); border-bottom: none; } body.dark h2 a:hover { color: #fff; text-decoration: underline; } body.dark p { color: #c7d6e8; } body.dark a { color: var(--accent); border-bottom: none; } body.dark a:hover { color: #fff; } body.dark strong { color: #fff; } body.dark hr { border-top-color: rgba(221,232,245,0.18); } body.dark article > p:last-child > em:only-child { color: #95a9c4; border-top-color: rgba(221,232,245,0.18); } /* ===== Responsive ===== */ @media (max-width: 640px) { html { font-size: 15px; } article { padding: 1.6rem 1.3rem 2.5rem; margin: 1rem; } .page-banner-inner { padding: 0.6rem 1.3rem; } table { font-size: 0.82rem; } thead th, tbody td { padding: 0.4rem 0.5rem; } } /* ===== Print ===== */ @media print { .page-banner { display: none; } .toc { display: none; } body, body.dark { background: #fff; color: #000; } article { max-width: none; box-shadow: none; padding: 0; } a { color: #245c95; } }