body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin: 0; color: #222; line-height: 1.5; /* Cream that matches the watercolor banner's paper background, so the page reads as one continuous piece of paper below the masthead. */ background: #fdfaf1; } /* Page width / centering lives on .page-frame, NOT body. Email clients (Gmail in particular) strip styles entirely, replacing it with their own container. A wrapper element with both this CSS class AND inline styles survives that strip and gives us a single render that works in both web and email contexts. The render code in src/web.lisp sets matching inline styles on the .page-frame element. */ .page-frame { max-width: 720px; margin: 2rem auto; padding: 0 1rem; } header h1 { font-size: 1.5rem; margin: 0 0 1.5rem; border-bottom: 2px solid #1a4477; padding-bottom: 0.5rem; } .site-header { /* Float-based two-column layout (title left, date right). Gmail strips display:flex but respects float, so this works in both web and email. overflow:hidden contains the floats so the bottom border draws under both. */ overflow: hidden; border-bottom: 2px solid #1a4477; padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .site-header .site-title { float: left; font-size: 0.95rem; font-weight: normal; color: #555; margin: 0; border: 0; padding: 0; } .site-header .site-title a { color: inherit; text-decoration: none; } .site-header .site-title a:hover { text-decoration: underline; } .site-header .site-date { float: right; color: #555; font-size: 0.95rem; font-weight: normal; white-space: nowrap; } @media (max-width: 480px) { .site-header .site-title, .site-header .site-date { font-size: 0.85rem; } } /* Watercolor banner under the text masthead. The image is 2000x285 so it can scale up cleanly on wide displays; max-width:100% keeps it from overflowing on narrow viewports + Gmail. height:auto preserves the 7:1 aspect ratio. */ .hero-banner-link { display: block; margin: 0 0 0.75rem; } .hero-banner { display: block; width: 100%; max-width: 100%; height: auto; border: 0; } .news-feed, .stories { list-style: none; padding: 0; margin: 0; } .day-heading-item { list-style: none; } .day-heading { font-size: 1.1rem; font-weight: 500; color: #555; margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid #ccc; } .day-heading-item:first-child .day-heading { margin-top: 0.25rem; } .story { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; padding: 0.75rem 1rem; background: #ffffff; border-radius: 4px; border: 1px solid #ece4cc; } /* Story thumbnail. Earlier we had a fixed 100x100 cover-cropped square (object-fit: cover + overflow: hidden on the wrapper). It looked uniform on the web, but email clients render object-fit and overflow inconsistently, producing aggressive sides-cropped strips. We now use natural-aspect-ratio thumbnails fixed at 100px wide. Web and email render identically. */ .story-image-link { flex: 0 0 auto; display: inline-block; } .story-image { width: 100px; height: auto; display: block; border-radius: 4px; } .story-text { flex: 1 1 auto; min-width: 0; } .story .headline { font-size: 1.15rem; margin: 0 0 0.4rem; } .story .headline a { color: #1a4477; text-decoration: none; } .story .headline a:hover { text-decoration: underline; } .story .summary { margin: 0; color: #444; } .story .read-more { color: #1a4477; text-decoration: none; white-space: nowrap; margin-left: 0.25rem; } .story .read-more:hover { text-decoration: underline; } .empty { color: #777; font-style: italic; } /* ----------------- Ads on the news page ----------------- */ .ads-section { margin-bottom: 2rem; } .ad-list { list-style: none; padding: 0; margin: 0; } .ad-card { margin-bottom: 1.25rem; padding: 0.75rem 1rem; border-left: 3px solid #1a4477; background: #f7f9fc; border-radius: 0 4px 4px 0; } .ad-card-label { display: block; font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .ad-headline { font-size: 1.1rem; margin: 0 0 0.25rem; line-height: 1.25; } .ad-headline a { color: #1a4477; text-decoration: none; } .ad-headline a:hover { text-decoration: underline; } .ad-content > *:first-child { margin-top: 0; } .ad-content > *:last-child { margin-bottom: 0; } .ad-content p { margin: 0.25rem 0; } .ad-content img { max-width: 100%; height: auto; } /* ----------------- Ads admin ----------------- */ .ads-admin { max-width: 720px; } .ad-add-form { margin-bottom: 1rem; } .ad-add-form .btn-add { padding: 0.5rem 1rem; background: #1a4477; color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-size: 0.95rem; } .ad-add-form .btn-add:hover { background: #143560; } .ad-row { margin-bottom: 1.5rem; } .ad-row-actions { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.5rem; padding: 0 0.5rem; } .ad-row-name { flex: 1 1 auto; font-size: 0.85rem; color: #666; font-style: italic; } .btn-edit, .btn-save, .btn-delete, .btn-cancel { padding: 0.35rem 0.8rem; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .btn-edit { border-color: #1a4477; color: #1a4477; } .btn-edit:hover { background: #f0f4fa; } .btn-save { border-color: #1a4477; color: #1a4477; } .btn-save:hover { background: #f0f4fa; } .btn-delete { border-color: #b00; color: #b00; } .btn-delete:hover { background: #fdf0f0; } .btn-cancel { color: #555; } .btn-cancel:hover { background: #f4f4f4; } .ad-delete-form { display: inline; margin: 0; } .ad-edit-panel { border: 1px solid #cfd6e0; border-radius: 6px; padding: 1rem; background: #fbfcff; margin-top: 0.25rem; } .ad-field { display: block; margin-bottom: 0.6rem; } .ad-field-label { display: block; font-size: 0.75rem; color: #555; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; } .ad-name-input, .ad-headline-input, .ad-headline-url-input { width: 100%; font-size: 0.95rem; padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .ad-toolbar { margin: 0.25rem 0 0.4rem; display: flex; gap: 0.4rem; } .ad-toolbar button { padding: 0.25rem 0.6rem; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer; font-family: ui-monospace, monospace; font-weight: 600; } .ad-toolbar button:hover { background: #f4f4f4; } .ad-html-input { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; resize: vertical; box-sizing: border-box; margin-bottom: 0.6rem; } .ad-live-preview { margin: 0.25rem 0 0.75rem; } .ad-form-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* Admin send pipeline pages (/admin/send-now, /admin/sends, /admin/sends/:date) */ .admin-page { padding: 0.5rem 0; } .admin-page h1 { margin: 0 0 1rem; } .admin-nav { margin-top: 2rem; color: #888; font-size: 0.9rem; } .admin-nav a { color: #1a4477; text-decoration: none; } .admin-nav a:hover { text-decoration: underline; } .admin-menu { list-style: none; padding: 0; margin: 0; } .admin-menu li { margin: 0.5rem 0; } .admin-menu a { display: inline-block; padding: 0.6rem 1rem; background: #f7f9fc; border-left: 3px solid #1a4477; border-radius: 0 4px 4px 0; color: #1a4477; text-decoration: none; font-weight: 600; } .admin-menu a:hover { background: #eaf0f8; } .admin-send-form { margin: 1rem 0; } .btn-send { font-size: 1.1rem; padding: 0.6rem 1.2rem; background: #1a4477; color: white; border: none; border-radius: 4px; cursor: pointer; } .btn-send:hover { background: #143560; } .status-info { color: #1a4477; } .status-success { color: #2a7a2a; } .status-error { color: #b22; } .status-in_progress { color: #1a4477; font-weight: 500; } .status-succeeded { color: #2a7a2a; font-weight: 500; } .status-failed { color: #b22; font-weight: 500; } .status-sent { color: #2a7a2a; } .status-bounced { color: #b22; } .sends-table, .email-sends-table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; } .sends-table th, .sends-table td, .email-sends-table th, .email-sends-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #e5e5e5; } .sends-table th, .email-sends-table th { background: #f5f5f5; font-weight: 600; } .sends-table a { color: #1a4477; text-decoration: none; } .sends-table a:hover { text-decoration: underline; } .send-summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; } .send-summary dt { font-weight: 600; color: #555; } .send-summary dd { margin: 0; } /* ============================================================ Subscribe page — designed conversion flow Focus: hero + value prop, trustworthy form, mobile-first, warm but disciplined. Pairs with the success-state result pages below. ============================================================ */ .subscribe-hero { /* Negative side margins bleed the painterly hero to the .page-frame edges (which have padding: 0 1rem). */ margin: 0 -1rem 1.25rem; } .subscribe-hero-image { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; } .subscribe-headline { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; color: #143560; letter-spacing: -0.01em; } @media (min-width: 600px) { .subscribe-headline { font-size: 1.95rem; } } .subscribe-subhead { font-size: 1.05rem; color: #444; margin: 0; line-height: 1.5; } .subscribe-subhead strong { color: #1a4477; font-weight: 600; } .subscribe-value-list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; } .subscribe-value-list li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; color: #333; line-height: 1.45; } .subscribe-value-list li::before { content: "→"; position: absolute; left: 0; top: 0.4rem; color: #1a4477; font-weight: 700; } /* The form gets a subtle card treatment so it reads as a clear call-to-action, but stays restrained — no big splash. */ .subscribe-form { background: #f7f9fc; border: 1px solid #cfd6e0; border-radius: 8px; padding: 1.25rem; margin: 1rem 0 0.75rem; } @media (min-width: 600px) { .subscribe-form { padding: 1.5rem; } } .subscribe-form .subscribe-field { display: block; margin-bottom: 0.85rem; } .subscribe-field-label { display: block; font-size: 0.78rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; } /* 16px+ inputs prevent iOS Safari's auto-zoom on focus. */ .subscribe-email-input, .subscribe-name-input { width: 100%; font-size: 1rem; font-family: inherit; padding: 0.65rem 0.75rem; border: 1px solid #cfd6e0; border-radius: 6px; background: #fff; color: #222; box-sizing: border-box; transition: border-color 0.12s, box-shadow 0.12s; } .subscribe-email-input:focus, .subscribe-name-input:focus { outline: none; border-color: #1a4477; box-shadow: 0 0 0 3px rgba(26, 68, 119, 0.15); } /* First/last name stack on phones, side-by-side on tablet+. */ .subscribe-name-row { display: block; } @media (min-width: 480px) { .subscribe-name-row { display: flex; gap: 0.85rem; } .subscribe-name-row .subscribe-field { flex: 1 1 50%; } } .subscribe-form .cf-turnstile { margin: 0.5rem 0 1rem; } /* The CTA button is the thing that needs to look CLICKABLE. Big touch target, full width on mobile, weight to it. */ .btn-subscribe { display: block; width: 100%; font-size: 1.05rem; font-weight: 600; font-family: inherit; padding: 0.85rem 1rem; background: #1a4477; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-top: 0.25rem; transition: background 0.12s, transform 0.05s; min-height: 44px; } .btn-subscribe:hover { background: #143560; } .btn-subscribe:active { transform: translateY(1px); } .btn-subscribe:focus { outline: 3px solid rgba(26, 68, 119, 0.4); outline-offset: 2px; } .subscribe-trust { text-align: center; color: #777; font-size: 0.85rem; margin: 1rem 0 0.5rem; letter-spacing: 0.01em; } .subscribe-error { background: #fdf0f0; border-left: 3px solid #b22; color: #7a1212; padding: 0.75rem 1rem; border-radius: 0 4px 4px 0; margin: 1rem 0; } /* Civic-stamp polish: gold diamond bullet glyph (overrides the default "→" rule above), gold divider above the form, and a muted small-caps footer line under the trust line. The colors key off the gold ornament in the watercolor masthead. */ .subscribe-value-list li::before { content: "◆"; color: #b8911e; font-weight: 400; font-size: 0.85rem; top: 0.5rem; } .subscribe-divider { border: 0; border-top: 1px solid #d4b87a; margin: 1.25rem 0 1rem; } .subscribe-stamp { font-size: 0.72rem; color: #999; letter-spacing: 0.09em; text-transform: uppercase; text-align: center; margin: 0.75rem 0 0; } /* Open-tracking disclosure on /subscribe and the unsubscribed page. Quiet typography — informational, not a CTA. */ .subscribe-fineprint { text-align: center; color: #888; font-size: 0.78rem; line-height: 1.5; margin: 0.5rem 0 0.75rem; max-width: 30rem; margin-left: auto; margin-right: auto; } .result-section-heading { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #333; } .result-data-list { font-size: 0.9rem; color: #555; padding-left: 1.5rem; line-height: 1.5; } .result-data-list li { margin: 0.4rem 0; } .result-erasure { font-size: 0.85rem; color: #666; margin-top: 0.75rem; } /* ============================================================ Subscribe result pages (post-POST states) /subscribe POST returns one of these states. They all share the centered, calm layout — the affirmation is the point. ============================================================ */ .subscribe-result { text-align: center; padding: 2.5rem 0.5rem 1.5rem; } .subscribe-result h2 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; line-height: 1.2; } @media (min-width: 600px) { .subscribe-result h2 { font-size: 2.4rem; } } .subscribe-result.success h2 { color: #1f6b1f; } .subscribe-result.info h2 { color: #143560; } .subscribe-result.error h2 { color: #993333; } .result-detail { font-size: 1.05rem; line-height: 1.5; color: #333; max-width: 32rem; margin: 0 auto 1rem; } .result-tip { background: #fff8e1; border: 1px solid #f0d97e; border-left: 3px solid #d4a017; padding: 0.85rem 1rem; text-align: left; border-radius: 4px; max-width: 32rem; margin: 1.5rem auto; color: #6a5300; } .result-tip p { margin: 0; } .result-tip code { background: #fff; border: 1px solid #f0d97e; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.92em; color: #5a4500; } .result-back { margin-top: 2rem; font-size: 0.95rem; } .result-back a { color: #1a4477; text-decoration: none; } .result-back a:hover { text-decoration: underline; }