/* Galéria oldal: minden section háttérszíne egységes, hogy a kártyás részhez igazodjon */
/* ===== Galéria oldal CTA szekciók (HTML-ből átemelve) ===== */
.section{
background: #ffffff;
margin: 0;
padding: 40px 0;
}
.cta-section {
background: var(--light);
border-radius: 32px;
padding: 34px;
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.10);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 24px;
align-items: center;
margin: 48px auto 32px auto;
max-width: 1100px;
transition: background 0.3s, color 0.3s;
}
.cta-section p {
color: #555;
margin-bottom: 8px;
}
.cta-section h2, .cta-section h3 {
color: #232a36;
font-size: 1.8rem;
}
.cta-btn {
background: #b45309;
color: #fff;
border-radius: 999px;
font-weight: 700;
font-size: 0.98rem;
box-shadow: 0 4px 18px 0 rgba(121,145,211,0.10);
text-decoration: none;
transition: background 0.2s, color 0.2s, transform 0.15s;
margin-bottom: 8px;
display: inline-block;
padding: 9px 18px;
}
.cta-btn:hover {
background: #92400e;
color: #fff;
transform: translateY(-2px);
}
.cta-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 24px;
padding: 22px 20px 18px 20px;
min-width: 240px;
max-width: 555px;
}
.cta-box h3 {
font-size: 1.15rem;
margin-bottom: 10px;
color: #232a36;
}
.checklist {
margin: 0;
padding-left: 18px;
color: #232a36;
font-size: 1rem;
}
@media (max-width: 900px) {
.cta-section {
grid-template-columns: 1fr;
gap: 18px;
padding: 24px 10px;
}
.cta-box {
max-width: 100%;
min-width: 0;
}
}
body.dark-theme .cta-section {
background: #232a36;
color: #e0e7ef;
}
body.dark-theme .cta-section h2,
body.dark-theme .cta-section h3 {
color: #e0e7ef;
}
body.dark-theme .cta-section p {
color: #b6bedc;
}
body.dark-theme .cta-btn {
background: #a3b8ef;
color: #232a36;
}
body.dark-theme .cta-btn:hover {
background: #232a36;
color: #a3b8ef;
}
body.dark-theme .cta-box {
background: #181c24;
border: 1px solid #3b4252;
color: #e0e7ef;
}
body.dark-theme .checklist {
color: #e0e7ef;
}
/* Balról jobbra képváltás animáció a hero szekcióban */
.hero-bg-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transform: translateX(-100%);
transition: opacity 1s, transform 1s;
}
.hero-bg-1 {
background-image: url('../Kepek/hero1.jpg');
}
.hero-bg-2 {
background-image: url('../Kepek/hero2.jpg');
}
.hero-bg-slider .slide1.hero-bg-1,
.hero-bg-slider .slide2.hero-bg-2 {
opacity: 1;
transform: translateX(0);
z-index: 1;
}
.hero-bg-slider .slide1.hero-bg-2,
.hero-bg-slider .slide2.hero-bg-1 {
opacity: 0;
transform: translateX(100%);
z-index: 0;
}
/* =========================
ALAPOK, RESET, VÁLTOZÓK
========================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
box-sizing: border-box;
overflow-x: hidden;
max-width: none;
height: 100%;
overflow-y: auto; /* Csak html-en legyen görgetősáv, body-n ne! */
}
body {
min-height: 100vh;
height: auto;
margin: 0;
padding-top: var(--header-height);
box-sizing: border-box;
overflow-y: unset; /* Csak html-en legyen görgetősáv, body-n ne! */
display: block;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: var(--dark);
scroll-snap-type: y mandatory;
}
/* Görgetősáv színének témaváltása változókkal */
:root {
--scrollbar-bg: #f8fafc;
--scrollbar-thumb: #cfcfcf;
}
:root.dark-theme {
--scrollbar-bg: #232a36;
--scrollbar-thumb: #444a5a;
}
html {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg) !important;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
background: var(--scrollbar-bg) !important;
}
html::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb) !important;
border-radius: 8px;
border: 3px solid var(--scrollbar-bg) !important;
}
/* =========================
TIPOGRÁFIA, SZÖVEGEK
========================= */
body, h1, h2, h3, h4, h5, h6, p, a, button, .btn, .card-title, .card-description, .section-title, .section-subtitle {
font-size: 1rem;
word-break: break-word;
hyphens: auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 0.5em;
}
p, .card-description, .section-subtitle, .feature-text, .footer-section p {
font-weight: 300;
}
/* =========================
KONTEJNEREK, RÁCSOK
========================= */
.container, .hero-content, .before-after-content, .cards-grid, .features-grid {
max-width: 100vw;
overflow-wrap: break-word;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* =========================
RESZPONZIVITÁS (MEDIA QUERY-K) - LEGALUL!
========================= */
/* ===== SÖTÉT TÉMA ===== */
.dark-theme {
--primary: #a3b8ef;
--primary-dark: #7991d3;
--secondary: #e0e7ef;
--dark: #f8fafc;
--light: #181c24;
--gray: #b6bedc;
--gray-light: #232a36;
background: var(--light);
color: var(--dark);
}
.dark-theme body,
.dark-theme {
background: var(--light) !important;
color: var(--dark) !important;
}
.dark-theme .header,
.dark-theme .navbar,
.dark-theme .uj-navbar,
.dark-theme .nav-menu,
.dark-theme .uj-nav-menu {
background: #232a36 !important;
color: var(--dark) !important;
}
.dark-theme .nav-link,
.dark-theme .uj-nav-link {
color: #e0e7ef !important;
}
.dark-theme .nav-link.active,
.dark-theme .nav-link:hover,
.dark-theme .uj-nav-link.active,
.dark-theme .uj-nav-link:hover {
color: var(--primary) !important;
}
.dark-theme .nav-link::after,
.dark-theme .uj-nav-link::after {
background: var(--primary);
}
.dark-theme .logo-text.modern-title {
background: linear-gradient(90deg, #ffffff 0%, #b5c4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.dark-theme .lang-btn:hover{
background: #7e9ae6 ;
}
.dark-theme .lang-btn,
.dark-theme .theme-toggle {
background: #232a36;
color: #e0e7ef;
border: none;
}
.dark-theme .lang-menu {
background: #232a36;
border: 1px solid #3b4252;
}
.dark-theme .lang-option {
color: #fff;
}
.dark-theme .lang-option:hover {
background: #2d3442;
}
.dark-theme .flag-icon {
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.dark-theme .hero {
color: #e0e7ef;
}
.dark-theme .hero::after {
background: linear-gradient(to right, rgba(24,28,36,0.85), rgba(24,28,36,0.5));
}
.dark-theme .header-text,
.dark-theme .hero-content h1 {
color: #e0e7ef;
}
.dark-theme .header-text .highlight {
background: linear-gradient(90deg, #00eaff 0%, #ffe066 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-shadow:
0 0 8px #00eaff,
0 0 16px #ffe066,
0 0 24px #00eaff,
0 0 40px #ffe066,
0 0 60px #00eaff;
}
.dark-theme .hero-content p {
color: #fff;
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
background-clip: initial;
text-shadow: none;
}
.dark-theme .btn,
.dark-theme .btn-primary {
background: #232a36;
color: #e0e7ef;
box-shadow: 0 0 10px rgba(24,28,36,0.7);
}
.dark-theme .btn-primary:hover,
.dark-theme .btn-primary:focus-visible {
background: #3b4252;
color: #a3b8ef;
}
.dark-theme .section-title,
.dark-theme .slider-text h2,
.dark-theme .card-title {
color: #e0e7ef;
}
.dark-theme .section-subtitle,
.dark-theme .slider-text p,
.dark-theme .card-description {
color: #b6bedc;
}
.dark-theme .before-after-section,
.dark-theme .services-preview,
.dark-theme .gallery,
.dark-theme .contact-page {
background: #181c24;
}
.dark-theme .card {
background: linear-gradient(180deg, #232a36 0%, #232a36 0%);
border: 1px solid #3b4252;
color: #e0e7ef;
box-shadow: 0 4px 18px 0 rgba(0,0,0,0.32);
transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.dark-theme .card:hover {
background: #181c24;
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.45);
border-color: #1976d2;
}
.dark-theme .card-link {
color: #a3b8ef;
}
.dark-theme .card-link:hover {
color: #e0e7ef;
}
.dark-theme .why-us {
background: linear-gradient(180deg, #181c24 0%, #232a36 100%, #232a36 50%);
color: #e0e7ef;
}
.dark-theme .why-us .section-title {
color: white;
}
.dark-theme .feature-number {
color: #a3b8ef;
}
.dark-theme .cta {
background: linear-gradient(180deg, #232a36 0%, #7991d3 100%, #181c24 80%);
color: #e0e7ef;
}
.dark-theme .cta .btn-primary {
background: #a3b8ef;
color: #232a36;
}
.dark-theme .cta .btn-primary:hover {
background: #232a36;
color: #a3b8ef;
}
.dark-theme .footer {
background: #232a36 !important;
color: #e0e7ef !important;
}
/* PATCH: Hero háttérkép villanás footer mögött javítása */
.hero-bg-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: blur(5px) brightness(0.85);
transition: transform 1.2s cubic-bezier(.77,0,.18,1), opacity 1.2s cubic-bezier(.77,0,.18,1);
z-index: 0;
}
.hero-bg-1 {
background-image: url("../Kepek/hatter03.png");
transform: translateY(0);
opacity: 1;
z-index: 1;
transition: transform 1.2s cubic-bezier(.77,0,.18,1), opacity 1.2s cubic-bezier(.77,0,.18,1);
pointer-events: none;
}
.hero-bg-2 {
background-image: url("../Kepek/hatter02.png");
transform: translateY(-100%);
opacity: 0;
z-index: 2;
transition: transform 1.2s cubic-bezier(.77,0,.18,1), opacity 1.2s cubic-bezier(.77,0,.18,1);
pointer-events: none;
}
.hero-bg-3 {
background-image: url("../Kepek/hatter03.png");
transform: translateY(-100%);
opacity: 0;
z-index: 3;
transition: transform 1.2s cubic-bezier(.77,0,.18,1), opacity 1.2s cubic-bezier(.77,0,.18,1);
pointer-events: none;
}
.hero-bg-slider.slide3 .hero-bg-1 {
transform: translateY(0);
opacity: 1;
z-index: 2;
}
.hero-bg-slider.slide3 .hero-bg-2 {
transform: translateY(-100%);
opacity: 0;
z-index: 1;
}
.hero-bg-slider.slide1 .hero-bg-1 {
transform: translateY(100%);
opacity: 0;
z-index: 1;
}
.hero-bg-slider.slide1 .hero-bg-2 {
transform: translateY(0);
opacity: 1;
z-index: 2;
}
.hero-bg-slider.slide2 .hero-bg-1 {
transform: translateY(0);
opacity: 1;
z-index: 2;
}
.hero-bg-slider.slide2 .hero-bg-2 {
transform: translateY(-100%);
opacity: 0;
z-index: 1;
}
.hero::before {
display: none;
}
.hero-content {
position: relative;
z-index: 2;
}
.footer {
position: relative;
z-index: 10;
background: #545251;
}
.dark-theme .footer-grid span {
font-size: 1rem;
font-weight: 300;
color: white;
line-height: 1;
text-decoration: none;
margin-left: 7px;
}
.dark-theme .footer-section h4 {
color: #a3b8ef;
}
.dark-theme .footer-bottom {
border-top: 1px solid #958981;
padding-top: 20px;
text-align: center;
opacity: 0.5;
font-size: 0.9rem;
}
.dark-theme input,
.dark-theme textarea {
background: #232a36;
color: #e0e7ef;
border: 1px solid #3b4252;
}
.dark-theme input:focus,
.dark-theme textarea:focus {
border-color: #a3b8ef;
box-shadow: 0 0 0 3px rgba(163,184,239,0.13);
}
.dark-theme .gallery-item {
background: #232a36;
box-shadow: 0 4px 16px rgba(24,28,36,0.25);
}
.dark-theme .gallery-item img {
filter: brightness(0.85);
}
.dark-theme .gallery-item:hover img {
filter: brightness(1.05);
}
.dark-theme .filter-btn {
background: #232a36;
color: #a3b8ef;
border: 2px solid #a3b8ef;
}
.dark-theme .filter-btn.active,
.dark-theme .filter-btn:hover {
background: #a3b8ef;
color: #232a36;
}
.dark-theme .tag {
background: rgba(121,145,211,0.85);
color: #232a36;
}
.dark-theme .gallery-item::after {
color: #a3b8ef;
background: rgba(24,28,36,0.65);
}
.dark-theme .lightbox-overlay {
background: rgba(24,28,36,0.98);
}
.dark-theme .lightbox-close {
color: #a3b8ef;
}
.dark-theme .lightbox-close:hover {
color: #e0e7ef;
}
.dark-theme label {
color: #a3b8ef;
}
.logo-text.modern-title {
font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
font-size: 2rem;
font-weight: 800;
text-transform: lowercase;
letter-spacing: 2px;
color: #222;
background: linear-gradient(90deg, #8790a3 0%, #7991d3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
line-height: 1;
margin-left: 6px;
filter: drop-shadow(0 2px 6px rgba(121,145,211,0.10));
transition: color 0.3s, background 0.3s;
}
/* === Nyelvválasztó és téma váltó === */
.lang-theme-switcher {
display: flex;
align-items: center;
gap: 10px;
}
.lang-dropdown {
position: relative;
}
.lang-btn {
background: #fff;
border: none;
border-radius: 6px;
padding: 4px 10px 4px 6px;
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: #222;
transition: box-shadow 0.2s;
}
.lang-btn:hover {
background: #e7eaee;
}
.lang-btn:focus {
outline: 2px solid var(--primary);
}
.lang-menu {
display: none;
position: absolute;
right: 0;
top: 110%;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
min-width: 120px;
z-index: 10;
padding: 6px 0;
}
.lang-menu.show {
display: block;
}
.lang-option {
background: none;
border: none;
width: 100%;
text-align: left;
padding: 7px 18px 7px 12px;
font-size: 1rem;
color: #222;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.lang-option:hover {
background: #f1f5f9;
}
/* Zászló ikonok SVG-vel */
.flag-icon {
width: 22px;
height: 16px;
display: inline-block;
background-size: cover;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.flag-hu {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-gb {
background-image: url('data:image/svg+xml;utf8,');
}
.theme-toggle {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: box-shadow 0.2s;
padding: 0;
}
.theme-toggle:focus {
outline: 2px solid var(--primary);
}
.theme-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
transition: background 0.2s, box-shadow 0.2s;
}
.theme-icon:hover {
background: #e7eaee;
box-shadow: 0 2px 8px 0 rgba(60,72,88,0.08);
}
.theme-dark svg circle {
fill: #222;
}
.theme-dark svg g line {
stroke: #fff;
}
/* CTA gomb fehér rezonáló (pulse) effekt - HERO */
.btn-primary.cta-pulse-hero {
position: relative;
z-index: 2;
animation: cta-pulse-hero 1.5s infinite;
box-shadow: 0 0 0 0 rgba(255,255,255,0.7), 0 2px 12px 0 rgba(0,0,0,0.10);
transition: box-shadow 0.3s;
}
@keyframes cta-pulse-hero {
0% {
box-shadow: 0 0 0 0 rgba(255,255,255,0.7), 0 2px 12px 0 rgba(0,0,0,0.10);
}
60% {
box-shadow: 0 0 0 16px rgba(255,255,255,0.13), 0 2px 12px 0 rgba(0,0,0,0.10);
}
100% {
box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 2px 12px 0 rgba(0,0,0,0.10);
}
}
.paint-splatter {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.75;
}
.before-after-content {
position: relative;
}
.slider-text {
position: relative;
z-index: 1;
}
.splatter1 {
width: 160px;
height: 100px;
right: -120px;
bottom: -40px;
top: auto;
transform: rotate(-8deg) scale(1.5);
}
.splatter2 {
width: 110px;
height: 110px;
right: -80px;
bottom: -60px;
top: auto;
transform: rotate(12deg) scale(1.2);
}
.splatter3 {
width: 140px;
height: 80px;
right: -170px;
bottom: -30px;
top: auto;
transform: rotate(-18deg) scale(1.4);
}
/* ===== ALAPOK ===== */
:root {
/* Színek */
--primary: #8790a3;
--primary-dark: #7991d3;
--secondary: #3e3b38;
--dark: #1e293b;
--light: #f8fafc;
--gray: #64748b;
--gray-light: #e2e8f0;
/* Árnyékok */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
/* Átmenetek */
--transition: all 0.3s ease;
--header-height: 72px;
}
/* Címsorok - vastag kontraszt */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 0.5em;
}
/* Szövegek - vékony kontraszt */
p, .card-description, .section-subtitle, .feature-text, .footer-section p {
font-weight: 300;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== NAVIGÁCIÓ ===== */
.hero {
position: relative;
min-height: 100dvh;
overflow: hidden;
z-index: 1;
display: flex;
align-items: center;
justify-content: center; /* középre igazítás */
text-align: center; /* szöveg középen */
padding: 100px 20px 60px;
color: #fff;
background: none; /* háttér eltávolítva, pseudo-elementekben kezeljük */
z-index: 0;
/* ÚJ: overflow hidden, hogy a ::before ne lógjon ki */
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../Kepek/hatter01.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: blur(5px);
z-index: 0;
/* ÚJ: pointer-events none, hogy ne legyen interaktív */
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
z-index: 0;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
}
.hero-features {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
}
.hero-features li {
font-size: 1.1rem;
margin-bottom: 10px;
opacity: 0.9;
}
.hero-content h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 35px;
line-height: 1.6;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap; /* mobilon egymás alá */
}
/* ===== MODERN, ÁTTETSZŐ NAVIGÁCIÓ ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
width: 100%; /* CSAK 100%, hogy ne lógjon rá a görgetősávra */
height: var(--header-height);
background: #fff !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.navbar {
max-width: 1200px;
margin: 0 auto;
height: 100%;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0.5px;
}
/* ikon konténer */
.logo-icon {
display: flex;
align-items: center;
justify-content: center;
}
/* PNG ikon */
.logo-icon img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
/* szöveg finomhangolás */
.logo-text.modern-title {
font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
font-size: 1rem;
font-weight: 800;
text-transform: lowercase;
letter-spacing: 5px;
color: #222;
background: linear-gradient(90deg, #090909 0%, #414143 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
line-height: 2;
margin-left: 6px;
filter: drop-shadow(0 2px 6px rgba(121,145,211,0.10));
transition: color 0.3s, background 0.3s;
}
.nav-menu {
display: flex;
gap: 35px;
list-style: none;
color: black;
}
.nav-link {
text-decoration: none;
font-weight: 500;
color: #000000;
position: relative;
padding: 6px 0;
transition: all 0.25s ease;
}
.nav-link:hover {
color: rgb(0, 0, 0);
transform: translateY(-2px);
}
.nav-link.active {
color: var(--secondary);
}
.nav-link::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: var(--secondary);
border-radius: 2px;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* Görgetés után megváltozik */
.header.scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.header.scrolled .nav-link {
color: var(--dark);
}
.header.scrolled .logo {
color: var(--primary);
}
.header.scrolled .logo-icon {
color: var(--primary);
}
/* Hamburger (mobil) */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: white;
border-radius: 2px;
transition: all 0.3s;
}
.header.scrolled .hamburger span {
background: var(--dark);
}
/* Általános szöveg */
.header-text {
font-size: 3rem; /* Igény szerint állítható */
font-weight: 700;
color: white;
text-align: center;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
display: block;
}
/* Általános szöveg */
.header-text {
font-size: 3rem; /* Igény szerint állítható */
font-weight: 700;
color: white;
text-align: center;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
}
/* Kiemelt lila neon rész */
.header-text .highlight {
background: linear-gradient(90deg, #ffe6b0 0%, #cbb6a9 40%, #7991d3 100%); /* arany-bézs-kék átmenet */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-size: inherit;
transition: background 0.3s, text-shadow 0.3s;
text-shadow:
0 2px 8px #cbb6a9cc,
0 4px 16px #7991d366;
}
/* Hover effekt a még élénkebb neonhoz */
.header-text .highlight:hover {
background: linear-gradient(90deg, #ffe6b0 0%, #7991d3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-shadow:
0 2px 12px #ffe6b0cc,
0 4px 24px #7991d399;
}
/* ===== GOMBOK ===== */
.btn {
padding: 16px 34px;
border-radius: 40px;
font-size: inherit;
font-weight: 800;
letter-spacing: 1px;
filter: brightness(1.2) contrast(1.2);
transition: background 0.3s, text-shadow 0.3s;
display: inline-block;
text-decoration: none;
touch-action: manipulation; /* érintésre gyors reagálás */
-webkit-tap-highlight-color: transparent;
}
/* fő gomb */
.btn-primary {
background: var(--secondary);
color: white;
box-shadow: 0 0 10px rgba(255,255,255, 1.0);
}
.btn-primary:hover,
.btn-primary:focus-visible {
transform: translateY(-3px);
background: #75716f;
box-shadow: 0 0 20px rgba(255,255,255,0.6);
outline: none;
}
.btn-primary:active {
transform: scale(0.98);
}
/* ===== SZEKCIÓK ===== */
.section-title {
font-size: 2.2rem;
text-align: center;
margin-bottom: 10px;
color: var(--dark);
}
.section-subtitle {
text-align: center;
color: var(--gray);
margin-bottom: 50px;
font-size: 1.1rem;
}
.before-after-section {
padding: 80px 0;
background: #fff;
}
.before-after-section .container {
margin: 0 auto 0 0; /* bal oldalra */
max-width: 1180px;
}
.before-after-content {
display: flex;
align-items: flex-start;
gap: 60px;
flex-direction: row-reverse;
flex-wrap: wrap;
min-height: 320px;
}
/* Scroll animáció kezdeti állapota */
.before-after-content .slider-text {
opacity: 0;
transform: translateX(-50px);
animation: slideInFromLeft 0.8s ease-out forwards;
animation-play-state: paused;
}
.before-after-content .before-after-slider {
opacity: 0;
transform: translateX(50px);
animation: slideInFromRight 0.8s ease-out forwards;
animation-play-state: paused;
}
/* Amikor a szekció oda kerül */
.before-after-content.in-view .slider-text {
animation-play-state: running;
}
.before-after-content.in-view .before-after-slider {
animation-play-state: running;
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.before-after-slider {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 0 0 20px;
height: auto;
aspect-ratio: 16 / 9;
min-height: 280px;
overflow: hidden;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
.before-after-content .slider-text,
.before-after-content .before-after-slider {
flex: 1 1 320px;
}
.slider-text {
flex: 1;
max-width: 500px;
height: 100%; /* teljes magasság */
display: flex;
flex-direction: column;
justify-content: center; /* szöveg középre függőlegesen */
}
.slider-text h2 {
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 20px;
}
.slider-text p {
font-size: 1.1rem;
color: var(--gray);
margin-bottom: 20px;
line-height: 1.6;
}
.slider-text ul {
list-style: none;
padding: 0;
}
.slider-text li {
font-size: 1rem;
color: var(--dark);
margin-bottom: 10px;
padding-left: 25px;
position: relative;
}
.slider-text li::before {
content: "•";
color: var(--primary);
position: absolute;
left: 0;
}
.before-image, .after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.before-image {
background-image: url("../Kepek/teto_before.jpeg"); /* régi kép */
z-index: 1;
}
.after-image {
background-image: url("../Kepek/teto_after.jpeg"); /* új kép */
z-index: 2;
width: 50%; /* kezdetben 50% */
}
.modern-slider {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.modern-slider .before-image,
.modern-slider .after-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: none;
}
.modern-slider .after-image {
width: 50%;
z-index: 2;
}
.modern-slider .slider-track {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 84%;
height: 8px;
background: rgba(255,255,255,0.55);
border-radius: 999px;
z-index: 4;
overflow: hidden;
}
.modern-slider .slider-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
border-radius: 999px;
transition: none;
}
.modern-slider .slider-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
box-shadow: 0 0 12px rgba(0,0,0,0.3);
z-index: 5;
transition: transform 0.2s ease;
}
.modern-slider .slider-handle.active {
transform: translate(-50%, -50%) scale(1.12);
}
.modern-slider .slider {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 84%;
height: 8px;
background: transparent;
-webkit-appearance: none;
appearance: none;
z-index: 6;
cursor: ew-resize;
outline: none;/* fókuszgyűrű eltávolítása */
}
.modern-slider .slider:focus {
outline: none;
box-shadow: none;
}
.modern-slider .slider::-webkit-slider-runnable-track,
.modern-slider .slider::-webkit-slider-thumb,
.modern-slider .slider::-moz-range-track,
.modern-slider .slider::-moz-range-thumb {
background: transparent;
border: none;
outline: none;
box-shadow: none;
}
/* Speciális: minden platformon a track teljesen átlátszó, nincs border, nincs outline */
.modern-slider .slider::-webkit-slider-runnable-track {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider::-webkit-slider-thumb {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider::-ms-fill-lower,
.modern-slider .slider::-ms-fill-upper {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider::-moz-range-track {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider::-moz-range-thumb {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider:focus {
outline: none !important;
box-shadow: none !important;
}
.modern-slider .slider {
outline: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
.modern-slider .slider::-webkit-slider-thumb,
.modern-slider .slider::-moz-range-thumb {
width: 18px;
height: 18px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 8px;
height: 24px;
background: rgba(255,255,255,0.0);
border-radius: 2px;
border: 1px solid transparent;
cursor: ew-resize;
margin-top: -10px;
}
.slider::-moz-range-thumb {
width: 8px;
height: 24px;
background: rgba(255,255,255,0.0);
border-radius: 2px;
border: 1px solid transparent;
cursor: ew-resize;
}
.slider::-moz-range-progress {
background-color: transparent;
}
.slider::-moz-range-progress {
background-color: transparent;
}
.services-preview {
padding: 80px 0;
background: white;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.card {
background: var(--light);
border-radius: 16px;
padding: 35px 30px;
text-align: center;
transition: var(--transition);
border: 1px solid var(--gray-light);
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.card-link:hover {
color: #2563eb !important; /* élénk kék */
}
.card-link:hover::after {
color: #2563eb !important;
}
.tag:hover {
background: #2563eb !important;
color: #fff !important;
transition: background 0.2s, color 0.2s;
}
.card-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.card-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--dark);
}
.card-description {
color: var(--gray);
margin-bottom: 20px;
line-height: 1.7;
}
.card-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
position: relative;
}
.card-link::after {
content: '→';
display: inline-block;
margin-left: 6px;
transition: transform 0.4s cubic-bezier(.77,0,.18,1);
}
.card-link:hover::after {
animation: card-bounce-right 0.4s 2;
}
@keyframes card-bounce-right {
0% { transform: translateX(0); }
30% { transform: translateX(10px); }
50% { transform: translateX(16px); }
70% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
}
.card-link:hover {
color: var(--secondary);
}
/* ===== MIÉRT MINKET ===== */
.why-us {
padding: 80px 0;
background: linear-gradient(180deg, white 0%, #E6D3CC 100%);
color: black;
}
.why-us .section-title {
color: black;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-top: 50px;
}
.feature {
text-align: center;
}
.feature-number {
font-size: 3.5rem;
font-weight: 700;
color: black;
line-height: 1;
}
.feature-text {
font-size: 1.1rem;
margin-top: 10px;
opacity: 0.9;
}
/* ===== CTA SZEKCIÓ ===== */
.cta {
padding: 80px 0;
background: linear-gradient(180deg, #E6D3CC 0%, #a1948f 100%);
text-align: center;
color: black
}
.cta h2 {
font-size: 2.2rem;
margin-bottom: 15px;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.cta .btn-primary {
background: #3e3b38;
color: #fff;
}
.cta .btn-primary:hover {
background: #717171;
color: black
}
/* ===== FOOTER ===== */
.footer {
background: linear-gradient(180deg, #a1948f 0%, #545251 65%);
color: black;
padding: 60px 0 20px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-grid span {
font-size: 1rem;
font-weight: 300;
color: #111;
line-height: 1;
text-decoration: none;
margin-left: 7px;
}
.footer-section h4 {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--secondary);
}
.footer-section p {
margin-bottom: 10px;
opacity: 0.8;
}
.footer-bottom {
border-top: 1px solid #958981;
padding-top: 20px;
text-align: center;
opacity: 0.5;
font-size: 0.9rem;
}
/* ===== ANIMÁCIÓK ===== */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content h1 {
animation: fadeIn 1s ease-out;
}
.hero-content p {
animation: fadeIn 1s ease-out 0.2s both;
font-size: 1.35rem;
font-weight: 600;
font-style: italic;
letter-spacing: 0.03em;
background: linear-gradient(90deg, #6366f1 0%, #f59e42 60%, #bbf7d0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 18px rgba(100,100,160,0.10), 0 1px 0 #fff;
margin-bottom: 38px;
margin-top: 10px;
display: inline-block;
transition: background 0.4s;
}
.hero-content p:hover {
background: linear-gradient(90deg, #f59e42 0%, #6366f1 80%, #bbf7d0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== SZOLGÁLTATÁS OLDAL ===== */
.small-hero {
min-height: 40vh;
padding-top: 80px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.services-page {
padding: 80px 0;
}
.service-block {
margin-bottom: 80px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background: white;
border-radius: 12px;
box-shadow: var(--shadow-md);
padding: 50px;
text-align: left;
transition: var(--transition);
}
.service-block:hover {
transform: translateY(-6px);
}
.service-block.alt {
background: var(--light);
}
.service-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 15px;
}
.service-block h2 {
color: var(--dark);
margin-bottom: 15px;
}
.service-block p {
color: var(--gray);
line-height: 1.7;
margin-bottom: 20px;
}
.service-block ul {
margin-left: 20px;
margin-bottom: 25px;
list-style: none;
padding-left: 0;
}
.service-block li {
margin-bottom: 8px;
color: var(--dark);
position: relative;
padding-left: 15px;
}
.service-block li::before {
content: "•";
color: var(--secondary);
position: absolute;
left: 0;
}
/* ===== GALÉRIA ===== */
.gallery {
padding: 80px 0;
background: var(--light);
}
.filter-bar {
text-align: center;
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.filter-btn {
background: white;
border: 2px solid var(--primary);
color: var(--primary);
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
}
.filter-btn.active,
.filter-btn:hover {
background: var(--primary);
color: white;
}
.mini-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
margin-bottom: 22px;
}
.mini-gallery img {
width: 100%;
height: 82px;
object-fit: cover;
border-radius: 14px;
transition: 0.25s ease;
}
.mini-gallery img:hover {
transform: scale(1.04);
}
.before-after-card h4 {
font-size: 1rem;
margin-bottom: 10px;
color: var(--dark);
}
.ba-slider {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 18px;
background: #ddd;
}
.ba-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-after {
position: absolute;
inset: 0;
width: 50%;
overflow: hidden;
}
.ba-after img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== LIGHTBOX ===== */
body.lightbox-open {
overflow: hidden !important;
}
.lightbox-overlay {
cursor: pointer;
}
.lightbox-overlay img {
cursor: default;
}
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
opacity: 1;
visibility: visible;
}
.lightbox-overlay img {
width: min(1200px, 90vw);
height: min(80vh, 700px);
object-fit: contain;
border-radius: 14px;
box-shadow: 0 0 25px rgba(0,0,0,0.45);
background: #111;
}
.lightbox-close {
position: absolute;
top: 25px;
right: 35px;
font-size: 2rem;
color: white;
cursor: pointer;
transition: color 0.3s ease;
}
.lightbox-close:hover {
color: var(--secondary);
}
/* ===== KAPCSOLAT OLDAL ===== */
.contact-page {
padding: 80px 0;
background: white;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 50px;
align-items: start;
}
.contact-form {
background: var(--light);
padding: 40px;
border-radius: 12px;
box-shadow: var(--shadow-md);
}
.contact-form form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
}
input, textarea {
padding: 12px 15px;
border: 1px solid var(--gray-light);
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
outline: none;
}
#formMessage {
margin-top: 10px;
font-weight: 600;
}
.contact-info {
padding: 20px;
}
.info-list {
list-style: none;
line-height: 1.8;
margin-bottom: 30px;
font-size: 1.05rem;
}
.map-container iframe {
border-radius: 12px;
box-shadow: var(--shadow-md);
width: 100%;
height: 300px;
}
/* Szolgáltatások oldal fejléc stílus */
.services-header {
text-align: center;
margin-bottom: -2.5rem;
padding-top: 30px;
}
.services-title {
font-size: 2.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
letter-spacing: -1px;
animation: fadeIn 1s ease-out;
}
.dark-theme .services-title {
color: #e0e7ef;
}
.dark-theme .szolgaltatasok-page .footer, .dark-theme body.szolgaltatasok .footer {
background: #232a36 !important;
color: #e0e7ef !important;
}
/* ===== GALÉRIA CAROUSEL VÉGLEGES ===== */
.gallery-page {
background: var(--light);
padding-bottom: 60px;
}
/* ===============================
GALÉRIA HERO TEXT MODERN DESIGN
=================================*/
.gallery-hero-text {
min-height: 100vh; /* teljes képernyő */
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
position: relative;
overflow: hidden;
}
.gallery-hero-text-first span {
display: block;
opacity: 0;
transform: translateY(20px);
}
/* amikor aktiv */
.gallery-hero-text-first.animate span {
animation: textReveal 0.6s ease forwards;
}
/* késleltetés */
.gallery-hero-text-first.animate span:nth-child(1) {
animation-delay: 0.2s;
}
.gallery-hero-text-first.animate span:nth-child(2) {
animation-delay: 0.5s;
}
.gallery-hero-text-first.animate span:nth-child(3) {
animation-delay: 0.8s;
}
/* animáció */
@keyframes textReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
.gallery-hero-text .container {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
/* háttér doboz */
.gallery-hero-text::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(circle at 25% 35%, rgba(255,140,47,0.25), transparent 60%),
radial-gradient(circle at 75% 65%, rgba(255,180,80,0.2), transparent 60%),
radial-gradient(circle at 50% 50%, rgba(255,200,120,0.1), transparent 70%);
}
/* kis felső szöveg */
.gallery-eyebrow {
display: inline-block;
padding: 8px 18px;
border-radius: 999px;
background: linear-gradient(135deg,#ff8c2f,#ffb347);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 22px;
}
.gallery-eyebrow,
.gallery-hero-text p {
opacity: 0;
transform: translateY(20px);
}
.gallery-hero-text.show-extra .gallery-eyebrow,
.gallery-hero-text.show-extra p {
animation: textReveal 0.6s ease forwards;
}
/* kis késleltetés */
.gallery-hero-text.show-extra .gallery-eyebrow {
animation-delay: 0.2s;
}
.gallery-hero-text.show-extra p {
animation-delay: 0.4s;
}
/* főcím */
.gallery-hero-text h1 {
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.08;
font-weight: 800;
color: #1d1d1d;
margin-bottom: 22px;
letter-spacing: -0.03em;
}
/* leírás */
.gallery-hero-text p {
max-width: 720px;
margin: 0 auto;
font-size: 1.12rem;
line-height: 1.8;
color: #555;
}
/* dekor körök */
.gallery-hero-text::before,
.gallery-hero-text::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(70px);
z-index: 1;
}
.gallery-hero-text::before {
width: 220px;
height: 220px;
background: rgba(255,140,47,0.22);
top: 20px;
left: -60px;
}
.gallery-hero-text::after {
width: 260px;
height: 260px;
background: rgba(68,115,255,0.16);
right: -80px;
bottom: 0;
}
/* ===============================
DARK MODE
=================================*/
.dark-theme .gallery-hero-text .container::before {
background: rgba(18,22,32,0.78);
border: 1px solid rgba(120,140,255,0.18);
box-shadow: 0 25px 70px rgba(0,0,0,0.45);
}
.dark-theme .gallery-hero-text h1 {
color: #ffffff;
}
.dark-theme .gallery-hero-text p {
color: #c7cede;
}
.dark-theme .gallery-eyebrow {
background: linear-gradient(135deg,#5a7cff,#8fa7ff);
}
/* ===============================
MOBILE
=================================*/
@media (max-width: 768px) {
.gallery-hero-text {
padding: 80px 15px 65px;
}
.gallery-hero-text .container::before {
inset: -15px;
border-radius: 24px;
}
.gallery-hero-text p {
font-size: 1rem;
line-height: 1.7;
}
}
.gallery-section {
padding: 35px 0 70px;
margin-top: 60px;
scroll-snap-align: start;
}
.gallery-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 40px;
}
.gallery-carousel-wrap {
position: relative;
padding: 0 44px;
overflow: visible;
}
.gallery-carousel {
display: grid;
scroll-snap-type: x mandatory;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 52px) / 3);
gap: 26px;
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 10px 2px 28px;
scroll-padding-left: 2px;
scroll-padding-right: 2px;
}
.gallery-carousel::-webkit-scrollbar {
display: none;
}
.gallery-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--gray-light);
border: 1px solid transparent;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
scroll-snap-align: start;
display: flex;
flex-direction: column;
height: 100%;
min-height: 430px;
transition: transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.gallery-card:hover {
transform: translateY(-8px);
box-shadow: 0 14px 34px rgba(0,0,0,0.06);
border-color: var(--primary);
}
.gallery-card.hide {
display: none;
}
.gallery-main-img {
height: 300px;
overflow: hidden;
flex-shrink: 0;
}
.gallery-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 1.4s ease;
transition: none;
cursor: pointer;
}
.gallery-card:hover .gallery-main-img img {
transform: none;
transform: scale(1.18);
}
.gallery-card-body {
padding: 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.gallery-card h3 {
font-size: 1.25rem;
min-height: 52px;
margin-bottom: 10px;
}
.gallery-card p {
flex: 1;
margin: 0;
color: var(--gray);
font-weight: 400;
}
.gallery-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.gallery-tags span {
background: #fef3c7;
color: #92400e;
padding: 6px 11px;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
}
/* ===== CSAK NYÍL, KÖR NÉLKÜL ===== */
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 48px;
padding: 0;
border: none;
background: transparent !important;
box-shadow: none !important;
cursor: pointer;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
transition: none !important;
font-size: 0 !important;
border-radius: 0 !important;
}
.gallery-arrow:hover,
.gallery-arrow:active,
.gallery-arrow:focus {
transform: translateY(-50%) !important;
background: transparent !important;
box-shadow: none !important;
outline: none;
}
.gallery-prev {
left: 8px;
}
.gallery-next {
right: 8px;
}
.gallery-prev::before,
.gallery-next::before {
content: "";
display: block;
width: 0;
height: 0;
}
.gallery-prev::before {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 18px solid #3e3b38;
}
.gallery-next::before {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 18px solid #3e3b38;
}
.gallery-carousel.is-centered {
display: flex;
justify-content: center;
gap: 26px;
overflow-x: hidden;
}
.gallery-carousel.is-centered .gallery-card {
width: calc((100% - 52px) / 3);
flex: 0 0 auto;
}
.gallery-carousel-wrap.is-centered .gallery-arrow {
display: flex;
}
.gallery-carousel-wrap.no-arrows .gallery-arrow {
display: none !important;
}
.gallery-carousel.centered {
display: flex !important;
justify-content: center;
gap: 26px;
overflow-x: hidden;
}
.gallery-arrow::before,
.gallery-arrow::after {
content: none !important;
display: none !important;
}
.gallery-arrow svg {
width: 34px;
height: 34px;
display: block;
color: #3e3b38;
}
.dark-theme .gallery-arrow svg {
color: #a3b8ef;
}
.gallery-arrow {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.gallery-carousel.centered .gallery-card {
flex: 0 0 340px;
width: 340px;
}
@media (max-width: 950px) {
.gallery-carousel.centered .gallery-card {
flex: 0 0 320px;
width: 320px;
}
}
@media (max-width: 650px) {
.gallery-carousel.centered .gallery-card {
flex: 0 0 100%;
width: 100%;
}
}
@media (max-width: 950px) {
.gallery-carousel.is-centered .gallery-card {
width: calc((100% - 24px) / 2);
}
}
@media (max-width: 650px) {
.gallery-carousel.is-centered .gallery-card {
width: 100%;
}
}
.dark-theme .gallery-card {
background: #232a36;
border: 1px solid #3b4252;
}
.dark-theme .gallery-card:hover {
transform: translateY(-8px);
box-shadow: 0 14px 28px rgba(0,0,0,0.32);
border-color: #a3b8ef; /* kék */
}
.dark-theme .gallery-card h3 {
color: #e0e7ef;
}
.dark-theme .gallery-card p {
color: #b6bedc;
}
.dark-theme .gallery-tags span {
background: #181c24;
color: #a3b8ef;
}
.dark-theme .gallery-prev::before {
border-right-color: #a3b8ef;
}
.dark-theme .gallery-next::before {
border-left-color: #a3b8ef;
}
@media (max-width: 950px) {
.gallery-carousel {
grid-auto-columns: calc((100% - 24px) / 2);
gap: 24px;
}
}
@media (max-width: 650px) {
.gallery-carousel-wrap {
padding: 0 34px;
}
.gallery-carousel {
grid-auto-columns: 100%;
}
.gallery-arrow {
width: 22px;
height: 40px;
}
.gallery-prev::before {
border-top-width: 10px;
border-bottom-width: 10px;
border-right-width: 15px;
}
.gallery-next::before {
border-top-width: 10px;
border-bottom-width: 10px;
border-left-width: 15px;
}
}
html.lightbox-open,
body.lightbox-open {
overflow: hidden !important;
}
html:not(.lightbox-open),
body:not(.lightbox-open) {
overflow-y: auto;
}
/* JOBB OLDALI KÉP DESIGN */
.gallery-hero-text::after {
content: "";
position: absolute;
right: 150px;
top: 45%;
width: 310px;
height: 390px;
border-radius: 28px;
background-image: url("../Kepek/burkolas01.jpg");
background-size: cover;
background-position: center;
transform: translateY(-50%) rotate(-8deg);
box-shadow: 0 30px 60px rgba(0,0,0,0.18);
border: 8px solid rgba(255,255,255,0.75);
z-index: 1;
}
/* MÁSODIK KÉP ALATTA / MÖGÖTTE */
.gallery-hero-text::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(circle at 25% 35%, rgba(255,140,47,0.25) 0%, rgba(255,140,47,0.12) 40%, rgba(255,255,255,0) 75%),
radial-gradient(circle at 75% 65%, rgba(255,180,80,0.2) 0%, rgba(255,180,80,0.1) 40%, rgba(255,255,255,0) 75%),
radial-gradient(circle at 50% 50%, rgba(255,200,120,0.1) 0%, rgba(255,200,120,0.05) 40%, rgba(255,255,255,0) 80%);
}
/* hogy a szöveg biztos felül legyen */
.gallery-hero-text .container {
margin-left: 90px;
margin-right: auto;
max-width: 580px;
z-index: 3;
}
/* bal szövegdoboz szélessége maradjon */
.gallery-hero-text .container::before {
width: 100%;
}
/* dark mode képkeret */
.dark-theme .gallery-hero-text::after,
.dark-theme .gallery-hero-text::before {
border-color: rgba(120,140,255,0.18);
box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
/* mobilon eltűnjenek a képek */
@media (max-width: 992px) {
.gallery-hero-text::before,
.gallery-hero-text::after {
display: none;
}
.gallery-hero-text .container {
margin: 0 auto;
}
}/* ===== HERO KÁRTYA POZÍCIÓ ===== */
.gallery-hero-text .container {
position: relative;
text-align: left;
padding: 38px 32px;
}
/* ===== REFERENCIÁK BADGE (jobb alsó sarok) ===== */
.gallery-eyebrow {
position: absolute;
bottom: 20px;
left: clamp(349px, 3vw, 45px);
bottom: 0px;
margin: 0;
font-size: 12px;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(135deg,#ff8c2f,#ffb347);
color: #fff;
backdrop-filter: blur(8px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
max-width: calc(100% - 40px); /* ne tudjon kilógni */
white-space: nowrap;
z-index: 5;
}
/* ===== SZÖVEG BALRA IGAZÍTVA ===== */
.gallery-hero-text h1 {
text-align: left;
margin: 0 0 16px 0;
max-width: 500px;
font-size: clamp(1.8rem, 3.2vw, 2.8rem);
line-height: 1.12;
}
.gallery-hero-text p {
text-align: left;
margin: 0;
max-width: 500px;
font-size: 1rem;
line-height: 1.65;
}
/* ===== DARK MODE ===== */
.dark-theme .gallery-eyebrow {
background: linear-gradient(135deg,#5a7cff,#8fa7ff);
}
/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {
.gallery-eyebrow {
position: static;
margin-bottom: 16px;
}
.gallery-hero-text .container {
padding: 30px 20px;
}
}
.before-after-gallery-section {
padding: 90px 0;
background: var(--light);
}
.before-after-gallery-section .container {
max-width: 1100px;
}
.section-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #b45309;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 0.8rem;
}
.dark-theme .section-eyebrow {
color: var(--primary);
}
.before-after-gallery-section h2 {
font-size: clamp(2.3rem, 3.5vw, 2.4rem);
line-height: 1.2;
}
.before-after-gallery-section > .container > p {
max-width: 620px;
color: var(--gray);
margin-bottom: 40px;
}
.before-after-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.before-after-card {
background: #fff;
border-radius: 26px;
padding: 18px;
border: 1px solid var(--gray-light);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.before-after-card h3 {
margin-top: 18px;
font-size: 1.25rem;
}
.before-after-card p {
color: var(--gray);
}
.dark-theme .before-after-card {
background: #232a36;
border-color: #3b4252;
}
.dark-theme .before-after-gallery-section h2,
.dark-theme .before-after-card h3 {
color: #e0e7ef;
}
@media (max-width: 768px) {
.before-after-grid {
grid-template-columns: 1fr;
}
}
.gallery-ba-slider {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 18px;
background: #111;
}
/* alap képrétegek */
.gallery-ba-slider .before-image,
.gallery-ba-slider .after-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
}
/* előtt kép */
.gallery-ba-slider .before-image {
z-index: 1;
}
/* után kép */
.gallery-ba-slider .after-image {
width: 50%;
z-index: 2;
overflow: hidden;
}
/* slider alsó csík */
.gallery-ba-slider .slider-track {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 84%;
height: 8px;
background: rgba(255,255,255,0.55);
border-radius: 999px;
z-index: 4;
overflow: hidden;
}
.gallery-ba-slider .slider-fill {
height: 100%;
width: 50%;
background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
border-radius: 999px;
}
/* középső pont eltüntetése */
.gallery-ba-slider .slider-handle {
display: none;
}
.gallery-ba-slider .slider {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 84%;
height: 18px;
opacity: 0;
z-index: 6;
cursor: ew-resize;
}
/* ===== REFERENCIA SZTORIK / VÉLEMÉNYEK / ÍGY DOLGOZUNK ===== */
.gallery-section,
.reference-stories,
.testimonials,
.work-process {
padding: 90px 0;
}
.reference-stories,
.testimonials,
.work-process {
background: var(--light);
}
.section-title {
text-align: center;
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 12px;
font-weight: 800;
color: var(--dark);
}
.section-subtitle {
text-align: center;
max-width: 620px;
margin: 0 auto 48px;
color: var(--gray);
line-height: 1.6;
}
.story-grid,
.testimonial-grid,
.process-grid {
display: grid;
gap: 28px;
}
.story-grid,
.testimonial-grid {
grid-template-columns: repeat(3, 1fr);
}
.process-grid {
grid-template-columns: repeat(4, 1fr);
}
.story-card,
.testimonial-card,
.process-card {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 24px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.story-card:hover,
.testimonial-card:hover,
.process-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.14);
border-color: var(--primary);
}
/* Story */
.story-card img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.story-card:hover img {
transform: scale(1.08);
}
.story-content {
padding: 26px;
}
.story-content span {
display: inline-block;
margin-bottom: 10px;
color: #c89b3c;
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.story-content h3 {
font-size: 1.25rem;
margin-bottom: 12px;
color: var(--dark);
}
.story-content p {
color: var(--gray);
line-height: 1.6;
}
.story-content ul {
list-style: none;
padding: 0;
margin-top: 18px;
}
.story-content li {
margin-bottom: 8px;
color: var(--dark);
}
/* Testimonials */
.testimonial-card {
padding: 34px 28px;
text-align: center;
position: relative;
}
.testimonial-card::before {
content: "“";
position: absolute;
top: 10px;
left: 22px;
font-size: 5rem;
color: rgba(200, 155, 60, 0.18);
font-family: serif;
}
.stars {
color: #f5b301;
font-size: 1.2rem;
margin-bottom: 18px;
}
.testimonial-card p {
line-height: 1.7;
font-style: italic;
color: #555;
}
.testimonial-card h4 {
margin-top: 22px;
color: #c89b3c;
}
/* Process */
.process-card {
padding: 34px 24px;
text-align: center;
}
.process-number {
width: 58px;
height: 58px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, #c89b3c, #e4bd6a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 900;
box-shadow: 0 10px 25px rgba(200, 155, 60, 0.35);
}
.process-card h3 {
margin-bottom: 10px;
font-size: 1.2rem;
color: var(--dark);
}
.process-card p {
color: var(--gray);
line-height: 1.6;
}
/* ===== DARK MODE EGYSÉGESÍTÉS ===== */
.dark-theme .reference-stories,
.dark-theme .testimonials,
.dark-theme .work-process {
background: var(--light);
}
.dark-theme .story-card,
.dark-theme .testimonial-card,
.dark-theme .process-card {
background: #232a36;
border: 1px solid #3b4252;
color: #e0e7ef;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.dark-theme .story-card:hover,
.dark-theme .testimonial-card:hover,
.dark-theme .process-card:hover {
background: #181c24;
border-color: #a3b8ef;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
.dark-theme .section-title,
.dark-theme .story-content h3,
.dark-theme .process-card h3 {
color: #e0e7ef;
}
.dark-theme .section-subtitle,
.dark-theme .story-content p,
.dark-theme .testimonial-card p,
.dark-theme .process-card p {
color: #b6bedc;
}
.dark-theme .story-content li {
color: #e0e7ef;
}
/* ===== LOAD MORE ===== */
.hidden {
display: none;
}
.extra-gallery.show {
display: block;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 950px) {
.story-grid,
.testimonial-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 650px) {
.gallery-section,
.reference-stories,
.testimonials,
.work-process {
padding: 60px 0;
}
.story-grid,
.testimonial-grid,
.process-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
}
.section-title {
text-align: center;
font-size: 2.4rem;
margin-bottom: 12px;
}
.section-subtitle {
text-align: center;
margin-bottom: 45px;
color: #777;
}
.story-grid,
.testimonial-grid,
.process-grid {
display: grid;
gap: 28px;
}
.story-grid {
grid-template-columns: repeat(3, 1fr);
}
.story-card,
.testimonial-card,
.process-card {
background: var(--card-bg, #fff);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
.story-card img {
width: 100%;
height: 230px;
object-fit: cover;
transition: transform 0.45s ease;
}
.story-card:hover img {
transform: scale(1.08);
}
.story-content {
padding: 24px;
}
.story-content span {
color: #c89b3c;
font-weight: 700;
font-size: 0.9rem;
}
.story-content h3 {
margin: 10px 0;
font-size: 1.3rem;
}
.story-content ul {
list-style: none;
padding: 0;
margin-top: 18px;
}
.story-content li {
margin-bottom: 8px;
}
.testimonial-grid {
grid-template-columns: repeat(3, 1fr);
}
.testimonial-card {
padding: 30px;
text-align: center;
}
.stars {
color: #f5b301;
margin-bottom: 10px;
font-size: 18px;
}
.testimonial-card p {
font-style: italic;
line-height: 1.6;
}
.testimonial-card h4 {
margin-top: 20px;
}
.process-grid {
grid-template-columns: repeat(4, 1fr);
}
.process-card {
padding: 32px 24px;
text-align: center;
}
.process-number {
width: 54px;
height: 54px;
margin: 0 auto 18px;
border-radius: 50%;
background: #c89b3c;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 800;
}
.process-card h3 {
margin-bottom: 10px;
}
/* Dark mode */
.dark-theme .story-card,
.dark-theme .testimonial-card,
.dark-theme .process-card {
background: #1f1f1f;
color: #fff;
}
.dark-theme .section-subtitle {
color: #bbb;
}
/* Responsive */
@media (max-width: 950px) {
.story-grid,
.testimonial-grid {
grid-template-columns: 1fr 1fr;
}
.process-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 650px) {
.story-grid,
.testimonial-grid,
.process-grid {
grid-template-columns: 1fr;
}
.reference-stories,
.testimonials,
.work-process {
padding: 60px 0;
}
.section-title {
font-size: 2rem;
}
}
.hidden {
display: none;
}
.extra-gallery.show {
display: block;
}
.gallery-section,
.reference-stories,
.testimonials,
.work-process {
padding: 90px 0;
}
.reference-stories,
.work-process {
background: rgba(0, 0, 0, 0.025);
}
.dark-theme .reference-stories,
.dark-theme .work-process {
background: rgba(255, 255, 255, 0.035);
}
.section-title {
text-align: center;
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 12px;
font-weight: 800;
}
.section-subtitle {
text-align: center;
max-width: 620px;
margin: 0 auto 48px;
color: #777;
line-height: 1.6;
}
.dark-theme .section-subtitle {
color: #bbb;
}
.story-card,
.testimonial-card,
.process-card {
background: #fff;
border-radius: 24px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.story-card:hover,
.testimonial-card:hover,
.process-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.14);
}
.dark-theme .story-card,
.dark-theme .testimonial-card,
.dark-theme .process-card {
background: #1f1f1f;
color: #fff;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.story-card {
overflow: hidden;
}
.story-card img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.story-card:hover img {
transform: scale(1.08);
}
.story-content {
padding: 26px;
}
.story-content span {
display: inline-block;
margin-bottom: 10px;
color: #c89b3c;
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.story-content h3 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.story-content p {
color: #666;
line-height: 1.6;
}
.dark-theme .story-content p {
color: #ccc;
}
.testimonial-card {
padding: 34px 28px;
text-align: center;
position: relative;
}
.testimonial-card::before {
content: "“";
position: absolute;
top: 10px;
left: 22px;
font-size: 5rem;
color: rgba(200, 155, 60, 0.18);
font-family: serif;
}
.stars {
color: #f5b301;
font-size: 1.2rem;
margin-bottom: 18px;
}
.testimonial-card p {
line-height: 1.7;
font-style: italic;
color: #555;
}
.dark-theme .testimonial-card p {
color: #ddd;
}
.testimonial-card h4 {
margin-top: 22px;
color: #c89b3c;
}
.process-card {
padding: 34px 24px;
text-align: center;
}
.process-number {
width: 58px;
height: 58px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, #c89b3c, #e4bd6a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 900;
box-shadow: 0 10px 25px rgba(200, 155, 60, 0.35);
}
.process-card h3 {
margin-bottom: 10px;
font-size: 1.2rem;
}
.process-card p {
color: #666;
line-height: 1.6;
}
.dark-theme .process-card p {
color: #ccc;
}
.story-grid,
.testimonial-grid,
.process-grid {
display: grid;
gap: 28px;
}
.story-grid,
.testimonial-grid {
grid-template-columns: repeat(3, 1fr);
}
.process-grid {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 950px) {
.story-grid,
.testimonial-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 650px) {
.gallery-section,
.reference-stories,
.testimonials,
.work-process {
padding: 60px 0;
}
.story-grid,
.testimonial-grid,
.process-grid {
grid-template-columns: 1fr;
}
}/* Dark mode: arany/narancs elemek cseréje kékre */
.dark-theme .story-content span,
.dark-theme .testimonial-card h4 {
color: #a3b8ef;
}
.dark-theme .process-number {
background: linear-gradient(135deg, #7991d3, #a3b8ef);
color: #232a36;
box-shadow: 0 10px 25px rgba(163, 184, 239, 0.28);
}
.dark-theme .testimonial-card::before {
color: rgba(163, 184, 239, 0.16);
}
.dark-theme .stars {
color: #f5b301;
}
/* ===== TOVÁBBI REFERENCIA KÉPEK ===== */
.more-references {
padding: 90px 0;
background: var(--light);
}
.more-gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.more-gallery-item {
position: relative;
overflow: hidden;
border-radius: 22px;
aspect-ratio: 1 / 1;
background: #e5e7eb;
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
cursor: pointer;
}
.more-gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.55s ease, filter 0.35s ease;
}
.more-gallery-item::after {
content: "Megtekintés";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.32);
color: #fff;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.96);
transition: opacity 0.35s ease, transform 0.35s ease;
pointer-events: none;
}
.more-gallery-item:hover img {
transform: scale(1.1);
filter: brightness(0.8);
}
.more-gallery-item:hover::after {
opacity: 1;
transform: scale(1);
}
.more-gallery-btn-wrap {
text-align: center;
margin-top: 38px;
}
.load-more-btn {
border: none;
padding: 14px 28px;
border-radius: 999px;
background: #3e3b38;
color: #fff;
font-weight: 800;
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.load-more-btn:hover {
transform: translateY(-3px);
background: #75716f;
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
/* Rejtett képek */
.hidden {
display: none;
}
.extra-gallery.show {
display: block;
}
/* Dark mode */
.dark-theme .more-references {
background: var(--light);
}
.dark-theme .more-gallery-item {
background: #232a36;
box-shadow: 0 16px 38px rgba(0,0,0,0.35);
}
.dark-theme .more-gallery-item::after {
background: rgba(24,28,36,0.62);
color: #e0e7ef;
}
.dark-theme .load-more-btn {
background: #a3b8ef;
color: #232a36;
}
.dark-theme .load-more-btn:hover {
background: #7991d3;
color: #fff;
}
/* Responsive */
@media (max-width: 1000px) {
.more-gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 700px) {
.more-gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (max-width: 420px) {
.more-gallery-grid {
grid-template-columns: 1fr;
}
}
/* ===== MORE GALLERY LIGHTBOX ===== */
html.lightbox-open,
body.lightbox-open {
overflow: hidden !important;
}
.more-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
cursor: pointer;
}
.more-lightbox-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.more-lightbox-overlay img {
width: min(1100px, 90vw);
height: min(760px, 82vh);
object-fit: contain;
border-radius: 18px;
background: #111;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
cursor: default;
}
.more-lightbox-close {
position: fixed;
top: 24px;
right: 34px;
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 2rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, transform 0.25s ease;
}
.more-lightbox-close:hover {
background: rgba(255, 255, 255, 0.22);
transform: scale(1.08);
}
.dark-theme .more-lightbox-overlay {
background: rgba(24, 28, 36, 0.96);
}
.dark-theme .more-lightbox-close {
background: rgba(163, 184, 239, 0.18);
color: #e0e7ef;
}
.dark-theme .more-lightbox-close:hover {
background: rgba(163, 184, 239, 0.3);
}
/* Mobil */
@media (max-width: 650px) {
.more-lightbox-overlay img {
width: 92vw;
height: 76vh;
border-radius: 14px;
}
.more-lightbox-close {
top: 16px;
right: 16px;
width: 42px;
height: 42px;
font-size: 1.8rem;
}
}
/* GALIRA OLDAL KÉPVÁLTÓ NYILAK */
.more-lightbox-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,0.4);
color: #fff;
font-size: 2.6rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 100000;
transition: 0.25s;
}
.more-lightbox-arrow:hover {
background: rgba(0,0,0,0.6);
transform: translateY(-50%) scale(1.08);
}
/* BAL OLDAL – kép mellé */
.more-lightbox-prev {
left: 80px; /* kép szélénél */
}
/* JOBB OLDAL – kép mellé */
.more-lightbox-next {
right: 80px;
}
.dark-theme .more-lightbox-arrow {
background: rgba(163, 184, 239, 0.18);
color: #e0e7ef;
}
.dark-theme .more-lightbox-arrow:hover {
background: rgba(163, 184, 239, 0.32);
}
@media (max-width: 650px) {
.more-lightbox-arrow {
width: 42px;
height: 42px;
font-size: 2.3rem;
}
.more-lightbox-prev {
left: 12px;
}
.more-lightbox-next {
right: 12px;
}
}
/***************************************/
/* ================================
GALÉRIA OLDAL EXTRA EFFEKTEK
================================ */
/* Filter gombok */
.gallery-filters .filter-btn,
.filter-bar .filter-btn {
position: relative;
overflow: hidden;
transform: translateY(0);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.gallery-filters .filter-btn:hover,
.filter-bar .filter-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/* Galéria kártyák finomabb hover */
.gallery-card {
will-change: transform;
}
.gallery-card:hover {
transform: translateY(-10px) scale(1.015);
}
.gallery-main-img {
position: relative;
}
.gallery-main-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,0.28)
);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.gallery-card:hover .gallery-main-img::after {
opacity: 1;
}
/* Before-after kártyák */
.before-after-card {
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.before-after-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 55px rgba(0,0,0,0.14);
border-color: var(--primary);
}
.gallery-ba-slider {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.before-after-card:hover .gallery-ba-slider {
transform: scale(1.015);
box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}
/* További referenciák */
.more-gallery-item {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.more-gallery-item:hover {
transform: translateY(-6px);
box-shadow: 0 24px 55px rgba(0,0,0,0.16);
}
/* Load more gomb kis csillanás */
.load-more-btn {
position: relative;
overflow: hidden;
}
.load-more-btn::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transition: left 0.55s ease;
}
.load-more-btn:hover::after {
left: 120%;
}
/* Referencia sztori kártyák */
.story-card {
position: relative;
}
.story-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
border: 1px solid transparent;
pointer-events: none;
transition: border-color 0.35s ease;
}
.story-card:hover::after {
border-color: rgba(200,155,60,0.45);
}
/* Vélemények finom glow */
.testimonial-card:hover {
box-shadow: 0 26px 65px rgba(200,155,60,0.16);
}
.stars {
transition: transform 0.3s ease, filter 0.3s ease;
}
.testimonial-card:hover .stars {
transform: scale(1.08);
filter: drop-shadow(0 0 8px rgba(245,179,1,0.45));
}
/* Így dolgozunk ikon/number effekt */
.process-number {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.process-card:hover .process-number {
transform: scale(1.12) rotate(4deg);
box-shadow: 0 14px 34px rgba(200,155,60,0.45);
}
/* CTA section */
.cta-section {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cta-section:hover {
transform: translateY(-5px);
box-shadow: 0 22px 55px rgba(0,0,0,0.15);
}
/* Lightbox nyilak javítva: kép MELLETT */
.more-lightbox-overlay {
--lightbox-img-width: min(1100px, 90vw);
}
.more-lightbox-prev {
left: calc((100vw - var(--lightbox-img-width)) / 2 - 72px);
}
.more-lightbox-next {
right: calc((100vw - var(--lightbox-img-width)) / 2 - 72px);
}
@media (max-width: 1250px) {
.more-lightbox-prev {
left: 20px;
}
.more-lightbox-next {
right: 20px;
}
}
@media (max-width: 650px) {
.more-lightbox-prev {
left: 10px;
}
.more-lightbox-next {
right: 10px;
}
}
/* Dark mode extra polish */
.dark-theme .gallery-card:hover,
.dark-theme .before-after-card:hover,
.dark-theme .more-gallery-item:hover,
.dark-theme .story-card:hover,
.dark-theme .testimonial-card:hover,
.dark-theme .process-card:hover {
box-shadow: 0 26px 65px rgba(0,0,0,0.55);
}
.dark-theme .story-card:hover::after {
border-color: rgba(163,184,239,0.45);
}
.dark-theme .process-card:hover .process-number {
box-shadow: 0 14px 34px rgba(163,184,239,0.35);
}
/* ===== BEFORE-AFTER - CSAK ZOOM ===== */
.gallery-ba-slider .before-image,
.gallery-ba-slider .after-image {
transition: transform 0.6s ease !important;
}
.before-after-card:hover .before-image,
.before-after-card:hover .after-image {
transform: scale(1.08) !important;
}
/* ===== KÁRTYA NE MOZOGJON ===== */
.before-after-card:hover {
transform: none !important;
}
/* ===== PREMIUM SCROLL ANIMÁCIÓK ===== */
.scroll-anim {
opacity: 0;
transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(.22, 1, .36, 1),
filter 0.8s ease;
will-change: transform, opacity, filter;
}
/* alap állapotok */
.anim-up {
transform: translateY(70px) scale(0.96);
filter: blur(6px);
}
.anim-left {
transform: translateX(-90px) rotate(-2deg);
filter: blur(5px);
}
.anim-right {
transform: translateX(90px) rotate(2deg);
filter: blur(5px);
}
.anim-zoom {
transform: scale(0.88);
filter: blur(6px);
}
.anim-flip {
transform: perspective(900px) rotateX(14deg) translateY(50px);
filter: blur(5px);
}
/* aktív állapot */
.scroll-anim.is-visible {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0) rotateX(0);
filter: blur(0);
}
/* késleltetések */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }
/* mobilon finomabb */
@media (max-width: 650px) {
.anim-left,
.anim-right {
transform: translateY(55px) scale(0.96);
}
.scroll-anim {
transition-duration: 0.65s;
}
}
/* ===== EXTRA SMOOTH SCROLL ANIMATION ===== */
.scroll-anim {
transition:
opacity 1.05s ease,
transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
filter 1.05s ease !important;
}
.anim-up {
transform: translateY(90px) scale(0.94);
filter: blur(8px);
}
.anim-left {
transform: translateX(-110px) scale(0.96);
filter: blur(8px);
}
.anim-right {
transform: translateX(110px) scale(0.96);
filter: blur(8px);
}
.anim-zoom {
transform: scale(0.86);
filter: blur(8px);
}
.anim-flip {
transform: perspective(1000px) rotateX(16deg) translateY(70px) scale(0.96);
filter: blur(8px);
}
.scroll-anim.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1) rotate(0) rotateX(0);
filter: blur(0);
}
/* ===== FIX: lekerekítés scroll közben ===== */
.gallery-card {
overflow: hidden;
border-radius: 24px;
/* EZ A KULCS */
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
/* belső kép is tartsa a radius-t */
.gallery-main-img {
overflow: hidden;
border-radius: inherit;
}
/* még stabilabb */
.gallery-card img {
display: block;
backface-visibility: hidden;
}
/* ===== SZOLGÁLTATÁS EXTRA SZEKCIÓK ===== */
.service-includes,
.service-process,
.one-hand,
.service-faq {
padding: 90px 0;
background: var(--light);
}
.include-grid,
.service-process-grid {
display: grid;
gap: 28px;
}
.include-grid {
grid-template-columns: repeat(4, 1fr);
}
.service-process-grid {
grid-template-columns: repeat(4, 1fr);
}
.include-card,
.service-process-card {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 24px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 16px 38px rgba(0,0,0,0.07);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.include-card:hover,
.service-process-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 60px rgba(0,0,0,0.13);
border-color: var(--primary);
}
.include-icon {
font-size: 2.4rem;
margin-bottom: 18px;
}
.include-card h3,
.service-process-card h3 {
color: var(--dark);
font-size: 1.2rem;
margin-bottom: 10px;
}
.include-card p,
.service-process-card p {
color: var(--gray);
line-height: 1.6;
}
.service-process-card span {
width: 58px;
height: 58px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(135deg, #c89b3c, #e4bd6a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
box-shadow: 0 10px 25px rgba(200,155,60,0.32);
}
/* Egy kézből blokk */
.one-hand-box {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 32px;
padding: 42px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 34px;
align-items: center;
box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}
.one-hand-box h2 {
font-size: clamp(2rem, 4vw, 2.7rem);
color: var(--dark);
margin-bottom: 16px;
}
.one-hand-box p {
color: var(--gray);
line-height: 1.7;
}
.one-hand-list {
list-style: none;
padding: 0;
margin: 0;
}
.one-hand-list li {
background: var(--light);
border: 1px solid var(--gray-light);
border-radius: 999px;
padding: 13px 18px;
margin-bottom: 12px;
font-weight: 700;
color: var(--dark);
}
.one-hand-list li::before {
content: "✓";
color: #c89b3c;
margin-right: 10px;
font-weight: 900;
}
/* FAQ */
.faq-list {
max-width: 850px;
margin: 0 auto;
display: grid;
gap: 14px;
}
.faq-list details {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 18px;
padding: 20px 22px;
box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.faq-list summary {
cursor: pointer;
font-weight: 800;
color: var(--dark);
}
.faq-list details p {
margin-top: 14px;
color: var(--gray);
line-height: 1.6;
}
/* Dark mode */
.dark-theme .service-includes,
.dark-theme .service-process,
.dark-theme .one-hand,
.dark-theme .service-faq {
background: var(--light);
}
.dark-theme .include-card,
.dark-theme .service-process-card,
.dark-theme .one-hand-box,
.dark-theme .faq-list details {
background: #232a36;
border-color: #3b4252;
color: #e0e7ef;
box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.dark-theme .include-card:hover,
.dark-theme .service-process-card:hover,
.dark-theme .faq-list details:hover {
background: #181c24;
border-color: #a3b8ef;
}
.dark-theme .include-card h3,
.dark-theme .service-process-card h3,
.dark-theme .one-hand-box h2,
.dark-theme .faq-list summary {
color: #e0e7ef;
}
.dark-theme .include-card p,
.dark-theme .service-process-card p,
.dark-theme .one-hand-box p,
.dark-theme .faq-list details p {
color: #b6bedc;
}
.dark-theme .service-process-card span {
background: linear-gradient(135deg, #7991d3, #a3b8ef);
color: #232a36;
box-shadow: 0 10px 25px rgba(163,184,239,0.28);
}
.dark-theme .one-hand-list li {
background: #181c24;
border-color: #3b4252;
color: #e0e7ef;
}
.dark-theme .one-hand-list li::before {
color: #a3b8ef;
}
/* Responsive */
@media (max-width: 950px) {
.include-grid,
.service-process-grid {
grid-template-columns: repeat(2, 1fr);
}
.one-hand-box {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.service-includes,
.service-process,
.one-hand,
.service-faq {
padding: 60px 0;
}
.include-grid,
.service-process-grid {
grid-template-columns: 1fr;
}
.one-hand-box {
padding: 28px 22px;
}
}
/* Szolgáltatások oldal - Így dolgozunk gömb effekt */
.service-process-card span,
.service-process-card .process-number {
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.service-process-card:hover span,
.service-process-card:hover .process-number {
transform: scale(1.12) rotate(4deg);
box-shadow: 0 14px 34px rgba(200,155,60,0.45);
}
/* Dark mode */
.dark-theme .service-process-card:hover span,
.dark-theme .service-process-card:hover .process-number {
box-shadow: 0 14px 34px rgba(163,184,239,0.35);
}
.modern-hero-title {
display: flex;
flex-direction: column;
gap: 0.3em;
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.1;
}
/* Alap sor */
.modern-hero-title span {
display: block;
opacity: 0;
transform: translateY(40px);
animation: heroTextIn 0.8s ease forwards;
}
/* Delay-ek */
.modern-hero-title span:nth-child(1) { animation-delay: 0.1s; }
.modern-hero-title span:nth-child(2) { animation-delay: 0.25s; }
.modern-hero-title span:nth-child(3) { animation-delay: 0.4s; }
/* Kiemelt sor */
.modern-hero-title .highlight {
color: #c89b3c;
letter-spacing: 1px;
transform: translateX(20px);
}
/* Animáció */
@keyframes heroTextIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.modern-hero-title .highlight {
background: linear-gradient(90deg, #c89b3c, #ffd76a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.modern-hero-title {
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
/* EZ tartja egy sorban */
white-space: nowrap;
}
/* NE legyen block */
.modern-hero-title span {
display: inline;
}
/* világos mód */
.modern-hero-title .highlight {
color: #c89b3c;
font-weight: 700;
}
/* dark mód */
.dark-theme .modern-hero-title .highlight {
color: #4da3ff;
}
.modern-hero-title .highlight {
opacity: 0;
transform: translateY(10px);
animation: highlightIn 0.6s ease forwards;
animation-delay: 0.2s;
}
@keyframes highlightIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.modern-hero-title {
font-size: clamp(1.8rem, 4vw, 3rem); /* KICSIT kisebb */
font-weight: 700;
line-height: 1.2;
max-width: 100%; /* ne szűkítse be semmi */
}
/* fontos: ne legyen block */
.modern-hero-title span {
display: inline;
}
/* highlight */
.modern-hero-title .highlight {
color: #c89b3c;
}
.dark-theme .modern-hero-title .highlight {
color: #4da3ff;
}
/* ===== SZOLGÁLTATÁS HERO CÍM FIX ===== */
.services-hero-text .modern-hero-title {
display: block !important;
max-width: 900px !important;
white-space: normal !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
}
.services-hero-text .modern-hero-title .highlight {
color: #c89b3c !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
letter-spacing: 0 !important;
}
.dark-theme .services-hero-text .modern-hero-title .highlight {
color: #a3b8ef !important;
}
/* ===== HERO CÍM 2 SOROS FIX ===== */
.services-hero-text .modern-hero-title {
white-space: normal !important;
line-height: 1.15;
}
/* első sor */
.modern-hero-title .line-1 {
display: block;
}
/* második sor */
.modern-hero-title .line-2 {
display: block;
}
/* highlight */
.modern-hero-title .highlight {
color: #c89b3c;
}
.dark-theme .modern-hero-title .highlight {
color: #a3b8ef;
}
/* ===== SZOLGÁLTATÁS HERO CÍM TISZTA FIX ===== */
.services-title-main {
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
color: #1d1d1d !important;
margin-bottom: 22px !important;
max-width: 650px !important;
}
.services-title-main span {
display: inline !important;
color: #c89b3c !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.dark-theme .services-title-main {
color: #ffffff !important;
}
.dark-theme .services-title-main span {
color: #a3b8ef !important;
}
/* ===== SZOLGÁLTATÁS HERO CÍM VÉGLEGES FIX ===== */
.services-hero-text h1.modern-hero-title {
display: block !important;
white-space: normal !important;
max-width: 720px !important;
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
color: #1d1d1d !important;
word-break: normal !important;
hyphens: none !important;
}
.services-hero-text h1.modern-hero-title > .line-1 {
display: block !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.services-hero-text h1.modern-hero-title > .line-2 {
display: block !important;
white-space: nowrap !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.services-hero-text h1.modern-hero-title > .line-2 > .highlight {
display: inline !important;
color: #c89b3c !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.dark-theme .services-hero-text h1.modern-hero-title {
color: #fff !important;
}
.dark-theme .services-hero-text h1.modern-hero-title > .line-2 > .highlight {
color: #a3b8ef !important;
}
.testimonial-card::before {
top: 0px; /* ne legyen negatív */
left: 18px;
font-size: 4.5rem; /* kicsit kisebb */
z-index: 0; /* háttérben marad */
pointer-events: none;
}
/* tartalom mindig felette */
.testimonial-card * {
position: relative;
z-index: 1;
}
/* Galéria kártya kép: csak felül legyen lekerekítve */
.gallery-card .gallery-main-img {
border-radius: 24px 24px 0 0 !important;
overflow: hidden;
}
.gallery-card .gallery-main-img img {
border-radius: 24px 24px 0 0 !important;
}
.section-eyebrow {
margin-bottom: 4px;
}
.before-after-gallery-section h2 {
margin-bottom: 8px;
}
.before-after-gallery-section > .container > p {
max-width: 560px;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Poppins', sans-serif;
}
/* IKON */
.icon {
position: relative;
width: 40px;
height: 40px;
}
.house {
position: absolute;
border: 3px solid;
border-bottom: none;
width: 22px;
height: 22px;
transform: rotate(45deg);
}
.house1 {
border-color: #222;
top: 10px;
left: 0;
}
.house2 {
border-color: #d4af37;
top: 0;
left: 12px;
}
/* SZÖVEG */
.text {
display: flex;
flex-direction: column;
}
.dark {
color: #222;
font-weight: 600;
font-size: 22px;
}
.gold {
color: #d4af37;
font-weight: 600;
font-size: 22px;
}
.tagline {
font-size: 10px;
letter-spacing: 2px;
color: #666;
}
body.dark {
background: #111;
}
body.dark .dark {
color: #fff;
}
body.dark .tagline {
color: #aaa;
}
.text-dark,
.text-gold {
display: inline;
}.logo-text {
display: flex;
flex-direction: column;
}
.logo-name {
display: flex;
align-items: baseline;
gap: 2px;
}.logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.logo-text {
display: block !important;
line-height: 1 !important;
}
.logo-name {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
gap: 2px !important;
white-space: nowrap !important;
}
.text-dark,
.text-gold {
display: inline-block !important;
}.logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
}
.logo-text {
display: block !important;
line-height: 1.1 !important;
}
.logo-name {
display: flex !important;
align-items: baseline !important;
gap: 2px !important;
white-space: nowrap !important;
}
.logo-name .text-dark,
.logo-name .text-gold {
display: inline-block !important;
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
.logo-name .text-dark {
color: #222 !important;
}
.logo-name .text-gold {
color: #d4af37 !important;
}
.tagline {
display: block !important;
margin-top: 4px !important;
font-size: 9px !important;
letter-spacing: 1.6px !important;
color: #666 !important;
white-space: nowrap !important;
}.dark-theme .logo-name .text-dark {
color: #fff !important;
}
.dark-theme .tagline {
color: #aaa !important;
}
/* ===== IKON ===== */
.icon {
position: relative;
width: 40px;
height: 40px;
}
/* tető */
.roof {
position: absolute;
width: 20px;
height: 20px;
border-top: 4px solid;
border-left: 4px solid;
transform: rotate(45deg);
}
/* sötét tető */
.roof-dark {
border-color: #222;
top: 10px;
left: 0;
}
/* arany tető */
.roof-gold {
border-color: #d4af37;
top: 0;
left: 14px;
}
/* ház alap */
.base {
position: absolute;
width: 22px;
height: 16px;
border: 4px solid #222;
border-top: none;
bottom: 2px;
left: 9px;
}
.dark-theme .roof-dark {
border-color: #fff;
}
.dark-theme .base {
border-color: #fff;
}
.roof-dark {
border-color: var(--dark);
}
.roof-gold {
border-color: var(--primary);
}
.base {
border: 4px solid var(--dark);
border-top: none;
}.text-dark {
color: var(--dark);
}
.text-gold {
color: var(--primary);
}
.tagline {
color: var(--gray);
}
.logo-name .text-dark,
.logo-name .text-gold {
background: none !important;
-webkit-text-fill-color: unset !important;
color: inherit;
}
/* konkrét színek */
.logo-name .text-dark {
color: var(--dark) !important;
}
.logo-name .text-gold {
color: var(--primary) !important;
}
.tagline {
color: var(--gray) !important;
}
/* ===== LOGÓ FINOMHANGOLÁS ===== */
/* szöveg – csak a Lakas + Reform narancs */
.logo-name .text-dark,
.logo-name .text-gold {
color: #f97316 !important;
}
/* tető legyen narancs */
.roof-dark,
.roof-gold {
border-color: #f97316 !important;
}
/* ház alap marad eredeti (ne legyen narancs!) */
.base {
border-color: var(--dark) !important;
}
/* tagline marad eredeti */
.tagline {
color: var(--gray) !important;
}
/* ===== IKON FINOMHANGOLÁS ===== */
/* alsó tető marad sötét */
.roof-dark {
border-color: var(--dark) !important;
}
/* felső tető narancs */
.roof-gold {
border-color: #f97316 !important;
}
/* ház alap marad eredeti */
.base {
border-color: var(--dark) !important;
}
/* ===== VILÁGOS MÓD ===== */
/* Lakas fekete */
.logo-name .text-dark {
color: #111 !important;
}
/* Reform narancs */
.logo-name .text-gold {
color: #f97316 !important;
}
/* tető */
.roof-dark {
border-color: #111 !important;
}
.roof-gold {
border-color: #f97316 !important;
}
/* ===== DARK MÓD ===== */
.dark-theme .logo-name .text-dark {
color: #ffffff !important; /* Lakas */
}
.dark-theme .logo-name .text-gold {
color: var(--primary) !important; /* Reform KÉK */
}
/* tető */
.dark-theme .roof-dark {
border-color: #ffffff !important;
}
.dark-theme .roof-gold {
border-color: var(--primary) !important;
}
/* ház alap */
.dark-theme .base {
border-color: #ffffff !important;
}
/* =========================
KAPCSOLAT OLDAL MODERN
========================= */
.contact-hero {
min-height: 72vh;
}
.contact-hero h1 span {
color: #f97316;
}
.dark-theme .contact-hero h1 span {
color: var(--primary);
}
.contact-modern-page {
background: var(--light);
}
.contact-modern-section {
padding: 90px 0;
background: var(--light);
}
.contact-modern-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 34px;
align-items: start;
}
.contact-card {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 28px;
box-shadow: 0 18px 45px rgba(0,0,0,0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: 0 26px 60px rgba(0,0,0,0.13);
border-color: var(--primary);
}
.contact-form-card {
padding: 42px;
}
.contact-form-card h2,
.contact-info-card h2,
.map-text h2 {
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 1.15;
color: var(--dark);
margin-bottom: 14px;
}
.contact-lead {
color: var(--gray);
margin-bottom: 30px;
max-width: 620px;
}
.modern-contact-form {
display: grid;
gap: 18px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.modern-contact-form .form-group {
display: flex;
flex-direction: column;
}
.modern-contact-form label {
font-weight: 800;
color: var(--dark);
margin-bottom: 8px;
font-size: 0.95rem;
}
.modern-contact-form input,
.modern-contact-form textarea {
width: 100%;
border: 1px solid var(--gray-light);
border-radius: 16px;
padding: 15px 16px;
font-family: inherit;
font-size: 1rem;
background: #f8fafc;
color: var(--dark);
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.modern-contact-form textarea {
resize: vertical;
min-height: 150px;
}
.modern-contact-form input:focus,
.modern-contact-form textarea:focus {
outline: none;
background: #fff;
border-color: #f97316;
box-shadow: 0 0 0 4px rgba(249,115,22,0.13);
}
.contact-submit {
border: none;
cursor: pointer;
margin-top: 8px;
width: fit-content;
}
.form-message {
min-height: 24px;
margin-top: 6px;
font-weight: 700;
}
.form-message.success {
color: #16a34a;
}
.form-message.error {
color: #dc2626;
}
.contact-side {
display: grid;
gap: 24px;
}
.contact-info-card {
padding: 34px;
}
.contact-info-list {
display: grid;
gap: 14px;
margin-top: 26px;
}
.contact-info-item {
display: flex;
gap: 14px;
align-items: center;
padding: 16px;
border-radius: 18px;
background: var(--light);
border: 1px solid var(--gray-light);
text-decoration: none;
color: var(--dark);
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.contact-info-item:hover {
transform: translateX(6px);
border-color: #f97316;
background: #fff7ed;
}
.contact-info-item i {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #f97316, #fbbf24);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-item span {
display: flex;
flex-direction: column;
font-weight: 800;
}
.contact-info-item small {
color: var(--gray);
font-weight: 700;
margin-bottom: 2px;
}
.contact-mini-cta {
padding: 30px;
background:
radial-gradient(circle at top right, rgba(249,115,22,0.18), transparent 45%),
#fff;
}
.contact-mini-cta h3 {
color: var(--dark);
font-size: 1.35rem;
}
.contact-mini-cta p {
color: var(--gray);
margin-bottom: 20px;
}
.contact-map-section {
padding: 0 0 90px;
background: var(--light);
}
.contact-map-card {
background: #fff;
border: 1px solid var(--gray-light);
border-radius: 32px;
padding: 28px;
box-shadow: 0 18px 45px rgba(0,0,0,0.08);
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 28px;
align-items: center;
}
.map-text p {
color: var(--gray);
}
.modern-map iframe {
border-radius: 24px;
box-shadow: 0 18px 38px rgba(0,0,0,0.12);
}
/* Dark mode */
.dark-theme .contact-modern-page,
.dark-theme .contact-modern-section,
.dark-theme .contact-map-section {
background: var(--light);
}
.dark-theme .contact-card,
.dark-theme .contact-map-card {
background: #232a36;
border-color: #3b4252;
color: #e0e7ef;
box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.dark-theme .contact-card:hover,
.dark-theme .contact-map-card:hover {
background: #181c24;
border-color: #a3b8ef;
box-shadow: 0 26px 65px rgba(0,0,0,0.55);
}
.dark-theme .contact-form-card h2,
.dark-theme .contact-info-card h2,
.dark-theme .contact-mini-cta h3,
.dark-theme .map-text h2,
.dark-theme .modern-contact-form label {
color: #e0e7ef;
}
.dark-theme .contact-lead,
.dark-theme .contact-mini-cta p,
.dark-theme .map-text p,
.dark-theme .contact-info-item small {
color: #b6bedc;
}
.dark-theme .modern-contact-form input,
.dark-theme .modern-contact-form textarea {
background: #181c24;
color: #e0e7ef;
border-color: #3b4252;
}
.dark-theme .modern-contact-form input:focus,
.dark-theme .modern-contact-form textarea:focus {
background: #232a36;
border-color: #a3b8ef;
box-shadow: 0 0 0 4px rgba(163,184,239,0.14);
}
.dark-theme .contact-info-item {
background: #181c24;
border-color: #3b4252;
color: #e0e7ef;
}
.dark-theme .contact-info-item:hover {
background: #232a36;
border-color: #a3b8ef;
}
.dark-theme .contact-info-item i {
background: linear-gradient(135deg, #7991d3, #a3b8ef);
color: #232a36;
}
.dark-theme .contact-mini-cta {
background:
radial-gradient(circle at top right, rgba(163,184,239,0.18), transparent 45%),
#232a36;
}
/* Responsive */
@media (max-width: 950px) {
.contact-modern-grid,
.contact-map-card {
grid-template-columns: 1fr;
}
.contact-form-card,
.contact-info-card {
padding: 30px 24px;
}
}
@media (max-width: 650px) {
.contact-modern-section {
padding: 60px 0;
}
.contact-map-section {
padding-bottom: 60px;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-submit {
width: 100%;
text-align: center;
}
.contact-map-card {
padding: 20px;
border-radius: 24px;
}
.modern-map iframe {
height: 300px;
}
}
/* ===== KAPCSOLAT HERO VÉGLEGES FIX ===== */
.contact-hero {
min-height: calc(100vh - var(--header-height));
padding: 120px 20px 80px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background:
linear-gradient(to right, rgba(0,0,0,0.72), rgba(0,0,0,0.38)),
url("../Kepek/hatter01.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.contact-hero .hero-content {
max-width: 850px;
margin: 0 auto;
z-index: 2;
}
.contact-hero h1 {
display: flex;
flex-direction: column;
gap: 8px;
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 1.15;
color: #fff;
margin-bottom: 22px;
}
.contact-hero h1 span {
display: block;
color: #f97316;
}
.contact-hero p {
max-width: 680px;
margin: 0 auto 34px;
color: #fff;
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.7;
font-weight: 500;
}
/* Dark mode */
.dark-theme .contact-hero {
background:
linear-gradient(to right, rgba(24,28,36,0.88), rgba(24,28,36,0.58)),
url("../Kepek/hatter01.png");
background-size: cover;
background-position: center;
}
.dark-theme .contact-hero h1 {
color: #e0e7ef;
}
.dark-theme .contact-hero h1 span {
color: #a3b8ef;
}
.dark-theme .contact-hero p {
color: #e0e7ef;
}
/* Mobil */
@media (max-width: 768px) {
.contact-hero {
min-height: calc(100vh - var(--header-height));
padding: 100px 18px 70px;
}
.contact-hero h1 {
gap: 6px;
}
}
/* ===== THEME FLASH FIX ===== */
html,
body {
background: var(--light);
color: var(--dark);
transition: background-color 0.25s ease, color 0.25s ease;
}
/* ha a dark-theme class body-n van */
body.dark-theme {
--primary: #a3b8ef;
--primary-dark: #7991d3;
--secondary: #e0e7ef;
--dark: #f8fafc;
--light: #181c24;
--gray: #b6bedc;
--gray-light: #232a36;
background: var(--light) !important;
color: var(--dark) !important;
}
/* régi hibás általános section szabály felülírása */
body.dark-theme section,
body.dark-theme .section,
body.dark-theme .gallery-page,
body.dark-theme .gallery-section,
body.dark-theme .before-after-gallery-section,
body.dark-theme .reference-stories,
body.dark-theme .testimonials,
body.dark-theme .work-process,
body.dark-theme .more-references,
body.dark-theme .contact-modern-page,
body.dark-theme .contact-modern-section,
body.dark-theme .contact-map-section {
background: var(--light) !important;
}
/* világos mód biztos alap */
body:not(.dark-theme) {
background: #f8fafc !important;
color: #1e293b !important;
}
body:not(.dark-theme) section,
body:not(.dark-theme) .section {
background-color: inherit;
}
/* ========================================
INDEX HERO – BAL SZÖVEG / JOBB CTA
======================================== */
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 120px 60px 80px;
}
/* teljes layout */
.hero .hero-content {
width: 100%;
max-width: 1400px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
position: relative;
z-index: 3;
}
/* BAL OLDAL */
.hero .hero-left {
max-width: 720px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* badge */
.hero .hero-badge {
display: inline-block;
padding: 8px 18px;
margin-bottom: 24px;
border-radius: 999px;
background: linear-gradient(135deg,#ff8c2f,#ffb347);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
/* cím */
.hero .hero-left h1 {
font-size: clamp(3rem, 5vw, 5rem);
line-height: 1.05;
font-weight: 800;
margin-bottom: 26px;
color: #fff;
letter-spacing: -0.04em;
max-width: 700px;
}
/* MINDIG törjön */
.hero .hero-left h1 span {
display: block;
}
/* highlight */
.hero .hero-left .highlight {
background: linear-gradient(
90deg,
#ffb347 0%,
#ffd76a 45%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* leírás */
.hero .hero-left p {
font-size: 1.1rem;
line-height: 1.8;
color: rgba(255,255,255,0.92);
max-width: 620px;
background: none !important;
-webkit-text-fill-color: unset !important;
margin: 0;
}
/* ========================================
JOBB OLDALI CTA
======================================== */
.hero .hero-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
/* gomb */
.hero .hero-right .btn {
padding: 18px 34px;
border-radius: 999px;
font-size: 1rem;
font-weight: 800;
background: #fff;
color: #111;
box-shadow:
0 18px 45px rgba(0,0,0,0.25);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.hero .hero-right .btn:hover {
transform: translateY(-4px);
box-shadow:
0 28px 60px rgba(0,0,0,0.35);
}
/* ========================================
DARK MODE
======================================== */
.dark-theme .hero .hero-right .btn {
background: #a3b8ef;
color: #181c24;
}
.dark-theme .hero .hero-badge {
background: linear-gradient(
135deg,
#7991d3,
#a3b8ef
);
color: #181c24;
}
.dark-theme .hero .hero-left .highlight {
background: linear-gradient(
90deg,
#a3b8ef,
#dbe7ff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ========================================
MOBILE
======================================== */
@media (max-width: 900px) {
.hero {
padding: 110px 24px 70px;
}
.hero .hero-content {
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.hero .hero-right {
width: 100%;
justify-content: flex-start;
}
.hero .hero-left h1 {
font-size: clamp(2.2rem, 9vw, 3.5rem);
}
.hero .hero-left p {
font-size: 1rem;
}
}
/* =========================================
CINEMATIC HERO LAYOUT
========================================= */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: stretch;
padding: 0;
overflow: hidden;
}
/* TELJES HERO CONTENT */
.hero .hero-content {
position: relative;
z-index: 3;
width: 100%;
min-height: 100vh;
padding:
clamp(110px, 8vw, 140px)
clamp(28px, 5vw, 90px)
clamp(55px, 5vw, 70px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* =========================================
BAL FELSŐ SZÖVEG
========================================= */
.hero .hero-left {
max-width: 760px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* badge */
.hero .hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 999px;
margin-bottom: 28px;
background:
linear-gradient(
135deg,
rgba(255,140,47,0.95),
rgba(255,179,71,0.95)
);
backdrop-filter: blur(10px);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow:
0 10px 30px rgba(0,0,0,0.22);
}
/* hero cím */
.hero .hero-left h1 {
display: flex;
flex-direction: column;
gap: 4px;
font-size: clamp(3.2rem, 6vw, 6rem);
line-height: 0.95;
font-weight: 900;
letter-spacing: -0.06em;
margin: 0 0 26px;
color: #fff;
text-shadow:
0 10px 35px rgba(0,0,0,0.38);
}
/* sorok */
.hero .hero-left h1 span {
display: block;
}
/* highlight */
.hero .hero-left .highlight {
background:
linear-gradient(
90deg,
#ffb347 0%,
#ffd76a 40%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* leírás */
.hero .hero-left p {
max-width: 620px;
font-size: 1.12rem;
line-height: 1.85;
color: rgba(255,255,255,0.9);
font-weight: 500;
margin: 0;
background: none !important;
-webkit-text-fill-color: unset !important;
text-shadow:
0 4px 20px rgba(0,0,0,0.3);
}
/* =========================================
JOBB ALSÓ CTA
========================================= */
.hero .hero-right {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
/* cinematic floating button */
.hero .hero-right .btn {
position: relative;
padding: 20px 38px;
border-radius: 999px;
background:
rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
border:
1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 1rem;
font-weight: 800;
letter-spacing: .02em;
box-shadow:
0 18px 55px rgba(0,0,0,0.34);
transition:
transform .28s ease,
background .28s ease,
box-shadow .28s ease;
}
/* glow */
.hero .hero-right .btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.12),
rgba(255,255,255,0)
);
pointer-events: none;
}
/* hover */
.hero .hero-right .btn:hover {
transform:
translateY(-5px)
scale(1.02);
background:
rgba(255,255,255,0.18);
box-shadow:
0 28px 70px rgba(0,0,0,0.42);
}
/* =========================================
DARK MODE
========================================= */
.dark-theme .hero .hero-badge {
background:
linear-gradient(
135deg,
rgba(121,145,211,0.95),
rgba(163,184,239,0.95)
);
color: #181c24;
}
.dark-theme .hero .hero-left .highlight {
background:
linear-gradient(
90deg,
#a3b8ef,
#dbe7ff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dark-theme .hero .hero-right .btn {
background:
rgba(24,28,36,0.45);
border:
1px solid rgba(163,184,239,0.16);
color: #e0e7ef;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 900px) {
.hero .hero-content {
justify-content: center;
gap: 60px;
padding:
120px 24px 60px;
}
.hero .hero-left h1 {
font-size: clamp(2.3rem, 11vw, 4rem);
line-height: 1;
}
.hero .hero-left p {
font-size: 1rem;
}
.hero .hero-right {
justify-content: flex-start;
}
.hero .hero-right .btn {
width: 100%;
justify-content: center;
text-align: center;
}
}
/* =========================================
HERO FIX – TEDD A CSS LEGVÉGÉRE
========================================= */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
}
/* HERO CONTENT */
.hero .hero-content {
position: relative;
z-index: 3;
width: 100%;
max-width: 1400px;
min-height: 100vh;
margin: 0 auto;
padding:
clamp(110px, 8vw, 140px)
clamp(28px, 5vw, 90px)
clamp(55px, 5vw, 70px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
/* BAL OLDAL */
.hero .hero-left {
max-width: 760px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* BADGE */
.hero .hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 999px;
margin-bottom: 28px;
background: linear-gradient(
135deg,
rgba(255,140,47,0.95),
rgba(255,179,71,0.95)
);
backdrop-filter: blur(10px);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow:
0 10px 30px rgba(0,0,0,0.22);
}
/* HERO CÍM */
.hero .hero-left h1 {
display: flex;
flex-direction: column;
gap: 6px;
font-size: clamp(3rem, 5vw, 5.8rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: -0.05em;
margin: 0 0 26px;
color: #fff;
text-shadow:
0 10px 35px rgba(0,0,0,0.38);
}
/* SOROK */
.hero .hero-left h1 span {
display: block;
}
/* KIEMELT SZÖVEG */
.hero .hero-left .highlight {
background: linear-gradient(
90deg,
#ffb347 0%,
#ffd76a 40%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* LEÍRÁS */
.hero .hero-left p {
max-width: 620px;
font-size: 1.1rem;
line-height: 1.8;
color: rgba(255,255,255,0.92);
font-weight: 500;
margin: 0;
background: none !important;
-webkit-text-fill-color: unset !important;
text-shadow:
0 4px 20px rgba(0,0,0,0.3);
}
/* JOBB OLDAL */
.hero .hero-right {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
}
/* CTA GOMB */
.hero .hero-right .btn {
position: relative;
padding: 20px 38px;
border-radius: 999px;
background:
rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
border:
1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 1rem;
font-weight: 800;
letter-spacing: .02em;
box-shadow:
0 18px 55px rgba(0,0,0,0.34);
transition:
transform .28s ease,
background .28s ease,
box-shadow .28s ease;
}
/* GOMB HOVER */
.hero .hero-right .btn:hover {
transform:
translateY(-5px)
scale(1.02);
background:
rgba(255,255,255,0.18);
box-shadow:
0 28px 70px rgba(0,0,0,0.42);
}
/* DARK MODE */
.dark-theme .hero .hero-badge {
background:
linear-gradient(
135deg,
rgba(121,145,211,0.95),
rgba(163,184,239,0.95)
);
color: #181c24;
}
.dark-theme .hero .hero-left .highlight {
background:
linear-gradient(
90deg,
#a3b8ef,
#dbe7ff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dark-theme .hero .hero-right .btn {
background:
rgba(24,28,36,0.45);
border:
1px solid rgba(163,184,239,0.16);
color: #e0e7ef;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 900px) {
.hero .hero-content {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 40px;
padding:
120px 24px 60px;
}
.hero .hero-left {
max-width: 100%;
}
.hero .hero-left h1 {
font-size: clamp(2.3rem, 11vw, 4rem);
line-height: 1.05;
}
.hero .hero-left p {
font-size: 1rem;
}
.hero .hero-right {
width: 100%;
justify-content: flex-start;
}
.hero .hero-right .btn {
width: 100%;
text-align: center;
justify-content: center;
}
}/* =========================================
HERO – SAROK ELRENDEZÉS
TEDD A CSS LEGVÉGÉRE
========================================= */
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* teljes hero */
.hero .hero-content {
position: relative;
z-index: 5;
width: 100%;
min-height: 100vh;
padding:
clamp(110px, 8vw, 140px)
clamp(28px, 5vw, 90px)
clamp(45px, 4vw, 60px);
display: flex;
flex-direction: column;
}
/* =========================================
BAL FELSŐ SZÖVEG
========================================= */
.hero .hero-left {
margin-top: 10px;
max-width: 760px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* badge */
.hero .hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
margin-bottom: 28px;
border-radius: 999px;
background: linear-gradient(
135deg,
rgba(255,140,47,0.95),
rgba(255,179,71,0.95)
);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
backdrop-filter: blur(10px);
box-shadow:
0 10px 30px rgba(0,0,0,0.22);
}
/* cím */
.hero .hero-left h1 {
display: flex;
flex-direction: column;
gap: 6px;
font-size: clamp(3rem, 6vw, 6rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.05em;
margin: 0 0 26px;
color: #fff;
text-shadow:
0 10px 35px rgba(0,0,0,0.38);
}
/* sorok */
.hero .hero-left h1 span {
display: block;
}
/* highlight */
.hero .hero-left .highlight {
background: linear-gradient(
90deg,
#ffb347 0%,
#ffd76a 45%,
#ffffff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* leírás */
.hero .hero-left p {
max-width: 620px;
font-size: 1.1rem;
line-height: 1.85;
color: rgba(255,255,255,0.92);
font-weight: 500;
margin: 0;
background: none !important;
-webkit-text-fill-color: unset !important;
text-shadow:
0 4px 20px rgba(0,0,0,0.3);
}
/* =========================================
JOBB ALSÓ CTA
========================================= */
.hero .hero-right {
position: absolute;
right: clamp(28px, 5vw, 90px);
bottom: clamp(45px, 4vw, 60px);
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
/* gomb */
.hero .hero-right .btn {
padding: 20px 38px;
border-radius: 999px;
background:
rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
border:
1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 1rem;
font-weight: 800;
letter-spacing: .02em;
box-shadow:
0 18px 55px rgba(0,0,0,0.34);
transition:
transform .28s ease,
background .28s ease,
box-shadow .28s ease;
}
/* hover */
.hero .hero-right .btn:hover {
transform:
translateY(-5px)
scale(1.02);
background:
rgba(255,255,255,0.18);
box-shadow:
0 28px 70px rgba(0,0,0,0.42);
}
/* =========================================
DARK MODE
========================================= */
.dark-theme .hero .hero-badge {
background:
linear-gradient(
135deg,
rgba(121,145,211,0.95),
rgba(163,184,239,0.95)
);
color: #181c24;
}
.dark-theme .hero .hero-left .highlight {
background:
linear-gradient(
90deg,
#a3b8ef,
#dbe7ff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dark-theme .hero .hero-right .btn {
background:
rgba(24,28,36,0.45);
border:
1px solid rgba(163,184,239,0.16);
color: #e0e7ef;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 900px) {
.hero .hero-content {
justify-content: center;
padding:
120px 24px 90px;
}
.hero .hero-left {
max-width: 100%;
}
.hero .hero-left h1 {
font-size: clamp(2.3rem, 11vw, 4rem);
line-height: 1.05;
}
.hero .hero-left p {
font-size: 1rem;
}
/* gomb ne legyen absolute mobilon */
.hero .hero-right {
position: static;
margin-top: 42px;
width: 100%;
justify-content: flex-start;
}
.hero .hero-right .btn {
width: 100%;
text-align: center;
}
}/* =========================================
HERO FIX – BAL FELSŐ SZÖVEG
JOBB ALSÓ GOMB
========================================= */
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.hero .hero-content {
position: relative;
z-index: 5;
width: 100%;
height: 100vh;
padding:
120px
clamp(28px, 5vw, 90px)
60px;
display: flex;
flex-direction: column;
justify-content: flex-start; /* EZ TOLJA FELÜLRE */
align-items: flex-start;
}
/* BAL FELSŐ BLOKK */
.hero .hero-left {
position: absolute;
top: 120px;
left: clamp(28px, 5vw, 90px);
max-width: 760px;
}
/* JOBB ALSÓ GOMB */
.hero .hero-right {
position: absolute;
right: clamp(28px, 5vw, 90px);
bottom: 60px;
}
/* =========================================
SZÖVEGEK
========================================= */
.hero .hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
margin-bottom: 28px;
border-radius: 999px;
background: linear-gradient(
135deg,
rgba(255,140,47,0.95),
rgba(255,179,71,0.95)
);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.hero .hero-left h1 {
font-size: clamp(3rem, 6vw, 6rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.05em;
margin: 0 0 26px;
color: #fff;
text-shadow:
0 10px 35px rgba(0,0,0,0.38);
}
.hero .hero-left p {
max-width: 620px;
font-size: 1.1rem;
line-height: 1.85;
color: rgba(255,255,255,0.92);
margin: 0;
}
/* =========================================
GOMB
========================================= */
.hero .hero-right .btn {
padding: 20px 38px;
border-radius: 999px;
background:
rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
border:
1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 1rem;
font-weight: 800;
box-shadow:
0 18px 55px rgba(0,0,0,0.34);
transition:
transform .28s ease,
background .28s ease;
}
.hero .hero-right .btn:hover {
transform:
translateY(-5px);
background:
rgba(255,255,255,0.18);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 900px) {
.hero .hero-left {
position: relative;
top: unset;
left: unset;
max-width: 100%;
}
.hero .hero-right {
position: relative;
right: unset;
bottom: unset;
margin-top: 40px;
width: 100%;
}
.hero .hero-right .btn {
width: 100%;
}
}/* =========================================
BAL FELSŐ SZÖVEG — SZÉP SAROK ELRENDEZÉS
========================================= */
.hero .hero-left{
position:absolute;
top:clamp(70px,8vh,130px);
left:clamp(28px,5vw,90px);
max-width:650px;
display:flex;
flex-direction:column;
align-items:flex-start;
}
/* kis badge */
.hero .hero-badge{
display:inline-flex;
align-items:center;
padding:10px 18px;
margin-bottom:26px;
border-radius:999px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.16);
color:#fff;
font-size:.78rem;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
box-shadow:
0 10px 30px rgba(0,0,0,.18);
}
/* cím */
.hero .hero-left h1{
margin:0 0 24px;
font-size:clamp(3.2rem,6vw,6.5rem);
line-height:.95;
font-weight:900;
letter-spacing:-0.06em;
color:#fff;
text-shadow:
0 10px 35px rgba(0,0,0,.35);
}
/* kiemelt sor */
.hero .hero-left h1 span{
display:block;
margin-top:8px;
background:linear-gradient(
135deg,
#ffffff,
#ffd6a3
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* leírás */
.hero .hero-left p{
max-width:520px;
margin:0;
font-size:1.08rem;
line-height:1.9;
color:rgba(255,255,255,.88);
text-shadow:
0 4px 18px rgba(0,0,0,.25);
}
/* =========================================
JOBB ALSÓ GOMB
========================================= */
.hero .hero-right{
position:absolute;
right:clamp(28px,5vw,90px);
bottom:clamp(40px,6vh,70px);
}
/* =========================================
MOBILE
========================================= */
@media(max-width:900px){
.hero .hero-left{
top:90px;
left:24px;
right:24px;
max-width:unset;
}
.hero .hero-left h1{
font-size:3.2rem;
}
.hero .hero-left p{
max-width:100%;
}
}/* =========================================
INDEX HERO – BAL FELSŐ SAROK + FERDE GOMB
========================================= */
.hero {
position: relative;
min-height: calc(100vh - var(--header-height));
overflow: hidden;
}
.hero .hero-content {
position: relative;
z-index: 5;
width: 100%;
height: calc(100vh - var(--header-height));
padding: 0;
}
/* SZÖVEG BAL FELSŐ SAROK KÖZELÉBEN */
.hero .hero-left {
position: absolute;
top: clamp(70px, 10vh, 115px);
left: clamp(38px, 8vw, 150px);
max-width: 620px;
}
/* BADGE */
.hero .hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
margin-bottom: 34px;
border-radius: 999px;
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(12px);
color: #fff;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: .11em;
text-transform: uppercase;
}
/* CÍM */
.hero .hero-left h1 {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 0 24px;
font-size: clamp(3rem, 5.2vw, 5.6rem);
line-height: 0.98;
font-weight: 900;
letter-spacing: -0.055em;
color: #f3eadf;
text-shadow: 0 14px 35px rgba(0,0,0,0.42);
}
/* MINDHÁROM SOR UGYANONNAN INDUL */
.hero .hero-left h1 span {
display: block;
margin: 0;
padding: 0;
text-align: left;
}
/* MODERN + EGY KÉZBŐL */
.hero .hero-left h1 span:not(.highlight) {
color: #f3eadf;
}
/* FELÚJÍTÁS */
.hero .hero-left h1 .highlight {
background: linear-gradient(90deg, #f0a735 0%, #f7d98b 55%, #f3eadf 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* LEÍRÁS */
.hero .hero-left p {
max-width: 560px;
margin: 18px 0 0;
font-size: clamp(0.95rem, 1.25vw, 1.15rem);
line-height: 1.75;
color: rgba(255,255,255,0.9);
font-weight: 500;
font-style: italic;
text-align: center;
background: none !important;
-webkit-text-fill-color: unset !important;
text-shadow: 0 5px 18px rgba(0,0,0,0.35);
}
/* GOMB – JOBB ALSÓ SAROK, SRÉGEN */
.hero .hero-right {
position: absolute;
right: clamp(42px, 8vw, 145px);
bottom: clamp(34px, 7vh, 75px);
transform: rotate(-3deg);
transform-origin: center;
}
.hero .hero-right .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 22px 44px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(16px);
color: #fff;
font-size: 1.05rem;
font-weight: 900;
box-shadow: 0 24px 65px rgba(0,0,0,0.38);
transition: transform .25s ease, background .25s ease;
}
.hero .hero-right .btn:hover {
transform: translateY(-5px) scale(1.03);
background: rgba(255,255,255,0.22);
}
/* MOBIL */
@media (max-width: 900px) {
.hero .hero-left {
top: 90px;
left: 24px;
right: 24px;
max-width: none;
}
.hero .hero-left h1 {
font-size: clamp(2.5rem, 12vw, 4rem);
}
.hero .hero-left p {
text-align: left;
max-width: 100%;
}
.hero .hero-right {
left: 24px;
right: 24px;
bottom: 45px;
transform: rotate(-2deg);
}
.hero .hero-right .btn {
width: 100%;
}
}
/* =========================================
SZÖVEG BAL FELSŐ SAROK
========================================= */
.hero .hero-left{
position:absolute;
top:70px;
left:60px;
max-width:620px;
z-index:5;
}
/* =========================================
GOMB JOBB ALSÓ SAROK
========================================= */
.hero .hero-right{
position:absolute;
right:60px;
bottom:45px;
z-index:5;
transform:rotate(-3deg);
}
/* =========================================
MOBIL
========================================= */
@media(max-width:900px){
.hero .hero-left{
top:90px;
left:24px;
right:24px;
max-width:unset;
}
.hero .hero-right{
right:24px;
bottom:24px;
left:24px;
transform:rotate(-2deg);
}
.hero .hero-right .btn{
width:100%;
}
}.hero .hero-right{
position:absolute;
right:90px;
bottom:95px;
z-index:5;
transform:rotate(-3deg);
}
.hero .hero-left p{
max-width: 560px;
margin: 22px 0 0;
padding: 18px 22px;
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.85;
color: rgba(255,255,255,0.92);
font-weight: 500;
letter-spacing: 0.01em;
background:
rgba(255,255,255,0.08);
border:
1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(14px);
border-radius: 22px;
box-shadow:
0 12px 35px rgba(0,0,0,0.22);
text-shadow:
0 2px 10px rgba(0,0,0,0.28);
position: relative;
}
#ajanlat{
scroll-margin-top: -50px;
}
html.dark-theme {
--primary: #a3b8ef;
--primary-dark: #7991d3;
--secondary: #e0e7ef;
--dark: #f8fafc;
--light: #181c24;
--gray: #b6bedc;
--gray-light: #232a36;
background: #181c24;
color: #f8fafc;
}
html.dark-theme body {
background: #181c24 !important;
color: #f8fafc !important;
}
/* ===== KAPCSOLAT HERO = INDEX HERO STÍLUS ===== */
.contact-hero {
position: relative;
min-height: calc(100vh - var(--header-height));
overflow: hidden;
background: none !important;
padding: 0 !important;
}
.contact-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../Kepek/hatter01.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(5px) brightness(0.85);
transform: scale(1.04);
z-index: 0;
}
.contact-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0,0,0,0.72),
rgba(0,0,0,0.35)
);
z-index: 1;
}
.contact-hero .hero-content {
position: relative;
z-index: 5;
width: 100%;
height: calc(100vh - var(--header-height));
padding: 0;
}
/* bal felső szöveg */
.contact-hero .hero-left {
position: absolute;
top: 70px;
left: 60px;
max-width: 620px;
z-index: 5;
}
/* cím */
.contact-hero h1 {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 0 24px;
font-size: clamp(3rem, 5.2vw, 5.6rem);
line-height: 0.98;
font-weight: 900;
letter-spacing: -0.055em;
color: #f3eadf;
text-shadow: 0 14px 35px rgba(0,0,0,0.42);
}
.contact-hero h1 span {
display: block;
background: linear-gradient(90deg, #f0a735 0%, #f7d98b 55%, #f3eadf 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* leírás */
.contact-hero p {
max-width: 560px;
margin: 18px 0 0;
padding: 18px 22px;
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.85;
color: rgba(255,255,255,0.92);
font-weight: 500;
letter-spacing: 0.01em;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(14px);
border-radius: 22px;
box-shadow: 0 12px 35px rgba(0,0,0,0.22);
text-shadow: 0 2px 10px rgba(0,0,0,0.28);
-webkit-text-fill-color: unset !important;
}
/* gomb jobb alsó sarokban */
.contact-hero .hero-right {
position: absolute;
right: 60px;
bottom: 45px;
z-index: 5;
transform: rotate(-3deg);
}
.contact-hero .hero-right .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 22px 44px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(16px);
color: #fff;
font-size: 1.05rem;
font-weight: 900;
box-shadow: 0 24px 65px rgba(0,0,0,0.38);
transition: transform .25s ease, background .25s ease;
}
.contact-hero .hero-right .btn:hover {
transform: translateY(-5px) scale(1.03);
background: rgba(255,255,255,0.22);
}
/* dark mode */
.dark-theme .contact-hero::after {
background: linear-gradient(
to right,
rgba(24,28,36,0.88),
rgba(24,28,36,0.55)
);
}
.dark-theme .contact-hero h1 span {
background: linear-gradient(90deg, #a3b8ef, #dbe7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* mobil */
@media (max-width: 900px) {
.contact-hero .hero-left {
top: 90px;
left: 24px;
right: 24px;
max-width: none;
}
.contact-hero h1 {
font-size: clamp(2.5rem, 12vw, 4rem);
}
.contact-hero .hero-right {
left: 24px;
right: 24px;
bottom: 24px;
transform: rotate(-2deg);
}
.contact-hero .hero-right .btn {
width: 100%;
}
}
/* =========================================
KAPCSOLAT HERO ÚJ DESIGN
========================================= */
.contact-hero-new {
min-height: calc(100vh - var(--header-height));
background:
radial-gradient(circle at 15% 25%, rgba(249,115,22,0.18), transparent 34%),
radial-gradient(circle at 85% 75%, rgba(255,180,80,0.16), transparent 36%),
linear-gradient(135deg, #fff7ed 0%, #f8fafc 48%, #eef2f7 100%);
overflow: hidden;
position: relative;
}
.contact-hero-inner {
min-height: calc(100vh - var(--header-height));
max-width: 1240px;
margin: 0 auto;
padding: 120px 24px 80px;
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;
gap: 70px;
}
/* BAL SZÖVEG */
.contact-hero-text {
max-width: 620px;
position: relative;
z-index: 2;
}
.contact-hero-badge {
display: inline-flex;
align-items: center;
padding: 9px 18px;
margin-bottom: 24px;
border-radius: 999px;
background: linear-gradient(135deg, #ff8c2f, #ffb347);
color: #fff;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
box-shadow: 0 12px 28px rgba(249,115,22,0.24);
}
.contact-hero-text h1 {
margin: 0 0 24px;
font-size: clamp(2.8rem, 5vw, 5rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.055em;
color: #1d1d1d;
}
.contact-hero-text h1 span {
display: block;
background: linear-gradient(90deg, #f97316, #ffb347 55%, #1d1d1d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contact-hero-text p {
max-width: 560px;
margin: 0 0 34px;
padding: 20px 22px;
font-size: 1.08rem;
line-height: 1.85;
font-weight: 500;
color: #475569;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(249,115,22,0.12);
border-radius: 24px;
box-shadow: 0 18px 45px rgba(15,23,42,0.08);
backdrop-filter: blur(14px);
}
/* GOMB + NOTE */
.contact-hero-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.contact-hero-btn {
padding: 18px 34px;
border-radius: 999px;
background: #3e3b38;
color: #fff;
font-weight: 900;
text-decoration: none;
box-shadow: 0 16px 38px rgba(0,0,0,0.16);
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.contact-hero-btn:hover {
transform: translateY(-4px);
background: #f97316;
box-shadow: 0 22px 52px rgba(249,115,22,0.26);
}
.contact-hero-note {
color: #64748b;
font-weight: 800;
font-size: 0.95rem;
}
/* JOBB OLDALI KÉP */
.contact-hero-visual {
position: relative;
height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-image-main {
width: min(430px, 100%);
height: 520px;
border-radius: 36px;
overflow: hidden;
background: #fff;
border: 10px solid rgba(255,255,255,0.78);
box-shadow:
0 30px 80px rgba(0,0,0,0.18),
0 12px 30px rgba(249,115,22,0.12);
transform: rotate(3deg);
}
.contact-image-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-hero-visual::before {
content: "";
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgba(249,115,22,0.18);
filter: blur(45px);
z-index: 0;
}
.contact-floating-card {
position: absolute;
left: 0;
bottom: 70px;
padding: 18px 22px;
background: rgba(255,255,255,0.78);
border: 1px solid rgba(249,115,22,0.14);
border-radius: 22px;
backdrop-filter: blur(14px);
box-shadow: 0 18px 45px rgba(15,23,42,0.12);
z-index: 3;
}
.contact-floating-card strong {
display: block;
color: #f97316;
font-size: 1.1rem;
}
.contact-floating-card span {
color: #475569;
font-weight: 700;
}
/* DARK MODE */
.dark-theme .contact-hero-new {
background:
radial-gradient(circle at 15% 25%, rgba(163,184,239,0.20), transparent 34%),
radial-gradient(circle at 85% 75%, rgba(121,145,211,0.16), transparent 36%),
linear-gradient(135deg, #181c24 0%, #232a36 55%, #181c24 100%);
}
.dark-theme .contact-hero-text h1 {
color: #e0e7ef;
}
.dark-theme .contact-hero-text h1 span {
background: linear-gradient(90deg, #a3b8ef, #dbe7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dark-theme .contact-hero-text p,
.dark-theme .contact-floating-card {
background: rgba(35,42,54,0.72);
border-color: rgba(163,184,239,0.16);
color: #b6bedc;
box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.dark-theme .contact-hero-badge {
background: linear-gradient(135deg, #7991d3, #a3b8ef);
color: #181c24;
box-shadow: 0 10px 28px rgba(163,184,239,0.28);
}
.dark-theme .contact-hero-btn {
background: #a3b8ef;
color: #181c24;
}
.dark-theme .contact-hero-btn:hover {
background: #7991d3;
color: #fff;
}
.dark-theme .contact-hero-note,
.dark-theme .contact-floating-card span {
color: #b6bedc;
}
.dark-theme .contact-floating-card strong {
color: #a3b8ef;
}
/* MOBIL */
@media (max-width: 900px) {
.contact-hero-inner {
grid-template-columns: 1fr;
padding: 105px 24px 65px;
gap: 46px;
}
.contact-hero-text {
max-width: 100%;
}
.contact-hero-text h1 {
font-size: clamp(2.4rem, 12vw, 4rem);
}
.contact-hero-text p {
max-width: 100%;
}
.contact-hero-actions {
width: 100%;
}
.contact-hero-btn {
width: 100%;
text-align: center;
}
.contact-hero-note {
width: 100%;
text-align: center;
}
.contact-hero-visual {
height: auto;
}
.contact-image-main {
width: 100%;
height: 360px;
transform: rotate(0deg);
}
.contact-floating-card {
left: 18px;
bottom: 18px;
}
}
/* ===== UGRÁLÓ FLOATING CARD ===== */
.contact-floating-card {
animation: floatingJump 2.8s ease-in-out infinite;
transform-origin: center bottom;
}
@keyframes floatingJump {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-10px);
}
35% {
transform: translateY(0px);
}
50% {
transform: translateY(-18px);
}
65% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
.contact-floating-card {
animation: floatingSoft 4s ease-in-out infinite;
}
@keyframes floatingSoft {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-14px);
}
100% {
transform: translateY(0px);
}
}
.logo-text {
display: flex;
flex-direction: column;
align-items: center;
}
.logo-name {
font-size: 32px;
font-weight: bold;
}
.tagline {
font-size: 12px;
letter-spacing: 2px;
text-align: center;
}
.logo-text {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.logo-name {
font-size: 34px;
font-weight: 700;
letter-spacing: 0.5px;
}
.text-dark {
color: #1f1f1f;
}
.text-gold {
color: #c8a96b;
margin-left: 4px;
}
.tagline {
margin-top: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
color: #777;
}
/* ===== KALKULÁTOR ===== */
.calculator-modern-section {
padding: 40px 0 100px;
}
.calculator-modern-card {
display: grid;
grid-template-columns: 1fr 480px;
gap: 50px;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.03),
rgba(255,255,255,0.01)
);
border: 1px solid var(--border-color);
border-radius: 32px;
padding: 60px;
backdrop-filter: blur(16px);
overflow: hidden;
position: relative;
}
.calculator-modern-card::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
background: rgba(212, 175, 55, 0.08);
border-radius: 50%;
filter: blur(80px);
top: -120px;
right: -120px;
}
.calculator-left h2 {
font-size: 48px;
line-height: 1.1;
margin: 16px 0 22px;
}
.calculator-left h2 span {
color: var(--primary-color);
}
.calculator-left p {
color: var(--text-light);
line-height: 1.8;
max-width: 540px;
}
.calculator-features {
margin-top: 35px;
display: flex;
flex-direction: column;
gap: 18px;
}
.calc-feature {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 18px;
}
.calc-feature i {
color: var(--primary-color);
font-size: 18px;
}
.calculator-box {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
padding: 36px;
backdrop-filter: blur(12px);
}
.calculator-box .form-group {
margin-bottom: 28px;
}
.calculator-box label {
display: block;
margin-bottom: 12px;
font-weight: 600;
}
.calculator-box select {
width: 100%;
padding: 16px;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--card-bg);
color: var(--text-color);
font-size: 15px;
outline: none;
}
.range-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.range-header span {
color: var(--primary-color);
font-weight: 700;
}
.calculator-box input[type="range"] {
width: 100%;
accent-color: var(--primary-color);
cursor: pointer;
}
.calculator-result {
margin-top: 35px;
padding: 35px;
border-radius: 24px;
text-align: center;
background:
linear-gradient(
135deg,
rgba(212,175,55,0.12),
rgba(212,175,55,0.04)
);
border: 1px solid rgba(212,175,55,0.15);
}
.calculator-result small {
display: block;
margin-bottom: 12px;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 2px;
}
.calculator-result h3 {
font-size: 52px;
color: var(--primary-color);
margin-bottom: 10px;
}
.calculator-result p {
color: var(--text-light);
}
@media (max-width: 1000px) {
.calculator-modern-card {
grid-template-columns: 1fr;
padding: 40px 25px;
}
.calculator-left h2 {
font-size: 38px;
}
}
@media (max-width: 600px) {
.calculator-left h2 {
font-size: 30px;
}
.calculator-result h3 {
font-size: 36px;
}
.calculator-box {
padding: 24px;
}
}