/* ════════════════════════════════════════════════════════════ main.css — style niekrytyczne (ładowane asynchronicznie). Tokeny, header, hero i stats są inline w . ════════════════════════════════════════════════════════════ */ /* ── Sekcje i typografia ────────────────────────────────── */ .section { padding-block: clamp(80px, 11vw, 140px); background: var(--bg); } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .section-title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); max-width: 24ch; } .section-title em { font-style: normal; background: var(--grad-brass); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .section-lead { color: var(--text-2); max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); } /* Etykieta sekcji stylizowana na linię wymiarową z rysunku technicznego */ .dim-label { display: inline-flex; align-items: center; gap: .8rem; color: var(--accent); font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.1rem; } .dim-label::before, .dim-label::after { content: ''; width: 30px; height: 9px; flex: none; opacity: .8; background: linear-gradient(var(--accent), var(--accent)) left center / 1px 9px no-repeat, linear-gradient(var(--accent), var(--accent)) right center / 1px 9px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; } /* ── Oferta ─────────────────────────────────────────────── */ .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px, 4vw, 46px); } .offer-item { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface) 0%, transparent 150%); padding: clamp(26px, 3vw, 38px); transition: transform .5s var(--ease-out), border-color .5s; overflow: hidden; } .offer-item::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 166, 107, .09), transparent 60%); pointer-events: none; } .offer-item:hover { transform: translateY(-8px); border-color: rgba(201, 166, 107, .4); } .offer-item:hover::before { opacity: 1; } .offer-num { font-size: .82rem; font-weight: 700; letter-spacing: .2em; color: var(--walnut); margin-bottom: 1.1rem; } .offer-item h3 { font-size: 1.35rem; margin-bottom: .7rem; } .offer-item p { color: var(--text-2); font-size: .95rem; margin-bottom: 1.4rem; flex-grow: 1; } .offer-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; font-weight: 600; font-size: .95rem; } .offer-link span { transition: transform .35s var(--ease-out); } .offer-link:hover span { transform: translateX(6px); } .offer-link:hover { color: var(--accent-hover); } /* ── Portfolio ──────────────────────────────────────────── */ .portfolio { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .portfolio--preview { grid-template-columns: repeat(4, 1fr); } .portfolio-item { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: opacity .3s ease, transform .3s ease, border-color .5s, box-shadow .5s var(--ease-out); } .portfolio-item:hover { border-color: rgba(201, 166, 107, .35); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); } .portfolio-item.is-hiding { opacity: 0; transform: scale(.97); } .portfolio-item[hidden] { display: none; } .portfolio-item img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1s var(--ease-out); cursor: zoom-in; } .portfolio-item:hover img { transform: scale(1.06); } .portfolio-item button.portfolio-trigger { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .portfolio-item figcaption { display: flex; flex-direction: column; gap: 2px; padding: 1rem 1.15rem 1.1rem; border-top: 1px solid var(--border); } .portfolio-item figcaption strong { font-size: .97rem; font-weight: 600; } .portfolio-item figcaption span { color: var(--text-2); font-size: .84rem; letter-spacing: .03em; } .portfolio-note { margin-top: 34px; color: var(--text-2); text-align: center; } .portfolio-note a { color: var(--accent); font-weight: 600; } .portfolio-note a:hover { color: var(--accent-hover); } /* ── Timeline procesu ───────────────────────────────────── */ .timeline { list-style: none; position: relative; margin-top: clamp(28px, 4vw, 52px); display: grid; } .timeline-line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--border); border-radius: 1px; overflow: hidden; } .timeline-line i { display: block; width: 100%; height: 100%; background: var(--grad-brass); transform: scaleY(var(--tl-p, 0)); transform-origin: top; } .timeline-step { display: flex; gap: clamp(22px, 3vw, 38px); padding-block: clamp(20px, 3vw, 32px); } .timeline-num { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.25rem; background: var(--bg); border: 2px solid var(--walnut); color: var(--accent); box-shadow: 0 0 0 6px var(--bg); transition: border-color .4s, color .4s; } .timeline-step:hover .timeline-num { border-color: var(--accent); color: var(--accent-hover); } .timeline-step h3 { font-size: 1.35rem; margin-bottom: .5rem; } .timeline-step p { color: var(--text-2); max-width: 62ch; } /* ── Kalkulator ─────────────────────────────────────────── */ .calc-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .calc-types { border: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 30px; } .calc-types legend, .calc-area-head > label { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 14px; } .calc-type input { position: absolute; opacity: 0; pointer-events: none; } .calc-type-card { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .35s, background-color .35s, transform .35s var(--ease-out), box-shadow .35s; } .calc-type-card strong { font-size: .98rem; } .calc-type-card > span { font-size: .8rem; color: var(--text-3); line-height: 1.45; } .calc-type-card em { font-style: normal; font-size: .84rem; font-weight: 700; color: var(--accent); margin-top: 8px; } .calc-type-card:hover { border-color: rgba(201, 166, 107, .4); } .calc-type input:checked + .calc-type-card { border-color: var(--accent); background: linear-gradient(135deg, rgba(139, 94, 60, .18), rgba(201, 166, 107, .1)); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); } .calc-type input:focus-visible + .calc-type-card { outline: 2px solid var(--accent-hover); outline-offset: 2px; } .calc-area { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 30px; } .calc-area-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .calc-area-head > label { margin-bottom: 0; } .calc-area-value { display: flex; align-items: baseline; gap: 8px; } .calc-area-value input { width: 96px; font-family: var(--font-display); font-size: 1.9rem; color: var(--text); background: transparent; border: none; border-bottom: 2px solid var(--border); text-align: right; padding: 2px 4px; transition: border-color .3s; -moz-appearance: textfield; appearance: textfield; } .calc-area-value input::-webkit-outer-spin-button, .calc-area-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-area-value input:focus { outline: none; border-color: var(--accent); } .calc-area-value input[aria-invalid="true"] { border-color: #C96B6B; } .calc-area-value span { font-size: 1rem; color: var(--accent); font-weight: 700; } #calc-length-range { width: 100%; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 99px; cursor: pointer; margin-block: 8px; background: linear-gradient(to right, var(--walnut) 0%, var(--accent) var(--fill, 30%), rgba(240, 237, 230, .12) var(--fill, 30%)); } #calc-length-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brass); border: 3px solid var(--bg); box-shadow: 0 4px 14px rgba(201, 166, 107, .5); transition: transform .25s var(--ease-out); } #calc-length-range::-webkit-slider-thumb:hover { transform: scale(1.15); } #calc-length-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 4px 14px rgba(201, 166, 107, .5); } #calc-length-range:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; } .calc-result { position: sticky; top: 100px; text-align: center; background: radial-gradient(120% 100% at 100% 0%, rgba(139, 94, 60, .22), transparent 55%), var(--surface-2); border: 1px solid rgba(201, 166, 107, .25); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 42px); } .calc-result-label { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 14px; } .calc-result-price { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; margin-bottom: 8px; white-space: nowrap; background: var(--grad-brass); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .calc-dash { margin-inline: 6px; } .calc-currency { font-size: .55em; margin-left: 8px; } .calc-result-unit { font-size: .9rem; color: var(--text-2); margin-bottom: 22px; } .calc-result .btn { width: 100%; } .btn--block { width: 100%; } .calc-disclaimer { margin-top: 16px; font-size: .8rem; line-height: 1.55; color: var(--text-3); text-align: left; } /* ── Materiały ──────────────────────────────────────────── */ .mat-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .mat-preview { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .mat-preview img { width: 100%; height: auto; aspect-ratio: 1200 / 668; object-fit: cover; transition: opacity .3s ease; } .mat-preview-label { position: absolute; left: 18px; bottom: 18px; font-family: var(--font-display); font-size: 1.15rem; color: var(--text); background: rgba(13, 13, 13, .72); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 18px; } .mat-picker { display: grid; gap: 10px; } .mat-swatch { display: flex; align-items: center; gap: 14px; font-family: inherit; font-size: .97rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; cursor: pointer; transition: border-color .3s, color .3s, transform .3s var(--ease-out); text-align: left; } .mat-swatch i { width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0; background: var(--sw); border: 1px solid rgba(240, 237, 230, .15); } .mat-swatch:hover { border-color: rgba(201, 166, 107, .4); color: var(--text); transform: translateX(4px); } .mat-swatch.is-active { border-color: var(--accent); color: var(--text); } .mat-swatch:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; } .mat-desc { color: var(--text-2); font-size: .92rem; margin-top: 10px; min-height: 3em; } /* ── O nas ──────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: center; } .about-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 28px 70px rgba(0, 0, 0, .45); } .about-media img { width: 100%; height: auto; aspect-ratio: 1000 / 558; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); } .about-media:hover img { transform: scale(1.1); } .about-badge { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; background: rgba(13, 13, 13, .8); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; } .about-badge strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; background: var(--grad-brass); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .about-badge span { font-size: .8rem; color: var(--text-2); } .about-copy p { color: var(--text-2); margin-bottom: 1.2rem; max-width: 56ch; } .about-copy strong { color: var(--text); } .about-list { list-style: none; margin: .4rem 0 2rem; display: grid; gap: .75rem; } .about-list li { padding-left: 30px; position: relative; font-weight: 500; } .about-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 15px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* ── FAQ ────────────────────────────────────────────────── */ .faq-wrap { max-width: 860px; } .faq-list { margin-top: clamp(22px, 3vw, 36px); display: grid; gap: 14px; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .4s; } .faq-item[open] { border-color: rgba(201, 166, 107, .45); } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: color .3s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary h3 { font-family: inherit; font-weight: 600; font-size: 1.02rem; line-height: inherit; } .faq-item summary:hover { color: var(--accent-hover); } .faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--accent); transform: translate(-50%, -50%); transition: transform .4s var(--ease-out); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); } .faq-answer { padding: 0 24px 22px; } .faq-answer p { color: var(--text-2); font-size: .97rem; } /* ── Opinie ─────────────────────────────────────────────── */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px, 4vw, 46px); } .review { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); transition: transform .5s var(--ease-out), border-color .5s; } .review:hover { transform: translateY(-6px); border-color: rgba(201, 166, 107, .35); } .review-stars { display: flex; gap: 5px; margin-bottom: 1rem; } .review-stars i { width: 16px; height: 16px; background: var(--accent); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } .review.is-visible .review-stars i { opacity: 1; transform: none; } .review.is-visible .review-stars i:nth-child(2) { transition-delay: .1s } .review.is-visible .review-stars i:nth-child(3) { transition-delay: .2s } .review.is-visible .review-stars i:nth-child(4) { transition-delay: .3s } .review.is-visible .review-stars i:nth-child(5) { transition-delay: .4s } .review p { color: var(--text-2); font-size: .97rem; flex-grow: 1; margin-bottom: 1.3rem; } .review footer { display: flex; flex-direction: column; } .review footer strong { font-size: .95rem; } .review footer span { font-size: .83rem; color: var(--text-3); } /* ── Pre-footer CTA ─────────────────────────────────────── */ .cta-banner { position: relative; overflow: hidden; text-align: center; padding-block: clamp(90px, 12vw, 150px); background: radial-gradient(90% 130% at 50% 115%, rgba(139, 94, 60, .35), transparent 60%), var(--bg-alt); border-block: 1px solid var(--border); } .cta-glow { position: absolute; left: 50%; bottom: -140px; width: 640px; height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(201, 166, 107, .28), transparent); filter: blur(40px); pointer-events: none; } .cta-inner { position: relative; } .cta-inner h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.12; margin-bottom: 1.1rem; } .cta-inner h2 em { font-style: normal; background: var(--grad-brass); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .cta-inner > p { color: var(--text-2); font-size: 1.1rem; margin-bottom: 2.4rem; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ── Kontakt ────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 80px); align-items: start; } .contact-copy > p { color: var(--text-2); margin-bottom: 2rem; max-width: 44ch; } .contact-details { list-style: none; display: grid; gap: 20px; } .contact-details li { display: flex; flex-direction: column; gap: 2px; } .contact-label { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .contact-details a, .contact-details li > span:not(.contact-label) { font-size: 1.15rem; font-weight: 600; text-decoration: none; color: var(--text); transition: color .3s; } .contact-details a:hover { color: var(--accent); } .contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(26px, 4vw, 42px); display: grid; gap: 8px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Pływające etykiety: label unosi się przy fokusie / wypełnieniu */ .form-field { position: relative; padding-top: 8px; } .form-field input, .form-field textarea, .form-field select { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 12px; transition: border-color .3s, box-shadow .3s; } .form-field textarea { resize: vertical; min-height: 110px; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 166, 107, .16); } .form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #C96B6B; box-shadow: 0 0 0 3px rgba(201, 107, 107, .14); } .form-field > label { position: absolute; left: 17px; top: 24px; font-size: 1rem; color: var(--text-3); pointer-events: none; transition: transform .25s var(--ease-out), font-size .25s, color .25s, top .25s; } .form-field input:focus ~ label, .form-field input:not(:placeholder-shown) ~ label, .form-field textarea:focus ~ label, .form-field textarea:not(:placeholder-shown) ~ label { top: 12px; transform: translateY(-6px); font-size: .72rem; letter-spacing: .06em; color: var(--accent); } /* pola z pływającą etykietą: tekst wpisany niżej, label ma miejsce u góry */ .form-field input, .form-field textarea { padding-top: 24px; padding-bottom: 10px; } .form-field--select { padding-top: 0; display: grid; gap: 8px; } .form-field--select .select-label { position: static; pointer-events: auto; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .form-field--select select { appearance: none; padding: 14px 16px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A66B' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .field-error { color: #DF9A9A; font-size: .85rem; margin-top: .4rem; min-height: 1.3em; visibility: hidden; } .field-error.is-visible { visibility: visible; } .form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: .82rem; color: var(--text-3); line-height: 1.5; cursor: pointer; margin-top: 6px; } .form-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; } .form-status { font-size: .9rem; min-height: 1.3em; color: var(--text-2); } .form-note { font-size: .8rem; color: var(--text-3); margin-top: -4px; } .form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .form-note a:hover { color: var(--accent-hover); } /* ── Stopka ─────────────────────────────────────────────── */ .site-footer { background: #0a0a0a; border-top: 1px solid var(--border); padding-top: clamp(48px, 7vw, 76px); } .footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: clamp(28px, 5vw, 56px); padding-bottom: clamp(36px, 5vw, 56px); } .footer-brand p { color: var(--text-3); font-size: .9rem; margin-top: 16px; max-width: 34ch; } .footer-brand .footer-legal { font-size: .78rem; margin-top: 10px; } .footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .footer-grid strong { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin-bottom: 5px; } .footer-nav-btn { background: none; border: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--text-3); font-size: .93rem; transition: color .3s; } .footer-nav-btn:hover { color: var(--accent); } .footer-nav a, .footer-contact a, .footer-contact span { text-decoration: none; color: var(--text-3); font-size: .93rem; transition: color .3s; } .footer-nav a:hover, .footer-contact a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid var(--border); font-size: .84rem; color: var(--text-3); } .back-to-top { text-decoration: none; color: var(--text-3); transition: color .3s; } .back-to-top:hover { color: var(--accent); } /* ── Sticky CTA mobile ──────────────────────────────────── */ .mobile-cta { position: fixed; inset: auto 0 0 0; z-index: 800; display: none; grid-template-columns: 1fr 1.6fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); transform: translateY(100%); transition: transform .45s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); } .mobile-cta.is-visible { transform: none; } .mobile-cta a { display: grid; place-items: center; padding: 16px 10px; font-size: .95rem; font-weight: 700; text-decoration: none; } .mobile-cta-call { background: var(--surface); color: var(--text); } .mobile-cta-quote { background: var(--grad-brass-btn); color: #0D0D0D; } /* ── Fokus (dostępność) ─────────────────────────────────── */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ── Responsywność ──────────────────────────────────────── */ @media (max-width: 1024px) { .offer-grid, .reviews, .portfolio { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .calc-grid, .mat-grid { grid-template-columns: 1fr; } .calc-result { position: static; } } @media (max-width: 860px) { .about-grid, .contact-grid { grid-template-columns: 1fr; } .timeline-line { left: 23px; } .timeline-num { width: 48px; height: 48px; font-size: 1.05rem; box-shadow: 0 0 0 4px var(--bg); } .section-title br { display: none; } .cta-inner h2 br { display: none; } } @media (max-width: 680px) { .portfolio { grid-template-columns: repeat(2, 1fr); gap: 12px; } .faq-item summary { padding: 17px 18px; font-size: .97rem; } .faq-answer { padding: 0 18px 18px; } .contact-form { padding: 22px 18px; } .mobile-cta { display: grid; } body { padding-bottom: 0; } } @media (max-width: 560px) { .offer-grid, .reviews, .calc-types { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; gap: 8px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { justify-content: center; text-align: center; } .cta-actions .btn { width: 100%; } .timeline-num { width: 42px; height: 42px; } .timeline-line { left: 20px; } } /* ── Ekrany dotykowe: hover nie istnieje ────────────────── */ @media (hover: none) { .offer-item:hover, .review:hover, .portfolio-item:hover { transform: none; } .portfolio-item:hover img, .about-media:hover img { transform: scale(1.04); } } /* ── Podstrona realizacji: breadcrumb, filtry, lightbox ─── */ .page-intro { padding-top: clamp(150px, 20vw, 190px); } .gallery-section { padding-top: 0; } .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--text-3); margin-bottom: 22px; } .breadcrumb a { color: var(--text-2); text-decoration: none; transition: color .3s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span[aria-current] { color: var(--text); } .gallery-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 clamp(28px, 4vw, 44px); } .gallery-filter { font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .6rem 1.15rem; cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; } .gallery-filter:hover { border-color: rgba(201, 166, 107, .4); color: var(--text); } .gallery-filter.is-active { border-color: var(--accent); color: var(--text); background: linear-gradient(135deg, rgba(139, 94, 60, .22), rgba(201, 166, 107, .12)); } .gallery-filter:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; } .gallery-empty { color: var(--text-2); padding: 40px 0; text-align: center; display: none; } .gallery-empty.is-visible { display: block; } .gallery-back { margin-top: clamp(36px, 5vw, 56px); text-align: center; } .scroll-to-bottom { position: fixed; right: 24px; bottom: 24px; z-index: 850; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 13, 13, .75); border: 1px solid rgba(240, 237, 230, .22); color: var(--text); text-decoration: none; font-size: 1.2rem; line-height: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .3s, color .3s, transform .3s var(--ease-out); } .scroll-to-bottom:hover { border-color: var(--accent); color: var(--accent); transform: translateY(2px); } .scroll-to-bottom:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; } @media (max-width: 680px) { .scroll-to-bottom { bottom: 96px; right: 16px; } } .lightbox { position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 24px; } .lightbox:not([hidden]) { display: flex; } .lightbox__figure { position: relative; max-width: min(1100px, 92vw); max-height: 86vh; } .lightbox__img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; margin-inline: auto; border-radius: var(--radius); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); background: var(--surface); } .lightbox__caption { color: var(--text-2); font-size: .92rem; text-align: center; margin-top: 14px; } .lightbox__close, .lightbox__nav { position: absolute; border-radius: 50%; border: 1px solid rgba(240, 237, 230, .22); background: rgba(13, 13, 13, .6); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: border-color .3s, color .3s, background-color .3s; } .lightbox__close:hover, .lightbox__nav:hover { border-color: var(--accent); color: var(--accent); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; } .lightbox__close { top: -46px; right: 0; width: 40px; height: 40px; font-size: 1.3rem; } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.3rem; } .lightbox__prev { left: 10px; } .lightbox__next { right: 10px; } .lightbox__counter { position: absolute; top: -46px; left: 0; color: var(--text-3); font-size: .82rem; letter-spacing: .08em; } @media (max-width: 560px) { .lightbox__close { top: -40px; } .lightbox__counter { top: -40px; } } /* ── Baner cookies ───────────────────────────────────────── */ .cookie-banner { position: fixed; inset: auto 0 0 0; z-index: 950; transform: translateY(100%); transition: transform .5s var(--ease-out); } .cookie-banner.is-visible { transform: none; } .cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: var(--wrap); margin-inline: auto; padding: 20px var(--pad) max(20px, env(safe-area-inset-bottom)); background: rgba(13, 13, 13, .97); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .cookie-banner__text { color: var(--text-2); font-size: .88rem; line-height: 1.6; max-width: 68ch; flex: 1 1 320px; } .cookie-banner__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cookie-banner__text a:hover { color: var(--accent-hover); } .cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 560px) { .cookie-banner__inner { padding: 18px 20px max(18px, env(safe-area-inset-bottom)); } .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1 1 auto; } } /* ── Reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .review .review-stars i { opacity: 1; transform: none; transition: none; } .timeline-line i { transform: scaleY(1); } .mobile-cta { transition: none; } .cookie-banner { transition: none; } .hero__bg { transform: none !important; } }