/** * Story Credit styles (Surfaces B & C of the Paywall Unlock Plan) * * Uses Xtra Theme design tokens from theme.json with fallbacks for when the * theme isn't active. Mobile-first; tokens over hardcoded values. * * - .xtra-story-credit--partner : Surface B. The partner's own write-up keeps * its own block styling; the wrapper only guarantees vertical rhythm. * - .xtra-story-credit--house : Surface C. A self-contained tinted card. */ .xtra-story-credit { /* Colors */ --xtra-color-primary: var(--wp--preset--color--primary, #3B6EA5); --xtra-color-primary-dark: var(--wp--preset--color--primary-dark, #2C5282); --xtra-color-navy: var(--wp--preset--color--navy, #1E3A5F); --xtra-color-accent: var(--wp--preset--color--accent, #E87722); --xtra-color-base: var(--wp--preset--color--base, #ffffff); --xtra-color-contrast-2: var(--wp--preset--color--contrast-2, #475569); --xtra-color-contrast-3: var(--wp--preset--color--contrast-3, #94A3B8); --xtra-color-border: var(--wp--preset--color--border, #E2E8F0); --xtra-color-text-on-dark: var(--wp--preset--color--text-on-dark, #E2E8F0); --xtra-color-text-muted-on-dark: var(--wp--preset--color--text-muted-on-dark, #94A3B8); /* Fonts */ --xtra-font-sans: var(--wp--preset--font-family--system-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); --xtra-font-serif: var(--wp--preset--font-family--system-serif, Georgia, "Times New Roman", Times, serif); /* Font sizes */ --xtra-font-size-x-small: var(--wp--preset--font-size--x-small, 0.8125rem); --xtra-font-size-small: var(--wp--preset--font-size--small, 0.875rem); --xtra-font-size-medium: var(--wp--preset--font-size--medium, 1rem); /* Spacing */ --xtra-spacing-10: var(--wp--preset--spacing--10, 0.25rem); --xtra-spacing-20: var(--wp--preset--spacing--20, 0.5rem); --xtra-spacing-30: var(--wp--preset--spacing--30, 1rem); --xtra-spacing-40: var(--wp--preset--spacing--40, 1.5rem); /* Radius / transitions */ --xtra-radius-xl: var(--wp--custom--radius--xl, 12px); --xtra-transition-normal: var(--wp--custom--transition--normal, 200ms ease); margin: var(--xtra-spacing-40) 0; } /* ======================================== Card shell — shared by Surface B (partner) and Surface C (house). A content well on top, a reversed navy credit band at the bottom. overflow:hidden lets the navy band fill to the rounded corners. ======================================== */ .xtra-story-credit--house, .xtra-story-credit--partner { overflow: hidden; background-color: var(--xtra-color-base); background-color: color-mix(in srgb, var(--xtra-color-primary) 6%, var(--xtra-color-base)); border-radius: var(--xtra-radius-xl); /* Frame + left accent via box-shadow instead of borders. Borders of different widths (1px frame vs 4px navy left) miter awkwardly at the rounded corners, leaving a light sliver where the navy credit band meets the curve. Box-shadows follow border-radius cleanly, and dropping the real border lets the navy band fill flush to the rounded bottom corners. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--xtra-color-primary) 18%, var(--xtra-color-border)), inset 4px 0 0 0 var(--xtra-color-navy); } /* ---- Top: the content well (house bulletin, or the partner write-up) ---- */ .xtra-story-credit__main { padding: var(--xtra-spacing-30) var(--xtra-spacing-40); } /* The content well's outer edges sit flush. !important is needed because the block editor stamps inline vertical margins (often spacing-50) on partner blocks, and inline styles beat plain selectors. */ .xtra-story-credit__main > :first-child { margin-top: 0 !important; } .xtra-story-credit__main > :last-child { margin-bottom: 0 !important; } /* When the partner-name kicker leads, pull the partner content up under it. */ .xtra-story-credit--partner .xtra-story-credit__label + * { margin-top: 0 !important; } /* Partner write-up runs a touch smaller than full article body. The `__main p` (0,3,0) outranks the theme's `.single-post-content p`. */ .xtra-story-credit--partner .xtra-story-credit__main, .xtra-story-credit--partner .xtra-story-credit__main p:not(.xtra-story-credit__label), .xtra-story-credit--partner .xtra-story-credit__main li { font-size: var(--xtra-font-size-small); line-height: 1.5; } /* Vibrant accent kicker — "COMMUNITY BULLETIN" (house) or the partner name. Scoped under the card so it outranks the theme's `.single-post-content p`. */ .xtra-story-credit--house .xtra-story-credit__label, .xtra-story-credit--partner .xtra-story-credit__label { margin: 0 0 var(--xtra-spacing-10) 0; font-family: var(--xtra-font-sans); font-size: var(--xtra-font-size-x-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--xtra-color-accent); } .xtra-story-credit--house .xtra-story-credit__blurb { margin: 0; font-family: var(--xtra-font-serif); font-size: var(--xtra-font-size-small); color: var(--xtra-color-contrast-2); line-height: 1.55; } /* "Read more" — flows at the end of the blurb; upright sans so it reads as the link */ .xtra-story-credit a.xtra-story-credit__link { font-family: var(--xtra-font-sans); font-style: normal; font-size: var(--xtra-font-size-x-small); font-weight: 600; color: var(--xtra-color-primary); text-decoration: none; white-space: nowrap; transition: color var(--xtra-transition-normal); } .xtra-story-credit a.xtra-story-credit__link:hover { color: var(--xtra-color-primary-dark); text-decoration: underline; } /* ---- Bottom: reversed navy credit band (repeats every post, so it's quiet). Scoped under the card so font-size/line-height outrank `.single-post-content p`. ---- */ .xtra-story-credit--house .xtra-story-credit__credit, .xtra-story-credit--partner .xtra-story-credit__credit { margin: 0; padding: var(--xtra-spacing-20) var(--xtra-spacing-40); background-color: var(--xtra-color-navy); color: var(--xtra-color-text-on-dark); font-family: var(--xtra-font-sans); font-size: var(--xtra-font-size-x-small); font-weight: 600; line-height: 1.45; }