/* ============================================================
Pro-Mentis — Klinika Psychoterapii
Warm, calm, editorial. Brand: heart+brain (red #ce351e / charcoal #3b4145)
============================================================ */
/* ---------- Design tokens ---------- */
:root {
/* warm neutral surfaces (atmosphere: "cream" default) */
--bg: oklch(0.985 0.007 73);
--surface: oklch(0.962 0.011 71);
--surface-2: oklch(0.935 0.014 69);
--line: oklch(0.86 0.013 68);
/* ink */
--ink: #2b2d2f;
--ink-soft: #5c5f61;
--ink-faint: #8b8d8e;
/* brand */
--red: #ce351e;
--red-deep: #a82a17;
--charcoal: #3b4145;
--clay: oklch(0.7 0.035 60);
/* accent driver (tweakable intensity) */
--accent: var(--red);
--accent-ink: var(--red-deep);
--accent-tint: color-mix(in oklab, var(--red) 9%, var(--bg));
--accent-line: color-mix(in oklab, var(--red) 30%, var(--line));
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Hanken Grotesk", system-ui, sans-serif;
--maxw: 1180px;
--pad: clamp(20px, 5vw, 64px);
--radius: 4px;
--shadow-sm: 0 1px 2px rgba(43,45,47,.04), 0 2px 8px rgba(43,45,47,.05);
--shadow-md: 0 6px 24px rgba(43,45,47,.07), 0 2px 6px rgba(43,45,47,.05);
--shadow-lg: 0 24px 60px -20px rgba(43,45,47,.22);
}
/* atmosphere variants */
:root[data-atmo="paper"] {
--bg: oklch(0.992 0.004 78);
--surface: oklch(0.97 0.006 76);
--surface-2: oklch(0.945 0.008 74);
--line: oklch(0.88 0.008 72);
}
:root[data-atmo="cool"] {
--bg: oklch(0.984 0.004 230);
--surface: oklch(0.958 0.006 232);
--surface-2: oklch(0.93 0.008 234);
--line: oklch(0.87 0.008 235);
--ink: #2a2e31;
--ink-soft: #565b5f;
--clay: oklch(0.7 0.02 235);
}
/* accent intensity variants */
:root[data-accent="minimal"] {
--accent: var(--charcoal);
--accent-ink: var(--charcoal);
--accent-tint: color-mix(in oklab, var(--charcoal) 7%, var(--bg));
--accent-line: var(--line);
}
:root[data-accent="expressive"] {
--accent-tint: color-mix(in oklab, var(--red) 14%, var(--bg));
--accent-line: color-mix(in oklab, var(--red) 45%, var(--line));
}
/* heading font variants */
:root[data-font="lora"] { --font-display: "Lora", Georgia, serif; }
:root[data-font="playfair"] { --font-display: "Playfair Display", Georgia, serif; }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.display { font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 600; }
.eyebrow {
font-family: var(--font-body);
font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--accent-ink);
}
.eyebrow.muted { color: var(--ink-faint); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; }
.section-title { font-size: clamp(2rem, 4vw, 3.1rem); }
/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
/* `main >` — tylko sekcje najwyższego poziomu; zagnieżdżone (np. grupy cennika) bez odstępu */
main > section { padding-block: clamp(72px, 11vh, 140px); }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { display: block; margin-bottom: 18px; }
.section-head .lede { margin-top: 18px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 0.6em;
padding: 0.9em 1.5em; border-radius: 8px;
font-weight: 600; font-size: 0.96rem; letter-spacing: 0.01em;
transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s, color .25s, box-shadow .25s;
white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 60%, transparent); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(3px); }
/* ---------- Header ---------- */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 18px var(--pad);
transition: background .4s ease, box-shadow .4s ease, padding .4s ease, border-color .4s;
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
background: color-mix(in oklab, var(--bg) 86%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
box-shadow: var(--shadow-sm);
border-bottom-color: var(--line);
padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; transition: height .4s ease; }
.site-header.scrolled .brand img { height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.01em; }
.brand-text span { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: 4px; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: width .25s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.phone-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.phone-link span small { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
/* hamburger — bazowo ukryty, włącza się razem ze schowaniem .nav-links (≤980px) */
.menu-toggle {
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; width: 42px; height: 42px; flex: none; padding: 0;
background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
transition: border-color .2s, background .2s;
}
.menu-toggle:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .2s; }
.site-header.nav-open .menu-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-phone { display: none; }
/* ---------- HERO ---------- */
.hero { position: relative; padding-top: clamp(104px, 14vh, 168px); padding-bottom: clamp(60px, 9vh, 120px); overflow: hidden; }
/* Znak wodny z materiałów klienta — ten sam splot, co w tle tablicy przed wejściem.
Wchodzi jako maska, nie ![]()
: plik jest czarny przy ~5% krycia, a czerń na
kremowym tle zszarza całą paletę. Maska pozwala pomalować motyw na --clay
i zachować ciepło. Siłę reguluje opacity poniżej. */
.hero::before {
content: ""; position: absolute; inset: auto 0 0 0; height: 74%;
background: var(--clay); opacity: 0.09; pointer-events: none; z-index: 0;
-webkit-mask: url(../img/tlo-splot.png) bottom center / 100% auto no-repeat;
mask: url(../img/tlo-splot.png) bottom center / 100% auto no-repeat;
}
.hero > .hero-inner, .hero > .hero-bg-heart { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.hero-eyebrow .heart-mini { height: 26px; width: auto; }
.hero-title { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); }
.hero-title .l2 { display: block; }
.hero-title em { font-style: italic; color: var(--accent-ink); }
.hero-lede { margin-top: 28px; max-width: 30ch; }
.hero-credo { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 52ch; }
.hero-credo p { font-size: 0.95rem; color: var(--ink-soft); }
.hero-credo p + p { margin-top: 8px; }
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-meta { margin-top: 46px; display: flex; gap: 36px; flex-wrap: wrap; }
.hero-meta .mi { display: flex; flex-direction: column; gap: 3px; }
.hero-meta .mi b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; font-variant-numeric: lining-nums; }
.hero-meta .mi span { font-size: 0.8rem; color: var(--ink-soft); }
/* hero art */
.hero-art { position: relative; }
.hero-heart { width: 100%; height: auto; }
.hero-photo { position: relative; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lg); }
/* default = "centered" */
.hero[data-hero="centered"] .hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero[data-hero="centered"] .hero-eyebrow { justify-content: center; }
.hero[data-hero="centered"] .hero-title { font-size: clamp(2.7rem, 7vw, 5.6rem); }
.hero[data-hero="centered"] .hero-title .l2 { margin-left: 1.2em; }
.hero[data-hero="centered"] .hero-lede { margin-inline: auto; }
.hero[data-hero="centered"] .hero-actions { justify-content: center; }
.hero[data-hero="centered"] .hero-meta { justify-content: center; }
.hero[data-hero="centered"] .hero-art { display: none; }
.hero[data-hero="centered"] .hero-bg-heart {
position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
width: min(420px, 60vw); opacity: 0.06; z-index: -1; pointer-events: none;
}
/* "split" = text left, photo right */
.hero[data-hero="split"] .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero[data-hero="split"] .hero-title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.hero[data-hero="split"] .hero-title .l2 { margin-left: 0.8em; }
.hero[data-hero="split"] .hero-heart { display: none; }
.hero[data-hero="split"] .hero-bg-heart { display: none; }
/* "editorial" = oversized type, faint big heart behind */
.hero[data-hero="editorial"] .hero-inner { position: relative; }
.hero[data-hero="editorial"] .hero-title { font-size: clamp(2.8rem, 8.6vw, 6.8rem); max-width: 14ch; }
.hero[data-hero="editorial"] .hero-title .l2 { margin-left: 1.6em; color: var(--accent-ink); }
.hero[data-hero="editorial"] .hero-lede { max-width: 42ch; }
.hero[data-hero="editorial"] .hero-photo { display: none; }
.hero[data-hero="editorial"] .hero-art { position: absolute; top: -6%; right: -2%; width: min(440px, 42vw); z-index: -1; }
.hero[data-hero="editorial"] .hero-heart { opacity: 0.07; }
.hero[data-hero="editorial"] .hero-bg-heart { display: none; }
/* ---------- Placeholder visual ---------- */
.ph {
position: relative; overflow: hidden;
background:
repeating-linear-gradient(135deg,
color-mix(in oklab, var(--clay) 16%, var(--surface)) 0 11px,
var(--surface) 11px 22px);
border: 1px solid var(--line);
display: grid; place-items: center;
color: var(--ink-faint);
}
.ph::after {
content: attr(data-label);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.72rem; letter-spacing: 0.06em;
padding: 6px 12px; border-radius: 100px;
background: color-mix(in oklab, var(--bg) 80%, transparent);
border: 1px solid var(--line);
color: var(--ink-soft);
}
/* ---------- Oferta ---------- */
.offer { background: var(--surface); }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.offer-card {
background: var(--bg); padding: 38px 32px; display: flex; flex-direction: column; gap: 14px;
transition: background .3s, transform .3s;
}
.offer-card:hover { background: var(--accent-tint); }
.offer-card .num { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--accent-ink); letter-spacing: 0.1em; }
.offer-card h3 { font-size: 1.5rem; }
.offer-card p { color: var(--ink-soft); font-size: 0.98rem; }
/* samotny kafel w ostatnim wierszu rozciąga się na całą szerokość — inaczej siatka
(komórki rozdzielone tłem) kończy się pustym prostokątem */
.offer-grid > .offer-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
/* ---------- Zespół ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.member { display: flex; flex-direction: column; }
.member .portrait { aspect-ratio: 4/5; border-radius: 6px; }
.member h3 { font-size: 1.3rem; margin-top: 18px; }
.member .role { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-ink); text-transform: uppercase; margin-top: 4px; }
.member p { font-size: 0.93rem; color: var(--ink-soft); margin-top: 10px; }
.member .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 6px; display: block; }
/* Detailed profiles — three-up grid of expandable cards */
.team-grid.profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.member-detailed { background: var(--surface); border: 1px solid var(--accent-line); border-radius: 8px; padding: 24px 26px 26px; overflow-wrap: break-word; }
.member-detailed .portrait { aspect-ratio: 1/1; margin: -24px -26px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
.member-detailed .portrait img { border-radius: 8px 8px 0 0; object-position: center 20%; }
.member-detailed h3 { margin-top: 20px; font-size: 1.45rem; }
.member-detailed .role { line-height: 1.5; }
/* Rola z pięcioma członami nie mieści się w jednym łańcuchu kropek przy
uppercase 0.82rem — .role-stacked łamie ją na osobne wiersze. */
.role-stacked span { display: block; }
.role-stacked span + span { margin-top: 2px; }
.member-quote { margin: 18px 0 0; padding: 14px 18px; border-left: 2px solid var(--accent-line); background: var(--bg); border-radius: 0 6px 6px 0; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.member-quote::before { content: "„"; }
.member-quote::after { content: "”"; }
.member-creds { margin-top: 20px; }
.member-creds h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--accent-line); }
.member-creds h4:first-child { margin-top: 0; }
.member-creds ul { list-style: none; margin: 12px 0 0; padding: 0; }
.member-creds li { position: relative; padding-left: 18px; margin-top: 9px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.member-creds li::before { content: "•"; position: absolute; left: 2px; color: var(--accent-ink); }
.member-creds li b { color: var(--ink); font-weight: 600; }
.member-detailed .member-superv { font-style: italic; font-size: 0.86rem; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--accent-line); }
/* godziny przyjęć w karcie terapeuty */
.member-hours { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--accent-line); }
.member-hours h4 {
font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.member-hours ul { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.member-hours li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.member-hours li span { color: var(--ink-soft); }
.member-hours li b { font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.member-hours .member-hours-none { margin-top: 10px; font-size: 0.86rem; font-style: italic; color: var(--ink-soft); }
/* „Pełny profil” — rozwijana część karty */
/* auto = przyklejone do dołu karty, żeby przyciski w wierszu były w jednej linii */
.member-more { margin-top: auto; padding-top: 20px; }
/* gdy któryś profil jest rozwinięty, wracamy do naturalnych wysokości — inaczej
pozostałe karty w wierszu rozciągają się i zostaje w nich pusta przestrzeń */
.team-grid.profiles.has-open { align-items: start; }
.team-grid.profiles.has-open .member-more { margin-top: 20px; }
.member-more > summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.04em; color: var(--accent-ink);
padding: 9px 16px; border: 1px solid var(--accent-line); border-radius: 100px;
transition: background .2s, border-color .2s;
}
.member-more > summary::-webkit-details-marker { display: none; }
.member-more > summary::after { content: "▾"; font-size: 0.85em; line-height: 1; transition: transform .25s; }
.member-more[open] > summary::after { transform: rotate(180deg); }
.member-more > summary:hover { background: var(--accent-tint); }
.member-more-body { margin-top: 20px; }
.member-more-body > p:first-child { margin-top: 0; }
/* przy 3 kolumnach: samotna karta w ostatnim rzędzie ląduje na środku, nie z lewej */
@media (min-width: 1081px) {
.team-grid.profiles > .member:last-child:nth-child(3n + 1) { grid-column: 2; }
}
@media (max-width: 1080px) and (min-width: 781px) {
.team-grid.profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
/* minmax(0, …) a nie 1fr — inaczej kolumna rozciąga się do min-content karty
(długie nazwy uczelni) i na wąskich ekranach wychodzi poza siatkę */
.team-grid.profiles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.team-note { margin-top: 40px; padding: 22px 26px; border-left: 2px solid var(--accent-line); background: var(--surface); border-radius: 0 6px 6px 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 620px; }
/* ---------- Misja ---------- */
/* ---------- Panel „obszar → specjaliści” pod selectem ---------- */
.field-help {
margin-top: 10px; padding: 11px 14px; font-size: 0.87rem; line-height: 1.6;
color: var(--ink-soft); background: var(--accent-tint);
border-left: 2px solid var(--accent-line); border-radius: 0 5px 5px 0;
}
.field-help a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.field-help a:hover { color: var(--ink); }
.field-help-note { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--ink-faint); }
/* karty zespołu jako cel skoku — nagłówek strony jest przyklejony */
.member-detailed[id] { scroll-margin-top: 96px; }
/* ---------- Wybór sposobu zapisu (dialog) ---------- */
.book-dialog {
width: min(560px, calc(100vw - 32px)); padding: clamp(22px, 4vw, 32px);
margin: auto; /* globalny reset zeruje margin —