:root { --wine: #47141e; --wine-2: #2d0c13; --wine-3: #6b2533; --cream: #f8f5f1; --paper: #ffffff; --ink: #1d1718; --muted: #72696b; --line: rgba(71, 20, 30, .14); --gradient: linear-gradient(110deg, #ff5f6d 0%, #ffc371 100%); --shadow: 0 28px 90px rgba(55, 19, 26, .12); --shadow-soft: 0 16px 50px rgba(55, 19, 26, .09); --radius-xl: 36px; --radius-lg: 26px; --radius-md: 18px; --max: 1320px; --header-h: 88px; --heading-font: 'Instrument Serif', Georgia, serif; --heading-weight: 400; --heading-letter-spacing: -.03em; } /* Trzy warianty fontu nagłówkowego — wybierane klasą na . */ body.font-option-1 { --heading-font: 'Instrument Serif', Georgia, serif; --heading-weight: 400; --heading-letter-spacing: -.035em; } body.font-option-2 { --heading-font: 'Cormorant Garamond', Georgia, serif; --heading-weight: 600; --heading-letter-spacing: -.025em; } body.font-option-3 { --heading-font: 'Plus Jakarta Sans', 'Manrope', Arial, sans-serif; --heading-weight: 700; --heading-letter-spacing: -.055em; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Manrope', Arial, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; } body.menu-open { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { color: inherit; } ::selection { background: rgba(255, 95, 109, .28); } .container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; } .section { padding: 112px 0; } .section-cream { background: var(--cream); } .section-wine { background: var(--wine); color: #fff; } .overflow-hidden { overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--wine); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; } .eyebrow-light { color: rgba(255,255,255,.78); } .display { margin: 0; font-family: var(--heading-font); font-size: clamp(58px, 7vw, 116px); font-weight: var(--heading-weight); line-height: .92; letter-spacing: var(--heading-letter-spacing); } .h2 { margin: 0; font-family: var(--heading-font); font-size: clamp(42px, 4.6vw, 72px); font-weight: var(--heading-weight); line-height: 1.02; letter-spacing: var(--heading-letter-spacing); } .h3 { margin: 0; font-size: 24px; line-height: 1.18; } .lead { max-width: 680px; color: var(--muted); font-size: 18px; line-height: 1.75; } .section-wine .lead { color: rgba(255,255,255,.66); } .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .h2 em, .display em { font-family: var(--heading-font); font-weight: inherit; } body.font-option-3 .display { font-size: clamp(52px, 6.25vw, 104px); line-height: .96; } body.font-option-3 .h2 { font-size: clamp(39px, 4.15vw, 66px); line-height: 1.04; } body.font-option-3 .offer-title, body.font-option-3 .service-card h3, body.font-option-3 .process-card h3, body.font-option-3 .article-card h3 { letter-spacing: -.035em; } .btn { --btn-bg: transparent; --btn-color: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--btn-bg); color: var(--btn-color); font-weight: 800; cursor: pointer; overflow: hidden; transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .btn::before { content: ''; position: absolute; inset: 0; background: var(--wine); transform: translateY(102%); transition: transform .35s cubic-bezier(.22,1,.36,1); } .btn > * { position: relative; z-index: 1; } .btn:hover { color: #fff; border-color: var(--wine); box-shadow: 0 12px 34px rgba(71,20,30,.18); } .btn:hover::before { transform: translateY(0); } .btn-primary { --btn-bg: var(--wine); --btn-color: #fff; border-color: var(--wine); } .btn-primary::before { background: var(--gradient); } .btn-gradient { --btn-bg: var(--gradient); --btn-color: var(--wine-2); border-color: transparent; } .btn-gradient::before { background: #fff; } .btn-gradient:hover { color: var(--wine); border-color: #fff; } .btn-light { --btn-color: #fff; border-color: rgba(255,255,255,.28); } .btn-light::before { background: #fff; } .btn-light:hover { color: var(--wine); border-color: #fff; } .btn-icon { width: 54px; padding: 0; } .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-h); color: #fff; transition: background .35s ease, height .35s ease, box-shadow .35s ease, color .35s ease; } .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.18); } .header.is-scrolled, .header.header-solid { height: 76px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 40px rgba(35, 15, 20, .08); backdrop-filter: blur(16px); } .header.is-scrolled::after, .header.header-solid::after { background: var(--line); } .nav { height: 100%; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 34px; } .brand { display: inline-flex; align-items: center; width: 174px; height: 58px; overflow: hidden; } .brand img { width: 174px; height: auto; } .header.is-scrolled .brand-white, .header.header-solid .brand-white { display: none; } .brand-color { display: none; } .header.is-scrolled .brand-color, .header.header-solid .brand-color { display: block; } .nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.1vw, 34px); } .nav-links a { position: relative; font-size: 14px; font-weight: 700; white-space: nowrap; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: currentColor; transition: right .3s ease; } .nav-links a:hover::after, .nav-links a.active::after { right: 0; } .nav-actions { display: flex; align-items: center; gap: 10px; } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary { --btn-bg: #fff; --btn-color: var(--wine); border-color: #fff; } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary::before { background: var(--gradient); } .burger { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; } .burger span { display: block; width: 19px; height: 1px; margin: 5px auto; background: currentColor; transition: .3s; } .burger.active span:first-child { transform: translateY(3px) rotate(45deg); } .burger.active span:last-child { transform: translateY(-3px) rotate(-45deg); } .hero { position: relative; min-height: 920px; height: 100svh; display: flex; align-items: center; color: #fff; background: var(--wine-2); overflow: hidden; } .hero-media { position: absolute; inset: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; transform: scale(1.04); animation: heroZoom 14s ease-out forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32,7,13,.92) 0%, rgba(43,8,16,.68) 42%, rgba(43,8,16,.14) 72%), linear-gradient(0deg, rgba(31,7,12,.72) 0%, transparent 44%); } .hero-content { position: relative; z-index: 2; padding-top: var(--header-h); } .hero-copy { width: min(780px, 62vw); } .hero-copy .display { max-width: 800px; } .hero-copy .lead { max-width: 640px; margin: 26px 0 34px; color: rgba(255,255,255,.78); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-signature { margin-top: 34px; display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,.65); font-size: 13px; } .hero-signature .line { width: 74px; height: 1px; background: rgba(255,255,255,.35); } .hero-ring { position: absolute; right: 7vw; top: 18%; width: clamp(190px, 19vw, 340px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; z-index: 2; animation: ringFloat 6s ease-in-out infinite; } .hero-ring::before { content: ''; position: absolute; inset: 24%; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; } .hero-ring::after { content: ''; position: absolute; width: 14px; height: 14px; right: 8%; top: 28%; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 36px rgba(255,120,110,.6); } @keyframes ringFloat { 50% { transform: translateY(18px) rotate(8deg); } } .hero-index { position: absolute; right: 3vw; bottom: 42px; z-index: 2; display: grid; gap: 6px; color: rgba(255,255,255,.72); text-align: right; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .hero-index strong { color: #fff; font-size: 23px; letter-spacing: 0; } .search-dock { position: relative; z-index: 10; margin-top: -62px; } .search-panel { padding: 18px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr auto; gap: 10px; backdrop-filter: blur(12px); } .search-field { min-width: 0; padding: 12px 18px; border-right: 1px solid var(--line); } .search-field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .search-field select, .search-field input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 800; } .search-panel .btn { min-width: 154px; } .section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 46px; } .section-head .lead { margin: 0; max-width: 470px; } .link-arrow { display: inline-flex; align-items: center; gap: 14px; color: var(--wine); font-weight: 800; line-height: 1.25; } .link-arrow > span:first-child { display: inline; width: auto; height: auto; border: 0; border-radius: 0; } .link-arrow > span:last-child { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease; } .link-arrow:hover > span:last-child { transform: translateX(6px); background: var(--wine); border-color: var(--wine); color: #fff; } .offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .offer-card { position: relative; min-height: 500px; border-radius: var(--radius-lg); overflow: hidden; background: var(--wine); color: #fff; box-shadow: var(--shadow-soft); isolation: isolate; } .offer-card:not(.offer-card-featured) { min-height: 500px; } .offer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); } .offer-card::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(24,4,9,.94) 0%, rgba(24,4,9,.08) 68%); } .offer-card:hover img { transform: scale(1.06); } .offer-top { position: absolute; z-index: 2; inset: 20px 20px auto; display: flex; justify-content: space-between; align-items: flex-start; } .tag { display: inline-flex; min-height: 32px; align-items: center; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.93); color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fav { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(33,8,14,.24); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: .3s; } .fav:hover, .fav.active { background: #fff; color: #df5364; } .offer-body { position: absolute; inset: auto 0 0; z-index: 2; padding: 28px; } .offer-location { margin-bottom: 8px; color: rgba(255,255,255,.65); font-size: 13px; } .offer-title { margin: 0 0 18px; font-family: var(--heading-font); font-size: 31px; line-height: 1.06; font-weight: var(--heading-weight); } .offer-card-featured .offer-title { font-size: 31px; } .offer-meta { display: flex; flex-wrap: wrap; gap: 8px; } .offer-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.86); font-size: 12px; backdrop-filter: blur(6px); } .offer-price { margin-top: 20px; display: flex; justify-content: space-between; align-items: end; gap: 16px; } .offer-price strong { font-size: 24px; } .offer-price small { color: rgba(255,255,255,.62); } .story-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(50px, 8vw, 120px); } .story-media { position: relative; min-height: 690px; } .story-media .image-main { position: absolute; inset: 0 12% 12% 0; width: 88%; height: 88%; object-fit: cover; border-radius: var(--radius-xl); } .story-media .image-small { position: absolute; right: 0; bottom: 0; width: 42%; height: 44%; object-fit: cover; border: 10px solid var(--cream); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .story-ring { position: absolute; right: 2%; top: 4%; width: 145px; aspect-ratio: 1; border: 18px solid transparent; border-radius: 50%; background: var(--gradient) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .story-copy .lead { margin: 24px 0 34px; } .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 40px 0; } .stat { padding-top: 18px; border-top: 1px solid var(--line); } .stat strong { display: block; color: var(--wine); font-family: var(--heading-font); font-size: 45px; font-weight: var(--heading-weight); line-height: 1; } .stat span { color: var(--muted); font-size: 13px; } .signature { margin: 26px 0 0; color: var(--wine); font-family: var(--heading-font); font-size: 25px; font-style: italic; } .services { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .service-card { position: relative; min-height: 360px; padding: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); background: rgba(255,255,255,.045); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s ease, background .35s ease; } .service-card:hover { transform: translateY(-10px); background: rgba(255,255,255,.08); } .service-number { position: absolute; top: 20px; right: 25px; color: rgba(255,255,255,.11); font-family: var(--heading-font); font-size: 80px; line-height: 1; } .service-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 64px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #ffc071; } .service-card h3 { margin-bottom: 14px; font-family: var(--heading-font); font-size: 35px; font-weight: var(--heading-weight); } .service-card p { margin: 0 0 24px; color: rgba(255,255,255,.6); } .service-card .link-arrow { margin-top: auto; align-self: flex-start; color: #fff; } .service-card .link-arrow > span:last-child { border-color: rgba(255,255,255,.25); } .process-intro { display: grid; grid-template-columns: .75fr 1fr; gap: 60px; align-items: end; margin-bottom: 58px; } .process-board { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; } .process-nav { position: sticky; top: 110px; display: grid; gap: 10px; } .process-pill { display: flex; align-items: center; gap: 15px; padding: 18px 19px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .3s; } .process-pill strong { color: var(--wine); font-family: var(--heading-font); font-size: 30px; font-weight: var(--heading-weight); } .process-pill span { font-size: 13px; font-weight: 800; } .process-pill:hover, .process-pill.active { transform: translateX(8px); border-color: rgba(71,20,30,.35); box-shadow: var(--shadow-soft); } .process-cards { display: grid; gap: 20px; } .process-card { position: relative; min-height: 410px; display: grid; grid-template-columns: 1fr .92fr; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; } .process-card:nth-child(even) { grid-template-columns: .92fr 1fr; } .process-card:nth-child(even) .process-card-media { order: -1; } .process-card-content { padding: clamp(32px, 5vw, 62px); } .process-card .kicker { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .process-card .number { margin: 18px 0 28px; color: rgba(71,20,30,.12); font-family: var(--heading-font); font-size: 86px; line-height: .7; } .process-card h3 { margin-bottom: 14px; font-family: var(--heading-font); font-size: 39px; font-weight: var(--heading-weight); } .process-card p { color: var(--muted); } .process-card-media img { width: 100%; height: 100%; object-fit: cover; } .team-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: end; } .team-intro .lead { margin: 0; } .team-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 18px; margin-top: 48px; } .agent-card { position: relative; min-height: 520px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; background: var(--wine); } .agent-card:first-child { min-height: 610px; } .agent-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .75s cubic-bezier(.22,1,.36,1); } .agent-card:hover img { transform: scale(1.045); } .agent-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(37,7,13,.94), transparent 66%); } .agent-info { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; } .agent-info h3 { margin-bottom: 5px; font-family: var(--heading-font); font-size: 31px; font-weight: var(--heading-weight); } .agent-info p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; } .agent-arrow { position: absolute; z-index: 2; right: 24px; top: 24px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(37,7,13,.18); backdrop-filter: blur(8px); transition: .3s; } .agent-card:hover .agent-arrow { background: #fff; color: var(--wine); transform: rotate(45deg); } .valuation { padding: 42px; border-radius: var(--radius-xl); background: var(--gradient); color: var(--wine-2); display: grid; grid-template-columns: 1fr .82fr; gap: 50px; align-items: center; overflow: hidden; position: relative; } .valuation::after { content: ''; position: absolute; right: -110px; top: -150px; width: 470px; aspect-ratio: 1; border: 70px solid rgba(255,255,255,.28); border-radius: 50%; } .valuation .h2 { font-size: clamp(40px, 4vw, 68px); } .valuation p { max-width: 610px; } .valuation-form { position: relative; z-index: 2; padding: 28px; border-radius: 24px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-soft); } .form-grid { display: grid; gap: 12px; } .form-field label { display: block; margin: 0 0 6px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(71,20,30,.14); border-radius: 14px; background: #fff; color: var(--ink); outline: 0; transition: border .25s, box-shadow .25s; } textarea.input { min-height: 130px; padding-top: 14px; resize: vertical; } .input:focus { border-color: var(--wine); box-shadow: 0 0 0 4px rgba(71,20,30,.08); } .form-note { color: rgba(45,12,19,.6); font-size: 11px; } .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .article-card { min-height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; } .article-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); } .article-card img { width: 100%; height: 260px; object-fit: cover; } .article-card:first-child img { height: 260px; } .article-body { flex: 1; padding: 24px; } .article-meta { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .article-card h3 { margin: 12px 0 10px; font-family: var(--heading-font); font-size: 29px; font-weight: var(--heading-weight); } .article-card p { color: var(--muted); font-size: 14px; } .footer { padding: 82px 0 24px; background: var(--wine-2); color: #fff; } .footer-top { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 50px; } .footer-logo { width: 200px; height: 74px; overflow: hidden; } .footer-logo img { width: 200px; } .footer-about p { max-width: 390px; color: rgba(255,255,255,.56); font-size: 14px; } .footer h4 { margin: 4px 0 22px; color: #ffc071; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; } .footer a, .footer p { color: rgba(255,255,255,.65); } .footer a { display: block; margin: 10px 0; font-size: 14px; transition: color .2s, transform .2s; } .footer a:hover { color: #fff; transform: translateX(4px); } .footer-bottom { margin-top: 58px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.42); font-size: 12px; } /* Property page */ .page-main { padding-top: 76px; } .property-head { padding: 42px 0 26px; background: #fff; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: var(--muted); font-size: 12px; } .breadcrumbs a:hover { color: var(--wine); } .property-title-row { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: end; } .property-title { margin: 0; max-width: 900px; font-family: var(--heading-font); font-size: clamp(44px, 5.3vw, 82px); line-height: .97; font-weight: var(--heading-weight); letter-spacing: -.035em; } .property-location { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--muted); } .property-actions { display: flex; gap: 10px; } .property-actions .btn { min-width: 54px; } .gallery { display: grid; grid-template-columns: 1.45fr .72fr .72fr; grid-template-rows: 285px 285px; gap: 10px; padding: 0 10px; } .gallery-item { position: relative; border-radius: 18px; overflow: hidden; cursor: zoom-in; } .gallery-item:first-child { grid-row: 1 / 3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .gallery-item:hover img { transform: scale(1.035); } .gallery-count { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 12px; font-weight: 800; cursor: pointer; } .property-summary { padding: 42px 0 30px; border-bottom: 1px solid var(--line); } .summary-grid { display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: center; } .property-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; } .property-badges .tag { border: 1px solid var(--line); background: var(--cream); } .property-facts { display: flex; flex-wrap: wrap; gap: 0; } .fact { min-width: 150px; padding: 4px 30px 4px 0; margin-right: 30px; border-right: 1px solid var(--line); } .fact:last-child { border: 0; } .fact span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .fact strong { display: block; margin-top: 5px; color: var(--wine); font-size: 25px; } .property-price { text-align: right; } .property-price span { display: block; color: var(--muted); font-size: 12px; } .property-price strong { display: block; color: var(--wine); font-size: clamp(34px, 3.3vw, 52px); line-height: 1.1; } .property-price small { color: var(--muted); } .property-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 70px; align-items: start; padding-top: 68px; } .property-content { min-width: 0; } .content-section { padding: 0 0 54px; margin-bottom: 54px; border-bottom: 1px solid var(--line); } .content-section:last-child { border-bottom: 0; } .content-section h2 { margin: 0 0 24px; font-family: var(--heading-font); font-size: 42px; font-weight: var(--heading-weight); } .description { color: #4e4547; font-size: 17px; } .description p { margin: 0 0 18px; } .description ul { padding-left: 20px; } .description-more { max-height: 330px; overflow: hidden; position: relative; transition: max-height .5s ease; } .description-more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(transparent, #fff); transition: opacity .3s; } .description-more.expanded { max-height: 1800px; } .description-more.expanded::after { opacity: 0; pointer-events: none; } .read-more { margin-top: 16px; border: 0; padding: 0; background: transparent; color: var(--wine); font-weight: 800; cursor: pointer; } .details-groups { display: grid; gap: 34px; } .detail-group h3 { margin: 0 0 18px; color: var(--wine); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; } .detail-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 28px; } .detail-row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); } .detail-row span { color: var(--muted); font-size: 14px; } .detail-row strong { text-align: right; font-size: 14px; } .amenities { display: flex; flex-wrap: wrap; gap: 9px; } .amenity { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--wine); font-size: 12px; font-weight: 700; } .map-card { min-height: 420px; padding: 30px; border-radius: var(--radius-lg); background: linear-gradient(rgba(71,20,30,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(71,20,30,.035) 1px, transparent 1px), #f4f0eb; background-size: 36px 36px; position: relative; overflow: hidden; } .map-card::before, .map-card::after { content: ''; position: absolute; border: 3px solid rgba(71,20,30,.12); border-radius: 50%; } .map-card::before { width: 400px; height: 400px; left: -100px; top: -180px; } .map-card::after { width: 300px; height: 300px; right: -90px; bottom: -170px; } .map-route { position: absolute; left: 12%; right: 13%; top: 48%; height: 90px; border-top: 5px solid rgba(71,20,30,.22); border-radius: 50%; transform: rotate(-8deg); } .map-pin { position: absolute; left: 50%; top: 46%; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50% 50% 50% 8px; background: var(--wine); color: #fff; transform: translate(-50%,-50%) rotate(-45deg); box-shadow: 0 16px 40px rgba(71,20,30,.24); } .map-pin svg { transform: rotate(45deg); } .map-info { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .map-info strong { display: block; margin-bottom: 5px; } .map-info span { color: var(--muted); font-size: 13px; } .agent-panel { position: sticky; top: 102px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-soft); } .agent-panel-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .agent-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center top; } .agent-panel h3 { margin: 0; font-family: var(--heading-font); font-size: 27px; font-weight: var(--heading-weight); } .agent-role { color: var(--muted); font-size: 12px; } .agent-links { display: grid; gap: 8px; margin-bottom: 22px; } .agent-links a { display: flex; align-items: center; gap: 10px; color: var(--wine); font-size: 14px; font-weight: 800; } .agent-panel .form-grid { margin-top: 18px; } .agent-panel .btn { width: 100%; } .agent-consent { color: var(--muted); font-size: 10px; } .asari-note { margin-top: 18px; padding: 13px 14px; border-radius: 12px; background: var(--cream); color: var(--muted); font-size: 10px; } .similar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .similar-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: transform .35s, box-shadow .35s; } .similar-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); } .similar-card img { width: 100%; height: 240px; object-fit: cover; } .similar-body { padding: 22px; } .similar-body .location { color: var(--muted); font-size: 12px; } .similar-body h3 { margin: 8px 0 18px; font-family: var(--heading-font); font-size: 27px; font-weight: var(--heading-weight); } .similar-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 11px; } .similar-price { margin-top: 18px; color: var(--wine); font-size: 22px; font-weight: 800; } .lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 70px; background: rgba(26,6,11,.96); } .lightbox.open { display: flex; } .lightbox img { max-width: min(1200px, 92vw); max-height: 82vh; border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.4); } .lightbox-close, .lightbox-nav { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; backdrop-filter: blur(8px); } .lightbox-close { right: 28px; top: 28px; width: 50px; height: 50px; } .lightbox-nav { top: 50%; width: 54px; height: 54px; transform: translateY(-50%); } .lightbox-prev { left: 30px; } .lightbox-next { right: 30px; } .toast:empty { display: none; } .toast { position: fixed; z-index: 3000; left: 50%; bottom: 28px; padding: 14px 20px; border-radius: 999px; background: var(--wine); color: #fff; font-size: 13px; font-weight: 800; box-shadow: var(--shadow); transform: translate(-50%, 150%); transition: transform .4s cubic-bezier(.22,1,.36,1); } .toast.show { transform: translate(-50%,0); } .reveal { opacity: 0; filter: blur(14px); transform: translateY(32px); transition: opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.22,1,.36,1); } .reveal.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } .reveal-left { transform: translateX(-36px); } .reveal-right { transform: translateX(36px); } .reveal-left.is-visible, .reveal-right.is-visible { transform: translateX(0); } @media (max-width: 1150px) { .nav { grid-template-columns: 190px 1fr auto; gap: 18px; } .nav-links { gap: 18px; } .nav-actions .btn span.label { display: none; } .search-panel { grid-template-columns: repeat(2,1fr) auto; } .search-field { border-right: 0; border-bottom: 1px solid var(--line); } .search-panel .btn { grid-row: span 2; } .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offer-card:last-child { grid-column: auto; min-height: 500px; } .process-board { grid-template-columns: 250px 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .agent-card:first-child { grid-column: span 2; min-height: 600px; } .property-layout { grid-template-columns: minmax(0,1fr) 340px; gap: 42px; } .gallery { grid-template-columns: 1.4fr .8fr; } .gallery-item:nth-child(4), .gallery-item:nth-child(5) { display: none; } } @media (max-width: 960px) { :root { --header-h: 76px; } .container { width: min(calc(100% - 34px), var(--max)); } .section { padding: 86px 0; } .nav { grid-template-columns: 1fr auto; } .brand { width: 156px; } .brand img { width: 156px; } .nav-links { position: fixed; inset: 76px 0 0; z-index: -1; padding: 44px 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 22px; background: rgba(45,12,19,.98); color: #fff; transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } .nav-links.open { transform: translateX(0); } .nav-links a { font-family: var(--heading-font); font-size: 36px; font-weight: var(--heading-weight); } .header.is-scrolled .nav-links, .header.header-solid .nav-links { color: #fff; } .nav-actions { display: none; } .burger { display: block; } .hero { min-height: 780px; height: 92svh; } .hero-copy { width: 80vw; } .hero-ring { right: -50px; top: 18%; opacity: .55; } .search-dock { margin-top: -30px; } .search-panel { grid-template-columns: 1fr 1fr; } .search-panel .btn { grid-row: auto; grid-column: span 2; } .story-grid, .team-intro, .valuation, .process-intro { grid-template-columns: 1fr; } .story-media { min-height: 600px; } .services { grid-template-columns: 1fr; } .service-card { min-height: 290px; } .process-board { grid-template-columns: 1fr; } .process-nav { position: relative; top: auto; display: flex; overflow: auto; padding-bottom: 10px; } .process-pill { min-width: 170px; } .process-card, .process-card:nth-child(even) { grid-template-columns: 1fr; } .process-card:nth-child(even) .process-card-media { order: 0; } .process-card-media { height: 300px; } .blog-grid { grid-template-columns: 1fr 1fr; } .article-card:first-child { grid-column: auto; } .footer-top { grid-template-columns: 1fr 1fr; } .property-title-row, .summary-grid { grid-template-columns: 1fr; } .property-actions, .property-price { text-align: left; } .property-layout { grid-template-columns: 1fr; } .agent-panel { position: relative; top: auto; } .similar-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .container { width: min(calc(100% - 24px), var(--max)); } .section { padding: 68px 0; } .header, .header.is-scrolled, .header.header-solid { height: 68px; } .nav-links { inset: 68px 0 0; } .brand { width: 144px; height: 52px; } .brand img { width: 144px; } .display { font-size: 52px; } .h2 { font-size: 40px; } .hero { min-height: 740px; height: 100svh; align-items: end; padding-bottom: 120px; } .hero-media img { object-position: 60% center; } .hero-media::after { background: linear-gradient(0deg, rgba(32,7,13,.98) 0%, rgba(43,8,16,.55) 72%, rgba(43,8,16,.2)); } .hero-copy { width: 100%; } .hero-copy .lead { font-size: 15px; line-height: 1.65; } .hero-signature, .hero-ring, .hero-index { display: none; } .hero-actions .btn { flex: 1; padding-inline: 16px; } .search-dock { margin-top: -36px; } .search-panel { grid-template-columns: 1fr; padding: 12px; border-radius: 20px; } .search-field { padding: 10px 12px; } .search-panel .btn { grid-column: auto; } .section-head { display: block; } .section-head .lead { margin-top: 20px; } .section-head .link-arrow { margin-top: 20px; } .offer-grid { grid-template-columns: 1fr; } .offer-card, .offer-card:not(.offer-card-featured), .offer-card:last-child { grid-column: auto; min-height: 470px; } .offer-title, .offer-card-featured .offer-title { font-size: 32px; } .story-media { min-height: 520px; } .story-media .image-main { inset: 0 0 14% 0; width: 100%; height: 82%; } .story-media .image-small { width: 50%; height: 37%; border-width: 7px; } .story-ring { width: 100px; border-width: 12px; } .stats { grid-template-columns: 1fr; } .process-card-content { padding: 28px; } .process-card h3 { font-size: 33px; } .team-grid { grid-template-columns: 1fr; } .agent-card, .agent-card:first-child { grid-column: auto; min-height: 520px; } .valuation { padding: 28px 20px; border-radius: 24px; } .valuation-form { padding: 20px; } .blog-grid { grid-template-columns: 1fr; } .article-card:first-child { grid-column: auto; } .article-card:first-child img, .article-card img { height: 260px; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .page-main { padding-top: 68px; } .property-head { padding-top: 30px; } .property-title { font-size: 47px; } .property-actions { position: absolute; right: 12px; top: 84px; } .property-actions .btn span { display: none; } .gallery { height: 430px; display: block; padding: 0; } .gallery-item { height: 100%; border-radius: 0; } .gallery-item:not(:first-child) { display: none; } .property-summary { padding-top: 30px; } .property-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fact { min-width: 0; margin: 0; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); } .property-layout { padding-top: 45px; } .content-section h2 { font-size: 36px; } .detail-list { grid-template-columns: 1fr; } .similar-grid { grid-template-columns: 1fr; } .lightbox { padding: 20px; } .lightbox-nav { width: 46px; height: 46px; } .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; filter: none; transform: none; } } /* V3 — wybrany wariant Plus Jakarta Sans, czytelniejsze oferty i nowa galeria */ body.font-option-3 .display, body.font-option-3 .h2, body.font-option-3 .property-title, body.font-option-3 .content-section h2 { text-wrap: balance; } /* Karty ofert — mocniejszy kontrast bez zasłaniania fotografii */ .offer-card, .offer-card:not(.offer-card-featured) { min-height: 520px; } .offer-card::after { background: linear-gradient(180deg, rgba(20, 4, 8, .10) 0%, rgba(20, 4, 8, .02) 38%, rgba(20, 4, 8, .50) 68%, rgba(20, 4, 8, .96) 100%); } .offer-card::before { content: ''; position: absolute; inset: auto 0 0; z-index: 1; height: 58%; background: linear-gradient(0deg, rgba(25, 5, 10, .38), transparent); pointer-events: none; } .offer-body { padding: 30px; } .offer-location { margin-bottom: 9px; color: rgba(255,255,255,.88); font-size: 12px; font-weight: 650; text-shadow: 0 2px 14px rgba(0,0,0,.65); } body.font-option-3 .offer-title, .offer-title, .offer-card-featured .offer-title { max-width: 96%; margin-bottom: 17px; font-size: clamp(24px, 2vw, 29px); line-height: 1.08; letter-spacing: -.045em; text-shadow: 0 3px 20px rgba(0,0,0,.58); } .offer-meta span { border-color: rgba(255,255,255,.28); background: rgba(28, 7, 12, .34); color: rgba(255,255,255,.94); font-weight: 650; text-shadow: 0 1px 10px rgba(0,0,0,.38); } .offer-price { margin-top: 18px; } .offer-price > div { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .offer-price strong { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.1; text-shadow: 0 3px 16px rgba(0,0,0,.45); } .offer-price small { margin-left: 4px; color: rgba(255,255,255,.74); font-size: 11px; } /* Etapy współpracy — numer jest elementem tła, a nie separatorem treści */ .process-card-content { position: relative; min-width: 0; padding: clamp(38px, 5vw, 66px); padding-bottom: clamp(92px, 9vw, 122px); overflow: hidden; } .process-card .number { position: absolute; right: clamp(26px, 4vw, 54px); bottom: 24px; margin: 0; color: rgba(71,20,30,.075); font-family: var(--heading-font); font-size: clamp(80px, 9vw, 128px); font-weight: 700; line-height: .72; letter-spacing: -.08em; pointer-events: none; } .process-card h3 { margin-top: 25px; } .process-card p { position: relative; z-index: 1; max-width: 560px; } /* Podstrona oferty — wariant sans dopasowany do strony głównej */ body.font-option-3 .property-title { max-width: 980px; font-size: clamp(42px, 4.35vw, 68px); line-height: 1.02; letter-spacing: -.055em; } body.font-option-3 .content-section h2 { font-size: clamp(32px, 3vw, 42px); line-height: 1.12; letter-spacing: -.045em; } /* Nowa galeria: duży kadr główny + uporządkowany panel zdjęć bocznych */ .property-gallery-section { padding: 0 0 10px; background: #fff; } .property-gallery { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(330px, .88fr); gap: 12px; height: clamp(520px, 46vw, 650px); } .gallery-side { display: grid; grid-template-rows: minmax(0, 1.42fr) minmax(0, .72fr); gap: 12px; min-width: 0; } .gallery-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; } .gallery-tile { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--cream); cursor: zoom-in; } .gallery-main { border-radius: 30px 18px 18px 30px; } .gallery-feature { border-radius: 18px 30px 18px 18px; } .gallery-thumbs .gallery-tile:first-child { border-radius: 18px 18px 18px 18px; } .gallery-thumbs .gallery-tile:last-child { border-radius: 18px 18px 30px 18px; } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease; } .gallery-tile:hover img { transform: scale(1.035); filter: saturate(1.03); } .gallery-caption { position: absolute; left: 22px; bottom: 20px; z-index: 2; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(31,8,14,.34); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(10px); } .gallery-more::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,6,12,.38), transparent 65%); } .property-gallery .gallery-count { z-index: 2; right: 12px; bottom: 12px; min-height: 38px; padding: 0 13px; box-shadow: 0 10px 28px rgba(32,8,14,.18); white-space: nowrap; } @media (max-width: 1150px) { .property-gallery { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); height: 570px; } .gallery-thumbs .gallery-tile:first-child { display: none; } .gallery-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .property-gallery { height: 500px; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); } .gallery-side { grid-template-rows: 1fr .72fr; } .gallery-thumbs .gallery-tile:nth-child(2) { display: none; } .gallery-thumbs { grid-template-columns: 1fr; } } @media (max-width: 680px) { .offer-card, .offer-card:not(.offer-card-featured), .offer-card:last-child { min-height: 490px; } .offer-body { padding: 24px; } body.font-option-3 .offer-title, .offer-title, .offer-card-featured .offer-title { font-size: 26px; } .process-card-content { padding: 30px 26px 92px; } .process-card .number { right: 26px; bottom: 22px; font-size: 86px; } .property-gallery-section .container { width: 100%; } .property-gallery { display: block; height: 440px; } .gallery-main { border-radius: 0; } .gallery-side { display: none; } .gallery-caption { left: 14px; bottom: 14px; } } /* V4 — jasne menu, split hero, uproszczona sekcja o nas, wycena wyżej, opinie */ :root { --header-h: 98px; } .header, .header.is-scrolled, .header.header-solid { height: var(--header-h); background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 8px 34px rgba(35,15,20,.055); backdrop-filter: blur(18px); } .header::after, .header.is-scrolled::after, .header.header-solid::after { background: rgba(71,20,30,.10); } .nav { grid-template-columns: 250px 1fr auto; gap: 30px; } .brand { width: 214px; height: 72px; } .brand img { width: 214px; } .brand-white { display: none !important; } .brand-color { display: block !important; } .nav-links { gap: clamp(20px, 2vw, 38px); } .nav-links a { color: var(--wine); font-size: 15px; font-weight: 800; } .nav-links a::after { bottom: -10px; height: 2px; background: var(--gradient); } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary, .header .nav-actions .btn-primary { --btn-bg: var(--wine); --btn-color: #fff; border-color: var(--wine); min-height: 56px; padding-inline: 25px; } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary::before, .header .nav-actions .btn-primary::before { background: var(--gradient); } .btn-outline { --btn-bg: #fff; --btn-color: var(--wine); border-color: rgba(71,20,30,.22); } .btn-outline::before { background: var(--wine); } .btn-outline:hover { color: #fff; border-color: var(--wine); } .hero.hero-split { min-height: 790px; height: auto; padding: calc(var(--header-h) + 72px) 0 104px; display: block; color: var(--ink); background: radial-gradient(circle at 12% 18%, rgba(255,95,109,.09), transparent 28%), linear-gradient(180deg, #fff 0%, #fbf8f5 100%); overflow: hidden; } .hero-layout { min-height: 590px; display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); gap: clamp(52px, 6vw, 98px); align-items: center; } .hero-split .hero-copy { width: auto; position: relative; z-index: 3; } .hero-split .hero-copy .display { max-width: 720px; color: var(--ink); font-size: clamp(58px, 6vw, 98px); } .hero-split .hero-copy .lead { max-width: 620px; margin: 28px 0 34px; color: var(--muted); font-size: 17px; } .hero-split .hero-signature { margin-top: 30px; color: var(--muted); } .hero-split .hero-signature .line { background: rgba(71,20,30,.24); } .hero-visual { position: relative; min-width: 0; } .hero-image-frame { position: relative; z-index: 2; height: clamp(500px, 42vw, 620px); border-radius: 34px; overflow: hidden; box-shadow: 0 26px 80px rgba(71,20,30,.13); background: var(--cream); } .hero-image-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(71,20,30,.08); border-radius: inherit; pointer-events: none; } .hero-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .hero-visual:hover .hero-image-frame img { transform: scale(1.018); } .hero-visual-ring { position: absolute; z-index: 1; width: 250px; aspect-ratio: 1; right: -58px; top: -58px; border: 34px solid transparent; border-radius: 50%; background: var(--gradient) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .95; } .hero-image-note { position: absolute; z-index: 4; right: 28px; bottom: -24px; min-width: 245px; padding: 17px 20px; border: 1px solid rgba(71,20,30,.10); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); } .hero-image-note strong { display: block; color: var(--wine); font-size: 13px; } .hero-image-note span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .search-dock { margin-top: -54px; } /* O nas — jedno zdjęcie i sygnet jako watermark po stronie tekstowej */ .story-grid { grid-template-columns: .95fr 1.05fr; gap: clamp(56px, 8vw, 118px); } .story-media { min-height: 650px; } .story-media .image-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); } .story-media .image-small, .story-ring { display: none !important; } .story-copy { position: relative; isolation: isolate; padding: 22px 0; } .story-mark { position: absolute; z-index: -1; right: -90px; top: -90px; width: min(420px, 44vw); opacity: .085; pointer-events: none; } /* Wycena od razu po sekcji O nas */ #o-nas { padding-bottom: 82px; } #wycena { padding-top: 0; background: var(--cream); } #wycena .valuation { box-shadow: 0 24px 72px rgba(71,20,30,.10); } /* Opinie */ .reviews-section { background: #fff; overflow: hidden; } .reviews-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; margin-bottom: 48px; } .reviews-head .lead { margin: 0 0 7px; max-width: 520px; } .reviews-track-wrap { position: relative; } .reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; padding: 2px 2px 22px; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; } .reviews-track::-webkit-scrollbar { display: none; } .review-card { min-height: 340px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream); scroll-snap-align: start; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .review-card:nth-child(2n) { background: #fff; } .review-card:hover { transform: translateY(-6px); border-color: rgba(71,20,30,.26); box-shadow: var(--shadow-soft); } .review-quote { height: 62px; color: var(--wine); font-family: Georgia, serif; font-size: 84px; line-height: .9; opacity: .18; } .review-card p { margin: 10px 0 28px; color: var(--ink); font-size: 17px; line-height: 1.72; } .review-author { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); } .review-author strong { display: block; color: var(--wine); font-size: 14px; } .review-author span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .reviews-arrow { position: absolute; z-index: 5; top: 50%; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--wine); box-shadow: var(--shadow-soft); cursor: pointer; transform: translateY(-70%); transition: .3s; } .reviews-arrow:hover { background: var(--wine); border-color: var(--wine); color: #fff; } .reviews-prev { left: -25px; } .reviews-next { right: -25px; } .reviews-foot { margin-top: 22px; display: flex; justify-content: space-between; gap: 24px; align-items: center; } .reviews-foot > span { color: var(--muted); font-size: 12px; } @media (max-width: 1200px) { .nav { grid-template-columns: 220px 1fr auto; gap: 18px; } .brand, .brand img { width: 190px; } .nav-links { gap: 18px; } .nav-links a { font-size: 14px; } .hero-layout { grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr); gap: 46px; } .reviews-prev { left: 6px; } .reviews-next { right: 6px; } } @media (max-width: 960px) { :root { --header-h: 82px; } .header, .header.is-scrolled, .header.header-solid { height: 82px; } .nav { grid-template-columns: 1fr auto; } .brand, .brand img { width: 178px; } .nav-links { inset: 82px 0 0; background: rgba(255,255,255,.99); color: var(--wine); } .nav-links a, .header.is-scrolled .nav-links, .header.header-solid .nav-links { color: var(--wine); } .burger { color: var(--wine); } .hero.hero-split { min-height: 0; padding: calc(var(--header-h) + 54px) 0 92px; } .hero-layout { min-height: 0; grid-template-columns: 1fr; gap: 48px; } .hero-split .hero-copy { max-width: 760px; } .hero-image-frame { height: min(68vw, 600px); } .hero-image-frame img { object-position: center 46%; } .hero-visual-ring { width: 210px; right: -36px; top: -42px; } .story-grid { grid-template-columns: 1fr; } .story-media { min-height: min(88vw, 650px); } .story-mark { right: -40px; top: -60px; width: 360px; } .reviews-head { grid-template-columns: 1fr; gap: 22px; } .reviews-track { grid-auto-columns: calc((100% - 20px) / 2); } .reviews-arrow { display: none; } } @media (max-width: 680px) { :root { --header-h: 72px; } .header, .header.is-scrolled, .header.header-solid { height: 72px; } .brand, .brand img { width: 158px; } .nav-links { inset: 72px 0 0; } .hero.hero-split { padding: calc(var(--header-h) + 42px) 0 76px; } .hero-split .hero-copy .display { font-size: 50px; } .hero-split .hero-copy .lead { font-size: 15px; line-height: 1.65; } .hero-split .hero-signature { display: flex; font-size: 11px; } .hero-split .hero-signature .line { width: 44px; } .hero-actions { display: grid; grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } .hero-image-frame { height: 72vw; min-height: 360px; border-radius: 24px; } .hero-image-frame img { object-position: center 48%; } .hero-visual-ring { width: 145px; border-width: 22px; top: -28px; right: -24px; } .hero-image-note { right: 14px; bottom: -20px; min-width: 210px; padding: 13px 15px; } .search-dock { margin-top: -32px; } .story-media { min-height: 118vw; } .story-mark { width: 260px; right: -80px; top: -25px; } #o-nas { padding-bottom: 58px; } .reviews-track { grid-auto-columns: 88%; gap: 14px; margin-right: -12px; } .review-card { min-height: 310px; padding: 26px; } .review-card p { font-size: 16px; } .reviews-foot { align-items: flex-start; flex-direction: column; } } /* V4.1 — dopięcie proporcji nagłówka i CTA */ .header .container.nav { width: min(calc(100% - 44px), 1500px); } .hero-actions .btn-primary { background: var(--wine); color: #fff; border-color: var(--wine); } .hero-actions .btn-primary:hover { background: var(--wine); } .header .nav-actions .btn-primary { background: var(--wine); color: #fff; } @media (max-width: 1200px) { .header .container.nav { width: min(calc(100% - 34px), 1500px); } } @media (max-width: 960px) { .header .container.nav { width: min(calc(100% - 34px), var(--max)); } } @media (max-width: 680px) { .header .container.nav { width: min(calc(100% - 24px), var(--max)); } } /* ========================================================= V5 — powrót do hero/menu z V3 + mocniejsze opinie, nowa podstrona zespołu i dopracowana karta nieruchomości ========================================================= */ /* --- Header: wracamy do mechaniki V3 --- */ :root { --header-h: 88px; } .header { height: var(--header-h); background: transparent; color: #fff; box-shadow: none; backdrop-filter: none; } .header::after { background: rgba(255,255,255,.18); } .header.is-scrolled, .header.header-solid { height: 76px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 40px rgba(35,15,20,.08); backdrop-filter: blur(16px); } .header.is-scrolled::after, .header.header-solid::after { background: var(--line); } .header .container.nav { width: min(calc(100% - 48px), var(--max)); } .nav { grid-template-columns: 220px 1fr auto; gap: 34px; } .brand { width: 174px; height: 58px; } .brand img { width: 174px; } .brand-white { display: block !important; } .brand-color { display: none !important; } .header.is-scrolled .brand-white, .header.header-solid .brand-white { display: none !important; } .header.is-scrolled .brand-color, .header.header-solid .brand-color { display: block !important; } .nav-links { gap: clamp(18px, 2.1vw, 34px); } .nav-links a { color: inherit; font-size: 14px; font-weight: 700; } .nav-links a::after { bottom: -8px; height: 1px; background: currentColor; } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary { --btn-bg: #fff; --btn-color: var(--wine); min-height: 54px; padding-inline: 24px; border-color: #fff; background: #fff; color: var(--wine); } .header:not(.is-scrolled):not(.header-solid) .nav-actions .btn-primary::before { background: var(--gradient); } .header.is-scrolled .nav-actions .btn-primary, .header.header-solid .nav-actions .btn-primary { --btn-bg: var(--wine); --btn-color: #fff; min-height: 54px; padding-inline: 24px; border-color: var(--wine); background: var(--wine); color: #fff; } /* --- Hero: układ V3, nowe zdjęcie z klienta --- */ .hero.hero-v5 { position: relative; min-height: 820px; height: 100svh; padding: 0; display: flex; align-items: center; color: #fff; background: var(--wine-2); overflow: hidden; } .hero-v5 .hero-media { position: absolute; inset: 0; } .hero-v5 .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.035); animation: heroZoom 14s ease-out forwards; } .hero-v5 .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(39,8,15,.91) 0%, rgba(48,10,18,.70) 34%, rgba(48,10,18,.28) 56%, rgba(48,10,18,.04) 77%), linear-gradient(0deg, rgba(31,7,12,.40) 0%, transparent 38%); } .hero-v5 .hero-content { position: relative; z-index: 2; padding-top: var(--header-h); } .hero-v5 .hero-copy { width: min(760px, 58vw); } .hero-v5 .hero-copy .display { max-width: 790px; color: #fff; } .hero-v5 .hero-copy .lead { max-width: 620px; margin: 26px 0 34px; color: rgba(255,255,255,.80); } .hero-v5 .hero-signature { margin-top: 34px; color: rgba(255,255,255,.66); } .hero-v5 .hero-signature .line { background: rgba(255,255,255,.36); } .hero-v5 .hero-ring { position: absolute; right: 5.5vw; top: 17%; width: min(29vw, 430px); aspect-ratio: 1; border: min(4vw, 54px) solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; } .hero-v5 .hero-index { position: absolute; right: 4.5vw; bottom: 34px; z-index: 3; text-align: right; } .hero-v5 .hero-index span { display: block; color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .hero-v5 .hero-index strong { display: block; margin-top: 4px; font-size: 18px; } .search-dock { margin-top: -42px; } /* --- Opinie: więcej koloru, ale nadal elegancko --- */ .reviews-section.reviews-v5 { position: relative; background: radial-gradient(circle at 84% 16%, rgba(255,195,113,.14), transparent 28%), linear-gradient(135deg, #47141e 0%, #3a1018 72%, #2d0c13 100%); color: #fff; overflow: hidden; } .reviews-v5 .reviews-orbit { position: absolute; width: 520px; aspect-ratio: 1; right: -180px; bottom: -250px; border: 74px solid rgba(255,255,255,.045); border-radius: 50%; pointer-events: none; } .reviews-v5 .reviews-head { grid-template-columns: 1.05fr .75fr; align-items: end; gap: 82px; margin-bottom: 56px; } .reviews-v5 .h2 { color: #fff; } .reviews-v5 .reviews-intro-card { position: relative; padding: 28px 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.065); backdrop-filter: blur(12px); } .reviews-kicker { display: block; margin-bottom: 12px; color: #ffc071; font-size: 10px; font-weight: 800; letter-spacing: .18em; } .reviews-intro-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7; } .reviews-stars { display: flex; gap: 4px; margin-top: 18px; color: #ffc071; font-size: 18px; letter-spacing: .06em; } .reviews-v5 .reviews-track { grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; padding-bottom: 24px; } .reviews-v5 .review-card { position: relative; min-height: 368px; padding: 30px 30px 28px; border: 1px solid rgba(255,255,255,.10); border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 22px 66px rgba(25,5,10,.18); } .reviews-v5 .review-card:nth-child(2n) { background: #f8f5f1; } .reviews-v5 .review-card-featured::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 4px; border-radius: 0 0 8px 8px; background: var(--gradient); } .review-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .review-number { color: rgba(71,20,30,.24); font-size: 12px; font-weight: 800; letter-spacing: .12em; } .review-mini-stars { color: #ff936f; font-size: 11px; letter-spacing: .08em; } .reviews-v5 .review-quote { height: 56px; margin-top: 12px; color: var(--wine); opacity: .15; } .reviews-v5 .review-card p { margin-top: 8px; font-size: 16px; line-height: 1.75; } .reviews-v5 .review-author { border-color: rgba(71,20,30,.12); } .reviews-v5 .reviews-arrow { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #fff; box-shadow: 0 14px 35px rgba(20,4,8,.20); backdrop-filter: blur(10px); } .reviews-v5 .reviews-arrow:hover { background: #fff; border-color: #fff; color: var(--wine); } .reviews-v5 .reviews-foot > span { color: rgba(255,255,255,.52); } .link-arrow-light { color: #fff; } .link-arrow-light:hover { color: #ffc071; } /* --- Nowa podstrona Zespół --- */ .team-page { background: #fff; } .team-hero-v5 { position: relative; padding: 86px 0 104px; background: var(--cream); overflow: hidden; } .team-hero-v5::before { content: ''; position: absolute; width: 420px; aspect-ratio: 1; left: -160px; top: -150px; border: 64px solid rgba(71,20,30,.045); border-radius: 50%; } .team-hero-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(52px, 7vw, 110px); align-items: center; } .team-hero-copy { position: relative; z-index: 2; } .team-hero-copy .lead { margin: 28px 0 30px; max-width: 590px; } .team-hero-actions { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; } .team-hero-media { position: relative; min-height: 620px; border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); } .team-hero-media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 42%; } .team-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(36,7,13,.35), transparent 46%); } .team-hero-label { position: absolute; z-index: 2; left: 24px; bottom: 24px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.30); border-radius: 16px; background: rgba(52,11,19,.42); color: #fff; backdrop-filter: blur(12px); } .team-hero-label span { display: block; color: #ffc071; font-size: 9px; font-weight: 800; letter-spacing: .18em; } .team-hero-label strong { display: block; margin-top: 4px; font-size: 15px; } .team-list-v5 { background: #fff; } .team-intro-v5 { display: grid; grid-template-columns: 1.05fr .75fr; gap: 70px; align-items: end; margin-bottom: 54px; } .team-intro-v5 .lead { margin: 0 0 6px; } .agents-grid-v5 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; } .person-card { display: grid; grid-template-columns: minmax(250px,.95fr) minmax(260px,1.05fr); min-height: 480px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 15px 46px rgba(50,16,23,.06); transition: transform .35s ease, box-shadow .35s ease; } .person-card:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(50,16,23,.11); } .person-photo { position: relative; min-height: 480px; overflow: hidden; background: var(--cream); } .person-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center top; transition: transform .7s cubic-bezier(.22,1,.36,1); } .person-card:hover .person-photo img { transform: scale(1.025); } .person-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(35,7,13,.22), transparent 42%); } .person-no { position: absolute; z-index: 2; left: 18px; bottom: 16px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(71,20,30,.50); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); } .person-info { display: flex; flex-direction: column; padding: 34px; } .person-role { color: var(--wine); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .person-info h3 { margin: 14px 0 22px; font-family: var(--heading-font); font-size: clamp(27px,2.2vw,36px); line-height: 1.05; letter-spacing: -.04em; } .person-contact { display: grid; gap: 7px; padding-top: 20px; border-top: 1px solid var(--line); } .person-contact a { color: var(--muted); font-size: 13px; transition: color .2s; } .person-contact a:hover { color: var(--wine); } .person-link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; color: var(--wine); font-size: 12px; font-weight: 800; } .person-link span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; transition: .3s; } .person-link:hover span { background: var(--wine); color: #fff; border-color: var(--wine); transform: rotate(45deg); } .team-values-v5 { position: relative; background: var(--wine); color: #fff; overflow: hidden; } .team-values-v5::after { content: ''; position: absolute; width: 500px; aspect-ratio: 1; right: -190px; top: -260px; border: 70px solid rgba(255,255,255,.05); border-radius: 50%; } .team-values-head { position: relative; z-index: 2; margin-bottom: 48px; } .team-values-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .team-value-card { position: relative; min-height: 330px; padding: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(255,255,255,.045); } .team-value-card > span { position: absolute; right: 25px; top: 18px; color: rgba(255,255,255,.09); font-size: 70px; font-weight: 800; letter-spacing: -.06em; } .value-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; color: #ffc071; } .team-value-card h3 { margin: 72px 0 12px; font-family: var(--heading-font); font-size: 32px; letter-spacing: -.04em; } .team-value-card p { margin: 0; max-width: 360px; color: rgba(255,255,255,.64); font-size: 14px; } /* --- Oferta nieruchomości: więcej charakteru i koloru --- */ .property-head { position: relative; padding-top: 52px; } .property-head::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--gradient); } .property-offer-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--wine); } .property-offer-kicker span { font-size: 10px; font-weight: 800; letter-spacing: .17em; } .property-offer-kicker strong { display: grid; place-items: center; min-width: 34px; height: 24px; padding-inline: 9px; border-radius: 999px; background: rgba(71,20,30,.08); font-size: 10px; } .property-badges .tag { border-color: rgba(71,20,30,.18); background: rgba(71,20,30,.06); color: var(--wine); } .property-badges .tag:first-child { background: var(--wine); border-color: var(--wine); color: #fff; } .property-summary { padding: 36px 0; background: linear-gradient(180deg,#fff 0%,#fcfaf8 100%); } .property-facts { align-items: stretch; } .fact { display: grid; grid-template-columns: 42px auto; column-gap: 12px; align-items: center; min-width: 178px; } .fact > span:not(.fact-icon), .fact > strong { grid-column: 2; } .fact > span:not(.fact-icon) { grid-row: 1; align-self: end; } .fact > strong { grid-row: 2; align-self: start; margin-top: 1px; } .fact-icon { grid-column: 1; grid-row: 1 / span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(71,20,30,.08); color: var(--wine); } .fact-icon .icon { width: 18px; height: 18px; } .property-price { min-width: 300px; padding: 22px 26px; border-radius: 24px; background: var(--wine); color: #fff; box-shadow: 0 18px 44px rgba(71,20,30,.18); } .property-price span, .property-price small { color: rgba(255,255,255,.62); } .property-price strong { color: #fff; } .property-highlights { background: var(--wine); color: #fff; } .property-highlights-grid { display: grid; grid-template-columns: repeat(4,1fr); } .property-highlight { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px 24px; border-right: 1px solid rgba(255,255,255,.12); } .property-highlight:last-child { border-right: 0; } .highlight-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #ffc071; } .highlight-icon .icon { width: 19px; height: 19px; } .property-highlight strong { display: block; font-size: 13px; } .property-highlight div span { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; } .content-section { position: relative; padding-left: 22px; } .content-section::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 54px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(71,20,30,.24), rgba(71,20,30,0)); } .eyebrow-icon { gap: 9px; } .eyebrow-icon::before { display: none; } .content-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(71,20,30,.08); color: var(--wine); } .content-icon .icon { width: 15px; height: 15px; } .detail-group { padding: 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: #fff; } .detail-group h3 { display: inline-flex; padding: 7px 10px; margin-bottom: 14px; border-radius: 999px; background: rgba(71,20,30,.07); } .detail-row { padding: 13px 0; } .amenity { position: relative; padding: 10px 14px 10px 28px; border-color: rgba(71,20,30,.16); background: rgba(71,20,30,.055); } .amenity::before { content: ''; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); transform: translateY(-50%); } .agent-panel { overflow: hidden; padding-top: 34px; border-color: rgba(71,20,30,.15); } .agent-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--gradient); } .agent-avatar { width: 92px; height: 92px; border: 4px solid #fff; box-shadow: 0 0 0 2px rgba(71,20,30,.10); } .agent-role { color: var(--wine); font-weight: 800; } .agent-links a { padding: 10px 12px; border-radius: 12px; background: rgba(71,20,30,.055); } .similar-card { border-color: rgba(71,20,30,.12); } .similar-body .location { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgba(71,20,30,.06); color: var(--wine); font-weight: 700; } .similar-price { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid rgba(71,20,30,.15); } @media (max-width: 1100px) { .agents-grid-v5 { grid-template-columns: 1fr; } .person-card { grid-template-columns: minmax(280px,.9fr) 1.1fr; } .property-highlights-grid { grid-template-columns: repeat(2,1fr); } .property-highlight:nth-child(2) { border-right: 0; } .property-highlight:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); } } @media (max-width: 960px) { :root { --header-h: 78px; } .header { height: 78px; } .header.is-scrolled, .header.header-solid { height: 72px; } .header .container.nav { width: min(calc(100% - 34px), var(--max)); grid-template-columns: 1fr auto; } .brand, .brand img { width: 168px; } .brand { height: 56px; } .nav-links { inset: 72px 0 0; background: rgba(255,255,255,.99); color: var(--wine); } .nav-links a { color: var(--wine); } .burger { color: currentColor; } .hero.hero-v5 { min-height: 760px; height: 100svh; } .hero-v5 .hero-copy { width: min(680px, 82vw); } .hero-v5 .hero-media img { object-position: 58% center; } .hero-v5 .hero-ring { right: -80px; top: 18%; width: 330px; } .reviews-v5 .reviews-head { grid-template-columns: 1fr; gap: 28px; } .reviews-v5 .reviews-track { grid-auto-columns: calc((100% - 20px) / 2); } .team-hero-grid { grid-template-columns: 1fr; } .team-hero-media { min-height: 560px; } .team-intro-v5 { grid-template-columns: 1fr; gap: 24px; } .team-values-grid { grid-template-columns: 1fr; } .team-value-card { min-height: 270px; } .summary-grid { grid-template-columns: 1fr; } .property-price { text-align: left; width: min(100%,420px); } } @media (max-width: 680px) { :root { --header-h: 70px; } .header { height: 70px; } .header.is-scrolled, .header.header-solid { height: 68px; } .header .container.nav { width: min(calc(100% - 24px), var(--max)); } .brand, .brand img { width: 148px; } .nav-links { inset: 68px 0 0; } .hero.hero-v5 { min-height: 720px; height: 100svh; align-items: flex-end; padding-bottom: 82px; } .hero-v5 .hero-media img { object-position: 65% center; } .hero-v5 .hero-media::after { background: linear-gradient(0deg, rgba(36,7,13,.94) 0%, rgba(42,9,16,.76) 45%, rgba(42,9,16,.10) 76%), linear-gradient(90deg, rgba(36,7,13,.42), transparent 72%); } .hero-v5 .hero-copy { width: 100%; } .hero-v5 .hero-copy .display { font-size: 48px; } .hero-v5 .hero-copy .lead { max-width: 94%; font-size: 14px; line-height: 1.62; } .hero-v5 .hero-ring, .hero-v5 .hero-index { display: none; } .hero-v5 .hero-actions { display: grid; grid-template-columns: 1fr; } .hero-v5 .hero-actions .btn { width: 100%; } .search-dock { margin-top: -28px; } .reviews-v5 .reviews-track { grid-auto-columns: 88%; } .reviews-v5 .review-card { min-height: 345px; padding: 26px; } .reviews-v5 .reviews-intro-card { padding: 22px; } .team-hero-v5 { padding: 64px 0 78px; } .team-hero-media { min-height: 110vw; border-radius: 26px; } .agents-grid-v5 { gap: 18px; } .person-card { display: block; min-height: 0; } .person-photo { min-height: 118vw; max-height: 610px; } .person-info { min-height: 300px; padding: 26px; } .person-info h3 { font-size: 29px; } .team-values-grid { gap: 14px; } .property-highlights-grid { grid-template-columns: 1fr 1fr; } .property-highlight { min-height: 88px; padding: 14px; gap: 10px; } .highlight-icon { width: 38px; height: 38px; } .property-summary { padding-top: 28px; } .property-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fact { display: grid; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .fact:last-child { border: 1px solid var(--line); } .property-price { min-width: 0; padding: 20px; border-radius: 20px; } .content-section { padding-left: 14px; } .detail-group { padding: 20px; } } /* --- V5.1: dopracowanie podsumowania oferty --- */ .property-summary { padding: 40px 0 38px; background: #fff; } .property-summary .summary-grid { align-items: end; } .property-facts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; } .property-facts .fact { display: block; min-width: 160px; margin-right: 30px; padding: 5px 32px 5px 0; border-right: 1px solid var(--line); } .property-facts .fact:last-child { margin-right: 0; border-right: 0; } .property-facts .fact > span { display: block; color: #786e70; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .property-facts .fact > strong { display: block; margin-top: 7px; color: var(--wine); font-size: 27px; line-height: 1.12; } .property-price { min-width: 300px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: right; } .property-price span { display: block; color: var(--muted); font-size: 12px; } .property-price strong { display: block; margin-top: 4px; color: var(--wine); font-size: clamp(42px, 4vw, 64px); line-height: 1.02; letter-spacing: -.035em; } .property-price small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; } @media (max-width: 960px) { .property-price { width: auto; min-width: 0; text-align: left; } } @media (max-width: 680px) { .property-summary { padding: 28px 0 30px; } .property-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .property-facts .fact, .property-facts .fact:last-child { min-width: 0; margin: 0; padding: 16px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; } .property-facts .fact > strong { font-size: 23px; } .property-price { padding: 6px 0 0; border-radius: 0; background: transparent; } .property-price strong { font-size: 46px; } } /* --- V5.2: czytelne ikony parametrów oferty (Lucide SVG inline) --- */ .property-facts .fact { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-width: 195px; padding-top: 4px; padding-bottom: 4px; } .property-facts .fact > .fact-icon { grid-column: 1; grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(71,20,30,.10); border-radius: 14px; background: linear-gradient(145deg, rgba(71,20,30,.075), rgba(255,255,255,.82)); color: var(--wine); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } .property-facts .fact > .fact-icon .icon { width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .property-facts .fact > span:not(.fact-icon) { grid-column: 2; grid-row: 1; align-self: end; } .property-facts .fact > strong { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5px; } @media (max-width: 680px) { .property-facts .fact, .property-facts .fact:last-child { grid-template-columns: 42px minmax(0,1fr); column-gap: 11px; padding: 15px 13px; } .property-facts .fact > .fact-icon { width: 40px; height: 40px; border-radius: 12px; } .property-facts .fact > .fact-icon .icon { width: 19px; height: 19px; } .property-facts .fact > span:not(.fact-icon) { font-size: 9px; letter-spacing: .08em; } .property-facts .fact > strong { margin-top: 3px; font-size: 22px; } } /* --- V5.3: rzut, mapa Google, PDF oferty, zespół jaśniej --- */ .property-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .floorplan-trigger { appearance:none; border:1px solid rgba(71,20,30,.18); border-radius:999px; min-height:36px; padding:8px 14px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--wine); font:inherit; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.25s ease; } .floorplan-trigger .icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .floorplan-trigger:hover { background:var(--wine); color:#fff; border-color:var(--wine); transform:translateY(-1px); box-shadow:0 10px 24px rgba(71,20,30,.13); } .map-card { position:relative; min-height:430px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#f5f1ef; } .google-map-frame { width:100%; height:430px; display:block; border:0; filter:saturate(.82) contrast(.96); } .map-info-overlay { position:absolute; left:22px; right:22px; bottom:20px; display:flex; align-items:flex-start; gap:13px; max-width:560px; padding:16px 18px; border:1px solid rgba(255,255,255,.58); border-radius:18px; background:rgba(255,255,255,.91); color:var(--ink); box-shadow:0 16px 40px rgba(40,15,20,.15); backdrop-filter:blur(12px); } .map-info-overlay .map-info-icon { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:rgba(71,20,30,.08); color:var(--wine); } .map-info-overlay .map-info-icon .icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; } .map-info-overlay strong { display:block; font-size:13px; } .map-info-overlay div > span { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; } .offer-pdf-box { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:grid; grid-template-columns:48px 1fr; gap:13px 14px; align-items:center; } .offer-pdf-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(145deg,rgba(255,95,109,.14),rgba(255,195,113,.19)); color:var(--wine); } .offer-pdf-icon .icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .offer-pdf-copy span { display:block; color:var(--wine); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .offer-pdf-copy strong { display:block; margin-top:4px; font-size:12px; line-height:1.45; } .btn-pdf { grid-column:1 / -1; width:100%; justify-content:space-between; background:var(--wine); color:#fff; border-color:var(--wine); } .btn-pdf:hover { background:#5a1b29; color:#fff; } .floorplan-modal { position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:28px; opacity:0; visibility:hidden; transition:.25s ease; } .floorplan-modal.open { opacity:1; visibility:visible; } .floorplan-backdrop { position:absolute; inset:0; background:rgba(31,8,13,.74); backdrop-filter:blur(7px); } .floorplan-dialog { position:relative; z-index:1; width:min(980px,94vw); max-height:92vh; overflow:auto; border-radius:28px; background:#fff; box-shadow:0 34px 100px rgba(0,0,0,.3); } .floorplan-close { position:absolute; z-index:2; right:18px; top:18px; width:42px; height:42px; border:0; border-radius:50%; background:var(--wine); color:#fff; font-size:25px; cursor:pointer; } .floorplan-dialog-head { padding:28px 32px 18px; } .floorplan-dialog-head > span { color:var(--wine); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .floorplan-dialog-head h2 { margin:7px 0 0; font-family:var(--heading-font); font-size:clamp(26px,3vw,42px); letter-spacing:-.04em; } .floorplan-image-wrap { margin:0 24px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fbf8f6; } .floorplan-image-wrap img { width:100%; display:block; } .floorplan-dialog-foot { display:flex; flex-wrap:wrap; gap:8px; padding:18px 28px 28px; } .floorplan-dialog-foot span { padding:8px 12px; border-radius:999px; background:rgba(71,20,30,.07); color:var(--wine); font-size:11px; font-weight:700; } /* Zespół: kolorystyczne akcenty bez ciężkich, ciemnych bloków */ .person-card { position:relative; } .person-card::before { content:''; position:absolute; z-index:4; left:0; top:0; bottom:0; width:5px; background:var(--gradient); opacity:.9; } .person-card--coral .person-info { background:linear-gradient(145deg,#fff 42%,#fff5f2 100%); } .person-card--rose .person-info { background:linear-gradient(145deg,#fff 42%,#f8eff2 100%); } .person-card--sand .person-info { background:linear-gradient(145deg,#fff 42%,#fff8ec 100%); } .person-card--wine .person-info { background:linear-gradient(145deg,#fff 42%,#f6eef0 100%); } .person-socials { display:flex; gap:9px; margin-top:16px; } .person-socials a { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(71,20,30,.14); border-radius:50%; background:#fff; color:var(--wine); transition:.25s ease; box-shadow:0 6px 18px rgba(71,20,30,.04); } .person-socials a .icon { width:16px; height:16px; } .person-socials a:hover { color:#fff; background:var(--wine); border-color:var(--wine); transform:translateY(-2px); } .team-values-v5 { background:linear-gradient(180deg,#fbf7f5 0%,#fff 100%); color:var(--ink); border-top:1px solid rgba(71,20,30,.06); } .team-values-v5::after { border-color:rgba(71,20,30,.035); } .team-values-v5 .eyebrow { color:var(--wine); } .team-values-v5 .eyebrow::before { background:rgba(71,20,30,.55); } .team-value-card { border-color:rgba(71,20,30,.10); background:#fff; box-shadow:0 16px 48px rgba(50,16,23,.055); } .team-value-card > span { color:rgba(71,20,30,.07); } .value-icon { border-color:rgba(71,20,30,.13); background:rgba(71,20,30,.055); color:var(--wine); } .team-value-card h3 { color:var(--wine); } .team-value-card p { color:var(--muted); } .team-value-card:nth-child(2) .value-icon { background:linear-gradient(145deg,rgba(255,95,109,.13),rgba(255,195,113,.16)); } @media (max-width:680px) { .map-card,.google-map-frame { min-height:360px; height:360px; } .map-info-overlay { left:12px; right:12px; bottom:12px; padding:13px; } .floorplan-modal { padding:12px; } .floorplan-dialog { width:100%; border-radius:22px; } .floorplan-dialog-head { padding:24px 22px 14px; padding-right:70px; } .floorplan-image-wrap { margin:0 12px; } } /* ===== OFKORS V5.4 ===== */ /* Zespół: mocniejszy kontrast kart, zdjęcie + bordowy panel treści */ .team-v54 .person-card { border: 1px solid rgba(71,20,30,.12); background: #fff; box-shadow: 0 18px 50px rgba(71,20,30,.07); } .team-v54 .person-card::before { display:none; } .team-v54 .person-card .person-info, .team-v54 .person-card--coral .person-info, .team-v54 .person-card--rose .person-info, .team-v54 .person-card--sand .person-info, .team-v54 .person-card--wine .person-info { position: relative; background: #47141e; color: #fff; } .team-v54 .person-card .person-info::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg,#ff5f6d,#ffc371); } .team-v54 .person-role { color: #ffc371; } .team-v54 .person-info h3 { color:#fff; } .team-v54 .person-contact { border-top-color: rgba(255,255,255,.18); } .team-v54 .person-contact a { color: rgba(255,255,255,.76); } .team-v54 .person-contact a:hover { color:#fff; } .team-v54 .person-socials a { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.24); box-shadow:none; } .team-v54 .person-socials a:hover { background: linear-gradient(135deg,#ff5f6d,#ffc371); color:#47141e; border-color: transparent; } .team-v54 .person-link { color:#fff; border-top: 1px solid rgba(255,255,255,.10); margin-top:22px; } .team-v54 .person-link span { border-color: rgba(255,255,255,.28); } .team-v54 .person-link:hover span { background:#fff; color:#47141e; border-color:#fff; } .team-v54 .person-no { background:#fff; color:#47141e; box-shadow: 0 8px 22px rgba(0,0,0,.12); } /* Oferta: PDF jako akcja obok udostępniania */ .btn-pdf-top { min-height:54px; display:inline-flex; align-items:center; gap:9px; padding:0 18px; border:1px solid rgba(71,20,30,.18); border-radius:999px; background:#fff; color:var(--wine); font-size:11px; font-weight:800; letter-spacing:.02em; box-shadow:0 8px 24px rgba(71,20,30,.06); } .btn-pdf-top .icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .btn-pdf-top:hover { background:var(--wine); color:#fff; border-color:var(--wine); transform:translateY(-1px); } @media (max-width: 720px) { .btn-pdf-top { width:54px; padding:0; justify-content:center; } .btn-pdf-top span { display:none; } } /* ===== OFKORS V5.5 ===== */ /* Zespół: V5.3 jako stan bazowy + wine dopiero po hover/focus */ .team-v55 .person-card { position: relative; border: 1px solid rgba(71,20,30,.10); box-shadow: 0 18px 54px rgba(71,20,30,.065); } .team-v55 .person-card::before { display:block; content:''; position:absolute; z-index:4; left:0; top:0; bottom:0; width:5px; background:var(--gradient); opacity:.9; transition:opacity .3s ease; } .team-v55 .person-info, .team-v55 .person-card--coral .person-info, .team-v55 .person-card--rose .person-info, .team-v55 .person-card--sand .person-info, .team-v55 .person-card--wine .person-info { background: #fff; color: var(--ink); transition: background .35s cubic-bezier(.22,1,.36,1), color .35s ease; } .team-v55 .person-card--coral .person-info { background:linear-gradient(145deg,#fff 42%,#fff5f2 100%); } .team-v55 .person-card--rose .person-info { background:linear-gradient(145deg,#fff 42%,#f8eff2 100%); } .team-v55 .person-card--sand .person-info { background:linear-gradient(145deg,#fff 42%,#fff8ec 100%); } .team-v55 .person-card--wine .person-info { background:linear-gradient(145deg,#fff 42%,#f6eef0 100%); } .team-v55 .person-role, .team-v55 .person-info h3, .team-v55 .person-contact a, .team-v55 .person-link, .team-v55 .person-socials a { transition: color .28s ease, border-color .28s ease, background .28s ease, transform .28s ease; } .team-v55 .person-card:hover .person-info, .team-v55 .person-card:focus-within .person-info { background:#47141e; color:#fff; } .team-v55 .person-card:hover .person-role, .team-v55 .person-card:focus-within .person-role { color:#ffc371; } .team-v55 .person-card:hover .person-info h3, .team-v55 .person-card:focus-within .person-info h3 { color:#fff; } .team-v55 .person-card:hover .person-contact, .team-v55 .person-card:focus-within .person-contact { border-top-color:rgba(255,255,255,.18); } .team-v55 .person-card:hover .person-contact a, .team-v55 .person-card:focus-within .person-contact a { color:rgba(255,255,255,.78); } .team-v55 .person-card:hover .person-contact a:hover, .team-v55 .person-card:focus-within .person-contact a:hover { color:#fff; } .team-v55 .person-card:hover .person-socials a, .team-v55 .person-card:focus-within .person-socials a { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); box-shadow:none; } .team-v55 .person-card:hover .person-socials a:hover, .team-v55 .person-card:focus-within .person-socials a:hover { background:linear-gradient(135deg,#ff5f6d,#ffc371); color:#47141e; border-color:transparent; } .team-v55 .person-card:hover .person-link, .team-v55 .person-card:focus-within .person-link { color:#fff; } .team-v55 .person-card:hover .person-link span, .team-v55 .person-card:focus-within .person-link span { border-color:rgba(255,255,255,.30); } .team-v55 .person-card:hover .person-link:hover span, .team-v55 .person-card:focus-within .person-link:hover span { background:#fff; color:#47141e; border-color:#fff; } /* --- Podstrony informacyjne V5.5 --- */ .subpage-main { padding-top: 76px; } .page-hero-light { position:relative; overflow:hidden; background:linear-gradient(135deg,#fff 0%,#fbf7f4 72%,#fff2eb 100%); border-bottom:1px solid rgba(71,20,30,.08); } .page-hero-light::after { content:''; position:absolute; width:420px; height:420px; border:70px solid rgba(71,20,30,.025); border-radius:50%; right:-130px; top:-120px; pointer-events:none; } .page-hero-grid { min-height:620px; display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,.88fr); align-items:center; gap:72px; padding-top:72px; padding-bottom:72px; position:relative; z-index:1; } .page-hero-copy .lead { margin-top:24px; } .page-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; } .page-hero-media { position:relative; min-height:490px; border-radius:34px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream); } .page-hero-media img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; } .page-hero-media .media-badge { position:absolute; left:22px; bottom:22px; max-width:290px; padding:14px 17px; border-radius:16px; color:#fff; background:rgba(71,20,30,.88); backdrop-filter:blur(8px); font-size:12px; font-weight:700; } .about-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:26px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); } .about-stat { padding:34px; position:relative; min-height:150px; } .about-stat + .about-stat { border-left:1px solid var(--line); } .about-stat strong { display:block; color:var(--wine); font-family:var(--heading-font); font-size:46px; line-height:1; letter-spacing:-.05em; } .about-stat span { display:block; max-width:230px; margin-top:12px; color:var(--muted); font-size:13px; } .about-split { display:grid; grid-template-columns:.88fr 1.12fr; gap:72px; align-items:center; } .about-image-stack { position:relative; min-height:620px; } .about-image-stack .about-img-main { position:absolute; inset:0 80px 80px 0; width:calc(100% - 80px); height:calc(100% - 80px); object-fit:cover; border-radius:32px; box-shadow:var(--shadow); } .about-image-stack .about-img-small { position:absolute; right:0; bottom:0; width:48%; aspect-ratio:1.25; object-fit:cover; border:10px solid #fff; border-radius:24px; box-shadow:var(--shadow-soft); } .about-copy p { color:var(--muted); } .principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; } .principle-card { min-height:270px; padding:30px; border:1px solid var(--line); border-radius:24px; background:#fff; position:relative; overflow:hidden; transition:.3s ease; } .principle-card::after { content:attr(data-no); position:absolute; right:22px; bottom:-18px; color:rgba(71,20,30,.055); font-family:var(--heading-font); font-size:100px; font-weight:700; line-height:1; } .principle-card:hover { transform:translateY(-5px); border-color:rgba(71,20,30,.24); box-shadow:var(--shadow-soft); } .principle-card .principle-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:rgba(71,20,30,.07); color:var(--wine); } .principle-card h3 { margin:42px 0 10px; font-size:24px; } .principle-card p { color:var(--muted); font-size:14px; } /* Kontakt */ .contact-grid-v55 { display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:stretch; } .contact-info-panel { padding:42px; border-radius:30px; background:var(--wine); color:#fff; position:relative; overflow:hidden; } .contact-info-panel::after { content:''; position:absolute; width:260px; height:260px; border:48px solid rgba(255,255,255,.045); border-radius:50%; right:-80px; bottom:-80px; } .contact-info-panel .eyebrow { color:#ffc371; } .contact-info-panel h2 { margin:0 0 18px; font-family:var(--heading-font); font-size:clamp(36px,4vw,58px); line-height:1; } .contact-info-panel > p { color:rgba(255,255,255,.68); } .contact-methods { display:grid; gap:12px; margin-top:34px; position:relative; z-index:1; } .contact-method { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:17px; background:rgba(255,255,255,.055); } .contact-method .cm-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.09); color:#ffc371; } .contact-method strong { display:block; font-size:12px; } .contact-method a,.contact-method span { color:rgba(255,255,255,.72); font-size:13px; } .contact-form-panel { padding:42px; border:1px solid var(--line); border-radius:30px; background:#fff; box-shadow:var(--shadow-soft); } .contact-form-panel h3 { margin:0 0 8px; font-size:28px; } .contact-form-panel > p { margin:0 0 28px; color:var(--muted); } .contact-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .contact-form-grid .full { grid-column:1/-1; } .contact-map { min-height:470px; border-radius:30px; overflow:hidden; border:1px solid var(--line); } .contact-map iframe { width:100%; height:470px; border:0; display:block; filter:saturate(.85) contrast(.96); } /* Listing ofert */ .offers-hero { padding:126px 0 56px; background:linear-gradient(180deg,#fbf7f4,#fff); border-bottom:1px solid rgba(71,20,30,.07); } .offers-hero-grid { display:grid; grid-template-columns:1fr .6fr; gap:50px; align-items:end; } .offers-hero .lead { margin-bottom:0; } .offer-filter-wrap { position:sticky; top:76px; z-index:50; padding:18px 0; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(71,20,30,.08); } .offer-filter-panel { display:grid; grid-template-columns:repeat(5,1fr) auto; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 14px 44px rgba(55,19,26,.07); overflow:hidden; } .offer-filter-field { padding:13px 16px; border-right:1px solid var(--line); } .offer-filter-field label { display:block; margin-bottom:3px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .offer-filter-field select { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; font-weight:700; } .offer-filter-panel .btn { margin:7px; min-height:54px; } .offers-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; } .offers-count strong { color:var(--wine); font-size:26px; } .offers-count span { color:var(--muted); font-size:12px; margin-left:8px; } .sort-select { min-height:44px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:12px; font-weight:700; } .offers-list-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .offers-list-grid .offer-card { min-height:530px; } .pagination-v55 { display:flex; justify-content:center; gap:8px; margin-top:46px; } .pagination-v55 a { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:12px; font-weight:800; transition:.25s; } .pagination-v55 a.active,.pagination-v55 a:hover { background:var(--wine); color:#fff; border-color:var(--wine); } .asari-note-code { display:none !important; } @media (max-width: 980px) { .page-hero-grid { grid-template-columns:1fr; gap:36px; min-height:0; } .page-hero-media { min-height:470px; } .about-split,.contact-grid-v55,.offers-hero-grid { grid-template-columns:1fr; } .about-stats,.principles-grid { grid-template-columns:1fr; } .about-stat + .about-stat { border-left:0; border-top:1px solid var(--line); } .offer-filter-panel { grid-template-columns:1fr 1fr; overflow:visible; padding:8px; } .offer-filter-field { border:0; border-bottom:1px solid var(--line); } .offer-filter-panel .btn { grid-column:1/-1; } .offers-list-grid { grid-template-columns:1fr 1fr; } } @media (max-width: 680px) { .subpage-main { padding-top:68px; } .page-hero-grid { padding-top:50px; padding-bottom:54px; } .page-hero-media { min-height:380px; border-radius:24px; } .about-image-stack { min-height:460px; } .about-image-stack .about-img-main { inset:0 42px 52px 0; width:calc(100% - 42px); height:calc(100% - 52px); border-radius:24px; } .about-image-stack .about-img-small { width:52%; border-width:6px; } .contact-info-panel,.contact-form-panel { padding:28px 22px; border-radius:24px; } .contact-form-grid { grid-template-columns:1fr; } .contact-form-grid .full { grid-column:auto; } .offer-filter-wrap { position:static; } .offer-filter-panel { grid-template-columns:1fr; border-radius:18px; } .offer-filter-panel .btn { grid-column:auto; } .offers-list-grid { grid-template-columns:1fr; } .offers-list-grid .offer-card { min-height:500px; } .offers-toolbar { align-items:flex-start; flex-direction:column; } } /* --- V5.6 korekty podstron: O nas / Kontakt / Oferty --- */ /* O nas: lepszy kadr hero */ .page-hero-light .page-hero-media img { transition: transform .6s ease; } body:not(.team-v55) .page-hero-media img[src*="founders-wide"] { object-position: 58% center; } /* O nas: stats jako integralny, markowy moduł */ .about-stats-section { padding-top: 56px; padding-bottom: 68px; } .about-stats-v56 { position:relative; overflow:hidden; border:1px solid rgba(71,20,30,.10); background:linear-gradient(135deg,#fff 0%,#fffaf7 55%,#fff4ed 100%); box-shadow:0 20px 60px rgba(71,20,30,.07); } .about-stats-v56::before { content:''; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,#ff5f6d,#ffc371); } .about-stats-v56 .about-stat { display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:center; min-height:170px; padding:34px 38px; } .about-stats-v56 .about-stat + .about-stat { border-left:1px solid rgba(71,20,30,.10); } .about-stat-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; color:var(--wine); background:linear-gradient(135deg,rgba(255,95,109,.11),rgba(255,195,113,.16)); border:1px solid rgba(255,95,109,.14); } .about-stat-icon .icon { width:25px; height:25px; stroke-width:1.7; } .about-stat-icon-360 { font-size:14px; font-weight:800; letter-spacing:-.03em; } .about-stats-v56 .about-stat strong { font-size:44px; } .about-stats-v56 .about-stat span { margin-top:9px; line-height:1.55; } /* O nas: jedno mocne zdjęcie w sekcji Jak myślimy */ .about-image-single { min-height:560px; } .about-image-single img { width:100%; height:560px; object-fit:cover; object-position:center; border-radius:32px; box-shadow:var(--shadow); display:block; } /* Kontakt: większy oddech pomiędzy copy i fotografią */ .contact-hero-v56 .page-hero-grid { grid-template-columns:minmax(0,.92fr) minmax(440px,.82fr); gap:118px; } .contact-hero-v56 .page-hero-copy { max-width:650px; } .contact-hero-v56 .page-hero-media { min-height:500px; } /* Oferty: subtelny sygnet po prawej w hero */ .offers-hero { position:relative; overflow:hidden; } .offers-hero .container { position:relative; z-index:2; } .offers-hero-signet { position:absolute; width:420px; height:420px; object-fit:contain; right:5%; top:74px; opacity:.055; pointer-events:none; user-select:none; z-index:1; } @media (max-width: 980px) { .contact-hero-v56 .page-hero-grid { grid-template-columns:1fr; gap:42px; } .about-stats-v56 .about-stat + .about-stat { border-left:0; border-top:1px solid rgba(71,20,30,.10); } .about-image-single,.about-image-single img { min-height:460px; height:460px; } .offers-hero-signet { width:300px; height:300px; right:-80px; top:90px; opacity:.045; } } @media (max-width: 680px) { .about-stats-section { padding-top:38px; padding-bottom:48px; } .about-stats-v56 .about-stat { grid-template-columns:52px 1fr; gap:16px; padding:26px 22px; min-height:140px; } .about-stat-icon { width:48px; height:48px; } .about-stats-v56 .about-stat strong { font-size:38px; } .about-image-single,.about-image-single img { min-height:390px; height:390px; border-radius:24px; } .contact-hero-v56 .page-hero-grid { gap:34px; } .offers-hero-signet { width:230px; height:230px; right:-90px; top:120px; } } /* --- V5.7 O nas: lżejszy rytm + mocniejszy kontrast zasad --- */ /* Usunięto moduł 1 / 360° / Jasno. z HTML. */ /* Jak myślimy — czyste, białe tło i więcej oddechu po usunięciu statystyk */ .about-thinking-v57 { background:#fff; padding-top:96px; padding-bottom:104px; border-top:1px solid rgba(71,20,30,.06); } .about-thinking-v57 .about-split { gap:86px; } .about-thinking-v57 .about-copy { max-width:610px; } .about-thinking-v57 .about-copy .h2 { margin-top:18px; } .about-thinking-v57 .about-image-single img { box-shadow:0 26px 70px rgba(71,20,30,.10); } /* Nasze zasady — fiolet/bordo pojawia się na samych kartach, a nie na całej sekcji */ .about-principles-v57 { background:#fbf8f6; position:relative; overflow:hidden; } .about-principles-v57::before { content:''; position:absolute; width:440px; height:440px; border:76px solid rgba(71,20,30,.025); border-radius:50%; right:-180px; top:-170px; pointer-events:none; } .about-principles-v57 .container { position:relative; z-index:1; } .about-principles-v57 .principles-grid { gap:20px; } .about-principles-v57 .principle-card { min-height:300px; padding:32px; background:var(--wine); border-color:rgba(71,20,30,.14); color:#fff; box-shadow:0 22px 52px rgba(71,20,30,.13); } .about-principles-v57 .principle-card::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#ff5f6d,#ffc371); } .about-principles-v57 .principle-card::after { color:rgba(255,255,255,.065); } .about-principles-v57 .principle-card .principle-icon { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); color:#ffc371; } .about-principles-v57 .principle-card h3 { color:#fff; } .about-principles-v57 .principle-card p { color:rgba(255,255,255,.68); line-height:1.7; } .about-principles-v57 .principle-card:hover { transform:translateY(-7px); background:#541824; border-color:rgba(255,195,113,.24); box-shadow:0 28px 70px rgba(71,20,30,.20); } @media (max-width:980px) { .about-thinking-v57 { padding-top:74px; padding-bottom:80px; } .about-thinking-v57 .about-split { gap:48px; } .about-principles-v57 .principle-card { min-height:240px; } } @media (max-width:680px) { .about-thinking-v57 { padding-top:58px; padding-bottom:64px; } .about-thinking-v57 .about-split { gap:32px; } .about-principles-v57 .principle-card { min-height:0; padding:27px 24px; } } /* --- V5.8: Oferty - custom dropdowny + pełniejszy hero / O nas - Nasze wartości --- */ /* Hero ofert: wykorzystanie pustej przestrzeni jako szybkiej nawigacji po typach */ .offers-hero-grid { grid-template-columns:minmax(0,1fr) minmax(420px,.72fr); gap:72px; align-items:stretch; } .offers-hero-side { min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; position:relative; padding:28px 10px 4px 0; } .offers-hero-side .lead { max-width:470px; } .offers-hero-quick { position:absolute; top:18px; left:0; max-width:460px; } .offers-quick-label { display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--wine); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .offers-quick-label::before { content:''; width:34px; height:1px; background:linear-gradient(90deg,#ff5f6d,#ffc371); } .offers-quick-links { display:flex; flex-wrap:wrap; gap:9px; } .offers-quick-links button { appearance:none; border:1px solid rgba(71,20,30,.13); background:rgba(255,255,255,.74); color:var(--wine); min-height:39px; padding:0 15px; border-radius:999px; font:inherit; font-size:12px; font-weight:750; cursor:pointer; box-shadow:0 8px 24px rgba(71,20,30,.035); transition:.22s ease; backdrop-filter:blur(8px); } .offers-quick-links button:hover,.offers-quick-links button:focus-visible { color:#fff; background:var(--wine); border-color:var(--wine); transform:translateY(-2px); outline:none; box-shadow:0 12px 26px rgba(71,20,30,.14); } /* Selecty są progresywnie ulepszane JS-em. Bez JS nadal pozostają natywne. */ .offer-filter-field { position:relative; } .select-native-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; opacity:0 !important; pointer-events:none !important; } .custom-select { position:relative; width:100%; } .custom-select-trigger { width:100%; min-height:31px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:12px; font-weight:750; text-align:left; cursor:pointer; } .custom-select-trigger svg { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:var(--wine); stroke-width:1.8; transition:transform .22s ease; } .custom-select.open .custom-select-trigger svg { transform:rotate(180deg); } .custom-select-menu { position:absolute; top:calc(100% + 14px); left:-13px; min-width:calc(100% + 26px); width:max-content; max-width:300px; padding:8px; border:1px solid rgba(71,20,30,.12); border-radius:17px; background:rgba(255,255,255,.985); box-shadow:0 22px 50px rgba(71,20,30,.16); z-index:120; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top left; transition:opacity .18s ease,transform .18s ease,visibility .18s; } .custom-select.open .custom-select-menu { opacity:1; visibility:visible; transform:translateY(0) scale(1); } .custom-select-option { width:100%; min-width:190px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:11px 12px; border:0; border-radius:11px; background:transparent; color:#2f292b; font:inherit; font-size:12px; font-weight:650; text-align:left; cursor:pointer; transition:.16s ease; } .custom-select-option:hover,.custom-select-option:focus-visible { outline:none; background:rgba(71,20,30,.06); color:var(--wine); } .custom-select-option[aria-selected="true"] { background:var(--wine); color:#fff; } .custom-select-option[aria-selected="true"]::after { content:'✓'; font-size:11px; font-weight:900; } .offer-filter-panel { overflow:visible; } .offer-filter-field:has(.custom-select.open) { z-index:80; } /* Sortowanie w tej samej stylistyce, ale jako lekki pill */ .custom-select.custom-select-sort { width:auto; min-width:230px; } .custom-select-sort .custom-select-trigger { min-height:46px; padding:0 16px 0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:0 8px 24px rgba(71,20,30,.035); } .custom-select-sort .custom-select-menu { left:auto; right:0; min-width:250px; transform-origin:top right; } /* O nas: nowa sekcja wartości — współczesna interpretacja sekcji ze starej strony */ .about-values-v58 { position:relative; overflow:hidden; background:var(--wine); color:#fff; padding-top:96px; padding-bottom:104px; } .about-values-v58::before { content:''; position:absolute; width:520px; height:520px; border:88px solid rgba(255,255,255,.035); border-radius:50%; right:-185px; top:-240px; pointer-events:none; } .about-values-v58::after { content:''; position:absolute; width:280px; height:280px; background:radial-gradient(circle,rgba(255,195,113,.10),transparent 68%); left:-100px; bottom:-120px; pointer-events:none; } .about-values-v58 .container { position:relative; z-index:1; } .values-head { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.55fr); gap:70px; align-items:end; margin-bottom:54px; } .eyebrow-light { color:#ffc371; } .eyebrow-light::before { background:linear-gradient(90deg,#ff5f6d,#ffc371); } .about-values-v58 .h2 { color:#fff; margin-top:14px; } .values-accent { color:#ffc371; font-style:italic; font-weight:600; } .values-head > p { color:rgba(255,255,255,.67); font-size:16px; line-height:1.75; max-width:460px; margin:0 0 5px; } .values-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.13); border-left:1px solid rgba(255,255,255,.13); } .value-item { position:relative; min-height:235px; padding:30px 30px 35px; border-right:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); overflow:hidden; transition:background .25s ease,transform .25s ease; } .value-item::after { content:attr(data-value-no); position:absolute; right:22px; bottom:-16px; color:rgba(255,255,255,.045); font-size:92px; font-weight:800; line-height:1; pointer-events:none; } .value-item:hover { background:rgba(255,255,255,.055); } .value-icon { width:47px; height:47px; display:grid; place-items:center; border-radius:14px; color:#ffc371; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); margin-bottom:42px; } .value-icon .icon { width:23px; height:23px; stroke-width:1.65; } .value-item p { position:relative; z-index:1; max-width:330px; margin:0; color:#fff; font-size:16px; font-weight:650; line-height:1.58; } @media (max-width:980px) { .offers-hero-grid { grid-template-columns:1fr; gap:38px; } .offers-hero-side { min-height:0; padding:0; } .offers-hero-quick { position:relative; top:auto; left:auto; margin-bottom:24px; } .custom-select-menu { min-width:100%; width:100%; left:0; } .values-head { grid-template-columns:1fr; gap:22px; } .values-grid { grid-template-columns:1fr 1fr; } } @media (max-width:680px) { .offers-quick-links { gap:7px; } .offers-quick-links button { min-height:36px; padding:0 12px; font-size:11px; } .custom-select.custom-select-sort { width:100%; min-width:0; } .custom-select-sort .custom-select-menu { width:100%; right:0; } .about-values-v58 { padding-top:68px; padding-bottom:72px; } .values-grid { grid-template-columns:1fr; } .value-item { min-height:190px; padding:26px 24px 30px; } .value-icon { margin-bottom:30px; } } /* ===== OFKORS V5.9 ===== - białe, oddzielone karty "Nasze wartości" - usunięty szybki wybór z hero ofert - spójne dropdowny na całej stronie - poprawione mobile menu i marginesy mobilne */ /* Nasze wartości: bordo zostaje tłem sekcji, a treść dostaje lekkie białe karty */ .about-values-v58 .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border: 0; } .about-values-v58 .value-item { min-height: 238px; padding: 30px 30px 34px; border: 1px solid rgba(255,255,255,.20); border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 18px 42px rgba(28,5,11,.16); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .about-values-v58 .value-item::after { right: 20px; bottom: -13px; color: rgba(71,20,30,.055); } .about-values-v58 .value-item:hover { background: #fff; transform: translateY(-6px); border-color: rgba(255,195,113,.65); box-shadow: 0 26px 58px rgba(28,5,11,.22); } .about-values-v58 .value-icon { margin-bottom: 38px; color: var(--wine); background: linear-gradient(145deg, rgba(255,95,109,.10), rgba(255,195,113,.18)); border-color: rgba(71,20,30,.10); } .about-values-v58 .value-item p { color: var(--wine); font-weight: 720; } /* Oferty hero: bez sztucznego szybkiego wyboru, ale prawa kolumna nadal ma kompozycję */ .offers-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .62fr); gap: clamp(52px, 6vw, 92px); align-items: center; } .offers-hero-side { min-height: 310px; justify-content: center; padding: 32px 10px 0 0; } .offers-hero-side .lead { position: relative; z-index: 2; max-width: 450px; padding: 28px 30px; border: 1px solid rgba(71,20,30,.08); border-radius: 24px; background: rgba(255,255,255,.66); box-shadow: 0 18px 48px rgba(71,20,30,.055); backdrop-filter: blur(8px); } .offers-hero-side .lead::before { content: ''; display: block; width: 44px; height: 2px; margin-bottom: 18px; border-radius: 999px; background: var(--gradient); } .offers-hero-signet { opacity: .055; width: 360px; height: 360px; right: 5vw; top: 88px; } /* Custom select: wszystkie selecty korzystają z tego samego komponentu */ .search-field, .offer-filter-field, .form-field { position: relative; } .search-field:has(.custom-select.open), .offer-filter-field:has(.custom-select.open), .form-field:has(.custom-select.open) { z-index: 160; } /* Typ w wyszukiwarce na SG i filtrach ofert */ .search-field .custom-select-trigger, .offer-filter-field .custom-select-trigger { min-height: 31px; } .search-field .custom-select-menu { top: calc(100% + 12px); left: -12px; min-width: calc(100% + 24px); } /* Selecty formularzowe (np. wycena / kontakt) */ .custom-select.custom-select-input .custom-select-trigger { min-height: 52px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 650; box-shadow: none; } .custom-select.custom-select-input .custom-select-menu { top: calc(100% + 8px); left: 0; width: 100%; min-width: 100%; max-width: none; } /* Mobile menu: jasny panel, czytelny hamburger, poprawny stacking */ .nav-mobile-cta { display: none; } @media (max-width: 960px) { .header, .header.is-scrolled, .header.header-solid { z-index: 2000; background: rgba(255,255,255,.98); color: var(--wine); } .header .container.nav { position: relative; z-index: 2002; } .burger { display: grid !important; place-items: center; position: relative; z-index: 2003; width: 46px; height: 46px; border: 1px solid rgba(71,20,30,.16); border-radius: 50%; background: #fff; color: var(--wine) !important; box-shadow: 0 8px 24px rgba(71,20,30,.08); } .burger span { position: absolute; left: 50%; width: 19px; height: 2px; margin: 0; border-radius: 999px; background: currentColor; transform: translateX(-50%); } .burger span:first-child { top: 18px; } .burger span:last-child { top: 25px; } .burger.active span:first-child { top: 22px; transform: translateX(-50%) rotate(45deg); } .burger.active span:last-child { top: 22px; transform: translateX(-50%) rotate(-45deg); } .nav-links { inset: 86px 16px 16px !important; z-index: 2001 !important; display: flex; padding: 30px 26px 24px; gap: 0; border: 1px solid rgba(71,20,30,.10); border-radius: 26px; background: rgba(255,255,255,.995) !important; color: var(--wine) !important; box-shadow: 0 30px 90px rgba(49,12,20,.20); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px) scale(.985) !important; transform-origin: top right; transition: opacity .25s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility .25s ease; } .nav-links::before { content: ''; position: absolute; right: -54px; bottom: -70px; width: 230px; height: 230px; border: 38px solid rgba(71,20,30,.028); border-radius: 50%; pointer-events: none; } .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1) !important; } .nav-links > a:not(.nav-mobile-cta) { width: 100%; padding: 15px 2px; border-bottom: 1px solid rgba(71,20,30,.08); color: var(--wine) !important; font-family: var(--heading-font); font-size: clamp(25px, 5vw, 34px); font-weight: 700; line-height: 1.05; } .nav-links > a:not(.nav-mobile-cta)::after { display: none; } .nav-links > a.active:not(.nav-mobile-cta) { color: #ff6470 !important; } .nav-mobile-cta { display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; margin-top: 22px; padding: 0 20px; border-radius: 999px; background: var(--wine); color: #fff !important; font-size: 14px !important; font-weight: 800 !important; } .nav-mobile-cta span { font-size: 19px; } body.menu-open::before { content: ''; position: fixed; inset: 0; z-index: 1998; background: rgba(34,7,13,.22); backdrop-filter: blur(3px); } .offers-hero-grid { grid-template-columns: 1fr; gap: 26px; } .offers-hero-side { min-height: 0; padding: 0; } .offers-hero-side .lead { max-width: 620px; } .values-grid { gap: 14px; } } @media (max-width: 680px) { .container, .header .container.nav { width: min(calc(100% - 32px), var(--max)); } .section { padding-top: 62px; padding-bottom: 62px; } .nav-links { inset: 80px 10px 10px !important; padding: 24px 20px 20px; border-radius: 22px; } .nav-links > a:not(.nav-mobile-cta) { padding: 13px 2px; font-size: 28px; } .burger { width: 44px; height: 44px; } .burger span:first-child { top: 17px; } .burger span:last-child { top: 24px; } .burger.active span:first-child, .burger.active span:last-child { top: 21px; } /* główna wyszukiwarka */ .search-panel { gap: 0; padding: 10px; } .search-field { padding: 13px 12px; border-right: 0; border-bottom: 1px solid var(--line); } .search-field:last-of-type { border-bottom: 0; } .search-field .custom-select-menu { left: 0; min-width: 100%; width: 100%; } .custom-select-menu { max-height: 310px; overflow-y: auto; } /* listing ofert */ .offers-hero { padding-top: 108px; padding-bottom: 42px; } .offers-hero .display { font-size: clamp(46px, 13vw, 64px); } .offers-hero-side .lead { padding: 22px; border-radius: 20px; font-size: 14px; } .offers-hero-signet { width: 220px; height: 220px; right: -90px; top: 92px; opacity: .04; } .offer-filter-wrap { padding-inline: 0; } .offer-filter-panel { padding: 8px; gap: 0; overflow: visible; } .offer-filter-field { padding: 14px 12px; } .offer-filter-field .custom-select-menu { left: 0; width: 100%; min-width: 100%; } .offers-toolbar { align-items: stretch; gap: 16px; } .custom-select.custom-select-sort { width: 100%; } /* wartości */ .about-values-v58 { padding-top: 66px; padding-bottom: 70px; } .about-values-v58 .values-grid { grid-template-columns: 1fr; gap: 14px; } .about-values-v58 .value-item { min-height: 0; padding: 25px 23px 29px; border-radius: 20px; } .about-values-v58 .value-icon { margin-bottom: 28px; } /* podstawowa higiena layoutu na podstronach */ .page-hero-grid { padding-top: 42px; padding-bottom: 48px; gap: 30px; } .page-hero-media { min-height: 340px; } .page-hero-copy .display { font-size: clamp(45px, 12.5vw, 58px); } .about-split { gap: 30px; } .contact-grid-v55 { gap: 20px; } .contact-form-panel, .contact-info-panel { padding: 24px 18px; } .footer { padding-top: 62px; } .footer-top { gap: 34px; } .footer-bottom { margin-top: 38px; } } @media (max-width: 390px) { .container, .header .container.nav { width: min(calc(100% - 28px), var(--max)); } .brand, .brand img { width: 140px; } .hero-v5 .hero-copy .display { font-size: 43px; } .page-hero-copy .display { font-size: 43px; } .offers-hero .display { font-size: 44px; } } /* V5.9.1 — dopracowanie menu mobile po teście na 390 px */ @media (max-width: 960px) { .header .brand-white { display: none !important; } .header .brand-color { display: block !important; } .nav-links { inset: 86px 16px auto !important; max-height: calc(100svh - 102px); } } @media (max-width: 680px) { .nav-links { inset: 80px 10px auto !important; max-height: calc(100svh - 90px); } } /* ===== OFKORS V5.10 ===== Mobile menu, mobile property summary and subtler value cards. */ /* O nas / Nasze wartości: bez numerów, ikona jako subtelny watermark + kolorowy akcent */ .about-values-v58 .value-item { min-height: 230px; padding: 34px 32px 32px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 18px 42px rgba(28,5,11,.15); } .about-values-v58 .value-item::before { content: ''; position: absolute; z-index: 2; left: 24px; top: 0; width: 92px; height: 4px; border-radius: 0 0 999px 999px; background: var(--gradient); } .about-values-v58 .value-item::after { content: none !important; } .about-values-v58 .value-icon { position: absolute; z-index: 0; right: 22px; bottom: 14px; width: 126px; height: 126px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--wine); opacity: .055; pointer-events: none; transform: rotate(-7deg); } .about-values-v58 .value-icon .icon { width: 92px; height: 92px; stroke-width: 1.3; } .about-values-v58 .value-item p { position: relative; z-index: 3; max-width: 335px; margin: 56px 0 0; color: var(--wine); font-size: 16px; font-weight: 720; line-height: 1.58; } .about-values-v58 .value-item:hover { border-color: rgba(255,195,113,.72); box-shadow: 0 26px 60px rgba(28,5,11,.23); } .about-values-v58 .value-item:hover .value-icon { opacity: .085; } /* Mobile menu: bardziej kompaktowe, czytelne i jednoznaczny hamburger 3-line */ @media (max-width: 960px) { body.menu-open { overflow: hidden; } .header .burger { display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; } .burger span { position: absolute; left: 50%; width: 18px; height: 2px; margin: 0; border-radius: 999px; background: currentColor !important; opacity: 1; transform: translateX(-50%); transition: top .22s ease, transform .22s ease, opacity .18s ease; } .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; } .burger.active span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); } .burger.active span:nth-child(2) { opacity: 0; } .burger.active span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); } .nav-links { inset: 76px 14px auto !important; max-height: calc(100svh - 90px); padding: 18px 18px 16px; border-radius: 20px; } .nav-links > a:not(.nav-mobile-cta) { padding: 10px 4px; font-family: var(--heading-font); font-size: 21px; font-weight: 700; line-height: 1.15; } .nav-mobile-cta { min-height: 50px; margin-top: 14px; padding: 0 17px; font-size: 13px !important; } .nav-mobile-cta span { font-size: 17px; } } @media (max-width: 680px) { .nav-links { inset: 72px 10px auto !important; padding: 16px 16px 14px; border-radius: 18px; } .nav-links > a:not(.nav-mobile-cta) { padding: 9px 3px; font-size: 20px; } .nav-mobile-cta { min-height: 48px; margin-top: 12px; } /* Oferta szczegółowa: żadnych elementów wypychających viewport */ .property-summary .summary-grid, .property-summary .summary-grid > *, .property-badges, .property-facts, .property-price { min-width: 0; max-width: 100%; width: 100%; } .property-badges { gap: 8px; } .property-badges .tag { flex: 0 1 auto; } .floorplan-trigger { flex: 1 0 100%; width: 100%; max-width: 100%; justify-content: center; white-space: normal; } .property-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .property-facts .fact, .property-facts .fact:last-child { width: auto; max-width: 100%; min-width: 0; padding: 14px 11px; } .property-facts .fact > strong { overflow-wrap: anywhere; } .property-price strong { font-size: clamp(38px, 11vw, 46px); } .about-values-v58 .value-item { min-height: 190px; padding: 28px 23px 27px; } .about-values-v58 .value-item::before { left: 22px; width: 76px; } .about-values-v58 .value-icon { right: 13px; bottom: 4px; width: 104px; height: 104px; } .about-values-v58 .value-icon .icon { width: 78px; height: 78px; } .about-values-v58 .value-item p { margin-top: 42px; font-size: 15px; } } @media (max-width: 390px) { .nav-links > a:not(.nav-mobile-cta) { font-size: 19px; } .property-facts .fact, .property-facts .fact:last-child { grid-template-columns: 36px minmax(0,1fr); column-gap: 9px; padding: 12px 9px; } .property-facts .fact > .fact-icon { width: 35px; height: 35px; border-radius: 10px; } .property-facts .fact > .fact-icon .icon { width: 17px; height: 17px; } .property-facts .fact > span:not(.fact-icon) { font-size: 8.5px; } .property-facts .fact > strong { font-size: 20px; } } /* ========================================================= V5.11 — profil agenta + blog + artykuł ========================================================= */ .agent-profile-hero { position:relative; padding:110px 0 92px; background:linear-gradient(135deg,#fbf8f5 0%,#fff 72%); overflow:hidden; } .agent-profile-orbit { position:absolute; width:560px; aspect-ratio:1; right:-210px; top:-170px; border:78px solid rgba(255,95,109,.055); border-radius:50%; } .agent-profile-grid { position:relative; z-index:2; display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(52px,7vw,110px); align-items:center; } .agent-profile-photo { position:relative; min-height:640px; border-radius:34px; overflow:hidden; background:var(--cream); box-shadow:var(--shadow); } .agent-profile-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; } .agent-profile-badge { position:absolute; left:24px; right:24px; bottom:24px; padding:17px 20px; border-radius:18px; background:rgba(71,20,30,.90); color:#fff; backdrop-filter:blur(10px); } .agent-profile-badge span { display:block; color:#ffc371; font-size:9px; font-weight:800; letter-spacing:.17em; } .agent-profile-badge strong { display:block; margin-top:3px; font-size:14px; } .agent-profile-copy .display { font-size:clamp(62px,7.2vw,112px); } .agent-profile-role { margin:18px 0 8px; color:var(--wine); font-weight:800; } .agent-profile-copy .lead { margin:14px 0 30px; max-width:720px; } .agent-profile-contact { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 26px; } .agent-contact-chip { padding:15px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; transition:.3s; } .agent-contact-chip:hover { border-color:rgba(71,20,30,.35); transform:translateY(-2px); box-shadow:var(--shadow-soft); } .agent-contact-chip span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .agent-contact-chip strong { display:block; margin-top:4px; color:var(--wine); font-size:15px; } .agent-profile-actions { display:flex; flex-wrap:wrap; gap:12px; } .agent-profile-about { background:#fff; } .agent-profile-about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; } .agent-about-copy .lead { margin-top:0; } .agent-points { margin-top:28px; display:grid; gap:0; border-top:1px solid var(--line); } .agent-points div { display:grid; grid-template-columns:58px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; } .agent-points strong { color:var(--wine); font-size:24px; } .agent-points span { font-weight:700; } .agent-offers-head { display:grid; grid-template-columns:1.1fr .8fr; gap:60px; align-items:end; margin-bottom:46px; } .agent-offers-head .lead { margin:0; } .agent-offers-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .agent-offers-foot { margin-top:34px; text-align:center; } .agent-contact-band { padding:82px 0; background:var(--wine); color:#fff; } .agent-contact-band-inner { display:grid; grid-template-columns:1fr .75fr; gap:70px; align-items:center; } .agent-contact-band p { margin:0 0 20px; color:rgba(255,255,255,.68); } .blog-hero { position:relative; padding:116px 0 96px; background:linear-gradient(135deg,#fbf8f5 0%,#fff 76%); overflow:hidden; } .blog-hero-ring { position:absolute; width:520px; aspect-ratio:1; right:-150px; top:-210px; border:70px solid rgba(255,95,109,.05); border-radius:50%; } .blog-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .72fr; gap:80px; align-items:end; } .blog-hero-side .lead { margin:0 0 28px; } .blog-categories { display:flex; flex-wrap:wrap; gap:8px; } .blog-categories button { padding:10px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--wine); font-weight:800; font-size:12px; cursor:pointer; } .blog-categories button.active,.blog-categories button:hover { background:var(--wine); color:#fff; border-color:var(--wine); } .blog-list-section { background:#fff; } .blog-featured { display:grid; grid-template-columns:1.16fr .84fr; border:1px solid var(--line); border-radius:30px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); } .blog-featured-media { min-height:510px; overflow:hidden; } .blog-featured-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .blog-featured:hover .blog-featured-media img { transform:scale(1.025); } .blog-featured-copy { padding:54px; display:flex; flex-direction:column; justify-content:center; } .blog-meta { display:flex; flex-wrap:wrap; gap:10px 16px; color:var(--wine); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .blog-featured-copy h2 { margin:18px 0 14px; font-family:var(--heading-font); font-size:clamp(34px,3.2vw,52px); line-height:1.08; letter-spacing:-.04em; } .blog-featured-copy p { margin:0 0 28px; color:var(--muted); } .blog-list-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:34px; } .blog-list-card { display:grid; grid-template-columns:42% 58%; min-height:310px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; transition:.35s; } .blog-list-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:rgba(71,20,30,.24); } .blog-list-media { position:relative; overflow:hidden; min-height:310px; } .blog-list-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .blog-list-card:hover img { transform:scale(1.04); } .blog-index { position:absolute; left:16px; bottom:14px; color:rgba(255,255,255,.78); font-size:38px; font-weight:800; } .blog-list-copy { padding:28px; display:flex; flex-direction:column; } .blog-list-copy h2 { margin:14px 0 12px; font-family:var(--heading-font); font-size:26px; line-height:1.14; letter-spacing:-.04em; } .blog-list-copy p { margin:0; color:var(--muted); font-size:13px; } .blog-readmore { margin-top:auto; padding-top:20px; color:var(--wine); font-size:12px; font-weight:800; } .blog-load { margin-top:44px; text-align:center; } .article-hero { padding:112px 0 58px; background:linear-gradient(135deg,#fbf8f5 0%,#fff 85%); } .article-hero-inner { max-width:1040px; } .article-back { display:inline-block; margin-bottom:34px; color:var(--wine); font-size:13px; font-weight:800; } .article-hero h1 { max-width:1000px; margin:18px 0 24px; font-family:var(--heading-font); font-size:clamp(48px,6.2vw,88px); font-weight:var(--heading-weight); line-height:.99; letter-spacing:var(--heading-letter-spacing); } .article-lead { max-width:850px; margin:0; color:var(--muted); font-size:20px; line-height:1.65; } .article-author { display:flex; align-items:center; gap:14px; margin-top:30px; } .article-author img { width:54px; height:54px; border-radius:50%; object-fit:cover; object-position:center top; } .article-author span,.article-author small { display:block; color:var(--muted); font-size:10px; } .article-author strong { display:block; color:var(--wine); } .article-cover { padding-top:12px; } .article-cover img { width:100%; max-height:720px; object-fit:cover; border-radius:30px; box-shadow:var(--shadow-soft); } .article-layout { display:grid; grid-template-columns:220px minmax(0,760px); justify-content:center; gap:70px; padding-top:76px; padding-bottom:100px; } .article-toc { position:sticky; top:112px; align-self:start; display:grid; gap:9px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; } .article-toc span { margin-bottom:7px; color:var(--wine); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; } .article-toc a { color:var(--muted); font-size:12px; } .article-toc a:hover { color:var(--wine); } .article-content { min-width:0; } .article-content p,.article-content li { color:#51494b; font-size:17px; line-height:1.85; } .article-content .article-intro { margin-top:0; color:var(--ink); font-size:21px; font-weight:600; } .article-content h2 { scroll-margin-top:110px; margin:62px 0 18px; font-family:var(--heading-font); font-size:38px; line-height:1.15; letter-spacing:-.04em; } .article-content ul { padding-left:22px; } .article-callout { margin:38px 0; padding:28px 30px; border-left:5px solid #ff766f; border-radius:0 18px 18px 0; background:var(--cream); } .article-callout span { display:block; margin-bottom:7px; color:var(--wine); font-size:10px; font-weight:800; letter-spacing:.13em; } .article-callout strong { font-size:20px; line-height:1.5; } .article-content figure { margin:46px 0; } .article-content figure img { width:100%; border-radius:22px; } .article-content figcaption { margin-top:10px; color:var(--muted); font-size:11px; } .article-cta { margin-top:62px; padding:34px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; border-radius:26px; background:var(--wine); color:#fff; } .article-cta .eyebrow { margin-bottom:10px; } .article-cta h3 { margin:0; font-family:var(--heading-font); font-size:30px; } .article-cta p { margin:7px 0 0; color:rgba(255,255,255,.65); font-size:13px; } .article-related { background:var(--cream); } .article-related-head { display:flex; justify-content:space-between; gap:40px; align-items:end; } .article-related-grid { margin-top:40px; } @media (max-width: 980px) { .agent-profile-grid,.agent-profile-about-grid,.agent-offers-head,.agent-contact-band-inner,.blog-hero-grid,.blog-featured { grid-template-columns:1fr; } .agent-profile-photo { min-height:700px; max-width:680px; } .agent-offers-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .blog-featured-media { min-height:430px; } .blog-list-grid { grid-template-columns:1fr; } .article-layout { grid-template-columns:1fr; gap:30px; } .article-toc { position:relative; top:auto; grid-template-columns:repeat(2,1fr); } .article-toc span { grid-column:1/-1; } } @media (max-width: 640px) { .agent-profile-hero,.blog-hero { padding:72px 0 64px; } .agent-profile-grid,.blog-hero-grid { gap:34px; } .agent-profile-photo { min-height:118vw; border-radius:24px; } .agent-profile-contact { grid-template-columns:1fr; } .agent-profile-actions .btn { width:100%; } .agent-profile-about-grid,.agent-offers-head { gap:26px; } .agent-offers-grid { grid-template-columns:1fr; } .agent-contact-band { padding:66px 0; } .blog-featured { border-radius:22px; } .blog-featured-media { min-height:68vw; } .blog-featured-copy { padding:26px 22px 30px; } .blog-list-card { grid-template-columns:1fr; } .blog-list-media { min-height:62vw; } .blog-list-copy { padding:22px; } .article-hero { padding:76px 0 40px; } .article-hero h1 { font-size:clamp(42px,13vw,62px); } .article-lead { font-size:17px; } .article-cover img { border-radius:20px; min-height:62vw; } .article-layout { padding-top:48px; padding-bottom:72px; } .article-toc { display:none; } .article-content p,.article-content li { font-size:16px; } .article-content h2 { margin-top:50px; font-size:31px; } .article-cta { grid-template-columns:1fr; padding:26px 22px; } .article-cta .btn { width:100%; } .article-related-head { display:block; } .article-related-head .link-arrow { margin-top:20px; } } /* ========================================================= V6 — warstwa WordPress Elementy, których prototyp nie miał, bo nie miał panelu: komunikaty formularzy, zgody RODO, treść z edytora, dostępność. Nic tutaj nie zmienia wyglądu ekranów z projektu. ========================================================= */ /* --- Dostępność --- */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 3000; width: auto; height: auto; padding: 12px 20px; clip-path: none; border-radius: 12px; background: var(--wine); color: #fff; font-weight: 800; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; } /* --- Paginacja --- paginate_links() oddaje bieżącą stronę i wielokropek jako , a prototyp stylował wyłącznie . Bez tego aktywna strona traciła kółko. */ .pagination-v55 .page-numbers { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 800; transition: .25s; } .pagination-v55 span.page-numbers.active, .pagination-v55 a.page-numbers.active { background: var(--wine); color: #fff; border-color: var(--wine); } .pagination-v55 span.dots { border-color: transparent; } /* --- Karta wpisu na stronie głównej --- W prototypie

nie był klikalny; w WordPressie owija go . */ .article-card > a { display: flex; flex-direction: column; height: 100%; } .blog-featured-copy h2 a { color: inherit; } /* --- Komunikaty formularzy --- */ .form-notice { grid-column: 1 / -1; margin-bottom: 6px; padding: 14px 18px; border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 1.5; } .form-notice--ok { border: 1px solid rgba(71,20,30,.16); background: rgba(255,195,113,.16); color: var(--wine); } .form-notice--error { border: 1px solid rgba(255,95,109,.4); background: rgba(255,95,109,.1); color: #8d1f2b; } /* --- Zgoda RODO --- */ .form-consent { grid-column: 1 / -1; } .form-consent label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer; } .form-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wine); } .form-consent span { color: var(--muted); font-size: 12px; line-height: 1.55; } .section-wine .form-consent span, .footer .form-consent span { color: rgba(255,255,255,.7); } /* --- Hero podstron bez zdjęcia (polityki, 404, wyszukiwarka) --- */ .page-hero-simple { padding: 116px 0 64px; } .page-hero-simple .page-hero-copy { max-width: 900px; } .page-hero-simple .display { font-size: clamp(46px, 5.6vw, 88px); } /* --- Stan pusty --- */ .empty-state { max-width: 640px; margin: 0 auto; padding: 60px 0; text-align: center; } .empty-state h2 { margin: 0 0 12px; font-family: var(--heading-font); font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; } .empty-state p { margin: 0 0 26px; color: var(--muted); } /* --- Ikony social w stopce --- */ .footer-socials { display: flex; gap: 10px; margin-top: 20px; } .footer-socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; transition: .25s; } .footer-socials a:hover { background: #fff; color: var(--wine); border-color: #fff; } .footer-socials .icon { width: 17px; height: 17px; } /* --- Treść z edytora --- Bloki Gutenberga na stronach informacyjnych i w artykułach. */ .entry-content > *, .article-content > * { max-width: 100%; } .entry-content h2, .article-content h2 { scroll-margin-top: 110px; margin: 56px 0 18px; font-family: var(--heading-font); font-size: clamp(30px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.04em; } .entry-content h3, .article-content h3 { margin: 40px 0 14px; font-family: var(--heading-font); font-size: 25px; letter-spacing: -.03em; } .entry-content p, .entry-content li { color: #51494b; font-size: 17px; line-height: 1.85; } .entry-content a, .article-content a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; } .entry-content img, .article-content img { height: auto; border-radius: 18px; } .wp-block-image { margin: 40px 0; } .wp-block-image figcaption, .entry-content figcaption { margin-top: 10px; color: var(--muted); font-size: 11px; } .entry-content blockquote, .article-content blockquote { margin: 38px 0; padding: 26px 30px; border-left: 5px solid #ff766f; border-radius: 0 18px 18px 0; background: var(--cream); font-size: 19px; } .entry-content blockquote p:last-child, .article-content blockquote p:last-child { margin-bottom: 0; } .alignleft { float: left; margin: 6px 28px 22px 0; } .alignright { float: right; margin: 6px 0 22px 28px; } .aligncenter { margin-inline: auto; } .alignwide { width: min(100%, 1040px); margin-inline: auto; } .alignfull { width: 100%; } .entry-content table, .article-content table { width: 100%; border-collapse: collapse; font-size: 14px; } .entry-content td, .entry-content th, .article-content td, .article-content th { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; } /* Szerokie tabele przewijają się we własnym kontenerze, a nie rozpychają strony. */ .wp-block-table { overflow-x: auto; } @media (max-width: 680px) { .page-hero-simple { padding: 82px 0 44px; } .alignleft, .alignright { float: none; margin: 22px 0; } .entry-content p, .entry-content li { font-size: 16px; } } /* Sortowanie ofert jest osobnym formularzem (żeby zmiana sortowania nie gubiła filtrów), więc pasek narzędzi musi traktować go jak sam