Foxxi Design System#

A Foxxi WordPress site kettős szekciójú: ugyanaz a foxy theme + ugyanaz a Theme Builder header/footer renderel két különböző brand-élménnyel, attól függően hogy a látogató a fogszab vagy a fogászat oldalon van.

A kettősséget egy single body class váltás vezérli (is_fox_section() → theme-fox vs theme-ortho).

Szekció-architektúra#

                                ┌────────────────────────────────────────┐
       /  (Választó)            │  /fogaszat/             /fogszab.../   │
       (split-hero, narancs)    │  body.theme-fox         body.theme-ortho│
                                │  ─────────────          ─────────────  │
                                │  Mint zöld paletta      Barna/narancs  │
                                │  Modern dental clinic   Orthodontic    │
                                │  Fogászati Centrum      Foxxi spec.    │
                                │  Felnőtt + gyermek      Invisalign     │
                                └────────────────────────────────────────┘

A két szekció ugyanazon a WP install-en, közös:

• 7 nav menü struktura (csak a primary-menu cserélődik fox-menu-re)
• Header + Footer Theme Builder template (közös HTML, eltérő színek)
• 19 Foxxi Elementor widget (slider, about, services, testimonials, feature, repeater, contact, cta, normal_content, blockquote, list_services, team, gallery_carousel, four_reasons, accordions, steps, before_after_gallery, video_carousel, header, footer, page_hero)

Color Palette — Foxxi Warm (theme-ortho, fogszab)#

Az eredeti Foxxi brand 7-color paletta (lásd docs/foxxi_szinek.txt):

Color Palette — Foxxi Dental Mint (theme-fox, fogászat)#

Új paletta 2026-04-30 — a user explicit kérése (a kék/zöld korábbi tilalom felülírva), hogy a fogászati részleg vizuálisan más legyen:

Semantic mapping#

body.theme-fox {
  --brand-primary:    var(--fox-mint-500);
  --brand-primary-dk: var(--fox-mint-700);
  --brand-accent:     var(--fox-mint-400);
  --brand-light:      var(--fox-mint-100);
  --brand-deep:       var(--fox-mint-800);
}

Typography (közös mindkét szekciónak)#

A foxy theme alapból betölti ezeket. NE adj hozzá Google Fonts import-ot.

Layout konvenciók#

Page-level#

Minden Elementor oldal (kivéve /-Választó) a elementor_header_footer page-template-en renderel:

┌─ Theme Builder Header (foxxi-header widget) ─────┐
├─ Page Hero (foxxi-page-hero widget) ─────────────┤
├─ Blockquote.top (foxxi-blockquote, pink color) ──┤  ← első tartalom-szekció
├─ Section #2 (about, services, repeater, ...) ────┤
├─ ... további szekciók ...                        │
├─ Cross-link banner (fox_render_cross_link) ──────┤  ← auto append
├─ Theme Builder Footer (foxxi-footer widget) ─────┤

Section-level#

Minden Foxxi widget egy 1-column Elementor section-ben (content_width: full_width, padding: 0, gap: no) — a foxy partial-ok teljes-szélesség background-okat vártak.

CSS bridge a :has(.elementor-widget-foxxi-...) szelektorral kényszeríti minden Elementor section-t full-width-re ahol Foxxi widget van.

Két oldal fő különbség (theme-fox)#

File-térkép#

Új szekció hozzáadásának checklist-je#

1. Render funkció a static-sections/render.php-ben: fox_static_render_<layout>($d) — DOM = foxy theme partial 1:1
2. Widget a elementor-widgets/widget-<layout>.php-ben: Foxxi_<Layout>_Widget extends Foxxi_Base_Widget
3. Loader.php: új név hozzáadása a foreach listához
4. Base widget func_map bővítése: '<layout>' => 'fox_static_render_<layout>'
5. CSS bridge a split-hero.css-ben: .elementor-widget-foxxi-<layout> > .elementor-widget-container { padding: 0 }
6. Generic migrator case ág a scripts/phase2-migrate-page.php-ben (ACF-fields mapolás)
7. theme-fox CSS overrides ha színváltozat kell (body.theme-fox .<layout-class>)

Tipikus hibajavítási sorrend#

Új layout/widget bevezetésekor:

1. HTML rendben? — curl + grep, ellenőrizd hogy a render funkció a megfelelő DOM-ot adja vissza
2. CSS érvényesül? — Playwright getComputedStyle vagy DevTools, hogy a body.theme-fox felülírások működnek-e
3. JS init? — ha slider/carousel, az enqueued script-ek frontend-ben futnak-e (fox_ensure_twentytwenty_assets() mintát használj)
4. Visual verify — Playwright screenshot 1440×900 viewport-on
5. Backup verify — minden migrate után _elementor_data_backup_<ts> post meta + /tmp/foxxi-id<X>-backup-<ts>.json

Continuity / "Honnan folytasd"#

Ha új session indul ezen a projekten:

1. Olvasd el 02-Projects/foxxi — fázis-státusz tábla
2. Olvasd el 11-wiki/wp-acf-flexible-to-elementor-migration — teljes módszertan
3. Olvasd el ezt a fájlt — design-system reference
4. SSH staging: ssh hostinger; cd ~/domains/violet-okapi-488175.hostingersite.com/public_html
5. Local repo: /root/projektjeim/foxxi/
6. Deploy after CSS/PHP edit: cd /root/projektjeim/foxxi && ./scripts/deploy-theme.sh --push
7. Cache flush: wp cache flush && wp w3-total-cache flush all
8. Visual verify: https://violet-okapi-488175.hostingersite.com/<slug>/?nocache=N

License & roadmap#

A playbook + design system public github repo alapanyag lesz: acf-to-elementor-migration (MIT), a Foxxi-specifikus konfiguráció kiszedve. Alkalmazható minden meglévő ACF Flexible Content WordPress site-ra.