/* ========================================================== PAGE LAYOUT, PRINT & SCREEN ZOOM ---------------------------------------------------------- - .page-sheet: a fix A4 lap (210 × 297 mm). - Képernyőn 150%-os nagyítás (--screen-zoom) a jobb olvashatóságért. - Nyomtatásban / PDF-ben pontos A4, margó nélkül. ========================================================== */ /* ----- A4 lap ----- * Fix 297mm magasság (nem min-height), hogy a lap magassága nyelvváltáskor se változzon, és a kontakt sáv mindig pontosan az A4 aljára kerüljön. */ .page-sheet { width: 210mm; height: 297mm; background: var(--color-white); margin: 24px auto; position: relative; overflow: hidden; box-shadow: 0 6px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; } /* ----- Webes (képernyő) nagyítás ----- * A 'zoom' a Chrome-ban helyesen újraszámolja a layoutot és a görgetést. Nyomtatásban a @media print felülírja, ott pontos A4 marad. */ @media screen { .page-stack { zoom: var(--screen-zoom); } } /* ----- FEJLESZTŐI MÓD: túlcsorduló tartalom megjelenítése ----- Amíg a tartalmat rendezed, a bekapcsolásával a lap NEM vágja le a túllógó részt, hanem megnő és láthatóvá teszi (a fix A4-magasságot min-height-tá lazítja, és megjelöli a 297mm-es határt egy szaggatott vonallal). Élesbenhez vedd le a 'dev-overflow' osztályt a -ról – ekkor visszaáll a pontos A4-es vágás. */ @media screen { body.dev-overflow .page-sheet { height: auto; min-height: 297mm; overflow: visible; } /* a 297mm-es A4-határ jelzése */ body.dev-overflow .page-sheet::after { content: "A4 határ (297mm)"; position: absolute; left: 0; right: 0; top: 297mm; border-top: 2px dashed #d23; color: #d23; font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 2px 4px; background: rgba(255,255,255,.85); pointer-events: none; z-index: 50; } } /* ----- Nyomtatás / PDF ----- */ @media print { /* A hajszálvonal vastagságát fizikai mm-re állítjuk a nyomtatásban. A px-et a PDF-renderelő a legközelebbi egész eszközpixelre kerekíti (ezért tűnt minden vonal vastagnak); a mm fizikai egység, amit a renderelő a tényleges felbontáson rajzol ki, így a vonal valódi vékony hajszálvonal marad. 0.18mm ≈ 0.5px @96dpi — egyenletes, nem tűnik el. Egyetlen helyen átírva minden elválasztóra hat. */ :root { --hairline: 0.18mm; } @page { size: A4; margin: 0; } /* a képernyős wrapper nyomtatásban ne korlátozza/tolja a lapokat */ .page-stack { zoom: 1; /* a képernyős --screen-zoom: 1.5 nagyítást nyomtatásban ki */ width: auto; margin: 0; position: static; /* Biztonsági öv: ha bármi (régi vagy jövőbeli kód) transformot vagy fix magasságot tenne a stackre, nyomtatásban azt semlegesítjük, hogy a PDF tiszta, vektoros A4 maradjon. (A mobil-illesztés MÁR NEM transform: scale()-lel megy, hanem a viewport-szélességgel — lásd js/main.js —, úgyhogy ez ma inkább védelem, mint szükséglet.) */ transform: none !important; height: auto !important; } body { background: var(--color-white); } /* A lapot ZÁRÓ navy sávok (1. lap: kontakt; 2. lap: végzettség) alját a lap LEGALJÁIG húzzuk. A .page-sheet (print) magassága 296.8mm, a fizikai lap 297mm → a sávnak bele kell nyúlnia a maradék ~0.2mm-be, különben a PDF alján vékony fehér csík marad (Chrome sub-pixel kerekítés). Bőséges (-1mm) negatív alsó margóval túlhúzzuk, és a sáv ALSÓ élét box-shadow-val kitöltjük; a .page-sheet overflow:hidden levágja a felesleget, így a sáv pontosan a lap széléig ér, rés nélkül. FONTOS: a kitöltés CSAK LEFELÉ megy (0 1mm). A korábbi felfelé irányuló árnyék a 2. lapon a sáv tetejét a kártyák alá türemkedte (navy csík). */ .contact-bar, .content-area--two .education { margin-bottom: -1mm; box-shadow: 0 1mm 0 0 var(--color-navy); } /* a KPI-sáv (a lap belsejében) mindkét élén kaphat kitöltést */ .leadership-impact { box-shadow: 0 0 0 0.4mm var(--color-navy); } .page-sheet { zoom: 1; width: 210mm; /* A magasságot egy hajszállal 297mm ALÁ vesszük: a nyomtatómotorok (főleg Safari/Mac) a pontosan 297mm-es elemet a sub-pixel kerekítés miatt túlcsordultnak ítélhetik, és a lap alját átlökik a következő fizikai oldalra. A 296.8mm lefedi az alsó rést (a záró sáv -1mm túllógással éri el a lap szélét), de marad 0.2mm tartalék a túlcsordulás ellen — tesztelve: 2 oldal marad, nincs alsó csík. */ height: 296.8mm; margin: 0; box-shadow: none; overflow: hidden; /* a túllógó tartalom ne folyjon át a következő oldalra */ break-inside: avoid; page-break-inside: avoid; } /* a második lap új oldalon kezdődjön */ .page-sheet--two { break-before: page; page-break-before: always; } /* Háttérszínek / -gradiensek / border-vonalak megőrzése a PDF-ben */ .hero-banner, .hero-photo, .hero-qr-frame, .leadership-impact, .contact-bar, .contact-icon, .featured, .achievement-card, .achievement-card-icon, .education-grid, .content-columns, .competencies, .competency-group, .career-list::before, .career-item::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Képernyő-only lebegő vezérlők elrejtése (a teljes konténer, mert position:fixed) */ .screen-controls, .pdf-save-button, .language-switcher { display: none !important; } }