/* * document.css — unified long-form document styling for Temples of Earth. * * ONE design language for the canonical documents (Cosmology, Covenant, * Bylaws) and the doc-shaped pages (Join, Found a Temple): a minimal * editorial reading experience in the brand's Ubuntu type (see BRAND.md). * * Colours come from the --t-* tokens in /shared/brand.css (dark "dusk" * default, light "dawn" via the toggle) — any page using this stylesheet * must link brand.css first and load /shared/brand.js. * * Pages whose markdown repeats the subtitle as an `### ...` immediately * after the title (Covenant, Bylaws) should set * so that leading in-body h3 — a duplicate of the hero subtitle — is hidden. */ :root { --measure: 40rem; --title-size: clamp(2.6rem, 7vw, 4rem); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--t-bg); color: var(--t-tx); font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.7; letter-spacing: -0.005em; padding-top: 48px; /* room for the ThemeEngine control bar */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--t-bc); } /* ---- Chrome ---- */ .site-header { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: 1.75rem 1.5rem 0; } .back-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--t-mt); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; transition: color 0.25s ease; } .back-link:hover { color: var(--t-ac); } main { position: relative; z-index: 1; padding: 0 1.5rem; } .container-narrow { max-width: var(--measure); margin: 0 auto; } /* ---- Hero ---- */ .document-hero { text-align: center; padding: clamp(2rem, 4.5vw, 3rem) 0 clamp(1.75rem, 3.5vw, 2.5rem); /* Break out wider than the prose measure so display titles ("The Cosmology", "Found a Temple", "Become a Member") sit on one line. Centered on the page via margin-left:50% + translateX(-50%); the inner content (eyebrow, subtitle at 36ch, divider) stays centered. On narrow viewports this collapses to the column width (100vw - 3rem respects main's 1.5rem side padding), a no-op — the title shrinks via the 7vw clamp there and needs no extra room. */ width: min(52rem, calc(100vw - 3rem)); margin-left: 50%; transform: translateX(-50%); } .document-eyebrow { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--t-ac); margin-bottom: clamp(1rem, 2vw, 1.25rem); } .document-title { font-family: var(--font-display); font-weight: 500; font-size: var(--title-size); line-height: 1.05; letter-spacing: -0.02em; color: var(--t-tx); } .document-subtitle { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.5; color: var(--t-mt); max-width: 36ch; margin: clamp(1rem, 2vw, 1.25rem) auto 0; letter-spacing: 0; } .document-divider { width: 2rem; height: 1px; background: var(--t-dm); margin: clamp(1.75rem, 3.5vw, 2.25rem) auto 0; } /* ---- Loading & error ---- */ .loading { color: var(--t-mt); text-align: center; padding: 4rem 0; font-size: 1rem; animation: docPulse 2s infinite; } @keyframes docPulse { 0%,100%{opacity:1} 50%{opacity:0.35} } #error-state { text-align: center; padding: 4rem 0; } .error-title { color: var(--t-er); font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1rem; } .error-text { color: var(--t-mt); margin-bottom: 2rem; } /* ---- Prose ---- */ #document-body { position: relative; z-index: 1; padding-bottom: 2rem; } /* Canonical title lives in the hero; suppress the markdown h1. */ #document-body h1 { display: none; } /* Pages whose markdown repeats the subtitle as a leading `### ...` set .doc-has-subtitle so that duplicate is hidden (the hero shows it). */ .doc-has-subtitle #document-body h3:first-of-type { display: none; } /* Major sections (Roman numerals / Articles). A hairline above each gives Apple-style breathing room between major movements of the document. */ #document-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--t-tx); margin: 5.5rem 0 2rem; padding-top: 3.5rem; border-top: 1px solid var(--t-bd); } /* Numbered / named subsections. */ #document-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--t-ac); margin: 3rem 0 1.1rem; } #document-body h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--t-tx); margin: 2rem 0 0.75rem; } #document-body p { color: var(--t-t2); margin: 0 0 1.5rem; line-height: 1.72; letter-spacing: -0.003em; } #document-body strong { color: var(--t-tx); font-weight: 600; } #document-body em { color: var(--t-tx); font-style: italic; } #document-body a { color: var(--t-ac); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--t-ac) 40%, transparent); transition: border-color 0.25s ease; } #document-body a:hover { border-bottom-color: var(--t-ac); } #document-body hr { border: none; height: 1px; background: var(--t-bd); margin: 3rem 0; display: none; /* headings already separate sections; keep rules subtle */ } #document-body blockquote { border-left: 2px solid var(--t-ac); padding-left: 1.4rem; margin: 2rem 0; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--t-tx); } /* Unordered lists — refined em-dash markers, not filled discs. */ #document-body ul { list-style: none; margin: 0 0 1.5rem; padding: 0; } #document-body ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.65rem; color: var(--t-t2); line-height: 1.6; } #document-body ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 1px; background: var(--t-dm); } /* Ordered lists — numbered creeds / clauses. */ #document-body ol { list-style: none; counter-reset: creed; margin: 0 0 1.5rem; padding: 0; } #document-body ol li { counter-increment: creed; position: relative; padding-left: 3rem; margin-bottom: 0.9rem; color: var(--t-t2); line-height: 1.6; min-height: 1.6em; } #document-body ol li::before { content: counter(creed); position: absolute; left: 0; top: 0.05em; width: 2rem; text-align: right; font-family: var(--font-display); font-size: 0.95rem; color: var(--t-ac); font-variant-numeric: tabular-nums; } /* Nested lists shouldn't carry the trailing paragraph margin. */ #document-body li > ul, #document-body li > ol { margin-top: 0.5rem; margin-bottom: 0; } /* ---- Member CTA & footer ---- */ .cta-wrap { position: relative; z-index: 1; max-width: var(--measure); margin: 4rem auto 0; padding: 0 1.5rem; } .site-footer { position: relative; z-index: 1; max-width: var(--measure); margin: 5rem auto 0; padding: 3.5rem 1.5rem 5rem; text-align: center; border-top: 1px solid var(--t-bd); } .footer-related { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .footer-related a { color: var(--t-mt); text-decoration: none; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.25s ease; } .footer-related a:hover { color: var(--t-ac); } .footer-related a.current { color: var(--t-tx); pointer-events: none; } .footer-site-name { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--t-mt); } /* ---- Reveal on scroll ---- */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } } @media (max-width: 600px) { body { font-size: 18px; } .document-hero { padding: 1.75rem 0 2rem; } #document-body h2 { margin-top: 4rem; padding-top: 2.75rem; } }