/* lp-landing.css — Hotel Toscania, lokalne landing page SEO. Buduje na style.min.css (resety, header/footer, breakpointy). Paleta i typografia przejęte z projektu: mono #111 / #FFF / #E3E3E0, stopka #0F0F0F; body Manrope, nagłówki Cormorant Garamond (oba wczytane w jak na pozostałych stronach). */ .lp-wrap { min-height: 100vh; background: #FFFFFF; } .lp-container { max-width: 1320px; margin: 0 auto; padding: 0 48px; } .lp-main :where(h1,h2,h3){ font-family: 'Cormorant Garamond', Georgia, serif; color: #111111; font-weight: 600; } /* ---------- HERO ---------- */ .lp-hero { border-bottom: 1px solid #E3E3E0; background: #FFFFFF; } .lp-hero-img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; display: block; background: #EFEDE8; border-bottom: 1px solid #E3E3E0; } .lp-hero-inner { max-width: 1320px; margin: 0 auto; padding: 96px 48px 84px; max-width: 1320px; } .lp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #767676; margin: 0 0 22px; } .lp-hero h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 26px; max-width: none; } .lp-lead { font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.75; color: #3A3A3A; margin: 0 0 36px; max-width: none; } .lp-cta-row { display: flex; flex-wrap: wrap; gap: 16px; } .lp-btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 18px 30px; border: 1px solid #111111; transition: background .18s, color .18s; } .lp-btn-primary { background: #111111; color: #FFFFFF; } .lp-btn-primary:hover { background: #333333; color: #FFFFFF; } .lp-btn-ghost { background: #FFFFFF; color: #111111; } .lp-btn-ghost:hover { background: #F4F4F2; color: #111111; } /* ---------- SECTIONS ---------- */ .lp-section { padding: 76px 0; border-bottom: 1px solid #ECECEA; } .lp-section-alt { background: #FAFAF8; } .lp-kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #B08D57; margin: 0 0 16px; } .lp-section h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; margin: 0 0 28px; max-width: none; } .lp-section h3 { font-size: 22px; line-height: 1.25; margin: 34px 0 12px; } .lp-prose p { font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.8; color: #333333; margin: 0 0 18px; max-width: none; } .lp-prose p:last-child { margin-bottom: 0; } .lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } /* ---------- DOJAZD ---------- */ .lp-facts { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 30px; } .lp-fact { border: 1px solid #E3E3E0; padding: 16px 22px; min-width: 120px; } .lp-fact .lp-fact-n { font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1; color: #111111; } .lp-fact .lp-fact-l { font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #767676; margin-top: 6px; } /* ---------- GALERIA ---------- */ .lp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-gallery figure { margin: 0; } .lp-gallery img { width: 100%; height: 260px; object-fit: cover; display: block; background: #EFEDE8; } .lp-img-placeholder { width: 100%; height: 260px; background: repeating-linear-gradient(45deg,#F0EEE9,#F0EEE9 12px,#EAE7E0 12px,#EAE7E0 24px); display: flex; align-items: center; justify-content: center; color: #9A927F; font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 12px; } /* ---------- POWÓD (sekcja 5) ---------- */ .lp-why { background: #0F0F0F; color: #D8D3C8; } .lp-why h2 { color: #FFFFFF; } .lp-why .lp-prose p { color: #C4BFB4; } /* ---------- FAQ ---------- */ .lp-faq-item { border-bottom: 1px solid #E3E3E0; } .lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #111111; } .lp-faq-item summary::after { content: "+"; font-size: 24px; color: #B08D57; flex-shrink: 0; } .lp-faq-item[open] summary::after { content: "–"; } .lp-faq-a { font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.8; color: #444444; padding: 0 0 26px; max-width: none; } /* ---------- CTA KOŃCOWE ---------- */ .lp-cta { background: #111111; color: #FFFFFF; text-align: center; } .lp-cta h2 { color: #FFFFFF; margin: 0 auto 20px; } .lp-cta-lead { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.7; color: #C9C9C9; max-width: 52ch; margin: 0 auto 20px; } .lp-cta-contact { font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.9; color: #C9C9C9; margin: 0 0 30px; } .lp-cta-contact a { color: #FFFFFF; font-weight: 700; } .lp-cta .lp-cta-row { justify-content: center; } .lp-cta .lp-btn-ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; } .lp-cta .lp-btn-ghost:hover { background: #FFFFFF; color: #111111; } .lp-cta .lp-btn-primary { background: #FFFFFF; color: #111111; border-color: #FFFFFF; } .lp-cta .lp-btn-primary:hover { background: #E3E3E0; } /* ---------- LINKOWANIE WEWNĘTRZNE ---------- */ .lp-links { padding: 66px 0; } .lp-links h2 { font-size: 26px; margin: 0 0 26px; } .lp-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-link-card { display: block; border: 1px solid #E3E3E0; padding: 22px 24px; transition: background .18s, border-color .18s; } .lp-link-card:hover { background: #FAFAF8; border-color: #111111; } .lp-link-card .lp-link-t { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: #111111; } .lp-link-card .lp-link-d { display: block; font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.55; color: #767676; margin-top: 6px; } /* ---------- TABELA HUBÓW ---------- */ .lp-table { width: 100%; border-collapse: collapse; font-family: 'Manrope', sans-serif; font-size: 14px; } .lp-table th, .lp-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #E3E3E0; } .lp-table th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #767676; font-weight: 600; } .lp-table td a { color: #111111; font-weight: 600; } .lp-table td a:hover { color: #767676; } /* ---------- RESPONSYWNOŚĆ ---------- */ @media (max-width: 1024px) { .lp-grid-2 { grid-template-columns: 1fr; gap: 40px; } .lp-gallery, .lp-links-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .lp-container, .lp-hero-inner { padding-left: 22px; padding-right: 22px; } .lp-hero-inner { padding-top: 64px; padding-bottom: 56px; } .lp-section { padding: 52px 0; } .lp-gallery, .lp-links-grid { grid-template-columns: 1fr; } .lp-gallery img, .lp-img-placeholder { height: 220px; } .lp-cta-row { flex-direction: column; } .lp-btn { width: 100%; } .lp-table th:nth-child(n+4), .lp-table td:nth-child(n+4) { display: none; } } /* ---------- ENHANCEMENTS: ikony + polerka wizualna ---------- */ .lp-kicker, .lp-eyebrow { display: inline-flex; align-items: center; gap: 12px; } .lp-kicker::before, .lp-eyebrow::before { content: ""; width: 26px; height: 1px; background: #B08D57; flex-shrink: 0; } .lp-reach-eyebrow::before { width: 40px; } .lp-ic { width: 26px; height: 26px; display: block; color: #B08D57; margin: 0 0 12px; } .lp-facts { gap: 16px; } .lp-fact { border-top: 2px solid #B08D57; transition: background .18s, transform .18s; } .lp-fact:hover { background: #FAF7F0; transform: translateY(-3px); } .lp-gallery figure { overflow: hidden; } .lp-gallery img { transition: transform .55s cubic-bezier(.2,.7,.2,1); } .lp-gallery figure:hover img { transform: scale(1.055); } .lp-faq-item summary { position: relative; } .lp-faq-item summary::after { content: "+"; width: 30px; height: 30px; border: 1px solid #E3E3E0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: #B08D57; transition: background .18s, border-color .18s, color .18s; } .lp-faq-item[open] summary::after { content: "–"; background: #B08D57; border-color: #B08D57; color: #FFFFFF; } .lp-faq-item summary:hover::after { border-color: #B08D57; } .lp-link-card { position: relative; padding-right: 52px; transition: background .18s, border-color .18s, transform .18s; } .lp-link-card::after { content: "→"; position: absolute; right: 22px; top: 22px; font-size: 17px; color: #B08D57; transition: transform .2s; } .lp-link-card:hover { transform: translateY(-3px); } .lp-link-card:hover::after { transform: translateX(5px); } .lp-cta-contact { display: inline-flex; flex-direction: column; gap: 4px; } .lp-cta-ico { display: inline-flex; align-items: center; gap: 10px; } .lp-cta-ico svg { width: 17px; height: 17px; color: #B08D57; flex-shrink: 0; } /* ---------- ZASIĘG (chmura miast) ---------- */ .lp-reach{padding:82px 0 90px;border-top:1px solid #ECECEA;background:#FFFFFF} .lp-reach h2{font-family:'Cormorant Garamond',Georgia,serif;color:#111;font-weight:600;font-size:clamp(30px,4vw,48px);line-height:1.08;margin:0 0 22px;max-width:20ch} .lp-reach-eyebrow{display:flex;align-items:center;gap:14px} .lp-reach-eyebrow::before{content:"";width:40px;height:1px;background:#B08D57;display:inline-block;flex-shrink:0} .lp-reach-lead{font-family:'Manrope',sans-serif;font-size:17px;line-height:1.7;color:#3A3A3A;max-width:none;margin:0 0 34px} .lp-reach-chips{display:flex;flex-wrap:wrap;gap:12px} .lp-reach-chip{display:inline-flex;align-items:center;border:1px solid #E3E3E0;border-radius:999px;padding:11px 20px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#333333;transition:background .18s,border-color .18s,color .18s} a.lp-reach-chip:hover{border-color:#111111;background:#FAFAF8;color:#111111} .lp-reach-chip[aria-current]{background:#111111;color:#FFFFFF;border-color:#111111} @media (max-width:768px){.lp-reach{padding:52px 0 60px}.lp-reach-chip{font-size:11px;padding:9px 15px}} /* tabela miast (huby warstwy 1) */ .lp-city-table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:15px} .lp-city-table th,.lp-city-table td{text-align:left;padding:12px 14px;border-bottom:1px solid #E3E3E0;vertical-align:top} .lp-city-table thead th{font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6B6B66;font-weight:700} .lp-city-table tbody th{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:#2C2A26;white-space:nowrap} .lp-city-table td a{color:#B4562F;text-decoration:none;border-bottom:1px solid rgba(180,86,47,.3)} .lp-city-table td a:hover{border-bottom-color:#B4562F} .lp-city-table tbody tr:hover{background:#F7F3EC} @media(max-width:640px){.lp-city-table,.lp-city-table thead,.lp-city-table tbody,.lp-city-table tr,.lp-city-table th,.lp-city-table td{display:block}.lp-city-table thead{display:none}.lp-city-table tbody tr{border:1px solid #E3E3E0;margin-bottom:12px;padding:6px 10px}.lp-city-table th,.lp-city-table td{border:0;padding:6px 4px}} /*a11y-contrast*/ .lp-kicker,.lp-eyebrow,.eyebrow,.kicker{color:#5F5F5F!important} /* ---------- FORMULARZ ZAPYTANIA (BLOK 4) ---------- */ .lp-form { border-top: 1px solid #E3E3E0; background: #F7F6F3; } .lp-form .lp-container { padding-top: 84px; padding-bottom: 84px; } .lp-form-grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; } .lp-form-aside h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 0 0 18px; } .lp-form-aside p { font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.75; color: #3A3A3A; margin: 0 0 24px; } .lp-form-contact { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #E3E3E0; padding-top: 18px; } .lp-form-contact a { font-size: 15px; font-weight: 700; color: #111111; text-decoration: none; } .lp-form-contact a + a { font-weight: 500; font-size: 14px; color: #555555; } .lp-form-contact span { font-size: 13px; color: #767676; } .lp-form form { background: #FFFFFF; border: 1px solid #E3E3E0; padding: 36px 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lp-form label { display: flex; flex-direction: column; gap: 8px; } .lp-form label span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6B6B6B; } .lp-form input, .lp-form textarea { border: 1px solid #D9D8D3; background: #FFFFFF; padding: 14px 16px; font-family: 'Manrope', sans-serif; font-size: 15px; color: #111111; outline: none; min-height: 48px; } .lp-form input:focus, .lp-form textarea:focus { border-color: #111111; box-shadow: 0 0 0 2px rgba(17,17,17,.12); } .lp-form .lp-form-wide { grid-column: span 2; } .lp-form .lp-form-rodo { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.6; color: #4A4A4A; } .lp-form .lp-form-rodo input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; flex: none; } .lp-form .lp-form-rodo a { color: #111111; } .lp-form button { grid-column: span 2; justify-self: start; min-height: 48px; padding: 15px 34px; background: #111111; color: #FFFFFF; border: 1px solid #111111; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } .lp-form button:hover { background: #FFFFFF; color: #111111; } .lp-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lp-form-msg { max-width: 1320px; margin: 0 auto 24px; padding: 16px 20px; font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.6; border: 1px solid #C9C9C2; background: #FFFFFF; color: #111111; } .lp-form-msg.is-ok { border-color: #2F6B45; color: #21532F; } .lp-form-msg.is-err { border-color: #9B2C2C; color: #8A2626; } /* ---------- STICKY CTA (mobile) ---------- */ .lp-sticky { display: none; } @media (max-width: 900px) { .lp-form-grid { grid-template-columns: 1fr; gap: 32px; } .lp-form form { grid-template-columns: 1fr; padding: 28px 22px; } .lp-form .lp-form-wide, .lp-form .lp-form-rodo, .lp-form button { grid-column: span 1; } .lp-form button { justify-self: stretch; } .lp-wrap { padding-bottom: 72px; } .lp-sticky { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #E3E3E0; box-shadow: 0 -8px 24px rgba(0,0,0,.12); } .lp-sticky a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } .lp-sticky .lp-sticky-call { background: #FFFFFF; color: #111111; } .lp-sticky .lp-sticky-ask { background: #111111; color: #FFFFFF; } } @media (min-width: 901px) and (max-width: 1024px) { .lp-container { padding-left: 32px; padding-right: 32px; } .lp-hero-inner { padding: 72px 32px 60px; } .lp-form-grid { grid-template-columns: 280px 1fr; gap: 32px; } .lp-form form { padding: 30px 28px; } }