.elementor-15057 .elementor-element.elementor-element-ec8b951{--display:flex;}.elementor-15057 .elementor-element.elementor-element-790ad71{--display:flex;}.elementor-15057 .elementor-element.elementor-element-9272b57{--display:flex;}.elementor-15057 .elementor-element.elementor-element-fce9978{--display:flex;}.elementor-15057 .elementor-element.elementor-element-a8ceda8{--display:flex;}.elementor-15057 .elementor-element.elementor-element-f1feae6{--display:flex;}.elementor-15057 .elementor-element.elementor-element-97d68ce{--display:flex;}.elementor-15057 .elementor-element.elementor-element-1d3c8ca{--display:flex;}.elementor-15057 .elementor-element.elementor-element-3f88a33{--display:flex;}.elementor-15057 .elementor-element.elementor-element-b70538b{--display:flex;}/* Start custom CSS *//* ===================================================================== POWERED NOW (CORE) PAGE · PAGE CSS (foundation v5) --------------------------------------------------------------------- WHERE: Elementor > PNC page > Page Settings > Advanced > Custom CSS. SELECT EVERYTHING IN THE BOX AND REPLACE IT WITH THIS FILE. It holds the old blocks 1 to 9 (updated) and retires block 10. Nothing is added in pieces any more, so the box can't end up half pasted. (The gold buttons and the hero's side margin vanished because blocks 1 to 9 stopped loading; this puts them back.) WHY :root (the reminder) Block 1 declares variables. Variables are inert until a rule reads them, so they can't touch any other page, and every section reads the same values, so one edit moves the whole page. Block 1 is identical to the receptionist page's. When PNR and PNC are both signed off, ONLY block 1 moves to Site Settings > Custom CSS and is deleted from both pages. Everything below it is namespaced to .pnc. v5 · the link underline only appears on hover (grows from the left) v4 · "see more" links get the growing yellow underline, and section headings fade up from dim as they scroll in (.pnc-intro) v3 · THE PAGE IS NOW ONE DARK THEME Every section is a full-width band, edge to edge, with its content on one 1104px column. Bands alternate between two inks (A and B) so you can feel the sections change without the page flipping colour. Yellow appears twice on purpose: the calculator band (the cost) and the closing app card (the action). ===================================================================== */ /* ===================================================================== 1 · SHARED TOKENS (identical to the PNR page; edit in both or neither) ===================================================================== */ :root{ --pn-y:#FFBA00; --pn-k:#161616; --pn-w:#FFFFFF; --pn-display: clamp(46px, 12.5vw, 76px); --pn-h2: clamp(36px, 10vw, 54px); --pn-h3: clamp(26px, 7vw, 38px); --pn-h4: clamp(21px, 5.4vw, 26px); --pn-lede: clamp(16.5px, 4.2vw, 19px); --pn-body: clamp(15.5px, 3.9vw, 17px); --pn-small: 14.5px; --pn-micro: 12.5px; --pn-btn: 16px; --pn-lh-display: 0.92; --pn-lh-head: 0.98; --pn-lh-body: 1.55; --pn-nav: 84px; --pn-radius: 20px; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* ===================================================================== 2 · PNC TOKENS (this page only) ===================================================================== */ :root{ --pnc-col: 1104px; /* the one column everything lines up to */ --pnc-flow: clamp(32px, 4.4vw, 64px); /* kept: hero and pricing read it */ --pnc-band-y: clamp(72px, 8.4vw, 120px); /* space above and below every band */ --pnc-ink-a: #0E0E0E; /* band A: the hero's dark */ --pnc-ink-b: #141414; /* band B: a step lighter */ --pnc-ink-c: #0A0A0A; /* pricing, FAQ, app: the deepest */ --pnc-card: #1B1B1B; /* cards on any band */ --pnc-card-2: #222222; /* a card's hover, or a card inside a card */ --pnc-hair: rgba(255,255,255,.08); /* hairlines on dark */ --pnc-text-2: rgba(255,255,255,.74); /* body on dark, 11:1 */ --pnc-text-3: rgba(255,255,255,.58); /* small print on dark, 7:1 */ } /* ===================================================================== 3 · SECTION SHELL Every PNC section: section#pnc-x.pnc.pnc--a.pnc-sec > div.pnc-wrap plus a style block holding only what's unique to #pnc-x. (Never write a closing style tag inside this file, even in a comment: the browser would end the stylesheet right there.) Bands: pnc--a ink A pnc--b ink B pnc--c deepest ink pnc--yellow the calculator only Each band paints itself edge to edge even inside a boxed container. ===================================================================== */ .pnc{ --pnc-bg: var(--pnc-ink-a); --pnc-ink: var(--pn-w); --pnc-muted: var(--pnc-text-2); --pnc-soft: var(--pnc-text-3); --pnc-line: var(--pnc-hair); --pnc-kick: var(--pn-y); --pnc-focus: var(--pn-y); --pnc-max: var(--pnc-col); --pnc-gutter: clamp(20px, 5vw, 48px); --pnc-top: var(--pn-nav, 84px); /* space the sticky header takes */ --pnc-ease: cubic-bezier(.22,1,.36,1); position:relative; display:block; width:100%; margin:0; overflow-x:clip; isolation:isolate; background:var(--pnc-bg); border-image:conic-gradient(var(--pnc-bg) 0 0) fill 0 // 0 100vmax; color:var(--pnc-ink); color-scheme:only dark; font-family:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:var(--pn-body); line-height:var(--pn-lh-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .pnc *, .pnc *::before, .pnc *::after{ box-sizing:border-box; } .pnc[id]{ scroll-margin-top:var(--pnc-top); } @media (max-width:1200px){ .pnc{ --pnc-top: var(--pn-hdr-h, 72px); } } .pnc--a, .pnc--dark{ --pnc-bg:var(--pnc-ink-a); } .pnc--b{ --pnc-bg:var(--pnc-ink-b); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } .pnc--c{ --pnc-bg:var(--pnc-ink-c); } .pnc--yellow{ --pnc-bg:var(--pn-y); --pnc-ink:var(--pn-k); --pnc-muted:rgba(22,22,22,.78); --pnc-soft:rgba(22,22,22,.64); --pnc-line:rgba(22,22,22,.14); --pnc-kick:var(--pn-k); --pnc-focus:var(--pn-k); color-scheme:only light; } /* one soft warm light per band, placed per section with --gx / --gy */ .pnc-glow::before{ content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(var(--gw, 46%) var(--gh, 60%) at var(--gx, 88%) var(--gy, 0%), rgba(255,186,0,var(--ga, .09)), transparent 70%); } .pnc-sec{ padding-block:var(--pnc-band-y); } .pnc-wrap{ width:100%; max-width:calc(var(--pnc-max) + var(--pnc-gutter) * 2); margin-inline:auto; padding-inline:max(var(--pnc-gutter), env(safe-area-inset-left)) max(var(--pnc-gutter), env(safe-area-inset-right)); } .pnc img, .pnc svg, .pnc video{ max-width:100%; } .pnc img{ height:auto; } .pnc p{ margin:0; } /* ===================================================================== 4 · TYPE (sizes come from block 1) ===================================================================== */ .pnc :is(h1,h2,h3,h4,h5,h6){ margin:0; color:inherit; } .pnc-display, .pnc-h2, .pnc-h3, .pnc-h4{ font-family:'Bebas Neue', Impact, 'Arial Narrow', sans-serif !important; font-weight:500 !important; letter-spacing:.2px; text-transform:none; text-wrap:balance; } .pnc-display{ font-size:var(--pn-display); line-height:var(--pn-lh-display); letter-spacing:-.3px; } .pnc-h2{ font-size:var(--pn-h2) !important; line-height:.96 !important; letter-spacing:-.3px !important; color:var(--pnc-ink) !important; } .pnc-h3{ font-size:var(--pn-h3) !important; line-height:var(--pn-lh-head) !important; color:var(--pnc-ink) !important; } .pnc-h4{ font-size:var(--pn-h4); line-height:1.05; } /* the two-tone heading: second line yellow (ink on the yellow band) */ .pnc-h2 > span{ display:block; color:var(--pn-y) !important; } .pnc-h2--inline > span{ display:inline; } .pnc--yellow .pnc-h2 > span{ color:var(--pn-k) !important; } .pnc-lede{ margin-top:16px !important; max-width:52ch; font-size:var(--pn-lede); line-height:1.55; font-weight:500; color:var(--pnc-muted); text-wrap:pretty; } .pnc-body{ font-size:var(--pn-body); line-height:var(--pn-lh-body); text-wrap:pretty; } .pnc-small{ font-size:var(--pn-small); line-height:1.45; color:var(--pnc-soft); } /* The label above a heading. Used three times on the page (hero, reviews, calculator), only where it names something the heading doesn't. More than that and every section starts to look the same. */ .pnc-kicker{ display:flex; align-items:center; gap:13px; margin:0 0 16px !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.15em !important; text-transform:uppercase; color:var(--pnc-kick) !important; } .pnc-kicker::before{ content:''; flex:0 0 auto; width:20px; height:2px; border-radius:1px; background:currentColor; } @media (max-width:767px){ .pnc-kicker{ font-size:12.5px !important; } .pnc-kicker::before{ display:none; } } .pnc-head{ display:flex; flex-direction:column; max-width:720px; } .pnc-head--center{ margin-inline:auto; text-align:center; align-items:center; } .pnc-head--center .pnc-lede{ margin-inline:auto; } .pnc-head + *{ margin-top:clamp(36px, 5vw, 56px); } /* the reassurance line under the hero buttons */ .pnc-assure{ display:flex; align-items:center; gap:8px; margin-top:16px !important; font-size:14.5px; font-weight:500; line-height:1.3; color:var(--pnc-soft); } .pnc-assure svg{ flex:0 0 auto; width:17px; height:17px; fill:none; stroke:var(--pn-y); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* ===================================================================== 5 · BUTTONS (same spec as the header buttons) One label per job on the whole page: Get Started choose a plan (goes to #pricing) Book a Free Demo talk to the team ===================================================================== */ .pnc-btn{ -webkit-appearance:none; appearance:none; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px; min-height:52px; margin:0 !important; padding:0 28px !important; border-radius:12px !important; border:2px solid transparent !important; font-family:'Barlow', sans-serif !important; font-weight:600 !important; font-size:var(--pn-btn) !important; line-height:1 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; text-align:center; white-space:nowrap; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .18s var(--pnc-ease), box-shadow .2s ease, background .2s ease, border-color .2s ease; } .pnc-btn svg{ width:16px; height:16px; flex:0 0 auto; } .pnc-btn:active{ transform:scale(.97); } @media (hover:hover){ .pnc-btn:hover{ transform:translateY(-2px); } } .pnc-btn--gold{ background:linear-gradient(180deg, #F8C43C 0%, #FAB914 100%) !important; color:#161616 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px rgba(250,185,20,.4) !important; } @media (hover:hover){ .pnc-btn--gold:hover{ background:linear-gradient(180deg, #FACB4E 0%, #FCC020 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 18px rgba(250,185,20,.55) !important; } } .pnc-btn--ghost{ background:transparent !important; color:var(--pnc-ink) !important; border-color:rgba(255,255,255,.32) !important; } .pnc--yellow .pnc-btn--ghost{ border-color:rgba(22,22,22,.3) !important; } @media (hover:hover){ .pnc-btn--ghost:hover{ background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.6) !important; } .pnc--yellow .pnc-btn--ghost:hover{ background:rgba(22,22,22,.06) !important; border-color:rgba(22,22,22,.5) !important; } } .pnc-btn--ink{ background:#161616 !important; color:#FFFFFF !important; box-shadow:0 6px 18px rgba(22,22,22,.25) !important; } .pnc-actions{ display:flex; flex-wrap:wrap; gap:12px; } @media (max-width:767px){ .pnc-actions--stack{ flex-direction:column; align-items:stretch; } .pnc-actions--stack .pnc-btn{ width:100%; } } /* a quiet text link with a chevron, for "see more" moves. On hover or keyboard focus a yellow line draws in underneath from the left and the chevron steps forward. Nothing underneath at rest. */ .pnc-more{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:15.5px; font-weight:700; line-height:1.2; color:var(--pnc-ink) !important; text-decoration:none !important; -webkit-tap-highlight-color:transparent; } .pnc-more svg{ width:16px; height:16px; fill:none; stroke:var(--pn-y); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--pnc-ease); } .pnc--yellow .pnc-more svg{ stroke:var(--pn-k); } .pnc-more::after{ content:''; position:absolute; left:0; bottom:7px; width:0; height:2px; border-radius:2px; background:var(--pn-y); transition:width .45s var(--pnc-ease); } .pnc-more:focus-visible::after{ width:100%; } .pnc-more:focus-visible svg{ transform:translateX(3px); } @media (hover:hover){ .pnc-more:hover::after{ width:100%; } .pnc-more:hover svg{ transform:translateX(3px); } } @media (prefers-reduced-motion:reduce){ .pnc-more::after, .pnc-more svg{ transition:none; } } /* ===================================================================== 6 · CARDS (gradients live on cards, never on band backgrounds) ===================================================================== */ .pnc-card{ position:relative; border-radius:var(--pn-radius); background:linear-gradient(180deg, #1D1D1D 0%, #181818 100%); border:1px solid var(--pnc-hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -24px rgba(0,0,0,.8); } /* ===================================================================== 7 · MOTION pnc-rise above the fold. Pure CSS, plays on first paint, needs no JavaScript, so caching plugins can never hide the hero. pnc-reveal below the fold. Plays once when scrolled into view. The hidden state only applies when the boot script is live (html.pnc-js), so if it's ever delayed, content shows. --d stagger step: style="--d:1", "--d:2" ... Only opacity and transform ever animate. ===================================================================== */ .pnc-rise{ animation:pncRise .8s var(--pnc-ease) both; animation-delay:calc(var(--d, 0) * 80ms); } @keyframes pncRise{ from{ opacity:0; transform:translate3d(0, 18px, 0); } to{ opacity:1; transform:none; } } .pnc-js .pnc-reveal{ opacity:0; transform:translate3d(0, 24px, 0); transition:opacity .7s ease, transform .8s var(--pnc-ease); transition-delay:calc(var(--d, 0) * 90ms); } .pnc-js .pnc-reveal.pnc-in{ opacity:1; transform:none; } .pnc-num{ font-variant-numeric:tabular-nums; } /* pnc-intro a section heading that starts dim and fades up to full as it scrolls in, tied to the scroll (scroll back and it dims again). Browsers without scroll timelines just show it. */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .pnc-intro{ animation:pncIntro linear both; animation-timeline:view(); animation-range:entry 0% cover 35%; } } } @keyframes pncIntro{ from{ opacity:.16; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } } /* animation parking for off-screen sections (toggled by the boot script) */ [data-pn-rest], [data-pn-rest] *{ animation-play-state:paused !important; } /* skip rendering work for a band until it's near the screen. Only on bands with nothing sticky and nothing that pokes outside the band */ .pnc-cv{ content-visibility:auto; contain-intrinsic-size:auto 900px; } @media (prefers-reduced-motion:reduce){ .pnc-rise{ animation:none !important; } .pnc-js .pnc-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .pnc *{ scroll-behavior:auto !important; } } /* ===================================================================== 8 · FOCUS, TOUCH, UTILITIES ===================================================================== */ .pnc :is(a, button, summary, [tabindex]):focus{ outline:none; } .pnc :is(a, button, summary, [tabindex]):focus-visible{ outline:3px solid var(--pnc-focus) !important; outline-offset:3px !important; } .pnc :is(a, button, summary){ touch-action:manipulation; } .pnc-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ===================================================================== 9 · ELEMENTOR WRAPPERS The containers holding PNC widgets sit edge to edge, no stray gaps. ===================================================================== */ .elementor-widget-html:has(.pnc, #pnc-boot){ margin:0 !important; padding:0 !important; } .e-con:has(> .elementor-widget-html :is(.pnc, #pnc-boot)), .e-con-inner:has(> .elementor-widget-html :is(.pnc, #pnc-boot)){ padding:0 !important; gap:0 !important; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; --gap:0px; --row-gap:0px; --column-gap:0px; --widgets-spacing:0px; } /* the dark behind every band, so no light can show in any gap (only on this page: the boot widget lives here and nowhere else) */ body:has(#pnc-boot){ background-color:#0E0E0E; }/* End custom CSS */