/* holborozzak.hu — közös stíluslap (boros színvilág) */ :root { /* Borhoz köthető paletta */ --wine-900: #4a0e1c; /* mély burgundi */ --wine-700: #722f37; /* bor vörös */ --wine-500: #8c3b46; /* világosabb bor */ --gold: #c8a14b; /* arany */ --gold-200: #e3cd97; /* halvány arany */ --leaf: #5a6b3b; /* szőlőlevél zöld */ --cream: #f7f2ea; /* krém / pergamen (oldal háttér) */ --paper: #fffdf9; /* kártya háttér */ --ink: #2b1d20; /* sötét bor-barna (szöveg) */ --muted: #8a7d77; /* halvány szöveg */ --line: #e7ddcf; /* elválasztó vonal */ /* Szemantikus tokenek — a sötét mód ezeket írja felül. --t-strong/--t-accent: bor-színű SZÖVEG (címek, linkek) — sötét háttéren világosítani kell, miközben a bor-színű HÁTTEREK (sávok, gombok) maradnak. */ --t-strong: var(--wine-900); --t-accent: var(--wine-700); --tint: #f4ecdf; /* halvány bézs (hover/chip háttér) */ --tint-strong: #f3e7d0; /* erősebb bézs (aktív menü) */ --tint-gold: #fff6e6; /* halvány arany háttér */ --tint-danger: #fbeae5; /* halvány piros (hiba) háttér */ --tint-success: #e6efe0; /* halvány zöld (siker/ingyenes) háttér */ --line-success: #c9d6ad; --t-success: #3c4a22; --on-wine: #f7f2ea; /* szöveg bor-színű háttéren — sötétben NEM vált */ --maxw: 1280px; --radius: 14px; --shadow: 0 6px 24px rgba(74, 14, 28, .08); color-scheme: light; } /* ---------- Sötét mód (a kapcsolja) ---------- */ :root[data-theme="dark"] { --cream: #1e1114; /* oldal háttér: mély bor-fekete */ --paper: #2a191d; /* kártya háttér */ --ink: #efe4dc; /* szöveg: melegfehér */ --muted: #a2918b; --line: #43302f; --t-strong: #f0dcc2; /* címek: pergamen-arany */ --t-accent: #dc9aa4; /* linkek/akcentek: világos borrózsa */ --tint: #35222a; --tint-strong: #402a31; --tint-gold: #3a2c1a; --tint-danger: #4a211c; --tint-success: #263620; --line-success: #3d5230; --t-success: #b9d3a2; --shadow: 0 6px 24px rgba(0, 0, 0, .45); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; } h1, h2, h3, .brand { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; } a { color: var(--t-accent); } /* ---------- Fejléc (világos) ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(74, 14, 28, .04); } .site-header__inner { width: 100%; padding: 0.7rem 1.75rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .brand { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; color: var(--t-accent); text-decoration: none; } .brand__icon { color: var(--t-accent); flex: none; width: 38px; height: 38px; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-size: clamp(1.25rem, 2.8vw, 1.55rem); font-weight: 800; } .brand__accent { color: var(--t-strong); } .brand__tag { margin-top: .15rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* Navigáció (középen, ikonokkal, vastag betű, aktív pirula) */ .site-nav { justify-self: center; display: flex; align-items: center; gap: .8rem; } .site-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; color: var(--t-accent); text-decoration: none; font-weight: 700; font-size: 1rem; } .site-nav a:hover { color: var(--gold); } .site-nav a svg { width: 18px; height: 18px; flex: none; } .site-nav a.is-active { background: var(--tint-strong); color: var(--t-strong); } .site-nav a.is-active:hover { color: var(--t-strong); } /* Jobb oldali műveletek (CTA + mobil hamburger) */ .site-header__actions { justify-self: end; display: flex; align-items: center; gap: .6rem; } /* Fejléc CTA — asztali gomb a jobb oldalon */ .site-cta { display: inline-block; padding: .45rem .9rem; border-radius: 8px; background: var(--gold); color: var(--t-strong); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; } .site-cta:hover { background: #b8923f; } /* CTA a mobil legördülőben — asztalon rejtve (a .site-nav a display-jét felülírjuk) */ .site-nav a.site-nav__cta { display: none; } /* Hamburger (mobil) — alapból rejtve, csak ≤760px-en jelenik meg */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-burger { display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--t-accent); cursor: pointer; } .nav-burger:hover { background: var(--tint-strong); } .nav-burger__close { display: none; } @media (max-width: 760px) { /* A középső menü mobilon abszolút pozíciós (kikerül a rácsból). Flex space-between-nel a márkanév egyértelműen balra, a hamburger jobbra ül. Mobilon vékonyabb és arányosan kisebb elemek. */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.1rem; } .brand { justify-self: start; margin-right: auto; } .brand__icon { width: 32px; height: 32px; } .brand__name { font-size: 1.2rem; } .brand__tag { font-size: .66rem; letter-spacing: .1em; } .nav-burger { width: 36px; height: 36px; } .nav-burger { display: inline-grid; } /* Nyitott állapot: hamburger → X */ #nav-toggle:checked ~ .site-header__actions .nav-burger__open { display: none; } #nav-toggle:checked ~ .site-header__actions .nav-burger__close { display: block; } /* A menü legördülő panelként a fejléc alatt */ .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .25rem; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 8px 20px rgba(74, 14, 28, .1); padding: .6rem 1rem 1rem; } #nav-toggle:checked ~ .site-nav { display: flex; } .site-nav a { font-size: 1.05rem; justify-content: flex-start; padding: .75rem .9rem; border-radius: 10px; } /* Asztali CTA gomb rejtve mobilon; helyette a menü alján jelenik meg */ .site-cta { display: none; } .site-nav a.site-nav__cta { display: block; margin-top: .4rem; text-align: center; background: var(--gold); color: var(--t-strong); font-weight: 700; } .site-nav a.site-nav__cta:hover { background: #b8923f; color: var(--t-strong); } } /* ---------- Fő tartalom ---------- */ main { flex: 1 0 auto; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.25rem; } .container--wide { max-width: 1600px; } /* ---------- Hero (immerzív panoráma, kompakt) ---------- */ /* Szőlőskert háttérkép, alul mély burgundiba sötétedő átmenettel; középre zárt cím + üveghatású kereső + statisztika-sor. A tartalom a heróba belelógó panelen (.landing-panel) indul. Kép: assets/hero.jpg (Pexels, ingyenes). */ .hero { position: relative; min-height: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--t-strong); background-image: linear-gradient(180deg, rgba(43, 29, 32, .35) 0%, rgba(74, 14, 28, .45) 55%, rgba(43, 20, 24, .92) 100%), url('hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--on-wine); padding: 2.4rem 1.75rem 5.5rem; } .hero__inner { max-width: 760px; margin: 0 auto; } .hero__eyebrow { margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .22em; font-size: .8rem; font-weight: 700; color: var(--gold-200); } .hero h1 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.9rem, 4.6vw, 2.9rem); text-shadow: 0 2px 20px rgba(0, 0, 0, .45); } .hero__lead { margin: 0 auto 1.4rem; max-width: 36rem; font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: #f3e8e0; } /* Hero kereső sáv (üveghatás) */ .hero__search { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; background: rgba(255, 253, 249, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 8px; box-shadow: 0 16px 50px rgba(0, 0, 0, .3); } .hero__search input { flex: 1; min-width: 0; border: none; background: var(--paper); border-radius: 10px; padding: .95rem 1.1rem; font-size: 1rem; color: var(--ink); outline: none; } .hero__search button { border: none; background: var(--gold); color: var(--t-strong); font-weight: 800; font-size: 1rem; padding: .95rem 1.6rem; border-radius: 10px; cursor: pointer; } .hero__search button:hover { background: #b8923f; } /* Hero statisztika-sor */ .hero__stats { margin: 1.4rem auto 0; display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; color: #fff; } .hero__stat b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; color: var(--gold-200); } .hero__stat span { font-size: .82rem; opacity: .85; } /* A heróba belelógó tartalompanel (nyitóoldal) */ .landing-panel { position: relative; z-index: 2; margin-top: -70px; padding-top: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 50px rgba(74, 14, 28, .18); } /* A panelen ülő kártyák fehérrel váljanak el a papír-háttértől */ .landing-panel .event-card, .landing-panel .events-list, .landing-panel .browse-tile, .landing-panel .news-band { background: var(--paper); } @media (max-width: 760px) { .landing-panel { margin-top: -50px; padding-top: 1.4rem; } } @media (max-width: 560px) { .hero__search { flex-direction: column; } .hero__search button { padding: .85rem; } .hero__stats { gap: 1.2rem; } } /* ---------- Tartalmi szekció ---------- */ .section-intro { text-align: center; color: var(--muted); padding: 2.5rem 1rem; font-size: 1.05rem; } /* ---------- Lista-oldal fejléc ---------- */ .page-head { padding: 1.75rem 0 .5rem; } .page-head h1 { margin: 0 0 .25rem; color: var(--t-strong); font-size: clamp(1.6rem, 4vw, 2.2rem); } .page-head__sub { margin: 0; color: var(--muted); } /* ---------- Böngésző-csempék (nyitóoldal) ---------- */ /* „Böngéssz másképp" — letisztult kártyák vonalas ikonnal és csúszó nyíllal */ .browse-eyebrow { margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 800; color: var(--gold); } .browse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .browse-tile { position: relative; display: block; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .browse-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(74, 14, 28, .12); border-color: #e0d3bf; } .browse-tile__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .65rem; } .browse-tile__icon { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--tint); color: var(--t-accent); border: 1px solid var(--line); } .browse-tile__icon svg { width: 23px; height: 23px; } .browse-tile__title { margin: 0; color: var(--t-strong); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; } .browse-tile__desc { margin: 0; color: var(--muted); font-size: .92rem; } .browse-tile__arrow { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--gold); font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; } .browse-tile:hover .browse-tile__arrow { opacity: 1; transform: translateX(0); } /* ---------- Beküldő űrlap (esemeny-bekuldes.php) ---------- */ /* Honeypot: a böngészőben nem látszik (botok viszont kitöltik). Nem display:none, hogy a botok valódi mezőnek lássák; takarításnál ne nevezd át a #url mezőt. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-intro { max-width: 760px; } .form-intro h1 { margin: 0 0 .4rem; } .form-intro p { color: var(--muted); margin: 0 0 1.75rem; } .submit-form { max-width: 760px; } .form-section-title { margin: 1.75rem 0 .9rem; font-size: 1.05rem; color: var(--t-strong); font-family: Georgia, "Times New Roman", serif; } .form-section-title:first-of-type { margin-top: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; } .field { display: flex; flex-direction: column; gap: .35rem; } .field--full { grid-column: 1 / -1; } .field label { font-weight: 700; font-size: .9rem; color: var(--ink); } .field .req { color: var(--t-accent); } .field input, .field textarea, .field select { border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); width: 100%; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); } .field textarea { min-height: 120px; resize: vertical; } .field__hint { font-size: .78rem; color: var(--muted); } /* Rich-text szerkesztő (részletes leírás — progresszív fejlesztés) */ .rte { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; } .rte__toolbar { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; padding: .4rem .5rem; background: var(--cream); border-bottom: 1px solid var(--line); } .rte__btn { min-width: 34px; height: 32px; padding: 0 .55rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--t-strong); font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; } .rte__btn:hover { background: var(--paper); border-color: var(--line); } .rte__btn:active { background: var(--tint); } .rte__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .rte__sep { width: 1px; align-self: stretch; margin: .2rem .35rem; background: var(--line); } .rte__area { min-height: 220px; padding: .85rem 1rem; font: inherit; font-size: 1rem; line-height: 1.55; color: var(--ink); outline: none; } .rte__area:focus { box-shadow: inset 0 0 0 2px rgba(200, 161, 75, .35); } .rte__area:empty::before { content: attr(data-placeholder); color: var(--muted); } .rte__area p { margin: 0 0 .6rem; } .rte__area ul, .rte__area ol { margin: 0 0 .6rem 1.4rem; padding: 0; } .rte__area li { margin: .15rem 0; } .rte__area a { color: var(--t-accent); } .rte__area blockquote { margin: 0 0 .6rem; padding: .3rem 0 .3rem .9rem; border-left: 3px solid var(--gold); color: var(--t-strong); } .checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; } .check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; } .check input { width: auto; } .form-actions { margin-top: 1.75rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .form-note { font-size: .8rem; color: var(--muted); } .form-error { background: var(--tint-danger); border: 1px solid #e9b8a8; color: #8a2c12; border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 1.5rem; max-width: 760px; } .form-error ul { margin: .4rem 0 0; padding-left: 1.2rem; } .form-success { background: var(--tint-success); border: 1px solid var(--line-success); color: var(--t-success); border-radius: 12px; padding: 1.75rem 2rem; max-width: 760px; } .form-success h1 { margin: 0 0 .5rem; color: var(--t-strong); } .form-success p { margin: 0 0 .75rem; } @media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } } /* ---------- Szervezőknek CTA sáv (modern, központosított, két gomb) ---------- */ .cta-band { position: relative; overflow: hidden; text-align: center; border-radius: 20px; padding: 3rem 1.5rem; margin: 1.25rem 0; color: #fff; background: radial-gradient(50% 60% at 85% 15%, rgba(200, 161, 75, .26), transparent 60%), radial-gradient(60% 70% at 10% 90%, rgba(140, 59, 70, .5), transparent 60%), linear-gradient(135deg, var(--wine-900), #2c0712); } .cta-band__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; font-weight: 800; color: var(--gold-200); margin: 0 0 .5rem; } .cta-band h2 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); } .cta-band p { margin: 0 auto 1.6rem; color: var(--gold-200); max-width: 52ch; } .cta-band__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } /* Kompakt, vízszintes CTA-csík (szöveg balra, gombok jobbra) */ .cta-band--compact { text-align: left; padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cta-band--compact .cta-band__txt { flex: 1; min-width: 260px; } .cta-band--compact .cta-band__eyebrow { margin: 0 0 .2rem; } .cta-band--compact h2 { margin: 0 0 .15rem; font-size: 1.4rem; } .cta-band--compact p { margin: 0; max-width: 52ch; } .cta-band--compact .cta-band__actions { justify-content: flex-start; } .btn--gold { background: var(--gold); color: var(--t-strong); } .btn--gold:hover { background: #b8923f; } .btn--ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); } .btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } /* ---------- Hírlevél sáv (világos, központosított) ---------- */ .news-band { text-align: center; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 16px; padding: 2.5rem 1.5rem; margin: 1.25rem 0; box-shadow: var(--shadow); } .news-band__inner { max-width: 560px; margin: 0 auto; } .news-band__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 800; color: var(--t-accent); margin: 0 0 .5rem; } .news-band h2 { margin: 0 0 .4rem; color: var(--t-strong); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 3.5vw, 2rem); } .news-band__lead { margin: 0 auto 1.5rem; color: var(--muted); max-width: 46ch; } .news-form { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; max-width: 480px; margin: 0 auto; } .news-form input { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1.1rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); } .news-perks { display: flex; gap: .5rem 1.5rem; justify-content: center; flex-wrap: wrap; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--ink); font-weight: 600; } .news-perks li { display: inline-flex; align-items: center; gap: .35rem; } .news-band__note { margin: 1.1rem 0 0; font-size: .78rem; color: var(--muted); } .news-band__note a { color: var(--t-accent); } .news-band__msg { margin: 0 0 1rem !important; font-weight: 700; color: var(--t-strong); } .news-band__msg--err { color: #b5562a; } /* ---------- Naptár mini-hero + jelmagyarázat ---------- */ .cal-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0 1.25rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: linear-gradient(135deg, var(--wine-700), var(--wine-900)); color: var(--on-wine); box-shadow: var(--shadow); } .cal-hero h1 { margin: 0; color: var(--on-wine); font-size: clamp(1.6rem, 4vw, 2.2rem); } .cal-hero__sub { margin: .3rem 0 0; color: var(--gold-200); font-weight: 600; } .cal-hero .cal-nav__today { color: var(--on-wine); } .cal-hero .cal-nav__today:hover { color: var(--gold); } /* A naptár-kereten belül, a bordó fejléc alatt (a rács fölött) */ .cal-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin: 0; padding: .6rem 1.3rem; background: var(--cream); border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .cal-legend__item { display: inline-flex; align-items: center; gap: .4rem; } .cal-legend__dot { width: 12px; height: 12px; border-radius: 3px; flex: none; } .facet__empty { margin: .3rem .4rem; color: var(--muted); font-size: .85rem; } /* ---------- Eseménynaptár ---------- */ .cal-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.75rem 0 1.25rem; } .cal-head h1 { margin: 0; color: var(--t-strong); font-size: clamp(1.6rem, 4vw, 2.2rem); } /* Hónap-léptető a bordó fejlécben */ .cal-nav { display: flex; align-items: center; gap: .45rem; } .cal-nav__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-size: 1.25rem; line-height: 1; font-weight: 800; } .cal-nav__btn:hover { background: var(--gold); color: var(--t-strong); } .cal-nav__today { margin-left: .2rem; padding: .5rem .95rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; } .cal-nav__today:hover { border-color: #fff; color: #fff; } /* Naptár-keret: heti sorok, átívelő többnapos esemény-sávokkal. Nincs overflow: hidden — a hover-előnézet kilóghat a kereten. */ .cal { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); } .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.3rem; background: linear-gradient(135deg, var(--wine-700), var(--wine-900)); color: #fff; border-radius: 16px 16px 0 0; } .cal-toolbar__title { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .cal-toolbar__month { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.5rem; color: #fff; } .cal-toolbar__count { font-size: .85rem; font-weight: 700; color: var(--gold-200); } .cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--cream); } .cal__dow span { padding: .5rem .3rem; text-align: center; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--t-accent); } /* Heti sor: 1. rács-sor a napszámok, alatta sorokban az esemény-sávok */ .cal__week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(26px, auto); border-top: 1px solid var(--line); min-height: 116px; padding-bottom: .5rem; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 7) 100%; background-position: -1px 0; } .cal__week:last-of-type { border-radius: 0 0 15px 15px; } /* Hétvége-oszlopok (szo+vas) finom aranytónusa */ .cal__week::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(200% / 7); background: rgba(200, 161, 75, .07); pointer-events: none; } .cal__d { grid-row: 1; padding: .4rem .55rem; font-weight: 700; color: var(--ink); font-size: .92rem; } .cal__d--we { color: var(--wine-500); } .cal__d--today b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--t-strong); } /* Esemény-sáv (több napos: átívelő; hét/hónap-határon "levágott" sarok) */ .cal__bar { position: relative; z-index: 2; /* a mobil nap-koppintó felület (.cal__hit) fölött marad kattinthatónak */ display: block; margin: 2px 5px; padding: .22rem .6rem; border-radius: 7px; font-size: .78rem; font-weight: 700; text-decoration: none; min-height: 24px; } .cal__bar--cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; } .cal__bar--cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; } /* Hover: árnyék + aláhúzás — brightness-szűrő NEM, mert a filter a gyerek hover-kártyára is hatna (kifakult, túl világos kártya). */ .cal__bar:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); z-index: 20; } .cal__bar:hover .cal__bar-t { text-decoration: underline; } .cal__bar:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; } .cal__bar-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hover-előnézet: világos mini-kártya képpel — fókuszra is megjelenik. Felépítés: kép → cím (szeriff) → borvörös dátum → helyszín → címkék. */ .cal-tip { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 264px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(43, 20, 24, .35); color: var(--ink); white-space: normal; font-weight: 400; font-size: .84rem; line-height: 1.45; overflow: hidden; } .cal-tip--r { left: auto; right: 0; } .cal-tip__img { display: block; width: 100%; height: 118px; object-fit: cover; } .cal-tip__body { display: block; padding: .8rem .95rem .95rem; } .cal-tip b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; color: var(--ink); margin-bottom: .2rem; } .cal-tip__date { display: block; color: var(--t-accent); font-weight: 700; margin-bottom: .2rem; } .cal-tip__loc { display: block; color: var(--muted); } .cal-tip__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; } /* A kártya címkéi kissé sötétebb árnyalatot kapnak a jobb láthatóságért */ .cal-tip .tag { background: #e3d2b4; color: var(--t-strong); } .cal-tip .tag--free { background: var(--tint-success); color: var(--t-success); } .cal__bar:hover .cal-tip, .cal__bar:focus-visible .cal-tip { display: block; } /* Nap-fejléc: hosszú név asztali, rövidítés mobil nézetben */ .cal__dow .dow-abbr { display: none; } /* Nézetváltó, agenda-lista és nap-koppintó felület — alapból REJTVE (csak mobilon kapcsolódnak be, lásd a @media (max-width: 760px) blokkot). A base szabályoknak MEG KELL előzniük a media blokkot, mert a nézetváltó láthatósága azonos specifikusságú (source-order dönt). */ .cal-viewtoggle { display: none; } .cal-agenda { display: none; } .cal__hit { display: none; } /* Agenda-kártyák stílusa (csak mobilon jelennek meg, de itt írjuk le egyszer). */ .cal-agenda { padding: .35rem 0 .7rem; } .cal-agenda__empty { padding: 1.4rem 1rem; text-align: center; color: var(--muted); } .cal-agenda__day { display: flex; align-items: baseline; gap: .5rem; padding: .85rem .9rem .3rem; } .cal-agenda__daynum { font-family: Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--t-accent); } .cal-agenda__dow { font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .cal-agenda__ev { display: flex; gap: .65rem; margin: .3rem .8rem; padding: .6rem .7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 4px rgba(74, 14, 28, .05); text-decoration: none; color: var(--ink); } .cal-agenda__ev:active { background: var(--cream); } .cal-agenda__stripe { width: 5px; flex: none; border-radius: 3px; } .cal-agenda__body { min-width: 0; } .cal-agenda__t { display: block; font-weight: 700; font-size: .98rem; line-height: 1.25; color: var(--t-strong); } .cal-agenda__sub { display: block; font-size: .82rem; color: var(--muted); margin-top: .15rem; } .cal-agenda__free { display: inline-block; font-size: .68rem; font-weight: 800; color: var(--t-success); background: var(--tint-success); padding: .05em .5em; border-radius: 999px; margin-left: .4rem; vertical-align: middle; } /* Kiemelt esemény a naptárban: arany csillag a cím előtt (rács-sáv, agenda, nap-lap). A rács-sávon a csillag színét a PHP adja inline (halványarany, arany sávon fehér). */ .cal__star { font-size: .85em; } .cal-agenda__star, .day-sheet__star { color: var(--gold); } /* Hover-kártya csak hoverképes eszközön (touch-on koppintás = navigáció) */ @media (hover: none) { .cal__bar:hover .cal-tip { display: none; } } /* Mobil: kompakt rács — a sávok szöveg nélküli színes csíkok (a „Rács" nézetben) */ @media (max-width: 760px) { .cal__dow .dow-full { display: none; } .cal__dow .dow-abbr { display: inline; } .cal-toolbar { padding: .7rem .9rem; } .cal-toolbar__month { font-size: 1.15rem; } .cal-nav__btn { width: 34px; height: 34px; font-size: 1.05rem; } .cal-nav__today { padding: .4rem .75rem; font-size: .8rem; } .cal-legend { padding: .5rem .9rem; gap: .35rem .9rem; font-size: .72rem; } .cal__week { min-height: 64px; grid-auto-rows: minmax(12px, auto); padding-bottom: .35rem; } .cal__d { font-size: .78rem; padding: .25rem .35rem; } .cal__d--today b { width: 20px; height: 20px; } .cal__bar { height: 12px; min-height: 12px; padding: 0; margin: 2px 3px; border-radius: 4px; } .cal__bar-t { display: none; } /* Nézetváltó megjelenítése (szegmentált vezérlő) */ .cal-viewtoggle { display: flex; gap: .35rem; padding: .55rem .7rem; background: var(--cream); border-bottom: 1px solid var(--line); } .cal-viewtoggle__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .6rem; border: 1px solid var(--line); background: var(--paper); color: var(--t-accent); font-weight: 700; font-size: .85rem; border-radius: 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cal-viewtoggle__btn svg { width: 15px; height: 15px; flex: none; } .cal-viewtoggle__btn.is-active { background: var(--wine-700); color: #fff; border-color: var(--t-accent); } /* Lista („Agenda") nézet: az agenda látszik, a rács rejtve */ .cal.is-list .cal-agenda { display: block; } .cal.is-list .cal__dow, .cal.is-list .cal__week { display: none; } /* Rács nézet: az agenda rejtve, a nap-koppintó felületek aktívak */ .cal.is-grid .cal-agenda { display: none; } .cal.is-grid .cal__hit { display: block; position: absolute; top: 0; bottom: 0; width: calc(100% / 7); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; /* a színes sávok (z-index: 2) fölöttük maradnak kattinthatónak */ -webkit-tap-highlight-color: rgba(114, 47, 55, .12); } } /* ---------- Nap-lap (felugró napi eseménylista) ---------- */ .day-sheet[hidden] { display: none; } .day-sheet { position: fixed; inset: 0; z-index: 1000; } .day-sheet__backdrop { position: absolute; inset: 0; background: rgba(40, 10, 18, .5); } .day-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-radius: 18px 18px 0 0; padding: 1rem 1.1rem 1.5rem; max-height: 75vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); } .day-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; } .day-sheet__title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.15rem; color: var(--t-strong); } .day-sheet__close { border: none; background: var(--tint); color: var(--t-accent); width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; } .day-sheet__item { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .3rem; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; } .day-sheet__item:first-child { border-top: none; } .day-sheet__item:hover { color: var(--t-accent); } .day-sheet__dot { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: .28rem; } .day-sheet__body { min-width: 0; } .day-sheet__name { display: block; font-weight: 700; color: var(--t-strong); line-height: 1.25; } .day-sheet__sub { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; } .day-sheet__free { display: inline-block; font-size: .68rem; font-weight: 800; color: var(--t-success); background: var(--tint-success); padding: .05em .5em; border-radius: 999px; margin-left: .4rem; vertical-align: middle; } @media (min-width: 561px) { .day-sheet__panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); border-radius: 16px; } } /* ---------- Szűrő tabok (aláhúzós) ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line); } .tabs a { padding: .65rem .15rem; margin-bottom: -1px; font-weight: 600; font-size: 1.05rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .tabs a:hover { color: var(--t-accent); } .tabs a[aria-current="page"] { color: var(--t-strong); border-bottom-color: var(--t-accent); font-weight: 700; } /* ---------- Fazetta szűrők (borvidék, kategória) ---------- */ .facets { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0 0 1.75rem; } .facets__filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .facets__sort { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .facets__sort-label { color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; } /* Mobil: a rendezés saját sort kap, balra zárva (a szűrők alá igazítva) */ @media (max-width: 760px) { .facets__sort { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; } } /* Szabadszavas kereső a lista oldalon */ .facets__search { flex: 1 1 100%; display: flex; align-items: center; gap: .55rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0 .9rem; } .facets__search:focus-within { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(114, 47, 55, .12); } .facets__search-icon { width: 18px; height: 18px; color: var(--muted); flex: none; } .facets__search input { flex: 1; min-width: 0; border: none; background: transparent; padding: .7rem 0; font: inherit; font-size: 1rem; color: var(--ink); outline: none; } .facets__search-clear { color: var(--muted); font-size: 1.3rem; line-height: 1; text-decoration: none; padding: 0 .2rem; } .facets__search-clear:hover { color: var(--t-accent); } /* Multiselect szűrő legördülő (details + checkbox) */ .facet { position: relative; } .facet__toggle { list-style: none; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--t-accent); font-weight: 600; font-size: .95rem; cursor: pointer; user-select: none; } .facet__toggle::-webkit-details-marker { display: none; } .facet__toggle:hover { border-color: var(--gold); } .facet[open] .facet__toggle { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(114, 47, 55, .12); } .facet__chev { width: 14px; height: 14px; transition: transform .15s ease; } .facet[open] .facet__chev { transform: rotate(180deg); } .facet__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--wine-700); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; } .facet__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 290px; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(74, 14, 28, .16); padding: .4rem; } .facet__opt { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; font-size: .95rem; color: var(--ink); } .facet__opt:hover { background: var(--tint); } .facet__opt input { width: 17px; height: 17px; accent-color: var(--t-accent); cursor: pointer; flex: none; } .facet-select { appearance: none; -webkit-appearance: none; font: inherit; font-size: .95rem; font-weight: 600; color: var(--t-accent); background-color: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .6rem 2.3rem .6rem 1.1rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23722f37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; } .facet-select:hover { border-color: var(--gold); } .facet-select:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(114, 47, 55, .12); } .facets__btn { border: none; background: var(--wine-700); color: var(--on-wine); font-weight: 700; padding: .55rem 1.2rem; border-radius: 999px; cursor: pointer; } .facets__clear { color: var(--muted); font-weight: 600; font-size: .9rem; text-decoration: none; } .facets__clear:hover { color: var(--t-accent); } /* JS bekapcsolva a lista oldalon: a legördülő automatikusan szűr, a gomb felesleges. (A naptáron a gomb látszik, mert ott teljes újratöltéssel szűrünk.) */ .js #esemenyek-region .facets__btn { display: none; } /* Részleges újratöltés alatti halványítás */ #esemenyek-region.is-loading { opacity: .55; transition: opacity .12s ease; } /* ---------- Esemény szekció + kártyarács ---------- */ .events-section { padding: 2.5rem 0; } .events-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .events-section__head h2 { margin: 0; color: var(--t-strong); font-size: clamp(1.4rem, 3.5vw, 1.9rem); } .events-section__more { color: var(--t-accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .events-section__more:hover { color: var(--gold); } .events-grid { display: grid; /* auto-fit: a kártyák kitöltik a sort (üres sávok összecsuknak) */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } /* ---------- Esemény kártya ---------- */ .event-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .event-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(74, 14, 28, .15); } .event-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--wine-900); } .event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-card__badge { position: absolute; top: .6rem; left: .6rem; background: var(--gold); color: var(--t-strong); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .55rem; border-radius: 6px; } .event-card__body { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: 1rem 1.1rem 1.2rem; } .event-card__date { margin: 0; color: var(--t-accent); font-weight: 700; font-size: .9rem; } .event-card__title { margin: 0; font-size: 1.15rem; line-height: 1.25; } .event-card__title a { color: var(--ink); text-decoration: none; } .event-card__title a:hover { color: var(--t-accent); } .event-card__meta { margin: 0; color: var(--muted); font-size: .92rem; } .event-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; } .tag { font-size: .75rem; font-weight: 600; background: var(--tint); color: var(--t-accent); padding: .2rem .55rem; border-radius: 999px; } .tag--free { background: var(--tint-success); color: var(--t-success); } /* ---------- Státusz-pirulák ---------- */ .status { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .28rem .55rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; } .status.is-live { background: var(--wine-700); color: #fff; } .status.is-soon { background: var(--gold); color: var(--t-strong); } .status.is-last { background: #b5562a; color: #fff; } .status.is-free { background: var(--tint-success); color: var(--t-success); } /* ---------- Hónapokra bontott sor-lista ---------- */ .events-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .events-list__month { display: flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; background: var(--tint); color: #7a6f66; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; } .events-list__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .event-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); text-decoration: none; color: inherit; } .event-row:hover { background: var(--tint); } .date-block { flex: none; width: 54px; text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: .35rem 0; line-height: 1.05; } .date-block__day { display: block; font-size: 1.3rem; font-weight: 700; color: var(--t-accent); } .date-block__mon { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); } .event-row__main { flex: 1; min-width: 0; } .event-row__title { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .event-row__sub { display: block; margin-top: .15rem; color: var(--muted); font-size: .9rem; } .event-row__right { display: flex; align-items: center; gap: 1rem; white-space: nowrap; } .event-row__loc { color: var(--t-accent); font-weight: 600; white-space: nowrap; } .event-row__chev { color: var(--t-accent); font-size: 1.1rem; } /* ---------- Lábléc ---------- */ .site-footer { flex-shrink: 0; background: var(--wine-900); color: #e3d6c8; } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.25rem 1.5rem; } .site-footer__top { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem; } .site-footer__logo { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.3rem; color: var(--on-wine); } .site-footer__logo b { color: var(--gold); } .site-footer__brand p { margin: .7rem 0 0; max-width: 34ch; color: #c9b6a8; font-size: .92rem; line-height: 1.6; } .site-footer__col { display: flex; flex-direction: column; gap: .55rem; } .site-footer__col h3 { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); } .site-footer__col a { color: #e3d6c8; text-decoration: none; font-size: .92rem; } .site-footer__col a:hover { color: #fff; } .site-footer__col a.site-footer__col-all { color: var(--gold-200); font-size: .85rem; margin-top: .1rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .12); } .site-footer__col a.site-footer__col-all:hover { color: #fff; } .site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #b9a799; } @media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } /* Mobilon csak a jogi linkek (tömören), a többi oszlop és a leírás rejtve */ @media (max-width: 640px) { .site-footer__inner { padding: 1.5rem 1.25rem; } .site-footer__top { display: block; } .site-footer__brand, .site-footer__col:not(.site-footer__col--legal) { display: none; } .site-footer__col--legal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.25rem; } .site-footer__col--legal h3 { display: none; } .site-footer__bottom { flex-direction: column; align-items: center; text-align: center; margin-top: 1.25rem; } } /* ---------- Jogi oldalak ---------- */ .legal { max-width: 760px; margin: 0 auto; } .legal-effective { color: var(--muted); font-size: .85rem; } .legal h1 { color: var(--t-strong); margin-bottom: .5rem; } .legal h2 { color: var(--t-accent); margin-top: 1.8rem; font-size: 1.2rem; } .legal p, .legal li { color: #4a3b36; } .legal address { font-style: normal; line-height: 1.9; } .legal-sec h3 { margin: 1rem 0 .3rem; color: var(--t-accent); font-size: .98rem; } .legal-sec ul { margin: .5rem 0; padding-left: 1.15rem; } .legal-sec li { margin: .2rem 0; } /* Jogi oldalak „klasszikus szerződés" stílusa (ÁSZF + adatvédelem): középre zárt cím, dupla arany vonal, keretes „Röviden" doboz, § jelöléses, középre zárt szakaszcímek */ .legal-formal-title { text-align: center; } .legal-formal-effective { text-align: center; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--muted); margin: .2rem 0 0; } .legal-formal-rule { border: 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); height: 4px; width: 180px; margin: 1.2rem auto 1.6rem; } .legal-formal-brief { border: 1px solid var(--gold-200); border-radius: 10px; background: var(--tint-gold); padding: .9rem 1.2rem; font-size: .92rem; color: #6b5630; margin-bottom: .6rem; } .legal-formal-brief b { color: var(--t-strong); } .legal-formal-brief ul { margin: .35rem 0 0; padding-left: 1.15rem; } .legal-formal-brief li { margin: .18rem 0; } .legal-formal-sec { margin-top: 1.7rem; } .legal-formal-sec h2 { font-family: Georgia, "Times New Roman", serif; text-align: center; color: var(--t-strong); font-size: 1.08rem; letter-spacing: .06em; margin: 0 0 .6rem; } .legal-formal-par { display: block; color: var(--gold); font-size: .85rem; letter-spacing: .2em; margin-bottom: .15rem; } /* Halvány, középre zárt kiegészítő megjegyzés a hatálydátum alatt */ .legal-formal-note { text-align: center; color: var(--muted); font-size: .85rem; margin: .4rem 0 0; } /* Alszakaszok és listák a szakaszokon belül (balra zárva, jól olvashatóan) */ .legal-formal-sec h3 { margin: 1rem 0 .3rem; color: var(--t-accent); font-size: .98rem; } .legal-formal-sec ul { margin: .5rem 0; padding-left: 1.15rem; } .legal-formal-sec li { margin: .2rem 0; } /* Impresszum („letisztult dokumentum"): arany vonal a cím alatt, elválasztott szekciók, címke–érték rács az adatokhoz */ .legal-rule { width: 64px; height: 3px; background: var(--gold); border: 0; margin: .9rem 0 1.6rem; } .legal-sec { border-top: 1px solid var(--line); padding-top: 1.15rem; margin-top: 1.5rem; } .legal-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; } .legal-sec h2 { margin-top: 0; } .legal-kv { display: grid; grid-template-columns: 170px 1fr; row-gap: .15rem; column-gap: 1rem; margin: .6rem 0; line-height: 1.55; } .legal-kv dt { color: var(--muted); font-size: .88rem; padding-top: .12rem; } .legal-kv dd { margin: 0; color: var(--ink); } @media (max-width: 560px) { .legal-kv { grid-template-columns: 1fr; row-gap: 0; } .legal-kv dd { margin-bottom: .5rem; } } .legal .legal-note { background: var(--tint-gold); border: 1px solid var(--gold-200); border-radius: 10px; padding: .8rem 1rem; font-size: .92rem; color: #6b5630; } /* ---------- Eseménytérkép ---------- */ .map-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; padding: 1.5rem 0 .25rem; } .map-head h1 { margin: 0; color: var(--t-strong); } .map-head__count { color: var(--muted); font-weight: 600; } /* ---------- Térkép oldal: felső sáv + bal lista + térkép (split) ---------- */ .map-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.75rem; background: var(--paper); border-bottom: 1px solid var(--line); } .map-topbar h1 { margin: 0; color: var(--t-strong); font-size: 1.35rem; } .map-topbar__sub { margin: 0; color: var(--muted); font-size: .9rem; } .map-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 480px; } .map-list { overflow-y: auto; padding: 1rem 1.1rem; background: var(--cream); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .55rem; } .map-list__hint { margin: 0 0 .2rem; font-size: .8rem; color: var(--muted); } .map-item { display: flex; gap: .8rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .7rem; text-decoration: none; color: inherit; } .map-item:hover, .map-item.is-active { border-color: var(--gold); box-shadow: var(--shadow); } .map-item__img { flex: none; width: 64px; height: 52px; object-fit: cover; border-radius: 8px; } .map-item__main { flex: 1; min-width: 0; } .map-item__t { display: block; font-weight: 700; color: var(--t-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Kiemelt esemény a térkép-listában: arany „Kiemelt" pirula a cím fölött */ .map-item__pill { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--gold); color: #fff; border-radius: 999px; padding: .13rem .5rem; margin-bottom: .15rem; } .map-item__d { display: block; font-size: .8rem; font-weight: 700; color: var(--t-accent); } .map-item__s { display: block; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-split .event-map { width: auto; height: 100%; min-height: 0; } @media (max-width: 860px) { /* Mobil: térkép felül, lista alatta (a lista görgethető marad) */ .map-split { grid-template-columns: 1fr; height: auto; min-height: 0; } .map-split .event-map { order: 1; height: 48vh; min-height: 300px; } .map-list { order: 2; max-height: 48vh; border-right: none; border-top: 1px solid var(--line); } } .event-map { width: 100%; height: 72vh; min-height: 460px; background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); /* Saját, alacsony rétegkontextus: a Leaflet magas z-indexű rétegei (panes/kontrollok, akár 1000) így NEM lógnak a sticky fejléc (z-index:100) fölé — a mobil menü látszik. */ position: relative; z-index: 0; } /* Szőlőfürt jelölő (Leaflet divIcon) + darabszám-jelvény */ .grape-pin { color: #fff; } .grape-pin__icon { display: grid; place-items: center; width: 100%; height: 100%; background: var(--wine-700); border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); } .grape-pin__icon svg { width: 56%; height: 56%; } .grape-pin__count { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--gold); color: var(--t-strong); border: 2px solid var(--paper); border-radius: 999px; font-weight: 700; font-size: 11px; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } /* Egyetlen esemény: egyszerű pont (a paletta színeiben) */ .grape-dot { background: var(--wine-700); border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } /* Kiemelt esemény a térképen: arany borérem-jelölő — korong finom belső gyűrűvonallal + borvörös mini szőlőfürt (mint a borversenyek érmei). Kiemeltet tartalmazó fürt: mini érem a jobb felső vállon. */ .feat-medal svg, .grape-pin__feat svg { display: block; width: 100%; height: 100%; fill: var(--wine-900); filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, .4)); } .feat-medal .feat-medal__disc, .grape-pin__feat .feat-medal__disc { fill: var(--gold); stroke: var(--paper); stroke-width: 1.6; } .feat-medal .feat-medal__ring, .grape-pin__feat .feat-medal__ring { fill: none; stroke: var(--wine-900); stroke-width: 1; opacity: .35; } .grape-pin__feat { position: absolute; top: -10px; right: -7px; width: 17px; height: 17px; } /* Lekerekített térkép-vezérlők (+/- és „helyzetem”) */ .leaflet-control-zoom, .locate-control { border: none !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .14) !important; } .leaflet-control-zoom a, .locate-control a { width: 45px !important; height: 45px !important; line-height: 45px !important; color: var(--t-accent); background: var(--paper); display: grid !important; place-items: center !important; font-size: 1.5rem !important; } .leaflet-control-zoom a:hover, .locate-control a:hover { background: var(--tint-strong); color: var(--t-strong); } .locate-control { margin-top: 12px !important; } .locate-control svg { width: 24px; height: 24px; display: block; } /* Térkép popup — esemény mini-kártya */ .event-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 8px 28px rgba(74, 14, 28, .22); } .event-popup .leaflet-popup-content { margin: 0; width: 260px !important; } /* Ha a kártya nem fér ki (maxHeight), belül görgethető — a Leaflet szürke elválasztó szegélyei nélkül */ .event-popup .leaflet-popup-scrolled { border-top: 0; border-bottom: 0; } /* Mobilon kisebb kártya (a JS is 224px-szel nyitja) + alacsonyabb kép */ @media (max-width: 560px) { .event-popup .leaflet-popup-content { width: 224px !important; } .event-popup .map-card__media { height: 88px; } } .event-popup .leaflet-popup-close-button { width: 26px !important; height: 26px !important; top: 7px !important; right: 7px !important; color: #fff !important; background: rgba(0, 0, 0, .4); border-radius: 50%; font: 700 16px/26px Arial, sans-serif !important; text-align: center; } .event-popup .leaflet-popup-close-button:hover { background: rgba(0, 0, 0, .6); color: #fff !important; } .map-card__media { display: block; height: 120px; background: var(--wine-900); } .map-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .map-card__body { padding: .8rem .9rem 1rem; } .map-card__status { margin-bottom: .45rem; } .map-card__status .status { margin-left: 0; } .map-card__title { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--ink) !important; text-decoration: none; margin-bottom: .3rem; } .map-card__title:hover { color: var(--t-accent) !important; } .map-card__date { color: var(--t-accent); font-weight: 700; font-size: .85rem; margin-bottom: .15rem; } .map-card__loc { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; } .map-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; } .map-card__btn { display: block; text-align: center; padding: .6rem; color: var(--on-wine) !important; } /* ---------- Esemény részletoldal ---------- */ .event-detail { max-width: 820px; margin: 0 auto; } .event-detail__back { display: inline-block; margin-bottom: 1rem; color: var(--t-accent); font-weight: 600; text-decoration: none; } .event-detail__back:hover { color: var(--gold); } .event-detail__img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); } .event-detail__title { margin: 1.2rem 0 .5rem; color: var(--t-strong); font-size: clamp(1.6rem, 4vw, 2.4rem); } .event-detail__meta { margin: 0 0 .35rem; color: var(--t-accent); font-weight: 700; } .event-detail__loc { margin: 0 0 .9rem; color: var(--muted); } .event-detail__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; } .event-detail__lead { font-size: 1.15rem; color: #4a3b36; } .event-detail__desc { color: #4a3b36; line-height: 1.8; } :root[data-theme="dark"] .event-detail__desc { color: var(--ink); } .event-detail__desc p { margin: 0 0 .9rem; } .event-detail__desc ul, .event-detail__desc ol { margin: 0 0 .9rem 1.5rem; padding: 0; } .event-detail__desc li { margin: .2rem 0; } .event-detail__desc h3, .event-detail__desc h4 { margin: 1.2rem 0 .4rem; color: var(--t-strong); } .event-detail__desc a { color: var(--t-accent); text-decoration: underline; } .event-detail__desc blockquote { margin: 0 0 .9rem; padding: .4rem 0 .4rem 1rem; border-left: 3px solid var(--gold); color: var(--t-strong); font-style: italic; } .event-detail__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } /* ===== Részletoldal — hero (tömör címsáv) + reszponzív rács ===== */ /* Már csak az admin előnézetek (admin/esemeny-preview.php, admin/jelolt-preview.php) használják; a publikus esemeny.php az alábbi edh-* (immerzív) elrendezésre váltott. */ .event-detail--hero { max-width: 1040px; } .ed-hero { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.5rem; } .ed-hero__img { position: relative; } .ed-hero__img img { display: block; width: 100%; height: 320px; object-fit: cover; } .ed-hero__badge { position: absolute; top: .8rem; left: .8rem; background: var(--gold); color: var(--t-strong); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .55rem; border-radius: 6px; } .ed-hero__band { background: linear-gradient(135deg, var(--wine-700), var(--wine-900)); color: #fff; padding: 1.1rem 1.5rem; } .ed-hero__band h1 { margin: 0 0 .25rem; color: #fff; font-size: clamp(1.5rem, 3.8vw, 2.2rem); } .ed-hero__when { color: var(--gold-200); font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ed-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; grid-template-areas: "main aside" "main map"; } .ed-main { grid-area: main; } .ed-aside { grid-area: aside; } .ed-map { grid-area: map; } .ed-main .event-detail__tags { margin: 0 0 1.1rem; } .ed-info { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: .35rem 1.1rem; box-shadow: var(--shadow); } .ed-info__row { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .ed-info__row:last-child { border-bottom: none; } .ed-info__ic { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--wine-700); color: #fff; } .ed-info__ic svg { width: 17px; height: 17px; } .ed-info__k { display: block; font-size: .72rem; font-weight: 700; color: var(--t-accent); text-transform: uppercase; letter-spacing: .03em; } .ed-info__v { display: block; font-weight: 700; color: var(--ink); } .ed-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; } .ed-actions .btn { width: 100%; } .ed-map__canvas { height: 190px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; } .ed-map__link { margin: .5rem 0 0; font-size: .85rem; } .ed-map__link a { color: var(--t-accent); font-weight: 700; text-decoration: none; } .ed-map__link a:hover { color: var(--gold); } /* ---------- Borvidék-oldal (immerzív hero + tény-sáv + eseménylista) ---------- */ .rv-hero { position: relative; overflow: hidden; color: #fff; min-height: clamp(300px, 42vh, 440px); display: flex; } .rv-hero__photo { position: absolute; inset: 0; z-index: 0; } .rv-hero__photo img, .rv-hero__photo svg { width: 100%; height: 100%; object-fit: cover; display: block; } .rv-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(43,14,20,.28) 0%, rgba(58,18,26,.22) 40%, rgba(40,12,18,.88) 100%); } .rv-hero__in { position: relative; z-index: 2; align-self: flex-end; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem 2rem; } .rv-crumb { font-size: .84rem; color: rgba(247,236,223,.82); padding-top: 1.4rem; margin-bottom: 18px; } .rv-crumb a { color: rgba(247,236,223,.82); text-decoration: none; } .rv-crumb a:hover { color: var(--gold-200); } .rv-crumb span { color: var(--gold-200); } .rv-eyebrow { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-200); font-weight: 700; margin: 0 0 8px; } .rv-hero h1 { margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.05; text-shadow: 0 2px 16px rgba(0,0,0,.5); } .rv-lead { margin: 12px 0 0; max-width: 60ch; color: #f4e6d6; font-size: 1.05rem; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* Tények „pill"-ként a hero-képen (C dizájn) */ .rv-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .rv-pill { font-size: .8rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .28); padding: 5px 12px; border-radius: 999px; text-shadow: 0 1px 4px rgba(0, 0, 0, .4); } .rv-pill b { color: var(--gold-200); } .rv-body { max-width: var(--maxw); margin: 0 auto; padding: 26px 1.75rem 46px; } .rv-sectitle { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; } .rv-sectitle h2 { margin: 0; font-size: 1.5rem; color: var(--t-strong); font-family: Georgia, "Times New Roman", serif; } .rv-rule { flex: 1; height: 1px; background: var(--line); } .event-rows { display: flex; flex-direction: column; gap: .6rem; } .rv-empty { background: var(--paper); border: 1px dashed var(--line); border-radius: 14px; padding: 2rem; text-align: center; color: var(--muted); } .rv-empty .btn { margin: .3rem .3rem 0; } .rv-back { margin: 1.5rem 0 0; } .rv-back a { color: var(--t-accent); font-weight: 700; text-decoration: none; } .rv-back a:hover { color: var(--gold); } .status.is-featured { background: var(--gold); color: var(--t-strong); } /* Borvidékek áttekintő — magazin-mozaik: éles fotók, alul sötétített sáv, a legtöbb eseményt kínáló borvidékek nagy (2×2) kiemelt csempét kapnak */ .region-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; grid-auto-flow: dense; gap: 12px; margin-top: 1.25rem; } .region-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; text-decoration: none; color: #fff; box-shadow: var(--shadow); background: var(--wine-900); } .region-tile--feat { grid-column: span 2; grid-row: span 2; } .region-tile--noimg { background: linear-gradient(150deg, #7c2e3a, var(--wine-900)); } .region-tile__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s ease; } .region-tile:hover .region-tile__bg { transform: scale(1.05); } .region-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(30, 8, 14, 0) 42%, rgba(30, 8, 14, .78) 100%); } .region-tile__body { position: relative; z-index: 2; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; } .region-tile__rule { width: 34px; height: 2px; background: var(--gold); border-radius: 2px; margin-bottom: .15rem; transition: width .3s ease; } .region-tile:hover .region-tile__rule { width: 60px; } .region-tile__name { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 600; line-height: 1.15; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); } .region-tile--feat .region-tile__name { font-size: 1.8rem; } .region-tile__count { position: absolute; top: .7rem; right: .7rem; z-index: 2; font-size: .72rem; font-weight: 800; color: var(--t-strong); background: var(--gold-200); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .region-tile__grapes { font-size: .78rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 980px) { .region-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .region-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } .region-tile--feat .region-tile__name { font-size: 1.45rem; } } @media (prefers-reduced-motion: reduce) { .region-tile__bg, .region-tile__rule { transition: none; } } @media (max-width: 760px) { .ed-grid { grid-template-columns: 1fr; grid-template-areas: "main" "map" "aside"; } .ed-hero__img img { height: 220px; } } /* ===== Részletoldal V2 — immerzív (magazinos) hero, belelógó sticky infókártyával ===== */ /* Teljes szélességű hero, a cím a képre írva; a jobb oldali kártya belelóg a heróba és görgetéskor követ. Mobil: egy oszlop, a kártya a leírás alá kerül. */ .edh { position: relative; height: clamp(420px, 56vh, 560px); } .edh__img { position: absolute; inset: 0; } .edh__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .edh__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 29, 32, .15) 0%, rgba(74, 14, 28, .25) 45%, rgba(43, 20, 24, .88) 100%); } .edh__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem 2rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .edh__back { position: absolute; top: 1.2rem; color: #fff; opacity: .85; text-decoration: none; font-weight: 700; font-size: .9rem; } .edh__back:hover { opacity: 1; color: var(--gold-200); } .edh__tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; } .edh__tags .tag { background: rgba(255, 253, 249, .18); color: #fff; backdrop-filter: blur(4px); } .edh__tags .tag--featured { background: var(--gold); color: var(--t-strong); } .edh h1 { margin: 0 0 .5rem; color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18em; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); } .edh__when { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--gold-200); font-weight: 700; font-size: 1.05rem; } .edh__when svg { width: 18px; height: 18px; flex: none; } .edh__when .status { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); } .edh-layout { max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 2.5rem; align-items: start; } .edh-main { padding-top: 2rem; max-width: 68ch; } .edh-lead { font-size: 1.2rem; font-weight: 600; color: var(--t-strong); margin: 0 0 1.2rem; } .edh-aside { position: sticky; top: 88px; margin-top: -110px; z-index: 2; } .edh-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 14px 40px rgba(74, 14, 28, .16); } .ed-info--flat { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; } .edh-map { height: 170px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; margin-top: 1rem; position: relative; z-index: 0; } @media (min-width: 901px) { /* A cím ne fusson a belelógó kártya alá */ .edh__inner { padding-right: calc(350px + 4rem); } } @media (max-width: 900px) { .edh { height: 380px; } .edh-layout { grid-template-columns: 1fr; gap: 1.2rem; } .edh-aside { position: static; margin-top: 1rem; } .edh-card { box-shadow: var(--shadow); } } .btn { display: inline-block; padding: .7rem 1.4rem; border-radius: 10px; font-weight: 700; text-decoration: none; } .btn--primary { background: var(--wine-700); color: var(--on-wine); } .btn--primary:hover { background: var(--wine-900); } .btn--ghost { background: transparent; color: var(--t-accent); border: 1px solid var(--line); } .btn--ghost:hover { border-color: var(--gold); } .map-popup__free { display: inline-block; margin-top: .25rem; background: #e6efe0; color: #3f5a2a; font-weight: 700; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; } .map-list { margin: 0; padding-left: 1.1rem; line-height: 1.9; } .map-list strong { color: var(--t-strong); } /* ---------- Admin (modern, védett felület) ---------- */ .admin-body { background: #f1ece3; color: var(--ink); } /* Felső navigáció — közös, ragadós, aktív menüpont-kiemeléssel */ .adminnav { position: sticky; top: 0; z-index: 100; background: rgba(255, 253, 249, .92); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(74, 14, 28, .05); } .adminnav__inner { max-width: 1180px; margin: 0 auto; padding: .6rem 1.25rem; display: flex; align-items: center; gap: 1rem; } .adminnav__brand { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 800; color: var(--t-strong); text-decoration: none; font-size: 1.02rem; letter-spacing: -.01em; } .adminnav__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(140deg, var(--wine-700), var(--wine-900)); color: var(--gold-200); font-size: .7rem; } .adminnav__tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--t-accent); background: var(--tint-strong); padding: .15rem .4rem; border-radius: 5px; } .adminnav__menu { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; } .adminnav__link { padding: .5rem .8rem; border-radius: 9px; text-decoration: none; white-space: nowrap; color: var(--t-accent); font-weight: 700; font-size: .92rem; transition: background .12s ease, color .12s ease; } .adminnav__link:hover { background: #f3ecdd; color: var(--t-strong); } .adminnav__link.is-active { background: var(--wine-700); color: #fff; } .adminnav__side { display: flex; align-items: center; gap: .5rem; white-space: nowrap; } .adminnav__ext, .adminnav__logout { text-decoration: none; font-weight: 700; font-size: .86rem; padding: .45rem .75rem; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); } .adminnav__ext { color: var(--t-accent); } .adminnav__ext:hover { border-color: var(--gold); color: var(--t-strong); } .adminnav__logout { color: #8a2c12; border-color: #ecc9bd; } .adminnav__logout:hover { background: var(--tint-danger); border-color: #cd7a63; } @media (max-width: 760px) { .adminnav__inner { flex-wrap: wrap; gap: .6rem; } .adminnav__menu { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .1rem; gap: .35rem; } .adminnav__side { margin-left: auto; } } /* Rész-oldalak (szerkesztő, előnézet) vissza-fejléce */ .admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fffdf9; border-bottom: 1px solid var(--line); color: var(--t-strong); padding: .8rem 1.25rem; } .admin-bar__title { font-weight: 800; color: var(--t-strong); } .admin-bar a { color: var(--t-accent); text-decoration: none; font-weight: 700; font-size: .88rem; padding: .38rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); } .admin-bar a:hover { border-color: var(--gold); color: var(--t-strong); } .admin-bar__links { display: inline-flex; gap: .5rem; flex-wrap: wrap; } .admin-main { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 4.5rem; } .admin-main > h1 { margin: 0 0 1.25rem; color: var(--t-strong); font-size: 1.7rem; letter-spacing: -.01em; } .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; } .admin-head h1 { margin: 0; color: var(--t-strong); font-size: 1.7rem; letter-spacing: -.01em; } .admin-lead { margin: -.5rem 0 1.5rem; color: var(--muted); font-size: .95rem; } .admin-lead strong { color: var(--t-strong); } /* Belépő kártya */ .admin-login { max-width: 380px; margin: 4.5rem auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem 2rem; box-shadow: 0 20px 50px rgba(74, 14, 28, .12); } .admin-login h1 { margin: 0 0 1.5rem; font-size: 1.35rem; color: var(--t-strong); display: flex; align-items: center; gap: .55rem; } .admin-login h1::before { content: "🍇"; font-size: 1.15rem; } .admin-login label { display: block; font-weight: 700; font-size: .85rem; color: var(--t-strong); margin: .9rem 0 .35rem; } .admin-login input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; font: inherit; font-size: 1rem; background: var(--paper); } .admin-login input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 161, 75, .18); } .admin-login button { margin-top: 1.6rem; width: 100%; } .admin-error { background: var(--tint-danger); border: 1px solid #e9b8a8; color: #8a2c12; border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .92rem; } /* Táblák */ .admin-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); } .admin-table th, .admin-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; } .admin-table th { background: var(--tint); color: var(--t-strong); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; } .admin-table tbody tr:hover { background: #faf6ee; } .admin-table tr:last-child td { border-bottom: none; } .admin-empty { color: var(--muted); padding: 2.5rem 2rem; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: 14px; font-size: .95rem; } .admin-note { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; } .admin-pill { display: inline-block; margin-left: .4rem; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; } .admin-pill--draft { background: #f3ead6; color: #7a5a12; } /* Süti-sáv (consent) */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; background: var(--wine-900); color: var(--on-wine); box-shadow: 0 -6px 20px rgba(0, 0, 0, .25); } .cookie-bar__text { margin: 0; font-size: .88rem; max-width: 640px; } .cookie-bar__text a { color: var(--gold); } .cookie-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; } .cookie-bar__btn { font-size: .85rem; padding: .5rem .9rem; } .cookie-bar__btn--no { background: transparent; color: var(--on-wine); border: 1px solid rgba(255, 255, 255, .45); } .cookie-bar__btn--no:hover { border-color: var(--gold); color: var(--gold); } /* ---------- 18+ korellenőrző kapu (áttetsző, teljes képernyős) ---------- */ body.agegate-lock { overflow: hidden; } .agegate { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(43, 14, 20, .5); -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1); } .agegate.is-blocked { background: var(--wine-900); -webkit-backdrop-filter: none; backdrop-filter: none; } .agegate__card { width: 100%; max-width: 440px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem 1.9rem; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); } .agegate__mark { font-size: 2.4rem; line-height: 1; margin-bottom: .5rem; } .agegate__card h2 { margin: 0 0 .6rem; color: var(--t-strong); font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; } .agegate__card p { margin: 0 auto; color: var(--muted); max-width: 36ch; line-height: 1.55; } .agegate__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.4rem 0 1rem; } .agegate__actions .btn { min-width: 150px; } .agegate__law { font-size: .78rem; color: var(--muted); margin: .4rem 0 0; opacity: .85; } @media (max-width: 460px) { .agegate__actions .btn { min-width: 0; width: 100%; } } /* Admin: statisztika-csempék */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 0 0 1.75rem; } .admin-stat { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--shadow); } .admin-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--gold), var(--gold-200)); } .admin-stat__num { font-size: 1.8rem; font-weight: 800; color: var(--t-strong); line-height: 1.1; font-variant-numeric: tabular-nums; } .admin-stat__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--t-accent); font-weight: 800; } .admin-stat__sub { font-size: .8rem; color: var(--muted); } .admin-h2 { margin: 2rem 0 .9rem; font-size: 1.15rem; color: var(--t-strong); font-weight: 700; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .admin-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-table--narrow { max-width: 560px; } /* Admin: jelölt-dedup (gomb + tételes eredménylista) */ .admin-dedup-form { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 1.25rem; } .admin-dedup-form .admin-note { margin: 0; } .admin-dedup-list { margin: .45rem 0 0 1.2rem; padding: 0; } .admin-dedup-list li { margin: .15rem 0; } /* Admin: státusz-fülek, üzenet, művelet-gombok */ .admin-tabs { display: flex; gap: .5rem; margin: 0 0 1.5rem; flex-wrap: wrap; } .admin-tab { padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--t-accent); text-decoration: none; font-weight: 700; font-size: .9rem; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; } .admin-tab:hover { border-color: var(--gold); background: var(--paper); } .admin-tab.is-active { background: var(--wine-700); color: #fff; border-color: var(--t-accent); box-shadow: 0 4px 12px rgba(114, 47, 55, .28); } .admin-msg { background: var(--tint-success); border: 1px solid var(--line-success); color: var(--t-success); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.25rem; font-size: .92rem; } .admin-star { color: var(--gold); } .admin-actions-cell { white-space: nowrap; } .admin-actform { display: inline-block; margin: 0 .2rem .2rem 0; } .admin-btn { border: 1px solid var(--line); background: var(--paper); color: var(--t-accent); border-radius: 8px; padding: .4rem .7rem; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .admin-btn:hover { border-color: var(--gold); background: #fffdf7; } .admin-btn--go { background: var(--leaf); color: #fff; border-color: var(--leaf); } .admin-btn--go:hover { background: #4c5a32; border-color: #4c5a32; } .admin-btn--danger { background: var(--paper); color: #8a2c12; border-color: #e9b8a8; } .admin-btn--danger:hover { background: var(--tint-danger); border-color: #cd7a63; } .admin-link { display: inline-block; margin: 0 .2rem .2rem 0; padding: .4rem .7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--t-accent); text-decoration: none; font-weight: 700; font-size: .8rem; } .admin-link:hover { border-color: var(--gold); } /* Admin: URL-import doboz + segédszöveg a jelölt-soroknál */ .admin-import { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.35rem; margin: 0 0 1.5rem; box-shadow: var(--shadow); } .admin-import label { display: block; font-weight: 700; font-size: .9rem; color: var(--t-strong); margin-bottom: .6rem; } .admin-import__row { display: flex; gap: .5rem; flex-wrap: wrap; } .admin-import__row input { flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; font: inherit; font-size: 1rem; background: var(--paper); } .admin-import__row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 161, 75, .18); } .admin-sub { color: var(--muted); font-size: .85rem; } /* Admin: statisztika — tartalom-fülek */ .stat-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1.5rem; border-bottom: 2px solid var(--line); } .stat-tab { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; color: var(--muted); padding: .6rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: color .12s ease, background .12s ease; } .stat-tab:hover { color: var(--t-strong); background: #faf5ec; } .stat-tab.is-active { color: var(--t-strong); border-bottom-color: var(--t-accent); } .stat-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .stat-panel[hidden] { display: none; } /* Admin: statisztika — diagram-kártya */ .chart-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.25rem 1.1rem; margin: 0 0 1.25rem; box-shadow: var(--shadow); } .chart-card__title { margin: 0 0 .1rem; font-size: 1rem; color: var(--t-strong); font-weight: 700; } .chart-card__sub { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); } .chart__wrap { overflow-x: auto; } .chart__svg { width: 100%; min-width: 480px; height: auto; display: block; } .chart-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0 0 .7rem; } .chart-legend span { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink); font-weight: 600; } .chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } /* Admin: statisztika — rangsor sáv-lista */ .barlist { display: flex; flex-direction: column; gap: .65rem; margin: 0; } .barlist__row { display: flex; flex-direction: column; gap: .3rem; } .barlist__label { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--ink); } .barlist__label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barlist__label b { color: var(--t-strong); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; } .barlist__track { height: 10px; background: #efe7d8; border-radius: 999px; overflow: hidden; } .barlist__fill { height: 100%; border-radius: 999px; min-width: 2px; } /* Admin: beérkező e-mailek */ .mail-badge { display: inline-block; margin-left: .5rem; vertical-align: middle; font-size: .72rem; font-weight: 800; color: #fff; background: var(--wine-700); padding: .15rem .5rem; border-radius: 999px; } .mail-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wine-700); } .mail-row--unread td { font-weight: 700; } .mail-link { color: var(--ink); text-decoration: none; } .mail-link:hover { color: var(--t-accent); } .mailview { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); } .mailview__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); background: #faf6ee; } .mailview__subject { margin: 0 0 .6rem; font-size: 1.2rem; color: var(--t-strong); } .mailview__meta { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; color: var(--muted); margin-bottom: .8rem; } .mailview__meta strong { color: var(--ink); font-weight: 700; } .mailbody { padding: 1.2rem 1.35rem; white-space: pre-wrap; word-break: break-word; line-height: 1.65; color: var(--ink); } /* ---------- Sötét mód: kiegészítő felülírások + témaváltó gomb ---------- */ /* Témaváltó gomb a fejlécben (nap/hold ikon) */ .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--tint); color: var(--t-accent); cursor: pointer; flex: none; } .theme-toggle:hover { background: var(--tint-strong); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } /* Leaflet-elemek (alapból fehérek) sötét módban */ :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--paper); color: var(--ink); } :root[data-theme="dark"] .leaflet-bar a, :root[data-theme="dark"] .locate-control a { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); } :root[data-theme="dark"] .leaflet-bar a:hover, :root[data-theme="dark"] .locate-control a:hover { background: var(--tint); color: var(--t-strong); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(30, 17, 20, .75); color: var(--muted); } :root[data-theme="dark"] .leaflet-control-attribution a { color: var(--t-accent); } /* Sötétben az eseményképek ne világítsanak annyira */ :root[data-theme="dark"] .event-card img, :root[data-theme="dark"] .map-item__img, :root[data-theme="dark"] .cal-tip__img { filter: brightness(.88); }