/* HERO FULL WIDTH BACKGROUND FIX */
.hero-bg-img.modern-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* --- Mobile hero fixes: show image clearly on phones --- */
@media (max-width: 767px) {
/* make the hero image container a reasonable height on phones */
.hero-bg-img {
height: 100% !important;
position: absolute !important;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
/* remove the heavy gradient overlay so the photo is visible */
.hero-bg-img::after {
background: rgba(0, 0, 0, 0.4) !important; /* Add slight overlay for readability */
}
/* ensure the picture/img fills the container and is cropped from center */
.hero-slide img,
.hero-slide picture,
.hero-slide picture img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
/* reduce hero section padding so the image is more visible above the fold */
.hero {
padding-top: 6rem; /* Adjust for fixed header */
padding-bottom: 1rem;
min-height: 100vh; /* Full height */
}
}
.hero-bg-img.modern-bg img.modern-bg-img {
width: 100vw;
height: 100vh;
object-fit: cover;
display: block;
}
.turbo-title {
font-family: 'Playfair Display', 'Georgia', serif;
font-size: 2.9rem;
font-weight: 800;
letter-spacing: 1.5px;
color: #233733;
text-align: center;
margin-bottom: 28px;
text-shadow: 0 2px 16px #c9a96e22;
}
.turbo-desc {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: 'Lato', Arial, sans-serif;
font-size: 1.32rem;
color: #233733;
text-align: center;
max-width: 700px;
margin: 0 auto 38px auto;
line-height: 1.7;
letter-spacing: 0.02em;
font-weight: 400;
background: linear-gradient(90deg, #c9a96e22 0%, #fff 100%);
border-radius: 14px;
padding: 1em 1.2em;
box-shadow: 0 2px 12px #c9a96e22;
}
.turbo-line {
display: block;
font-size: 1.18em;
font-weight: 500;
margin-bottom: 2px;
}
.highlight-gold {
color: #c9a96e;
font-weight: 700;
background: none;
letter-spacing: 0.03em;
}
.fade-in {
opacity: 0;
animation: turboFadeIn 0.8s ease forwards;
}
@keyframes turboFadeIn {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Baner Notarialny Asystent Dokumentów - finalna wersja */
.assistant-banner {
width: 100%;
background: linear-gradient(90deg, #c9a96e 0%, #fff 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 72px 16px 56px 16px;
box-sizing: border-box;
}
.assistant-title {
font-family: 'Playfair Display', 'Georgia', serif;
color: #233733;
font-size: 2.7rem;
font-weight: 700;
text-align: center;
margin-bottom: 22px;
letter-spacing: 1px;
}
.assistant-desc {
font-family: 'Lato', Arial, sans-serif;
color: #233733;
font-size: 1.18rem;
text-align: center;
margin-bottom: 36px;
max-width: 600px;
line-height: 1.6;
}
.assistant-cta {
background: #c9a96e;
color: #233733;
font-family: 'Lato', Arial, sans-serif;
font-size: 1.15rem;
font-weight: 700;
border: none;
border-radius: 14px;
padding: 1rem 2.5rem;
margin-bottom: 40px;
box-shadow: 0 2px 12px #c9a96e44;
cursor: pointer;
transition: transform .18s, box-shadow .18s, background .18s;
outline: none;
text-decoration: none;
display: inline-block;
}
.assistant-cta:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 24px #c9a96e88;
background: #233733;
color: #fff;
}
.assistant-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
width: 100%;
margin-top: 10px;
flex-wrap: wrap;
}
.assistant-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.assistant-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(201,169,110,0.13);
border: 2.5px solid #233733;
color: #233733;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
box-shadow: 0 2px 8px #c9a96e22;
}
.assistant-label {
color: #233733;
font-size: 1rem;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
}
.assistant-arrow {
display: inline-block;
width: 32px;
height: 32px;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
margin: 0 8px;
}
@media (max-width: 700px) {
.assistant-banner {
padding: 24px 2vw 18px 2vw;
}
.assistant-title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.assistant-desc {
font-size: 0.92rem;
margin-bottom: 18px;
max-width: 98vw;
padding: 0 2vw;
}
.assistant-steps {
flex-direction: column;
align-items: center;
gap: 1.2rem;
width: 100%;
margin-top: 8px;
}
.assistant-step {
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 0.3rem;
}
.assistant-icon {
width: 28px;
height: 28px;
font-size: 0.85rem;
}
.assistant-label {
font-size: 0.92rem;
}
.assistant-arrow {
display: none !important;
}
.assistant-cta {
padding: 0.7rem 1.2rem;
font-size: 1rem;
margin-bottom: 18px;
}
}
/* --- Ultra-nowoczesny baner Notarialny Asystent Dokumentów --- */
.nad-glass-bg {
background: linear-gradient(90deg, #c9a96e 0%, #fff 100%);
padding: 48px 0;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 36px;
box-shadow: 0 2px 12px #c9a96e44;
cursor: pointer;
transition: transform .18s, box-shadow .18s, background .18s;
outline: none;
}
.nad-cta:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 24px #c9a96e88;
background: #c9a96e;
color: #233733;
}
.nad-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
width: 100%;
margin-top: 8px;
}
.nad-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: color .2s;
}
.nad-step-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(201,169,110,0.12);
border: 2.5px solid #c9a96e;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
transition: background .3s, border-color .3s;
}
.nad-step-icon::before {
content: '';
display: block;
width: 28px;
height: 28px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: filter .3s;
}
/* Ikony SVG jako data-uri */
.step-1::before {
content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E1%3C/text%3E%3C/svg%3E");
}
.step-2::before {
content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E2%3C/text%3E%3C/svg%3E");
}
.step-3::before {
content: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ctext x='14' y='20' text-anchor='middle' font-size='16' fill='%23c9a96e' font-family='Arial'%3E3%3C/text%3E%3C/svg%3E");
}
.nad-step-label {
font-family: Arial, sans-serif;
color: #233733;
font-size: 1rem;
font-weight: 600;
text-align: center;
margin-top: 2px;
transition: color .3s;
}
.nad-arrow {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 0.5rem;
vertical-align: middle;
background: none;
position: relative;
}
.nad-arrow::before {
content: url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16h16M20 12l4 4-4 4' stroke='%23c9a96e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
display: block;
width: 32px;
height: 32px;
}
/* Interaktywny efekt hover na banerze */
.nad-glass-card:hover .nad-step-icon,
.nad-step-icon:hover {
background: #c9a96e;
border-color: #c9a96e;
}
.nad-glass-card:hover .nad-step-icon::before,
.nad-step-icon:hover::before {
filter: brightness(0) invert(1);
}
.nad-glass-card:hover .nad-step-label,
.nad-step-icon:hover + .nad-step-label {
color: #fff;
}
/* Responsywność */
@media (max-width: 768px) {
.nad-glass-card {
padding: 32px 8px 28px 8px;
}
.nad-title {
font-size: 2rem;
.contact-details {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto 1.2rem auto;
}
.contact-details p {
justify-content: center !important;
text-align: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
font-size: 1.08rem !important;
}
.contact-details svg {
margin-right: 8px;
vertical-align: middle;
}
}
.nad-desc {
font-size: 1rem;
}
.nad-steps {
flex-direction: column;
gap: 18px;
margin-top: 18px;
}
.nad-arrow {
transform: rotate(90deg);
margin: 0;
}
}
/* --- Language Visibility Control --- */
/* Hide non-default languages on page load before JavaScript kicks in */
.lang-en, .lang-ua,
.lang-en-content, .lang-ua-content {
display: none;
}
/* --- ZMIENNE GLOBALNE --- */
:root {
--bg-dark: #233733; /* Zmieniony zielony */
--bg-darker: #233733; /* Zmieniony zielony */
--bg-white: #ffffff;
--bg-light-green: #e9ebea; /* Jaśniejszy odcień nowego zielonego */
/* Podniesione z #bfbfbf do #d0d0d0 — kontrast na --bg-dark wzrasta
z ~6.8:1 (WCAG AA) do ~7.9:1 (WCAG AAA dla normalnego tekstu). */
--text-light: #d0d0d0;
--text-dark: #333333;
--accent: #b9a67b; /* Zmieniony złoty */
--accent-hover: #c7b892; /* Jaśniejszy odcień nowego złotego */
--border: rgba(185, 166, 123, 0.6); /* Zmieniony złoty z przezroczestością */
--shadow: rgba(0,0,0,0.4);
--font-header: 'Playfair Display', serif; /* Nowa czcionka dla nagłówków */
--font-body: 'Lato', sans-serif; /* Nowa czcionka dla tekstu */
}
/* --- RESET I PODSTAWOWE STYLE --- */
/* --- Jasny, nowoczesny baner kalkulatora --- */
.kalkulator-glass-banner {
position: relative;
width: 100%;
min-height: 340px;
display: flex;
align-items: center;
justify-content: center;
margin: 3rem 0 2.5rem 0;
z-index: 2;
}
.glass-bg {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(120deg, #00c9a7 0%, #C9B37B 100%);
filter: blur(32px) brightness(1.1);
opacity: 0.35;
z-index: 1;
pointer-events: none;
transition: opacity .6s;
}
.glass-panel {
position: relative;
background: rgba(255,255,255,0.22);
border-radius: 32px;
box-shadow: 0 8px 32px rgba(35,55,51,0.12), 0 1.5px 0.5px #00c9a7;
backdrop-filter: blur(16px);
display: flex;
align-items: center;
gap: 2.5rem;
padding: 2.8rem 2.2rem;
z-index: 2;
animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) both;
}
.glass-content {
flex: 1 1 340px;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.glass-title {
font-family: 'Montserrat', 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 800;
color: #233733;
margin-bottom: 0.5rem;
text-shadow: 0 2px 12px #00c9a7aa, 0 1px 0 #C9B37B;
}
.glass-desc {
font-size: 1.18rem;
color: #233733;
line-height: 1.7;
}
.glass-highlight {
color: #00c9a7;
font-weight: 700;
background: linear-gradient(90deg,#00c9a7 40%,#C9B37B 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-benefit {
color: #C9B37B;
font-weight: 600;
}
.glass-cta {
display: inline-block;
margin-top: 1.2rem;
padding: 1rem 2.5rem;
font-size: 1.15rem;
font-family: 'Montserrat', 'Lato', sans-serif;
font-weight: 700;
color: #fff;
background: #00c9a7;
border: none;
border-radius: 12px;
box-shadow: 0 2px 12px #00c9a744, 0 1px 8px #C9B37B44;
cursor: pointer;
transition: transform .18s, box-shadow .18s, background .18s;
position: relative;
overflow: hidden;
}
.glass-cta:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px #00c9a788, 0 2px 16px #C9B37B88;
background: #C9B37B;
color: #233733;
}
.glass-graphic {
flex: 0 0 120px;
display: flex;
align-items: center;
justify-content: center;
animation: floatIcon 2.8s ease-in-out infinite;
}
@keyframes floatIcon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
.glass-panel {
.assistant-steps {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 2.2rem;
}
.assistant-step {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1.2rem;
margin-bottom: 0.5rem;
}
.assistant-step-circle {
min-width: 48px;
min-height: 48px;
font-size: 1.2rem;
}
.assistant-step-desc {
font-size: 1.08rem;
text-align: left;
margin-left: 0.5rem;
}
.assistant-step-divider {
display: none;
}
flex-direction: column;
gap: 2rem;
padding: 2rem 1rem;
}
.glass-content, .glass-graphic {
flex: 1 1 100%;
justify-content: flex-start;
align-items: flex-start;
}
.kalkulator-glass-banner {
min-height: 0;
margin: 2rem 0 1.5rem 0;
}
}
.kalkulator-banner-clear {
background: #f9f9f9;
border-radius: 32px;
box-shadow: 0 4px 32px rgba(185,166,123,0.08);
margin: 3rem auto 2.5rem auto;
max-width: 1100px;
padding: 2.8rem 2.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.kalkulator-banner-clear-wrap {
display: flex;
gap: 3.5rem;
width: 100%;
flex-wrap: wrap;
}
.kalkulator-banner-clear-left {
flex: 1 1 340px;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.kalkulator-banner-clear-title {
font-family: 'Montserrat', 'Playfair Display', serif;
font-size: 2.3rem;
font-weight: 800;
color: #233733;
margin-bottom: 0.5rem;
}
.kalkulator-banner-clear-desc {
font-size: 1.18rem;
color: #333;
line-height: 1.7;
}
.kalkulator-banner-clear-benefit {
color: #b9a67b;
font-weight: 600;
}
.kalkulator-banner-clear-cta {
display: inline-block;
margin-top: 1.2rem;
padding: 1rem 2.5rem;
font-size: 1.15rem;
font-family: 'Montserrat', 'Lato', sans-serif;
font-weight: 700;
color: #fff;
background: #233733;
border: none;
border-radius: 12px;
box-shadow: 0 2px 12px #b9a67b44;
cursor: pointer;
transition: transform .18s, box-shadow .18s, background .18s;
position: relative;
overflow: hidden;
}
.kalkulator-banner-clear-cta:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px #b9a67b88;
background: #b9a67b;
color: #233733;
}
.kalkulator-banner-clear-right {
flex: 1 1 340px;
display: flex;
align-items: center;
justify-content: center;
}
.kalkulator-banner-clear-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.kalkulator-banner-clear-steps li {
display: flex;
align-items: center;
gap: 1.1rem;
font-size: 1.08rem;
color: #233733;
font-family: 'Montserrat', 'Lato', sans-serif;
font-weight: 600;
}
.step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 0 2px 8px #b9a67b33;
background: #fff;
}
.step-label {
color: #233733;
font-weight: 600;
}
@media (max-width: 900px) {
.kalkulator-banner-clear-wrap {
flex-direction: column;
gap: 2rem;
}
.kalkulator-banner-clear-left, .kalkulator-banner-clear-right {
flex: 1 1 100%;
justify-content: flex-start;
align-items: flex-start;
}
.kalkulator-banner-clear {
padding: 2rem 1rem;
}
}
* { margin:0; padding:0; box-sizing:border-box; }
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
/* Optymalna typografia dla czytelności (NN/g, Baymard):
- 18px to sweet-spot dla długich tekstów (mniejsze obciążenie poznawcze niż 16px)
- waga 400 (Regular) zamiast 300 (Light) — Light przy body powoduje zmęczenie wzroku
- line-height 1.65 ułatwia skanowanie akapitów
Uwaga: nie zmieniamy `html { font-size }`, więc wszystkie rem-y nagłówków/komponentów
pozostają bez zmian — przeskalowuje się tylko tekst akapitowy. */
font-weight: 400;
/* 1.125rem = 18px przy domyślnych ustawieniach przeglądarki,
ale szanuje preferencje użytkownika (osoby z ustawionym większym
tekstem w przeglądarce — częste u starszych klientów — zobaczą
proporcjonalnie większy tekst). */
font-size: 1.125rem;
color: var(--text-light);
background: var(--bg-dark);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .logo {
font-family: var(--font-header);
font-weight: 700; /* Bold */
}
a {
color: var(--accent);
text-decoration: none;
position: relative;
}
a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 2px;
background: var(--accent);
transition: width .3s;
}
a:hover {
color: var(--accent-hover);
}
a:hover::after {
width: 100%;
}
p, li {
text-align: justify;
orphans: 2;
widows: 2;
margin-bottom: 1rem;
word-break: break-word;
}
ul {
list-style: disc outside;
margin-left:1.5rem;
padding-left:.5rem;
}
ul li {
padding-left:.5rem;
text-indent:-.5rem;
}
.icon {
width:1.2em; height:1.2em;
fill: var(--accent);
vertical-align: middle;
margin-right:.5em;
transition: transform .3s, fill .3s;
}
.icon:hover {
fill: var(--accent-hover);
transform: scale(1.1);
}
/* --- NAGŁÓWEK I NAWIGACJA (Styl uniwersalny) --- */
header {
position: fixed;
top: 0; left: 0; width: 100%;
background: linear-gradient(135deg, var(--bg-dark), var(--bg-darker));
display:flex; align-items:center; justify-content:space-between;
padding:1.35rem 2rem;
border-bottom: 1px solid rgba(185, 166, 123, 0.25);
z-index:1000;
}
.logo {
color: var(--accent);
font-size:1.2rem;
font-weight: bold;
margin-right: auto; /* Logo pcha wszystko na prawo */
}
/* Piętrowy logotyp marki (KANCELARIA NOTARIALNA / Notariusz …) */
.brand-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: 1.15;
}
.brand-subtitle {
font-family: 'Lato', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: #b9a67b;
white-space: nowrap;
}
.brand-title {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0;
padding: 0;
white-space: nowrap;
}
.header-controls {
display: flex;
align-items: center;
gap: 1.5rem;
}
.menu-toggle {
display:flex; /* Zawsze widoczny */
cursor:pointer;
flex-direction:column;
gap:5px;
z-index: 1100;
}
.menu-toggle span {
display:block;
height:3px;
width: 25px;
background:#b9a67b;
border-radius:2px;
transition: transform .3s, opacity .3s;
}
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
nav {
position:fixed; top:0; right:-100%;
height:100vh; width:280px;
background: var(--bg-dark);
display: flex;
flex-direction:column;
padding: 6rem 2rem 2rem;
gap:1.5rem;
transition: right .3s ease-in-out;
}
nav.open { right:0; }
nav a {
font-weight:600;
}
.header-eagle {
display: block; /* Zawsze widoczny */
}
.header-eagle img {
height: 45px;
width: auto;
object-fit: contain;
vertical-align: middle;
}
/* Logo: orzeł obok nazwy kancelarii (układ poziomy) */
.brand-block {
display: flex;
align-items: center;
gap: 0.85rem;
margin-right: auto;
}
.brand-block .logo {
margin-right: 0;
}
/* Duże monitory: poziome, widoczne menu zamiast hamburgera */
@media (min-width: 1200px) {
header .menu-toggle { display: none !important; }
header #mainNav {
position: static;
right: auto;
top: auto;
height: auto;
width: auto;
flex: 1 1 auto;
min-width: 0;
background: transparent;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding: 0;
gap: 1.1rem;
}
header #mainNav a {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
}
}
/* --- NOWE STYLE DLA ROZWIJANEGO MENU JĘZYKOWEGO --- */
.lang-switcher {
position: relative;
}
#lang-toggle-btn {
background: none;
border: 1px solid var(--accent);
color: var(--text-light);
padding: 0.2rem 0.5rem;
cursor: pointer;
font-family: var(--font-body);
font-weight: bold;
font-size: 0.9rem;
border-radius: 4px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 0.3rem;
}
#lang-toggle-btn:hover, #lang-toggle-btn.active {
background: var(--accent);
color: var(--bg-dark);
}
.arrow-down {
font-size: 0.7em;
transition: transform 0.3s;
}
#lang-toggle-btn.active .arrow-down {
transform: rotate(180deg);
}
.lang-options {
display: none;
position: absolute;
top: calc(100% + 5px);
right: 0;
background-color: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 4px 10px var(--shadow);
z-index: 1100;
min-width: 120px;
overflow: hidden;
}
.lang-options.show {
display: block;
}
.lang-options button {
display: block;
width: 100%;
background: none;
border: none;
color: var(--text-light);
padding: 0.6rem 1rem;
cursor: pointer;
text-align: left;
font-size: 0.9rem;
transition: all 0.3s;
}
.lang-options button:hover {
background-color: var(--accent);
color: var(--bg-dark);
}
.lang-options button.active {
background-color: var(--accent-hover);
color: var(--bg-dark);
font-weight: bold;
}
/* --- STYLIZACJA I ANIMACJA ETYKIETY WHATSAPP --- */
/* --- STYLIZACJA ETYKIETY WHATSAPP (WERSJA FINALNA) --- */
.whatsapp-callout {
position: absolute;
right: 75px;
top: 50%;
transform: translateY(-50%);
/* Zaktualizowane tło do animacji gradientu */
background: linear-gradient(100deg, transparent 20%, rgba(35, 55, 51, 0.3) 50%, transparent 80%),
var(--bg-white);
background-size: 200% 100%;
background-repeat: no-repeat;
color: var(--accent); /* <-- JEDYNA ZMIANA W TYM FRAGMENCIE */
padding: 8px 12px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
white-space: nowrap;
opacity: 0;
pointer-events: none;
/* ZAKTUALIZOWANA LINIA: teraz używa nowej animacji 'shine-effect' */
animation: fadeInCallout 1s ease-in-out 3s forwards, shine-effect 2.5s ease-in-out 4s infinite;
}
/* Strzałka dymku */
.whatsapp-callout::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent var(--bg-white);
}
@keyframes fadeInCallout {
from { opacity: 0; transform: translateY(-50%) translateX(10px); }
to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes shine-effect {
0% {
background-position: 150% 0;
}
100% {
background-position: -50% 0;
}
}
/* --- PŁYWAJĄCY PRZYCISK TELEFONU --- */
.phone-fab {
position: fixed;
width: 60px;
height: 60px;
/* Pozycja nad przyciskiem WhatsApp (40px od dołu + 60px wysokości WhatsApp + 10px odstępu) */
bottom: 110px;
right: 40px;
background-color: var(--accent); /* Beżowy kolor ze strony */
color: var(--bg-dark); /* Ciemny kolor dla ikonki w środku */
border-radius: 50%;
text-align: center;
box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.phone-fab:hover {
transform: scale(1.1);
background-color: var(--accent-hover); /* Jaśniejszy beż po najechaniu */
}
/* Styl ikonki wewnątrz przycisku */
.phone-fab .icon {
width: 30px;
height: 30px;
fill: var(--bg-dark); /* Ciemny kolor wypełnienia ikonki */
margin: 0; /* Resetujemy margines, żeby była na środku */
}
/* Usunięcie podkreślenia z linku */
.phone-fab::after {
display: none;
}
/* --- HERO SECTION --- */
.modern-bg {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
overflow: hidden;
}
.modern-bg-img {
width: 100vw;
height: 100vh;
object-fit: cover;
object-position: center 15%;
transition: transform 2.5s cubic-bezier(.68,-0.55,.27,1.55);
animation: heroZoom 12s ease-in-out infinite alternate;
}
@keyframes heroZoom {
0% { transform: scale(1); }
100% { transform: scale(1.07); }
}
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 100vh;
padding: 4rem 52% 4rem 2rem;
color: #ffffff;
overflow: hidden;
}
/* MODIFICATION: Changed to a slider container */
.hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden; /* Hide parts of slides that are off-screen */
}
.hero-bg-img::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
}
/* 3. Kontener na zdjęcie umieszczamy na dole */
.hero-bg-img {
position: static;
height: 60vh; /* Zwiększamy wysokość zdjęcia, aby dać więcej miejsca na kadr */
width: 100%;
order: 2; /* Kolejność: 2 (na dole) */
background-image: none; /* Czyścimy tło CSS, bo użyjemy ![]()
*/
}
/* 4. Przywracamy ![]()
i PRECYZYJNIE KADRUJEMY ZDJĘCIE */
.hero-slide img {
object-position: 80% 20%;
}
/* --- GENERAL SECTIONS --- */
section {
padding: 4rem 1rem;
border-top:1px solid var(--border);
overflow: hidden;
}
@media(min-width: 768px) {
section {
padding: 4rem 5vw; /* Zmieniono padding dla wszystkich sekcji */
}
}
section h2 {
font-size: 40px; /* Zmiana rozmiaru czcionki */
margin-bottom:2rem;
text-align:center;
}
/* --- ANIMACJA LINII POD NAGŁÓWKAMI --- */
section h2 {
position: relative; /* Niezbędne do pozycjonowania pseudo-elementu */
padding-bottom: 1rem; /* Tworzy miejsce na linię pod tekstem */
}
section h2::after {
content: '';
position: absolute;
bottom: 0;
right: 50%;
width: 100px;
height: 3px;
background-color: var(--accent);
transform-origin: left;
transform: translateX(50%) scaleX(0);
/* ZMIANA: Czas trwania 2.5s, opóźnienie 0.6s */
transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1) 0.6s;
}
/* Kiedy sekcja staje się widoczna, animujemy skalę do pełnej szerokości */
.animated-content.visible h2::after {
/* Rozciągamy linię, co wizualnie przesuwa ją w lewo */
transform: translateX(50%) scaleX(1);
}
/* --- SECTION STYLING BY COLOR --- */
#o-kancelarii, #blog, #kontakt {
background: var(--bg-light-green);
color: var(--text-dark);
}
#o-kancelarii h2, #blog h2, #kontakt h2 {
color: var(--bg-darker);
}
#uslugi, #przydatne-linki, #faq {
background: var(--bg-dark);
color: var(--text-light);
}
#uslugi h2, #przydatne-linki h2, #faq h2 {
color: var(--accent);
}
#informacje-praktyczne {
background: var(--bg-white);
}
#informacje-praktyczne h2 {
color: var(--accent);
}
#informacje-praktyczne p {
color: var(--text-dark);
}
#kontakt .contact-info {
font-size: 1.15rem;
line-height: 1.8;
background: var(--bg-darker);
color: #f0f0f0;
padding: 2rem 2.5rem;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
position: relative;
overflow: hidden;
}
#kontakt .contact-info::before {
content: '';
position: absolute;
right: -20px;
bottom: -20px;
width: 280px;
height: 320px;
background-image: url('orzel.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.06;
pointer-events: none;
}
#kontakt .contact-info p {
font-size: 1.15rem;
margin-bottom: 0.6rem;
color: #f0f0f0;
}
#kontakt .contact-info a {
color: var(--accent);
font-size: 1.15rem;
text-decoration: none;
transition: color 0.2s;
}
#kontakt .contact-info a:hover {
color: #d4c28a;
}
#kontakt .contact-info [id^="contact-email"] a {
text-decoration: underline;
}
/* === Kopiowanie jednym kliknięciem === */
.nw-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem;
height: 1.55rem;
margin-left: .45rem;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--accent, #b9a67b);
opacity: .55;
cursor: pointer;
vertical-align: middle;
position: relative;
transition: background .18s, opacity .18s, color .18s, transform .12s;
}
.nw-copy-btn:hover,
.nw-copy-btn:focus-visible {
background: rgba(185,166,123,.14);
opacity: 1;
outline: none;
}
.nw-copy-btn svg { width: .95rem; height: .95rem; pointer-events: none; }
.nw-copy-btn .nw-copy-ok { display: none; }
.nw-copy-btn.is-copied { color: #2e9e5b; opacity: 1; }
.nw-copy-btn.is-copied .nw-copy-ic { display: none; }
.nw-copy-btn.is-copied .nw-copy-ok { display: block; }
.nw-copy-btn::after {
content: attr(data-hint);
position: absolute;
bottom: 135%;
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #1f3a32;
color: #f0ead8;
font-size: .72rem;
line-height: 1;
padding: .35rem .55rem;
border-radius: 6px;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
opacity: 0;
pointer-events: none;
transition: opacity .15s, transform .15s;
z-index: 5;
}
.nw-copy-btn:hover::after,
.nw-copy-btn:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.nw-copy-btn.is-copied::after {
content: attr(data-copied);
background: #2e9e5b;
color: #fff;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Stopka — przyciski w jednej linii z danymi, nie zawijają */
footer .ft-nr, footer .ft-line { display: inline; white-space: nowrap; }
.nw-inline { display: inline-flex; align-items: center; white-space: nowrap; }
.nw-inline .nw-copy-btn { margin-left: .25rem; }
footer .nw-ft-nip { display: inline !important; }
footer .nw-ft-nip .nw-num { white-space: nowrap; }
/* Cała dana klikalna = większy cel */
.nw-copyable { border-radius: 5px; transition: color .18s; }
.nw-copyable:hover { color: var(--accent, #b9a67b); }
/* Mobile: brak hovera — pokaż, że ikona kopiuje */
@media (hover: none) {
.nw-copy-btn { opacity: 1; }
.nw-copy-btn::after { display: none; }
}
#kontakt .contact-info span {
font-size: 1.15rem;
color: #f0f0f0;
}
#kontakt .contact-info strong {
color: var(--accent);
}
#kontakt .contact-info .icon {
fill: var(--accent);
stroke: var(--accent);
}
#kontakt .contact-info .location-guide {
color: #ccc !important;
font-size: 1.05rem !important;
}
#kontakt .contact-info .location-guide strong {
color: #f0f0f0;
}
/* Złoty kolor dla nagłówka "O mnie" */
#o-mnie h2 {
color: var(--accent);
}
.diamond {
display:inline-block;
color: var(--accent);
font-size:1.2rem;
line-height:1;
margin-right:.5em;
vertical-align:middle;
}
/* --- BLOG SECTION --- */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.blog-post {
background: var(--bg-white);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.blog-post:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.blog-post h3 {
color: var(--bg-darker);
margin-bottom: 0.5rem;
font-size: 1.4rem;
}
.blog-post-meta {
font-size: 0.9rem;
color: #777;
margin-bottom: 1rem;
}
.blog-post p {
color: var(--text-dark);
text-align: left;
flex-grow: 1;
}
.blog-post-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 1rem;
display: block;
}
.blog-post .read-more {
color: var(--accent);
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: auto;
cursor: pointer;
}
.blog-post .read-more:hover {
color: var(--accent-hover);
}
/* --- BLOG: dopracowanie wizualne (nowe reguły, nadpisują powyższe) --- */
/* 1. Maksymalnie 3 czytelne kolumny, wyśrodkowana siatka */
.blog-grid {
grid-template-columns: 1fr;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.blog-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Wyraźniejsze krawędzie karty + płynny ruch */
.blog-post {
border: 1px solid rgba(35, 55, 51, 0.08);
overflow: hidden;
}
/* Delikatny zoom zdjęcia na hover (kadr przycięty) */
.blog-post picture {
display: block;
overflow: hidden;
border-radius: 4px;
margin-bottom: 1rem;
}
.blog-post picture .blog-post-image {
margin-bottom: 0;
transition: transform 0.4s ease;
}
.blog-post:hover picture .blog-post-image {
transform: scale(1.06);
}
/* 4. Meta: badge kategorii + data osobno */
.blog-post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.blog-post-category {
display: inline-block;
background: var(--bg-darker);
color: #ffffff;
padding: 0.28em 0.85em;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.4;
}
.blog-post-date {
color: #888;
font-size: 0.82rem;
font-weight: 500;
}
/* 2. Wyrównanie wysokości: tytuł 2 linie, zajawka 3 linie */
.blog-post h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.64rem; /* 2 wiersze przy 1.4rem / lh 1.3 */
line-height: 1.3;
}
.blog-post p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.8em; /* 3 wiersze, stała linia „Czytaj dalej" */
flex-grow: 0;
margin-bottom: 1rem;
}
/* --- BLOG MODAL --- */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
animation: fadeIn 0.5s;
}
.modal-content {
background-color: var(--bg-white);
color: var(--text-dark);
margin: 5% auto;
padding: 2rem;
border: 1px solid #888;
width: 80%;
max-width: 900px;
border-radius: 8px;
position: relative;
animation: slideIn 0.5s;
}
.modal-content h3 {
color: var(--bg-darker);
font-size: 2rem;
margin-bottom: 1.5rem;
}
.modal-content h4 {
color: var(--accent);
font-size: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.modal-content p, .modal-content li {
color: var(--text-dark);
text-align: left;
}
.close-button {
color: #aaa;
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 28px;
font-weight: bold;
transition: color 0.3s;
}
.close-button:hover,
.close-button:focus {
color: var(--text-dark);
text-decoration: none;
cursor: pointer;
}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideIn { from {top: -100px; opacity: 0;} to {top: 0; opacity: 1;} }
/* ============================================= */
/* === NOWOCZESNA SEKACJA FAQ - NOWE STYLE === */
/* ============================================= */
/* Główny kontener dla wszystkich pytań */
.faq-container {
max-width: 800px; /* Ograniczenie szerokości dla lepszej czytelności */
margin: 2rem auto 0; /* Wyśrodkowanie i margines górny */
}
/* Styl pojedynczego elementu FAQ — minimalizm premium:
bez pudełka i cienia, jedynie subtelna linia rozdzielająca. */
.faq-item {
background-color: transparent;
border: none;
border-bottom: 1px solid #e8e4da;
border-radius: 0;
margin-bottom: 0;
transition: all 0.3s ease;
overflow: hidden; /* Ważne dla animacji */
}
/* Efekt po najechaniu myszką — delikatny, bez ciężkiego cienia */
.faq-item:hover {
background-color: rgba(185, 166, 123, 0.05);
}
/* Nagłówek pytania (element ) */
.faq-item summary {
font-size: 1.2rem;
font-weight: 700; /* Używamy 700 zamiast 'bold' dla spójności */
color: var(--bg-darker);
padding: 1.5rem 0.75rem;
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
list-style: none; /* Ukrycie domyślnego znacznika */
transition: all 0.3s ease;
}
/* Subtelne przesunięcie tytułu na hover — elegancko, bez skoków */
.faq-item summary:hover {
padding-left: 1.1rem;
color: var(--accent);
}
/* Usunięcie domyślnej strzałki/znacznika w przeglądarkach WebKit */
.faq-item summary::-webkit-details-marker {
display: none;
}
/* Ikona "+" line-art — cienka, delikatna, w kolorze złota */
.faq-item summary::after {
content: '+';
font-size: 1.9rem;
color: var(--accent);
font-weight: 200;
line-height: 1;
margin-left: 1rem;
transition: all 0.3s ease;
}
/* Styl ikony, gdy pytanie jest rozwinięte (płynny obrót w "×") */
.faq-item[open] > summary::after {
transform: rotate(45deg);
color: var(--accent-hover);
}
/* Styl otwartego pytania — bez ciężkiego tła, tylko delikatny ton */
.faq-item[open] > summary {
border-bottom: none;
background-color: transparent;
color: var(--accent);
}
/* Kontener na odpowiedź - kluczowy dla animacji */
.faq-item .answer-content {
display: grid;
grid-template-rows: 0fr; /* Stan zamknięty - wysokość 0 */
transition: grid-template-rows 0.4s ease-in-out;
}
/* Styl, gdy odpowiedź jest rozwinięta */
.faq-item[open] .answer-content {
grid-template-rows: 1fr; /* Stan otwarty - pełna wysokość */
}
/* Wewnętrzny div odpowiedzi - kluczowy dla animacji */
.faq-item .answer-content > div {
overflow: hidden;
}
/* Stylizacja tekstu odpowiedzi */
.faq-item .answer-text {
padding: 1.5rem;
font-size: 1rem;
line-height: 1.7;
color: #444; /* Ciemnoszary dla lepszego kontrastu */
}
/* Poprawka dla justowania tekstu w odpowiedziach */
.faq-item .answer-text p,
.faq-item .answer-text li {
text-align: left;
color: #444;
}
/* Poprawka dla przycisków w odpowiedziach */
.faq-item .answer-text a.shine-button {
color: var(--bg-darker);
}
/* --- SEKCJA GEO ANSWER (koszty notarialne) --- */
.geo-answer-section {
background-color: var(--bg-light-green);
color: var(--text-dark);
}
.geo-answer-section h2 {
color: var(--bg-darker);
}
.geo-box {
background: var(--bg-white);
border-left: 4px solid var(--accent);
padding: 2rem 2.5rem;
border-radius: 6px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
margin-bottom: 2rem;
}
.geo-box h3 {
font-family: 'Playfair Display', serif;
color: var(--bg-darker);
font-size: 1.4rem;
margin-top: 0;
margin-bottom: 1rem;
}
.geo-box p {
color: var(--text-dark);
line-height: 1.7;
margin-bottom: 1rem;
}
.geo-box ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.geo-box ul li {
padding: 0.5rem 0 0.5rem 1.5rem;
position: relative;
color: var(--text-dark);
}
.geo-box ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
/* --- SERVICE HIGHLIGHT (najem okazjonalny itp.) --- */
.service-highlight {
background: var(--bg-white);
border-left: 4px solid var(--accent);
padding: 2rem 2.5rem;
border-radius: 6px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
margin-bottom: 2rem;
}
.service-highlight h3 {
font-family: 'Playfair Display', serif;
color: var(--bg-darker);
font-size: 1.4rem;
margin-top: 0;
margin-bottom: 1rem;
}
.service-highlight p {
color: var(--text-dark);
line-height: 1.7;
margin-bottom: 1rem;
}
.service-highlight ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.service-highlight ul li {
padding: 0.6rem 0 0.6rem 1.5rem;
position: relative;
color: var(--text-dark);
line-height: 1.6;
}
.service-highlight ul li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
/* --- SEKCJA CENNIK --- */
#cennik {
background-color: var(--bg-light-green);
color: var(--text-dark);
}
#cennik h2 {
color: var(--bg-darker);
}
.price-list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
text-align: center;
}
.price-item {
background: var(--bg-white);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
border-top: 4px solid var(--accent);
}
.price-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.price-item h3 {
color: var(--bg-darker);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.price-value {
font-size: 2.5rem;
font-weight: bold;
color: var(--accent);
margin-bottom: 0.5rem;
}
.price-netto {
font-size: 1rem;
font-weight: normal;
color: #777;
}
.price-description {
font-size: 0.9rem;
color: #555;
min-height: 40px;
}
.cennik-info {
text-align: center;
margin-top: 3rem;
font-size: 0.9rem;
color: #666;
}
/* --- CONTACT SECTION --- */
#kontakt .contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media(min-width: 992px) {
#kontakt .contact-grid {
grid-template-columns: 1fr 1fr;
}
#kontakt .map-container {
grid-column: 1 / -1;
}
}
#kontakt .map-container {
width: 100%;
height: 400px;
border-radius: 8px;
overflow: hidden;
margin-top: 2rem;
border: 2px solid var(--accent);
}
#kontakt .map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
#kontakt .form-container {
background-color: var(--bg-white);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 0.01rem;
}
.form-group label {
display: block;
margin-bottom: .5rem;
color: var(--text-dark);
font-weight: bold;
}
.form-group input, .form-group textarea {
width: 100%;
padding: .75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: var(--font-body); /* Zmieniona czcionka */
font-size: 1rem;
background-color: #f9f9f9;
}
.form-group textarea {
resize: vertical;
min-height: 150px;
}
.form-group button {
width: 100%;
padding: .75rem;
background-color: var(--accent);
color: var(--bg-darker);
border: none;
border-radius: 4px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: background-color .3s;
font-family: var(--font-header);
}
.form-group button:hover {
background-color: var(--accent-hover);
}
#form-status {
margin-top: 1rem;
text-align: center;
font-weight: bold;
}
/* --- ANIMATIONS --- */
.animated-content {
opacity: 0;
transition: opacity 1s ease-out, transform 1s ease-out;
}
.animated-content.from-left {
transform: translateX(-50px);
}
.animated-content.from-right {
transform: translateX(50px);
}
.animated-content.visible {
opacity: 1;
transform: translateX(0);
}
@keyframes pulsate {
0% { transform: scale(1); }
50% { transform: scale(1.05); color: var(--accent-hover); }
100% { transform: scale(1); }
}
.pulsating {
animation: pulsate 1.5s ease-in-out;
}
#kontakt .contact-info p {
transition: transform 0.3s;
}
/* old footer styles removed - using .site-footer now */
.whatsapp-fab {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
z-index: 1000;
transition: transform 0.3s;
}
.whatsapp-fab:hover {
transform: scale(1.1);
}
.whatsapp-fab svg {
width: 100%;
height: 100%;
/* Nowy, poprawny cień dopasowany do kształtu ikony */
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}
/* Usunięcie podkreślenia z linku */
.whatsapp-fab::after {
display: none;
}
/* --- STYLIZACJA ETYKIETY WHATSAPP (WERSJA FINALNA) --- */
.whatsapp-callout {
position: absolute;
right: 75px;
top: 50%;
transform: translateY(-50%);
background-color: var(--bg-white);
color: var(--text-dark);
padding: 8px 12px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
white-space: nowrap;
opacity: 0;
pointer-events: none;
/* ZAKTUALIZOWANA LINIA: dodana nowa animacja po przecinku */
animation: fadeInCallout 1s ease-in-out 3s forwards, glow-callout 3s ease-in-out 4s infinite;
}
.whatsapp-callout::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent var(--bg-white);
}
@keyframes fadeInCallout {
from { opacity: 0; transform: translateY(-50%) translateX(10px); }
to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* --- ZMIANA LOGO NA WERSJĘ MOBILNĄ --- */
@media (max-width: 768px) {
/* Logo pokazuje wyłącznie właściwą identyfikację marki
(KANCELARIA NOTARIALNA / Notariusz Bartłomiej Wolak).
Zbędny, krótki tekst zastępczy został usunięty. */
.logo.lang-pl::before,
.logo.lang-en::before,
.logo.lang-ua::before {
content: none;
}
/* Zmniejszamy logo, aby zmieścił się przycisk menu (hamburger). */
header {
padding: 1rem 1rem;
gap: 0.5rem;
}
.brand-subtitle {
font-size: 9px;
letter-spacing: 2px;
}
.brand-title {
font-size: 16px;
white-space: normal;
}
.header-controls {
gap: 0.75rem;
}
/* Gwarantujemy widoczność przycisku menu na telefonie. */
.menu-toggle {
display: flex !important;
flex: 0 0 auto;
}
}
/* --- POPRAWKA WYGLĄDU SEKCJI HERO NA TELEFONACH --- */
@media (max-width: 767px) {
/* 1. Zmieniamy ca�� sekcj� na uk�ad pionowy (kolumnowy) - WY��CZONE DLA EFEKTU PARALLAX */
.hero {
/* flex-direction: column; */
min-height: 100vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* 2. Stylujemy blok tekstowy z efektem GLASSMORPHISM */
.hero-text {
position: relative;
width: 90%; /* Nie na ca�� szeroko��, �eby by�o wida� efekt karty */
max-width: 400px;
margin: 0 auto; /* Wy�rodkowanie */
/* Efekt mro�onego szk�a */
background: rgba(35, 55, 51, 0.65); /* Ciemna ziele� firmowa, ale p�przezroczysta */
backdrop-filter: blur(12px); /* Rozmycie t�a pod spodem */
-webkit-backdrop-filter: blur(12px); /* Dla Safari */
border: 1px solid rgba(255, 255, 255, 0.15); /* Delikatna ramka */
border-radius: 20px; /* Zaokr�glone rogi */
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Cie� pod kart� */
padding: 2rem 1.5rem;
text-align: center;
z-index: 2;
margin-top: 80px; /* Odst�p od g�ry */
pointer-events: auto !important;
}
/* Poprawiamy wygl�d tekstu wewn�trz */
.hero-text h1 {
font-size: 1.8rem; /* Nieco mniejszy dla lepszego dopasowania */
text-align: center;
color: #ffffff;
text-shadow: none; /* Cie� nie jest ju� potrzebny przy ciemnym tle */
margin-bottom: 1rem;
}
.hero-text p {
color: #e0e0e0; /* Jasnoszary, czytelny */
text-shadow: none;
font-size: 1rem;
line-height: 1.5;
}
/* Poprawiamy widoczno�� danych kontaktowych na ciemnym szkle */
.hero-text .contact-details p {
color: #f0f0f0; /* Prawie bia�y */
}
.hero-text .contact-details strong {
color: #ffffff; /* Bia�y */
}
.hero-text .contact-details a {
color: #ffffff; /* Bia�y link */
text-decoration: underline;
}
.hero-text .contact-details .icon {
fill: #c9a96e; /* Z�ota ikona */
}
/* Poprawiamy widoczno�� informacji o najmie okazjonalnym */
.hero-text .occasional-rental-info p {
color: #e0e0e0;
}
.hero-text .occasional-rental-info strong {
color: #c9a96e !important; /* Z�oty */
}
/* 3. Stylujemy blok ze zdj�ciem - WY��CZONE, OBS�UGIWANE PRZEZ G�RNE MEDIA QUERY */
/* .hero-bg-img { ... } */
/* --- GLASSMORPHISM DLA SEKCJI "O MNIE" NA TELEFONIE --- */
#o-mnie {
background: rgba(35, 55, 51, 0.85); /* Mocniejsza ciemna ziele� */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #e0e0e0;
padding-top: 3rem;
padding-bottom: 3rem;
margin-top: 0; /* Usuni�cie ewentualnych margines�w */
}
#o-mnie h2 {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#o-mnie h3 {
color: #c9a96e; /* Z�oty nag��wek h3 */
}
#o-mnie p, #o-mnie li {
color: #f0f0f0;
line-height: 1.6;
}
#o-mnie blockquote {
color: #ffffff;
border-left: 4px solid #c9a96e;
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
font-style: italic;
}
#o-mnie strong {
color: #fff;
}
/* --- GLASSMORPHISM DLA SEKCJI "DOKUMENTY" (#informacje-praktyczne) NA TELEFONIE --- */
#informacje-praktyczne {
background: rgba(35, 55, 51, 0.85); /* Ciemna ziele� */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #e0e0e0;
padding-top: 3rem;
padding-bottom: 3rem;
}
#informacje-praktyczne h2 {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#informacje-praktyczne p {
color: #f0f0f0 !important;
}
/* Stylizacja akordeon�w (FAQ items) w tej sekcji na ciemnym tle */
#informacje-praktyczne .faq-item {
background: rgba(255, 255, 255, 0.05); /* Bardzo delikatne t�o dla elementu */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#informacje-praktyczne summary {
color: #c9a96e; /* Z�ote nag��wki rozwijane */
font-weight: 600;
}
#informacje-praktyczne summary::after {
filter: invert(1) sepia(1) saturate(5) hue-rotate(0deg); /* Zmiana koloru strza�ki na jasny/z�oty */
}
#informacje-praktyczne .answer-text {
color: #e0e0e0;
}
#informacje-praktyczne li {
color: #e0e0e0;
}
#informacje-praktyczne strong {
color: #fff;
}
}
/* --- KOD NAPRAWCZY DLA WERSJI KOMPUTEROWEJ --- */
@media (min-width: 768px) {
/* 1. Przywracamy podstawowe ustawienia dla sekcji hero na desktopie */
.hero {
flex-direction: row; /* Układ z powrotem poziomy */
justify-content: flex-start; /* Wyrównanie tekstu do lewej */
min-height: 100vh;
}
/* 2. Przywracamy pozycjonowanie obrazka jako tła */
.hero-bg-img {
position: absolute; /* KLUCZOWE: Zdjęcie znowu jest tłem */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
order: 0; /* Reset kolejności */
}
/* 4. Resetujemy styl bloku tekstowego do wersji desktopowej */
.hero-text {
position: relative;
z-index: 1;
width: auto;
max-width: 600px;
height: auto;
background: transparent; /* Tło tekstu znowu przezroczyste */
padding: 0;
margin: 0 5vw; /* Oryginalny margines */
text-align: left;
order: 0; /* Reset kolejności */
}
/* --- FROSTED-GLASS DLA SEKCJI "O MNIE" NA DESKTOPIE --- */
/* Sekcja rozci�ga si� od kraw�dzi ekranu do kraw�dzi ekranu (edge-to-edge)
i przylega bez odst�pu do sekcji kalkulatora powy�ej. */
#o-mnie {
width: 100vw;
/* Center the full-viewport element inside the normal flow without causing horizontal scroll */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0; /* Przylega do sekcji powy�ej */
background: rgba(35, 55, 51, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #eaeaea;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
border-radius: 0; /* Bez zaokr�gle�, by dosi�ga� kraw�dzi */
box-shadow: none; /* Usu� du�y cie� pomagaj�cy p�ynnemu po��czeniu z sekcj� powy�ej */
}
/* Zapewnij wewn�trzne marginesy tre�ci, bez wp�ywu na szeroko�� elementu */
#o-mnie .section-content {
background: transparent;
padding: 0 2rem;
max-width: 1100px;
margin: 0 auto;
}
/* Usu� odst�p pod kalkulatorem, aby #o-mnie przylega�o bez przerwy */
#kalkulator-notarialny-embedded { margin-bottom: 0; }
.hero-text h1 {
font-size: 48px;
text-align: left;
}
}
.zdjecie-w-sekcji {
float: left;
width: 280px;
height: auto;
margin: 5px 30px 15px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid var(--border);
}
/* --- ANIMACJA PRZYCISKU Z POŁYSKIEM --- */
.shine-button {
/* Zachowujemy style z poprzedniej wersji */
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
color: var(--bg-darker);
border-radius: 4px;
font-weight: bold;
text-decoration: none;
/* Nowe style do animacji */
position: relative;
overflow: hidden;
background-color: var(--accent);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
background-repeat: no-repeat;
background-size: 200% 100%;
background-position: -200% 0;
animation: shine-effect-button 3s linear infinite 2s;
}
@keyframes shine-effect-button {
to {
background-position: 200% 0;
}
}
/* --- STYL GŁÓWNEGO PRZYCISKU W SEKCJI HERO --- */
.btn-primary {
display: inline-block;
margin-top: 1.5rem;
padding: 12px 24px;
background-color: var(--accent);
color: var(--bg-darker);
border-radius: 4px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
text-align: center;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.btn-primary:hover {
background-color: var(--accent-hover);
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* Wyłączenie animacji podkreślenia dla tego przycisku */
a.btn-primary::after {
display: none;
}
/* --- KOLOR GŁÓWNEGO NAGŁÓWKA --- */
.hero-text h1 {
color: var(--accent);
}
/* --- STYLE DLA NOWEGO FORMULARZA KONTAKTOWEGO --- */
.form-group select {
width: 100%;
padding: .75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: var(--font-body);
font-size: 1rem;
background-color: #f9f9f9;
}
.hidden-field {
display: none;
}
/* --- STYLE DLA ROZBUDOWANEGO FORMULARZA KONTAKTOWEGO --- */
.form-group select, .form-group input[type="date"] {
width: 100%; padding: .75rem; border: 1px solid #ccc; border-radius: 4px; font-family: var(--font-body); font-size: 1rem; background-color: #f9f9f9; color: var(--text-dark);
}
.hidden-field { display: none; }
.honeypot-field { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
#microGuarantees {
display: flex; justify-content: space-around; text-align: center; font-size: 0.9rem; color: var(--text-dark); background-color: #f0f0f0; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem;
}
#microGuarantees span { display: inline-block; }
/* NOWA, NIEZAWODNA STYLIZACJA CHECKBOXÓW */
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
text-align: left;
font-weight: normal;
}
.checkbox-label input[type="checkbox"] {
margin-right: 12px; /* Odstęp między polem a tekstem */
flex-shrink: 0;
width: 1.2em; /* Powiększenie checkboxa */
height: 1.2em;
}
/* --- STYLE DLA DODATKOWEGO PRZYCISKU W SEKCJI HERO --- */
.hero-buttons-container {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap; /* Pozwala przyciskom przenieść się niżej na małych ekranach */
gap: 1rem; /* Odstęp między przyciskami */
align-items: center;
}
@media (max-width: 600px) {
.hero-buttons-container {
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
}
.hero-buttons-container a,
.hero-buttons-container button {
width: 100%;
min-width: 0;
box-sizing: border-box;
font-size: 1.05rem;
text-align: center;
pointer-events: auto !important;
}
}
.btn-secondary {
/* Podstawowe style */
display: inline-block;
padding: 10px 24px;
border-radius: 4px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: none; /* Usunięta ramka */
/* Style do animacji połysku */
position: relative;
overflow: hidden;
/* Kolorystyka - zielony przycisk */
background-color: #2E8B57; /* Atrakcyjny zielony */
color: #ffffff; /* Biały tekst dla kontrastu */
/* Gradient do animacji połysku */
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
background-repeat: no-repeat;
background-size: 200% 100%;
background-position: -200% 0;
/* Podpięcie gotowej animacji */
animation: shine-effect-button 3s linear infinite 2s;
}
btn-secondary:hover {
background-color: #3CB371; /* Jaśniejszy zielony */
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Wyłączenie animacji podkreślenia dla drugiego przycisku */
a.btn-secondary::after {
display: none;
}
/* OSTATECZNA WERSJA - Stylizacja bloku informacji o najmie okazjonalnym */
.occasional-rental-info {
background-color: #ffffff !important; /* GWARANTOWANE BIAŁE TŁO */
color: var(--text-dark);
padding: 1.25rem;
border-radius: 6px;
border-left: 4px solid var(--accent);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
text-align: left;
margin-top: 1.5rem;
}
.occasional-rental-info p {
color: var(--text-dark);
text-shadow: none;
margin-bottom: 0;
}
.occasional-rental-info strong {
color: var(--bg-dark);
}
.occasional-rental-info a {
color: var(--accent);
font-weight: 700;
text-decoration: underline;
}
.occasional-rental-info a::after {
display: none;
}
/* ================================================= */
/* === NOWOCZESNA SEKCJA "PRZYDATNE LINKI" - STYLE === */
/* ================================================= */
/* Kontener siatki dla kart z linkami */
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
/* Styl pojedynczej karty */
.link-card {
background-color: var(--bg-white);
color: var(--text-dark);
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 2rem;
display: flex;
flex-direction: column;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.link-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* Styl ikony */
.link-card-icon {
margin: 0 auto 1.5rem;
background-color: var(--bg-light-green);
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.link-card-icon svg {
width: 32px;
height: 32px;
stroke: var(--accent); /* Kolor ikony */
stroke-width: 1.5;
}
/* Tytuł karty */
.link-card h3 {
color: var(--bg-darker);
font-size: 1.4rem;
margin-bottom: 0.75rem;
}
/* Opis na karcie */
.link-card p {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
flex-grow: 1; /* Sprawia, że opis wypełnia przestrzeń */
text-align: center;
}
/* Przycisk na karcie */
.link-card-button {
margin-top: 1.5rem;
font-weight: 700;
color: var(--accent);
text-decoration: none;
display: inline-block;
}
.link-card-button::after {
display: none; /* Wyłączenie animacji podkreślenia */
}
.link-card-button:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* Dodatkowe style dla list linków wewnątrz kart */
.link-card-links {
margin-top: 1rem;
padding-left: 0;
list-style: none;
text-align: center;
}
.link-card-links li {
margin-bottom: 0.5rem;
}
.link-card-links a {
font-weight: 700;
color: var(--accent);
text-decoration: none;
}
.link-card-links a:hover {
text-decoration: underline;
color: var(--accent-hover);
}
/* Ustawienie jasnego tła dla całej sekcji */
#przydatne-linki {
background-color: var(--bg-light-green);
}
/* Zapewnienie, że nagłówek będzie ciemny na jasnym tle */
#przydatne-linki h2 {
color: var(--bg-darker);
}
/* Stylizacja złotej linii pod nagłówkiem (dla spójności) */
#przydatne-linki h2::after {
background-color: var(--accent);
}
/* ======================================================= */
/* === NOWOCZESNA SEKCJA "INFORMACJE PRAKTYCZNE" - STYLE === */
/* ======================================================= */
.tabs {
width: 100%;
margin-top: 2rem;
}
.tabs-container {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #ccc;
}
.tab-button {
padding: 1rem 1.5rem;
cursor: pointer;
border: none;
background-color: transparent;
border-bottom: 3px solid transparent;
font-family: var(--font-header);
font-size: 1.1rem;
color: #888;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
margin-bottom: -1px; /* Aby dolna krawędź nachodziła na krawędź kontenera */
}
.tab-button svg {
width: 20px;
height: 20px;
stroke: #888;
transition: stroke 0.3s ease;
}
.tab-button:hover {
color: var(--text-dark);
background-color: #f5f5f5;
}
.tab-button:hover svg {
stroke: var(--text-dark);
}
.tab-button.active {
color: var(--accent);
border-bottom: 3px solid var(--accent);
background-color: #fff;
}
.tab-button.active svg {
stroke: var(--accent);
}
.tabs-content {
background-color: #fff;
padding: 2rem;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 8px 8px;
}
.tab-panel {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-panel.active {
display: block;
}
.tab-panel h3 {
font-size: 1.5rem;
color: var(--bg-darker);
margin-top: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #eee;
}
.tab-panel h3:first-child {
margin-top: 0;
}
.tab-panel ul {
list-style-position: outside;
padding-left: 1.5rem;
margin-left: 0;
}
.tab-panel ul li {
padding-left: 0.5rem;
text-indent: 0;
text-align: left;
color: #333;
margin-bottom: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================= */
/* === NOWOCZESNA SEKCJA USŁUGI - KAFELKI (POPRAWIONA) === */
/* ============================================= */
.service-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.service-card {
background: rgba(255, 255, 255, 0.03); /* Lepszy kontrast */
border: 1px solid var(--border);
border-top: 4px solid var(--accent);
padding: 2rem 1.5rem;
border-radius: 8px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
color: var(--text-light);
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
border-color: var(--accent-hover);
}
.service-card::after {
display: none;
}
.service-card h3 {
color: var(--accent);
font-size: 1.6rem;
margin-bottom: 0.75rem;
}
.service-card p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
text-align: left;
margin-bottom: 0;
flex-grow: 1;
}
.service-details-container {
margin-top: 4rem;
}
.service-details-section {
padding-top: 4rem;
margin-top: -4rem; /* Ujemny margines, aby kotwica działała idealnie */
padding-bottom: 2rem;
border-bottom: 1px solid rgba(185, 166, 123, 0.2);
margin-bottom: 2rem;
}
.service-details-section:last-child {
border-bottom: none;
}
.service-details-section h3 {
font-size: 2rem;
color: var(--accent);
margin-bottom: 1.5rem;
}
.service-details-section ul {
list-style: none;
padding-left: 0;
columns: 2;
column-gap: 2.5rem;
}
.service-details-section ul li {
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
text-align: left;
}
.service-details-section ul li::before {
content: '♦';
color: var(--accent);
position: absolute;
left: 0;
top: 0;
}
@media (max-width: 768px) {
.service-details-section ul {
columns: 1;
}
}
/* --- Modyfikacja kolorystyki sekcji Usługi --- */
#uslugi .faq-item summary::after {
color: var(--bg-darker);
}
/* ============================================= */
/* === ULEPSZONA SEKCJA "O MNIE" (WERSJA OSTATECZNA) === */
/* ============================================= */
#o-mnie .section-content {
max-width: 800px;
margin: 0 auto;
font-size: 1.25rem;
line-height: 1.9;
}
#o-mnie h3 {
font-size: 1.8rem;
color: var(--accent);
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.about-me-quote {
border-left: 4px solid var(--accent);
padding-left: 1.5rem;
margin: 2rem 0;
font-size: 1.2rem;
font-style: italic;
color: var(--text-light);
}
.key-values-list {
list-style: none !important; /* WAŻNE: Usuwa domyślne kropki */
padding-left: 0 !important;
margin-top: 2rem;
}
.key-values-list li {
padding-left: 2rem;
position: relative;
margin-bottom: 0.75rem;
font-size: 1.1rem;
color: var(--text-light);
text-align: left;
text-indent: 0;
}
/* TA CZĘŚĆ ODPOWIADA ZA DODANIE ZŁOTYCH ZNACZNIKÓW */
.key-values-list li::before {
content: '✓';
color: var(--accent);
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
.text-shine-gold {
/* Kolor zapasowy dla starszych przeglądarek */
color: var(--accent);
/* Efekt mieniącego się gradientu */
background: linear-gradient(90deg, var(--accent) 30%, #fff 50%, var(--accent) 70%);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
/* Użycie istniejącej animacji */
animation: text-shine 5s linear infinite;
}
/* --- DOCELOWY STYL PRZYCISKU W FORMULARZU --- */
#kontakt .form-group button {
display: block;
width: auto;
min-width: 220px;
margin: 1.5rem auto 0 auto;
padding: 12px 24px;
background-color: var(--accent);
color: var(--bg-darker);
border: none;
border-radius: 4px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all .3s;
font-family: var(--font-header);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#kontakt .form-group button:hover {
background-color: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* --- Style dla animacji wideo podpisu --- */
/* Nadajemy pozycję względną kontenerowi z tekstem, aby wideo mogło się w nim pozycjonować */
#o-mnie .section-content {
position: relative;
padding-bottom: 150px; /* Dodajemy miejsce na dole, aby wideo nie nachodziło na tekst na małych ekranach */
}
.signature-video-animation {
position: absolute; /* Pozycjonowanie absolutne względem kontenera powyżej */
right: 2rem; /* Odstęp od prawej krawędzi */
bottom: 2rem; /* Odstęp od dolnej krawędzi */
width: 100%;
max-width: 350px; /* Maksymalna szerokość podpisu */
height: auto;
pointer-events: none; /* Sprawia, że wideo jest "nieklikalne" */
z-index: 10; /* Gwarantuje, że jest na wierzchu */
}
/* Dostosowanie dla urządzeń mobilnych */
@media (max-width: 768px) {
.signature-video-animation {
max-width: 280px; /* Zmniejszamy podpis na mniejszych ekranach */
right: 1rem;
bottom: 1rem;
}
}
/* --- NOWY KOD: STYLIZACJA OKNA POP-UP REZERWACJI --- */
#booking-modal .modal-content {
animation: slideIn 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (max-width: 768px) {
#booking-modal .modal-content {
width: 95%;
margin: 10% auto;
padding: 1.5rem;
}
#booking-modal .modal-content h3 {
font-size: 1.5rem;
}
#booking-modal .modal-content iframe {
height: 400px;
}
}
/* ============================================= */
/* === STYLE DLA TABELI PORÓWNAWCZEJ === */
/* ============================================= */
.table-container {
margin: 2rem 0;
overflow-x: auto; /* Zapewnia przewijanie na małych ekranach */
-webkit-overflow-scrolling: touch;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
color: blue; /* <--- ZMIENIONO NA NIEBIESKI DLA TESTU */
border: 1px solid #ddd;
}
.comparison-table th,
.comparison-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.comparison-table thead tr {
background-color: var(--bg-light-green); /* Jasnozielone tło z Twojej palety */
}
.comparison-table th {
font-family: var(--font-header);
font-size: 1rem;
color: var(--bg-dark); /* Ciemnozielony tekst z Twojej palety */
font-weight: 700;
}
.comparison-table tbody tr:nth-of-type(even) {
background-color: #f9f9f9; /* Lekko szare tło dla co drugiego wiersza */
}
.comparison-table tbody tr:hover {
background-color: #f1f1f1;
}
.comparison-table td:first-child {
font-weight: 700;
color: #555;
}
.comparison-table .highlight-strong {
font-weight: 700;
color: #c0392b; /* Czerwony dla podkreślenia ryzyka/konsekwencji */
}
.comparison-table .highlight-light {
font-weight: 700;
color: #27ae60; /* Zielony dla podkreślenia mniejszego ryzyka */
}
/* Responsywność tabeli */
@media (max-width: 768px) {
.comparison-table th,
.comparison-table td {
font-size: 0.9rem;
padding: 10px 8px;
}
}
/* --- NOWE STYLE DLA TABELI W ARTYKUŁACH --- */
#blog-article table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden; /* Niezbędne do zaokrąglenia rogów w nagłówku */
font-size: 0.95rem;
}
#blog-article th, #blog-article td {
padding: 1rem 1.25rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
#blog-article thead tr {
background-color: var(--accent);
color: var(--bg-white);
}
#blog-article thead th {
font-weight: 700; /* Bold */
font-family: var(--font-header);
font-size: 1.1rem;
border-bottom: 2px solid var(--accent-hover);
}
#blog-article tbody tr:nth-of-type(even) {
background-color: #f9f9f9;
}
#blog-article tbody tr:hover {
background-color: #f1f1f1;
}
#blog-article tbody td:first-child {
font-weight: bold;
color: var(--bg-darker);
}
#blog-article td strong {
font-weight: 700;
}
/* Specjalne wyróżnienie dla komórek z ryzykiem */
#blog-article td:last-child {
font-weight: normal;
}
#blog-article tbody tr:last-child td {
border-bottom: none;
}
#blog-article tbody tr:last-child td:nth-child(2) {
background-color: rgba(255, 230, 230, 0.7); /* Delikatny czerwony */
font-weight: bold;
color: #c0392b;
}
#blog-article tbody tr:last-child td:nth-child(3) {
background-color: rgba(230, 245, 230, 0.7); /* Delikatny zielony */
font-weight: bold;
color: #27ae60;
}
/* =============================================================== */
/* KROK 1 — DOPRACOWANIE AKORDEONÓW (premium minimalizm) */
/* Tylko nowe reguły dopisane na końcu pliku. Nadpisują przez */
/* kaskadę istniejące style .faq-item, NIE modyfikując ich. */
/* Treść w DOM bez zmian — pełna indeksowalność (SEO/GEO). */
/* =============================================================== */
/* 1. Subtelniejszy hairline + większy oddech między pozycjami */
.faq-container .faq-item {
border-bottom: 1px solid rgba(35, 55, 51, 0.10); /* delikatny grafit zamiast wyraźnego beżu */
}
.faq-container .faq-item:last-child {
border-bottom: none; /* czysty dół listy, bez wiszącej kreski */
}
.faq-container .faq-item:hover {
background-color: rgba(185, 166, 123, 0.06); /* ledwo wyczuwalny złoty welon */
}
/* 2. Nagłówek — pewny cel dotykowy ≥48px i spokojniejszy rytm */
.faq-container .faq-item summary {
min-height: 48px;
padding: 1.4rem 0.5rem;
font-weight: 600; /* mniej masywnie, bardziej redakcyjnie */
letter-spacing: 0.01em;
line-height: 1.35;
gap: 1rem;
}
/* 3. Ikona „+” w wersji line-art — cieńsza kreska, idealnie wyważona */
.faq-container .faq-item summary::after {
font-size: 1.6rem;
font-weight: 100;
width: 1.6rem;
text-align: center;
transition: transform 0.3s ease, color 0.3s ease;
}
/* 4. Wewnętrzne listy jako lekkie kolumny — koniec pionowej ściany */
.faq-container .faq-item .answer-text ul {
column-count: 2;
column-gap: 2.5rem;
margin: 0.5rem 0 0;
}
.faq-container .faq-item .answer-text ul li {
break-inside: avoid; /* pozycja nie pęka między kolumnami */
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 0.55rem;
line-height: 1.65;
}
/* 5. Spójność na ciemnym tle (Wykaz dokumentów) — czytelny złoty hairline */
#informacje-praktyczne .faq-container .faq-item {
border-bottom: 1px solid rgba(201, 169, 110, 0.18);
}
#informacje-praktyczne .faq-container .faq-item:hover {
background-color: rgba(201, 169, 110, 0.08);
}
/* 6. Mobile — jedna kolumna i komfortowe odstępy dotykowe */
@media (max-width: 768px) {
.faq-container .faq-item .answer-text ul {
column-count: 1;
}
.faq-container .faq-item summary {
padding: 1.25rem 0.25rem;
font-size: 1.08rem;
}
}
/* =============================================================== */
/* KROK 1 — FIX KONTRASTU NA CIEMNYCH SEKCJACH */
/* #uslugi / #przydatne-linki / #faq mają ciemnozielone tło, */
/* a domyślny kolor to ta sama ciemna zieleń → tytuły */
/* były niewidoczne (pojawiały się dopiero na hover). */
/* Tu nadajemy im jasny, czytelny kolor (WCAG AA/AAA). */
/* =============================================================== */
#uslugi .faq-container .faq-item summary,
#przydatne-linki .faq-container .faq-item summary,
#faq .faq-container .faq-item summary {
color: #ece6d8; /* ciepła kość słoniowa — kontrast ~9:1 na #233733 (AAA) */
}
/* Ikona „+” w złocie (nadpisuje wcześniejszą ciemną regułę #uslugi) */
#uslugi .faq-container .faq-item summary::after,
#przydatne-linki .faq-container .faq-item summary::after,
#faq .faq-container .faq-item summary::after {
color: var(--accent);
}
/* Hover/otwarcie — elegancki złoty akcent zamiast znikania */
#uslugi .faq-container .faq-item summary:hover,
#przydatne-linki .faq-container .faq-item summary:hover,
#faq .faq-container .faq-item summary:hover,
#uslugi .faq-container .faq-item[open] > summary,
#przydatne-linki .faq-container .faq-item[open] > summary,
#faq .faq-container .faq-item[open] > summary {
color: var(--accent-hover);
}
/* Subtelniejszy, jasny hairline na ciemnym tle */
#uslugi .faq-container .faq-item,
#przydatne-linki .faq-container .faq-item,
#faq .faq-container .faq-item {
border-bottom: 1px solid rgba(236, 230, 216, 0.14);
}
#uslugi .faq-container .faq-item:hover,
#przydatne-linki .faq-container .faq-item:hover,
#faq .faq-container .faq-item:hover {
background-color: rgba(185, 166, 123, 0.10);
}
/* Shimmering Green Button */
.btn-shimmer-green,
.hero-buttons-container .btn-shimmer-green,
#heroAskAboutCostsBtn {
padding: 1rem 2.5rem !important;
font-size: 1.1rem !important;
font-weight: bold !important;
color: #233733 !important;
background-color: #c9a96e !important;
border: none !important;
border-radius: 14px !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-block !important;
position: relative !important;
overflow: hidden !important;
transition: background-color 0.3s, box-shadow 0.3s !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.btn-shimmer-green::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 3s infinite;
}
.btn-shimmer-green:hover {
background-color: #b9a67b !important;
color: #233733 !important;
box-shadow: 0 8px 24px #c9a96e88;
}
@keyframes shimmer {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
/* old kalkulator footer styles removed - using .site-footer now */
/* --- SCROLL ANIMATIONS (Micro-interactions) --- */
.fade-in-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.fade-in-section.is-visible {
opacity: 1;
transform: none;
}
/* Staggered delay for children if needed */
.fade-in-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-stagger.is-visible > * {
opacity: 1;
transform: none;
}
.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
/* ===============================================================
FOOTER v6.0 � "Nowoczesna Elegancja Prawnicza"
Core styles inlined in footer