/* ========================================================= Penta Elementor Kit — design system Ported 1:1 from the Penta Cyber Services source HTML. Everything is scoped under .pnt-scope so it never leaks into wp-admin or unrelated theme/plugin markup. ========================================================= */ :root{ --pnt-ink:#F4F8FE; --pnt-ink-2:#FFFFFF; --pnt-surface:#FFFFFF; --pnt-surface-2:#EAF2FE; --pnt-line:#D9E4F5; --pnt-text:#04162E; --pnt-muted:#42546F; --pnt-muted-2:#8CA0BC; --pnt-accent:#0060F0; --pnt-accent-2:#00A8E8; --pnt-accent-soft:rgba(0,96,240,.10); --pnt-accent2-soft:rgba(0,168,232,.12); --pnt-btn-fg:#FFFFFF; --pnt-nav-bg:rgba(255,255,255,.86); --pnt-veil:rgba(240,246,255,.7); --pnt-radius:14px; --pnt-maxw:1320px; --pnt-ease:cubic-bezier(.2,.7,.2,1); } html[data-pnt-theme="dark"]{ --pnt-ink:#03102A; --pnt-ink-2:#07183A; --pnt-surface:#0B2048; --pnt-surface-2:#112A5A; --pnt-line:#1D3665; --pnt-text:#EAF2FF; --pnt-muted:#C4D5EE; --pnt-muted-2:#96ABCF; --pnt-accent:#2E8CFF; --pnt-accent-2:#00C2FF; --pnt-accent-soft:rgba(46,140,255,.14); --pnt-accent2-soft:rgba(0,194,255,.12); --pnt-btn-fg:#03102A; --pnt-nav-bg:rgba(3,16,42,.8); --pnt-veil:rgba(7,24,58,.55); } /* Page canvas — matches the source theme's body background/text color so the browser never falls back to its OS dark/light default (which made text unreadable when nothing else painted the canvas). Safe unscoped: on the front end is always our header + content + footer. */ body{ background:var(--pnt-ink); color:var(--pnt-text); transition:background .4s,color .4s; } .pnt-header-spacer{ display:block; width:100%; } /* Lifts the real page content above the fixed .pnt-field background layer (mirrors the source theme's `main{position:relative;z-index:1}`). */ #content{ position:relative; z-index:1; } /* ---- scoped reset (never touches wp-admin / other widgets) ---- */ .pnt-scope, .pnt-scope *, .pnt-scope *::before, .pnt-scope *::after{ box-sizing:border-box; } .pnt-scope :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,button,fieldset,blockquote){ margin:0; padding:0; } .pnt-scope ul{ list-style:none; } .pnt-scope :where(a){ color:inherit; text-decoration:none; } .pnt-scope :where(button){ font-family:inherit; border:none; background:none; padding:0; cursor:pointer; } .pnt-scope h1,.pnt-scope h2,.pnt-scope h3,.pnt-scope .pnt-display{ font-family:'Sora',sans-serif; letter-spacing:-.02em; line-height:1.08; color:var(--pnt-text); } .pnt-scope .pnt-mono{ font-family:'Space Mono',monospace; letter-spacing:.04em; } .pnt-scope{ font-family:'Inter',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; } .pnt-wrap{ max-width:var(--pnt-maxw); margin:0 auto; padding:0 24px; position:relative; } .pnt-eyebrow{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--pnt-accent); } .pnt-eyebrow.pnt-blue{ color:var(--pnt-accent-2); } /* ---- background field (optional decorative layer) ---- */ .pnt-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .pnt-field .pnt-bg-grid{ position:absolute; inset:0; opacity:.4; background-image:linear-gradient(var(--pnt-line) 1px,transparent 1px),linear-gradient(90deg,var(--pnt-line) 1px,transparent 1px); background-size:70px 70px; mask-image:radial-gradient(circle at 72% 8%,#000 0%,transparent 58%); -webkit-mask-image:radial-gradient(circle at 72% 8%,#000 0%,transparent 58%); } .pnt-field .pnt-glow{ position:absolute; top:-300px; right:-200px; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,var(--pnt-accent2-soft),transparent 62%); } .pnt-field .pnt-glow2{ position:absolute; bottom:-360px; left:-280px; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle,var(--pnt-accent-soft),transparent 62%); } /* ================= HEADER / NAV ================= */ /* Elementor wraps this widget in several auto-height section/column divs, each sized to exactly the header's own height — that leaves position:sticky zero room in its containing block, so it releases the instant you scroll. position:fixed sidesteps that entirely (body's padding-top above reserves the space it would otherwise have taken in normal flow). */ .pnt-site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:var(--pnt-nav-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--pnt-line); } /* position:fixed is relative to the viewport, so — unlike position:sticky — it doesn't automatically sit below the WordPress admin toolbar the way normal document flow does. Push it down by the admin bar's own height while logged in (WP's own breakpoint for the shorter mobile bar is 782px). */ body.admin-bar .pnt-site-header{ top:32px; } @media(max-width:782px){ body.admin-bar .pnt-site-header{ top:46px; } } .pnt-nav{ display:flex; align-items:center; justify-content:space-between; gap:6px; height:72px; } .pnt-brand{ display:flex; align-items:center; gap:11px; margin-right:22px; flex-shrink:0; cursor:pointer; } .pnt-brand .pnt-word{ font-family:'Sora'; font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--pnt-text); } .pnt-brand .pnt-word span{ color:var(--pnt-accent); } .pnt-brand-tag{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--pnt-muted-2); border-left:1px solid var(--pnt-line); padding-left:11px; margin-left:2px; max-width:170px; line-height:1.35; } @media(max-width:1240px){ .pnt-brand-tag{ display:none; } } .pnt-menu{ display:flex; align-items:center; justify-content:center; gap:2px; flex:1; min-width:0; } .pnt-menu-item{ position:relative; flex-shrink:0; } .pnt-menu-item>button{ background:none; border:none; color:var(--pnt-text); cursor:pointer; font-size:12.5px; font-weight:500; padding:10px 13px; border-radius:9px; display:flex; align-items:center; gap:6px; transition:background .15s,color .15s; white-space:nowrap; } .pnt-menu-item>button:hover,.pnt-menu-item:focus-within>button{ background:var(--pnt-surface-2); } .pnt-menu-item>button svg{ transition:transform .2s; opacity:.6; } .pnt-menu-item:hover>button svg,.pnt-menu-item:focus-within>button svg{ transform:rotate(180deg); } .pnt-dropdown{ position:absolute; top:calc(100% + 10px); left:0; background:var(--pnt-ink-2); border:1px solid var(--pnt-line); border-radius:var(--pnt-radius); min-width:264px; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s,transform .18s,visibility .18s; box-shadow:0 24px 60px rgba(0,0,0,.35); z-index:50; } .pnt-menu-item:hover .pnt-dropdown,.pnt-menu-item:focus-within .pnt-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .pnt-dropdown a{ display:block; padding:10px 12px; border-radius:9px; font-size:13.5px; color:var(--pnt-muted); transition:.15s; } .pnt-dropdown a b{ display:block; color:var(--pnt-text); font-weight:600; font-size:14.5px; margin-bottom:1px; } .pnt-dropdown a:hover{ background:var(--pnt-surface-2); } .pnt-dropdown a:hover b{ color:var(--pnt-accent); } .pnt-dropdown .pnt-dd-head{ display:block; padding:8px 12px 6px; font-family:'Space Mono'; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--pnt-muted-2); } .pnt-nav-right{ display:flex; gap:10px; align-items:center; } .pnt-nav-cta{ flex-shrink:0; background:var(--pnt-accent); color:var(--pnt-btn-fg); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:10px; transition:.2s; white-space:nowrap; display:inline-block; } .pnt-nav-cta:hover{ transform:translateY(-1px); filter:brightness(1.08); } .pnt-toggle{ width:40px; height:40px; border:1px solid var(--pnt-line); border-radius:10px; background:transparent; color:var(--pnt-text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s; flex-shrink:0; } .pnt-toggle:hover{ border-color:var(--pnt-accent); color:var(--pnt-accent); } .pnt-toggle svg{ width:18px; height:18px; } .pnt-burger{ display:none; background:none; border:none; color:var(--pnt-text); cursor:pointer; padding:8px; } /* Mobile menu panel — overlays below the header (never pushes page content down) and fades/slides in instead of the old max-height jump. */ .pnt-mobile{ display:none; position:absolute; top:100%; left:0; right:0; border-top:1px solid var(--pnt-line); background:var(--pnt-ink-2); box-shadow:0 30px 50px rgba(0,0,0,.16); max-height:calc(100vh - 72px); overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .25s var(--pnt-ease), transform .25s var(--pnt-ease); z-index:90; } .pnt-mobile.pnt-open{ opacity:1; pointer-events:auto; transform:translateY(0); } .pnt-mobile .pnt-wrap{ padding:14px 24px 22px; } .pnt-m-group{ border-bottom:1px solid var(--pnt-line); } .pnt-m-summary{ width:100%; list-style:none; cursor:pointer; padding:14px 2px; font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:space-between; font-family:'Sora'; color:var(--pnt-text); text-align:left; } .pnt-m-plus{ position:relative; width:12px; height:12px; flex-shrink:0; } .pnt-m-plus::before,.pnt-m-plus::after{ content:""; position:absolute; background:currentColor; transition:transform .25s var(--pnt-ease); } .pnt-m-plus::before{ top:50%; left:0; width:100%; height:1.6px; margin-top:-.8px; } .pnt-m-plus::after{ left:50%; top:0; height:100%; width:1.6px; margin-left:-.8px; } .pnt-m-group.pnt-open .pnt-m-plus::after{ transform:rotate(90deg); } /* Smooth accordion: JS sets max-height to the panel's real scrollHeight when opening (0 when closed), so the animation duration matches the actual content instead of guessing a fixed value. */ .pnt-m-sub-outer{ max-height:0; overflow:hidden; transition:max-height .3s var(--pnt-ease); } .pnt-m-sub{ padding:0 2px 12px; display:flex; flex-direction:column; gap:2px; } .pnt-m-sub a{ padding:9px 10px; border-radius:8px; color:var(--pnt-muted); font-size:14.5px; display:block; } .pnt-m-sub a:hover{ background:var(--pnt-surface-2); color:var(--pnt-text); } .pnt-m-cta{ display:block; text-align:center; background:var(--pnt-accent); color:var(--pnt-btn-fg); font-weight:600; border-radius:10px; padding:13px; margin-top:16px; } /* Collapses to the burger menu earlier than the hero/grid breakpoint below — six nav items at full label width need more room than 1020px to avoid crowding the toggle/CTA, so the header gets its own wider threshold. */ @media(max-width:1360px){ .pnt-menu{ display:none; } .pnt-burger{ display:block; } .pnt-mobile{ display:block; } .pnt-nav-cta{ display:none; } } /* ================= SHARED ================= */ .pnt-btn-primary{ display:inline-flex; align-items:center; gap:10px; background:var(--pnt-accent); color:var(--pnt-btn-fg); font-weight:600; font-size:15px; padding:14px 24px; border-radius:11px; transition:.22s var(--pnt-ease); border:none; cursor:pointer; } .pnt-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--pnt-accent-soft); filter:brightness(1.06); } .pnt-btn-ghost{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--pnt-line); color:var(--pnt-text); font-weight:500; font-size:15px; padding:13px 22px; border-radius:11px; transition:.2s; background:transparent; cursor:pointer; font-family:inherit; } .pnt-btn-ghost:hover{ border-color:var(--pnt-accent); color:var(--pnt-accent); } .pnt-btn-ghost:disabled{ opacity:.6; cursor:default; } .pnt-section{ padding:92px 0; position:relative; } .pnt-sec-head{ max-width:660px; margin-bottom:48px; } .pnt-sec-head h2{ font-size:clamp(28px,3.4vw,42px); margin-top:16px; } .pnt-sec-head p{ color:var(--pnt-muted); margin-top:16px; font-size:17px; } /* Visible by default — JS only "arms" the hidden pre-animation state once it has positively confirmed it's running on the live front end. This means a JS load hiccup (or the Elementor editor canvas) can never leave a section permanently blank; the worst case is simply no fade-in animation. */ .pnt-reveal{ transition:opacity .7s var(--pnt-ease),transform .7s var(--pnt-ease); } .pnt-reveal.pnt-armed{ opacity:0; transform:translateY(22px); } .pnt-reveal.pnt-armed.pnt-in{ opacity:1; transform:none; } /* ================= HERO ================= */ .pnt-hero{ position:relative; padding:88px 0 70px; overflow:hidden; background:radial-gradient(120% 90% at 80% -10%,var(--pnt-accent2-soft),transparent 55%), radial-gradient(90% 80% at 10% 110%,var(--pnt-accent-soft),transparent 55%); } .pnt-hero-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .pnt-hero>.pnt-wrap{ position:relative; z-index:1; } .pnt-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; } .pnt-hero h1{ font-size:clamp(38px,5vw,62px); font-weight:800; } .pnt-hl{ background:linear-gradient(90deg,var(--pnt-accent),var(--pnt-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .pnt-lede{ color:var(--pnt-muted); font-size:18px; max-width:530px; margin-top:22px; } .pnt-hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; } .pnt-hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; } .pnt-hstat b{ font-family:'Sora'; font-size:28px; font-weight:700; display:block; color:var(--pnt-text); } .pnt-hstat span{ font-family:'Space Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--pnt-muted-2); } .pnt-stage{ position:relative; width:100%; max-width:470px; margin-left:auto; } .pnt-penta-svg{ width:100%; height:auto; overflow:visible; } .pnt-penta-svg .pnt-ring{ fill:none; stroke:var(--pnt-line); stroke-width:1; } /* Flowing dash animation — the pentagon outline and spokes stay geometrically fixed (always connected to the nodes); only the dash pattern travels along them, giving a permanent "energy flow" effect with no drift. */ .pnt-penta-svg .pnt-edge{ fill:none; stroke-width:1.8; stroke-dasharray:14 10; animation:pnt-flow 2.2s linear infinite; } .pnt-penta-svg .pnt-spoke{ stroke:var(--pnt-line); stroke-width:1; stroke-dasharray:6 6; animation:pnt-flow 3s linear infinite; } @keyframes pnt-flow{ to{ stroke-dashoffset:-48; } } .pnt-rotor{ transform-origin:230px 230px; animation:pnt-rotorSpin 60s linear infinite; } @keyframes pnt-rotorSpin{ to{ transform:rotate(360deg); } } .pnt-penta-svg .pnt-node{ cursor:pointer; } .pnt-penta-svg .pnt-node circle{ fill:var(--pnt-ink-2); stroke:var(--pnt-accent-2); stroke-width:1.6; transition:.25s; } .pnt-penta-svg .pnt-node text{ fill:var(--pnt-text); font-family:'Space Mono'; font-size:10.5px; text-anchor:middle; pointer-events:none; } .pnt-penta-svg .pnt-node:hover circle{ stroke:var(--pnt-accent); fill:var(--pnt-surface-2); transform-origin:center; filter:drop-shadow(0 0 12px var(--pnt-accent-soft)); } .pnt-penta-svg .pnt-core{ fill:var(--pnt-accent-soft); stroke:var(--pnt-accent); stroke-width:1.6; animation:pnt-coreBreath 3.4s ease-in-out infinite; } @keyframes pnt-coreBreath{ 0%,100%{ stroke-width:1.6; } 50%{ stroke-width:3; } } .pnt-penta-svg .pnt-core-label{ fill:var(--pnt-text); font-family:'Sora'; font-weight:600; text-anchor:middle; } .pnt-penta-svg .pnt-orbdot{ fill:var(--pnt-accent); animation:pnt-orb 5s linear infinite; } @keyframes pnt-orb{ to{ transform:rotate(360deg); } } /* ================= MARQUEE ================= */ .pnt-marquee-sec{ border-top:1px solid var(--pnt-line); border-bottom:1px solid var(--pnt-line); background:var(--pnt-veil); padding:20px 0 22px; text-align:center; position:relative; } .pnt-marquee-sec .pnt-eyebrow{ display:block; margin-bottom:14px; } .pnt-marquee{ overflow:hidden; } .pnt-marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:pnt-mslide 30s linear infinite; } .pnt-cust{ display:inline-flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:600; font-size:16.5px; color:var(--pnt-muted); padding:6px 34px; transition:color .2s; } .pnt-cust:hover{ color:var(--pnt-text); } .pnt-cust .pnt-dot{ width:6px; height:6px; border-radius:50%; background:var(--pnt-accent); flex-shrink:0; } @keyframes pnt-mslide{ to{ transform:translateX(-50%); } } /* ================= VERTICALS GRID ================= */ .pnt-vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .pnt-vcard{ position:relative; border:1px solid var(--pnt-line); border-radius:var(--pnt-radius); padding:28px 26px; background:linear-gradient(180deg,var(--pnt-surface),var(--pnt-ink-2)); transition:.3s var(--pnt-ease); overflow:hidden; display:block; } .pnt-vcard::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 200px at var(--pnt-mx,50%) -20%,var(--pnt-accent-soft),transparent 60%); opacity:0; transition:opacity .3s; } .pnt-vcard:hover::before{ opacity:1; } .pnt-vcard:hover{ transform:translateY(-5px); border-color:var(--pnt-accent); } .pnt-vnum{ font-family:'Space Mono'; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pnt-accent-2); position:relative; z-index:1; } .pnt-vcard h3{ font-size:21px; margin:14px 0 10px; position:relative; z-index:1; } .pnt-vcard p{ color:var(--pnt-muted); font-size:14.5px; position:relative; z-index:1; } .pnt-svc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; position:relative; z-index:1; } .pnt-svc span{ font-family:'Space Mono'; font-size:12px; border:1px solid var(--pnt-line); border-radius:7px; padding:5px 11px; color:var(--pnt-muted); transition:.2s; } .pnt-vgo{ font-family:'Space Mono'; font-size:12.5px; color:var(--pnt-accent); margin-top:18px; display:inline-block; position:relative; z-index:1; } /* ================= CTA BAND ================= */ .pnt-band-wrap{ padding:90px 0; } .pnt-band{ max-width:900px; margin:0 auto; text-align:center; border:1px solid var(--pnt-line); border-radius:22px; padding:64px 44px; background:radial-gradient(90% 160% at 50% 0%,var(--pnt-accent2-soft),transparent 55%),var(--pnt-ink-2); } .pnt-band h2{ font-size:clamp(28px,3.6vw,44px); } .pnt-band p{ color:var(--pnt-muted); max-width:540px; margin:18px auto 30px; font-size:17px; } .pnt-cta-secondary{ display:block; margin-top:18px; font-size:14px; color:var(--pnt-muted); text-decoration:underline; } .pnt-cta-secondary:hover{ color:var(--pnt-accent); } /* ================= INNER PAGE HERO / BREADCRUMB ================= */ .pnt-crumb{ padding:26px 0 0; font-family:'Space Mono'; font-size:12px; letter-spacing:.08em; color:var(--pnt-muted-2); } .pnt-crumb a{ color:var(--pnt-muted); } .pnt-crumb a:hover{ color:var(--pnt-accent); } .pnt-crumb i{ font-style:normal; margin:0 8px; opacity:.5; } .pnt-p-hero{ padding:64px 0 56px; position:relative; } .pnt-p-hero h1{ font-size:clamp(34px,4.4vw,56px); font-weight:800; max-width:760px; } .pnt-p-hero .pnt-lede{ max-width:640px; } .single-post .pnt-p-hero h1{ max-width:1000px; } .pnt-tagrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; } .pnt-tagrow a{ font-family:'Space Mono'; font-size:12.5px; border:1px solid var(--pnt-line); border-radius:8px; padding:7px 14px; color:var(--pnt-muted); transition:.2s; } .pnt-tagrow a:hover{ border-color:var(--pnt-accent); color:var(--pnt-accent); background:var(--pnt-accent-soft); } /* ================= FEATURE GRID ================= */ .pnt-fgrid-section{ position:relative; } .pnt-fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .pnt-fcard{ display:block; border:1px solid var(--pnt-line); border-radius:var(--pnt-radius); padding:26px 24px; background:var(--pnt-surface); transition:.28s var(--pnt-ease); } .pnt-fcard:hover{ transform:translateY(-4px); border-color:var(--pnt-accent-2); } .pnt-fcard .pnt-fi{ width:42px; height:42px; border-radius:10px; background:var(--pnt-accent-soft); color:var(--pnt-accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .pnt-fcard .pnt-fi.pnt-blue{ background:var(--pnt-accent2-soft); color:var(--pnt-accent-2); } .pnt-fcard h3{ font-size:17.5px; margin-bottom:8px; } .pnt-fcard p{ color:var(--pnt-muted); font-size:14px; } /* ================= PROCESS STEPS ================= */ .pnt-steps-section{ position:relative; } .pnt-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--pnt-line); border-radius:var(--pnt-radius); overflow:hidden; background:var(--pnt-ink-2); } .pnt-step{ padding:28px 24px; border-right:1px solid var(--pnt-line); position:relative; } .pnt-step:last-child{ border-right:none; } .pnt-step b{ font-family:'Space Mono'; font-size:12px; color:var(--pnt-accent); letter-spacing:.12em; } .pnt-step h3{ font-size:16.5px; margin:12px 0 8px; } .pnt-step p{ color:var(--pnt-muted); font-size:13.5px; } /* ================= SIBLING LINKS ================= */ .pnt-sib{ margin-top:64px; border-top:1px solid var(--pnt-line); padding-top:36px; } .pnt-sib h4{ font-family:'Space Mono'; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--pnt-muted-2); margin-bottom:18px; } .pnt-sib-row{ display:flex; gap:12px; flex-wrap:wrap; } .pnt-sib-row a{ border:1px solid var(--pnt-line); border-radius:10px; padding:12px 18px; font-size:14.5px; font-weight:500; transition:.2s; background:var(--pnt-surface); display:inline-block; } .pnt-sib-row a:hover{ border-color:var(--pnt-accent); color:var(--pnt-accent); transform:translateY(-2px); } /* ================= PILL CTA ================= */ .pnt-pill-cta{ border:1px solid var(--pnt-line); border-radius:20px; padding:50px 44px; text-align:center; background:radial-gradient(90% 160% at 50% 0%,var(--pnt-accent-soft),transparent 55%),var(--pnt-ink-2); } .pnt-pill-cta h2{ font-size:clamp(24px,3vw,36px); } .pnt-pill-cta p{ color:var(--pnt-muted); margin:14px auto 26px; max-width:480px; } /* ================= PROSE ================= */ .pnt-prose{ max-width:100%; padding-bottom:90px; } .pnt-prose p{ color:var(--pnt-muted); font-size:16.5px; margin-bottom:18px; } .pnt-prose p:last-child{ margin-bottom:0; } .pnt-prose h2{ font-size:21px; font-weight:700; color:var(--pnt-text); margin:38px 0 14px; padding-top:20px; border-top:1px solid var(--pnt-line); } .pnt-prose h2:first-child{ margin-top:0; padding-top:0; border-top:none; } .pnt-prose ul{ margin:0 0 18px; padding-left:22px; list-style:disc; } .pnt-prose li{ color:var(--pnt-muted); font-size:16.5px; margin-bottom:8px; list-style:disc; display:list-item; } .pnt-prose li:last-child{ margin-bottom:0; } .pnt-prose li::marker{ color:var(--pnt-muted-2); } /* ================= BLOG ================= */ .pnt-blog-grid-wrap{ padding-bottom:90px; } .pnt-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .pnt-bcard{ border:1px solid var(--pnt-line); border-radius:var(--pnt-radius); padding:26px; background:var(--pnt-surface); transition:.25s; } .pnt-bcard:hover{ transform:translateY(-4px); border-color:var(--pnt-accent-2); } .pnt-bcard .pnt-bd{ font-family:'Space Mono'; font-size:11.5px; color:var(--pnt-muted-2); letter-spacing:.1em; } .pnt-bcard h3{ font-size:18px; margin:12px 0 8px; } .pnt-bcard p{ color:var(--pnt-muted); font-size:14px; } .pnt-bcard .pnt-vgo{ display:inline-block; margin-top:14px; color:var(--pnt-accent); font-size:13.5px; font-weight:600; } .pnt-blog-more-wrap{ display:flex; justify-content:center; padding-top:36px; } .pnt-load-more{ min-width:150px; justify-content:center; } .pnt-load-more:disabled{ opacity:.75; cursor:default; transform:none!important; box-shadow:none!important; } .pnt-lm-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:pnt-spin .6s linear infinite; } .pnt-load-more.pnt-loading .pnt-lm-spinner{ display:inline-block; } @keyframes pnt-spin{ to{ transform:rotate(360deg); } } /* ================= SINGLE BLOG POST ================= */ .pnt-single-meta{ font-family:'Space Mono'; font-size:12.5px; color:var(--pnt-muted-2); letter-spacing:.05em; margin-top:14px; } .pnt-single-img,.pnt-single-img-ph{ width:100%; aspect-ratio:21/9; border-radius:var(--pnt-radius); overflow:hidden; margin:36px 0 50px; border:1px solid var(--pnt-line); } .pnt-single-img img{ width:100%; height:100%; object-fit:cover; display:block; } .pnt-single-img-ph{ background:radial-gradient(90% 160% at 50% 0%,var(--pnt-accent-soft),transparent 55%),var(--pnt-surface-2); display:flex; align-items:center; justify-content:center; } .pnt-single-img-ph::before{ content:''; width:48px; height:48px; opacity:.35; background:var(--pnt-muted-2); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat; } .pnt-single-grid{ display:grid; grid-template-columns:2fr 1fr; gap:50px; align-items:stretch; padding-bottom:90px; } .pnt-single-content p{ color:var(--pnt-muted); font-size:16.5px; line-height:1.7; margin-bottom:18px; } .pnt-single-content p:last-child{ margin-bottom:0; } .pnt-single-sidebar{ border-left:1px solid var(--pnt-line); padding-left:40px; } .pnt-single-sidebar h4{ font-family:'Space Mono'; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--pnt-muted-2); margin-bottom:18px; } .pnt-single-related{ display:flex; flex-direction:column; gap:14px; } /* This page reads calmer flat — no card/hover elevation shadows anywhere on it. */ .single-post .pnt-scope,.single-post .pnt-scope *{ box-shadow:none!important; } .pnt-rel-card{ display:block; border:1px solid var(--pnt-line); border-radius:12px; padding:16px 18px; background:var(--pnt-surface); transition:.2s; } .pnt-rel-card:hover{ border-color:var(--pnt-accent-2); transform:translateY(-2px); } .pnt-rel-card .pnt-bd{ font-family:'Space Mono'; font-size:10.5px; color:var(--pnt-muted-2); letter-spacing:.1em; } .pnt-rel-card .pnt-rel-title{ display:block; font-size:14.5px; font-weight:600; margin-top:6px; color:var(--pnt-text); } /* ================= CONSULTATION / CF7 ================= */ .pnt-consult-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; } .pnt-contact-side h1{ font-size:clamp(32px,4vw,50px); } .pnt-c-points{ margin-top:30px; display:flex; flex-direction:column; gap:16px; } .pnt-c-points li{ list-style:none; display:flex; gap:13px; color:var(--pnt-text); font-size:15px; } .pnt-c-points svg{ flex:0 0 auto; margin-top:4px; color:var(--pnt-accent); } .pnt-c-points small{ display:block; color:var(--pnt-muted); font-size:13.5px; } .pnt-form{ border:1px solid var(--pnt-line); border-radius:18px; padding:36px; background:var(--pnt-ink-2); } .pnt-form form{ display:block; } .pnt-form .pnt-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .pnt-form p{ margin:0; } .pnt-form br{ display:none; } /* CF7's default template inserts
after each label — the label is already block-level. */ .pnt-form label{ display:block; font-family:'Space Mono'; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--pnt-muted-2); margin:18px 0 7px; } .pnt-form .wpcf7-form-control-wrap{ display:block; } .pnt-form .wpcf7-form-control{ box-sizing:border-box; width:100%; background:var(--pnt-surface); border:1px solid var(--pnt-line); border-radius:10px; padding:13px 14px; color:var(--pnt-text); font-family:'Inter'; font-size:14.5px; line-height:normal; transition:border-color .2s; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; } .pnt-form select.wpcf7-form-control{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2342546F' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; cursor:pointer; } .pnt-form .wpcf7-form-control:focus{ border-color:var(--pnt-accent); box-shadow:none; } .pnt-form textarea.wpcf7-form-control{ min-height:0; resize:vertical; } .pnt-form .wpcf7-form-control.wpcf7-submit{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--pnt-accent); color:var(--pnt-btn-fg); font-weight:600; font-size:15px; padding:14px 24px; border-radius:11px; border:none; cursor:pointer; margin-top:24px; transition:.22s var(--pnt-ease); } .pnt-form .wpcf7-form-control.wpcf7-submit:hover{ transform:translateY(-2px); filter:brightness(1.06); } .pnt-form .wpcf7-spinner{ display:none; } /* Only relevant mid-submit; the invisible reserved box otherwise reads as stray empty space. */ .pnt-form .wpcf7-response-output{ text-align:center; color:var(--pnt-accent); font-weight:600; margin:16px 0 0; border-radius:10px; padding:12px; border:1px solid var(--pnt-line); } .pnt-form form.init .wpcf7-response-output,.pnt-form form.resetting .wpcf7-response-output,.pnt-form form.submitting .wpcf7-response-output{ display:none; } .pnt-form form.sent .wpcf7-response-output{ border-color:var(--pnt-accent); } .pnt-form form.failed .wpcf7-response-output,.pnt-form form.aborted .wpcf7-response-output{ color:#D8503A; border-color:#D8503A; } .pnt-form .wpcf7-not-valid-tip{ color:#D8503A; font-size:12.5px; margin-top:6px; display:block; font-family:'Inter'; } /* ================= FOOTER ================= */ .pnt-site-footer{ position:relative; z-index:1; border-top:1px solid var(--pnt-line); padding:54px 0 30px; background:var(--pnt-veil); } .pnt-foot{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; align-items:start; padding-bottom:34px; border-bottom:1px solid var(--pnt-line); } .pnt-foot-cols{ display:contents; } .pnt-foot-col{ min-width:0; } .pnt-foot-col h4{ font-family:'Space Mono'; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pnt-muted-2); margin-bottom:14px; } .pnt-foot-col a{ display:block; color:var(--pnt-muted); font-size:14px; padding:4px 0; transition:.2s; } .pnt-foot-col a:hover{ color:var(--pnt-accent); } .pnt-foot-bottom{ display:flex; justify-content:space-between; padding-top:22px; flex-wrap:wrap; gap:12px; } .pnt-foot-bottom span{ font-size:12.5px; color:var(--pnt-muted-2); } /* ================= RESPONSIVE ================= */ @media(max-width:1020px){ .pnt-hero-grid{ grid-template-columns:1fr; gap:44px; } .pnt-stage{ margin:0 auto; max-width:400px; } .pnt-vgrid,.pnt-fgrid,.pnt-blog-grid{ grid-template-columns:repeat(2,1fr); } .pnt-steps{ grid-template-columns:repeat(2,1fr); } .pnt-step:nth-child(2){ border-right:none; } .pnt-step:nth-child(-n+2){ border-bottom:1px solid var(--pnt-line); } .pnt-consult-grid{ grid-template-columns:1fr; } .pnt-single-grid{ grid-template-columns:1fr; } .pnt-single-sidebar{ border-left:none; border-top:1px solid var(--pnt-line); padding-left:0; padding-top:30px; margin-top:6px; } .pnt-foot{ grid-template-columns:1fr 1fr 1fr; row-gap:34px; } .pnt-foot-brand{ grid-column:1 / -1; } } @media(max-width:620px){ .pnt-vgrid,.pnt-fgrid,.pnt-blog-grid{ grid-template-columns:1fr; } .pnt-foot{ grid-template-columns:1fr 1fr; } .pnt-steps{ grid-template-columns:1fr; } .pnt-step{ border-right:none; border-bottom:1px solid var(--pnt-line); } .pnt-step:last-child{ border-bottom:none; } .pnt-hero-actions{ flex-direction:column; align-items:stretch; } .pnt-form .pnt-form-row{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .pnt-scope *{ animation:none!important; transition:none!important; } .pnt-reveal{ opacity:1; transform:none; } .pnt-penta-svg .pnt-edge{ stroke-dashoffset:0; } }