/* ========================================================================= Equidam Pricing Widget — scoped port of the legacy stylesheets Source files (verbatim, line-for-line): public/assets/wordpress-extra/pricing-widget-vda/css/pricing-widget-vda.css public/assets/wordpress-extra/pricing-widget-freemium/css/pricing-widget-freemium.css Strategy: every legacy rule preserved with original values, ordering, media queries, transitions and pseudo-elements. Only changes: 1. Selectors rewritten to the BEM contract from CONTRACT.md. 2. The whole sheet scoped under `.eq-pw` so the plugin cannot bleed into — or be bled into by — the surrounding WordPress theme. 3. Body/html/global resets folded into the `.eq-pw` wrapper itself. 4. Angular Material attributes (`layout="row"`, `flex="75"`, etc.) and `md-*` rules translated into equivalent flexbox targeting the new templates' DOM. ========================================================================= */ /* ------------------------------------------------------------------------ * * Wrapper reset (from legacy `body`/`html`/`*` rules) * Source: pricing-widget-vda.css L1-L15, pricing-widget-freemium.css L1-L15 * ------------------------------------------------------------------------ */ .eq-pw { /* Legacy body: -webkit-font-smoothing: antialiased; font-family: "Muli". */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: auto; font-family: "Muli", sans-serif; font-weight: normal; /* Legacy: background fully transparent so WP page styles bleed through. */ background-color: rgb(0 0 0 / 0%); height: auto; /* Default body color — legacy `p { color: #083b56 }`. */ color: #083b56; line-height: 1.4; text-align: left; } /* Legacy `*:focus { outline: none }` — scoped to the widget so we don't suppress focus rings elsewhere on the host page. */ .eq-pw *:focus { outline: none; } /* Legacy `box-sizing` was a global Material reset; we apply it just inside the widget so descendant width math (padding 24px + flex %) is correct. */ .eq-pw, .eq-pw *, .eq-pw *::before, .eq-pw *::after { box-sizing: border-box; } /* Reset margin/padding on common descendants to neutralise WP theme rules. Specificity stays at 0,1,0 thanks to `:where()` so single-class component rules below still win. */ .eq-pw :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, button, a, input, section, header, div, span) { margin: 0; padding: 0; font-family: inherit; line-height: inherit; text-decoration: none; color: inherit; background: none; border: 0; } .eq-pw :where(ul, ol) { list-style: none; } /* Equidam's WordPress theme ships a global rule * `ul:not(#menu-header-menu-ii) { margin-left: 38px }` * which has specificity (1,0,1) thanks to the ID inside :not(). That beats * the zero-specificity `:where()` reset above, so our feature lists pick up * the 38px indent and shove the rows off-centre. We can't outrank an ID in * specificity without adding one of our own to every list — and we don't * want to bake a theme-specific ID into the plugin — so we override with * !important scoped tightly to the plugin's own ul/ol elements. Same * treatment for padding-left in case the theme adds that next. */ .eq-pw ul, .eq-pw ol { margin-left: 0 !important; padding-left: 0 !important; } .eq-pw :where(button) { cursor: pointer; font: inherit; } /* Hidden wrapper — render_widget() emits this when the API fetch fails. */ .eq-pw--unavailable { display: none; } /* ------------------------------------------------------------------------ * * Headings / body type — legacy `h1, h4 { font-family: aileron; color: ... }` * Source: pricing-widget-vda.css L45-L52 * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__card-title, .eq-pw .eq-pw__features-heading { font-family: "aileron", sans-serif; color: #083b56; } .eq-pw .eq-pw__card-subtitle, .eq-pw .eq-pw__days-row, .eq-pw .eq-pw__no-cc { color: #083b56; } /* ------------------------------------------------------------------------ * * Currency + total figure * Source: vda.css L74-L91, freemium.css L78-L91 * Legacy `.currency` was the `` host of the * "$" / "US$" label; `.md-display-3` was the big total figure. The new * template renders the symbol in `.eq-pw__currency` and the total in * `.eq-pw__total`, so the rules port across cleanly. * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__currency { font-size: 25px; font-weight: 600; color: rgba(8, 59, 86, .5); position: relative; /* Nudges the currency symbol up by 1px so its baseline lands flush with * the integer's cap height — visually levels the "$" with the big digits * rather than floating it just below their tops. */ top: -1px; } .eq-pw .eq-pw__currency-prefix { font-size: 20px; vertical-align: baseline; } /* Legacy `.md-display-3` — 56/50/500 for the big total. */ .eq-pw .eq-pw__total { font-size: 56px; line-height: 50px; font-weight: 500; font-family: "aileron", sans-serif; color: #083b56; margin: 0; /* Aileron ships proportional digits — 1's are narrow, 0/8's wide — which * reads as irregular letter-spacing in a price. tabular-nums forces all * digits to the same advance width so the price stack looks evenly set * and doesn't visibly shift width as the date picker changes the total. * Inherits down to .eq-pw__total-frac and .eq-pw__total-int. */ font-variant-numeric: tabular-nums; } /* Fractional portion of the price (e.g. ".00", ".45") at half the integer's * font-size, baseline-aligned so the dot + cents sit along the bottom of the * large number rather than floating up as a superscript. `format_money()` * always emits two decimals, so this span is always present on paid cards. */ .eq-pw .eq-pw__total-frac { font-size: 28px; line-height: 1; font-weight: 500; /* Baseline alignment puts the smaller text's baseline on the integer's * baseline — visually that's "bottom of the line" since the larger * digits have their bottom at that same baseline. */ vertical-align: baseline; /* Tiny left nudge keeps the dot from kissing the last integer digit. */ margin-left: 1px; } /* ------------------------------------------------------------------------ * * Cards layout (legacy `.widget-card-wrapper` + `.widget-card`) * Source VDA: vda.css L89-L100 — gap 60px, padding 20px 30px. * Source FT: freemium.css L93-L111 — gap 3vw, padding 20px 3vw, plus the * `.widget-card.big` lift. Both use `flex: 1 1 0` (FT explicitly, * VDA implicitly through the layout="row" Material attribute). * * We split the rule into a base (.eq-pw__cards) and a freemium scope * (.eq-pw--freemium .eq-pw__cards) so each variant gets its own gap math * matching the source. * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__cards { display: flex; flex-direction: row; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 60px; padding: 20px 30px; } .eq-pw--freemium .eq-pw__cards { /* Legacy freemium uses 3vw gap so three cards fit at desktop widths. */ gap: 3vw; padding: 20px 3vw; } .eq-pw .eq-pw__card { border-radius: 10px; background-color: white; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05); max-width: 440px; /* Legacy freemium CSS adds `flex: 1 1 0; min-width: 0` so all three * cards share width evenly. VDA inherits the same behaviour from the * Material `layout="row"` parent. Apply universally — VDA only has two * cards so it just centres them. */ flex: 1 1 0; min-width: 0; /* Legacy blade carries `style="padding-bottom:30px"` inline on the *
— port to CSS so the markup is clean. */ padding-bottom: 30px; /* Need a positioning context for the absolutely-positioned discount row. */ position: relative; display: flex; flex-direction: column; } /* Free-trial highlighted card — legacy `.widget-card.big` * Source: freemium.css L107-L111. Applied to the middle card (Standard, * which carries `class: 'dark-blue'` in the FT template), so we key the * lift off `.eq-pw--freemium .eq-pw__card--dark-blue`. */ .eq-pw--freemium .eq-pw__card--dark-blue { margin: -15px 0px -15px 0px; border: 1px solid #27c2ff; box-shadow: 0px 5px 15px rgba(39, 194, 255, 0.4); } /* ------------------------------------------------------------------------ * * Card header (legacy `.widget-card-header`) * Source VDA: vda.css L102-L125 (padding 10px 24px 24px 24px, mb 36px). * Source FT: freemium.css L113-L140 (padding 24px 24px 24px 24px, plus * `.dark-blue` adds padding-top: 38px and `.limited` swaps the * background to slate #b0bec5). * * Both files share the slate default + dark-blue + h2/p styles. * The header `
` in the legacy held the title and the icon side * by side (h2 flex="75" + i.icon absolute on the right). Translate as a * relative-positioned header with the title constrained to ~75% width. * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__card-header { color: white; background-color: #9aafb9; border-radius: 10px 10px 0 0; position: relative; margin-bottom: 36px; /* Unified vertical rhythm across both variants per design feedback — * 24px top so the title sits close to the upper edge, 38px bottom so * the subtitle has room before the price block. Horizontal 28px is * shared with the features block below for a single card-wide gutter. */ padding: 24px 28px 38px 28px; /* Lock every card header to the same min-height so cards line up * regardless of subtitle length — applies to VDA (2 cards) and freemium * (3 cards) so the price-block tops stay flush. */ min-height: 190px; /* Equidam's WordPress theme ships a desktop-only `header { z-index: 1000; * position: relative }` rule (intended for the site nav). Our card * uses a `
` element, so the theme * rule promotes the card header into its own stacking context at z:1000 * — far above the days-row tooltip's z:5, which then renders under the * card when it overlaps. Pinning z-index to `auto` here drops the * header back into the normal flow so the tooltip wins by document * order. Our selector specificity (0,2,0) beats `header` (0,0,1) * without needing !important. */ z-index: auto; } /* When a card icon is present, widen the header's right padding by exactly * one icon-width (60px) so the title + subtitle can use the full inner area * without ever wrapping into the absolutely-positioned glyph. This replaces * the legacy `max-width: 75% / 85%` percentage caps on the title/subtitle, * which drifted at narrower card widths and let the subtitle slide under the * icon on desktop-narrow FT layouts. The icon sits at `right: 32px` (document) * or `right: 42px` (align-center-horizontal, map2), so 60px of extra padding * leaves a 4-14px gutter between text and icon's left edge — clean. The * :has() selector skips this on the Explorer freemium card (no icon), which * therefore keeps the full header width for its title. */ .eq-pw .eq-pw__card-header:has(.eq-pw__card-icon) { padding-right: 88px; } .eq-pw .eq-pw__card-header--dark-blue { background-color: #083b56; } /* FT paid Standard card uses dark-blue + extra top padding to absorb the * -15px card lift. Legacy 38 → pass 1 44 → pass 2 52. */ .eq-pw--freemium .eq-pw__card-header--dark-blue { padding-top: 52px; } /* Legacy applied a lighter slate (#b0bec5) to the Explorer/free card header, * leaving the Benchmarked card on the default slate (#9aafb9) — two visibly * different greys side by side. Unified to the default slate per design * feedback so all unpaid/non-highlighted headers share one colour. */ .eq-pw .eq-pw__card-header .eq-pw__card-subtitle { color: white; line-height: 20px; margin: 0; font-size: 14px; /* Legacy used `

` (max-width: 85%) to keep the subtitle clear * of the icon. We now reserve that space on the header itself via * `padding-right` (see `.eq-pw__card-header:has(.eq-pw__card-icon)`), so * the cap is no longer needed and would only truncate the subtitle on * the icon-less Explorer card. */ /* Legacy `.widget-card-header p { margin: 0 }` — keep flush under the h2. * In legacy the visible gap between title and subtitle came from Angular * Material's body-font rhythm on the h2 (`margin-top: 24.9px`), not from * the subtitle. We reproduce that gap on the title (see __card-title). */ } .eq-pw .eq-pw__card-title { font-family: 'aileron', sans-serif; font-size: 30px; text-transform: uppercase; margin-bottom: 0; color: white; font-weight: 700; line-height: 1.1; /* Legacy capped the title at `flex="75"` (max-width: 75%) to keep it * clear of the icon. The icon's space is now reserved on the header via * `padding-right` (see `.eq-pw__card-header:has(.eq-pw__card-icon)`), so * the cap is gone and the title can use the full inner width — important * for the icon-less Explorer card whose long subtitle/heading was * otherwise prematurely wrapped. */ /* Legacy VDA's

inherited Angular Material's body-font rhythm * (margin-top ~24.9px), which pushed the title down inside the 10px-top- * padded header. The legacy freemium header already pads the top to * 24px or 38px (`.dark-blue` cards), so it explicitly reset h2 margin-top * to 0. We mimic both: default to 24px (rounded from 24.9) here, then * the FT card-header rule below resets it back to 0 since FT padding * already provides the breathing room. */ margin-top: 24px; } /* Free-trial uses padding to push the title down, not h2 margin — the legacy * FT stylesheet explicitly set `.widget-card-header h2 { margin-top: 0 }`. */ .eq-pw--freemium .eq-pw__card-title { margin-top: 0; } /* ------------------------------------------------------------------------ * * Card icon glyph * Source: vda.css L126-L142, freemium.css L147-L164 * Legacy used the Linearicons font (`` etc). * Per CONTRACT we ship inline SVGs instead — reproducing the same three * glyphs (document, two-row align, folded map) at the same 60px size and * absolute positions. Each glyph keeps its legacy `top` / `right` offset so * it lands in the same spot as the original. * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__card-icon { /* Legacy `.icon { font-size: 60px }` — we use width/height since the SVG * is a background image, not a glyph. */ position: absolute; width: 60px; height: 60px; color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; } .eq-pw .eq-pw__card-icon--icon-document2 { /* Legacy `.icon.icon-document2 { top: 37px; right: 32px }`. */ top: 37px; right: 32px; /* Document glyph reproduced from the linearicons `lnr-document2`: a thin * outlined sheet with a folded top-right corner and three stacked text * lines. Stroke 2.5px to read at 60px against the dark-blue header. */ background-image: url("data:image/svg+xml;utf8,"); } .eq-pw .eq-pw__card-icon--icon-align-center-horizontal { /* Legacy `.icon.icon-align-center-horizontal { top: 40px; right: 42px }`. */ top: 40px; right: 42px; /* Linearicons `lnr-align-center-horizontal`: a vertical centerline with * three horizontal bars of decreasing length stacked on it — the * "benchmarking" / horizontal-alignment glyph. Reproduced here in * stroke style at 60px. */ background-image: url("data:image/svg+xml;utf8,"); } .eq-pw .eq-pw__card-icon--icon-map2 { /* Legacy `.icon.icon-map2 { top: 37px; right: 42px }` (freemium only). */ top: 37px; right: 42px; /* Linearicons `lnr-map2`: a folded map with two creases. Reproduced as a * three-panel zigzag with vertical fold lines. */ background-image: url("data:image/svg+xml;utf8,"); } /* ------------------------------------------------------------------------ * * Price block — discount strikethrough + pill, total row, days row * Source: vda.css L238-L283 + L296-L309, freemium.css L298-L318 + L332-L345 * * Legacy DOM was a flex column inside the card body: *
*
strikethrough + pill *
currency + total + excl. VAT *
days link + tooltip + datepicker * CTA *
features * * The new templates wrap all of that under `.eq-pw__price-block`. We keep * the column layout, centre alignment, and put the discount block at the * top with `position: absolute; top: -27px` exactly like legacy. * ------------------------------------------------------------------------ */ .eq-pw .eq-pw__price-block { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; /* Pass 2 design bump: extra horizontal + bottom breathing room around * the price + days + CTA stack. Legacy block had no padding and relied * on per-row margins; the additional outer padding keeps the price * elements from feeling crammed against the card edges. */ padding: 6px 16px 18px 16px; } /* Discount strikethrough + pill, legacy `.discount-container-abs`. * Source: vda.css L238-L246, freemium.css L298-L307. */ .eq-pw .eq-pw__discount { position: absolute; top: -27px; /* Legacy parent was `
` — translate to a flex row. */ display: flex; flex-direction: row; align-items: center; } .eq-pw .eq-pw__discount[hidden] { display: none; } /* Legacy `.text-50-black { color: rgba(0, 0, 0, 0.5) }` + `.second-discount * { text-decoration: line-through; font-size: 20px; margin: 0 }`. */ .eq-pw .eq-pw__discount-original { color: rgba(0, 0, 0, 0.5); text-decoration: line-through; font-size: 20px; margin: 0; /* Same fixed-width digits as the main total — keeps the strikethrough * price visually consistent with the figure beneath it. */ font-variant-numeric: tabular-nums; } /* Dark-blue pill next to the strikethrough showing "X% discount". Sizing * bumped over the legacy `.rounded-pill-dark-blue` values per design * feedback — more horizontal padding (8px instead of 4px) so the percent * text doesn't crowd the edges, 20px height so the pill aligns visually * with the larger strikethrough digits, and an explicit 3px border-radius * so the corners read as "pill-ish" rather than a hard rectangle. */ .eq-pw .eq-pw__discount-pill { padding: 3px 8px; height: 20px; font-size: 12px; text-align: center; background-color: #083b56; color: white; margin: 0; margin-left: 10px; margin-top: 2px; border-radius: 3px; } /* Currency + total + VAT note. Legacy DOM was an inline flex `
` * with the `.currency` span inline-relative to the `.md-display-3`

. */ .eq-pw .eq-pw__price-row { /* Legacy was an inline `

` (= layout-row) with the currency * span first, then the big-number

. */ position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; } /* "excl. VAT" inline note — legacy used inline style on a span: * font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 32px. * Match exactly. */ .eq-pw .eq-pw__vat-note { font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 32px; align-self: flex-start; margin-left: 4px; } /* ------------------------------------------------------------------------ * * Days row + datepicker * Source: vda.css L146-L148, L301-L309, plus legacy inline styles in the * pricing_widget_vda.blade.php / pricing_widget_freemium.blade.php * on the `` and `` for pencil + info-icon glyphs. * * Legacy markup: *

* With access for * 2 months * * … * *

* * * We replace the with a