/* =========================== TEMPO – Global theme Works for: public + admin =========================== */ /* Brand palette (from logo/hero) */ :root{ --tempo-navy: #003060; --tempo-navy-2: #003048; --tempo-sky: #A8D8F0; --tempo-sky-2: #78C0D8; --tempo-red: #F00000; --tempo-bg: #EEF6FF; --tempo-surface: rgba(255,255,255,0.92); --tempo-muted: #6C7A89; --tempo-border: rgba(0, 48, 96, 0.12); --tempo-shadow: 0 10px 30px rgba(0, 48, 96, 0.10); --tempo-radius: 18px; --tempo-radius-sm: 14px; --tempo-focus: rgba(120, 192, 216, 0.45); --tempo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } html { scroll-behavior: smooth; overflow-x: hidden; /* Ne "ugráljon" a layout, amikor a preloader miatt a scrollbar ki/be kapcsol */ } body{ font-family: var(--tempo-font); background: radial-gradient(circle at 18% 12%, rgba(120,192,216,0.18), transparent 45%), radial-gradient(circle at 82% 18%, rgba(168,216,240,0.26), transparent 48%), linear-gradient(180deg, var(--tempo-bg) 0%, #ffffff 55%, #f2f8fd 100%); color: #0f172a; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.modal-open { padding-right: 0 !important; } /* Footer mindig az oldal alján (minden oldalon, adminon is) */ body{ min-height: 100vh; display:flex; flex-direction:column; } .site-footer{ margin-top:auto; } /* Preloader alatt ne görgessen (a class -re és -ra is rákerülhet) */ html.has-preloader, body.has-preloader{ overflow: hidden !important; } a{ color: var(--tempo-navy); } a:hover{ color: var(--tempo-navy-2); } ::selection{ background: rgba(168, 216, 240, 0.75); } .object-fit-cover{ object-fit: cover; } .shadow-soft{ box-shadow: var(--tempo-shadow) !important; } .rounded-4xl{ border-radius: calc(var(--tempo-radius) + 6px); } .rounded-3xl{ border-radius: var(--tempo-radius); } .rounded-2xl{ border-radius: var(--tempo-radius-sm); } .border-soft{ border: 1px solid var(--tempo-border) !important; } .section{ padding: 4rem 0; } .section{ position: relative; } .section:not(.section--alt){ background: linear-gradient(180deg, rgba(0,48,96,0.035), rgba(0,48,96,0.15) 46%); } /* Section headings */ .section h2{ color: var(--tempo-navy); letter-spacing: -0.02em; line-height: 1.15; display: inline-block; position: relative; } .section h2::after{ content: ""; position: absolute; left: 0; bottom: -10px; width: 72%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(120,192,216,0.95), rgba(0,48,96,0.0)); } .section p.text-secondary{ color: rgba(15, 23, 42, 0.68) !important; } .section--alt{ background: linear-gradient(180deg, rgba(168,216,240,0.28) 0%, rgba(238,246,255,0.75) 55%, rgba(255,255,255,0.0) 100%); } .container { max-width: 1180px; } .container, .container-fluid{ --bs-gutter-x: clamp(1.1rem, 3vw, 1.6rem); } @media (max-width: 575.98px){ .container, .container-fluid{ --bs-gutter-x: 1rem; } } /* =========================== Bootstrap overrides =========================== */ .btn{ border-radius: 999px; font-weight: 600; letter-spacing: 0.2px; padding: .65rem 1.05rem; } .btn-primary{ background: var(--tempo-navy); border-color: var(--tempo-navy); } .btn-primary:hover, .btn-primary:focus{ background: #00284f; border-color: #00284f; } .btn-outline-primary{ border-color: rgba(0,48,96,0.35); color: var(--tempo-navy); } .btn-outline-primary:hover, .btn-outline-primary:focus{ background: rgba(168,216,240,0.35); border-color: rgba(0,48,96,0.25); color: var(--tempo-navy); } .btn-danger{ background: var(--tempo-red); border-color: var(--tempo-red); } .btn-danger:hover{ background: #d90000; border-color: #d90000; } .badge{ border-radius: 999px; font-weight: 600; } .card{ background: var(--tempo-surface); border: 1px solid rgba(0,48,96,0.14); border-radius: var(--tempo-radius); box-shadow: 0 10px 26px rgba(0,48,96,0.08); } .card:hover{ border-color: rgba(120,192,216,0.55); } .card .card-body{ padding: 1.1rem; } .form-control, .form-select{ border-radius: 14px; border: 1px solid var(--tempo-border); } .form-control:focus, .form-select:focus{ border-color: rgba(120,192,216,0.75); box-shadow: 0 0 0 .25rem var(--tempo-focus); } .alert{ border-radius: var(--tempo-radius-sm); border: 1px solid var(--tempo-border); } /* =========================== Topbar =========================== */ .topbar{ background: var(--tempo-navy); padding: .35rem 0; font-size: .8rem; } .topbar-left{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .topbar-right{ display: flex; align-items: center; justify-content: flex-end; gap: .5rem; } .topbar-link{ color: rgba(255,255,255,0.85); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; transition: color .2s; } .topbar-link:hover{ color: #fff; } .topbar-ico{ display: inline-flex; align-items: center; } .topbar-ico svg{ width: 14px; height: 14px; fill: currentColor; } .topbar-dot{ color: rgba(255,255,255,0.4); } .topbar-social{ color: rgba(255,255,255,0.7); display: inline-flex; align-items: center; padding: .2rem .3rem; transition: color .2s; } .topbar-social:hover{ color: #fff; } .topbar-social svg{ width: 16px; height: 16px; fill: currentColor; } /* =========================== Navbar (public) =========================== */ .site-navbar-wrap{ top: 0; z-index: 1030; } .navbar{ background: rgba(238,246,255,0.96) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--tempo-border) !important; padding-top: .5rem; padding-bottom: .5rem; } .navbar-brand, .brand-premium{ letter-spacing: .6px; color: var(--tempo-navy) !important; padding: 0; } .nav-logo-wrap{ display: flex; align-items: center; } .nav-logo, .navbar-brand img{ height: 40px; width: auto; display: block; } .nav-link{ color: rgba(0,48,96,0.85) !important; font-weight: 600; font-size: .9rem; padding: .45rem .7rem !important; } .nav-link:hover{ color: var(--tempo-navy) !important; } @media (max-width: 576px){ .navbar .btn{ width: 100%; margin-top: .25rem; } .navbar .nav-link{ padding: .7rem 0.75rem !important; } .nav-logo{ height: 34px; } } /* =========================== HERO – Modern (public) =========================== */ .hero-modern{ position: relative; overflow: hidden; padding: 5.25rem 0 4.25rem; background: radial-gradient(circle at 15% 20%, rgba(168,216,240,0.65), transparent 55%), radial-gradient(circle at 90% 10%, rgba(120,192,216,0.35), transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.85), rgba(168,216,240,0.22)); border-bottom: 1px solid var(--tempo-border); } .hero-modern::after{ content:""; position:absolute; left:-20%; right:-20%; bottom:-120px; height: 240px; background: radial-gradient(closest-side, rgba(120,192,216,0.28), transparent 70%); filter: blur(2px); pointer-events:none; } .hero-panel{ background: rgba(255,255,255,0.86); border: 1px solid var(--tempo-border); box-shadow: var(--tempo-shadow); border-radius: calc(var(--tempo-radius) + 10px); padding: 2.0rem 2.1rem; } .hero-kicker{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom: 1.1rem; } .kicker-pill{ display:inline-flex; align-items:center; gap:.5rem; padding: .45rem .75rem; border-radius: 999px; background: rgba(168,216,240,0.30); border: 1px solid rgba(0,48,96,0.10); color: rgba(0,48,96,0.92); font-weight: 700; font-size: .92rem; } .hero-title{ font-weight: 900; letter-spacing: -0.8px; line-height: 1.04; color: #0b1220; } .hero-lead{ color: rgba(15, 23, 42, 0.70); font-size: 1.06rem; } .hero-actions{ display:flex; gap:.65rem; flex-wrap:wrap; margin-top: 1.15rem; } .hero-micro{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 1.25rem; } .micro-pill{ display:inline-flex; align-items:center; gap:.5rem; padding: .4rem .65rem; border-radius: 999px; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,48,96,0.10); color: rgba(0,48,96,0.85); font-weight: 700; font-size: .92rem; } .hero-media{ position: relative; border-radius: calc(var(--tempo-radius) + 12px); overflow: hidden; border: 1px solid var(--tempo-border); box-shadow: 0 18px 55px rgba(0,48,96,0.14); background: rgba(255,255,255,0.65); } .hero-media img{ width:100%; height:100%; object-fit: cover; transform: scale(1.01); } .hero-badge{ position:absolute; left: 16px; right: 16px; bottom: 16px; display:flex; justify-content: space-between; gap: 12px; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,48,96,0.10); box-shadow: 0 12px 28px rgba(0,48,96,0.14); } .hero-badge strong{ color: var(--tempo-navy); } @media (max-width: 992px){ .hero-modern{ padding: 4.25rem 0 3.5rem; } .hero-panel{ padding: 1.6rem 1.5rem; } } @media (max-width: 576px){ .hero-actions .btn{ width: 100%; } } /* =========================== Service cards =========================== */ .service-card{ transition: transform .18s ease, box-shadow .18s ease; } .service-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,48,96,0.12); } .icon-bubble{ width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(168,216,240,0.45); border: 1px solid rgba(0,48,96,0.10); color: var(--tempo-navy); font-weight: 900; } /* =========================== Gallery =========================== */ .gallery-img{ border-radius: 14px; border: 1px solid var(--tempo-border); box-shadow: 0 8px 22px rgba(0,48,96,0.10); transition: transform .18s ease; } .gallery-img:hover{ transform: scale(1.01); } /* =========================== Footer =========================== */ .site-footer{ background: linear-gradient(135deg, rgba(0,48,96,0.96), rgba(0,48,96,0.88)); border-top: 1px solid rgba(168,216,240,0.18); color: rgba(255,255,255,0.88); flex-shrink: 0; } .site-footer a{ color: rgba(255,255,255,0.92); } .site-footer a:hover{ color: #ffffff; } /* Admin: maradjon világosabb */ .admin-shell .site-footer{ background: rgba(255,255,255,0.96); border-top: 1px solid var(--tempo-border); color: inherit; } .admin-shell .site-footer a{ color: var(--tempo-navy); } .admin-shell .site-footer a:hover{ color: var(--tempo-navy-2); } /* =========================== Admin =========================== */ .admin-shell{ min-height: 100vh; display:flex; flex-direction:column; } /* =========================== Preloader =========================== */ .tempo-preloader{ position: fixed; inset: 0; z-index: 2000; /* Ne legyen "áttetsző" érzet – egységes, tömör háttér */ background: radial-gradient(circle at 18% 22%, rgba(168,216,240,1), rgba(242,248,253,1) 58%), radial-gradient(circle at 82% 28%, rgba(120,192,216,1), rgba(242,248,253,1) 60%), linear-gradient(135deg, #ffffff 0%, #f2f8fd 45%, #e4f1fb 100%); display: grid; place-items: center; transition: opacity .35s ease, visibility .35s ease; } .tempo-preloader.is-hidden{ opacity: 0; visibility: hidden; } .tempo-preloader-inner{ text-align: center; padding: 1.25rem 1.25rem 1rem; border-radius: calc(var(--tempo-radius) + 12px); background: rgba(255,255,255,0.96); border: 1px solid var(--tempo-border); box-shadow: 0 24px 60px rgba(0,48,96,0.16); backdrop-filter: blur(6px); } .tempo-preloader-logo{ width: min(240px, 62vw); height: auto; display: block; margin: 0 auto 0.55rem; transform-origin: center; animation: tempoPreloaderFloat 1.4s ease-in-out infinite; } .tempo-preloader-text{ color: rgba(0,48,96,0.78); font-weight: 800; letter-spacing: 0.2px; margin-top: 0.45rem; font-size: 0.98rem; } .tempo-preloader-dots{ display: inline-flex; gap: 8px; align-items: center; justify-content: center; margin: 0.25rem 0 0; } .tempo-preloader-dots span{ width: 10px; height: 10px; border-radius: 999px; background: rgba(0,48,96,0.80); transform: translateY(0); animation: tempoDots 0.9s ease-in-out infinite; } .tempo-preloader-dots span:nth-child(2){ animation-delay: .12s; } .tempo-preloader-dots span:nth-child(3){ animation-delay: .24s; } @keyframes tempoDots{ 0%, 100%{ transform: translateY(0); opacity: .55; } 50%{ transform: translateY(-7px); opacity: 1; } } @keyframes tempoPreloaderFloat{ 0%, 100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-6px) scale(1.01); } } /* =========================== Parallax =========================== */ .parallax-section{ position: relative; overflow: hidden; } .parallax-section::before{ content: ""; position: absolute; inset: -18% 0 -18% 0; background-image: var(--parallax-bg); background-size: cover; background-position: center; transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1.15); will-change: transform; transition: transform .08s linear; filter: saturate(1.0) contrast(1.14); opacity: 1; } .parallax-section::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(120,192,216,0.28), transparent 55%), radial-gradient(circle at 75% 55%, rgba(0,48,96,0.40), transparent 60%), linear-gradient(180deg, rgba(0,48,96,0.18) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.22) 100%); } .parallax-section > .container{ position: relative; z-index: 1; } .parallax-divider{ height: 26px; background: linear-gradient(90deg, rgba(0,48,96,0.0), rgba(0,48,96,0.08), rgba(0,48,96,0.0)); opacity: .7; } .parallax-divider--thin{ height: 18px; } @media (max-width: 768px){ .parallax-section::before{ inset: -10% 0 -10% 0; opacity: .48; will-change: auto; } } /* =========================== Cards / tiles finomhangolás =========================== */ .work-card-media{ border-top-left-radius: var(--tempo-radius); border-top-right-radius: var(--tempo-radius); overflow: hidden; border-bottom: 1px solid var(--tempo-border); } .gallery-tile{ border-radius: 16px; overflow: hidden; border: 1px solid var(--tempo-border); box-shadow: 0 10px 26px rgba(0,48,96,0.10); transition: transform .18s ease; } .gallery-tile:hover{ transform: translateY(-2px); } .admin-topbar{ background: rgba(255,255,255,0.90); border-bottom: 1px solid var(--tempo-border); backdrop-filter: blur(6px); } .admin-title{ color: var(--tempo-navy); } .table{ border-color: var(--tempo-border); } .table thead th{ color: rgba(0,48,96,0.85); font-weight: 800; } @media (max-width: 576px){ .section{ padding: 3rem 0; } } /* =========================== HERO V4 – Domináns vizuál, szöveg overlay =========================== */ .hero-v4{ position: relative; /* HERO pontosan a képernyőbe férjen (a sticky navbar magasságát levonjuk) */ height: calc(100svh - var(--nav-h, 0px)); min-height: calc(100vh - var(--nav-h, 0px)); display: flex; align-items: center; overflow: hidden; } .hero-v4-media{ position: absolute; inset: 0; /* A hero.png csak itt szerepeljen (ne a PHP-ben) */ background: url('../img/logo.svg') center / cover no-repeat; transform: scale(1.06); animation: heroFloat 18s ease-in-out infinite; } @keyframes heroFloat{ 0% { transform: scale(1.06) translate3d(0,0,0); } 50% { transform: scale(1.10) translate3d(0,-10px,0); } 100% { transform: scale(1.06) translate3d(0,0,0); } } .hero-v4-img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); filter: saturate(1.00) contrast(1.02) blur(1.2px); opacity: .72; } .hero-v4-overlay{ position: absolute; inset: 0; background: radial-gradient(circle at 18% 35%, rgba(120,192,216,0.32), transparent 55%), radial-gradient(circle at 72% 45%, rgba(168,216,240,0.32), transparent 60%), linear-gradient(90deg, rgba(0,48,96,0.86) 0%, rgba(0,48,96,0.72) 38%, rgba(0,48,96,0.38) 65%, rgba(0,48,96,0.16) 100%); } .hero-v4-content{ position: relative; z-index: 2; padding: 0; color: #fff; max-width: 720px; } /* A container ténylegesen töltse ki a HERO magasságot, és igazítsuk középre a tartalmat */ .hero-v4 > .container.position-relative{ min-height: 100%; display: flex; align-items: center; } .hero-v4 > .container.position-relative > .row{ width: 100%; } .hero-v4-badges{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .hero-v4-badge{ background: rgba(255,255,255,0.92); color: rgba(0,48,96,0.95); border: 1px solid rgba(0,48,96,0.10); border-radius: 999px; padding: .55rem .75rem; font-weight: 700; } .hero-v4-title{ font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .9rem 0; /* finom 3D / "bevésés" jelleg, de nem túl mű */ text-shadow: 0 2px 0 rgba(0,0,0,0.20), 0 10px 30px rgba(0,0,0,0.28); } .hero-v4-subtitle{ font-size: 1.1rem; max-width: 56ch; opacity: .94; margin: 0; } .hero-v4-cta{ border: 0; font-weight: 800; color: var(--tempo-navy); } .hero-v4-link{ color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 700; } .hero-v4-link:hover{ color: #fff; text-decoration: underline; } .hero-v4-pills{ display: flex; flex-wrap: wrap; gap: .5rem; } .hero-pill{ background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.16); padding: .55rem .75rem; border-radius: 999px; font-weight: 700; backdrop-filter: blur(6px); } @media (max-width: 992px){ .hero-v4{ height: calc(100svh - var(--nav-h, 0px)); min-height: calc(100vh - var(--nav-h, 0px)); } .hero-v4-overlay{ background: linear-gradient(180deg, rgba(0,48,96,0.70) 0%, rgba(0,48,96,0.60) 55%, rgba(0,48,96,0.70) 100%); } .hero-v4-content{ padding: 0; text-align: center; margin: 0 auto; } .hero-v4-subtitle{ margin-left: auto; margin-right: auto; } .hero-v4-link{ display: inline-block; margin-top: .5rem; } } /* iOS/Android safe-area: ne csússzon alá a tartalom */ @supports (padding: max(0px)){ .hero-v4 > .container.position-relative{ padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } } /* =========================== Globális „beúszó” szekciók =========================== */ .reveal-section{ opacity: 0; transform: translate3d(0, 56px, 0); filter: blur(0.0px); transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity; } .reveal-section.is-in{ opacity: 1; transform: translate3d(0, 0, 0); } /* A footert sose rejtsük el animációval (akkor sem, ha a JS nem fut le) */ footer.site-footer.reveal-section{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal-section{ opacity: 1; transform: none; transition: none; } } /* Admin footer always to bottom */ .admin-shell > footer{ margin-top:auto; } .hero-v4-panel{ display:inline-block; padding: 1.35rem 1.35rem 1.15rem; border-radius: calc(var(--tempo-radius) + 10px); background: rgba(255,255,255,0.16); border: 1px solid rgba(168,216,240,0.28); box-shadow: 0 24px 60px rgba(0,0,0,0.18); backdrop-filter: blur(10px); } @media (max-width: 992px){ .hero-v4-panel{ padding: 1.1rem 1.05rem 1rem; } } /* =========================== SAMPLE-INSPIRÁLTA "LETISZTULT" HERO =========================== */ /* =========================== HERO – Clean centered =========================== */ .hero-clean{ position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; background: linear-gradient(160deg, #EEF6FF 0%, #ffffff 55%, #f0f7ff 100%); } /* TELJES MÉRETŰ háttér logó */ .hero-clean::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(0, 82, 164, 0.28) 0%, rgba(0, 140, 255, 0.18) 50%, rgba(0, 40, 90, 0.80) 100% ), url("/assets/img/hero2.png") center center / cover no-repeat; background-blend-mode: multiply; filter: blur(4.5px) saturate(0.55) contrast(1.05) brightness(0.95); transform: scale(1.02); pointer-events:none; z-index: 0; } .hero-clean h1, .hero-clean p { color: #ffffff; } .hero-clean h1{ text-shadow: 0 8px 5px rgba(0, 0, 0, 0.45); } .hero-clean p{ text-shadow: 0 6px 18px rgba(0,0,0,0.45); } /* FÉNYFOLTOK réteg */ .hero-clean::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse 900px 600px at 20% 30%, rgba(0,82,164,0.08), transparent 60%), radial-gradient(ellipse 700px 500px at 80% 20%, rgba(120,192,216,0.12), transparent 55%); pointer-events:none; z-index: 1; } /* hero tartalom */ .hero-clean > *{ position: relative; z-index: 2; } .hero-clean-inner{ position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 1rem; } .hero-clean-kicker{ display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .kicker-pill{ display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(0,48,96,0.13); background: rgba(255,255,255,0.80); color: rgba(0,48,96,0.80); font-weight: 600; font-size: .8rem; backdrop-filter: blur(10px); } .hero-clean-title{ font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(38px, 6vw, 72px); color: rgba(0,28,60,0.95); margin: 0 0 20px; } .hero-strong{ font-weight: 900; color: var(--tempo-navy); } .hero-clean-lead{ font-size: clamp(.95rem, 2vw, 1.1rem); color: rgba(0,48,96,0.68); line-height: 1.65; margin: 0 auto 28px; max-width: 560px; } .hero-clean-ctas{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 28px; } .hero-clean-trust{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .7rem; font-size: .8rem; font-weight: 600; color: rgba(0,48,96,0.95); } .hct-sep{ opacity: .4; } /* Scroll indicator */ .hero-scroll{ position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; } .hero-scroll-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(0,48,96,0.35); animation: scrollBob 1.8s ease-in-out infinite; } @keyframes scrollBob{ 0%,100%{ transform: translateY(0); opacity: .4; } 50%{ transform: translateY(8px); opacity: 1; } } @media (max-width: 767px){ .hero-clean{ min-height: calc(100svh - var(--nav-h, 70px)); padding-top: calc(var(--nav-h, 70px) + 24px); padding-bottom: 48px; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .hero-clean-ctas .btn{ width: 100%; max-width: 320px; } .hero-clean::after{ display: none; } } @media (max-height: 640px) and (min-width: 768px){ .hero-clean{ min-height: auto; padding-top: calc(var(--nav-h, 70px) + 20px); padding-bottom: 36px; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .hero-clean-title{ font-size: clamp(32px, 5vw, 54px); } } /* =========================== STATS BAND =========================== */ .stats-band{ padding: 56px 0; background: #fff; border-top: 1px solid rgba(0,48,96,0.06); border-bottom: 1px solid rgba(0,48,96,0.06); } .stats-band > .container, .section-mosaic > .container, .split-feature > .container, .video-feature > .container, .contact-section > .container{ max-width: 1180px; } .stats-row, .split-feature .row, .contact-layout, .contact-info-row{ --bs-gutter-x: 1.15rem; } .stats-title{ text-align: center; font-weight: 800; letter-spacing: .08em; font-size: .95rem; color: rgba(0,48,96,0.70); margin-bottom: 26px; } .stat-item{ display:flex; align-items: center; gap: 14px; padding: 18px 18px; border-radius: 18px; border: 1px solid rgba(0,48,96,0.10); background: rgba(255,255,255,0.90); backdrop-filter: blur(10px); } .stat-ico{ width: 54px; height: 54px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: rgba(0,82,164,0.08); border: 1px solid rgba(0,82,164,0.14); font-size: 1.35rem; } .stat-value{ font-size: 1.6rem; font-weight: 900; line-height: 1.1; color: rgba(0,28,60,0.95); } .stat-label{ color: rgba(0,48,96,0.72); font-weight: 600; } /* =========================== MOZAIK SZOLGÁLTATÁSOK =========================== */ .section-mosaic{ padding: 72px 0; background: linear-gradient(180deg, rgba(246,250,255,0.8), rgba(255,255,255,1)); } .section-head{ margin-bottom: 22px; } .section-title{ font-weight: 900; color: rgba(0,28,60,0.96); } .section-lead{ color: rgba(0,48,96,0.74); max-width: 42rem; } .mosaic-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 16px; } .mosaic-card{ position: relative; border-radius: 22px; overflow:hidden; border: 1px solid rgba(0,48,96,0.10); background: rgba(255,255,255,0.80); box-shadow: 0 14px 40px rgba(0, 28, 60, 0.10); text-decoration:none; color: #fff; background-size: cover; background-position: center; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .mosaic-card:hover{ transform: translateY(-3px); box-shadow: 0 20px 55px rgba(0, 28, 60, 0.16); border-color: rgba(0,48,96,0.18); } .mosaic-card.is-accent{ background: linear-gradient(135deg, rgba(0,82,164,1), rgba(0,48,96,1)); } .mosaic-card.is-text{ background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,255,0.92)); color: rgba(0,48,96,0.92); } .mosaic-card.is-text h3, .mosaic-card.is-text p, .mosaic-card.is-text .mosaic-link{ color: rgba(0,48,96,0.92); } .mosaic-card.is-image::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.55)); } .mosaic-overlay{ position:absolute; inset:0; padding: 18px; display:flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .mosaic-copy{ position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(100%, 34rem); padding: 14px 15px 13px; border-radius: 18px; background: rgba(8, 22, 45, 0.34); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 14px 34px rgba(0, 18, 40, 0.18); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .mosaic-card.is-accent .mosaic-copy{ background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); } .mosaic-card.is-text .mosaic-copy{ background: rgba(255,255,255,0.72); border-color: rgba(0,48,96,0.10); box-shadow: 0 14px 34px rgba(0, 28, 60, 0.10); } .mosaic-card h3{ margin: 0; font-weight: 900; font-size: 1.28rem; } .mosaic-card p{ margin: 0; opacity: .92; } .mosaic-link{ margin-top: 6px; font-weight: 800; opacity: .95; } /* Méretezés a mozaikhoz (a screenshot szerinti kompozíció) */ .mosaic-card:nth-child(1){ grid-column: span 2; } .mosaic-card:nth-child(2){ grid-column: span 1; } .mosaic-card:nth-child(3){ grid-column: span 1; } .mosaic-card:nth-child(4){ grid-column: span 1; } .mosaic-card:nth-child(5){ grid-column: span 1; } .mosaic-card:nth-child(6){ grid-column: span 2; } @media (max-width: 991px){ .mosaic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } .mosaic-card:nth-child(1), .mosaic-card:nth-child(6){ grid-column: span 2; } } @media (max-width: 576px){ .mosaic-grid{ grid-template-columns: 1fr; grid-auto-rows: 240px; } .mosaic-card:nth-child(n){ grid-column: auto; } } /* =========================== SPLIT FEATURE (Let's grow together) =========================== */ .split-feature{ padding: 84px 0; background: #fff; } .split-title{ font-size: clamp(44px, 5.2vw, 74px); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 14px; color: rgba(0,28,60,0.96); } .split-lead{ color: rgba(0,48,96,0.76); font-size: 1.05rem; max-width: 42rem; } .split-checks{ list-style: none; padding:0; margin: 18px 0 22px; display:grid; gap: 10px; } .split-checks li{ position: relative; padding-left: 28px; color: rgba(0,48,96,0.82); } .split-checks li::before{ content:"✓"; position:absolute; left:0; top:0; color:#16a34a; font-weight:900; } .split-media{ border-radius: 20px; overflow:hidden; border: 1px solid rgba(0,48,96,0.10); box-shadow: 0 22px 55px rgba(0, 28, 60, 0.14); } .split-img{ width: 100%; height: auto; display:block; } /* =========================== VIDEO FEATURE =========================== */ .video-feature{ padding: 84px 0; background: #fff; } .video-title{ font-size: clamp(38px, 4.5vw, 64px); font-weight: 300; letter-spacing: -0.02em; color: rgba(0,28,60,0.96); margin-bottom: 14px; } .video-strong{ font-weight: 900; } .video-lead{ color: rgba(0,48,96,0.76); font-size: 1.05rem; max-width: 40rem; } .video-muted{ color: rgba(0,48,96,0.64); max-width: 40rem; } .video-card{ position: relative; display:block; border-radius: 22px; overflow:hidden; border: 1px solid rgba(0,48,96,0.10); box-shadow: 0 28px 70px rgba(0, 28, 60, 0.18); } .video-img{ width:100%; height:auto; display:block; filter: grayscale(1) contrast(1.05); transform: scale(1.02); } .video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .video-play::before{ content:""; width: 82px; height: 82px; border-radius: 999px; background: rgba(255,255,255,0.96); box-shadow: 0 18px 40px rgba(0,0,0,0.18); } .video-tri{ width: 0; height: 0; border-left: 18px solid #ef4444; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 6px; position: relative; z-index: 1; } .video-card:hover .video-img{ filter: grayscale(.7) contrast(1.05); } /* =========================== HERO – Visual card block =========================== */ .hero-visual{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; } .hv-badge{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,48,96,0.12); border-radius: 999px; padding: .4rem 1rem .4rem .7rem; font-size: .82rem; font-weight: 600; color: var(--tempo-navy); backdrop-filter: blur(8px); width: fit-content; } .hv-badge-dot{ width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.22); animation: hv-pulse 2s infinite; flex-shrink: 0; } @keyframes hv-pulse{ 0%,100%{ box-shadow: 0 0 0 3px rgba(22,163,74,0.22); } 50%{ box-shadow: 0 0 0 6px rgba(22,163,74,0.08); } } .hv-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hv-card{ border-radius: 18px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 5px; transition: transform .18s, box-shadow .18s; cursor: default; } .hv-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,28,60,0.14); } .hv-card--blue{ background: linear-gradient(135deg, #1a56db 0%, #1e40af 100%); color: #fff; } .hv-card--navy{ background: linear-gradient(135deg, var(--tempo-navy) 0%, #001e40 100%); color: #fff; } .hv-card--sky{ background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; } .hv-card--light{ background: rgba(255,255,255,0.90); border: 1px solid rgba(0,48,96,0.13); color: var(--tempo-navy); } .hv-card-ico{ font-size: 1.5rem; line-height: 1; margin-bottom: 2px; } .hv-card-label{ font-size: .95rem; font-weight: 700; line-height: 1.2; } .hv-card-sub{ font-size: .78rem; opacity: .78; line-height: 1.3; } .hv-trust{ display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; font-size: .78rem; font-weight: 600; color: rgba(0,48,96,0.70); } .hv-trust-sep{ opacity: .4; } @media (max-width: 575px){ .hv-cards{ grid-template-columns: 1fr 1fr; gap: 8px; } .hv-card{ padding: 13px 11px 11px; } .hv-card-label{ font-size: .85rem; } .hv-card-sub{ font-size: .72rem; } } @media (max-width: 400px){ .hv-cards{ grid-template-columns: 1fr; } } /* =========================== Services Modal =========================== */ .services-modal{ border-radius: 22px; overflow: hidden; border: none; } .services-modal .modal-header{ background: linear-gradient(120deg, var(--tempo-navy) 0%, #1a3a6b 100%); padding: 1.4rem 1.6rem 1.2rem; border-bottom: none; } .services-modal .modal-title{ color: #fff; font-weight: 700; font-size: 1.2rem; } .services-modal .modal-subtitle{ color: rgba(255,255,255,0.65); font-size: .85rem; } .services-modal .btn-close{ filter: invert(1) grayscale(1) brightness(2); opacity: .7; } .services-modal .btn-close:hover{ opacity: 1; } .services-modal .modal-body{ background: var(--tempo-bg); padding: 1.4rem 1.5rem 1.6rem; } .services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 767px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .services-grid{ grid-template-columns: 1fr; } } .service-tile{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 16px; border-radius: 16px; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,48,96,0.10); text-decoration: none; color: var(--tempo-navy); transition: transform .18s, box-shadow .18s, background .18s; box-shadow: 0 2px 8px rgba(0,28,60,0.06); } .service-tile:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,28,60,0.13); background: #fff; color: var(--tempo-navy); text-decoration: none; } .st-ico{ font-size: 1.8rem; line-height: 1; margin-bottom: 2px; } .st-title{ font-weight: 700; font-size: .95rem; } .st-desc{ font-size: .8rem; color: rgba(0,48,96,0.65); line-height: 1.35; } /* =========================== Részletes szolgáltatások szekció =========================== */ .svc-detail-section{ background: linear-gradient(180deg, #fff 0%, var(--tempo-bg) 100%); } .svc-detail-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } @media (max-width: 991px){ .svc-detail-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px){ .svc-detail-grid{ grid-template-columns: 1fr; gap: 14px; } } .svc-detail-card{ background: #fff; border: 1px solid rgba(0,48,96,0.09); border-radius: 20px; padding: 24px 22px 22px; box-shadow: 0 4px 18px rgba(0,28,60,0.07); transition: transform .18s, box-shadow .18s; } .svc-detail-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,28,60,0.12); } .svc-detail-card--sos{ border-color: rgba(239,68,68,0.25); background: linear-gradient(135deg, #fff 70%, rgba(254,242,242,0.6)); } .svc-detail-icon{ font-size: 2rem; line-height: 1; margin-bottom: 10px; } .svc-detail-title{ font-size: 1.05rem; font-weight: 800; color: var(--tempo-navy); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .svc-sos-badge{ display: inline-block; background: #ef4444; color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; } .svc-detail-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .svc-detail-list li{ font-size: .875rem; color: rgba(0,48,96,0.80); line-height: 1.45; padding-left: 16px; position: relative; } .svc-detail-list li::before{ content: "–"; position: absolute; left: 0; top: 0; color: var(--tempo-sky-2); font-weight: 700; } /* =========================== MOBIL OPTIMALIZÁLÁS – Átfogó =========================== */ /* Érintési célterületek – min 44px */ @media (max-width: 767px){ .btn{ min-height: 44px; } .nav-link{ min-height: 44px; display: flex; align-items: center; } .topbar-link{ min-height: 36px; } /* Szekciók paddingja */ .section{ padding: 2.5rem 0; } .section-mosaic{ padding: 2.5rem 0; } .split-feature{ padding: 2.5rem 0; } .video-feature{ padding: 2.5rem 0; } .stats-band{ padding: 2rem 0; } .svc-detail-section .section{ padding: 2.5rem 0; } /* Section fejlécek */ .section-title{ font-size: 1.6rem; } .section-lead{ font-size: .92rem; } /* Stats sáv – 1 oszlop */ .stats-row{ flex-direction: column; } .stats-row .col-md-4{ width: 100%; } .stat-item{ padding: 14px 14px; } .stat-value{ font-size: 1.35rem; } .stat-ico{ width: 44px; height: 44px; font-size: 1.15rem; } /* Split feature */ .split-title{ font-size: clamp(30px, 8vw, 44px); } .split-lead{ font-size: .95rem; } .split-media{ margin-top: 1.5rem; } /* Video feature */ .video-title{ font-size: clamp(26px, 7vw, 38px); } .video-lead{ font-size: .95rem; } /* Mosaic – kártyák szöveg */ .mosaic-card h3{ font-size: 1.1rem; } .mosaic-card p{ font-size: .85rem; } /* Promo sáv kártyák */ .promo-bg .card{ margin-bottom: .5rem; } /* Kapcsolat szekció */ #kapcsolat .card-body{ padding: 1.1rem; } #kapcsolat h2{ font-size: 1.5rem; } /* Navbar mobil */ .nav-logo{ height: 32px; } .topbar{ font-size: .75rem; } /* Offcanvas */ .offcanvas{ max-width: 100vw; } /* Services detail grid – 1 col mobile */ .svc-detail-grid{ grid-template-columns: 1fr; } .svc-detail-card{ padding: 18px 16px; } /* Services modal */ .services-modal .modal-header{ padding: 1rem 1.1rem; } .services-modal .modal-body{ padding: 1rem 1rem 1.2rem; } /* Footer */ .site-footer .row > [class*="col-"]{ margin-bottom: 1.5rem; } } /* Extra kis képernyők */ @media (max-width: 400px){ .hero-clean-title{ font-size: 2.1rem; } .btn-pill.px-5{ padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .kicker-pill{ font-size: .74rem; padding: .25rem .55rem; } } /* Tablet */ @media (min-width: 768px) and (max-width: 991px){ .section{ padding: 3.5rem 0; } .split-feature{ padding: 3.5rem 0; } .split-title{ font-size: clamp(32px, 5vw, 52px); } .svc-detail-grid{ grid-template-columns: repeat(2, 1fr); } } /* Horizontális overflow végleges fix */ .hero-modern::after{ left: 0 !important; right: 0 !important; } *, *::before, *::after{ max-width: 100%; } img, video, iframe, embed, object{ max-width: 100%; } /* ================================================== MOZAIK – hover szín fix A globális `a:hover` felülírta a mozaik kártyák színét, ezért a kártyákon explicit megadjuk hover alatt is. ================================================== */ .section-mosaic .mosaic-card{ /* a kártya egy , ezért itt kezeljük a link-színt is */ color: #fff; } /* Kép + accent kártyák: maradjon fehér hover alatt is */ .section-mosaic .mosaic-card:hover{ color: #fff; } /* Szöveges kártya: maradjon sötétkék hover alatt is */ .section-mosaic .mosaic-card.is-text, .section-mosaic .mosaic-card.is-text:hover{ color: rgba(0,48,96,0.92); } /* A belső elemek mindig a kártya színét örököljék (ne a globális a:hover-ét) */ .section-mosaic .mosaic-card h3, .section-mosaic .mosaic-card p, .section-mosaic .mosaic-card .mosaic-link{ color: inherit; } /* =============================================== FORCE HERO BACKGROUND (blue tint + opacity) =============================================== */ .hero, .hero--v3{ position: relative; background: url("../img/hero2.png") center center / cover no-repeat !important; } .hero::before, .hero--v3::before{ content: ""; position: absolute; inset: 0; background: rgba(0,82,164,0.35); /* blue tint */ z-index: 1; } .hero > *, .hero--v3 > *{ position: relative; z-index: 2; } /* ================================================== 2026-03 frissítések – szolgáltatások, kontakt, social ================================================== */ .hero-clean{ min-height: calc(100svh - var(--nav-h, 80px)); padding-top: calc(var(--nav-h, 80px) + 36px); padding-bottom: 72px; } .hero-clean::before{ background: linear-gradient(135deg, rgba(0, 82, 164, 0.18) 0%, rgba(0, 104, 180, 0.12) 48%, rgba(0, 28, 60, 0.54) 100%), url("../img/hero2.png") center center / cover no-repeat; filter: blur(1.8px) saturate(0.82) contrast(1.05) brightness(0.94); } .hero-clean::after{ background: radial-gradient(ellipse 760px 460px at 15% 28%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(ellipse 820px 520px at 82% 20%, rgba(120,192,216,0.14), transparent 58%); } .hero-clean-inner{ max-width: 840px; } .hero-clean-title, .hero-clean-lead, .hero-clean-trust, .hero-clean h1, .hero-clean p{ color: #ffffff; } .hero-clean-title{ font-weight: 250; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34); } .hero-clean-lead{ max-width: 640px; color: rgba(255,255,255,0.90); text-shadow: 0 10px 30px rgba(0, 0, 0, 0.24); } .hero-clean-trust{ color: rgba(255,255,255,0.94); } .kicker-pill{ background: rgba(255,255,255,0.92); color: rgba(0,48,96,0.92); } .hero-strong{ color: #ffffff; } .stats-row--four .stat-item{ min-height: 112px; } .word-rotator{ display: inline-block; min-width: 8.2ch; transition: transform .28s ease, opacity .28s ease, text-shadow .28s ease; will-change: transform, opacity; } .word-rotator.is-swapping{ transform: translateY(-1px) scale(1.02); } .word-rotator--cool{ color: #0b5ed7; text-shadow: 0 8px 24px rgba(11, 94, 215, 0.16); } .word-rotator--warm{ color: #0d4e96; text-shadow: 0 8px 24px rgba(13, 78, 150, 0.14); } .stat-item--accent{ position: relative; overflow: hidden; } .stat-item--accent::after{ content: ""; position: absolute; inset: auto -15% -65% auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(120,192,216,0.20), transparent 70%); pointer-events: none; } .gallery-grid--homepage{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .gallery-tile{ position: relative; display: block; width: 100%; min-height: 280px; padding: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(0,48,96,0.10); box-shadow: 0 16px 42px rgba(0, 28, 60, 0.10); background: #dce8f4; cursor: pointer; appearance: none; text-align: left; } .gallery-tile::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.18)); pointer-events: none; } .gallery-tile:hover{ transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0, 28, 60, 0.15); } .gallery-tile-img{ width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; } .gallery-tile:hover .gallery-tile-img{ transform: scale(1.03); } .gallery-tile-captionbar{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px; background: linear-gradient(180deg, rgba(7,18,34,0.15), rgba(7,18,34,0.82)); } .gallery-tile-caption{ display: block; color: #fff; font-weight: 800; text-shadow: 0 6px 14px rgba(0,0,0,0.25); } .gallery-more-pill{ position: absolute; top: 16px; right: 16px; z-index: 2; padding: .42rem .8rem; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--tempo-navy); font-size: .82rem; font-weight: 900; box-shadow: 0 12px 24px rgba(0, 28, 60, 0.14); } .gallery-empty-card{ background: rgba(255,255,255,0.88); } .gallery-modal-content{ overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,0.14); background: rgba(8, 17, 31, 0.96); color: #fff; } .gallery-modal-header{ align-items: center; border-bottom-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(15,23,42,0.62)); } .gallery-modal .btn-close{ filter: invert(1) grayscale(100%); } .gallery-modal-counter{ color: rgba(255,255,255,0.68); font-size: .92rem; } .gallery-carousel-frame{ position: relative; min-height: min(76vh, 820px); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top, rgba(120,192,216,0.18), transparent 38%), linear-gradient(180deg, rgba(7,18,34,0.98), rgba(7,18,34,0.92)); } .gallery-carousel-img{ display: block; width: 100%; max-height: min(76vh, 820px); object-fit: contain; background: transparent; } .gallery-carousel-captionbar{ position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(180deg, rgba(4,11,21,0.05), rgba(4,11,21,0.85)); } .gallery-carousel-caption{ color: #fff; font-weight: 800; font-size: 1rem; } .gallery-modal .carousel-control-prev, .gallery-modal .carousel-control-next{ width: 12%; } .gallery-modal .carousel-control-prev-icon, .gallery-modal .carousel-control-next-icon{ width: 3rem; height: 3rem; border-radius: 50%; background-color: rgba(255,255,255,0.14); background-size: 58% 58%; backdrop-filter: blur(6px); } .promo-parallax{ padding: 144px 0; } .promo-parallax::after{ background: linear-gradient(180deg, rgba(2, 20, 44, 0.40) 0%, rgba(2, 20, 44, 0.22) 42%, rgba(255,255,255,0.20) 100%), radial-gradient(circle at 18% 32%, rgba(120,192,216,0.18), transparent 56%); } .promo-card{ background: rgba(255,255,255,0.84); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.22); box-shadow: 0 18px 44px rgba(0, 17, 34, 0.14); } .contact-section{ background: linear-gradient(180deg, rgba(246,250,255,0.78), #ffffff 54%, rgba(238,246,255,0.64)); } .contact-layout{ margin-bottom: 8px; } .contact-side-stack{ display: grid; gap: 18px; height: 100%; } .contact-intro-card, .contact-social-card, .contact-form-card, .contact-info-card{ border-radius: 24px; box-shadow: 0 16px 44px rgba(0, 28, 60, 0.10); } .contact-intro-card{ background: radial-gradient(circle at top right, rgba(120,192,216,0.20), transparent 42%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.94)); } .contact-form-card{ background: radial-gradient(circle at top right, rgba(120,192,216,0.18), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.95)); } .contact-intro-card .card-body, .contact-social-card .card-body, .contact-form-card .card-body{ padding: 1.6rem; } .contact-card-head{ margin-bottom: 1.2rem; } .contact-badge{ display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(120,192,216,0.16); color: var(--tempo-navy); font-weight: 800; letter-spacing: .02em; font-size: .8rem; margin-bottom: .75rem; } .contact-subtitle{ margin: 0; color: var(--tempo-navy); font-size: 1.5rem; font-weight: 900; } .contact-copy{ color: rgba(0,48,96,0.72); margin-bottom: 1.1rem; } .contact-copy--compact{ max-width: 46rem; margin-top: .65rem; margin-bottom: 0; } .contact-quick-list{ display: grid; gap: 12px; margin-bottom: 1rem; } .contact-quick-item{ display: flex; align-items: center; gap: 12px; padding: .9rem 1rem; border-radius: 18px; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,48,96,0.10); color: var(--tempo-navy); text-decoration: none; } .contact-quick-item strong{ display: block; font-size: .96rem; } .contact-quick-item small{ display: block; color: rgba(0,48,96,0.68); font-size: .84rem; word-break: break-word; } .contact-quick-icon{ width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(120,192,216,0.16); flex: 0 0 auto; } .contact-social-links, .contact-feature-pills{ display: flex; gap: .6rem; flex-wrap: wrap; } .contact-feature-pills{ margin-bottom: 1.1rem; } .contact-feature-pill{ display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .78rem; border-radius: 999px; background: rgba(0,48,96,0.06); color: rgba(0,48,96,0.82); font-size: .84rem; font-weight: 800; } .social-video-stack{ display: grid; gap: 16px; } .social-video-card{ padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.88)); border: 1px solid rgba(0,48,96,0.10); } .social-video-card-top{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .social-platform{ display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; } .social-platform--facebook{ background: rgba(24, 119, 242, 0.14); color: #0b57d0; } .social-platform--tiktok{ background: rgba(15, 23, 42, 0.08); color: #111827; } .social-video-title{ margin: 0; font-size: .96rem; font-weight: 800; color: rgba(0,48,96,0.92); } .social-video-embed-wrap{ position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #eef3f8; } .social-video-iframe{ width: 100%; height: 100%; border: 0; display: block; background: #000; } .social-video-fallback, .social-empty-state{ padding: 1rem 1.1rem; border-radius: 18px; background: rgba(168,216,240,0.18); border: 1px dashed rgba(0,48,96,0.18); color: rgba(0,48,96,0.85); } .modern-contact-form .form-label{ color: rgba(0,48,96,0.88); font-weight: 700; } .input-icon-wrap{ position: relative; } .input-icon{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 1rem; opacity: .75; } .input-icon-wrap .form-control{ padding-left: 44px; min-height: 56px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.92)); } .input-icon-wrap--textarea .input-icon{ top: 20px; transform: none; } .input-icon-wrap--textarea .form-control{ padding-top: 14px; padding-left: 44px; } .contact-note{ color: rgba(0,48,96,0.68); max-width: 28rem; } .contact-info-card .card-body{ display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem; } .contact-info-icon{ font-size: 1.4rem; } .contact-info-label{ color: rgba(0,48,96,0.62); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; } .contact-info-value{ color: var(--tempo-navy); font-size: 1.02rem; font-weight: 800; text-decoration: none; word-break: break-word; } .contact-info-meta{ color: rgba(0,48,96,0.64); font-size: .88rem; } .contact-info-links{ display: flex; gap: .5rem; flex-wrap: wrap; } @media (max-width: 991px){ .gallery-grid--homepage{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-side-stack{ grid-template-columns: 1fr; } .contact-layout, .contact-info-row, .stats-row, .split-feature .row{ --bs-gutter-x: 1rem; } } @media (max-width: 767px){ .hero-clean{ min-height: calc(100svh - var(--nav-h, 72px)); padding-top: calc(var(--nav-h, 72px) + 28px); padding-bottom: 52px; } .section{ padding: 3rem 0; } .mosaic-grid, .svc-detail-grid, .gallery-grid--homepage{ gap: 14px; } .gallery-grid--homepage{ grid-template-columns: 1fr; } .gallery-tile{ min-height: 230px; } .gallery-carousel-frame, .gallery-carousel-img{ max-height: 70vh; min-height: 0; } .gallery-modal .carousel-control-prev, .gallery-modal .carousel-control-next{ width: 16%; } .stats-row--four .stat-item{ min-height: auto; } .contact-subtitle{ font-size: 1.28rem; } .contact-intro-card .card-body, .contact-social-card .card-body, .contact-form-card .card-body{ padding: 1.2rem; } .contact-feature-pills{ margin-bottom: .9rem; } .social-video-embed-wrap{ aspect-ratio: 4 / 3; } } /* =========================== 2026-03-10 finomhangolások =========================== */ #mainNav .btn-ghost{ border: 1px solid rgba(0,48,96,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,249,255,0.92)); color: var(--tempo-navy); box-shadow: 0 8px 20px rgba(0, 28, 60, 0.08); } #mainNav .btn-ghost:hover, #mainNav .btn-ghost:focus{ background: #fff; color: var(--tempo-navy); border-color: rgba(0,48,96,0.22); box-shadow: 0 12px 24px rgba(0, 28, 60, 0.12); } .services-modal{ box-shadow: 0 28px 60px rgba(0, 22, 44, 0.24); } .services-modal .modal-header{ position: relative; overflow: hidden; } .services-modal .modal-header::after{ content: ""; position: absolute; right: -24px; top: -24px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 70%); } .service-tile{ position: relative; isolation: isolate; min-height: 148px; } .service-tile::after{ content: "→"; position: absolute; right: 14px; bottom: 12px; color: rgba(0,48,96,0.34); font-weight: 800; transition: transform .18s ease, color .18s ease; } .service-tile:hover::after{ transform: translateX(3px); color: rgba(0,48,96,0.82); } .st-ico{ width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(120,192,216,0.14); } .split-checks li{ padding-left: 32px; } .split-checks li::before{ content: ""; top: .4rem; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(180deg, #34d399 0%, #0ea5a4 100%); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); } .stats-row--four .stat-item{ align-items: flex-start; } .stats-row--four .stat-item > div:last-child{ min-width: 0; } .stat-value{ white-space: nowrap; font-size: clamp(1.26rem, 2vw, 1.6rem); } .word-rotator{ min-width: 9.5ch; } .contact-social-card--wide, .contact-summary-card{ border-radius: 24px; box-shadow: 0 16px 44px rgba(0, 28, 60, 0.10); } .contact-social-card--wide{ background: radial-gradient(circle at top right, rgba(120,192,216,0.18), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.95)); } .contact-secondary-row{ --bs-gutter-x: 1.15rem; } .social-video-stack--wide{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .contact-summary-card{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.94)); } .contact-summary-card .card-body{ padding: 0; } .contact-summary-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact-summary-item{ padding: 1.45rem 1.35rem; min-width: 0; } .contact-summary-item + .contact-summary-item{ border-left: 1px solid rgba(0,48,96,0.10); } .contact-summary-item .contact-info-value{ display: inline-block; } @media (max-width: 991px){ .social-video-stack--wide{ grid-template-columns: 1fr; } } @media (max-width: 767px){ .service-tile{ min-height: 128px; } .word-rotator{ min-width: 8.3ch; } .contact-secondary-row, .contact-layout, .contact-info-row, .stats-row, .split-feature .row{ --bs-gutter-x: 1rem; } .contact-social-card--wide .card-body, .contact-intro-card .card-body, .contact-form-card .card-body{ padding: 1.2rem; } .contact-summary-grid{ grid-template-columns: 1fr; } .contact-summary-item + .contact-summary-item{ border-left: 0; border-top: 1px solid rgba(0,48,96,0.10); } } /* 2026-03-10 utólagos finomítások */ .stats-row--four > [class*="col-"]{ display: flex; } .stats-row--four .stat-item{ width: 100%; justify-content: center; align-items: center; } .stats-row--four .stat-item > div:last-child{ display: flex; flex-direction: column; align-items: center; text-align: center; } .stats-row--four .stat-label{ text-align: center; } .social-section{ background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,247,255,0.78)); } .social-section + .contact-section{ padding-top: 0.5rem; } @media (max-width: 767px){ .stats-row--four > [class*="col-"]{ display: block; } .stats-row--four .stat-item{ justify-content: center; } }