/* Theme Name: Business Consultancy Theme URI: https://ai.instawp.io/themes/business-consultancy-instawp Author: InstaWP Author URI: https://instawp.com Description: A full-site-editing block theme for business consultancy sites. Native Gutenberg blocks plus theme.json throughout, with the interactive pieces (sliders, forms, counters) supplied by the Insta Blocks plugin so every element stays editable in the Site Editor. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.2 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: business-consultancy-instawp Tags: full-site-editing, block-patterns, block-styles, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, blog, portfolio, business */ /* * Intentionally almost empty. * * In a block theme, styling lives in theme.json (global settings + styles), block * supports, and per-block style variations — NOT in this file. Reach for CSS here * only when a design truly cannot be expressed through theme.json. If you do add * rules, prefer scoping them and using the theme's CSS custom properties, e.g. * var(--wp--preset--color--primary), so they stay in sync with the brand. */ /* * FULL-BLEED SECTIONS SIT FLUSH (Gutenberg #51242) — the one rule every port needs. * * WordPress core ships `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`, * which opens a ~24px seam between full-bleed sections and between header → main → * footer (that stray white strip under the last section). * * Neutralize it SELECTIVELY, never with a blanket `.wp-site-blocks > * { margin: 0 }` * — that would defeat the theme.json `blockGap` feature everywhere else. */ /* * --------------------------------------------------------------------------- * DESIGN-SYSTEM NOTES FOR MAINTAINERS * --------------------------------------------------------------------------- * * 0. THIS THEME HAS EXACTLY ONE CSS RULE -- the full-bleed flush reset at the * bottom of this file. Nothing else. * * There is no assets/css directory and no `css` key anywhere in theme.json. * functions.php enqueues this file on the front end and mirrors it into the * editor with add_editor_style(), so the one rule applies in both places. * (WordPress does NOT load a block theme's style.css by itself.) * * Every visual decision lives in theme.json -- global settings, styles, and * block style variations -- or on a block's own layout attributes. Do not add * rules here. If a design cannot be expressed through theme.json or a block * attribute, raise it rather than working around it. * * 1. theme.json IS THE DESIGN SYSTEM. PATTERNS REFERENCE IT; THEY DO NOT RESTATE IT. * * - 14 font-size presets, from `micro` (13px) to `display` (clamp 45-80px). * There is NO parallel settings.custom.fontSize scale any more: a size is a * preset, so it is named in the editor and reachable from every block. * - 12 spacing presets on two axes. The t-shirt ladder (xxx-small 5px .. * huge 120px) is the generic gap/padding scale; `section-small` (90px) and * `section-large` (140px) are the vertical rhythm between full-width * sections, which falls between rungs of that ladder. They are ordered by * size so the editor's spacing slider stays monotonic. * - 12 palette colours. `contrast` (#333333) is the default body text colour * and is the most-used colour on the site; `muted-40` and `white-6` are the * two alpha variants the footer needs. Two duotone presets, `brand` and * `white-flat`, replace the raw hex pairs the image filters used. * - line-height and letter-spacing stay under settings.custom, because * WordPress has no preset concept for either. They are consumed ONLY inside * theme.json (elements and block style variations); a pattern never names * one. * * 2. A TREATMENT THAT REPEATS IS A BLOCK STYLE VARIATION, NEVER A COPIED STYLE BLOB. * * 51 variations are declared in theme.json styles.blocks..variations and * registered in functions.php (that list is GENERATED from theme.json, so the * two halves cannot drift). Between them they carry every treatment that * repeats at all; validate-blocks reports zero repeated treatments, and the only style blob * that still appears twice is a duotone PRESET reference, which belongs on the block because * it is a per-image filter choice the editor exposes. * * Three things a variation CANNOT carry -- each measured against WP 7.1 with a * live probe, and each the reason the value is still a block attribute: * a. spacing.blockGap -- silently dropped. The layout engine reads it off * the block to build `.wp-container-*{gap:...}`. * b. spacing.margin -- it emits, but core ships a `.is-layout-flex` child * reset (margin:0) at specificity 0-1-1 and a variation is only a * `:root :where()` rule at 0-1-0, so the margin silently becomes 0. * c. layout.* (selfStretch / flexSize / contentSize / orientation / ...) -- * not in WP_Theme_JSON::VALID_STYLES at all; these are child-layout BLOCK * attributes, which is exactly what they should be. * Everything else emits, INCLUDING the @tablet / @mobile tiers. * * Two further limits worth knowing: * - WordPress applies only ONE variation per block. A second `is-style-` * class is ignored outright -- no instance class, no CSS. Supersede, do * not stack. * - A `fontSize` preset ATTRIBUTE emits `.has--font-size{... !important}`, * which outranks any font-size the variation sets, tiers included. A * variation that needs a responsive size must own the BASE size too, and * the block must drop its fontSize attribute (see `display-heading`, * `display-scale`, `page-heading`, `copyright`). * * 3. THERE ARE NO CUSTOM CLASSES. * * A className exists only to be a CSS selector, so it died with the CSS. The * 347 Webflow-era tokens are gone; the only classes in the markup are the ones * Gutenberg itself emits plus `is-style-*` variations. * * 4. NINE IMAGES CARRY alt="" ON PURPOSE. * * Each is decorative under WCAG H67 -- an icon sitting beside its own visible * label (address, phone and email in the header, the contact panel and the * connect cards; the arrow inside a button). Giving them alt text would make a * screen reader announce the same information twice, e.g. "Phone image, * Phone: (921) 425-4567". * * scripts/evals/validate-blocks.mjs rejects decorative alt="" by design and * asks that such cases be raised rather than worked around. This note is that * record. Do not "fix" them by typing a space, and do not describe them. * * 5. RESPONSIVE VALUES ARE WP 7.1 STYLE TIERS, NOT MEDIA QUERIES. * * settings.viewport declares tablet 991px / mobile 767px. A value carries its * breakpoints as "@tablet" / "@mobile" keys -- on the block's own `style` * attribute, or inside a theme.json block style variation -- and WordPress * emits the media queries. "@tablet" is a CLOSED band (767px < w <= 991px) and * does not cascade down: a value that must hold from tablet through mobile has * to be written into both tiers. * * A tier on the BLOCK emits with !important; a tier in a VARIATION does not. * That asymmetry decides which of the two can win against a preset class. * * A tier also ignores the block's `supports`: insta/slider declares only * spacing.margin, yet its @tablet/@mobile spacing.padding DOES render. Deleting * those two tiers as "inert" cost the hero 90-100px of padding below 992px. * * 6. THE FIRST TOP-LEVEL GROUP OF A PATTERN IS ALWAYS align:"full". * * Every section pattern opens with a single top-level core/group carrying * align:"full", so it renders as: * * *
* * That full-bleed group is the section band (background colour/image and the * vertical section rhythm live on it); the readable column is the nested group * carrying is-style-...-section-container inside it. * * The rule applies ONLY to that first top-level Group. Do NOT add align:"full" * to nested Groups or to other block types -- a nested alignfull would break * the child out of the section container and blow up the layout. * * Five patterns are deliberately exempt because they do not begin with a Group * at all -- each is a fragment injected into another block or template, not a * standalone section. Do not "fix" them: * * post-card.php required INSIDE core/post-template; a full-width * group would land in every grid cell and break the * 3-up card grid. * query-loop.php core/query align:"wide", rendered inside
* query-loop-search.php in templates/archive.html and search.html. * hidden-404.php heading/search fragments injected into the 404 and * hidden-blog-heading.php blog templates. * * The page-*.php patterns contain no blocks at all (pure require()), so there * is nothing to align. */ /* * FULL-BLEED SECTIONS SIT FLUSH (Gutenberg #51242) -- the one rule every port needs. * * WordPress core ships `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`, * which opens a ~24px seam between full-bleed sections and between header -> main -> * footer (that stray white strip under the last section). * * Neutralize it SELECTIVELY, never with a blanket `.wp-site-blocks > * { margin: 0 }` * -- that would defeat the theme.json `blockGap` feature everywhere else. */ body .wp-block-template-part, main, main > .wp-block-group.has-background, main > .wp-block-group.alignfull { margin-block-start: 0; }