/*
Theme Name: Hello Elementor Child
Theme URI: http://example.com
Description: Child theme for Hello Elementor with custom CPT Nieruchomosci
Author: Marcin Krol
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/
/* ============================================================
DESIGN SYSTEM – Build & Tech Services Sp. z o.o.
Przeniesione z demo (nieruchomosci_v2/style.css)
Użycie w Elementorze:
– Dodaj klasę CSS jako "Additional CSS Class" w widgecie
– Zmienne CSS (--navy, --gold itp.) dostępne globalnie
– Przyciski: "btn btn-gold", "btn btn-navy", itd.
– Nagłówki sekcji: "section-label", "section-title"
============================================================ */
/* --- Google Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap");
/* --- Brand Tokens (:root rozszerza istniejący blok wyżej) --- */
:root {
/* Paleta marki */
--navy: #0d1b3e;
--navy-mid: #162347;
--navy-light: #1e3163;
--gold: #c9a84c;
--gold-light: #dec96f;
--gold-pale: #f5edcc;
--gold-dark: #a5883a;
/* Neutrals */
--white: #ffffff;
--off-white: #faf9f7;
--black: #080b14;
--gray-900: #111827;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
/* Semantic */
--bg-primary: #ffffff;
--bg-secondary: #f7f6f3;
--bg-dark: #0d1b3e;
--text-primary: #0d1b3e;
--text-secondary: #4b5563;
--text-light: #9ca3af;
--border: #e4e0d6;
--border-light: #f0ede8;
/* Status nieruchomości */
--status-available: #16a34a;
--status-sale: #c9a84c;
--status-rental: #2563eb;
--status-sold: #6b7280;
/* Typografia */
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
/* Shadows */
--shadow-xs: 0 1px 4px rgba(13, 27, 62, 0.06);
--shadow-sm: 0 2px 8px rgba(13, 27, 62, 0.08);
--shadow-md: 0 6px 20px rgba(13, 27, 62, 0.1);
--shadow-lg: 0 14px 40px rgba(13, 27, 62, 0.13);
--shadow-xl: 0 24px 64px rgba(13, 27, 62, 0.16);
--shadow-gold: 0 6px 24px rgba(201, 168, 76, 0.3);
/* Border radius */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 14px;
--r-xl: 24px;
--r-full: 9999px;
/* Layout */
--section-py: 100px;
--section-py-sm: 72px;
}
/* --- Typografia bazowa --- */
body {
font-family: var(--font-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
color: var(--navy);
line-height: 1.2;
}
/* --- Utilities ---
Elementor: użyj jako CSS Class w dowolnym widgecie */
.text-gold {
color: var(--gold) !important;
}
.text-navy {
color: var(--navy) !important;
}
.text-white {
color: #fff !important;
}
.bg-dark {
background-color: var(--navy) !important;
}
.bg-secondary {
background-color: var(--bg-secondary) !important;
}
/* --- Section Label (złota kreska + caps) ---
Elementor: CSS Class na Heading lub Text widget */
.section-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.section-label::before {
content: "";
display: block;
width: 36px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
/* Wersja wyśrodkowana */
.section-label.centered {
justify-content: center;
}
.section-label.centered::before {
display: none;
}
.section-label.centered::after {
content: "";
display: block;
width: 36px;
height: 1px;
background: var(--gold);
flex-shrink: 0;
}
/* Elementor: .section-label on widget div — flex + ::before gold line
Works regardless of inner widget-container / text-editor nesting */
.elementor-element.section-label {
display: flex !important;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.elementor-element.section-label::before {
content: "";
flex: 0 0 36px;
height: 1px;
background: var(--gold);
}
.elementor-element.section-label p,
.elementor-element.section-label h1,
.elementor-element.section-label h2,
.elementor-element.section-label h3 {
color: var(--gold) !important;
font-family: var(--font-body) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* --- Section Title ---
Elementor: CSS Class na Heading widget */
.section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--navy);
line-height: 1.15;
margin-bottom: 20px;
}
.section-title em {
font-style: italic;
color: var(--gold-dark);
}
.section-title.on-dark {
color: #fff;
}
/* --- Section Header wrapper ---
Elementor: CSS Class na kontener (Column / Container) */
.section-header {
margin-bottom: 60px;
}
.section-header.centered {
text-align: center;
}
.section-header.centered .section-desc {
margin: 0 auto;
}
/* --- Buttons ---
Elementor: "Additional CSS Class" w widgecie Button
Przykłady: "btn btn-gold", "btn btn-navy btn-lg" */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--r-sm);
transition: all var(--transition);
cursor: pointer;
border: 2px solid transparent;
line-height: 1;
text-decoration: none;
}
/* Złoty (główny CTA) */
.btn-gold {
background: var(--gold);
color: var(--navy);
border-color: var(--gold);
}
.btn-gold:hover {
background: var(--gold-dark);
border-color: var(--gold-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--shadow-gold);
}
/* Granatowy */
.btn-navy {
background: var(--navy);
color: #fff !important;
border-color: var(--navy);
}
.btn-navy:hover {
background: var(--navy-light);
border-color: var(--navy-light);
color: #fff !important;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Obrys złoty */
.btn-outline-gold {
background: transparent;
color: var(--gold);
border-color: var(--gold);
}
.btn-outline-gold:hover {
background: var(--gold);
color: var(--navy);
transform: translateY(-2px);
}
/* Obrys biały (na ciemnym tle) */
.btn-outline-white {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.btn-outline-white:hover {
background: #fff;
color: var(--navy);
border-color: #fff;
}
/* Elementor Button widget — btn-outline-gold */
/* Reset border na wrapperze (klasy btn + btn-outline-gold nadają mu ramkę) */
.elementor-element.elementor-widget-button.btn,
.elementor-element.elementor-widget-button.btn-gold,
.elementor-element.elementor-widget-button.btn-outline-gold,
.elementor-element.elementor-widget-button.btn-navy {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.elementor-element.elementor-widget-button.btn-outline-gold .elementor-button,
.elementor-element.elementor-widget-button.btn-outline-gold a.elementor-button {
background: transparent !important;
color: var(--gold) !important;
border: 2px solid var(--gold) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline-gold
.elementor-button:hover,
.elementor-element.elementor-widget-button.btn-outline-gold
a.elementor-button:hover {
background: var(--gold) !important;
color: var(--navy) !important;
border-color: var(--gold) !important;
transform: translateY(-2px) !important;
}
.elementor-element.elementor-widget-button.btn-outline-gold
.elementor-button
svg {
fill: var(--gold) !important;
transition: fill 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline-gold
.elementor-button:hover
svg {
fill: var(--navy) !important;
}
/* Elementor Button widget — btn-navy */
.elementor-element.elementor-widget-button.btn-navy .elementor-button,
.elementor-element.elementor-widget-button.btn-navy a.elementor-button {
background: var(--navy) !important;
color: #fff !important;
border: 2px solid var(--navy) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-navy .elementor-button:hover,
.elementor-element.elementor-widget-button.btn-navy a.elementor-button:hover {
background: var(--navy-light) !important;
border-color: var(--navy-light) !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-lg) !important;
}
.elementor-element.elementor-widget-button.btn-navy .elementor-button svg {
fill: #fff !important;
transition: fill 0.25s ease !important;
}
/* Elementor Button widget — btn-gold */
.elementor-element.elementor-widget-button.btn-gold .elementor-button,
.elementor-element.elementor-widget-button.btn-gold a.elementor-button {
background: var(--gold) !important;
color: var(--navy) !important;
border: 2px solid var(--gold) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-gold .elementor-button:hover,
.elementor-element.elementor-widget-button.btn-gold a.elementor-button:hover {
background: var(--gold-dark) !important;
border-color: var(--gold-dark) !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-gold) !important;
}
/* SVG ikona w btn-gold */
.elementor-element.elementor-widget-button.btn-gold .elementor-button svg {
fill: var(--navy) !important;
transition: fill 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-gold
.elementor-button:hover
svg {
fill: #fff !important;
}
/* Rozmiary */
.btn-lg {
padding: 18px 44px;
font-size: 13px;
}
.btn-sm {
padding: 10px 22px;
font-size: 11px;
}
.btn i {
font-size: 0.875rem;
transition: transform var(--transition);
}
.btn:hover i {
transform: translateX(4px);
}
.btn-phone i {
transform: scaleX(-1);
}
.btn-phone:hover i {
transform: scaleX(-1) translateX(-4px);
}
/* --- Status badges (nieruchomości) ---
Elementor: CSS Class na Text / HTML widget */
.status-badge {
display: inline-block;
padding: 5px 12px;
border-radius: var(--r-full);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.status-available,
.status-dostepne {
background: rgba(22, 163, 74, 0.9);
color: #fff;
}
.status-sale,
.status-na-sprzedaz {
background: rgba(201, 168, 76, 0.9);
color: var(--navy);
}
.status-rental,
.status-na-wynajem {
background: rgba(37, 99, 235, 0.9);
color: #fff;
}
.status-sold,
.status-sprzedane {
background: rgba(107, 114, 128, 0.9);
color: #fff;
}
.status-coming-soon,
.status-wkrotce-w-sprzedazy {
background: rgba(37, 99, 235, 0.9);
color: #fff;
}
/* --- Tag pill ---
Elementor: CSS Class na Text widget (etykieta kategorii) */
.tag {
display: inline-block;
padding: 4px 12px;
background: var(--gold-pale);
color: var(--gold-dark);
border-radius: var(--r-full);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
/* --- Gold divider ---
Elementor: CSS Class na Divider widget */
.divider {
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
border: none;
margin: 20px auto;
}
.divider.left {
margin-left: 0;
}
/* ============================================================
Karta lokalu — [karta_lokalu] shortcode
Używana w szablonie Single CPT: Nieruchomość
Elementor: wstaw widget "Shortcode" z [karta_lokalu]
============================================================ */
.property-info-card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
overflow: hidden !important;
box-shadow: var(--shadow-lg) !important;
font-family: var(--font-body) !important;
}
.property-info-header {
padding: 28px !important;
background: var(--navy) !important;
position: relative !important;
}
.property-info-header::after {
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 28px !important;
right: 28px !important;
height: 1px !important;
background: rgba(201, 168, 76, 0.3) !important;
}
.property-badge {
display: inline-block !important;
padding: 4px 12px !important;
border-radius: var(--r-full) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
line-height: 1 !important;
text-transform: uppercase !important;
margin-bottom: 12px !important;
color: var(--navy) !important;
border: none !important;
}
/* Status-specific overrides for info card badge (na tle navy) */
.property-info-header .property-badge.status-available {
background: rgba(22, 163, 74, 0.9) !important;
color: #fff !important;
}
.property-info-header .property-badge.status-reserved,
.property-info-header .property-badge.status-zarezerwowane {
background: rgba(202, 138, 4, 0.9) !important;
color: #fff !important;
}
.property-info-header .property-badge.status-coming-soon,
.property-info-header .property-badge.status-wkrotce-w-sprzedazy {
background: rgba(37, 99, 235, 0.9) !important;
color: #fff !important;
}
.property-info-header .property-badge.status-sold,
.property-info-header .property-badge.status-sprzedane {
background: rgba(107, 114, 128, 0.9) !important;
color: #fff !important;
}
.property-info-title {
font-size: 1.4rem !important;
font-weight: 600 !important;
color: var(--white) !important;
margin-bottom: 6px !important;
line-height: 1.2 !important;
}
.property-info-location {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.6) !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
}
.property-info-location i {
color: var(--gold) !important;
}
.property-info-body {
padding: 28px !important;
}
/* Reset tabel wewnątrz karty — nadpisuje domyślne style WP/Elementor */
.property-info-body table {
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
margin: 0 !important;
}
.property-info-body table td,
.property-info-body table th {
border: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
vertical-align: middle !important;
padding-right: 0;
}
.property-info-body table tr {
background: transparent !important;
}
/* Siatka 2x2 wewnątrz karty (sidebar jest wąski) */
.property-info-card .property-params-grid {
grid-template-columns: 1fr 1fr !important;
}
/* Przyciski CTA wewnątrz karty */
.property-info-body .btn {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
text-decoration: none !important;
}
.property-info-body .btn i {
font-size: 13px !important;
line-height: 1 !important;
flex-shrink: 0 !important;
}
/* Share buttons row */
.share-buttons-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Sticky sidebar — Elementor: CSS class "property-sidebar-sticky" na kolumnie */
.elementor-element.property-sidebar-sticky {
position: sticky !important;
top: 130px !important;
align-self: flex-start !important;
}
/* --- Property params grid ---
Używane w szablonie CPT single (np. MetaBox / ACF + Elementor Loop) */
.property-params-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.property-param {
text-align: center;
padding: 14px 10px;
background: var(--bg-secondary);
border-radius: var(--r-md);
border: 1px solid var(--border-light);
}
.property-param-value {
display: block;
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--navy);
margin-bottom: 3px;
line-height: 1.2;
}
.property-param-label {
font-size: 10.5px;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
line-height: 1.3;
}
/* --- Text block ---
Elementor: CSS Class na Text Editor widget */
.text-block {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.8;
}
.text-block + .text-block {
margin-top: 16px;
}
/* --- Blok informacyjny (np. Informacje dla nabywców) ---
Obejmuje: CSS Class "oferta-info-text" LUB każdy text-editor wewnątrz akordeonu */
.oferta-info-text h3,
.e-n-accordion .elementor-widget-text-editor h3 {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--text-light) !important;
margin-top: 28px !important;
margin-bottom: 10px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid var(--border-light) !important;
}
.oferta-info-text h3:first-child,
.e-n-accordion .elementor-widget-text-editor h3:first-child {
margin-top: 0 !important;
}
.oferta-info-text p,
.e-n-accordion .elementor-widget-text-editor p {
font-size: 13.5px !important;
color: var(--text-secondary) !important;
line-height: 1.75 !important;
margin-bottom: 10px !important;
}
.oferta-info-text p strong,
.e-n-accordion .elementor-widget-text-editor p strong {
color: var(--navy) !important;
font-weight: 600 !important;
}
.oferta-info-text ul,
.e-n-accordion .elementor-widget-text-editor ul {
margin: 6px 0 12px 0 !important;
padding-left: 18px !important;
}
.oferta-info-text ul li,
.e-n-accordion .elementor-widget-text-editor ul li {
font-size: 13.5px !important;
color: var(--text-secondary) !important;
line-height: 1.7 !important;
margin-bottom: 4px !important;
list-style: disc !important;
}
.oferta-info-text a,
.e-n-accordion .elementor-widget-text-editor a {
color: var(--gold-dark) !important;
text-decoration: none !important;
}
.oferta-info-text a:hover,
.e-n-accordion .elementor-widget-text-editor a:hover {
text-decoration: underline !important;
}
.oferta-info-text em,
.e-n-accordion .elementor-widget-text-editor em {
color: var(--navy) !important;
font-style: italic !important;
}
/* --- Scroll reveal ---
facelift.js automatycznie dodaje .animate-in do elementor-widget
gdy element wchodzi w widok. Bez konfiguracji w Elementorze. */
@keyframes slideUpFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-ready {
opacity: 0;
transform: translateY(20px);
will-change: opacity, transform;
}
.animate-in {
animation: slideUpFadeIn 0.55s var(--ease-out) both;
}
/* Stary .reveal — zachowany dla zgodności z demo HTML */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.65s var(--ease-out),
transform 0.65s var(--ease-out);
will-change: opacity, transform;
}
.reveal.revealed,
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 {
transition-delay: 0.1s;
}
.reveal-delay-2 {
transition-delay: 0.2s;
}
.reveal-delay-3 {
transition-delay: 0.3s;
}
.reveal-delay-4 {
transition-delay: 0.4s;
}
/* --- Responsive --- */
@media (max-width: 768px) {
.property-params-grid {
grid-template-columns: 1fr 1fr;
}
.section-header {
margin-bottom: 40px;
}
}
@media (max-width: 480px) {
.property-params-grid {
grid-template-columns: 1fr 1fr;
}
}
/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.animate-in {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* --- Contact Offices (Strona Kontakt)
Elementor: CSS Class "contact-office-card" na e-con kontenerze
CSS Class "contact-office-name" na Heading widgecie
CSS Class "contact-office-icon" na Icon widgecie
---------------------------------------------------------------- */
/* Karta — base */
.elementor-element.contact-office-card {
background: #ffffff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
padding: 36px 36px 32px !important;
box-shadow: 0 2px 8px rgba(13, 27, 62, 0.08) !important;
transition:
box-shadow 0.32s ease,
transform 0.32s ease !important;
}
/* Karta — hover */
.elementor-element.contact-office-card:hover {
box-shadow: 0 6px 20px rgba(13, 27, 62, 0.1) !important;
transform: translateY(-2px) !important;
}
/* Nazwa karty — Heading widget z klasą contact-office-name */
.elementor-element.contact-office-name {
padding-bottom: 16px !important;
margin-bottom: 4px !important;
border-bottom: 1px solid var(--border-light) !important;
}
.elementor-element.contact-office-name .elementor-heading-title {
font-family: var(--font-display) !important;
font-size: 1.2rem !important;
font-weight: 600 !important;
color: var(--navy) !important;
}
/* Ikona — Icon widget z klasą contact-office-icon */
.elementor-element.contact-office-icon .elementor-icon {
background-color: var(--gold-pale) !important;
border-radius: var(--r-md) !important;
width: 48px !important;
height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.elementor-element.contact-office-icon .elementor-icon i {
font-size: 20px !important;
color: var(--gold-dark) !important;
}
/* Icon List widget wewnątrz karty */
.elementor-element.contact-office-card .elementor-icon-list-items {
display: flex;
flex-direction: column;
gap: 13px;
}
.elementor-element.contact-office-card .elementor-icon-list-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0 !important;
border: none !important;
}
/* Linked items: opakowuje ikonę i tekst — musi też być flex */
.elementor-element.contact-office-card .elementor-icon-list-item > a {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
text-decoration: none !important;
transition: color 0.25s ease !important;
}
.elementor-element.contact-office-card .elementor-icon-list-icon {
flex-shrink: 0;
margin-top: 4px;
}
.elementor-element.contact-office-card .elementor-icon-list-text {
font-size: 14.5px !important;
color: var(--text-secondary) !important;
line-height: 1.5 !important;
}
/* Tekst w linkowanych wierszach — > .elementor-icon-list-text */
.elementor-element.contact-office-card
.elementor-icon-list-item
> a
.elementor-icon-list-text {
color: var(--navy) !important;
font-weight: 600 !important;
}
.elementor-element.contact-office-card
.elementor-icon-list-item
> a:hover
.elementor-icon-list-text {
color: var(--gold-dark) !important;
}
.elementor-element.contact-office-card
.elementor-icon-list-item
> a:hover
.elementor-icon-list-icon
svg {
fill: var(--gold-dark) !important;
}
/* Responsive */
@media (max-width: 640px) {
.elementor-element.contact-office-card {
padding: 28px 24px !important;
}
}
/* ============================================================
Contact CTA Strip — separator pionowy między blokami
CSS Class "contact-cta-item" na każdym z 3 bloków
Reszta (tło, padding, kolory, czcionki) → Elementor UI
============================================================ */
.e-con.contact-cta-item {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.e-con.contact-cta-item:last-child {
border-right: none;
}
@media (max-width: 768px) {
.e-con.contact-cta-item {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.e-con.contact-cta-item:last-child {
border-bottom: none;
}
}
/* contact-offices-section — border-bottom oddzielająca sekcję kart od reszty
CSS Class "contact-offices-section" na kontenerze/sekcji z kartami biur */
.e-con.contact-offices-section {
border-bottom: 1px solid var(--border);
}
/* ============================================================
Contact Hours Box — navy box z godzinami pracy
CSS Class "contact-hours-box" na wewnętrznym kontenerze
============================================================ */
/* Reset globalnego box-shadow i border-radius z .elementor-widget-wrap (Elementor) */
.e-con.contact-hours-box .elementor-widget-wrap {
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
}
/* "Godziny pracy" label */
.contact-hours-box p:first-child,
.contact-hours-box .elementor-widget-text-editor:first-child p {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: var(--gold) !important;
margin: 0 0 12px !important;
}
/* Reset tabeli */
.contact-hours-box table {
width: 100% !important;
border-collapse: collapse !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Komórki tabeli */
.contact-hours-box td {
padding: 8px 0 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 13.5px !important;
color: rgba(255, 255, 255, 0.7) !important;
line-height: 1.4 !important;
}
/* Ostatni wiersz — bez border-bottom */
.contact-hours-box tr:last-child td {
border-bottom: none !important;
}
/* Prawa kolumna (godziny) — biała, pogrubiona */
.contact-hours-box td:last-child {
text-align: right !important;
color: #ffffff !important;
font-weight: 600 !important;
}
/* "Zamknięte" — ostatni wiersz, prawa kolumna */
.contact-hours-box tr:last-child td:last-child {
color: rgba(255, 255, 255, 0.4) !important;
font-weight: 400 !important;
}
/* ============================================================
Contact Form Section — sekcja z formularzem kontaktowym
CSS Class "contact-form-section" na outer container/section
CSS Class "contact-form-col-info" na lewej kolumnie
CSS Class "contact-form-col-form" na prawej kolumnie (formularz)
============================================================ */
/* Kontener formularza — border + shadow */
.e-con.contact-form-col-form {
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-md) !important;
}
@media (max-width: 768px) {
.e-con.contact-form-col-form {
padding: 32px 24px !important;
}
}
/* Odstępy między polami */
.contact-form-col-form .elementor-field-group {
margin-bottom: 16px !important;
}
.contact-form-col-form .elementor-field-type-submit {
margin-bottom: 0 !important;
margin-top: 8px !important;
}
/* Etykiety */
.contact-form-col-form .elementor-field-label {
display: block !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
margin-bottom: 6px !important;
}
/* Pola tekstowe, email, tel, textarea */
.contact-form-col-form .elementor-field-textual {
width: 100% !important;
padding: 12px 16px !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
line-height: 1.5 !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease !important;
box-shadow: none !important;
outline: none !important;
-webkit-appearance: none !important;
}
.contact-form-col-form .elementor-field-textual::placeholder {
color: var(--gray-400) !important;
}
.contact-form-col-form .elementor-field-textual:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
}
/* Select */
.contact-form-col-form .elementor-field-type-select select,
.contact-form-col-form select.elementor-field {
width: 100% !important;
padding: 12px 16px !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--text-primary) !important;
background: var(--bg-primary) !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--r-md) !important;
transition: border-color 0.2s ease !important;
outline: none !important;
cursor: pointer !important;
}
.contact-form-col-form .elementor-field-type-select select:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
}
/* Acceptance (zgoda RODO) */
/* Struktura: .elementor-field-subgroup > span.elementor-field-option > input + label */
.contact-form-col-form
.elementor-field-type-acceptance
.elementor-field-option {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
}
.contact-form-col-form .elementor-acceptance-field {
flex-shrink: 0 !important;
margin-top: 2px !important;
width: 15px !important;
height: 15px !important;
accent-color: var(--gold) !important;
cursor: pointer !important;
}
.contact-form-col-form .elementor-field-type-acceptance label {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
color: var(--text-light) !important;
line-height: 1.6 !important;
cursor: pointer !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
}
.contact-form-col-form .elementor-field-type-acceptance a {
color: var(--gold-dark) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
font-weight: 500 !important;
font-size: 12px;
}
.contact-form-col-form .elementor-field-type-acceptance a:hover {
color: var(--gold) !important;
}
/* Walidacja — pole z błędem */
.contact-form-col-form .elementor-field-textual.elementor-field-invalid,
.contact-form-col-form
.elementor-field-textual:invalid:not(:placeholder-shown) {
border-color: #e53e3e !important;
}
/* Przycisk Submit */
.contact-form-col-form .elementor-button {
width: 100% !important;
background: var(--gold) !important;
color: var(--navy) !important;
border: 2px solid var(--gold) !important;
border-radius: var(--r-sm) !important;
cursor: pointer !important;
transition:
background 0.22s ease,
border-color 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s ease !important;
transform: translateY(0) !important;
}
.contact-form-col-form .elementor-button:hover {
background: var(--gold-dark) !important;
border-color: var(--gold-dark) !important;
color: #fff !important;
box-shadow: var(--shadow-gold) !important;
transform: translateY(-2px) !important;
}
/* Komunikat po wysłaniu */
.contact-form-col-form .elementor-message {
border-radius: var(--r-md) !important;
padding: 14px 20px !important;
font-size: 14px !important;
margin-top: 16px !important;
}
/* Responsywność — na mobile lewa kolumna nad prawą */
@media (max-width: 768px) {
.elementor-element.contact-form-col-info,
.elementor-element.contact-form-col-form {
width: 100% !important;
}
}
/* Polityka prywatności — separatory sekcji
============================================= */
.privacy-sections {
gap: 0 !important;
}
.privacy-sections .e-child {
padding-bottom: 36px !important;
}
.privacy-sections .e-child + .e-child {
border-top: 1px solid var(--border) !important;
padding-top: 36px !important;
}
/* =============================================
Header — Elementor Pro Theme Builder
============================================= */
/* Główne linki nav — base */
.elementor-location-header .elementor-nav-menu--main a.elementor-item {
color: var(--navy) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
transition: color 0.25s ease !important;
}
/* Hover + active — generic */
.elementor-location-header .elementor-nav-menu--main a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main a.elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main a.elementor-item-active,
.elementor-location-header
.elementor-nav-menu--main
.current-menu-item
> a.elementor-item {
color: var(--gold-dark) !important;
background: var(--gold-pale) !important;
border-radius: var(--r-sm) !important;
}
/* Hover + active — boost via widget unique class (id: 49dd1b7) */
.elementor-element-49dd1b7 .elementor-nav-menu a.elementor-item:hover,
.elementor-element-49dd1b7 .elementor-nav-menu a.elementor-item:focus,
.elementor-element-49dd1b7 .elementor-nav-menu a.elementor-item-active,
.elementor-element-49dd1b7
.elementor-nav-menu
.current-menu-item
> a.elementor-item {
color: var(--gold-dark) !important;
background: var(--gold-pale) !important;
border-radius: var(--r-sm) !important;
}
/* Ukryj Elementor pointer-underline ::before / ::after */
.elementor-element-49dd1b7 a.elementor-item::before,
.elementor-element-49dd1b7 a.elementor-item::after {
display: none !important;
}
/* Dropdown menu */
.elementor-location-header .elementor-nav-menu--dropdown {
border-top: 2px solid var(--gold) !important;
border-radius: 0 0 var(--r-md) var(--r-md) !important;
box-shadow: var(--shadow-lg) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
color: var(--text-secondary) !important;
}
.elementor-location-header
.elementor-nav-menu--dropdown
a.elementor-item:hover {
color: var(--gold-dark) !important;
background: var(--gold-pale) !important;
}
/* Menu mobilne — większa czcionka i paddingi dla lepszej czytelności i dotyku */
@media (max-width: 1024px) {
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
font-size: 16px !important;
font-weight: 500 !important;
padding: 14px 20px !important;
letter-spacing: 0.01em !important;
}
.elementor-location-header .elementor-nav-menu--dropdown {
padding: 8px 0 !important;
}
.elementor-location-header .elementor-menu-toggle {
width: 44px !important;
height: 44px !important;
}
.elementor-location-header .elementor-menu-toggle svg {
width: 24px !important;
height: 24px !important;
}
}
/* Border-bottom headera — zawsze widoczny */
.elementor-location-header {
border-bottom: 1px solid var(--border-light) !important;
transition:
box-shadow 0.3s ease,
background 0.3s ease !important;
}
/* Gdy sticky sekcja jest aktywna — drop shadow + białe tło */
.elementor-sticky--active {
box-shadow: 0 2px 12px rgba(13, 27, 62, 0.08) !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* Hamburger toggle */
.elementor-location-header .elementor-menu-toggle svg {
fill: var(--navy) !important;
transition: fill 0.2s ease !important;
}
.elementor-location-header .elementor-menu-toggle:hover svg {
fill: var(--gold-dark) !important;
}
/* CTA button w header (klasa "btn" bez wariantu → gold) */
.elementor-location-header .elementor-widget-button.btn .elementor-button {
background: var(--gold) !important;
color: var(--navy) !important;
border: 2px solid var(--gold) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease !important;
}
.elementor-location-header
.elementor-widget-button.btn
.elementor-button:hover {
background: var(--gold-dark) !important;
border-color: var(--gold-dark) !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-gold) !important;
}
.elementor-location-header .elementor-widget-button.btn .elementor-button svg {
fill: var(--navy) !important;
width: 13px !important;
height: 13px !important;
transition: fill 0.25s ease !important;
}
.elementor-location-header
.elementor-widget-button.btn
.elementor-button:hover
svg {
fill: #fff !important;
}
.elementor-location-header
.elementor-widget-button
.elementor-widget-container {
display: flex !important;
align-items: center !important;
}
/* Social icons w top barze — gold fill, hover */
.elementor-location-header
.elementor-widget-icon-list
.elementor-icon-list-icon
svg {
fill: rgba(255, 255, 255, 0.6) !important;
width: 14px !important;
height: 14px !important;
transition: fill 0.2s ease !important;
}
.elementor-location-header
.elementor-widget-icon-list
.elementor-icon-list-item:hover
.elementor-icon-list-icon
svg {
fill: var(--gold) !important;
}
.elementor-location-header
.elementor-widget-icon-list
.elementor-icon-list-text {
transition: color 0.2s ease !important;
}
.elementor-location-header
.elementor-widget-icon-list
.elementor-icon-list-item:hover
.elementor-icon-list-text {
color: var(--gold) !important;
}
/* =============================================
Footer — sekcja główna
============================================= */
.footer-social .elementor-icon-list-items {
gap: 10px !important;
align-items: center !important;
}
.footer-social .elementor-icon-list-item.elementor-inline-item {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition:
background 0.2s,
border-color 0.2s,
transform 0.2s !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
.footer-social .elementor-icon-list-item.elementor-inline-item:hover {
background: var(--gold) !important;
border-color: var(--gold) !important;
transform: translateY(-3px) !important;
}
.footer-social .elementor-icon-list-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 14px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.footer-social .elementor-icon-list-icon svg {
width: 14px !important;
height: 14px !important;
fill: rgba(255, 255, 255, 0.7) !important;
transition: fill 0.2s !important;
display: block !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.footer-social
.elementor-icon-list-item.elementor-inline-item:hover
.elementor-icon-list-icon
svg {
fill: var(--navy) !important;
}
.footer-social .elementor-icon-list-text {
display: none !important;
}
/* Kolumny 2 & 3 — border pod tytułem (sub-element, niedostępny w Elementorze) */
.footer-col-title .elementor-heading-title {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-bottom: 12px !important;
}
/* Nawigacja — tylko hover */
.footer-nav .elementor-nav-menu li a:hover {
color: var(--gold) !important;
}
/* Kontakt — SVG fill (Elementor nie obsługuje fill na SVG) + hover */
.footer-contact .elementor-icon-list-icon svg {
fill: var(--gold) !important;
}
.footer-contact .elementor-icon-list-item:hover .elementor-icon-list-text {
color: var(--gold) !important;
}
/* =============================================
Footer — pasek dolny
============================================= */
.footer-bottom-bar {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* ============================================================
O NAS — strona
============================================================ */
/* --- Sekcja 1 & 3: Image Split — zdjęcie ze złotym akcentem --- */
/* Zoom zdjęcia na hover — sub-element Image widget */
.about-split-img:hover img {
transform: scale(1.04) !important;
}
.about-split-img img {
transition: transform 0.7s var(--ease) !important;
width: 100% !important;
object-fit: cover !important;
}
/* Dekoracyjny złoty kwadrat — ::after zamiast osobnego diva */
.about-split-img::after {
content: "";
position: absolute;
bottom: -20px;
left: -20px;
width: 120px;
height: 120px;
border: 3px solid var(--gold);
border-radius: var(--r-lg);
z-index: -1;
pointer-events: none;
}
/* Kontener zdjęcia — position:relative dla ::after, overflow:visible żeby akcent wychodził */
.about-split-img {
position: relative !important;
overflow: visible !important;
}
/* Clip zoom na poziomie widżetu obrazka, nie kontenera */
.about-split-img .elementor-widget-image {
overflow: hidden !important;
border-radius: var(--r-lg) !important;
}
/* Responsive order — na mobile treść zawsze nad zdjęciem */
@media (max-width: 1024px) {
.about-split-img {
order: 2 !important;
}
.about-split-content {
order: 1 !important;
}
/* Ukryj CTA button "Skontaktuj się" w headerze */
.header-btn {
display: none !important;
}
}
/* --- Sekcja 2: Value Cards — misja i wartości --- */
/* Kontener karty musi mieć position:relative + overflow:hidden */
.elementor-element.value-card {
position: relative !important;
overflow: hidden !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-md) !important;
transition:
transform 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out) !important;
}
/* Złota linia u góry — animowana na hover */
.elementor-element.value-card::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, var(--gold), var(--gold-light)) !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform 0.35s var(--ease-out) !important;
}
.elementor-element.value-card:hover::before {
transform: scaleX(1) !important;
}
/* Hover */
.elementor-element.value-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* Numer watermark (01, 02...) — absolutnie w prawym górnym rogu */
.value-number {
position: absolute !important;
top: 20px !important;
right: 24px !important;
pointer-events: none !important;
user-select: none !important;
}
/* Ikona — navy box z gold SVG */
.value-icon .elementor-icon-wrapper {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
background: var(--navy) !important;
border-radius: var(--r-md) !important;
box-shadow: var(--shadow-md) !important;
margin-bottom: 4px !important;
}
.value-icon .elementor-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.value-icon .elementor-icon svg {
fill: var(--gold) !important;
width: 24px !important;
height: 24px !important;
}
/* --- Sekcja 4: Feature Items — jakość wykonania --- */
/* Hover na karcie cechy */
.feature-item:hover {
border-color: var(--gold-light) !important;
box-shadow: var(--shadow-sm) !important;
}
/* --- CTA Section — dolny banner --- */
/* Radialny blask złoty — pseudoelement */
.cta-section::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(
ellipse at center,
rgba(201, 168, 76, 0.08) 0%,
transparent 70%
) !important;
pointer-events: none !important;
}
.cta-section {
position: relative !important;
overflow: hidden !important;
}
/* Em w tytule sekcji CTA — jaśniejszy złoty na ciemnym tle */
.cta-section .elementor-heading-title em {
color: var(--gold-light) !important;
}
/* Złote linie po bokach labela — flex row */
.elementor-element.cta-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
}
.elementor-element.cta-label::before,
.elementor-element.cta-label::after {
content: "" !important;
flex: 0 0 40px !important;
height: 1px !important;
background: var(--gold) !important;
display: block !important;
}
.elementor-element.cta-label .elementor-widget-container {
flex: 0 0 auto !important;
}
.elementor-element.cta-label p {
margin: 0 !important;
white-space: nowrap !important;
}
/* ============================================================
Strona O nas — Sekcja: Prosty Proces Zakupu (5 kroków)
CSS Class "process-card" na każdym inner kontenerze (krok)
============================================================ */
.elementor-element.process-card {
position: relative !important;
overflow: hidden !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-md) !important;
transition:
transform 0.3s var(--ease-out),
box-shadow 0.3s var(--ease-out) !important;
}
/* Złota kreska u góry — animowana na hover */
.elementor-element.process-card::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, var(--gold), var(--gold-light)) !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform 0.35s var(--ease-out) !important;
}
.elementor-element.process-card:hover::before {
transform: scaleX(1) !important;
}
.elementor-element.process-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* ============================================================
Strona O nas — Sekcja: Kredyt
CSS Class "credit-box" na inner kontenerze z listą
============================================================ */
/* ============================================================
Strona O nas — Sekcja: Kredyt
CSS Class "credit-box" na Icon List widgecie
============================================================ */
/* Lewy złoty border na całym widgecie */
.elementor-element.credit-box {
border-left: 3px solid var(--gold) !important;
padding-left: 20px !important;
}
/* Ikona checkmark — gold fill */
.elementor-element.credit-box .elementor-icon-list-icon svg {
fill: var(--gold) !important;
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
/* Tekst listy */
.elementor-element.credit-box .elementor-icon-list-text {
color: var(--text-secondary) !important;
line-height: 1.6 !important;
}
/* Separator między pozycjami */
.elementor-element.credit-box .elementor-icon-list-item:not(:last-child) {
border-bottom: 1px solid var(--border-light) !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
/* ============================================================
HERO — Sekcja główna (strona główna)
Struktura w Elementor Pro:
┌─ [Section/Container] CSS class: hero-section (100vh, bg-image + overlay)
│ ├─ [Container] CSS class: hero-content (max-width 720px)
│ │ ├─ [Text Editor] CSS class: section-label ← istniejąca klasa
│ │ ├─ [Heading H1] CSS class: hero-title
│ │ ├─ [Text Editor] CSS class: hero-desc
│ │ └─ [Container] CSS class: hero-buttons (kierunek: row)
│ │ ├─ [Button] CSS class: btn btn-gold btn-lg
│ │ └─ [Button] CSS class: btn btn-outline-white btn-lg
└─ [Section/Container] CSS class: hero-stats (pasek statystyk)
├─ [Container] CSS class: hero-stat-item (×4)
│ ├─ [Heading] CSS class: hero-stat-number ← liczba
└─ [Text Editor] CSS class: hero-stat-label ← opis
Ustawienia w edytorze (hero-section):
• Min Height → 100vh
• Background → Image: twoje zdjęcie, Size: Cover, Position: Center Center
• Background Overlay → Gradient: rgba(10,18,40,0.85) → rgba(10,18,40,0.5), 135°
• Vertical Align → Middle
Ken Burns: animuje background-size/position na samym elemencie,
dzieci są nieruszone — nie trzeba żadnych dodatkowych wrapperów.
============================================================ */
/* Ken Burns — subtelny ruch tła (background-position only, size zawsze cover) */
@keyframes kenBurns {
0% {
background-position: 50% 50%;
}
50% {
background-position: 55% 45%;
}
100% {
background-position: 50% 50%;
}
}
/* CSS class "hero-section" na sekcję/container */
.hero-section.e-con,
.hero-section.elementor-section {
overflow: hidden !important;
min-height: 100svh !important;
position: relative !important;
background-size: cover !important;
background-position: center !important;
animation: kenBurns 18s ease-in-out infinite !important;
}
/* Upewnij się że ::after nie blokuje niczego */
.hero-section.e-con::after {
content: none !important;
}
/* Gradient overlay — ::before, bo Elementor Container (e-con) NIE generuje
.elementor-background-overlay automatycznie (tylko gdy overlay skonfigurowany
w edytorze — wtedy ten selektor i tak nadpisze poniższą regułę) */
.hero-section.e-con::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
135deg,
rgba(10, 18, 40, 0.85) 0%,
rgba(10, 18, 40, 0.5) 100%
) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Treść musi być ponad overlajem */
.hero-section.e-con > .e-con-inner {
position: relative !important;
z-index: 1 !important;
}
/* Fallback — starszy Elementor / sekcje z overlaym w edytorze */
.hero-section .elementor-background-overlay {
background: linear-gradient(
135deg,
rgba(10, 18, 40, 0.85) 0%,
rgba(10, 18, 40, 0.5) 100%
) !important;
}
/* ── Opis — CSS class: hero-desc ── */
.elementor-element.hero-desc strong {
color: var(--gold) !important;
}
/* ── Przycisk btn-outline-white — Elementor Button widget ── */
/* Reset wrappera (ten sam wzorzec co btn-gold / btn-outline-gold) */
.elementor-element.elementor-widget-button.btn-outline-white {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.elementor-element.elementor-widget-button.btn-outline-white .elementor-button,
.elementor-element.elementor-widget-button.btn-outline-white
a.elementor-button {
background: transparent !important;
color: #fff !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline-white
.elementor-button:hover,
.elementor-element.elementor-widget-button.btn-outline-white
a.elementor-button:hover {
background: #fff !important;
color: var(--navy) !important;
border-color: #fff !important;
transform: translateY(-2px) !important;
}
/* SVG ikona w btn-outline-white */
.elementor-element.elementor-widget-button.btn-outline-white
.elementor-button
svg {
fill: #fff !important;
transition: fill 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline-white
.elementor-button:hover
svg {
fill: var(--navy) !important;
}
/* ── btn-lg dla Elementor Button widget ── */
/* Nadpisuje padding przycisku wewnątrz widgetu */
.elementor-element.elementor-widget-button.btn-lg .elementor-button {
padding: 18px 44px !important;
font-size: 13px !important;
}
/* ── Pasek statystyk — CSS class: hero-stats ── */
/* Elementor: Container (e-con) bezpośrednio pod hero-section
Dodaj CSS class: hero-stats na tym kontenerze
Widget: Counter (elementor-widget-counter)
• Każdy Counter widget NIE POTRZEBUJE dodatkowej klasy
• Separatory pionowe dodawane automatycznie via + selektor
Ustawienia kontenera hero-stats w edytorze:
• Background → Classic → kolor rgba(10,18,40,0.92)
• Top Border → 1px solid rgba(201,168,76,0.2)
• Layout → kierunek: row, justify: space-around lub space-between
*/
/* Tło całego paska — solid, backdrop-filter nie działa gdy hero-stats
jest osobną sekcją poniżej hero (nie ma za nim treści hero w Z-layerze) */
.hero-stats.e-con,
.hero-stats.elementor-section {
border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
}
/* Gap: 0 żeby separatory trafiały dokładnie na granicę widgetów */
.hero-stats.e-con > .e-con-inner {
gap: 0 !important;
}
/* Counter widget — padding wewnętrzny jako odstęp */
.hero-stats .elementor-widget-counter {
position: relative !important;
padding: 20px 24px !important;
text-align: center !important;
flex: 1 !important;
}
/* Separator — ::after na PRAWEJ krawędzi każdego widgetu poza ostatnim.
Wysokość+top są absolutne (nie zależą od wysokości widgetu),
translateY(-50%) liczone od top:50% samego ::after, nie rodzica. */
.hero-stats .elementor-widget-counter:not(:last-child)::after {
content: "" !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 1px !important;
height: 36px !important;
background: rgba(255, 255, 255, 0.15) !important;
}
/* Mobile — itemy układają się wertykalnie, separator na dole */
@media (max-width: 767px) {
.hero-stats.e-con > .e-con-inner {
gap: 0 !important;
}
.hero-stats .elementor-widget-counter {
width: 100% !important;
flex: none !important;
}
.hero-stats .elementor-widget-counter:not(:last-child)::after {
top: auto !important;
right: auto !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 36px !important;
height: 1px !important;
}
}
/* ============================================================
PROPERTY CARD — Loop Item (Elementor Pro Loop Builder)
STRUKTURA WIDGETÓW — co wpisać w Elementorze:
[Container] CSS class: property-card
│
├── [Container] CSS class: property-card-img-wrap
│ ├── Widget: Image CSS class: property-card-img
│ │ Dynamic: Featured Image
│ │ Link: Dynamic → Post URL
│ │
│ └── [Container] CSS class: property-card-badges
│ ├── Text Editor CSS class: property-badge property-badge--status
│ │ [taxonomy_slash taxonomy="status-transakcji"]
│ │ → "Dostępne" / "Zarezerwowane" / "Sprzedane"
│ │
│ └── Text Editor CSS class: property-badge property-badge--type
│ [taxonomy_slash taxonomy="typ-nieruchomosci"]
│ → "Mieszkanie" / "Lokal użytkowy"
│
└── [Container] CSS class: property-card-body
├── Icon List CSS class: property-card-location
│ Icon: fa-layer-group
│ Text: Dynamic → ACF Field: pietro (bez linku)
│ → "Parter" / "1 Piętro" / "2 Piętro"
│
├── Heading (H3) CSS class: property-card-title
│ Dynamic: Post Title
│ Link: Dynamic → Post URL
│ → "Alea M04"
│
├── Text Editor CSS class: property-card-desc
│ Dynamic → ACF Field: nazwa-inwestycji LUB rodzaj-transakcji
│ [taxonomy_slash taxonomy="nazwa-inwestycji"]
│ → "Alea" (nazwa inwestycji — nie duplikuje tytułu ani badge'a)
│
├── [Container] CSS class: property-card-params
│ ├── Icon List (bez dodatkowej klasy)
│ │ Icon: fa-ruler-combined
│ │ Text: Dynamic → ACF Field: powierzchnia
│ │ → "28.68" → CSS doda " m²"
│ │
│ └── Icon List (bez dodatkowej klasy)
│ Icon: fa-bed
│ Text: Dynamic → ACF Field: liczba_pokoi
│ → "1" → CSS doda " pok."
│
└── [Container] CSS class: property-card-footer
├── Text Editor CSS class: property-card-price
│ Dynamic → ACF Field: cena
│ → "215 100" (CSS dokłada " zł" opcjonalnie lub wpisz w suffix)
│
└── Button CSS class: btn-navy
Text: Szczegóły
Icon: fa-arrow-right (pozycja: po prawej)
Link: Dynamic → Post URL
============================================================ */
/* Karta — tylko animacja i overflow, reszta w Elementorze */
.elementor-element.property-card {
overflow: hidden !important;
will-change: transform !important;
border: 1px solid var(--border-light) !important;
box-shadow: 0 2px 12px rgba(10, 20, 50, 0.07) !important;
transition:
transform 0.4s cubic-bezier(0, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0, 0, 0.2, 1),
border-color 0.4s ease !important;
}
.elementor-element.property-card:hover {
box-shadow: 0 12px 40px rgba(10, 20, 50, 0.18) !important;
transform: translateY(-4px) !important;
border-color: transparent !important;
}
/* Wrapper zdjęcia — aspect ratio 3:2 */
.elementor-element.property-card-img-wrap {
position: relative !important;
aspect-ratio: 3 / 2 !important;
overflow: hidden !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* Zdjęcie */
.elementor-element.property-card-img-wrap .elementor-widget-image,
.elementor-element.property-card-img-wrap .elementor-widget-image a,
.elementor-element.property-card-img-wrap
.elementor-widget-image
.elementor-widget-container {
height: 100% !important;
display: block !important;
}
.elementor-element.property-card-img-wrap .elementor-widget-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1) !important;
}
.elementor-element.property-card:hover
.elementor-element.property-card-img-wrap
.elementor-widget-image
img {
transform: scale(1.06) !important;
}
/* Badges — absolutne nad zdjęciem: status lewo, typ prawo */
.elementor-element.property-card-badges {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 3 !important;
padding: 14px 16px !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 8px !important;
}
.elementor-element.property-card-badges .elementor-widget-container {
padding: 0 !important;
}
.elementor-element.property-card-badges a,
.elementor-element.property-card-badges p {
margin: 0 !important;
text-decoration: none !important;
}
/* Status badge — pill */
.elementor-element.property-card-badges
.elementor-element.property-badge--status,
.elementor-element.property-card-badges
.elementor-element.property-badge--status
.elementor-widget-container {
display: inline-flex !important;
align-items: center !important;
}
.elementor-element.property-card-badges
.elementor-element.property-badge--status
a,
.elementor-element.property-card-badges
.elementor-element.property-badge--status
p {
display: inline-block !important;
padding: 4px 12px !important;
background: rgba(
22,
163,
74,
0.92
) !important; /* dostępne — zielony (default) */
color: #fff !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
border-radius: 999px !important;
text-decoration: none !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* Status badge — zarezerwowane (pomarańczowy) */
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="zarezerwowane"])
a,
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="reserved"])
a {
background: rgba(202, 138, 4, 0.92) !important;
}
/* Status badge — wkrótce w sprzedaży (niebieski) */
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="wkrotce-w-sprzedazy"])
a,
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="coming-soon"])
a {
background: rgba(37, 99, 235, 0.92) !important;
}
/* Status badge — sprzedane (szary) */
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="sprzedane"])
a,
.elementor-element.property-card-badges
.elementor-element.property-badge--status:has(a[href*="sold"])
a {
background: rgba(107, 114, 128, 0.92) !important;
}
/* Type badge — ciemny blurred */
.elementor-element.property-card-badges
.elementor-element.property-badge--type {
display: inline-flex !important;
align-items: center !important;
background: rgba(8, 12, 30, 0.75) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border-radius: 6px !important;
padding: 4px 10px !important;
box-shadow: none !important;
border: none !important;
}
.elementor-element.property-card-badges
.elementor-element.property-badge--type
.elementor-widget-container {
padding: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
display: inline !important;
}
.elementor-element.property-card-badges
.elementor-element.property-badge--type
a,
.elementor-element.property-card-badges
.elementor-element.property-badge--type
p,
.elementor-element.property-card-badges
.elementor-element.property-badge--type
span {
color: #fff !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
white-space: nowrap !important;
}
/* Tytuł hover — kolor zmienia się w Elementorze, to tylko efekt */
.elementor-element.property-card:hover
.elementor-element.property-card-title
.elementor-heading-title {
color: var(--gold-dark) !important;
}
.elementor-element.property-card-title .elementor-heading-title {
transition: color 0.4s cubic-bezier(0, 0, 0.2, 1) !important;
}
.elementor-element.property-card-title a {
color: inherit !important;
text-decoration: none !important;
}
/* Params — pojedynczy inline icon-list: border góra/dół, separatory między itemami */
.elementor-element.property-card-params {
border-top: 1px solid var(--border-light) !important;
border-bottom: 1px solid var(--border-light) !important;
}
/* ============================================================
OFFER CTA BAR — dolna belka kontaktowa na stronie oferty
Elementor: CSS class: offer-cta-bar na kontenerze
============================================================ */
.elementor-element.offer-cta-bar.e-con,
.elementor-element.offer-cta-bar.elementor-section {
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
}
/* ============================================================
FILTER BAR — pasek filtrów na stronie oferty
Elementor: wstaw przez widget HTML:
WP Loop Grid: na kontenerze Loop Item ustaw Custom Attribute:
data-category = [taxonomy slug dynamicznie]
JS działa przez script.js (już załadowany w child theme)
============================================================ */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-btn {
padding: 9px 20px !important;
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-full) !important;
font-size: 12.5px !important;
line-height: 1 !important;
font-weight: 500 !important;
font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif !important;
color: var(--text-secondary) !important;
cursor: pointer;
text-decoration: none !important;
display: inline-flex !important;
align-items: center;
box-sizing: border-box;
margin: 0;
transition:
background var(--transition),
color var(--transition),
border-color var(--transition),
box-shadow var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
background: var(--navy) !important;
color: #fff !important;
border-color: var(--navy) !important;
box-shadow: var(--shadow-sm);
}
/* Elementor Button widget — btn-outline (navy outline na białym tle) */
.elementor-element.elementor-widget-button.btn-outline {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.elementor-element.elementor-widget-button.btn-outline .elementor-button,
.elementor-element.elementor-widget-button.btn-outline a.elementor-button {
background: transparent !important;
color: var(--navy) !important;
border: 2px solid var(--navy) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline .elementor-button:hover,
.elementor-element.elementor-widget-button.btn-outline
a.elementor-button:hover {
background: var(--navy) !important;
color: #fff !important;
border-color: var(--navy) !important;
transform: translateY(-2px) !important;
}
.elementor-element.elementor-widget-button.btn-outline .elementor-button svg {
fill: var(--navy) !important;
transition: fill 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline
.elementor-button:hover
svg {
fill: #fff !important;
}
/* btn-outline-navy — alias taki sam jak btn-outline */
.elementor-element.elementor-widget-button.btn-outline-navy {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
.elementor-element.elementor-widget-button.btn-outline-navy .elementor-button,
.elementor-element.elementor-widget-button.btn-outline-navy a.elementor-button {
background: transparent !important;
color: var(--navy) !important;
border: 2px solid var(--navy) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.elementor-element.elementor-widget-button.btn-outline-navy
.elementor-button:hover,
.elementor-element.elementor-widget-button.btn-outline-navy
a.elementor-button:hover {
background: var(--navy) !important;
color: #fff !important;
border-color: var(--navy) !important;
transform: translateY(-2px) !important;
}
/* ============================================================
SINGLE NIERUCHOMOŚĆ — strona lokalu
============================================================ */
/* Przycisk powrotu — kontener z klasą btn-outline-white
(używa Elementora Button, biały tło strony → navy outline) */
.elementor-element.btn-outline-white .elementor-button,
.elementor-element.btn-outline-white a.elementor-button {
background: transparent !important;
color: var(--navy) !important;
border: 2px solid var(--navy) !important;
border-radius: var(--r-sm) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease !important;
}
.elementor-element.btn-outline-white .elementor-button:hover,
.elementor-element.btn-outline-white a.elementor-button:hover {
background: var(--navy) !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
.elementor-element.btn-outline-white .elementor-button svg {
fill: var(--navy) !important;
}
.elementor-element.btn-outline-white .elementor-button:hover svg {
fill: #fff !important;
}
/* Meta-row (shortcode [meta_lokalu]) */
.property-meta-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
padding-bottom: 24px;
align-items: center !important;
border-bottom: 1px solid var(--border-light);
}
.meta-tag {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
background: var(--bg-secondary) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-full) !important;
font-size: 12.5px !important;
}
.meta-tag i {
color: var(--gold) !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
.meta-tag strong {
color: var(--navy) !important;
}
/* Sekcja-blok z tytułem H2 */
.property-section {
margin-bottom: 36px;
}
/* Heading widget z CSS class 'property-section-title' — border-bottom
musi być na wewnętrznym