/* ========================================================= Szálláskirály – stíluslap Nyaralós, világos, évszakfüggő. A színeket a attribútum váltja: nyáron tenger, télen jég, ősszel szüret. ========================================================= */ :root { /* állandó alapok */ --papir: #FFFDF6; --feher: #FFFFFF; --melyviz: #0A3A4A; --tinta: #12333D; --halvany: #5F7A83; --vonal: #DFEBED; --homok: #FFEBCB; /* évszaki színek – alapértelmezés: nyár */ --fo: #10B5C9; --fo-sotet: #0B8FA1; --masodik: #FF6B4A; --harmadik: #FFC233; --hero-tol: #2AC7D8; --hero-ig: #0C8FA6; --hullam: #2AC7D8; --display: "Fraunces", Georgia, serif; --szoveg: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace; --max: 1160px; --ir: 16px; --ir-kicsi: 10px; } :root[data-evszak="tavasz"] { --fo: #2FAE77; --fo-sotet: #23895D; --masodik: #FF7BA9; --harmadik: #FFD447; --hero-tol: #4BC68E; --hero-ig: #229C68; --hullam: #4BC68E; } :root[data-evszak="osz"] { --fo: #D9822B; --fo-sotet: #B0641B; --masodik: #A62F52; --harmadik: #F0C24A; --hero-tol: #EE9F3C; --hero-ig: #C4661D; --hullam: #EE9F3C; } :root[data-evszak="tel"] { --fo: #3B8FE0; --fo-sotet: #2A6FBC; --masodik: #6FC0E8; --harmadik: #BFDFF5; --hero-tol: #63A9E9; --hero-ig: #2F6FC2; --hullam: #63A9E9; } *, *::before, *::after { box-sizing: border-box; } /* mobilon a vízszintes görgetés a legbosszantóbb hiba */ html, body { overflow-x: hidden; max-width: 100%; } img, video, iframe, table { max-width: 100%; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papir); color: var(--tinta); font-family: var(--szoveg); font-size: 17px; line-height: 1.62; } img { display: block; } a { color: var(--fo-sotet); text-underline-offset: 2px; } a:hover { color: var(--masodik); } :focus-visible { outline: 3px solid var(--harmadik); outline-offset: 2px; } .burok { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; } .burok-keskeny { max-width: 840px; } .rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Fejléc ---------- */ .fejlec { background: var(--feher); border-bottom: 1px solid var(--vonal); } .fejlec-sor { display: flex; align-items: center; gap: 26px; min-height: 72px; } .logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--melyviz); text-decoration: none; white-space: nowrap; } .logo:hover { color: var(--fo-sotet); } .logo svg { width: 32px; height: 32px; flex: none; } .fomenu { display: flex; gap: 24px; margin-left: auto; list-style: none; padding: 0; font-size: 15.5px; font-weight: 500; } .fomenu a { color: var(--tinta); text-decoration: none; padding: 5px 2px; border-bottom: 2px solid transparent; } .fomenu a:hover { color: var(--fo-sotet); border-bottom-color: var(--fo); } /* ---------- Tengersáv + hullám ---------- */ .tengersav { position: relative; background: linear-gradient(160deg, var(--hero-tol), var(--hero-ig)); color: #fff; padding: 0 0 100px; isolation: isolate; /* A hullám kétszer olyan széles, mint a sáv, hogy legyen mit mozgatni. Levágás nélkül ez vízszintes görgetést okozna telefonon. */ overflow: hidden; } /* a menü alatti hullám: jobbra fut, majd visszacsapódik */ .hullam-felso, .hullam-also { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 2; overflow: hidden; } .hullam-felso { top: -1px; } .hullam-also { bottom: -1px; } .hullam-felso svg, .hullam-also svg { display: block; width: 200%; height: 46px; } .hullam-also svg { height: 70px; } .hullam-felso .hab { fill: var(--feher); animation: hullamzas 7s ease-in-out infinite alternate; } .hullam-felso .hab2 { fill: rgba(255,255,255,.45); animation: hullamzas-lassu 11s ease-in-out infinite alternate-reverse; } .hullam-also .hab { fill: var(--papir); animation: hullamzas 9s ease-in-out infinite alternate-reverse; } .hullam-also .hab2 { fill: rgba(255,253,246,.4); animation: hullamzas-lassu 13s ease-in-out infinite alternate; } /* SVG-n belül a px érték felhasználói egységet jelent, ezért fix eltolás */ @keyframes hullamzas { from { transform: translateX(0); } to { transform: translateX(-260px); } } @keyframes hullamzas-lassu { from { transform: translateX(0); } to { transform: translateX(-420px); } } .hero { position: relative; z-index: 3; padding-top: 74px; } .hero-cimke { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 6px 15px; font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 0 0 20px; } .hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(35px, 5.6vw, 60px); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 18px; max-width: 17ch; text-shadow: 0 2px 14px rgba(6,60,74,.18); } .hero-bevezeto { max-width: 48ch; font-size: 18.5px; color: rgba(255,255,255,.94); margin: 0 0 26px; } /* évszaki témacímkék */ .temak { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0 0 30px; padding: 0; } .temak a { display: inline-block; background: var(--feher); color: var(--tinta); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px -6px rgba(10,58,74,.5); transition: transform .16s ease, color .16s ease; } .temak a:hover { transform: translateY(-2px); color: var(--masodik); } /* ---------- Kereső ---------- */ .kereso { display: flex; flex-wrap: wrap; gap: 1px; background: var(--vonal); border-radius: var(--ir); max-width: 800px; overflow: hidden; box-shadow: 0 18px 34px -22px rgba(6,50,64,.75); } .kereso-mezo { flex: 1 1 165px; background: var(--feher); padding: 13px 17px; } .kereso-mezo label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--halvany); margin-bottom: 3px; } .kereso-mezo select, .kereso-mezo input { width: 100%; border: 0; padding: 0; background: transparent; font-family: var(--szoveg); font-size: 16px; color: var(--tinta); } .kereso-mezo select:focus, .kereso-mezo input:focus { outline: none; } .kereso-gomb { flex: 0 0 auto; border: 0; background: var(--masodik); color: #fff; font-family: var(--szoveg); font-size: 16.5px; font-weight: 700; padding: 0 32px; cursor: pointer; transition: filter .16s ease; } .kereso-gomb:hover { filter: brightness(1.08); } /* ---------- Szekciók ---------- */ .szekcio { padding: 66px 0; } .szekcio-szines { background: var(--homok); } .szekcio-fej { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; } .szekcio-fej h2 { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 3.6vw, 39px); line-height: 1.12; letter-spacing: -.02em; margin: 0; } .szekcio-fej p { margin: 7px 0 0; color: var(--halvany); font-size: 16px; } .szekcio-link { font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; border-bottom: 2px solid var(--harmadik); padding-bottom: 2px; } .cimke-hely { display: inline-block; background: color-mix(in srgb, var(--fo) 16%, #fff); color: var(--fo-sotet); border-radius: 999px; padding: 6px 15px; font-size: 14px; font-weight: 700; margin: 0 0 16px; } .lap-cim { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; } .lap-alcim { color: var(--halvany); margin: 0 0 28px; font-size: 17px; } .alcim { font-family: var(--display); font-weight: 700; font-size: 25px; margin: 34px 0 10px; letter-spacing: -.01em; } .vissza { margin-top: 34px; } /* ---------- Kuponkártya ---------- */ .kupon-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); gap: 26px; } .kupon { position: relative; display: flex; flex-direction: column; background: var(--feher); border-radius: var(--ir); box-shadow: 0 10px 24px -18px rgba(10,58,74,.6); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .kupon:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(10,58,74,.6); } .kupon-kiemelt { max-width: 430px; margin-bottom: 34px; } .kupon-kiemelt:hover { transform: none; } .kupon-kep { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--hero-tol), var(--hero-ig)); overflow: hidden; } .kupon-kep img { width: 100%; height: 100%; object-fit: cover; } /* fotó hiányában napsugaras minta tölti ki a helyet */ .kupon-kep::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(var(--szog, 60deg), rgba(255,255,255,.16) 0 12px, transparent 12px 30px); pointer-events: none; } .kupon-kep:has(img)::after { display: none; } .kupon-hely { position: absolute; left: 14px; bottom: 12px; margin: 0; background: rgba(10,58,74,.55); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; color: #fff; backdrop-filter: blur(3px); } /* a kedvezménybélyeg */ .pecset { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--masodik); color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 8px 16px -8px rgba(10,58,74,.8); transform: rotate(-8deg); line-height: 1; } .pecset b { font-family: var(--display); font-size: 24px; font-weight: 700; display: block; } .pecset span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 2px; } .kupon-torzs { padding: 19px 21px 0; flex: 1 1 auto; } .kupon h3 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 7px; } .kupon h3 a { color: inherit; text-decoration: none; } .kupon h3 a:hover { color: var(--fo-sotet); } .kupon-szallas { font-size: 14.5px; color: var(--halvany); margin: 0 0 14px; } .kupon-adatok { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; } .kupon-adatok li { font-size: 12.5px; font-weight: 700; color: var(--fo-sotet); background: color-mix(in srgb, var(--fo) 14%, #fff); border-radius: 999px; padding: 4px 11px; } /* perforált elválasztó – az utalvány letéphető része */ .kupon-perforacio { position: relative; height: 22px; margin-top: auto; } .kupon-perforacio::before, .kupon-perforacio::after { content: ""; position: absolute; top: 50%; width: 20px; height: 20px; background: var(--papir); border-radius: 50%; transform: translateY(-50%); } .kupon-perforacio::before { left: -10px; } .kupon-perforacio::after { right: -10px; } .szekcio-szines .kupon-perforacio::before, .szekcio-szines .kupon-perforacio::after { background: var(--homok); } .kupon-perforacio i { position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dotted var(--vonal); } .kupon-lab { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 21px 19px; } .kupon-lab-oszlop { flex-direction: column; align-items: stretch; gap: 10px; } .kupon-ar { line-height: 1.2; margin: 0; } .kupon-ar strong { font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: -.02em; display: block; color: var(--melyviz); } .kupon-ar .ar-nagy { font-size: 33px; } .kupon-ar small { display: block; font-size: 13px; color: var(--halvany); } .kupon-jelzo { font-size: 13.5px; font-weight: 700; color: var(--masodik); margin: 12px 0 0; } .kupon-cimke { font-size: 13px; color: var(--halvany); margin: 0; } .kupon-kod { font-family: var(--mono); font-size: 21px; letter-spacing: .14em; text-align: center; background: var(--homok); border-radius: var(--ir-kicsi); padding: 13px; margin: 0; } .kupon-lejarat { font-size: 12.5px; font-weight: 700; color: var(--masodik); padding: 0 21px 17px; margin: -6px 0 0; } .jelzes { color: var(--halvany); font-weight: 400; } .jelzes-blokk { display: inline-block; font-size: 12.5px; font-weight: 700; background: var(--vonal); border-radius: 999px; padding: 5px 13px; margin: 0 0 20px; color: var(--halvany); } .ar-megjegyzes { font-size: 14px; color: var(--halvany); margin-top: 24px; max-width: 70ch; } .gomb { display: inline-block; border: 0; background: var(--melyviz); color: #fff; font-family: var(--szoveg); font-size: 15.5px; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: transform .16s ease, filter .16s ease; white-space: nowrap; } .gomb:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; } .gomb-teljes { text-align: center; white-space: normal; display: block; } .gomb-pecset { background: var(--masodik); } .gomb-nap { background: var(--harmadik); color: var(--melyviz); } .gomb-nap:hover { color: var(--melyviz); } /* ---------- Régiósáv ---------- */ .regio-sor { display: flex; flex-wrap: wrap; gap: 11px; list-style: none; margin: 0; padding: 0; } .regio-sor a { display: inline-flex; align-items: baseline; gap: 8px; background: var(--feher); border-radius: 999px; padding: 11px 19px; color: var(--tinta); text-decoration: none; font-size: 16px; font-weight: 500; box-shadow: 0 6px 14px -10px rgba(10,58,74,.7); transition: transform .16s ease, color .16s ease; } .regio-sor a:hover { transform: translateY(-2px); color: var(--fo-sotet); } .regio-sor span { font-size: 13px; font-weight: 700; color: var(--masodik); } /* ---------- Utazási tippek ---------- */ .tippek { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .tipp { background: var(--feher); border-radius: var(--ir); padding: 24px 24px 26px; border-top: 5px solid var(--fo); box-shadow: 0 10px 22px -18px rgba(10,58,74,.6); } .tipp:nth-child(2) { border-top-color: var(--masodik); } .tipp:nth-child(3) { border-top-color: var(--harmadik); } .tipp-kategoria { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--halvany); margin: 0 0 8px; } .tipp h3 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.22; margin: 0 0 9px; letter-spacing: -.01em; } .tipp p { margin: 0; font-size: 15.5px; color: var(--tinta); } /* ---------- Menete ---------- */ .menete { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; counter-reset: lepes; } .lepes { counter-increment: lepes; } .lepes::before { content: counter(lepes); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--harmadik); color: var(--melyviz); font-family: var(--display); font-size: 21px; font-weight: 700; margin-bottom: 14px; } .lepes h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 8px; } .lepes p { margin: 0; color: var(--halvany); font-size: 15.5px; } /* ---------- Bannerhelyek ---------- */ .banner { margin: 40px auto; text-align: center; max-width: 100%; } .banner img { margin-inline: auto; border-radius: var(--ir-kicsi); } .banner-cimke { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--halvany); margin: 0 0 8px; } /* ---------- Szállásadói sáv ---------- */ .szallasadoi { background: var(--melyviz); color: #fff; padding: 62px 0; } .szallasadoi-racs { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .szallasadoi h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 14px; } .szallasadoi p { color: rgba(255,255,255,.82); margin: 0 0 24px; } .szallasadoi .gomb { background: var(--harmadik); color: var(--melyviz); } .arlista { background: rgba(255,255,255,.08); border-radius: var(--ir); padding: 24px 28px; } .arlista dl { margin: 0; } .arlista div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); } .arlista div:last-child { border-bottom: 0; } .arlista dt { color: rgba(255,255,255,.85); font-size: 15px; margin: 0; } .arlista dd { margin: 0; font-weight: 700; font-size: 15px; color: var(--harmadik); } /* ---------- Hírlevél ---------- */ .hirlevel { background: var(--feher); border-radius: var(--ir); padding: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; box-shadow: 0 14px 30px -24px rgba(10,58,74,.7); } .hirlevel h2 { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0 0 8px; letter-spacing: -.01em; } .hirlevel p { margin: 0; color: var(--halvany); font-size: 15.5px; } .hirlevel-urlap { display: flex; gap: 10px; flex-wrap: wrap; } .hirlevel-urlap input { flex: 1 1 200px; border: 2px solid var(--vonal); border-radius: 999px; padding: 12px 18px; font-family: var(--szoveg); font-size: 16px; background: var(--feher); color: var(--tinta); } .hirlevel-urlap input:focus { border-color: var(--fo); outline: none; } .hirlevel-apro { flex: 1 1 100%; font-size: 12.5px; color: var(--halvany); margin: 4px 0 0; } /* ---------- Lábléc ---------- */ .lablec { background: var(--melyviz); color: rgba(255,255,255,.72); padding: 54px 0 28px; font-size: 14.5px; } .lablec-racs { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.14); } .lablec h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--harmadik); margin: 0 0 13px; font-weight: 700; } .lablec ul { list-style: none; margin: 0; padding: 0; } .lablec li { margin-bottom: 8px; } .lablec a { color: rgba(255,255,255,.75); text-decoration: none; } .lablec a:hover { color: #fff; text-decoration: underline; } .lablec-bevezeto { max-width: 34ch; margin: 12px 0 0; } .lablec-zaras { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; font-size: 13px; color: rgba(255,255,255,.55); } /* ---------- Reszponzív ---------- */ @media (max-width: 880px) { .szallasadoi-racs, .hirlevel { grid-template-columns: 1fr; gap: 28px; } .lablec-racs { grid-template-columns: 1fr 1fr; gap: 26px; } .tengersav { padding-bottom: 80px; } .hero { padding-top: 52px; } .szekcio { padding: 50px 0; } } @media (max-width: 620px) { body { font-size: 16px; } .fejlec-sor { flex-wrap: wrap; gap: 10px; min-height: 0; padding-block: 13px; } .fomenu { margin-left: 0; width: 100%; gap: 16px; font-size: 14.5px; } .kereso { flex-direction: column; } .kereso-gomb { padding: 15px; } .kupon-racs { grid-template-columns: 1fr; gap: 20px; } .hirlevel { padding: 24px; } .lablec-racs { grid-template-columns: 1fr; } .szekcio-fej { flex-direction: column; align-items: flex-start; } .hullam-felso svg { height: 30px; } .hullam-also svg { height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .kupon:hover, .temak a:hover, .gomb:hover, .regio-sor a:hover { transform: none; } } /* ========================================================= Kiegészítő elemek ========================================================= */ /* ---------- Fejléckép a tengersávon ---------- */ .tengersav-kepes::before { content: ""; position: absolute; inset: 0; background-image: var(--fejleckep); background-size: cover; background-position: center; opacity: .38; z-index: 1; } .tengersav-kepes .hero { z-index: 3; } /* ---------- Időjárássáv ---------- */ .idojaras { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 34px 0 0; padding: 0; } .idojaras li { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; backdrop-filter: blur(3px); } .idojaras-ikon { font-size: 16px; } .idojaras-hely { font-weight: 500; } .idojaras-fok { font-weight: 700; } /* ---------- Kiemelések ---------- */ .kiemelesek { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .kiemeles { position: relative; background: var(--feher); border-radius: var(--ir); padding: 26px 24px 24px; box-shadow: 0 12px 26px -20px rgba(10,58,74,.65); border-top: 6px solid var(--fo); } .kiemeles-legjobb { border-top-color: var(--masodik); } .kiemeles-legkedveltebb { border-top-color: var(--harmadik); } .kiemeles-cimke { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fo-sotet); margin: 0 0 10px; } .kiemeles-legjobb .kiemeles-cimke { color: var(--masodik); } .kiemeles-legkedveltebb .kiemeles-cimke { color: #9A7A16; } .kiemeles-cim { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 7px; } .kiemeles-cim a { color: inherit; text-decoration: none; } .kiemeles-cim a:hover { color: var(--fo-sotet); } .kiemeles-hely { font-size: 14.5px; color: var(--halvany); margin: 0 0 14px; } .kiemeles-ar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 18px; } .kiemeles-ar strong { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--melyviz); letter-spacing: -.02em; } .kiemeles-szazalek { background: var(--masodik); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; } .kiemeles-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* ---------- Tetszik pipa ---------- */ .tetszik { display: inline-flex; align-items: center; gap: 8px; background: var(--feher); border: 2px solid var(--vonal); border-radius: 999px; padding: 9px 17px; font-family: var(--szoveg); font-size: 14.5px; font-weight: 700; color: var(--tinta); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } .tetszik:hover:not(:disabled) { border-color: var(--fo); color: var(--fo-sotet); } .tetszik-pipa { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vonal); color: var(--halvany); font-size: 12px; transition: background .16s ease, color .16s ease; } .tetszik-aktiv { border-color: var(--fo); background: color-mix(in srgb, var(--fo) 12%, #fff); color: var(--fo-sotet); } .tetszik-aktiv .tetszik-pipa { background: var(--fo); color: #fff; } .tetszik:disabled { cursor: default; } .tetszik-szoveg { white-space: nowrap; } .tetszik-db { font-family: var(--mono); font-size: 13px; color: var(--halvany); } /* ---------- Pénznemváltó ---------- */ .valto { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 24px; font-size: 14px; } .valto-cimke { color: var(--halvany); margin-right: 2px; } .valto-gomb { background: var(--feher); border: 1px solid var(--vonal); border-radius: 999px; padding: 5px 13px; font-family: var(--szoveg); font-size: 13.5px; font-weight: 700; color: var(--halvany); cursor: pointer; transition: border-color .16s ease, color .16s ease; } .valto-gomb:hover { border-color: var(--fo); color: var(--fo-sotet); } .valto-aktiv { border-color: var(--fo); background: var(--fo); color: #fff; } .valto-aktiv:hover { color: #fff; } .valto-nap { color: var(--halvany); font-size: 12.5px; margin-left: 4px; } /* ---------- Partnerlogó-szalag ---------- */ .logoszalag { margin: 54px 0; } .logoszalag-cimke { text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--halvany); margin: 0 0 18px; } .logoszalag-sav { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .logoszalag-sor { display: flex; align-items: center; gap: 54px; list-style: none; margin: 0; padding: 0; width: max-content; animation: szalag 34s linear infinite; } .logoszalag-sav:hover .logoszalag-sor { animation-play-state: paused; } .logoszalag-sor li { flex: none; } .logoszalag-sor img { height: 40px; width: auto; object-fit: contain; opacity: .75; transition: opacity .16s ease; } .logoszalag-sor a:hover img { opacity: 1; } .logoszalag-nev { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--halvany); white-space: nowrap; } .logoszalag-sor a { text-decoration: none; } .logoszalag-sor a:hover .logoszalag-nev { color: var(--fo-sotet); } @keyframes szalag { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Az igazi ár ---------- */ .igaziar { background: var(--feher); border-radius: var(--ir); padding: 28px 28px 24px; margin: 40px 0; box-shadow: 0 12px 26px -20px rgba(10,58,74,.6); border-left: 6px solid var(--harmadik); } .igaziar .alcim { margin-top: 0; } .igaziar-bevezeto { color: var(--halvany); font-size: 15.5px; margin: 0 0 20px; } .igaziar-vezerlok { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; } .igaziar-vezerlok label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--halvany); } .igaziar-vezerlok input { width: 92px; border: 2px solid var(--vonal); border-radius: var(--ir-kicsi); padding: 9px 12px; font-family: var(--szoveg); font-size: 16px; color: var(--tinta); background: var(--feher); } .igaziar-vezerlok input:focus { border-color: var(--fo); outline: none; } .igaziar-tabla { width: 100%; border-collapse: collapse; } .igaziar-tabla th { text-align: left; font-weight: 500; font-size: 15.5px; padding: 10px 0; border-bottom: 1px solid var(--vonal); } .igaziar-tabla th small { display: block; font-size: 12.5px; color: var(--halvany); font-weight: 400; } .igaziar-tabla td { text-align: right; font-family: var(--mono); font-size: 15px; padding: 10px 0; border-bottom: 1px solid var(--vonal); white-space: nowrap; } .igaziar-tabla tfoot th, .igaziar-tabla tfoot td { border-bottom: 0; border-top: 2px solid var(--melyviz); font-weight: 700; font-size: 18px; padding-top: 14px; } .igaziar-tabla tfoot td { font-family: var(--display); color: var(--melyviz); } .igaziar-apro { font-size: 13px; color: var(--halvany); margin: 16px 0 0; } .ajanlat-muveletek { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 12px; } .ajanlat-muveletek .valto { margin: 0; } /* ---------- Jogi és szöveges oldalak ---------- */ .szoveges h2 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 34px 0 10px; letter-spacing: -.01em; } .szoveges h3 { font-family: var(--display); font-weight: 700; font-size: 19px; margin: 24px 0 8px; } .szoveges ul { padding-left: 22px; } .szoveges li { margin-bottom: 7px; } .adattabla { width: 100%; border-collapse: collapse; margin: 14px 0 8px; } .adattabla th, .adattabla td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--vonal); font-size: 15.5px; } .adattabla th { width: 40%; font-weight: 700; background: var(--feher); } .frissitve { font-size: 13.5px; color: var(--halvany); margin-top: 30px; } @media (max-width: 620px) { .igaziar { padding: 22px 20px; } .adattabla th { width: auto; } .kiemelesek { grid-template-columns: 1fr; } } /* ---------- Logószalag: keret a különböző logókhoz ---------- */ .logoszalag-sor { gap: 22px; } .logoszalag-keret { display: grid; place-items: center; min-width: 172px; height: 78px; padding: 14px 22px; background: var(--feher); border-radius: var(--ir); box-shadow: 0 6px 16px -12px rgba(10,58,74,.7); transition: transform .18s ease, box-shadow .18s ease; } .logoszalag-sor a:hover .logoszalag-keret { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(10,58,74,.75); } /* a fehér keret miatt bármilyen logó olvasható marad, a szürkeárnyalat pedig egységesíti a vegyes arculatokat */ .logoszalag-sor img { height: 44px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .18s ease, opacity .18s ease; } .logoszalag-sor a:hover img { filter: none; opacity: 1; } .logoszalag-nev { font-size: 18px; text-align: center; } /* ---------- Közösségi ikonok ---------- */ .kozossegi { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; } .kozossegi a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); transition: background .16s ease, color .16s ease, transform .16s ease; } .kozossegi a:hover { background: var(--harmadik); color: var(--melyviz); transform: translateY(-2px); } .kozossegi svg { width: 21px; height: 21px; fill: currentColor; } /* világos háttéren is használható változat */ .kozossegi-vilagos a { background: var(--feher); color: var(--halvany); box-shadow: 0 4px 12px -8px rgba(10,58,74,.7); } .kozossegi-vilagos a:hover { background: var(--fo); color: #fff; } @media (max-width: 620px) { .logoszalag-keret { min-width: 140px; height: 66px; padding: 12px 16px; } .logoszalag-sor img { height: 34px; } } /* ---------- Hero: szöveg és illusztráció ---------- */ .hero-racs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; } .hero-szoveg { min-width: 0; } .hero-abra svg { width: 100%; height: auto; max-width: 430px; margin-inline: auto; display: block; border-radius: var(--ir); background: rgba(255,255,255,.14); box-shadow: 0 20px 40px -28px rgba(4,40,52,.9); } @media (max-width: 900px) { .hero-racs { grid-template-columns: 1fr; gap: 26px; } .hero-abra { max-width: 340px; } } @media (max-width: 620px) { .hero-abra { display: none; } } .logoszalag-forras { text-align: center; font-size: 12px; color: var(--halvany); margin: 14px 0 0; } /* ---------- Kövess minket ---------- */ .kovetes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; background: var(--feher); border-radius: var(--ir); padding: 34px 38px; box-shadow: 0 14px 30px -24px rgba(10,58,74,.7); } .kovetes h2 { font-family: var(--display); font-weight: 700; font-size: 27px; margin: 0 0 6px; letter-spacing: -.01em; } .kovetes p { margin: 0; color: var(--halvany); font-size: 15.5px; } .kozossegi-nagy { margin: 0; gap: 12px; } .kozossegi-nagy a { width: 52px; height: 52px; } .kozossegi-nagy svg { width: 26px; height: 26px; } @media (max-width: 620px) { .kovetes { padding: 26px 22px; } .kozossegi-nagy a { width: 46px; height: 46px; } } /* ---------- Listaoldalak ---------- */ .szuro-sor { margin-bottom: 26px; } .szuro-aktiv { background: var(--fo) !important; color: #fff !important; } .szuro-aktiv span { color: rgba(255,255,255,.85) !important; } .ures { background: var(--feher); border-radius: var(--ir); padding: 30px; text-align: center; color: var(--halvany); } .tipp-cim { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.22; margin: 0 0 9px; letter-spacing: -.01em; } .gomb-vonal { background: transparent; color: var(--melyviz); box-shadow: inset 0 0 0 2px var(--vonal); } .gomb-vonal:hover { background: var(--feher); color: var(--melyviz); } /* ---------- Alkalmazás- és Google-ajánló ---------- */ .appsav { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; } .appsav-doboz { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: start; background: var(--feher); border-radius: var(--ir); padding: 22px 24px; box-shadow: 0 10px 24px -20px rgba(10,58,74,.65); } .appsav-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--papir); } .appsav-ikon img { width: 48px; height: 48px; } .appsav-ikon-google { background: var(--harmadik); color: var(--melyviz); font-size: 22px; } .appsav-doboz h2 { font-family: var(--display); font-weight: 700; font-size: 19px; margin: 0 0 5px; letter-spacing: -.01em; } .appsav-doboz p { margin: 0; font-size: 15px; color: var(--halvany); } .appsav-lab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .appsav-lab .gomb { font-size: 14.5px; padding: 10px 18px; } .telepit-allapot { font-size: 14.5px; color: var(--halvany); } /* ---------- Mobil finomhangolás ---------- */ /* iPhone-on a lyuk és a lekerekített sarkok alá ne csússzon tartalom */ @supports (padding: max(0px)) { .burok { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .lablec { padding-bottom: max(28px, env(safe-area-inset-bottom)); } } @media (max-width: 620px) { /* koppintható méret: 44 px az alsó határ */ .fomenu a { padding: 8px 2px; } .tetszik { padding: 12px 18px; } .valto-gomb { padding: 9px 15px; } .regio-sor a { padding: 12px 18px; } .gomb { padding: 13px 22px; } /* a táblázatok ne feszítsék szét a lapot */ .igaziar-tabla { font-size: 15px; } .igaziar-tabla th { font-size: 14.5px; padding-right: 10px; } .igaziar-tabla td { font-size: 14px; } .igaziar-tabla tfoot th, .igaziar-tabla tfoot td { font-size: 16px; } .adattabla th, .adattabla td { padding: 10px 8px; font-size: 15px; } .adattabla { display: block; overflow-x: auto; } /* hosszú szavak és címek tördelése */ .lap-cim, .hero h1, .kupon h3, .kiemeles-cim { overflow-wrap: anywhere; } .szoveges p, .szoveges li { overflow-wrap: break-word; } .appsav { grid-template-columns: 1fr; } .appsav-doboz { grid-template-columns: 1fr; padding: 20px; } .appsav-lab .gomb { flex: 1 1 auto; text-align: center; } .kupon-kod { font-size: 18px; letter-spacing: .1em; } .igaziar-vezerlok { gap: 12px; } .igaziar-vezerlok input { width: 84px; } .banner { margin: 28px auto; } } @media (max-width: 380px) { .hero h1 { font-size: 30px; } .kupon-ar strong { font-size: 22px; } .pecset { width: 58px; height: 58px; } .pecset b { font-size: 20px; } .appsav-lab { flex-direction: column; } } .idojaras-forras { position: relative; z-index: 3; margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.75); } .idojaras-forras a { color: rgba(255,255,255,.9); } .idojaras-cimke { position: relative; z-index: 3; margin: 34px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); } .idojaras { margin-top: 0; } /* ---------- Ajánlattípusok ---------- */ .tipus-sor { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; } .tipus-sor a { display: inline-flex; align-items: center; gap: 8px; background: var(--feher); border-radius: 999px; padding: 11px 20px; color: var(--tinta); text-decoration: none; font-size: 15.5px; font-weight: 700; box-shadow: 0 6px 14px -10px rgba(10,58,74,.7); transition: transform .16s ease, color .16s ease; } .tipus-sor a:hover { transform: translateY(-2px); color: var(--fo-sotet); } .tipus-aktiv { background: var(--fo) !important; color: #fff !important; } .tipus-db { font-size: 13px; font-weight: 700; color: var(--masodik); } .tipus-aktiv .tipus-db { color: rgba(255,255,255,.85); } /* típusjelölés a kártya képén */ .kupon-tipus { position: absolute; left: 14px; top: 13px; margin: 0; background: rgba(10,58,74,.55); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #fff; backdrop-filter: blur(3px); } /* a repülőjegynél az útvonal a lényeg, ezért kiemeljük */ .kupon-repulo .kupon-szallas { font-weight: 700; color: var(--tinta); font-size: 15.5px; } @media (max-width: 620px) { .tipus-sor a { padding: 11px 16px; font-size: 14.5px; } .kupon-tipus { font-size: 11.5px; padding: 4px 10px; } } .szekcio-tipusok { padding: 40px 0 0; } .szekcio-tipusok .tipus-sor { margin-bottom: 0; } /* Ár nélküli, kuponos ajánlat */ .kupon-ar-nelkul strong { font-size: 20px; color: var(--fo-sotet); } .kupon-ar-nelkul small { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }