/* ========================================================= Patryk Rodak Nieruchomości – Main Stylesheet Clean, sharp, premium. No rounded corners. Brand: czerwień #F63E4A + szałwia #CDD8D2. ========================================================= */ /* Fonts są inlineowane w przez pr_render_critical_css() w inc/enqueue.php. */ /* ── VARIABLES ── */ :root { /* Marka: elegancka czerwień + szałwia na ciepłej, kremowej bazie (bliżej Ewy: stonowane, premium - nie „bold". --cobalt-* = czerwień marki, --cream-* = ciepła kość słoniowa, --sage = drugi kolor marki. */ /* ROLE KOLORÓW (wg klienta): CZERWIEŃ = tylko akcenty/wyróżnienia/podkreślenia (tytuły, linie, przyciski, ikony). ZIELEŃ/SZAŁWIA = tła sekcji. */ --cobalt: #d62839; /* czerwień marki - AKCENT (tytuły, linie, przyciski, ikony) */ --cobalt-mid: #b51f2e; /* ciemniejsza czerwień (hover przycisków) */ --cobalt-light: #f63e4a; /* jasna czerwień klienta - akcenty/podświetlenia */ --cobalt-pale: #e7ece9; /* bardzo jasny szałwiowy tint (delikatne tła pól) */ --cream: #f7f3ee; /* ciepła kość słoniowa - neutralna baza */ --cream-dark: #e9e1d6; /* ciepły piaskowy (obwódki, przerywniki) */ --sage: #cdd8d2; /* drugi kolor marki - jasna szałwia (TŁA jasnych sekcji) */ --sage-deep: #9fb2a8; /* ciemniejsza szałwia (obwódki/akcenty na szałwii) */ --green-dark: #2e3b35; /* głęboka zieleń - TŁA ciemnych sekcji (biały tekst, czerwone akcenty) */ --text: #1c1c1c; --text-muted: #6b6b6b; --white: #ffffff; } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } /* Offset kotwic pod sticky header - działa też bez JS (natywny skok / :target). */ :target, section[id] { scroll-margin-top: 100px; } body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--text); font-weight: 400; line-height: 1.65; } img { max-width: 100%; height: auto; display: block; } /* Make wrappers (from Imagify / WebP plugins) transparent in layout, so existing CSS targeting inner (e.g. .logo-img height rules) keeps working. */ picture { display: contents; } a { color: inherit; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .hp-field { position: absolute; left: -9999px; opacity: 0; } /* ── HEADER / NAVBAR ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 210; transition: background 0.4s, padding 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px 16px 60px; max-width: 1440px; margin: 0 auto; transition: padding 0.4s; } .site-header.scrolled { background: rgba(248, 244, 239, 0.97); backdrop-filter: blur(8px); border-bottom-color: var(--cream-dark); } .site-header.scrolled .header-inner { padding: 8px 32px 8px 60px; } .site-header.scrolled .logo-name { color: var(--cobalt); } .site-header.scrolled .logo-sub { color: var(--cobalt-mid); opacity: 0.7; } .site-header.scrolled .nav-links a { color: var(--text); } .site-header.scrolled .nav-links a:hover { color: var(--cobalt); } .site-header.scrolled .nav-cta { background: var(--cobalt) !important; border-color: var(--cobalt) !important; color: var(--white) !important; } /* Logo */ .logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; transition: color 0.4s; } /* Imagify owija w i klasa .logo-img ląduje na picture. picture{display:contents} → inner img nie dostaje rule. Targetujemy oba + img w picture. Na samej górze (hero tło ciemne) logo jest BIAŁE (filter). Po scrollu (cream background) zdejmujemy filter — logo w oryginalnych kolorach. */ .logo-img, .logo-img > img, .logo picture > img { height: 84px; width: auto; max-width: 260px; object-fit: contain; transition: height 0.4s, max-width 0.4s, filter 0.4s; filter: brightness(0) invert(1); } .site-header.scrolled .logo-img, .site-header.scrolled .logo-img > img, .site-header.scrolled .logo picture > img { height: 48px; max-width: 200px; filter: none; } .logo-name { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; color: var(--white); letter-spacing: 0.01em; transition: color 0.4s; } .logo-sub { font-family: 'Jost', sans-serif; font-size: 0.56rem; letter-spacing: 0.28em; text-transform: lowercase; color: rgba(255, 255, 255, 0.6); font-weight: 300; margin-top: 2px; transition: color 0.4s; } /* Nav */ .nav-links { display: flex; gap: 24px; align-items: center; list-style: none; } .nav-links a { text-decoration: none; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); font-weight: 400; position: relative; transition: color 0.3s; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s; } .nav-links a:hover { color: var(--white); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.5); color: var(--white) !important; padding: 10px 24px; font-size: 0.7rem !important; letter-spacing: 0.12em; transition: background 0.3s !important; white-space: nowrap; } /* Prawa strona nav: social + language */ .nav-right { display: flex; align-items: center; gap: 14px; margin-left: 18px; } .nav-social { display: inline-flex; align-items: center; gap: 10px; } .nav-social a { display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.75); transition: color 0.25s, transform 0.25s; width: 28px; height: 28px; } .nav-social a:hover { color: var(--white); transform: translateY(-1px); } .site-header.scrolled .nav-social a { color: rgba(28, 28, 28, 0.65); } .site-header.scrolled .nav-social a:hover { color: var(--cobalt); } @media (max-width: 900px) { .nav-social { display: none; } /* Cały nav-right znika na mobile — lang switcher jest w mobile-panel. Hamburger dzięki temu zostaje ostatnim dzieckiem flexboxa header-inner i ląduje na prawo. */ .nav-right { display: none; } .nav-toggle { margin-left: auto; } } /* Przełącznik języka PL / EN */ .lang-switcher { display: inline-flex; align-items: center; gap: 4px; font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 500; } .lang-btn { background: transparent; border: 0; padding: 8px 10px; cursor: pointer; color: rgba(255, 255, 255, 0.95); transition: color 0.25s; letter-spacing: 0.14em; font-family: inherit; font-size: inherit; font-weight: 500; min-height: 24px; min-width: 24px; text-decoration: none; /* zabiera domyślny underline */ } .lang-btn:hover { color: var(--white); text-decoration: none; } .lang-btn.active { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .lang-sep { color: rgba(255, 255, 255, 0.35); user-select: none; } .site-header.scrolled .lang-btn { color: var(--text); } .site-header.scrolled .lang-btn:hover { color: var(--cobalt); } .site-header.scrolled .lang-btn.active { color: var(--cobalt); } .site-header.scrolled .lang-sep { color: rgba(28, 28, 28, 0.3); } .lang-switcher-mobile { margin: 24px 0 0; justify-content: flex-start; } /* Mobile panel ma cream tło — tekst MUSI być ciemny (AA) */ .lang-switcher-mobile .lang-btn { color: var(--cobalt); } .lang-switcher-mobile .lang-btn.active { color: var(--cobalt); font-weight: 600; } .lang-switcher-mobile .lang-sep { color: rgba(214, 40, 57, 0.5); } @media (max-width: 900px) { .lang-switcher:not(.lang-switcher-mobile) { display: none; } } .nav-cta::after { display: none !important; } .nav-cta:hover { background: rgba(255, 255, 255, 0.25) !important; } /* Nav Toggle (mobile) */ .nav-toggle { display: none; background: none; border: none; color: var(--white); cursor: pointer; padding: 8px; position: relative; z-index: 201; transition: color 0.3s; } .nav-toggle-close { display: none; } .nav-toggle.active .nav-toggle-open { display: none; } .nav-toggle.active .nav-toggle-close { display: block; } .nav-toggle.active { color: var(--cobalt); } .site-header.scrolled .nav-toggle { color: var(--cobalt); } /* ── BUTTONS ── */ .btn-primary { display: inline-block; background: var(--cobalt); color: var(--white); text-decoration: none; padding: 16px 40px; font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; border: none; cursor: pointer; transition: background 0.3s, transform 0.2s; } .btn-primary:hover { background: var(--cobalt-mid); transform: translateY(-1px); } .btn-outline { display: inline-block; border: 1px solid var(--cobalt); color: var(--cobalt); text-decoration: none; padding: 15px 36px; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; transition: all 0.3s; } .btn-outline:hover { background: var(--cobalt); color: var(--white); } /* ── SECTION COMMON ── */ section { padding: 120px 60px; } .section-label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 20px; font-weight: 500; } .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.3rem, 3.5vw, 3.8rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--cobalt); margin-bottom: 24px; } .section-title em { font-style: italic; } .section-line { height: 2px; background: linear-gradient(to right, var(--cobalt), var(--cobalt-light), transparent); max-width: 80px; margin-bottom: 40px; } /* ── HERO ── */ .hero-section { min-height: 100vh; height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; contain: layout paint; justify-content: flex-end; overflow: hidden; background: var(--cobalt); /* Nadpisujemy wspólny `section { padding: 120px 60px }` — w hero treść ma siedzieć na samym dole, więc redukujemy padding do 10px. */ padding: 10px; } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .hero-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, transparent 26%, rgba(214, 40, 57, 0.30) 58%, rgba(74, 18, 24, 0.90) 100% ); } .hero-bg-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-mid) 50%, var(--cobalt-light) 100%); } .hero-bottom { position: relative; z-index: 2; width: 100%; padding: 28px 60px 48px; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.22); } /* Treść konwersyjna — wyśrodkowana, na dole hero (poniżej linii) żeby nie zasłaniać twarzy na zdjęciu. */ .hero-content { width: 100%; max-width: 860px; text-align: center; color: #fff; } .hero-kicker { margin: 0 0 14px; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); font-weight: 500; } .hero-h1 { font-family: 'Jost', sans-serif; margin: 0; font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.08; color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35); } .hero-sub { margin: 18px auto 0; max-width: 620px; font-size: clamp(0.98rem, 1.5vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, 0.92); } .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 30px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s; } .hero-btn .icon { flex-shrink: 0; } .hero-btn-primary { background: var(--cobalt-mid); color: #fff; } .hero-btn-primary:hover { background: #fff; color: var(--cobalt); } .hero-btn-outline { border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; background: rgba(255, 255, 255, 0.08); } .hero-btn-outline:hover { background: #fff; color: var(--cobalt); border-color: #fff; } /* Stary wariant (pojedynczy label) — zachowany dla zgodności wstecznej. */ .hero-label { margin: 0; font-size: 1.25rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); font-weight: 500; text-align: center; } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.7); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; z-index: 5; } .hero-scroll-line { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.55); animation: scrollPulse 1.8s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(0.6); } } /* ── ABOUT ── */ .about-section { background: var(--white); padding: 120px 60px; } .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; max-width: 1280px; margin: 0 auto; } .about-content p { font-size: 1rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 20px; } .about-content strong { color: var(--cobalt); font-weight: 500; } .about-lead { font-size: 1.1rem !important; color: var(--text) !important; line-height: 1.8 !important; } .about-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; } .license-tag { display: inline-block; border: 1px solid var(--cobalt-pale); padding: 12px 20px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt-mid); } .about-right { display: flex; flex-direction: column; gap: 32px; } .about-card { display: flex; flex-direction: row; gap: 28px; align-items: start; padding: 28px; border: 1px solid var(--cream-dark); background: var(--cream); transition: border-color 0.3s, box-shadow 0.3s; } .about-card:hover { border-color: var(--cobalt-pale); box-shadow: 0 8px 32px rgba(214, 40, 57, 0.08); } .about-card-img-wrap { width: 180px; min-width: 180px; height: 180px; overflow: hidden; flex-shrink: 0; } .about-card-img-wrap > img, .about-card-img-wrap picture, .about-card-img-wrap picture > img { width: 100%; height: 100%; object-fit: cover; /* Źródło 1:1 + kwadratowy kontener na desktopie = ZERO przycięcia. Na mobile (baner pełnej szerokości) CSS kadruje równo od środka. */ object-position: center; display: block; } .about-card-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--cobalt-pale) 0%, var(--cobalt) 100%); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); } .about-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--cobalt); margin-bottom: 10px; } .about-card p { font-size: 0.85rem; line-height: 1.75; color: var(--text-muted); } /* ── SERVICES — simple 3-column grid ── */ .services-section { background: var(--cobalt); color: var(--white); text-align: center; } .services-section .section-label { color: rgba(255, 255, 255, 0.9); text-align: center; display: block; } .services-section .section-title { color: var(--white); text-align: center; } .services-section .services-lead { max-width: 720px; margin: 22px auto 0; color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; line-height: 1.75; text-align: center; } /* Karty wewn\u0105trz zostaj\u0105 wyr\u00f3wnane do lewej — czytelno\u015b\u0107 tre\u015bci */ .services-section .service-card { text-align: left; } .services-cities { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.65); } .services-cities span:not(.dot) { color: rgba(255, 255, 255, 0.85); } .services-cities .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); display: inline-block; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; max-width: 1240px; margin-left: auto; margin-right: auto; } /* Wariant 2 kart (bez "Zakupu nieruchomości") — wyśrodkowane, równej wysokości, bez schodkowego przesunięcia żeby wyglądały jak para równych bloczków. */ .services-grid--count-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; gap: 32px; align-items: stretch; } /* Podwójna klasa (.services-grid.services-grid--count-2) podbija swoistość ponad regułę schodkową `.services-grid .service-card:nth-child(2)`, która leży niżej w pliku — bez tego druga karta dalej zjeżdżała w dół. */ .services-grid.services-grid--count-2 .service-card, .services-grid.services-grid--count-2 .service-card:nth-child(2), .services-grid.services-grid--count-2 .service-card:nth-child(2):hover, .services-grid.services-grid--count-2 .service-card:nth-child(3), .services-grid.services-grid--count-2 .service-card:nth-child(3):hover { transform: none; height: 100%; } /* Mocniejsze, wyra\u017ane karty — schodkowy uk\u0142ad: \u015brodkowa ni\u017cej */ .service-card { background: rgba(255, 255, 255, 0.09); padding: 52px 36px 44px; border: 1px solid rgba(255, 255, 255, 0.22); transition: background 0.3s, border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; position: relative; } .services-grid .service-card:nth-child(2) { transform: translateY(28px); } .services-grid .service-card:nth-child(3) { transform: translateY(56px); } .service-card:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); } .services-grid .service-card:nth-child(2):hover { transform: translateY(24px); } .services-grid .service-card:nth-child(3):hover { transform: translateY(52px); } .service-num { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 400; color: rgba(255, 255, 255, 0.35); display: block; margin-bottom: 20px; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 18px; } .service-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 500; margin-bottom: 18px; color: var(--white); line-height: 1.2; } .service-card p { font-size: 0.9rem; line-height: 1.75; color: rgba(255, 255, 255, 0.82); margin-bottom: 24px; } .service-list { list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 22px; margin-top: auto; } .service-list li { font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78); padding-left: 18px; position: relative; } .service-list li::before { content: '\2192'; position: absolute; left: 0; color: rgba(255, 255, 255, 0.6); } /* Services CTA — centered below the grid (uwzgl\u0119dnia schodkowy offset kart) */ .services-cta { text-align: center; margin-top: 110px; } .btn-services-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 40px; background: rgba(255, 255, 255, 0.1); color: var(--white); font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.3); transition: background 0.3s, border-color 0.3s; } .btn-services-cta:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); } .btn-services-cta .btn-arrow { font-size: 1.1rem; } @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; gap: 20px; } .services-grid .service-card:nth-child(2), .services-grid .service-card:nth-child(3) { transform: none; } .services-grid .service-card:nth-child(2):hover, .services-grid .service-card:nth-child(3):hover { transform: none; } .services-cta { margin-top: 40px; } } /* ── PORTFOLIO / REALIZACJE ── */ .portfolio-section { background: var(--cream); } .portfolio-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; } .properties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .property-card { background: var(--white); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; /* Kolumna na pełną wysokość karty - dzięki temu wiersz z ceną przykleja się do dołu i wszystkie karty są wyrównane, niezależnie od długości adresu (1 czy 2 linie). */ display: flex; flex-direction: column; height: 100%; } .property-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(214, 40, 57, 0.12); } /* Portfolio card image — aspect-ratio ustawiony na img (działa też gdy Imagify wrapuje w picture) */ .property-img, .property-card picture > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: var(--cobalt-pale); display: block; height: auto; } .property-img-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--cobalt-pale), var(--cobalt)); display: flex; align-items: center; justify-content: center; } .property-body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; } .property-sold { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); background: var(--cobalt); padding: 4px 10px; display: inline-block; align-self: flex-start; /* w kolumnie flex plakietka hugguje treść, nie rozciąga się */ margin-bottom: 12px; } .property-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--cobalt); margin-bottom: 6px; } .property-body p { font-size: 0.8rem; color: var(--text-muted); } .property-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cream-dark); } .property-meta span { font-size: 0.72rem; color: var(--cobalt-mid); letter-spacing: 0.05em; } /* ── PORTFOLIO CAROUSEL ── */ .portfolio-carousel { margin-top: 40px; overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); } .portfolio-carousel-track { display: flex; align-items: stretch; gap: 24px; width: max-content; animation: carousel-scroll 40s linear infinite; } .portfolio-carousel-track:hover { animation-play-state: paused; } .portfolio-carousel .property-card { flex: 0 0 320px; min-width: 0; /* height:auto (nie 100%) - w rzędzie flex bez określonej wysokości track „height:100%" wyłącza stretch; z auto karty rozciągają się do równej wysokości. */ height: auto; } @keyframes carousel-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Portfolio arrows */ .portfolio-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: var(--cobalt); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; opacity: 0; transition: opacity 0.3s, background 0.3s; } .portfolio-carousel:hover .portfolio-arrow { opacity: 1; } .portfolio-arrow:hover { background: var(--cobalt-mid); } .portfolio-arrow-prev { left: 12px; } .portfolio-arrow-next { right: 12px; } .arrow-flip { transform: rotate(180deg); } .portfolio-carousel.manual .portfolio-carousel-track { animation: none; transition: transform 0.5s ease; } /* ── TESTIMONIALS ── */ .testimonials-section { background: var(--cobalt-pale); } .opinions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; } .opinion-card { background: var(--white); padding: 40px 32px; border-top: 3px solid var(--cobalt); transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.4s; cursor: default; } .opinion-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(214, 40, 57, 0.12); border-top-color: var(--cobalt-light); } .stars { display: flex; gap: 4px; margin-bottom: 20px; } .star-icon { color: var(--cobalt); fill: var(--cobalt); stroke: var(--cobalt); } .opinion-text { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--text); margin-bottom: 24px; border: none; padding: 0; } .opinion-author { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt-mid); font-weight: 400; } .google-badge { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.65rem; color: var(--text-muted); } .google-g { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; } /* Read more / less */ .read-more-btn { background: none; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt-mid); padding: 0; margin-top: 8px; display: inline-block; transition: color 0.3s; font-weight: 400; } .read-more-btn:hover { color: var(--cobalt); } /* ── SLIDER ── */ .opinions-slider { margin-top: 48px; position: relative; overflow: hidden; } .slider-track { display: flex; gap: 24px; transition: transform 0.5s ease; will-change: transform; } .slider-card { flex: 0 0 calc(33.333% - 16px); min-width: 0; } .slider-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; } .slider-btn { width: 48px; height: 48px; background: var(--white); border: 1px solid var(--cream-dark); color: var(--cobalt); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .slider-btn:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); } .slider-btn:hover svg { stroke: var(--white); } .slider-btn:disabled { opacity: 0.3; cursor: not-allowed; } .slider-arrow-left { transform: rotate(180deg); } .slider-dots { display: flex; gap: 8px; align-items: center; } .slider-dot { width: 8px; height: 8px; background: var(--cream-dark); border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; } .slider-dot.active { background: var(--cobalt); transform: scale(1.3); } /* ── CITY BANNER / DLACZEGO JA — divider section ── */ .city-banner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 40px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--cobalt); overflow: hidden; } .city-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream) 0%, rgba(248, 244, 239, 0.85) 2%, rgba(248, 244, 239, 0.55) 5%, rgba(248, 244, 239, 0.25) 8%, rgba(214, 40, 57, 0.4) 11%, rgba(214, 40, 57, 0.7) 14%, rgba(214, 40, 57, 0.82) 18%, rgba(214, 40, 57, 0.85) 50%, rgba(214, 40, 57, 0.82) 82%, rgba(214, 40, 57, 0.7) 86%, rgba(214, 40, 57, 0.4) 89%, rgba(248, 244, 239, 0.25) 92%, rgba(248, 244, 239, 0.55) 95%, rgba(248, 244, 239, 0.85) 98%, var(--cream) 100%); z-index: 1; } .city-banner-content { position: relative; z-index: 2; text-align: center; max-width: 820px; padding: 0 20px; } .city-banner-line { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.45); margin: 0 auto 28px; } .city-banner-tag { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 22px; } .city-banner-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; color: var(--white); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 26px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.55); } .city-banner-text { font-size: 1.08rem; line-height: 1.85; font-weight: 500; color: #fff; margin-bottom: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.5); } /* USP cards inside the banner — 2x2 grid (2 po lewo, 2 po prawo) */ .city-banner-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 48px; width: 100%; max-width: 980px; margin-top: 60px; padding: 0 20px; } .cb-card { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 34px 28px; transition: background 0.35s, border-color 0.35s, transform 0.35s; } .cb-card:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-4px); } .cb-card-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .cb-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--white); margin: 0 0 10px; line-height: 1.25; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .cb-card-text { font-size: 0.85rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 0; } .city-banner-cta { position: relative; z-index: 2; margin-top: 50px; } .city-banner-btn { background: var(--white) !important; border: 2px solid var(--white) !important; color: var(--cobalt) !important; font-weight: 600 !important; letter-spacing: 0.14em !important; padding: 16px 38px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .city-banner-btn:hover { background: var(--cream) !important; border-color: var(--cream) !important; color: var(--cobalt) !important; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } @media (max-width: 1024px) { .city-banner { padding: 90px 32px; } .city-banner-cards { grid-template-columns: repeat(2, 1fr); margin-top: 48px; } } @media (max-width: 640px) { .city-banner { padding: 70px 16px; } .city-banner-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; } .cb-card { padding: 24px 22px; } .city-banner-btn { padding: 14px 24px !important; font-size: 0.8rem !important; letter-spacing: 0.1em !important; white-space: normal !important; text-align: center; } /* Portfolio carousel: allow touch scrolling on mobile */ .portfolio-carousel-track { animation: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .portfolio-carousel .property-card { scroll-snap-align: start; flex: 0 0 85vw; } } /* ────────────────────────────────────────────── CASE STUDY — narrow centered cards with directional scroll-triggered slide animations ────────────────────────────────────────────── */ .case-study-header-centered { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; } .case-study-header-centered .section-line { margin-left: auto; margin-right: auto; } .case-study-header-centered .case-study-lead { max-width: 100%; margin-left: auto; margin-right: auto; } /* ── CASE STUDY SLIDER ── */ .cs-slider { position: relative; max-width: 820px; margin: 60px auto 0; } .cs-slider-viewport { overflow: hidden; } .cs-slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .cs-slider .cs-card { flex: 0 0 100%; min-width: 0; max-width: 100%; } /* Strza\u0142ki po bokach — na zewn\u0105trz slidera */ .cs-slider-btn { width: 48px; height: 48px; border: 1px solid var(--cobalt-mid); background: var(--cream); color: var(--cobalt); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; } .cs-slider-btn:hover { background: var(--cobalt); color: var(--white); border-color: var(--cobalt); } .cs-slider-side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } .cs-slider-prev.cs-slider-side { left: -72px; } .cs-slider-next.cs-slider-side { right: -72px; } @media (max-width: 1000px) and (min-width: 641px) { .cs-slider-prev.cs-slider-side { left: 8px; } .cs-slider-next.cs-slider-side { right: 8px; } .cs-slider-side { background: rgba(248, 244, 239, 0.92); } } /* Mobile: strza\u0142ki + kropki w jednym pasku pod sliderem */ @media (max-width: 640px) { .cs-slider { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } .cs-slider-viewport { order: 1; flex: 1 0 100%; } .cs-slider-prev.cs-slider-side { order: 2; } .cs-slider-dots { order: 3; margin-top: 0; } .cs-slider-next.cs-slider-side { order: 4; } .cs-slider-side { position: static; transform: none; background: var(--cream); } } .cs-arrow-flip { transform: rotate(180deg); } /* Kropki pod sliderem */ .cs-slider-dots { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 40px; } /* Touch target 24x24 (WCAG AA) — widoczna kropka 10x10 wyśrodkowana przez background-clip */ .cs-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, var(--cream-dark) 0 5px, transparent 6px); border: none; cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0; } .cs-dot.active { background: radial-gradient(circle, var(--cobalt) 0 6px, transparent 7px); transform: scale(1.1); } /* ── PARALLAX DIVIDER ── */ .parallax-divider { height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } @supports (-webkit-overflow-scrolling: touch) { /* iOS doesn't support background-attachment: fixed — fallback */ .parallax-divider { background-attachment: scroll; } } @media (max-width: 900px) { .parallax-divider { height: 280px; background-attachment: scroll; } } /* ── CASE STUDY ── */ .case-study-section { background: var(--white); } .case-study-header { margin-bottom: 60px; } .case-study-lead { font-size: 1rem; line-height: 1.8; color: var(--text-muted); max-width: 700px; } .case-study-list { display: flex; flex-direction: column; gap: 48px; } .cs-card { border: 1px solid var(--cream-dark); background: var(--cream); transition: border-color 0.3s, box-shadow 0.3s; } .cs-card:hover { border-color: var(--cobalt-pale); box-shadow: 0 12px 48px rgba(214, 40, 57, 0.08); } .cs-card-top { display: flex; align-items: center; padding: 36px 44px; gap: 32px; } .cs-number { font-family: 'Cormorant Garamond', serif; font-size: 5rem; font-weight: 300; color: var(--cobalt); line-height: 1; flex-shrink: 0; opacity: 0.35; } .cs-card-info { flex: 1; } .cs-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--cobalt); margin-bottom: 4px; line-height: 1.25; } .cs-address { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0; } .cs-address svg { opacity: 0.5; } .cs-stats { display: flex; gap: 28px; flex-shrink: 0; padding-left: 32px; border-left: 1px solid var(--cream-dark); } .cs-stat { display: flex; flex-direction: column; text-align: right; } .cs-stat-value { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--cobalt); line-height: 1.1; white-space: nowrap; } .cs-stat-label { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; max-width: 120px; } .cs-card-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cream-dark); } .cs-step { padding: 32px 36px; border-right: 1px solid var(--cream-dark); } .cs-step:last-child { border-right: none; } .cs-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .cs-step-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .cs-step-problem { background: #e5484d; } /* vivid red */ .cs-step-solution { background: #f59e0b; } /* amber/gold */ .cs-step-result { background: #16a34a; } /* vivid green */ .cs-step h4 { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: var(--text); } .cs-step-content { font-size: 0.85rem; line-height: 1.75; color: var(--text-muted); } /* ── CTA STRIP ── */ .cta-strip { padding: 110px 60px; background: var(--cream); border-top: none; } .cta-strip .cta-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .cta-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 400; line-height: 1.3; color: var(--cobalt); } .cta-text { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); margin-top: 4px; } .cta-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } .cta-strip .btn-primary { white-space: nowrap; } .cta-phone { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--cobalt-mid); transition: color 0.3s; } .cta-phone:hover { color: var(--cobalt); } /* ── FAQ ── */ .faq-section { background: var(--white); } .faq-header { margin-bottom: 60px; } .faq-list { max-width: 900px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--cream-dark); } .faq-item:first-child { border-top: 1px solid var(--cream-dark); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 400; color: var(--cobalt); letter-spacing: 0.01em; transition: color 0.3s; gap: 24px; } .faq-question:hover { color: var(--cobalt-mid); } .faq-icon { flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: var(--cobalt-mid); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.45s cubic-bezier(0.4, 0, 0.2, 1); padding-bottom: 0; } .faq-answer > div { overflow: hidden; } .faq-item.active .faq-answer { grid-template-rows: 1fr; padding-bottom: 24px; } .faq-answer p { font-size: 0.9rem; line-height: 1.8; color: var(--text-muted); padding-right: 48px; } /* ── CONTACT ── */ .contact-section { background: var(--cream); padding: 120px 60px; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 60px; max-width: 1400px; } .contact-grid.has-photo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); align-items: start; } .contact-main { display: flex; flex-direction: column; gap: 48px; min-width: 0; } .contact-heading { margin-bottom: 0; } /* Kontener dopasowuje się do zdjęcia (a nie odwrotnie). Brackets dekoracyjne owijają każdy rozmiar zdjęcia dzięki position: absolute. */ .contact-photo { overflow: visible; position: relative; align-self: start; width: 100%; margin: 0; line-height: 0; /* zapobiega odstępowi pod */ } /* Decorative L-corner brackets (top-right + bottom-left) */ .contact-photo::before, .contact-photo::after { content: ''; position: absolute; width: 64px; height: 64px; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.75); z-index: 2; } .contact-photo::before { top: -12px; right: -12px; border-left: none; border-bottom: none; } .contact-photo::after { bottom: -12px; left: -12px; border-right: none; border-top: none; } /* Zdjęcie w naturalnej proporcji — żadnego croppingu. width:100% max-width:100% height:auto → browser zachowuje aspect z attr width/height. Imagify może wrapować w — selector łapie obie formy. */ .contact-photo > img, .contact-photo picture, .contact-photo picture > img { width: 100%; height: auto; max-width: 100%; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .contact-photo:hover img { transform: none; } .contact-lead { font-size: 1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 40px; } .contact-info { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .contact-detail { display: flex; flex-direction: column; gap: 20px; } .contact-item { display: flex; align-items: center; gap: 16px; } .contact-icon { width: 44px; height: 44px; background: var(--cobalt); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-item-text label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); display: block; } .contact-item-text a, .contact-item-text span { font-size: 0.92rem; color: var(--cobalt); text-decoration: none; font-weight: 400; } .contact-item-text a:hover { text-decoration: underline; } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } input, textarea, select { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.9rem; border: 1px solid var(--cream-dark); background: var(--white); padding: 14px 18px; outline: none; transition: border-color 0.3s; color: var(--text); border-radius: 0; -webkit-appearance: none; } input:focus, textarea:focus, select:focus { border-color: var(--cobalt); } textarea { resize: vertical; min-height: 120px; } .contact-form .btn-primary { align-self: flex-start; margin-top: 8px; } /* GDPR consent */ .form-consent p { margin: 0; } /* CF7 wstawia
w środku labela - w flexie robi to rozjazd, usuwamy. */ .form-consent label br { display: none; } .form-consent label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; flex-wrap: nowrap; } .form-consent input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 22px; height: 22px; min-width: 22px; padding: 0; margin: 2px 0 0; border: 2px solid var(--cobalt-mid); background: var(--white); cursor: pointer; position: relative; transition: background 0.2s, border-color 0.2s; } .form-consent input[type="checkbox"]:hover { border-color: var(--cobalt); background: var(--cobalt-pale); } .form-consent input[type="checkbox"]:checked { background: var(--cobalt); border-color: var(--cobalt); } .form-consent input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent-text { flex: 1 1 auto; font-size: 0.8rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-align: left; } .consent-text a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; } .consent-text a:hover { color: var(--cream); } /* CF7 [acceptance] - spłaszczamy zagnieżdżone spany CF7, żeby checkbox zgody ułożył się tak jak natywny (kwadrat + tekst obok). */ .form-consent .wpcf7-form-control-wrap, .form-consent .wpcf7-acceptance, .form-consent .wpcf7-acceptance .wpcf7-list-item, .form-consent .wpcf7-acceptance label { display: contents; } .form-consent .wpcf7-acceptance .wpcf7-list-item-label { display: none; } .form-consent .wpcf7-list-item { margin: 0; } .form-status { font-size: 0.85rem; padding: 12px 0; } .form-status.success { color: #1a5e3a; } .form-status.error { color: #b91c1c; } /* CF7 overrides - checkbox WYKLUCZONY, inaczej dostawał width:100% + padding i robił się z niego wielki pusty box zamiast kwadracika zgody. */ .cf7-form-wrapper .wpcf7-form input:not([type="checkbox"]):not([type="submit"]), .cf7-form-wrapper .wpcf7-form textarea, .cf7-form-wrapper .wpcf7-form select { width: 100%; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.9rem; border: 1px solid var(--cream-dark); background: var(--white); padding: 14px 18px; border-radius: 0; } /* Odstęp między zgodą a przyciskiem - przycisk niżej */ .cf7-form-wrapper .wpcf7-form .form-consent { margin-bottom: 12px; } .cf7-form-wrapper .wpcf7-form input[type="submit"] { background: var(--cobalt); color: var(--white); border: none; padding: 16px 40px; margin-top: 24px; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; width: auto; } .cf7-form-wrapper .wpcf7-form input[type="submit"]:hover { background: var(--cobalt-mid); } /* Section transition fades removed — kept only on city banner */ /* ────────────────────────────────────────────── FEATURED SECTIONS — dark cobalt emphasis Applied to: services (already), case-study, contact ────────────────────────────────────────────── */ /* Shared accent: thin gold line above section title for featured sections */ .services-section .section-title::before, .case-study-section.featured-dark .section-title::before, .contact-section.featured-dark .section-title::before { content: ''; display: block; width: 56px; height: 2px; background: var(--cobalt-pale, rgba(255,255,255,0.5)); margin-bottom: 24px; } /* Bigger, bolder featured headings */ .services-section .section-title, .case-study-section.featured-dark .section-title, .contact-section.featured-dark .section-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.01em; } /* CASE STUDY — light bg with COBALT cards */ .case-study-section.featured-light { background: var(--cream); color: var(--text); padding-top: 120px; padding-bottom: 120px; } .case-study-section.featured-light .section-label { color: var(--cobalt-mid); } .case-study-section.featured-light .section-title { color: var(--cobalt); } .case-study-section.featured-light .case-study-lead { color: var(--text-muted); } .case-study-section.featured-light .cs-card { background: var(--cobalt); border: 1px solid var(--cobalt); color: var(--white); } .case-study-section.featured-light .cs-card:hover { box-shadow: 0 24px 60px rgba(214, 40, 57, 0.35); } .case-study-section.featured-light .cs-number { color: var(--white); opacity: 0.5; } .case-study-section.featured-light .cs-title { color: var(--white); } .case-study-section.featured-light .cs-address { color: rgba(255, 255, 255, 0.65); } .case-study-section.featured-light .cs-address svg { opacity: 0.7; } .case-study-section.featured-light .cs-stats { border-left-color: rgba(255, 255, 255, 0.2); } .case-study-section.featured-light .cs-stat-value { color: var(--white); } .case-study-section.featured-light .cs-stat-label { color: rgba(255, 255, 255, 0.65); } .case-study-section.featured-light .cs-card-steps { border-top-color: rgba(255, 255, 255, 0.18); } .case-study-section.featured-light .cs-step { border-right-color: rgba(255, 255, 255, 0.18); } .case-study-section.featured-light .cs-step h4 { color: var(--white); font-weight: 600; letter-spacing: 0.18em; } .case-study-section.featured-light .cs-step-content, .case-study-section.featured-light .cs-step p { color: rgba(255, 255, 255, 0.85); } /* Ewa stats below — adapt to light bg */ .case-study-section.featured-light .ewa-stats { border-top-color: var(--cream-dark); border-bottom-color: var(--cream-dark); } .case-study-section.featured-light .ewa-stat-value { color: var(--cobalt); } .case-study-section.featured-light .ewa-stat-label { color: var(--cobalt-mid); } /* CONTACT — dark variant */ .contact-section.featured-dark { background: var(--cobalt); color: var(--white); } /* Decorative white lines flanking the form */ .contact-section.featured-dark .contact-form-wrap { position: relative; padding: 0 36px; } .contact-section.featured-dark .contact-form-wrap::before, .contact-section.featured-dark .contact-form-wrap::after { content: ''; position: absolute; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.55) 82%, transparent 100%); pointer-events: none; } .contact-section.featured-dark .contact-form-wrap::before { left: 0; } .contact-section.featured-dark .contact-form-wrap::after { right: 0; } @media (max-width: 640px) { .contact-section.featured-dark .contact-form-wrap { padding: 0 18px; } } .contact-section.featured-dark .section-label { color: rgba(255, 255, 255, 0.55); } .contact-section.featured-dark .section-title { color: var(--white); } .contact-section.featured-dark .contact-lead { color: rgba(255, 255, 255, 0.75); } .contact-section.featured-dark .contact-icon { background: rgba(255, 255, 255, 0.1); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.2); } .contact-section.featured-dark .contact-item-text label { color: rgba(255, 255, 255, 0.5); } .contact-section.featured-dark .contact-item-text a, .contact-section.featured-dark .contact-item-text span { color: var(--white); } /* Form on dark bg */ .contact-section.featured-dark .contact-form input, .contact-section.featured-dark .contact-form textarea, .contact-section.featured-dark .contact-form select, .contact-section.featured-dark .cf7-form-wrapper input[type="text"], .contact-section.featured-dark .cf7-form-wrapper input[type="email"], .contact-section.featured-dark .cf7-form-wrapper input[type="tel"], .contact-section.featured-dark .cf7-form-wrapper textarea, .contact-section.featured-dark .cf7-form-wrapper select { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--white); } .contact-section.featured-dark input::placeholder, .contact-section.featured-dark textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .contact-section.featured-dark .contact-form input:focus, .contact-section.featured-dark .contact-form textarea:focus, .contact-section.featured-dark .cf7-form-wrapper input:focus, .contact-section.featured-dark .cf7-form-wrapper textarea:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); } .contact-section.featured-dark .form-label, .contact-section.featured-dark .form-consent label { color: rgba(255, 255, 255, 0.7); } .contact-section.featured-dark .form-consent a { color: var(--white); text-decoration: underline; } .contact-section.featured-dark .form-consent input[type="checkbox"] { border: 2px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.12); } .contact-section.featured-dark .form-consent input[type="checkbox"]:checked { background: var(--white); border-color: var(--white); } /* Ptaszek musi być kontrastowy (kobalt) na białym tle, inaczej biały na białym = niewidoczny po zaznaczeniu zgody. */ .contact-section.featured-dark .form-consent input[type="checkbox"]:checked::after { border-color: var(--cobalt); } /* Hover / focus - wyraźna zmiana, żeby było widać że to klikalne */ .contact-section.featured-dark .form-consent input[type="checkbox"]:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.2); } .contact-section.featured-dark .form-consent input[type="checkbox"]:checked:hover { background: var(--white); } .contact-section.featured-dark .form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .contact-section.featured-dark .form-consent label:hover .consent-text { color: var(--white); } .contact-section.featured-dark .form-consent a:hover { color: var(--cream); } .contact-section.featured-dark .contact-form .btn-primary, .contact-section.featured-dark .cf7-form-wrapper input[type="submit"] { background: var(--white); color: var(--cobalt); border: none; } .contact-section.featured-dark .contact-form .btn-primary:hover, .contact-section.featured-dark .cf7-form-wrapper input[type="submit"]:hover { background: var(--cream); color: var(--cobalt); } /* ────────────────────────────────────────────── VIDEO SECTION ────────────────────────────────────────────── */ .video-section { background: var(--cream); padding: 100px 60px 40px; } .video-section-inner { max-width: 1100px; margin: 0 auto; text-align: center; } .video-section .section-title { margin-bottom: 16px; } .video-lead { font-size: 1rem; line-height: 1.7; color: var(--text-muted); max-width: 640px; margin: 0 auto 40px; } .video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--cobalt); overflow: hidden; box-shadow: 0 24px 80px rgba(214, 40, 57, 0.18); } .video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--cobalt); } /* Poster + przycisk Play (lazy load) */ .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background-color: var(--cobalt); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; transition: filter 0.3s; z-index: 2; } .video-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(214, 40, 57,0.15), rgba(214, 40, 57,0.45)); transition: background 0.3s; } .video-poster:hover::after { background: linear-gradient(180deg, rgba(214, 40, 57,0.05), rgba(214, 40, 57,0.25)); } .video-poster-placeholder { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.12), transparent 60%), var(--cobalt); } .video-play-btn { position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--cobalt); display: flex; align-items: center; justify-content: center; padding-left: 6px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); transition: transform 0.3s, background 0.3s; } .video-poster:hover .video-play-btn { transform: scale(1.08); background: #fff; } /* Player mount (puste do czasu kliknięcia) */ .video-player-mount { position: absolute; inset: 0; z-index: 3; } .video-player-mount:empty { display: none; } /* Po odtworzeniu — ukryj poster, pokaż close */ .video-wrap.playing .video-poster { display: none; } .video-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 0.2s; } .video-close:hover { background: rgba(0,0,0,0.85); } .video-wrap.playing .video-close { display: flex; } @media (max-width: 640px) { .video-play-btn { width: 72px; height: 72px; } .video-play-btn svg { width: 26px; height: 26px; } } /* ────────────────────────────────────────────── WHY ME SECTION ────────────────────────────────────────────── */ .whyme-section { background: var(--cream); padding: 120px 60px; } .whyme-header { text-align: center; max-width: 760px; margin: 0 auto 60px; } .whyme-header .section-label, .whyme-header .section-title { display: block; } .whyme-lead { font-size: 1rem; line-height: 1.8; color: var(--text-muted); margin-top: 18px; } .whyme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1300px; margin: 0 auto; } .whyme-card { background: var(--white); border: 1px solid var(--cream-dark); padding: 36px 28px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .whyme-card:hover { transform: translateY(-4px); border-color: var(--cobalt-pale); box-shadow: 0 16px 48px rgba(214, 40, 57, 0.1); } .whyme-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--cobalt); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .whyme-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 500; color: var(--cobalt); margin: 0 0 12px; line-height: 1.25; } .whyme-card-text { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); margin: 0; } /* Responsive */ @media (max-width: 1024px) { .whyme-grid { grid-template-columns: repeat(2, 1fr); } .video-section { padding: 80px 40px 32px; } .whyme-section { padding: 80px 40px; } } @media (max-width: 640px) { .whyme-grid { grid-template-columns: 1fr; } .video-section { padding: 64px 24px 24px; } .whyme-section { padding: 64px 24px; } .case-study-section.featured-dark { padding-top: 80px; padding-bottom: 80px; } } /* ── MOBILE PANEL ── */ .mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 85vw; background: var(--cream); z-index: 200; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; display: none; } .mobile-panel.open { transform: translateX(0); } .mobile-panel-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 199; opacity: 0; pointer-events: none; transition: opacity 0.35s; display: none; } .mobile-panel-overlay.open { opacity: 1; pointer-events: all; } .mobile-panel-inner { display: flex; flex-direction: column; padding: 100px 32px 40px; min-height: 100%; } .mobile-panel-nav { display: flex; flex-direction: column; gap: 0; } .mobile-panel-nav a { display: block; padding: 14px 0; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); text-decoration: none; border-bottom: 1px solid var(--cream-dark); transition: color 0.2s; } .mobile-panel-nav a:last-child { border-bottom: none; } .mobile-panel-nav a:hover { color: var(--cobalt-mid); } .mobile-panel-info { margin-top: auto; padding-top: 32px; border-top: 1px solid var(--cream-dark); } .mobile-panel-name { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--cobalt); margin: 0 0 4px; } .mobile-panel-role { font-family: 'Jost', sans-serif; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); margin: 0 0 8px; } .mobile-panel-license { font-size: 0.75rem; color: var(--text-light); margin: 0 0 20px; } .mobile-panel-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .mobile-panel-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text); } .mobile-panel-contact li a { display: flex; align-items: flex-start; gap: 10px; color: var(--cobalt); text-decoration: none; } .mobile-panel-contact li svg { flex-shrink: 0; margin-top: 2px; color: var(--cobalt-mid); } /* ── FOOTER ── */ .site-footer { background: var(--cobalt); color: rgba(255, 255, 255, 0.7); } .footer-main { padding: 64px 60px 40px; max-width: 1440px; margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 60px; } /* Brand col */ .footer-logo { text-decoration: none; } .footer-logo .logo-name { color: var(--white); } .footer-logo .logo-sub { color: rgba(255, 255, 255, 0.5); } /* Imagify owija w — filter ląduje na picture ale browser go nie stosuje na inner img. Dlatego aplikujemy rule na oba: .footer-logo-img (img bezpośrednio) i .footer-logo picture > img. */ .footer-logo-img, .footer-logo-img > img, .footer-logo picture > img { height: auto; max-height: 96px; max-width: 280px; width: auto; object-fit: contain; filter: brightness(0) invert(1); } .footer-tagline { font-size: 0.85rem; line-height: 1.7; margin-top: 16px; color: rgba(255, 255, 255, 0.85); } .footer-social { display: flex; gap: 16px; margin-top: 20px; } .footer-social a { color: rgba(255, 255, 255, 0.85); transition: color 0.3s; } .footer-social a:hover { color: var(--white); } /* Footer columns */ .footer-heading { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 20px; font-weight: 500; } .footer-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-list li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; } .footer-list li svg { flex-shrink: 0; opacity: 0.5; } .footer-list a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: rgba(255, 255, 255, 0.7); transition: color 0.3s; } .footer-list a:hover { color: var(--white); } .footer-nav-list a { gap: 0; font-size: 0.82rem; } /* Bottom bar */ .footer-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 60px; } .footer-legal a { font-size: 0.75rem; text-decoration: none; color: var(--white); transition: opacity 0.3s; } .footer-legal a:hover { opacity: 0.75; } .copyright { font-size: 0.72rem; letter-spacing: 0.03em; color: var(--white); opacity: 1; } .footer-credit { font-size: 0.72rem; text-decoration: none; color: var(--white); opacity: 0.85; transition: opacity 0.3s; } .footer-credit:hover { opacity: 1; } /* ── PRIVACY PAGE ── */ .privacy-page { max-width: 800px; margin: 0 auto; padding: 140px 24px 80px; } .privacy-header { margin-bottom: 48px; } .privacy-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: var(--cobalt); margin: 40px 0 16px; } .privacy-content h2:first-child { margin-top: 0; } .privacy-content p { font-size: 0.92rem; line-height: 1.85; color: var(--text-muted); margin-bottom: 16px; } .privacy-content ul { margin: 0 0 20px 20px; color: var(--text-muted); } .privacy-content li { font-size: 0.9rem; line-height: 1.8; margin-bottom: 6px; } .privacy-content a { color: var(--cobalt-mid); text-decoration: underline; } .privacy-content strong { color: var(--cobalt); font-weight: 500; } .privacy-back { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--cream-dark); } /* ── FLOATING PHONE ── */ /* Pływająca słuchawka (jak w mybluehouse): domyślnie sama ikona; po najechaniu na desktopie rozwija się numer w lewo, klik dzwoni pod główny numer firmy. */ .floating-phone-btn { position: fixed; bottom: 28px; right: 28px; z-index: 90; height: 60px; padding: 0; font-family: inherit; cursor: pointer; -webkit-appearance: none; background: var(--cobalt); color: var(--white); display: flex; align-items: center; text-decoration: none; border: 2px solid #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); transition: box-shadow 0.3s, background 0.3s, opacity 0.4s; } .floating-phone-icon { width: 56px; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .floating-phone-icon svg { width: 26px; height: 26px; stroke-width: 2.2; } .floating-phone-number { display: inline-flex; align-items: center; white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; padding: 0; font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; transition: max-width 0.4s ease, opacity 0.3s ease, padding 0.4s ease; } .floating-phone-btn:hover { background: var(--cobalt-mid); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); } .floating-phone-btn:hover .floating-phone-number { max-width: 240px; opacity: 1; padding: 0 6px 0 22px; } .floating-phone-btn.is-hidden { opacity: 0; pointer-events: none; transform: translateY(16px); } /* ── SCROLL ANIMATION ── */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Staggered delays for grid children */ .opinions-grid .fade-in:nth-child(2), .services-grid .fade-in:nth-child(2), .properties-grid .fade-in:nth-child(2) { transition-delay: 0.1s; } .opinions-grid .fade-in:nth-child(3), .services-grid .fade-in:nth-child(3), .properties-grid .fade-in:nth-child(3) { transition-delay: 0.2s; } .properties-grid .fade-in:nth-child(4) { transition-delay: 0.15s; } .properties-grid .fade-in:nth-child(5) { transition-delay: 0.2s; } .properties-grid .fade-in:nth-child(6) { transition-delay: 0.25s; } /* About cards stagger */ .about-right .about-card:nth-child(2) { transition-delay: 0.12s; } .about-right .about-card:nth-child(3) { transition-delay: 0.24s; } .about-right .about-card:nth-child(4) { transition-delay: 0.36s; } /* Subtle slide from left for contact info */ .contact-info.fade-in { transform: translateX(-20px); } .contact-info.fade-in.visible { transform: translateX(0); } /* Subtle slide from right for contact form & photo */ .contact-form-wrap.fade-in, .contact-photo.fade-in { transform: translateX(20px); } .contact-form-wrap.fade-in.visible, .contact-photo.fade-in.visible { transform: translateX(0); } .contact-photo.fade-in { transition-delay: 0.15s; } /* ── PAGE DEFAULT ── */ .page-default { padding-top: 120px; } .page-container { max-width: 900px; margin: 0 auto; padding: 60px 24px; } .page-title { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 300; color: var(--cobalt); margin-bottom: 40px; } .page-content p { margin-bottom: 1.5em; line-height: 1.8; color: var(--text-muted); } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { section { padding: 100px 40px; } .about-section { padding: 100px 40px; } .contact-section { padding: 100px 40px; } .header-inner { padding: 20px 32px; } .site-header.scrolled .header-inner { padding: 8px 32px; } .hero-bottom { padding: 28px 40px; } .footer-main { padding: 48px 40px 32px; } .footer-bottom { padding: 16px 40px; } /* Tablet: 2-column grids before collapsing to 1 */ .properties-grid { grid-template-columns: repeat(2, 1fr); } .opinions-grid { grid-template-columns: repeat(2, 1fr); } .slider-card { flex: 0 0 calc(50% - 12px); } .cs-card-top { padding: 28px 32px; } .city-banner { min-height: 420px; } .city-banner-content { padding: 60px 32px; } } @media (max-width: 900px) { .nav-toggle { display: block; } .nav-links { display: none; } .mobile-panel, .mobile-panel-overlay { display: block; } .city-banner { min-height: 380px; } .city-banner-content { padding: 48px 24px; } .city-banner-title { font-size: 1.8rem; } .cta-strip { padding: 40px 24px; } .cta-strip .cta-inner { flex-direction: column; text-align: center; gap: 20px; } .cta-actions { flex-direction: column; align-items: center; } section { padding: 80px 24px; } .about-section { padding: 80px 24px; } .contact-section { padding: 80px 24px; } .header-inner { padding: 14px 20px; } .site-header.scrolled .header-inner { padding: 6px 20px; } .hero-bottom { padding: 24px 24px 40px; } .hero-label { font-size: 0.7rem; letter-spacing: 0.15em; } .hero-kicker { font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 10px; } .hero-sub { margin-top: 14px; } .hero-actions { margin-top: 24px; gap: 12px; } .hero-actions .hero-btn { width: 100%; padding: 16px 22px; } .hero-scroll { display: none; } .about-grid { grid-template-columns: 1fr; gap: 48px; } .about-card { flex-direction: column; } .about-card-img-wrap { width: 100%; height: 220px; min-width: unset; } .services-grid { grid-template-columns: 1fr; } .cs-card-top { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 20px; } .cs-number { font-size: 3.5rem; } .cs-card-steps { grid-template-columns: 1fr; } .cs-step { border-right: none; border-bottom: 1px solid var(--cream-dark); padding: 24px; } .cs-step:last-child { border-bottom: none; } .cs-stats { flex-direction: row; gap: 24px; border-left: none; padding-left: 0; border-top: 1px solid var(--cream-dark); padding-top: 16px; width: 100%; } .cs-stat { text-align: left; } .cs-stat-label { max-width: none; } .properties-grid { grid-template-columns: 1fr; } .portfolio-carousel .property-card { flex: 0 0 75vw; } .portfolio-arrow { display: none; } .faq-answer p { padding-right: 0; } .opinions-grid { grid-template-columns: 1fr; } .slider-card { flex: 0 0 100%; } .contact-grid, .contact-grid.has-photo { grid-template-columns: 1fr; gap: 48px; } .contact-photo { position: static; order: -1; max-height: none; } .contact-photo::before, .contact-photo::after { width: 40px; height: 40px; } .contact-main { gap: 40px; } .contact-section.featured-dark .contact-form-wrap { padding: 0; } .contact-section.featured-dark .contact-form-wrap::before, .contact-section.featured-dark .contact-form-wrap::after { display: none; } .portfolio-header { flex-direction: column; align-items: flex-start; gap: 24px; } .footer-main { padding: 48px 24px 32px; } .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .footer-social { justify-content: center; } .footer-list { align-items: center; } .footer-list a { justify-content: center; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px 24px; } } @media (max-width: 600px) { .hero-label { font-size: 0.6rem; } section { padding: 64px 20px; } .about-section { padding: 64px 20px; } .contact-section { padding: 64px 20px; } .about-card { padding: 20px; } .about-card-img-wrap { height: 180px; } .service-card { padding: 36px 24px; } .opinion-card { padding: 32px 24px; } .faq-question { font-size: 0.9rem; padding: 20px 0; } .faq-answer p { padding-right: 0; } /* Case study slider — tighter on small phones */ .cs-slider { padding: 0 8px; } .cs-number { font-size: 2.5rem; } .cs-card-top { padding: 20px 16px; gap: 16px; } .cs-slider-btn { width: 40px; height: 40px; } .cs-step { padding: 18px 16px; } /* override — na mobile strza\u0142ki s\u0105 pod (flex), nic nie robimy */ /* Parallax smaller */ .parallax-divider { height: 200px; } /* Hero bottom — less padding */ .hero-bottom { padding: 16px 20px 60px; } /* Floating phone — na mobile stała słuchawka (tap = dzwoni), numer ukryty */ .floating-phone-btn { width: 56px; height: 56px; bottom: 20px; right: 20px; } .floating-phone-icon { width: 100%; } .floating-phone-number { display: none; } } /* ========================================================= BRAND ACCENTS — Patryk Rodak Czerwień #F63E4A (główny akcent) + szałwia #CDD8D2 (drugi kolor). Blok dopisany na końcu — wygrywa w kaskadzie, nie rusza bazy. ========================================================= */ ::selection { background: var(--cobalt-light); color: #fff; } ::-moz-selection { background: var(--cobalt-light); color: #fff; } /* Linie sekcji: czerwień → szałwia (oba kolory marki w jednym akcencie) */ .section-line { background: linear-gradient(to right, var(--cobalt), var(--sage-deep)); } /* Kropki-separatory miast w sekcji usług — szałwia na czerwonym tle */ .services-cities .dot { background: var(--sage); } /* Karty usług: szałwiowy pasek u góry jako subtelny, drugi kolor marki */ .service-card { border-top: 3px solid var(--sage); } /* DRUGI KOLOR MARKI JAKO TŁO — szałwia #CDD8D2. Sekcja „O mnie" (tuż pod hero) dostaje pełne szałwiowe tło: drugi kolor jest od razu widoczny, a ciemny tekst na #CDD8D2 jest w pełni czytelny (bezpieczny). */ .about-section { background: var(--sage); } .about-section .about-card { background: var(--white); } /* FAQ zostaje na bieli (kontrast rytmu) */ .faq-section { background: var(--white); } /* ========================================================= TŁA = ZIELEŃ, CZERWIEŃ = TYLKO AKCENT (wg klienta) Sekcje, które wcześniej miały czerwone tło, dostają zieleń: - jasne tła = szałwia #CDD8D2 - ciemne sekcje (biały tekst) = głęboka zieleń --green-dark Czerwień zostaje na akcentach: tytuły (jasne sekcje), linie, przyciski, ikony, num, strzałki - tego NIE ruszamy. ========================================================= */ /* HERO: ciemnozielone tło + zielony gradient u dołu (zamiast czerwieni) */ .hero-section { background: var(--green-dark); } .hero-bg::after { background: linear-gradient( to bottom, transparent 26%, rgba(46, 59, 53, 0.45) 58%, rgba(22, 29, 26, 0.92) 100% ); } .hero-bg-placeholder { background: linear-gradient(135deg, var(--green-dark) 0%, #3c4d45 100%); } /* SEKCJA USŁUG: ciemna zieleń zamiast czerwieni (biały tekst zostaje) */ .services-section { background: var(--green-dark); } /* KONTAKT (wariant dark): ciemna zieleń zamiast czerwieni */ .contact-section.featured-dark { background: var(--green-dark); } /* BANER „Dlaczego ja" (Katowice): zielony overlay. GÓRA wtapia się w jasne tło sekcji nad nim (kremowe), DÓŁ wtapia się w szałwię sekcji „Cytat" pod nim - spójne, płynne przejście Katowice → Cytat → Opinie. */ .city-banner { background-color: var(--green-dark); } .city-banner-overlay { background: linear-gradient(180deg, var(--cream) 0%, rgba(247, 243, 238, 0.85) 2%, rgba(231, 236, 233, 0.45) 6%, rgba(46, 59, 53, 0.6) 11%, rgba(46, 59, 53, 0.85) 18%, rgba(46, 59, 53, 0.9) 50%, rgba(46, 59, 53, 0.85) 82%, rgba(46, 59, 53, 0.6) 90%, rgba(205, 216, 210, 0.6) 96%, var(--sage) 100%); } /* Placeholdery zdjęć (gdy brak fotki) - szałwia zamiast różu/czerwieni */ .about-card-img-placeholder, .property-img-placeholder { background: linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%); } /* Opinie: link „Zobacz wszystkie w Google" pod karuzelą */ .opinions-cta { text-align: center; margin-top: 44px; } /* ========================================================= SEKCJA CYTATU (quote) — duże zdjęcie w kole + elegancki cytat Tło: szałwia (drugi kolor marki). Akcenty: czerwień + Cormorant. ========================================================= */ /* Tło cytatu: od szałwii (góra, = dół banera Katowice) do jasnej szałwii (dół, = tło sekcji Opinie). Dzięki temu 3 sekcje płynnie przechodzą w siebie. */ .quote-section { background: linear-gradient(180deg, var(--sage) 0%, var(--cobalt-pale) 100%); padding: 120px 60px; } .quote-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; } .quote-photo-circle { width: min(360px, 80vw); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 24px 60px rgba(46, 59, 53, 0.28); border: 6px solid var(--white); } .quote-photo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; } .quote-body-col { position: relative; } .quote-mark { display: block; font-family: 'Cormorant Garamond', serif; font-size: 5rem; line-height: 0.7; color: var(--cobalt); opacity: 0.55; margin-bottom: 12px; } .quote-text { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.45; color: var(--text); margin-bottom: 28px; font-weight: 500; } .quote-author-name { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.25rem; color: var(--cobalt); } .quote-author-role { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } @media (max-width: 900px) { .quote-section { padding: 80px 24px; } .quote-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; } .quote-mark { text-align: center; } } /* KONTAKT: na laptopach/desktopie (układ 2-kolumnowy, >900px) zdjęcie „przykleja się" (sticky) i zostaje w polu widzenia podczas przewijania formularza. Na mobile (1 kolumna) bez zmian. */ @media (min-width: 901px) { .contact-grid.has-photo .contact-photo { position: sticky; top: 110px; } } /* ========================================================= HERO PODSTRON (polityka prywatności, zwykłe strony) Ciemnozielone tło pod navbarem - białe menu jest czytelne (na białej podstronie wcześniej znikało: biały tekst na białym tle). ========================================================= */ .page-default--hero { padding-top: 0; } .page-hero { background: var(--green-dark); color: var(--white); padding: 150px 24px 64px; text-align: center; } .page-hero-inner { max-width: 800px; margin: 0 auto; } .page-hero .section-label { color: rgba(255, 255, 255, 0.85); } .page-hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; line-height: 1.15; color: var(--white); margin: 8px 0 0; } .page-hero .section-line { background: linear-gradient(to right, var(--cobalt), var(--sage-deep)); margin: 20px auto 0; } .privacy-page--with-hero { padding-top: 64px; } @media (max-width: 640px) { .page-hero { padding: 120px 20px 48px; } }