/* static/css/styles.css */ /* ========================= TOKENY (zieleń/czerń/szarości) ========================= */ :root { /* Brand (greens) */ --green-50:#ecfdf5; --green-100:#d1fae5; --green-200:#a7f3d0; --green-300:#6ee7b7; --green-400:#34d399; --green-500:#10b981; --green-600:#059669; --green-700:#047857; --green-800:#065f46; --green-900:#064e3b; /* Neutral */ --bg:#ffffff; --bg-muted:#f5f6f7; --surface:#ffffff; --card:#ffffff; --text:#0b0d0f; --text-muted:#60666d; --border:#e6e8eb; /* Links */ --link:var(--green-700); --link-hover:var(--green-800); /* Typo scale */ --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --fs-0:clamp(.875rem,.82rem + .2vw,.95rem); --fs-1:clamp(1rem,.94rem + .3vw,1.125rem); --fs-2:clamp(1.125rem,1rem + .6vw,1.375rem); --fs-3:clamp(1.375rem,1.1rem + 1.2vw,1.75rem); --fs-4:clamp(1.75rem,1.4rem + 1.8vw,2.25rem); --fs-5:clamp(2.25rem,1.8rem + 2.6vw,3rem); /* Spacing */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; /* Radius / cienie */ --radius-sm:.375rem; --radius:.75rem; --radius-lg:1.25rem; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow:0 10px 20px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.06); --shadow-lg:0 20px 40px rgba(0,0,0,.12); /* Layout */ --container:1200px; --header-h:4.25rem; /* Motion */ --ease:cubic-bezier(.2,.8,.2,1); --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; } /* Tryb ciemny (opcjonalnie ustaw: ) */ [data-theme="dark"] { --bg:#0a0b0c; --bg-muted:#0f1113; --surface:#0e1012; --card:#101215; --text:#e7e9ec; --text-muted:#a5acb3; --border:#23262a; --link:#66e0b3; --link-hover:#8ff0cb; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 20px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.35); --shadow-lg:0 20px 40px rgba(0,0,0,.55); } /* ========================= RESET / BAZA / A11Y ========================= */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body.site{ margin:0; font-family:var(--font-sans); color:var(--text); background: radial-gradient(1200px 800px at 10% -10%, rgba(6,95,70,.06), transparent 40%), radial-gradient(1200px 800px at 110% 10%, rgba(16,185,129,.04), transparent 45%), var(--bg); line-height:1.6; font-size:var(--fs-1); /* KLUCZ: stopka zawsze na dole */ display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; } img,svg,video,picture{display:block;max-width:100%;height:auto} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover);text-decoration:underline} strong{font-weight:700} hr{border:0;border-top:1px solid var(--border);margin:var(--sp-6) 0} /* Focus */ :where(a,button,input,select,textarea,[role="button"]):focus-visible{ outline:3px solid color-mix(in oklab, var(--green-500) 60%, white); outline-offset:2px;border-radius:var(--radius-sm); } /* Reduced motion */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Skip link */ .skip-link{ position:absolute;inset:var(--sp-4) auto auto var(--sp-4); background:var(--green-700);color:#fff;padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-sm);transform:translateY(-200%);z-index:1000; } .skip-link:focus{transform:translateY(0)} /* Kontener */ .container{width:min(100% - 2rem, var(--container));margin-inline:auto} /* ========================= NAGŁÓWEK / NAV (sticky) ========================= */ .header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(6px); background-color:color-mix(in oklab, var(--bg) 92%, transparent); border-bottom:1px solid var(--border); } .header__inner{ min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); } .brand{display:inline-flex;align-items:center;gap:.6rem;color:inherit} .brand__logo { font-size: 1.4rem; transform: translateY(-1px); height: 5em; width: auto; vertical-align: middle; } .brand__name{font-weight:800;letter-spacing:.2px} .nav{display:flex;align-items:center} .nav__list{display:flex;gap:clamp(.6rem,2vw,1.25rem);list-style:none;margin:0;padding:0} .nav__link, .btn-nav { /* NOWA klasa do przycisku */ display:inline-block; padding:.45rem .7rem; border-radius:.6rem; color:var(--text); font-weight:700; cursor:pointer; background:transparent; border:none; text-decoration:none; /* ważne, jak użyjesz */ } .nav__link:hover, .btn-nav:hover { background:color-mix(in oklab, var(--green-500) 12%, transparent); text-decoration:none; } .nav__link[aria-current="page"], .btn-nav[aria-current="page"] { background:color-mix(in oklab, var(--green-500) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--green-700) 22%, transparent); } /* Mobile nav */ @media (max-width:720px){ .header__inner{gap:var(--sp-3)} .nav__list{gap:.5rem;overflow-x:auto;scrollbar-width:thin;padding-block:.25rem} } /* ========================= TYPOGRAFIA / BLOKI ========================= */ h1,h2,h3{color:var(--text);line-height:1.2;margin:0 0 var(--sp-4)} h1{font-size:var(--fs-5);letter-spacing:-.02em} h2{font-size:var(--fs-4)} h3{font-size:var(--fs-3)} p{margin:0 0 var(--sp-4);color:var(--text)} .lead{font-size:var(--fs-2);color:var(--text-muted);max-width:68ch} /* ========================= HERO ========================= */ /* ========================= HERO ========================= */ .hero{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; } /* Kontener na tło – tu trzymamy tylko stan, reszta w ::before / ::after */ .hero__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 600ms var(--ease), transform 900ms var(--ease); transform:scale(1.03); /* ten subtle zoom możesz zostawić lub usunąć */ } .hero__bg.is-active{ opacity:1; transform:scale(1); } /* Rozmyte tło na całą sekcję */ .hero__bg::before{ content:""; position:absolute; inset:0; background-image:var(--hero-img); background-size:cover; background-position:center; background-repeat:no-repeat; filter:brightness(.80) blur(6px); /* rozmycie tła */ } /* .hero__bg::after{ content:""; position:absolute; inset:0; background-image:var(--hero-img); background-repeat:no-repeat; background-position:center; background-size:auto 90%; } */ .hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.55)); } .hero__inner{ position:relative; z-index:2; } .hero__title{color:#fff} .hero__subtitle{ color:rgba(255,255,255,.92); max-width:60ch; } .hero__title { text-align: left !important; width: clamp(200px, 40vw, 500px); /* responsywnie większe logo */ height: auto; display: block; } /* ========================= SEKCJE + SIATKI ========================= */ .section{padding:clamp(2rem,4vw + 1rem,4rem) 0} .section--muted{ background:linear-gradient(180deg, color-mix(in oklab, var(--bg-muted) 88%, transparent), transparent 60%); } .section__title{margin:0 0 var(--sp-4)} .section__lead{font-size:var(--fs-1);color:var(--text-muted);max-width:68ch} /* Ogólna siatka */ .grid{display:grid;gap:clamp(.8rem,2.4vw,1.5rem)} .grid--auto-fit{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} /* ========================= LISTY USP ========================= */ .list{padding-left:1.1rem} .list--usp{ list-style:none; padding:0; margin:var(--sp-4) 0 0; display:grid; gap:.6rem; } .list--usp li{position:relative; padding-left:1.6rem} .list--usp li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--green-600); font-weight:900; } /* ========================= KARTY (na przyszłość) ========================= */ .card{ position:relative; overflow:clip; border-radius:var(--radius-lg); background:var(--card); box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); container-type:inline-size; } .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) } .card__img{width:100%; height:13rem; object-fit:cover} .card__title{ position:absolute; left:.9rem; bottom:.9rem; color:#fff; font-weight:800; text-shadow:0 2px 12px rgba(0,0,0,.4); } @container (inline-size > 260px){ .card__title{font-size:1.05rem} } /* ========================= PRZYCISKI / FORMULARZE ========================= */ .btn{ --btn-bg:var(--surface); --btn-text:var(--text); --btn-border:var(--border); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius:.75rem; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-text); font-weight:800; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); text-decoration:none} .btn:active{transform:translateY(0)} .btn--primary{ --btn-bg:linear-gradient(180deg, color-mix(in oklab, var(--green-500) 92%, white), var(--green-600)); --btn-text:#fff; --btn-border:color-mix(in oklab, var(--green-700) 70%, black); } .btn--ghost{ --btn-bg:color-mix(in oklab, var(--green-500) 10%, transparent); --btn-text:var(--green-800); --btn-border:color-mix(in oklab, var(--green-600) 20%, var(--border)); } .input{ appearance:none; width:100%; padding:.7rem .9rem; border-radius:.65rem; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-1); box-shadow:inset 0 1px 2px rgba(0,0,0,.03); transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .input::placeholder{color:color-mix(in oklab, var(--text-muted) 80%, transparent)} .input:focus{ border-color:color-mix(in oklab, var(--green-600) 40%, var(--border)); box-shadow:0 0 0 4px color-mix(in oklab, var(--green-500) 18%, transparent); outline:none; } .form{display:grid;gap:var(--sp-3)} .form--inline{grid-auto-flow:column;align-items:center;grid-auto-columns:1fr auto} @media (max-width:600px){.form--inline{grid-auto-flow:row}} /* ========================= LINKI / UTILS ========================= */ .link{ color:var(--link); text-decoration:none; font-weight:700; border-bottom:1px dashed color-mix(in oklab, var(--link) 40%, transparent); } .link:hover{color:var(--link-hover); text-decoration:none; border-bottom-style:solid} .muted{color:var(--text-muted)} .center{text-align:center} .max-w-prose{max-width:68ch} .mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-8{margin-top:var(--sp-8)} .mb-0{margin-bottom:0} .mb-4{margin-bottom:var(--sp-4)} .mb-8{margin-bottom:var(--sp-8)} .pt-0{padding-top:0} .pb-0{padding-bottom:0} /* ========================= STOPKA (przy dnie) ========================= */ .footer{ background:linear-gradient(180deg, color-mix(in oklab, var(--bg-muted) 90%, transparent), transparent); border-top:1px solid var(--border); margin-top:var(--sp-8); } .footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-8); padding:var(--sp-10) 0; } @media (max-width:920px){ .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .footer__grid{grid-template-columns:1fr} } .footer__title{font-size:1.05rem;font-weight:800;margin:0 0 var(--sp-3)} .contact p{margin:0 0 .5rem} .hours{color:var(--text-muted)} .footer__links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .footer__links a{color:var(--text)} .footer__links a:hover{color:var(--link-hover);text-decoration:underline} .social{list-style:none;margin:0;padding:0;display:flex;gap:.8rem;flex-wrap:wrap} .social a{ display:inline-flex; align-items: center; gap: .4rem; padding:.4rem .7rem; border-radius:999px; background:color-mix(in oklab, var(--green-500) 12%, transparent); border:1px solid color-mix(in oklab, var(--green-700) 22%, var(--border)); color:var(--text); text-decoration:none; } .footer__bar{border-top:1px solid var(--border); background:color-mix(in oklab, var(--bg-muted) 88%, transparent)} .footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) 0} /* ========================= ANIMACJE ========================= */ @keyframes floatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .hero__title,.hero__subtitle{animation:floatIn var(--dur-3) var(--ease) both} .hero__subtitle{animation-delay:90ms} /* ========================= DRUK ========================= */ @media print{ .nav,.hero__media,.footer__bar{display:none!important} .section{padding:1rem 0} body{background:#fff} a{color:#000;text-decoration:underline} } .map-frame { aspect-ratio: 4/3; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } @font-face { font-family: 'BabieLato'; src: url('fonts/BabieLato.ttf') format('truetype'); font-weight: normal; font-style: normal; } .logo__font { font-family: 'BabieLato', cursive; font-size: 60px; color: #000; /* zmień na dowolny kolor */ } .logo_img_font { width: auto; height: 8vh; /* dopasowywalna wysokość jak font-size */ display: block; margin: 0 auto; object-fit: contain; }