/* ==========================================================================
NOVYA PREMIUM LAYER
Warstwa designu "ciepłe editorial premium" dla stron Novya Clinic.
Zasada: wszystkie komponenty są opt-in przez klasy nv-* nadawane w
Elementorze (Zaawansowane -> Klasy CSS). Nic nie działa globalnie, więc
warstwa nie może rozlać się na strony, które jej nie mają.
Specyficzność: Elementor generuje reguły o sile (0,3,0), np.
`.elementor-4962 .elementor-element.elementor-element-XXXX`. Dlatego
selektory zaczynają się od `body.nv-premium` (0,1,1) — z jedną klasą
komponentu daje to (0,2,1), z dwoma (0,3,1) i wygrywa niezależnie od
kolejności ładowania. Tam, gdzie klasa jest zdublowana
(`.nv-x.nv-x`), robi to właśnie za specyficzność, nie przez pomyłkę.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENY
-------------------------------------------------------------------------- */
body.nv-premium {
/* --- PALETA MARKI (wartości surowe) --- */
--nv-burgundy: #a00e3c;
--nv-burgundy-deep: #7c0a2e;
--nv-caramel: #b88454;
--nv-caramel-soft: #dcc2aa;
--nv-ivory: #fff9f7;
--nv-ivory-warm: #f7f5ef;
/* --- ROLE (to nadpisuje motyw strony, NIE paletę powyżej) ---
accent = kolor działania: CTA, ceny, aktywne stany
detail = nadtytuły, złote kreski, ikony list
surface = tło sekcji tonowanej
surface-alt = tło drugiego stopnia (kółka ikon, matowanie zdjęć) */
--nv-accent: var(--nv-burgundy);
--nv-accent-deep: var(--nv-burgundy-deep);
--nv-accent-glow: rgba(160, 14, 60, 0.65);
--nv-accent-glow-strong: rgba(160, 14, 60, 0.75);
--nv-accent-ring: rgba(160, 14, 60, 0.12);
--nv-detail: var(--nv-caramel);
--nv-detail-soft: var(--nv-caramel-soft);
--nv-surface: var(--nv-ivory);
--nv-surface-alt: var(--nv-ivory-warm);
/* --- NEUTRALNE (wspólne dla wszystkich motywów) --- */
--nv-white: #ffffff;
--nv-ink: #131b23;
--nv-ink-soft: #54606b;
--nv-line: #ebe2dc;
--nv-serif: "Playfair Display", Georgia, "Times New Roman", serif;
--nv-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--nv-shadow: 0 1px 2px rgba(19, 27, 35, 0.04), 0 8px 24px -8px rgba(19, 27, 35, 0.10);
--nv-shadow-lift: 0 2px 4px rgba(19, 27, 35, 0.05), 0 18px 40px -12px rgba(19, 27, 35, 0.18);
--nv-pad: clamp(56px, 7vw, 104px);
--nv-radius: 16px;
--nv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* --------------------------------------------------------------------------
2. RYTM SEKCJI
Odstępy pochodzą z jednej skali. Widgety `spacer` przestają być
potrzebne — sekcja sama trzyma światło.
-------------------------------------------------------------------------- */
body.nv-premium .nv-section {
padding-top: var(--nv-pad);
padding-bottom: var(--nv-pad);
}
/* Sekcja z samym nagłówkiem — światło pod nią daje sekcja z treścią. */
body.nv-premium .nv-section.nv-section--head {
padding-bottom: 0;
}
/* Sekcja doklejona do poprzedniej (najczęściej pod nagłówkiem). */
body.nv-premium .nv-section.nv-section--flush {
padding-top: clamp(28px, 3.5vw, 48px);
}
body.nv-premium .nv-section.nv-tone-ivory {
background-color: var(--nv-surface) !important;
}
body.nv-premium .nv-section.nv-tone-warm {
background-color: var(--nv-surface-alt) !important;
}
body.nv-premium .nv-section.nv-tone-white {
background-color: var(--nv-white) !important;
}
body.nv-premium .elementor-widget-spacer {
display: none;
}
/* Odstęp nad nagłówkiem ma pochodzić WYŁĄCZNIE z --nv-pad.
Elementor dokłada po 10px na .e-con-inner i na zagnieżdżonym kontenerze-owijce,
przez co sekcje różniły się między sobą (66px vs 76px). Zerujemy te warstwy.
Komponenty z własnym wnętrzem (.nv-card, .nv-booking__col, .nv-bio__media)
mają padding z !important, więc ta reguła ich nie dotyka. */
body.nv-premium .nv-section > .e-con-inner {
padding-top: 0;
}
body.nv-premium .nv-section > .e-con-inner > .e-con:first-child {
padding-top: 0;
}
/* --------------------------------------------------------------------------
3. NAGŁÓWKI SEKCJI
Nadtytuł (--nv-eyebrow) + serif + złota kreska.
-------------------------------------------------------------------------- */
body.nv-premium .nv-h2.nv-h2 .elementor-heading-title {
font-family: var(--nv-serif);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.16;
letter-spacing: -0.01em;
color: var(--nv-ink);
max-width: 22ch;
margin-inline: auto;
}
body.nv-premium .nv-h2::before {
content: var(--nv-eyebrow, "");
display: block;
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--nv-detail);
margin-bottom: 18px;
}
body.nv-premium .nv-h2::after {
content: "";
display: block;
width: 56px;
height: 2px;
margin: 24px auto 0;
background: linear-gradient(90deg, var(--nv-detail), var(--nv-detail-soft));
}
body.nv-premium .nv-lead p {
max-width: 64ch;
margin-inline: auto;
font-size: clamp(15px, 1.6vw, 17.5px);
line-height: 1.85;
color: var(--nv-ink-soft);
text-align: center !important;
}
/* --------------------------------------------------------------------------
4. PRZYCISK
-------------------------------------------------------------------------- */
body.nv-premium .nv-btn .elementor-button,
body.nv-premium .nv-form .elementor-button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--nv-accent) !important;
color: var(--nv-white) !important;
font-family: var(--nv-sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 18px 42px;
border: 0;
border-radius: 999px;
box-shadow: 0 10px 24px -10px var(--nv-accent-glow);
transition: background-color 0.25s var(--nv-ease), transform 0.25s var(--nv-ease), box-shadow 0.25s var(--nv-ease);
}
body.nv-premium .nv-btn .elementor-button:hover,
body.nv-premium .nv-form .elementor-button[type="submit"]:hover {
background-color: var(--nv-accent-deep) !important;
transform: translateY(-2px);
box-shadow: 0 16px 34px -12px var(--nv-accent-glow-strong);
}
body.nv-premium .nv-btn .elementor-button:focus-visible,
body.nv-premium .nv-form .elementor-button[type="submit"]:focus-visible {
outline: 2px solid var(--nv-detail);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
5. HERO
Pełna szerokość, gradientowy scrim, treść wyrównana do lewej, CTA w środku.
-------------------------------------------------------------------------- */
body.nv-premium .nv-hero.nv-hero {
position: relative;
max-width: none !important;
width: 100%;
border-radius: 0 !important;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
min-height: clamp(460px, 62vh, 640px);
}
body.nv-premium .nv-hero > .e-con-inner {
max-width: none;
width: 100%;
padding: 0;
display: block;
min-height: inherit;
}
/* Zdjęcie jako tło hero */
body.nv-premium .nv-hero .nv-hero__media {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
padding: 0 !important;
margin: 0 !important;
}
body.nv-premium .nv-hero .nv-hero__media > .e-con-inner {
height: 100%;
max-width: none;
padding: 0;
}
body.nv-premium .nv-hero .nv-hero__media .elementor-widget-image,
body.nv-premium .nv-hero .nv-hero__media figure {
height: 100%;
width: 100%;
max-width: none;
margin: 0;
}
body.nv-premium .nv-hero .nv-hero__media img {
width: 100% !important;
/* widget obrazka ma ustawione max-width 1140px — hero musi iść na pełną szerokość */
max-width: none !important;
height: 100% !important;
max-height: none !important;
object-fit: cover;
object-position: center 32%;
border-radius: 0 !important;
display: block;
}
/* Warstwa tekstowa */
body.nv-premium .nv-hero .nv-hero__overlay {
position: absolute !important;
inset: 0;
width: 100%;
max-width: none;
min-height: 100%;
background: linear-gradient(
100deg,
rgba(19, 27, 35, 0.82) 0%,
rgba(19, 27, 35, 0.62) 42%,
rgba(19, 27, 35, 0.18) 100%
) !important;
display: flex;
align-items: center;
padding: clamp(28px, 5vw, 72px) !important;
}
body.nv-premium .nv-hero .nv-hero__overlay > .e-con-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
max-width: 1140px;
margin-inline: auto;
padding: 0;
}
/* Kolejność: nadtytuł -> tytuł -> lead -> CTA */
body.nv-premium .nv-hero__sub {
order: 1;
}
body.nv-premium .nv-hero__title {
order: 2;
}
body.nv-premium .nv-hero__lead {
order: 3;
}
body.nv-premium .nv-hero__cta {
order: 4;
}
body.nv-premium .nv-hero__sub.nv-hero__sub .elementor-heading-title {
font-family: var(--nv-sans);
font-size: clamp(11px, 1.1vw, 12.5px);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nv-detail-soft);
text-align: left;
margin: 0;
}
body.nv-premium .nv-hero__title .elementor-heading-title {
font-family: var(--nv-serif);
font-weight: 500;
font-size: clamp(34px, 5.2vw, 62px);
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--nv-white);
text-align: left;
max-width: 16ch;
margin: 18px 0 0;
}
body.nv-premium .nv-hero__lead.nv-hero__lead {
/* widget tekstowy dostaje od Elementora szerokość 100% — bez !important
akapit ciągnął się na całą szerokość hero i był nieczytelny na desktopie */
max-width: 54ch !important;
margin-top: 22px;
}
body.nv-premium .nv-hero__lead p {
text-align: left !important;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(15px, 1.5vw, 17.5px);
line-height: 1.7;
margin: 0;
}
body.nv-premium .nv-hero__cta {
margin-top: 34px;
justify-content: flex-start;
width: auto;
}
body.nv-premium .nv-hero__cta .elementor-button {
margin: 0 !important;
}
/* --------------------------------------------------------------------------
6. KARTY ATUTÓW (icon-box)
-------------------------------------------------------------------------- */
body.nv-premium .nv-cards > .e-con-inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
align-items: stretch;
max-width: 1140px;
margin-inline: auto;
}
body.nv-premium .nv-cards .nv-card {
height: 100%;
background: var(--nv-white);
border: 1px solid var(--nv-line);
border-radius: var(--nv-radius);
padding: clamp(26px, 2.4vw, 38px) clamp(18px, 2vw, 26px) !important;
box-shadow: var(--nv-shadow);
transition: transform 0.3s var(--nv-ease), box-shadow 0.3s var(--nv-ease), border-color 0.3s var(--nv-ease);
}
body.nv-premium .nv-cards .nv-card:hover {
transform: translateY(-6px);
box-shadow: var(--nv-shadow-lift);
border-color: var(--nv-detail-soft);
}
body.nv-premium .nv-card .elementor-icon-box-icon {
width: 66px;
height: 66px;
margin: 0 auto 22px !important;
border-radius: 50%;
background: var(--nv-surface-alt);
display: flex;
align-items: center;
justify-content: center;
}
body.nv-premium .nv-card .elementor-icon-box-icon .elementor-icon {
color: var(--nv-accent);
font-size: 25px;
}
body.nv-premium .nv-card .elementor-icon-box-icon .elementor-icon svg {
width: 25px;
height: 25px;
fill: var(--nv-accent);
}
body.nv-premium .nv-card .elementor-icon-box-title {
font-family: var(--nv-serif);
font-weight: 500;
font-size: 20px;
line-height: 1.3;
color: var(--nv-ink);
margin-bottom: 0;
}
body.nv-premium .nv-card .elementor-icon-box-description {
font-size: 14.5px;
line-height: 1.75;
color: var(--nv-ink-soft);
margin-top: 12px;
}
/* Karta z listą linków (np. obszary zabiegów -> produkty).
Opis icon-boxa to , więc linki rozdziela
, nie
. */
body.nv-premium .nv-card .elementor-icon-box-description a {
display: inline-block;
padding: 3px 0;
font-weight: 500;
color: var(--nv-accent);
text-decoration: underline;
text-decoration-color: var(--nv-detail-soft);
text-underline-offset: 3px;
transition: color 0.2s var(--nv-ease), text-decoration-color 0.2s var(--nv-ease);
}
body.nv-premium .nv-card .elementor-icon-box-description a:hover {
color: var(--nv-accent-deep);
text-decoration-color: currentColor;
}
/* --------------------------------------------------------------------------
7. ZESPÓŁ — układ zygzakowaty (nv-bio / nv-bio--rev)
-------------------------------------------------------------------------- */
body.nv-premium .nv-bio.nv-bio {
padding-top: clamp(34px, 4vw, 56px) !important;
padding-bottom: clamp(34px, 4vw, 56px) !important;
}
body.nv-premium .nv-bio > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: clamp(26px, 4vw, 64px);
align-items: start;
max-width: 1140px;
margin-inline: auto;
}
body.nv-premium .nv-bio--rev > .e-con-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}
body.nv-premium .nv-bio--rev .nv-bio__media {
order: 2;
}
body.nv-premium .nv-bio--rev .nv-bio__body {
order: 1;
}
/* Jednolite kadrowanie portretów — to naprawia rozjazd wycinanek. */
body.nv-premium .nv-bio__media {
width: 100%;
max-width: none;
padding: 0 !important;
}
body.nv-premium .nv-bio__media .elementor-widget-image,
body.nv-premium .nv-bio__media figure {
margin: 0;
width: 100%;
}
body.nv-premium .nv-bio__media img {
width: 100% !important;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
border-radius: var(--nv-radius);
box-shadow: var(--nv-shadow);
display: block;
background-color: var(--nv-surface-alt);
}
body.nv-premium .nv-bio__body {
padding-top: clamp(4px, 1vw, 16px) !important;
}
body.nv-premium .nv-bio__name .elementor-heading-title {
font-family: var(--nv-serif);
font-weight: 500;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--nv-ink);
margin: 0;
}
body.nv-premium .nv-bio__name::before {
content: "";
display: block;
width: 40px;
height: 2px;
margin-bottom: 20px;
background: var(--nv-detail);
}
body.nv-premium .nv-bio__role p {
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
font-style: normal;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--nv-detail);
margin: 12px 0 0;
}
body.nv-premium .nv-bio__role em {
font-style: normal;
}
body.nv-premium .nv-bio__text {
margin-top: 22px;
}
body.nv-premium .nv-bio__text p {
font-size: 15.5px;
line-height: 1.8;
color: var(--nv-ink-soft);
margin: 0 0 16px;
}
/* "Specjalizacje:" — etykieta, nie pogrubione zdanie. */
body.nv-premium .nv-bio__text p > strong:only-child {
display: block;
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--nv-ink);
margin-top: 8px;
}
/* Akapit po liście specjalizacji (np. link do strony lekarza). */
body.nv-premium .nv-bio__text ul + p {
margin-top: 22px;
}
/* Linki w biogramie (np. strona lekarza). */
body.nv-premium .nv-bio__text p a {
color: var(--nv-accent);
text-decoration: underline;
text-decoration-color: var(--nv-detail-soft);
text-underline-offset: 3px;
}
/* Specjalizacje jako tagi. */
body.nv-premium .nv-bio__text ul {
list-style: none;
padding: 0;
margin: 14px 0 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.nv-premium .nv-bio__text ul li {
font-family: var(--nv-sans);
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
color: var(--nv-accent);
background: var(--nv-surface);
border: 1px solid var(--nv-line);
padding: 8px 14px;
border-radius: 999px;
}
/* --------------------------------------------------------------------------
8. CENNIK
-------------------------------------------------------------------------- */
body.nv-premium .nv-pricing__table {
width: 100%;
max-width: 760px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
background: var(--nv-white);
border: 1px solid var(--nv-line);
border-radius: var(--nv-radius);
overflow: hidden;
box-shadow: var(--nv-shadow);
}
body.nv-premium .nv-pricing__table thead th {
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--nv-white);
background: var(--nv-accent);
padding: 18px 26px;
text-align: left;
}
body.nv-premium .nv-pricing__table thead th:last-child {
text-align: right;
}
body.nv-premium .nv-pricing__table td {
padding: 20px 26px;
border-top: 1px solid var(--nv-line);
font-family: var(--nv-sans);
font-size: 15.5px;
line-height: 1.5;
color: var(--nv-ink);
vertical-align: middle;
background: transparent;
}
body.nv-premium .nv-pricing__table tbody tr:first-child td {
border-top: 0;
}
body.nv-premium .nv-pricing__table td:last-child {
text-align: right;
white-space: nowrap;
font-family: var(--nv-serif);
font-size: 21px;
font-weight: 600;
color: var(--nv-accent);
}
body.nv-premium .nv-pricing__table tbody tr:hover td {
background: var(--nv-surface);
}
body.nv-premium .nv-pricing__hint {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: var(--nv-ink-soft);
margin-top: 4px;
}
body.nv-premium .nv-pricing__note {
max-width: 560px;
margin: 26px auto 0;
text-align: center;
font-size: 14px;
line-height: 1.7;
color: var(--nv-ink-soft);
}
/* --------------------------------------------------------------------------
9. FAQ
-------------------------------------------------------------------------- */
body.nv-premium .nv-faq .elementor-accordion {
max-width: 860px;
margin-inline: auto;
display: grid;
gap: 12px;
}
body.nv-premium .nv-faq .elementor-accordion-item {
border: 1px solid var(--nv-line) !important;
border-radius: 14px;
overflow: hidden;
background: var(--nv-white);
transition: border-color 0.25s var(--nv-ease), box-shadow 0.25s var(--nv-ease);
}
body.nv-premium .nv-faq .elementor-accordion-item:hover {
border-color: var(--nv-detail-soft);
box-shadow: var(--nv-shadow);
}
body.nv-premium .nv-faq .elementor-tab-title {
font-family: var(--nv-sans);
font-size: 15.5px;
font-weight: 600;
line-height: 1.5;
color: var(--nv-ink);
background: transparent;
border: 0 !important;
padding: 20px 24px;
}
body.nv-premium .nv-faq .elementor-tab-title.elementor-active {
color: var(--nv-accent);
}
body.nv-premium .nv-faq .elementor-tab-content {
background: transparent;
border: 0 !important;
padding: 0 24px 22px;
font-size: 15px;
line-height: 1.8;
color: var(--nv-ink-soft);
}
body.nv-premium .nv-faq .elementor-accordion-icon {
color: var(--nv-detail);
width: auto;
margin-right: 12px;
}
/* --------------------------------------------------------------------------
10. LOKALIZACJA (mapa + dane)
-------------------------------------------------------------------------- */
body.nv-premium .nv-locate > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(24px, 3vw, 44px);
align-items: stretch;
max-width: 1140px;
margin-inline: auto;
}
body.nv-premium .nv-locate__map,
body.nv-premium .nv-locate__map .elementor-widget-google_maps,
body.nv-premium .nv-locate__map .elementor-widget-container,
body.nv-premium .nv-locate__map .elementor-custom-embed {
height: 100%;
width: 100%;
max-width: none;
}
body.nv-premium .nv-locate__map iframe {
width: 100%;
/* widget mapy ma sztywną wysokość 400px — tu ma dociągać do karty obok */
height: 100% !important;
min-height: 420px;
border: 0;
border-radius: var(--nv-radius);
box-shadow: var(--nv-shadow);
display: block;
}
body.nv-premium .nv-locate__info {
background: var(--nv-white);
border: 1px solid var(--nv-line);
border-radius: var(--nv-radius);
box-shadow: var(--nv-shadow);
padding: clamp(26px, 3vw, 40px) !important;
}
body.nv-premium .nv-locate__info .elementor-icon-list-item {
font-size: 15px;
line-height: 1.7;
color: var(--nv-ink);
}
body.nv-premium .nv-locate__info .elementor-icon-list-icon i,
body.nv-premium .nv-locate__info .elementor-icon-list-icon svg {
color: var(--nv-detail);
fill: var(--nv-detail);
}
body.nv-premium .nv-locate__info h4 {
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--nv-ink);
margin: 26px 0 12px;
padding-top: 22px;
border-top: 1px solid var(--nv-line);
}
body.nv-premium .nv-locate__info ul {
padding-left: 18px;
margin: 0;
}
body.nv-premium .nv-locate__info ul li {
font-size: 14.5px;
line-height: 1.8;
color: var(--nv-ink-soft);
}
/* --------------------------------------------------------------------------
11. REZERWACJA (panel + formularz)
-------------------------------------------------------------------------- */
body.nv-premium .nv-booking.nv-booking {
background-color: var(--nv-surface) !important;
}
body.nv-premium .nv-booking > .e-con-inner {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: stretch;
gap: 0;
max-width: 1140px;
margin-inline: auto;
background: var(--nv-white);
border-radius: var(--nv-radius);
overflow: hidden;
box-shadow: var(--nv-shadow-lift);
}
body.nv-premium .nv-booking__col {
height: 100%;
padding: 0 !important;
/* Elementor pamięta szerokość kolumn z układu flex (--width: 50%),
co w gridzie zwężałoby je do połowy ścieżki. */
width: 100%;
max-width: none;
}
body.nv-premium .nv-booking__col > .e-con-inner {
height: 100%;
max-width: none;
padding: 0;
}
/* Kolumna panelu ma rozciągnąć bordowy kafel na całą wysokość wiersza. */
body.nv-premium .nv-booking__colinner,
body.nv-premium .nv-booking__colinner > .e-con-inner {
height: 100%;
max-width: none;
padding: 0;
display: flex;
flex-direction: column;
}
body.nv-premium .nv-booking__intro {
flex: 1;
}
/* Pusty kontener, który zostawiał dziurę pod bordowym panelem. */
body.nv-premium .nv-booking__spacer {
display: none;
}
body.nv-premium .nv-booking__intro {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(32px, 3.4vw, 52px) !important;
background: linear-gradient(160deg, var(--nv-accent) 0%, var(--nv-accent-deep) 100%) !important;
}
body.nv-premium .nv-booking__intro .elementor-heading-title {
font-family: var(--nv-serif);
font-weight: 500;
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.2;
color: var(--nv-white);
}
body.nv-premium .nv-booking__intro .elementor-widget-text-editor {
margin-top: 18px;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.86);
}
body.nv-premium .nv-booking__intro strong {
color: var(--nv-white);
}
body.nv-premium .nv-booking__formwrap {
padding: clamp(28px, 3vw, 46px) !important;
max-width: none;
}
body.nv-premium .nv-form .elementor-field-group {
margin-bottom: 6px;
}
body.nv-premium .nv-form .elementor-field-textual {
min-height: 52px;
padding: 14px 16px;
background: var(--nv-white);
border: 1px solid var(--nv-line);
border-radius: 10px;
font-family: var(--nv-sans);
font-size: 15px;
line-height: 1.5;
color: var(--nv-ink);
transition: border-color 0.2s var(--nv-ease), box-shadow 0.2s var(--nv-ease);
}
body.nv-premium .nv-form .elementor-field-textual::placeholder {
color: #9aa4ad;
}
body.nv-premium .nv-form .elementor-field-textual:focus {
border-color: var(--nv-accent);
box-shadow: 0 0 0 3px var(--nv-accent-ring);
outline: none;
}
body.nv-premium .nv-form .elementor-field-label {
font-family: var(--nv-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nv-ink-soft);
margin-bottom: 8px;
}
body.nv-premium .nv-form .elementor-field-type-acceptance .elementor-field-option,
body.nv-premium .nv-form .elementor-field-type-acceptance label {
font-size: 13px;
line-height: 1.6;
color: var(--nv-ink-soft);
}
body.nv-premium .nv-form .elementor-field-type-acceptance a {
color: var(--nv-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
body.nv-premium .nv-form .elementor-field-type-submit {
margin-top: 10px;
justify-content: flex-start;
}
/* --------------------------------------------------------------------------
12. SIATKA ZABIEGÓW (JetWooBuilder)
-------------------------------------------------------------------------- */
body.nv-premium .nv-products .jet-woo-products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 24px);
margin: 0 !important;
}
body.nv-premium .nv-products .jet-woo-products__item {
display: flex !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.nv-premium .nv-products .jet-woo-products__inner-box {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: var(--nv-white);
border: 1px solid var(--nv-line);
border-radius: var(--nv-radius);
overflow: hidden;
box-shadow: var(--nv-shadow);
transition: transform 0.3s var(--nv-ease), box-shadow 0.3s var(--nv-ease);
}
body.nv-premium .nv-products .jet-woo-products__inner-box:hover {
transform: translateY(-6px);
box-shadow: var(--nv-shadow-lift);
}
body.nv-premium .nv-products .jet-woo-product-thumbnail img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
body.nv-premium .nv-products .jet-woo-product-title,
body.nv-premium .nv-products .jet-woo-product-title a {
font-family: var(--nv-serif);
font-weight: 500;
font-size: 19px;
line-height: 1.3;
}
body.nv-premium .nv-products .jet-woo-product-title {
margin: 0;
padding: 20px 22px 0;
}
body.nv-premium .nv-products .jet-woo-product-title a {
color: var(--nv-ink);
transition: color 0.2s var(--nv-ease);
}
body.nv-premium .nv-products .jet-woo-product-title a:hover {
color: var(--nv-accent);
}
body.nv-premium .nv-products .jet-woo-product-excerpt {
flex: 1;
padding: 12px 22px 24px;
font-size: 14px;
line-height: 1.7;
color: var(--nv-ink-soft);
}
/* --------------------------------------------------------------------------
13. OPINIE GOOGLE — tylko osadzenie w rytmie strony
-------------------------------------------------------------------------- */
body.nv-premium .nv-reviews.nv-reviews {
background-color: var(--nv-surface) !important;
padding-top: clamp(40px, 5vw, 72px) !important;
padding-bottom: clamp(40px, 5vw, 72px) !important;
/* Karuzela Trustindex jest szersza niż viewport i rozjeżdżała stronę w poziomie. */
overflow-x: hidden;
}
/* --------------------------------------------------------------------------
14. RESPONSYWNOŚĆ — mobile first jest priorytetem
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
body.nv-premium .nv-cards > .e-con-inner,
body.nv-premium .nv-products .jet-woo-products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.nv-premium .nv-locate > .e-con-inner,
body.nv-premium .nv-booking > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
body.nv-premium .nv-bio > .e-con-inner,
body.nv-premium .nv-bio--rev > .e-con-inner {
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}
/* --- Dotyk (telefon + tablet): większy stopień pisma dla czytelności ---
Pola formularza mają 16px celowo — poniżej tej wartości iOS Safari
przybliża stronę przy wejściu w pole. */
body.nv-premium .nv-hero__lead p,
body.nv-premium .nv-lead p,
body.nv-premium .nv-bio__text p {
font-size: 16.5px;
line-height: 1.8;
}
body.nv-premium .nv-card .elementor-icon-box-title {
font-size: 21px;
}
body.nv-premium .nv-card .elementor-icon-box-description {
font-size: 15.5px;
}
body.nv-premium .nv-bio__text ul li {
font-size: 13.5px;
}
body.nv-premium .nv-pricing__note {
font-size: 15px;
}
body.nv-premium .nv-locate__info .elementor-icon-list-item,
body.nv-premium .nv-locate__info ul li {
font-size: 15.5px;
}
body.nv-premium .nv-booking__intro .elementor-widget-text-editor {
font-size: 16px;
}
body.nv-premium .nv-form .elementor-field-textual {
font-size: 16px;
}
body.nv-premium .nv-form .elementor-field-type-acceptance .elementor-field-option,
body.nv-premium .nv-form .elementor-field-type-acceptance label {
font-size: 14px;
}
body.nv-premium .nv-products .jet-woo-product-excerpt {
font-size: 15px;
}
body.nv-premium .nv-products .jet-woo-product-title,
body.nv-premium .nv-products .jet-woo-product-title a {
font-size: 20px;
}
}
@media (max-width: 767px) {
body.nv-premium .nv-hero.nv-hero {
min-height: 520px;
}
body.nv-premium .nv-hero .nv-hero__overlay {
background: linear-gradient(
180deg,
rgba(19, 27, 35, 0.35) 0%,
rgba(19, 27, 35, 0.72) 55%,
rgba(19, 27, 35, 0.88) 100%
) !important;
align-items: flex-end;
}
body.nv-premium .nv-hero .nv-hero__overlay > .e-con-inner {
padding-bottom: 8px;
}
body.nv-premium .nv-hero__title .elementor-heading-title {
max-width: none;
}
body.nv-premium .nv-hero__sub.nv-hero__sub .elementor-heading-title {
font-size: 10.5px;
letter-spacing: 0.16em;
}
body.nv-premium .nv-cards .nv-card {
padding: 28px 22px !important;
}
body.nv-premium .nv-hero__cta {
width: 100%;
margin-top: 28px;
}
body.nv-premium .nv-hero__cta .elementor-button {
width: 100%;
}
body.nv-premium .nv-cards > .e-con-inner,
body.nv-premium .nv-products .jet-woo-products {
grid-template-columns: minmax(0, 1fr);
}
body.nv-premium .nv-bio > .e-con-inner,
body.nv-premium .nv-bio--rev > .e-con-inner {
grid-template-columns: minmax(0, 1fr);
}
body.nv-premium .nv-bio--rev .nv-bio__media,
body.nv-premium .nv-bio__media {
order: 1;
max-width: 280px;
margin-inline: auto;
}
body.nv-premium .nv-bio--rev .nv-bio__body,
body.nv-premium .nv-bio__body {
order: 2;
}
body.nv-premium .nv-bio__name::before {
margin-inline: auto;
}
body.nv-premium .nv-bio__name .elementor-heading-title,
body.nv-premium .nv-bio__role p {
text-align: center;
}
body.nv-premium .nv-bio__text ul {
justify-content: center;
}
body.nv-premium .nv-pricing__table thead th,
body.nv-premium .nv-pricing__table td {
padding: 16px 16px;
}
body.nv-premium .nv-pricing__table td {
font-size: 15.5px;
}
body.nv-premium .nv-pricing__table td:last-child {
font-size: 19px;
}
/* Przedziały cen („13 000–15 000 zł”) nie mieszczą się w nowrap na 375px.
Liczby mają w treści twarde spacje, więc łamanie wypada tylko po półpauzie. */
body.nv-premium .nv-pricing__table td:last-child,
body.nv-premium .nv-pricing__table th:last-child {
white-space: normal;
width: 42%;
}
body.nv-premium .nv-faq .elementor-tab-title {
font-size: 15.5px;
padding: 18px 18px;
}
body.nv-premium .nv-faq .elementor-tab-content {
font-size: 15.5px;
padding: 0 18px 20px;
}
body.nv-premium .nv-form .elementor-field-type-submit,
body.nv-premium .nv-form .elementor-button[type="submit"] {
width: 100%;
}
/* --- Telefon: ciaśniejszy rytm sekcji --- */
body.nv-premium {
--nv-pad: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
body.nv-premium * {
transition-duration: 0.01ms !important;
}
body.nv-premium .nv-cards .nv-card:hover,
body.nv-premium .nv-products .jet-woo-products__inner-box:hover,
body.nv-premium .nv-btn .elementor-button:hover {
transform: none;
}
}
/* --------------------------------------------------------------------------
15. STRONA: Fizjoterapia Niepołomice (ID 4962)
Treść nadtytułów jest per-strona. Dla kolejnej strony dopisz analogiczny
blok — reszta warstwy jest uniwersalna.
-------------------------------------------------------------------------- */
body.page-id-4962 .nv-h2--offer {
--nv-eyebrow: "01 · Oferta";
}
body.page-id-4962 .nv-h2--why {
--nv-eyebrow: "02 · Dlaczego Novya";
}
body.page-id-4962 .nv-h2--team {
--nv-eyebrow: "03 · Zespół";
}
body.page-id-4962 .nv-h2--pricing {
--nv-eyebrow: "04 · Cennik";
}
body.page-id-4962 .nv-h2--faq {
--nv-eyebrow: "05 · Pytania";
}
body.page-id-4962 .nv-h2--locate {
--nv-eyebrow: "06 · Dojazd";
}
body.page-id-4962 .nv-h2--booking {
--nv-eyebrow: "07 · Rezerwacja";
}
/* --------------------------------------------------------------------------
16. STRONA: Chirurgia plastyczna Niepołomice (ID 3873)
Motyw „granat chirurgiczny”: chłodny, kliniczny akcent + złoty detal marki.
-------------------------------------------------------------------------- */
body.page-id-3873 {
--nv-accent: #1d4f7c;
--nv-accent-deep: #143a5c;
--nv-accent-glow: rgba(29, 79, 124, 0.55);
--nv-accent-glow-strong: rgba(29, 79, 124, 0.7);
--nv-accent-ring: rgba(29, 79, 124, 0.14);
--nv-detail: #b08a5a;
--nv-detail-soft: #dccbb4;
--nv-surface: #f4f7fa;
--nv-surface-alt: #e8eef4;
}
/* Zapisy na chirurgię: telefon lub formularz — bez globalnej zakładki Booksy. */
body.page-id-3873 .booksy-tab-vertical {
display: none !important;
}
body.page-id-3873 .nv-h2--intro { --nv-eyebrow: "01 · W skrócie"; }
body.page-id-3873 .nv-h2--offer { --nv-eyebrow: "02 · Zabiegi"; }
body.page-id-3873 .nv-h2--team { --nv-eyebrow: "03 · Chirurg"; }
body.page-id-3873 .nv-h2--process { --nv-eyebrow: "04 · Przebieg leczenia"; }
body.page-id-3873 .nv-h2--pricing { --nv-eyebrow: "05 · Cennik"; }
body.page-id-3873 .nv-h2--faq { --nv-eyebrow: "06 · Pytania"; }
body.page-id-3873 .nv-h2--booking { --nv-eyebrow: "07 · Konsultacja"; }
body.page-id-3873 .nv-h2--locate { --nv-eyebrow: "08 · Dojazd"; }
/* --------------------------------------------------------------------------
17. STRONA: Kosmetologia Niepołomice (ID 2343)
Motyw „opalona skóra”: ciepły, miodowy brąz na CTA i cenach, piaskowe tła, złoty detal marki.
Kontrast akcentu na bieli 5,01:1, czyli z zapasem nad progiem WCAG AA.
-------------------------------------------------------------------------- */
body.page-id-2343,
body.page-id-5497 {
--nv-accent: #a05f39;
--nv-accent-deep: #834a2c;
--nv-accent-glow: rgba(160, 95, 57, 0.55);
--nv-accent-glow-strong: rgba(160, 95, 57, 0.7);
--nv-accent-ring: rgba(160, 95, 57, 0.14);
--nv-detail: #b8895b;
--nv-detail-soft: #e0c9ad;
--nv-surface: #fdf6f0;
--nv-surface-alt: #f6ebe0;
}
body.page-id-2343 .nv-h2--intro { --nv-eyebrow: "01 · W skrócie"; }
body.page-id-2343 .nv-h2--offer { --nv-eyebrow: "02 · Zabiegi"; }
body.page-id-2343 .nv-h2--team { --nv-eyebrow: "03 · Zespół"; }
body.page-id-2343 .nv-h2--process { --nv-eyebrow: "04 · Przebieg wizyty"; }
body.page-id-2343 .nv-h2--pricing { --nv-eyebrow: "05 · Cennik"; }
body.page-id-2343 .nv-h2--faq { --nv-eyebrow: "06 · Pytania"; }
body.page-id-2343 .nv-h2--booking { --nv-eyebrow: "07 · Rezerwacja"; }
body.page-id-2343 .nv-h2--locate { --nv-eyebrow: "08 · Dojazd"; }
body.page-id-2343 .nv-h2--list { --nv-eyebrow: "09 · Pełna lista"; }
/* Filtr JetSmartFilters nad siatką produktów: odstęp i wyśrodkowanie pigułek. */
body.page-id-2343 .nv-products .jet-smart-filters-checkboxes {
margin-bottom: 28px;
}
body.page-id-2343 .nv-products .jet-checkboxes-list__row {
justify-content: center;
}
/* Pigułki filtra w tonacji strony (domyślnie dziedziczą bordo z motywu). */
body.page-id-2343 .nv-products .jet-checkboxes-list__button {
font-family: var(--nv-sans);
font-size: 14px;
border-color: var(--nv-detail-soft) !important;
color: var(--nv-ink) !important;
background: var(--nv-white) !important;
}
body.page-id-2343 .nv-products .jet-checkboxes-list__button:hover {
border-color: var(--nv-detail) !important;
background: var(--nv-surface-alt) !important;
}
body.page-id-2343 .nv-products .jet-checkboxes-list__item input[type="checkbox"]:checked ~ .jet-checkboxes-list__button {
background: var(--nv-accent) !important;
border-color: var(--nv-accent) !important;
color: var(--nv-white) !important;
}
/* --------------------------------------------------------------------------
18. DRUGI PRZYCISK W HERO (nv-btn--ghost)
Obrysowy wariant przycisku. Prowadzi do wykazu zabiegów, ale nie konkuruje
z głównym CTA, bo akcent zostaje zarezerwowany dla rezerwacji wizyty.
-------------------------------------------------------------------------- */
body.nv-premium .nv-hero__cta {
gap: 14px;
flex-wrap: wrap;
}
body.nv-premium .nv-btn--ghost .elementor-button {
background-color: rgba(255, 255, 255, 0.08) !important;
color: var(--nv-white) !important;
border: 1.5px solid rgba(255, 255, 255, 0.7);
box-shadow: none;
}
body.nv-premium .nv-btn--ghost .elementor-button:hover {
background-color: rgba(255, 255, 255, 0.18) !important;
border-color: var(--nv-white);
box-shadow: none;
transform: translateY(-2px);
}
body.nv-premium .nv-btn--ghost .elementor-button:focus-visible {
outline: 2px solid var(--nv-white);
outline-offset: 3px;
}
@media (max-width: 767px) {
/* Dwa przyciski obok siebie, bo pionowo nie mieszczą się w kadrze hero. */
body.nv-premium .nv-hero__cta {
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 10px;
}
body.nv-premium .nv-hero__cta > .e-con-inner {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 10px;
width: 100%;
}
body.nv-premium .nv-hero__cta .elementor-widget-button {
flex: 1 1 0;
min-width: 0;
}
body.nv-premium .nv-hero__cta .elementor-button {
width: 100%;
padding: 16px 12px;
font-size: 11.5px;
letter-spacing: 0.04em;
text-align: center;
}
/* Hero musi pomieścić drugi przycisk. */
body.nv-premium .nv-hero.nv-hero {
min-height: 560px;
}
}
/* ==========================================================================
19. Strona: Rezerwacja (ID 2962, zbudowana na szkicu 5465). Motyw domyślny (bordo).
Wdrożone 2026-09-19. Formularz = wspólny szablon Elementora 5463.
========================================================================== */
body.page-id-2962 .nv-h2--booking, body.page-id-5465 .nv-h2--booking { --nv-eyebrow: "01 · Rezerwacja"; }
body.page-id-2962 .nv-h2--offer, body.page-id-5465 .nv-h2--offer { --nv-eyebrow: "02 · Obszary"; }
body.page-id-2962 .nv-h2--process, body.page-id-5465 .nv-h2--process { --nv-eyebrow: "03 · Przebieg"; }
body.page-id-2962 .nv-h2--values, body.page-id-5465 .nv-h2--values { --nv-eyebrow: "04 · Dlaczego my"; }
body.page-id-2962 .nv-h2--faq, body.page-id-5465 .nv-h2--faq { --nv-eyebrow: "05 · Pytania"; }
body.page-id-2962 .nv-h2--locate, body.page-id-5465 .nv-h2--locate { --nv-eyebrow: "06 · Dojazd"; }
/* --------------------------------------------------------------------------
20. STRONA: Depilacja laserowa Niepołomice (ID 5497)
Tonacja wspólna z kosmetologią (sekcja 17), bo to podstrona tej samej dziedziny.
-------------------------------------------------------------------------- */
body.page-id-5497 .nv-h2--intro { --nv-eyebrow: "01 · W skrócie"; }
body.page-id-5497 .nv-h2--areas { --nv-eyebrow: "02 · Obszary"; }
body.page-id-5497 .nv-h2--process { --nv-eyebrow: "03 · Przebieg"; }
body.page-id-5497 .nv-h2--prep { --nv-eyebrow: "04 · Przygotowanie"; }
body.page-id-5497 .nv-h2--pricing { --nv-eyebrow: "05 · Cennik"; }
body.page-id-5497 .nv-h2--faq { --nv-eyebrow: "06 · Pytania"; }
body.page-id-5497 .nv-h2--booking { --nv-eyebrow: "07 · Rezerwacja"; }
body.page-id-5497 .nv-h2--locate { --nv-eyebrow: "08 · Dojazd"; }
/* --------------------------------------------------------------------------
21. STRONA: Osteopata Niepołomice (ID 3577, przebudowa wpisu, wariant 301)
Motyw domyślny (bordo), jak fizjoterapia (4962). Wdrożone 2026-10-09.
-------------------------------------------------------------------------- */
body.page-id-3577 .nv-h2--intro { --nv-eyebrow: "01 · W skrócie"; }
body.page-id-3577 .nv-h2--adults { --nv-eyebrow: "02 · Dorośli"; }
body.page-id-3577 .nv-h2--kids { --nv-eyebrow: "03 · Dzieci"; }
body.page-id-3577 .nv-h2--team { --nv-eyebrow: "04 · Osteopata"; }
body.page-id-3577 .nv-h2--visit { --nv-eyebrow: "05 · Przebieg"; }
body.page-id-3577 .nv-h2--pricing { --nv-eyebrow: "06 · Cennik"; }
body.page-id-3577 .nv-h2--faq { --nv-eyebrow: "07 · Pytania"; }
body.page-id-3577 .nv-h2--booking { --nv-eyebrow: "08 · Rezerwacja"; }
body.page-id-3577 .nv-h2--locate { --nv-eyebrow: "09 · Dojazd"; }