/* HSB Simulator — a Harz regional paper printed on warm newsprint. Deliberately not the sister site: cream stock instead of white, a nameplate pushed to the left with a timetable panel beside it, a black nav band, and forest green where a newspaper would normally spend red. */ :root { --color-ink: #17140f; /* warm black, the colour of ink soaked into paper */ --color-paper: #f6f2e8; /* newsprint stock */ --color-paper-lit: #fffdf7; /* boxes lifted off the stock */ --color-green: #1f4d33; /* the single accent: HSB forest, signals and rules */ --color-brass: #8a6a2f; /* second-hand accent for dates and metadata only */ --color-graphite: #4a453d; --color-slate: #6f6960; --color-hairline: #d5cdbc; --font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --page: 960px; /* In px, not ch: ch is relative to each element's own font-size, so a ch-based measure makes headings wider than the text under them. */ --column: 700px; } * { box-sizing: border-box; } body { font-family: var(--font-body); font-size: 18px; line-height: 1.62; color: var(--color-ink); background: var(--color-paper); max-width: var(--page); margin: 0 auto; padding: 0 20px 72px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-hairline); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--color-green); } /* ------------------------------------------------------------------ masthead Full-bleed without a wrapper element: every page puts its content straight in , so the bleed is bought with margins instead of markup. */ .masthead, .nav-strip { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(20px, calc(50vw - var(--page) / 2)); padding-right: max(20px, calc(50vw - var(--page) / 2)); } .masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding-top: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--color-ink); background: var(--color-paper); } .masthead-kicker, .edition { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-green); margin: 0 0 6px; } .masthead-name, .nameplate-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 7vw, 62px); line-height: 0.94; letter-spacing: -0.02em; margin: 0; color: var(--color-ink); text-decoration: none; } .masthead-tagline, .nameplate-tagline { font-style: italic; font-size: 16px; color: var(--color-slate); margin: 8px 0 0; max-width: 42ch; } /* The timetable panel — three facts set like a train-station board. This is the piece that makes the page recognisable at a glance. */ .dateline { display: flex; gap: 0; margin: 0; border: 1px solid var(--color-ink); background: var(--color-paper-lit); } .dateline > div { padding: 8px 14px; min-width: 96px; } .dateline > div + div { border-left: 1px solid var(--color-hairline); } .dateline dt { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-slate); } .dateline dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Nav is a solid ink band — the sister site keeps its nav on white, this one does not, and that alone reads as a different paper. */ .nav-strip { background: var(--color-ink); border-bottom: 3px solid var(--color-green); margin-bottom: 40px; position: sticky; top: 0; z-index: 10; padding-top: 0; padding-bottom: 0; display: flex; flex-wrap: wrap; } .nav-strip a { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-paper); text-decoration: none; padding: 12px 18px 11px; border-bottom: 3px solid transparent; margin-bottom: -3px; } .nav-strip a:hover { background: rgba(255, 255, 255, 0.08); } .nav-strip a.current { border-bottom-color: var(--color-green); background: rgba(255, 255, 255, 0.06); } /* ------------------------------------------------------------------- article */ /* Everything in the running text keeps a reading measure, and that measure sits in the middle of the page — a column hugging the left edge with dead space to the right is what a draft looks like, not what a paper looks like. Scoped to body's own children so the ruled columns of the well are left alone. */ body > h1, body > h2, body > h3, body > p, body > ul, body > ol, body > .faq-item, body > .summary, body > .info-banner, body > blockquote, body > .notice-date, body > .wp-block-columns, body > .wp-block-buttons, body > div:not(.well):not(.dateline) { margin-left: auto; margin-right: auto; } h1 { font-family: var(--font-head); font-size: clamp(32px, 5vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 auto 16px; max-width: var(--column); } h2 { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.25; margin: 2.4em 0 0.5em; padding-top: 12px; border-top: 2px solid var(--color-green); max-width: var(--column); } h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin: 1.8em 0 0.4em; max-width: var(--column); } p, ul, ol, .faq-item, .summary, .info-banner, blockquote, .notice-date { max-width: var(--column); } figure, hr, .wp-block-separator, .well { max-width: none; } ul, ol { padding-left: 1.2em; } li { margin: 0.3em 0; } .lede { font-size: 20px; } .lede::first-letter { float: left; font-family: var(--font-head); font-weight: 700; font-size: 74px; line-height: 0.76; padding: 6px 10px 0 0; color: var(--color-green); } figure { margin: 32px 0; max-width: 100%; } figure img { border: 1px solid var(--color-hairline); } figcaption { font-family: var(--font-sans); font-size: 13px; color: var(--color-slate); margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--color-green); } hr, .wp-block-separator { border: none; border-top: 1px solid var(--color-hairline); margin: 44px 0; } code { font-family: ui-monospace, Menlo, monospace; font-size: 0.88em; background: var(--color-paper-lit); border: 1px solid var(--color-hairline); padding: 1px 5px; } blockquote { border-left: 3px solid var(--color-green); margin: 28px 0; padding-left: 18px; font-style: italic; color: var(--color-graphite); } /* Answer-first summary — a boxed standfirst, ruled top and bottom */ .summary { background: var(--color-paper-lit); border-top: 3px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); padding: 18px 22px; margin: 0 0 36px; } .summary-title, .summary .kicker { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-green); margin: 0 0 8px; } .summary ul { margin: 0; } .info-banner { background: var(--color-ink); color: var(--color-paper); padding: 24px 26px; margin: 40px 0; } .info-banner h3 { margin-top: 0; color: var(--color-paper); } .info-banner a { color: var(--color-paper); text-decoration-color: var(--color-green); } /* FAQ and the Wissen archive share one entry shape: ruled rows, no cards */ .faq-item { border-top: 1px solid var(--color-hairline); padding: 16px 0 4px; max-width: var(--column); } .faq-item strong { display: block; font-size: 19px; line-height: 1.3; margin-bottom: 4px; } .faq-item p { margin: 0 0 8px; color: var(--color-graphite); } /* ------------------------------------------------------------- the Wissen well Three ruled columns, the way a paper sets its briefs page. */ .well { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 8px 0 24px; border-top: 3px solid var(--color-ink); } .well .notice { padding: 18px 0 20px 28px; border-left: 1px solid var(--color-hairline); } /* The newest piece runs across the page as the lead; the rest set as briefs underneath it, so the first column of every brief row loses its rule. */ .well .notice:first-child { grid-column: 1 / -1; border-left: none; padding-left: 0; padding-bottom: 24px; border-bottom: 1px solid var(--color-hairline); } .well .notice:first-child h3 { font-size: clamp(26px, 3.4vw, 34px); max-width: var(--column); } .well .notice:first-child p { font-size: 18px; max-width: var(--column); } .well .notice:nth-child(3n + 2) { border-left: none; padding-left: 0; } .notice-date { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brass); margin: 0 0 6px; } .notice h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; } .notice h3 a { text-decoration: none; } .notice h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-green); } .notice p { font-size: 16px; color: var(--color-graphite); margin: 0; } /* On a phone a wrapped nav band would stick two rows of chrome to the top of every scroll, so it stays one row and scrolls sideways instead. */ @media (max-width: 640px) { .nav-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .nav-strip a { padding: 11px 14px 10px; white-space: nowrap; } } @media (max-width: 780px) { .well { grid-template-columns: repeat(2, 1fr); } .well .notice { border-left: 1px solid var(--color-hairline); padding-left: 28px; } .well .notice:nth-child(even) { border-left: none; padding-left: 0; } .well .notice:first-child { border-left: none; padding-left: 0; } } @media (max-width: 540px) { .well { grid-template-columns: 1fr; } .well .notice, .well .notice:nth-child(odd) { border-left: none; padding-left: 0; border-top: 1px solid var(--color-hairline); } .well .notice:first-child { border-top: none; } .dateline { width: 100%; } } /* ------------------------------------------------------------------- footer */ footer.colophon { margin-top: 64px; padding-top: 20px; border-top: 3px double var(--color-ink); } .has-small-font-size { font-family: var(--font-sans); font-size: 12px; line-height: 1.7; color: var(--color-slate); letter-spacing: 0.01em; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } /* --------------------------------------- Gutenberg classes in restored content */ .wp-block-columns { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin: 28px 0; } .wp-block-column { flex: 1 1 260px; min-width: 0; } .wp-block-column + .wp-block-column { border-left: 1px solid var(--color-hairline); padding-left: 32px; } .wp-block-column figure { margin: 0; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; list-style: none; padding: 0; } .wp-block-button__link { display: inline-block; font-family: var(--font-sans); background: var(--color-green); color: var(--color-paper); padding: 10px 18px; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; } .wp-block-button__link:hover { background: var(--color-ink); }