600&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#F2F3F5;color:#15171A;line-height:1.6}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}.container{width:min(calc(100% - 40px),1160px);margin:auto}.narrow{max-width:860px}.section{padding:90px 0}.header{position:sticky;top:0;z-index:100;background:rgba(14,21,17,.94);backdrop-filter:blur(15px)}.navrow{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:white}.brand span:last-child{display:flex;flex-direction:column}.brand small{font-size:10px;color:#C5C8CD}.mark{width:44px;height:44px;border-radius:14px;background:#A9CDA5;color:#0F1114;display:grid;place-items:center;font-weight:900}.header nav{display:flex;gap:24px;align-items:center;color:#e6ece7}.menu{display:none;background:none;border:0;color:white;font-size:26px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:14px;background:#A9CDA5;font-weight:800}.small{min-height:40px}.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:white}.darkbtn{background:#1A1D21;color:white}.hero{position:relative;min-height:690px;display:flex;align-items:center;overflow:hidden}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,10,.93),rgba(8,14,10,.75) 48%,rgba(8,14,10,.18))}.hero-copy{position:relative;color:white;max-width:760px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.17em;color:#759d50}.hero .eyebrow,.dark .eyebrow{color:#A9CDA5}.hero h1,.section-head h2,.about h2,.contact h2{font-size:clamp(36px,5vw,72px);line-height:1.03;letter-spacing:-.04em;margin:12px 0 18px}.hero p{font-size:20px;max-width:640px;color:#E6E8EB}.actions{display:flex;gap:12px;margin-top:28px}.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:#D6D9DD}.steps{background:white}.stepgrid{display:grid;grid-template-columns:repeat(3,1fr)}.stepgrid>div{padding:25px;display:flex;gap:14px;border-right:1px solid #D7DADF}.stepgrid b{font-size:26px;color:#7FA67C}.section-head{max-width:760px;margin-bottom:42px}.section-head h2,.about h2,.contact h2{font-size:clamp(34px,4vw,52px)}.section-head p,.about p,.contact p{color:#A7ADB5;font-size:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#16191D;border:1px solid #D7DADF;border-radius:24px;overflow:hidden}.card img{aspect-ratio:3/2;object-fit:cover}.card>div{padding:22px}.card h3{margin:0 0 8px}.card p{margin:0;color:#A7ADB5}.dark{background:#0F1114}.light h2{color:white}.light p{color:#C2C5CA}.works figure{margin:0;position:relative;border-radius:20px;overflow:hidden}.works figcaption{position:absolute;left:12px;bottom:12px;background:rgba(9,15,11,.8);color:white;padding:8px 10px;border-radius:8px}.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.portrait{border-radius:28px;aspect-ratio:4/5;object-fit:cover}.about ul{padding-left:22px}.faqsection{background:white}.faqsection details{border-bottom:1px solid #D7DADF;padding:18px 0}.faqsection summary{font-weight:800;cursor:pointer}.contact{background:#E8EAED}.contactgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px}.contactlist{display:grid;gap:12px}.contactlist a{background:#16191D;border:1px solid #2B3036;border-radius:17px;padding:16px 18px;display:flex;flex-direction:column}.contactlist span{color:#A7ADB5;font-size:14px}footer{background:#0F1114;color:#E4E7EB;padding:62px 0 20px}.footergrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}.footergrid>div{display:flex;flex-direction:column;gap:7px}.footergrid a,.footergrid p{color:#AEB3BA;font-size:14px}.copy{border-top:1px solid rgba(255,255,255,.09);margin-top:36px;padding-top:18px;font-size:12px;color:#8A9098}.mobilecta{display:none}.modal{display:none;position:fixed;inset:0;z-index:300}.modal.open{display:block}.backdrop{position:absolute;inset:0;background:rgba(7,12,9,.7)}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,500px);background:#16191D;padding:28px;border-radius:24px}.panel>button{position:absolute;right:16px;top:10px;border:0;background:none;font-size:28px}.modalactions{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:850px){.menu{display:block}.header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#0F1114;padding:20px;flex-direction:column;align-items:stretch}.header nav.open{display:flex}.stepgrid,.grid3{grid-template-columns:1fr}.stepgrid>div{border-right:0;border-bottom:1px solid #D7DADF}.about,.contactgrid{grid-template-columns:1fr}.footergrid{grid-template-columns:1fr 1fr}.hero{min-height:620px}.shade{background:rgba(8,14,10,.8)}}@media(max-width:600px){.container{width:min(calc(100% - 28px),1160px)}.section{padding:68px 0}.brand small{display:none}.hero h1{font-size:43px}.hero p{font-size:17px}.actions{flex-direction:column}.trust{flex-direction:column;gap:8px}.footergrid{grid-template-columns:1fr}.mobilecta{display:flex;position:fixed;left:14px;right:14px;bottom:12px;height:54px;align-items:center;justify-content:center;background:#A9CDA5;border-radius:14px;font-weight:900;z-index:120;box-shadow:0 12px 28px rgba(0,0,0,.2)}.panel{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;border-radius:24px 24px 0 0}.modalactions{grid-template-columns:1fr}}
/* Navy & Copper változat */
.site-header{
box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.btn{
box-shadow:0 8px 22px rgba(169,205,165,.16);
}
.btn:hover{
box-shadow:0 12px 28px rgba(169,205,165,.24);
}
.service-card{
background:#16191D;
}
.contact-card,
.faq-wrap{
background:#16191D;
}
.hero-shade{
background:linear-gradient(90deg,rgba(10,12,15,.95),rgba(10,12,15,.82) 48%,rgba(10,12,15,.20));
}
@media(max-width:850px){
.shade{
background:rgba(10,12,15,.84);
}
}
/* Charcoal / Racing Red változat */
.site-header{
background:rgba(15,17,20,.95);
border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-shade{
background:linear-gradient(90deg,rgba(8,9,11,.96),rgba(8,9,11,.82) 48%,rgba(8,9,11,.20));
}
.btn{
box-shadow:0 8px 22px rgba(169,205,165,.18);
}
.btn:hover{
box-shadow:0 12px 30px rgba(169,205,165,.26);
}
.service-card{
background:#16191D;
}
.contact-section{
background:#12151A;
}
.contact-card,
.faq-wrap{
background:#16191D;
}
.eyebrow{
color:#7FA67C;
}
.hero .eyebrow,
.section-dark .eyebrow{
color:#BDDDB9;
}
.brand-mark,
.contact-icon{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
/* ===== Full Dark Theme ===== */
body{
background:#0F1114;
color:#F3F5F7;
}
.section,
.faq-wrap,
.contact-section{
background:#0F1114;
}
.service-card,
.contact-card,
.lead-form{
background:#16191D;
border-color:#2B3036;
color:#F3F5F7;
}
.service-body p,
.section-head p,
.about-grid p,
.faq p,
.contact-grid>div>p,
.contact-card span,
.form-note{
color:#A7ADB5;
}
.section-head h2,
.about-grid h2,
.contact-grid h2,
.service-body h3,
.faq summary{
color:#F3F5F7;
}
.section-dark{
background:#090B0E;
}
.intro-strip,
.steps,
.process{
background:#12151A !important;
border-color:#2B3036 !important;
}
.strip-grid>div,
.stepgrid>div,
.process-grid>div{
border-color:#2B3036 !important;
}
.site-footer{
background:#090B0E;
}
.footer-grid a,
.footer-grid span,
.footer-grid p{
color:#A7ADB5;
}
input,textarea,select{
background:#101317;
color:#F3F5F7;
border-color:#343A41;
}
input:focus,textarea:focus,select:focus{
border-color:#A9CDA5;
box-shadow:0 0 0 3px rgba(169,205,165,.14);
}
.hero-shade{
background:linear-gradient(90deg,rgba(5,6,8,.97),rgba(5,6,8,.82) 48%,rgba(5,6,8,.28));
}
/* ===== Service image outlined hover ===== */
.service-card{
overflow:hidden;
}
.service-card img{
border:2px solid transparent;
outline:0 solid transparent;
outline-offset:-2px;
transition:
transform .28s ease,
filter .28s ease,
border-color .22s ease,
outline-color .22s ease,
box-shadow .28s ease;
}
.service-card:hover img{
transform:scale(1.025);
filter:brightness(1.05) contrast(1.03);
border-color:#A9CDA5;
outline:1px solid rgba(169,205,165,.55);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.03),
0 0 0 4px rgba(169,205,165,.08);
}
.service-card:hover{
border-color:#3A4148;
}
/* ===== Contact option outlined hover ===== */
.contact-card{
position:relative;
border:1px solid #30363D;
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease,
background .22s ease;
}
.contact-card::after{
content:"";
position:absolute;
inset:-1px;
border-radius:inherit;
border:1px solid transparent;
pointer-events:none;
transition:border-color .22s ease, inset .22s ease;
}
.contact-card:hover{
transform:translateY(-3px);
background:#191D22;
border-color:#A9CDA5;
box-shadow:0 14px 34px rgba(0,0,0,.28), 0 0 0 4px rgba(169,205,165,.08);
}
.contact-card:hover::after{
inset:-5px;
border-color:rgba(169,205,165,.55);
}
.contact-card:hover .contact-icon{
background:#A9CDA5;
color:#fff;
}
/* Keep modal dark too */
.modal-panel{
background:#16191D;
color:#F3F5F7;
}
.modal-panel p{
color:#A7ADB5;
}
.modal-close{
color:#C4C9CF;
}
@media (max-width:900px){
.hero-shade{
background:rgba(5,6,8,.84);
}
}
/* ===== v2 — jól látható hover + erősebb oldaltagolás ===== */
/* Szekciók finom váltakozó hátterei */
#szolgaltatasok,
#rolunk{
background:#0F1114;
}
#munkaink,
#gyik{
background:#0B0D10;
}
#kapcsolat,
#felmeres,
.contact-section{
background:#12151A !important;
}
/* Oldalrészek közötti vizuális elválasztó */
.page-divider{
height:58px;
padding:0 max(28px, calc((100vw - 1160px)/2));
display:grid;
grid-template-columns:auto minmax(60px,1fr) auto;
align-items:center;
gap:16px;
background:#0F1114;
border-top:1px solid #282D33;
border-bottom:1px solid #282D33;
color:#8F969E;
position:relative;
overflow:hidden;
}
.page-divider::before{
content:"";
position:absolute;
left:0;
top:0;
width:140px;
height:2px;
background:#A9CDA5;
}
.page-divider span{
color:#A9CDA5;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
}
.page-divider i{
display:block;
height:1px;
background:linear-gradient(90deg,#343A41 0%,#343A41 75%,transparent 100%);
}
.page-divider strong{
font-size:11px;
letter-spacing:.18em;
font-weight:800;
color:#D7DBDF;
}
.page-divider-dark{
background:#0B0D10;
}
/* SZOLGÁLTATÁSOK — látványos, biztosan működő körvonalas hover */
.service-card{
position:relative;
border:1px solid #2D3339 !important;
transition:
transform .24s ease,
border-color .24s ease,
box-shadow .24s ease,
background .24s ease;
will-change:transform;
}
.service-card::after{
content:"";
position:absolute;
inset:-1px;
border:2px solid transparent;
border-radius:inherit;
pointer-events:none;
z-index:4;
transition:
inset .24s ease,
border-color .24s ease,
box-shadow .24s ease;
}
.service-card img{
position:relative;
z-index:1;
transition:
transform .30s ease,
filter .30s ease;
}
.service-card:hover,
.service-card:focus-within{
transform:translateY(-7px);
border-color:#A9CDA5 !important;
background:#191D22 !important;
box-shadow:
0 18px 48px rgba(0,0,0,.38),
0 0 0 1px rgba(169,205,165,.45);
}
.service-card:hover::after,
.service-card:focus-within::after{
inset:-6px;
border-color:#A9CDA5;
box-shadow:0 0 24px rgba(169,205,165,.22);
}
.service-card:hover img,
.service-card:focus-within img{
transform:scale(1.045);
filter:brightness(1.08) contrast(1.05) saturate(1.05);
}
/* A képen belül is legyen látható piros keret */
.service-card:hover img,
.service-card:focus-within img{
box-shadow:inset 0 0 0 3px #A9CDA5;
}
/* KAPCSOLATI módok — dupla körvonal + glow hover */
.contact-card,
.contact-options a,
.contactlist a{
position:relative;
border:1px solid #30363D !important;
background:#16191D !important;
transition:
transform .22s ease,
border-color .22s ease,
background .22s ease,
box-shadow .22s ease;
}
.contact-card::before,
.contact-options a::before,
.contactlist a::before{
content:"";
position:absolute;
inset:0;
border:1px solid transparent;
border-radius:inherit;
pointer-events:none;
transition:
inset .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
.contact-card:hover,
.contact-card:focus-visible,
.contact-options a:hover,
.contact-options a:focus-visible,
.contactlist a:hover,
.contactlist a:focus-visible{
transform:translateY(-5px);
border-color:#A9CDA5 !important;
background:#1B1F24 !important;
box-shadow:
0 16px 34px rgba(0,0,0,.34),
0 0 0 1px rgba(169,205,165,.50);
outline:none;
}
.contact-card:hover::before,
.contact-card:focus-visible::before,
.contact-options a:hover::before,
.contact-options a:focus-visible::before,
.contactlist a:hover::before,
.contactlist a:focus-visible::before{
inset:-6px;
border-color:#A9CDA5;
box-shadow:0 0 24px rgba(169,205,165,.20);
}
.contact-card:hover .contact-icon,
.contact-card:focus-visible .contact-icon{
background:#A9CDA5 !important;
transform:scale(1.05);
}
.contact-icon{
transition:background .22s ease,transform .22s ease;
}
/* Érintőkijelzőn rövid nyomásra is adjon visszajelzést */
@media (hover:none){
.service-card:active,
.contact-card:active,
.contact-options a:active,
.contactlist a:active{
transform:scale(.985);
border-color:#A9CDA5 !important;
box-shadow:0 0 0 2px rgba(169,205,165,.28);
}
}
/* Mobilon kompaktabb, de jól látható tagolás */
@media(max-width:640px){
.page-divider{
height:48px;
padding:0 16px;
grid-template-columns:auto 1fr auto;
gap:10px;
}
.page-divider::before{
width:78px;
}
.page-divider strong{
font-size:9px;
letter-spacing:.13em;
}
.service-card:hover,
.service-card:focus-within{
transform:translateY(-4px);
}
}
/* =======================================================================
v3 — javított szekciószámozás, VALÓDI szolgáltatás-hover és header hover
======================================================================= */
/* ----- Szolgáltatások: a valódi HTML-elemek célzása ----- */
#szolgaltatasok .grid3 > .card{
position:relative;
isolation:isolate;
overflow:hidden;
border:1px solid #2D3339 !important;
background:#16191D !important;
transition:
transform .26s cubic-bezier(.2,.8,.2,1),
border-color .24s ease,
box-shadow .26s ease,
background .24s ease;
}
#szolgaltatasok .grid3 > .card > img{
display:block;
width:100%;
position:relative;
z-index:1;
outline:2px solid transparent;
outline-offset:-9px;
transition:
transform .34s cubic-bezier(.2,.8,.2,1),
filter .28s ease,
outline-color .22s ease,
outline-offset .22s ease;
}
#szolgaltatasok .grid3 > .card::after{
content:"";
position:absolute;
inset:-1px;
z-index:5;
pointer-events:none;
border:2px solid transparent;
border-radius:24px;
transition:
inset .26s ease,
border-color .22s ease,
box-shadow .26s ease;
}
#szolgaltatasok .grid3 > .card:hover,
#szolgaltatasok .grid3 > .card:focus-within{
transform:translateY(-7px);
border-color:#A9CDA5 !important;
background:#1A1E23 !important;
box-shadow:
0 20px 50px rgba(0,0,0,.42),
0 0 0 1px rgba(169,205,165,.32);
}
#szolgaltatasok .grid3 > .card:hover::after,
#szolgaltatasok .grid3 > .card:focus-within::after{
inset:-6px;
border-color:#A9CDA5;
box-shadow:0 0 28px rgba(169,205,165,.24);
}
#szolgaltatasok .grid3 > .card:hover > img,
#szolgaltatasok .grid3 > .card:focus-within > img{
transform:scale(1.055);
filter:brightness(1.08) contrast(1.06) saturate(1.06);
outline-color:#A9CDA5;
outline-offset:-7px;
}
/* Piros felső "scan line", hogy a hover még egyértelműbb legyen */
#szolgaltatasok .grid3 > .card::before{
content:"";
position:absolute;
z-index:6;
left:50%;
top:0;
width:0;
height:3px;
background:#A9CDA5;
transform:translateX(-50%);
transition:width .30s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
#szolgaltatasok .grid3 > .card:hover::before,
#szolgaltatasok .grid3 > .card:focus-within::before{
width:100%;
}
/* ----- Header: középről két irányba kifutó aláhúzás ----- */
.header nav > a{
position:relative;
padding-bottom:7px;
transition:color .2s ease, opacity .2s ease;
}
/* A Contact gombon is ugyanaz az aláhúzás jelenik meg */
.header nav > a::after{
content:"";
position:absolute;
left:50%;
bottom:1px;
width:0;
height:2px;
background:#A9CDA5;
border-radius:99px;
transform:translateX(-50%);
transform-origin:center;
transition:width .28s cubic-bezier(.22,.75,.25,1);
}
.header nav > a:hover::after,
.header nav > a:focus-visible::after{
width:calc(100% - 2px);
}
.header nav > a:hover,
.header nav > a:focus-visible{
color:#FFFFFF;
opacity:1;
outline:none;
}
/* A CTA gomb aláhúzása ne a gomb szélére, hanem beljebb fusson */
.header nav > a.btn::after{
bottom:7px;
background:#FFFFFF;
}
.header nav > a.btn:hover::after,
.header nav > a.btn:focus-visible::after{
width:calc(100% - 28px);
}
/* ----- Oldaltagolás: konzisztens 01–05 ----- */
.page-divider{
height:58px;
padding:0 max(28px, calc((100vw - 1160px)/2));
display:grid;
grid-template-columns:42px minmax(60px,1fr) auto;
align-items:center;
gap:16px;
background:#0F1114;
border-top:1px solid #282D33;
border-bottom:1px solid #282D33;
position:relative;
overflow:hidden;
}
.page-divider.page-divider-dark{
background:#0B0D10;
}
.page-divider::before{
content:"";
position:absolute;
top:0;
left:0;
width:112px;
height:2px;
background:#A9CDA5;
}
.page-divider span{
color:#A9CDA5;
font-size:11px;
font-weight:900;
letter-spacing:.14em;
}
.page-divider i{
display:block;
height:1px;
background:linear-gradient(90deg,#3A4047 0%,#30353B 72%,transparent 100%);
}
.page-divider strong{
color:#DDE1E5;
font-size:11px;
font-weight:800;
letter-spacing:.17em;
}
/* Mobilon hover nincs: tap/active visszajelzés */
@media (hover:none){
#szolgaltatasok .grid3 > .card:active{
transform:scale(.985);
border-color:#A9CDA5 !important;
box-shadow:0 0 0 2px rgba(169,205,165,.28);
}
#szolgaltatasok .grid3 > .card:active > img{
outline-color:#A9CDA5;
}
}
@media(max-width:640px){
.page-divider{
height:48px;
padding:0 16px;
grid-template-columns:32px 1fr auto;
gap:10px;
}
.page-divider::before{
width:72px;
}
.page-divider strong{
font-size:9px;
letter-spacing:.12em;
}
/* mobil menüben is működjön az aláhúzás */
.header nav > a{
width:max-content;
max-width:100%;
}
.header nav > a.btn{
width:100%;
}
}
/* =========================================================
v4 — animált kapcsolatfelvételi ablak a RÓLUNK gombhoz
========================================================= */
.modal{
display:block !important;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:
opacity .26s ease,
visibility 0s linear .34s;
}
.modal.open{
visibility:visible;
opacity:1;
pointer-events:auto;
transition:
opacity .26s ease,
visibility 0s linear 0s;
}
.modal .backdrop,
.modal .modal-backdrop{
opacity:0;
transition:opacity .28s ease;
}
.modal.open .backdrop,
.modal.open .modal-backdrop{
opacity:1;
}
.modal .panel,
.modal .modal-panel{
opacity:0;
transform:
translate(-50%, -46%)
scale(.94);
filter:blur(5px);
transition:
transform .42s cubic-bezier(.16,1,.3,1),
opacity .26s ease,
filter .36s ease;
}
.modal.open .panel,
.modal.open .modal-panel{
opacity:1;
transform:
translate(-50%, -50%)
scale(1);
filter:blur(0);
}
/* Finom piros felső accent, amikor bejön az ablak */
.modal .panel::before,
.modal .modal-panel::before{
content:"";
position:absolute;
left:50%;
top:0;
width:0;
height:3px;
transform:translateX(-50%);
background:#A9CDA5;
border-radius:0 0 6px 6px;
transition:width .44s cubic-bezier(.16,1,.3,1) .08s;
}
.modal.open .panel::before,
.modal.open .modal-panel::before{
width:74%;
}
/* A belső elemek enyhén késleltetve jönnek be */
.modal .panel > *:not(.modal-close):not([data-close]),
.modal .modal-panel > *:not(.modal-close):not([data-close]){
opacity:0;
transform:translateY(10px);
transition:
opacity .30s ease,
transform .36s cubic-bezier(.16,1,.3,1);
}
.modal.open .panel > *:not(.modal-close):not([data-close]),
.modal.open .modal-panel > *:not(.modal-close):not([data-close]){
opacity:1;
transform:translateY(0);
}
.modal.open .panel > *:nth-child(2),
.modal.open .modal-panel > *:nth-child(2){ transition-delay:.08s; }
.modal.open .panel > *:nth-child(3),
.modal.open .modal-panel > *:nth-child(3){ transition-delay:.12s; }
.modal.open .panel > *:nth-child(4),
.modal.open .modal-panel > *:nth-child(4){ transition-delay:.16s; }
.modal.open .panel > *:nth-child(5),
.modal.open .modal-panel > *:nth-child(5){ transition-delay:.20s; }
/* Bezáráskor maradjon rövid fade, ne tűnjön el azonnal */
.modal.is-closing{
opacity:0;
pointer-events:none;
}
.modal.is-closing .panel,
.modal.is-closing .modal-panel{
opacity:0;
transform:
translate(-50%, -45%)
scale(.96);
filter:blur(3px);
}
/* Mobil: alulról csússzon fel */
@media(max-width:600px){
.modal .panel,
.modal .modal-panel{
left:0 !important;
right:0 !important;
top:auto !important;
bottom:0 !important;
width:100% !important;
transform:translateY(34px) scale(.985) !important;
border-radius:24px 24px 0 0;
}
.modal.open .panel,
.modal.open .modal-panel{
transform:translateY(0) scale(1) !important;
}
.modal.is-closing .panel,
.modal.is-closing .modal-panel{
transform:translateY(28px) scale(.99) !important;
}
}
/* Mozgáscsökkentés tiszteletben tartása */
/* =========================================================
v5 — nagyobb, animált GYIK lenyílók
========================================================= */
.faqsection{
background:#0B0D10 !important;
}
.faq-accordion{
border-top:1px solid #30353B;
}
.faq-item{
border-bottom:1px solid #30353B;
overflow:visible;
transition:
background .22s ease,
border-color .22s ease;
}
.faq-item:hover{
background:rgba(255,255,255,.018);
}
.faq-item.is-open{
background:#101318;
border-color:#3A4047;
}
/* Nagyobb kattintható sor */
.faq-toggle{
width:100%;
min-height:92px;
padding:22px 4px 22px 0;
display:grid;
grid-template-columns:minmax(0,1fr) 58px;
align-items:center;
gap:24px;
border:0;
background:transparent;
color:#F3F5F7;
text-align:left;
cursor:pointer;
font:inherit;
}
.faq-question{
font-size:clamp(18px,2vw,23px);
line-height:1.35;
font-weight:760;
letter-spacing:-.018em;
transition:
color .22s ease,
transform .22s ease;
}
.faq-toggle:hover .faq-question{
color:#FFFFFF;
transform:translateX(4px);
}
.faq-toggle:focus-visible{
outline:none;
}
.faq-toggle:focus-visible .faq-question{
color:#FFFFFF;
}
/* Nyíl külön hover-területtel */
.faq-arrow{
--ring-progress:0deg;
position:relative;
width:48px;
height:48px;
justify-self:end;
display:grid;
place-items:center;
border-radius:50%;
color:#D6DADF;
isolation:isolate;
transition:
color .22s ease,
background .22s ease,
transform .30s cubic-bezier(.16,1,.3,1);
}
/* animált körív */
.faq-arrow::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
padding:2px;
opacity:.55;
background:
conic-gradient(
from -90deg,
#A9CDA5 0deg,
#A9CDA5 var(--ring-progress),
rgba(169,205,165,.10) var(--ring-progress),
rgba(169,205,165,.10) 360deg
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
transition:
--ring-progress .42s cubic-bezier(.16,1,.3,1),
opacity .22s ease,
transform .34s cubic-bezier(.16,1,.3,1);
}
/* finom belső kör alapból */
.faq-arrow::after{
content:"";
position:absolute;
inset:7px;
border:1px solid #343A41;
border-radius:50%;
background:#12151A;
z-index:-1;
transition:
border-color .22s ease,
background .22s ease,
box-shadow .22s ease;
}
/* A karika kifejezetten akkor rajzolódik ki, ha a nyílra visszük az egeret */
.faq-arrow:hover{
--ring-progress:360deg;
color:#FFFFFF;
}
.faq-arrow:hover::before{
opacity:1;
transform:rotate(360deg);
}
.faq-arrow:hover::after{
border-color:rgba(169,205,165,.55);
background:#191D22;
box-shadow:0 0 18px rgba(169,205,165,.13);
}
/* CSS chevron */
.faq-arrow i{
width:10px;
height:10px;
display:block;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:
transform .40s cubic-bezier(.16,1,.3,1),
color .22s ease;
}
/* Nyitott állapotban a nyíl felfelé fordul */
.faq-item.is-open .faq-arrow{
color:#A9CDA5;
}
.faq-item.is-open .faq-arrow i{
transform:translateY(2px) rotate(225deg);
}
/* Kinyíló válasz — a magasságot JS vezérli */
.faq-answer{
height:0;
overflow:hidden;
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:
height .44s cubic-bezier(.16,1,.3,1),
opacity .28s ease,
transform .40s cubic-bezier(.16,1,.3,1),
visibility 0s linear .44s;
}
.faq-item.is-open .faq-answer{
opacity:1;
visibility:visible;
transform:translateY(0);
transition:
height .44s cubic-bezier(.16,1,.3,1),
opacity .30s ease .06s,
transform .40s cubic-bezier(.16,1,.3,1),
visibility 0s linear 0s;
}
.faq-answer-inner{
padding:0 76px 28px 0;
}
.faq-answer-inner p{
margin:0;
max-width:720px;
color:#A7ADB5;
font-size:16px;
line-height:1.75;
}
/* Az @property miatt a conic-gradient ténylegesen animálható */
@property --ring-progress{
syntax:"";
inherits:false;
initial-value:0deg;
}
@media(max-width:640px){
.faq-toggle{
min-height:82px;
padding:18px 0;
grid-template-columns:minmax(0,1fr) 50px;
gap:14px;
}
.faq-question{
font-size:18px;
}
.faq-arrow{
width:44px;
height:44px;
}
.faq-answer-inner{
padding:0 0 24px 0;
}
/* Érintésnél rövid visszajelzés */
.faq-arrow:active{
--ring-progress:360deg;
transform:scale(.94);
}
}
/* =========================================================
v6 — GYIK nyíl: alapból nincs piros karika,
hoverkor óramutató járásával megegyezően rajzolódik körbe
========================================================= */
.faq-arrow{
--ring-progress:0deg;
}
/* Alapállapot: teljesen nincs piros kör */
.faq-arrow::before{
opacity:1 !important;
transform:none !important;
background:
conic-gradient(
from -90deg,
#A9CDA5 0deg,
#A9CDA5 var(--ring-progress),
transparent var(--ring-progress),
transparent 360deg
) !important;
transition:
--ring-progress .48s cubic-bezier(.22,.78,.22,1) !important;
}
/* Hover: felülről indulva, óramutató járásával megegyezően rajzolódik körbe */
.faq-arrow:hover{
--ring-progress:360deg;
}
/* Ne forogjon maga a kör: csak a vonal "rajzolódjon" körbe */
.faq-arrow:hover::before{
transform:none !important;
opacity:1 !important;
}
/* Alap belső kör semleges, semmi piros */
.faq-arrow::after{
border-color:#343A41 !important;
background:#12151A !important;
box-shadow:none !important;
}
/* Hoverkor a belső kör csak nagyon finoman reagáljon */
.faq-arrow:hover::after{
border-color:#4A5159 !important;
background:#171B20 !important;
box-shadow:0 0 16px rgba(169,205,165,.08) !important;
}
/* Nyitott kérdésnél a nyíl lehet piros, de a kör továbbra sem marad ott alapból */
.faq-item.is-open .faq-arrow{
--ring-progress:0deg;
}
/* Nyitott állapotban is csak hoverre rajzolódik ki a karika */
.faq-item.is-open .faq-arrow:hover{
--ring-progress:360deg;
}
/* Mobil érintés: rövid teljes kör */
@media (hover:none){
.faq-arrow:active{
--ring-progress:360deg;
}
}
/* =========================================================
v7 — ROBUSZTUS GYIK KÖRANIMÁCIÓ SVG-VEL
========================================================= */
/* A korábbi conic-gradient kör teljes kikapcsolása */
.faq-arrow::before,
.faq-arrow::after{
content:none !important;
display:none !important;
}
.faq-arrow{
position:relative;
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:50%;
color:#D6DADF;
background:#12151A;
border:1px solid #343A41;
transition:
color .22s ease,
background .22s ease,
transform .26s cubic-bezier(.16,1,.3,1),
border-color .22s ease;
overflow:visible;
}
/* SVG kör pontosan a gomb körül */
.faq-ring{
position:absolute;
inset:-1px;
width:48px;
height:48px;
overflow:visible;
pointer-events:none;
transform:rotate(-90deg); /* innen indul felülről */
}
.faq-ring-track{
fill:none;
stroke:transparent; /* alapból tényleg nincs piros/karika */
stroke-width:2;
}
.faq-ring-progress{
fill:none;
stroke:#A9CDA5;
stroke-width:2.4;
stroke-linecap:round;
/* 2πr, ahol r=20 => kb. 125.664 */
stroke-dasharray:125.664;
stroke-dashoffset:125.664;
transition:
stroke-dashoffset .58s cubic-bezier(.22,.76,.18,1);
}
/* CSAK akkor rajzolódik ki, amikor a nyíl fölött van az egér */
.faq-arrow:hover .faq-ring-progress{
stroke-dashoffset:0;
}
.faq-arrow:hover{
color:#FFFFFF;
background:#181C21;
border-color:#4B525A;
transform:scale(1.035);
}
/* A chevron továbbra is animáltan fordul lenyitáskor */
.faq-arrow i{
position:relative;
z-index:2;
width:10px;
height:10px;
display:block;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:
transform .40s cubic-bezier(.16,1,.3,1),
color .22s ease;
}
.faq-item.is-open .faq-arrow{
color:#A9CDA5;
}
/* Fontos: lenyitva sincs alapból kör. Csak hoverre. */
.faq-item.is-open .faq-ring-progress{
stroke-dashoffset:125.664;
}
.faq-item.is-open .faq-arrow:hover .faq-ring-progress{
stroke-dashoffset:0;
}
.faq-item.is-open .faq-arrow i{
transform:translateY(2px) rotate(225deg);
}
/* Mobil / touch: nyomás közben röviden kirajzolódik */
@media (hover:none){
.faq-arrow:active .faq-ring-progress{
stroke-dashoffset:0;
}
.faq-arrow:active{
transform:scale(.95);
}
}
@media(max-width:640px){
.faq-arrow,
.faq-ring{
width:44px;
height:44px;
}
.faq-ring{
inset:-1px;
}
}
/* =========================================================
v8 — folyamatlépések tisztítása + komolyabb CTA animációk
========================================================= */
/* 1–2–3 lépések: SEMMILYEN függőleges elválasztóvonal */
.stepgrid > div,
.process-grid > div,
.strip-grid > div{
border-right:0 !important;
border-left:0 !important;
}
/* Finom vízszintes/tagoló ritmus maradhat mobilon */
@media(max-width:850px){
.stepgrid > div,
.process-grid > div,
.strip-grid > div{
border-bottom:1px solid #2B3036 !important;
}
.stepgrid > div:last-child,
.process-grid > div:last-child,
.strip-grid > div:last-child{
border-bottom:0 !important;
}
}
/* ----- Univerzális komoly CTA hover ----- */
.btn,
.header nav > a.btn,
.hero .btn,
.about .btn,
.contact .btn,
.modal .btn,
.mobilecta,
.mobile-cta{
position:relative;
overflow:hidden;
isolation:isolate;
transform:translateZ(0);
transition:
transform .28s cubic-bezier(.16,1,.3,1),
box-shadow .28s ease,
border-color .22s ease,
color .22s ease,
background .22s ease;
}
/* fénycsík */
.btn::before,
.header nav > a.btn::before,
.hero .btn::before,
.about .btn::before,
.contact .btn::before,
.modal .btn::before,
.mobilecta::before,
.mobile-cta::before{
content:"";
position:absolute;
top:-40%;
left:-60%;
width:42%;
height:180%;
z-index:-1;
transform:rotate(16deg);
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.24),
transparent
);
transition:left .52s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
/* alsó accent-vonal */
.btn::after,
.hero .btn::after,
.about .btn::after,
.contact .btn::after,
.modal .btn::after,
.mobilecta::after,
.mobile-cta::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:0;
height:3px;
transform:translateX(-50%);
background:#fff;
transition:width .34s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.btn:hover,
.btn:focus-visible,
.hero .btn:hover,
.hero .btn:focus-visible,
.about .btn:hover,
.about .btn:focus-visible,
.contact .btn:hover,
.contact .btn:focus-visible,
.modal .btn:hover,
.modal .btn:focus-visible,
.mobilecta:hover,
.mobilecta:focus-visible,
.mobile-cta:hover,
.mobile-cta:focus-visible{
transform:translateY(-4px) scale(1.015);
box-shadow:
0 16px 34px rgba(0,0,0,.34),
0 0 0 1px rgba(169,205,165,.35),
0 0 28px rgba(169,205,165,.16);
outline:none;
}
.btn:hover::before,
.btn:focus-visible::before,
.hero .btn:hover::before,
.hero .btn:focus-visible::before,
.about .btn:hover::before,
.about .btn:focus-visible::before,
.contact .btn:hover::before,
.contact .btn:focus-visible::before,
.modal .btn:hover::before,
.modal .btn:focus-visible::before,
.mobilecta:hover::before,
.mobilecta:focus-visible::before,
.mobile-cta:hover::before,
.mobile-cta:focus-visible::before{
left:125%;
}
.btn:hover::after,
.btn:focus-visible::after,
.hero .btn:hover::after,
.hero .btn:focus-visible::after,
.about .btn:hover::after,
.about .btn:focus-visible::after,
.contact .btn:hover::after,
.contact .btn:focus-visible::after,
.modal .btn:hover::after,
.modal .btn:focus-visible::after,
.mobilecta:hover::after,
.mobilecta:focus-visible::after,
.mobile-cta:hover::after,
.mobile-cta:focus-visible::after{
width:74%;
}
/* A ghost / szolgáltatások gomb legyen külön karakterű */
.btn.ghost,
.btn-ghost{
background:rgba(255,255,255,.04) !important;
border-color:#525960 !important;
color:#F3F5F7 !important;
backdrop-filter:blur(4px);
}
.btn.ghost:hover,
.btn.ghost:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible{
background:#171B20 !important;
border-color:#A9CDA5 !important;
color:#FFFFFF !important;
box-shadow:
0 16px 36px rgba(0,0,0,.34),
inset 0 0 0 1px rgba(169,205,165,.18),
0 0 24px rgba(169,205,165,.16);
}
/* ----- Header normál linkek: komolyabb középről kifutó underline ----- */
.header nav > a:not(.btn){
position:relative;
padding-bottom:8px;
transition:
color .22s ease,
transform .22s ease,
text-shadow .22s ease;
}
.header nav > a:not(.btn)::after{
content:"";
position:absolute;
left:50%;
bottom:1px;
width:0;
height:2px;
transform:translateX(-50%);
border-radius:999px;
background:#A9CDA5;
box-shadow:0 0 12px rgba(169,205,165,.45);
transition:width .34s cubic-bezier(.16,1,.3,1);
}
.header nav > a:not(.btn):hover,
.header nav > a:not(.btn):focus-visible{
color:#FFFFFF;
transform:translateY(-1px);
text-shadow:0 0 18px rgba(255,255,255,.08);
outline:none;
}
.header nav > a:not(.btn):hover::after,
.header nav > a:not(.btn):focus-visible::after{
width:100%;
}
/* ----- Kapcsolat opciók: komolyabb kártya-hover ----- */
.contactlist a,
.contact-options a,
.contact-card{
overflow:hidden;
isolation:isolate;
}
.contactlist a::after,
.contact-options a::after,
.contact-card::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(
120deg,
transparent 0%,
rgba(169,205,165,.05) 38%,
rgba(169,205,165,.16) 50%,
rgba(169,205,165,.05) 62%,
transparent 100%
);
transform:translateX(-115%);
transition:transform .52s cubic-bezier(.16,1,.3,1);
}
.contactlist a:hover::after,
.contactlist a:focus-visible::after,
.contact-options a:hover::after,
.contact-options a:focus-visible::after,
.contact-card:hover::after,
.contact-card:focus-visible::after{
transform:translateX(115%);
}
.contactlist a:hover,
.contact-options a:hover,
.contact-card:hover{
transform:translateY(-6px) scale(1.01) !important;
}
/* ----- Szolgáltatáskártyák még komolyabb interakcióval ----- */
#szolgaltatasok .grid3 > .card{
cursor:default;
}
#szolgaltatasok .grid3 > .card .card-body,
#szolgaltatasok .grid3 > .card > div{
position:relative;
z-index:3;
transition:
transform .28s cubic-bezier(.16,1,.3,1);
}
#szolgaltatasok .grid3 > .card:hover .card-body,
#szolgaltatasok .grid3 > .card:hover > div{
transform:translateY(-2px);
}
#szolgaltatasok .grid3 > .card h3{
transition:
color .22s ease,
letter-spacing .28s ease;
}
#szolgaltatasok .grid3 > .card:hover h3{
color:#FFFFFF;
letter-spacing:.01em;
}
/* érintőkijelző: látványos, de nem ragad be */
@media(hover:none){
.btn:active,
.mobilecta:active,
.mobile-cta:active,
.contactlist a:active,
.contact-options a:active,
.contact-card:active{
transform:scale(.97) !important;
}
}
/* reduced motion */
/* =========================================================
v9 — vékonyabb aláhúzás + szabadkézi GYIK kör
========================================================= */
/* A CTA-k és header linkek aláhúzása vékonyabb */
.btn::after,
.hero .btn::after,
.about .btn::after,
.contact .btn::after,
.modal .btn::after,
.mobilecta::after,
.mobile-cta::after,
.header nav > a::after,
.header nav > a:not(.btn)::after,
.header nav > a.btn::after{
height:1px !important;
box-shadow:none !important;
}
/* Szabadkézi kör: nincs szabályos track, csak az animált path */
.faq-ring-track{
display:none !important;
}
.faq-ring{
position:absolute;
inset:-2px;
width:52px;
height:52px;
overflow:visible;
pointer-events:none;
/* A JS által generált útvonal már felülről indul, ezért nem forgatjuk */
transform:none !important;
}
.faq-ring-progress{
fill:none;
stroke:#A9CDA5;
stroke-width:2.1;
stroke-linecap:round;
stroke-linejoin:round;
opacity:0;
/* A pontos értékeket JS állítja minden hover előtt */
stroke-dasharray:1;
stroke-dashoffset:1;
transition:
stroke-dashoffset .62s cubic-bezier(.18,.78,.16,1),
opacity .12s ease;
}
/* Hoverkor a JS által frissen rajzolt vonal jelenik meg */
.faq-arrow.is-drawing .faq-ring-progress{
opacity:1;
}
/* A nyíl körüli alapállapot marad teljesen semleges */
.faq-arrow{
border-color:#343A41 !important;
background:#12151A !important;
box-shadow:none !important;
}
.faq-arrow:hover{
border-color:#4A5159 !important;
background:#171B20 !important;
box-shadow:0 0 16px rgba(169,205,165,.06) !important;
}
/* =========================================================
v10 — valóban szabadkézi, minden hoverkor új GYIK karika
========================================================= */
.faq-ring-track{
display:none !important;
}
.faq-ring{
position:absolute !important;
left:50% !important;
top:50% !important;
width:54px !important;
height:54px !important;
transform:translate(-50%,-50%) !important;
overflow:visible !important;
pointer-events:none !important;
}
.faq-ring-progress{
display:block !important;
fill:none !important;
stroke:#A9CDA5 !important;
stroke-width:2.25 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
vector-effect:non-scaling-stroke;
opacity:0 !important;
stroke-dasharray:160;
stroke-dashoffset:160;
transition:
stroke-dashoffset .64s cubic-bezier(.17,.79,.19,1),
opacity .10s ease !important;
}
.faq-arrow.is-drawing .faq-ring-progress{
opacity:1 !important;
}
/* A nyíl körül továbbra sincs alap piros keret. */
.faq-arrow{
border:1px solid #343A41 !important;
background:#12151A !important;
box-shadow:none !important;
}
.faq-arrow:hover{
border-color:#484F57 !important;
background:#171B20 !important;
box-shadow:0 0 15px rgba(169,205,165,.05) !important;
}
/* =========================================================
v11 — vissza az eredeti, szabályos GYIK karikához
========================================================= */
/* Minden korábbi freehand/pseudo karika kikapcsolva */
.faq-arrow::before,
.faq-arrow::after{
content:none !important;
display:none !important;
}
.faq-ring{
position:absolute !important;
left:50% !important;
top:50% !important;
width:48px !important;
height:48px !important;
transform:translate(-50%,-50%) rotate(-90deg) !important;
overflow:visible !important;
pointer-events:none !important;
}
.faq-ring-progress{
fill:none !important;
stroke:#A9CDA5 !important;
stroke-width:2.2 !important;
stroke-linecap:round !important;
opacity:1 !important;
stroke-dasharray:125.664;
stroke-dashoffset:125.664;
transition:
stroke-dashoffset .52s cubic-bezier(.18,.78,.18,1),
stroke-width .28s ease,
filter .28s ease,
opacity .22s ease !important;
}
/* Hover: szabályosan, óramutató járásával megegyezően kirajzolódik */
.faq-arrow:hover .faq-ring-progress{
stroke-dashoffset:0;
}
/* Nyitott FAQ: teljes kör folyamatosan látszik */
.faq-item.is-open .faq-ring-progress{
stroke-dashoffset:0 !important;
}
/* Nyitott állapotban lassú, finom pulzálás */
.faq-item.is-open .faq-arrow.ring-pulse .faq-ring-progress{
animation:faqRingPulse 2.4s ease-in-out infinite;
}
@keyframes faqRingPulse{
0%,100%{
stroke-width:2.2;
opacity:.78;
filter:drop-shadow(0 0 0 rgba(169,205,165,0));
}
50%{
stroke-width:2.8;
opacity:1;
filter:drop-shadow(0 0 5px rgba(169,205,165,.55));
}
}
/* A nyíl maga nyitáskor továbbra is fordul */
.faq-item.is-open .faq-arrow{
color:#A9CDA5 !important;
}
/* Footer jogi szöveg pirosas */
.rights-reserved{
color:#A6CDA2 !important;
}
/* Ha a footerben később sima "Minden jog fenntartva" szöveg kerül span nélkül,
ez a class marad az ajánlott forma. */
@media(max-width:640px){
.faq-ring{
width:44px !important;
height:44px !important;
}
}
/* =========================================================
v12 — intenzívebb GYIK pulzálás: 0% -> ~140% fényerő
========================================================= */
.faq-item.is-open .faq-arrow.ring-pulse .faq-ring-progress{
animation:faqRingPulseIntense 2.15s ease-in-out infinite !important;
transform-origin:center;
}
/*
0%: gyakorlatilag nincs glow
50%: ~140%-os vizuális fényerő + erősebb piros aura
100%: vissza nullára
*/
@keyframes faqRingPulseIntense{
0%,100%{
opacity:.72;
stroke-width:2.15;
filter:
brightness(.65)
drop-shadow(0 0 0 rgba(169,205,165,0))
drop-shadow(0 0 0 rgba(169,205,165,0));
}
22%{
opacity:.86;
stroke-width:2.35;
filter:
brightness(.95)
drop-shadow(0 0 3px rgba(169,205,165,.22))
drop-shadow(0 0 7px rgba(169,205,165,.10));
}
50%{
opacity:1;
stroke-width:3.05;
filter:
brightness(1.40)
drop-shadow(0 0 8px rgba(169,205,165,.90))
drop-shadow(0 0 18px rgba(169,205,165,.58))
drop-shadow(0 0 30px rgba(169,205,165,.28));
}
78%{
opacity:.88;
stroke-width:2.4;
filter:
brightness(1.00)
drop-shadow(0 0 4px rgba(169,205,165,.28))
drop-shadow(0 0 9px rgba(169,205,165,.12));
}
}
/* A teljes nyílgomb is kap egy nagyon enyhe együtt pulzáló környezeti fényt */
.faq-item.is-open .faq-arrow.ring-pulse{
animation:faqArrowAmbientPulse 2.15s ease-in-out infinite;
}
@keyframes faqArrowAmbientPulse{
0%,100%{
box-shadow:0 0 0 rgba(169,205,165,0) !important;
}
50%{
box-shadow:
0 0 14px rgba(169,205,165,.24),
inset 0 0 8px rgba(169,205,165,.08) !important;
}
}
/* =========================================================
v13 — precízebb GYIK vezérlők
========================================================= */
/* A jobb oldali nyílgomb kicsit beljebb kerül balra */
.faq-toggle{
grid-template-columns:minmax(0,1fr) 72px !important;
column-gap:18px !important;
padding-right:10px !important;
}
.faq-arrow{
justify-self:center !important;
transform:translateX(-8px);
width:46px !important;
height:46px !important;
border:1px solid #353B42 !important;
background:linear-gradient(180deg,#15191E 0%,#111419 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 7px 18px rgba(0,0,0,.18) !important;
transition:
transform .26s cubic-bezier(.16,1,.3,1),
border-color .22s ease,
background .22s ease,
box-shadow .25s ease,
color .22s ease !important;
}
.faq-arrow:hover{
transform:translateX(-8px) scale(1.045) !important;
border-color:#555D65 !important;
background:linear-gradient(180deg,#1A1E24 0%,#14181D 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 9px 22px rgba(0,0,0,.25),
0 0 14px rgba(169,205,165,.05) !important;
}
/* A kör pontosabban középre igazítva */
.faq-ring{
left:50% !important;
top:50% !important;
width:46px !important;
height:46px !important;
transform:translate(-50%,-50%) rotate(-90deg) !important;
}
/*
FONTOS: zárt állapotban, amikor nincs hover, a stroke teljesen eltűnik.
Így nem marad a round linecap miatt apró piros pont.
*/
.faq-item:not(.is-open) .faq-arrow:not(:hover) .faq-ring-progress{
opacity:0 !important;
stroke-dashoffset:125.664 !important;
transition:
stroke-dashoffset .46s cubic-bezier(.18,.78,.18,1),
opacity .10s ease .10s !important;
}
.faq-item:not(.is-open) .faq-arrow:hover .faq-ring-progress{
opacity:1 !important;
stroke-dashoffset:0 !important;
transition:
stroke-dashoffset .52s cubic-bezier(.18,.78,.18,1),
opacity .06s ease !important;
}
/* Nyitott állapotban a kör stabilan teljes és pulzál */
.faq-item.is-open .faq-ring-progress{
opacity:1 !important;
stroke-dashoffset:0 !important;
}
/* A chevron legyen finomabb és centrikusabb */
.faq-arrow i{
width:9px !important;
height:9px !important;
border-right-width:1.8px !important;
border-bottom-width:1.8px !important;
}
/* A kérdéssor vizuálisan precízebb */
.faq-toggle{
border-radius:10px;
transition:
background .22s ease,
padding-left .22s ease !important;
}
.faq-toggle:hover{
background:linear-gradient(90deg,rgba(255,255,255,.018),rgba(255,255,255,0));
padding-left:6px !important;
}
.faq-question{
max-width:760px;
}
/* Nyitott állapot: nagyon enyhe bal oldali piros jelölés */
.faq-item{
position:relative;
}
.faq-item::before{
content:"";
position:absolute;
left:-1px;
top:50%;
width:2px;
height:0;
border-radius:999px;
background:#A9CDA5;
transform:translateY(-50%);
opacity:0;
transition:
height .30s cubic-bezier(.16,1,.3,1),
opacity .20s ease;
}
.faq-item.is-open::before{
height:58%;
opacity:.55;
}
/* Mobilon is beljebb, de ne legyen túl szűk */
@media(max-width:640px){
.faq-toggle{
grid-template-columns:minmax(0,1fr) 58px !important;
padding-right:4px !important;
}
.faq-arrow{
transform:translateX(-4px);
width:43px !important;
height:43px !important;
}
.faq-arrow:hover{
transform:translateX(-4px) scale(1.03) !important;
}
.faq-ring{
width:43px !important;
height:43px !important;
}
}
/* =========================================================
v14 — GYIK szöveg beljebb + animált vissza-a-tetejére gomb
========================================================= */
/* A GYIK kérdésszöveg is kerüljön beljebb */
.faq-toggle{
padding-left:24px !important;
padding-right:12px !important;
}
.faq-question{
padding-left:10px;
}
.faq-answer-inner{
padding-left:34px !important;
padding-right:82px !important;
}
/* Hoverkor ne ugorjon túl nagyot a szöveg, csak finoman mozduljon */
.faq-toggle:hover{
padding-left:28px !important;
}
.faq-toggle:hover .faq-question{
transform:translateX(2px) !important;
}
/* ===== Vissza az oldal tetejére gomb ===== */
.scroll-top-btn{
position:fixed;
right:24px;
bottom:24px;
z-index:180;
width:56px;
height:56px;
padding:0;
border:1px solid #343A41;
border-radius:18px;
background:
linear-gradient(180deg,rgba(28,32,38,.96),rgba(16,19,23,.96));
color:#F3F5F7;
display:grid;
place-items:center;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(18px) scale(.90) rotate(5deg);
box-shadow:
0 14px 34px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.035);
cursor:pointer;
overflow:hidden;
transition:
opacity .30s ease,
visibility 0s linear .30s,
transform .38s cubic-bezier(.16,1,.3,1),
border-color .22s ease,
background .22s ease,
box-shadow .28s ease;
}
/* Akkor jelenik meg, ha lejjebb görgetünk */
.scroll-top-btn.is-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0) scale(1) rotate(0deg);
transition:
opacity .30s ease,
visibility 0s linear 0s,
transform .42s cubic-bezier(.16,1,.3,1),
border-color .22s ease,
background .22s ease,
box-shadow .28s ease;
}
/* Finom piros progress / dekorációs gyűrű */
.scroll-top-ring{
position:absolute;
inset:5px;
border-radius:14px;
border:1px solid rgba(169,205,165,.22);
transition:
inset .30s cubic-bezier(.16,1,.3,1),
border-color .24s ease,
box-shadow .28s ease,
transform .36s cubic-bezier(.16,1,.3,1);
}
.scroll-top-btn::before{
content:"";
position:absolute;
inset:-40%;
background:linear-gradient(
115deg,
transparent 38%,
rgba(255,255,255,.17) 48%,
transparent 58%
);
transform:translateX(-75%) rotate(8deg);
transition:transform .60s cubic-bezier(.16,1,.3,1);
}
/* CSS nyíl */
.scroll-top-arrow{
position:relative;
z-index:2;
width:22px;
height:22px;
display:grid;
place-items:center;
transition:
transform .30s cubic-bezier(.16,1,.3,1),
color .22s ease;
}
.scroll-top-arrow i{
width:10px;
height:10px;
border-left:2px solid currentColor;
border-top:2px solid currentColor;
transform:translateY(3px) rotate(45deg);
}
.scroll-top-arrow::after{
content:"";
position:absolute;
left:50%;
top:9px;
width:2px;
height:13px;
border-radius:999px;
background:currentColor;
transform:translateX(-50%);
}
/* Fancy hover */
.scroll-top-btn:hover,
.scroll-top-btn:focus-visible{
outline:none;
border-color:#A9CDA5;
background:
linear-gradient(180deg,#20252B 0%,#171B20 100%);
transform:translateY(-5px) scale(1.06);
box-shadow:
0 20px 42px rgba(0,0,0,.42),
0 0 0 1px rgba(169,205,165,.24),
0 0 26px rgba(169,205,165,.18),
inset 0 1px 0 rgba(255,255,255,.05);
}
.scroll-top-btn:hover::before,
.scroll-top-btn:focus-visible::before{
transform:translateX(75%) rotate(8deg);
}
.scroll-top-btn:hover .scroll-top-ring,
.scroll-top-btn:focus-visible .scroll-top-ring{
inset:2px;
border-color:rgba(169,205,165,.78);
box-shadow:
0 0 15px rgba(169,205,165,.26),
inset 0 0 10px rgba(169,205,165,.06);
transform:rotate(90deg);
}
.scroll-top-btn:hover .scroll-top-arrow,
.scroll-top-btn:focus-visible .scroll-top-arrow{
color:#FFFFFF;
transform:translateY(-3px);
}
/* Kattintás visszajelzés */
.scroll-top-btn:active{
transform:translateY(-1px) scale(.97);
}
/* Mobil */
@media(max-width:640px){
.faq-toggle{
padding-left:16px !important;
padding-right:4px !important;
}
.faq-question{
padding-left:4px;
}
.faq-answer-inner{
padding-left:20px !important;
padding-right:10px !important;
}
.faq-toggle:hover{
padding-left:16px !important;
}
.scroll-top-btn{
right:16px;
bottom:82px; /* ne ütközzön az alsó mobil CTA-val */
width:52px;
height:52px;
border-radius:16px;
}
}
/* Mozgáscsökkentés */
/* =========================================================
KRIZSÁK FIX & CLEAN — NATURAL / PASTEL EARTH THEME
========================================================= */
:root{
--nature-bg:#F3EFE6;
--nature-paper:#FBF8F1;
--nature-sage:#82957D;
--nature-sage-soft:#DDE4D8;
--nature-forest:#34483A;
--nature-forest-deep:#26362D;
--nature-clay:#A9CDA5;
--nature-clay-dark:#7FA67C;
--nature-sand:#DDD0BD;
--nature-line:#D8D0C3;
--nature-ink:#2E3831;
--nature-muted:#6F756F;
}
/* Alapfelületek */
body{
background:var(--nature-bg) !important;
color:var(--nature-ink) !important;
}
.header{
background:rgba(38,54,45,.94) !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
box-shadow:0 4px 24px rgba(44,57,48,.10) !important;
}
.brand-logo-natural{
display:block;
height:54px;
width:auto;
max-width:200px;
object-fit:contain;
border-radius:10px;
background:#FFFFFF;
padding:4px 8px;
}
.header nav{
color:#F7F4EC !important;
}
.header nav > a:not(.btn)::after,
.header nav > a::after{
background:var(--nature-clay) !important;
}
/* Hero: mély természetes zöld overlay */
.hero .shade,
.shade,
.hero-shade{
background:
linear-gradient(
90deg,
rgba(30,46,37,.94) 0%,
rgba(38,58,46,.82) 48%,
rgba(38,58,46,.24) 100%
) !important;
}
.hero .eyebrow,
.dark .eyebrow,
.eyebrow{
color:#C8D5C0 !important;
}
.hero h1,
.hero p,
.hero .trust,
.hero .trust span{
color:#F8F6F0 !important;
}
/* CTA */
.btn{
background:var(--nature-clay) !important;
border-color:var(--nature-clay) !important;
color:#24392B !important;
box-shadow:0 10px 24px rgba(117,79,59,.14) !important;
}
.btn:hover,
.btn:focus-visible{
border-color:var(--nature-clay-dark) !important;
box-shadow:
0 15px 32px rgba(74,82,71,.16),
0 0 0 1px rgba(169,205,165,.22) !important;
}
.btn.ghost,
.btn-ghost{
background:rgba(250,248,241,.08) !important;
border-color:rgba(250,248,241,.48) !important;
color:#FFFFFF !important;
}
.btn.ghost:hover,
.btn-ghost:hover{
background:rgba(250,248,241,.15) !important;
border-color:#DCEAD9 !important;
}
/* Folyamat */
.steps,
.process,
.intro-strip{
background:#ECE8DE !important;
border-color:var(--nature-line) !important;
}
.stepgrid > div,
.process-grid > div{
color:var(--nature-ink) !important;
}
.stepgrid b,
.process-grid strong{
color:var(--nature-clay-dark) !important;
}
/* Szekciók */
.section,
#szolgaltatasok,
#rolunk{
background:var(--nature-bg) !important;
}
#munkaink,
.dark,
.section-dark{
background:var(--nature-forest-deep) !important;
}
#gyik,
.faqsection,
.faq-wrap{
background:var(--nature-paper) !important;
}
#kapcsolat,
.contact,
.contact-section{
background:var(--nature-sage-soft) !important;
}
.section-head h2,
.about h2,
.contact h2,
.card h3,
.faq-question{
color:var(--nature-ink) !important;
}
.dark .section-head h2,
.dark .section-head p,
#munkaink .section-head h2,
#munkaink .section-head p{
color:#F4F1EA !important;
}
.section-head p,
.about p,
.contact p,
.card p,
.faq-answer-inner p{
color:var(--nature-muted) !important;
}
/* Szolgáltatáskártyák */
#szolgaltatasok .grid3{
gap:20px !important;
}
#szolgaltatasok .grid3 > .card{
background:var(--nature-paper) !important;
border-color:var(--nature-line) !important;
box-shadow:0 12px 34px rgba(58,70,60,.06) !important;
}
#szolgaltatasok .grid3 > .card:hover{
background:#FFFDF8 !important;
border-color:var(--nature-clay) !important;
box-shadow:
0 18px 42px rgba(72,82,72,.12),
0 0 0 1px rgba(169,205,165,.22) !important;
}
#szolgaltatasok .grid3 > .card::before{
background:var(--nature-clay) !important;
}
#szolgaltatasok .grid3 > .card::after{
border-color:transparent;
}
#szolgaltatasok .grid3 > .card:hover::after{
border-color:rgba(169,205,165,.60) !important;
box-shadow:0 0 20px rgba(169,205,165,.12) !important;
}
#szolgaltatasok .grid3 > .card:hover > img{
outline-color:var(--nature-clay) !important;
}
/* Az alsó három hangsúlyosabb, szélesebb kártya */
#szolgaltatasok .featured-service{
grid-column:span 1;
}
@media(min-width:980px){
#szolgaltatasok .grid3{
grid-template-columns:repeat(6,1fr) !important;
}
#szolgaltatasok .grid3 > .card:nth-child(-n+3){
grid-column:span 2;
}
#szolgaltatasok .grid3 > .featured-service{
grid-column:span 2;
}
}
/* Page divider természetes színek */
.page-divider,
.page-divider.page-divider-dark{
background:#E8E4DA !important;
border-color:var(--nature-line) !important;
}
.page-divider::before{
background:var(--nature-clay) !important;
}
.page-divider span{
color:var(--nature-clay-dark) !important;
}
.page-divider strong{
color:var(--nature-forest) !important;
}
.page-divider i{
background:linear-gradient(90deg,#B7B7AC 0%,#C8C4B9 72%,transparent 100%) !important;
}
/* GYIK */
.faq-accordion{
border-color:var(--nature-line) !important;
}
.faq-item{
border-color:var(--nature-line) !important;
}
.faq-item:hover{
background:rgba(130,149,125,.055) !important;
}
.faq-item.is-open{
background:#F5F2EA !important;
}
.faq-item::before{
background:var(--nature-clay) !important;
}
.faq-toggle{
color:var(--nature-ink) !important;
}
.faq-arrow{
background:#F1EDE4 !important;
border-color:#C8C2B7 !important;
color:var(--nature-forest) !important;
box-shadow:0 6px 16px rgba(61,72,63,.07) !important;
}
.faq-arrow:hover{
background:#FBF8F1 !important;
border-color:var(--nature-clay) !important;
}
.faq-ring-progress{
stroke:var(--nature-clay) !important;
}
.faq-item.is-open .faq-arrow{
color:var(--nature-clay-dark) !important;
}
@keyframes faqRingPulseIntense{
0%,100%{
opacity:.70;
stroke-width:2.15;
filter:
brightness(.65)
drop-shadow(0 0 0 rgba(169,205,165,0));
}
50%{
opacity:1;
stroke-width:3;
filter:
brightness(1.40)
drop-shadow(0 0 8px rgba(169,205,165,.60))
drop-shadow(0 0 18px rgba(169,205,165,.26));
}
}
/* Kapcsolat */
.contactlist a,
.contact-options a,
.contact-card{
background:rgba(255,253,248,.74) !important;
border-color:#CBC9BF !important;
color:var(--nature-ink) !important;
box-shadow:0 9px 24px rgba(54,70,57,.06) !important;
}
.contactlist a:hover,
.contact-options a:hover,
.contact-card:hover{
border-color:var(--nature-clay) !important;
background:#FFFDF8 !important;
box-shadow:
0 16px 32px rgba(60,74,61,.11),
0 0 0 1px rgba(169,205,165,.18) !important;
}
.contact-icon{
background:var(--nature-forest) !important;
}
.contact-card:hover .contact-icon{
background:var(--nature-clay-dark) !important;
}
/* Rólunk */
.about .portrait,
.portrait{
border-radius:22px;
box-shadow:0 18px 44px rgba(48,63,51,.10);
}
/* Modal */
.modal .panel,
.modal .modal-panel{
background:var(--nature-paper) !important;
color:var(--nature-ink) !important;
border:1px solid var(--nature-line);
}
.modal .panel::before,
.modal .modal-panel::before{
background:var(--nature-clay) !important;
}
/* Footer */
footer,
.site-footer{
background:var(--nature-forest-deep) !important;
color:#EDE9E0 !important;
}
footer a,
footer p,
footer span,
.site-footer a,
.site-footer p,
.site-footer span{
color:#C9D0C8 !important;
}
.rights-reserved{
color:#B8D8B4 !important;
}
/* Vissza a tetejére */
.scroll-top-btn{
background:linear-gradient(180deg,#405645,#314537) !important;
border-color:#637764 !important;
color:#F7F4ED !important;
}
.scroll-top-ring{
border-color:rgba(184,216,180,.40) !important;
}
.scroll-top-btn:hover{
border-color:var(--nature-clay) !important;
box-shadow:
0 16px 34px rgba(41,56,45,.20),
0 0 0 1px rgba(169,205,165,.20),
0 0 22px rgba(169,205,165,.14) !important;
}
.scroll-top-btn:hover .scroll-top-ring{
border-color:var(--nature-clay) !important;
box-shadow:0 0 12px rgba(169,205,165,.20) !important;
}
/* Mobil */
@media(max-width:850px){
.header nav{
background:var(--nature-forest-deep) !important;
}
}
@media(max-width:640px){
.brand-logo-natural{
height:46px;
max-width:165px;
}
}
/* =========================================================
NATURAL GREEN v2 — minden meleg narancs/piros accent helyett
világos pasztellzöld
========================================================= */
:root{
--nature-accent:#A9CDA5;
--nature-accent-hover:#BCDDB8;
--nature-accent-deep:#769A74;
--nature-accent-soft:#E4F0E2;
}
/* Fő CTA-k: pasztell zöld, sötétzöld tipográfiával */
.btn{
background:var(--nature-accent) !important;
border-color:var(--nature-accent) !important;
color:#263B2C !important;
box-shadow:0 10px 25px rgba(88,119,87,.12) !important;
}
.btn:hover,
.btn:focus-visible{
background:var(--nature-accent-hover) !important;
border-color:var(--nature-accent-deep) !important;
color:#1E3426 !important;
box-shadow:
0 16px 32px rgba(75,104,76,.15),
0 0 0 1px rgba(127,166,124,.20),
0 0 24px rgba(169,205,165,.18) !important;
}
/* A fejléc animált aláhúzásai is zöldek */
.header nav > a::after,
.header nav > a:not(.btn)::after{
background:var(--nature-accent-hover) !important;
box-shadow:0 0 10px rgba(169,205,165,.22) !important;
}
/* Szekciójelölések */
.page-divider::before,
#szolgaltatasok .grid3 > .card::before,
.faq-item::before,
.modal .panel::before,
.modal .modal-panel::before{
background:var(--nature-accent) !important;
}
.page-divider span{
color:var(--nature-accent-deep) !important;
}
/* Szolgáltatáskártya hover */
#szolgaltatasok .grid3 > .card:hover{
border-color:var(--nature-accent) !important;
box-shadow:
0 18px 42px rgba(72,92,73,.11),
0 0 0 1px rgba(169,205,165,.30) !important;
}
#szolgaltatasok .grid3 > .card:hover::after{
border-color:rgba(169,205,165,.78) !important;
box-shadow:0 0 22px rgba(169,205,165,.17) !important;
}
#szolgaltatasok .grid3 > .card:hover > img{
outline-color:var(--nature-accent) !important;
}
/* GYIK gyűrű és nyitott állapot */
.faq-ring-progress{
stroke:var(--nature-accent-deep) !important;
}
.faq-item.is-open .faq-arrow{
color:var(--nature-accent-deep) !important;
}
.faq-arrow:hover{
border-color:var(--nature-accent) !important;
box-shadow:0 0 15px rgba(169,205,165,.14) !important;
}
/* Kapcsolati kártyák */
.contactlist a:hover,
.contact-options a:hover,
.contact-card:hover{
border-color:var(--nature-accent) !important;
box-shadow:
0 16px 32px rgba(60,78,62,.10),
0 0 0 1px rgba(169,205,165,.25) !important;
}
.contact-card:hover .contact-icon{
background:var(--nature-accent-deep) !important;
}
/* Footer jogi kiemelés */
.rights-reserved{
color:#B9D8B5 !important;
}
/* Scroll-to-top */
.scroll-top-ring{
border-color:rgba(169,205,165,.45) !important;
}
.scroll-top-btn:hover{
border-color:var(--nature-accent) !important;
box-shadow:
0 16px 34px rgba(41,56,45,.18),
0 0 0 1px rgba(169,205,165,.24),
0 0 22px rgba(169,205,165,.18) !important;
}
.scroll-top-btn:hover .scroll-top-ring{
border-color:var(--nature-accent-hover) !important;
box-shadow:0 0 14px rgba(169,205,165,.24) !important;
}
/* A képeket finoman egységesítjük a természetes arculathoz */
.hero > img,
#szolgaltatasok .card img,
.works img,
.portrait{
filter:saturate(.88) contrast(.98) brightness(1.015);
}
/* =========================================================
v3 — SZOLGÁLTATÁS CAROUSEL + LIGHT / DARK THEME SWITCH
========================================================= */
/* ---------- Header: theme toggle ---------- */
.navrow{
gap:18px;
}
.theme-toggle{
position:relative;
display:inline-flex;
align-items:center;
gap:9px;
padding:0;
border:0;
background:transparent;
color:#F5F3EC;
cursor:pointer;
font:inherit;
flex:0 0 auto;
}
.theme-toggle-label{
font-size:11px;
font-weight:800;
letter-spacing:.10em;
text-transform:uppercase;
opacity:.74;
transition:opacity .2s ease;
}
.theme-toggle:hover .theme-toggle-label{
opacity:1;
}
.theme-toggle-track{
position:relative;
width:54px;
height:30px;
border-radius:999px;
border:1px solid rgba(255,255,255,.20);
background:rgba(255,255,255,.10);
box-shadow:inset 0 1px 4px rgba(0,0,0,.14);
transition:
background .34s ease,
border-color .34s ease,
box-shadow .34s ease;
}
.theme-toggle-thumb{
position:absolute;
left:3px;
top:3px;
width:22px;
height:22px;
border-radius:50%;
display:grid;
place-items:center;
background:#F4EFCF;
color:#5B674D;
box-shadow:
0 4px 10px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.55);
transition:
transform .42s cubic-bezier(.16,1,.3,1),
background .34s ease,
color .34s ease,
box-shadow .34s ease;
}
.theme-icon{
position:absolute;
width:14px;
height:14px;
fill:none;
stroke:currentColor;
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
transition:
opacity .24s ease,
transform .38s cubic-bezier(.16,1,.3,1);
}
.theme-icon-sun{
opacity:1;
transform:rotate(0deg) scale(1);
}
.theme-icon-moon{
opacity:0;
transform:rotate(-40deg) scale(.55);
}
.theme-toggle:hover .theme-toggle-thumb{
transform:translateX(2px) scale(1.04);
}
html[data-theme="dark"] .theme-toggle-track{
background:#25362D;
border-color:#4E6555;
box-shadow:
inset 0 1px 5px rgba(0,0,0,.30),
0 0 18px rgba(142,178,144,.08);
}
html[data-theme="dark"] .theme-toggle-thumb{
transform:translateX(24px);
background:#DDE8DF;
color:#314537;
box-shadow:
0 5px 13px rgba(0,0,0,.30),
0 0 14px rgba(196,220,199,.12);
}
html[data-theme="dark"] .theme-toggle:hover .theme-toggle-thumb{
transform:translateX(22px) scale(1.04);
}
html[data-theme="dark"] .theme-icon-sun{
opacity:0;
transform:rotate(45deg) scale(.55);
}
html[data-theme="dark"] .theme-icon-moon{
opacity:1;
transform:rotate(0deg) scale(1);
}
/* ---------- Services carousel ---------- */
.services-carousel{
position:relative;
margin-top:8px;
}
.carousel-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
}
.carousel-status{
display:flex;
align-items:baseline;
gap:7px;
font-variant-numeric:tabular-nums;
}
.carousel-current{
color:var(--nature-accent-deep);
font-size:22px;
line-height:1;
font-weight:850;
letter-spacing:-.02em;
}
.carousel-separator,
.carousel-total{
color:var(--nature-muted);
font-size:12px;
font-weight:700;
letter-spacing:.08em;
}
.carousel-controls{
display:flex;
align-items:center;
gap:9px;
}
.carousel-arrow{
position:relative;
width:44px;
height:44px;
border-radius:50%;
display:grid;
place-items:center;
border:1px solid var(--nature-line);
background:var(--nature-paper);
color:var(--nature-forest);
cursor:pointer;
overflow:hidden;
box-shadow:0 8px 22px rgba(56,73,59,.06);
transition:
transform .24s cubic-bezier(.16,1,.3,1),
background .22s ease,
border-color .22s ease,
color .22s ease,
box-shadow .26s ease;
}
.carousel-arrow svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.carousel-arrow::before{
content:"";
position:absolute;
inset:4px;
border-radius:50%;
border:1px solid transparent;
transform:scale(.78);
transition:
transform .28s cubic-bezier(.16,1,.3,1),
border-color .22s ease;
}
.carousel-arrow:hover,
.carousel-arrow:focus-visible{
outline:none;
transform:translateY(-3px);
background:var(--nature-accent-soft);
border-color:var(--nature-accent);
color:var(--nature-forest-deep);
box-shadow:
0 12px 26px rgba(56,73,59,.10),
0 0 0 4px rgba(169,205,165,.12);
}
.carousel-arrow:hover::before,
.carousel-arrow:focus-visible::before{
transform:scale(1);
border-color:rgba(127,166,124,.40);
}
.carousel-prev:hover svg{
transform:translateX(-2px);
}
.carousel-next:hover svg{
transform:translateX(2px);
}
.carousel-arrow:disabled{
opacity:.34;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
.carousel-shell{
position:relative;
}
.carousel-viewport{
overflow:hidden;
border-radius:26px;
padding:8px 6px 14px;
margin:0 -6px;
touch-action:pan-y;
}
.carousel-track{
--carousel-gap:20px;
display:flex !important;
gap:var(--carousel-gap) !important;
transition:transform .58s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
/* A régi grid szabályok felülírása */
#szolgaltatasok .carousel-track > .card,
#szolgaltatasok .carousel-track > .featured-service,
#szolgaltatasok .grid3 > .featured-service{
flex:0 0 calc((100% - (var(--carousel-gap) * 2)) / 3) !important;
width:auto !important;
grid-column:auto !important;
min-width:0;
}
#szolgaltatasok .carousel-track > .card{
background:var(--nature-paper) !important;
}
.carousel-bottom{
min-height:42px;
margin-top:16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.carousel-dots{
display:flex;
align-items:center;
gap:8px;
}
.carousel-dot{
width:7px;
height:7px;
padding:0;
border:0;
border-radius:999px;
background:#C8D0C4;
cursor:pointer;
transition:
width .30s cubic-bezier(.16,1,.3,1),
transform .22s ease,
background .22s ease,
box-shadow .22s ease;
}
.carousel-dot:hover,
.carousel-dot:focus-visible{
outline:none;
transform:scale(1.25);
background:var(--nature-accent-deep);
}
.carousel-dot.is-active{
width:28px;
background:var(--nature-accent-deep);
box-shadow:0 4px 12px rgba(91,124,91,.16);
}
.carousel-hint{
color:var(--nature-muted);
font-size:11px;
letter-spacing:.025em;
}
/* ---------- DARK THEME ---------- */
html[data-theme="dark"]{
color-scheme:dark;
}
html[data-theme="dark"] body{
background:#151A16 !important;
color:#E9EEE9 !important;
}
html[data-theme="dark"] .header{
background:rgba(25,35,29,.96) !important;
border-bottom-color:#33453A !important;
}
html[data-theme="dark"] .section,
html[data-theme="dark"] #szolgaltatasok,
html[data-theme="dark"] #rolunk{
background:#151A16 !important;
}
html[data-theme="dark"] #gyik,
html[data-theme="dark"] .faqsection,
html[data-theme="dark"] .faq-wrap{
background:#19201B !important;
}
html[data-theme="dark"] #kapcsolat,
html[data-theme="dark"] .contact,
html[data-theme="dark"] .contact-section{
background:#1E2A22 !important;
}
html[data-theme="dark"] .steps,
html[data-theme="dark"] .process,
html[data-theme="dark"] .intro-strip{
background:#1A211C !important;
border-color:#344139 !important;
}
html[data-theme="dark"] .stepgrid > div,
html[data-theme="dark"] .process-grid > div{
color:#E9EEE9 !important;
border-color:#344139 !important;
}
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .about h2,
html[data-theme="dark"] .contact h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .faq-question{
color:#F0F4F0 !important;
}
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .about p,
html[data-theme="dark"] .contact p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .faq-answer-inner p,
html[data-theme="dark"] .carousel-hint,
html[data-theme="dark"] .carousel-separator,
html[data-theme="dark"] .carousel-total{
color:#AAB6AD !important;
}
html[data-theme="dark"] #szolgaltatasok .carousel-track > .card{
background:#1C241E !important;
border-color:#36443A !important;
box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}
html[data-theme="dark"] #szolgaltatasok .carousel-track > .card:hover{
background:#202B23 !important;
border-color:#8DB38B !important;
}
html[data-theme="dark"] .carousel-arrow{
background:#1C241E;
border-color:#3A493F;
color:#DDE8DF;
}
html[data-theme="dark"] .carousel-arrow:hover{
background:#26342B;
border-color:#90B58E;
color:#F0F5F0;
}
html[data-theme="dark"] .carousel-dot{
background:#45584A;
}
html[data-theme="dark"] .carousel-dot.is-active{
background:#A9CDA5;
}
html[data-theme="dark"] .page-divider,
html[data-theme="dark"] .page-divider.page-divider-dark{
background:#1A211C !important;
border-color:#35423A !important;
}
html[data-theme="dark"] .page-divider strong{
color:#D8E2D9 !important;
}
html[data-theme="dark"] .faq-item{
border-color:#344139 !important;
}
html[data-theme="dark"] .faq-item:hover{
background:rgba(169,205,165,.035) !important;
}
html[data-theme="dark"] .faq-item.is-open{
background:#1E2721 !important;
}
html[data-theme="dark"] .faq-arrow{
background:#1B241E !important;
border-color:#3B4B40 !important;
color:#DDE7DD !important;
}
html[data-theme="dark"] .contactlist a,
html[data-theme="dark"] .contact-options a,
html[data-theme="dark"] .contact-card{
background:#1C261F !important;
border-color:#3A493E !important;
color:#E9EFEA !important;
}
html[data-theme="dark"] .modal .panel,
html[data-theme="dark"] .modal .modal-panel{
background:#1B231D !important;
color:#EAF0EA !important;
border-color:#3C4B40 !important;
}
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer{
background:#101511 !important;
}
html[data-theme="dark"] .scroll-top-btn{
background:linear-gradient(180deg,#2C3B31,#202B24) !important;
}
@media(max-width:900px){
#szolgaltatasok .carousel-track > .card,
#szolgaltatasok .carousel-track > .featured-service{
flex-basis:calc((100% - var(--carousel-gap)) / 2) !important;
}
.theme-toggle-label{
display:none;
}
}
@media(max-width:640px){
#szolgaltatasok .carousel-track > .card,
#szolgaltatasok .carousel-track > .featured-service{
flex-basis:100% !important;
}
.carousel-topline{
margin-bottom:12px;
}
.carousel-bottom{
align-items:flex-start;
flex-direction:column;
gap:10px;
}
.carousel-hint{
display:none;
}
.carousel-arrow{
width:42px;
height:42px;
}
.theme-toggle-track{
width:50px;
height:28px;
}
.theme-toggle-thumb{
width:20px;
height:20px;
}
html[data-theme="dark"] .theme-toggle-thumb{
transform:translateX(22px);
}
}
/* =========================================================
HERO v2 — név + kézírásos mottó
========================================================= */
.hero h1{
max-width:none !important;
font-size:clamp(52px,7vw,96px) !important;
line-height:.98 !important;
letter-spacing:-.05em !important;
margin-bottom:10px !important;
}
.hero-motto{
display:inline-block;
width:max-content;
margin:0 0 24px 2px;
font-family:"Segoe Print","Bradley Hand","Snell Roundhand","Apple Chancery","URW Chancery L",cursive;
font-size:clamp(31px,3.8vw,52px);
line-height:1;
font-weight:600;
font-style:italic;
letter-spacing:.01em;
color:#BDDDB9;
text-shadow:0 2px 16px rgba(110,150,112,.12);
transform:rotate(-1.2deg);
}
.hero-value{
max-width:650px;
margin:0 !important;
color:#F8F6F0 !important;
font-size:clamp(17px,1.65vw,20px) !important;
line-height:1.55 !important;
font-weight:500;
}
/* Dark témában is természetes pasztellzöld marad a mottó */
html[data-theme="dark"] .hero-motto{
color:#C7E2C3;
text-shadow:0 3px 18px rgba(154,194,156,.16);
}
@media(max-width:640px){
.hero h1{
font-size:48px !important;
}
.hero-motto{
font-size:36px;
margin-bottom:20px;
}
.hero-value{
font-size:17px !important;
}
}
/* =========================================================
HERO v3 — spacing, idézett mottó, kiemelt értékajánlat lent
========================================================= */
/* A márkanév kapjon kb. +5px betűközt */
.hero h1{
letter-spacing:5px !important;
}
/*
A mottó középtájon marad, de jobbra zárt.
Egy keskenyebb blokkban ül a cím alatt.
*/
.hero-motto{
width:min(78%, 560px);
margin:4px 0 26px auto !important;
text-align:right;
padding-right:4px;
font-size:clamp(31px,3.8vw,52px);
}
/* Az alsó figyelemfelkeltő mondat */
.hero-value-highlight{
display:inline-block;
width:max-content;
max-width:100%;
margin-top:30px !important;
padding:11px 16px 12px;
border-left:3px solid #A9CDA5;
border-radius:0 12px 12px 0;
background:linear-gradient(
90deg,
rgba(169,205,165,.17) 0%,
rgba(169,205,165,.08) 58%,
rgba(169,205,165,0) 100%
);
color:#F8F6F0 !important;
font-size:clamp(18px,1.8vw,22px) !important;
line-height:1.45 !important;
font-weight:700 !important;
letter-spacing:.01em;
text-shadow:0 2px 12px rgba(0,0,0,.12);
animation:heroValueIn .75s cubic-bezier(.16,1,.3,1) both;
animation-delay:.18s;
}
@keyframes heroValueIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}
html[data-theme="dark"] .hero-value-highlight{
border-left-color:#BDDDB9;
background:linear-gradient(
90deg,
rgba(189,221,185,.16) 0%,
rgba(189,221,185,.07) 58%,
rgba(189,221,185,0) 100%
);
}
@media(max-width:640px){
.hero h1{
letter-spacing:2.5px !important;
}
.hero-motto{
width:92%;
margin-left:auto !important;
margin-right:0 !important;
text-align:right;
padding-right:0;
}
.hero-value-highlight{
width:100%;
margin-top:24px !important;
padding:10px 13px 11px;
font-size:17px !important;
}
}
/* =========================================================
v4 — REFERENCIA CAROUSEL (1 kép / oldal) + HERO IDLE SHINE
========================================================= */
/* ---------- Referencia carousel ---------- */
.reference-carousel{
position:relative;
max-width:1080px;
margin:0 auto;
}
.reference-carousel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
}
.reference-counter{
display:flex;
align-items:baseline;
gap:7px;
color:#C8D5C0;
font-variant-numeric:tabular-nums;
}
.reference-current{
font-size:24px;
font-weight:850;
color:#BDDDB9;
}
.reference-total{
font-size:12px;
opacity:.72;
}
.reference-controls{
display:flex;
gap:9px;
}
.reference-arrow{
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(220,234,220,.22);
background:rgba(255,255,255,.045);
color:#EEF4EE;
display:grid;
place-items:center;
cursor:pointer;
transition:
transform .24s cubic-bezier(.16,1,.3,1),
background .22s ease,
border-color .22s ease,
box-shadow .26s ease;
}
.reference-arrow svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .24s cubic-bezier(.16,1,.3,1);
}
.reference-arrow:hover,
.reference-arrow:focus-visible{
outline:none;
transform:translateY(-3px);
background:rgba(189,221,185,.10);
border-color:#BDDDB9;
box-shadow:0 0 0 4px rgba(189,221,185,.08);
}
.reference-prev:hover svg{ transform:translateX(-2px); }
.reference-next:hover svg{ transform:translateX(2px); }
.reference-arrow:disabled{
opacity:.30;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
.reference-viewport{
overflow:hidden;
border-radius:28px;
}
.reference-track{
display:flex;
transition:transform .66s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
.reference-slide{
flex:0 0 100%;
min-width:100%;
margin:0;
}
.reference-image-wrap{
position:relative;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:26px;
background:#1C2B21;
border:1px solid rgba(220,234,220,.13);
box-shadow:0 20px 58px rgba(0,0,0,.20);
}
.reference-image-wrap::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(
180deg,
rgba(0,0,0,0) 62%,
rgba(13,30,20,.20) 100%
);
}
.reference-slide img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
filter:saturate(.92) contrast(.99);
transform:scale(1.002);
transition:
transform .65s cubic-bezier(.16,1,.3,1),
filter .40s ease;
}
.reference-slide:hover img{
transform:scale(1.025);
filter:saturate(.98) contrast(1.01);
}
.reference-slide figcaption{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:28px;
padding:15px 4px 2px;
color:#E8EFE8;
}
.reference-slide figcaption strong{
font-size:16px;
font-weight:750;
}
.reference-slide figcaption span{
color:#AFC0B0;
font-size:12px;
text-align:right;
}
.reference-dots{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:22px;
}
.reference-dot{
width:8px;
height:8px;
padding:0;
border:0;
border-radius:999px;
background:rgba(220,234,220,.24);
cursor:pointer;
transition:
width .30s cubic-bezier(.16,1,.3,1),
background .22s ease,
transform .22s ease,
box-shadow .22s ease;
}
.reference-dot:hover,
.reference-dot:focus-visible{
outline:none;
transform:scale(1.22);
background:#BDDDB9;
}
.reference-dot.is-active{
width:30px;
background:#BDDDB9;
box-shadow:0 5px 14px rgba(189,221,185,.12);
}
/* ---------- Hero idle csillogás ---------- */
.brand-idle-shine{
position:relative;
display:inline-block;
isolation:isolate;
}
.brand-idle-shine::after{
content:attr(data-title);
position:absolute;
inset:0;
pointer-events:none;
color:transparent;
-webkit-text-fill-color:transparent;
background:
linear-gradient(
110deg,
transparent 0%,
transparent 38%,
rgba(255,255,255,.12) 44%,
rgba(224,244,220,.95) 50%,
rgba(255,255,255,.18) 56%,
transparent 62%,
transparent 100%
);
background-size:240% 100%;
background-position:140% 0;
-webkit-background-clip:text;
background-clip:text;
opacity:0;
mix-blend-mode:screen;
}
.brand-idle-shine.idle-shine-active::after{
opacity:1;
animation:brandIdleShine 1.15s cubic-bezier(.22,.72,.2,1) both;
}
@keyframes brandIdleShine{
0%{
background-position:140% 0;
opacity:0;
}
10%{
opacity:.84;
}
85%{
opacity:.72;
}
100%{
background-position:-120% 0;
opacity:0;
}
}
@media(max-width:640px){
.reference-image-wrap{
aspect-ratio:4/3;
border-radius:20px;
}
.reference-viewport{
border-radius:20px;
}
.reference-slide figcaption{
flex-direction:column;
gap:5px;
padding-top:12px;
}
.reference-slide figcaption span{
text-align:left;
}
.reference-arrow{
width:42px;
height:42px;
}
}
/* =========================================================
v5 — Főcím shine: BALRÓL JOBBRA, mint a gombok fénycsíkja
3–5 mp szünetekkel
========================================================= */
.brand-idle-shine{
position:relative;
display:inline-block;
overflow:visible;
}
/* A szöveg fölötti fényréteg */
.brand-idle-shine::after{
content:attr(data-title);
position:absolute;
inset:0;
pointer-events:none;
color:transparent;
-webkit-text-fill-color:transparent;
/* keskenyebb, gomb-hoverhez hasonló fénycsík */
background:
linear-gradient(
112deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,.10) 44%,
rgba(238,255,235,.98) 50%,
rgba(255,255,255,.16) 56%,
transparent 60%,
transparent 100%
);
background-size:220% 100%;
background-position:-135% 0; /* BAL oldalról indul */
-webkit-background-clip:text;
background-clip:text;
opacity:0;
mix-blend-mode:screen;
}
/* Csak az aktív pillanatban fut le */
.brand-idle-shine.idle-shine-active::after{
opacity:1;
animation:brandIdleShineLeftToRight 1.05s cubic-bezier(.18,.72,.22,1) both;
}
@keyframes brandIdleShineLeftToRight{
0%{
background-position:-135% 0;
opacity:0;
}
9%{
opacity:.92;
}
86%{
opacity:.78;
}
100%{
background-position:135% 0; /* JOBB oldalra fut ki */
opacity:0;
}
}
/* =========================================================
v6 — JAVÍTOTT, ROBUSZTUS FŐCÍM-SHINE
A fénycsík nem background-positionnel, hanem valódi
második szövegréteg clip-path animációjával fut balról jobbra.
========================================================= */
.brand-idle-shine::after,
.brand-idle-shine::before{
content:none !important;
display:none !important;
animation:none !important;
}
.brand-idle-shine{
position:relative !important;
display:inline-block !important;
isolation:isolate;
}
.brand-title-base,
.brand-title-glint{
display:block;
font:inherit;
letter-spacing:inherit;
line-height:inherit;
}
.brand-title-base{
position:relative;
z-index:1;
}
.brand-title-glint{
position:absolute;
inset:0;
z-index:2;
color:#F2FFE9;
pointer-events:none;
opacity:0;
/* Keskeny, enyhén ferde fénycsík a szövegen. */
clip-path:polygon(
-30% 0%,
-12% 0%,
-22% 100%,
-40% 100%
);
filter:
brightness(1.18)
drop-shadow(0 0 5px rgba(220,245,215,.42));
}
.brand-idle-shine.idle-shine-active .brand-title-glint{
animation:brandTitleGlintSweep .95s cubic-bezier(.20,.72,.18,1) both;
}
@keyframes brandTitleGlintSweep{
0%{
opacity:0;
clip-path:polygon(
-30% 0%,
-12% 0%,
-22% 100%,
-40% 100%
);
}
10%{
opacity:.95;
}
88%{
opacity:.95;
}
100%{
opacity:0;
clip-path:polygon(
140% 0%,
158% 0%,
148% 100%,
130% 100%
);
}
}
html[data-theme="dark"] .brand-title-glint{
color:#E6FFDF;
filter:
brightness(1.22)
drop-shadow(0 0 6px rgba(198,231,193,.48));
}
/* =========================================================
v7 — lassabb (kb. 2 mp), intenzívebb főcím shine
========================================================= */
.brand-title-glint{
color:#F6FFF1 !important;
opacity:0;
/* szélesebb, erősebb fénycsík */
clip-path:polygon(
-34% 0%,
-8% 0%,
-20% 100%,
-46% 100%
);
filter:
brightness(1.55)
drop-shadow(0 0 5px rgba(240,255,235,.70))
drop-shadow(0 0 12px rgba(205,238,200,.42)) !important;
}
.brand-idle-shine.idle-shine-active .brand-title-glint{
animation:brandTitleGlintSweepStrong 2s cubic-bezier(.18,.70,.18,1) both !important;
}
@keyframes brandTitleGlintSweepStrong{
0%{
opacity:0;
clip-path:polygon(
-34% 0%,
-8% 0%,
-20% 100%,
-46% 100%
);
}
8%{
opacity:1;
}
50%{
opacity:1;
filter:
brightness(1.72)
drop-shadow(0 0 7px rgba(244,255,240,.85))
drop-shadow(0 0 16px rgba(205,238,200,.52));
}
90%{
opacity:1;
}
100%{
opacity:0;
clip-path:polygon(
146% 0%,
172% 0%,
160% 100%,
134% 100%
);
}
}
html[data-theme="dark"] .brand-title-glint{
color:#EEFFE8 !important;
filter:
brightness(1.65)
drop-shadow(0 0 6px rgba(229,255,224,.78))
drop-shadow(0 0 15px rgba(188,226,185,.46)) !important;
}
/* =========================================================
v8 — főcím shine: 5 másodperces áthaladás
========================================================= */
.brand-idle-shine.idle-shine-active .brand-title-glint{
animation:brandTitleGlintSweepStrong 5s linear both !important;
}
/* =========================================================
v11 — működő shine finomhangolás
5 mp • ease-in-out • keskenyebb sáv • balról jobbra
========================================================= */
.brand-title-glint{
/* Az eredeti működő clip-path megoldást használjuk. */
clip-path:polygon(
-24% 0%,
-12% 0%,
-20% 100%,
-32% 100%
) !important;
color:#F7FFF2 !important;
filter:
brightness(1.62)
drop-shadow(0 0 5px rgba(242,255,238,.74))
drop-shadow(0 0 11px rgba(204,238,201,.38)) !important;
}
/* ease-in-out: eleje/vége lassabb, középen gyorsabb */
.brand-idle-shine.idle-shine-active .brand-title-glint{
animation:brandTitleShineV11 5s cubic-bezier(.42,0,.58,1) both !important;
}
@keyframes brandTitleShineV11{
0%{
opacity:0;
clip-path:polygon(
-24% 0%,
-12% 0%,
-20% 100%,
-32% 100%
);
}
5%{
opacity:1;
}
50%{
opacity:1;
filter:
brightness(1.76)
drop-shadow(0 0 7px rgba(246,255,242,.86))
drop-shadow(0 0 14px rgba(205,239,201,.45));
}
95%{
opacity:1;
}
100%{
opacity:0;
clip-path:polygon(
132% 0%,
144% 0%,
136% 100%,
124% 100%
);
}
}
html[data-theme="dark"] .brand-title-glint{
color:#EEFFE8 !important;
filter:
brightness(1.70)
drop-shadow(0 0 6px rgba(232,255,227,.80))
drop-shadow(0 0 13px rgba(190,228,187,.42)) !important;
}
/* =========================================================
v12 — header spacing + logó teljesen balra
========================================================= */
/* A header kap kb. 20 px felső belső teret */
.header{
padding-top:20px !important;
padding-bottom:14px !important;
}
/*
A fejléc belső sora ne a középre zárt container szerint induljon:
a logó egészen a viewport bal szélére kerül.
*/
.header .navrow,
.header .container.navrow{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:24px !important;
height:auto !important;
min-height:62px;
}
/* A márkajel ténylegesen érjen ki a bal sarokhoz */
.header .brand{
margin-left:0 !important;
padding-left:0 !important;
flex:0 0 auto;
}
.header .brand-logo-natural{
margin-left:0 !important;
border-radius:0 12px 12px 0 !important;
}
/* Mobil menü a megnövelt header alatt nyíljon ki, ne fix pixelértékről */
@media(max-width:850px){
.header nav{
top:100% !important;
}
}
@media(max-width:640px){
.header{
padding-top:20px !important;
padding-bottom:12px !important;
}
.header .navrow,
.header .container.navrow{
padding-right:14px !important;
}
.header .brand-logo-natural{
border-radius:0 10px 10px 0 !important;
}
}
/* =========================================================
v13 — mobil navigáció középre + GYIK ring javítás
========================================================= */
@media(max-width:850px){
.header nav{
position:absolute !important;
top:100% !important;
left:0 !important;
right:0 !important;
display:none;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:22px 18px 26px !important;
background:var(--nature-forest-deep) !important;
border-top:1px solid rgba(255,255,255,.07) !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
box-shadow:0 18px 36px rgba(26,39,30,.14) !important;
}
.header nav.open{
display:flex !important;
}
.header nav > a{
width:auto !important;
max-width:100% !important;
margin:0 auto !important;
text-align:center !important;
justify-content:center !important;
align-self:center !important;
}
.header nav > a:not(.btn){
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:40px;
padding:8px 10px !important;
}
.header nav > a.btn{
width:auto !important;
min-width:150px;
margin-top:2px !important;
padding-left:20px !important;
padding-right:20px !important;
}
.theme-toggle{
margin-left:auto;
}
}
@media(max-width:640px){
.header nav{
padding-top:20px !important;
padding-bottom:24px !important;
}
.header nav > a{
font-size:15px;
}
}
/* =========================================================
GYIK — stabil, szabályos körberajzoló hover + nyitott pulzus
========================================================= */
/* A pseudo megoldások kikapcsolása, csak az SVG kör dolgozik */
.faq-arrow::before,
.faq-arrow::after{
content:none !important;
display:none !important;
}
/* Pontos, szabályos kör */
.faq-ring{
position:absolute !important;
left:50% !important;
top:50% !important;
width:46px !important;
height:46px !important;
transform:translate(-50%,-50%) rotate(-90deg) !important;
overflow:visible !important;
pointer-events:none !important;
}
.faq-ring-progress{
fill:none !important;
stroke:var(--nature-accent-deep) !important;
stroke-width:2.2 !important;
stroke-linecap:round !important;
/* r=20 => kb. 125.664 */
stroke-dasharray:125.664 !important;
stroke-dashoffset:125.664 !important;
opacity:0 !important;
transition:
stroke-dashoffset .56s cubic-bezier(.16,1,.3,1),
opacity .10s ease,
stroke-width .22s ease,
filter .22s ease !important;
}
/* Hoverkor teljesen kirajzolódik */
.faq-item:not(.is-open) .faq-arrow:hover .faq-ring-progress{
opacity:1 !important;
stroke-dashoffset:0 !important;
}
/* Ha levesszük az egeret, rendesen visszazár és eltűnik */
.faq-item:not(.is-open) .faq-arrow:not(:hover) .faq-ring-progress{
opacity:0 !important;
stroke-dashoffset:125.664 !important;
}
/* Nyitott kérdésnél a kör maradjon végig teljes */
.faq-item.is-open .faq-ring-progress{
opacity:1 !important;
stroke-dashoffset:0 !important;
}
/* Lassú, erőteljes pulzus nyitott állapotban */
.faq-item.is-open .faq-ring-progress{
animation:faqRingPulseV13 2.15s ease-in-out infinite !important;
}
@keyframes faqRingPulseV13{
0%,100%{
stroke-width:2.2;
filter:
brightness(.72)
drop-shadow(0 0 0 rgba(127,166,124,0));
}
50%{
stroke-width:3.0;
filter:
brightness(1.40)
drop-shadow(0 0 7px rgba(127,166,124,.65))
drop-shadow(0 0 16px rgba(169,205,165,.32));
}
}
/* A nyíl forgása marad */
.faq-item.is-open .faq-arrow i{
transform:translateY(2px) rotate(225deg) !important;
}
.faq-item:not(.is-open) .faq-arrow i{
transform:translateY(-2px) rotate(45deg) !important;
}
/* Mobil méret */
@media(max-width:640px){
.faq-ring{
width:43px !important;
height:43px !important;
}
}
/* =========================================================
v14 — CLEAN ANIMATION FIX
========================================================= */
/* Minden interaktív elem animációja kényszerítve */
.btn,
.header nav > a,
.service-card,
#szolgaltatasok .carousel-track > .card,
.contact-card,
.contactlist a,
.contact-options a,
.carousel-arrow,
.reference-arrow,
.scroll-top-btn,
.faq-arrow,
.faq-ring-progress,
.theme-toggle-thumb,
.carousel-track,
.reference-track,
.modal,
.modal .panel,
.modal .backdrop{
animation-play-state:running !important;
}
/* ---------- Főcím shine: 5 mp, ease-in-out, keskeny ---------- */
.brand-idle-shine{
position:relative !important;
display:inline-block !important;
isolation:isolate;
}
.brand-title-base{
position:relative;
z-index:1;
display:block;
}
.brand-title-glint{
position:absolute !important;
inset:0 !important;
z-index:2;
display:block !important;
pointer-events:none !important;
color:#F8FFF4 !important;
-webkit-text-fill-color:#F8FFF4 !important;
/* Mindig kb. 12% széles fényablak; ez mozog balról jobbra. */
clip-path:inset(0 88% 0 0);
opacity:0;
filter:
brightness(1.75)
drop-shadow(0 0 5px rgba(240,255,236,.85))
drop-shadow(0 0 13px rgba(195,232,192,.46)) !important;
}
.brand-idle-shine.idle-shine-active .brand-title-glint{
animation:brandShineV14 5s ease-in-out both !important;
}
@keyframes brandShineV14{
0%{
clip-path:inset(0 88% 0 0);
opacity:0;
}
4%{
opacity:1;
}
96%{
opacity:1;
}
100%{
clip-path:inset(0 0 0 88%);
opacity:0;
}
}
/* ---------- Header link hover ---------- */
.header nav > a:not(.btn){
transition:color .24s ease, transform .24s ease !important;
}
.header nav > a:not(.btn)::after{
transition:width .34s cubic-bezier(.16,1,.3,1) !important;
}
/* ---------- CTA hover ---------- */
.btn{
transition:
transform .28s cubic-bezier(.16,1,.3,1),
box-shadow .28s ease,
background .24s ease,
border-color .24s ease !important;
}
/* ---------- Szolgáltatás carousel ---------- */
.carousel-track{
transition:transform .58s cubic-bezier(.16,1,.3,1) !important;
}
#szolgaltatasok .carousel-track > .card{
transition:
transform .28s cubic-bezier(.16,1,.3,1),
border-color .24s ease,
box-shadow .28s ease !important;
}
#szolgaltatasok .carousel-track > .card:hover{
transform:translateY(-7px) !important;
}
/* ---------- Referencia carousel ---------- */
.reference-track{
transition:transform .66s cubic-bezier(.16,1,.3,1) !important;
}
/* ---------- GYIK ---------- */
.faq-answer{
transition:
height .44s cubic-bezier(.16,1,.3,1),
opacity .28s ease,
transform .40s cubic-bezier(.16,1,.3,1) !important;
}
.faq-ring-progress{
transition:
stroke-dashoffset .56s cubic-bezier(.16,1,.3,1),
opacity .12s ease !important;
}
.faq-item.is-open .faq-ring-progress{
animation:faqRingPulseV14 2.15s ease-in-out infinite !important;
}
@keyframes faqRingPulseV14{
0%,100%{
stroke-width:2.2;
filter:brightness(.70) drop-shadow(0 0 0 rgba(127,166,124,0));
}
50%{
stroke-width:3;
filter:
brightness(1.40)
drop-shadow(0 0 7px rgba(127,166,124,.65))
drop-shadow(0 0 16px rgba(169,205,165,.32));
}
}
/* ---------- Modal ---------- */
.modal{
display:block !important;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:opacity .26s ease, visibility 0s linear .34s !important;
}
.modal.open{
visibility:visible;
opacity:1;
pointer-events:auto;
transition:opacity .26s ease, visibility 0s linear 0s !important;
}
.modal .panel{
opacity:0;
transform:translate(-50%,-46%) scale(.94);
filter:blur(5px);
transition:
transform .42s cubic-bezier(.16,1,.3,1),
opacity .26s ease,
filter .36s ease !important;
}
.modal.open .panel{
opacity:1;
transform:translate(-50%,-50%) scale(1);
filter:blur(0);
}
/* ---------- Theme toggle ---------- */
.theme-toggle-thumb{
transition:
transform .42s cubic-bezier(.16,1,.3,1),
background .34s ease,
color .34s ease !important;
}
/* =========================================================
v15 — MOBIL "BERAGADÓ HOVER" JAVÍTÁS
Safari/Chrome touch eszközökön a :hover kattintás után
beragadhat. Touch eszközön ezért nincs tartós hover:
csak rövid :active visszajelzés.
========================================================= */
@media (hover:none), (pointer:coarse){
/* ---------- GYIK nyilak ---------- */
.faq-arrow:hover{
transform:translateX(-4px) !important;
border-color:#353B42 !important;
background:linear-gradient(180deg,#15191E 0%,#111419 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 7px 18px rgba(0,0,0,.18) !important;
}
html:not([data-theme="dark"]) .faq-arrow:hover{
background:#F1EDE4 !important;
border-color:#C8C2B7 !important;
box-shadow:0 6px 16px rgba(61,72,63,.07) !important;
}
html[data-theme="dark"] .faq-arrow:hover{
background:#1B241E !important;
border-color:#3B4B40 !important;
box-shadow:none !important;
}
/* Zárt állapotban érintés után biztosan ne maradjon rajta a kör. */
.faq-item:not(.is-open) .faq-arrow:hover .faq-ring-progress,
.faq-item:not(.is-open) .faq-arrow:not(:active) .faq-ring-progress{
opacity:0 !important;
stroke-dashoffset:125.664 !important;
}
/* Csak lenyomás közben legyen rövid körberajzolós feedback. */
.faq-item:not(.is-open) .faq-arrow:active .faq-ring-progress{
opacity:1 !important;
stroke-dashoffset:0 !important;
}
.faq-arrow:active{
transform:translateX(-4px) scale(.95) !important;
}
/* ---------- Fő CTA gombok ---------- */
.btn:hover,
.hero .btn:hover,
.about .btn:hover,
.contact .btn:hover,
.modal .btn:hover,
.mobilecta:hover,
.mobile-cta:hover{
transform:none !important;
box-shadow:0 10px 25px rgba(88,119,87,.12) !important;
}
.btn:hover::before,
.hero .btn:hover::before,
.about .btn:hover::before,
.contact .btn:hover::before,
.modal .btn:hover::before,
.mobilecta:hover::before,
.mobile-cta:hover::before{
left:-60% !important;
}
.btn:hover::after,
.hero .btn:hover::after,
.about .btn:hover::after,
.contact .btn:hover::after,
.modal .btn:hover::after,
.mobilecta:hover::after,
.mobile-cta:hover::after{
width:0 !important;
}
.btn:active,
.hero .btn:active,
.about .btn:active,
.contact .btn:active,
.modal .btn:active,
.mobilecta:active,
.mobile-cta:active{
transform:scale(.97) !important;
}
/* ---------- Header linkek ---------- */
.header nav > a:not(.btn):hover{
transform:none !important;
text-shadow:none !important;
}
.header nav > a:not(.btn):hover::after{
width:0 !important;
}
.header nav > a:not(.btn):active::after{
width:100% !important;
}
/* ---------- Szolgáltatás kártyák ---------- */
#szolgaltatasok .carousel-track > .card:hover{
transform:none !important;
border-color:var(--nature-line) !important;
box-shadow:0 12px 34px rgba(58,70,60,.06) !important;
}
#szolgaltatasok .carousel-track > .card:hover::before{
width:0 !important;
}
#szolgaltatasok .carousel-track > .card:hover::after{
inset:-1px !important;
border-color:transparent !important;
box-shadow:none !important;
}
#szolgaltatasok .carousel-track > .card:hover > img{
transform:none !important;
filter:saturate(.88) contrast(.98) brightness(1.015) !important;
outline-color:transparent !important;
}
#szolgaltatasok .carousel-track > .card:active{
transform:scale(.985) !important;
}
/* ---------- Kapcsolati kártyák ---------- */
.contact-card:hover,
.contactlist a:hover,
.contact-options a:hover{
transform:none !important;
}
.contact-card:hover::before,
.contactlist a:hover::before,
.contact-options a:hover::before{
inset:0 !important;
border-color:transparent !important;
box-shadow:none !important;
}
.contact-card:hover::after,
.contactlist a:hover::after,
.contact-options a:hover::after{
transform:translateX(-115%) !important;
}
.contact-card:active,
.contactlist a:active,
.contact-options a:active{
transform:scale(.985) !important;
}
/* ---------- Carousel / referencia nyilak ---------- */
.carousel-arrow:hover,
.reference-arrow:hover{
transform:none !important;
box-shadow:none !important;
}
.carousel-arrow:hover::before{
transform:scale(.78) !important;
border-color:transparent !important;
}
.carousel-prev:hover svg,
.carousel-next:hover svg,
.reference-prev:hover svg,
.reference-next:hover svg{
transform:none !important;
}
.carousel-arrow:active,
.reference-arrow:active{
transform:scale(.94) !important;
}
/* ---------- Vissza a tetejére ---------- */
.scroll-top-btn:hover{
transform:translateY(0) scale(1) !important;
}
.scroll-top-btn:hover::before{
transform:translateX(-75%) rotate(8deg) !important;
}
.scroll-top-btn:hover .scroll-top-ring{
inset:5px !important;
transform:none !important;
}
.scroll-top-btn:hover .scroll-top-arrow{
transform:none !important;
}
.scroll-top-btn:active{
transform:scale(.94) !important;
}
/* ---------- Theme toggle ---------- */
.theme-toggle:hover .theme-toggle-thumb{
transform:none !important;
}
html[data-theme="dark"] .theme-toggle:hover .theme-toggle-thumb{
transform:translateX(24px) !important;
}
}
/* Touchon ne legyen 300ms tap-delay / furcsa highlight */
button,
a,
.faq-toggle,
.faq-arrow,
.carousel-arrow,
.reference-arrow,
.scroll-top-btn,
.theme-toggle{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* =========================================================
Tesztelésre kész — külső Google Fonts nélkül
========================================================= */
.hero-motto{
font-family:"Segoe Print","Bradley Hand","Snell Roundhand","Apple Chancery","URW Chancery L",cursive !important;
}
/* --- SEO / szolgáltatásképek finomítás --- */
.card img{
width:100%;
aspect-ratio: 4 / 3;
object-fit:cover;
display:block;
}
.seo-copy{
background: rgba(122,163,124,0.08);
}
.seo-copy .container.narrow{
max-width: 860px;
}
.illustration-note{margin:18px auto 0;max-width:760px;text-align:center;font-size:.94rem;line-height:1.55;color:#747b84;opacity:.94;}
.contactlist .social-link strong{display:flex;align-items:center;gap:10px}.social-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px}.social-icon svg{width:22px;height:22px;display:block}.social-icon-tiktok{background:#111;border-radius:999px;padding:4px}.social-icon-tiktok svg{width:14px;height:14px}