/* Theme Name: Astra Child Theme URI: https://wpastra.com/ Template: astra Author: Eyal Doron Description: Astra Child Theme for NeedTheseApps.com (blog/post styling) Version: 1.0.1 Text Domain: astra-child */ /* DO NOT REMOVE OR EDIT THE THEME HEADER ABOVE. Missing it is exactly what caused the "This theme is broken / Template header missing" error found 16.09.2026. Every future CSS update to this file must add content BELOW this point only, and must always be pasted as the FULL file (header included), never a partial patch — see CSS-UPDATE-PROCEDURE.md. */ /*! blog-post-design.css · v3.21 · 07.10.2026 · hand-maintained, NOT generated */ /* ============================================================================ blog-post-design.css — styling for needtheseapps.com BLOG ARTICLES (Notion-style callout boxes, the inline text marker, the disclaimer box, steps/path boxes, the HR separator, entry-meta icons, the Q&A accordion, the single-post card wrapper, and two image-display tweaks). PORTED FROM the AISkillskey child theme's style.css, on Eyal's instruction (07.09.2026), the same way this file's predecessors were. WHY THIS IS ITS OWN FILE, SEPARATE FROM needtheseapps-platform.css: needtheseapps-platform.css is a GENERATED file (built by `npm run build:wp-css` from a fixed, versioned list of source files — see that file's own header and `scripts/build-wp-css.mjs`). Every one of those source files styles the CALCULATOR platform chrome: the app itself, the homepage, the footer, the header, the seven static content pages, the byline, the lead sentence, the Explore Hub. None of them is about blog article content, and blog articles are ordinary WordPress posts, not part of that build at all. 🔴 v143 — WHY THIS FILE EXISTS AT ALL, AND WHY IT REPLACES BOTH `#backup/callout-boxes.css` (v2.0, 07.09.2026) AND the blog-CSS tail that had been manually appended directly onto `needtheseapps-platform.css`: putting this content in — or leaving it appended to — `needtheseapps-platform.css` is not a real fix, because that file is regenerated WHOLESALE on every calculator release, not merged into. Blog content pasted there gets silently wiped the next time anyone runs `npm run build:wp-css` — which happened at least twice (discovered by Eyal on a live article missing its `[marker]` highlighting, and independently reconfirmed missing callout colours, the HR separator, entry-meta icons, the Q&A accordion style, and the single-post card wrapper). `scripts/build-wp-css.mjs` now carries a comment saying so, so a future session does not repeat the mistake. This file reconciles TWO overlapping, sometimes-conflicting sources — see the v143 report (`apps/savings-withdrawal/Info/Report/`) for the full trace of which rule came from which backup and why, where they disagreed: 1. `#backup/callout-boxes.css` (v2.0, 07.09.2026) — the callout system's ORIGINAL colour-background style, the disclaimer box, the marker, and the steps/path boxes. 2. The blog-CSS tail appended to `needtheseapps-platform.css` between 08.09.2026 and 09.09.2026 (identical across five later backups, `#backup/08-09-2026-06-33` through `#backup/09-09-2026-13-44`) — a NEWER, superseding callout visual style (shadow-only card, no background colour, label colour only — "per Eyal request"), plus content source #1 never had: the HR separator, entry-meta icons, the Q&A accordion, the single-post card wrapper, and two image tweaks. Where both sources styled the same thing, the newer one (#2) wins, per Eyal's own recorded request. Where only one source had a rule, it is kept as-is. Full detail in each section's own comment below. 🔴 SCOPE NOTE: `callout-boxes.css` v2.0 also carried Parts B/C/E/F/H (tables, the FAQ/details accordion, code blocks, prompt-step badges, the Simple Download Monitor button re-skin, and a download-card grid) plus a `.ast-single-post`-scoped "Post Meta Bar" block. None of those were named in the v143 task's own reconciliation list (which mirrors exactly what Eyal confirmed missing on the live article), so none of them are carried into this file — they are NOT currently pasted anywhere live and remain only in `#backup/callout-boxes.css` until a future task scopes them in deliberately. Flagged in the v143 report as a real gap, not silently dropped. WHERE THIS GOES: Appearance → Theme File Editor → Astra Child → style.css (append below whatever is already there) Leave `Customize → Additional CSS` for the calculator's own generated stylesheet only — do not paste this file there too, and do not paste the calculator's stylesheet here. Two separate files, two separate places, on purpose: that separation is the entire fix. The matching PHP shortcodes (`[insight]`, `[takeaway]`, `[warning]`, `[callout type="..."]`, `[marker]`, `[steps]`/`[steps2]`/`[steps3]`, etc.) live in `wordpress/2.CSS and PHP/PHP/function.php` — confirmed intact and unchanged by this task (v143 Task 5). One gap found, not fixed here (out of scope — no CSS class-name mismatch, just a missing convenience): `.disclaimer-box` and its four children have no matching shortcode in that file at all, so a `[disclaimer]...[/disclaimer]` tag in a post would print literally rather than render. The CSS still works fine with the classes typed by hand directly in the editor, which is presumably how it has been used so far. ============================================================================ */ /* ============================================================ SINGLE-POST CARD WRAPPER Source: needtheseapps-platform.css blog-CSS tail (08–09.09.2026). Added 2026-09-07 per Eyal request: white card, rounded corners, overlaps the featured image banner. Matches aiskillskey.com layout. ============================================================ */ body.ast-single-post .ast-article-single{ background:#fff; padding:45px; border-radius:6px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.16); } .ast-article-single.has-post-thumbnail{ margin-top:-80px; position:relative; z-index:9; } @media (max-width:600px){ body.ast-single-post .ast-article-single{padding:24px} body.ast-single-post.has-post-thumbnail .ast-article-single{margin-top:-40px} } /* ============================================================ CHAPTER-BOXES LAYOUT TOGGLE — added 16.09.2026 on Eyal's instruction. Per his reference example, an article built from [chapter_box] (and other standalone boxes) should NOT also sit inside the white "article card" wrapper above (box-inside-a-box). Rather than change that wrapper for every article, this is OPT-IN, per post: add the custom class `chapter-boxes-layout` to the post itself (WordPress editor -> post settings -> Advanced -> Additional CSS Class(es)). Claude adds this class automatically whenever asked to add [chapter_box] shortcodes to an article, alongside the shortcodes themselves — never on its own, never as a site-wide default. ============================================================ */ body.ast-single-post .ast-article-single.chapter-boxes-layout{ background:none; padding:0; border-radius:0; box-shadow:none; } .ast-article-single.chapter-boxes-layout.has-post-thumbnail{ margin-top:0; } @media (max-width:600px){ body.ast-single-post .ast-article-single.chapter-boxes-layout{padding:0} } /* ============================================================ CALLOUT BOXES — 13 types, shortcode-driven ([insight], [takeaway], [warning], [example], [quickwin], [tip], [mistake], [strategy], [note], [important], [reflection], [caution], [tldr], plus the generic [callout type="..."]). PHP: `nta_generate_callout_box()` in function.php. Base frame + label colours: SOURCE #2 (needtheseapps-platform.css tail), its own comment reading "updated: shadow-only frame, no background colour, per Eyal request" — this is the newer, superseding visual style. Source #1 (`callout-boxes.css` v2.0) had the same 13 label colours but ALSO a per-type background colour (e.g. `.notion-callout-insight{ background-color:#DBEAFE}`); per the v143 task's own instruction, that older colour-background version is dropped in favour of this one. ============================================================ */ .notion-callout { padding: 20px 24px; margin: 20px 0; border-radius: 12px; background-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .notion-callout-header { display: inline; } .notion-callout-icon { display: inline; font-size: 16px; margin-right: 4px; vertical-align: middle; } .notion-callout-label { display: inline; font-size: 18px; font-weight: 600; line-height: 1.6; } .notion-callout-content { display: inline; font-size: 18px; line-height: 1.6; } .notion-callout-content p { display: inline; margin: 0; } .notion-callout-insight .notion-callout-label { color: #1E40AF; } .notion-callout-takeaway .notion-callout-label { color: #1E40AF; } .notion-callout-warning .notion-callout-label { color: #991B1B; } .notion-callout-example .notion-callout-label { color: #6B21A8; } .notion-callout-quickwin .notion-callout-label { color: #065F46; } .notion-callout-tip .notion-callout-label { color: #0F766E; } .notion-callout-mistake .notion-callout-label { color: #7F1D1D; } .notion-callout-strategy .notion-callout-label { color: #581C87; } .notion-callout-note .notion-callout-label { color: #0E7490; } .notion-callout-important .notion-callout-label { color: #9A3412; } .notion-callout-tldr .notion-callout-label { color: #374151; } .notion-callout-reflection .notion-callout-label { color: #5B21B6; } .notion-callout-caution .notion-callout-label { color: #8B6914; } /* ============================================================ DISCLAIMER BOX Source: `callout-boxes.css` v2.0 ONLY — no version of this exists in source #2. No shortcode wraps it (see file header above); classes are applied by hand in the editor. ============================================================ */ .disclaimer-box { background-color: #F9FAFB; border: 1px solid #E0E0E0; border-radius: 8px; padding: 16px 20px; margin: 24px 0; font-size: 15px; line-height: 1.6; } .disclaimer-header { display: inline; } .disclaimer-icon { display: inline; font-size: 15px; margin-right: 4px; vertical-align: middle; } .disclaimer-label { display: inline; font-size: 15px; font-weight: 600; color: #6B7280; margin-right: 4px; } .disclaimer-content { display: inline; font-size: 15px; color: #6B7280; } /* ============================================================ INLINE TEXT MARKER — `[marker]...[/marker]` and `[marker color="green|blue|red"]` (default yellow). PHP: `nta_text_marker()`. Source: `callout-boxes.css` v2.0 ONLY. This is the exact rule Eyal found missing on the live article (`?p=320`) that started this task. v144 UPDATE — Eyal picked "M5: torn/rough edge" from a 7-style comparison (real-marker look: an uneven, hand-drawn outline instead of a clean rectangle) and a light, pastel blue as the default tone. Only the default BLUE variant's hex changed (to the approved pastel); yellow/green/red keep their existing hues — Eyal was not asked about those and none of this changed their meaning as chosen via `[marker color="..."]`. v144.1 — first attempt put `clip-path` directly on this (inline, text-bearing) element. Wrong tool: it clipped the element's own content, slicing letters off mid-word ("The" losing strokes). v144.2 — moved the shape to a `::before` pseudo behind the text. Fixed the letter-clipping, but broke on any marker phrase that wraps across two lines: a single positioned pseudo can't follow a wrapped inline box, so it drew one blob spanning both lines plus the gap between them. v144.3 FIX (final) — replaced both attempts with the property CSS actually has for this exact case: `box-decoration-break: clone` (confirmed against outside references, not guessed — see the v144 report). It re-applies the background/border-radius to EACH line fragment independently when text wraps, natively, with no pseudo-element and no clipping. The uneven feel comes from an asymmetric `border-radius` (different value per corner) rather than a jagged `clip-path` — border-radius is what `box-decoration-break` is designed to repeat per line; clip-path is not. Text color stays `inherit` (the article's normal color, no tint) per Eyal's request. v145 UPDATE — Eyal picked "Tilted Overshoot" from an 8-style mockup round (a hand-drawn marker leaning slightly, overshooting more on one side than the other). NOT implemented as a literal `transform: rotate()` — that would rotate the actual readable text along with the background (the letters themselves would tilt), and on a wrapped two-line marker phrase, `box-decoration-break: clone` applies the same transform to each line fragment independently, which reads as broken, not hand-drawn. Approximated the "leaning, overshooting" look instead through a more extreme, more lopsided `border-radius` spread (small radius on two opposite corners, large on the other two) plus asymmetric padding (more room on the overshoot side) — same wrap-safe engine as v144.3, just pushed further toward one side. Text stays upright and readable at every wrap point. If Eyal wants literal rotation after seeing this, that needs a different, non-text-bearing implementation (e.g. a background image/SVG on the block ancestor) — flagged, not built. ============================================================ */ .notion-marker { display: inline; padding: 3px 13px 4px 6px; color: inherit; border-radius: 12% 88% 68% 32% / 78% 36% 84% 24%; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .notion-marker-yellow { background-color: #FEF3C7; } .notion-marker-green { background-color: #D1FAE5; } .notion-marker-blue { background-color: #CFE8F3; } .notion-marker-red { background-color: #FEE2E2; } /* ============================================================ STEPS / PATH BOXES (clean box, not the dark code block) — `[steps]` (bordered), `[steps2]` (left line), `[steps3]` (filled). PHP: `nta_generate_steps_box()`. Source: `callout-boxes.css` v2.0 ONLY. Ported alongside the callout boxes, same source, same reasoning. ============================================================ */ .steps-box { margin: 20px 0; padding: 16px 20px; font-family: inherit; font-size: 18px; color: inherit; line-height: 1.7; border-radius: 8px; } .steps-box-border { border: 1px solid #d9d9d9; background: none; } .steps-box-leftline { border: none; border-left: 3px solid #cfcfcf; border-radius: 0; background: none; padding-left: 18px; } .steps-box-fill { border: none; background: #f5f5f5; } /* ============================================================ HR / SEPARATOR — ported from aiskillskey.com theme style.css. Byte-identical in both sources (`callout-boxes.css` Part D and the needtheseapps-platform.css blog-CSS tail's Part D) — no conflict, no choice to make, kept once. ============================================================ */ .entry-content hr, article hr { width: 100%; max-width: 800px; height: 1px; background-color: #e5e7eb; border: none; margin: 40px auto; display: block; } .wp-block-separator, hr.wp-block-separator { width: 100% !important; max-width: 800px !important; height: 1px !important; background-color: #e5e7eb !important; border: none !important; margin: 40px auto !important; color: transparent !important; } /* ============================================================ ENTRY META ICONS — byline / date / reading-time / views. Ported from aiskillskey.com, matching the By/date/reading-time/views layout. 🔴 RECONCILED FROM TWO DISAGREEING SOURCES (v143 Task item 4) — neither copied blindly: - Source #2 (needtheseapps-platform.css tail): `.entry-meta .posted-by.vcard.author::before` (no `.ast-single-post` prefix). The later, currently-stable version (unchanged across five backups from 08.09 to 13:44 on 09.09) — kept as the icon-selector base here. - Source #1 (`callout-boxes.css`'s "Post Meta Bar Styling" section): `.ast-single-post .entry-meta .posted-by::before` (single `.posted-by` class, `.ast-single-post`-scoped) PLUS a muted-grey colour and no-underline treatment for the whole meta bar that source #2 does not have at all. Astra's real "posted by" markup carries all three classes together on one element (`class="posted-by vcard author"`), so either selector matches the same element; this is not a matching bug, only a scoping and completeness difference. COULD NOT be verified against a live page's actual DOM for this task: needtheseapps.com currently has no published posts at all (its sitemap index lists only `page-sitemap.xml`, no `post-sitemap.xml`), and `?p=320` 404s publicly — it is presumably still a draft, visible to Eyal logged in but not to this session. Kept source #2's broader (non-`.ast-single-post`-scoped) selector, since nothing in the task's own description asks for single-post-only icons and the icons are harmless wherever `.entry-meta` renders; ADDED source #1's colour/no-underline styling on top, since it is a real, non-conflicting refinement neither source fully covered. ============================================================ */ .entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } .entry-meta, .entry-meta a, .entry-meta .ast-pvc-views { color: #6b7280 !important; text-decoration: none; } .entry-meta .posted-by.vcard.author::before { content: "\1F464 "; } .entry-meta .posted-on::before { content: "\1F4C5 "; } .entry-meta .ast-reading-time::before { content: "\1F550 "; } .entry-meta .ast-pvc-views::before { content: "\1F441 "; } /* ============================================================ Q&A ACCORDION — card per question, shadow only, matching the `.notion-callout` visual style. Markup: `
Question

Answer

`, typed by hand (no shortcode). Source: needtheseapps-platform.css blog-CSS tail ONLY. ============================================================ */ details.qa-item { background: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); } details.qa-item summary { font-weight: 700; font-size: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; } details.qa-item summary::-webkit-details-marker { display: none; } details.qa-item summary::after { content: "+"; font-size: 22px; color: #6b7280; font-weight: 400; } details.qa-item[open] summary::after { content: "\2212"; } details.qa-item p { font-size: 20px; line-height: 1.65; color: #374151; margin: 8px 0 0; } /* ============================================================ IMAGE-DISPLAY TWEAKS (two, both from the needtheseapps-platform.css blog-CSS tail — distinct from and complementary to `callout-boxes.css` v2.0's own Part G image rules, which are out of this task's scope; see the file header above). ============================================================ */ /* Disable Astra's default image drop-shadow effect on article images (added 07.09.2026) */ .ast-article-single figure, .ast-article-single img:not(figure img) { box-shadow: none !important; } /* Cap the post featured image to a short banner (matches aiskillskey.com), added 08.09.2026 */ header.entry-header:not(.related-entry-header) .post-thumb img, .ast-single-post-featured-section.post-thumb img { aspect-ratio: 3 / 1; width: 100%; height: 100%; object-fit: cover; } /* ============================================================ ARTICLE LINK STYLE — "L7: hover-only highlight" from the same 7-style comparison as the marker above. New in v144; no in-article link styling existed before this. No underline at rest — a soft pastel-green background appears only on hover, so a link and a [marker] can share the same visual family (a highlight) without fighting each other when both sit in one sentence at rest. Scoped to `.entry-content` only, so it never touches nav links, buttons, or the calculator app's own links elsewhere on the site. v144.1 FIX — Eyal has images wrapped in a link for a lightbox (click-to-enlarge) effect; the plain `a` selector was giving those the same green hover background as text links, which reads as a glitch on a photo. `:not(:has(img))` on both the base rule and the hover rule excludes any link whose content is an image, so lightbox thumbnails keep no border/background/color from this rule at all — only real text links get the highlight-on-hover treatment. ============================================================ */ .entry-content a:not(:has(img)) { color: #1F3B57; font-weight: 700; text-decoration: none; padding: 0 3px; border-radius: 3px; background: transparent; transition: background-color 0.18s ease; } .entry-content a:not(:has(img)):hover, .entry-content a:not(:has(img)):focus-visible { background-color: #CDECD9; } /* ============================================================================ CHAPTER BOX — [chapter_box] shortcode, added 16.09.2026 on Eyal's instruction. Wraps one article chapter (title + content) in a single white card: rounded corners, thin border, soft shadow — "Option A" from the 3-option comparison, on a plain white background (not the tinted page background from the original example). OPT-IN ONLY: this class is only ever produced by the [chapter_box] shortcode, never applied by default to any heading or section. ============================================================ */ .nta-chapter-box { background: rgba(255, 255, 255, 0.9); border: 1px solid #dbe3ef; border-radius: 20px; padding: 26px 28px; box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08); margin: 24px 0; } .nta-chapter-box-title { /* size, weight and font: see "ARTICLE HEADINGS" at the end of this file (06.10.2026) */ margin: 0 0 12px; color: #172033; } .nta-chapter-box-content { color: #334155; } .nta-chapter-box-content > *:last-child { margin-bottom: 0; } /* ============================================================ RTL CONTENT — added 16.09.2026 on Eyal's instruction, to prepare for future Hebrew articles. Applied only to posts auto-tagged `rtl-content` (Hebrew letters detected in the post, see function.php). English articles get none of this and keep their current LTR look. ============================================================ */ .rtl-content .entry-content, .rtl-content .entry-content p, .rtl-content .entry-content li, .rtl-content .entry-content h1, .rtl-content .entry-content h2, .rtl-content .entry-content h3, .rtl-content .entry-content h4, .rtl-content .nta-chapter-box, .rtl-content details.qa-item { direction: rtl; text-align: right; } .rtl-content .notion-callout-header, .rtl-content .notion-callout-icon, .rtl-content .disclaimer-header, .rtl-content .disclaimer-icon { direction: rtl; } .rtl-content details.qa-item summary { flex-direction: row-reverse; } .rtl-content .steps-box-leftline { border-left: none; border-right: 3px solid #cfcfcf; padding-left: 0; padding-right: 18px; } /* ============================================================ CHECKLIST — [checklist] / [check_item]. Added 16.09.2026 on Eyal's instruction, modeled on his reference example's ".checklist" style. ============================================================ */ .nta-checklist{ margin:24px 0; background:rgba(255,255,255,.9); border:1px solid #dbe3ef; border-radius:20px; padding:26px 28px; box-shadow: 0 14px 35px rgba(15,23,42,.08); } .nta-checklist-title{ margin:0 0 6px; font-size:22px; font-weight:700; color:#172033; } .nta-checklist-lead{ margin:0 0 18px; color:#64748b; font-size:15px; } .nta-checklist-lead p{ margin:0; } .nta-checklist-items{ display:grid; gap:10px; } .nta-checklist-items br{ display:none; } .nta-check-item{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; background:#fff; border:1px solid #dbe3ef; border-radius:16px; padding:14px 18px; } .nta-check-item input[type="checkbox"]{ width:20px; height:20px; margin-top:2px; } .nta-check-item label{ display:block; font-weight:700; color:#172033; } .nta-check-item small{ display:block; color:#64748b; font-weight:500; margin-top:2px; font-size:14px; } .nta-check-item small p, .nta-check-item label p{ display:inline; margin:0; } /* ============================================================ INFO FILTER (tabs/buttons that show tagged boxes) — [info_filter] / [info_box]. Added 16.09.2026 on Eyal's instruction, modeled on his reference example's filterbar + tagged-card style. ============================================================ */ .nta-info-filter-wrap{ margin:24px 0; background:rgba(255,255,255,.9); border:1px solid #dbe3ef; border-radius:20px; padding:26px 28px; box-shadow: 0 14px 35px rgba(15,23,42,.08); } .nta-filterbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .nta-filter-btn{ border:1px solid #dbe3ef; background:#fff; color:#64748b; padding:8px 14px; border-radius:999px; font-weight:700; cursor:pointer; font-size:14px; } .nta-filter-btn.active{ background:#172033; color:#fff; border-color:#172033; } .nta-info-grid{ display:flex; flex-wrap:wrap; gap:16px; } .nta-info-grid br{ display:none; } .nta-info-box{ flex:1 1 240px; max-width:360px; background:#fff; border:1px solid #dbe3ef; border-radius:18px; padding:18px; } .nta-info-box-tag{ display:inline-flex; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; margin-bottom:10px; background:#e0f2fe; color:#075985; } .nta-info-box-content{ color:#334155; } /* ============================================================ ARTICLE HEADINGS — one scale for every article (Eyal, 06.10.2026) Before: headings came from Astra's defaults (Vazirmatn, weight 400), the chapter-box title was a 22px
smaller than the 24px H3, and on a phone the H3 was the same size as the body text. Now: one font for the whole article (the body's system font), headings bold, a ~1.25 step between levels. Body text is not touched (20px). The chapter-box title is a real H2 (function.php) with the H2 style, so the plain and the chapter-box versions look the same. Scoped to single posts only: calculator pages are not affected. Approved by Eyal in article-headings-mockup-v1.html. ============================================================ */ body.single-post .entry-title, body.single-post .entry-content h2, body.single-post .entry-content h3, body.single-post .nta-chapter-box-title { font-family: inherit; color: #1e293b; letter-spacing: -0.01em; } body.single-post .entry-title { font-size: 40px; font-weight: 700; line-height: 1.2; } body.single-post .entry-content h2, body.single-post .nta-chapter-box-title { font-size: 32px; font-weight: 700; line-height: 1.25; margin: 48px 0 16px; } body.single-post .entry-content .nta-chapter-box-title { margin-top: 0; } body.single-post .entry-content h3 { font-size: 25px; font-weight: 600; line-height: 1.3; margin: 36px 0 12px; } @media (max-width: 544px) { body.single-post .entry-title { font-size: 30px; } body.single-post .entry-content h2, body.single-post .nta-chapter-box-title { font-size: 25px; margin: 36px 0 12px; } body.single-post .entry-content .nta-chapter-box-title { margin-top: 0; } body.single-post .entry-content h3 { font-size: 21px; margin: 28px 0 10px; } } /* ============================================================ CHAPTER-BOX TITLE BAND — "Gradient band, light blue to white" (option 6 of chapter-title-styles-mockup-v1.html, chosen by Eyal 06.10.2026) The chapter title inside a [chapter_box] sits on a band that runs to the box edges: light blue on the left fading to white, rounded top corners. Size and weight stay those of "ARTICLE HEADINGS" above (H2). ============================================================ */ body.single-post .entry-content .nta-chapter-box-title { background: linear-gradient(90deg, #dbeafe 0%, #ffffff 85%); margin: -26px -28px 18px; padding: 18px 28px; border-radius: 20px 20px 0 0; } /* ============================================================ SCREENSHOT FRAME — article screenshots (Eyal, 06.10.2026) The same frame Eyal approved for Help screenshots on 29.09.2026 (help-design-guidelines.md §6.7), so a screenshot looks the same everywhere on the site: a light gray mount, a soft shadow, rounded corners. Applies ONLY to images with the class "nta-screenshot" (Block → Advanced → Additional CSS class); illustrations are untouched. Higher specificity + !important because the rule above removes Astra's shadow from every article figure. ============================================================ */ .ast-article-single .entry-content figure.nta-screenshot { background: #F1F3F6; padding: 14px; border-radius: 10px; box-shadow: 0 2px 6px rgba(17, 24, 39, .08), 0 8px 24px rgba(17, 24, 39, .10) !important; } .ast-article-single .entry-content figure.nta-screenshot img { display: block; border-radius: 6px; } @media (max-width: 560px) { .ast-article-single .entry-content figure.nta-screenshot { padding: 8px; } } /* ============================================================ ACTION CARDS — [nta_cta_group], [nta_tool_card], [nta_download_card] v3.20 · 07.10.2026 (Eyal: C1 tool card, E2 Excel, A2 PDF): a group set apart from the chapter by a top and bottom line; order calculator → Excel → PDF; every button under the text, aligned left, in the site's download colour #1E5A85 (same as the calculator page's Excel button). ============================================================ */ .nta-cta-group { margin: 36px 0 28px; padding: 20px 0 8px; border-top: 1px solid #cfd8e6; border-bottom: 1px solid #cfd8e6; } .nta-cta-group .nta-cta-label { margin: 0 0 4px !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } .ast-article-single .entry-content a.nta-action-card { display: flex; align-items: center; gap: 18px; margin: 12px 0; padding: 16px 18px; background: #fff; border: 1px solid #dbe3ef; border-radius: 14px; color: #172033 !important; text-decoration: none !important; box-shadow: 0 1px 2px rgba(23, 32, 51, .04); transition: border-color .15s ease, box-shadow .15s ease; } .nta-cta-group a.nta-action-card:last-child { margin-bottom: 18px !important; } .ast-article-single .entry-content a.nta-action-card:hover, .ast-article-single .entry-content a.nta-action-card:focus-visible { border-color: #1E5A85; box-shadow: 0 4px 16px rgba(30, 90, 133, .14); } .nta-action-card .nta-card-media { flex: none; width: 96px; display: flex; align-items: center; justify-content: center; } .nta-action-card .nta-card-toolicon > svg, .nta-action-card .nta-card-toolicon { color: #fff; } .nta-action-card .nta-card-toolicon::before { content: none; } .nta-action-card .nta-card-toolicon svg { width: 32px; height: 32px; display: block; } .nta-action-card .nta-card-toolicon { background: transparent; } .nta-action-card .nta-card-toolicon > svg { box-sizing: content-box; padding: 16px; border-radius: 14px; background: #172033; box-shadow: 0 2px 8px rgba(23, 32, 51, .14); } .nta-action-card .nta-card-fileicon { width: 64px; height: 74px; display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 62'%3E%3Cpath d='M4 2h32l14 14v42a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='%23fff' stroke='%236B7280' stroke-width='2'/%3E%3Cpath d='M36 2v14h14' fill='none' stroke='%236B7280' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .nta-action-card .nta-card-cover img { width: 96px; height: auto; display: block; border-radius: 6px; box-shadow: 0 4px 14px rgba(23, 32, 51, .18) !important; } .nta-action-card .nta-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .nta-action-card .nta-card-title { font-weight: 700; font-size: 18px; line-height: 1.35; color: #172033; } .nta-action-card .nta-card-text { font-size: 15px; line-height: 1.5; color: #64748b; font-weight: 400 !important; } .nta-action-card .nta-card-meta { white-space: nowrap; } .nta-action-card .nta-card-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 10px; background: #1E5A85; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2; padding: 12px 22px; border-radius: 10px; white-space: nowrap; transition: background-color .15s ease; } .ast-article-single .entry-content a.nta-action-card:hover .nta-card-btn, .ast-article-single .entry-content a.nta-action-card:focus-visible .nta-card-btn { background: #16496f; } .nta-download-card .nta-card-btn::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-5-5m5 5l5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-5-5m5 5l5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 560px) { /* phone: picture on top, text and button below at full width, so buttons stay on one line */ .ast-article-single .entry-content a.nta-action-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; } .nta-action-card .nta-card-media { width: auto; justify-content: flex-start; } .nta-action-card .nta-card-toolicon > svg { width: 26px; height: 26px; padding: 13px; border-radius: 12px; } .nta-action-card .nta-card-fileicon { width: 48px; height: 56px; } .nta-action-card .nta-card-cover img { width: 72px; } .nta-action-card .nta-card-btn { font-size: 15px; padding: 11px 18px; white-space: normal; max-width: 100%; } } /* ============================================================ COMMENT FORM — v3.21 · 07.10.2026 (option 1 of 6, chosen by Claude on Eyal's go-ahead): the form is a white rounded card like the action cards, a small grey label above the heading, rounded fields, the site button colour #1E5A85. CSS only; the markup is Astra's. ============================================================ */ body.single-post .comments-area { margin-top: 32px !important; } body.single-post #respond.comment-respond { background: #fff; border: 1px solid #dbe3ef; border-radius: 14px; padding: 24px 24px 26px; box-shadow: 0 1px 2px rgba(23, 32, 51, .04); } body.single-post #respond .comment-reply-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: #172033; margin: 0 0 6px; } body.single-post #respond .comment-reply-title::before { content: "Join the conversation"; display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } body.single-post #respond .comment-notes, body.single-post #respond .logged-in-as { font-size: 14px; line-height: 1.5; color: #64748b; margin: 0 0 14px; } body.single-post #respond .logged-in-as a { color: #1E5A85; text-decoration: none; } body.single-post #respond textarea, body.single-post #respond input[type="text"], body.single-post #respond input[type="email"], body.single-post #respond input[type="url"] { width: 100%; background: #fff; color: #172033; font-size: 16px; border: 1px solid #cfd8e6 !important; border-radius: 12px !important; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } body.single-post #respond textarea { min-height: 140px; padding: 14px 16px; } body.single-post #respond input[type="text"], body.single-post #respond input[type="email"], body.single-post #respond input[type="url"] { padding: 12px 14px; border-radius: 10px !important; } body.single-post #respond textarea:focus, body.single-post #respond input:focus { border-color: #1E5A85 !important; box-shadow: 0 0 0 3px rgba(30, 90, 133, .15); outline: 0; } body.single-post #respond .form-submit { margin: 14px 0 0; } body.single-post #respond input#submit { background: #1E5A85 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 12px 22px !important; font: 700 16px/1.2 Inter, "Segoe UI", Arial, sans-serif !important; cursor: pointer; transition: background-color .15s ease; } body.single-post #respond input#submit:hover, body.single-post #respond input#submit:focus-visible { background: #16496f !important; } body.single-post #respond textarea { height: 150px; } body.single-post #respond .ast-comment-formwrap { margin: 0 !important; } body.single-post #respond .ast-comment-formwrap p { margin: 12px 0 0 !important; padding-bottom: 0 !important; } body.single-post #respond .comment-textarea, body.single-post #respond .comment-form-textarea { margin-bottom: 0 !important; padding-bottom: 0 !important; } @media (max-width: 560px) { body.single-post #respond.comment-respond { padding: 18px 16px 20px; } }