/* v2.css · a Tankönyv-ker v2 arculata (generált fájl, ne kézzel szerkeszd). */
/* Anybody – SIL Open Font License 1.1 – fonts/anybody-LICENSE.txt */ @font-face { font-family: "Anybody"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%; src: url(fonts/anybody-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Anybody"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%; src: url(fonts/anybody-latin-wdth-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* ===== tokens.css ===== */
:root { --z-tabla: #d3d7d1; --z-szal-sotet: rgb(21 32 29 / 0.035); --z-szal-vilagos: rgb(255 255 255 / 0.05); --z-lap: #f7f8f6; --z-lap-2: #eceeea; --z-feher: #ffffff; --z-tinta: #15201d; --z-tinta-2: #44514d; --z-keret: #66716d; --z-vonal: #c4cac5; --z-zold: #006455; --z-zold-mely: #004a3f; --z-zold-hover: #005649; --z-zold-szoveg: #00594b; --z-zold-szal-vilagos: rgb(255 255 255 / 0.06); --z-zold-szal-sotet: rgb(0 0 0 / 0.08); --z-akcent: #18a892; --z-narancs: #f39106; --z-hiba: #a51f18; --z-siker: #1e6b45; --z-arnyek: 21 32 29; --z-betu: "Anybody", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --z-betu-rendszer: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans", sans-serif; --v-szin-alap: var(--z-tabla); --v-szin-alap-2: var(--z-zold); --v-szin-szoveg: var(--z-tinta); --v-szin-szoveg-2: var(--z-tinta-2); --v-szin-szoveg-alap-2: var(--z-feher); --v-szin-lap: var(--z-lap); --v-szin-lap-2: var(--z-lap-2); --v-szin-tinta: var(--z-tinta); --v-szin-tinta-2: var(--z-tinta-2); --v-szin-vonal: var(--z-vonal); --v-szin-keret: var(--z-keret); --v-szin-mezo: var(--z-feher); --v-szin-akcio: var(--z-zold); --v-szin-akcio-mely: var(--z-zold-mely); --v-szin-akcio-szoveg: var(--z-feher); --v-szin-akcent: var(--z-akcent); --v-szin-kiemel: var(--z-narancs); --v-szin-kiemel-szoveg: var(--z-tinta); --v-szin-ar: var(--z-tinta); --v-szin-ar-cimke: var(--z-tinta-2); --v-szin-link: var(--z-zold-szoveg); --v-szin-link-alap: var(--z-zold-szoveg); --v-szin-fokusz: var(--z-zold); --v-szin-fokusz-alap: var(--z-zold); --v-szin-fokusz-alap-2: var(--z-feher); --v-szin-hiba: var(--z-hiba); --v-szin-siker: var(--z-siker); --v-szin-arnyek: var(--z-arnyek); --v-szin-kijeloles: var(--z-narancs); --v-szin-disz: var(--z-narancs); --v-anyag-hatter: repeating-linear-gradient(0deg, var(--z-szal-sotet) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--z-szal-vilagos) 0 1px, transparent 1px 3px); --v-anyag-alap-2: repeating-linear-gradient(0deg, var(--z-zold-szal-sotet) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--z-zold-szal-vilagos) 0 1px, transparent 1px 3px); --v-betu-display: var(--z-betu); --v-betu-cim: var(--z-betu); --v-betu-torzs: var(--z-betu-rendszer); --v-betu-adat: var(--z-betu-rendszer); --v-betu-ar: var(--z-betu); --v-betu-display-suly: 900; --v-betu-display-szel: 150%; --v-betu-display-koz: -0.01em; --v-betu-display-sor: 0.92; --v-betu-meret-hero: clamp(1.375rem, 5.8cqi, 4.75rem); --v-betu-meret-h1: clamp(2.25rem, 1rem + 5cqi, 4.5rem); --v-betu-meret-h2: clamp(1.75rem, 1rem + 2.6cqi, 2.875rem); --v-betu-meret-h3: 1.25rem; --v-betu-meret-lead: clamp(1.1875rem, 1rem + 0.9cqi, 1.4375rem); --v-betu-meret-torzs: clamp(1rem, 0.95rem + 0.2cqi, 1.0625rem); --v-betu-meret-kicsi: 0.9375rem; --v-betu-meret-cimke: 0.875rem; --v-betu-meret-ar: 1.375rem; --v-betu-meret-ar-nagy: 2.25rem; --v-betu-torzs-suly: 400; --v-betu-torzs-sor: 1.55; --v-betu-cim-suly: 700; --v-betu-adat-suly: 600; --v-betu-adat-szel: 62%; --v-betu-adat-koz: 0.02em; --v-betu-ar-suly: 800; --v-betu-ar-szel: 85%; --v-betu-gomb-suly: 700; --v-betu-gomb-szel: 85%; --v-betu-szamok: lining-nums; --v-betu-mezo-szel: 112%; --v-ter-1: 4px; --v-ter-2: 8px; --v-ter-3: 12px; --v-ter-4: 16px; --v-ter-5: 24px; --v-ter-6: 32px; --v-ter-7: 48px; --v-ter-8: 72px; --v-ter-oldal: clamp(16px, 2.5cqi, 24px); --v-ter-szakasz: clamp(48px, 7cqi, 96px); --v-ter-max: 1240px; --v-ter-belso: max(var(--v-ter-oldal), calc((100% - var(--v-ter-max)) / 2)); --v-ter-fokusz: 3px; --v-ter-fokusz-eltol: 2px; --v-sarok-lap: 0; --v-sarok-borito: 0 3px 3px 0; --v-sarok-gomb: 0; --v-sarok-mezo: 0; --v-sarok-cimke: 0; --v-arnyek-lap: 0 1px 0 rgb(var(--z-arnyek) / 0.2), 0 10px 24px -16px rgb(var(--z-arnyek) / 0.35); --v-arnyek-emelt: 0 1px 0 rgb(var(--z-arnyek) / 0.2), 0 18px 32px -18px rgb(var(--z-arnyek) / 0.45); --v-arnyek-borito: 0 28px 48px -18px rgb(var(--z-arnyek) / 0.35), 0 2px 4px rgb(var(--z-arnyek) / 0.18); --v-arnyek-tetel-borito: 0 14px 22px -12px rgb(var(--z-arnyek) / 0.45), 0 1px 2px rgb(var(--z-arnyek) / 0.2); --v-mozgas-gyors: 120ms; --v-mozgas-kozep: 220ms; --v-mozgas-lassu: 640ms; --v-mozgas-ki: cubic-bezier(0.16, 1, 0.3, 1); --v-mozgas-be-ki: cubic-bezier(0.37, 0, 0.18, 1); --v-gomb-hatter: var(--v-szin-akcio); --v-gomb-szoveg: var(--v-szin-akcio-szoveg); --v-gomb-hover-hatter: var(--z-zold-hover); --v-gomb-nyomott-hatter: var(--v-szin-akcio-mely); --v-gomb-magassag: 44px; --v-gomb-pad: 0 20px; --v-gomb2-hatter: transparent; --v-gomb2-szoveg: var(--v-szin-link); --v-gomb2-keret: var(--v-szin-akcio); --v-mezo-hatter: var(--v-szin-mezo); --v-mezo-szoveg: var(--v-szin-tinta); --v-mezo-keret: var(--v-szin-keret); --v-mezo-keret-hover: var(--v-szin-tinta); --v-mezo-magassag: 44px; --v-tetel-borito-nelkul: var(--z-zold); --v-tetel-borito-nelkul-szoveg: var(--z-feher); --v-cimke-szoveg: var(--v-szin-tinta-2); --v-cimke-keret: var(--v-szin-keret); --v-cimke-pad: 3px 8px; }
/* ===== alap.css ===== */
*, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; background: var(--v-szin-alap-2); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; } body { margin: 0; min-width: 0; overflow-x: clip; background-color: var(--v-szin-alap); background-image: var(--v-anyag-hatter); color: var(--v-szin-szoveg); font-family: var(--v-betu-torzs); font-size: var(--v-betu-meret-torzs); font-weight: var(--v-betu-torzs-suly); line-height: var(--v-betu-torzs-sor); font-variant-numeric: var(--v-betu-szamok); } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul[class], ol[class], nav ul, nav ol { padding: 0; margin: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--v-szin-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } input, select, textarea, option { font-stretch: var(--v-betu-mezo-szel); } button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } ::selection { background: var(--v-szin-kijeloles); color: var(--v-szin-tinta); } :focus-visible { outline: var(--v-ter-fokusz) solid var(--v-szin-fokusz); outline-offset: var(--v-ter-fokusz-eltol); } .sotet :focus-visible, .sotet:focus-visible { outline-color: var(--v-szin-fokusz-alap-2); } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .nb { white-space: nowrap; } .cq { container-type: inline-size; } .fo { display: block; outline: none; container-type: inline-size; } .lap { max-width: var(--v-ter-max); margin-inline: auto; padding: var(--v-ter-5) var(--v-ter-oldal) var(--v-ter-szakasz); } .lap-keskeny { max-width: 760px; } .sav-teljes { padding-inline: var(--v-ter-belso); } .sotet { background-color: var(--v-szin-alap-2); background-image: var(--v-anyag-alap-2); color: var(--v-szin-szoveg-alap-2); } .sotet a { color: var(--v-szin-szoveg-alap-2); } .ugro { position: absolute; z-index: 60; left: max(16px, env(safe-area-inset-left)); top: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--v-szin-tinta); color: var(--z-feher); font-weight: 700; text-decoration: underline; transform: translateY(-200%); } .ugro:focus-visible { transform: none; outline-color: var(--v-szin-kiemel); outline-offset: -6px; } .h-oldal { font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: var(--v-betu-display-szel); letter-spacing: var(--v-betu-display-koz); line-height: var(--v-betu-display-sor); font-size: var(--v-betu-meret-h1); text-wrap: balance; overflow-wrap: anywhere; } .h-szakasz { font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: var(--v-betu-display-szel); letter-spacing: var(--v-betu-display-koz); line-height: var(--v-betu-display-sor); font-size: var(--v-betu-meret-h2); text-wrap: balance; overflow-wrap: anywhere; } .h-kis { font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.15; } .h-cimke { font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: var(--v-betu-adat-szel); letter-spacing: 0.06em; color: var(--v-szin-szoveg-2); } .lead { font-size: var(--v-betu-meret-lead); line-height: 1.45; text-wrap: pretty; } .kicsi { font-size: var(--v-betu-meret-kicsi); } .masod { color: var(--v-szin-szoveg-2); } .adat { font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); letter-spacing: var(--v-betu-adat-koz); } .kiem { font-weight: 800; font-stretch: 125%; color: var(--v-szin-link); } @container (max-width: 560px) { .h-oldal, .h-szakasz { font-stretch: 118%; } .h-szakasz { font-size: clamp(1.625rem, 0.5rem + 5.8cqi, 2.5rem); } } .lapfej { display: grid; gap: var(--v-ter-3); padding: var(--v-ter-5) 0 var(--v-ter-6); border-top: 2px solid var(--v-szin-tinta); } .lapfej .lead { max-width: 60ch; } .morzsa-sor + .lapfej { border-top: 0; padding-top: var(--v-ter-2); } .fejezet { display: grid; gap: var(--v-ter-4); padding: var(--v-ter-5) 0 var(--v-ter-7); border-top: 2px solid var(--v-szin-tinta); scroll-margin-top: var(--v-ter-4); } .szoveg { max-width: 70ch; } .szoveg > * + * { margin-top: var(--v-ter-3); } .szoveg h2 { margin-top: var(--v-ter-6); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: 1.375rem; line-height: 1.2; } .szoveg h3 { margin-top: var(--v-ter-5); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: 1.125rem; line-height: 1.25; } .szoveg ul, .szoveg ol { padding-left: 1.4em; } .szoveg li + li { margin-top: var(--v-ter-1); } .szoveg a { font-weight: 600; } .ou-szo { white-space: nowrap; } .ou { -webkit-text-fill-color: transparent; } .ou::before, .ou::after { display: inline-block; width: 0; letter-spacing: 0; -webkit-text-fill-color: currentColor; text-decoration: none; pointer-events: none; } .ou::before { content: attr(data-alap); content: attr(data-alap) / ""; } .ou::after { content: attr(data-ou); content: attr(data-ou) / ""; direction: rtl; line-height: 1; font-stretch: var(--ou-szel); transform: translateX(calc(var(--ou-t) * 1em)) scaleX(var(--ou-k)); transform-origin: 0 0; clip-path: inset(-2em -2em calc(var(--ou-alja) * 1em) -2em); } .fej { position: relative; z-index: 20; container-type: inline-size; } .fej-kotes { box-shadow: inset 0 -3px 0 var(--v-szin-akcio-mely); } .fej-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "g . k m" "s s s s"; align-items: center; gap: var(--v-ter-3) var(--v-ter-2); max-width: var(--v-ter-max); margin: 0 auto; padding: var(--v-ter-3) var(--v-ter-oldal) var(--v-ter-4); } .gerinc { grid-area: g; display: inline-grid; justify-items: start; align-content: center; min-height: 44px; padding: 5px 9px 4px; background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: 0 1px 0 rgb(0 0 0 / 0.25); text-decoration: none; } .sotet .gerinc { color: var(--v-szin-tinta); } .gerinc b { font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: 1.125rem; line-height: 0.95; letter-spacing: 0.01em; white-space: nowrap; } .gerinc small { font-size: 0.75rem; font-weight: 600; color: var(--v-szin-tinta-2); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; } .fej-belep { display: none; align-items: center; gap: var(--v-ter-4); margin: 0; font-size: var(--v-betu-meret-kicsi); } .fej-belep a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; } .fej-belep span { opacity: 0.92; } .fej-kosar { grid-area: k; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 9px; border: 1px solid rgb(255 255 255 / 0.6); font-weight: 700; text-decoration: none; } .kosar-szam { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--v-szin-kiemel); color: var(--v-szin-kiemel-szoveg); font-weight: 800; font-variant-numeric: tabular-nums; } .kosar-szam[data-ragad] { animation: tk-ragad var(--v-mozgas-lassu) var(--v-mozgas-ki); } @keyframes tk-ragad { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .fej-menu-gomb { grid-area: m; min-height: 44px; min-width: 44px; padding: 0 9px; border: 1px solid rgb(255 255 255 / 0.6); background: transparent; color: inherit; font-weight: 700; } .kereso { grid-area: s; position: relative; margin: 0; } .kereso-sor { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; } .kereso-mezo { width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: var(--v-szin-mezo); color: var(--v-szin-tinta); font-size: 1.0625rem; } .kereso-mezo::placeholder { color: var(--v-szin-tinta-2); opacity: 1; } .kereso-mezo::-webkit-search-cancel-button { -webkit-appearance: none; } .kereso-gomb { min-height: 48px; min-width: 96px; padding: 0 18px; border: 0; border-left: 1px solid var(--v-szin-vonal); background: var(--v-szin-lap); color: var(--v-szin-akcio); font-weight: 800; } .sotet .kereso-mezo:focus-visible, .sotet .kereso-gomb:focus-visible { outline-color: var(--v-szin-kiemel); outline-offset: 0; } .kereso-sugo-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--v-ter-4); margin-top: 6px; font-size: var(--v-betu-meret-kicsi); } .kereso-sugo { margin: 0; } .kereso-reszletes { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; } .javaslat { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; max-height: min(420px, 70vh); overflow: auto; background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: var(--v-arnyek-emelt); } .jv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 4px 12px; cursor: pointer; } .jv[aria-selected="true"] { background: var(--v-szin-lap-2); box-shadow: inset 4px 0 0 var(--v-szin-akcio); } .jv-borito { display: block; width: 30px; height: 42px; object-fit: cover; border-radius: var(--v-sarok-borito); } .jv-borito.nincs-borito { background: var(--v-tetel-borito-nelkul); } .jv-szoveg { display: grid; min-width: 0; } .jv-cim { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jv-meta { color: var(--v-szin-tinta-2); font-size: var(--v-betu-meret-cimke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jv-ar { font-weight: 800; font-stretch: 85%; white-space: nowrap; text-align: end; } .jv-ar-tol, .jv-ar-bolti { display: block; font-weight: 600; font-size: var(--v-betu-meret-cimke); color: var(--v-szin-tinta-2); } .sotet .javaslat a, .jv-mind { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--v-szin-link); font-weight: 700; text-decoration: underline; } .jv-ures { padding: 10px 14px; color: var(--v-szin-tinta-2); font-size: var(--v-betu-meret-kicsi); } .javaslat mark { background: color-mix(in srgb, var(--v-szin-kiemel) 40%, var(--v-szin-lap)); color: var(--v-szin-tinta); } .fej-asztal { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 var(--v-ter-5); max-width: var(--v-ter-max); margin: 0 auto; padding: 0 var(--v-ter-oldal); } .fej-nav { display: none; width: 100%; padding: var(--v-ter-2) 0 var(--v-ter-3); } .fej[data-menu="nyitva"] .fej-nav { display: block; } .fej-fomenu { display: grid; } .fej-fomenu a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--v-szin-tinta); text-decoration: none; font-weight: 600; text-underline-offset: 5px; } .fej-fomenu .elofej { display: none; } .elofej { font-family: var(--v-betu-torzs); font-weight: 700; font-size: var(--v-betu-meret-cimke); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--v-szin-tinta-2); } .regiszter { display: grid; gap: 6px; margin-top: var(--v-ter-2); } .regiszter a { display: flex; align-items: center; min-height: 44px; padding: 4px 14px; background: var(--v-szin-lap); color: var(--v-szin-tinta); border-top: 4px solid var(--v-szin-akcio); box-shadow: var(--v-arnyek-lap); font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform var(--v-mozgas-gyors) var(--v-mozgas-ki); } .regiszter a:active { transform: translateY(6px); } .regiszter a[aria-current="page"], .fej-fomenu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--v-szin-akcio); } .regiszter a[aria-current="page"] { background: var(--z-feher); box-shadow: inset 0 -3px 0 var(--v-szin-akcio), var(--v-arnyek-lap); } .fej-mobil-belep { margin: var(--v-ter-3) 0 0; font-size: var(--v-betu-meret-kicsi); } .fej-mobil-belep a { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--v-ter-4); font-weight: 700; } .fej-allapot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--v-ter-3); padding: var(--v-ter-2) 0; font-size: var(--v-betu-meret-kicsi); } .elo { display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; margin: 0; padding: 6px 10px; background: var(--v-szin-lap); box-shadow: inset 3px 0 0 var(--v-szin-keret); } .elo[data-allapot="nyitva"] { box-shadow: inset 3px 0 0 var(--v-szin-akcio); } .elo strong { font-weight: 700; } @container (max-width: 899px) { .fej-in { column-gap: 0; } .fej-kosar, .fej-menu-gomb { margin-left: var(--v-ter-2); } } @container (max-width: 419px) { .fej-kosar, .fej-menu-gomb { margin-left: 6px; } .gerinc b { font-stretch: 108%; } .fej-kosar { gap: 5px; padding: 0 7px; } .fej-menu-gomb { padding: 0 8px; } } @container (max-width: 899px) { .fej-allapot { flex-wrap: nowrap; } .elo { flex: 1 1 0; min-width: 0; min-height: calc(2lh + 12px); align-content: center; } } .fej-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--v-szin-link); font-weight: 700; text-underline-offset: 4px; white-space: nowrap; } @container (min-width: 900px) { .fej-in { grid-template-columns: auto minmax(280px, 560px) minmax(0, 1fr) auto; grid-template-areas: "g s b k"; column-gap: var(--v-ter-5); padding-bottom: var(--v-ter-3); } .gerinc { padding: 5px 12px 4px; } .gerinc b { font-size: 1.5rem; } .gerinc small { font-size: 0.75rem; } .fej-belep { display: inline-flex; grid-area: b; justify-self: end; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--v-ter-4); text-align: right; } .fej-belep span { flex-basis: 100%; line-height: 1.25; text-wrap: balance; } .fej-kosar { gap: 8px; padding: 0 12px; } .fej-menu-gomb { display: none; } .fej-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: auto; flex: 1; padding: 0 0 var(--v-ter-2); } .regiszter { order: -1; display: flex; gap: 6px; margin-top: 0; } .regiszter a { min-height: 48px; } .fej-fomenu { display: flex; align-items: center; gap: 0 var(--v-ter-3); } .fej-fomenu .elofej { display: inline; margin-right: var(--v-ter-2); } .fej-mobil-belep { display: none; } .fej-allapot { flex: none; } } @media (hover: hover) and (pointer: fine) { .regiszter a:hover { transform: translateY(6px); box-shadow: var(--v-arnyek-emelt); } .fej-fomenu a:hover, .fej-belep a:hover { text-decoration: underline; text-decoration-thickness: 2px; } .jv:hover { background: var(--v-szin-lap-2); } .kereso-gomb:hover { background: var(--v-szin-lap-2); } .fej-kosar:hover, .fej-menu-gomb:hover { border-color: var(--z-feher); background: rgb(255 255 255 / 0.08); } } .lab { position: relative; container-type: inline-size; --lab-vezeto: rgb(255 255 255 / 0.5); --lab-hajszal: rgb(255 255 255 / 0.35); } .lab-vaszon { padding: var(--v-ter-7) var(--v-ter-belso); } .lab-fej { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--v-ter-5); padding-bottom: var(--v-ter-5); } .lab-jegy { margin: 0; font-family: var(--v-betu-cim); font-weight: 900; font-stretch: 150%; letter-spacing: -0.01em; line-height: 0.92; font-size: clamp(1.75rem, 1rem + 5cqi, 5rem); white-space: nowrap; } .lab-szalag { flex: none; width: 14px; height: 84px; margin-top: calc(-1 * var(--v-ter-7)); margin-right: var(--v-ter-5); background: var(--v-szin-disz); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); } .lab-hasabok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--v-ter-6); } .lab-csop { grid-column: span 3; min-width: 0; } .lab-ccim { margin: 0 0 var(--v-ter-4); padding-top: var(--v-ter-3); border-top: 2px solid var(--z-feher); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.15; text-wrap: balance; } .lab-kap { display: none; } .lab-cegnev { margin: 0 0 var(--v-ter-2); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: 1.125rem; } .lab-cim { font-style: normal; line-height: 1.45; } .lab-sorok { display: grid; gap: 6px; margin-top: var(--v-ter-3); } .lab-sor { display: flex; align-items: baseline; gap: var(--v-ter-2); } .lab-sor dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--v-ter-2); min-width: 0; font-weight: var(--v-betu-adat-suly); white-space: nowrap; } .lab-sor dt::after { content: ""; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--lab-vezeto); transform: translateY(-4px); } .lab-sor dd { flex: 0 1 auto; max-width: 70%; text-align: right; overflow-wrap: anywhere; } .lab-lista { display: grid; gap: 2px; justify-items: start; } .lab-lista a { display: inline-flex; align-items: center; min-height: 44px; } .lab a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--lab-vezeto); } .lab-linkek { display: grid; justify-items: start; } .lab-linkek a { display: inline-flex; align-items: center; min-height: 44px; } .lab-al { margin: var(--v-ter-4) 0 var(--v-ter-1); font-size: var(--v-betu-meret-cimke); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; } .lab-fb { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--v-ter-3); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 118%; font-size: 1.125rem; } .lab-logok { margin: 0 0 var(--v-ter-2); padding: var(--v-ter-3); background: var(--z-feher); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-ter-2); } .lab-logok li { display: grid; place-items: center; min-height: 44px; padding: 4px; border: 1px solid var(--v-szin-vonal); } .lab-logok img { max-width: 100%; height: auto; } .lab-also { background-color: var(--v-szin-akcio-mely); color: var(--z-feher); padding: var(--v-ter-4) var(--v-ter-belso); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ter-3) var(--v-ter-5); } .lab-copy { margin: 0; font-size: var(--v-betu-meret-kicsi); } .lab-fel { min-height: var(--v-gomb-magassag); padding: var(--v-gomb-pad); border: 2px solid var(--z-feher); background: transparent; color: var(--z-feher); font-stretch: var(--v-betu-gomb-szel); font-weight: var(--v-betu-gomb-suly); } @media (hover: hover) and (pointer: fine) { .lab a:hover { text-decoration-color: var(--v-szin-disz); text-decoration-thickness: 3px; } .lab-fel:hover { background: var(--z-feher); color: var(--v-szin-akcio-mely); } } @container (max-width: 900px) { .lab-csop { grid-column: span 6; } } @container (max-width: 600px) { .lab-jegy { font-stretch: 118%; font-size: clamp(1.5rem, 0.5rem + 6.5cqi, 2.5rem); } .lab-szalag { height: 64px; margin-right: 0; } .lab-hasabok { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--z-feher); } .lab-csop { grid-column: 1; } .lab-ccim { margin: 0; padding: 0; border: 0; } .lab-cszov { display: none; } .lab-kap { display: flex; align-items: baseline; gap: var(--v-ter-2); width: 100%; min-height: 56px; padding: 16px 0 12px; border: 0; border-bottom: 1px solid var(--lab-hajszal); background: none; color: var(--z-feher); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; line-height: 1.2; text-align: left; } .lab-kap::after { content: ""; order: 1; flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted var(--lab-vezeto); transform: translateY(-4px); } .lab-kjel { order: 2; position: relative; flex: none; width: 14px; height: 14px; align-self: center; } .lab-kjel::before, .lab-kjel::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; } .lab-kjel::after { transform: rotate(90deg); transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .lab-kap[aria-expanded="true"] .lab-kjel::after { transform: rotate(0deg); } .lab-panel { padding: var(--v-ter-4) 0 var(--v-ter-5); border-bottom: 1px solid var(--lab-hajszal); } .lab-csop:not([data-nyitva]) .lab-panel { display: none; } .lab-sor { display: block; padding-bottom: var(--v-ter-2); } .lab-sor dt { display: block; font-size: var(--v-betu-meret-kicsi); } .lab-sor dt::after { content: none; } .lab-sor dd { max-width: none; text-align: left; } .lab-also { justify-content: center; text-align: center; } } html:not(.js) .lab-csop .lab-panel { display: block; } .vazlat { background: #141518; color: #e6e8e4; padding: 14px var(--v-ter-belso) calc(14px + env(safe-area-inset-bottom)); font: 500 0.875rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; } .vazlat p { margin: 0; max-width: 90ch; } .vazlat-gomb { min-height: 44px; padding: 0 14px; border: 1px solid #6b6f78; border-radius: 6px; background: transparent; color: #ffffff; font: inherit; font-weight: 600; white-space: nowrap; } .vazlat-gomb[aria-pressed="true"] { background: #f2f2ef; color: #141518; } .vazlat-gomb:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; } .vazlat-nav { display: inline-flex; align-items: center; gap: 2px; } .vazlat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #e6e8e4; text-underline-offset: 4px; } .vazlat-nav a[aria-current] { color: #ffffff; font-weight: 700; text-decoration-thickness: 2px; } .vazlat-nav a:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; } .vazlat-felso { margin: 0; padding: 6px var(--v-ter-belso); background: #141518; color: #e6e8e4; font: 500 0.8125rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; text-wrap: balance; } html[data-admin-zonak] [data-admin-blokk] { outline: 2px dashed var(--v-szin-kiemel); outline-offset: 4px; position: relative; } html[data-admin-zonak] [data-admin-blokk]::before { content: "Szerkeszthető: " attr(data-admin-blokk); position: absolute; z-index: 5; top: -14px; left: 0; padding: 2px 8px; background: var(--v-szin-kiemel); color: var(--v-szin-tinta); font: 700 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } .tk-plusz { font-family: var(--z-betu-rendszer); font-stretch: 100%; }
/* ===== komponensek.css ===== */
.gomb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--v-gomb-magassag); min-width: 44px; padding: var(--v-gomb-pad); border: 2px solid transparent; border-radius: var(--v-sarok-gomb); background: var(--v-gomb-hatter); color: var(--v-gomb-szoveg); font-stretch: var(--v-betu-gomb-szel); font-weight: var(--v-betu-gomb-suly); font-size: 1rem; line-height: 1.15; text-align: center; text-decoration: none; transition: background-color var(--v-mozgas-gyors) var(--v-mozgas-ki), color var(--v-mozgas-gyors) var(--v-mozgas-ki); } .gomb:active { background: var(--v-gomb-nyomott-hatter); } .gomb-2 { background: var(--v-gomb2-hatter); color: var(--v-gomb2-szoveg); border-color: var(--v-gomb2-keret); } .gomb-2:active { background: var(--v-szin-lap-2); } .gomb-feher { background: var(--z-feher); color: var(--v-szin-akcio); } .sotet .gomb-feher { color: var(--v-szin-akcio); } .gomb-feher:active { background: var(--v-szin-lap-2); } .gomb-keret-feher { background: transparent; color: var(--z-feher); border-color: var(--z-feher); } .gomb-nagy { min-height: 52px; padding: 0 28px; font-size: 1.125rem; } .gomb-kicsi { min-height: 44px; padding: 0 12px; font-size: var(--v-betu-meret-kicsi); } .gomb-teljes { width: 100%; } .gomb[disabled], .gomb[aria-disabled="true"] { background: var(--v-szin-lap-2); color: var(--v-szin-tinta-2); border-color: var(--v-szin-vonal); cursor: not-allowed; } .gomb-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--v-szin-link); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .gomb-sor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-ter-3); } @media (hover: hover) and (pointer: fine) { .gomb:hover { background: var(--v-gomb-hover-hatter); } .gomb-2:hover, .gomb-feher:hover { background: var(--v-szin-lap-2); } .gomb-keret-feher:hover { background: var(--z-feher); color: var(--v-szin-akcio); } .gomb[disabled]:hover, .gomb[aria-disabled="true"]:hover { background: var(--v-szin-lap-2); } .gomb-link:hover { text-decoration-thickness: 2px; } } .urlap { display: grid; gap: var(--v-ter-4); } .urlap-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-4) var(--v-ter-5); } @container (min-width: 640px) { .urlap-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .urlap-racs .teljes { grid-column: 1 / -1; } } .mezo { display: grid; gap: 6px; min-width: 0; } .mezo > label, .mezo-cimke { font-weight: 700; font-size: var(--v-betu-meret-kicsi); } .mezo-opc { font-weight: 400; color: var(--v-szin-szoveg-2); } .mezo > input:not([type="checkbox"]):not([type="radio"]), .mezo > select, .mezo > textarea, .bemenet { width: 100%; min-width: 0; min-height: var(--v-mezo-magassag); padding: 0 var(--v-ter-3); border: 1px solid var(--v-mezo-keret); border-radius: var(--v-sarok-mezo); background-color: var(--v-mezo-hatter); color: var(--v-mezo-szoveg); font-size: 1rem; } .mezo > textarea { min-height: 128px; padding: 10px var(--v-ter-3); resize: vertical; line-height: 1.45; } .mezo > select { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--v-szin-tinta) 50%), linear-gradient(135deg, var(--v-szin-tinta) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .mezo ::placeholder { color: var(--v-szin-tinta-2); opacity: 1; } .mezo-sugo { margin: 0; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-szoveg-2); } .mezo-hiba { margin: 0; font-size: var(--v-betu-meret-kicsi); font-weight: 700; color: var(--v-szin-hiba); } .mezo-hiba:empty { display: none; } .mezo [aria-invalid="true"] { border-color: var(--v-szin-hiba) !important; box-shadow: inset 0 0 0 1px var(--v-szin-hiba); } .sotet .mezo > input:not([type="checkbox"]):not([type="radio"]), .sotet .mezo > select, .sotet .mezo > textarea { border-color: var(--z-feher); } .sotet .mezo-hiba { color: var(--z-feher); background: var(--v-szin-hiba); padding: 2px 8px; justify-self: start; } @media (hover: hover) and (pointer: fine) { .mezo input:hover, .mezo select:hover, .mezo textarea:hover { border-color: var(--v-mezo-keret-hover); } } .pipa, .radio { position: relative; display: block; min-height: 44px; padding: 11px 0 11px 44px; font-size: var(--v-betu-meret-kicsi); line-height: 1.45; cursor: pointer; } .pipa input, .radio input { position: absolute; z-index: 1; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; } .pipa > span::before, .radio > span::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border: 2px solid var(--v-szin-tinta); background: var(--v-szin-mezo); } .radio > span::before { border-radius: 50%; } .pipa > span::after { content: ""; position: absolute; left: 19px; top: 14px; width: 6px; height: 12px; border-right: 3px solid var(--z-feher); border-bottom: 3px solid var(--z-feher); transform: rotate(45deg); opacity: 0; } .radio > span::after { content: ""; position: absolute; left: 17px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--v-szin-akcio); opacity: 0; } .pipa input:checked + span::before { background: var(--v-szin-akcio); border-color: var(--v-szin-akcio); } .pipa input:checked + span::after, .radio input:checked + span::after { opacity: 1; } .radio input:checked + span::before { border-color: var(--v-szin-akcio); } .pipa input:focus-visible + span::before, .radio input:focus-visible + span::before { outline: var(--v-ter-fokusz) solid var(--v-szin-fokusz); outline-offset: var(--v-ter-fokusz-eltol); } .pipa input[aria-invalid="true"] + span::before { border-color: var(--v-szin-hiba); box-shadow: 0 0 0 2px var(--v-szin-hiba); } .sotet .pipa > span::before { border-color: var(--z-feher); background: transparent; } .sotet .pipa > span::after { border-color: var(--v-szin-akcio); } .sotet .pipa input:checked + span::before { background: var(--z-feher); border-color: var(--z-feher); } .sotet .pipa input:focus-visible + span::before { outline-color: var(--v-szin-fokusz-alap-2); } .valaszto { display: flex; flex-wrap: wrap; gap: 0 var(--v-ter-6); margin: 0; padding: 0; border: 0; } .valaszto legend { padding: 0; margin-bottom: var(--v-ter-2); color: var(--v-szin-szoveg-2); } .valaszto label { position: relative; display: grid; justify-items: start; gap: 2px; min-height: 44px; padding: 0 0 var(--v-ter-2); border-bottom: 3px solid transparent; color: var(--v-szin-szoveg-2); cursor: pointer; } .valaszto input { position: absolute; opacity: 0; width: 1px; height: 1px; } .valaszto b { font-family: var(--v-betu-cim); font-stretch: 62%; font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.2cqi, 3rem); line-height: 1; letter-spacing: -0.01em; } .valaszto b::after { content: attr(data-szo); display: block; height: 0; overflow: hidden; visibility: hidden; font-stretch: 150%; font-weight: 900; } .valaszto small { font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); font-size: var(--v-betu-meret-torzs); } .valaszto input:checked + b:not(:has(.ou)) { font-stretch: 150%; font-weight: 900; } .valaszto input:checked + b:has(.ou) { text-decoration: underline 3px; text-underline-offset: 0.15em; } .valaszto label:has(input:checked) { color: var(--v-szin-link); border-bottom-color: var(--v-szin-akcio); } .valaszto label:has(input:focus-visible) { outline: var(--v-ter-fokusz) solid var(--v-szin-fokusz); outline-offset: var(--v-ter-fokusz-eltol); } .lepteto { display: inline-flex; align-items: center; border: 1px solid var(--v-szin-keret); background: var(--v-szin-mezo); } .lepteto button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--v-szin-tinta); } .lepteto button[aria-disabled="true"] { opacity: 0.4; cursor: default; } .lepteto input { width: 56px; height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--v-szin-vonal); border-radius: 0; background: var(--v-mezo-hatter); color: var(--v-mezo-szoveg); text-align: center; font-family: var(--v-betu-cim); font-weight: 700; font-stretch: 125%; font-size: 1.125rem; appearance: textfield; -moz-appearance: textfield; } .lepteto input::-webkit-inner-spin-button, .lepteto input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .lepteto button:focus-visible, .lepteto input:focus-visible { outline-offset: -3px; } .jel-minusz, .jel-plusz { position: relative; display: block; width: 14px; height: 2px; background: currentColor; } .jel-plusz::after { content: ""; position: absolute; left: 6px; top: -6px; width: 2px; height: 14px; background: currentColor; } @media (hover: hover) and (pointer: fine) { .lepteto button:hover:not([aria-disabled="true"]) { background: var(--v-szin-lap-2); } } .ar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: var(--v-betu-szamok); } .ar-cimke { font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); font-size: var(--v-betu-meret-cimke); color: var(--v-szin-ar-cimke); } .ar-szam { font-family: var(--v-betu-ar); font-stretch: var(--v-betu-ar-szel); font-weight: var(--v-betu-ar-suly); font-size: var(--v-betu-meret-ar); line-height: 1; color: var(--v-szin-ar); white-space: nowrap; } .ar-nagy .ar-szam { font-size: var(--v-betu-meret-ar-nagy); } .ar-nagy .ar-cimke { font-size: 1rem; font-stretch: 85%; font-weight: 700; } .ar-tol { font-stretch: var(--v-betu-adat-szel); font-weight: 600; font-size: var(--v-betu-meret-cimke); color: var(--v-szin-tinta-2); white-space: nowrap; } .ar-halvany { display: flex; flex-basis: 100%; align-items: baseline; gap: 2px 8px; } .ar-halvany .ar-cimke, .ar-halvany .ar-szam { color: var(--v-szin-tinta-2); } .ar-halvany .ar-szam { font-size: var(--v-betu-meret-kicsi); font-weight: 600; } .konyvracs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--v-ter-6) var(--v-ter-5); } @container (max-width: 420px) { .konyvracs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-ter-5) var(--v-ter-4); } } .konyv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px; min-width: 0; } .konyv-kep { display: flex; align-items: flex-end; aspect-ratio: 270 / 380; min-width: 0; } .konyv-kep a { display: block; width: 100%; } .konyv-kep img, .nincs-borito { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 270 / 380; object-fit: cover; border-radius: var(--v-sarok-borito); box-shadow: var(--v-arnyek-tetel-borito); background: var(--v-szin-lap-2); transition: transform var(--v-mozgas-gyors) var(--v-mozgas-ki); } .konyv-kep img { object-fit: contain; } .nincs-borito { display: grid; align-content: space-between; padding: 10px; background: var(--v-tetel-borito-nelkul); color: var(--v-tetel-borito-nelkul-szoveg); font-size: 0.8125rem; line-height: 1.25; overflow: hidden; } .nincs-borito b { font-weight: 800; font-stretch: 112%; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .konyv-test { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--v-szin-keret); } .konyv-cim { font-stretch: 100%; font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .konyv-cim a { color: var(--v-szin-tinta); text-decoration: none; } .konyv-cim a::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 270 / 380; } .konyv-meta { font-stretch: 85%; font-weight: 600; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); overflow-wrap: anywhere; } .konyv .ar { margin-top: 4px; } .konyv-lab { display: grid; gap: var(--v-ter-2); margin-top: auto; padding-top: var(--v-ter-2); } .konyvracs[data-nezet="racs"] .konyv-test > :not(.ar) + .ar { margin-top: auto; } .konyvracs[data-nezet="racs"] .konyv-lab { margin-top: 0; } .konyv .belyeg + .konyv-kep .nincs-borito { padding-top: 44px; } .konyv-lab .gomb { position: relative; z-index: 1; } .konyv .belyeg { position: absolute; z-index: 2; top: 8px; left: -6px; } @media (hover: hover) and (pointer: fine) { .konyv:hover .konyv-kep img, .konyv:hover .nincs-borito { transform: translateY(-6px); } .konyv:hover .konyv-cim a { text-decoration: underline; } } .konyv:focus-within .konyv-kep img, .konyv:focus-within .nincs-borito { transform: translateY(-6px); } .konyvracs[data-nezet="lista"] { grid-template-columns: minmax(0, 1fr); gap: 0; } .konyvracs[data-nezet="lista"] .konyv { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto; gap: var(--v-ter-4); padding: var(--v-ter-3) 0; border-bottom: 1px solid var(--v-szin-keret); } .konyvracs[data-nezet="lista"] .konyv-test { border-top: 0; padding-top: 0; } .konyvracs[data-nezet="lista"] .konyv-cim a::after { content: none; } .konyvracs[data-nezet="lista"] .belyeg { position: static; justify-self: start; } @container (min-width: 720px) { .konyvracs[data-nezet="lista"] .konyv-test { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--v-ter-5); } .konyvracs[data-nezet="lista"] .konyv-test > :not(.ar):not(.konyv-lab) { grid-column: 1; } .konyvracs[data-nezet="lista"] .ar, .konyvracs[data-nezet="lista"] .konyv-lab { grid-column: 2; justify-self: end; } .konyvracs[data-nezet="lista"] .ar { grid-row: 1; } .konyvracs[data-nezet="lista"] .konyv-lab { grid-row: 2 / span 3; align-self: start; margin-top: 0; } } .cimke { display: inline-flex; align-items: center; min-height: 28px; padding: var(--v-cimke-pad); border: 1px solid var(--v-cimke-keret); color: var(--v-cimke-szoveg); font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: 85%; letter-spacing: 0.02em; } .cimke-kiemel { background: var(--v-szin-kiemel); border-color: var(--v-szin-kiemel); color: var(--v-szin-kiemel-szoveg); } .cimke-akcio { background: var(--v-szin-akcio); border-color: var(--v-szin-akcio); color: var(--z-feher); } .belyeg { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 10px; border: 3px solid var(--v-szin-akcio); background: var(--v-szin-lap); color: var(--v-szin-akcio); font-stretch: 85%; font-weight: 800; font-size: var(--v-betu-meret-kicsi); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; transform: rotate(-6deg); } .belyeg-narancs { border-color: var(--v-szin-kiemel); color: var(--v-szin-tinta); } .morzsa-sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--v-ter-5); margin-bottom: var(--v-ter-5); border-bottom: 1px solid color-mix(in srgb, var(--v-szin-tinta) 70%, transparent); } .morzsa ol { display: flex; flex-wrap: wrap; align-items: center; font-stretch: 85%; font-weight: var(--v-betu-adat-suly); letter-spacing: var(--v-betu-adat-koz); font-size: var(--v-betu-meret-kicsi); } .morzsa li { display: inline-flex; align-items: center; } .morzsa li + li::before { content: "›"; padding: 0 10px; color: var(--v-szin-tinta-2); } .morzsa a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--v-szin-link); } .morzsa [aria-current="page"] { color: var(--v-szin-tinta); } .vissza { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--v-szin-link); font-stretch: 85%; font-weight: 700; font-size: var(--v-betu-meret-kicsi); } .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } .chev-bal { transform: rotate(135deg); } .chev-le { transform: rotate(45deg) translate(-2px, -2px); } .lapozo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: var(--v-ter-6); } .lapozo ol { display: flex; flex-wrap: wrap; gap: 6px; } .lapozo a, .lapozo span[aria-current], .lapozo .lapozo-hezag { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; font-weight: 700; font-stretch: 85%; text-decoration: none; } .lapozo a { background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: inset 0 0 0 1px var(--v-szin-keret); } .lapozo [aria-current="page"] { background: var(--v-szin-akcio); color: var(--z-feher); box-shadow: none; } .lapozo .lapozo-hezag { min-width: 24px; padding: 0; color: var(--v-szin-tinta-2); } .lapozo-nyil { display: inline-flex !important; gap: 8px; } .lapozo a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .lapozo-allas { flex-basis: 100%; text-align: center; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-szoveg-2); } @media (hover: hover) and (pointer: fine) { .lapozo a:not([aria-current]):hover { background: var(--z-feher); box-shadow: inset 0 0 0 2px var(--v-szin-akcio); } } .figy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--v-ter-3); align-items: start; padding: var(--v-ter-3) var(--v-ter-4); background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: inset 4px 0 0 var(--v-szin-akcio); } .figy-hiba, .figy-siker { grid-template-columns: auto minmax(0, 1fr); } .figy-hiba::before, .figy-siker::before { content: ""; width: 10px; height: 10px; margin-top: 0.45em; } .figy-hiba > *, .figy-siker > * { grid-column: 2; } .figy strong:first-child { font-weight: 800; } .figy-kiemel { box-shadow: inset 4px 0 0 var(--v-szin-kiemel); } .figy-hiba { box-shadow: inset 4px 0 0 var(--v-szin-hiba); } .figy-hiba::before { background: var(--v-szin-hiba); } .figy-siker { box-shadow: inset 4px 0 0 var(--v-szin-siker); } .figy-siker::before { background: var(--v-szin-siker); border-radius: 50%; } .figy-sav { padding: 10px var(--v-ter-belso); background: var(--v-szin-kiemel); color: var(--v-szin-tinta); font-weight: 700; text-align: center; } .tabla-tok { position: relative; overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; } .tabla { width: 100%; border-collapse: collapse; font-variant-numeric: var(--v-betu-szamok); } .tabla caption { caption-side: top; text-align: left; padding-bottom: var(--v-ter-2); font-family: var(--v-betu-cim); font-weight: 800; font-stretch: 125%; font-size: 1.125rem; } .tabla th, .tabla td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--v-szin-keret); } .tabla thead th { font-stretch: var(--v-betu-adat-szel); font-weight: 700; font-size: var(--v-betu-meret-cimke); letter-spacing: 0.04em; color: var(--v-szin-tinta-2); border-bottom: 2px solid var(--v-szin-tinta); white-space: nowrap; } .tabla .szam { text-align: right; white-space: nowrap; } .tabla tfoot td, .tabla tfoot th { border-bottom: 0; border-top: 2px solid var(--v-szin-tinta); font-weight: 800; } .tabla-lap { background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); } ol.lepesek, .lepesek { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; counter-reset: lepes; margin: 0 0 var(--v-ter-6); } .lepesek li { counter-increment: lepes; display: grid; gap: 2px; padding: 10px 12px 8px; background: var(--v-szin-lap-2); color: var(--v-szin-tinta-2); border-top: 4px solid var(--v-szin-vonal); font-size: var(--v-betu-meret-kicsi); line-height: 1.25; min-width: 0; } .lepesek li::before { content: counter(lepes) "."; font-stretch: 62%; font-weight: 700; font-size: var(--v-betu-meret-cimke); letter-spacing: 0.04em; } .lepesek li span { font-weight: 700; overflow-wrap: anywhere; } .lepesek [data-allapot="kesz"] { background: var(--v-szin-lap); color: var(--v-szin-tinta); border-top-color: var(--v-szin-tinta-2); } .lepesek [aria-current="step"] { background: var(--z-feher); color: var(--v-szin-tinta); border-top-color: var(--v-szin-akcio); box-shadow: var(--v-arnyek-lap); } @container (max-width: 520px) { .lepesek li:not([aria-current="step"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .pontsor { display: grid; } .pontsor > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; } .pontsor > div::before { content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--v-szin-keret); transform: translateY(-4px); } .pontsor dt { order: 0; flex: none; font-stretch: 85%; font-size: var(--v-betu-meret-kicsi); font-weight: 600; letter-spacing: 0.02em; color: var(--v-szin-tinta-2); } .pontsor dd { order: 2; max-width: 62%; text-align: right; font-weight: 500; overflow-wrap: anywhere; } .pontsor .pontsor-nagy dt { font-family: var(--v-betu-cim); font-size: var(--v-betu-meret-h3); font-weight: 800; color: var(--v-szin-tinta); } .pontsor .pontsor-nagy dd { font-family: var(--v-betu-ar); font-stretch: var(--v-betu-ar-szel); font-weight: var(--v-betu-ar-suly); font-size: var(--v-betu-meret-ar-nagy); line-height: 1; } .tj { display: grid; gap: var(--v-ter-2); } .tj-cim { padding-bottom: var(--v-ter-2); border-bottom: 2px solid var(--v-szin-tinta); } .tj-sor { position: relative; display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 2px; min-height: 56px; padding: 12px 0 10px; color: var(--v-szin-tinta); text-decoration: none; border-bottom: 1px solid var(--v-szin-keret); } .tj-sor::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--v-szin-akcio); transform: scaleX(0); transform-origin: left center; transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .tj-sor-cim { font-family: var(--v-betu-cim); font-size: clamp(1.1875rem, 1rem + 0.8cqi, 1.5rem); font-weight: 700; line-height: 1.15; } .tj-pontok { align-self: end; margin-bottom: 0.45em; height: 2px; background-image: radial-gradient(circle, var(--v-szin-tinta-2) 1px, transparent 1.4px); background-size: 7px 2px; background-repeat: repeat-x; } .tj-cel { font-size: var(--v-betu-meret-kicsi); font-weight: 600; font-stretch: 62%; letter-spacing: 0.02em; color: var(--v-szin-link); white-space: nowrap; } .tj-al { grid-column: 1 / -1; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); } .tj-sor:focus-visible { outline-offset: 4px; } .tj-sor:focus-visible .tj-sor-cim:not(:has(.ou)) { font-stretch: 125%; font-weight: 900; } .tj-sor:focus-visible .tj-sor-cim:has(.ou) { color: var(--v-szin-link); } .tj-sor:focus-visible::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .tj-sor:hover .tj-sor-cim:not(:has(.ou)) { font-stretch: 125%; font-weight: 900; } .tj-sor:hover .tj-sor-cim:has(.ou) { color: var(--v-szin-link); } .tj-sor:hover::after { transform: scaleX(1); } } @container (max-width: 600px) { .tj-sor { grid-template-columns: minmax(0, 1fr); } .tj-pontok, .tj-cel { display: none; } } .konyvsor { display: grid; gap: var(--v-ter-4); } .konyvsor-fej { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-5); } .konyvsor-cim { font-family: var(--v-betu-cim); font-size: var(--v-betu-meret-h3); font-weight: 800; font-stretch: 125%; line-height: 1.15; } .konyvsor-ablak { overflow: hidden; padding: 6px 2px 18px; } .konyvsor-sav { display: flex; gap: clamp(16px, 2.4cqi, 28px); width: max-content; transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .konyvsor-sav[data-huzva] { transition: none; } .konyvsor-sav > li { width: clamp(118px, 13cqi, 150px); } .konyvsor-csuszka-sor { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--v-ter-4); } .konyvsor-csuszka-sor label { font-size: var(--v-betu-meret-kicsi); font-weight: 700; font-stretch: 85%; } @container (max-width: 600px) { .konyvsor-csuszka-sor { grid-template-columns: minmax(0, 1fr); gap: 0; } } .csuszka { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; } .csuszka::-webkit-slider-runnable-track { height: 2px; background: var(--v-szin-tinta); } .csuszka::-moz-range-track { height: 2px; background: var(--v-szin-tinta); } .csuszka::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 22px; margin-top: -10px; background: var(--v-szin-akcio); border: 0; } .csuszka::-moz-range-thumb { width: 30px; height: 22px; background: var(--v-szin-akcio); border: 0; border-radius: 0; } .csuszka:focus-visible { outline-offset: 0; } .evfolyamok { margin: 0; padding: 0; border: 0; min-width: 0; } .evfolyamok legend { padding: 0; margin-bottom: var(--v-ter-2); font-weight: 700; font-size: var(--v-betu-meret-kicsi); } .evfolyamok-sor { display: flex; flex-wrap: wrap; gap: 6px; } .evfolyamok label { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; background: var(--v-szin-lap); box-shadow: inset 0 0 0 1px var(--v-szin-keret); font-weight: 700; font-stretch: 85%; cursor: pointer; } .evfolyamok input { position: absolute; opacity: 0; width: 1px; height: 1px; } .evfolyamok label:has(input:checked) { background: var(--v-szin-akcio); color: var(--z-feher); box-shadow: none; } .evfolyamok label:has(input:focus-visible) { outline: var(--v-ter-fokusz) solid var(--v-szin-fokusz); outline-offset: var(--v-ter-fokusz-eltol); } @media (hover: hover) and (pointer: fine) { .evfolyamok label:not(:has(input:checked)):hover { box-shadow: inset 0 0 0 2px var(--v-szin-akcio); } } .szurosav { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--v-ter-3) var(--v-ter-5); padding: var(--v-ter-3) 0; margin-bottom: var(--v-ter-5); border-block: 1px solid var(--v-szin-keret); } .szurosav .mezo { min-width: 200px; } .talalatszam { margin: 0; font-stretch: 85%; font-weight: 700; } .nezetvalto { display: inline-flex; border: 1px solid var(--v-szin-keret); } .nezetvalto button { min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; background: var(--v-szin-lap); color: var(--v-szin-tinta); font-weight: 600; } .nezetvalto button[aria-pressed="true"] { background: var(--v-szin-akcio); color: var(--z-feher); } .nezetvalto button:focus-visible { outline-offset: -4px; } .nezetvalto button[aria-pressed="true"]:focus-visible { outline-color: var(--z-feher); } .lenyilo { border-bottom: 1px solid var(--v-szin-keret); } .lenyilo > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--v-ter-3); min-height: 52px; padding: 8px 0; cursor: pointer; font-weight: 800; font-stretch: 112%; color: var(--v-szin-tinta); } .lenyilo > summary::-webkit-details-marker { display: none; } .lenyilo > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .lenyilo[open] > summary::after { transform: rotate(45deg); } .lenyilo-tart { padding: 0 0 var(--v-ter-4); } .lenyilo-tart > * + * { margin-top: var(--v-ter-2); } .dobozlap { background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: var(--v-arnyek-lap); padding: var(--v-ter-5); } .dobozlap-csik { border-top: 4px solid var(--v-szin-akcio); } .oldalsav { display: grid; align-content: start; gap: var(--v-ter-4); padding-top: var(--v-ter-3); border-top: 3px solid var(--v-szin-tinta); font-size: var(--v-betu-meret-kicsi); } .ket-hasab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); } @container (min-width: 900px) { .ket-hasab { grid-template-columns: 8fr 4fr; gap: var(--v-ter-8); } } .tk-hir { position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; background: var(--v-szin-tinta); color: var(--z-feher); box-shadow: var(--v-arnyek-emelt); border-left: 4px solid var(--v-szin-kiemel); font-weight: 600; font-size: var(--v-betu-meret-kicsi); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity var(--v-mozgas-kozep) var(--v-mozgas-ki), transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .tk-hir[data-latszik] { opacity: 1; transform: translate(-50%, 0); } .urlap-hir { margin: 0; font-weight: 700; color: var(--v-szin-siker); } .urlap-hir:empty { display: none; } .sotet .urlap-hir { color: var(--z-feher); }
/* ===== bongeszes/index ===== */
.ix-cimlap { display: grid; gap: clamp(14px, 2.4cqi, 30px); padding-block: clamp(18px, 3cqi, 36px) clamp(22px, 3.4cqi, 44px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25); } .ix-h1 { font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: var(--v-betu-display-szel); letter-spacing: var(--v-betu-display-koz); line-height: 0.9; font-size: clamp(1.5rem, 6.1cqi, 6rem); white-space: nowrap; } .ix-tabla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3.4cqi, 40px) clamp(32px, 6cqi, 96px); align-items: start; padding-block: clamp(28px, 4.4cqi, 56px) clamp(20px, 3cqi, 36px); } @container (min-width: 820px) { .ix-tabla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .ix-bev { display: grid; gap: var(--v-ter-4); max-width: 40ch; } .ix-mondat { font-size: var(--v-betu-meret-lead); line-height: 1.45; text-wrap: pretty; } .ix-kiem { font-weight: 800; font-stretch: 125%; color: var(--v-szin-link); } .ix-bev a { color: var(--v-szin-link); text-underline-offset: 0.2em; } .ix-folyt { line-height: 1.55; } .ix-tj-cim { font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: 62%; letter-spacing: 0.06em; color: var(--v-szin-szoveg-2); } .ix-katalogus { padding-block: clamp(28px, 4cqi, 48px) clamp(36px, 5cqi, 64px); border-top: 1px solid var(--v-szin-keret); } .ix-katalogus .konyvsor-sav > li { width: clamp(118px, 13cqi, 150px); } .ix-katalogus .konyvsor-cim { margin: 0; } .ix-szt { display: grid; grid-template-rows: auto 1fr; gap: 8px; } .ix-szt-ar { align-self: end; } .ix-szt a { display: grid; gap: 8px; color: var(--v-szin-tinta); text-decoration: none; } .ix-szt img { display: block; width: 100%; height: auto; aspect-ratio: 270 / 380; object-fit: cover; border-radius: var(--v-sarok-borito); box-shadow: var(--v-arnyek-tetel-borito); background: var(--v-szin-lap-2); transition: transform var(--v-mozgas-gyors) var(--v-mozgas-ki); } .ix-szt-cim { min-height: 2.5em; font-size: 0.875rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ix-szt-ar { font-family: var(--v-betu-ar); font-weight: var(--v-betu-ar-suly); font-stretch: var(--v-betu-ar-szel); font-size: var(--v-betu-meret-ar); font-variant-numeric: var(--v-betu-szamok); color: var(--v-szin-ar); line-height: 1; white-space: nowrap; } .ix-szt-ar small { display: block; margin-bottom: 3px; font-family: var(--v-betu-adat); font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); font-size: var(--v-betu-meret-cimke); color: var(--v-szin-ar-cimke); } .ix-szt a:focus-visible { outline-offset: 4px; } .ix-szt a:focus-visible img { transform: translateY(-6px); } @media (hover: hover) and (pointer: fine) { .ix-szt a:hover img { transform: translateY(-6px); } .ix-szt a:hover .ix-szt-cim { text-decoration: underline; } } .ixk-kulso { border-top: 1px solid var(--v-szin-keret); } html:not(.js) .ixk-kulso { display: none; } .ixk { --ixk-lap-m: 600px; --ixk-tabla: 9px; --ixk-gerinc: linear-gradient(to left, rgb(var(--v-szin-arnyek) / 0.2), rgb(var(--v-szin-arnyek) / 0.05) 20px, transparent 44px); padding: var(--v-ter-7) var(--v-ter-oldal) var(--v-ter-8); background: radial-gradient(ellipse 70% 55% at 28% 18%, color-mix(in srgb, var(--v-szin-lap) 35%, transparent), transparent 70%); } .ixk-fej { max-width: 640px; margin: 0 auto var(--v-ter-6); text-align: center; } .ixk-cim { margin: 0; font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: var(--v-betu-display-szel); font-size: clamp(2rem, 1rem + 4cqi, 3.5rem); line-height: var(--v-betu-display-sor); letter-spacing: var(--v-betu-display-koz); text-wrap: balance; } .ixk-lead { margin: var(--v-ter-3) auto 0; max-width: 52ch; font-size: var(--v-betu-meret-lead); color: var(--v-szin-szoveg-2); text-wrap: pretty; } .ixk-konyv[hidden], .ixk-lista[hidden] { display: none; } .ixk-tabla { position: relative; width: min(100%, 1060px); margin: 0 auto; padding: var(--ixk-tabla); background: var(--v-szin-akcio); border: 1px solid var(--v-szin-akcio-mely); box-shadow: var(--v-arnyek-borito); box-sizing: border-box; } .ixk-tabla::before, .ixk-tabla::after { content: ""; position: absolute; left: 50%; width: 16px; height: var(--ixk-tabla); margin-left: -8px; background: var(--v-szin-akcio-mely); } .ixk-tabla::before { top: 0; } .ixk-tabla::after { bottom: 0; } .ixk-szinpad { position: relative; height: var(--ixk-lap-m); touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .ixk-szinpad:focus-visible { outline: var(--v-ter-fokusz) solid var(--v-szin-fokusz-alap-2); outline-offset: 3px; } .ixk-huz .ixk-szinpad { user-select: none; cursor: grabbing; } .ixk-hely { position: absolute; top: 0; bottom: 0; width: 50%; } .ixk-hely-bal { left: 0; } .ixk-hely-jobb { left: 50%; } .ixk-hely-bal::after, .ixk-hely-jobb::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none; } .ixk-hely-bal::after { right: 0; background: var(--ixk-gerinc); box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.5); } .ixk-hely-jobb::after { left: 0; background: var(--ixk-gerinc); transform: scaleX(-1); } .ixk-elol, .ixk-hatul { position: absolute; top: 0; bottom: 0; width: 50%; } .ixk-elol { left: 50%; } .ixk-hatul { left: 0; transform-origin: 100% 0; visibility: hidden; } .ixk-ures { background: var(--v-szin-lap-2); } .ixk-arny { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; visibility: hidden; } .ixk-elol .ixk-arny { width: 30px; background: linear-gradient(to right, rgb(var(--v-szin-arnyek) / 0.18), transparent); } .ixk-hatul .ixk-arny { width: 120px; background: linear-gradient(to right, rgb(var(--v-szin-arnyek) / 0.2), rgb(255 255 255 / 0.3) 14px, rgb(var(--v-szin-arnyek) / 0.06) 60px, transparent); } .ixk-mozog .ixk-elol, .ixk-mozog .ixk-hatul, .ixk-huz .ixk-elol, .ixk-huz .ixk-hatul { will-change: transform, clip-path; } .ixk-el { position: absolute; top: calc(var(--ixk-tabla) + 2px); bottom: calc(var(--ixk-tabla) + 2px); width: 7px; background: repeating-linear-gradient(90deg, var(--v-szin-lap) 0 1px, var(--v-szin-lap-2) 1px 1.5px); pointer-events: none; } .ixk-el-bal { left: 2px; transform-origin: 100% 50%; } .ixk-el-jobb { right: 2px; transform-origin: 0 50%; } .ixk-konyv[data-mod="egy"] .ixk-tabla { width: min(100%, 480px); padding-left: 4px; } .ixk-konyv[data-mod="egy"] .ixk-tabla::before, .ixk-konyv[data-mod="egy"] .ixk-tabla::after, .ixk-konyv[data-mod="egy"] .ixk-el-bal { display: none; } .ixk-konyv[data-mod="egy"] .ixk-szinpad { overflow: clip; } .ixk-konyv[data-mod="egy"] .ixk-hely-bal { display: none; } .ixk-konyv[data-mod="egy"] .ixk-hely-jobb, .ixk-konyv[data-mod="egy"] .ixk-elol { left: 0; width: 100%; } .ixk-konyv[data-mod="egy"] .ixk-hatul { left: -100%; width: 100%; } .ixk-lap { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px 26px 14px; background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: var(--v-arnyek-lap); } .ixk-elofej { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--v-szin-vonal); font-size: var(--v-betu-meret-cimke); color: var(--v-szin-tinta-2); } .ixk-folio { display: flex; justify-content: space-between; align-items: end; padding-top: 6px; font-family: var(--v-betu-display); font-weight: 800; font-stretch: 125%; font-size: 1.25rem; line-height: 1; font-variant-numeric: var(--v-betu-szamok); } .ixk-sorok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); } .ixk-tetel { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 14px 0; min-height: 0; } .ixk-tetel + .ixk-tetel { border-top: 1px solid var(--v-szin-lap-2); } .ixk-borito img, .ixk-nincs { display: block; width: 84px; max-width: 100%; height: auto; aspect-ratio: 270 / 380; object-fit: cover; border-radius: var(--v-sarok-borito); box-shadow: var(--v-arnyek-tetel-borito); background: var(--v-szin-lap-2); -webkit-user-drag: none; user-select: none; } .ixk-nincs { display: grid; place-items: center; padding: 6px; box-sizing: border-box; background: var(--v-tetel-borito-nelkul); color: var(--v-tetel-borito-nelkul-szoveg); font-size: 0.75rem; font-weight: 600; line-height: 1.2; text-align: center; } .ixk-adat { display: grid; grid-template-rows: auto auto auto 1fr; min-width: 0; height: 100%; } .ixk-kiado { margin: 0; font-size: var(--v-betu-meret-cimke); color: var(--v-szin-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ixk-tcim { margin: 2px 0 0; font-weight: var(--v-betu-cim-suly); font-size: 1rem; line-height: 1.28; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ixk-tcim a { color: var(--v-szin-tinta); text-decoration: none; } .ixk-szerzo { margin: 2px 0 0; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ixk-vasar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 12px; align-self: end; margin-top: 8px; } .ixk-ar { margin: 0; display: grid; line-height: 1; } .ixk-arcimke { margin-bottom: 3px; font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); font-size: var(--v-betu-meret-cimke); color: var(--v-szin-ar-cimke); } .ixk-arertek { font-family: var(--v-betu-ar); font-weight: var(--v-betu-ar-suly); font-stretch: var(--v-betu-ar-szel); font-size: var(--v-betu-meret-ar); color: var(--v-szin-ar); font-variant-numeric: var(--v-betu-szamok); white-space: nowrap; } .ixk-vasar .gomb { position: relative; z-index: 1; } .ixk-db { margin-right: 8px; font-size: var(--v-betu-meret-cimke); font-weight: 700; color: var(--v-szin-siker); } .ixk-db:empty { display: none; } .ixk-elozek { display: grid; align-content: center; gap: 16px; padding: 0 12px; } .ixk-elozek h3 { margin: 0; font-family: var(--v-betu-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2rem, 1.2rem + 3cqi, 3rem); line-height: 0.95; } .ixk-elozek p { margin: 0; max-width: 34ch; color: var(--v-szin-tinta-2); } .ixk-elozek .ixk-jel { width: 48px; height: 6px; background: var(--v-szin-akcio); } .ixk-elozek p.ixk-hivas { font-family: var(--v-betu-display); font-weight: 800; font-stretch: 125%; font-size: 1.5rem; line-height: 1.05; color: var(--v-szin-tinta); } .ixk-elozek .gomb { justify-self: start; } .ixk-vezerlo { display: grid; grid-template-columns: 52px auto 52px; justify-content: center; align-items: center; gap: var(--v-ter-4); margin-top: var(--v-ter-5); } .ixk-nyil { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--v-szin-tinta); border-radius: 50%; background: transparent; color: var(--v-szin-tinta); cursor: pointer; transition: background-color var(--v-mozgas-gyors) var(--v-mozgas-ki), color var(--v-mozgas-gyors) var(--v-mozgas-ki); } .ixk-nyil svg { width: 22px; height: 22px; } .ixk-nyil[aria-disabled="true"] { opacity: 0.4; cursor: default; } @media (hover: hover) and (pointer: fine) { .ixk-nyil:not([aria-disabled="true"]):hover { background: var(--v-szin-tinta); color: var(--v-szin-lap); } } .ixk-allas { margin: 0; min-width: 9ch; text-align: center; font-family: var(--v-betu-display); font-weight: 800; font-stretch: 125%; font-size: 1.5rem; font-variant-numeric: var(--v-betu-szamok); } .ixk-regiszter { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; margin: var(--v-ter-4) auto 0; } .ixk-ful { width: 44px; height: 44px; padding: 0; border: 1px solid var(--v-szin-keret); background: color-mix(in srgb, var(--v-szin-lap) 55%, transparent); color: var(--v-szin-tinta); font-family: var(--v-betu-display); font-weight: 800; font-stretch: 112%; font-size: 1.125rem; font-variant-numeric: var(--v-betu-szamok); cursor: pointer; transition: background-color var(--v-mozgas-gyors) var(--v-mozgas-ki), color var(--v-mozgas-gyors) var(--v-mozgas-ki); } .ixk-ful[aria-current="page"], .ixk-ful[data-lathato] { background: var(--v-szin-akcio); border-color: var(--v-szin-akcio); color: var(--v-szin-akcio-szoveg); } @media (hover: hover) and (pointer: fine) { .ixk-ful:not([aria-current]):not([data-lathato]):hover { background: var(--v-szin-lap); } } .ixk-sugo { margin: var(--v-ter-3) auto 0; max-width: 60ch; text-align: center; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-szoveg-2); } .ixk-lab { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 24px; margin-top: var(--v-ter-5); } .ixk-lista { display: grid; gap: var(--v-ter-4); max-width: 720px; margin: 0 auto; } .ixk-loldal { padding: 14px 26px 6px; background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: var(--v-arnyek-emelt); } .ixk-loldal:nth-child(odd) { transform: rotate(-0.4deg); } .ixk-loldal:nth-child(even) { transform: rotate(0.3deg); } .ixk-lfej { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--v-szin-vonal); font-family: var(--v-betu-display); font-weight: 800; font-stretch: 125%; font-size: 1.5rem; line-height: 1; } .ixk-lfej span { font-family: var(--v-betu-torzs); font-weight: 400; font-stretch: 100%; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); } .ixk-lista .ixk-sorok { display: block; } .ixk-lista .ixk-tcim { display: block; overflow: visible; } @container (max-width: 560px) { .ixk { --ixk-lap-m: 640px; } .ixk-lap { padding: 14px 16px 12px; } .ixk-tetel { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; } .ixk-borito img, .ixk-nincs { width: 64px; } .ixk-loldal { padding: 10px 14px 4px; } .ixk-regiszter { gap: 4px; max-width: 290px; } } @media (prefers-reduced-motion: reduce) { .ixk-nyil, .ixk-ful, .ix-szt img { transition: none; } } .ix-fej { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-4) var(--v-ter-6); padding: var(--v-ter-5) 0 var(--v-ter-7); border-top: 2px solid var(--v-szin-tinta); scroll-margin-top: var(--v-ter-4); } .ix-h { font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: var(--v-betu-display-szel); letter-spacing: var(--v-betu-display-koz); line-height: var(--v-betu-display-sor); font-size: var(--v-betu-meret-h2); text-wrap: balance; overflow-wrap: anywhere; } .ix-tor { min-width: 0; max-width: 68ch; display: grid; gap: var(--v-ter-3); align-content: start; } .ix-margo { align-self: start; padding-top: var(--v-ter-2); border-top: 1px solid var(--v-szin-keret); } .ix-margo .lenyilo { border-bottom: 0; } .ix-margo .lenyilo > summary { color: var(--v-szin-link); } .ix-ma { font-stretch: 118%; font-weight: 800; font-size: var(--v-betu-meret-h3); line-height: 1.15; } .ix-ertek-sor { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-5); margin-top: var(--v-ter-4); } .ix-ertek-sor label { font-weight: 700; } .ix-ertek { display: block; min-width: 0; font-weight: 600; font-stretch: 80%; font-size: clamp(2.5rem, 1.6rem + 3cqi, 4.25rem); line-height: 0.95; letter-spacing: -0.01em; font-variant-numeric: var(--v-betu-szamok); color: var(--v-szin-link); white-space: nowrap; } .ix-cs { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: manipulation; } .ix-cs::-webkit-slider-runnable-track { height: 2px; background: var(--v-szin-tinta); } .ix-cs::-moz-range-track { height: 2px; background: var(--v-szin-tinta); } .ix-cs::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 36px; margin-top: -17px; border-radius: 0; background: var(--v-szin-akcio); border: 0; } .ix-cs::-moz-range-thumb { width: 18px; height: 36px; border-radius: 0; background: var(--v-szin-akcio); border: 0; } .ix-sorok { margin: 0; padding: 0; list-style: none; } .ix-sorok li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--v-ter-4); padding: var(--v-ter-4) 0; color: var(--v-szin-szoveg-2); } .ix-sorok li + li { border-top: 1px solid var(--v-szin-keret); } .ix-kuszob { font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); letter-spacing: var(--v-betu-adat-koz); font-variant-numeric: var(--v-betu-szamok); font-size: var(--v-betu-meret-lead); line-height: 1.2; } .ix-sorok li[data-aktiv] { color: var(--v-szin-tinta); } .ix-sorok li[data-aktiv] .ix-mondat { font-weight: 600; } .ix-pecset { justify-self: start; align-self: center; display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 3px solid var(--v-szin-link); color: var(--v-szin-link); font-stretch: 85%; font-weight: 800; font-size: var(--v-betu-meret-kicsi); white-space: nowrap; transform: rotate(-6deg); visibility: hidden; } .ix-sorok li[data-aktiv] .ix-pecset { visibility: visible; } html:not(.js) .ix-ertek-sor, html:not(.js) .ix-cs { display: none; } .ix-tenyek { margin: var(--v-ter-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--v-ter-2); } .ix-szall .pontsor { margin-top: var(--v-ter-2); } .ix-kotes-bel { max-width: var(--v-ter-max); margin-inline: auto; padding-block: var(--v-ter-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); } .ix-hl { display: grid; gap: var(--v-ter-5); } .ix-kotes .urlap { max-width: 52rem; } .ix-kotes .mezo > input:not([type="checkbox"]):not([type="radio"]) { border-color: var(--z-feher); } .ix-kotes .mezo > input[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--v-szin-kiemel); } .ix-fb a { display: inline-flex; align-items: center; min-height: 44px; font-stretch: 118%; font-weight: 800; font-size: var(--v-betu-meret-h3); text-underline-offset: 6px; text-decoration-thickness: 2px; } .ix-bolt { --ix-racs: 22px; } .ix-szak { position: relative; } .ix-szak + .ix-szak { margin-top: var(--v-ter-7); padding-top: var(--v-ter-5); border-top: 1px solid var(--v-szin-keret); } .ix-kcim { font-family: var(--v-betu-display); font-weight: 700; letter-spacing: var(--v-betu-display-koz); font-size: clamp(1.75rem, 1rem + 3.4cqi, 3.5rem); line-height: 1.1; max-width: 18ch; text-wrap: balance; } .ix-elo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--v-ter-3); margin-top: var(--v-ter-4); font-size: var(--v-betu-meret-lead); } .ix-elo strong { font-weight: 700; padding: 0 6px; background: var(--v-szin-kiemel); color: var(--v-szin-kiemel-szoveg); } .ix-szc { font-weight: 700; font-stretch: 112%; font-size: 1.125rem; line-height: var(--ix-racs); margin-bottom: var(--v-ter-4); } .ix-hol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); } .ix-foto img { display: block; width: 100%; height: auto; border: 1px solid var(--v-szin-tinta); } .ix-adatok { display: grid; gap: var(--v-ter-4); align-content: start; } .ix-blokk { display: grid; gap: 2px; align-content: start; } .ix-bc { justify-self: start; padding: 0 6px; background: var(--v-szin-lap-2); color: var(--v-szin-tinta); font-weight: 600; font-stretch: 85%; font-size: var(--v-betu-meret-cimke); line-height: var(--ix-racs); } .ix-ceg { position: relative; display: inline-block; justify-self: start; font-size: var(--v-betu-meret-lead); line-height: 1.3; } .ix-ceg strong { font-weight: 800; font-stretch: 112%; font-size: 1.125rem; } .ix-ceg::after { content: ""; position: absolute; z-index: -1; inset: 2px -6px; background: var(--v-szin-kiemel); transform: scaleX(0); transform-origin: left center; transition: transform var(--v-mozgas-lassu) var(--v-mozgas-ki); } .ix-ceg[data-masolva] { isolation: isolate; } .ix-ceg[data-masolva]::after { transform: scaleX(1); } .ix-telek { display: grid; justify-items: start; } .ix-telek a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-variant-numeric: var(--v-betu-szamok); white-space: nowrap; color: var(--v-szin-link); } .ix-hir { min-height: 1.5em; font-size: var(--v-betu-meret-kicsi); font-weight: 600; } .ix-mikor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); align-items: start; } .ix-orarend { position: relative; justify-self: start; display: grid; grid-template-columns: 22px repeat(6, 44px); grid-template-rows: 44px repeat(8, 44px) 22px; border: 1px solid var(--v-szin-tinta); background: linear-gradient(var(--v-szin-vonal) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--v-szin-vonal) 1px, transparent 1px) 0 0 / 22px 22px, var(--v-szin-lap); box-shadow: var(--v-arnyek-emelt); touch-action: manipulation; } .ix-nap { grid-row: 1; position: relative; z-index: 2; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--v-szin-tinta); color: var(--v-szin-tinta); font-weight: 700; font-stretch: 85%; font-size: 0.75rem; line-height: 1.1; cursor: pointer; } .ix-nap[data-ma] { background: var(--v-szin-kiemel); } @media (hover: hover) and (pointer: fine) { .ix-nap:not([data-ma]):hover { background: var(--v-szin-lap-2); } } .ix-nap[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--v-szin-tinta); } .ix-nap:focus-visible { outline-offset: -3px; } .ix-ora { grid-column: 1; align-self: start; justify-self: center; transform: translateY(-8px); padding: 0 1px; background: var(--v-szin-lap); color: var(--v-szin-tinta-2); font-stretch: 85%; font-size: 0.6875rem; line-height: 16px; font-variant-numeric: tabular-nums; } .ix-ora-vege { grid-row: 10 !important; } .ix-kiem-sav { margin: 3px 7px; background: var(--v-szin-kiemel); opacity: 0.88; mix-blend-mode: multiply; pointer-events: none; } .ix-ebed { display: grid; place-items: center; color: var(--v-szin-tinta-2); font-stretch: 85%; font-size: 0.75rem; pointer-events: none; } .ix-zarva { display: grid; align-content: end; padding-bottom: 12px; text-align: center; color: var(--v-szin-tinta-2); font-stretch: 85%; font-size: 0.6875rem; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--v-szin-keret) 35%, transparent) 10px 11px); } .ix-most, .ix-kurzor { position: absolute; top: 0; left: 0; pointer-events: none; } .ix-most { width: 44px; height: 2px; background: var(--v-szin-disz); display: none; } .ix-most::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--v-szin-disz); } .ix-most[data-lat] { display: block; } .ix-kurzor { width: 44px; height: 44px; border: 2px solid var(--v-szin-fokusz); opacity: 0; transition: transform var(--v-mozgas-gyors) var(--v-mozgas-ki), opacity var(--v-mozgas-gyors) var(--v-mozgas-ki); } .ix-kurzor[data-lat] { opacity: 1; } .ix-mikor-szoveg { display: grid; gap: var(--v-ter-4); align-content: start; } .ix-napinfo { min-height: calc(var(--ix-racs) * 4); padding-left: var(--v-ter-3); border-left: 2px solid var(--v-szin-tinta); line-height: var(--ix-racs); max-width: 40ch; } .ix-uzenet { display: grid; gap: var(--v-ter-3); justify-items: start; max-width: 60ch; } @container (min-width: 720px) { .ix-sorok li { grid-template-columns: 9.5rem minmax(0, 1fr) 8.5rem; align-items: baseline; } .ix-pecset { justify-self: end; } } @container (max-width: 719.98px) { .ix-kuszob { min-height: 36px; padding-right: 9rem; } .ix-pecset { position: absolute; top: var(--v-ter-4); right: var(--v-ter-1); } } @container (min-width: 760px) { .ix-hol { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--v-ter-7); } .ix-mikor { grid-template-columns: auto minmax(0, 1fr); gap: var(--v-ter-7); } .ix-orarend { grid-template-columns: 44px repeat(6, 66px); } .ix-nap { font-size: 0.8125rem; } .ix-kiem-sav { margin-inline: 11px; } } @container (min-width: 960px) { .ix-fej { grid-template-columns: repeat(12, minmax(0, 1fr)); } .ix-fej > .ix-h { grid-column: 1 / -1; font-size: clamp(2.5rem, 1rem + 4.4cqi, 4.5rem); } .ix-fej > .ix-tor { grid-column: 1 / span 7; } .ix-fej > .ix-tor-szeles { grid-column: 3 / -1; max-width: none; } .ix-fej > .ix-margo { grid-column: 9 / -1; } .ix-kotes-bel { grid-template-columns: repeat(12, minmax(0, 1fr)); } .ix-kotes-bel > .ix-hl { grid-column: 1 / span 8; } .ix-kotes-bel > .ix-fb { grid-column: 10 / -1; } } @container (max-width: 600px) { .ix-h1 { font-size: 8cqi; font-stretch: 118%; } .ix-mondat { font-size: 1.125rem; } .ix-h { font-stretch: 118%; font-size: clamp(1.625rem, 0.5rem + 5.8cqi, 2.5rem); } } @media (prefers-reduced-motion: reduce) { .ix-ceg::after, .ix-kurzor { transition: none; } }
/* ===== bongeszes/kategoria-akcios ===== */
.kt-szurok { display: grid; gap: var(--v-ter-5); padding: var(--v-ter-5) 0; border-top: 2px solid var(--v-szin-tinta); } .kt-szurok .evfolyamok label { gap: 0 6px; grid-auto-flow: column; } .kt-db { font-weight: 600; font-stretch: 62%; font-size: 0.8125rem; color: var(--v-szin-tinta-2); } .evfolyamok label:has(input:checked) .kt-db { color: inherit; } .kt-sor { display: flex; flex-wrap: wrap; align-items: start; gap: var(--v-ter-4) var(--v-ter-5); } .kt-sor .mezo { flex: 1 1 220px; max-width: 360px; } .kt-megj { margin-top: var(--v-ter-2); } .kt-szurosav { align-items: center; } .kt-szurosav .gomb-link { min-height: 44px; } .kt-talalat { outline: none; } .kt-ures { margin-bottom: var(--v-ter-5); } .kt-ures .gomb-sor { margin-top: var(--v-ter-3); } html:not(.js) .kt-szurok, html:not(.js) .kt-szurosav { display: none; } .kt-lab { display: grid; gap: var(--v-ter-4); margin-top: var(--v-ter-7); } @container (min-width: 900px) { .kt-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .kt-masik { display: grid; gap: var(--v-ter-2); } .kt-lab .figy { grid-template-columns: minmax(0, 1fr); } .kt-lab .figy::before { content: none; } .kt-lab .figy > * { grid-column: 1; } .konyvracs[data-nezet="racs"] .konyv-test > :not(.ar) + .ar { margin-top: auto; } .konyvracs[data-nezet="racs"] .konyv-lab { margin-top: 0; }
/* ===== bongeszes/kategoria-akcios ===== */
html.js .konyvracs[data-bg-lista]:not([data-lista-kesz]) > li:nth-child(n+13) { display: none; }
/* ===== bongeszes/kereses ===== */
.ks-doboz { display: grid; gap: var(--v-ter-4); scroll-margin-top: var(--v-ter-4); } .ks-doboz .h-szakasz { margin: 0; } .ks-ki > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--v-ter-4); min-height: 44px; cursor: pointer; } .ks-ki > summary::-webkit-details-marker { display: none; } .ks-ki > summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat; transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .ks-ki[open] > summary::after { transform: rotate(45deg); } .ks-ki[open] > summary { margin-bottom: var(--v-ter-4); } .ks-ki-fej { display: grid; gap: 2px; } .ks-ki-al { font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-szoveg-2); } .ks-ki[open] .ks-ki-al { display: none; } @media (hover: hover) and (pointer: fine) { .ks-ki > summary:hover .h-szakasz { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } } .ks-racs { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--v-ter-4) var(--v-ter-5); margin-bottom: var(--v-ter-5); } @container (min-width: 640px) { .ks-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 980px) { .ks-racs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ks-racs .ks-szeles { grid-column: span 2; } } .ks-racs .mezo > select { min-width: 0; width: 100%; } .ks-talalatok { margin-top: var(--v-ter-7); } .ks-talalatok > .h-kis { margin-bottom: var(--v-ter-3); } .ks-szurosav { align-items: end; } .ks-szurosav .mezo { min-width: 220px; } .ks-talalat { outline: none; } .ks-hir { margin-bottom: var(--v-ter-5); } .ks-bolt { display: grid; gap: var(--v-ter-3); margin-top: var(--v-ter-7); padding: var(--v-ter-5); background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); border-top: 4px solid var(--v-szin-akcio); } .ks-url { display: block; padding: 10px 12px; background: var(--v-szin-lap-2); color: var(--v-szin-link); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875rem; line-height: 1.45; min-height: 44px; overflow-wrap: anywhere; user-select: all; } html:not(.js) .ks-talalatok .szurosav, html:not(.js) .ks-bolt { display: none; } .konyvracs[data-nezet="racs"] .konyv-test > :not(.ar) + .ar { margin-top: auto; } .konyvracs[data-nezet="racs"] .konyv-lab { margin-top: 0; } .ks-doboz:has(> .ks-ki:not([open])) { padding-block: var(--v-ter-3); } .ks-ki:not([open]) .h-szakasz { font-size: clamp(1.25rem, 1rem + 1.4cqi, 1.75rem); } @container (max-width: 520px) { .ks-ki-al { display: none; } } @container (max-width: 600px) { .ks-talalatok { margin-top: var(--v-ter-5); } .ks-szurosav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .ks-szurosav .ks-talalat { grid-column: 1 / -1; } .ks-szurosav .mezo { min-width: 0; } }
/* ===== vasarlas/konyv-11927 ===== */
.kv-fo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); } .kv-kep { display: grid; place-items: center; margin: 0; padding: var(--v-ter-4) 0; } .kv-kep img { width: min(270px, 58vw); max-width: 100%; height: auto; box-shadow: var(--v-arnyek-borito); border-radius: var(--v-sarok-borito); background: var(--v-szin-lap-2); } .kv-kep .nincs-borito { width: min(270px, 58vw); font-size: 1rem; box-shadow: var(--v-arnyek-borito); border-radius: var(--v-sarok-borito); } .kv-kep .kv-nincs-borito { width: min(150px, 38vw); align-content: end; } .kv-lemez { display: grid; align-content: space-between; gap: var(--v-ter-5); min-width: 0; padding: clamp(20px, 4cqi, 56px); box-shadow: var(--v-arnyek-lap); container-type: inline-size; } .kv-lemez-fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-4); } .kv-kat { font-stretch: var(--v-betu-adat-szel); font-weight: var(--v-betu-adat-suly); letter-spacing: 0.06em; font-size: var(--v-betu-meret-cimke); } .kv-pecset { padding: 5px 12px 4px; border: 3px solid var(--v-szin-disz); font-stretch: 85%; font-weight: 800; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-6deg); } .kv-h1 { --max: 4.5rem; font-family: var(--v-betu-display); font-stretch: 150%; font-weight: 900; font-size: max(1.25rem, min(var(--max), calc(100cqi / (var(--szo, 10) + 0.4)))); line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; } .kv-h1:focus { outline: none; } .kv-h1[data-hossz="kozep"] { --max: 3.25rem; line-height: 1; } .kv-h1[data-hossz="hosszu"] { --max: 2.125rem; font-stretch: 125%; line-height: 1.12; } @container (max-width: 520px) { .kv-h1[data-szeles] { font-stretch: 112%; font-size: max(1.125rem, min(var(--max), calc(100cqi / (var(--szo, 10) * 0.82 + 0.4)))); } } .kv-lemez-also { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--v-ter-2) var(--v-ter-5); padding-top: var(--v-ter-3); border-top: 1px solid rgb(255 255 255 / 0.45); } .kv-szerzo { font-size: var(--v-betu-meret-lead); line-height: 1.3; overflow-wrap: anywhere; } .kv-kiado { font-stretch: 85%; font-weight: 600; letter-spacing: 0.02em; font-size: var(--v-betu-meret-kicsi); overflow-wrap: anywhere; } .kv-test { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-7); margin-top: var(--v-ter-6); } .kv-adatlap { display: grid; align-content: start; gap: var(--v-ter-4); min-width: 0; } .kv-arak { display: grid; gap: var(--v-ter-2); margin-top: var(--v-ter-3); padding-top: var(--v-ter-4); border-top: 3px solid var(--v-szin-tinta); } .kv-ar-megj { color: var(--v-szin-tinta-2); margin-top: -4px; } .kv-ar-mellek > div { padding: 6px 0; } .kv-ar-mellek dt { flex: 0 1 auto; min-width: 0; white-space: normal; } .kv-ar-mellek dt small { display: block; font-size: var(--v-betu-meret-cimke); font-weight: 400; letter-spacing: 0; color: var(--v-szin-tinta-2); } .kv-ar-mellek dd { flex: none; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } html:not(.js) .kv-vasar { display: none; } .kv-iskolai { margin-top: calc(-1 * var(--v-ter-2)); } .kv-iskolai a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } .kv-pld { margin-top: var(--v-ter-2); } .kv-vasar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--v-ter-3) var(--v-ter-4); } .kv-db { display: grid; gap: 6px; } .kv-kosarba { flex: 1 1 200px; } .kv-kosarlink { margin-top: calc(-1 * var(--v-ter-2)); } .kv-leiras { display: grid; gap: var(--v-ter-3); margin-top: var(--v-ter-5); padding-top: var(--v-ter-4); border-top: 2px solid var(--v-szin-tinta); } .kv-margo .kv-szall > div { padding: 6px 0; } .kv-margo .kv-szall dt { flex: 0 1 auto; min-width: 0; white-space: normal; } .kv-margo .kv-szall dd { flex: none; font-weight: 800; white-space: nowrap; } .kv-tel { font-weight: 700; } .kv-margo .elo { justify-self: start; } .kv-sor { display: grid; gap: var(--v-ter-4); margin-top: var(--v-ter-8); } .kv-sor-fej { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-4); padding-bottom: var(--v-ter-3); border-bottom: 3px solid var(--v-szin-tinta); } .kv-sor-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-ter-2) var(--v-ter-4); } .kv-sor-gombok { display: flex; gap: 6px; } .kv-sor-gomb { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--v-gomb2-keret); background: var(--v-szin-lap); color: var(--v-gomb2-szoveg); cursor: pointer; touch-action: manipulation; } .kv-sor-gomb[aria-disabled="true"] { opacity: 0.35; cursor: default; } .kv-chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); } .kv-chev-bal { transform: rotate(135deg) translate(-1px, -1px); } html:not(.js) .kv-sor-gombok { display: none; } @media (hover: hover) and (pointer: fine) { .kv-sor-gomb:hover:not([aria-disabled="true"]) { background: var(--v-szin-lap-2); } } @container (min-width: 900px) { .kv-fo { grid-template-columns: 5fr 7fr; align-items: stretch; gap: var(--v-ter-6); } .kv-kep { place-items: end center; padding: 0; } .kv-lemez { min-height: 340px; } .kv-test { grid-template-columns: 8fr 4fr; gap: var(--v-ter-8); } } .v-osszesito { display: grid; align-content: start; gap: var(--v-ter-4); } .v-osszesito .pontsor > div { padding: 7px 0; } .v-osszesito .pontsor dt { flex: 0 1 auto; min-width: 0; white-space: normal; } .v-osszesito .pontsor dd { flex: none; max-width: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .v-osszesito .pontsor .pontsor-nagy dd { font-size: var(--v-betu-meret-ar); } .v-cim { font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.15; padding-bottom: var(--v-ter-2); border-bottom: 2px solid var(--v-szin-tinta); } .savmero { display: grid; gap: var(--v-ter-2); } .savmero-sin { position: relative; height: 12px; background: var(--v-szin-lap-2); box-shadow: inset 0 0 0 1px var(--v-szin-keret); } .savmero-sin::before, .savmero-sin::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--v-szin-tinta); } .savmero-sin::before { left: 33.333%; } .savmero-sin::after { left: 66.666%; } .savmero-tolt { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--v-szin-akcio); transform: scaleX(var(--arany, 0)); transform-origin: left center; transition: transform var(--v-mozgas-kozep) var(--v-mozgas-ki); } .savmero-savok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: var(--v-betu-meret-cimke); line-height: 1.25; } .savmero-savok li { display: grid; align-content: start; gap: 2px; padding-top: 6px; border-top: 4px solid transparent; color: var(--v-szin-tinta-2); } .savmero-savok b { font-stretch: 85%; font-weight: 800; color: var(--v-szin-tinta); font-variant-numeric: tabular-nums; } .savmero-savok li[data-aktiv] { color: var(--v-szin-tinta); } .savmero-savok li[data-aktiv] { border-top-color: var(--v-szin-akcio); font-weight: 700; } .savmero-szoveg { font-weight: 700; font-size: var(--v-betu-meret-kicsi); } .ks-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); } .ks-lista { display: grid; border-top: 3px solid var(--v-szin-tinta); } .ks-sor { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "kep szov" "vez vez"; gap: var(--v-ter-3) var(--v-ter-4); padding: var(--v-ter-4) 0; border-bottom: 1px solid var(--v-szin-keret); } .ks-kep { grid-area: kep; } .ks-kep img, .ks-kep .nincs-borito { display: block; width: 64px; height: auto; aspect-ratio: 270 / 380; object-fit: cover; border-radius: var(--v-sarok-borito); box-shadow: var(--v-arnyek-tetel-borito); } .ks-kep .nincs-borito { padding: 4px; font-size: 0.625rem; } .ks-szov { grid-area: szov; display: grid; align-content: start; gap: 4px; min-width: 0; } .ks-cim { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .ks-cim a { color: var(--v-szin-tinta); text-decoration: none; } .ks-meta { font-stretch: 85%; font-weight: 600; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); overflow-wrap: anywhere; } .ks-vez { grid-area: vez; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-4); } .ks-osszeg { font-stretch: var(--v-betu-ar-szel); font-weight: var(--v-betu-ar-suly); font-size: var(--v-betu-meret-ar); white-space: nowrap; font-variant-numeric: tabular-nums; } .ks-vez-bal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-ter-2) var(--v-ter-3); } .ks-visszavon { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--v-ter-3); margin-top: var(--v-ter-3); } .ks-visszavon:empty { display: none; } .ks-ures { display: grid; gap: var(--v-ter-4); justify-items: start; } .ks-info { display: grid; gap: var(--v-ter-3); margin-top: var(--v-ter-7); } .ks-info .szoveg { max-width: 75ch; } @media (hover: hover) and (pointer: fine) { .ks-cim a:hover { text-decoration: underline; } } @container (min-width: 700px) { .ks-sor { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "kep szov vez"; align-items: center; } .ks-kep img, .ks-kep .nincs-borito { width: 72px; } .ks-vez { flex-direction: column; align-items: flex-end; justify-content: center; } } @container (min-width: 900px) { .ks-racs { grid-template-columns: 8fr 4fr; gap: var(--v-ter-7); align-items: start; } .ks-racs .v-osszesito { position: sticky; top: var(--v-ter-4); } } .pt-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); } .pt-lepes { display: grid; gap: var(--v-ter-5); scroll-margin-top: var(--v-ter-4); } .pt-lepes + .pt-lepes { padding-top: var(--v-ter-6); border-top: 2px solid var(--v-szin-tinta); } .js .pt-lepes:not([data-aktiv]) { display: none; } .js .pt-lepes + .pt-lepes { padding-top: 0; border-top: 0; } .pt-lepes-cim { font-weight: 900; font-stretch: 150%; font-size: var(--v-betu-meret-h2); line-height: 0.95; letter-spacing: -0.01em; overflow-wrap: anywhere; } .pt-lepes-cim:focus { outline: none; } .pt-csoport { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--v-ter-4); } .pt-csoport > legend { padding: 0; margin-bottom: var(--v-ter-3); font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); } .pt-gombok { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: var(--v-ter-3); padding-top: var(--v-ter-4); border-top: 1px solid var(--v-szin-keret); } .pt-gombok .gomb-nagy { flex: 0 1 auto; } .pt-fizetes { display: grid; gap: 2px; } .pt-fizetes .radio { font-size: 1rem; font-weight: 700; } .pt-fizetes .radio small { display: block; font-weight: 400; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); } .pt-logok { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 var(--v-ter-2) 44px; padding: 8px; background: var(--z-feher); width: fit-content; max-width: calc(100% - 44px); } .pt-logok img { height: 30px; width: auto; } .pt-jogi { display: grid; gap: var(--v-ter-2); padding: var(--v-ter-4); background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); } .pt-jogi .pipa { font-size: var(--v-betu-meret-kicsi); } .pt-attekint { display: grid; gap: var(--v-ter-5); } .pt-attekint-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); } .pt-attekint-doboz { display: grid; align-content: start; gap: var(--v-ter-2); padding: var(--v-ter-4); background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); overflow-wrap: anywhere; } .pt-attekint-doboz .gomb-link { justify-self: start; } .pt-vege { font-weight: 700; } .pt-mini { display: grid; gap: 6px; border-top: 1px solid var(--v-szin-keret); padding-top: var(--v-ter-3); font-size: var(--v-betu-meret-kicsi); } .pt-mini li { display: flex; justify-content: space-between; gap: var(--v-ter-3); } .pt-mini li > span:first-child { min-width: 0; overflow-wrap: anywhere; } .pt-mini li > span:last-child { flex: none; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; } @container (min-width: 640px) { .pt-attekint-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 900px) { .pt-racs { grid-template-columns: 8fr 4fr; gap: var(--v-ter-7); align-items: start; } .pt-racs .v-osszesito { position: sticky; top: var(--v-ter-4); } } .rk-fej { display: grid; gap: var(--v-ter-4); padding: clamp(20px, 4cqi, 48px); box-shadow: var(--v-arnyek-lap); } .rk-fej .h-oldal { font-size: clamp(2rem, 1rem + 4.4cqi, 4rem); } .rk-azon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--v-ter-3); padding-top: var(--v-ter-3); border-top: 1px solid rgb(255 255 255 / 0.45); } .rk-azon b { font-stretch: 85%; font-weight: 800; font-size: var(--v-betu-meret-ar); } .rk-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); margin-top: var(--v-ter-6); } .rk-racs > * { min-width: 0; } .rk-lepesek { margin-bottom: 0; } .rk-tovabb { display: grid; gap: var(--v-ter-4); align-content: start; } .rk-racs > aside { align-self: start; } ol.lepesek.pt-jelzo { margin: var(--v-ter-5) 0 var(--v-ter-6); } .pt-jelzo li { position: relative; } .pt-jelzo li[data-allapot="kesz"] { border-top-color: var(--v-szin-akcio); } .pt-jelzo li[data-allapot="kesz"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 12px; height: 7px; border-left: 3px solid var(--v-szin-akcio); border-bottom: 3px solid var(--v-szin-akcio); transform: rotate(-45deg); } .pt-jelzo .pt-kesz { font-weight: 400; } @container (min-width: 900px) { .rk-racs { grid-template-columns: 7fr 5fr; gap: var(--v-ter-7); } }
/* ===== vasarlas/penztar ===== */
html:not(.js) [data-pt-tovabb], html:not(.js) [data-pt-vissza], html:not(.js) [data-pt-modosit] { display: none; }
/* ===== fiok/adataim ===== */
.fiok-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); align-items: start; }
@container (min-width: 900px) { .fiok-racs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--v-ter-7); }
}
@container (min-width: 900px) { .fiok-racs.fiok-racs-elol { grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); }
.fiok-racs-elol > .oldalsav { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--v-ter-4) var(--v-ter-7); align-items: start; }
}
.fiok-sav-resz { display: grid; align-content: start; gap: var(--v-ter-4); min-width: 0; }
.fiok-urlap { max-width: 560px; }
.fiok-fo { display: grid; gap: var(--v-ter-6); min-width: 0; }
.fiok-csop { display: grid; gap: var(--v-ter-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.fiok-csop > legend { width: 100%; padding: 0; margin-bottom: var(--v-ter-4); }
.fiok-csop + .fiok-csop > legend { padding-top: var(--v-ter-5); border-top: 1px solid var(--v-szin-keret); }
.fiok-csop-cim { font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.15; }
.fiok-masol { justify-self: start; padding-left: 0; text-align: left; }
.fiok-oldalsav .h-szakasz { font-size: clamp(1.5rem, 1rem + 1.6cqi, 2.25rem); line-height: 1.02; overflow-wrap: normal; }
.fiok-pipak { display: grid; gap: var(--v-ter-1); }
.fiok-kis-link { margin: 0; }
.fiok-kis-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.fiok-captcha { padding: var(--v-ter-3) var(--v-ter-4); border: 2px dashed var(--v-szin-keret); background: var(--v-szin-lap-2); color: var(--v-szin-tinta-2); font-size: var(--v-betu-meret-kicsi); }
.fiok-captcha strong { color: var(--v-szin-tinta); }
.fiok-oldalsav { font-size: var(--v-betu-meret-torzs); }
.fiok-oldalsav .figy { font-size: var(--v-betu-meret-kicsi); }
.fiok-tel { display: flex; flex-wrap: wrap; gap: 0 var(--v-ter-4); }
.fiok-tel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }
.fiok-nav { margin: 0 0 var(--v-ter-6); border-bottom: 2px solid var(--v-szin-tinta); }
.fiok-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--v-ter-5); }
.fiok-nav a { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: -2px; border-bottom: 4px solid transparent; color: var(--v-szin-tinta); font-weight: 700; font-stretch: 112%; text-decoration: none; }
.fiok-nav a[aria-current="page"] { border-bottom-color: var(--v-szin-akcio); color: var(--v-szin-link); }
@media (hover: hover) and (pointer: fine) { .fiok-nav a:not([aria-current]):hover { border-bottom-color: var(--v-szin-keret); }
}
.fiok-minta { margin-bottom: var(--v-ter-6); }
.rendelesek { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); }
.rendeles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-4); min-width: 0; }
.rendeles-fej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ter-2) var(--v-ter-4); }
.rendeles-azon { display: grid; gap: 2px; font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.15; overflow-wrap: anywhere; }
.rendeles-azon small { font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: var(--v-betu-adat-szel); letter-spacing: 0.06em; color: var(--v-szin-tinta-2); }
.rendeles-boritok { display: flex; flex-wrap: wrap; gap: var(--v-ter-2); }
.rendeles-boritok img, .rendeles-boritok .nincs-borito { width: 44px; height: auto; aspect-ratio: 270 / 380; object-fit: cover; border-radius: var(--v-sarok-borito); box-shadow: var(--v-arnyek-tetel-borito); padding: 0; }
.rendeles .tabla td a { color: var(--v-szin-link); font-weight: 600; }
.rendeles .gomb-sor { justify-content: flex-start; }
/* ===== tartalom/404 ===== */
.tt-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); align-items: start; } @container (min-width: 960px) { .tt-racs { grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr); gap: var(--v-ter-7); } .tt-racs-bal { grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); } .tt-ragad { position: sticky; top: var(--v-ter-4); } .tt-tj.tt-ragad { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; margin: 0 -8px; } } .tt-lap { background: var(--v-szin-lap); color: var(--v-szin-tinta); box-shadow: var(--v-arnyek-lap); padding: var(--v-ter-5) var(--v-ter-4); min-width: 0; } @container (min-width: 640px) { .tt-lap { padding: var(--v-ter-6) var(--v-ter-7); } } .tt-lap .szoveg { max-width: 68ch; overflow-wrap: break-word; } .szoveg h2, .szoveg h3, .tt-szakasz { scroll-margin-top: var(--v-ter-4); } .szoveg h2:first-child { margin-top: 0; } .szoveg h2 { padding-top: var(--v-ter-3); border-top: 2px solid var(--v-szin-tinta); } .pont-szam { font-weight: 800; font-stretch: 125%; color: var(--v-szin-link); font-variant-numeric: tabular-nums; } .tt-tj .tj-sor { min-height: 48px; padding: 10px 0 8px; } .tt-tj .tj-sor-cim { font-size: 1.125rem; font-weight: 700; } .tt-tj .tj-cel { font-stretch: 85%; } .helyorzo { padding: 0 4px; background: var(--v-szin-lap-2); color: var(--v-szin-tinta); box-shadow: inset 0 -2px 0 var(--v-szin-kiemel); font-weight: 600; overflow-wrap: anywhere; } .tt-kieg { margin-top: var(--v-ter-6); padding: var(--v-ter-4) var(--v-ter-4) var(--v-ter-5); border-top: 4px solid var(--v-szin-kiemel); background: var(--v-szin-lap-2); } .tt-kieg > * + * { margin-top: var(--v-ter-3); } .tt-kieg-jel { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px; background: var(--v-szin-kiemel); color: var(--v-szin-kiemel-szoveg); font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: 85%; letter-spacing: 0.02em; } .tt-megj { display: grid; gap: 4px; padding: var(--v-ter-3) var(--v-ter-4); border: 2px dashed var(--v-szin-keret); background: var(--v-szin-lap); color: var(--v-szin-tinta); font-size: var(--v-betu-meret-kicsi); } .tt-megj-cim { font-weight: 700; font-stretch: 85%; letter-spacing: 0.02em; color: var(--v-szin-tinta-2); } .tt-megj + .tt-megj { margin-top: var(--v-ter-3); } .tt-doboz { display: grid; gap: var(--v-ter-3); padding: var(--v-ter-4); background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); border-top: 4px solid var(--v-szin-akcio); } .tt-doboz .h-cimke { margin-bottom: -4px; } .tt-telek { display: flex; flex-wrap: wrap; gap: 0 var(--v-ter-4); } .tt-telek a, .tt-doboz .tt-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } .tt-doboz a[href^="tel:"], .pontsor dd a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; } .tt-cim { font-style: normal; } .tt-tj-tok > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--v-ter-3); min-height: 48px; padding: 8px 0; border-bottom: 2px solid var(--v-szin-tinta); cursor: pointer; font-size: var(--v-betu-meret-cimke); font-weight: 700; font-stretch: var(--v-betu-adat-szel); letter-spacing: 0.06em; color: var(--v-szin-szoveg-2); } .tt-tj-tok > summary::-webkit-details-marker { display: none; } .tt-tj-tok > summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; } .tt-tj-tok[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat; } .tt-alcim { display: grid; gap: var(--v-ter-2); } .tt-urlap { display: grid; gap: var(--v-ter-5); } .tt-urlap h2, .tt-urlap h3 { scroll-margin-top: var(--v-ter-4); } .tt-csoport { display: grid; gap: var(--v-ter-3); margin: 0; padding: 0; border: 0; min-width: 0; } .tt-csoport > legend { padding: 0; margin-bottom: var(--v-ter-2); } .tt-cim-h { font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.2; } .tt-fajl { padding: 9px var(--v-ter-3) !important; } @media (hover: hover) and (pointer: fine) { .tt-doboz a:hover, .szoveg a:hover { text-decoration-thickness: 2px; } }
/* ===== tartalom/404 ===== */
.tt-404 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-6); align-items: start; }
@container (min-width: 900px) { .tt-404 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--v-ter-7); }
}
.tt-404-szam { display: block; font-weight: 900; font-stretch: 150%; font-size: clamp(5rem, 2rem + 14cqi, 10rem); line-height: 1; letter-spacing: -0.02em; color: var(--v-szin-akcio); }
.tt-404-kereso { display: grid; gap: var(--v-ter-3); margin-top: var(--v-ter-5); max-width: 560px; }
.tt-404-sor { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.tt-404-sor input { min-height: 48px; font-size: 1.0625rem; }
.tt-404-sor .gomb { min-height: 48px; }
/* ===== tartalom/adatvedelem ===== */
.tt-avf-fo { display: grid; gap: var(--v-ter-4); min-width: 0; }
/* ===== tartalom/felvasarlas ===== */
.tt-most { display: grid; gap: var(--v-ter-2); margin-top: var(--v-ter-5); }
.tt-most .tt-cim-h { font-size: 1.125rem; }
.tt-url { overflow-wrap: anywhere; font-weight: 600; }
.tt-felv-fo { display: grid; gap: var(--v-ter-5); min-width: 0; }
.tt-kerdoiv { margin-top: var(--v-ter-7); scroll-margin-top: var(--v-ter-4); }
.tt-kerdoiv .tt-lap { display: grid; gap: var(--v-ter-5); }
.tt-kerdoiv-cim { font-family: var(--v-betu-display); font-weight: var(--v-betu-display-suly); font-stretch: 118%; font-size: clamp(1.5rem, 1rem + 2cqi, 2.25rem); line-height: 1.05; text-wrap: balance; }
.tt-szamla { margin: 0 0 0 44px; max-width: 420px; }
.tt-most ul { margin: 0; padding-left: 1.25em; }
/* ===== tartalom/gyik ===== */
.tt-kerdes { display: grid; gap: var(--v-ter-3); padding: var(--v-ter-5) 0; border-top: 2px solid var(--v-szin-tinta); }
.tt-kerdes:first-child { border-top: 0; padding-top: 0; }
.tt-kerdes h2 { font-weight: 800; font-stretch: 125%; font-size: clamp(1.25rem, 1rem + 1cqi, 1.625rem); line-height: 1.2; text-wrap: balance; scroll-margin-top: var(--v-ter-4); }
.tt-kerdes .szoveg { max-width: 68ch; }
.tt-tj .tj-sor-cim { display: flex; gap: 10px; }
.tt-tj-szam { flex: none; min-width: 1.6em; color: var(--v-szin-link); font-weight: 800; }
.tt-zaro { display: grid; gap: var(--v-ter-4); margin-top: var(--v-ter-7); padding: var(--v-ter-5) var(--v-ter-oldal); }
.tt-zaro .gomb-sor { margin-top: var(--v-ter-2); }
/* ===== tartalom/impresszum ===== */
.tt-imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); margin-top: var(--v-ter-6); }
@container (min-width: 900px) { .tt-imp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt-imp > :last-child { grid-column: span 2; }
}
.tt-imp .dobozlap { display: grid; gap: var(--v-ter-3); align-content: start; min-width: 0; }
.tt-imp .pontsor dd a { display: inline-flex; align-items: center; min-height: 44px; }
.tt-imp .pontsor dd { line-height: 1.45; }
/* ===== tartalom/kapcsolat ===== */
.tt-kap-fej { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--v-ter-3) var(--v-ter-5); }
.tt-kap-szak { display: grid; gap: var(--v-ter-5); padding: var(--v-ter-5) 0 var(--v-ter-7); border-top: 2px solid var(--v-szin-tinta); }
.tt-kap-szak > h2 { font-weight: 800; font-stretch: 125%; font-size: var(--v-betu-meret-h3); line-height: 1.2; }
.tt-hol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); }
@container (min-width: 900px) { .tt-hol { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--v-ter-7); align-items: start; }
}
.tt-fotok { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-3); margin: 0; align-content: start; }
.tt-fotok img { width: 100%; height: auto; border: 1px solid var(--v-szin-tinta); background: var(--v-szin-lap-2); }
.tt-fotok figcaption { grid-column: 1 / -1; font-size: var(--v-betu-meret-kicsi); color: var(--v-szin-tinta-2); }
.tt-adatok { display: grid; gap: var(--v-ter-5); align-content: start; }
.tt-blokk { display: grid; gap: var(--v-ter-1); }
.tt-blokk .h-cimke { margin-bottom: 2px; }
.tt-cimsor { font-style: normal; font-size: 1.125rem; line-height: 1.4; }
.tt-cimsor strong { font-weight: 800; font-stretch: 125%; }
.tt-fb { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: var(--v-szin-akcio); color: var(--v-szin-akcio-szoveg); font-weight: 800; font-stretch: 112%; text-decoration: none; justify-self: start; }
.tt-fb:active { background: var(--v-szin-akcio-mely); }
.tt-fb:focus-visible { outline-color: var(--v-szin-tinta); }
.tt-mikor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-5); align-items: start; }
@container (min-width: 760px) { .tt-mikor { grid-template-columns: auto minmax(0, 1fr); gap: var(--v-ter-7); }
}
.tt-orarend { --or-ora: 34px; --or-nap: 40px; position: relative; display: grid; grid-template-columns: 26px repeat(7, var(--or-nap)); grid-template-rows: 34px repeat(var(--or-sorok), var(--or-ora)) 20px; justify-self: start; border: 1px solid var(--v-szin-tinta); background: linear-gradient(var(--v-szin-vonal) 1px, transparent 1px) 0 34px / 100% var(--or-ora), var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); margin-bottom: 12px; }
@container (min-width: 560px) { .tt-orarend { --or-nap: 56px; grid-template-columns: 34px repeat(7, var(--or-nap)); }
}
.tt-or-nap { grid-row: 1; display: grid; place-items: center; border-bottom: 1px solid var(--v-szin-tinta); font-weight: 700; font-stretch: 85%; font-size: 0.8125rem; }
.tt-or-nap[data-ma] { background: var(--v-szin-kiemel); color: var(--v-szin-kiemel-szoveg); }
.tt-or-ora { grid-column: 1; align-self: start; justify-self: center; transform: translateY(-50%); padding: 0 2px; background: var(--v-szin-lap); color: var(--v-szin-tinta-2); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tt-or-elso { transform: translateY(2px); }
.tt-or-nyitva { margin: 3px 6px; background: var(--v-szin-akcio); }
.tt-or-ebed { display: grid; place-items: center; color: var(--v-szin-tinta-2); font-size: 0.75rem; font-weight: 600; }
.tt-or-zarva { display: grid; align-content: end; justify-items: center; padding-bottom: 10px; color: var(--v-szin-tinta-2); font-size: 0.75rem; font-weight: 600; background: repeating-linear-gradient(135deg, transparent 0 9px, var(--v-szin-vonal) 9px 10px); }
.tt-urlap-tok { display: grid; gap: var(--v-ter-4); }
.tt-urlap-tok .tt-lap { display: grid; gap: var(--v-ter-5); }
@media (hover: hover) and (pointer: fine) { .tt-fb:hover { background: var(--v-gomb-hover-hatter); }
}
/* ===== tartalom/rolunk ===== */
.tt-kedv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-ter-4); margin-top: var(--v-ter-5); }
@container (min-width: 760px) { .tt-kedv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-kedv-pont:not(.tt-savos) { grid-column: span 3; }
}
.tt-kedv-pont { display: grid; align-content: start; gap: var(--v-ter-3); padding: var(--v-ter-4); background: var(--v-szin-lap); box-shadow: var(--v-arnyek-lap); min-width: 0; }
.tt-kedv-pont.tt-savos { border-top: 4px solid var(--v-szin-akcio); }
.tt-bev { display: grid; gap: var(--v-ter-3); }
.tt-bev .lead + p { margin-top: var(--v-ter-2); }
.tt-teljesites { margin-top: var(--v-ter-6); }