# Kadence / Polylang integration plan The delivered page is a standalone design prototype, not a replacement WordPress theme. Implement accepted components in the protected staging site only. Do not append this full CSS file on top of all the previous V4-V7 patches. ## Before changing the live staging design Back up the database AND the active theme/custom plugins. Inventory only the visual CSS, old injected footers and floating CTA scripts. Keep security, mail, forms, SEO and unrelated MU plugins intact. Compare the current attachment IDs and page IDs rather than assuming IDs in the earlier conversation still match. Password protection, noindex, disabled public booking and test-only payments remain separate controls. A disabled host landing page does not by itself prove every event URL and booking endpoint is inaccessible. ## Build sequence ### 1. Header Kadence Main Row, 80px desktop; 68-72px small screens. Logo/site identity on the left; native per-language WordPress menu in the centre; Polylang language control and mobile toggle on the right. Keep consultation out of the main menu, as requested. The client login utility is non-interactive staging text; do not leave a working `href="#"` anchor styled as disabled. Use one behaviour owner for the 160px sticky threshold. Preserve layout space and account for the WordPress admin toolbar. Test on a 400px-tall viewport and with browser zoom. No sticky on small screens. ### 2. Hero Kadence Row Layout, desktop approximately 50/50, stacked below 900px. Left: eyebrow, one H1, short explanation, primary inquiry action, secondary pathway link and the ownership line. Right: WordPress Image block referencing the actual uploaded hero attachment. Use responsive image output and an aspect-preserving crop. Keep all title text as live HTML. Disable the native page-title section on pages whose content already supplies the H1. Do not globally hide all `.entry-header` elements. The decorative arch/contour can use a small local SVG or pseudo-elements. Mark decorative SVG as `aria-hidden=true`; use empty image alt only when it is genuinely atmospheric and carries no essential information. ### 3. Starting points Build three corresponding cards with native buttons or a single small reusable custom block. Use the authored FR/EN/ES copy in `copy.fr-en-es.json`. Store no sensitive information and do not call this an eligibility assessment. Use visible selected styling plus `aria-pressed`; do not rely on colour alone. ### 4. Services Use a reusable service-explorer component for the interactive panel. It must have a static/no-JavaScript equivalent that keeps service information available. In production, the service action should route to the actual translated page or the correct initial inquiry. Use Polylang's translation relationships and WordPress permalinks; do not hardcode `/wp/` and translated slugs from the prototype. ### 5. Human introduction Kadence two-column row. Abstract quote/architecture panel on the left, approved ownership and approach copy on the right. The decorative quote is brand copy, not a client testimonial. Replace the internal identity note only after verifying the real professional record. A real portrait can be added later with permission; do not substitute a synthetic portrait. ### 6. Process Three ordered steps connected by a decorative line. On mobile use an ordinary vertical sequence. Keep step text visible regardless of animation. Do not turn steps into unsupported promises about results or government processing times. ### 7. Employer feature Two-column navy feature. Include immigration strategy, work authorization and compliance tags. Use the network illustration, not a recruitment image. Keep the no-recruitment boundary clear. ### 8. Sources and questions Create actual official-reference links in the visitor's language where available. Native accessible accordion/disclosure blocks for FAQ. Do not invent an Insights archive or article cards to fill space. ### 9. Contact Replace the demonstration form with the EXISTING approved Fluent Form for that page's language. Do not deploy the standalone demo form as a real lead form. Keep visible labels, useful errors, a real localized privacy link and minimal non-sensitive fields. No file upload, passport, UCI, SIN, financial/medical/criminal details, evidence or refusal letters through public forms. Test the form and mail receipt end-to-end using synthetic test data. ### 10. Footer and CTA Build the footer in Kadence Footer Builder or a single well-scoped component, not by hiding the native footer while multiple plugins output replacements. Include the correct translated navigation, privacy/terms, native language links, public city, public email, copyright and visible prototype notice. No residential address or invented phone number. Use ONE persistent CTA component. It routes to the localized contact page during staging. Its minimize control, keyboard safety, safe-area spacing and dialog/keyboard avoidance should be preserved. Never stack it above a consent dialog or cover a submit button. ## Performance and privacy This prototype uses no third-party fonts/scripts/analytics. Optimize existing images, use WordPress `srcset`/`sizes`, and do not lazy-load the likely hero/LCP image. Lazy-load below-the-fold illustrations. Confirm Source Serif 4 and Inter through the theme's approved font setup; font files are not part of this kit. Respect the existing consent solution. Identify the installed tool before styling it; do not assume CookieYes selectors apply to CookieAdmin. Translate its actual controls and audit real cookies before adjusting categories. ## Acceptance checks - FR default; manual FR/EN/ES switching with no IP redirection. - Correct translated menus and internal permalinks; no English footer labels on French pages by accident. - Header <=88px at desktop baseline; fixed only after 160px and only when <=15% of visible viewport height. - Page reflows at 320px and remains usable at 200% zoom and increased text spacing. - A single meaningful H1 in RENDERED markup, including the theme title area. - No horizontal document overflow; image crop preserves the architecture and never stretches it. - Native button semantics for selectors, visible focus, logical order and status announcements. - No endless motion; pause control and reduced-motion preference work. - Floating action never obscures active fields, menu, dialog or focused control. - Real contact form functions, errors are perceivable and no sensitive fields/uploads are present. - Owner/professional identity, scope, regulator record and all actual privacy practices approved separately. - Staging remains access-protected and noindex. No public booking or live payment enablement as part of design work. Local QA results in this kit cover the prototype only. They are not evidence that the current WordPress site meets these checks.