/* --------------------------------------------------------------------------- news — Die Maschinenzeitung A printed broadsheet rendered in the browser: newsprint stock, a blackletter nameplate, folio dateline strips, thick/thin masthead rules, hairline column rules and justified, hyphenated body type set in real news columns — with a machine-telemetry mono line kept as deliberate old-world / futuristic tension, because every word on this page was set by a machine, on the hour. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Newsprint stock — a warm, slightly greyed paper that never reads as white. */ --paper: #efe7d4; --paper-edge: #e5dcc4; --ink: #201d16; --ink-soft: #6b6252; --rule: #c9bda2; --rule-strong: #b0a284; --accent: #a52a1a; /* The desk the sheet lies on, and the shaded back of a folded-over corner. */ --desk: #b3a082; --fold: #ded2b6; --fold-crease: #a99d80; --sheet-shadow: rgba(52, 40, 18, 0.28); --analytical: #285a7d; --analytical-tint: rgba(40, 90, 125, 0.1); --enthusiastic: #97540f; --enthusiastic-tint: rgba(151, 84, 15, 0.11); --font-nameplate: "UnifrakturMaguntia", "UnifrakturCook", "Old English Text MT", serif; --font-display: "Newsreader", "Times New Roman", Georgia, serif; --font-body: "Newsreader", "Times New Roman", Georgia, serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; --measure: 60rem; } /* Theme is three-state: Auto (no [data-theme] → the media query below decides), or an explicit Light / Dark the reader pins via the masthead switch. The switch sets [data-theme] on ; an inline script applies it before first paint so there is no flash. The dark palette is intentionally mirrored between the forced-dark rule and the Auto media query — CSS can't share one declaration block across the media boundary, so keep the two lists in sync. */ /* Inverted newsprint — a dim pressroom, not a glossy screen. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #16130d; --paper-edge: #100e09; --ink: #e7ddc7; --ink-soft: #9d9276; --rule: #3a3327; --rule-strong: #4e452f; --accent: #e05a44; --desk: #050403; --fold: #26211789; --fold-crease: #050403; --sheet-shadow: rgba(0, 0, 0, 0.6); --analytical: #82b4dc; --analytical-tint: rgba(130, 180, 220, 0.13); --enthusiastic: #dca05a; --enthusiastic-tint: rgba(220, 160, 90, 0.13); } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --paper: #16130d; --paper-edge: #100e09; --ink: #e7ddc7; --ink-soft: #9d9276; --rule: #3a3327; --rule-strong: #4e452f; --accent: #e05a44; --desk: #050403; --fold: #26211789; --fold-crease: #050403; --sheet-shadow: rgba(0, 0, 0, 0.6); --analytical: #82b4dc; --analytical-tint: rgba(130, 180, 220, 0.13); --enthusiastic: #dca05a; --enthusiastic-tint: rgba(220, 160, 90, 0.13); } } /* --- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } /* The desk: a darker surface the sheet lies on, faintly uneven like a worn table. */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background-color: var(--desk); background-image: radial-gradient(140% 120% at 20% -10%, color-mix(in srgb, var(--desk) 82%, #fff) 0%, transparent 55%), radial-gradient(120% 120% at 90% 110%, color-mix(in srgb, var(--desk) 84%, #000) 0%, transparent 50%); } /* The sheet: a single broadsheet page floating on the desk, held by its shadow, textured with fibrous newsprint grain, and dog-eared at two corners below. */ body { position: relative; margin: 0 auto; padding: 2.9rem 2rem 4.5rem; max-width: var(--measure); min-height: 100vh; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.39 0 0 0 0 0.33 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--ink); font-family: var(--font-body); font-optical-sizing: auto; font-size: 1.06rem; line-height: 1.62; font-feature-settings: "kern", "onum" 1, "pnum" 1; box-shadow: 0 0 0 1px var(--paper-edge), 0 2px 4px var(--sheet-shadow), 0 14px 40px var(--sheet-shadow); } /* Eselsohren — turned-over page corners. Each flap shows the shaded back of the sheet, creased along the diagonal fold and casting a small shadow onto the page. Top-right and bottom-left, so the sheet looks handled from both ends. */ body::before, body::after { content: ""; position: absolute; width: 2.9rem; height: 2.9rem; pointer-events: none; } body::before { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient( 225deg, var(--fold-crease) 0%, var(--fold) 34%, color-mix(in srgb, var(--fold) 70%, var(--paper)) 100% ); filter: drop-shadow(-3px 3px 3px var(--sheet-shadow)); } body::after { bottom: 0; left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); background: linear-gradient( 45deg, var(--fold-crease) 0%, var(--fold) 34%, color-mix(in srgb, var(--fold) 70%, var(--paper)) 100% ); filter: drop-shadow(3px -3px 3px var(--sheet-shadow)); } a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color 120ms ease, text-decoration-color 120ms ease; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } ::selection { background: var(--accent); color: var(--paper); } /* --- Rules & folio strips ------------------------------------------------ */ .thin-rule { height: 0; border-top: 1px solid var(--rule-strong); } /* The classic broadsheet masthead rule: heavy line, air, hairline. */ .double-rule { height: 5px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); margin: 0.5rem 0; } .folio { display: flex; align-items: baseline; justify-content: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); } .folio-top { align-items: center; justify-content: space-between; padding: 0.75rem 0 0.45rem; } .folio-mid { text-align: center; } .folio-right { display: flex; align-items: center; gap: 0.85rem; } /* Three-state colour-scheme switch: Auto · Light · Dark, set as a compact segmented control that reads like a printer's control stamp. */ .theme-toggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden; } .theme-btn { appearance: none; margin: 0; padding: 0.24rem 0.4rem 0.28rem; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .theme-btn:first-child { border-left: 0; } .theme-btn:hover { color: var(--ink); } .theme-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .folio .pulse { color: var(--accent); animation: blink 2.4s steps(1) infinite; } .folio-bottom { flex-wrap: wrap; padding: 0.55rem 0 0; } .folio-star { color: var(--accent); font-size: 0.7rem; } /* --- Masthead / nameplate ------------------------------------------------ */ .masthead { padding-top: 0.75rem; text-align: center; } .nameplate { display: block; margin: 1.1rem 0 0.3rem; font-family: var(--font-nameplate); font-weight: 400; font-size: clamp(2.1rem, 8.4vw, 4.9rem); line-height: 1.02; letter-spacing: 0.01em; text-decoration: none; text-wrap: balance; color: var(--ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent); } .nameplate::after { content: "."; color: var(--accent); } .nameplate:hover { color: var(--ink); } .nameplate-motto { margin: 0.2rem auto 0.7rem; max-width: 34rem; font-family: var(--font-display); font-style: italic; font-size: 1.04rem; line-height: 1.45; color: color-mix(in srgb, var(--ink) 82%, var(--ink-soft)); } /* --- Section flags: kicker, byline, labels ------------------------------- */ .kicker { margin: 0 0 0.7rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); text-align: center; } .kicker::before, .kicker::after { content: "— "; opacity: 0.6; } .kicker::after { content: " —"; } .post-meta { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ink-soft); } .byline-rule { padding: 0.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 1.1rem 0 1.6rem; text-align: center; } .writer { display: inline-block; padding: 0.05em 0.5em 0.12em; border: 1px solid currentColor; border-radius: 1px; font-size: 0.92em; text-transform: uppercase; letter-spacing: 0.1em; } .writer-analytical { color: var(--analytical); background: var(--analytical-tint); } .writer-enthusiastic { color: var(--enthusiastic); background: var(--enthusiastic-tint); } .lang { text-transform: uppercase; letter-spacing: 0.14em; } /* --- Front page: lead story ---------------------------------------------- */ .lead { margin-top: 1.8rem; animation: rise 0.55s ease backwards; } .lead-story { text-align: center; } .lead-title { margin: 0 0 0.2rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7.5vw, 4.3rem); line-height: 1.02; letter-spacing: -0.018em; text-wrap: balance; } .lead-title a { text-decoration: none; } .byline-rule--lead { margin-top: 0.9rem; } /* The lead paragraph flows into true newspaper columns with a hairline gutter. */ .lead-excerpt { columns: 2; column-gap: 2rem; column-rule: 1px solid var(--rule); text-align: justify; hyphens: auto; font-size: 1.04rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 88%, var(--ink-soft)); } .lead-excerpt p { margin: 0 0 0.9em; } .lead-jump { break-inside: avoid; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-align: left; } .lead-jump a { text-decoration: none; color: var(--accent); } .dateline { font-family: var(--font-mono); font-weight: 500; font-size: 0.82em; letter-spacing: 0.08em; } /* --- Front page: secondary stories --------------------------------------- */ .section-label { display: flex; align-items: center; gap: 0.9rem; margin: 3.2rem 0 1.4rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); } .section-label::before, .section-label::after { content: ""; flex: 1; border-top: 3px double var(--rule-strong); } .story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.2rem; } .story-card { padding: 1.15rem 0; border-top: 1px solid var(--rule); animation: rise 0.55s ease backwards; } /* Restore the top rule on the first cell of each row (grid gap eats borders). */ .story-card:nth-child(-n + 2) { border-top: none; } .story-card:nth-child(1) { animation-delay: 70ms; } .story-card:nth-child(2) { animation-delay: 120ms; } .story-card:nth-child(3) { animation-delay: 170ms; } .story-card:nth-child(4) { animation-delay: 220ms; } .story-card:nth-child(n + 5) { animation-delay: 270ms; } .stamp { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ink-soft); } .story-card-title { margin: 0 0 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; } .story-card-title a { text-decoration: none; } .empty-state { margin: 3.5rem 0; padding: 2.4rem 1.5rem; border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong); text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); } /* --- Article page -------------------------------------------------------- */ .post { animation: rise 0.55s ease backwards; } .post .kicker { margin-top: 0.4rem; } .post-title { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 6.5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.018em; text-align: center; text-wrap: balance; } /* The story sets into two justified columns, as it would on the printed page. */ .post-body { columns: 2; column-gap: 2.4rem; column-rule: 1px solid var(--rule); text-align: justify; hyphens: auto; font-size: 1.03rem; line-height: 1.66; } .post-body p { margin: 0 0 1.05em; } /* Editorial drop cap opening the first column. */ .post-body > p:first-child::first-letter, .lead-excerpt > p:first-child::first-letter { float: left; padding: 0.02em 0.1em 0 0; font-family: var(--font-display); font-size: 3.5em; font-weight: 800; line-height: 0.72; color: var(--accent); } .post-source { break-inside: avoid; margin: 2.4rem 0 0; padding: 0.75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--ink-soft); } .post-source-label { display: inline-block; margin-right: 0.6em; padding: 0.08em 0.5em; background: var(--accent); color: var(--paper); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; } .source-link { color: var(--ink); } .back-link { display: inline-block; margin-top: 2.2rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-decoration: none; color: var(--ink-soft); } .back-link:hover { color: var(--accent); } /* --- Colophon (footer) --------------------------------------------------- */ .colophon { margin-top: 4.5rem; text-align: center; } .colophon .thin-rule { margin-bottom: 1rem; } .colophon-line { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 0.92rem; color: var(--ink-soft); } .colophon-name { font-family: var(--font-nameplate); font-size: 1.5em; vertical-align: -0.06em; color: var(--ink); } .colophon-dot { color: var(--accent); } .colophon-fine { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } /* --- Motion -------------------------------------------------------------- */ @keyframes rise { from { opacity: 0; transform: translateY(9px); } } @keyframes blink { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .lead, .post, .story-card { animation: none; } .folio .pulse { animation: none; } } /* --- Narrow screens: fold the broadsheet to a single column -------------- */ @media (max-width: 640px) { .lead-excerpt, .post-body { columns: 1; column-rule: none; text-align: left; hyphens: manual; } .story-grid { grid-template-columns: 1fr; } .story-card:nth-child(2) { border-top: 1px solid var(--rule); } .folio-top { font-size: 0.58rem; gap: 0.4rem; } /* Drop the centre pulse line and the price so the edition line and the theme switch keep a clean single row on phones. */ .folio-top .folio-mid, .folio-price { display: none; } .folio-bottom .folio-star:last-of-type, .folio-bottom span:last-child { display: none; } }