/* ==========================================================
NERDIUM ARTICLE BUILDER
PUBLIC RENDERER V1
========================================================== */
body.nerdium-builder-public .cikk-tartalom {
max-width: none;
}
.nbp-root {
--nbp-gap: 24px;
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
}
.nbp-section {
width: 100%;
position: relative;
}
.nbp-columns {
display: grid;
grid-template-columns:
repeat(
var(--nbp-columns, 1),
minmax(0, 1fr)
);
gap: var(--nbp-gap);
align-items: start;
}
.nbp-column {
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.nbp-block {
min-width: 0;
width: 100%;
}
.nbp-block[data-theme="gold"] {
padding: 22px;
border:
1px solid
rgba(218, 177, 83, 0.55);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(218, 177, 83, 0.10),
rgba(218, 177, 83, 0.025)
);
}
.nbp-block[data-theme="dark"] {
padding: 22px;
border:
1px solid
rgba(255, 255, 255, 0.09);
border-radius: 14px;
background:
rgba(255, 255, 255, 0.035);
}
/* ==============================
TEXT
================================ */
.nbp-html > :first-child {
margin-top: 0;
}
.nbp-html > :last-child {
margin-bottom: 0;
}
.nbp-html p {
line-height: 1.75;
}
.nbp-html h2,
.nbp-html h3,
.nbp-html h4 {
scroll-margin-top: 100px;
}
.nbp-html blockquote {
margin:
12px
0;
padding:
16px
20px;
border-left:
3px solid
#d9b45b;
background:
rgba(217, 180, 91, 0.06);
border-radius:
0
10px
10px
0;
}
/* ==============================
IMAGE
================================ */
.nbp-image {
margin: 0;
}
.nbp-image img {
display: block;
width: 100%;
max-width: 600px;
height: auto;
margin-inline: auto;
border-radius: 14px;
}
.nbp-caption {
margin-top: 9px;
font-size: 0.88rem;
line-height: 1.5;
opacity: 0.72;
}
/* ==============================
INFO CARD
================================ */
.nbp-info {
padding: 20px 22px;
border-radius: 14px;
border:
1px solid
rgba(217, 180, 91, 0.38);
background:
rgba(217, 180, 91, 0.075);
}
.nbp-info[data-variant="tip"] {
border-color:
rgba(77, 181, 128, 0.42);
background:
rgba(77, 181, 128, 0.07);
}
.nbp-info[data-variant="warning"] {
border-color:
rgba(211, 101, 78, 0.44);
background:
rgba(211, 101, 78, 0.075);
}
.nbp-info[data-variant="lore"] {
border-color:
rgba(108, 135, 208, 0.45);
background:
rgba(108, 135, 208, 0.075);
}
.nbp-info-title {
margin:
0
0
7px;
font-size: 1.04rem;
font-weight: 700;
}
.nbp-info-text {
margin: 0;
line-height: 1.65;
}
/* ==============================
TABS
================================ */
.nbp-tabs {
overflow: hidden;
border:
1px solid
rgba(255, 255, 255, 0.10);
border-radius: 14px;
background:
rgba(255, 255, 255, 0.025);
}
.nbp-tabs-nav {
display: flex;
overflow-x: auto;
border-bottom:
1px solid
rgba(255, 255, 255, 0.09);
}
.nbp-tab-button {
appearance: none;
border: 0;
border-bottom:
2px solid transparent;
background: transparent;
padding:
13px
17px;
color: inherit;
font: inherit;
font-weight: 650;
cursor: pointer;
white-space: nowrap;
}
.nbp-tab-button[aria-selected="true"] {
color: #e1bc63;
border-bottom-color:
#e1bc63;
}
.nbp-tab-panel {
padding: 20px;
}
.nbp-tab-panel[hidden] {
display: none;
}
/* ==============================
ACCORDION
================================ */
.nbp-accordion {
display: grid;
gap: 10px;
}
.nbp-accordion details {
overflow: hidden;
border:
1px solid
rgba(255, 255, 255, 0.10);
border-radius: 12px;
background:
rgba(255, 255, 255, 0.025);
}
.nbp-accordion summary {
cursor: pointer;
padding:
15px
17px;
font-weight: 700;
}
.nbp-accordion-content {
padding:
0
17px
17px;
line-height: 1.65;
}
/* ==============================
CHARACTER / FLIP
================================ */
.nbp-flip-shell {
perspective: 1200px;
cursor: pointer;
}
.nbp-flip-shell:focus-visible {
outline:
2px solid
#d9b45b;
outline-offset: 4px;
}
.nbp-flip-inner {
position: relative;
min-height: 320px;
transform-style: preserve-3d;
transition:
transform
0.48s
ease;
}
.nbp-flip-shell.is-flipped
.nbp-flip-inner {
transform:
rotateY(180deg);
}
.nbp-flip-face {
position: absolute;
inset: 0;
overflow: hidden;
backface-visibility: hidden;
border:
1px solid
rgba(217, 180, 91, 0.32);
border-radius: 16px;
background:
rgba(20, 20, 23, 0.96);
}
.nbp-flip-back {
transform:
rotateY(180deg);
}
.nbp-character-image {
width: 100%;
height: 215px;
object-fit: cover;
display: block;
}
.nbp-character-body {
padding: 18px;
}
.nbp-character-name {
margin:
0
0
4px;
font-size: 1.3rem;
}
.nbp-character-subtitle {
margin:
0
0
12px;
opacity: 0.72;
}
.nbp-character-data {
display: flex;
flex-wrap: wrap;
gap:
6px
10px;
font-size: 0.9rem;
opacity: 0.85;
}
.nbp-character-quote {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
padding: 26px;
text-align: center;
}
.nbp-character-quote blockquote {
margin: 0;
font-size: 1.08rem;
line-height: 1.7;
}
.nbp-character-source {
margin-top: 16px;
font-size: 0.85rem;
opacity: 0.65;
}
/* ==============================
TIMELINE
================================ */
.nbp-timeline {
position: relative;
display: grid;
gap: 18px;
padding-left: 28px;
}
.nbp-timeline::before {
content: "";
position: absolute;
left: 7px;
top: 7px;
bottom: 7px;
width: 2px;
background:
rgba(217, 180, 91, 0.34);
}
.nbp-timeline-item {
position: relative;
}
.nbp-timeline-item::before {
content: "";
position: absolute;
left: -26px;
top: 7px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #d9b45b;
box-shadow:
0 0 0 4px
rgba(217, 180, 91, 0.12);
}
.nbp-timeline-date {
font-size: 0.82rem;
font-weight: 700;
color: #d9b45b;
}
.nbp-timeline-title {
margin:
3px
0
4px;
}
.nbp-timeline-text {
margin: 0;
line-height: 1.6;
opacity: 0.88;
}
/* ==============================
GALLERY / GRID
================================ */
.nbp-gallery,
.nbp-image-grid {
display: grid;
grid-template-columns:
repeat(
var(--nbp-gallery-columns, 3),
minmax(0, 1fr)
);
gap: 12px;
}
.nbp-gallery-item {
margin: 0;
}
.nbp-gallery-button {
appearance: none;
display: block;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.nbp-gallery img,
.nbp-image-grid img {
display: block;
width: 100%;
height: 100%;
min-height: 150px;
max-height: 420px;
object-fit: cover;
border-radius: 12px;
}
/* ==============================
IMAGE CARD
================================ */
.nbp-image-card {
overflow: hidden;
border:
1px solid
rgba(255, 255, 255, 0.10);
border-radius: 15px;
background:
rgba(255, 255, 255, 0.025);
}
.nbp-image-card img {
display: block;
width: 100%;
max-height: 430px;
object-fit: cover;
}
.nbp-image-card-body {
padding: 18px;
}
.nbp-image-card-title {
margin:
0
0
7px;
}
.nbp-image-card-text {
margin: 0;
line-height: 1.65;
}
/* ==============================
IMAGE + TEXT
================================ */
.nbp-image-text {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 24px;
align-items: center;
}
.nbp-image-text[data-position="right"]
.nbp-image-text-media {
order: 2;
}
.nbp-image-text-media img {
display: block;
width: 100%;
border-radius: 14px;
}
.nbp-image-text-title {
margin-top: 0;
}
/* ==============================
LIGHTBOX
================================ */
.nbp-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
background:
rgba(0, 0, 0, 0.90);
}
.nbp-lightbox[hidden] {
display: none;
}
.nbp-lightbox img {
display: block;
max-width: min(1200px, 94vw);
max-height: 86vh;
object-fit: contain;
}
.nbp-lightbox-close {
position: fixed;
top: 20px;
right: 24px;
border: 0;
background: transparent;
color: white;
font-size: 2rem;
cursor: pointer;
}
/* ==============================
RESPONSIVE
================================ */
@media (max-width: 900px) {
.nbp-columns {
gap: 18px;
}
.nbp-gallery,
.nbp-image-grid {
--nbp-gallery-columns: 2 !important;
}
}
@media (max-width: 720px) {
.nbp-root {
gap: 25px;
}
.nbp-columns {
grid-template-columns: 1fr;
}
.nbp-image-text {
grid-template-columns: 1fr;
}
.nbp-image-text[data-position="right"]
.nbp-image-text-media {
order: 0;
}
.nbp-gallery,
.nbp-image-grid {
grid-template-columns: 1fr;
}
.nbp-gallery img,
.nbp-image-grid img {
max-height: none;
}
.nbp-flip-inner {
min-height: 355px;
}
}
/* ===== NERDIUM VISUAL POLISH FINAL V2 START ===== */
/* ==========================================================
ARTICLE WIDTH / RHYTHM
========================================================== */
.nbp-root {
--nbp-gap: 28px;
width: 100%;
max-width: 1120px;
margin-inline: auto;
gap: 42px;
}
.nbp-column {
gap: 28px;
}
/* ==========================================================
TYPOGRAPHY / SECTION RHYTHM
========================================================== */
.nbp-html h2 {
margin: 48px 0 20px;
padding-left: 14px;
border-left:
3px solid
#d9b45b;
line-height: 1.2;
}
.nbp-html h2:first-child {
margin-top: 0;
}
.nbp-html h3 {
margin: 32px 0 14px;
line-height: 1.25;
}
.nbp-html h4 {
margin: 26px 0 12px;
}
/* ==========================================================
THEMED BLOCKS
========================================================== */
.nbp-block[data-theme="gold"],
.nbp-block[data-theme="dark"] {
box-shadow:
0 12px 32px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.025);
}
/* ==========================================================
IMAGE CARD
========================================================== */
.nbp-image-card {
overflow: hidden;
border-color:
rgba(217,180,91,.24);
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(217,180,91,.035),
rgba(255,255,255,.018)
),
rgba(17,20,24,.94);
box-shadow:
0 12px 32px
rgba(0,0,0,.20);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
/*
* Desktopon egyetlen képes kártya ne nőjön
* indokolatlanul óriásira.
*/
@media (min-width: 901px) {
.nbp-image-card {
width: min(100%, 960px);
margin-inline: auto;
}
}
.nbp-image-card > img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
max-height: none;
object-fit: cover;
object-position: center;
border-bottom:
1px solid
rgba(255,255,255,.055);
}
.nbp-image-card-body {
padding: 20px 21px 22px;
}
.nbp-image-card-title {
margin-bottom: 8px;
font-size: 1.12rem;
line-height: 1.28;
}
.nbp-image-card-text {
opacity: .82;
}
/* ==========================================================
GALLERY
========================================================== */
.nbp-gallery {
gap: 16px;
}
/*
* Pontosan 4 képnél desktop/tablet:
*
* [ 1 ][ 2 ]
* [ 3 ][ 4 ]
*
* Mobilgalériát ez NEM módosítja.
*/
@media (min-width: 721px) {
.nbp-gallery:has(> :nth-child(4):last-child) {
--nbp-gallery-columns: 2 !important;
}
}
.nbp-gallery-button {
overflow: hidden;
aspect-ratio: 16 / 9;
border:
1px solid
rgba(217,180,91,.18);
border-radius: 13px;
background: #090c10;
box-shadow:
0 8px 24px
rgba(0,0,0,.18);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.nbp-gallery
.nbp-gallery-button img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: 0;
transition:
transform .28s ease;
}
/* ==========================================================
IMAGE GRID
========================================================== */
.nbp-image-grid {
gap: 16px;
}
/*
* Ugyanez a normál image-grid esetén.
*/
@media (min-width: 721px) {
.nbp-image-grid:has(> :nth-child(4):last-child) {
grid-template-columns:
repeat(
2,
minmax(0,1fr)
) !important;
}
}
.nbp-image-grid img {
display: block;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border:
1px solid
rgba(217,180,91,.16);
border-radius: 13px;
background: #090c10;
box-shadow:
0 8px 24px
rgba(0,0,0,.17);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
/* ==========================================================
IMAGE + TEXT
========================================================== */
.nbp-image-text {
gap: 30px;
}
.nbp-image-text-media {
overflow: hidden;
border-radius: 14px;
background: #090c10;
}
.nbp-image-text-media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border:
1px solid
rgba(217,180,91,.16);
border-radius: 14px;
box-shadow:
0 10px 28px
rgba(0,0,0,.18);
}
/* ==========================================================
CHARACTER / FLIP
========================================================== */
.nbp-flip-inner {
min-height: 340px;
}
.nbp-flip-face {
border-color:
rgba(217,180,91,.28);
background:
linear-gradient(
145deg,
rgba(217,180,91,.045),
rgba(255,255,255,.014)
),
rgba(17,20,24,.96);
box-shadow:
0 12px 34px
rgba(0,0,0,.20);
}
.nbp-character-image {
height: 205px;
object-fit: cover;
object-position: center;
}
.nbp-character-body {
padding: 19px 20px 21px;
}
.nbp-character-name {
font-size: 1.24rem;
line-height: 1.25;
}
.nbp-character-data {
line-height: 1.5;
}
/*
* Kép nélküli karakterkártya ne legyen óriási.
*/
.nbp-flip-shell:not(:has(.nbp-character-image))
.nbp-flip-inner {
min-height: 215px;
}
/* ==========================================================
DESKTOP HOVER
========================================================== */
@media (hover: hover) {
.nbp-image-card:hover {
transform:
translateY(-2px);
border-color:
rgba(217,180,91,.40);
box-shadow:
0 16px 38px
rgba(0,0,0,.26);
}
.nbp-gallery-button:hover {
transform:
translateY(-2px);
border-color:
rgba(217,180,91,.42);
box-shadow:
0 14px 32px
rgba(0,0,0,.26);
}
.nbp-gallery-button:hover img {
transform:
scale(1.025);
}
.nbp-image-grid img:hover {
transform:
translateY(-2px);
border-color:
rgba(217,180,91,.38);
box-shadow:
0 14px 30px
rgba(0,0,0,.24);
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 900px) {
.nbp-root {
gap: 36px;
}
.nbp-image-text {
gap: 22px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 720px) {
.nbp-root {
gap: 30px;
}
.nbp-column {
gap: 22px;
}
.nbp-html h2 {
margin: 36px 0 16px;
padding-left: 11px;
}
.nbp-html h3 {
margin: 26px 0 12px;
}
.nbp-image-card {
width: 100%;
}
.nbp-image-card-body {
padding: 17px 17px 19px;
}
.nbp-image-card-title {
font-size: 1.05rem;
}
.nbp-image-grid {
gap: 13px;
}
.nbp-image-grid img {
aspect-ratio: 16 / 10;
}
.nbp-image-text {
gap: 17px;
}
.nbp-image-text-media img {
aspect-ratio: 16 / 10;
}
.nbp-flip-inner {
min-height: 330px;
}
.nbp-flip-shell:not(:has(.nbp-character-image))
.nbp-flip-inner {
min-height: 200px;
}
}
/* ===== NERDIUM VISUAL POLISH FINAL V2 END ===== */
/* ==========================================================
NERDIUM BUILDER PARAGRAPH RHYTHM V1
Csak két egymást követő sima bekezdés között
csökkentjük a távolságot.
H2 -> bekezdés
bekezdés -> H2
egyéb komponensek
változatlanok maradnak.
========================================================== */
.nerdium-builder-public
.nbp-column
> .nbp-block:has(> .nbp-html > p:only-child)
+ .nbp-block:has(> .nbp-html > p:only-child) {
margin-top: -10px;
}
/* ==========================================================
NERDIUM BUILDER ARTICLE LAYOUT + IMAGE RHYTHM V2
1. Desktop szövegtörzs vissza a Nerdium eredeti
760 px-es olvasási szélességére.
2. A sima Kép blokk nem kap külön függőleges margót.
A természetes Builder gap szabályozza a távolságot.
3. A kép méretezése változatlan marad.
========================================================== */
/* Cikktörzs: ugyanaz az olvasási szélesség, mint eredetileg. */
body.nerdium-builder-public .cikk-tartalom {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/*
* A kép saját extra függőleges margóját kivesszük.
* Így a magasság ténylegesen a tartalomhoz igazodik,
* és csak a Builder természetes gapje marad.
*/
body.nerdium-builder-public
.nbp-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* Mobilon sem adunk külön extra függőleges margót.
* A kép szélességi szabályait NEM írjuk felül.
*/
@media (max-width: 720px) {
body.nerdium-builder-public
.nbp-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* ==========================================================
NERDIUM BUILDER NATURAL CONTENT RHYTHM V3
A blokkok magassága kizárólag a tartalmukból jön.
Nem használunk fix vertikális gapet a teljes oszlopon.
Bekezdés -> bekezdés: 16px
H2/H3 előtt: nagyobb fejezeti tér
Képek előtt/után: mérsékelt vizuális tér
Egyéb komponensek: 24px
========================================================== */
/* ----------------------------------------------------------
1. FIX GAP RENDSZER KIKAPCSOLÁSA
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-root {
gap: 0;
}
body.nerdium-builder-public
.nbp-column {
gap: 0;
}
/* ----------------------------------------------------------
2. MINDEN BLOKK TÉNYLEGESEN TARTALOMMAGASSÁGÚ
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-block {
height: auto;
min-height: 0;
margin: 0 0 24px;
}
/* ----------------------------------------------------------
3. SIMA BEKEZDÉSEK
Rövid és hosszú szöveg egyaránt saját természetes
magasságát használja. Csak az UTÁNA következő tér fix.
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0;
margin-bottom: 16px;
}
/*
* A korábbi Paragraph Rhythm V1 negatív marginját
* explicit semlegesítjük.
*/
body.nerdium-builder-public
.nbp-column
> .nbp-block:has(> .nbp-html > p:only-child)
+ .nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0 !important;
}
/* ----------------------------------------------------------
4. H2 / H3
Fejezet előtt kell nagyobb levegő,
utána viszont közelebb induljon a szöveg.
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 28px;
margin-bottom: 18px;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 22px;
margin-bottom: 15px;
}
/* ----------------------------------------------------------
5. SIMA KÉP
Nem kap óriási üres területet, de vizuálisan
különválik a szövegtől.
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-block:has(> .nbp-image) {
margin-top: 16px;
margin-bottom: 28px;
}
/*
* Maga a figure továbbra se adjon még egy plusz margót.
*/
body.nerdium-builder-public
.nbp-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
6. UTOLSÓ BLOKK
Ne maradjon fölösleges üres hely egy oszlop végén.
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-column
> .nbp-block:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------
7. MOBIL
Ugyanaz a természetes logika, picit kompaktabban.
---------------------------------------------------------- */
@media (max-width: 720px) {
body.nerdium-builder-public
.nbp-block {
margin-bottom: 20px;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0;
margin-bottom: 14px;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 24px;
margin-bottom: 16px;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 20px;
margin-bottom: 14px;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-image) {
margin-top: 14px;
margin-bottom: 24px;
}
}
/* ==========================================================
NERDIUM NATURAL CONTENT RHYTHM V3.1
Kompaktabb cikkritmus
========================================================== */
/* Sima bekezdés */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* H2 */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 20px !important;
margin-bottom: 12px !important;
}
/* H3 */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 16px !important;
margin-bottom: 10px !important;
}
/* Mobil */
@media (max-width: 720px) {
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 18px !important;
margin-bottom: 12px !important;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 14px !important;
margin-bottom: 10px !important;
}
}
/* ==========================================================
NERDIUM NATURAL CONTENT RHYTHM V3.2
Tömörebb, folyamatos cikkritmus
========================================================== */
/* Bekezdés */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
/* H2 */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 14px !important;
margin-bottom: 8px !important;
}
/* H3 */
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 12px !important;
margin-bottom: 7px !important;
}
/* Mobil */
@media (max-width: 720px) {
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > p:only-child) {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h2:only-child) {
margin-top: 14px !important;
margin-bottom: 8px !important;
}
body.nerdium-builder-public
.nbp-block:has(> .nbp-html > h3:only-child) {
margin-top: 12px !important;
margin-bottom: 7px !important;
}
}
/* ==========================================================
NERDIUM INTERNAL PARAGRAPH RHYTHM V4
VALÓDI OK JAVÍTÁSA:
- .nbp-html belső bekezdéseinek 24px legacy marginja megszűnik
- üres nem foglal helyet
-
sem foglal helyet
- H2/H3 ritmushoz nem nyúlunk
========================================================== */
/* ----------------------------------------------------------
VALÓDI BEKEZDÉSEK
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-html > p {
margin-top: 0 !important;
margin-bottom: 8px !important;
height: auto;
min-height: 0;
}
/*
* Egy blokk utolsó valódi bekezdése után
* ne legyen még egy belső margin.
* A külső Builder rhythm kezeli a következő blokkot.
*/
body.nerdium-builder-public
.nbp-html > p:last-child {
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
ÜRES BEKEZDÉSEK
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-html > p:empty {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------
CONTENTEDITABLE / ENTER MARADVÁNY
---------------------------------------------------------- */
body.nerdium-builder-public
.nbp-html > p:has(> br:only-child) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------
MOBIL
Ugyanez a természetes ritmus.
---------------------------------------------------------- */
@media (max-width: 720px) {
body.nerdium-builder-public
.nbp-html > p {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
body.nerdium-builder-public
.nbp-html > p:last-child {
margin-bottom: 0 !important;
}
}
/* ==========================================================
NERDIUM ARTICLE VISUAL TOOLKIT V69
========================================================== */
/* Kiemelt gondolat: teljes, visszafogott arany keret. */
.nbp-block[data-type="highlight"] .nbp-html blockquote {
margin: 0;
padding: 22px 24px;
border: 1px solid rgba(217, 180, 91, .58);
border-left-width: 1px;
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(217, 180, 91, .085),
rgba(255, 255, 255, .018)
),
rgba(16, 19, 23, .72);
box-shadow:
0 14px 34px rgba(0, 0, 0, .18),
inset 0 1px 0 rgba(255, 255, 255, .025);
font-style: normal;
}
/* Normál idézet: kicsit finomabb, de már kártyaszerű. */
.nbp-block[data-type="quote"] .nbp-html blockquote {
margin: 0;
padding: 18px 21px;
border: 1px solid rgba(217, 180, 91, .34);
border-left: 3px solid #d9b45b;
border-radius: 12px;
background: rgba(217, 180, 91, .055);
}
/* Fejezetelválasztó. */
.nbp-divider {
position: relative;
display: grid;
place-items: center;
min-height: 42px;
margin: 8px 0;
}
.nbp-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(217, 180, 91, .18) 14%,
rgba(217, 180, 91, .62) 50%,
rgba(217, 180, 91, .18) 86%,
transparent
);
}
.nbp-divider-mark {
position: relative;
z-index: 1;
display: grid;
width: 30px;
height: 30px;
place-items: center;
color: #d9b45b;
background: #0c1015;
font-size: .68rem;
text-shadow: 0 0 18px rgba(217, 180, 91, .18);
}
/* Infókártya: ikon + több választható hangulat. */
.nbp-info {
position: relative;
padding: 20px 22px 20px 58px;
box-shadow:
0 12px 30px rgba(0, 0, 0, .14),
inset 0 1px 0 rgba(255, 255, 255, .022);
}
.nbp-info-icon {
position: absolute;
top: 19px;
left: 20px;
display: grid;
width: 26px;
height: 26px;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: #d9b45b;
font-size: .76rem;
font-weight: 900;
opacity: .94;
}
.nbp-info[data-variant="tip"] .nbp-info-icon {
color: rgb(94, 195, 143);
}
.nbp-info[data-variant="warning"] .nbp-info-icon {
color: rgb(222, 123, 99);
}
.nbp-info[data-variant="lore"] .nbp-info-icon {
color: rgb(133, 153, 220);
}
.nbp-info[data-variant="fact"] {
border-color: rgba(191, 144, 227, .44);
background: rgba(191, 144, 227, .065);
}
.nbp-info[data-variant="fact"] .nbp-info-icon {
color: rgb(201, 158, 231);
}
/* Képaláírás: magazinos, visszafogott arany jel. */
.nbp-caption {
padding-left: 10px;
border-left: 2px solid rgba(217, 180, 91, .42);
}
/* Normál cikklinkek. */
.nbp-html a {
color: #dec06f;
text-decoration-color: rgba(222, 192, 111, .45);
text-underline-offset: 3px;
transition:
color .16s ease,
text-decoration-color .16s ease;
}
.nbp-html a:hover {
color: #f0d68d;
text-decoration-color: #d9b45b;
}
/* Sima képek: finom mozgás, glow nélkül. */
.nbp-image img {
transition:
transform .18s ease,
box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.nbp-image img:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
}
/* Olvasási folyamatjelző. */
.nbp-reading-progress {
position: fixed;
z-index: 10050;
top: 0;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
background: rgba(217, 180, 91, .08);
}
.nbp-reading-progress-bar {
display: block;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left center;
background: #d9b45b;
box-shadow: 0 0 9px rgba(217, 180, 91, .24);
will-change: transform;
}
@media (max-width: 720px) {
.nbp-block[data-type="highlight"] .nbp-html blockquote {
padding: 18px 18px;
border-radius: 12px;
}
.nbp-info {
padding: 18px 17px 18px 52px;
}
.nbp-info-icon {
top: 17px;
left: 16px;
width: 24px;
height: 24px;
}
.nbp-divider {
min-height: 36px;
margin: 4px 0;
}
}
/* NERDIUM_GRID_TEXT_V4 */
.nbp-grid-title { margin: 12px 0 6px; font-size: 1.05rem; line-height: 1.4; }
.nbp-grid-text { margin: 0 0 10px; line-height: 1.6; white-space: pre-line; }
/* NERDIUM_GRID_FRAME_V5 — mobile first */
.nbp-image-grid {
gap: 12px;
}
.nbp-image-grid > .nbp-gallery-item {
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid rgba(217, 180, 91, .34);
border-radius: 14px;
background: linear-gradient(160deg, #151b23, #0e1218);
box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.nbp-image-grid > .nbp-gallery-item > img {
display: block;
width: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none;
}
.nbp-image-grid > .nbp-gallery-item > .nbp-grid-title {
margin: 7px 7px 9px !important;
padding: 0;
text-align: center;
font-size: clamp(.9rem, 3.5vw, 1.05rem);
font-weight: 650;
line-height: 1.35;
overflow-wrap: anywhere;
color: #f3ead6;
}
.nbp-image-grid > .nbp-gallery-item > .nbp-grid-text {
margin: 0 10px 12px;
text-align: left;
}
.nbp-image-grid > .nbp-gallery-item > .nbp-caption {
margin: 0 10px 10px;
text-align: center;
}
@media (min-width: 721px) {
.nbp-image-grid { gap: 16px; }
.nbp-image-grid > .nbp-gallery-item > .nbp-grid-title {
margin: 8px 10px 11px !important;
}
}
/* NERDIUM_H3_V1 */
.ab2-block[data-type="heading3"] h3,
.nbp-block[data-type="heading3"] h3 {
font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
line-height: 1.4;
font-weight: 700;
color: #dfbd65;
margin: 0 0 .65em;
}