/* ========================================================================== Newspaper Design System — Public CSS variable contract -------------------------------------------------------------------------- Used by: weekly-ai-digest skill (and any future "newspaper-aesthetic" page). Companion template: .claude/skills/weekly-ai-digest/assets/newspaper-template.html This stylesheet ships the full skeleton (masthead, multi-column grid, article card, pull-quote, divider, editorial box, responsive + print rules) for a centered "newspaper" page. Per-issue pages should ONLY: 1. 2. Optionally inline a block to override any of the variables below — typically nothing is overridden. PUBLIC VARIABLE CONTRACT ------------------------ Color palette (cream-paper / black-ink / dark-red accent): --cream #f5f0e8 subdued background for detail boxes / editorial --paper #faf7f0 inner page background (the "sheet" itself) --page-bg #e8e0d0 outer body background, behind the sheet --ink #1a1a1a primary text + heavy rules --ink-light #4a4a4a secondary body text --ink-faint #8a8a7a meta / labels / tagline --rule #2a2a2a structural rules (borders, dividers) --rule-light #c8c0b0 light rules between articles/columns --accent #8b0000 dark-red — drop cap, stat numbers, links Layout: --col-gap 28px column-gap inside .headline-columns --paper-max-w 960px max width of the .newspaper sheet Fonts (loaded by @import below — no override needed in 99% of cases): Playfair Display (display serif, masthead/headlines/stat numbers) Noto Serif SC (body Chinese serif) Noto Sans SC (sans labels / meta) EXAMPLE OVERRIDE (per-issue, in the page ): NO override is required for a standard issue. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap'); :root { --cream: #f5f0e8; --paper: #faf7f0; --page-bg: #e8e0d0; --ink: #1a1a1a; --ink-light: #4a4a4a; --ink-faint: #8a8a7a; --rule: #2a2a2a; --rule-light: #c8c0b0; --accent: #8b0000; --col-gap: 28px; --paper-max-w: 960px; } * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { padding-left: 1.5em; } body { font-family: 'Noto Serif SC', 'Georgia', serif; background: var(--page-bg); color: var(--ink); line-height: 1.85; -webkit-font-smoothing: antialiased; } /* Newspaper container */ .newspaper { max-width: var(--paper-max-w); margin: 40px auto; background: var(--paper); padding: 48px 52px 60px; box-shadow: 0 4px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); position: relative; } .newspaper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--ink); } .newspaper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--ink); } /* Masthead */ .masthead { text-align: center; padding-bottom: 16px; border-bottom: 4px double var(--rule); margin-bottom: 4px; } .masthead-top { display: flex; justify-content: space-between; align-items: center; font-family: 'Noto Sans SC', sans-serif; font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .masthead h1 { font-family: 'Playfair Display', 'Noto Serif SC', serif; font-size: clamp(42px, 7vw, 68px); font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: var(--ink); } .masthead .tagline { font-family: 'Noto Sans SC', sans-serif; font-size: 13px; color: var(--ink-faint); letter-spacing: 3px; text-transform: uppercase; margin-top: 8px; } .edition-bar { display: flex; justify-content: space-between; align-items: center; font-family: 'Noto Sans SC', sans-serif; font-size: 11px; color: var(--ink-faint); padding: 8px 0; border-bottom: 1px solid var(--rule); margin-bottom: 24px; } /* Stats bar */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 24px 0; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); } .stat { text-align: center; padding: 16px 8px; border-right: 1px solid var(--rule-light); } .stat:last-child { border-right: none; } .stat-number { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 900; color: var(--accent); line-height: 1.2; } .stat-label { font-family: 'Noto Sans SC', sans-serif; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.5px; margin-top: 4px; } /* Headline story */ .headline-story { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-light); } .headline-story h2 { font-family: 'Playfair Display', 'Noto Serif SC', serif; font-size: clamp(28px, 4vw, 38px); font-weight: 900; line-height: 1.2; margin-bottom: 12px; letter-spacing: -0.5px; } .headline-story .lead { font-size: 18px; font-weight: 600; line-height: 1.7; margin-bottom: 16px; color: var(--ink); } .headline-columns { columns: 2; column-gap: var(--col-gap); column-rule: 1px solid var(--rule-light); } .headline-columns p { font-size: 15px; text-align: justify; margin-bottom: 12px; text-indent: 2em; } .headline-columns p:first-child { text-indent: 0; } .headline-columns p:first-child::first-letter { font-family: 'Playfair Display', serif; float: left; font-size: 58px; line-height: 0.85; padding-right: 8px; padding-top: 4px; font-weight: 900; color: var(--accent); } /* Multi-column layouts */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 28px; } .two-col > .col { padding: 0 20px; } .two-col > .col:first-child { padding-left: 0; border-right: 1px solid var(--rule-light); } .two-col > .col:last-child { padding-right: 0; } .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-bottom: 28px; } .three-col > .col { padding: 0 16px; border-right: 1px solid var(--rule-light); } .three-col > .col:first-child { padding-left: 0; } .three-col > .col:last-child { padding-right: 0; border-right: none; } /* Article card */ .article { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-light); cursor: pointer; transition: background 0.2s; } .article:last-child { border-bottom: none; margin-bottom: 0; } .article:hover { background: rgba(139,0,0,0.02); } .article-num { font-family: 'Playfair Display', serif; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .article-num::after { content: ''; flex: 1; height: 1px; background: var(--rule-light); } .article h3 { font-family: 'Playfair Display', 'Noto Serif SC', serif; font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; letter-spacing: -0.3px; } .article .summary-text { font-size: 14px; line-height: 1.8; color: var(--ink-light); text-align: justify; } /* Expandable details */ .article-details { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .article.open .article-details { max-height: 800px; } .detail-section { margin-top: 14px; padding: 14px 16px; background: var(--cream); border-left: 3px solid var(--accent); } .detail-label { font-family: 'Noto Sans SC', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 4px; } .detail-section p { font-size: 14px; line-height: 1.75; color: var(--ink-light); } .detail-section strong { color: var(--ink); } .source-link { display: inline-block; margin-top: 12px; font-family: 'Noto Sans SC', sans-serif; font-size: 12px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: opacity 0.2s; } .source-link:hover { opacity: 0.7; } .click-hint { font-family: 'Noto Sans SC', sans-serif; font-size: 11px; color: var(--ink-faint); margin-top: 6px; transition: opacity 0.3s; } .article.open .click-hint { opacity: 0; } /* Pull quote */ .pull-quote { border-top: 3px solid var(--rule); border-bottom: 3px solid var(--rule); padding: 20px 8px; margin: 28px 0; text-align: center; } .pull-quote p { font-family: 'Playfair Display', 'Noto Serif SC', serif; font-size: 20px; font-style: italic; font-weight: 700; line-height: 1.6; color: var(--ink); } .pull-quote .attribution { font-family: 'Noto Sans SC', sans-serif; font-size: 12px; font-style: normal; font-weight: 400; color: var(--ink-faint); margin-top: 8px; letter-spacing: 1px; text-transform: uppercase; } /* Section dividers */ .section-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); } .section-divider span { font-family: 'Noto Sans SC', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } /* Editorial box */ .editorial-box { background: var(--cream); border: 2px solid var(--rule); padding: 28px 32px; margin-top: 32px; position: relative; } .editorial-box::before { content: '编者按'; position: absolute; top: -12px; left: 24px; background: var(--cream); padding: 0 12px; font-family: 'Noto Sans SC', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); } .editorial-box p { font-size: 15px; line-height: 1.85; text-align: justify; } .editorial-box strong { color: var(--ink); } /* Print button */ .print-btn { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); border: none; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s; z-index: 50; } .print-btn:hover { transform: scale(1.1); } /* Responsive */ @media (max-width: 768px) { .newspaper { padding: 28px 20px 40px; margin: 16px 12px; } .headline-columns { columns: 1; } .two-col { grid-template-columns: 1fr; } .two-col > .col { padding: 0 !important; border-right: none !important; } .two-col > .col:first-child { padding-bottom: 24px !important; border-bottom: 1px solid var(--rule-light); margin-bottom: 24px; } .three-col { grid-template-columns: 1fr; } .three-col > .col { padding: 0 !important; border-right: none !important; border-bottom: 1px solid var(--rule-light); padding-bottom: 24px !important; margin-bottom: 24px; } .three-col > .col:last-child { border-bottom: none; } .stats-bar { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } } @media print { body { background: #fff; } .newspaper { box-shadow: none; margin: 0; padding: 24px; } .print-btn { display: none; } .article-details { max-height: none !important; } .click-hint { display: none; } }