/* ==========================================
MODERNIZÁLT CSS - szterszkykrisztian.hu
Ez a fájl a style.css kiegészítése/felülírása.
Használat: style.css UTÁN töltsd be:
========================================== */
/* ==========================================
1. MODERN FONT - Google Fonts
Add hozzá a -hez:
========================================== */
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: #FAFAFA; /* Tiszta háttér a fix kép helyett */
background-image: none !important;
}
/* ==========================================
2. SECTION HOVER KIKAPCSOLÁSA
========================================== */
.section:hover,
.section-dark:hover {
transform: none !important;
box-shadow: none !important;
}
.section {
background: #FFFFFF;
padding: 100px 0;
opacity: 1;
transform: none;
}
.section-dark {
background: #1E293B;
}
/* ==========================================
3. LOADING SCREEN KIKAPCSOLÁSA
========================================== */
.loading-screen {
display: none !important;
}
/* ==========================================
4. PARTICLES/LINES KIKAPCSOLÁSA
========================================== */
.particles,
.line,
.hero-background {
display: none !important;
}
/* ==========================================
5. MODERNIZÁLT HERO SECTION
========================================== */
.hero {
min-height: 90vh;
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
padding: 140px 0 100px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Subtilis glow effekt */
.hero::before {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 60%;
height: 160%;
background: radial-gradient(ellipse, rgba(210,179,6,0.05) 0%, transparent 50%);
pointer-events: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: #E2E8F0;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 16px;
}
.hero-badge span:last-child {
color: #F4D740;
}
.hero-heading {
margin-bottom: 0;
}
.hero-name {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
color: #F4D740;
margin-bottom: 2rem;
}
.hero-container {
gap: 80px;
}
.hero-typing-title {
font-size: clamp(1.5rem, 3vw, 2.5rem);
min-height: auto;
margin-bottom: 1.5rem;
}
.hero-description {
font-size: 1.15rem;
line-height: 1.8;
color: #94A3B8;
min-height: auto;
max-width: 500px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
}
.hero-pills {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 26px;
}
.hero-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: #E2E8F0;
font-weight: 600;
font-size: 0.95rem;
}
.hero-pill i {
color: #F4D740;
}
/* Cursor animáció eltávolítása ha nem kell typing */
/*
.cursor {
display: none;
}
*/
.hero-cta {
padding: 18px 36px;
font-size: 1rem;
font-weight: 600;
border-radius: 12px; /* Kevésbé pill-shaped */
}
.hero-cta.alt {
background: #334155;
color: #E2E8F0;
border: 1px solid #475569;
}
.hero-cta.alt:hover {
background: #475569;
}
.hero-image img {
border-radius: 24px;
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
/* ==========================================
6. MODERNIZÁLT NAVIGÁCIÓ
========================================== */
.navbar {
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 12px 0;
}
.nav-link {
font-weight: 500;
font-size: 0.95rem;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.2s ease;
}
.nav-link:hover {
background: rgba(244, 215, 64, 0.1);
}
.nav-link::after {
display: none; /* Underline effekt helyett háttér */
}
.nav-link.active {
background: rgba(244, 215, 64, 0.15);
color: #F4D740;
}
/* ==========================================
7. MODERNIZÁLT SECTION CÍMEK
========================================== */
.section-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.02em;
opacity: 1;
transform: none;
}
.section-title::after {
width: 60px;
height: 4px;
border-radius: 2px;
margin: 24px auto;
transition: none;
}
.section-title.reveal::after {
width: 60px;
}
.section-subtitle {
font-size: 1.1rem;
color: #64748B;
max-width: 600px;
margin: 0 auto 60px;
}
.section-dark .section-subtitle {
color: #94A3B8;
}
/* ==========================================
8. MODERNIZÁLT GOMBOK
========================================== */
.btn {
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.25s ease;
}
.btn-primary {
background: linear-gradient(135deg, #F4D740 0%, #DDB301 100%);
box-shadow: 0 4px 14px rgba(244, 215, 64, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(210, 179, 6, 0.4);
}
.btn-secondary {
background: #334155;
border: 1px solid #475569;
}
.btn-secondary:hover {
background: #475569;
transform: translateY(-2px);
}
/* ==========================================
9. MODERNIZÁLT SERVICE KÁRTYÁK
========================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.service-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
border-color: #F4D740;
box-shadow: 0 16px 36px rgba(244, 215, 64, 0.18);
transform: translateY(-6px);
}
.service-icon {
position: relative;
top: auto;
right: auto;
width: 72px;
height: 72px;
margin: 30px 30px 0;
border-radius: 18px;
background: linear-gradient(135deg, #F4D740 0%, #D2B306 100%);
}
.service-icon i {
font-size: 1.6rem;
}
.service-image {
height: 200px;
margin: 20px;
border-radius: 12px;
overflow: hidden;
}
.service-card h3 {
font-size: 1.5rem;
font-weight: 700;
padding: 20px 30px 10px;
}
.service-list li {
padding: 8px 0;
color: #64748B;
}
.service-list li i {
color: #F4D740;
margin-right: 10px;
}
.service-meta {
display: flex;
align-items: center;
gap: 8px;
color: #94A3B8;
padding: 0 30px 12px;
font-weight: 600;
font-size: 0.9rem;
}
.service-meta i {
color: #F4D740;
}
.service-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 0 30px 20px;
}
.service-tag {
padding: 6px 10px;
border-radius: 10px;
background: #F8FAFC;
color: #475569;
font-weight: 600;
font-size: 0.85rem;
border: 1px solid #E2E8F0;
}
/* ==========================================
10. MODERNIZÁLT ABOUT SECTION
========================================== */
.about-image img {
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.about-text h3 {
font-size: 1.75rem;
font-weight: 700;
color: #1E293B;
}
.about-text p {
color: #64748B;
font-size: 1.05rem;
line-height: 1.8;
}
.about-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 20px;
}
.about-highlight {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
color: #475569;
font-weight: 600;
}
.about-highlight i {
color: #F4D740;
}
.stat-item {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 24px;
}
.stat-item:hover {
border-color: #F4D740;
}
.stat-item h4 {
font-size: 2.25rem;
font-weight: 800;
color: #1E293B;
}
/* ==========================================
11. SCROLL PROGRESS BAR FINOMÍTÁS
========================================== */
.scroll-progress-bar {
height: 3px;
background: linear-gradient(90deg, #F4D740, #DDB301);
box-shadow: none;
}
/* ==========================================
12. SCROLL TO TOP GOMB
========================================== */
.scroll-to-top {
background: #1E293B;
border: 1px solid #334155;
border-radius: 12px;
width: 48px;
height: 48px;
}
.scroll-to-top:hover {
background: #F4D740;
border-color: #F4D740;
color: #1E293B;
}
/* ==========================================
13. FOOTER MODERNIZÁLÁS
========================================== */
.footer {
background: #0F172A;
padding: 40px 0;
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer p {
color: #64748B;
}
.footer-links a {
color: #94A3B8;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #F4D740;
}
/* ==========================================
14. CONTACT FORM MODERNIZÁLÁS
========================================== */
.contact-form input,
.contact-form textarea,
.form-input {
background: #F8FAFC;
border: 2px solid #E2E8F0;
border-radius: 12px;
padding: 16px 20px;
font-size: 1rem;
transition: all 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.form-input:focus {
border-color: #F4D740;
background: #FFFFFF;
box-shadow: 0 0 0 4px rgba(244, 215, 64, 0.1);
}
/* ==========================================
15. COOKIE BANNER MODERNIZÁLÁS
========================================== */
.cookie-banner {
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,0.1);
border-radius: 0;
}
.cookie-modal-content {
border-radius: 20px;
background: #FFFFFF;
}
/* ==========================================
16. PORTFOLIO SLIDER
========================================== */
.portfolio-slider {
background: #F8FAFC;
border-radius: 24px;
padding: 20px;
}
.slide img {
border-radius: 16px;
}
.slide-caption {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
}
.slider-btn {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 12px;
width: 48px;
height: 48px;
color: #1E293B;
}
.slider-btn:hover {
background: #F4D740;
border-color: #F4D740;
}
/* ==========================================
17. REVIEW KÁRTYÁK
========================================== */
.review-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 20px;
}
.review-card:hover {
border-color: #F4D740;
}
/* ==========================================
18. APPOINTMENT WIDGET
========================================== */
.appointment-widget {
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
/* ==========================================
19. SMOOTH SCROLL ENHANCEMENT
========================================== */
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Navbar magasság */
}
/* ==========================================
20. RESZPONZÍV FINOMHANGOLÁSOK
========================================== */
@media (max-width: 768px) {
.section {
padding: 80px 0;
}
.hero {
padding: 120px 20px 80px;
min-height: auto;
}
.hero-name {
font-size: 1.75rem;
}
.hero-container {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-image {
order: -1;
}
.about-content {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
.nav-menu {
gap: 8px;
}
.nav-link {
padding: 6px 12px;
font-size: 0.85rem;
}
}
/* ==========================================
21. ANIMÁCIÓK CSÖKKENTÉSE
(Prefers-reduced-motion támogatás)
========================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================
22. PRINT STYLES (opcionális)
========================================== */
@media print {
.navbar,
.scroll-to-top,
.cookie-banner,
.scroll-progress-bar {
display: none !important;
}
.section {
padding: 40px 0;
page-break-inside: avoid;
}
}