/* ====== Bright Medical Green theme – light + dark (moon) ====== */ /* Domyślnie: CIEMNY motyw (księżyc) */ :root{ --header-offset:140px; /* Dark / moon theme */ --bg:#020617; /* tło strony */ --bg-alt:#020617; /* tło sekcji */ --text:#e5e7eb; /* główny tekst */ --muted:#94a3b8; /* tekst pomocniczy */ --accent:#22c55e; /* zielony akcent */ --accent-2:#06b6d4; /* turkusowy akcent */ --card:#0b1120; /* tła kart */ --border:#1e293b; /* obramowania */ --focus:#4ade80; color-scheme: dark; } /* Jasny motyw (błękitny) – gdy na / dodana jest klasa "light" */ :root.light{ --bg:#e7f1f8; /* delikatne błękitne tło */ --bg-alt:#f4f8fb; /* jaśniejsze sekcje */ --text:#0f172a; /* ciemny tekst */ --muted:#334155; /* przygaszony tekst */ --accent:#22c55e; /* ta sama zieleń */ --accent-2:#06b6d4; --card:#ffffff; /* białe karty */ --border:#cbd5e1; /* niebieskawy obrys */ --focus:#16a34a; color-scheme: light; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial; background:var(--bg); color:var(--text); line-height:1.6; } /* Wyraźne teksty w obu motywach */ h1, h2, h3, h4, h5, h6 { color: var(--text); } p, li, span, a { color: var(--text); } /* Teksty przygaszone – ale czytelne */ .muted, .hero .sub, .site-footer { color: var(--muted); } .container{width:min(1100px,92%);margin-inline:auto} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:1rem;top:1rem;background:var(--accent);color:#081017;padding:.5rem 1rem;border-radius:.5rem} /* Header */ .site-header{ position:sticky; top:0; backdrop-filter:blur(8px); background:color-mix(in oklab,var(--bg-alt),transparent 25%); border-bottom:1px solid var(--border); z-index:10; transition:box-shadow .2s; } .nav{display:flex;align-items:center;gap:1rem;padding:.9rem 0} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font-weight:700} .brand span{font-size:1.15em;font-weight:700} .menu{display:flex;gap:1rem;list-style:none;margin:0 0 0 auto;padding:0} .menu a{color:var(--text);text-decoration:none;opacity:.9} .menu a:hover,.menu a:focus{opacity:1;text-decoration:underline} .nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:.5rem;padding:.4rem .6rem;color:var(--text)} .theme-toggle{margin-left:.5rem;border:1px solid var(--border);background:none;color:var(--text);border-radius:.5rem;padding:.4rem .6rem} @media (max-width:820px){ .nav-toggle{display:block} .menu{ display:none; position:absolute; right:1rem; top:3.2rem; flex-direction:column; background:var(--bg-alt); border:1px solid var(--border); border-radius:.8rem; padding:.6rem; min-width:220px; } .menu.open{display:flex} } /* Emergency bar */ .emergency{background:#16a34a;color:#fff;padding:.55rem 0;font-weight:700} .emergency a{color:#fff;text-decoration:underline} /* Hero */ .hero{ padding:clamp(2.2rem,6vw,6rem) 0; background: radial-gradient(1200px 500px at 10% -10%,color-mix(in oklab,var(--accent),transparent 80%),transparent), linear-gradient(var(--bg-alt),var(--bg)); } .grid-2{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center} .hero h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.15;letter-spacing:-.01em;margin:.2rem 0 .6rem} .accent{color:var(--accent)} .hero .badge{ display:inline-flex; gap:.5rem; align-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081017; border-radius:9999px; padding:.35rem .7rem; font-weight:700; font-size:.82rem; margin-bottom:.8rem; } .hero .sub{margin:.3rem 0 1rem} .hero-img{width:100%;max-width:520px;display:block;margin-inline:auto} @media (max-width:900px){.grid-2{grid-template-columns:1fr}} /* Sections */ .section{ padding:clamp(2.2rem,5vw,4.6rem) 0; background:var(--bg-alt); } .section.alt{background:var(--bg)} /* Features (services) */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;padding:0;margin:1rem 0 0} .feature-link{display:block;color:inherit;text-decoration:none} .feature{display:flex;gap:.9rem;align-items:flex-start} .feature .ico{ width:40px;height:40px;border-radius:9999px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid;place-items:center;flex:0 0 40px; } .feature .ico img{ width:22px;height:22px; filter:brightness(0) saturate(100%) invert(8%) sepia(12%) saturate(750%) hue-rotate(165deg) brightness(92%) contrast(92%); } .card{ background:var(--card); border:1px solid var(--border); padding:1.2rem; border-radius:1.1rem; box-shadow:0 8px 24px rgba(2, 28, 53, 0.16); transition:transform .15s ease, box-shadow .15s ease; } .card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(2, 28, 53, 0.22); } .feature-link:hover .card,.feature-link:focus .card{ box-shadow:0 12px 30px rgba(2,6,23,.24); } /* Cards grid */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media (max-width:900px){.cards-3{grid-template-columns:1fr}} /* People lists */ .links{list-style:none;padding:0;margin:.4rem 0 1rem} .links li{margin:.35rem 0} /* Hours */ .schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem} .schedule div{display:flex;align-items:center;justify-content:space-between} /* Buttons */ .btn{ display:inline-block; border:1px solid var(--border); padding:.8rem 1.05rem; border-radius:1rem; text-decoration:none; color:var(--text); transition:transform .12s ease, box-shadow .12s ease; } .btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081017; border-color:transparent; font-weight:700; box-shadow:0 8px 24px rgba(16,185,129,.18); } .btn:hover{transform:translateY(-1px)} /* Map */ .map-embed{margin-top:1rem;border-radius:1rem;overflow:hidden;box-shadow:0 12px 32px rgba(2,6,23,.10)} .map-embed iframe{display:block} /* Footer */ .site-footer{border-top:1px solid var(--border);padding:2rem 0} /* Header shadow on scroll */ .site-header.scrolled{box-shadow:0 8px 24px rgba(2,6,23,.10)} /* v12: Team list with avatars */ .team{list-style:none;padding:0;margin:.6rem 0 1.2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1rem} @media (max-width:900px){.team{grid-template-columns:1fr}} .team li{ display:flex; gap:.8rem; align-items:flex-start; background:#ecfdf3; /* jasna zieleń – wyróżnia karty zespołu */ border:1px solid #bbf7d0; padding:.7rem .9rem; border-radius:1rem; box-shadow:0 6px 18px rgba(22,163,74,.18); } .team .avatar{ width:40px;height:40px;border-radius:9999px; flex:0 0 40px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid;place-items:center;overflow:hidden; } .team .avatar img{ width:22px;height:22px; filter:brightness(0) saturate(100%) invert(8%) sepia(12%) saturate(750%) hue-rotate(165deg) brightness(92%) contrast(92%); } .team strong{font-weight:700;color:#052e16;} .team .muted{color:#166534;} /* anchor offset for sticky header */ h3[id^="zespol-"], span[id^="lek-"] { scroll-margin-top: 96px; } /* v14: robust anchor offset + smooth scrolling */ html { scroll-behavior: smooth; } [id^="zespol-"], [id^="lek-"], h2[id], h3[id], h4[id] { scroll-margin-top: var(--header-offset); } @media (max-width: 820px){ :root{ --header-offset: 160px; } } /* v15: ensure anchor offset applies to list items too */ li[id^="lek-"]{ scroll-margin-top: var(--header-offset); } /* v20: always-visible phone numbers in header */ .nav { display: flex; align-items: center; gap: 1rem; } .top-phones { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-weight: 700; } .top-phones a { text-decoration: none; } .top-phones .sep { opacity: .5; } @media (max-width: 820px){ .top-phones { font-size: .9rem; gap: .4rem; } .brand span { max-width: 55vw; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* v21: accordion ensure */ .acc{border:1px solid var(--border);border-radius:1rem;background:var(--card);margin:.6rem 0;overflow:hidden} .acc > summary{cursor:pointer;list-style:none;padding:1rem 1rem 1rem 2.5rem;position:relative;font-weight:700} .acc > summary::-webkit-details-marker{display:none} .acc > summary::before{content:"+";position:absolute;left:.9rem;top:1rem;font-weight:900;color:var(--accent)} .acc[open] > summary::before{content:"–"} .acc-content{padding:0 1rem 1rem} /* Mocny, ciemny tekst w sekcji Kontakt */ #kontakt, #kontakt h2, #kontakt h3, #kontakt p, #kontakt li, #kontakt span, #kontakt a { color:#0f172a !important; /* wyraźny ciemny kolor */ } /* Dla czytelności linków (telefony, e-maile) */ #kontakt a { text-decoration:underline; } /* KONTAKT – poprawa kontrastu w trybie ciemnym */ :root:not(.light) #kontakt, :root:not(.light) #kontakt h2, :root:not(.light) #kontakt h3, :root:not(.light) #kontakt p, :root:not(.light) #kontakt li, :root:not(.light) #kontakt span, :root:not(.light) #kontakt a { color: #f1f5f9 !important; /* jasny, czytelny tekst */ } :root:not(.light) #kontakt a { color: #38bdf8 !important; /* jasnoniebieskie linki */ text-decoration: underline; } /* Dla lepszego efektu wizualnego kart w ciemnym trybie */ :root:not(.light) #kontakt .card { background: #111827 !important; /* nieco jaśniejsze tło niż reszta strony */ border-color: #1e293b !important; box-shadow: 0 4px 18px rgba(0,0,0,0.4); } /* ========================= ZIELONE KAFELKI – Specjalizacje ========================== */ /* CIEMNY TRYB (księżyc) */ :root:not(.light) .cards-3 .card { background: linear-gradient(180deg, #15803d, #166534) !important; border-color: #22c55e !important; box-shadow: 0 10px 30px rgba(22,163,74,0.35) !important; } :root:not(.light) .cards-3 .card h3, :root:not(.light) .cards-3 .card a, :root:not(.light) .cards-3 .card p { color: #f0fdf4 !important; /* jasny tekst na zielonym */ } /* JASNY TRYB (słońce) */ :root.light .cards-3 .card { background: linear-gradient(180deg, #d1fae5, #bbf7d0) !important; border-color: #22c55e !important; box-shadow: 0 6px 22px rgba(34,197,94,0.25) !important; } :root.light .cards-3 .card h3, :root.light .cards-3 .card a, :root.light .cards-3 .card p { color: #064e3b !important; /* ciemny zielony tekst */ } /* ========================= ZIELONE KAFELKI – Specjalizacje ========================== */ /* CIEMNY TRYB (księżyc) */ :root:not(.light) #uslugi .card { background: linear-gradient(180deg, #15803d, #166534) !important; border-color: #22c55e !important; box-shadow: 0 10px 30px rgba(22,163,74,0.35) !important; } :root:not(.light) #uslugi .card h3, :root:not(.light) #uslugi .card a, :root:not(.light) #uslugi .card p { color: #f0fdf4 !important; /* jasny tekst na zielonym */ } /* JASNY TRYB (słońce) */ :root.light #uslugi .card { background: linear-gradient(180deg, #d1fae5, #bbf7d0) !important; border-color: #22c55e !important; box-shadow: 0 6px 22px rgba(34,197,94,0.25) !important; } :root.light #uslugi .card h3, :root.light #uslugi .card a, :root.light #uslugi .card p { color: #064e3b !important; /* ciemny zielony tekst */ }