/* Grundserwis — statyczna wersja strony (bez WordPressa) */ /* Czcionki (Source Serif Pro, Noto Sans) są ładowane przez w każdej strony, nie przez @import w CSS — @import bywa blokowany/wolny i potrafi dawać "dziwne" przełamanie fontów. */ :root{ --navy: #121f38; --blue: #0366d6; --text: #404248; --text-light: #676767; --cream: #f7f5e7; --border: #e2e2e2; --serif: "Source Serif Pro", Georgia, "Times New Roman", serif; --sans: "Noto Sans", "Segoe UI", Arial, sans-serif; --open: "Open Sans", Arial, sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth; height:100%;} body{ margin:0; min-height:100%; display:flex; flex-direction:column; font-family: var(--open); font-size:17px; line-height:1.65; color:var(--text); background:#fff; } img{max-width:100%; display:block;} a{color:var(--blue); text-decoration:none;} a:hover{text-decoration:underline;} .container{max-width:1140px; margin:0 auto; padding:0 20px;} h1,h2,h3,h4{font-family:var(--open); font-weight:700; margin:0 0 .5em;} /* ---------- Top utility bar ---------- */ .topbar{ background:var(--navy); color:#fff; font-family:var(--sans); font-size:13px; letter-spacing:.3px; text-align:center; padding:8px 15px; } .topbar a{color:#fff;} /* ---------- Main nav ---------- */ .navbar{ background:#fff; border-bottom:1px solid var(--border); } .navbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; } .navbar .logo img{max-width:200px;} .navbar nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; } .navbar nav a{ font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:var(--text); text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent; } .navbar nav a:hover, .navbar nav a.active{ color:var(--blue); border-bottom-color:var(--blue); } .nav-toggle{display:none; background:none; border:1px solid var(--text); border-radius:3px; padding:8px 10px; cursor:pointer;} .nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0;} @media (max-width: 860px){ .navbar nav{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); z-index:50; } .navbar nav.open{display:block;} .navbar nav ul{flex-direction:column; gap:0;} .navbar nav ul li{border-bottom:1px solid var(--border);} .navbar nav ul li a{display:block; padding:14px 20px;} .navbar .container{position:relative;} .nav-toggle{display:block;} .navbar .logo img{max-width:140px;} } /* ---------- Hero ---------- */ .hero{ position:relative; background:#1a1a1a url('../images/hero-bg.jpg') center/cover no-repeat; background-attachment:fixed; min-height:480px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; } .hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.8); } .hero .hero-inner{position:relative; z-index:1; padding:60px 20px;} .hero h1{ font-size:44px; font-weight:400; letter-spacing:2px; margin-bottom:.3em; } .hero p{font-size:29px; margin:0;} @media (min-width:960px){ .hero h1{font-size:65px;} } /* ---------- Product strip ---------- */ .products{ width:100%; max-width:1140px; margin:0 auto; padding:50px 20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:30px; } .products img{width:150px; height:150px; object-fit:contain;} /* ---------- Section helpers ---------- */ .section{padding:70px 20px;} .section-narrow{max-width:900px; margin:0 auto;} .section h2{ text-align:center; font-size:48px; margin-bottom:14px; } .divider{ width:60px; height:3px; background:var(--blue); margin:0 auto 40px; } .about .divider{ width:min(485px, 70%); background:#fff; } /* ---------- Kim jesteśmy (dark) ---------- */ .about{ background:var(--navy); color:#fff; } .about h2{color:#fff;} .about p{margin:0 0 1.1em; color:#e7e9ee; font-weight:600;} /* ---------- Usługi accordion ---------- */ .accordion{max-width:900px; margin:0 auto;} .accordion details{ border-bottom:1px solid var(--border); padding:14px 0; } .accordion summary{ cursor:pointer; list-style:none; font-weight:700; font-size:17px; display:flex; align-items:center; gap:10px; color:var(--text); } .accordion summary::-webkit-details-marker{display:none;} .accordion summary::before{ content:"+"; color:var(--blue); font-size:20px; font-weight:700; width:1em; } .accordion details[open] summary::before{content:"–";} .accordion .panel{ padding:14px 0 4px 1.9em; color:var(--text-light); } .accordion .panel p{margin:0 0 1em;} /* ---------- Divider photo band ---------- */ .photo-band{ min-height:260px; background:#1a1a1a url('../images/section-bg.jpg') center/cover no-repeat; background-attachment:fixed; } /* ---------- Kontakt ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; margin-bottom:auto; } .contact-grid iframe{width:100%; height:100%; min-height:420px; border:0;} .contact-info{padding:40px;} .contact-cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:20px; } .contact-cols h4{font-size:16px; text-transform:uppercase; letter-spacing:.5px; font-family:var(--serif); font-weight:600; margin-bottom:14px;} .hours-row{display:flex; justify-content:space-between; padding:4px 0; font-size:15px;} .contact-address img{max-width:200px; margin-bottom:14px;} .contact-address p{font-weight:700; margin:0; font-size:15px;} .contact-details h4{font-size:16px; text-transform:uppercase; letter-spacing:.5px; font-family:var(--serif); font-weight:600; margin-bottom:14px;} .contact-details p{font-weight:700; margin:0 0 1em; font-size:15px;} .contact-details .highlight{color:#d3322b;} .contact-partner{padding-top:10px;} .contact-partner img{max-width:260px;} @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} .contact-cols{grid-template-columns:1fr;} } /* ---------- Footer ---------- */ .site-footer{ background:var(--navy); color:#fff; text-align:center; padding:22px 20px; font-size:14px; font-family:var(--serif); } /* ---------- Generic content page ---------- */ .page-content{padding:60px 20px; max-width:820px; margin:0 auto; margin-bottom:auto;} .page-content h1{font-size:36px; margin-bottom:.6em;} .page-content h3{font-size:20px; margin-top:1.6em; color:var(--navy);} .page-content ul{padding-left:1.3em;} .page-content li{margin-bottom:.4em;} /* ---------- Form page ---------- */ .repair-form{max-width:700px; margin:0 auto;} .repair-form label{display:block; font-weight:600; margin-bottom:6px; font-size:15px;} .repair-form .field{margin-bottom:20px;} .repair-form input[type=text], .repair-form input[type=email], .repair-form input[type=tel], .repair-form input[type=date], .repair-form select, .repair-form textarea{ width:100%; padding:10px 12px; font-size:15px; border:1px solid var(--border); border-radius:3px; font-family:var(--open); color:var(--text); } .repair-form textarea{min-height:120px;} .repair-form .checkbox-field{display:flex; align-items:flex-start; gap:10px;} .repair-form .checkbox-field input{margin-top:5px;} .repair-form .checkbox-field label{font-weight:400; font-size:14px; margin:0;} .repair-form button{ background:var(--blue); color:#fff; border:0; border-radius:3px; padding:12px 30px; font-size:15px; font-weight:600; cursor:pointer; font-family:var(--sans); text-transform:uppercase; letter-spacing:.5px; } .repair-form button:hover{background:#024ea3;} .form-note{ background:#f4f7fb; border:1px solid #dce6f2; border-radius:4px; padding:14px 18px; font-size:14px; color:var(--text-light); margin-bottom:30px; } /* ---------- Zgłoś naprawę: instrukcja e-mail zamiast formularza ---------- */ .repair-fields{ padding-left:1.3em; margin:20px 0; } .repair-fields li{ margin-bottom:10px; font-size:16px; } .btn-primary{ display:inline-block; background:var(--blue); color:#fff !important; border:0; border-radius:3px; padding:14px 32px; font-size:15px; font-weight:600; font-family:var(--sans); text-transform:uppercase; letter-spacing:.5px; text-decoration:none !important; } .btn-primary:hover{background:#024ea3;} .form-hint{ font-size:13px; color:var(--text-light); margin-top:10px; } /* ---------- Belka ostrzegawcza (np. czasowa niedostępność telefonu) ---------- */ .alert-notice{ background:#fbeaea; border:2px solid #d3322b; color:#a3312c; border-radius:4px; padding:16px 20px; font-weight:700; font-family:var(--sans); font-size:15px; line-height:1.5; margin-bottom:30px; } .alert-bar{ background:#d3322b; color:#fff; text-align:center; font-family:var(--sans); font-weight:700; font-size:14px; line-height:1.5; padding:10px 15px; } /* ---------- Komunikat statusu formularza ---------- */ .form-status{ border-radius:4px; padding:14px 18px; margin-bottom:24px; font-size:15px; font-family:var(--sans); } .form-status-ok{background:#e9f7ee; border:1px solid #b7e3c6; color:#1e6b3c;} .form-status-error{background:#fbeaea; border:1px solid #f0bcbc; color:#a3312c;} /* ---------- Cookie bar ---------- */ .cookie-bar{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); padding:14px 20px; font-size:13px; text-align:center; color:var(--text); z-index:200; } .cookie-bar a{margin-left:10px; font-weight:600;} .cookie-bar .close-x{ margin-left:16px; font-weight:700; color:var(--text); cursor:pointer; } .cookie-bar.hidden{display:none;}