/* ============================================================ * pwwritings.com — shared base * * Design tokens (palette, typography, scale) and the masthead/ * footer that every public page reuses. Page-specific CSS lives * in dedicated files (catalog.css, page.css). The admin UI has * its own embedded styles in admin/index.html. * * Aesthetic: literary, editorial. Dark ink on warm paper. * Reference: small-press novel covers, not SaaS marketing pages. * ============================================================ */ :root { /* Warm, paper-like palette — DEFAULT (light) */ --ink: #1a1612; --ink-muted: #4a423a; --ink-faint: #8a8178; --paper: #f4efe7; --paper-darker: #ece5d8; --rule: #d9d1c3; --accent: #6b2b1d; /* oxblood — sparingly */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'EB Garamond', 'Georgia', serif; --font-ui: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --max-reading: 38rem; /* ~65ch in EB Garamond at 20px */ --max-wide: 52rem; } /* ============================================================ * SITE THEMES — sepia / dark * * Applied by theme.js setting data-theme="sepia" | "dark" on * . Light is the default (no attribute), so a fresh visitor * who never opens Settings sees the unchanged baseline. * * The token names stay the same across themes — only their * values rotate. That means every existing rule that uses * var(--ink) on var(--paper) keeps working in all three themes * with no per-theme rule needed. New page-specific styles get * theming for free as long as they reference the tokens. * * The reader inside book.html uses its OWN scoped --reader-* * tokens (see book.html .reader[data-theme]) so the in-reader * theme picker remains independent of the site theme. A user * who likes a dark site but light prose-reading can have both. * ============================================================ */ [data-theme="sepia"] { /* Same warm-paper feel as light, shifted toward amber. Reads * comfortably in low ambient light without the contrast crash * of full dark mode. Ink slightly less black so the page feels * aged rather than printed. */ --ink: #3a2c1c; --ink-muted: #6c5a47; --ink-faint: #a08c70; --paper: #f1e7d3; --paper-darker: #e6d9bf; --rule: #d6c5a3; --accent: #8a3a20; } [data-theme="dark"] { /* Dark with a warm cast — cool blue-blacks would fight the * literary register. Background sits at near-black but with a * touch of brown so it doesn't read as a code editor. */ --ink: #e6dccb; --ink-muted: #a89f8d; --ink-faint: #6f6759; --paper: #1c1916; --paper-darker: #14110e; --rule: #3a342d; --accent: #c97a55; /* lifted oxblood — original is unreadable on dark */ } /* Smooth the theme swap so a deliberate change feels considered * rather than jarring. Skip animation on the very-first paint by * scoping to : the html element is themed before * exists (theme.js runs in ), so the first paint is already * correct and there's nothing to animate. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 20px; line-height: 1.65; font-feature-settings: "liga", "onum", "kern"; -webkit-font-smoothing: antialiased; transition: background-color 220ms ease, color 220ms ease; } p { margin: 0 0 1.2em; text-wrap: pretty; } em { font-style: italic; } a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-faint); transition: text-decoration-color 200ms ease; } a:hover { text-decoration-color: var(--ink); } img { max-width: 100%; height: auto; display: block; } /* ============================================================ * MASTHEAD — used on every page except catalog (which has its * own variant in catalog.css with the tagline strip). * ============================================================ */ .site-masthead { padding: 1.6rem 2rem 1.4rem; border-bottom: 1px solid var(--rule); background: var(--paper); } .site-masthead-inner { max-width: 76rem; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; } .site-brand { text-decoration: none; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.55rem; font-family: var(--font-display); } .site-brand .mark { display: inline-block; font-weight: 900; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; padding: 0.15rem 0.45rem 0.2rem; background: var(--ink); color: var(--paper); } .site-brand .name { font-style: italic; font-weight: 500; font-size: 1.3rem; font-variation-settings: "opsz" 24; letter-spacing: -0.01em; } .site-nav { display: flex; gap: 2rem; font-family: var(--font-ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; } .site-nav a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } /* ============================================================ * SITE SEARCH — masthead search form * Sits between the brand and the nav on every page. GET-form to * /catalog?q=…; catalog page reads the param and runs the search. * ============================================================ */ .site-search { flex: 1; max-width: 22rem; margin: 0 1rem; position: relative; } .site-search-input { width: 100%; padding: 0.45rem 0.7rem 0.45rem 2rem; font-family: var(--font-body); font-size: 0.95rem; background: var(--paper-darker, var(--paper)); border: 1px solid var(--rule); color: var(--ink); border-radius: 0; } .site-search-input::placeholder { color: var(--ink-faint); font-style: italic; } .site-search-input:focus { outline: none; border-color: var(--ink); background: var(--paper); } .site-search-icon { position: absolute; top: 50%; left: 0.65rem; transform: translateY(-50%); color: var(--ink-faint); font-size: 0.95rem; line-height: 1; pointer-events: none; } .site-search-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ============================================================ * FOOTER — used on every page. * ============================================================ */ .site-footer { margin-top: 6rem; padding: 3rem 2rem 4rem; border-top: 1px solid var(--rule); background: var(--paper); } .site-footer-inner { max-width: 76rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem; font-family: var(--font-ui); font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.06em; } .site-footer-brand { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--ink-muted); letter-spacing: 0; } .site-footer-nav { display: flex; gap: 1.6rem; } .site-footer-nav a { color: var(--ink-muted); text-decoration: none; text-transform: uppercase; } .site-footer-nav a:hover { color: var(--ink); } .site-footer-copy { color: var(--ink-faint); } /* ============================================================ * BUTTONS — shared between pages and the catalog. Catalog also * defines variants (.btn-solid, .btn-ghost) in catalog.css; those * stay there for proximity to the styles that use them. * ============================================================ */ .btn { cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 0.75rem 1.4rem; font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; transition: background 200ms ease, color 200ms ease; text-decoration: none; display: inline-block; } .btn:hover { background: var(--accent); border-color: var(--accent); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ============================================================ * RESPONSIVE — masthead / footer / typography * * The masthead and footer are reused on every public page. The * landing page has its own breakpoints for its content; this * block ensures the chrome (header + footer) breaks gracefully * on tablet and mobile regardless of which page is rendering. * * 720px (tablet): * - masthead horizontal padding tightens * - nav gap closes up; nav items wrap below the brand if * they don't fit on one line * * 520px (phone): * - body type drops one notch (20px → 18px) to keep line * length readable on narrow screens * - masthead becomes a stacked column: brand on top, nav * below, both centered * - footer reflows brand → links → copy as a centered stack * ============================================================ */ @media (max-width: 720px) { .site-masthead { padding: 1.2rem 1.2rem 1rem; } .site-masthead-inner { gap: 1rem; flex-wrap: wrap; } .site-nav { gap: 1.2rem; } .site-search { max-width: 100%; margin: 0; order: 3; flex: 1 0 100%; } .site-footer { margin-top: 4rem; padding: 2.4rem 1.2rem 3rem; } .site-footer-inner { gap: 1.2rem; } .site-footer-nav { gap: 1rem 1.4rem; flex-wrap: wrap; } } @media (max-width: 520px) { body { font-size: 18px; } .site-masthead { padding: 1rem 1rem 0.9rem; } .site-masthead-inner { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .site-nav { gap: 1rem; flex-wrap: wrap; font-size: 0.72rem; letter-spacing: 0.14em; } .site-brand .mark { font-size: 1.25rem; } .site-brand .name { font-size: 1.15rem; } .site-footer-inner { flex-direction: column; align-items: flex-start; } } /* ============================================================ * SETTINGS DROPDOWN — anchored off the masthead's Account link. * * Built and inserted by theme.js on every public page. Holds the * site theme picker (light / sepia / dark). Future settings can * be added as more sections under the existing Theme section. * ============================================================ */ .nav-settings-btn { cursor: pointer; background: none; border: none; color: var(--ink-muted); font-family: var(--font-display); font-size: 1.2rem; line-height: 1; padding: 0 0.3rem; margin-left: -0.5rem; /* tighten gap to the Account link */ transition: color 200ms ease; } .nav-settings-btn:hover, .nav-settings-btn[aria-expanded="true"] { color: var(--ink); } .nav-settings-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 200; min-width: 14rem; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); padding: 0.9rem 1rem 1rem; } .nav-settings-menu[hidden] { display: none; } .nav-settings-section { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem; } .nav-settings-themes { display: inline-flex; border: 1px solid var(--rule); width: 100%; } .nav-settings-themes button { flex: 1; cursor: pointer; background: none; border: none; color: var(--ink-muted); font-family: var(--font-ui); font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.5rem 0.6rem; transition: background-color 150ms ease, color 150ms ease; } .nav-settings-themes button + button { border-left: 1px solid var(--rule); } .nav-settings-themes button:hover { color: var(--ink); } /* Active theme reverses the ink/paper relationship. Works in * every theme because both tokens rotate together. */ .nav-settings-themes button[aria-checked="true"] { background: var(--ink); color: var(--paper); } /* Mobile: when the masthead stacks (see @media at top of file), * the absolute menu would float in dead space at the right edge. * Switch it to inline flow under the nav, full-width. */ @media (max-width: 720px) { .nav-settings-menu { position: static; margin-top: 0.6rem; width: 100%; } }