/* * How It Starts section — card grid and per-card badge chassis. Renamed from * the former Pricing Section (docs/step-15-pricing-section.md, * docs/step-15b-pricing-structure-fixes.md), which this section replaces. * Structural rules (section background, rail padding, card grid, card * chassis, checklist rows, button case) are carried over unchanged from * pricing.css; the tab menu and tab-pane rules are removed since this * section has no tab switcher. */ /* ---- Section ---- */ .idia-how-it-starts { background-color: var(--wp--preset--color--tertiary); overflow: hidden; } /* Rail padding for CONTAINER — same literal-CSS mechanism gallery.css uses for .idia-gallery__title-block and the former pricing.css used for .idia-pricing__container: WRAPPER (.idia-how-it-starts) is align:full with layout:constrained, not layout:flow, so WordPress's has-global-padding de-dup rule zeroes any has-global-padding descendant's auto-applied root padding regardless of what it contains — the exception clause only fires for an alignfull.is-layout-flow parent, which a constrained-layout alignfull section never satisfies. WordPress's global-styles-inline-css prints in AFTER this enqueued file, so !important is needed to win the specificity tie (same as marquee.css, counter.css, gallery.css). */ .idia-how-it-starts__container { padding-left: var(--wp--custom--rail) !important; padding-right: var(--wp--custom--rail) !important; } /* The shared eyebrow chassis (assets/css/footer-cta.css) defaults to var(--wp--preset--color--tertiary) — right everywhere else it is used (including the Work section's identical badge, which sits on the page's base background), but wrong here: this section itself sits on tertiary (#f3f3f3), so a chip with no override would be invisible against its own section background. base (#ffffff) is the smallest change that keeps the badge legible while matching the Work section's badge in every other respect (width, chassis, icon, label). Scoped to this section only; every other badge on the site is unaffected. */ .idia-how-it-starts__eyebrow.idia-hero-card__badge { background-color: var(--wp--preset--color--base); } /* ---- Title block: centred, reproduced from the Work section ---- Matches .idia-work__title-block (work.css) exactly — same mechanism (flex column, centre-aligned, centred as a block via margin-inline:auto) and the same width token (is-measure-hero-home, 680px), per the owner's instruction to reuse Work's width and styles rather than the earlier, wider is-measure-section-title / is-measure-prose pairing. Heading and intro line no longer carry their own measure classes — the 680px cap on the whole title block is what constrains both, same as Work. */ .idia-how-it-starts__title-block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline: auto; } /* ---- Card grid ---- The grid itself is the core/group block's own `layout: {"type": "grid", "columnCount": 4}` support (see how-it-starts-section.php) — WordPress emits `grid-template-columns: repeat(4, minmax(0, 1fr))` inline. A 1fr grid survives the owner adding or removing a card, unlike a fixed-px track. !important on the breakpoint rules below: WordPress prints this block's own grid-template-columns as generated per-instance CSS (.wp-container-core-group-is-layout-*) after every enqueued theme stylesheet — same specificity fight documented in counter.css, marquee.css, gallery.css and the former pricing.css. A plain class rule inside a media query still loses to that later, equal-specificity rule. Four cards step to two columns at 991px (unlike the old three-card grid, which had no useful 2-column step and went straight to one column) and to one column at 767px. */ @media (max-width: 991px) { .idia-how-it-starts__grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 767px) { .idia-how-it-starts__grid { grid-template-columns: 1fr !important; } } /* ---- Card ---- */ .idia-how-it-starts__card { background-color: var(--wp--preset--color--base); border-radius: var(--wp--preset--border-radius--xl); border: 2px solid transparent; } .idia-how-it-starts__card.is-current { border-color: var(--wp--preset--color--primary-dark); } /* ---- Card title ---- */ .idia-how-it-starts__card-title { font-weight: 500; } /* ---- Card badge (36px circle holding a numeral) ---- Distinct from the shared eyebrow chassis in footer-cta.css: a circular swatch plus a numeral, not a pill chip, so this is its own component rather than a reuse of .idia-cta-badge/.idia-hero-card__badge. The numeral is real paragraph text, not a mask-image icon (unlike the former pricing section's dollar-sign badge) — AGENTS.md's "text trapped in a pseudo-element" rule applies: a number the owner may want to change and a screen reader needs to read is content, not decoration. */ .idia-how-it-starts__card-badge { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--medium); color: var(--wp--preset--color--main); } .idia-how-it-starts__card-badge-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--wp--preset--border-radius--full); background-color: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--primary-dark); flex-shrink: 0; } .idia-how-it-starts__card-badge-icon p { margin: 0; } /* ---- Checklist rows ---- Solid border-light, deliberately not dashed — matches the former pricing section's own rule; unlike the counter's dashed secondary-colour divider, this reads differently on purpose. width: 100% — the row is a flex child of a vertical flex column (Checklist, how-it-starts-section.php) with no `flex` or `align-self` of its own, so it would otherwise shrink to its own content instead of filling the card. The parent's `layout: flex, orientation: vertical` never stretches children on the cross axis the way a block layout would — it needs the explicit fill. */ .idia-how-it-starts__feature-row { display: flex; align-items: center; width: 100%; border-top: 1px solid var(--wp--preset--color--border-light); } /* 24x24 icon box — an icon box is component geometry, not running text on the type scale, same category as .idia-how-it-starts__card-badge-icon's 36px chassis above. Centring the ✓ glyph inside a fixed box (rather than setting font-size directly) keeps the box a consistent 24x24 regardless of glyph metrics. */ .idia-how-it-starts__feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; color: var(--wp--preset--color--main); } /* ---- Button label case ---- AGENTS.md §3 requires sentence case for buttons; the pattern authors the label in sentence case and this rule supplies the uppercase visual only, so the editable text content itself stays correct case. */ .idia-how-it-starts__cta-wrapper .wp-block-button__link { text-transform: uppercase; } /* ---- Title + card entrance — starting state ---- Reused verbatim from work.css's rule (2026-09-05), matching how-it-starts-reveal.js's reuse of work-reveal.js's mechanism — see that file's header for why several earlier, bespoke attempts at this rule (a slideInLeft variant, then a fadeUp-without-blur variant paired with a JS safety net) were replaced rather than kept. Same "Fade In" family (blur + rise + fade) on both the title block and its cards, opt-in only: scoped to prefers-reduced-motion: no-preference, so a reduced-motion visitor's section renders complete and settled immediately — how-it-starts-reveal.js independently checks the same media query before running these tweens. Unlike work.css, this selector does not need scoping to `.idia-how-it-starts .idia-how-it-starts__card` — .idia-how-it-starts__card is not reused by any other pattern on this site the way .idia-work__card is reused by the Projects page and single-project related-projects grids, so a bare class selector carries no risk of leaving an unrelated page's cards permanently invisible. */ @media (prefers-reduced-motion: no-preference) { .idia-how-it-starts__title-block, .idia-how-it-starts__card { opacity: 0; transform: translateY(50px); filter: blur(5px); } }