/* ========================================================================== MyCabin Blog — Page Pack CSS Scoped entirely under .pp-blog (Page Pack Spec §5). Trimmed from the Claude Design export's shared styles.css: only rules this page's own sections actually use. STATIC content only (hero, newsletter band, dark CTA) — every selector below that targets a class the dynamic mycabin/blog-listing block itself emits (blog-filter, tab, blog-tag, blog-date, blog-featured*, blog-card*, blog-grid, blog-more, read-time, eyebrow) is present because the Page Pack owns VISUAL styling for that markup while the plugin owns its DATA/behavior — the established Page-Pack-owns-visuals / plugin-owns-functional split already used on MyCabin Demo Days' own Page Pack (see that pack's own frontend.css for the identical pattern, e.g. `.pp-demo-days .mdd-cta`). 01 Tokens (scoped custom properties, not :root) 02 Base resets (scoped) 03 Flow-layout margin neutralization 04 Hero 05 Blog Listing area (styles mycabin/blog-listing's own markup) 06 Newsletter 07 Dark Demo Days CTA 08 Reduced motion ========================================================================== */ /* ========================================================================== 01 TOKENS — scoped to .pp-blog, never :root (Page Pack Spec §5, layer 2). Identical palette to every other MyCabin Page Pack — source-design's own README: "This page uses the same lavender/ink/beige palette as the rest of the site — nothing page-specific here." ========================================================================== */ .pp-blog { --pp-ink: #27272C; --pp-bone: #FFFFFF; --pp-surface: #FBF6F3; --pp-accent: #917EBC; --pp-accent-soft: #CDCBFF; --pp-tint: #E6E6FF; --pp-stone: color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone)); --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%, var(--pp-bone)); --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone)); --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint)); --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent); /* 65%, not 56% — matches the site-wide WCAG AA fix already applied on every other MyCabin Page Pack for this identical anthracite/beige pairing (source's own --ink-56 comment records the same reasoning). */ --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent); --pp-maxw: 1280px; --pp-gutter: clamp(18px, 4vw, 40px); --pp-hdr-h: clamp(58px, 7vw, 74px); --pp-sec-y-p: clamp(48px, 7vw, 104px); --pp-r-pill: 999px; --pp-r-card: 11px; --pp-r-xs: 7px; --pp-ease: cubic-bezier(.22, 1, .36, 1); --pp-t-med: .25s; position: relative; background: var(--pp-bone); color: var(--pp-ink); overflow-x: clip; } /* ========================================================================== 02 BASE RESETS (scoped) ========================================================================== */ .pp-blog, .pp-blog *, .pp-blog *::before, .pp-blog *::after { box-sizing: border-box; } .pp-blog img { max-width: 100%; display: block; } .pp-blog a { color: inherit; text-decoration: none; } .pp-blog a:hover { color: var(--pp-accent); } .pp-blog .wrap { max-width: var(--pp-maxw); margin: 0 auto; padding-inline: var(--pp-gutter); } .pp-blog h1, .pp-blog h2, .pp-blog h3 { margin: 0; } .pp-blog p { margin: 0; } /* The native [hidden] attribute is used by the plugin's own Load More button and "Newest" eyebrow. Scoped defensively so a flex/grid display value declared anywhere below can never silently beat the browser's own default [hidden]{display:none} — the exact bug source's own README documents and fixes for .blog-card/.blog-more's button. */ .pp-blog [hidden] { display: none !important; } /* Correction round (v2.0.4): fine paper-grain dot pattern, missing from this Page Pack entirely until now. Source (blog-original.zip, styles.css line 145-156) applies this SITE-WIDE via `body::after` — not a Blog-specific treatment — so it is reproduced here scoped to `.pp-blog::after` (this page only) rather than added to the Design System globally, which is out of this round's scope. Exact source technique and values, unchanged: a `position:fixed; inset:0` overlay (covers the whole viewport, so it is visible behind every section — hero, filters, listing, newsletter, dark CTA — exactly as it is site-wide in source, not something invented from a screenshot), opacity .05, a radial-gradient dot (not a raster image asset) sized .5px with `color-mix(in oklab, var(--ink) 55%, transparent)`, tiled at a 3x3px background-size. `pointer-events:none` and a z-index of 200 (matching source exactly) keep it non-interactive and above section backgrounds but below the WordPress admin bar (#wpadminbar is z-index 99999) and this page's own "Agent" floating control. */ .pp-blog::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .05; background-image: radial-gradient(color-mix(in oklab, var(--pp-ink) 55%, transparent) .5px, transparent .5px); background-size: 3px 3px; } /* ========================================================================== 03 FLOW-LAYOUT MARGIN NEUTRALIZATION core/group with no explicit layout attribute injects margin-block-start on every direct child but the first, sized from the active theme's own blockGap — a real bug for a horizontal flex row (see docs/MYCABIN-GUTENBERG-REFERENCE-IMPLEMENTATION.md §5). Both .dark-cta and .blog-newsletter-row are horizontal flex rows with two direct Gutenberg-block children. ========================================================================== */ .pp-blog .dark-cta > *, .pp-blog .blog-newsletter-row > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Correction round (v2.0.2): the same Flow-injected margin-block-start also lands on .dark-cta-section itself, as a direct child of the root .pp-blog group — invisible between .blog-hero/.blog-list-section (both white-on-white) but a visible 40px white strip before the dark CTA's opaque ink background. Confirmed via computed style on staging (margin-top: 40px, sourced from the theme's blockGap, no inline style). Scoped to this one section only — .blog-list-section and .blog-newsletter-section keep their existing (already-approved, invisible) flow gap untouched, per this round's scope lock. */ .pp-blog .dark-cta-section { margin-top: 0 !important; } /* ========================================================================== 04 HERO ========================================================================== */ /* Correction round (v2.0.4): bottom padding removed from the section itself. Source (styles.css line 3476) applies clamp(32px,5vw,48px) as .blog-hero's own bottom padding because .blog-filter is source's own LAST child of the hero — that gap is now supplied as margin-top on .mcb-blog-listing__body instead (see section 05), so it lands correctly between the filter and the white listing area rather than after the entire (now hero-nested) dynamic block. */ .pp-blog .blog-hero { padding: calc(var(--pp-hdr-h) + clamp(28px, 6vw, 48px)) 0 0; background: var(--pp-surface); } /* Hero content runs full gutter-aligned width, matching every other section on the site — only the title/lead text itself is capped. */ .pp-blog .blog-hero__text { max-width: 640px; } .pp-blog .blog-hero .h1 { margin-top: 10px !important; font-size: clamp(34px, 8.6vw, 46px); line-height: 1.06; letter-spacing: -.026em; font-weight: 500; } .pp-blog .blog-hero .lead { margin-top: 14px !important; font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--pp-ink-72); font-weight: 300; } /* ========================================================================== 05 BLOG LISTING AREA — styles mycabin/blog-listing's own rendered markup (Phase 2/3 plugin output; the wrapping .mcb-blog-listing__body element was added in plugin v0.3.1, Phase 4 correction round). This Page Pack owns every property below; the plugin never sets its own visual design, only functional/accessibility CSS (hidden-state, loading-state, no-image fallback). Correction round (v2.0.4): the block is now embedded directly inside .blog-hero (content.html), right after .blog-hero__inner, matching source's own literal structure (blog.html line 136-158: .blog-filter is a sibling of .blog-hero__inner inside
, sharing its beige background — a prior, DELIBERATE deviation from this, recorded in earlier manifest.json notes, is now corrected). The plugin's own root .mcb-blog-listing div is not itself wrapped in a .wrap here (unlike v2.0.0-2.0.3) — instead .blog-filter and .mcb-blog-listing__body each get .wrap's own box model directly (max-width/margin-inline/padding-inline below), because a single .wrap ancestor around the whole block would also cap .mcb-blog-listing__body's own BACKGROUND at 1280px, when source's white listing background runs full-bleed edge to edge (only its CONTENT is 1280px-capped, exactly like .wrap does at the section level everywhere else on this page). */ /* Gutenberg's Flow layout injects margin-block-start (the theme's blockGap) on every child of .blog-hero but the first — the same bug documented in section 03 for .dark-cta-section, landing here because .mcb-blog-listing (the plugin's own root output) is now the SECOND child of the hero group, after .blog-hero__inner. Neutralized with the same scoped, smallest-selector pattern; confirmed via computed style before committing (see manifest.json notes). */ .pp-blog .blog-hero > .mcb-blog-listing { margin-top: 0 !important; } /* Category filter pills — still source's own margin-top (the "paragraph → filter gap"), now correct again since .blog-filter is back to being a normal sibling of the hero text, matching source, instead of the first child of a separate white section. */ .pp-blog .blog-filter { margin-top: clamp(20px, 3vw, 28px); max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); display: flex; flex-wrap: wrap; gap: 8px; } .pp-blog .blog-filter .tab { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; border-radius: var(--pp-r-pill); border: 1px solid var(--pp-ink-line); background: transparent; color: var(--pp-ink); font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif; /* Correction round (v2.0.4): .tab renders as a real