/* ========================================================================== NEXUS INFORMATIKA Fájl.............: layout.css Modul............: Layout Verzió...........: 1.0.0 Feladata: Az oldal szerkezetének és fő elrendezéseinek kezelése. ========================================================================== */ /* ========================================================== OLDAL ========================================================== */ body{ background:var(--bg-body); color:var(--text-primary); } /* ========================================================== KONTÉNER ========================================================== */ .container{ width:min(var(--container-width), calc(100% - 48px)); margin-inline:auto; } /* ========================================================== SZEKCIÓK ========================================================== */ section{ padding:var(--section-padding) 0; } /* ========================================================== FEJLÉC ========================================================== */ .site-header{ position:sticky; top:0; left:0; width:100%; height:var(--header-height); z-index:1000; background:var(--bg-header); backdrop-filter:blur(18px); border-bottom:1px solid var(--border-color); } /* ========================================================== FEJLÉC BELSŐ ELRENDEZÉS ========================================================== */ .header-container{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:24px; } /* ========================================================== NAVIGÁCIÓ ========================================================== */ .main-navigation{ flex:1; display:flex; justify-content:center; } .main-navigation ul{ display:flex; gap:var(--gap-lg); } /* ========================================================== HERO ========================================================== */ .hero-section{ position:relative; min-height:calc(100vh - var(--header-height)); display:flex; align-items:center; overflow:hidden; background: linear-gradient( 90deg, rgba(11,19,32,.96) 0%, /*rgba(11,19,32,.96) 35%,*/ /*rgba(11,19,32,.88) 50%,*/ rgba(11,19,32,.45) 65%, rgba(11,19,32,.25) 80%, rgba(11,19,32,.0) 100% ), url("../images/hero/hero-final.png"); background-size:cover; background-position:center center; background-repeat:no-repeat; } /* ========================================================== HERO ELRENDEZÉS ========================================================== */ .hero-container{ position:relative; z-index:5; } /* ========================================================== HERO BAL OLDAL ========================================================== */ .hero-content{ width:500px; max-width:100%; margin-left:0; position:relative; z-index:5; } /* ========================================================== HERO CÍM ========================================================== */ .hero-content h1{ max-width:500px; line-height:1.08; } /* ========================================================== HERO LEÍRÁS ========================================================== */ .hero-content p{ max-width:460px; line-height:1.75; } /* ========================================================== HERO JOBB OLDAL ========================================================== */ .hero-scene{} /* ---------------------------------------------------------- Háttér ---------------------------------------------------------- */ .hero-background{} /* ---------------------------------------------------------- Szerver ---------------------------------------------------------- */ .hero-server{} /* ---------------------------------------------------------- Család ---------------------------------------------------------- */ .hero-family{} /* ---------------------------------------------------------- Üzleti csapat ---------------------------------------------------------- */ .hero-business{} /* ---------------------------------------------------------- Fény effektek ---------------------------------------------------------- */ .hero-effects{ } /* ========================================================== GOMB CSOPORT ========================================================== */ .hero-buttons{ display:flex; gap:var(--gap-sm); margin-top:40px; } /* ========================================================== SZOLGÁLTATÁS KÁRTYÁK ========================================================== */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md); } /* ========================================================== ELŐNYÖK ========================================================== */ .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md); } /* ========================================================== KAPCSOLAT ========================================================== */ .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-md); } /* ========================================================== FOOTER ========================================================== */ .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--gap-lg); } /* ============================================================================= NEXUS INFORMATIKA Fájl: layout.css Modul: NEX-UI-002 Név: Szolgáltatásaink Verzió: 1.0 Állapot: Fejlesztés alatt Leírás: A főoldal szolgáltatásokat bemutató szekciójának alap elrendezése és kártyarendszere. ============================================================================= */ /* ============================================================================= SZOLGÁLTATÁSOK SZEKCIÓ ============================================================================= */ .services-section{ position:relative; width:100%; padding:60px 0 120px; background:#0B1320; overflow:hidden; } /* ========================================================== HERO → SERVICES ÁTMENET ========================================================== */ .hero-section::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; background:linear-gradient( to bottom, rgba(11,19,32,0) 0%, rgba(11,19,32,.35) 40%, rgba(11,19,32,.75) 70%, #0B1320 100% ); pointer-events:none; z-index:2; } /* ============================================================================= KONTÉNER ============================================================================= */ .services-section .container{ width:100%; max-width:1920px; margin:0 auto; padding:0 30px; } /* ============================================================================= FEJLÉC ============================================================================= */ .services-header{ text-align:center; margin-bottom:50px; } .services-header h2{ font-size:52px; font-weight:700; color:#ffffff; margin-bottom:20px; } .services-header p{ max-width:760px; margin:auto; font-size:20px; line-height:1.8; color:#A6B6CC; } /* ============================================================================= SZOLGÁLTATÁS RÁCS ============================================================================= */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; } /* ============================================================================= KÁRTYA ============================================================================= */ .service-card{ background:#111C2F; border:1px solid rgba(255,255,255,.05); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; height:100%; } /* ============================================================================= HOVER ============================================================================= */ .service-card:hover{ transform:translateY(-8px); border-color:#0066FF; box-shadow: 0 0 35px rgba(0,102,255,.25), 0 20px 50px rgba(0,0,0,.45); } /* ============================================================================= KÁRTYA KÉP ============================================================================= */ .service-image{ position:relative; width:100%; height:180px; overflow:hidden; } .service-image img{ width:100%; height:100%; object-fit:cover; transition:.5s; } .service-card:hover .service-image img{ transform:scale(1.05); } /* ============================================================================= KÁRTYA TARTALOM ============================================================================= */ .service-content{ padding:27px; } /* ============================================================================= NEX-UI-002 SZOLGÁLTATÁS KÁRTYA TARTALMA ============================================================================= */ /*------------------------------------------------------- IKON -------------------------------------------------------*/ .service-icon{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-bottom:25px; border-radius:18px; background:linear-gradient(145deg,#13294a,#0d1c31); border:1px solid rgba(0,210,255,.20); } .service-icon img{ width:40px; height:40px; } /*------------------------------------------------------- CÍM -------------------------------------------------------*/ .service-content h3{ font-size:24px; color:#FFFFFF; font-weight:700; margin-bottom:18px; } /*------------------------------------------------------- LEÍRÁS -------------------------------------------------------*/ .service-content p{ color:#A6B6CC; line-height:1.8; font-size:17px; margin-bottom:30px; } /*------------------------------------------------------- LISTA -------------------------------------------------------*/ .service-content ul{ list-style:none; margin:0; padding:0; } .service-content li{ color:#E8EEF7; margin-bottom:14px; padding-left:32px; position:relative; font-size:16px; } .service-content li::before{ content:"✓"; position:absolute; left:0; top:0; color:#00D2FF; font-weight:bold; } /*------------------------------------------------------- GOMB -------------------------------------------------------*/ .service-link{ display:inline-flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px; color:#00D2FF; font-weight:600; text-decoration:none; transition:.30s; } .service-link span{ transition:.30s; } .service-link:hover{ color:#FFFFFF; } .service-link:hover span{ transform:translateX(8px); } /*------------------------------------------------------- KÉP ÁTMENET -------------------------------------------------------*/ .service-image::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient( to top, #111C2F, rgba(17,28,47,0) ); } /* ============================================================================= NEX-UI-002 HOVER • BIZALMI SÁV • RESPONSIVE Verzió: 1.0 ============================================================================= */ /* ========================================================== KÁRTYA FÉNY EFFEKT ========================================================== */ .service-card{ position:relative; } .service-card::before{ content:""; position:absolute; inset:0; border-radius:22px; background:linear-gradient( 135deg, rgba(0,210,255,.08), rgba(0,102,255,0) ); opacity:0; transition:.35s; pointer-events:none; } .service-card:hover::before{ opacity:1; } /* ========================================================== KÁRTYA HOVER ========================================================== */ /* ========================================================== SZOLGÁLTATÁS KÁRTYA LINK ========================================================== */ .service-card-link{ display:block; text-decoration:none; color:inherit; } /* Egérmutató */ .service-card{ cursor:pointer; } /* Hover animáció */ .service-card-link:hover .service-card{ transform:translateY(-10px); } .service-card-link:hover .service-icon{ transform:rotate(-6deg) scale(1.05); transition:.35s; box-shadow: 0 0 25px rgba(0,210,255,.30); } .service-card-link:hover h3{ color:#00D2FF; } /* ========================================================== SZOLGÁLTATÁS KÁRTYA LINK ========================================================== */ .service-card-link{ display:block; text-decoration:none; color:inherit; } .service-card{ cursor:pointer; } /* ========================================================== BIZALMI SÁV ========================================================== */ .service-features{ margin-top:90px; display:grid; grid-template-columns:repeat(5,1fr); gap:25px; } .feature-box{ background:#111C2F; border:1px solid rgba(255,255,255,.05); border-radius:18px; padding:28px; text-align:center; transition:.30s; } .feature-box:hover{ transform:translateY(-6px); border-color:#00D2FF; } .feature-box h4{ color:#FFFFFF; margin-bottom:12px; font-size:20px; } .feature-box p{ color:#9DB0C9; line-height:1.6; font-size:15px; } /* ========================================================== TABLET ========================================================== */ @media(max-width:1200px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .service-features{ grid-template-columns:repeat(2,1fr); } } /* ========================================================== MOBIL ========================================================== */ @media(max-width:768px){ .services-section{ padding:90px 0; } .services-header h2{ font-size:38px; } .services-header p{ font-size:17px; } .services-grid{ grid-template-columns:1fr; } .service-features{ grid-template-columns:1fr; } .service-image{ height:220px; } .service-content{ padding:24px; } } /* ========================================================== 4K KIJELZŐ ========================================================== */ @media(min-width:2200px){ .services-section .container{ max-width:1700px; } .services-grid{ gap:45px; } .service-image{ height:310px; } .service-content h3{ font-size:34px; } .service-content p{ font-size:19px; } } /* ============================================================================= NEXUS INFORMATIKA NEX-UI-005 FOOTER Verzió: 1.0 ============================================================================= */ /* ========================================================== FOOTER ========================================================== */ .site-footer{ background:#08111D; border-top:1px solid rgba(255,255,255,.06); } /* ========================================================== CTA ========================================================== */ .footer-cta{ padding:90px 0 80px; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); } .footer-cta h2{ color:#FFFFFF; font-size:48px; font-weight:700; margin-bottom:25px; } .footer-cta p{ max-width:850px; margin:auto; color:#A7B8CF; line-height:1.8; font-size:20px; } .footer-cta-buttons{ display:flex; justify-content:center; gap:20px; margin-top:45px; } .footer-note{ margin-top:35px; color:#7F93AC; font-size:15px; } /* ========================================================== FŐ FOOTER ========================================================== */ .footer-main{ padding:90px 0; } /* ========================================================== FOOTER GRID ========================================================== */ .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:60px; } /* ========================================================== OSZLOPOK ========================================================== */ .footer-column h3{ color:#FFFFFF; font-size:22px; margin-bottom:28px; } .footer-column p{ color:#A6B6CC; line-height:1.8; } .footer-column ul{ list-style:none; margin:0; padding:0; } .footer-column li{ margin-bottom:16px; } .footer-column a{ color:#A6B6CC; text-decoration:none; transition:.25s; } .footer-column a:hover{ color:#00D2FF; } /* ========================================================== GOOGLE MAPS KÁRTYA ========================================================== */ .footer-map-card{ background:#111C2F; border:1px solid rgba(255,255,255,.05); border-radius:22px; overflow:hidden; transition:.35s; box-shadow: 0 12px 30px rgba(0,0,0,.25); } .footer-map-card:hover{ transform:translateY(-6px); border-color:#00D2FF; box-shadow: 0 0 35px rgba(0,210,255,.18), 0 25px 45px rgba(0,0,0,.45); } .footer-map-header{ padding:18px 24px; background:linear-gradient( 145deg, #13294A, #0D1C31 ); color:#FFFFFF; font-weight:600; border-bottom:1px solid rgba(255,255,255,.05); } .footer-map-frame{ width:100%; height:220px; background:#0B1320; display:flex; align-items:center; justify-content:center; color:#5B7190; font-size:18px; } .footer-map-content{ padding:24px; } .footer-map-content h4{ color:#FFFFFF; margin-bottom:12px; font-size:22px; } .footer-map-content p{ color:#A6B6CC; line-height:1.8; margin-bottom:22px; } .footer-map-button{ display:inline-flex; align-items:center; gap:10px; color:#00D2FF; text-decoration:none; font-weight:600; transition:.30s; } .footer-map-button:hover{ color:#FFFFFF; } .page-hero{ background:#0b1320; padding:90px 0 70px; border-bottom:1px solid rgba(255,255,255,.08); }