/* ContentForge Programmatic — static CSS bundle. * Mirrors the static portion of pageScopedStyles in decorate.ts. * Per-site dynamic values (CSS vars) are emitted inline in * by the plugin's wp_head action. * * Every rule is scoped under .cf-programmatic-page so this is harmless * on non-programmatic pages. Drop in via wp_enqueue_scripts and the * structural / interactive styles for hero, FAQ, CTA, reveal, etc. * apply automatically. */ /* ── Hover transitions ───────────────────────────────────────────── */ .cf-programmatic-page .cf-cta-button{transition:transform .2s ease,box-shadow .25s ease,filter .2s ease} .cf-programmatic-page .cf-cta-button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px -10px rgba(15,23,42,.45)} .cf-programmatic-page .cf-cta-button:active{transform:translateY(0)} .cf-programmatic-page .cf-cta-button>span[aria-hidden]{transition:transform .2s ease} .cf-programmatic-page .cf-cta-button:hover>span[aria-hidden]{transform:translateX(4px)} .cf-programmatic-page .cf-cta-secondary{transition:color .2s ease,border-color .2s ease,transform .2s ease} .cf-programmatic-page .cf-cta-secondary:hover{transform:translateX(2px)} .cf-programmatic-page .cf-stat-card{transition:transform .25s ease,box-shadow .25s ease} .cf-programmatic-page .cf-stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(15,23,42,.18)} .cf-programmatic-page .cf-trust-logo{filter:grayscale(100%);opacity:.6;transition:filter .3s ease,opacity .3s ease,transform .3s ease} .cf-programmatic-page .cf-trust-logo:hover{filter:grayscale(0);opacity:1;transform:scale(1.03)} .cf-programmatic-page .cf-icon-bullet{transition:transform .2s ease} .cf-programmatic-page li:hover>.cf-icon-bullet{transform:scale(1.12)} /* ── Scroll-anchor opt-out (FAQ shift defense) ───────────────────── */ .cf-programmatic-page{overflow-anchor:none} .cf-programmatic-page *{overflow-anchor:none} /* ── FAQ accordion ───────────────────────────────────────────────── */ .cf-programmatic-page .cf-faq-item{transition:border-color .25s ease,box-shadow .25s ease;overflow-anchor:none} .cf-programmatic-page .cf-faq-item.cf-open,.cf-programmatic-page .cf-faq-item:hover{box-shadow:0 4px 14px -4px rgba(15,23,42,.1)} .cf-programmatic-page .cf-faq-item .cf-faq-summary{position:relative;padding-right:1.6em!important;line-height:1.4;outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none} .cf-programmatic-page .cf-faq-item .cf-faq-summary:focus,.cf-programmatic-page .cf-faq-item .cf-faq-summary:focus-visible,.cf-programmatic-page .cf-faq-item .cf-faq-summary:active,.cf-programmatic-page .cf-faq-item .cf-faq-summary:hover{outline:0!important;box-shadow:none!important;border:0!important;padding-top:0!important;padding-bottom:0!important;padding-left:0!important;margin:0!important} .cf-programmatic-page .cf-faq-item .cf-faq-summary::after,.cf-programmatic-page .cf-faq-item .cf-faq-summary::before{content:"";position:absolute;right:.1em;top:50%;width:14px;height:2px;background:currentColor;border-radius:2px;opacity:.55;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .25s ease;transform-origin:center;pointer-events:none} .cf-programmatic-page .cf-faq-item .cf-faq-summary::before{transform:translateY(-50%) rotate(90deg)} .cf-programmatic-page .cf-faq-item .cf-faq-summary::after{transform:translateY(-50%)} .cf-programmatic-page .cf-faq-item.cf-open .cf-faq-summary::before{transform:translateY(-50%) rotate(45deg);opacity:.85} .cf-programmatic-page .cf-faq-item.cf-open .cf-faq-summary::after{transform:translateY(-50%) rotate(-45deg);opacity:.85} .cf-programmatic-page .cf-faq-item .cf-faq-content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)} .cf-programmatic-page .cf-faq-item .cf-faq-inner{opacity:0;transition:opacity .25s ease .05s} .cf-programmatic-page .cf-faq-item.cf-open .cf-faq-inner{opacity:1} /* ── Hero rich (dot pattern + halo orb) ──────────────────────────── */ .cf-programmatic-page .cf-hero-rich{position:relative;overflow:hidden} .cf-programmatic-page .cf-hero-rich::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 0);background-size:24px 24px;opacity:.6;pointer-events:none} .cf-programmatic-page .cf-hero-rich::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);right:-80px;bottom:-120px;pointer-events:none} /* ── Hero-banner color (defense vs WP theme) + tight H1 spacing ─── */ .cf-programmatic-page .cf-hero-banner, .cf-programmatic-page .cf-hero-banner .cf-hero-h, .cf-programmatic-page .cf-hero-banner .cf-hero-h *, .cf-programmatic-page .cf-hero-banner > p, .cf-programmatic-page .cf-hero-banner .cf-hero-pill{color:#fff!important} .cf-programmatic-page h1.cf-hero-h{margin-bottom:-60px!important} @media (max-width:720px){.cf-programmatic-page h1.cf-hero-h{margin-bottom:-40px!important}} /* ── Hero overlap canvas: image + card composition per breakpoint ─ */ .cf-programmatic-page .cf-hero-overlap-canvas{position:relative;margin:0 0 calc(2rem * var(--cf-section-spacing,1)) 0;border-radius:16px;overflow:hidden} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-featured.cf-overlap{margin:0!important;padding:0;border-radius:16px;overflow:hidden} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-featured.cf-overlap img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:none} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-featured.cf-overlap [data-cf-placeholder="featured-image"]{width:100%;border-radius:16px;aspect-ratio:21/9} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero, .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero-banner{position:absolute!important;top:0!important;left:0!important;right:0!important;margin:0!important;z-index:2;max-width:none;border-radius:16px!important} @media (min-width:1025px){ .cf-programmatic-page .cf-hero-overlap-canvas{overflow:visible!important} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero, .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero-banner{top:-20px!important} } @media (min-width:721px) and (max-width:1024px){ .cf-programmatic-page .cf-hero-overlap-canvas{display:flex!important;flex-direction:column!important;overflow:visible!important} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero, .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero-banner{order:1!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:-30px clamp(12px,2vw,24px) -40px clamp(12px,2vw,24px)!important;border-radius:16px!important;z-index:2} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-featured.cf-overlap{order:2!important;position:relative;z-index:1} } @media (max-width:720px){ .cf-programmatic-page .cf-hero-overlap-canvas{display:flex!important;flex-direction:column!important;overflow:visible!important} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero, .cf-programmatic-page .cf-hero-overlap-canvas > .cf-hero-banner{order:1!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:0 clamp(8px,2vw,20px) -10px clamp(8px,2vw,20px)!important;border-radius:16px!important;z-index:2} .cf-programmatic-page .cf-hero-overlap-canvas > .cf-featured.cf-overlap{order:2!important;position:relative;z-index:1} } /* ── Inline link underline animation ─────────────────────────────── */ .cf-programmatic-page a:not(.cf-cta-button):not(.cf-cta-secondary):not(.cf-process-card):not(.cf-footer-link){text-decoration:none;background-image:linear-gradient(transparent calc(100% - 1px),var(--cf-accent) 1px);background-size:0% 100%;background-repeat:no-repeat;transition:background-size .25s ease} .cf-programmatic-page a:not(.cf-cta-button):not(.cf-cta-secondary):not(.cf-process-card):not(.cf-footer-link):hover{background-size:100% 100%} /* ── Section divider + reveal animation shell ────────────────────── */ .cf-programmatic-page .cf-section-divider{display:flex;align-items:center;justify-content:center;gap:8px;margin:2.5rem 0;color:var(--cf-accent);opacity:.5;font-size:1.25rem;letter-spacing:0.5em;padding-left:0.5em} .cf-programmatic-page.cf-anim-ready .cf-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease} .cf-programmatic-page.cf-anim-ready .cf-reveal.cf-revealed{opacity:1;transform:none} /* ── Sticky CTA scaffold ─────────────────────────────────────────── */ .cf-sticky-cta{position:fixed;bottom:18px;right:18px;left:18px;max-width:560px;margin:0 auto;color:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:9999;font-size:clamp(13px,2vw,15px);opacity:0;transform:translateY(120%);transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none;will-change:transform,opacity} .cf-sticky-cta.cf-visible{opacity:1;transform:translateY(0);pointer-events:auto} .cf-sticky-cta .cf-sticky-text{flex:1;min-width:0;line-height:1.35} .cf-sticky-cta .cf-sticky-btn{background:#fff;color:#1e293b;padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(0,0,0,0.2)} /* ── Reduce-motion + small-screen safety nets ────────────────────── */ @media (prefers-reduced-motion:reduce){.cf-programmatic-page *,.cf-progress-bar>span{transition:none!important;animation:none!important}} @media (max-width:640px){.cf-programmatic-page .cf-cta-card{padding:24px 20px!important}.cf-programmatic-page .cf-process-strip{flex-direction:column;align-items:stretch!important}.cf-programmatic-page .cf-process-step{flex:1 1 auto!important}} /* ── Vignette overlay + reading progress bar shells ──────────────── */ .cf-vignette-overlay{position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center,transparent 35%,rgba(15,23,42,.18) 100%)} .cf-progress-bar{position:fixed;top:0;left:0;height:3px;width:100%;background:transparent;z-index:9998;pointer-events:none} .cf-progress-bar>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cf-accent),var(--cf-accent-dark));transform-origin:left center;transform:scaleX(0);transition:transform .08s linear;box-shadow:0 0 12px var(--cf-accent)}