/* ========================================================================= VentureView — Long-form article template ("the Apple craft layer") Etappe 1, "Newspaper x Apple" runbook. SCOPE: deliberately limited to the flagship article via `body.postid-1250`. The runbook requires Jacob's sign-off before this rolls to the other ~107 posts. To go global, replace every `body.vv-longform` qualifier by removing it — the selectors underneath are already written against the theme's real classes, so promotion is a find-and-delete, not a rewrite. The class `vv-longform` is added to in PHP for exactly the posts that should get this treatment, so promotion is a one-line change in functions.php rather than a CSS edit. Everything reads from assets/vv-tokens.css. No raw hex, no raw px type. ========================================================================= */ /* ------------------------------------------------------------------------- 1. The measure — the single most important decision in long-form Newspaper gives the content column 696px. Research on reading comfort puts the sweet spot at 60-75 characters; at our body size that is ~680px. We cap and centre rather than stretch. ------------------------------------------------------------------------- */ body.vv-longform .td-post-content { max-width: var(--vv-content-max); margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------------- 2. The headline — Playfair Display, tight, navy step-4 on mobile rising to step-5 on wide screens. The clamp() in the token does the fluid work, so there is no breakpoint to maintain here. ------------------------------------------------------------------------- */ body.vv-longform .td-post-title .entry-title, body.vv-longform h1.entry-title { font-family: var(--vv-font-display); font-weight: var(--vv-weight-bold); font-size: var(--vv-step-4); line-height: var(--vv-lh-tight); letter-spacing: var(--vv-tracking-tight); color: var(--vv-c-heading); margin-bottom: var(--vv-space-2); /* Stops long German compounds ("Wettbewerbsbeschraenkungen") from overflowing on a 320px screen. */ overflow-wrap: break-word; hyphens: auto; } @media (min-width: 1024px) { body.vv-longform .td-post-title .entry-title, body.vv-longform h1.entry-title { font-size: var(--vv-step-5); } } /* Subtitle / standfirst, if the theme renders one */ body.vv-longform .td-post-sub-title { font-family: var(--vv-font-body); font-weight: var(--vv-weight-regular); font-size: var(--vv-step-1); line-height: var(--vv-lh-snug); color: var(--vv-c-text-muted); margin-bottom: var(--vv-space-3); } /* ------------------------------------------------------------------------- 3. The byline block — small, quiet, wide-tracked. Authority comes from restraint, not size. ------------------------------------------------------------------------- */ body.vv-longform .td-post-header .td-module-meta-info, body.vv-longform .td-post-author-name, body.vv-longform .td-post-date { font-family: var(--vv-font-body); font-size: var(--vv-step--1); letter-spacing: var(--vv-tracking-wide); text-transform: uppercase; color: var(--vv-c-text-muted); } body.vv-longform .td-post-author-name a { font-weight: var(--vv-weight-semibold); color: var(--vv-c-text); } /* Category flag above the headline */ body.vv-longform .td-post-header .td-category a { font-family: var(--vv-font-body); font-size: var(--vv-step--2); font-weight: var(--vv-weight-semibold); letter-spacing: var(--vv-tracking-wide); text-transform: uppercase; } /* ------------------------------------------------------------------------- 4. Body copy — the money value. Inter at step-0, line-height 1.65. The theme currently ships 15px/1.74. 15px is too small for sustained reading on mobile; 16-17px with a slightly tighter leading reads better and fits more words per screen. ------------------------------------------------------------------------- */ body.vv-longform .td-post-content, body.vv-longform .td-post-content p, body.vv-longform .td-post-content li { font-family: var(--vv-font-body); font-size: var(--vv-step-0); line-height: var(--vv-lh-prose); color: var(--vv-c-text); } body.vv-longform .td-post-content p { margin: 0 0 var(--vv-space-3); /* Optical nicety: no orphaned single word on the last line of a para. */ text-wrap: pretty; } body.vv-longform .td-post-content > p:first-of-type { /* The lede reads one step up — a newspaper convention that costs nothing and signals "this is the start of the piece". */ font-size: var(--vv-step-1); line-height: var(--vv-lh-snug); color: var(--vv-c-text); } /* Links inside prose: underlined, offset so descenders stay legible. */ body.vv-longform .td-post-content a:not(.wp-block-button__link) { color: var(--vv-c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: color-mix(in srgb, var(--vv-c-link) 40%, transparent); transition: text-decoration-color var(--vv-dur-fast) var(--vv-ease); } body.vv-longform .td-post-content a:not(.wp-block-button__link):hover { color: var(--vv-c-link-hover); text-decoration-color: currentColor; } body.vv-longform .td-post-content a:focus-visible, body.vv-longform a:focus-visible { outline: none; box-shadow: var(--vv-focus-ring); border-radius: var(--vv-radius-sm); } body.vv-longform .td-post-content strong, body.vv-longform .td-post-content b { font-weight: var(--vv-weight-semibold); color: var(--vv-c-heading); } /* ------------------------------------------------------------------------- 5. Section headings inside the article — Playfair, generous space above, tight below, so a heading visually belongs to what follows it. ------------------------------------------------------------------------- */ body.vv-longform .td-post-content h2 { font-family: var(--vv-font-display); font-weight: var(--vv-weight-bold); font-size: var(--vv-step-3); line-height: var(--vv-lh-tight); letter-spacing: var(--vv-tracking-tight); color: var(--vv-c-heading); margin: var(--vv-space-8) 0 var(--vv-space-2); } body.vv-longform .td-post-content h3 { font-family: var(--vv-font-body); font-weight: var(--vv-weight-semibold); font-size: var(--vv-step-2); line-height: var(--vv-lh-snug); color: var(--vv-c-heading); margin: var(--vv-space-6) 0 var(--vv-space-2); } body.vv-longform .td-post-content h4 { font-family: var(--vv-font-body); font-weight: var(--vv-weight-semibold); font-size: var(--vv-step-1); line-height: var(--vv-lh-snug); color: var(--vv-c-heading); margin: var(--vv-space-5) 0 var(--vv-space-1); } /* First heading shouldn't get the full 64px if it opens the article. */ body.vv-longform .td-post-content > h2:first-child, body.vv-longform .td-post-content > h3:first-child { margin-top: 0; } /* ------------------------------------------------------------------------- 6. Pull-quotes — amber, the one place the accent colour gets real estate. A left rule rather than a box: lighter, more editorial, and it cannot cause a layout shift. ------------------------------------------------------------------------- */ body.vv-longform .td-post-content blockquote { position: relative; margin: var(--vv-space-6) 0; padding: var(--vv-space-1) 0 var(--vv-space-1) var(--vv-space-4); border: 0; border-left: 3px solid var(--vv-c-accent); background: none; font-family: var(--vv-font-display); font-weight: var(--vv-weight-bold); font-size: var(--vv-step-2); line-height: var(--vv-lh-snug); letter-spacing: var(--vv-tracking-tight); color: var(--vv-c-heading); text-align: left; quotes: "\201E" "\201C" "\201A" "\2018"; /* German „ " typography */ } body.vv-longform .td-post-content blockquote p { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin-bottom: var(--vv-space-1); } body.vv-longform .td-post-content blockquote p:last-child { margin-bottom: 0; } body.vv-longform .td-post-content blockquote cite, body.vv-longform .td-post-content blockquote footer { display: block; margin-top: var(--vv-space-2); font-family: var(--vv-font-body); font-style: normal; font-weight: var(--vv-weight-medium); font-size: var(--vv-step--1); letter-spacing: var(--vv-tracking-wide); text-transform: uppercase; color: var(--vv-c-text-muted); } /* ------------------------------------------------------------------------- 7. Media — CLS discipline. The theme already emits width/height on the featured image (696x388), which is why CLS is 0.053 rather than 0.3. We keep that guarantee and add an explicit aspect-ratio box so a missing attribute can never reintroduce shift. ------------------------------------------------------------------------- */ body.vv-longform .td-post-featured-image, body.vv-longform .td-post-content figure { margin: 0 0 var(--vv-space-4); } body.vv-longform .td-post-featured-image img, body.vv-longform .td-post-content img { display: block; width: 100%; height: auto; border-radius: var(--vv-radius-sm); } /* Belt-and-braces: reserve the box even if width/height go missing. */ body.vv-longform .td-post-featured-image img:not([width]):not([height]) { aspect-ratio: 16 / 9; object-fit: cover; } body.vv-longform .td-post-content figcaption, body.vv-longform .td-post-content .wp-caption-text { margin-top: var(--vv-space-1); font-family: var(--vv-font-body); font-size: var(--vv-step--1); line-height: var(--vv-lh-normal); color: var(--vv-c-text-muted); } /* ------------------------------------------------------------------------- 8. Lists, tables, rules — the unglamorous 20% that makes a page look designed rather than defaulted. ------------------------------------------------------------------------- */ body.vv-longform .td-post-content ul, body.vv-longform .td-post-content ol { margin: 0 0 var(--vv-space-3); padding-left: var(--vv-space-3); } body.vv-longform .td-post-content li { margin-bottom: var(--vv-space-1); } body.vv-longform .td-post-content li::marker { color: var(--vv-c-accent); } body.vv-longform .td-post-content hr { height: 1px; margin: var(--vv-space-6) 0; border: 0; background: var(--vv-c-rule); } body.vv-longform .td-post-content table { width: 100%; margin-bottom: var(--vv-space-4); border-collapse: collapse; font-family: var(--vv-font-body); font-size: var(--vv-step--1); } body.vv-longform .td-post-content th, body.vv-longform .td-post-content td { padding: var(--vv-space-1) var(--vv-space-2); border-bottom: 1px solid var(--vv-c-rule); text-align: left; } body.vv-longform .td-post-content th { font-weight: var(--vv-weight-semibold); color: var(--vv-c-heading); letter-spacing: var(--vv-tracking-wide); text-transform: uppercase; font-size: var(--vv-step--2); } /* ------------------------------------------------------------------------- 9. Print — a magazine should print like one. Cheap to add, and people do print long reads. ------------------------------------------------------------------------- */ @media print { body.vv-longform .td-post-content { max-width: none; font-size: 11pt; line-height: 1.5; } body.vv-longform .td-post-content a { text-decoration: none; color: inherit; } body.vv-longform .td-post-content h2 { break-after: avoid; } }