/*
* Pricing section — tab switcher, pricing card grid, and the per-plan badge
* chassis. docs/step-15-pricing-section.md, measured live at 1440px against
* https://stodio.webflow.io/. Structural fixes: docs/step-15b-pricing-
* structure-fixes.md.
*/
/* ---- Section ---- */
/* overflow: hidden clips the title row's translateX(100px)/(-100px) entrance
overshoot (below) at the true viewport edge — otherwise it produces a
transient horizontal scrollbar for the ~1s the reveal takes to settle.
Unlike .idia-service, this section has no surface-card class (which would
supply overflow: hidden for free via style.css), so it needs its own.
Nothing in this stylesheet gives any pricing element a box-shadow or a
hover transform that would extend past the section bounds, so the clip is
safe at this scope. */
.idia-pricing {
background-color: var(--wp--preset--color--tertiary);
overflow: hidden;
}
/* Rail padding for CONTAINER (step-15b), the same literal-CSS mechanism
gallery.css uses for .idia-gallery__title-block: WRAPPER (.idia-pricing)
is align:full with layout:constrained, not layout:flow, so WordPress's
has-global-padding de-dup rule
(`.has-global-padding :where(:not(.alignfull.is-layout-flow) >
.has-global-padding:not(...)) { padding: 0 }`) 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. Reading --wp--custom--rail directly sidesteps
the de-dup rule's intent, but CONTAINER itself still carries
has-global-padding (it is layout:constrained with no align), so the
de-dup rule's own zero-padding declaration also targets CONTAINER
directly — same (0,1,0) specificity as this rule, both inside a
:where()-wrapped descendant selector that contributes zero specificity
of its own. WordPress's global-styles-inline-css prints in AFTER
this enqueued file (same tie documented in marquee.css, counter.css,
gallery.css), so source order hands the tie to core's zero-padding rule
without !important here. Unlike the gallery's title-block (plain
layout:flex, never has-global-padding, so the de-dup rule never targets
it and no !important was needed there), CONTAINER needs it. */
.idia-pricing__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, but
wrong here: the pricing section itself sits on tertiary (#f3f3f3), so the
badge needs base (#ffffff) to read as a chip against it. Scoped to this
section only; every other badge on the site is unaffected. */
.idia-pricing__eyebrow.idia-hero-card__badge {
background-color: var(--wp--preset--color--base);
}
/* ---- Tab menu ---- */
.idia-pricing__tab-menu {
background-color: var(--wp--preset--color--base);
border-radius: var(--wp--preset--border-radius--full);
padding: var(--wp--preset--spacing--4);
}
.idia-pricing__tab {
appearance: none;
border: none;
background: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--wp--preset--font-family--primary);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--medium);
color: var(--wp--preset--color--main);
padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--16);
border-radius: var(--wp--preset--border-radius--full);
transition: border-radius var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1),
background-color var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1),
color var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1);
}
.idia-pricing__tab[aria-selected="true"] {
background-color: var(--wp--preset--color--main);
color: var(--wp--preset--color--base);
}
.idia-pricing__tab:focus-visible {
outline: 2px solid var(--wp--preset--color--primary-dark);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.idia-pricing__tab {
transition: none;
}
}
/* ---- Panes ---- */
.idia-pricing__pane {
opacity: 1;
transition: opacity 300ms ease;
}
.idia-pricing__pane[hidden] {
display: none;
}
.idia-pricing__pane.is-entering {
transition-duration: 300ms;
}
.idia-pricing__pane.is-leaving {
transition-duration: 100ms;
}
@media (prefers-reduced-motion: reduce) {
.idia-pricing__pane {
transition: none;
}
}
/* ---- Card grid ----
The grid itself is the core/group block's own `layout: {"type": "grid",
"columnCount": 3}` support (see pricing-section.php) — WordPress emits
`grid-template-columns: repeat(3, minmax(0, 1fr))` inline, matching the
counter section's identical repeat(4, 1fr) choice for the same reason: a
1fr grid survives the owner adding a fourth plan; fixed 448px tracks would
not, even though 3×448px + 2×16px gap equals the reference's 1376px
content width exactly at 1440px.
!important on the breakpoint rule 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,
and gallery.css. A plain class rule inside a media query still loses to
that later, equal-specificity rule. Three cards collapse straight to one
column at 767px — unlike the counter's four-stat grid, there is no useful
2-column step for three items (it would leave an orphaned third card on
its own row at every width from 767 down to 479, which reads as a mistake,
not a deliberate layout). */
@media (max-width: 767px) {
.idia-pricing__grid {
grid-template-columns: 1fr !important;
}
}
/* ---- Card ---- */
.idia-pricing__card {
background-color: var(--wp--preset--color--base);
border-radius: var(--wp--preset--border-radius--xl);
border: 2px solid transparent;
}
.idia-pricing__card.is-current {
border-color: var(--wp--preset--color--primary-dark);
}
/* ---- Plan badge (16x16 icon in a 36px circle) ----
Distinct from the shared eyebrow chassis in footer-cta.css: a circular
icon swatch plus a mono label, not a pill chip, so this is its own
component rather than a reuse of .idia-cta-badge/.idia-hero-card__badge.
The mask-image itself lives here, not in footer-cta.css: an earlier draft
put it on .idia-pricing__plan-badge.is-style-badge-icon-dollar::before
(mirroring the eyebrow chassis's selector shape) but the element that
actually needs the mask is the circular swatch
(.idia-pricing__plan-badge-icon), a child of the badge wrapper — the
dollar SVG registered in functions.php/footer-cta.css is reused by data
URI value only. */
.idia-pricing__plan-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);
text-transform: uppercase;
letter-spacing: normal;
}
.idia-pricing__plan-badge-icon {
position: relative;
width: 36px;
height: 36px;
border-radius: var(--wp--preset--border-radius--full);
background-color: var(--wp--preset--color--tertiary);
flex-shrink: 0;
}
.idia-pricing__plan-badge-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background-color: var(--wp--preset--color--primary-dark);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M9.5%207.5H8.5V3.5H9C9.53043%203.5%2010.0391%203.71071%2010.4142%204.08579C10.7893%204.46086%2011%204.96957%2011%205.5C11%205.63261%2011.0527%205.75979%2011.1464%205.85355C11.2402%205.94732%2011.3674%206%2011.5%206C11.6326%206%2011.7598%205.94732%2011.8536%205.85355C11.9473%205.75979%2012%205.63261%2012%205.5C11.9992%204.7046%2011.6828%203.94202%2011.1204%203.37959C10.558%202.81716%209.7954%202.50083%209%202.5H8.5V1.5C8.5%201.36739%208.44732%201.24021%208.35355%201.14645C8.25979%201.05268%208.13261%201%208%201C7.86739%201%207.74021%201.05268%207.64645%201.14645C7.55268%201.24021%207.5%201.36739%207.5%201.5V2.5H7C6.20435%202.5%205.44129%202.81607%204.87868%203.37868C4.31607%203.94129%204%204.70435%204%205.5C4%206.29565%204.31607%207.05871%204.87868%207.62132C5.44129%208.18393%206.20435%208.5%207%208.5H7.5V12.5H6.5C5.96957%2012.5%205.46086%2012.2893%205.08579%2011.9142C4.71071%2011.5391%204.5%2011.0304%204.5%2010.5C4.5%2010.3674%204.44732%2010.2402%204.35355%2010.1464C4.25979%2010.0527%204.13261%2010%204%2010C3.86739%2010%203.74021%2010.0527%203.64645%2010.1464C3.55268%2010.2402%203.5%2010.3674%203.5%2010.5C3.50083%2011.2954%203.81716%2012.058%204.37959%2012.6204C4.94202%2013.1828%205.7046%2013.4992%206.5%2013.5H7.5V14.5C7.5%2014.6326%207.55268%2014.7598%207.64645%2014.8536C7.74021%2014.9473%207.86739%2015%208%2015C8.13261%2015%208.25979%2014.9473%208.35355%2014.8536C8.44732%2014.7598%208.5%2014.6326%208.5%2014.5V13.5H9.5C10.2956%2013.5%2011.0587%2013.1839%2011.6213%2012.6213C12.1839%2012.0587%2012.5%2011.2956%2012.5%2010.5C12.5%209.70435%2012.1839%208.94129%2011.6213%208.37868C11.0587%207.81607%2010.2956%207.5%209.5%207.5ZM7%207.5C6.46957%207.5%205.96086%207.28929%205.58579%206.91421C5.21071%206.53914%205%206.03043%205%205.5C5%204.96957%205.21071%204.46086%205.58579%204.08579C5.96086%203.71071%206.46957%203.5%207%203.5H7.5V7.5H7ZM9.5%2012.5H8.5V8.5H9.5C10.0304%208.5%2010.5391%208.71071%2010.9142%209.08579C11.2893%209.46086%2011.5%209.96957%2011.5%2010.5C11.5%2011.0304%2011.2893%2011.5391%2010.9142%2011.9142C10.5391%2012.2893%2010.0304%2012.5%209.5%2012.5Z%22/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M9.5%207.5H8.5V3.5H9C9.53043%203.5%2010.0391%203.71071%2010.4142%204.08579C10.7893%204.46086%2011%204.96957%2011%205.5C11%205.63261%2011.0527%205.75979%2011.1464%205.85355C11.2402%205.94732%2011.3674%206%2011.5%206C11.6326%206%2011.7598%205.94732%2011.8536%205.85355C11.9473%205.75979%2012%205.63261%2012%205.5C11.9992%204.7046%2011.6828%203.94202%2011.1204%203.37959C10.558%202.81716%209.7954%202.50083%209%202.5H8.5V1.5C8.5%201.36739%208.44732%201.24021%208.35355%201.14645C8.25979%201.05268%208.13261%201%208%201C7.86739%201%207.74021%201.05268%207.64645%201.14645C7.55268%201.24021%207.5%201.36739%207.5%201.5V2.5H7C6.20435%202.5%205.44129%202.81607%204.87868%203.37868C4.31607%203.94129%204%204.70435%204%205.5C4%206.29565%204.31607%207.05871%204.87868%207.62132C5.44129%208.18393%206.20435%208.5%207%208.5H7.5V12.5H6.5C5.96957%2012.5%205.46086%2012.2893%205.08579%2011.9142C4.71071%2011.5391%204.5%2011.0304%204.5%2010.5C4.5%2010.3674%204.44732%2010.2402%204.35355%2010.1464C4.25979%2010.0527%204.13261%2010%204%2010C3.86739%2010%203.74021%2010.0527%203.64645%2010.1464C3.55268%2010.2402%203.5%2010.3674%203.5%2010.5C3.50083%2011.2954%203.81716%2012.058%204.37959%2012.6204C4.94202%2013.1828%205.7046%2013.4992%206.5%2013.5H7.5V14.5C7.5%2014.6326%207.55268%2014.7598%207.64645%2014.8536C7.74021%2014.9473%207.86739%2015%208%2015C8.13261%2015%208.25979%2014.9473%208.35355%2014.8536C8.44732%2014.7598%208.5%2014.6326%208.5%2014.5V13.5H9.5C10.2956%2013.5%2011.0587%2013.1839%2011.6213%2012.6213C12.1839%2012.0587%2012.5%2011.2956%2012.5%2010.5C12.5%209.70435%2012.1839%208.94129%2011.6213%208.37868C11.0587%207.81607%2010.2956%207.5%209.5%207.5ZM7%207.5C6.46957%207.5%205.96086%207.28929%205.58579%206.91421C5.21071%206.53914%205%206.03043%205%205.5C5%204.96957%205.21071%204.46086%205.58579%204.08579C5.96086%203.71071%206.46957%203.5%207%203.5H7.5V7.5H7ZM9.5%2012.5H8.5V8.5H9.5C10.0304%208.5%2010.5391%208.71071%2010.9142%209.08579C11.2893%209.46086%2011.5%209.96957%2011.5%2010.5C11.5%2011.0304%2011.2893%2011.5391%2010.9142%2011.9142C10.5391%2012.2893%2010.0304%2012.5%209.5%2012.5Z%22/%3E%3C/svg%3E");
}
/* ---- Plan pricing ----
.plan-pricing is weight 600 on an in the reference — AGENTS.md §9.3
reserves 600 for emphasis inside body copy, never headings. The pattern
renders the price on a
, not a heading (see pricing-section.php), so
this weight is legitimate on the element it actually lands on — same
resolution as the counter section's digits (counter-section.php point 5). */
.idia-pricing__plan-price {
font-weight: 600;
}
/* ---- Feature rows ----
Solid border-light, deliberately not dashed — AGENTS.md and the doc both
flag this: unlike the counter's dashed secondary-colour divider, this rule
reads differently on purpose and must not be unified with it.
width: 100% (step-15b): the row is a flex child of a vertical flex column
(Feature List, pricing-section.php) with no `flex` or `align-self` of its
own, so it was shrinking to its own content (178-236px measured) instead
of filling the 392px 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-pricing__feature-row {
display: flex;
align-items: center;
width: 100%;
border-top: 1px solid var(--wp--preset--color--border-light);
}
/* 24x24 icon box (step-15b): measured 12px because nothing sized the
glyph's box — it was rendering at the inherited body font-size (16px) with
no explicit dimension, same category as .idia-pricing__plan-badge-icon's
36px/16px chassis above, which is also raw px for the same reason: an icon
box is component geometry, not running text on the type scale. Centring
the ✓ glyph inside a fixed box (rather than setting font-size directly)
keeps the box the reference's exact 24x24 regardless of glyph metrics. */
.idia-pricing__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 ----
The reference sets ALL CAPS button labels. AGENTS.md §3 requires sentence
case for buttons; the pattern authors the labels in sentence case and this
rule supplies the uppercase visual via CSS only, so the editable text
content itself stays correct. */
.idia-pricing__card .wp-block-button__link {
text-transform: uppercase;
}
/* ---- Title row + card entrance — starting state ----
Title left and the Monthly/Annually switcher use stodio's own
"slideInLeft"/"slideInRight" preset (opacity + translateX only, no blur —
a different, simpler mechanism than the hero/CTA "Fade In" family). The
pattern has no separate "title right" element — .idia-pricing__tab-menu is
the row's second flex child and plays that role, carrying its OWN
scroll-into-view entrance independent of its native-Tabs click behaviour
(register_tablist_assets() / tablist.js, untouched by this rule).
Cards use the standard "Fade In" family (blur + rise + fade), staggered
200/300/400ms, applied identically in BOTH tab panes — the reference
authors the same stagger on its hidden Annually pane's cards too. See
animation-map-remaining-sections.json, pricing section. Opt-in only:
scoped to prefers-reduced-motion: no-preference, so a reduced-motion
visitor's section renders complete and settled immediately —
pricing-reveal.js independently checks the same media query before
running these tweens. */
@media (prefers-reduced-motion: no-preference) {
.idia-pricing__container > .wp-block-group > .is-measure-pricing-title {
opacity: 0;
transform: translateX(-100px);
}
.idia-pricing__tab-menu {
opacity: 0;
transform: translateX(100px);
}
.idia-pricing__card {
opacity: 0;
transform: translateY(50px);
filter: blur(5px);
}
}