/* Colours and font come from the database: lib.php writes :root{--bg,--surface,--ink,--ink2,--line,--accent,--brand,--font} into every page's (admin → Megjelenés). Nothing here fixes a colour. */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font:16px/1.55 var(--font, system-ui, sans-serif); } a{color:var(--accent)} img{max-width:100%;display:block} /* ---------- fejléc ---------- */ .bar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); } .bar-brand,.brand{ font-weight:700; font-size:18px; letter-spacing:.02em; color:var(--ink); text-decoration:none; } .bar-right{display:flex; align-items:center; gap:6px} .bar-toggle,.bar-lang{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:10px; cursor:pointer; } .bar-toggle span{font-size:20px; line-height:1} .bar-panel,.bar-langs{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 16px 14px; } .bar-panel.open,.bar-langs.open{display:block} .bar-panel a,.bar-langs button{ display:block; width:100%; text-align:left; padding:13px 4px; font-size:17px; color:var(--ink); text-decoration:none; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; font-family:inherit; } .bar-panel a:last-child,.bar-langs button:last-child{border-bottom:0} .bar-panel a.current,.bar-langs button.current{color:var(--accent); font-weight:700} .navrule{ height:1px; margin:8px 0; background:var(--line); border:0; padding:0; } .bar-panel a.plat,.plat{color:var(--ink2); font-size:15px} @media (min-width:760px){ .bar{position:sticky; padding:12px 28px} .bar-toggle{display:none} .bar-panel{ display:flex; position:static; align-items:center; gap:18px; padding:0; border:0; background:transparent; } .bar-panel a{ width:auto; padding:6px 2px; border-bottom:0; font-size:15px; } .navrule{width:1px; height:20px; margin:0 4px} } /* ---------- szerkezet ---------- */ .wrap{max-width:900px; margin:0 auto; padding:22px 16px 40px} h1{font-size:27px; margin:0 0 6px} h2{font-size:21px; margin:28px 0 10px; color:var(--accent)} h3{font-size:17px; margin:20px 0 8px} .muted{color:var(--ink2); font-size:15px} .note{ color:var(--ink2); font-size:14px; line-height:1.5; border-top:1px solid var(--line); margin-top:26px; padding-top:14px; } /* ---------- diavetítés ---------- */ .slideshow{position:relative; width:100%; overflow:hidden; background:var(--surface)} .slides{display:flex; transition:transform .45s ease; touch-action:pan-y} .slides figure{flex:0 0 100%; margin:0; width:100%} .slides img{ display:block; width:100%; height:clamp(220px,46vw,430px); object-fit:cover; } .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; } .dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.85); background:transparent; cursor:pointer; } .dots button.on{background:#fff} .hero-text{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 16px; margin:18px 0; } .hero-text .logo{width:auto; height:64px; max-width:60%; object-fit:contain; margin:0 0 10px} body.t2 .hero-text .logo,body.t3 .hero-text .logo{margin-left:auto; margin-right:auto} /* ---------- kártyák, listák ---------- */ .card,.menu{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:14px 0; } .row,.in{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); } .row:last-child,.in:last-child{border-bottom:0} .row>div:first-child{flex:1; min-width:0} /* the name block takes the width; the price sits at the right whether or not there is a description or a + button */ .n{font-weight:600} .name{font-weight:600} .desc,.d{display:block; color:var(--ink2); font-size:14px; margin-top:2px} .price,.p{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink)} /* ---------- gombok ---------- */ .actions{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0} .btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; border:1px solid var(--accent); font-weight:600; } .btn.ghost,.ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); } /* ---------- útvonal ikonok ---------- */ .travel{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:10px 0} .travel a{ display:inline-flex; align-items:center; gap:6px; font-size:14px; text-decoration:none; color:var(--accent); } .travel svg{flex:0 0 auto} /* ---------- lábléc ---------- */ .foot{ border-top:1px solid var(--line); margin-top:32px; padding:18px 16px 34px; color:var(--ink2); font-size:14px; text-align:center; } .foot a{color:var(--accent)} .contact-lines{margin:0 0 12px} .contact-line{display:flex;align-items:center;gap:10px;padding:8px 0;text-decoration:none;color:var(--ink);font-size:1.05rem} .contact-line svg{flex:0 0 auto;color:var(--accent)} /* the drinks and coffee pages: ul.menu > li > .n(.d) + .p — the same look as .card > .row */ .menu{list-style:none; padding:6px 0; margin:0 0 6px} .menu li{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line)} .menu li:last-child{border-bottom:0} .menu .n{flex:1} .menu .d{display:block; font-weight:400} main{display:block} main:not(.wrap){max-width:900px; margin:0 auto; padding:22px 16px 40px} .hours{list-style:none; padding:0; margin:0} .hours li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)} .hours li:last-child{border-bottom:0} .hours li span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap} footer .inner{max-width:900px; margin:0 auto; padding:0 16px} /* ---------- rendelés: „+” gomb, lebegő kosár, rendelés-oldal ---------- */ .addbtn{ flex:0 0 auto; margin-left:10px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--accent); cursor:pointer; } .addbtn.added{background:var(--accent); color:#fff; border-color:var(--accent)} .cartfab{ position:fixed; right:16px; bottom:16px; z-index:80; display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.22); } .cartfab-n{font-variant-numeric:tabular-nums} .qtyrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)} .qtyrow:last-of-type{border-bottom:0} .qty{display:inline-flex; align-items:center; gap:8px} .qty button{width:32px; height:32px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--accent); font-size:18px; line-height:1; cursor:pointer} .qty span{min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums} .sum{display:flex; justify-content:space-between; font-weight:700; padding:12px 0 0} .f label{display:block; margin:12px 0 4px; font-size:14px; color:var(--ink2)} .f input,.f textarea,.f select{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit} .f .modes{display:flex; gap:16px; margin:8px 0 2px; flex-wrap:wrap} .f .modes label{display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--ink); font-size:16px} .f .modes input{width:auto} .pay{margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-weight:600} .sendbtn{margin-top:14px; padding:13px 18px; border-radius:10px; background:var(--accent); border:1px solid var(--accent); color:#fff; font:inherit; font-weight:700; cursor:pointer} /* ---------- házhozszállítás gombok ---------- */ .dlv-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .dlv-row a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:14px;color:var(--accent)} /* ---------- templates 1…n: the same data, another look (body.tN, chosen in admin) ---------- */ body.t2 .hero-text{background:transparent;border:0;text-align:center;padding:24px 16px 6px} body.t2 h1{letter-spacing:.06em;text-transform:uppercase;font-size:24px} body.t2 .card,body.t2 .menu{border-radius:6px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))} body.t2 h2{font-weight:400;letter-spacing:.04em} body.t2 .slides img{height:clamp(260px,56vw,520px)} body.t2 .dots button.on{background:var(--accent);border-color:var(--accent)} body.t3 .slideshow{max-width:900px;margin:18px auto 0;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08)} body.t3 .hero-text{border-radius:0;border:0;border-bottom:2px solid var(--accent);background:transparent;text-align:center;margin:8px 0 0} body.t3 h1{font-style:italic;font-size:30px} body.t3 .card,body.t3 .menu{border-radius:4px;box-shadow:2px 2px 0 var(--line)} body.t3 .row .name{font-family:var(--font)} body.t3 .btn,body.t3 .sendbtn,body.t3 .adm-btn{border-radius:4px}