/* ==========================================================================
Diamant Apartmanhazak - arculat (melyzold + homok)
Naxan, 2026-09-19. Helye: templates/travus/css/custom.css — a Helix ezt magatol
betolti, es egy fajl szolgal ki mind a 4 nyelvi stilust (12/19/20/21).
(A sablon-stilus custom_css mezoje nem jarhato: a core API nem menti el, az
nxndiag design/styles agat pedig az intType-bug 500-azta; 1.4.2-ben javitva.)
A !important ott kell, ahol az SP Page Builder a -ba irja ki az addon-CSS-t,
tehat a fejleces utan jon a kaszkadban.
========================================================================== */
:root {
--dm-green: #2F4A3C;
--dm-green-dark: #22372C;
--dm-terra: #C8622F;
--dm-terra-dark: #A84E22;
--dm-sand: #E8DCC8;
--dm-sand-soft: #F3EDE1;
--dm-paper: #FAF8F4;
--dm-ink: #1B1B18;
--dm-muted: #5C6660;
--dm-radius: 14px;
--dm-shadow: 0 2px 10px rgba(27,27,24,.07), 0 12px 32px rgba(27,27,24,.06);
}
/* --- Alap ---------------------------------------------------------------- */
body { background: var(--dm-paper); color: var(--dm-ink); }
a { color: var(--dm-green); }
a:hover, a:focus { color: var(--dm-terra); }
/* Lathato fokusz - billentyuzetes navigaciohoz (eddig nem volt) */
a:focus-visible, button:focus-visible, .sppb-btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 3px solid var(--dm-terra) !important;
outline-offset: 2px !important;
}
/* --- Tipografia ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.sppb-addon-title, .sp-module-title {
color: var(--dm-ink);
letter-spacing: -.01em;
}
h1, .sppb-addon-title.sppb-feature-box-title { font-weight: 600; }
/* A 60px-es h1 mobilon kifolyik - folyekony meret */
#sp-page-builder h1, .sppb-section h1 {
font-size: clamp(2rem, 5.2vw, 3.4rem) !important;
line-height: 1.12 !important;
}
#sp-page-builder h3.sppb-addon-title {
font-size: clamp(1.35rem, 2.6vw, 2.1rem) !important;
line-height: 1.25;
}
/* --- Felso sav ----------------------------------------------------------- */
#sp-top-bar {
background: var(--dm-green-dark);
color: rgba(255,255,255,.75);
padding: 6px 0;
}
#sp-top-bar a, #sp-top-bar .social-icons a { color: rgba(255,255,255,.8); }
#sp-top-bar a:hover { color: #fff; }
/* --- Fejlec -------------------------------------------------------------- */
#sp-header {
background: rgba(250,248,244,.94) !important;
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid rgba(47,74,60,.12);
box-shadow: none;
}
#sp-header.header-sticky { box-shadow: 0 6px 20px rgba(27,27,24,.08); }
/* A logo feher vetett arnyeka a regi kek fejlechez kellett - most zavaro */
#sp-header .logo img { filter: none; }
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
color: var(--dm-green) !important;
font-weight: 600;
letter-spacing: .01em;
}
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a { color: var(--dm-terra) !important; }
/* Aktiv menupont alahuzasa - eddig csak szin jelezte */
#sp-header .sp-megamenu-parent > li.active > a::after {
content: ""; display: block; height: 2px; margin-top: 4px;
background: var(--dm-terra); border-radius: 2px;
}
#offcanvas-toggler > .fa { color: var(--dm-green); }
/* --- GOMB-RENDSZER ------------------------------------------------------- */
/* Az SP Page Builder minden addonnal ujra kiirja globalisan a
.sppb-btn-custom szabalyt, kulonbozo szinekkel - az utolso nyerne az
egesz oldalon. Ezt itt egyetlen, kiszamithato rendszerre csereljuk,
es a hierarchiat a link CELJABOL vezetjuk le, hogy a page-builder
tartalomhoz ne kelljen hozzanyulni. */
.sppb-btn, .sppb-btn-custom, a.sppb-btn {
border-radius: 999px !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
border: 2px solid transparent !important;
transition: background-color .18s ease, color .18s ease,
border-color .18s ease, transform .18s ease !important;
box-shadow: none !important;
text-transform: none !important;
/* ALAPALLAPOT: ha egy gomb egyik hierarchia-szabalyba sem esik (pl. "Megnezem a
teljes kinalatot"), ne az SPPB veletlenszeru kekje maradjon rajta. A harom
href-szabaly attributum-szelektoros, tehat magasabb specifikussagu -> nyer. */
background-color: transparent !important;
color: var(--dm-green) !important;
border-color: var(--dm-green) !important;
}
.sppb-btn:hover { transform: translateY(-1px); }
.sppb-btn:hover, a.sppb-btn:hover { background-color: var(--dm-green) !important; color: #fff !important; }
/* 1. ELSODLEGES - foglalas / kapcsolatfelvetel (terrakotta, teli) */
a.sppb-btn[href*="kapcsolat"],
a.sppb-btn[href*="contact"],
a.sppb-btn[href*="kontakt"],
a.sppb-btn[href^="mailto:"] {
background-color: var(--dm-terra) !important;
color: #fff !important;
border-color: var(--dm-terra) !important;
box-shadow: none !important;
}
a.sppb-btn[href*="kapcsolat"]:hover,
a.sppb-btn[href*="contact"]:hover,
a.sppb-btn[href*="kontakt"]:hover,
a.sppb-btn[href^="mailto:"]:hover {
background-color: var(--dm-terra-dark) !important;
border-color: var(--dm-terra-dark) !important;
color: #fff !important;
}
/* 2. MASODLAGOS - telefon (melyzold kontur) */
a.sppb-btn[href^="tel:"] {
background-color: transparent !important;
color: var(--dm-green) !important;
border-color: var(--dm-green) !important;
}
a.sppb-btn[href^="tel:"]:hover {
background-color: var(--dm-green) !important;
color: #fff !important;
}
/* 3. HARMADLAGOS - "Bovebben" modal-nyito: szoveglink, nem gomb.
Igy a kartyan egy domináns gomb marad, nem harom egyforma. */
a.sppb-btn[href^="#sppb-modal"] {
background: none !important;
border-color: transparent !important;
color: var(--dm-green) !important;
padding-left: 4px !important;
padding-right: 4px !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
text-decoration-thickness: 1px !important;
}
a.sppb-btn[href^="#sppb-modal"]:hover {
color: var(--dm-terra) !important;
background: none !important;
}
/* A modal-nyito ikonja (huvelykujj stb.) itt mar csak zaj */
a.sppb-btn[href^="#sppb-modal"] > i { display: none !important; }
/* Gomb-sor a kartyan: ne torjon szet, legyen egyenletes koz */
.sppb-addon-button-group, .sppb-addon-buttons { gap: .5rem; }
/* --- Szekcio-ritmus ------------------------------------------------------ */
.sppb-section { background-color: transparent; }
#sp-page-builder .sppb-section + .sppb-section { border-top: 0; }
/* (Itt korabban egy tul altalanos szabaly minden beagyazott szekciora rátette a
"feher lap" stilust. Ez a kartyakon BELUL is ervenyesult — a cim, a felszereltseg
es a gombsor kulon-kulon dobozt es arnyekot kapott, egymasra halmozva. Ezert
kivettuk: a kartya stilusat lejjebb, egyetlen helyen adjuk meg.) */
/* Kepek lekerekitese a kartyakon */
#sp-page-builder .sppb-img-responsive { border-radius: 10px; }
/* --- Lablec -------------------------------------------------------------- */
#sp-bottom {
background: var(--dm-green) !important;
color: rgba(255,255,255,.78);
}
#sp-bottom .sp-module-title, #sp-bottom h3 {
color: #fff !important;
font-size: 1.05rem;
letter-spacing: .04em;
text-transform: uppercase;
}
#sp-bottom a { color: rgba(255,255,255,.78); }
#sp-bottom a:hover { color: var(--dm-sand); }
#sp-footer {
background: var(--dm-green-dark) !important;
/* a footer_text_color parameter #d62b2b (piros) volt - felulirva */
color: rgba(255,255,255,.62) !important;
}
#sp-footer a, #sp-footer .sp-copyright { color: rgba(255,255,255,.62) !important; }
#sp-footer a:hover { color: var(--dm-sand) !important; }
#sp-footer .sppb-btn-link { color: rgba(255,255,255,.62) !important; }
/* --- Urlap --------------------------------------------------------------- */
.sppb-form-control, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], textarea, select {
border-radius: 10px !important;
border: 1px solid rgba(47,74,60,.22) !important;
background: #fff !important;
}
.sppb-form-control:focus, textarea:focus, select:focus {
border-color: var(--dm-green) !important;
box-shadow: 0 0 0 3px rgba(47,74,60,.12) !important;
}
/* --- Mobil ragados CTA-sav ----------------------------------------------- */
/* A markupot a sablon "Before Body" mezoje adja (#dm-cta-bar). */
#dm-cta-bar { display: none; }
@media (max-width: 767.98px) {
#dm-cta-bar {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(250,248,244,.97);
border-top: 1px solid rgba(47,74,60,.15);
box-shadow: 0 -6px 20px rgba(27,27,24,.10);
}
#dm-cta-bar a {
flex: 1 1 0; display: flex; align-items: center; justify-content: center;
gap: .45rem; min-height: 48px; padding: 10px 14px;
border-radius: 999px; font-weight: 700; font-size: 1rem;
text-decoration: none; border: 2px solid transparent;
}
#dm-cta-bar .dm-call {
color: var(--dm-green); border-color: var(--dm-green); background: transparent;
}
#dm-cta-bar .dm-book {
color: #fff; background: var(--dm-terra); border-color: var(--dm-terra);
}
/* hogy a sav ne takarja a lablec veget */
body { padding-bottom: 76px; }
/* a sutibanner fole ne csusszon */
#sp-cookie-consent { bottom: 76px; }
}
/* --- Mozgascsokkentes ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
.sppb-btn:hover { transform: none; }
}
/* --- A REJTETT TARTALOM VISSZAHOZASA ------------------------------------- */
/* Az oldal tartalmanak nagy resze MINDEN latogato szamara lathatatlan volt.
Ok: a regi SP Page Builder tartalom `sppb-wow` osztalyt visel, amire az
animate.min.css `visibility: hidden`-t tesz; a feltaro WOW.js viszont a jelenlegi
SPPB 5.5.7-ben mar NINCS az oldalon (ellenorizve: `typeof window.WOW === "undefined"`,
egyetlen wow/animate script sincs betoltve, es a JS-konzol hibatlan). Az elemek
inline stilusa is `animation-name: none` — az animacio sosem indult el.
Merleg: 40 szekciobol 29 volt rejtett, koztuk MINDEN apartman-kartya cime,
leirasa es ara. Ez nem a mostani arculat kovetkezmenye: a valtozas ELOTT is igy volt
(a custom.css letiltasaval osszehasonlitva). */
.sppb-wow {
visibility: visible !important;
animation-name: none !important;
}
/* --- Sutibanner ----------------------------------------------------------- */
/* A modul sajat