Elementor Design Segédlet (Dark Matter Stílus)

Ez a dokumentum segít abban, hogy az Elementorban felépített blogoldal vizuálisan tökéletesen illeszkedjen a Tanársegéd Next.js alapú motorjához.

[!IMPORTANT] Kötelező Stílusirányzat: A blog minden elemének (Archive oldal, kártyák, navigáció) a Dark Matter esztétikát KELL követnie. Ez nem választható, hanem a vizuális integritás alapköve.

🎨 Színpaletta (Globális Színek)

Az Elementor "Site Settings" -> "Global Colors" részében állítsd be az alábbiakat:

Név	Hex Kód	Szerep
Bázis Fekete	`#050505`	Oldal háttérszín
Kártya Háttér	`#0b0f19`	Bejegyzés kártyák és panelek
Neon Zöld	`#00ff88`	Elsődleges akcentus, linkek, gombok
Sötét Zöld	`#00b360`	Hover állapotok, gomb alsó szegély
Szöveg (Elsődleges)	`#ffffff`	Címsorok, főszöveg
Szöveg (Másodlagos)	`#e0e0e0`	Leírások, meta adatok

✍️ Tipográfia (Global Fonts)

Szerep	Betűtípus	Súly	Stílus
Címsorok (H1-H4)	`Montserrat`	700-900	Félkövér, modern
Törzsszöveg	`Inter`	300-400	Letisztult, jól olvasható

🛠️ Egyedi CSS Snippets (Style Tab -> Custom CSS)

Használd ezeket az Elementor widgeteken a prémium hatás érdekében:

1. Glassmorphism Kártya Hatás

Az Elementor kártya widgeten vagy oszlopon:

selector {
    background: rgba(11, 15, 25, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    transition: all 0.5s ease;
}

selector:hover {
    border-color: #00ff8866 !important;
    box-shadow: 0 20px 50px rgba(0, 255, 136, 0.1) !important;
    transform: translateY(-8px);
}

2. Neon Gomb Hatás

A gomb widgeten (Advanced -> Custom CSS):

selector .elementor-button {
    background: #00ff88 !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transform: skewX(-18deg);
    border-radius: 4px !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important;
    transition: all 0.3s ease !important;
}

selector .elementor-button:hover {
    background: #ffffff !important;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.6) !important;
}

## 📱 Mobil-Reszponzív Tippek

1.  **Szöveg Igazítás**: Mobilon javasolt a címsorok középre igazítása, ha a kártyák is 1 oszloposak.
2.  **Kártya Margin**: Adj a kártyáknak legalább `20px` alsó margót, hogy mobilon ne érjenek össze.
3.  **Képarány**: Mobilon a `16:9`-es képarány a legideálisabb, mert ez hagyja meg a legtöbb helyet a szövegnek a görgetésnél.
4.  **Touch Interakciók**: Mivel mobilon nincs hover, a kártyák dizájnja legyen alapból is elég kontrasztos (pl. a Neon Zöld cím vagy keret lehet enyhén világosabb alapból is).

📋 "Vagány" Blog Főoldal (Archive) Felépítése

Mivel a cél egy ütős gyűjtőoldal, az Elementorban az alábbi felépítést javaslom:

Archívum Sablon (Theme Builder):
- Hozz létre egy új "Archive" sablont.
- Használj Loop Grid-et (ha az Elementor Pro-t használod) vagy Posts widgetet.

2. Blog Grid (A kártyák elrendezése)

Widget: Loop Grid (vagy Posts widget):
- Columns: 3 (Desktop), 2 (Tablet), 1 (Mobile).
- Query: "Posts", sorrend dátum szerint csökkenő.
- Pagination: "Load on click" vagy lapozás nélkül az első 9 poszt.

📱 Mobil-Specifikus Finomhangolás

Padding: Mobilon csökkentsd a szekciók oldalsó margóját (15px-re), hogy több hely maradjon a tartalomnak.
Betűméret: A H1 címsor mobilon legyen kisebb (2.5rem vagy 3rem), hogy ne törjön szét több sorba feleslegesen.
Kártya Arány: Mobilon a kép maradhat felül, de a kártya belső margóját (padding) vedd lejjebb (20px), hogy ne legyen túl nyújtott az elem.

Kártya Dizájn (A "Vagány" elem):
- Kép (Featured Image): Használj lekerekített sarkokat (24px) és egy enyhe belső árnyékot.
- Cím (H3): Montserrat, Bold, fehér szín. Hover állapotban váltson Neon Zöldre (#00ff88).
- Meta Leírás (Excerpt): Rövidített tartalom Inter betűtípussal, 80%-os áttetszőséggel.
- Gomb/Link: Egy diszkrét "Olvasd tovább" felirat a kártya alján, ami csak hover-re kap egy neon zöld vonalat vagy nyilat.
Hibrid Munkamenet (WP + Elementor):
- A cikkeket WordPress-ben hozod létre (Classic vagy Block editorral).
- Az Elementor listaoldal automatikusan "szippantja be" ezeket a cikket (Cím, Kép, Excerpt).
- Így a cikkírás gyors marad, de a főoldal "Dark Matter" stílusban tündököl.