/* ========================================================= HOLA Nieruchomości – Main Stylesheet Clean, sharp, premium. No rounded corners. Brand: HOLA petrol teal (#0d4240) + lighter teal accent on cool off-white. ========================================================= */ /* Fonts są inlineowane w przez er_render_critical_css() w inc/enqueue.php. */ /* ── VARIABLES ── */ :root { --cobalt: #0d4240; --cobalt-mid: #155f5b; --cobalt-light: #2a9d8f; --cobalt-pale: #e6f2f0; --cream: #f4f7f6; --cream-dark: #e1e9e6; --text: #16211f; --text-muted: #5c6b69; --white: #ffffff; } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } 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(244, 247, 246, 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: 'Dancing Script', cursive; 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); } /* Klikalny telefon w nagłówku */ .nav-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.03em; font-weight: 500; color: var(--white); text-decoration: none; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); transition: background 0.3s, color 0.3s, border-color 0.3s; white-space: nowrap; } .nav-phone .icon { flex-shrink: 0; } .nav-phone:hover { background: var(--white); color: var(--cobalt); } .site-header.scrolled .nav-phone { color: var(--cobalt); border-color: var(--cobalt-pale); background: var(--cobalt-pale); } .site-header.scrolled .nav-phone:hover { background: var(--cobalt); color: var(--white); } @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(13, 66, 64, 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: center; overflow: hidden; background: var(--cobalt); } .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( 180deg, rgba(13, 66, 64, 0.5) 0%, rgba(13, 66, 64, 0.32) 45%, rgba(13, 66, 64, 0.7) 100% ); } .hero-bg-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-mid) 50%, var(--cobalt-light) 100%); } .hero-overlay-content { position: relative; z-index: 2; width: 100%; max-width: 920px; padding: 80px 24px 0; text-align: center; color: #fff; transform: translateY(20px); } .hero-kicker { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); font-weight: 500; margin-bottom: 18px; } .hero-h1 { font-family: 'Jost', sans-serif; font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .hero-sub { font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.92); max-width: 640px; margin: 20px auto 0; } .hero-actions { margin-top: 36px; 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); 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; } .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: 1.1fr 0.9fr; gap: 72px; 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); } /* Zdjęcie biura/zespołu po prawej (ramka w kolorze marki) */ .about-media { padding: 0 16px 16px 0; } .about-photo { position: relative; } .about-photo::before { content: ''; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--cobalt); z-index: 0; } .about-photo img, .about-photo .about-photo-placeholder { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; } .about-photo-placeholder { background: linear-gradient(150deg, var(--cobalt) 0%, var(--cobalt-mid) 100%); display: flex; align-items: center; justify-content: center; } /* Zalety pod spodem — minimalistyczny rząd z ikonami */ .about-advantages { max-width: 1280px; margin: 72px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; } .about-adv { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--cobalt-pale); } .about-adv-icon { color: var(--cobalt); line-height: 0; } .about-adv h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.3; } .about-adv p { font-size: 0.9rem; line-height: 1.65; 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; } /* 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; } } /* ── SPRZEDANE — slider z dużymi zdjęciami ── */ .sold-section { background: var(--cream); } .sold-header { max-width: 760px; margin-bottom: 48px; } .sold-lead { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-top: 4px; } .sold-carousel { margin-top: 8px; } .portfolio-carousel .sold-card { flex: 0 0 440px; min-width: 0; } .sold-card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cobalt-pale); } .sold-card-media > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .sold-card:hover .sold-card-media > img { transform: scale(1.04); } .sold-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cobalt-pale) 0%, var(--cobalt) 100%); } .sold-badge { position: absolute; top: 0; left: 0; z-index: 2; background: var(--cobalt); color: #fff; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 9px 16px; } /* Wynajęte — odróżnij od „Sprzedane" jaśniejszym odcieniem marki */ .sold-badge--wynajete { background: var(--cobalt-mid); } .sold-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; color: #fff; background: linear-gradient(to top, rgba(13, 66, 64, 0.95), rgba(13, 66, 64, 0.4) 62%, rgba(13, 66, 64, 0) 100%); } .sold-title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; line-height: 1.15; } .sold-details { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease; } .sold-card:hover .sold-details { max-height: 220px; opacity: 1; margin-top: 12px; } .sold-details p { font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; } .sold-meta { display: flex; flex-wrap: wrap; gap: 8px; } .sold-meta span { font-size: 0.7rem; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.18); padding: 5px 11px; } /* ── 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; gap: 24px; width: max-content; animation: carousel-scroll 40s linear infinite; } .portfolio-carousel-track:hover { animation-play-state: paused; } @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); } /* Ciemna sekcja opinii — kontynuacja gradientu z banera "Obszary działania" powyżej. Karty pozostają białe, więc dobrze odcinają się od ciemnego tła. */ .testimonials-section .section-label { color: rgba(255, 255, 255, 0.7); } .testimonials-section .section-title { color: var(--white); } .testimonials-section .section-line { background: linear-gradient(to right, var(--cobalt-light), rgba(255, 255, 255, 0.2), transparent); } .testimonials-section .opinions-cta a { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.5); } .testimonials-section .opinions-cta a:hover { background: var(--white); color: var(--cobalt); } .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(13, 66, 64, 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 { display: inline-block; vertical-align: middle; flex-shrink: 0; } .opinions-cta { text-align: center; margin-top: 48px; } /* 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; /* Góra: krem (łączy z jasną sekcją powyżej). Środek: półprzezroczysty (widać zdjęcie). Dół: pełny kolor marki = płynne przejście w ciemną sekcję opinii poniżej (jeden ciągły ciemny blok). */ background: linear-gradient(180deg, var(--cream) 0%, rgba(244, 247, 246, 0.85) 2%, rgba(244, 247, 246, 0.55) 5%, rgba(244, 247, 246, 0.25) 8%, rgba(13, 66, 64, 0.4) 11%, rgba(13, 66, 64, 0.7) 14%, rgba(13, 66, 64, 0.82) 18%, rgba(13, 66, 64, 0.85) 55%, rgba(13, 66, 64, 0.92) 80%, var(--cobalt) 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; } /* Slider Sprzedane na mobile: auto-przewijanie (marquee) + swipe/strzałki (JS), jak w My Blue House — natywny scroll psuł działanie suwaka. */ .portfolio-carousel { overflow: hidden; } .portfolio-carousel-track { animation: carousel-scroll 36s linear infinite; } .portfolio-carousel .sold-card { flex: 0 0 84vw; } /* Brak hovera na dotyku — szczegóły widoczne od razu */ .sold-details { max-height: 220px; opacity: 1; margin-top: 12px; } } /* ── PARALLAX DIVIDER ── */ /* Zdjęcie „przyklejone" do tła (fixed) — przy scrollu treść przesuwa się po nieruchomym zdjęciu. Wysokość 50vh. */ .parallax-divider { height: 50vh; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } @supports (-webkit-overflow-scrolling: touch) { /* iOS nie obsługuje background-attachment: fixed — fallback */ .parallax-divider { background-attachment: scroll; } } @media (max-width: 900px) { .parallax-divider { height: 40vh; background-attachment: scroll; } } /* ── CTA STRIP ── */ .cta-strip { padding: 110px 60px; background: var(--cream); border-top: none; } /* CTA pod sekcją usług — ciemny blok marki z białym tekstem */ .cta-strip--services { background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-mid) 100%); } .cta-strip--services .cta-title { color: var(--white); } .cta-strip--services .cta-text { color: rgba(255, 255, 255, 0.78); } .cta-strip--services .cta-phone { color: rgba(255, 255, 255, 0.9); } .cta-strip--services .cta-phone:hover { color: var(--white); } /* Biały przycisk na ciemnym tle — wysoki kontrast */ .cta-strip--services .btn-primary { background: var(--white); color: var(--cobalt); } .cta-strip--services .btn-primary:hover { background: var(--cobalt-pale); color: var(--cobalt); } .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: sticky; top: 100px; 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 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); } .form-status { font-size: 0.85rem; padding: 12px 0; } .form-status.success { color: #1a5e3a; } .form-status.error { color: #b91c1c; } /* CF7 [acceptance] — spłaszczamy zagnieżdżone spany CF7, żeby checkbox zgody ułożył się jak w formularzu natywnym (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; } /* 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; } .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), contact ────────────────────────────────────────────── */ /* Shared accent: thin line above section title for featured sections */ .services-section .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, .contact-section.featured-dark .section-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.01em; } /* 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 (zieleń marki) na białym tle — inaczej biały na białym = niewidoczny i widać tylko biały kwadrat po zaznaczeniu zgody. */ .contact-section.featured-dark .form-consent input[type="checkbox"]:checked::after { border-color: var(--cobalt); } .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 .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(13, 66, 64, 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(13, 66, 64,0.15), rgba(13, 66, 64,0.45)); transition: background 0.3s; } .video-poster:hover::after { background: linear-gradient(180deg, rgba(13, 66, 64,0.05), rgba(13, 66, 64,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(13, 66, 64, 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; } } /* ── MOBILE PANEL ── */ /* Gdy panel mobilny jest otwarty — ukryj logo w nagłówku, żeby nie nachodziło na panel */ .menu-open .site-header .logo { opacity: 0; pointer-events: none; transition: opacity 0.2s; } .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); } /* Logo na dole panelu mobilnego — prawdziwe, wgrane logo (nie tekst skryptowy) */ .mobile-panel-brand { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cream-dark); } .mobile-panel-logo { height: 46px; width: auto; max-width: 200px; object-fit: contain; display: block; filter: none; } .mobile-panel-logo-text { color: var(--cobalt); font-size: 1.4rem; } .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: 192px; max-width: 560px; 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 ── */ /* Page hero — kolorowy nagłówek podstron (np. polityka prywatności), dzięki czemu biała nawigacja jest czytelna na górze (jak na froncie). */ .site-main.has-page-hero { padding-top: 0; } .page-hero { background: var(--cobalt); color: #fff; padding: 150px 60px 64px; text-align: center; } .page-hero-inner { max-width: 820px; margin: 0 auto; } .page-hero-label { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 14px; font-weight: 500; } .page-hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; line-height: 1.1; color: #fff; } @media (max-width: 640px) { .page-hero { padding: 120px 24px 48px; } } .privacy-page { max-width: 800px; margin: 0 auto; padding: 140px 24px 80px; } .has-page-hero .privacy-page { padding-top: 56px; } .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 ── */ .floating-phone-btn { position: fixed; bottom: 28px; right: 28px; z-index: 90; height: 60px; 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), 0 0 0 0 rgba(255, 255, 255, 0.5); transition: box-shadow 0.3s, background 0.3s, opacity 0.4s; animation: phonePulse 2.4s ease-in-out infinite; } .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; font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; transition: max-width 0.45s ease, opacity 0.3s ease, padding 0.45s ease; } .floating-phone-btn:hover { background: var(--cobalt-mid); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.18); animation-play-state: paused; } .floating-phone-btn:hover .floating-phone-number { max-width: 240px; opacity: 1; padding: 0 6px 0 22px; } @keyframes phonePulse { 0%, 100% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 12px rgba(255, 255, 255, 0); } } .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); } /* Mobile: bez animacji przesunięcia (powodowały problem z dojechaniem scrollem na sam dół) — treść od razu widoczna i stabilna. */ @media (max-width: 900px) { .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Staggered delays for grid children */ .opinions-grid .fade-in:nth-child(2), .services-grid .fade-in:nth-child(2) { transition-delay: 0.1s; } .opinions-grid .fade-in:nth-child(3), .services-grid .fade-in:nth-child(3) { transition-delay: 0.2s; } /* About cards stagger */ .about-adv:nth-child(2) { transition-delay: 0.1s; } .about-adv:nth-child(3) { transition-delay: 0.2s; } .about-adv:nth-child(4) { transition-delay: 0.3s; } /* 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; } .footer-main { padding: 48px 40px 32px; } .footer-bottom { padding: 16px 40px; } /* Tablet: 2-column grids before collapsing to 1 */ .opinions-grid { grid-template-columns: repeat(2, 1fr); } .slider-card { flex: 0 0 calc(50% - 12px); } .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-overlay-content { padding-top: 72px; } .hero-h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); } .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; } .hero-btn { width: 100%; padding: 17px 22px; font-size: 0.85rem; } .hero-scroll { display: none; } .about-grid { grid-template-columns: 1fr; gap: 48px; } .about-media { padding: 0; max-width: 460px; } .about-photo::before { display: none; } .about-advantages { grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; } .services-grid { grid-template-columns: 1fr; } .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; } /* Zdjęcie kontaktu jest tu pełnej szerokości (jedna kolumna), więc 12px boczne wysunięcie dekoracyjnych narożników wychodziło poza viewport i dawało poziomy scroll. Narożniki są na overflow:visible + sticky, więc overflow-x:clip na body ich nie ucina - trzymamy je przy krawędzi zdjęcia. */ .contact-photo::before { right: 0; } .contact-photo::after { left: 0; } .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; } .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-h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); } section { padding: 64px 20px; } .about-section { padding: 64px 20px; } .contact-section { padding: 64px 20px; } .about-advantages { grid-template-columns: 1fr; } .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; } /* Parallax smaller */ .parallax-divider { height: 200px; } /* Floating phone — kwadratowy przycisk z samą ikoną (numer ukryty) */ .floating-phone-btn { height: 56px; width: 56px; bottom: 20px; right: 20px; } .floating-phone-icon { width: 56px; } .floating-phone-number { display: none !important; } .floating-phone-btn:hover .floating-phone-number { max-width: 0; opacity: 0; padding: 0; } } /* ========================================================= PROCESS — Sprzedaż krok po kroku (sticky photo + scroll) ========================================================= */ .process-section { padding: 120px 60px; background: var(--cream); } .process-section .steps-photos-container { display: flex; flex-direction: column; margin: 0 auto; max-width: 1280px; } .process-section .steps-photos-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 50px; } .process-section .steps-photos-title { text-align: center; margin-bottom: 0; } .process-section .step-line-horizontal-header { height: 3px; background: var(--cobalt); width: 80px; margin-top: 22px; } .process-section .steps-photos-content { display: flex; flex-direction: row; gap: 20px; } .process-section .steps-photos-content.no-photos { justify-content: center; } .process-section .steps-column { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; } .process-section .sticky-photo-range { align-items: flex-end; margin-right: 20px; } .process-section .sticky-photo-container { position: sticky; top: 100px; width: 90%; background-size: cover; background-position: center; } /* Minimalistyczna ramka wychodząca w lewo (offset) */ .process-section .sticky-photo-container::before { content: ''; position: absolute; top: -16px; left: -16px; right: 16px; bottom: 16px; border: 1px solid var(--cobalt); z-index: 0; pointer-events: none; } .process-section .sticky-photo-container img { position: relative; z-index: 1; width: 100%; aspect-ratio: 9 / 10; object-fit: cover; object-position: top; transition: opacity 0.55s ease; display: block; } .process-section .steps-photos-steps { margin: 0 10px; } .process-section .step-step { display: flex; flex-direction: column; align-items: center; max-width: 520px; text-align: center; } .process-section .step-vertical-line { height: 80px; width: 3px; background: var(--cobalt); margin: 30px 0 40px; } .process-section .step-number { color: var(--cobalt); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; } .process-section .step-title { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 600; color: var(--cobalt); line-height: 1.15; margin: 0 0 14px; } .process-section .step-text { line-height: 1.7; color: var(--text-muted); font-size: 0.98rem; } /* Na desktopie zdjęcie kroku jest w sticky-photo — per-krokowe ukrywamy */ .process-section .step-photo-wrap { display: none; } @media (max-width: 1200px) { .process-section .sticky-photo-container { width: 100%; } } @media (max-width: 900px) { .process-section { padding: 80px 24px; } } /* Mobile: kroki jako nakładające się karty (zdjęcie + podpis + tekst), sticky stacking — kolejne karty nachodzą na poprzednie przy scrollu. */ @media (max-width: 700px) { .process-section .sticky-photo-range { display: none; } .process-section .steps-photos-content { display: block; gap: 0; } .process-section .steps-photos-steps { display: block; margin: 0; width: 100%; } .process-section .step-step { position: sticky; top: 64px; display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100svh - 84px); max-width: 100%; text-align: left; background: #fff; border: 1px solid var(--cream-dark); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); overflow: hidden; margin: 0 0 55vh; padding: 0; } .process-section .step-vertical-line { display: none; } .process-section .step-photo-wrap { display: block; position: relative; line-height: 0; flex: 0 0 auto; height: 40vh; max-height: 360px; overflow: hidden; } .process-section .step-photo-wrap img, .process-section .step-photo-wrap picture, .process-section .step-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .process-section .step-photo-caption { position: absolute; left: 0; bottom: 0; background: var(--cobalt); color: #fff; padding: 9px 16px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .process-section .has-photo .step-number { display: none; } .process-section .step-step > .step-number, .process-section .step-step > .step-title, .process-section .step-step > .step-text { flex: 0 0 auto; } .process-section .step-number { padding: 20px 24px 0; margin: 0; } .process-section .step-title { padding: 22px 24px 0; font-size: 1.55rem; margin: 0; } .process-section .has-photo .step-title::before { content: ''; display: block; width: 44px; height: 2px; background: var(--cobalt); margin-bottom: 18px; } .process-section .step-text { padding: 12px 24px 80px; font-size: 1rem; line-height: 1.6; } .process-section .step-step:not(.has-photo) { justify-content: center; } }