:root { --bg-dark: #1a1a1a; --primary-yellow: #d1ab30; --secondary-yellow: #f3b024; --blue-cool: #59c0df; --blue-bright: #0dc8d7; --blue-light: #7eedf4; --text-light: #f0f0f0; } /* DARK MODE (default, no class needed) */ html, body { background-color: #2b2b2b; color: var(--text-light); height: 100%; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; line-height: 1.6; transition: background-color 0.4s ease, color 0.4s ease; } /* LIGHT MODE when .light-mode class on */ html.light-mode, html.light-mode body { background-color: #eee !important; color: #111 !important; } body { font-family: 'Roboto', sans-serif; } .brand-name, h1, h2 { font-family: 'Merriweather', sans-serif; letter-spacing: 0.1em; } /* PAGE CONTAINER FOR FLEX LAYOUT, footer at bottom */ .page-container { min-height: 100vh; display: flex; flex-direction: column; } /* HEADER */ header { background-color: var(--bg-dark); padding: 1rem 2rem; color: var(--text-light); } html.light-mode header { background-color: #1a1a1a !important; color: #fff !important; } /* HEADER CONTAINER */ .header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } /* LOGO AREA */ .logo-area { display: flex; align-items: center; gap: 0.75rem; } .logo { height: 70px; width: auto; } .brand-name { font-size: 1.8rem; font-weight: bold; color: var(--primary-yellow); } /* NAV AREA */ .nav-area { display: flex; align-items: center; gap: 1.5rem; } nav { display: flex; align-items: center; gap: 1rem; } nav a { color: var(--text-light); text-decoration: none; font-weight: 400; /* lighter weight */ font-size: 1rem; margin: 0 1rem; /* adds space left and right */ transition: color 0.3s ease; } nav a:hover { color: var(--secondary-yellow); } html.light-mode nav a { color: #fff !important; } html.light-mode nav a:hover { color: var(--secondary-yellow) !important; } /* THEME TOGGLE BUTTON */ #theme-toggle { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: transform 0.2s ease, color 0.4s ease; display: flex; align-items: center; justify-content: center; padding: 0.25rem; height: 2rem; } #theme-toggle:hover { transform: scale(1.2); } html.light-mode #theme-toggle { color: #fff !important; } /* MAIN CONTENT */ main { max-width: 800px; margin: 2rem auto; padding: 0 20px; flex: 1; } /* FORM */ form { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 700px; } input, textarea { width: 100%; box-sizing: border-box; padding: 0.75rem; border: 1px solid var(--blue-cool); border-radius: 5px; font-size: 1rem; background-color: #333; color: var(--text-light); } input::placeholder, textarea::placeholder { color: #bbb; } html.light-mode input, html.light-mode textarea { background-color: #fff !important; color: #111 !important; border: 1px solid #ccc !important; } /* BUTTON */ button { padding: 0.75rem; background-color: var(--blue-bright); color: var(--text-light); border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 1rem; transition: background-color 0.3s ease; } button:hover { background-color: var(--blue-cool); } /* FOOTER */ footer { background-color: var(--bg-dark); color: var(--text-light); text-align: center; padding: 1rem; margin-top: auto; /* pushes footer to bottom */ } html.light-mode footer { background-color: #1a1a1a !important; color: #fff !important; } /* HEADINGS */ h1, h2 { margin-bottom: 1rem; color: var(--primary-yellow); } p { margin-bottom: 1rem; } body { background-color: #2b2b2b; position: relative; z-index: 0; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url('bg.jpg'); /* update with your image path */ background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.06; /* subtle overlay */ z-index: -1; pointer-events: none; } /*footer */ footer { background-color: var(--bg-dark); color: var(--text-light); padding: 3rem 2rem; } .footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .footer-logo { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; } .footer-logo img { height: 150px; width: auto; } .footer-section { flex: 1 1 200px; display: flex; flex-direction: column; gap: 0.5rem; } .footer-section h4 { color: var(--primary-yellow); font-size: 1.1rem; margin-bottom: 0.5rem; } .footer-section a { color: var(--text-light); text-decoration: none; font-size: 0.95rem; transition: color 0.3s ease; } .footer-section a:hover { color: var(--secondary-yellow); } .footer-bottom { text-align: center; margin-top: 2rem; font-size: 0.85rem; color: #aaa; border-top: 1px solid #444; padding-top: 1rem; } .footer-bottom { margin-top: 2rem; font-size: 0.85rem; color: #aaa; border-top: 1px solid #444; padding-top: 1rem; display:flex; align-items: center; justify-content: center; max-width: 100%; height: auto; margin-inline: auto; } /* Responsive tweaks */ @media (max-width: 768px) { .footer-container { flex-direction: column; align-items: center; text-align: center; } .footer-section { align-items: center; } } /*end footer begin index main*/ main section { margin-bottom: 3rem; } .hero-section h1 { font-size: 2rem; color: var(--primary-yellow); margin-bottom: 1rem; } .services-section ul { list-style: disc; padding-left: 1.5rem; color: var(--text-light); } .cta-button { display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--blue-bright); color: var(--text-light); text-decoration: none; border-radius: 5px; margin-top: 1rem; font-weight: bold; transition: background-color 0.3s ease; } .cta-button:hover { background-color: var(--blue-cool); } /* Ogólne */ .home-main { padding: 2rem; max-width: 1200px; margin: 0 auto; color: #f0f0f0; } /* Hero sekcja */ .hero { position: relative; margin-bottom: 4rem; } .hero-img { width: 100%; height: auto; border-radius: 1rem; filter: brightness(0.6); } .hero-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; padding: 1rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .hero-text h1 { font-size: 2.5rem; margin-bottom: 1rem; } .hero-text p { font-size: 1.2rem; } /* Usługi */ .services h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; } .service-item { text-align: center; } .service-item h3 { font-weight: 400; } .service-item img { width: 100%; border-radius: 0.75rem; margin-bottom: 1rem; } .nwu:hover h3 { color: #d1ab30; transition: color 0.3s; } .nwu h3 { transition: color 0.3s; } /* O nas */ .about-us { margin: 4rem 0; } .about-content { display: flex; flex-direction: column; gap: 2rem; } .about-content img { width: 100%; border-radius: 1rem; } .about-content div { text-align: center; } .about-content h2 { font-size: 2rem; margin-bottom: 1rem; } /* CTA */ .cta { background-color: #111; border-radius: 1rem; padding: 2rem; margin-top: 4rem; display: flex; flex-direction: column; gap: 1.5rem; text-align: center; } .cta img { width: 100%; border-radius: 1rem; } .cta-button { display: inline-block; margin-top: 1rem; background-color: #f0f0f0; color: #1a1a1a; padding: 0.75rem 1.5rem; border-radius: 999px; text-decoration: none; font-weight: bold; transition: background-color 0.2s; } .cta-button:hover { background-color: #ddd; } /* Responsywność */ @media (min-width: 768px) { .about-content { flex-direction: row; align-items: center; } .about-content img { width: 50%; } .about-content div { width: 50%; text-align: left; padding-left: 2rem; } .cta { flex-direction: row; text-align: left; } .cta img { width: 50%; } .cta div { width: 50%; padding-left: 2rem; } } .hero-img { width: 100%; height: 400px; /* or any height you want */ object-fit: cover; object-position: center; /* or try 'top' or 'bottom' if needed */ border-radius: 1rem; filter: brightness(0.6); } .about-us { padding: 4rem 2rem; } .about-content { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; } .about-content img { max-width: 500px; width: 100%; border-radius: 1rem; object-fit: cover; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .about-text { max-width: 600px; color: #ececec; /* ciemny tekst, możesz zmienić na jaśniejszy, jeśli tło jest ciemne */ } .about-text h2 { font-size: 2.2rem; color: #fcd34d; /* złoty żółty */ margin-bottom: 1rem; } .about-text p { font-size: 1.1rem; line-height: 1.8; text-align: justify; margin-bottom: 1rem; } /* end of hero stuff */ /* mobile ehader */ /* Default styles */ .header-container { position: relative; /* added for dropdown positioning */ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 1rem; } .logo-area { display: flex; align-items: center; gap: 10px; } .brand-name { font-size: 1.5rem; font-weight: bold; } .nav-area { display: flex; align-items: center; gap: 1rem; } .nav-menu { display: flex; gap: 20px; } #theme-toggle { font-size: 24px; background: none; border: none; cursor: pointer; } #burger { display: none; font-size: 28px; background: none; border: none; cursor: pointer; user-select: none; /* prevent text selection on click */ } .mobile-theme-toggle { display: none; } @media (max-width: 450px) { .brand-name, h1, h2 { font-family: 'Merriweather', sans-serif; font-size: 13px; letter-spacing: 0.1em; } } /* Mobile styles */ @media (max-width: 950px) { .make-small { font-size: 1.2rem; } .make-smallh { font-size: 1.4rem; } .nav-menu { display: none; flex-direction: column; background: #222; color: #eee; position: absolute; top: 100%; left: 0; right: 0; /* ensures full width */ width: 100%; /* ensures full width */ border: none; border-radius: 0; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 1000; } .nav-menu.active { display: flex; } .nav-menu a { color: #eee; padding: 10px 20px; text-decoration: none; } .nav-menu a:hover { background-color: #444; } #burger { display: block; background: none; border: none; font-size: 28px; cursor: pointer; } #theme-toggle { display: none; } .mobile-theme-toggle { display: block; padding: 10px 20px; color: #eee; text-decoration: none; } .mobile-theme-toggle:hover { background-color: #444; } } /* Light mode override for the Kontakt section */ html.light-mode #kontakt { background-color: #f2f2f2; } html.light-mode #kontakt p, html.light-mode #kontakt a, html.light-mode #kontakt li { color: #222; } /* Optionally: darken h1-h6 if you want */ html.light-mode #kontakt h1, html.light-mode #kontakt h2, html.light-mode #kontakt h3, html.light-mode #kontakt h4, html.light-mode #kontakt h5, html.light-mode #kontakt h6 { color: #ce8600; } /* Light mode fix: readable text for services and about-us sections */ html.light-mode .services, html.light-mode .about-us, html.light-mode .about-us p, html.light-mode .services h3{ color: #111; /* dark readable text */ } html.light-mode .services h2, html.light-mode .about-us h2 { color: #ce8600; } #theme-toggle i { font-size: 24px; line-height: 1; vertical-align: middle; } .service-banner { position: absolute; top: 0; left: 0; width: 100%; background: var(--blue-bright); color: #fff; font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.08em; padding: 0.5em 0; text-align: center; border-radius: 0.75rem 0.75rem 0 0; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.08); pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 0.6em; } .service-banner .star { font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9em; color: #fff; margin: 0 0.2em; pointer-events: none; }