/* * WebStudioPlus theme — global stylesheet (reset, base, layout). * FE tokens: critical.css (inlined). Catalogue: tokens.css (editor only). * Component and block CSS are loaded on demand via the asset loader. * * overrides.css and patterns.css are intentionally UNLAYERED so they beat * unlayered core block styles (e.g. wp-block-library inline). Bundled after * layered content by scripts/copy-css.js — do not wrap them in @layer. */ @layer reset, base, layout, utilities; @layer reset { /* reset.css — layer: reset */ *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } ul[role="list"], ol[role="list"] { list-style: none; } body { min-height: 100vh; line-height: 1.5; margin: 0; } h1, h2, h3, h4, button, input, label { line-height: 1.1; } h1, h2, h3, h4 { text-wrap: balance; } a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; } img, picture { max-width: 100%; display: block; } input, button, textarea, select { font-family: inherit; font-size: inherit; } textarea:not([rows]) { min-height: 10em; } :target { scroll-margin-block: 5ex; } } @layer base { /* base.css — layer: base Typography aligned with theme.json / Untitled UI (global styles handle blocks). */ html { font-size: var(--base-font-size); color-scheme: light; } body { font-size: var(--wp--preset--font-size--text-md, 1rem); line-height: 1.5; font-weight: 500; font-family: var(--primary-font); color: var(--text-color); background-color: #FFFFFF; padding: 0; margin: 0; font-synthesis: none; } strong, b { font-weight: 500; } h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.02em; color: var(--color-text-primary); margin-top: 2rem; margin-bottom: 1rem; } h1 { font-size: var(--wp--preset--font-size--display-lg, clamp(2.25rem, 1.99rem + 1.13vw, 3rem)); line-height: 1.25; } h2 { font-size: var(--wp--preset--font-size--display-md, clamp(1.75rem, 1.57rem + 0.75vw, 2.25rem)); line-height: 1.22; } h3 { font-size: var(--wp--preset--font-size--display-sm, clamp(1.5rem, 1.37rem + 0.56vw, 1.875rem)); line-height: 1.27; letter-spacing: 0; } h4 { font-size: var(--wp--preset--font-size--display-xs, clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem)); line-height: 1.33; letter-spacing: 0; } h5 { font-size: var(--wp--preset--font-size--text-xl, 1.25rem); line-height: 1.5; letter-spacing: 0; } h6 { font-size: var(--wp--preset--font-size--text-lg, 1.125rem); line-height: 1.56; letter-spacing: 0; } p { margin-bottom: 1.25rem; font-size: var(--wp--preset--font-size--text-md, 1rem); } a { color: var(--color-text-brand-secondary); } a:hover { color: var(--color-text-brand-primary); } } @layer layout { /* layout.css — layer: layout Page layout, #page, .entry-content, .blog-roll, .content-post. */ #page { /* Fixed header is out of flow; this keeps page/post/CPT content below it. WP already offsets for the admin bar; header.css shifts .header. */ padding-top: var(--header-height); /* Bleeding images (image-expand) paint past the content box; clip horizontal overflow at the viewport so the page does not get a sideways scrollbar. overflow-x only — vertical sticky header behaviour is preserved. */ overflow-x: clip; } /* Fallback classic-loop layout for home.php's `else` branch — when no Posts Page is configured, home.php emits `
` with raw
excerpts inside. These rules style THAT layout only. IMPORTANT: scope to `main.blog-roll`, not bare `.blog-roll`. The `webstudioplus/blog-roll` block also emits `
` with its own `
` children, and these legacy rules used to leak onto those cards — adding `padding: 1rem` (visible misalignment vs sections above/below), forcing `display: grid` + 65ch max-width, and applying `aspect-ratio: 2/1` to every image. The block owns its own visual via blocks/blog-roll.css + blocks/latest-posts.css, so it must stay out of this selector's reach. */ main.blog-roll article { display: grid; grid-template-columns: [grid-start] 1fr [content-start] minmax(min(100%, calc(var(--content-width) / 2)), 1fr) [content-end] 1fr [grid-end]; width: 100%; row-gap: 1rem; max-width: 65ch; margin: 0 auto; padding: 1rem; } main.blog-roll article > * { padding-left: var(--container-padding); padding-right: var(--container-padding); grid-column: content; } main.blog-roll article img { max-inline-size: 100%; block-size: auto; aspect-ratio: 2/1; object-fit: cover; } .entry-content { width: 100%; /* margin: 5vb auto; */ margin: 0 auto; } .screen-reader-text { display: none; } img { max-width: 100%; height: auto; } /* Content post (single) layout */ .content-post { --default-post-width: var(--content-width); --post-content-width: var(--post-width, var(--default-post-width)); } .content-post .entry-header, .content-post .post-thumbnail, .content-post .entry-content { width: 100%; row-gap: 1rem; margin: 5vb auto; } .content-post .entry-header > *, .content-post .post-thumbnail > * { max-width: var(--post-content-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .content-post .post-author { max-width: var(--post-content-width); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } } @layer utilities { /* utilities.css — layer: utilities Add utility classes as needed. */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; stroke: none; } } /* Unlayered overrides — must beat core unlayered block styles. */ /* overrides.css — UNLAYERED on purpose. Bundled after @layer blocks by scripts/copy-css.js so these rules beat unlayered core block styles (wp-block-library inline). Use sparingly. */ /* Theme width alignment: Content (default) < Wide < Large < Full. Specificity must beat `.is-layout-constrained > :where(:not(.alignfull))` (content-size). Editor root uses `.is-root-container` as the layout parent. `[data-align=large]` is required in the canvas — Core only natively emits data-align for wide/full; Large is set by large-width.js. Direct-child selectors cover nested Groups (same contract as Core wide/full). */ .is-layout-constrained > .alignlarge, .is-root-container > .alignlarge, body .is-root-container > .wp-block.alignlarge, .editor-styles-wrapper .wp-block[data-align='large'], .is-root-container > .wp-block[data-align='large'], .is-layout-constrained > .wp-block[data-align='large'] { max-width: min(var(--wp--custom--layout--large-size), 100%); width: 100%; margin-left: auto !important; margin-right: auto !important; } /* Core only stretches images for wide/full — mirror for Large (FE + nested Groups). */ .wp-block-image.alignlarge > a { width: 100%; } .wp-block-image.alignlarge img { height: auto; width: 100%; } /* Synced pattern wrapper: Large lives on the inner block; Core only promotes wide/full. Match Large so the editor shell matches the front end. */ .is-layout-constrained > .wp-block-block:has(.alignlarge), .is-root-container > .wp-block-block:has(.alignlarge), .is-layout-constrained > .wp-block-block:has([data-align='large']), .is-root-container > .wp-block-block:has([data-align='large']) { max-width: min(var(--wp--custom--layout--large-size), 100%); width: 100%; margin-left: auto !important; margin-right: auto !important; } /* Spacer height is the only space. Core flow layout otherwise adds margin-block-start from --wp--style--block-gap on every sibling. */ .wp-block-spacer { margin-block-start: 0; margin-block-end: 0; } /* core/button — is-style-outline = Untitled UI Secondary (Size=xl). `theme.json` cannot target `is-style-*` variations; styles live here. */ .wp-block-button.is-style-outline > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 12px 18px; background-color: var(--color-bg-primary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xxs); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--text-md); font-weight: 500; line-height: 1.5; text-decoration: none; text-align: center; box-shadow: none; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:active { background-color: var(--color-bg-primary-hover); color: var(--color-text-secondary-hover); } .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { outline: none; background-color: var(--color-bg-primary); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 -2px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-brand); } .wp-block-button.is-style-outline > .wp-block-button__link:disabled, .wp-block-button.is-style-outline > .wp-block-button__link[aria-disabled="true"] { opacity: 0.5; background-color: var(--color-bg-primary); color: var(--color-text-secondary); } .wp-block-button.is-style-outline > .wp-block-button__link:disabled:hover, .wp-block-button.is-style-outline > .wp-block-button__link[aria-disabled="true"]:hover { background-color: var(--color-bg-primary); color: var(--color-text-secondary); } /* core/button — is-style-dark = charcoal fill + tertiary border (Figma Size=xl). Hover uses utility-neutral-800 (Untitled UI gray-700 → gray-800); Figma only showed rest. */ .wp-block-button.is-style-dark > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 12px 18px; background-color: var(--color-utility-neutral-700); color: var(--color-text-white); border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-xxs); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--text-md); font-weight: 500; line-height: 1.5; text-decoration: none; text-align: center; box-shadow: none; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .wp-block-button.is-style-dark > .wp-block-button__link:hover, .wp-block-button.is-style-dark > .wp-block-button__link:active { background-color: var(--color-utility-neutral-800); border-color: var(--color-utility-neutral-800); color: var(--color-text-white); } .wp-block-button.is-style-dark > .wp-block-button__link:focus-visible { outline: none; background-color: var(--color-utility-neutral-700); color: var(--color-text-white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 -2px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-brand); } .wp-block-button.is-style-dark > .wp-block-button__link:disabled, .wp-block-button.is-style-dark > .wp-block-button__link[aria-disabled="true"] { opacity: 0.5; background-color: var(--color-utility-neutral-700); color: var(--color-text-white); } .wp-block-button.is-style-dark > .wp-block-button__link:disabled:hover, .wp-block-button.is-style-dark > .wp-block-button__link[aria-disabled="true"]:hover { background-color: var(--color-utility-neutral-700); border-color: var(--color-border-tertiary); } /* core/button — Primary interactive states. Resting fill, radius, type, and padding come from theme.json (Figma Size=xl). Hover/active use --color-bg-brand-solid-hover; focus is the Untitled UI double ring (canvas gap + brand); disabled is 50% opacity. */ .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link:hover, .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link:active { background-color: var(--color-bg-brand-solid-hover); } .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link:focus-visible { outline: none; background-color: var(--color-bg-brand-solid); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 -2px 0 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-brand); } .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link:disabled, .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link[aria-disabled="true"] { opacity: 0.5; } .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link:disabled:hover, .wp-block-button:not(.is-style-outline):not(.is-style-dark) > .wp-block-button__link[aria-disabled="true"]:hover { background-color: var(--color-bg-brand-solid); } /* Fragmentiv Icons — Untitled UI button icons are 20px. Plugin default is 0.75em. */ .wp-block-button[class*="has-icon__"] .wp-block-button__link .fragmentiv-icon, .wp-block-button[class*="has-icon__"] .wp-block-button__link .fragmentiv-icon-wrap svg { width: 20px; height: 20px; } /* core/details — FAQ accordion. theme.json sets border-top and base typography. Title/answer spacing lives here (not block padding) so it is not an inspector control. Toggle icon chrome is unchanged. */ .wp-block-details { padding-top: 0; padding-bottom: 0; } /* Remove top border on the first details block in a sequence. */ .wp-block-details:first-of-type { border-top: none; } /* 32px between items (space above the next divider). */ .wp-block-details + .wp-block-details { margin-top: var(--spacing-4xl); } .wp-block-details > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-weight: 600; color: var(--color-text-primary); padding-top: var(--spacing-3xl); padding-bottom: 0; } .wp-block-details:first-of-type > summary { padding-top: 0; } /* Hide default marker in all browsers. */ .wp-block-details > summary::-webkit-details-marker, .wp-block-details > summary::marker { display: none; content: ''; } /* Plus/minus circle icon — collapsed state (plus). */ .wp-block-details > summary::after { content: ''; display: block; flex-shrink: 0; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 24px 24px; } /* Expanded state (minus). */ .wp-block-details[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); } /* Answer: 4px below the title; kill base `p { margin-bottom }` inside the item. */ .wp-block-details > :not(summary) { color: var(--color-text-tertiary); margin-block-start: var(--spacing-xs); margin-block-end: 0; padding: 0; } /* patterns.css — UNLAYERED. Block pattern compositions (fragments/patterns/). theme.json cannot target is-style-* on pattern wrappers. */ /* webstudioplus/heading-stack Pattern uses flex vertical layout (set in heading-stack.php) so writers get the Justification toolbar control. WP emits is-content-justification-* classes which we map to text-align (inherited by children). */ .wp-block-group.is-style-heading-stack, .wp-block-group.is-style-heading-stack .wp-block-group__inner-container { gap: var(--spacing); } .wp-block-group.is-style-heading-stack > *, .wp-block-group.is-style-heading-stack .wp-block-group__inner-container > * { margin-block-start: 0; margin-block-end: 0; } .wp-block-group.is-style-heading-stack.is-content-justification-left { text-align: left; } .wp-block-group.is-style-heading-stack.is-content-justification-center { text-align: center; } .wp-block-group.is-style-heading-stack.is-content-justification-right { text-align: right; } /* Subheading (first paragraph). FE: direct > p; editor: > .wp-block-paragraph and .editor-styles-wrapper (theme.json paragraph color is higher there). */ .wp-block-group.is-style-heading-stack > p:first-of-type, .wp-block-group.is-style-heading-stack > .wp-block-paragraph:first-of-type, .wp-block-group.is-style-heading-stack .wp-block-group__inner-container > p:first-of-type, .wp-block-group.is-style-heading-stack .wp-block-group__inner-container > .wp-block-paragraph:first-of-type, .editor-styles-wrapper .wp-block-group.is-style-heading-stack > p:first-of-type, .editor-styles-wrapper .wp-block-group.is-style-heading-stack > .wp-block-paragraph:first-of-type { color: var(--color-bg-brand-section); } /* Badge — inline pill label (e.g. "Features"). Apply class via Additional CSS. */ .is-style-badge-brand { width: fit-content; margin-inline: auto; padding: var(--spacing-xs, 0.25rem) var(--spacing-lg, 0.75rem); border-radius: var(--radius-full, 9999px); border: 1px solid #bfc8ff; background-color: #ebf0ff; color: #3e22e0; font-weight: 500; line-height: var(--line-height-text-sm, 1.43); }