/* --- Variables --- */ :root { --color-bg: #f8f6f3; --color-bg-alt: #efece7; --color-text: #2c2a28; --color-text-muted: #5c5854; --color-accent: #2d6a6a; --color-accent-light: #3d8a8a; --color-accent-soft: rgba(45, 106, 106, 0.12); --color-white: #fff; --font-serif: "DM Serif Display", Georgia, serif; --font-sans: "Source Sans 3", system-ui, sans-serif; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --radius: 8px; --shadow: 0 4px 20px rgba(44, 42, 40, 0.08); --transition: 0.2s ease; } /* --- Base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); /* Ładne dzielenie wyrazów (dywizacja) przy justowaniu – wymaga lang="pl" w */ hyphens: auto; hyphenate-limit-chars: 6 3 2; hyphenate-limit-lines: 2; overflow-wrap: break-word; } /* Justowany tekst – równomierne rozłożenie i lepsze łamanie */ p { text-justify: inter-word; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent-light); } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Skip link – widoczny po fokusie (klawiatura / czytniki) */ .skip-link { position: absolute; top: -100px; left: var(--space-md); z-index: 1000; padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: var(--color-white); font-weight: 600; border-radius: var(--radius); transition: top var(--transition); } .skip-link:focus { top: var(--space-sm); outline: 2px solid var(--color-white); outline-offset: 2px; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--space-lg); } /* --- Header --- */ .header { position: sticky; top: 0; z-index: 100; background: var(--color-white); box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-lg); min-height: 64px; } .logo { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; color: var(--color-text); text-decoration: none; } .logo:hover { color: var(--color-accent); } .logo-img { display: block; width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .logo-text { line-height: 1.25; } .nav { display: flex; gap: var(--space-lg); } .nav a { font-weight: 500; color: var(--color-text-muted); } .nav a:hover { color: var(--color-accent); } .nav-toggle { display: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: none; flex-shrink: 0; z-index: 101; background: transparent; color: var(--color-text); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle:hover { color: var(--color-accent); } .nav-toggle svg { display: block; width: 24px; height: 24px; } .nav-toggle-icon-close { display: none; } .nav-toggle-open .nav-toggle-icon { display: none; } .nav-toggle-open .nav-toggle-icon-close { display: block; } @media (max-width: 768px) { .header-inner { flex-wrap: nowrap; min-height: 52px; padding: var(--space-xs) var(--space-md); } .logo { min-width: 0; gap: var(--space-xs); } .logo-img { width: 36px; height: 36px; } .logo-text { font-size: 0.9rem; line-height: 1.2; } .nav { position: fixed; top: 52px; left: 0; right: 0; z-index: 99; flex-direction: column; padding: var(--space-lg); background: var(--color-white); box-shadow: var(--shadow); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform var(--transition), opacity var(--transition); } .nav-open { transform: translateY(10px); opacity: 1; pointer-events: auto; } .nav-toggle { display: flex; align-items: center; justify-content: center; } } /* --- Hero --- */ .hero { position: relative; padding: var(--space-2xl) 0; background: linear-gradient(135deg, var(--color-accent-soft) 0%, transparent 50%); overflow: hidden; } .hero-inner { position: relative; z-index: 1; } .hero h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.3; color: var(--color-text); margin: 0 0 var(--space-md); max-width: 28em; } .hero-lead { font-size: 1.125rem; color: var(--color-text-muted); max-width: 52rem; margin: 0 0 var(--space-xl); text-align: left; overflow-wrap: break-word; } .hero-shape { position: absolute; bottom: 0; right: 0; width: 60%; max-width: 520px; height: 200px; background: linear-gradient(160deg, var(--color-accent-soft) 0%, transparent 70%); border-radius: 50% 0 0 0; pointer-events: none; } /* --- Buttons --- */ .btn { display: inline-block; padding: var(--space-sm) var(--space-lg); font-family: var(--font-sans); font-size: 1rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; transition: background var(--transition), transform var(--transition); } .btn-primary { background: var(--color-accent); color: var(--color-white); } .btn-primary:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .btn-primary:hover { background: var(--color-accent-light); transform: translateY(-1px); } /* --- Sections --- */ .section { padding: var(--space-2xl) 0; scroll-margin-top: 2rem; /* odstęp przy przewijaniu do kotwicy, żeby nie nachodzić na sticky nav */ } /* Naprzemienne tło: 2., 4., 6. sekcja (O nas, Specjaliści, Kontakt) – liczone po
*/ .section:nth-of-type(even) { background: var(--color-bg-alt); } .section-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; color: var(--color-text); margin: 0 0 var(--space-sm); text-align: center; } .section-intro { text-align: center; color: var(--color-text-muted); max-width: 52rem; margin: 0 auto var(--space-xl); font-size: 1rem; line-height: 1.55; } /* --- Article / subpage --- */ .page-main { padding-top: 0; } .article-page { padding: var(--space-2xl) 0; } .container--narrow { max-width: 56rem; } .article-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 400; color: var(--color-text); margin: 0 0 var(--space-lg); line-height: 1.25; } .article-lead { font-size: 1.125rem; color: var(--color-text-muted); line-height: 1.65; margin: 0 0 var(--space-xl); text-align: justify; } .article-page h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin: var(--space-xl) 0 var(--space-md); padding-top: var(--space-sm); } .article-page h2:first-of-type { margin-top: 0; padding-top: 0; } .article-page p { margin: 0 0 var(--space-md); color: var(--color-text-muted); line-height: 1.65; text-align: justify; } .article-page ul { margin: 0 0 var(--space-md); padding-left: 1.25rem; color: var(--color-text-muted); line-height: 1.65; } .article-page li { margin-bottom: 0.35rem; } .article-cta { margin-top: var(--space-xl) !important; margin-bottom: var(--space-2xl) !important; text-align: center; } .article-source { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0 !important; padding-top: var(--space-lg); border-top: 1px solid var(--color-bg-alt); } .article-source a { font-weight: 500; } /* --- About --- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .about-text p { margin: 0 0 var(--space-md); color: var(--color-text-muted); text-align: left; } .about-text p:last-child { margin-bottom: 0; } .about-features ul { margin: 0; padding: 0; list-style: none; } .about-features li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-sm); color: var(--color-text); } .about-features li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } } /* --- Dlaczego my --- */ .why-us-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); } .why-us-item { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .why-us-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-sm); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; font-size: 1.25rem; border-radius: 50%; line-height: 1; } .why-us-title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-sm); } .why-us-item p { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55; text-align: center; } @media (max-width: 900px) { .why-us-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .why-us-grid { grid-template-columns: 1fr; } } /* --- Gabinet w liczbach --- */ .stats-section { background: var(--color-bg-alt); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); text-align: center; } .stats-item { padding: var(--space-md); } .stats-number { display: block; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; color: var(--color-accent); line-height: 1.2; margin-bottom: var(--space-xs); } .stats-label { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.4; } @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } @media (max-width: 400px) { .stats-grid { grid-template-columns: 1fr; } } /* --- Services (cards) --- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .card { background: var(--color-white); padding: var(--space-lg); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow var(--transition), transform var(--transition); } .card:hover { box-shadow: 0 8px 28px rgba(44, 42, 40, 0.12); transform: translateY(-2px); } .card-icon { font-size: 2rem; margin-bottom: var(--space-sm); text-align: center; } .card h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; margin: 0 0 var(--space-sm); color: var(--color-text); } .card p { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); text-align: left; } .card-warnke-indications { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-bg-alt); text-align: left; } .card-warnke-indications-title { margin: 0 0 var(--space-xs) !important; font-size: 0.9375rem !important; color: var(--color-text) !important; text-align: left; } .card-warnke-indications ul { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.55; } .card-warnke-indications li { margin-bottom: 0.25rem; } .card-warnke-indications li:last-child { margin-bottom: 0; } .card-warnke-more { margin: var(--space-sm) 0 0 !important; font-size: 0.9375rem; } .card-warnke-more a { font-weight: 600; } @media (max-width: 768px) { .cards { grid-template-columns: 1fr; } } /* --- Specialists --- */ .specialists .container { max-width: 1320px; } .specialists-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .specialist-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius); box-shadow: var(--shadow); } .specialist-profile { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-bg-alt); } .specialist-photo { width: 140px; height: 140px; border-radius: 50%; background-color: var(--color-bg-alt); background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='%235c5854' opacity='0.4'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; margin-bottom: var(--space-xl); background-position: center; flex-shrink: 0; } /* Sylwetka w miejscu zdjęcia (np. gdy brak zdjęcia) */ .specialist-photo--silhouette { background-color: var(--color-bg-alt); background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='22' fill='%23a8a29e'/%3E%3Cpath d='M28 92c0-12 10-22 22-22s22 10 22 22H28z' fill='%23a8a29e'/%3E%3C/svg%3E"); background-size: 75% 75%; } .specialist-header { min-width: 0; } .specialist-name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; margin: 0 0 var(--space-sm); color: var(--color-text); } .specialist-badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; } .specialist-badges li { padding: 0.25rem 0.6rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-accent); background: var(--color-accent-soft); border-radius: 999px; text-align: left; } .specialist-bio { margin: 0; color: var(--color-text-muted); line-height: 1.65; font-size: 0.9375rem; text-align: left; } .specialist-contact { margin: var(--space-md) 0 0; font-size: 0.9375rem; color: var(--color-text); } .specialist-contact a { color: var(--color-accent); font-weight: 500; } .specialist-contact a:hover { text-decoration: underline; } .specialist-block-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-sm); color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; } .specialist-block-title span:first-child { padding-left: 0.75rem; border-left: 3px solid var(--color-accent); } .details-hint { font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); } .specialist-details summary { cursor: pointer; list-style: none; user-select: none; } .specialist-details summary::-webkit-details-marker { display: none; } .specialist-details[open] .details-hint { display: none; } .specialist-block-title--membership span:first-child { border-left-color: var(--color-accent); } .specialist-block { margin-bottom: var(--space-xl); text-align: left; } .specialist-block:last-child { margin-bottom: 0; } .specialist-block h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-sm); color: var(--color-text); } .specialist-block h4.specialist-block-title { margin-bottom: var(--space-sm); } .specialist-block ul { margin: 0; padding-left: 1.25rem; color: var(--color-text-muted); } .specialist-block li { margin-bottom: var(--space-xs); text-align: justify; } .specialist-block li:last-child { margin-bottom: 0; } .training-list { font-size: 0.9rem; max-height: 320px; overflow-y: auto; padding-right: var(--space-sm); margin-top: var(--space-sm); text-align: left; } .specialist-block .training-list, .specialist-block .training-list li { text-align: left; } /* Klasa z taką samą czcionką jak .training-list (do użycia bez max-height/scroll) */ .list-font-training { font-size: 0.9rem; text-align: left; } .specialist-block .list-font-training, .specialist-block .list-font-training li { text-align: left; } .training-list::-webkit-scrollbar { width: 6px; } .training-list::-webkit-scrollbar-track { background: var(--color-bg-alt); border-radius: 3px; } .training-list::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; } .specialist-membership p { margin: 0 0 var(--space-sm); font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; text-align: left; } .specialist-membership .membership-topics { margin: 0; padding-left: 1.25rem; } .specialist-membership .membership-topics li { margin-bottom: var(--space-xs); text-align: justify; } @media (max-width: 900px) { .specialists-list { grid-template-columns: 1fr; } } @media (max-width: 600px) { .specialist-profile { grid-template-columns: 1fr; justify-items: center; text-align: center; } .specialist-badges { justify-content: center; } .specialist-bio { text-align: left; } } /* --- Pricing --- */ .pricing-intro { text-align: justify; color: var(--color-text-muted); margin: 0 auto var(--space-lg); max-width: 52rem; } .pricing-table { max-width: 640px; margin: 0 auto; background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .pricing-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-bg-alt); gap: var(--space-md); } .pricing-row:last-child { border-bottom: none; } .pricing-row span:first-child { color: var(--color-text); } .pricing-row span:last-child { font-weight: 600; color: var(--color-accent); white-space: nowrap; } /* --- FAQ --- */ .faq-list { max-width: 60rem; margin: 0 auto; } .faq-item { background: var(--color-white); border-radius: var(--radius); margin-bottom: var(--space-sm); box-shadow: var(--shadow); overflow: hidden; } .faq-item:last-child { margin-bottom: 0; } .faq-question { padding: var(--space-md) var(--space-lg); font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); flex-shrink: 0; transition: transform var(--transition); } .faq-item[open] .faq-question::after { transform: rotate(-135deg); } .faq-answer { margin: 0; padding: 0 var(--space-lg) var(--space-md); padding-left: var(--space-lg); color: var(--color-text-muted); line-height: 1.6; text-align: justify; } .faq-answer a { font-weight: 500; } /* --- Contact --- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; } .contact-map-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: start; } .contact-info-block p { margin: 0 0 var(--space-md); color: var(--color-text-muted); } .contact-info-block a { font-weight: 500; } .contact-hours-block { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-bg-alt); } .contact-hours-block strong { display: block; margin-bottom: var(--space-xs); color: var(--color-text); } .contact-hours-text { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; } .contact-facebook-intro { margin: var(--space-md) 0 var(--space-xs); font-weight: 500; color: var(--color-text); } .contact-facebook-link { font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; } .contact-facebook-link .icon-facebook { flex-shrink: 0; color: #1877f2; } .contact-messenger-link { font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; } .contact-messenger-link .icon-messenger { flex-shrink: 0; color: #0084ff; } .icon-facebook--footer { color: inherit; vertical-align: middle; margin-right: 0.25rem; } .contact-info p { margin: 0 0 var(--space-md); color: var(--color-text-muted); } .contact-info a { font-weight: 500; } .contact-hours { margin-top: var(--space-sm); } .contact-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .contact-map-iframe { display: block; width: 100%; height: 300px; border: 0; } .contact-map-link { display: inline-block; margin-top: var(--space-sm); font-size: 0.9375rem; } @media (max-width: 768px) { .contact-map-grid { grid-template-columns: 1fr; } .contact-map-iframe { height: 260px; } } .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-form label { font-weight: 500; color: var(--color-text); } .contact-form input, .contact-form textarea { font-family: var(--font-sans); font-size: 1rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-bg-alt); border-radius: var(--radius); background: var(--color-white); color: var(--color-text); transition: border-color var(--transition); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-accent); } .contact-form textarea { resize: vertical; min-height: 100px; } .contact-form .btn { align-self: flex-start; margin-top: var(--space-xs); } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } } /* --- Footer --- */ .footer { padding: var(--space-lg) 0; background: var(--color-text); color: var(--color-bg); text-align: center; } .footer p { margin: 0; font-size: 0.9375rem; color: rgba(248, 246, 243, 0.85); } .footer a { color: var(--color-bg); } /* --- Messenger (pływający przycisk) --- */ .messenger-fab { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 50; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; background: #0084ff; color: var(--color-white); text-decoration: none; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 132, 255, 0.4); transition: transform var(--transition), box-shadow var(--transition); } .messenger-fab:hover { color: var(--color-white); transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5); } .messenger-fab:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .messenger-fab + .back-to-top { right: calc(var(--space-lg) + 3.25rem + 0.5rem); } /* --- Do góry --- */ .back-to-top { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 50; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-white); font-size: 1.25rem; font-weight: 700; text-decoration: none; border-radius: 50%; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition), background var(--transition); } .back-to-top:hover { background: var(--color-accent-light); color: var(--color-white); } .back-to-top:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .back-to-top--visible { opacity: 1; visibility: visible; }