/* ================================================== FUNKCJE DODATKOWE STRONY — STYLE Reguły działają WYŁĄCZNIE, gdy dane ustawienie jest włączone w panelu (atrybut data-* na , ustawiany przez site-extras.js). Bez ustawień wygląd strony pozostaje dokładnie taki jak wcześniej. ================================================== */ /* ================================================== UKŁAD SEKCJI ================================================== */ /* Sekcja wyłączona w panelu — nigdy niewidoczna */ .onepage-section.section-disabled, html[data-layout="single-page"] .onepage-section.section-disabled { display: none !important; } .site-nav-link.section-disabled-link, .mobile-floating-nav-link.section-disabled-link { display: none !important; } /* Tryb jednostronicowy — wszystkie sekcje jedna pod drugą */ html[data-layout="single-page"] .onepage-section.card-hidden { display: block !important; } html[data-layout="single-page"] .onepage-section.hero-section.card-hidden { display: flex !important; } html[data-layout="single-page"] .onepage-section.single-tone-a { background: color-mix(in srgb, var(--ui-color-surface) 18%, transparent); } html[data-layout="single-page"] .onepage-section.single-tone-b { background: color-mix(in srgb, var(--ui-color-background) 30%, transparent); } /* Ukryty pasek nawigacji (tylko w trybie jednostronicowym) */ html[data-hide-nav] .site-nav, html[data-hide-nav] .site-mobile-toggle, html[data-hide-nav] .mobile-floating-nav { display: none !important; } html[data-hide-nav] .site-header { grid-template-columns: auto 1fr auto; } /* ================================================== PRZYCISK PANELU (⚙) Domyślnie ukryty; widoczny po włączeniu w panelu → Konto → „Pokaż przycisk panelu na stronie”. ================================================== */ html:not([data-show-admin-link]) :is(.site-admin-link, .mobile-floating-nav-settings) { display: none !important; } /* ================================================== ANIMACJE PRZY PRZEWIJANIU ================================================== */ .site-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .site-reveal.site-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .site-reveal { opacity: 1; transform: none; transition: none; } } /* ================================================== GĘSTOŚĆ ODSTĘPÓW ================================================== */ html[data-ap-density="compact"] .content-section { padding-top: 24px; padding-bottom: 24px; } html[data-ap-density="compact"] #o-nas .onepage-content-inner, html[data-ap-density="compact"] #kontakt .onepage-content-inner { padding-top: 24px; padding-bottom: 24px; } html[data-ap-density="comfortable"] .content-section { padding-top: 80px; padding-bottom: 80px; } html[data-ap-density="comfortable"] #o-nas .onepage-content-inner, html[data-ap-density="comfortable"] #kontakt .onepage-content-inner { padding-top: 72px; padding-bottom: 72px; } /* ================================================== CIEŃ KART I RAMEK ================================================== */ html[data-ap-shadow="none"] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { box-shadow: none !important; } html[data-ap-shadow="soft"] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { box-shadow: 0 6px 18px rgba(0, 0, 0, .06) !important; } html[data-ap-shadow="strong"] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { box-shadow: 0 20px 48px rgba(0, 0, 0, .18) !important; } /* ================================================== KSZTAŁT (Wygląd → Kształt przycisków) Zaokrąglenia wszystkich elementów strony biorą się ze wspólnych zmiennych: coreui/css/shape.css. Pola wieloliniowe mają własny, mniejszy łuk — przy „Pigułce” nie robią się z nich „stadiony”. ================================================== */ :is(.contact-content textarea, #kontakt .contact-form textarea, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { border-radius: var(--ui-radius-multi) !important; corner-shape: var(--ui-corner-shape) !important; clip-path: var(--ui-clip-multi) !important; } /* ================================================== TEKST: NAGŁÓWKI, ETYKIETY, LINKI ================================================== */ html[data-ap-heading-color] :is(.onepage-main h1, .onepage-main h2, .onepage-main h3, .site-footer h2, .site-footer h3, .site-policy-title, .gallery-modal-info h2):not(.gallery-overlay h2):not([id="site-name"]) { color: var(--ap-heading-color) !important; } html[data-ap-label-font] :is(#kontakt .contact-form label, #kontakt .contact-label, .site-inquiry-field label, .site-edit-field > label, .site-nav-text, .mobile-floating-nav-text) { font-family: var(--ap-label-font) !important; } html[data-ap-label-color] :is(#kontakt .contact-form label, #kontakt .contact-label, .site-inquiry-field label, .site-edit-field > label) { color: var(--ap-label-color) !important; } html[data-ap-link-color] :is(.about-content a, #kontakt .contact-value a, .site-footer a, .site-policy-body a) { color: var(--ap-link-color) !important; } /* ================================================== IKONY ================================================== */ html[data-ap-icon-color] :is(.site-nav-icon svg, .mobile-floating-nav svg) { stroke: var(--ap-icon-color) !important; } html[data-ap-icon-color] #kontakt .contact-icon { color: var(--ap-icon-color) !important; } html[data-ap-icon-stroke] :is(.site-nav-icon svg, .mobile-floating-nav svg) { stroke-width: var(--ap-icon-stroke) !important; } html[data-ap-icon-opacity] :is(.site-nav-icon svg, .mobile-floating-nav svg, #kontakt .contact-icon) { opacity: var(--ap-icon-opacity) !important; } /* ================================================== ELEMENTY — wspólne wzorce Przyciski: .contact-submit, przyciski koszyka/zapytania Pola: pola formularza kontaktu i zapytania Karty: O nas, Kontakt, kafelki oferty i realizacji Ramki: okna (szczegóły realizacji, zapytanie, dokumenty) Nawigacja: górny pasek i pływające menu na telefonie ================================================== */ /* ---------- PRZYCISKI ---------- */ html[data-ap-button-bg] :is(#kontakt .contact-submit, .site-cart-send, .site-cart-clear, .site-inquiry-submit, .site-inquiry-back, .site-edit-save, .site-edit-cancel, .site-edit-add-detail, .offer-add-button, .floating-query-button, .site-admin-link, .gallery-modal-close, .gallery-modal-nav, .site-policy-close, .site-cart-close, .offer-ask-button, .offer-add-wide, .site-cart-button, .site-cart-remove, .site-edit-upload) { background-color: var(--ap-button-bg) !important; } html[data-ap-button-img] :is(#kontakt .contact-submit, .site-cart-send, .site-cart-clear, .site-inquiry-submit, .site-inquiry-back, .site-edit-save, .site-edit-cancel, .site-edit-add-detail, .offer-add-button, .floating-query-button, .site-admin-link, .gallery-modal-close, .gallery-modal-nav, .site-policy-close, .site-cart-close, .offer-ask-button, .offer-add-wide, .site-cart-button, .site-cart-remove, .site-edit-upload) { background-image: var(--ap-button-img) !important; background-size: cover !important; background-position: center !important; } html[data-ap-button-text] :is(#kontakt .contact-submit, .site-cart-send, .site-cart-clear, .site-inquiry-submit, .site-inquiry-back, .site-edit-save, .site-edit-cancel, .site-edit-add-detail, .offer-add-button, .floating-query-button, .site-admin-link, .gallery-modal-close, .gallery-modal-nav, .site-policy-close, .site-cart-close, .offer-ask-button, .offer-add-wide, .site-cart-button, .site-cart-remove, .site-edit-upload) { color: var(--ap-button-text) !important; } html[data-ap-button-border="off"] :is(#kontakt .contact-submit, .site-cart-send, .site-cart-clear, .site-inquiry-submit, .site-inquiry-back, .site-edit-save, .site-edit-cancel, .site-edit-add-detail, .offer-add-button, .floating-query-button, .site-admin-link, .gallery-modal-close, .gallery-modal-nav, .site-policy-close, .site-cart-close, .offer-ask-button, .offer-add-wide, .site-cart-button, .site-cart-remove, .site-edit-upload) { border: none !important; } html[data-ap-button-border="on"] :is(#kontakt .contact-submit, .site-cart-send, .site-cart-clear, .site-inquiry-submit, .site-inquiry-back, .site-edit-save, .site-edit-cancel, .site-edit-add-detail, .offer-add-button, .floating-query-button, .site-admin-link, .gallery-modal-close, .gallery-modal-nav, .site-policy-close, .site-cart-close, .offer-ask-button, .offer-add-wide, .site-cart-button, .site-cart-remove, .site-edit-upload) { border: var(--ap-button-border-width, 1px) var(--ap-button-border-style, solid) var(--ap-button-border-color, var(--ui-color-primary)) !important; } /* Przycisk zapytania ma gradient — przy własnym kolorze tła go zdejmujemy */ html[data-ap-button-bg]:not([data-ap-button-img]) .floating-query-button { background-image: none !important; } /* ---------- POLA ---------- */ html[data-ap-field-bg] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { background-color: var(--ap-field-bg) !important; } html[data-ap-field-img] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { background-image: var(--ap-field-img) !important; background-size: cover !important; background-position: center !important; } html[data-ap-field-glass] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-ap-field-text] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { color: var(--ap-field-text) !important; } html[data-ap-field-border="off"] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { border: none !important; } html[data-ap-field-border="on"] :is(#kontakt .contact-form input, #kontakt .contact-form textarea, .site-inquiry-field input, .site-inquiry-field textarea, .site-edit-description, .site-edit-detail-row textarea) { border: var(--ap-field-border-width, 1px) var(--ap-field-border-style, solid) var(--ap-field-border-color, var(--ui-color-primary)) !important; } /* ---------- KARTY ---------- */ html[data-ap-card-bg] :is(.about-content, #kontakt .contact-content, .offer-card, .realizations-list-item, .offer-price-card, .offer-row) { background-color: var(--ap-card-bg) !important; } html[data-ap-card-img] :is(.about-content, #kontakt .contact-content, .offer-card, .realizations-list-item, .offer-price-card, .offer-row) { background-image: var(--ap-card-img) !important; background-size: cover !important; background-position: center !important; } html[data-ap-card-glass] :is(.about-content, #kontakt .contact-content, .offer-card, .realizations-list-item, .offer-price-card, .offer-row) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-ap-card-text] :is(.about-content, #kontakt .contact-content, .offer-card, .realizations-list-item, .offer-price-card, .offer-row) { color: var(--ap-card-text) !important; } /* Kolor tekstu kart wygrywa z kolorem nagłówków wewnątrz kart (powtórzony atrybut = wyższy priorytet reguły). */ html[data-ap-card-text][data-ap-card-text][data-ap-card-text][data-ap-card-text] :is(.onepage-main .offer-name, .onepage-main .offer-description, .onepage-main .realizations-list-title, .onepage-main .realizations-list-description, .onepage-main .about-content h1, .onepage-main .about-content h2, .onepage-main .about-content h3, .onepage-main .contact-content h2) { color: var(--ap-card-text) !important; } html[data-ap-card-border="off"] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .offer-price-card, .offer-row) { border: none !important; } html[data-ap-card-border="on"] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .offer-price-card, .offer-row) { border: var(--ap-card-border-width, 1px) var(--ap-card-border-style, solid) var(--ap-card-border-color, var(--ui-color-primary)) !important; } /* ---------- RAMKI (okna) ---------- */ html[data-ap-frame-bg] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { background-color: var(--ap-frame-bg) !important; } html[data-ap-frame-img] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { background-image: var(--ap-frame-img) !important; background-size: cover !important; background-position: center !important; } html[data-ap-frame-glass] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } html[data-ap-frame-text] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { color: var(--ap-frame-text) !important; } html[data-ap-frame-border="off"] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { border: none !important; } html[data-ap-frame-border="on"] :is(.gallery-modal-content, .site-cart-dialog, .site-policy-dialog) { border: var(--ap-frame-border-width, 1px) var(--ap-frame-border-style, solid) var(--ap-frame-border-color, var(--ui-color-primary)) !important; } /* ---------- NAWIGACJA ---------- */ html[data-ap-nav-bg] :is(.site-header, .mobile-floating-nav) { background-color: var(--ap-nav-bg) !important; } html[data-ap-nav-img] :is(.site-header, .mobile-floating-nav) { background-image: var(--ap-nav-img) !important; background-size: cover !important; background-position: center !important; } html[data-ap-nav-glass] :is(.site-header, .mobile-floating-nav) { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* Aktywna pozycja menu ma jasne tło — zostaje w kolorze akcentu */ html[data-ap-nav-text] :is(.site-header-brand, .site-nav-link:not(.active), .mobile-floating-nav-link:not(.active), .mobile-floating-nav-settings) { color: var(--ap-nav-text) !important; } html[data-ap-nav-border="off"] .site-header { border-bottom: none !important; } html[data-ap-nav-border="off"] .mobile-floating-nav { border: none !important; } html[data-ap-nav-border="on"] .site-header { border-bottom: var(--ap-nav-border-width, 1px) var(--ap-nav-border-style, solid) var(--ap-nav-border-color, var(--ui-color-primary)) !important; } html[data-ap-nav-border="on"] .mobile-floating-nav { border: var(--ap-nav-border-width, 1px) var(--ap-nav-border-style, solid) var(--ap-nav-border-color, var(--ui-color-primary)) !important; } /* ================================================== KONTAKT — bez formularza ================================================== */ #kontakt .contact-layout.contact-no-form { grid-template-columns: minmax(0, 1fr); } #kontakt .contact-layout.contact-no-form .contact-info { padding-right: 0; border-right: none; border-bottom: none; padding-bottom: 0; } #kontakt .contact-form-section[hidden] { display: none !important; } /* ================================================== REALIZACJE — WIDOK LISTY ================================================== */ .gallery.gallery-as-list { display: flex !important; flex-direction: column; gap: 14px; grid-template-columns: none !important; } .realizations-list-item { border: 1px solid color-mix(in srgb, var(--ui-color-primary) 28%, transparent); border-radius: var(--ui-radius-surface); corner-shape: var(--ui-corner-shape); clip-path: var(--ui-clip-surface); background: color-mix(in srgb, var(--ui-color-surface) 78%, transparent); box-shadow: 0 10px 28px rgba(0, 0, 0, .05); overflow: hidden; } .realizations-list-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 0; background: transparent; color: var(--ui-color-text); font-family: var(--ui-font-body); text-align: left; cursor: pointer; } .realizations-list-title { flex: 1; font-family: var(--ui-font-heading); font-size: 1.3rem; font-weight: 500; } .realizations-list-price { color: var(--ui-color-primary-text); font-size: .82rem; letter-spacing: .04em; white-space: nowrap; } .realizations-list-chevron { color: var(--ui-color-primary-text); transition: transform .2s ease; } .realizations-list-item.open .realizations-list-chevron { transform: rotate(180deg); } .realizations-list-body { display: none; padding: 0 22px 20px; } .realizations-list-item.open .realizations-list-body { display: block; } .realizations-list-description { margin-bottom: 14px; color: var(--ui-color-text-muted); font-size: .9rem; line-height: 1.7; white-space: pre-line; } .realizations-list-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .realizations-list-figure { display: flex; flex-direction: column; gap: 6px; } .realizations-list-thumb { padding: 0; border: 0; border-radius: var(--ui-radius-inner); corner-shape: var(--ui-corner-shape); clip-path: var(--ui-clip-inner); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ui-color-surface-muted); cursor: pointer; } .realizations-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .realizations-list-thumb:hover img { transform: scale(1.04); } .realizations-list-figure figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--ui-color-text-muted); line-height: 1.45; } .realizations-list-figure figcaption strong { color: var(--ui-color-text); font-weight: 600; } @media (max-width: 600px) { .realizations-list-head { flex-wrap: wrap; padding: 16px; } .realizations-list-body { padding: 0 16px 16px; } .realizations-list-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================== DOKUMENTY PRAWNE — OKNO ================================================== */ body.site-policy-open { overflow: hidden; } .site-policy-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(30, 24, 20, .55); opacity: 0; transition: opacity .25s ease; } .site-policy-modal.active { opacity: 1; } .site-policy-dialog { position: relative; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(24px, 4vw, 44px); border: 1px solid color-mix(in srgb, var(--ui-color-primary) 28%, transparent); border-radius: var(--ui-radius-surface); corner-shape: var(--ui-corner-shape); clip-path: var(--ui-clip-surface); background: var(--ui-color-surface); color: var(--ui-color-text); box-shadow: 0 20px 50px rgba(0, 0, 0, .2); } .site-policy-title { margin-bottom: 18px; padding-right: 40px; font-family: var(--ui-font-heading); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; } .site-policy-body { font-family: var(--ui-font-body); font-size: .92rem; line-height: 1.8; } .site-policy-body :is(p, ul, ol, h2, h3, h4, blockquote) { margin-bottom: 12px; } .site-policy-body :is(ul, ol) { padding-left: 22px; } .site-policy-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ui-color-primary) 14%, transparent); color: var(--ui-color-text); font-size: 22px; line-height: 1; cursor: pointer; } /* ================================================== MATOWE WYKOŃCZENIE — bez połysku, łagodne cienie (kolory stonowane: coreui/js/appearance.js) ================================================== */ html[data-ui-matte] :is(.about-content, #kontakt .contact-content, .offer-card, .gallery-card, .realizations-list-item, .gallery-modal-content, .site-cart-dialog, .site-policy-dialog, .site-header, .floating-query-button, .offer-add-button) { box-shadow: 0 3px 12px rgba(0, 0, 0, .06) !important; } html[data-ui-matte]:not([data-ap-button-img]) .floating-query-button { background-image: none !important; background-color: var(--ui-color-primary); } /* ================================================== FORMULARZE — pułapka na boty + klauzula RODO ================================================== */ .form-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .form-privacy-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: .75; text-align: center; grid-column: 1 / -1; } .form-privacy-note a { color: inherit; text-decoration: underline; } /* ================================================== TREŚĆ WPISANA PRZEZ SERWER (SEO) Widoczna tylko przez moment — JavaScript zastępuje ją docelowym wyglądem sekcji. ================================================== */ .ssr-prerender { max-width: 760px; margin: 0 auto; padding: 40px 20px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ui-color-text-muted, inherit); } .ssr-prerender h2 { margin: 0 0 12px; font-size: 1.3em; } .ssr-prerender h3 { margin: 14px 0 4px; font-size: 1.05em; } .ssr-prerender p { margin: 0 0 6px; } .ssr-prerender img { display: block; max-width: 160px; max-height: 120px; margin: 8px auto; object-fit: cover; border-radius: var(--ui-radius-inner); corner-shape: var(--ui-corner-shape); clip-path: var(--ui-clip-inner); }