/* PointCraft base styles (tokens, type, buttons, cards) — Oct 2026 redesign. Loaded site-wide from header template 137. * Source: mainsite-wordpress/site-build/assets/pc-base.css; deployed to /wp-content/uploads/2026/10/pc-base.css */ :root { --pc-green: #00A76F; --pc-green-dark: #007867; --pc-green-darker: #004B50; --pc-green-light: #5BE49B; --pc-green-lighter: #C8FAD6; --pc-ink: #212B36; --pc-ink-2: #454F5B; --pc-muted: #637381; --pc-light: #919EAB; --pc-grey-4: #C4CDD5; --pc-band: #F4F6F8; --pc-dark: #161C24; --pc-success-dark: #118D57; --pc-info-dark: #006C9C; --pc-error: #FF5630; --pc-line: rgba(145, 158, 171, .2); --pc-input: rgba(145, 158, 171, .32); --pc-grad: linear-gradient(95deg, #00A270 13.5%, #0021FB 126.82%); --pc-teal: linear-gradient(135deg, #004B50 0%, #007867 55%, #00A76F 100%); --pc-shadow-card: 0 0 2px rgba(145, 158, 171, .2), 0 12px 24px -4px rgba(145, 158, 171, .12); --pc-shadow-hover: 0 0 2px rgba(145, 158, 171, .24), 0 16px 32px -4px rgba(145, 158, 171, .2); --pc-shadow-raised: 0 0 2px rgba(145, 158, 171, .24), 0 20px 40px -8px rgba(145, 158, 171, .24); --pc-shadow-media: 0 0 2px rgba(145, 158, 171, .24), 0 24px 48px -8px rgba(145, 158, 171, .32); --pc-shadow-teal: 0 0 2px rgba(145, 158, 171, .2), 0 20px 40px -8px rgba(0, 75, 80, .4); --pc-shadow-green: 0 0 2px rgba(0, 167, 111, .24), 0 20px 40px -8px rgba(0, 167, 111, .24); --pc-shadow-modal: 0 0 2px rgba(145, 158, 171, .24), 0 24px 48px -8px rgba(22, 28, 36, .36); --pc-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pc-num: 'Barlow', 'Public Sans', sans-serif; --pc-header-h: 106px; } /* ---------- Grid utility: section > .elementor-container laid out as the mockups' CSS grids ---------- */ .pc-grid > .elementor-container { display: grid !important; grid-template-columns: repeat(var(--pc-cols, 3), minmax(0, 1fr)); column-gap: var(--pc-gap, 24px); row-gap: var(--pc-gap-y, var(--pc-gap, 24px)); } .pc-grid > .elementor-container > .elementor-column { width: 100% !important; max-width: none; } .pc-cols-1 { --pc-cols: 1; } .pc-cols-2 { --pc-cols: 2; } .pc-cols-3 { --pc-cols: 3; } .pc-cols-4 { --pc-cols: 4; } .pc-cols-5 { --pc-cols: 5; } .pc-cols-6 { --pc-cols: 6; } .pc-cols-t-1 { --pc-cols-t: 1; } .pc-cols-t-2 { --pc-cols-t: 2; } .pc-cols-t-3 { --pc-cols-t: 3; } .pc-cols-t-4 { --pc-cols-t: 4; } .pc-cols-t-6 { --pc-cols-t: 6; } .pc-cols-m-1 { --pc-cols-m: 1; } .pc-cols-m-2 { --pc-cols-m: 2; } .pc-cols-m-3 { --pc-cols-m: 3; } .pc-gap-0 { --pc-gap: 0px; } .pc-gap-14 { --pc-gap: 14px; } .pc-gap-16 { --pc-gap: 16px; } .pc-gap-20 { --pc-gap: 20px; } .pc-gap-24 { --pc-gap: 24px; } .pc-gap-28 { --pc-gap: 28px; } .pc-gap-32 { --pc-gap: 32px; } .pc-gap-36 { --pc-gap: 36px; } .pc-gap-48 { --pc-gap: 48px; } .pc-gap-hero { --pc-gap: clamp(40px, 5vw, 72px); } .pc-gap-split { --pc-gap: clamp(32px, 5vw, 64px); } .pc-gap-split4 { --pc-gap: clamp(32px, 4vw, 56px); } .pc-gap-prod { --pc-gap: clamp(32px, 4vw, 64px); } .pc-gapy-14 { --pc-gap-y: 14px; } .pc-gapy-20 { --pc-gap-y: 20px; } .pc-gapy-24 { --pc-gap-y: 24px; } .pc-gapy-40 { --pc-gap-y: 40px; } .pc-align-center > .elementor-container { align-items: center; } .pc-align-start > .elementor-container { align-items: start; } @media (max-width: 1024px) { .pc-grid > .elementor-container { grid-template-columns: repeat(var(--pc-cols-t, var(--pc-cols, 2)), minmax(0, 1fr)); } } @media (max-width: 767px) { .pc-grid > .elementor-container { grid-template-columns: repeat(var(--pc-cols-m, 1), minmax(0, 1fr)); } } /* Exact auto-fit grids from the mockups: repeat(auto-fit, minmax(min(Npx, 100%), 1fr)) at every width */ .pc-af-120 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)) !important; } .pc-af-190 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important; } .pc-af-200 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important; } .pc-af-220 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; } .pc-af-240 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; } .pc-af-260 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; } .pc-af-270 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)) !important; } .pc-af-280 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; } .pc-af-300 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; } .pc-af-320 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; } .pc-af-340 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important; } .pc-af-360 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)) !important; } .pc-gap-10 { --pc-gap: 10px; } .pc-gap-18 { --pc-gap: 18px; } .pc-gap-44 { --pc-gap: 44px; } .pc-gap-56 { --pc-gap: 56px; } /* Section scope: the mockups' base type (Public Sans, line-height normal, ink) instead of Astra's 1.65 body */ .elementor-section.pc-scope { font-family: var(--pc-font); line-height: normal; color: var(--pc-ink); } /* The kit applies its old global typography (Graphik 17px) per widget type; redesigned areas use Public Sans */ .elementor-section.pc-scope .elementor-widget-text-editor, .pc-footer .elementor-widget-text-editor, .pc-quote-modal .elementor-widget-text-editor, .pc-header .elementor-widget-text-editor { font-family: var(--pc-font); } /* No kit widget spacing inside: every gap is set explicitly with pc-mb-* */ .pc-ws0 .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; } /* Section side gutter and vertical rhythm exactly as the mockups (clamp values) */ .elementor-section.pc-sx { padding-left: clamp(20px, 3vw, 32px) !important; padding-right: clamp(20px, 3vw, 32px) !important; } .elementor-section.pc-sx16 { padding-left: clamp(16px, 3vw, 32px) !important; padding-right: clamp(16px, 3vw, 32px) !important; } .elementor-section.pc-pt-96 { padding-top: clamp(56px, 8vw, 96px) !important; } .elementor-section.pc-pb-96 { padding-bottom: clamp(56px, 8vw, 96px) !important; } .elementor-section.pc-pt-88 { padding-top: clamp(56px, 8vw, 88px) !important; } .elementor-section.pc-pb-88 { padding-bottom: clamp(56px, 8vw, 88px) !important; } .elementor-section.pc-pt-64 { padding-top: clamp(40px, 6vw, 64px) !important; } .elementor-section.pc-pb-64 { padding-bottom: clamp(40px, 6vw, 64px) !important; } .elementor-section.pc-pt-hero { padding-top: clamp(48px, 7vw, 96px) !important; } .elementor-section.pc-pb-hero { padding-bottom: clamp(56px, 7vw, 88px) !important; } .elementor-section.pc-pt-48 { padding-top: clamp(28px, 4vw, 48px) !important; } .elementor-section.pc-pb-48 { padding-bottom: clamp(28px, 4vw, 48px) !important; } .elementor-section.pc-pt-18 { padding-top: 18px !important; } .elementor-section.pc-pt-0 { padding-top: 0 !important; } .elementor-section.pc-pb-0 { padding-bottom: 0 !important; } /* Widget spacing utilities */ .elementor-widget.pc-mb-0 { margin-bottom: 0 !important; } .elementor-widget.pc-mb-4 { margin-bottom: 4px !important; } .elementor-widget.pc-mb-6 { margin-bottom: 6px !important; } .elementor-widget.pc-mb-8 { margin-bottom: 8px !important; } .elementor-widget.pc-mb-10 { margin-bottom: 10px !important; } .elementor-widget.pc-mb-12 { margin-bottom: 12px !important; } .elementor-widget.pc-mb-14 { margin-bottom: 14px !important; } .elementor-widget.pc-mb-16 { margin-bottom: 16px !important; } .elementor-widget.pc-mb-18 { margin-bottom: 18px !important; } .elementor-widget.pc-mb-20 { margin-bottom: 20px !important; } .elementor-widget.pc-mb-22 { margin-bottom: 22px !important; } .elementor-widget.pc-mb-24 { margin-bottom: 24px !important; } .elementor-widget.pc-mb-28 { margin-bottom: 28px !important; } .elementor-widget.pc-mb-32 { margin-bottom: 32px !important; } .elementor-widget.pc-mb-36 { margin-bottom: 36px !important; } .elementor-widget.pc-mb-44 { margin-bottom: 44px !important; } .elementor-widget.pc-mb-48 { margin-bottom: 48px !important; } .elementor-widget.pc-mr-12 { margin-right: 12px !important; } .elementor-widget.pc-mr-14 { margin-right: 14px !important; } .elementor-section.pc-mb-22 { margin-bottom: 22px; } .elementor-section.pc-mb-28 { margin-bottom: 28px; } .elementor-section.pc-mb-32 { margin-bottom: 32px; } .elementor-section.pc-mb-36 { margin-bottom: 36px; } .elementor-section.pc-mb-44 { margin-bottom: 44px; } .elementor-section.pc-mb-48 { margin-bottom: 48px; } /* Button rows: inner section with one column whose buttons sit inline with a 14px gap (wrapping like the mockups) */ .pc-btnrow > .elementor-container > .elementor-column > .elementor-widget-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .pc-btnrow--center > .elementor-container > .elementor-column > .elementor-widget-wrap { justify-content: center; } .pc-btnrow--g16 > .elementor-container > .elementor-column > .elementor-widget-wrap { gap: 16px; } .pc-btnrow .elementor-widget { width: auto !important; max-width: 100%; margin: 0 !important; } /* Card columns: the grid gap sits outside, the widget-wrap is the card */ .pc-colcard > .elementor-widget-wrap { background: #FFFFFF; border-radius: 16px; box-shadow: var(--pc-shadow-card); padding: 32px !important; align-content: flex-start; position: relative; transition: all .2s ease-in-out; } .pc-colcard.pc-lift:hover > .elementor-widget-wrap { transform: translateY(-2px); } .pc-colcard--raised > .elementor-widget-wrap { box-shadow: var(--pc-shadow-raised); } .pc-colcard--bar > .elementor-widget-wrap { overflow: hidden; } .pc-colcard--bar > .elementor-widget-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--pc-grad); } /* Banner boxes: the section's boxed container is the box, so its columns can still hold inner sections */ .pc-box-dark > .elementor-container { background: var(--pc-dark); border-radius: 20px; padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 56px); } .pc-box-teal > .elementor-container { background: var(--pc-teal); border-radius: 20px; box-shadow: var(--pc-shadow-teal); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 56px); } .pc-box-teal.pc-box--cta > .elementor-container { padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 64px); text-align: center; } /* Anchor targets clear the pinned header */ @media (max-width: 1024px) { :root { --pc-header-h: 110px; } } @media (max-width: 767px) { :root { --pc-header-h: 133px; } } .pc-anchor { scroll-margin-top: calc(var(--pc-header-h) + 24px); } /* ---------- Typography helpers -------------------------------------------------------------------- */ .pc-font, .pc-font * { font-family: var(--pc-font); } .elementor .pc-h1 .elementor-heading-title { font-family: var(--pc-font); font-weight: 800; color: var(--pc-ink); font-size: clamp(34px, 5vw, 52px); line-height: 1.15; letter-spacing: -.5px; margin: 0; } .elementor .pc-h1.pc-h1--xl .elementor-heading-title { font-size: clamp(38px, 5.6vw, 60px); line-height: 1.08; letter-spacing: -1px; } .elementor .pc-h1.pc-h1--sm .elementor-heading-title { font-size: clamp(32px, 4.5vw, 46px); } .elementor .pc-h1.pc-h1--xs .elementor-heading-title { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.4px; } .elementor .pc-h2 .elementor-heading-title { font-family: var(--pc-font); font-weight: 800; color: var(--pc-ink); font-size: clamp(28px, 4vw, 38px); line-height: 1.2; letter-spacing: -.4px; margin: 0; } .elementor .pc-h2.pc-h2--cat .elementor-heading-title { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.3px; } .elementor .pc-h2.pc-h2--prod .elementor-heading-title { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.3px; } .elementor .pc-h2.pc-h2--cta .elementor-heading-title { font-size: clamp(28px, 4vw, 40px); } .elementor .pc-h2.pc-h2--banner .elementor-heading-title { font-size: clamp(26px, 3.5vw, 34px); color: #FFFFFF; } .elementor .pc-h3 .elementor-heading-title { font-family: var(--pc-font); font-weight: 800; color: var(--pc-ink); font-size: 19px; line-height: 1.35; margin: 0; } .elementor .pc-on-dark .elementor-heading-title { color: #FFFFFF; } .pc-grad-text { background: var(--pc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pc-green-text { color: var(--pc-green); } .pc-lead, .pc-lead p { font-family: var(--pc-font); font-size: 18px; line-height: 1.65; color: var(--pc-muted); margin: 0; max-width: 520px; text-wrap: pretty; } .pc-intro, .pc-intro p { font-family: var(--pc-font); font-size: 17px; line-height: 1.65; color: var(--pc-muted); margin: 0; text-wrap: pretty; } .pc-body, .pc-body p { font-family: var(--pc-font); font-size: 15px; line-height: 1.65; color: var(--pc-muted); margin: 0; } .pc-center, .pc-center p { text-align: center; margin-left: auto !important; margin-right: auto !important; } .pc-overline { font-family: var(--pc-font); font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--pc-muted); } .pc-overline--dark { font-size: 12px; color: var(--pc-green-light); } /* ---------- Labels / pills ------------------------------------------------------------------------ */ .pc-label { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-family: var(--pc-font); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; } .pc-label--primary { background: rgba(0, 167, 111, .16); color: var(--pc-green-dark); } .pc-label--success { background: rgba(34, 197, 94, .16); color: var(--pc-success-dark); } .pc-label--info { background: rgba(0, 184, 217, .16); color: var(--pc-info-dark); } .pc-label--filled { background: var(--pc-green); color: #FFFFFF; } /* ---------- Buttons (Elementor button widget + plain ) ---------------------- */ .pc-btn .elementor-button, a.pc-a-btn { font-family: var(--pc-font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 8px; transition: all .2s ease-in-out; fill: currentColor; box-shadow: none; background: transparent; color: var(--pc-ink); padding: 0 16px; height: 48px; font-size: 15px; } .pc-btn .elementor-button .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; } .pc-btn .elementor-button .elementor-button-icon { display: inline-flex; margin: 0 !important; } .pc-btn .elementor-button .elementor-button-icon svg { width: 20px; height: 20px; color: currentColor; fill: none; } .pc-btn .elementor-button .elementor-button-text { flex-grow: 0; } /* DS contained primary */ .pc-btn--green .elementor-button, a.pc-a-btn.pc-btn--green { background: var(--pc-green); color: #FFFFFF; } .pc-btn--green .elementor-button:hover, .pc-btn--green .elementor-button:focus, a.pc-a-btn.pc-btn--green:hover { background: var(--pc-green); color: #FFFFFF; box-shadow: 0 8px 16px rgba(0, 167, 111, .24); } /* Gradient CTA */ .pc-btn--grad .elementor-button, a.pc-a-btn.pc-btn--grad { background: var(--pc-grad); color: #FFFFFF; height: 52px; padding: 0 30px; border-radius: 10px; font-size: 16px; font-weight: 800; border: 0; } .pc-btn--grad .elementor-button:hover, .pc-btn--grad .elementor-button:focus, a.pc-a-btn.pc-btn--grad:hover { background: var(--pc-grad); color: #FFFFFF; box-shadow: 0 8px 16px 0 rgba(0, 167, 111, .24); } .pc-btn--grad.pc-btn--h48 .elementor-button, a.pc-a-btn.pc-btn--grad.pc-btn--h48 { height: 48px; padding: 0 28px; font-size: 15px; } /* Outlined (hero "See Pricing"). content-box like the mockups' hand-written buttons: 52px + 1px borders = 54px */ .pc-btn--outline .elementor-button, a.pc-a-btn.pc-btn--outline { background: transparent; color: var(--pc-ink); height: 52px; padding: 0 26px; border-radius: 10px; font-size: 16px; border: 1px solid var(--pc-input); box-sizing: content-box; } .pc-btn--outline .elementor-button:hover, .pc-btn--outline .elementor-button:focus, a.pc-a-btn.pc-btn--outline:hover { background: transparent; color: var(--pc-ink); border-color: var(--pc-ink); } /* DS outlined inherit */ .pc-btn--ds-outline .elementor-button, a.pc-a-btn.pc-btn--ds-outline { background: transparent; color: var(--pc-ink); border: 1px solid rgba(33, 43, 54, .48); } .pc-btn--ds-outline .elementor-button:hover, .pc-btn--ds-outline .elementor-button:focus, a.pc-a-btn.pc-btn--ds-outline:hover { background: rgba(33, 43, 54, .08); color: var(--pc-ink); border-color: var(--pc-ink); box-shadow: 0 0 0 .5px var(--pc-ink); } /* DS outlined-inherit on a teal banner: white label, DS border (Integrations marketplace CTA) */ .pc-btn--ds-outline.pc-btn--on-teal .elementor-button, .pc-btn--ds-outline.pc-btn--on-teal .elementor-button:hover, .pc-btn--ds-outline.pc-btn--on-teal .elementor-button:focus { color: #FFFFFF; } /* White on teal */ .pc-btn--white .elementor-button, a.pc-a-btn.pc-btn--white { background: #FFFFFF; color: var(--pc-green-dark); height: 52px; padding: 0 30px; border-radius: 10px; font-size: 16px; font-weight: 800; box-shadow: 0 12px 24px -6px rgba(0, 0, 0, .3); } .pc-btn--white .elementor-button:hover, .pc-btn--white .elementor-button:focus, a.pc-a-btn.pc-btn--white:hover { background: #FFFFFF; color: var(--pc-green-darker); } /* Ghost on teal (content-box: 54px tall like the mockups) */ .pc-btn--ghost .elementor-button, a.pc-a-btn.pc-btn--ghost { background: transparent; color: #FFFFFF; height: 52px; padding: 0 28px; border-radius: 10px; font-size: 16px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .5); box-sizing: content-box; } .pc-btn--ghost .elementor-button:hover, .pc-btn--ghost .elementor-button:focus, a.pc-a-btn.pc-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; } /* DS outlined on teal (white text, translucent border) */ .pc-btn--ds-ghost .elementor-button, a.pc-a-btn.pc-btn--ds-ghost { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .5); } .pc-btn--ds-ghost .elementor-button:hover, .pc-btn--ds-ghost .elementor-button:focus, a.pc-a-btn.pc-btn--ds-ghost:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: #FFFFFF; } /* Sizes and layout */ .pc-btn.pc-btn--md .elementor-button, a.pc-a-btn.pc-btn--md { height: 36px; padding: 0 12px; font-size: 14px; } .pc-btn.pc-btn--full .elementor-button, .pc-btn.pc-btn--full { width: 100%; } /* Text links with arrow */ .pc-arrow-link, a.pc-arrow-link { font-family: var(--pc-font); display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--pc-green); text-decoration: none; transition: color .2s ease-in-out; } a.pc-arrow-link:hover { color: var(--pc-green-dark); } .pc-arrow-link svg { width: 1em; height: 1em; flex: none; } a.pc-arrow-link--dark { color: var(--pc-green-light); } a.pc-arrow-link--dark:hover { color: var(--pc-green-lighter); } .pc-inline-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- Cards ---------------------------------------------------------------------------------- */ .elementor-section.pc-card, .pc-card-box { background: #FFFFFF; border-radius: 16px; box-shadow: var(--pc-shadow-card); } .elementor-section.pc-card > .elementor-container, .elementor-section.pc-card .elementor-widget-wrap { height: 100%; } .elementor-column > .elementor-widget-wrap > .elementor-section.pc-card { height: 100%; } .elementor-section.pc-card--lift, .pc-card-box.pc-card--lift { transition: all .2s ease-in-out; } .elementor-section.pc-card--lift:hover, .pc-card-box.pc-card--lift:hover { transform: translateY(-2px); box-shadow: var(--pc-shadow-hover); } .pc-card .elementor-widget-wrap { align-content: flex-start; } .pc-icon-tile { width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 167, 111, .12); color: var(--pc-green); display: inline-flex; align-items: center; justify-content: center; flex: none; } .pc-icon-tile svg { width: 30px; height: 30px; } .pc-icon-tile--sm { width: 44px; height: 44px; border-radius: 12px; } .pc-icon-tile--sm svg { width: 26px; height: 26px; } /* Check lists (icon-list widget with check icon, or