/* site.css (combined: banner/home + booklet/pages) */ /* ----------------------------- Theme + global defaults ------------------------------ */ :root{ /* Color system */ --midnight: #122040; --paper: #ffffff; --ink: #111111; --rule: rgba(0,0,0,0.10); /* Layout */ --page-width: 5.5in; --page-padding: 28px; --page-margin-top: 10px; --page-margin-bottom: 44px; /* Special layout spacing */ --cover-gap-above: 20px; --cover-gap-below: 18px; /* Header spacing */ --indent: 22px; /* Core typography controls */ --font-body: Calibri, Arial, sans-serif; --font-size: 15px; --line-height: 1.55; --paragraph-spacing: 0.95em; --measure: 4.9in; /* ideal readable line length */ } html, body{ margin: 0; padding: 0; } body{ font-family: system-ui, -apple-system, "Segoe UI", Calibri, Arial, sans-serif; background: var(--paper); color: var(--ink); line-height: 1.45; } /* Optional: if you want the "paper on gray desk" look for booklet pages, add class="booklet" to on those pages. */ body.booklet{ background: #f2f2f2; } /* ----------------------------- Banner/Header (shared) ------------------------------ */ header{ position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); } .container{ max-width: 980px; margin: 0 auto; padding: 16px 18px; } /* Shared indent rule for header + body blocks */ .indented{ padding-left: var(--indent); padding-right: var(--indent); } .site-title{ margin: 0; text-align: center; font-weight: 650; letter-spacing: 0.08em; text-transform: lowercase; color: var(--midnight); font-size: 18px; } .tagline{ margin: 8px 0 0 0; text-align: center; color: var(--midnight); opacity: 0.90; font-size: 14px; } nav.links{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; padding-bottom: 4px; } nav.links a{ color: var(--midnight); text-decoration: none; border-bottom: 1px solid rgba(18,32,64,0.25); padding-bottom: 2px; font-weight: 600; letter-spacing: 0.02em; } nav.links a:hover{ border-bottom-color: rgba(18,32,64,0.55); } nav.links a:focus-visible{ outline: 2px solid var(--midnight); outline-offset: 3px; border-bottom-color: transparent; } /* Homepage main container spacing (if used) */ main .container{ padding-top: 12px; padding-bottom: 24px; } /* Landing page paragraph blocks */ .block{ margin: 0 0 2em 0; } .block-title{ margin: 0 0 0.6em 0; font-size: 16px; font-weight: 700; color: var(--midnight); } .block-title a{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(18,32,64,0.25); padding-bottom: 2px; } .block-title a:hover{ border-bottom-color: rgba(18,32,64,0.55); } .block p{ margin: 0; font-size: 15px; } em{ font-style: italic; } /* ----------------------------- Booklet "paper page" system ------------------------------ */ .page{ max-width: var(--page-width); margin: var(--page-margin-top) auto var(--page-margin-bottom) auto; padding: var(--page-padding); background: var(--paper); text-align: left; } /* Prevent double spacing between sticky header and first content block */ header + .page, header + main{ margin-top: 0; } /* Normal paragraph rhythm for booklet pages */ .page p{ margin: 0 0 0.95em 0; line-height: 1.55; } .page ul{ margin: 0.4em 0 1em 1.2em; padding: 0; } .page ul li{ margin: 0.1em 0; } /* Title lines: tight spacing so they don't look double-spaced */ .page p.title{ text-align: center; font-weight: 700; font-style: italic; font-size: 1.5em; margin: 0; line-height: 1.15; } .page p.title + p.title{ margin-top: 0.1em; } .page p.title:last-of-type{ margin-bottom: 0.6em; } /* Footer navigation (Prev / TOC / Next) */ .page-nav{ display: flex; justify-content: center; /* centers the group */ gap: 20px; /* spacing between links */ margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--rule); } .page-nav-link{ color: var(--midnight); text-decoration: none; border-bottom: 1px solid rgba(18,32,64,0.25); padding-bottom: 2px; font-weight: 600; } .page-nav-link:hover{ border-bottom-color: rgba(18,32,64,0.55); } .page-nav-link:focus-visible{ outline: 2px solid var(--midnight); outline-offset: 3px; border-bottom-color: transparent; } .page hr{ margin: 1em 0 1.5em 0; border: none; border-top: 1px solid var(--rule); } .text-page p{ text-align: left; } /* Center helper */ .center{ text-align: center; } /* Cover image block */ .cover{ text-align: center; margin: var(--cover-gap-above) auto var(--cover-gap-below) auto; } .cover img{ display: block; margin: 0 auto; max-width: 100%; height: auto; border: 0; } /* Inside cover vertical centering */ .inside-cover{ min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding-top: 3.5em; /* pushes quote upward */ padding-bottom: 2.5em; /* pushes nav downward */ } .inside-cover-quote{ margin: 0; font-size: 1.15em; line-height: 1.6; } /* Inside back cover layout: centered dedication + footer at bottom */ .back-cover{ min-height: calc(100vh - 140px); display: flex; flex-direction: column; text-align: center; padding-top: 3.5em; padding-bottom: 2.5em; } .back-cover-dedication{ margin: 0; font-size: 1.15em; line-height: 1.6; } .back-cover-footer{ margin-top: auto; /* pins to bottom */ font-size: 0.95em; line-height: 1.4; } .back-cover-footer p{ margin: 0; } .back-cover .page-nav{ margin-top: 1.2em; } /* Table of Contents styling */ .toc{ font-size: 1.05em; line-height: 1.35; padding-left: 1.2em; } .toc li{ margin: 0.05em 0; } .toc a{ text-decoration: none; } .toc a:hover{ text-decoration: underline; } /* Start Reading button-style link */ .start-reading{ display: inline-block; padding: 10px 18px; border: 1px solid #333; border-radius: 6px; text-decoration: none; font-weight: bold; } /* ----------------------------- Mobile tightening ------------------------------ */ @media (max-width: 480px){ :root{ --indent: 12px; --page-margin-top: 8px; --page-padding: 22px; } .site-title{ font-size: 16px; } nav.links{ gap: 8px 12px; } } /* Site title should behave like a home link, but not look like one */ .home-link{ color: inherit; /* keeps midnight title color */ text-decoration: none; /* removes underline */ } .home-link:hover{ text-decoration: none; opacity: 0.85; /* subtle hover feedback */ } .home-link:focus-visible{ outline: 2px solid var(--midnight); outline-offset: 4px; border-radius: 4px; } /* initial formatting for Kindling page, but dt & dd are future move for data serialization */ .q-label{ display: block; font-style: italic; font-weight: 600; margin-bottom: 0.15em; } .questions dt{ font-style: italic; font-weight: 600; margin-top: 1em; } .questions dd{ margin: 0 0 0.6em 0; }