/* ========================================================= minigolf.css — KÖZÖS + DESKTOP Kötelezõ színek (pontosan): - primary: #2E7D32 - light green: #4CAF50 - background: #F4F4F4 - text: #222222 ========================================================= */ :root{ --primary: #84B179; --accent: #A2CB8B; --bg: #C7EABB; --text: black; /* kiegészítõk (nem márkaszín) */ --card: #ffffff; --border: rgba(34,34,34,.16); --shadow: 0 10px 28px rgba(0,0,0,.10); --shadow2: 0 8px 18px rgba(0,0,0,.14); --danger: #B00020; --radius: 16px; --radius-sm: 12px; --maxw: 1100px; --padx: 1rem; --navh: 72px; } *{ box-sizing: border-box; } html{ scroll-padding-top: var(--navh); scroll-behavior: smooth; height: 100%; } body{ margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; background: var(--bg); color: var(--text); } main{ flex: 1; } /* Billentyûzet fókusz (általános) */ :focus-visible{ outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; } /* Egységes tartalmi szélesség a projektben létezõ blokkokra */ h1, .hero-felirat, .hero-kontener, #rolunk, #nyitvatartas, #kapcsolat, .kapcsolat_szoveg, .terkep, .foglalas-form, .lemondas-box, #foglalastabla{ width: min(var(--maxw), calc(100% - (2 * var(--padx)))); margin-left: auto; margin-right: auto; } /* ===== Címek ===== */ h1{ margin: 1.4rem auto 0.9rem auto; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.2; } h2{ margin: 1.1rem 0 .6rem 0; font-size: 1.3rem; color: var(--primary); } /* Linkek */ a{ color: var(--primary); font-weight: 800; text-underline-offset: 3px; text-decoration-thickness: 2px; } a:hover{ color: var(--accent); } /* ===== NAVBAR (desktop) ===== */ .navbar{ position: sticky; top: 0; z-index: 1000; min-height: var(--navh); display: flex; align-items: center; padding: .75rem var(--padx); background: var(--primary); box-shadow: var(--shadow2); } /* Mobilon lesz látható (mobile.css kapcsolja be) */ .menu-toggle{ display: none; appearance: none; border: 0; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; padding: .55rem .75rem; border-radius: 999px; } /* Navbar fókusz (zöld háttéren világos fókuszkeret jobb) */ .navbar a:focus-visible, .menu-toggle:focus-visible{ outline-color: var(--bg); } /* Desktop: menü jobbra zárva */ ul.menu{ list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } ul.menu li{ margin: 0; padding: 0; } ul.menu a{ display: block; padding: .55rem .85rem; border-radius: 999px; text-decoration: none; color: #fff; font-weight: 900; letter-spacing: .15px; } /* Hover: light green háttér + SÖTÉT szöveg (különben WCAG AA FAIL) */ ul.menu a:hover{ background: var(--accent); } /* ===== HERO: lapozható (scroll-snap) ===== A CSS scroll snap tulajdonságokkal JS nélkül is “paging” jellegû a görgetés. */ .hero { /* margin-top és margin-bottom TÖRÖLVE */ margin: 0; /* Nullázzuk a margót, hogy középre kerüljön a nyilakhoz képest */ width: 100%; /* Hogy teljesen kitöltse a külsõ konténert */ display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); scrollbar-width: none; -ms-overflow-style: none; background: var(--bg) !important; } /* Opcionális: esztétika (a scrollbar ettõl még mûködik, csak kevésbé hangsúlyos) */ .hero{ scrollbar-width: thin; } /* Minden kép egy “slide” */ .hero img{ flex: 0 0 100%; width: 100%; height: 420px; object-fit: cover; display: block; scroll-snap-align: start; } .hero img::first-child{ object-fit: contain !important; } /* ===== Fõoldal szekciók ===== */ #rolunk, #nyitvatartas, #kapcsolat{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; } /* ===== Térkép ===== */ .terkep{ margin-top: .9rem; margin-bottom: 2rem; } .terkep iframe{ width: 100%; height: 460px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); } /* ===== Foglalás ûrlap ===== */ .foglalas-form{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; margin-top: 1rem; margin-bottom: 2rem; } .form-group{ margin-bottom: 1rem; } .foglalas-form label{ font-weight: 900; } /* Követelmény: alapból rejtett, JS dátumválasztás után megjeleníti */ #idopont_wrapper{ display: none; } .foglalas-form input[type="text"], .foglalas-form input[type="date"], .foglalas-form select, .foglalas-form textarea{ width: 100%; padding: .75rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 1rem; outline: none; } .foglalas-form textarea{ min-height: 120px; resize: vertical; } /* Fókusz */ .foglalas-form input:focus, .foglalas-form select:focus, .foglalas-form textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(76,175,80,.22); } /* Követelmény: hibás/kötelezõ mezõ jelzése (JS: classList.add("error")) */ .foglalas-form .error{ border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(176,0,32,.18) !important; } /* Követelmény: hibaszöveg (JS: .error-text.active) */ .error-text{ display: block; margin-top: .35rem; min-height: 1.15em; font-size: .92rem; color: var(--danger); visibility: hidden; } .error-text.active{ visibility: visible; } /* reCAPTCHA blokk */ .g-recaptcha{ margin-top: .8rem; } /* Gomb sor */ .gomb-sor{ margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; } /* Submit gombok */ .gomb-sor input[type="submit"], input[type="submit"]{ appearance: none; border: 0; border-radius: 999px; padding: .85rem 1.25rem; background: var(--primary); color: #fff; font-weight: 900; letter-spacing: .18px; cursor: pointer; box-shadow: var(--shadow); transition: transform .08s ease, background .15s ease, color .15s ease, opacity .15s ease; } .gomb-sor input[type="submit"]:hover, input[type="submit"]:hover{ background: var(--accent); color: var(--text); /* WCAG AA ok a #4CAF50-en */ } .gomb-sor input[type="submit"]:active, input[type="submit"]:active{ transform: translateY(1px); } /* Követelmény: captcha elõtt disabled gomb szürke */ input[type="submit"][disabled]{ background: #B9B9B9; color: var(--bg); cursor: not-allowed; opacity: .9; box-shadow: none; } /* Vissza link gomb */ a.vissza-gomb{ display: inline-block; padding: .85rem 1.1rem; border-radius: 999px; border: 2px solid var(--primary); background: transparent; color: var(--primary); text-decoration: none; font-weight: 900; } a.vissza-gomb:hover{ background: rgba(46,125,50,.12); } /* ===== Foglalások tábla ===== */ #foglalastabla{ margin-top: 1rem; margin-bottom: 2rem; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } #foglalastabla td{ padding: .7rem .8rem; border-bottom: 1px solid rgba(34,34,34,.10); font-size: .95rem; vertical-align: top; } /* Elsõ sor fejlécként (nálad td-k vannak) */ #foglalastabla tr:first-child td{ background: var(--primary); color: #fff; font-weight: 950; border-bottom: 0; } #foglalastabla tr:nth-child(even):not(:first-child){ background: rgba(244,244,244,.65); } /* ===== Lemondás doboz ===== */ .lemondas-box{ margin-top: 1rem; margin-bottom: 2rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; } /* ===== Footer (a footer.html-hez) ===== */ .site-footer{ margin-top: 2.8rem; background: var(--primary); color: #fff; } .footer-inner{ max-width: var(--maxw); margin: 0 auto; padding: 1.6rem var(--padx); display: flex; gap: 1.4rem; flex-wrap: wrap; } .footer-col{ flex: 1 1 240px; min-width: 220px; /* --- EZT A KÉT SORT ADD HOZZÁ --- */ word-break: break-word; overflow-wrap: anywhere; } .footer-bottom{ background: rgba(0,0,0,.18); padding: .85rem var(--padx); text-align: center; font-size: .95rem; color: rgba(255,255,255,.92); } .site-footer a{ color: #fff; font-weight: 900; } .site-footer a:hover{ background: var(--accent); border-radius: 8px; padding: 0 .2rem; } /* ===== Reduced motion (opcionális, de ajánlott) ===== */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } .idopont { background-color: #ffffff !important; color: var(--primary) !important; /* Sötétzöld szöveg */ border: 2px solid transparent; border-radius: 999px; padding: 0.5rem 1.2rem !important; font-weight: 900; } .idopont:hover { background-color: var(--accent) !important; color: white !important; } .site-footer iframe{ width: 100%; max-width: 100%; height: 220px; border: 0; display: block; border-radius: var(--radius); } .email-megerosites{ width: min(700px, calc(100% - 2rem)); margin: 3rem auto 4rem auto; padding: 2rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .email-megerosites h1{ margin-top: 0; margin-bottom: 1rem; color: var(--primary); font-size: clamp(1.6rem, 2.2vw, 2.2rem); } .email-megerosites-szoveg{ margin-bottom: .8rem; font-size: 1.05rem; } .email-cim{ margin: 1rem 0; padding: .9rem 1rem; background: rgba(255,255,255,.7); border: 1px solid var(--border); border-radius: 12px; font-size: 1.1rem; font-weight: 900; word-break: break-word; } .email-megerosites-info{ margin-bottom: 1.5rem; color: #333; } .email-megerosites .vissza-gomb{ display: inline-block; } .demo-szalag{ position: fixed; top: 90px; right: -55px; z-index: 500; background: #c62828; color: #fff; padding: .7rem 4rem; font-size: .95rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; transform: rotate(+35deg); box-shadow: 0 8px 18px rgba(0,0,0,.2); } /* Csomag sor elrendezése: Szöveg balra, Gomb jobbra */ .csomag-sor { display: flex; justify-content: space-between; /* Ez nyomja a gombot a jobb szélre */ align-items: center; /* Függõlegesen középre igazít */ padding: 1rem 0; border-bottom: 1px solid var(--border); gap: 1.5rem; } /* Utolsó sornál ne legyen alsó vonal */ .csomag-sor:last-of-type { border-bottom: none; } .csomag-leiras { flex: 1; /* Hogy a szöveg kitöltse a maradék helyet */ } /* CTA Gomb stílus a meglévõ változókkal */ .cta-gomb { display: inline-block; padding: .8rem 1.5rem; background-color: var(--primary); color: #fff !important; /* Hogy felülírja az általános link színt */ text-decoration: none; border-radius: 999px; /* Kerekített gomb */ font-weight: 900; white-space: nowrap; /* Ne törjön több sorba a gomb felirata */ box-shadow: var(--shadow); transition: all 0.2s ease; } .cta-gomb:hover { background-color: var(--accent); color: var(--text) !important; transform: translateY(-2px); } /* --- Vélemények Szekció --- */ .velemenyek-szekcio { position: relative; } .velemenyek-cim { color: var(--primary); font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-left: 20px; } .slider-kontener { display: flex; align-items: center; position: relative; padding: 0 50px; } /* Az ablak, ami elrejti a kilógó kártyákat */ .velemenyek-ablak { overflow: hidden; width: 100%; /* Maszkolás az oldalsó áttûnéshez */ mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } .velemenyek-sor { display: flex; gap: 20px; transition: transform 0.5s ease-in-out; padding: 20px 10px; } /* --- ÖSSZEVONT KÁRTYA STÍLUS --- */ .velemeny-kartya { flex: 0 0 320px; /* Fix szélesség */ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 25px; border-radius: 20px; border: 1px solid rgba(46, 125, 50, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; min-height: 220px; /* Megemeltem, hogy kényelmesen elférjen minden */ position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .velemeny-kartya:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 35px rgba(46, 125, 50, 0.2); border-color: #2E7D32; } /* Idézõjel dekoráció */ .velemeny-kartya::before { content: '"'; position: absolute; top: -10px; right: 20px; font-size: 100px; color: rgba(46, 125, 50, 0.05); font-family: serif; z-index: 0; } /* Tartalom elemei */ .velemeny-csillagok, .velemeny-szoveg, .velemeny-iro { position: relative; z-index: 1; } .velemeny-csillagok { color: #ffc107; margin-bottom: 0.8rem; } .velemeny-szoveg { font-style: italic; margin-bottom: 1rem; flex-grow: 1; color: #444; } .velemeny-iro { color: #2E7D32; /* Ha nincs var(--primary), akkor fix szín */ font-weight: 900; display: block; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.5rem; text-align: right; } /* --- Navigációs Nyilak --- */ .nav-nyil { background: #2E7D32; color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .nav-nyil:hover { background: #1b5e20; transform: scale(1.1); } .bal { left: 0; } .jobb { right: 0; } /* Görgetõsáv (scrollbar) egyedi stílusa */ .velemenyek-ablak::-webkit-scrollbar { height: 6px; } .velemenyek-ablak::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .velemenyek-ablak::-webkit-scrollbar-thumb { background: #2E7D32; border-radius: 10px; } .velemenyek-szekcio { position: relative; } .slider-kontener { display: flex; align-items: center; position: relative; padding: 0 50px; } .velemenyek-ablak { overflow: hidden; width: 100%; } .velemenyek-sor { display: flex; gap: 20px; transition: transform 0.5s ease-in-out; padding: 20px 10px; } .velemeny-kartya { flex: 0 0 300px; background: white; padding: 25px; border-radius: 15px; } .nav-nyil { background: #2E7D32; color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; position: absolute; z-index: 10; font-size: 20px; transition: 0.3s; } .bal { left: 0; } .jobb { right: 0; } .hero-felirat{ margin: 20px auto 10px auto; padding: 0; text-align: left; } /* --- Galéria javítása és nyilak --- */ /* Elrejtjük a görgetõsávot */ .hero { scrollbar-width: none; -ms-overflow-style: none; background: var(--bg) !important; /* Átlátszó vagy az oldal színe legyen a fekete helyett */ } .hero::-webkit-scrollbar { display: none; } /* A konténer javítása */ .hero-kontener { position: relative; width: min(var(--maxw), calc(100% - (2 * var(--padx)))); margin: 1rem auto 1.2rem auto; } /* A nyilak stílusa */ .hero-nyil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(46, 125, 50, 0.7); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 20px; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .hero-nyil:hover { background: rgba(46, 125, 50, 1); transform: translateY(-50%) scale(1.1); } .hero-nyil.bal { left: 15px; } .hero-nyil.jobb { right: 15px; } .minigolf-alcim { background-color: #0d4d1f; /* A logód sötétzöld színe */
    color: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 35px;
    font-weight: 600;
   
    /* Doboz formázása */
    display: inline-block; /* Hogy a zöld háttér rásimuljon a szövegre */
    padding: 8px 24px;
    border-radius: 12px; /* Kerekített sarkok, mint a képen */
    margin: 2px 0 0 0; /* Egy kicsit közelebb húzzuk a MINIGOLF felirathoz */
   
    /* Egy nagyon finom árnyék, hogy ne legyen lapos */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);} /* Hogy a kép megfelelõen viselkedjen a dobozban */ .minigolf-cim {  font-family: 'Ultra', serif; /* Heavy slab-serif with sharp edges */
  font-size: 100px;
  color: white;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 4px;
 
  /* Sima, vastag zöld körvonal a betűk körül */
  -webkit-text-stroke: 20px #064016;
  paint-order: stroke fill;
  } .minigolf-logo { display: block; width: 100%; max-width: 420px; height: auto; } .mezo{width:100%;padding:.75rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;color:var(--text);appearance:none;-webkit-appearance:none;font-size:1rem;outline:0}