/*
Theme Name: ARTGRAM
Theme URI: https://example.com
Author: ARTGRAM
Description: Budapest kulturális magazin — próza, líra, kritika, film, fotó, sport és események. Kontribútorok cikket írhatnak, publikálás előtt szerkesztői jóváhagyással.
Version: 1.0
Requires PHP: 7.4
Text Domain: artgram
*/
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x lives on , not — setting only overflow-x on body makes the
browser auto-compute overflow-y:auto for it (CSS overflow pairing rule), turning body
into its own inner scroll container and breaking position:sticky / window-scroll based JS. */
html {
overflow-x: hidden;
/* Overscroll "bounce" bleed: the root background shows through when scrolling
past the top/bottom edge — green at the top (matches the header), dark grey
at the bottom (matches the footer). The gradient image only paints a band at
the very top; the base background-color shows everywhere else, including the
bottom bounce. */
background-color: #1a1a1a;
background-image: linear-gradient(180deg, #0b2f1d 0%, #1E4D30 45%, #2c6b46 100%);
background-repeat: no-repeat;
background-position: top;
background-size: 100% 260px;
}
body { background: #f5f0e8; }
/* Subtle green section backgrounds */
.ag-rovat-tinted { background: #f2f7f4; }
.ag-rovat-tinted2 { background: #edf4f0; }
/* ── DESIGN TOKENS ── */
#ag-root {
--bg: #f5f0e8;
--bg2: #ede8df;
--text: #1a1a1a;
--muted: #777;
--border: #e0deda;
--accent: #1E4D30;
--gold: #c4a45a;
--slate: #4a6570;
--burgundy: #7a2d2d;
--red: #e52020;
--serif: 'Playfair Display', Georgia, serif;
--sans: 'Inter', Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
transition: background 0.35s ease, color 0.35s ease;
min-height: 100vh;
}
/* ── DARK MODE ── */
#ag-root.dark-mode {
--bg: #0B131D;
--bg2: #161e2e;
--text: #e8eaf0;
--muted: #8899b0;
--border: #243048;
}
/* ── SIDE PANEL OVERLAY ── */
.ag-overlay {
position: fixed; top: 0; left: 0; bottom: 0;
width: 340px; z-index: 900;
background: linear-gradient(160deg, #0b2f1d 0%, #1E4D30 45%, #2c6b46 100%);
display: flex; flex-direction: column;
transform: translateX(-100%);
transition: transform 0.35s ease-in-out;
pointer-events: none;
box-shadow: 4px 0 32px rgba(0,0,0,0.5);
}
.ag-overlay.open { transform: translateX(0); pointer-events: all; }
/* dim backdrop */
.ag-overlay-backdrop {
position: fixed; inset: 0; z-index: 899;
background: rgba(0,0,0,0.55);
opacity: 0; pointer-events: none;
transition: opacity 0.35s ease-in-out;
}
.ag-overlay-backdrop.open { opacity: 1; pointer-events: all; }
/* dark mode toggle row */
.ag-panel-dm {
background: rgba(0,0,0,0.18);
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.ag-panel-dm-label {
font-family: var(--sans); font-size: 12px; font-weight: 500;
color: rgba(255,255,255,0.85); letter-spacing: 0.06em;
}
/* Toggle pill */
.ag-toggle {
width: 44px; height: 24px; border-radius: 12px;
background: rgba(0,0,0,0.25); border: none; cursor: pointer;
position: relative; flex-shrink: 0; transition: background 0.2s;
}
.ag-toggle.on { background: rgba(0,0,0,0.5); }
.ag-toggle::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: #fff; transition: left 0.2s;
}
.ag-toggle.on::after { left: 23px; }
/* HOME / CLOSE row */
.ag-panel-home {
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 2px solid rgba(0,0,0,0.2);
flex-shrink: 0;
}
.ag-panel-home a {
font-family: var(--sans); font-size: 13px; font-weight: 700;
color: #fff; text-decoration: none; letter-spacing: 0.1em;
text-transform: uppercase;
}
.ag-panel-close {
font-family: var(--sans); font-size: 12px; font-weight: 600;
color: rgba(255,255,255,0.7); background: none; border: none;
cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase;
display: flex; align-items: center; gap: 5px;
transition: color 0.15s;
}
.ag-panel-close:hover { color: #fff; }
/* Search bar */
.ag-panel-search {
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.ag-panel-search form {
display: flex; align-items: center;
background: #fff; border-radius: 3px; overflow: hidden;
}
.ag-panel-search input {
flex: 1; border: none; outline: none;
font-family: var(--sans); font-size: 13px; color: #1a1a1a;
padding: 10px 14px; background: transparent;
}
.ag-panel-search button {
background: none; border: none; cursor: pointer;
padding: 10px 14px; color: #444;
display: flex; align-items: center;
}
/* Topic list */
.ag-panel-links {
flex: 1; overflow-y: auto;
}
.ag-panel-links::-webkit-scrollbar { width: 4px; }
.ag-panel-links::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.ag-panel-links a {
display: block; text-align: center;
font-family: var(--sans); font-size: 15px; font-weight: 700;
color: #fff; letter-spacing: 0.12em; text-transform: uppercase;
padding: 14px 20px;
border-bottom: 2px solid rgba(0,0,0,0.18);
text-decoration: none; transition: background 0.12s, color 0.12s;
}
.ag-panel-links a:hover { background: rgba(0,0,0,0.18); color: #fff; }
.ag-panel-secondary {
flex-shrink: 0; padding: 10px 20px 16px;
background: rgba(0,0,0,0.14);
display: flex; flex-direction: column;
}
.ag-panel-secondary a {
display: block; text-align: left;
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: rgba(255,255,255,0.8);
padding: 9px 0;
text-decoration: none;
border-bottom: 1px dashed rgba(255,255,255,0.15);
transition: color 0.12s;
}
.ag-panel-secondary a:last-child { border-bottom: none; }
.ag-panel-secondary a:hover { color: #fff; }
/* ── HEADER / LOGO ── */
.ag-logo-bar {
background: linear-gradient(120deg, #0b2f1d 0%, #1E4D30 38%, #2c6b46 70%, #1a4a30 100%);
border-top: 5px solid #1E4D30;
border-bottom: 2px solid var(--accent);
padding: 10px 0 0;
text-align: center;
transition: background 0.35s, border-color 0.35s;
}
.ag-logo {
font-family: 'Yellowtail', cursive;
font-size: clamp(56px, 9vw, 128px);
font-weight: 400;
color: var(--gold);
line-height: 1;
display: inline-block;
max-width: 55%;
white-space: nowrap;
position: relative;
transition: color 0.35s;
animation: ag-logo-zoom-in 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ag-logo-zoom-in {
from { transform: scale(0.82); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#ag-root.dark-mode .ag-logo {
color: var(--gold);
}
#ag-root.dark-mode .ag-logo-sub { color: #f5f0e8; }
#ag-root.dark-mode .ag-logo-img-light { display: none !important; }
#ag-root.dark-mode .ag-logo-img-dark { display: block !important; }
#ag-root.dark-mode .ag-nav-logo a,
#ag-root.dark-mode .ag-nav-logo a span { color: #fff !important; }
.ag-logo-sub {
font-family: 'Inter', sans-serif; font-size: clamp(16px, 1.9vw, 22px); font-weight: 300;
color: var(--bg); letter-spacing: 0.3em; text-transform: uppercase;
margin-top: 10px; display: block; white-space: nowrap;
}
/* ── STICKY NAV ── */
#ag-nav {
background: linear-gradient(120deg, #0b2f1d 0%, #1E4D30 38%, #2c6b46 70%, #1a4a30 100%);
border-bottom: 2px solid rgba(196,164,90,0.4);
transition: background 0.3s, backdrop-filter 0.3s;
position: sticky; top: 0; z-index: 500;
transition: background 0.35s, border-color 0.35s, box-shadow 0.25s;
}
#ag-nav.stuck { box-shadow: 0 3px 18px rgba(0,0,0,0.25); border-top: 3px solid var(--accent); background: linear-gradient(120deg, #0b2f1d 0%, #1E4D30 38%, #2c6b46 70%, #1a4a30 100%); }
#ag-root.dark-mode #ag-nav.stuck { background: rgba(11,19,29,1); }
.ag-nav-inner {
max-width: 1340px; margin: 0 auto;
padding: 0 28px;
display: flex; align-items: stretch; height: 50px;
gap: 0;
}
/* Mini logo in nav — slides in when stuck */
.ag-nav-logo {
overflow: hidden;
max-width: 0;
opacity: 0;
flex-shrink: 0;
display: flex; align-items: center;
border-right: 0px solid var(--border);
transition: max-width 0.4s cubic-bezier(0.22,1,0.36,1),
opacity 0.35s ease,
border-right-width 0.4s ease,
padding 0.4s cubic-bezier(0.22,1,0.36,1);
padding: 0;
}
.ag-nav-logo img { height: 30px; width: auto; display: block; flex-shrink: 0; }
#ag-nav.stuck .ag-nav-logo {
max-width: 190px;
opacity: 1;
padding: 0 14px 0 0;
}
.ag-nav-cats { display: flex; align-items: stretch; flex: 1; overflow-x: auto; }
.ag-nav-cats::-webkit-scrollbar { display: none; }
.ag-nav-cats a {
font-family: 'Yaldevi', var(--sans); font-size: 14px; font-weight: 700;
color: var(--bg); letter-spacing: 0.05em; text-transform: uppercase;
padding: 0 16px; display: flex; align-items: center;
white-space: nowrap;
text-decoration: none;
transition: background 0.18s, color 0.18s;
}
.ag-nav-cats a:hover { background: var(--gold); color: #1a1a1a; border-radius: 6px; }
.ag-nav-cats a.active { background: var(--gold); color: #1a1a1a; border-radius: 6px; }
/* ── NAV DROPDOWNS ── */
.ag-nav-item { position: relative; display: flex; align-items: stretch; flex-shrink: 0; }
.ag-nav-item > a {
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
color: var(--text); letter-spacing: 0.05em;
padding: 0 16px; display: flex; align-items: center;
white-space: nowrap; border-right: 1px solid var(--border);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.ag-nav-item > a:hover { background: var(--text); color: var(--bg); }
.ag-nav-dropdown {
position: absolute; top: 100%; left: 0;
width: 320px; background: var(--bg);
border: 1.5px solid var(--text);
border-top: 3px solid var(--accent);
box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
opacity: 0; pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
z-index: 400;
}
.ag-nav-item:hover .ag-nav-dropdown {
opacity: 1; pointer-events: all; transform: translateY(0);
}
.ag-nav-dropdown-header {
font-family: var(--sans); font-size: 9px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent); padding: 10px 14px 8px;
border-bottom: 1px solid var(--border);
}
.ag-drop-article {
display: flex; gap: 12px; padding: 12px 14px;
border-bottom: 1px solid var(--border);
cursor: pointer; transition: background 0.12s;
align-items: flex-start;
}
.ag-drop-article:last-child { border-bottom: none; }
.ag-drop-article:hover { background: var(--bg2); }
.ag-drop-article:hover .ag-drop-img img { filter: brightness(0.88); }
.ag-drop-img {
width: 72px; height: 52px; flex-shrink: 0; overflow: hidden;
background: var(--bg2);
}
.ag-drop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-drop-text { flex: 1; min-width: 0; }
.ag-drop-cat {
font-family: var(--sans); font-size: 9px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); display: block; margin-bottom: 4px;
}
.ag-drop-title {
font-family: var(--serif); font-size: 13px; font-weight: 700;
color: var(--text); line-height: 1.25; text-wrap: pretty;
margin-bottom: 4px;
}
.ag-drop-date {
font-family: var(--sans); font-size: 10px; color: var(--muted);
}
.ag-nav-right {
display: flex; align-items: center; gap: 0;
}
.ag-nav-btn {
background: none; border: none; cursor: pointer;
font-family: 'Yaldevi', var(--sans); font-size: 11px; font-weight: 700;
color: var(--bg); letter-spacing: 0.1em; text-transform: uppercase;
padding: 0 18px; height: 100%;
display: flex; align-items: center; gap: 6px;
transition: background 0.15s, color 0.15s, border-radius 0.15s;
}
.ag-nav-btn:hover { background: var(--gold); color: #1a1a1a; border-radius: 6px; }
.ag-newsletter-btn { position: relative; overflow: hidden; border-radius: 6px; transition: transform 0.2s ease, background 0.2s, color 0.2s; }
.ag-newsletter-btn::after {
content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
background: #c4a45a; transition: width 0.3s ease;
}
.ag-newsletter-btn:hover::after { width: 100%; }
.ag-nav-btn.ag-newsletter-btn:hover { background: #1a4a30; color: var(--gold); border-radius: 6px; transform: scale(1.06); }
.ag-nav-btn:last-child { border-right: none; }
/* ── ARTICLE GRID ── */
.ag-container { max-width: 1340px; margin: 0 auto; padding: 0 28px; }
/* ── PULL QUOTE TABS ── */
@keyframes ptab-slide-left {
from { transform: translateY(-50%) translateX(-110%); opacity:0; }
to { transform: translateY(-50%) translateX(0); opacity:1; }
}
@keyframes ptab-slide-right {
from { transform: translateY(-50%) translateX(110%); opacity:0; }
to { transform: translateY(-50%) translateX(0); opacity:1; }
}
.ag-pull-tab {
position: fixed; z-index: 190; width: 210px;
background: transparent; color: #232323; cursor: pointer;
text-decoration: none; display: none;
filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.18));
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ag-root.dark-mode .ag-pull-tab {
color: #fff;
}
.ag-pull-tab-shape {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: -1;
}
.ag-pull-tab-shape path {
fill: rgba(196,164,90,0.18); stroke: #232323; stroke-width: 1.5px;
stroke-linejoin: round;
transition: stroke 0.15s;
}
#ag-root.dark-mode .ag-pull-tab-shape path { stroke: #fff; }
.ag-pull-tab.tab-left {
left: 0; padding: 12px 24px 12px 14px;
}
.ag-pull-tab.tab-right {
right: 0; padding: 12px 14px 12px 34px;
}
.ag-pull-tab.visible.tab-left { display:block; animation: ptab-slide-left 0.55s cubic-bezier(0.22,1,0.36,1) forwards; }
.ag-pull-tab.visible.tab-right { display:block; animation: ptab-slide-right 0.55s cubic-bezier(0.22,1,0.36,1) forwards; }
.ag-pull-tab:hover .ag-pull-tab-shape path { fill: rgba(0,0,0,0.06); }
#ag-root.dark-mode .ag-pull-tab:hover .ag-pull-tab-shape path { fill: rgba(255,255,255,0.08); }
.ag-pull-tab-quote { font-family: var(--serif); font-size: 12px; font-style: italic; line-height: 1.4; display: block; }
.ag-pull-tab-src { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; display: block; margin-top: 5px; }
/* ── PULL QUOTE TABS ── */
@keyframes tab-slide-left {
from { transform: translateX(-110%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes tab-slide-right {
from { transform: translateX(110%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.ag-rovat-wrap { position: relative; }
@keyframes ptab-slide-left {
from { transform: translateY(-50%) translateX(-110%); opacity:0; }
to { transform: translateY(-50%) translateX(0); opacity:1; }
}
@keyframes ptab-slide-right {
from { transform: translateY(-50%) translateX(110%); opacity:0; }
to { transform: translateY(-50%) translateX(0); opacity:1; }
}
.ag-pull-tab-quote {
font-family: var(--serif);
font-size: 12px;
font-style: italic;
line-height: 1.4;
display: block;
}
.ag-pull-tab-src {
font-family: var(--sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.7;
display: block;
margin-top: 5px;
}
/* TOP STRIP — date + issue info */
.ag-strip {
border-bottom: 1px solid var(--border);
padding: 12px 0;
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0;
}
.ag-strip-text { font-size: 11.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ag-strip-issue { font-size: 11.5px; font-weight: 600; color: var(--slate); letter-spacing: 0.06em; }
.ag-rovat-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 0;
margin-bottom: 0;
}
.ag-rovat-big {
padding: 12px 22px 22px 0;
position: relative;
cursor: pointer;
transition: background 0.15s;
}
.ag-rovat-big::after {
content: ''; position: absolute; top: 12px; bottom: 12px; right: 0; width: 1px;
background: repeating-linear-gradient(to bottom, #232323 0, #232323 2px, transparent 2px, transparent 5px);
}
.ag-rovat-big:hover { background: var(--bg2); }
.ag-rovat-big:hover .ag-article-img img { filter: brightness(0.88); transform: scale(1.03); }
.ag-rovat-side {
display: flex;
flex-direction: column;
}
.ag-rovat-small {
padding: 12px 0 12px 18px;
position: relative;
cursor: pointer;
transition: background 0.15s;
}
.ag-rovat-small:not(:last-child)::after {
content: ''; position: absolute; left: 14px; right: 0; bottom: 0; height: 1px;
background: repeating-linear-gradient(to right, #232323 0, #232323 2px, transparent 2px, transparent 5px);
}
.ag-rovat-small:last-child { border-bottom: none; }
/* ── VIDEO CARDS: unique play button + card lift + hover zoom ── */
.ag-vid-card {
cursor: pointer; position: relative; z-index: 1;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ag-vid-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(0,0,0,0.35);
z-index: 2;
}
.ag-vid-card:hover .ag-vid-overlay { background: rgba(11,47,29,0.6); }
.ag-vid-card:hover .ag-vid-thumb { transform: scale(1.06); }
.ag-vid-play {
position: relative;
width: 58px; height: 58px; border-radius: 50%;
background: #c4a45a;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 16px rgba(0,0,0,0.35);
transition: transform 0.25s ease, background 0.2s ease;
}
.ag-vid-card:hover .ag-vid-play { background: #d6b876; }
.ag-vid-play::before, .ag-vid-play::after { display:none; }
/* Fotó & Látvány — 2x2 grid, image-led */
.ag-rovat-quad {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin-bottom: 0;
}
.ag-rovat-quad-item {
padding: 0 20px 26px 0;
border-right: 1px solid #e0deda;
border-bottom: 1px solid #e0deda;
transition: background 0.15s;
}
.ag-rovat-quad-item:nth-child(2n) { border-right: none; padding-right: 0; padding-left: 20px; }
.ag-rovat-quad-item:nth-child(n+3) { border-bottom: none; padding-top: 22px; }
.ag-rovat-quad-item:hover { background: var(--bg2); }
.ag-rovat-quad-item:hover .ag-article-img img { filter: brightness(0.9); transform: scale(1.03); }
.ag-rovat-quad-item .ag-article-img {
aspect-ratio: 16/10; margin: 0 0 14px !important;
}
.ag-rovat-quad-item .ag-cat-label { display: block; margin-bottom: 8px; }
.ag-rovat-small:hover { background: var(--bg2); }
.ag-rovat-small:hover .ag-article-img img { filter: brightness(0.88); transform: scale(1.03); }
/* HERO GRID */
.ag-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0;
border-bottom: 2px solid var(--text);
}
/* Hero article */
.ag-hero {
grid-column: 1 / 9;
border-right: 1px dotted var(--border);
padding: 32px 32px 32px 0;
cursor: pointer;
}
.ag-hero:hover .ag-article-img img { filter: brightness(0.92); }
/* Sidebar stack */
.ag-sidebar {
grid-column: 9 / 13;
display: flex; flex-direction: column;
}
.ag-sidebar-item {
padding: 24px;
border-bottom: 1px dotted var(--border);
cursor: pointer;
transition: background 0.15s;
flex: 1;
}
.ag-sidebar-item:hover { background: var(--bg2); }
.ag-sidebar-item:last-child { border-bottom: none; }
/* LEGÚJABB LIST */
.ag-latest-wrap {
background: #f5f0e8; padding: 0 0 56px;
max-width: 1340px; margin: 0 auto;
padding-left: 28px; padding-right: 28px;
}
.ag-latest-list {
max-width: 1340px; margin: 0 auto; padding: 0 28px;
}
.ag-latest-item {
display: flex; align-items: baseline; gap: 18px;
padding: 16px 0; border-bottom: 1px dashed rgba(35,35,35,0.28);
cursor: pointer; transition: background 0.12s;
}
.ag-latest-item:last-child { border-bottom: none; }
.ag-latest-item:hover .ag-latest-title { text-decoration-color: var(--accent); }
.ag-latest-cat {
font-family: var(--sans); font-size: 10px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent); flex-shrink: 0; width: 150px;
font-family: 'Martel', serif; letter-spacing: 0.24em;
}
.ag-latest-title {
font-family: 'Abril Fatface', serif; font-size: 17px; font-weight: 400;
color: var(--text); line-height: 1.3; flex: 1;
text-decoration: underline; text-decoration-color: transparent;
text-underline-offset: 3px; transition: text-decoration-color 0.2s;
}
.ag-latest-item:hover .ag-latest-title { text-decoration-color: var(--accent); }
.ag-latest-date {
font-family: var(--sans); font-size: 11px; color: var(--muted);
flex-shrink: 0; white-space: nowrap;
}
/* SECONDARY GRID */
.ag-secondary-grid {
display: grid;
grid-template-columns: 5fr 4fr 3fr;
gap: 0;
border-bottom: 2px solid var(--text);
}
.ag-sec-col {
border-right: 1px dotted var(--border);
padding: 28px;
cursor: pointer;
transition: background 0.15s;
}
.ag-sec-col:last-child { border-right: none; }
.ag-sec-col:hover { background: var(--bg2); }
.ag-sec-col:hover .ag-article-img img { filter: brightness(0.92); }
/* WIDE GRID — 4 cols -->
.ag-wide-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-bottom: 2px solid var(--text);
}
.ag-wide-col {
border-right: 1px dotted var(--border);
padding: 28px;
cursor: pointer;
transition: background 0.15s;
}
.ag-wide-col:last-child { border-right: none; }
.ag-wide-col:hover { background: var(--bg2); }
/* ── TYPOGRAPHY ── */
.ag-cat-label {
font-family: 'Martel', serif; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.28em; text-transform: uppercase; color: #000;
color: var(--slate); display: block; margin-bottom: 12px;
}
/* Hide category labels inside article cards */
.ag-rovat-big .ag-cat-label,
.ag-rovat-small .ag-cat-label,
.ag-wide-col .ag-cat-label,
.ag-sec-col .ag-cat-label,
.ag-hero .ag-cat-label,
.ag-sidebar-item .ag-cat-label { display: none; }
.ag-headline-xl {
font-family: 'Abril Fatface', serif; font-weight: 400; transform: scaleY(1.18); transform-origin: bottom left; display: inline-block; -webkit-text-stroke: 0px currentColor;
-webkit-text-stroke: 0.4px currentColor;
font-size: clamp(36px, 4vw, 58px);
font-weight: 800; line-height: 1.04;
color: var(--text); margin-bottom: 18px;
text-wrap: pretty; letter-spacing: -0.01em;
}
.ag-headline-lg {
font-family: 'Abril Fatface', serif; font-weight: 400; transform: scaleY(1.18); transform-origin: bottom left; display: inline-block; -webkit-text-stroke: 0px currentColor;
-webkit-text-stroke: 0.4px currentColor;
font-size: clamp(18px, 2vw, 26px);
font-weight: 700; line-height: 1.15;
color: var(--text); margin-bottom: 10px;
text-wrap: pretty;
}
.ag-headline-md {
font-family: 'Abril Fatface', serif; font-weight: 400; transform: scaleY(1.18); transform-origin: bottom left; display: inline-block; -webkit-text-stroke: 0px currentColor; -webkit-text-stroke: 0.4px currentColor; font-size: clamp(16px, 1.4vw, 22px); line-height: 1.05;
color: var(--text); margin-bottom: 8px;
text-wrap: pretty;
}
.ag-headline-sm {
font-family: var(--serif);
font-size: 16px; font-weight: 700; line-height: 1.3;
color: var(--text); margin-bottom: 8px; text-wrap: pretty;
}
/* Underline fades in all at once on card hover */
.ag-headline-xl, .ag-headline-lg, .ag-headline-md, .ag-headline-sm {
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: text-decoration-color 0.25s ease;
}
.ag-rovat-big:hover .ag-headline-lg,
.ag-rovat-small:hover .ag-headline-md,
.ag-rovat-small:hover .ag-headline-sm,
.ag-rovat-quad-item:hover .ag-headline-md,
.ag-sec-col:hover .ag-headline-lg,
.ag-sec-col:hover .ag-headline-md,
.ag-wide-col:hover .ag-headline-sm,
.ag-sidebar-item:hover .ag-headline-md,
.ag-hero:hover .ag-headline-xl,
.ag-prz-card:hover .ag-headline-md {
text-decoration-color: var(--accent);
}
.ag-excerpt { font-family: 'Martel', serif; font-weight: 700; color: #000; font-size: 16px;
font-style: normal; line-height: 1.35;
margin-top: 4px; margin-bottom: 16px; text-wrap: pretty;
}
.ag-excerpt-sm { font-family: 'Abril Fatface', serif; font-weight: 400; transform: scaleY(1.18); transform-origin: bottom left; display: inline-block; -webkit-text-stroke: 0px currentColor; font-size: 15px;
color: var(--muted); line-height: 1.25; letter-spacing: 0.02em;
margin-top: 8px; margin-bottom: 14px; text-wrap: pretty;
}
.ag-byline {
font-family: var(--sans); font-size: 12px;
color: var(--muted); letter-spacing: 0.09em;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ag-byline strong { color: var(--text); font-weight: 600; }
.ag-byline-dot { color: var(--gold); font-weight: 700; }
/* ── IMAGES ── */
.ag-article-img {
overflow: hidden; margin-bottom: 20px;
background: var(--bg2);
}
.ag-article-img img {
width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover;
transition: filter 0.28s ease, transform 0.35s ease;
opacity: 0;
transform: scale(1);
}
.ag-article-img img.loaded { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Image reacts when TITLE is hovered */
.ag-hero:has(.ag-headline-xl:hover) .ag-article-img img,
.ag-sec-col:has(.ag-headline-lg:hover) .ag-article-img img,
.ag-sec-col:has(.ag-headline-md:hover) .ag-article-img img,
.ag-sidebar-item:has(.ag-headline-md:hover) .ag-article-img img,
.ag-wide-col:has(.ag-headline-sm:hover) .ag-article-img img {
filter: brightness(0.82);
transform: scale(1.04);
}
/* ── DIVIDER / SECTION LABEL ── */
.ag-section-label {
border-top: 3px solid #232323;
border-bottom: 1px solid #232323;
padding: 10px 0 8px 0;
margin-top: 36px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ag-all-link {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: #232323; border: 1px solid #232323;
font-family: var(--sans); font-size: 13px; font-weight: 700;
letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none;
padding: 9px 16px; flex-shrink: 0;
border-radius: 6px;
transition: background 0.18s, color 0.18s;
}
.ag-all-link:hover { background: #232323; color: var(--bg); }
#ag-root.dark-mode .ag-all-link { background: transparent; color: #fff; border-color: #fff; }
#ag-root.dark-mode .ag-all-link:hover { background: #fff; color: #0B131D; }
.ag-section-label span {
font-family:'Yaldevi',sans-serif; font-size: 32px; font-weight: 700;
letter-spacing: 0.01em; text-transform: uppercase; color: #1a1a1a;
transition: color 0.35s;
}
#ag-root.dark-mode .ag-section-label span { color: #fff; }
#ag-root.dark-mode .ag-section-label { border-color: #fff; }
#ag-root.dark-mode .ag-rovat-quad-item { border-color: #fff; }
#ag-root.dark-mode .ag-rovat-big::after { background: repeating-linear-gradient(to bottom, #fff 0, #fff 3px, transparent 3px, transparent 7px); }
#ag-root.dark-mode .ag-rovat-small::after { background: repeating-linear-gradient(to bottom, #fff 0, #fff 3px, transparent 3px, transparent 7px); }
/* ── PULLQUOTE ── */
.ag-pullquote-strip {
background: #2c6b46; color: #fff;
padding: 48px 32px; text-align: center;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
border-left: 8px solid var(--gold);
}
.ag-pullquote-strip blockquote {
font-family: var(--serif);
font-size: clamp(24px, 3vw, 42px);
font-weight: 800; font-style: italic;
line-height: 1.15; letter-spacing: -0.01em;
max-width: 780px; margin: 0 auto 16px;
color: #fff;
}
.ag-pullquote-strip cite {
font-family: var(--sans); font-size: 12px;
font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
opacity: 0.55; font-style: normal; color: #fff;
}
/* ── NEXT ARTICLE ── */
.ag-next-article {
border-top: 2px solid var(--text);
cursor: pointer; overflow: hidden; position: relative;
min-height: 320px; display: flex; align-items: flex-end;
background: #0a0a0a;
}
.ag-next-article .ag-next-img {
position: absolute; inset: 0;
}
.ag-next-article .ag-next-img img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.35);
transition: filter 0.4s ease;
}
.ag-next-article:hover .ag-next-img img { filter: brightness(0.55); }
.ag-next-content {
position: relative; z-index: 2;
padding: 48px 40px; width: 100%;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px;
}
.ag-next-label {
font-family: var(--sans); font-size: 10.5px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--accent); display: block; margin-bottom: 10px;
}
.ag-next-headline {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 52px);
font-weight: 800; color: #fff; line-height: 1.05;
letter-spacing: -0.01em; max-width: 720px; text-wrap: pretty;
}
.ag-next-arrow {
font-size: 36px; color: #fff; flex-shrink: 0;
transition: transform 0.2s ease;
}
.ag-next-article:hover .ag-next-arrow { transform: translateX(8px); }
/* ── FOOTER ── */
.ag-footer {
background: #1a1a1a; color: #f5f0e8;
padding: 30px 28px 24px;
border-top: 4px solid #c4a45a;
}
.ag-footer-inner {
max-width: 1340px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 20px;
}
.ag-footer-logo {
font-family: 'Anton', sans-serif; font-size: 46px; font-weight: 400;
text-transform: uppercase; letter-spacing: 0.04em;
color: transparent; -webkit-text-stroke-width: 1.2px; -webkit-text-stroke-color: #f5f0e8;
line-height: 0.9;
}
.ag-footer-tagline {
font-family: 'Inter', Helvetica, sans-serif; font-size: 10px; font-weight: 400;
color: rgba(255,255,255,0.4); letter-spacing: 0.18em; text-transform: uppercase;
margin-top: 8px;
}
.ag-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.ag-footer-links a {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: rgba(255,255,255,0.5);
text-decoration: none; transition: color 0.15s; padding: 0 14px;
border-right: 1px solid rgba(255,255,255,0.15);
}
.ag-footer-links a:last-child { border-right: none; padding-right: 0; }
.ag-footer-links a:first-child { padding-left: 0; }
.ag-footer-links a:hover { color: #c4a45a; }
.ag-footer-copy { font-size: 11.5px; color: rgba(255,255,255,0.3); }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.ag-hero-grid { grid-template-columns: 1fr; }
.ag-hero { grid-column: 1 / -1; border-right: none; border-bottom: 1px dotted var(--border); padding: 24px 0; }
.ag-sidebar { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.ag-sidebar-item { flex: 1 1 240px; border-right: 1px dotted var(--border); }
.ag-secondary-grid { grid-template-columns: 1fr; }
.ag-wide-grid { grid-template-columns: 1fr 1fr; }
.ag-sec-col, .ag-wide-col { border-right: none; border-bottom: 1px dotted var(--border); }
}
@media (max-width: 600px) {
.ag-wide-grid { grid-template-columns: 1fr; }
.ag-nav-cats a { padding: 0 10px; font-size: 11px; }
}
/* ── ADAPTIVE / MOBILE ── */
@media (max-width: 1100px) {
.ag-container, .ag-nav-inner, .ag-footer-inner, .ag-footer > div { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 900px) {
.ag-rovat-grid { grid-template-columns: 1fr; }
.ag-rovat-big { border-right: none; border-bottom: 1px solid #e0deda; padding: 18px 0 22px; }
.ag-rovat-side { padding-top: 4px; }
.ag-rovat-small { padding-left: 0; }
.ag-rovat-quad { grid-template-columns: 1fr; }
.ag-rovat-quad-item:nth-child(2n) { border-right: none; padding-left: 0; }
.ag-rovat-quad-item { border-right: none; padding-right: 0; }
.ag-rovat-quad-item:nth-child(n+3) { padding-top: 0; }
.ag-vid-grid { grid-template-columns: 1fr 1fr; }
.ag-vid-grid > div:nth-child(2n) { border-right: none; }
.ag-footer-inner { flex-direction: column; align-items: flex-start; }
.ag-footer-info-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 700px) {
.ag-nav-inner { flex-wrap: wrap; height: auto; padding: 8px 16px; }
.ag-nav-logo { display: none; }
.ag-nav-right { border-left: none; margin-left: auto; }
.ag-vid-grid { grid-template-columns: 1fr; }
.ag-vid-grid > div { border-right: none !important; }
.ag-overlay { width: 86vw; max-width: 340px; }
.ag-pull-tab { display: none !important; }
.ag-footer-info-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
.ag-container, .ag-nav-inner { padding-left: 16px; padding-right: 16px; }
.ag-logo-sub { white-space: normal; letter-spacing: 0.12em; }
}
@keyframes ag-bounce-back {
0% { transform: translateY(0); }
35% { transform: translateY(22px); }
60% { transform: translateY(8px); }
78% { transform: translateY(16px); }
90% { transform: translateY(4px); }
100% { transform: translateY(-100%); }
}
.ag-pull-bounce { animation: ag-bounce-back 0.75s cubic-bezier(0.25,0.46,0.45,0.94) forwards !important; }
/* ── PULL TAB HIDE ANIMATIONS ── */
@keyframes ptab-hide-left {
from { transform: translateY(-50%) translateX(0); opacity: 1; }
to { transform: translateY(-50%) translateX(-115%); opacity: 0; }
}
@keyframes ptab-hide-right {
from { transform: translateY(-50%) translateX(0); opacity: 1; }
to { transform: translateY(-50%) translateX(115%); opacity: 0; }
}
.ag-pull-tab.hiding.tab-left { display: block !important; animation: ptab-hide-left 0.4s cubic-bezier(0.55,0,1,0.45) forwards !important; }
.ag-pull-tab.hiding.tab-right { display: block !important; animation: ptab-hide-right 0.4s cubic-bezier(0.55,0,1,0.45) forwards !important; }
@media (max-width: 1200px) { .ag-footer-info-grid { transform: none !important; } }
#ag-root.dark-mode .ag-latest-wrap { background: #0B131D; }
#ag-root.dark-mode .ag-latest-item { border-bottom-color: rgba(255,255,255,0.25); }
/* Legújabb sits outside #ag-root — target via :has */
body:has(#ag-root.dark-mode) .ag-latest-wrap { background: #0B131D !important; }
body:has(#ag-root.dark-mode) .ag-latest-item { border-bottom-color: rgba(255,255,255,0.25) !important; }
body:has(#ag-root.dark-mode) .ag-latest-title,
body:has(#ag-root.dark-mode) .ag-latest-cat,
body:has(#ag-root.dark-mode) .ag-latest-date { color: #f5f0e8 !important; }
#ag-root.dark-mode .ag-nav-cats a,
#ag-root.dark-mode .ag-nav-btn { color: #f5f0e8 !important; }
#ag-root.dark-mode .ag-nav-cats a:hover,
#ag-root.dark-mode .ag-nav-btn:hover { color: #1a1a1a !important; }
#ag-root.dark-mode .ag-excerpt,
#ag-root.dark-mode .ag-excerpt-sm { color: #f5f0e8 !important; }
.ag-latest-title { font-family: 'Yaldevi', sans-serif !important; font-weight: 700; }
.ag-latest-label { background: #f5f0e8; }
.ag-latest-label span { color: #000; }
body:has(#ag-root.dark-mode) .ag-latest-label { background: #0B131D !important; border-color: #f5f0e8 !important; }
body:has(#ag-root.dark-mode) .ag-latest-label span { color: #f5f0e8 !important; }
.ag-headline-xl, .ag-headline-lg, .ag-headline-md, .ag-headline-sm,
[class*="headline"], h1, h2, h3 {
letter-spacing: 0.02em;
word-spacing: 0.12em;
}
/* HÍRLEVÉL gomb — hover shine */
.ag-newsletter-btn::before {
content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent);
transform: skewX(-18deg); transition: left 0.55s ease; pointer-events: none;
}
.ag-newsletter-btn:hover::before { left: 130%; }
/* ── ARTICLE PAGE (Cikk-Sablon) extras — light/dark logo toggle + card hovers ── */
.ag-logo-light { display: block; }
.ag-logo-dark { display: none; }
#ag-root.dark-mode .ag-logo-light { display: none !important; }
#ag-root.dark-mode .ag-logo-dark { display: block !important; }
.ck-nav a { transition: background 0.15s, color 0.15s; }
.ck-nav a:hover { background: #c4a45a; color: #232323; border-radius: 6px; }
.ck-rel:hover img { filter: brightness(0.9); transform: scale(1.04); }
.ck-rel img { transition: filter 0.3s, transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.ck-rel h3 { transition: color 0.2s; display: inline; background-image: linear-gradient(#1E4D30,#1E4D30); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.08s ease, color 0.08s; padding-bottom: 3px; }
.ck-rel:hover h3 { color: #1E4D30; background-size: 100% 2px; }
.ck-rel-grid > a, .ck-most-grid > a { position: relative; padding-right: 24px; }
.ck-rel-grid > a:not(:last-child)::after, .ck-most-grid > a:not(:last-child)::after {
content: ''; position: absolute; top: 6px; bottom: 6px; right: -12px; width: 1px;
background: repeating-linear-gradient(to bottom, #232323 0, #232323 2px, transparent 2px, transparent 5px);
}
#ag-root.dark-mode .ck-rel-grid > a:not(:last-child)::after,
#ag-root.dark-mode .ck-most-grid > a:not(:last-child)::after {
background: repeating-linear-gradient(to bottom, #fff 0, #fff 2px, transparent 2px, transparent 5px);
}
.ck-sub-btn:hover { background: #1E4D30 !important; color: #EAC54F !important; }
.ck-share:hover { background: #1E4D30; color: #f5f0e8; }
.ck-tag:hover { background: #1E4D30; color: #f5f0e8 !important; }
.ck-most a:hover .ck-most-t { color: #1E4D30; }
@media (max-width: 900px) {
.ck-rel-grid { grid-template-columns: 1fr !important; }
.ck-most-grid { grid-template-columns: 1fr !important; }
.ck-infobox { grid-template-columns: 1fr !important; }
.ck-quote { grid-template-columns: 1fr !important; }
}
/* ── WP-specific additions: article body (Gutenberg output), forms, dashboard, editor ── */
.ck-body h2 { font-family: 'Martel', serif; font-weight: 900; font-size: clamp(21px,2.2vw,27px); line-height: 1.35; color: #232323; margin-top: 18px; margin-bottom: 6px; }
.ck-body h3 { font-family: 'Abril Fatface', serif; font-size: 21px; color: #232323; margin-top: 28px; margin-bottom: 10px; }
.ck-body p { font-family: 'Martel', serif; font-weight: 700; font-size: 18.5px; line-height: 1.75; color: #333; margin-bottom: 20px; }
.ck-body blockquote { background: #c4a45a; border-radius: 10px; padding: 32px; margin: 30px 0; }
.ck-body blockquote p { font-family: 'Abril Fatface', serif; font-weight: 400; font-size: clamp(22px,2.5vw,32px); line-height: 1.28; color: #232323; margin-bottom: 0; }
.ck-body figure { margin: 24px 0; }
.ck-body figure img { width: 100%; height: auto; display: block; }
.ck-body figcaption { font-family: 'Inter', sans-serif; font-size: 12px; color: #777; padding-top: 8px; letter-spacing: 0.03em; }
.ck-body ul, .ck-body ol { font-family: 'Martel', serif; font-size: 18.5px; line-height: 1.75; color: #333; margin: 0 0 20px 22px; }
#ag-root.dark-mode .ck-body p, #ag-root.dark-mode .ck-body h2, #ag-root.dark-mode .ck-body li { color: #e8eaf0; }
.ag-form { max-width: 440px; margin: 60px auto; padding: 0 28px; }
.ag-form-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 36px; }
.ag-form h1 { font-family: 'Abril Fatface', serif; font-size: 30px; margin-bottom: 6px; }
.ag-form p.ag-form-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.ag-field { margin-bottom: 16px; }
.ag-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ag-field input[type="text"], .ag-field input[type="email"], .ag-field input[type="password"],
.ag-field input[type="file"], .ag-field select, .ag-field textarea {
width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--text);
padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
outline: none; transition: border-color 0.15s;
}
.ag-field input:focus, .ag-field select:focus, .ag-field textarea:focus { border-color: var(--accent); }
.ag-field textarea { resize: vertical; min-height: 90px; font-family: 'Martel', serif; line-height: 1.6; }
.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Yaldevi', var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: 6px; padding: 13px 26px; cursor: pointer; transition: background 0.18s, color 0.18s; text-decoration: none; }
.ag-btn-primary { background: var(--accent); color: #f5f0e8; }
.ag-btn-primary:hover { background: #163d25; }
.ag-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.ag-btn-ghost:hover { background: var(--bg2); }
.ag-btn-danger { background: transparent; color: var(--burgundy); border: 1px solid var(--burgundy); }
.ag-btn-danger:hover { background: var(--burgundy); color: #fff; }
.ag-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ag-error { color: var(--red); font-size: 13px; margin-top: 10px; }
.ag-success { color: var(--accent); font-size: 13px; margin-top: 10px; }
.ag-form-link { font-size: 13px; color: var(--muted); margin-top: 20px; text-align: center; }
.ag-notice { max-width: 900px; margin: 20px auto 0; padding: 0 28px; }
.ag-notice-inner { background: rgba(196,164,90,0.18); border: 1px solid var(--gold); border-radius: 8px; padding: 14px 18px; font-size: 13.5px; }
.ag-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.ag-badge-draft { background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.ag-badge-pending { background: rgba(196,164,90,0.2); color: #8a6d1f; }
#ag-root.dark-mode .ag-badge-pending { color: var(--gold); }
.ag-badge-publish { background: rgba(30,77,48,0.15); color: var(--accent); }
#ag-root.dark-mode .ag-badge-publish { color: #6fae82; }
.ag-page-head { max-width: 1100px; margin: 0 auto; padding: 44px 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ag-page-head h1 { font-family: 'Abril Fatface', serif; font-size: 34px; }
.ag-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.ag-search-hero { max-width: 700px; margin: 0 auto; padding: 60px 28px 30px; text-align: center; }
.ag-search-hero h1 { font-family: 'Abril Fatface', serif; font-size: 34px; margin-bottom: 20px; }
.ag-search-hero form { display: flex; gap: 10px; }
.ag-search-hero input { flex: 1; font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.ag-list-wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px 60px; }
.ag-list-row { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ag-list-thumb { width: 84px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--bg2); flex-shrink: 0; }
.ag-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-list-main { flex: 1; min-width: 200px; }
.ag-list-title { font-family: 'Abril Fatface', serif; font-size: 17px; margin-bottom: 4px; }
.ag-list-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-list-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ag-editor-wrap { max-width: 900px; margin: 0 auto; padding: 40px 28px 80px; }
.ag-block-card { border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 14px; background: var(--bg2); }
.ag-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.ag-block-type { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ag-block-actions { display: flex; gap: 6px; }
.ag-icon-btn { background: none; border: 1px solid var(--border); border-radius: 5px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: background 0.15s, color 0.15s; font-family: var(--sans); }
.ag-icon-btn:hover { background: var(--border); color: var(--text); }
.ag-add-block-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 34px; }
.ag-block-thumb { max-width: 200px; display: block; border-radius: 4px; margin-top: 8px; }
/* ── DARK MODE TOGGLE ICON (sun/moon swap) ── */
.ag-dm-icon-sun { display: none; }
.ag-dm-icon-moon { display: block; }
#ag-root.dark-mode .ag-dm-icon-sun { display: block; }
#ag-root.dark-mode .ag-dm-icon-moon { display: none; }
#ag-dm-toggle-nav { gap: 6px; }
.ag-dm-label-dark { display: none; }
#ag-root.dark-mode .ag-dm-label-light { display: none; }
#ag-root.dark-mode .ag-dm-label-dark { display: inline; }
/* ── LIGHT (cream, dark-mode-toggling) HEADER — used on every page except
the front page, matching Cikk-Sablon.dc.html / Proza.dc.html etc. ── */
.ag-logo-bar-light { background: #f5f0e8; border-top: 4px solid #1E4D30; border-bottom: 2px solid #1E4D30; padding: 6px 0 8px; }
#ag-root.dark-mode .ag-logo-bar-light { background: #0B131D !important; border-top-color: #1E4D30; border-bottom-color: #1E4D30; }
#ag-nav.ag-nav-light { background: #f5f0e8; border-bottom: 2px solid #1a1a1a; }
#ag-root.dark-mode #ag-nav.ag-nav-light { background: #0B131D !important; border-bottom-color: #f5f0e8; }
#ag-nav.ag-nav-light.stuck { border-top: 3px solid #1E4D30; }
#ag-nav.ag-nav-light .ag-nav-logo { border-right: 0 solid var(--border); }
#ag-nav.ag-nav-light.stuck .ag-nav-logo { border-right-width: 1px; max-width: 270px; }
#ag-nav.ag-nav-light #ag-nav-hint { background: linear-gradient(to right,transparent,#f5f0e8 60%); }
#ag-nav.ag-nav-light #ag-nav-hint svg { stroke: #1a1a1a; }
#ag-root.dark-mode #ag-nav.ag-nav-light #ag-nav-hint { background: linear-gradient(to right,transparent,#0B131D 60%) !important; }
#ag-root.dark-mode #ag-nav.ag-nav-light #ag-nav-hint svg { stroke: #f5f0e8; }
#ag-nav.ag-nav-light .ag-nav-cats a { color: #1a1a1a; border-right: 1px solid var(--border); }
#ag-nav.ag-nav-light .ag-nav-cats a:hover,
#ag-nav.ag-nav-light .ag-nav-cats a.active { background: #c4a45a; color: #1a1a1a; }
#ag-root.dark-mode #ag-nav.ag-nav-light .ag-nav-cats a { color: #f5f0e8; }
#ag-nav.ag-nav-light .ag-nav-right { border-left: 1px solid var(--border); }
#ag-nav.ag-nav-light .ag-nav-btn { color: #1a1a1a; border-right: 1px solid var(--border); }
#ag-nav.ag-nav-light .ag-nav-btn:hover { background: #c4a45a; color: #1a1a1a; }
#ag-root.dark-mode #ag-nav.ag-nav-light .ag-nav-btn { color: #f5f0e8; }
#ag-nav.ag-nav-light .ag-nav-btn.ag-newsletter-btn { background: #c4a45a; color: #1a1a1a; border-color: #c4a45a; }
#ag-nav.ag-nav-light .ag-nav-btn.ag-newsletter-btn:hover { background: #1a4a30; color: #c4a45a; transform: scale(1.06); }
/* ── ROVAT (CATEGORY) LISTING PAGES — ag-prz-grid, matches Proza/Filmek/Foto/Sport/Esemenyek.dc.html ── */
.ag-view-toggle { display:flex; align-items:center; gap:8px; }
.ag-view-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #1a1a1a; cursor:pointer; transition:background 0.15s, color 0.15s; color:#1a1a1a; }
.ag-view-btn.active { background:#1a1a1a; color:#fff; }
#ag-root.dark-mode .ag-view-btn { background:#0f1520; border-color:#fff; color:#fff; }
#ag-root.dark-mode .ag-view-btn.active { background:#fff; color:#0f1520; }
.ag-prz-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border-top:1px solid #000; margin-top:0; transition:border-color 0.35s; }
#ag-root.dark-mode .ag-prz-grid { border-top-color:#fff; }
.ag-prz-card { padding:26px 24px 26px 0; cursor:pointer; transition:background 0.15s; position:relative; border-bottom:1px solid #000; text-decoration:none; color:inherit; display:block; }
#ag-root.dark-mode .ag-prz-card { border-bottom-color:#fff; }
.ag-prz-card::before { content:''; position:absolute; top:26px; bottom:26px; right:0; width:1px; background:#000; }
#ag-root.dark-mode .ag-prz-card::before { background:#fff; }
.ag-prz-card:hover { background:var(--bg2); }
.ag-prz-card:hover .ag-article-img img { filter:brightness(0.9); transform:scale(1.03); }
.ag-prz-card:nth-child(3n)::before { display:none; }
.ag-prz-card:nth-child(3n) { padding-right:0; }
.ag-prz-card:nth-child(3n+2), .ag-prz-card:nth-child(3n) { padding-left:24px; }
.ag-prz-card:nth-last-child(-n+3) { border-bottom:none; }
.ag-prz-card .ag-cat-label { color:#000; }
#ag-root.dark-mode .ag-prz-card .ag-cat-label { color:#f5f0e8; }
.ag-prz-card .ag-article-img { aspect-ratio:4/3; }
.ag-prz-card .ag-headline-md { font-size:clamp(18px, 1.6vw, 24px); }
.ag-prz-card .ag-excerpt-sm { font-family:'Martel',serif; font-weight:700; font-size:15px; color:var(--muted); line-height:1.25; letter-spacing:0.02em; margin-bottom:14px; text-wrap:pretty; }
#ag-root.dark-mode .ag-prz-card .ag-excerpt-sm { color:#f5f0e8 !important; }
.ag-prz-date { display:none; }
.ag-prz-grid.is-list { display:flex; flex-direction:column; gap:0; }
.ag-prz-grid.is-list .ag-prz-card { display:grid; grid-template-columns:100px 1fr auto; grid-template-rows:auto auto; column-gap:20px; align-items:start; padding:14px 0; border-bottom:1px solid #e0deda; }
#ag-root.dark-mode .ag-prz-grid.is-list .ag-prz-card { border-color:rgba(255,255,255,0.15); }
.ag-prz-grid.is-list .ag-prz-card .ag-article-img { grid-column:1; grid-row:1/3; aspect-ratio:3/2; margin:0; }
.ag-prz-grid.is-list .ag-prz-card .ag-headline-md { grid-column:2; grid-row:1; margin-bottom:2px; }
.ag-prz-grid.is-list .ag-prz-card .ag-excerpt-sm { grid-column:2; grid-row:2; margin-top:0; }
.ag-prz-grid.is-list .ag-prz-card .ag-prz-date { display:block; grid-column:3; grid-row:1; font-family:var(--sans); font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; align-self:start; }
.ag-prz-grid.is-list .ag-prz-card::before { display:none; }
/* dashed separators (matches homepage rovat dividers) */
.ag-prz-grid { border-top:none !important; }
.ag-prz-card { border-bottom:none !important; }
.ag-prz-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:repeating-linear-gradient(to right, #232323 0, #232323 2px, transparent 2px, transparent 5px); }
.ag-prz-card::before { background:repeating-linear-gradient(to bottom, #232323 0, #232323 2px, transparent 2px, transparent 5px) !important; }
#ag-root.dark-mode .ag-prz-card::after { background:repeating-linear-gradient(to right,#f5f0e8 0,#f5f0e8 2px,transparent 2px,transparent 5px); }
#ag-root.dark-mode .ag-prz-card::before { background:repeating-linear-gradient(to bottom,#f5f0e8 0,#f5f0e8 2px,transparent 2px,transparent 5px) !important; }
.ag-prz-card:nth-last-child(-n+3)::after { display:none; }
.ag-prz-grid.is-list .ag-prz-card { border-bottom:none !important; }
.ag-prz-grid.is-list .ag-prz-card::after { display:block; }
.ag-prz-grid.is-list .ag-prz-card:last-child::after { display:none; }
@media (max-width:900px) { .ag-prz-grid { grid-template-columns:1fr; } .ag-prz-card { border-right:none !important; margin-right:0 !important; padding-left:0 !important; } .ag-prz-card::before { display:none !important; } }
/* ── ADMIN USER MANAGEMENT BOX (dashboard) ── */
.ag-user-box { max-width: 1100px; margin: 0 auto 30px; padding: 0 28px; }
.ag-user-box > * { border: 1px solid #cfc9bd; }
.ag-user-box-title, .ag-user-box-sub, .ag-user-form, .ag-user-list {
max-width: 100%;
}
.ag-user-box-inner { border: 1px solid #cfc9bd; border-radius: 8px; background: #fffdf8; padding: 22px 24px; }
#ag-root.dark-mode .ag-user-box-inner { background: var(--bg2); border-color: var(--border); }
.ag-user-box-title { font-family: 'Yaldevi', sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.ag-user-box-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.ag-user-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.ag-user-form label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ag-user-form input { width: 100%; border: 1px solid #cfc9bd; border-radius: 6px; background: #fff; padding: 10px 12px; font-size: 13.5px; color: #232323; }
#ag-root.dark-mode .ag-user-form input { background: var(--bg); color: var(--text); border-color: var(--border); }
.ag-user-list { margin-top: 20px; border-top: 1px dashed #cfc9bd; padding-top: 14px; }
.ag-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #e6dfd0; font-size: 13.5px; }
.ag-user-row:last-child { border-bottom: none; }
@media (max-width: 700px) { .ag-user-form { grid-template-columns: 1fr; } }
/* ── EDITOR: block rows + related-articles rows (matches Szerkesztoi.dc.html editor view) ── */
.ag-btn-gold { background: #c4a45a; color: #232323; }
.ag-btn-gold:hover { background: #d6b876; }
.ag-block-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.ag-block-kind { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding-top: 12px; }
.ag-block-content textarea, .ag-block-content input[type="text"], .ag-block-content input[type="file"] {
width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
padding: 11px 13px; font-size: 14px; line-height: 1.6; color: var(--text); resize: vertical; box-sizing: border-box;
}
.ag-block-actions-col { display: flex; flex-direction: column; gap: 6px; }
.ag-related-row { display: grid; grid-template-columns: 130px 1fr 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.ag-related-row input { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); padding: 9px 11px; font-size: 13px; color: var(--text); box-sizing: border-box; }
@media (max-width: 700px) {
.ag-block-row { grid-template-columns: 1fr; }
.ag-block-actions-col { flex-direction: row; }
.ag-related-row { grid-template-columns: 1fr; }
}
/* ── APPROVAL QUEUE (/jovahagyas/) ── */
.ag-review-row { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ag-reject-form { display: flex; gap: 8px; margin-top: 12px; max-width: 460px; }
.ag-reject-form input[type="text"] { flex: 1; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); padding: 9px 11px; font-size: 13px; color: var(--text); }
/* ────────────────────────────────────────────────────────────────────
KÉPFELTÖLTÉS A SZERKESZTŐBEN (/iras/)
A kép kiválasztáskor azonnal felmegy — ezek az állapotjelzők ahhoz kellenek.
──────────────────────────────────────────────────────────────────── */
.ag-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1.5px dashed var(--border); border-radius: 8px; background: var(--bg2);
padding: 26px 18px; cursor: pointer; text-align: center;
transition: border-color 0.15s, background 0.15s;
}
.ag-dropzone strong { font-family: 'Yaldevi', var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ag-dropzone span { font-size: 12.5px; color: var(--muted); }
.ag-dropzone:hover, .ag-dropzone.is-over { border-color: var(--accent); background: rgba(30, 77, 48, 0.06); }
.ag-img-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ag-img-btn, .ag-img-remove {
font-family: 'Inter', var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; border: 1px solid var(--border); background: var(--bg);
color: var(--text); border-radius: 5px; padding: 7px 12px; cursor: pointer;
}
.ag-img-btn:hover { background: var(--bg2); }
.ag-img-remove { color: var(--burgundy, #7a2230); border-color: rgba(122, 34, 48, 0.4); }
.ag-img-remove:hover { background: rgba(122, 34, 48, 0.08); }
.ag-upload-progress { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 6px; }
.ag-upload-bar { height: 100%; width: 0; background: var(--gold); transition: width 0.15s linear; }
.ag-upload-status { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 16px; }
.ag-upload-error { font-size: 12.5px; color: #7a2230; background: rgba(122, 34, 48, 0.08); border: 1px solid rgba(122, 34, 48, 0.3); border-radius: 5px; padding: 8px 10px; margin-top: 8px; }
/* Galéria-szerkesztő rács */
.ag-gallery-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; border: 1.5px dashed transparent; border-radius: 8px; transition: border-color 0.15s, background 0.15s; }
.ag-gallery-editor.is-over { border-color: var(--accent); background: rgba(30, 77, 48, 0.06); }
.ag-gal-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13px; border: 1.5px dashed var(--border); border-radius: 8px; padding: 22px; text-align: center; }
.ag-gal-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--bg); }
.ag-gal-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg2); border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ag-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-gal-num { position: absolute; top: 6px; left: 6px; background: rgba(26, 26, 26, 0.75); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.ag-gal-item input[type="text"] { width: 100%; margin-top: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); padding: 7px 9px; font-size: 12.5px; color: var(--text); }
.ag-gal-actions { display: flex; gap: 6px; margin-top: 8px; }
.ag-gal-item.is-uploading .ag-gal-thumb { padding: 0 14px; }
/* ────────────────────────────────────────────────────────────────────
CIKK VÉGI GALÉRIA + TELJES KÉPERNYŐS KÉPSOROZAT
──────────────────────────────────────────────────────────────────── */
.ag-gallery { max-width: 900px; margin: 0 auto; padding: 8px 28px 64px; }
.ag-gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 3px solid #232323; border-bottom: 1px solid #232323; padding: 10px 0 8px; margin-bottom: 22px; }
.ag-gallery-title { font-family: 'Yaldevi', var(--sans); font-size: 32px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: #232323; }
.ag-gallery-count { font-family: 'Martel', serif; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
.ag-gallery-stage { margin: 0; }
.ag-gallery-open { position: relative; display: block; width: 100%; padding: 0; border: none; background: var(--bg2); cursor: zoom-in; overflow: hidden; }
.ag-gallery-open img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; transition: transform 0.4s ease; }
.ag-gallery-open:hover img { transform: scale(1.02); }
.ag-gallery-zoom {
position: absolute; right: 14px; bottom: 14px; background: rgba(26, 26, 26, 0.72); color: #f5f0e8;
font-family: 'Inter', var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(4px);
}
.ag-gallery-caption { font-family: 'Inter', var(--sans); font-size: 12px; color: #777; letter-spacing: 0.03em; padding-top: 9px; min-height: 18px; }
.ag-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.ag-gallery-hint { font-family: 'Inter', var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-align: center; }
.ag-gallery-arrow {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(35, 35, 35, 0.3);
background: transparent; color: #232323; font-size: 24px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ag-gallery-arrow:hover { background: var(--accent); border-color: var(--accent); color: #f5f0e8; }
#ag-root.dark-mode .ag-gallery-head { border-top-color: #e8eaf0; border-bottom-color: rgba(232, 234, 240, 0.4); }
#ag-root.dark-mode .ag-gallery-title { color: #e8eaf0; }
#ag-root.dark-mode .ag-gallery-arrow { border-color: rgba(232, 234, 240, 0.35); color: #e8eaf0; }
#ag-root.dark-mode .ag-gallery-caption { color: #8899b0; }
/* Lightbox — a -ra kerül, ezért nem a téma változóival dolgozik. */
body.ag-lb-lock { overflow: hidden; }
.ag-lb {
position: fixed; inset: 0; z-index: 9999; display: none;
grid-template-columns: 64px 1fr 64px; grid-template-rows: 1fr auto;
align-items: center; gap: 8px; padding: 24px 16px 16px;
background: rgba(9, 14, 11, 0.96); backdrop-filter: blur(6px);
}
.ag-lb.is-open { display: grid; }
.ag-lb-stage { grid-column: 2; grid-row: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.ag-lb-stage img { max-width: 100%; max-height: calc(100vh - 220px); width: auto; height: auto; display: block; object-fit: contain; }
.ag-lb-stage figcaption { display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap; padding-top: 12px; }
.ag-lb-caption { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(245, 240, 232, 0.8); }
.ag-lb-count { font-family: 'Martel', serif; font-size: 11px; font-weight: 700; letter-spacing: 0.24em; color: #c4a45a; }
.ag-lb-nav {
grid-row: 1; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(245, 240, 232, 0.3);
background: rgba(245, 240, 232, 0.06); color: #f5f0e8; font-size: 30px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background 0.18s, border-color 0.18s;
}
.ag-lb-nav:hover { background: #c4a45a; border-color: #c4a45a; color: #232323; }
.ag-lb-prev { grid-column: 1; justify-self: start; }
.ag-lb-next { grid-column: 3; justify-self: end; }
.ag-lb-close {
position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
border: 1px solid rgba(245, 240, 232, 0.3); background: rgba(245, 240, 232, 0.06); color: #f5f0e8;
font-size: 16px; cursor: pointer; z-index: 2;
}
.ag-lb-close:hover { background: #c4a45a; border-color: #c4a45a; color: #232323; }
.ag-lb-strip { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 8px; overflow-x: auto; padding: 12px 4px 4px; scrollbar-width: thin; justify-content: safe center; }
.ag-lb-thumb { flex: 0 0 auto; width: 76px; height: 54px; padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: none; cursor: pointer; opacity: 0.55; transition: opacity 0.18s, border-color 0.18s; }
.ag-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-lb-thumb:hover { opacity: 0.85; }
.ag-lb-thumb.is-active { opacity: 1; border-color: #c4a45a; }
@media (max-width: 700px) {
.ag-lb { grid-template-columns: 44px 1fr 44px; padding: 16px 8px 8px; }
.ag-lb-nav { width: 42px; height: 42px; font-size: 24px; }
.ag-lb-stage img { max-height: calc(100vh - 200px); }
.ag-gallery-title { font-size: 24px; }
}
/* Sötét módban a főoldal logósávja ugyanazt a képet adja, mint a rovatoldalaké
(.ag-logo-bar-light): éjkék háttér, fehér kontúros tagline + wordmark.
Világos módban marad a főoldal zöld gradiens sávja az arany wordmarkkal. */
#ag-root.dark-mode .ag-logo-bar {
background: #0B131D !important;
border-top: 4px solid #1E4D30;
border-bottom: 2px solid #1E4D30;
padding: 6px 0 8px;
}
/* ── KERESŐTALÁLATOK: ugyanaz a hover-nyelv, mint a főoldali kártyáké ── */
/* A kártya eddig szín nélkül maradt, így a cím a böngésző alapértelmezett
link-kékjét (és meglátogatva a lilát) örökölte — a téma szövegszínét adjuk neki. */
.sr-card { display: block; color: var(--text); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.sr-card:visited { color: var(--text); }
.sr-card .sr-card-img img { transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), filter 0.3s ease; }
.sr-card h3 {
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: text-decoration-color 0.25s ease;
}
.sr-card:hover { transform: translateY(-3px); }
.sr-card:hover .sr-card-img img { transform: scale(1.04); filter: brightness(0.88); }
.sr-card:hover h3 { text-decoration-color: var(--accent); }
#ag-root.dark-mode .sr-card:hover h3 { text-decoration-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
.sr-card, .sr-card .sr-card-img img { transition: none; }
.sr-card:hover { transform: none; }
.sr-card:hover .sr-card-img img { transform: none; }
}
/* ── Nagyobb ARTGRAM logó a rovat-/aloldalak menüsávjában (a főoldalon marad a kisebb).
A logót tartalmazó eddig sima block volt, ezért a magasabb kép felfelé
kilógott a sávból — flex-szel függőlegesen középre igazítjuk. ── */
/* A markupban a linken soron belüli display:block van, ezért kell az !important. */
.ag-nav-logo a { display: flex !important; align-items: center; line-height: 0; }
#ag-nav.ag-nav-light .ag-nav-logo img { height: 40px; }
/* A .ag-nav-logo img { display:block } erősebb volt a .ag-logo-dark { display:none }-nál,
így a menüsávban mindkét logóváltozat renderelődött (eddig a levágás takarta el). */
.ag-nav-logo .ag-logo-dark { display: none; }
#ag-root.dark-mode .ag-nav-logo .ag-logo-light { display: none; }
#ag-root.dark-mode .ag-nav-logo .ag-logo-dark { display: block; }
#ag-nav.ag-nav-light.stuck .ag-nav-logo { max-width: 300px; padding: 0 18px 0 0; }
/* ── FELHASZNÁLÓKEZELŐ: hozzáférési szintek, cikkszámok, jelszó ── */
.ag-user-form { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.ag-user-form select {
width: 100%; border: 1px solid #cfc9bd; border-radius: 6px; background: #fff;
padding: 10px 12px; font-size: 13.5px; color: #232323;
}
#ag-root.dark-mode .ag-user-form select { background: var(--bg); color: var(--text); border-color: var(--border); }
.ag-role-legend { margin-top: 14px; display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ag-role-legend strong { color: var(--text); font-weight: 700; }
.ag-user-card { border: 1px solid #cfc9bd; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
#ag-root.dark-mode .ag-user-card { background: var(--bg); border-color: var(--border); }
.ag-user-card:last-child { margin-bottom: 0; }
.ag-user-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.ag-user-login { color: var(--muted); font-size: 12.5px; margin-left: 8px; }
.ag-user-role-badge {
font-family: 'Inter', var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; background: rgba(30,77,48,0.12); color: var(--accent);
border: 1px solid rgba(30,77,48,0.3); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
#ag-root.dark-mode .ag-user-role-badge { background: rgba(196,164,90,0.15); color: var(--gold); border-color: rgba(196,164,90,0.4); }
.ag-user-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ag-user-stats strong { color: var(--text); }
.ag-user-stats a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.ag-user-stats a:hover { border-bottom-color: var(--accent); }
.ag-user-stats a.is-active { font-weight: 700; border-bottom-color: var(--accent); }
#ag-root.dark-mode .ag-user-stats a { color: var(--gold); }
.ag-user-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e6dfd0; }
#ag-root.dark-mode .ag-user-actions { border-top-color: var(--border); }
.ag-user-actions form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.ag-user-actions label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ag-user-actions select, .ag-user-actions input[type="text"] {
border: 1px solid #cfc9bd; border-radius: 6px; background: #fff; padding: 9px 11px; font-size: 13px; color: #232323;
}
#ag-root.dark-mode .ag-user-actions select, #ag-root.dark-mode .ag-user-actions input[type="text"] {
background: var(--bg2); color: var(--text); border-color: var(--border);
}
.ag-user-actions .ag-btn { padding: 9px 16px; font-size: 11px; }
.ag-user-pw-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.ag-author-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ag-author-filter label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ag-author-filter select {
border: 1px solid var(--border); border-radius: 6px; background: var(--bg); padding: 9px 12px; font-size: 13.5px; color: var(--text);
}
.ag-byline-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ag-byline-row input[type="text"] { flex: 1 1 200px; }
.ag-byline-row select {
flex: 0 1 220px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); padding: 11px 12px; font-size: 13.5px; color: var(--text);
}
@media (max-width: 700px) {
.ag-user-form { grid-template-columns: 1fr; }
.ag-user-actions form { width: 100%; }
}
/* ── LEBEGŐ IDÉZETBUBORÉKOK — a küldött minta szerint: krémszínű test,
vékony sötét kontúr, nagyobb dőlt idézet, alatta a forráscikk címe.
A buborék a forráscikkre navigál. ── */
.ag-pull-tab { width: 200px; filter: drop-shadow(2px 3px 8px rgba(0,0,0,0.15)); }
.ag-pull-tab.tab-right { padding: 14px 16px 13px 27px; }
.ag-pull-tab.tab-left { padding: 14px 27px 13px 16px; }
.ag-pull-tab-shape path {
fill: #f2eee4;
stroke: #232323;
stroke-width: 1.4px;
}
.ag-pull-tab:hover .ag-pull-tab-shape path { fill: #eae4d6; }
.ag-pull-tab:hover { filter: drop-shadow(2px 6px 14px rgba(0,0,0,0.24)); }
.ag-pull-tab-quote {
font-family: 'Martel', var(--serif); font-weight: 700; font-style: italic;
font-size: 11.5px; line-height: 1.45; color: #232323; display: block;
}
.ag-pull-tab-src {
font-family: 'Inter', var(--sans); font-size: 8.5px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: #5f5f5f;
opacity: 1; margin-top: 7px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#ag-root.dark-mode .ag-pull-tab-shape path { fill: #101826; stroke: #f5f0e8; }
#ag-root.dark-mode .ag-pull-tab:hover .ag-pull-tab-shape path { fill: #16202f; }
#ag-root.dark-mode .ag-pull-tab-quote { color: #f0ece4; }
#ag-root.dark-mode .ag-pull-tab-src { color: #9aa8bd; }
/* ── UGRÁS A CIKK CÍMÉHEZ — lebegő gomb a jobb alsó sarokban ── */
.ag-to-title {
position: fixed; right: 24px; bottom: 24px; z-index: 180;
width: 46px; height: 46px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: #f2eee4; color: #232323; border: 1.4px solid rgba(35,35,35,0.35);
text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.16);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s, color 0.2s;
}
.ag-to-title.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ag-to-title:hover { background: var(--accent); color: #f5f0e8; border-color: var(--accent); }
#ag-root.dark-mode .ag-to-title { background: #16202f; color: #e8eaf0; border-color: rgba(232,234,240,0.35); }
#ag-root.dark-mode .ag-to-title:hover { background: var(--gold); color: #232323; border-color: var(--gold); }
@media (max-width: 700px) { .ag-to-title { right: 14px; bottom: 14px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .ag-to-title { transition: opacity 0.2s ease, visibility 0.2s; transform: none; } }
/* ── SÖTÉT MÓD: a főoldal menüsávja ugyanaz, mint a rovatoldalaké ──
(a soron belüli/alap zöld gradienst felül kell írni). */
#ag-root.dark-mode #ag-nav { background: #0B131D !important; border-bottom: 2px solid #f5f0e8; }
#ag-root.dark-mode #ag-nav.stuck { background: #0B131D !important; border-top: 3px solid #1E4D30; }
#ag-root.dark-mode #ag-nav .ag-nav-cats a { border-right: 1px solid var(--border); }
#ag-root.dark-mode #ag-nav .ag-nav-right { border-left: 1px solid var(--border); }
#ag-root.dark-mode #ag-nav .ag-nav-btn { border-right: 1px solid var(--border); }
#ag-root.dark-mode #ag-nav #ag-nav-hint { background: linear-gradient(to right, transparent, #0B131D 60%) !important; }
#ag-root.dark-mode #ag-nav #ag-nav-hint svg { stroke: #f5f0e8; }
/* ── SÖTÉT MÓD: cikkfej — cím, líd, szerzősor és keresőszavak világosak.
A single.php soron belüli színeit írjuk felül, ezért kell az !important. */
#ag-root.dark-mode #article-main h1 { color: #f5f0e8 !important; }
#ag-root.dark-mode .ck-lead { color: #f5f0e8 !important; }
#ag-root.dark-mode .ck-byline { color: rgba(245,240,232,0.75) !important; }
#ag-root.dark-mode .ck-byline strong { color: #f5f0e8 !important; }
#ag-root.dark-mode .ck-tag {
color: #f5f0e8 !important;
border-color: rgba(245,240,232,0.45) !important;
}
#ag-root.dark-mode .ck-tag:hover { background: var(--gold); color: #232323 !important; border-color: var(--gold) !important; }
#ag-root.dark-mode #article-main .ck-share { color: #f5f0e8; border-color: rgba(245,240,232,0.35); }
#ag-root.dark-mode #article-main .ck-share:hover { background: var(--gold); color: #232323; border-color: var(--gold); }
#ag-root.dark-mode .ck-hero-caption,
#ag-root.dark-mode .ck-body figcaption,
#ag-root.dark-mode .ag-gallery-caption { color: rgba(245,240,232,0.62) !important; }
/* ── VIDEÓ: lejátszó (borítókép + play, iframe csak kattintásra) ── */
.ag-video { margin: 24px 0; }
.ag-video-frame {
position: relative; display: block; width: 100%; padding: 0; border: none;
background: #0b131d; cursor: pointer; overflow: hidden; aspect-ratio: 16 / 9;
}
.ag-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), filter 0.3s; }
.ag-video-frame:hover img { transform: scale(1.03); filter: brightness(0.85); }
.ag-video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 72px; height: 72px; border-radius: 50%;
background: rgba(35,35,35,0.72); color: #f5f0e8;
display: flex; align-items: center; justify-content: center;
padding-left: 5px; backdrop-filter: blur(3px);
transition: background 0.2s, transform 0.2s;
}
.ag-video-frame:hover .ag-video-play { background: var(--gold); color: #232323; transform: translate(-50%,-50%) scale(1.08); }
.ag-video-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; background: #000; }
.ag-video figcaption { font-family: 'Inter', var(--sans); font-size: 12px; color: #777; letter-spacing: 0.03em; padding-top: 9px; }
#ag-root.dark-mode .ag-video figcaption { color: rgba(245,240,232,0.62); }
.ck-body .ag-video { margin: 28px 0; }
/* ── VIDEÓ: szerkesztői mezők ── */
.ag-video-field { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ag-video-field input[type="url"] {
flex: 1 1 320px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); padding: 11px 13px; font-size: 14px; color: var(--text);
}
.ag-video-preview { position: relative; margin-top: 10px; max-width: 320px; }
.ag-video-preview img { width: 100%; height: auto; display: block; border-radius: 6px; }
.ag-video-preview-badge {
position: absolute; left: 8px; bottom: 8px; background: rgba(26,26,26,0.78); color: #fff;
font-family: 'Inter', var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}
.ag-video-preview-note { font-size: 12.5px; color: var(--muted); border: 1px dashed var(--border); border-radius: 6px; padding: 12px; }
.ag-settings-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.ag-settings-form label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ag-settings-form input[type="url"] {
width: 100%; border: 1px solid #cfc9bd; border-radius: 6px; background: #fff;
padding: 10px 12px; font-size: 13.5px; color: #232323;
}
#ag-root.dark-mode .ag-settings-form input[type="url"] { background: var(--bg); color: var(--text); border-color: var(--border); }
/* ── ROVATKÁRTYA: cím és líd ütközésének javítása ──
A .ag-excerpt-sm alapból scaleY(1.18)-cal, `bottom left` origóval nyúlt.
A nyújtás nem foglal helyet: a szövegblokk felfelé lógott ki a saját
dobozából, méghozzá a magasságával arányosan — ezért futott rá hosszú
líd esetén a címre (rácsos és listás nézetben egyaránt). A rovatkártyán
a líd amúgy is Martel, nem a nyújtásra tervezett Abril Fatface, ezért itt
a transzformációt levesszük, és rendes blokk-elrendezést adunk neki.
(A cím megtartja a nyújtott betűképét — az felfelé a kártya belső
margójába lóg, nem másik szövegre.) */
.ag-prz-card .ag-headline-md,
.ag-prz-card .ag-excerpt-sm {
display: block;
}
.ag-prz-card .ag-excerpt-sm {
transform: none;
line-height: 1.45;
margin-top: 10px;
}
.ag-prz-grid.is-list .ag-prz-card .ag-excerpt-sm { margin-top: 4px; }
/* A cím nyújtott betűképe ne érjen bele a fölötte lévő elválasztóvonalba. */
.ag-prz-grid.is-list .ag-prz-card { padding: 18px 0; }
/* ── FŐOLDAL, kis rovatkártya: a cím ne lógjon bele a képbe ──
A .ag-headline-md scaleY(1.18)-a `bottom left` origóval felfelé nyújtja a
szövegblokkot, és a nyújtás nem foglal helyet a tördelésben: minél több
soros a cím, annál jobban kilóg a doboza fölé — a kis kártyán épp a kép
aljába. A margó a transzformáción kívül esik, ezért az tud helyet
tartani neki. (4 soros címnél ~17 px a kilógás, 2 sorosnál ~8 px.) */
.ag-rovat-small .ag-headline-md { margin-top: 14px; }
.ag-settings-field { flex: 1 1 260px; }
/* A rovatcím alatti vonal és az első cikkcím közé kevés hely jutott: a kártya
felső belső margóját felemésztette a cím felfelé nyúló betűképe (1 px maradt). */
.ag-section-label { margin-bottom: 10px; }
/* ══════════════════════════════════════════════════════════════════════
ADAPTÍV FINOMHANGOLÁS — lebegő buborékok + mobil nézet
══════════════════════════════════════════════════════════════════════ */
/* A lebegő idézetbuborékok fix pozícióban, a tartalom mellé úsznak be.
1340 px-es tartalom + 2×200 px buborék alatt már a szövegre csúsznának,
ezért 1280 px alatt eltűnnek. (A .hiding/.visible szabályok !important-tal
dolgoznak, ezért itt is az kell.) */
@media (max-width: 1280px) {
.ag-pull-tab,
.ag-pull-tab.visible,
.ag-pull-tab.visible.tab-left,
.ag-pull-tab.visible.tab-right,
.ag-pull-tab.hiding.tab-left,
.ag-pull-tab.hiding.tab-right {
display: none !important;
animation: none !important;
}
}
/* ── Egymás alá csúszó kártyák: a függőleges pontozott elválasztó
oldalt lóg, amikor már nincs mellette oszlop. ── */
@media (max-width: 900px) {
.ag-rovat-big::after { display: none; }
.ag-rovat-big { padding-right: 0; }
}
/* ── MENÜSÁV MOBILON ──
Telefonon csak a világos/sötét váltó, a hírlevél és a menü marad a sávban
— a rovatok a MENÜ panelből érhetők el. A rovatlista korábban `flex:1`-gyel
osztozott a gombokkal, ~15 px-re nyomódott össze, a linkjei pedig kilógtak
a képernyőből (ezért lehetett oldalra húzni az oldalt). */
@media (max-width: 700px) {
.ag-nav-inner { flex-wrap: nowrap; height: 46px; padding: 0 16px; }
.ag-nav-cats { display: none !important; }
#ag-nav-hint { display: none !important; }
/* A három gomb kitölti a sávot, egyenlő szélességben, középre igazított
felirattal — korábban jobbra tolódtak, és üres sáv maradt mellettük. */
.ag-nav-right { margin-left: 0; flex: 1 1 auto; width: 100%; border-left: none; }
.ag-nav-right > * { flex: 1 1 0; min-width: 0; }
/* A MENÜ gombon soron belüli 24 px-es belső margó van, ezért kell az !important,
különben az a gomb szélesebb marad a másik kettőnél. */
.ag-nav-btn { padding-left: 6px !important; padding-right: 6px !important; font-size: 11px; justify-content: center; }
}
/* ── Rovatcím mobilon: 32 px-es verzál cím + gomb egy sorban nem fért ki. ── */
@media (max-width: 600px) {
.ag-section-label { flex-wrap: wrap; gap: 8px; padding: 8px 0 6px; }
.ag-section-label span { font-size: 24px; }
.ag-all-link { font-size: 11px; padding: 7px 12px; }
}
/* ── CIKKOLDAL MOBILON ──
A nyitókép/videó 82 %-os keretben ül, ami telefonon fölöslegesen
elkeskenyíti; a belső margókat is visszaveszem. */
@media (max-width: 700px) {
.ck-hero-media { max-width: 100% !important; }
#article-main > div[style*="max-width:1340px"] { padding-left: 16px !important; padding-right: 16px !important; }
.ck-body { padding-left: 16px !important; padding-right: 16px !important; }
.ag-gallery { padding-left: 16px; padding-right: 16px; }
.ag-submit-grid { grid-template-columns: 1fr !important; }
.ag-footer-social { margin-top: 0 !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 16px !important; }
}
/* ── Videósáv mobilon: a kártya ne lógjon ki a képernyőből. ── */
@media (max-width: 480px) {
.ag-vid-card { flex: 0 0 82vw !important; padding-right: 16px !important; }
.ag-vid-card:not(:first-child) { margin-left: 16px !important; }
}
/* ── LÁBLÉC MOBILON ──
Az impresszum-rács soron belüli stílusa (`grid-template-columns:1fr 1fr 1fr;
gap:60px`) erősebb volt a korábbi mobilszabálynál, ezért telefonon is három
oszlopban maradt: 130+116+105 px oszlop 60 px-es résekkel 471 px-t igényelt
375 px helyen — innen jött az egymásra csúszó szöveg és a vízszintes húzás. */
@media (max-width: 900px) {
.ag-footer-info-grid {
grid-template-columns: 1fr 1fr !important;
gap: 28px 24px !important;
max-width: 100% !important;
transform: none !important;
}
}
@media (max-width: 600px) {
.ag-footer-info-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
.ag-footer-links { flex-wrap: wrap; gap: 10px 18px; }
.ag-footer img { max-width: 100%; height: auto; }
}
/* ── CIKK MEGOSZTÓGOMBOK — a cím alatti sorban ──
Nagyobb, kontrasztosabb körök; hoverre arany háttér fehér jellel. */
.ck-share {
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 50%; border: 1.6px solid rgba(35,35,35,0.55);
background: transparent; color: #232323; cursor: pointer;
display: flex; align-items: center; justify-content: center;
text-decoration: none; padding: 0;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ck-share svg { width: 17px; height: 17px; display: block; }
.ck-share:hover,
.ck-share:focus-visible {
background: var(--gold);
border-color: var(--gold);
color: #fff;
transform: translateY(-2px);
}
.ck-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ck-share:active { transform: translateY(0); }
.ck-share-toast {
font-family: 'Inter', var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; color: var(--accent);
opacity: 0; transition: opacity 0.2s ease; white-space: nowrap;
}
.ck-share-toast.is-visible { opacity: 1; }
#ag-root.dark-mode #article-main .ck-share { color: #f5f0e8; border-color: rgba(245,240,232,0.5); }
#ag-root.dark-mode #article-main .ck-share:hover,
#ag-root.dark-mode #article-main .ck-share:focus-visible { background: var(--gold); color: #fff; border-color: var(--gold); }
#ag-root.dark-mode .ck-share-toast { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ck-share { transition: background 0.2s, color 0.2s; } .ck-share:hover { transform: none; } }
@media (max-width: 700px) { .ck-share { width: 34px; height: 34px; } .ck-share svg { width: 16px; height: 16px; } }