/* =========================================================
PRO24 — Pricing & Checkout clickable demo
Single-file. Drop into WordPress "Custom HTML" block or
open directly in a browser to test.
Brand palette: Kadence-aligned (Plenaxy / PRO24).
========================================================= */
:root{
/* ----------------------------------------------------------------
Standalone version — all colors hard-coded. No theme dependencies.
---------------------------------------------------------------- */
/* Core brand */
--navy: #00305b; /* dark headings */
--navy-2: #004884; /* secondary dark */
--blue: #2B6CB0; /* primary accent / CTA bg */
--blue-dark: #265E9A; /* accent hover */
--sky: #8bb9dc; /* highlight / soft chip — kept hard-coded (no Kadence equiv) */
--sky-tint: #e6f0fa; /* very light accent bg */
--sky-tint-2: #f2f7fc; /* even lighter */
/* Neutrals */
--ink: #1A202C;
--ink-soft: #515151;
--muted: #718096;
--line: #E1E1E1;
--line-2: #F7F7F7;
--bg: #ffffff;
--bg-soft: #F7F7F7;
/* Status — kept hard-coded; not part of Kadence palette */
--ok: #13612e;
--warn: #b7791f;
--err: #c53030;
/* Semantic aliases (keep downstream CSS simple) */
--accent: var(--blue); /* active ring uses palette1 if available */
--accent-dark: var(--blue-dark);
--accent-soft: var(--sky-tint);
--accent-faint: var(--sky-tint-2);
--pop: var(--navy);
--shadow-sm: 0 1px 2px rgba(10,37,64,.06), 0 1px 1px rgba(10,37,64,.04);
--shadow-md: 0 10px 30px -12px rgba(10,37,64,.20), 0 4px 10px -6px rgba(10,37,64,.08);
--shadow-lg: 0 24px 60px -20px rgba(10,37,64,.30);
--radius: 14px;
--radius-lg: 22px;
}
/* ---------------------------------------------------------------------------
Base resets — SCOPED to the widget's own roots ONLY.
These intentionally do NOT touch html / body / bare element selectors so the
storefront's global typography, link colours, buttons and box-sizing keep
winning everywhere outside the widget. The widget INHERITS the site's
font-family (no forced Open Sans) and only sets what it strictly needs inside
its own containers.
Roots: .p24-app (pricing) + .p24-modal / .p24-overlay / .p24-toast (portals
rendered as direct children of , siblings of .p24-app).
--------------------------------------------------------------------------- */
.p24-app,.p24-modal,.p24-overlay,.p24-toast{
box-sizing:border-box;
/* font-family is deliberately omitted — inherit the storefront font */
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
.p24-app *,.p24-app *::before,.p24-app *::after,
.p24-modal *,.p24-modal *::before,.p24-modal *::after,
.p24-overlay *,.p24-overlay *::before,.p24-overlay *::after,
.p24-toast *,.p24-toast *::before,.p24-toast *::after{
box-sizing:border-box;
}
/* Element resets are wrapped in :where() so they carry ONLY element-level
specificity (exactly like a bare `button{}` / `a{}` would). This keeps them
BELOW the widget's own single-class component rules (.p24-btn, .p24-btn-ghost,
.p24-field …) so those always win — while still neutralising the storefront's
default button/link chrome inside the widget and never leaking to the page.
NOTE: a plain descendant selector like `.p24-modal button` would raise the
specificity to 0-1-1 and OVERRIDE .p24-btn (0-1-0), which stripped the
checkout buttons of their padding/background/border. :where() avoids that. */
:where(.p24-app,.p24-modal,.p24-overlay,.p24-toast) button{
font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0;
}
:where(.p24-app,.p24-modal) input,
:where(.p24-app,.p24-modal) select,
:where(.p24-app,.p24-modal) textarea{
font-family:inherit;font-size:inherit;color:inherit;
}
:where(.p24-app,.p24-modal) a{color:var(--accent);text-decoration:none}
:where(.p24-app,.p24-modal) a:hover{text-decoration:underline}
/* ---------- layout ---------- */
.p24-app{display:flex;flex-direction:column}
/* ---------- hero / pricing header ---------- */
.p24-hero{
padding:32px 24px 8px;text-align:center;
}
.p24-pricing-footnote{
max-width:880px;margin:24px auto 0;padding:18px 24px;
background:var(--bg-soft);border-radius:var(--radius);
font-size:12px;color:var(--ink-soft);line-height:1.6;
}
.p24-pricing-footnote b{color:var(--ink);font-weight:700}
/* generic section */
.p24-section{padding:60px 24px}
.p24-section-alt{background:var(--bg-soft)}
.p24-section-inner{max-width:1100px;margin:0 auto}
.p24-section-inner.narrow{max-width:820px}
.p24-section-h2{
font-size:32px;letter-spacing:-.01em;color:var(--navy);
margin:0 0 8px;text-align:center;
}
.p24-section-lead{
text-align:center;color:var(--ink-soft);font-size:15px;
max-width:640px;margin:0 auto 32px;
}
/* comparison table */
.p24-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.p24-table{
width:100%;border-collapse:collapse;font-size:14px;min-width:680px;
}
.p24-table th, .p24-table td{
padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-2);
}
.p24-table th{
background:var(--bg-soft);font-weight:700;color:var(--navy);
font-size:13px;letter-spacing:.02em;
}
.p24-table th.hl{
background:var(--sky-tint);color:var(--blue-dark);
}
.p24-table td.hl{
background:var(--sky-tint-2);font-weight:600;
}
.p24-table tbody tr:last-child td{border-bottom:0}
.p24-table tbody tr:hover{background:#fafbfd}
.p24-table tbody tr:hover td.hl{background:#e0edf7}
/* FAQ */
.p24-faq{display:flex;flex-direction:column;gap:10px}
.p24-faq details{
background:#fff;border:1px solid var(--line);border-radius:12px;
padding:0;transition:.2s;overflow:hidden;
}
.p24-faq details[open]{box-shadow:var(--shadow-sm);border-color:var(--sky)}
.p24-faq summary{
padding:18px 22px;cursor:pointer;font-weight:600;font-size:15px;color:var(--navy);
list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.p24-faq summary::-webkit-details-marker{display:none}
.p24-faq summary::after{
content:'+';font-size:22px;color:var(--muted);font-weight:400;
transition:.2s;flex:0 0 auto;
}
.p24-faq details[open] summary::after{transform:rotate(45deg);color:var(--blue)}
.p24-faq details > div{
padding:0 22px 18px;font-size:14px;color:var(--ink-soft);line-height:1.65;
}
/* billing toggle */
.p24-bill{margin:0 auto;display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap}
.p24-bill #lblAnnual + .save{margin-left:-8px}
.p24-bill .save{
display:inline-flex;align-items:center;
background:#fff1e8;color:#9a3412;
border:1px solid #fbcfae;
font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;
letter-spacing:.02em;
}
.p24-bill .label{font-weight:600;font-size:14px}
.p24-bill .label.off{color:var(--muted);font-weight:500}
.p24-bill .label.off .save{opacity:1}
.p24-switch{
width:44px;height:24px;border-radius:999px;background:var(--accent)!important;
position:relative;transition:.2s;cursor:pointer;
border:0;padding:0;outline:none;
box-shadow:none!important;
}
.p24-switch:hover,.p24-switch:focus,.p24-switch:active,.p24-switch:focus-visible{
background:var(--accent)!important;
box-shadow:none!important;
}
.p24-switch::after{
content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.2s;
}
.p24-switch.on::after{left:23px}
/* ---------- pricing grid ---------- */
.p24-grid-wrap{max-width:1200px;margin:0 auto;padding:28px 24px 10px}
.p24-grid{
display:grid;gap:18px;
grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){.p24-grid{grid-template-columns:1fr}}
/* Loading state — spans all 3 grid columns so the spinner stays centered
regardless of how many tier cards the layout reserves room for. */
.p24-cards-loading{
grid-column:1 / -1;
padding:80px 24px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.p24-cards-loading i.fa-solid{
font-size:28px;color:var(--accent);
}
.p24-cards-loading-text{
font-size:14px;color:var(--muted);font-weight:500;
}
.p24-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;
transition:.2s;
}
.p24-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.p24-card.is-enterprise:hover{box-shadow:none;transform:none}
/* "Recommended for SMEs" ribbon — visual marker only, no blue ring.
Rendered as a real .p24-card-ribbon element (built in renderCards) instead of
a CSS ::before so the label can be localised via the i18n table. */
.p24-card-ribbon{
position:absolute;top:-1px;left:50%;transform:translateX(-50%) translateY(-50%);
background:linear-gradient(135deg,var(--sky),var(--blue));
color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;
padding:6px 14px;border-radius:999px;white-space:nowrap;
box-shadow:var(--shadow-sm);
z-index:3;
}
/* Paid-tier cards are clickable containers (whole-card click activates) */
.p24-card.is-clickable{cursor:pointer}
.p24-card.is-clickable:focus-visible{
outline:none;
box-shadow:0 0 0 3px var(--accent-soft), var(--shadow-md);
}
/* Active tier — strong blue ring */
.p24-card.is-locked{
border-color:var(--blue);
box-shadow:0 0 0 4px var(--accent-soft), var(--shadow-md);
background:linear-gradient(180deg,#fff 0%,#fafcff 100%);
z-index:2;
}
/* Disabled tier — content greyed out so user knows they're not editing it,
but the CTA footer stays at full strength so the "Switch to X" button is
clearly clickable. */
.p24-card.is-disabled > *:not(.p24-card-foot){opacity:.55;filter:saturate(.6)}
.p24-card.is-disabled .p24-mod{cursor:not-allowed;background:var(--bg-soft)}
.p24-card.is-disabled .p24-mod:hover{background:var(--bg-soft);border-color:var(--line)}
.p24-mod.is-disabled{cursor:not-allowed;pointer-events:none;opacity:.7}
/* ============== Enterprise card — light variant (same look as Starter/Professional) ============== */
/* No special card colour. Only the inner sales-chat button + cert row need styling. */
/* Sales chat button — clickable, opens Pipedrive chat */
.p24-ent-sales{
background:var(--accent-faint);border:1px solid var(--sky-tint);
border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;
width:100%;text-align:left;color:inherit;font-family:inherit;cursor:pointer;
transition:.15s;
}
.p24-ent-sales:hover{
background:var(--sky-tint);border-color:var(--sky);
transform:translateY(-1px);
}
.p24-ent-sales:active{transform:translateY(0)}
.p24-ent-sales .avatar{
width:40px;height:40px;border-radius:50%;flex:0 0 40px;
background:linear-gradient(135deg,var(--blue),var(--navy));
display:grid;place-items:center;color:#fff;
box-shadow:0 4px 12px rgba(10,37,64,.18);
}
.p24-ent-sales .meta{flex:1;min-width:0;line-height:1.35}
.p24-ent-sales .meta .who{font-size:13px;font-weight:700;color:var(--navy)}
.p24-ent-sales .meta .when{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;margin-top:2px}
.p24-ent-sales .meta .when::before{
content:'';width:7px;height:7px;border-radius:50%;background:#22c55e;
box-shadow:0 0 0 3px rgba(34,197,94,.22);
}
.p24-ent-sales .chevron{
flex:0 0 auto;color:var(--muted);font-size:18px;line-height:1;
transition:.15s;
}
.p24-ent-sales:hover .chevron{color:var(--blue-dark);transform:translateX(2px)}
/* Certification row */
.p24-ent-certs{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
padding:8px 0 0;
}
.p24-ent-certs .iso{
display:inline-flex;align-items:center;gap:5px;
padding:5px 10px;background:var(--bg-soft);
border:1px solid var(--line);border-radius:6px;
font-size:10px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em;
}
.p24-ent-certs .iso::before{
content:'✓';font-size:9px;color:var(--ok);
}
.p24-ent-certs-label{
text-align:center;font-size:10px;color:var(--muted);letter-spacing:.06em;
text-transform:uppercase;margin-bottom:6px;font-weight:600;
}
/* "Selected" tag indicator (kept for potential reuse) */
.p24-tier-active-tag{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;background:var(--blue);color:#fff;
font-size:11px;font-weight:700;border-radius:999px;
letter-spacing:.04em;text-transform:uppercase;
}
.p24-tier-state{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;background:var(--accent-faint);color:var(--blue-dark);
border:1px solid var(--sky);border-radius:8px;
font-size:12px;font-weight:600;justify-content:center;
}
.p24-tier-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p24-tier{
display:inline-block;padding:4px 12px;border:1px solid var(--line);
border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-soft);
background:#fafafd;
}
.p24-badge{
display:inline-block;padding:4px 10px;
background:var(--sky-tint);color:var(--blue-dark);
font-size:11px;font-weight:700;border-radius:999px;
letter-spacing:.02em;
}
.p24-price{
display:flex;align-items:baseline;gap:6px;margin-top:4px;
}
.p24-price .amount{font-size:36px;font-weight:800;letter-spacing:-.02em}
.p24-price .amount.p24-price-tailored{
font-size:28px;color:var(--navy);font-weight:700;letter-spacing:-.01em;
}
.p24-price .per{color:var(--muted);font-size:14px;font-weight:500}
.p24-sub{font-size:13px;color:var(--muted);margin-top:-4px}
.p24-for{font-size:13px;color:var(--ink-soft);padding:10px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.p24-features{
list-style:none!important;padding:0!important;margin:0!important;
display:flex;flex-direction:column;gap:10px;
}
.p24-features li{
display:flex;gap:10px;align-items:flex-start;
font-size:14px;color:var(--ink-soft);
margin:0!important;padding:0!important;list-style:none!important;
}
.p24-features li::before{content:none!important}
.p24-features .check{
flex:0 0 18px;font-size:18px;color:var(--accent);
line-height:1;margin-top:1px;
}
.p24-features h5{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 4px}
/* module picker inside card */
.p24-modules{
margin-top:6px;border-top:1px solid var(--line-2);padding-top:14px;
display:flex;flex-direction:column;gap:6px;
}
.p24-modules h5{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
.p24-mod{
display:flex;align-items:center;gap:10px;padding:8px 12px;
border:1px solid var(--line);border-radius:10px;cursor:pointer;
background:#fff;transition:.15s;position:relative;
}
.p24-mod:hover{border-color:var(--sky);background:var(--accent-faint)}
.p24-mod.checked{border-color:var(--accent);background:var(--accent-faint)}
.p24-mod .box{
width:18px;height:18px;border-radius:5px;border:1.5px solid #c7cdd4;
display:grid;place-items:center;flex:0 0 18px;transition:.15s;
}
.p24-mod.checked .box{background:var(--accent);border-color:var(--accent);color:#fff}
.p24-mod .name{flex:1;font-size:13px;font-weight:600;line-height:1.2}
.p24-mod .price{font-size:13px;font-weight:700;color:var(--accent-dark);white-space:nowrap}
/* Info tooltip on each module */
.p24-mod .info{
flex:0 0 auto;display:inline-grid;place-items:center;
width:18px;height:18px;border-radius:50%;
color:var(--muted);cursor:help;outline:none;
transition:.15s;
}
.p24-mod .info:hover,.p24-mod .info:focus{color:var(--blue-dark);background:var(--accent-soft)}
.p24-mod .info::after{
content:attr(data-tip);
position:absolute;bottom:calc(100% + 8px);right:8px;
background:var(--navy);color:#fff;font-size:12px;font-weight:500;
line-height:1.45;padding:8px 12px;border-radius:8px;
width:230px;white-space:normal;text-align:left;
box-shadow:var(--shadow-md);
opacity:0;pointer-events:none;transform:translateY(4px);transition:.15s;
z-index:50;
}
.p24-mod .info::before{
content:'';position:absolute;bottom:calc(100% + 2px);right:14px;
border:6px solid transparent;border-top-color:var(--navy);
opacity:0;transition:.15s;z-index:50;
}
.p24-mod .info:hover::after,.p24-mod .info:focus::after,
.p24-mod .info:hover::before,.p24-mod .info:focus::before{
opacity:1;transform:translateY(0);
}
/* footer of card */
.p24-card-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.p24-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;
transition:.15s;white-space:nowrap;
}
.p24-btn-primary{background:var(--accent);color:#fff}
/* !important to override Kadence's base button:hover background and link
color rules. Without this an loses its
white text + flashes a different bg on hover. */
.p24-btn-primary:hover,
.p24-btn-primary:focus,
.p24-btn-primary:focus-visible,
.p24-btn-primary:active{
background:var(--accent-dark)!important;
color:#fff!important;
border:0!important;box-shadow:none!important;
}
.p24-btn-outline{background:#fff;color:var(--accent-dark);border:1.5px solid var(--accent)}
.p24-btn-outline:hover,
.p24-btn-outline:focus,
.p24-btn-outline:focus-visible,
.p24-btn-outline:active{
background:var(--accent-faint)!important;
color:var(--accent-dark)!important;
border-color:var(--accent)!important;box-shadow:none!important;
}
/* Cancel-style. Visible background + border so the button reads as a button,
not as orphan text. Kadence's button:hover injects gradient/shadow that
masks the text colour — !important pins our own palette. */
.p24-btn-ghost{
background:#fff;color:var(--ink-soft);
border:1.5px solid var(--line);
}
.p24-btn-ghost:hover,
.p24-btn-ghost:focus,
.p24-btn-ghost:focus-visible,
.p24-btn-ghost:active{
background:var(--bg-soft)!important;
color:var(--ink)!important;
border-color:var(--muted)!important;
box-shadow:none!important;
}
/* Link-as-button — text-decoration:none in every state so
doesn't pick up the Kadence default underline on hover. */
a.p24-btn,
a.p24-btn:visited,
a.p24-btn:hover,
a.p24-btn:focus,
a.p24-btn:focus-visible,
a.p24-btn:active{
text-decoration:none!important;
}
.p24-btn-dark{background:var(--pop);color:#fff}
.p24-btn-dark:hover{background:#2a1a50}
.p24-btn[disabled]{opacity:.5;cursor:not-allowed}
.p24-incl{font-size:12px;color:var(--muted);text-align:center}
.p24-incl b{color:var(--ink-soft);font-weight:700}
/* selected total bar */
.p24-selected-line{
margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--accent-faint);
font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;
}
.p24-selected-line b{color:var(--ink);font-weight:700}
/* ---------- checkout form fields (used inside modal) ---------- */
.p24-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.p24-row.one{grid-template-columns:1fr}
.p24-row.mt{margin-top:12px}
.p24-field{display:flex;flex-direction:column;gap:6px}
.p24-field label{font-size:12px;font-weight:600;color:var(--ink-soft)}
.p24-field input,.p24-field select,.p24-field textarea{
padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
transition:.15s;outline:none;font-size:14px;
}
.p24-field input:focus,.p24-field select:focus,.p24-field textarea:focus{
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.p24-field.err input,.p24-field.err select{border-color:var(--err);box-shadow:0 0 0 3px rgba(197,48,48,.12)}
.p24-field .hint{font-size:11px;color:var(--muted)}
.p24-field .errmsg{font-size:11px;color:var(--err);font-weight:600}
/* System-languages block: a 'Default language'