/*
Theme Name: Budomix
Theme URI: https://budomix.org
Description: Child theme for Budomix (deweloper i generalny wykonawca) on Hello Elementor. Brand tokens, chrome (header/footer), project single template, and the bx-* classes Elementor pages are built with.
Author: Tall Karol
Author URI: https://tallkarol.com
Template: hello-elementor
Version: 0.14.0
Text Domain: budomix
*/
/* ==========================================================================
1. Tokens — the only place a brand value is written. Elementor's kit mirrors
these (system colors / typography) so the sidebar shows the same names.
========================================================================== */
:root {
--bx-red: #9b1b1e; /* logo roof — primary accent, AA on white (7.6:1) */
--bx-red-deep: #7a1416; /* hover / pressed */
--bx-ink: #121212; /* headings */
--bx-text: #2b2b2b; /* body copy */
--bx-muted: #6b6b6b;
--bx-paper: #ffffff;
--bx-grey: #f7f7f7; /* alternate band + footer */
--bx-line: #e3e3e3;
--bx-gold: #f2b01e; /* logo sun — only the "w trakcie" badge */
--bx-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--bx-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
--bx-h1: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem);
--bx-h2: clamp(1.8rem, 1.3rem + 1.6vw, 2.75rem);
--bx-h3: 1.1rem;
--bx-body: 17px;
--bx-band: clamp(48px, 2.5rem + 2.5vw, 88px); /* vertical band padding */
--bx-gutter: 24px;
--bx-max: 1200px;
--bx-header-h: 84px;
--bx-shadow: 0 10px 15px rgba(0, 0, 0, .05);
}
@media (max-width: 767px) { :root { --bx-header-h: 64px; } }
/* ==========================================================================
2. Base canvas
========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bx-paper); color: var(--bx-text); font-family: var(--bx-font-body); font-size: var(--bx-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .elementor-heading-title { font-family: var(--bx-font-head); color: var(--bx-ink); letter-spacing: -0.01em; }
h1, .bx-h1 { font-size: var(--bx-h1); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
h2, .bx-h2 { font-size: var(--bx-h2); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
h3, .bx-h3 { font-size: var(--bx-h3); font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1em; }
:where(.elementor-widget-text-editor) p { max-width: 68ch; }
a { color: var(--bx-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bx-red-deep); }
:focus-visible { outline: 3px solid var(--bx-gold); outline-offset: 3px; }
img { height: auto; max-width: 100%; }
strong { font-weight: 700; color: var(--bx-ink); }
.bx-red { color: var(--bx-red); }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip: auto; clip-path: none; width: auto; height: auto; top: 8px; left: 8px; z-index: 1000; background: var(--bx-ink); color: #fff; padding: 8px 12px; }
/* ==========================================================================
3. Header — white bar, logo left, uppercase nav (no button: like the reference)
========================================================================== */
.bx-header { position: sticky; top: 0; z-index: 100; background: var(--bx-paper); box-shadow: var(--bx-shadow); }
.admin-bar .bx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bx-header { top: 46px; } }
.bx-header__inner { max-width: var(--bx-max); margin: 0 auto; padding: 0 var(--bx-gutter); min-height: var(--bx-header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bx-logo { display: inline-flex; align-items: center; line-height: 0; }
.bx-logo img { height: 46px; width: auto; }
@media (max-width: 767px) { .bx-logo img { height: 38px; } }
.bx-logo__text { font-family: var(--bx-font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; color: var(--bx-ink); text-decoration: none; line-height: 1; }
.bx-nav { display: flex; align-items: center; gap: 6px; }
.bx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
/* the phone sits inside .bx-nav, so its rules carry the nav's class to outrank `.bx-nav a` (Oct 15, Karol: the glyph sat on
the baseline and the hover hairline was the nav item's, 14px in from both edges — it did not line up) */
.bx-nav .bx-tel { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; padding: 10px 0 10px 18px; border-left: 1px solid var(--bx-line); font: 700 14px/1 var(--bx-font-head); letter-spacing: .02em; text-transform: none; color: var(--bx-red); text-decoration: none; white-space: nowrap; }
.bx-tel svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-nav .bx-tel:hover { color: var(--bx-red-deep); }
.bx-nav .bx-tel::after { left: 18px; right: 0; bottom: 4px; } /* the nav's hover hairline, under the glyph and the number together */
.bx-header__inner { transition: min-height .3s cubic-bezier(.2,.7,.2,1); }
.bx-logo img { transition: height .3s cubic-bezier(.2,.7,.2,1); }
.bx-header.is-compact .bx-header__inner { min-height: 64px; }
.bx-header.is-compact .bx-logo img { height: 38px; }
.bx-nav a { position: relative; display: inline-block; padding: 10px 14px; font-family: var(--bx-font-body); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--bx-ink); text-decoration: none; transition: color .2s; }
.bx-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--bx-red); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.bx-nav a:hover, .bx-nav .current-menu-item > a, .bx-nav .current_page_parent > a { color: var(--bx-red); }
.bx-nav a:hover::after, .bx-nav .current-menu-item > a::after { transform: scaleX(1); }
.bx-burger { display: none; appearance: none; border: 0; background: none; padding: 10px; cursor: pointer; color: var(--bx-ink); }
.bx-burger span { display: block; width: 26px; height: 3px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }
@media (max-width: 1024px) {
.bx-burger { display: block; }
.bx-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bx-paper); box-shadow: var(--bx-shadow); display: none; padding: 8px var(--bx-gutter) 20px; }
.bx-nav.is-open { display: block; }
.bx-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.bx-nav .bx-tel { margin: 6px 0 0; padding: 14px 4px 0; border: 0; } /* last row of the open menu, on the items' rhythm */
.bx-header.is-compact .bx-header__inner { min-height: var(--bx-header-h); }
.bx-nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--bx-line); font-size: 15px; }
.bx-nav a::after { left: 4px; right: 4px; bottom: 8px; } /* the current item's bar starts where its text starts (the desktop geometry is 14px in) */
.bx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
/* ==========================================================================
4. Buttons — red, uppercase, sharp rectangle; the hover is the signature
========================================================================== */
.bx-btn .elementor-button, a.bx-btn, .bx-form .elementor-button {
position: relative; display: inline-block; color: #fff; font-family: var(--bx-font-body); font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
padding: 16px 30px; border: 0; border-radius: 0; text-decoration: none;
background-color: var(--bx-red); background-image: linear-gradient(90deg, var(--bx-red-deep) 0 50%, var(--bx-red) 50% 100%); background-size: 200% 100%; background-position: 100% 0;
transition: background-position .45s cubic-bezier(.4,0,.2,1), color .2s, letter-spacing .3s;
}
/* hover, two beats: the deeper red sweeps in from the left, a hairline draws under the label */
.bx-btn .elementor-button:hover, .bx-btn .elementor-button:focus-visible, a.bx-btn:hover, a.bx-btn:focus-visible, .bx-form .elementor-button:hover { background-position: 0 0; color: #fff; letter-spacing: .07em; }
.bx-btn .elementor-button-text, .bx-form .elementor-button-text, a.bx-btn > span { position: relative; display: inline-block; }
.bx-btn .elementor-button-text::after, .bx-form .elementor-button-text::after, a.bx-btn > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.4,0,.2,1) .1s; }
.bx-btn .elementor-button:hover .elementor-button-text::after, .bx-form .elementor-button:hover .elementor-button-text::after, a.bx-btn:hover > span::after { transform: scaleX(1); }
.bx-btn--ink .elementor-button { background-color: var(--bx-ink); background-image: linear-gradient(90deg, #000 0 50%, var(--bx-ink) 50% 100%); }
.bx-btn--light .elementor-button, .bx-btn--light .elementor-button:visited, .bx-btn--light .elementor-button:focus:not(:focus-visible) { background-color: #fff; background-image: linear-gradient(90deg, var(--bx-grey) 0 50%, #fff 50% 100%); color: var(--bx-red); }
.bx-btn--light .elementor-button:hover, .bx-btn--light .elementor-button:focus-visible { color: var(--bx-red-deep); }
.bx-btn--light .elementor-button-text::after { background: var(--bx-red); }
/* ghost: ink outline, ink text; the ink fill sweeps in from the left on hover */
/* Elementor paints .elementor-button:visited / :focus white and loads after this file, so the rest colour is pinned at higher specificity */
.bx-btn--ghost .elementor-button, .bx-btn--ghost .elementor-button:visited, .bx-btn--ghost .elementor-button:focus:not(:focus-visible) { background-color: transparent; background-image: linear-gradient(90deg, var(--bx-ink) 0 50%, transparent 50% 100%); border: 1.5px solid var(--bx-ink); padding: 14.5px 28.5px; color: var(--bx-ink); }
.bx-btn--ghost .elementor-button:hover, .bx-btn--ghost .elementor-button:focus-visible, .bx-btn--ghost .elementor-button:visited:hover { color: #fff; }
.bx-btn--light .elementor-button { background: #fff; color: var(--bx-ink); }
.bx-btn--light .elementor-button:hover { background: var(--bx-grey); color: var(--bx-ink); }
/* ==========================================================================
5. Bands & copy utilities — layout a marketer should own stays in Elementor's
controls; these sit at low specificity so the sidebar always wins.
========================================================================== */
:where(.bx-band) { padding-top: var(--bx-band); padding-bottom: var(--bx-band); }
:where(.bx-band--tight) { padding-top: calc(var(--bx-band) * .6); padding-bottom: calc(var(--bx-band) * .6); }
.bx-band--grey { background-color: var(--bx-grey); }
/* contour pattern on grey surfaces — Elementor's own overlay owns ::before on .e-con, so the pattern takes ::after */
.bx-band--grey::after, .bx-footer::before, .bx-project__facts::before { content: ""; position: absolute; inset: 0; background: url(assets/img/contour-ink.svg) center / cover no-repeat; opacity: .055; pointer-events: none; }
.bx-band--grey > .e-con-inner, .bx-band--grey > .e-con, .bx-band--grey > .elementor-widget, .bx-footer__inner, .bx-project__facts > * { position: relative; z-index: 1; }
/* the footer: a drafting grid with a few half-erased pencil notes instead of the contours (Oct 15, Karol — the framed
sheet with a title block fought the links); assets/img/notatki.svg from scripts/make-illustrations.py, 1440×400 */
.bx-footer::before { background-image: url(assets/img/notatki.svg?v=2); opacity: .07; }
@media (max-width: 767px) { .bx-footer::before { background-size: 1440px 400px; background-position: center top; background-repeat: repeat-y; } } /* natural scale on phones; the grid pitch divides 400 so the tiles meet without a seam */
.bx-footer, .bx-project__facts { position: relative; }
/* blueprint texture (spec `texture: blueprint`; Nasze realizacje since Oct 14 — it sat on Dlaczego warto for an hour, Karol
moved it to the projects): a site plan of a small estate
(assets/img/siteplan.svg, generated wide by scripts/make-siteplan.py — Karol wanted a development sketch, not the
hero's elevation again, and then full-bleed) covers the whole band on the claimed overlay slot ::before; ::after
(the contour slot) is blanked — the plan is the only texture here */
.bx-band--blueprint.bx-band::after { background: none; } /* no contour (grey or ink) and no grid — Karol dropped the grid once the plan went full-bleed; two classes to outrank the ink band's own ::after below */
.bx-band--blueprint.e-con { --background-overlay: ""; }
.bx-band--blueprint > .e-con-inner, .bx-band--blueprint > .e-con, .bx-band--blueprint > .elementor-widget { position: relative; z-index: 1; } /* content above the plan (boxed bands wrap their children in .e-con-inner) */
.bx-band--blueprint.e-con::before { content: ""; position: absolute; inset: 0; background: url(assets/img/siteplan.svg) center / cover no-repeat; opacity: .04; pointer-events: none; }
@media (max-width: 1024px) { .bx-band--blueprint.e-con::before { opacity: .025; } } /* cover scales the plan up ~2.5× on a tall narrow band; fainter so it stays texture */
/* on an ink band the plan is the white copy — a real blueprint — and needs more alpha to read than ink on paper */
.bx-band--ink.bx-band--blueprint.e-con::before { background-image: url(assets/img/siteplan-white.svg); opacity: .09; }
@media (max-width: 1024px) { .bx-band--ink.bx-band--blueprint.e-con::before { opacity: .055; } }
.bx-band--ink { background-color: var(--bx-ink); color: #fff; }
.bx-band--red { background-color: var(--bx-red); color: #fff; }
.bx-band--ink .elementor-heading-title, .bx-band--red .elementor-heading-title { color: #fff; }
.bx-band--ink::after, .bx-band--red::after { content: ""; position: absolute; inset: 0; background: url(assets/img/contour-white.svg) center / cover no-repeat; opacity: .09; pointer-events: none; }
/* the red contact band carries the route sketch instead (Oct 15, Karol picked it): Kraków → Zakopianka → Gaj → Myślenice,
drawn on the band's own 1440×400 proportions by scripts/make-illustrations.py so the pin sits between the copy and the card */
.bx-band--red::after { background-image: url(assets/img/mapa-white.svg?v=1); opacity: .1; }
.bx-band--ink > .e-con-inner, .bx-band--ink > .e-con, .bx-band--red > .e-con-inner, .bx-band--red > .e-con { position: relative; z-index: 1; }
/* dark projects band (`tone: ink` on the realizacje spec, Oct 14): cards become translucent panels, type goes light */
.bx-band--ink .bx-row.e-con { background: #1b1b1b; border-color: rgba(255,255,255,.14); } /* solid, so the plan stays behind the cards */
.bx-band--ink .bx-row.e-con:hover { background: #242424; border-color: rgba(255,255,255,.2); box-shadow: 0 22px 40px -24px rgba(0,0,0,.9); }
.bx-band--ink .bx-row__title .elementor-heading-title a { color: #fff; }
.bx-band--ink .bx-row__m .elementor-heading-title { color: rgba(255,255,255,.62); }
.bx-band--ink .bx-row__st .elementor-heading-title { color: rgba(255,255,255,.85); }
.bx-band--ink .bx-more .elementor-heading-title a { color: #fff; }
.bx-band--ink .bx-feat.e-con { box-shadow: 0 30px 50px -28px rgba(0,0,0,.95); }
.bx-eyebrow .elementor-heading-title { font-family: var(--bx-font-body); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-red); }
.bx-lead .elementor-widget-container, .bx-lead p { font-size: 1.15rem; line-height: 1.5; }
.bx-prose h3 { color: var(--bx-red); font-family: var(--bx-font-head); font-size: var(--bx-h3); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin: 1.8em 0 .6em; }
.bx-prose h3:first-child { margin-top: 0; }
.bx-prose ul { margin: 0 0 1.2em; padding-left: 1.25em; }
.bx-prose li { margin: .3em 0; }
.bx-prose p { max-width: 70ch; }
.bx-band--wide-prose .bx-prose p, .bx-band--wide-prose .bx-lead p { max-width: none; } /* legal pages (Polityka prywatności, Oct 15, Karol): copy spans the container */
/* ==========================================================================
6. Hero (home) — photo split red / grey down the middle, white panel with
straight edges and the headline, brand words on the two sides. Each side
is a full-height region hugging the panel (hover: the tint deepens from
the outer edge in, the word tracks out towards the seam, a gold edge
grows along the seam). Under 1025px the three panels stack: red band /
white panel / grey band, the words hugging the panel from above and below.
========================================================================== */
.bx-hero { position: relative; color: #fff; overflow: hidden; }
.bx-hero--home { --bx-panel-w: 720px; min-height: 740px; }
.bx-hero .bx-hero__side { position: absolute; top: 0; bottom: 0; width: calc(50% - var(--bx-panel-w) / 2); z-index: 2; display: flex; align-items: center; }
.bx-hero .bx-hero__side--left { left: 0; justify-content: flex-end; text-align: right; padding: 0 48px 0 16px; }
.bx-hero .bx-hero__side--right { right: 0; justify-content: flex-start; text-align: left; padding: 0 16px 0 48px; }
.bx-hero__side .elementor-heading-title { position: relative; color: #fff; font-size: clamp(1rem, (50vw - var(--bx-panel-w) / 2) * .085, 1.9rem); line-height: 1.15; font-weight: 800; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.25); transition: transform .5s cubic-bezier(.2,.7,.2,1), letter-spacing .5s cubic-bezier(.2,.7,.2,1); }
/* hover layers: a wash that sweeps in from the outer edge, a gold edge along the seam */
.bx-hero .bx-hero__side::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scaleX(0); transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease-out; pointer-events: none; }
.bx-hero .bx-hero__side--left::before { background: linear-gradient(90deg, rgba(122,20,22,.7), rgba(122,20,22,.3)); transform-origin: left; }
.bx-hero .bx-hero__side--right::before { background: linear-gradient(270deg, rgba(18,18,18,.6), rgba(18,18,18,.25)); transform-origin: right; }
.bx-hero .bx-hero__side::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--bx-gold); transform: scaleY(0); transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.2,.7,.2,1) .1s; pointer-events: none; }
.bx-hero .bx-hero__side--left::after { right: 0; }
.bx-hero .bx-hero__side--right::after { left: 0; }
@media (hover: hover) and (min-width: 1025px) {
.bx-hero .bx-hero__side:hover::before { opacity: 1; transform: none; }
.bx-hero .bx-hero__side:hover::after { transform: none; }
.bx-hero .bx-hero__side:hover .elementor-heading-title { letter-spacing: .04em; }
.bx-hero .bx-hero__side--left:hover .elementor-heading-title { transform: translateX(8px); }
.bx-hero .bx-hero__side--right:hover .elementor-heading-title { transform: translateX(-8px); }
}
.bx-hero .bx-hero__panel { position: relative; z-index: 1; background-color: var(--bx-paper); color: var(--bx-text); text-align: center; justify-content: center; }
.bx-hero .bx-hero__panel::after { content: ""; position: absolute; inset: 0; background: url(assets/img/blueprint.svg) center / cover no-repeat; opacity: .13; pointer-events: none; z-index: 0; }
.bx-hero .bx-hero__panel > * { position: relative; z-index: 1; }
/* the panel's shadow: a blurred slab behind it, so it can scale open with the panel */
.bx-hero--home::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 640px; transform: translateX(-50%); background: rgba(0,0,0,.42); filter: blur(28px); z-index: 0; pointer-events: none; }
.bx-hero__panel .elementor-heading-title { color: var(--bx-ink); }
/* the logo is a JPEG on white: multiply drops its white box onto the panel's blueprint */
.bx-hero__logo.elementor-widget { mix-blend-mode: multiply; }
.bx-hero__logo.elementor-widget img { display: block; width: auto; height: 104px; margin: 0 auto; }
@media (max-width: 767px) { .bx-hero__logo.elementor-widget img { height: 76px; } }
.bx-hero__title .elementor-heading-title { font-size: var(--bx-h1); line-height: 1.05; }
.bx-hero__lead .elementor-heading-title { font-family: var(--bx-font-head); font-weight: 700; font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.2; text-transform: none; letter-spacing: 0; }
@media (max-width: 1024px) {
/* photo header + card (Oct 14, replaced the stacked red/white/grey version): the seam stays vertical, the
two words flank it in a photo band on top, and the white panel sits as a card on the photo below. The
builder lays the hero out as a wrapping row here (side / side / panel) with 20px gutters and 40px foot. */
.bx-hero--home { --bx-photo-h: 210px; }
.bx-hero--home .bx-hero__side.elementor-widget { position: static; width: 50%; min-height: var(--bx-photo-h); margin: 0; display: flex; align-items: center; }
.bx-hero--home .bx-hero__side--left.elementor-widget { justify-content: flex-end; text-align: right; padding: 0 16px 0 0; }
.bx-hero--home .bx-hero__side--right.elementor-widget { justify-content: flex-start; text-align: left; padding: 0 0 0 16px; }
.bx-hero__side .elementor-heading-title { font-size: clamp(1.05rem, .9rem + .8vw, 1.35rem); letter-spacing: .02em; }
.bx-hero--home .bx-hero__panel.e-con { max-width: 720px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 28px 60px -22px rgba(0,0,0,.6); }
.bx-hero--home::after { display: none; } /* the slab is the desktop shadow; the card casts its own */
}
@media (min-width: 768px) and (max-width: 1024px) { .bx-hero--home { --bx-photo-h: 260px; } }
/* --- load animation: closed halves + the brand words at the seam, then the panel opens --- */
@keyframes bx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-open { from { transform: scaleX(.01); } to { transform: scaleX(1); } }
@keyframes bx-open-shadow { from { transform: translateX(-50%) scaleX(.01); } to { transform: translateX(-50%) scaleX(1); } }
@keyframes bx-side-l { from { transform: translateX(360px); } to { transform: none; } }
@keyframes bx-side-r { from { transform: translateX(-360px); } to { transform: none; } }
@keyframes bx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* small screens: the words part from the seam, the card rises onto the photo */
/* the slide is one step short of the 16px seam gap, so the two words meet at the seam without crossing it */
@keyframes bx-side-ml { from { transform: translateX(14px); } to { transform: none; } }
@keyframes bx-side-mr { from { transform: translateX(-14px); } to { transform: none; } }
@keyframes bx-card { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (min-width: 1025px) {
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel { transform-origin: 50% 50%; animation: bx-open 1s cubic-bezier(.2,.7,.2,1) .7s both; }
body:not(.elementor-editor-active) .bx-hero--home::after { animation: bx-open-shadow 1s cubic-bezier(.2,.7,.2,1) .7s both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__side--left { animation: bx-fade .5s ease-out .1s both, bx-side-l 1s cubic-bezier(.2,.7,.2,1) .7s both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__side--right { animation: bx-fade .5s ease-out .1s both, bx-side-r 1s cubic-bezier(.2,.7,.2,1) .7s both; }
}
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(1) { animation-delay: 1.3s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(2) { animation-delay: 1.42s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(3) { animation-delay: 1.54s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(4) { animation-delay: 1.66s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(5) { animation-delay: 1.78s; }
@media (max-width: 1024px) {
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel { animation: bx-card .8s cubic-bezier(.2,.7,.2,1) .55s both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__side--left { animation: bx-fade .5s ease-out .1s both, bx-side-ml .9s cubic-bezier(.2,.7,.2,1) .5s both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__side--right { animation: bx-fade .5s ease-out .1s both, bx-side-mr .9s cubic-bezier(.2,.7,.2,1) .5s both; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(1) { animation-delay: 1s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(2) { animation-delay: 1.12s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(3) { animation-delay: 1.24s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(4) { animation-delay: 1.36s; }
body:not(.elementor-editor-active) .bx-hero--home .bx-hero__panel > :nth-child(5) { animation-delay: 1.48s; }
}
@media (prefers-reduced-motion: reduce) {
.bx-hero--home .bx-hero__panel, .bx-hero--home::after, .bx-hero--home .bx-hero__side, .bx-hero--home .bx-hero__panel > * { animation: none !important; }
.bx-hero .bx-hero__side::before, .bx-hero .bx-hero__side::after, .bx-hero__side .elementor-heading-title { transition: none; }
}
/* page tops — breadcrumb + title with the white corner frame */
.bx-hero--page { min-height: 300px; justify-content: center; }
.bx-breadcrumb .elementor-heading-title, .bx-breadcrumb { font-family: var(--bx-font-body); font-size: 14px; font-weight: 500; color: #fff; text-transform: none; letter-spacing: 0; }
.bx-breadcrumb a { color: #fff; text-decoration: none; }
.bx-hero__title--page .elementor-heading-title, .bx-project__hero h1 { position: relative; display: inline-block; color: #fff; border: 0; padding: 14px 20px 18px 26px; }
.bx-hero__title--page .elementor-heading-title::before, .bx-project__hero h1::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #fff; transform-origin: top; }
.bx-hero__title--page .elementor-heading-title::after, .bx-project__hero h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fff; transform-origin: left; }
@media (max-width: 767px) { .bx-hero--page { min-height: 220px; } .bx-hero__title--page .elementor-heading-title, .bx-project__hero h1 { padding: 10px 14px 12px 18px; } }
/* --- inner-page tops, load: the tint wipes across the photo along the seam's slant, the frame draws, the title inks in --- */
@keyframes bx-wipe { from { clip-path: polygon(0 0, -12% 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 112% 100%, 0 100%); } }
@keyframes bx-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bx-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bx-ink { from { color: transparent; } to { color: #fff; } }
body:not(.elementor-editor-active) .bx-hero--page::before, body:not(.elementor-editor-active) .bx-project__hero::before { animation: bx-wipe 1.1s cubic-bezier(.5,.05,.2,1) .1s both; }
body:not(.elementor-editor-active) :is(.bx-hero__title--page .elementor-heading-title, .bx-project__hero h1)::before { animation: bx-draw-y .35s cubic-bezier(.2,.7,.2,1) .55s both; }
body:not(.elementor-editor-active) :is(.bx-hero__title--page .elementor-heading-title, .bx-project__hero h1)::after { animation: bx-draw-x .4s cubic-bezier(.2,.7,.2,1) .8s both; }
body:not(.elementor-editor-active) :is(.bx-hero__title--page .elementor-heading-title, .bx-project__hero h1) { animation: bx-ink .5s ease-out 1s both; }
body:not(.elementor-editor-active) :is(.bx-hero--page .bx-breadcrumb, .bx-project__hero .bx-breadcrumb, .bx-project__hero .bx-project__status) { animation: bx-rise .5s cubic-bezier(.2,.7,.2,1) 1.2s both; }
@media (prefers-reduced-motion: reduce) {
.bx-hero--page::before, .bx-project__hero::before, .bx-hero__title--page .elementor-heading-title, .bx-hero__title--page .elementor-heading-title::before, .bx-hero__title--page .elementor-heading-title::after, .bx-project__hero h1, .bx-project__hero h1::before, .bx-project__hero h1::after, .bx-hero--page .bx-breadcrumb, .bx-project__hero .bx-breadcrumb, .bx-project__hero .bx-project__status { animation: none !important; }
}
/* ==========================================================================
7. Photos in copy rows — cover-cropped, a small red corner mark
========================================================================== */
/* Elementor's optimized markup puts the ![]()
straight inside the widget (no .elementor-widget-container), so
the ratio box and the parallax clip live on the widget itself. The ratio is padding-top (resolves against the
column width in every layout mode; aspect-ratio collapsed to 0 inside the phone's flex column) and the img is
absolutely positioned in it. Image rules carry `.elementor-widget` because Elementor's own `.elementor img
{ height: auto }` loads later and ties with a one-class selector. */
.bx-split-media.elementor-widget { position: relative; padding-top: 75%; overflow: hidden; }
.bx-media--portrait .bx-split-media.elementor-widget { padding-top: 125%; }
.bx-split-media.elementor-widget img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-split__media-col { position: relative; }
/* layered photos: the inset overlaps the main photo's lower-left corner; the red mark sits on the inset.
The widget box is the photo (ratio + clip); the 8px white frame is a spread shadow around it, the drop shadows start outside the frame. */
.bx-stack.e-con { padding-left: 56px; padding-bottom: 88px; }
.bx-split__media-col .bx-stack__inset.elementor-widget { position: absolute; left: 8px; bottom: 8px; width: calc(58% - 16px); padding-top: calc((58% - 16px) * .75); z-index: 1; overflow: hidden; background: var(--bx-ink); box-shadow: 0 0 0 8px #fff, 0 1px 2px 8px rgba(0,0,0,.08), 0 34px 60px -22px rgba(0,0,0,.55); }
.bx-stack__inset.elementor-widget img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) { .bx-stack.e-con { padding-left: 0; padding-bottom: 0; } .bx-stack__inset { display: none; } }
/* scroll-driven parallax (CSS only; browsers without it keep a static photo) */
@supports (animation-timeline: view()) {
.elementor-widget.bx-px img { height: 114%; animation: bx-px linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.elementor-widget.bx-px--rev img { animation-name: bx-px-rev; }
@keyframes bx-px { from { transform: translateY(-12%); } to { transform: translateY(0); } }
@keyframes bx-px-rev { from { transform: translateY(0); } to { transform: translateY(-12%); } }
}
.bx-split__media-col::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 28px; height: 28px; background: var(--bx-red); z-index: 2; } /* above the inset's frame */
@media (max-width: 767px) { .bx-split__media-col::after { left: -8px; bottom: -8px; width: 20px; height: 20px; } }
/* --- entry reveal "from drawing to building" (bands with .bx-reveal; nav.js adds .is-in once in view) --- */
@keyframes bx-develop { from { filter: grayscale(1) brightness(1.14) contrast(.82); } to { filter: grayscale(0) brightness(1) contrast(1); } }
@keyframes bx-mark { from { transform: scale(0); } to { transform: none; } }
html.bx-js .bx-reveal:not(.is-in) .bx-split-media img, html.bx-js .bx-reveal:not(.is-in) .bx-stack__inset img { filter: grayscale(1) brightness(1.14) contrast(.82); }
html.bx-js .bx-reveal:not(.is-in) .bx-split__media-col::after { transform: scale(0); }
html.bx-js .bx-reveal:not(.is-in) .bx-split__copy > * { opacity: 0; transform: translateY(18px); }
.bx-reveal.is-in .bx-split-media img, .bx-reveal.is-in .bx-stack__inset img { animation: bx-develop 1.5s cubic-bezier(.2,.7,.2,1) both; }
@supports (animation-timeline: view()) { .bx-reveal.is-in .bx-split-media.bx-px img { animation: bx-develop 1.5s cubic-bezier(.2,.7,.2,1) both, bx-px linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% exit 100%; } .bx-reveal.is-in .bx-stack__inset.bx-px img { animation: bx-develop 1.5s cubic-bezier(.2,.7,.2,1) both, bx-px-rev linear both; animation-timeline: auto, view(); animation-range: normal, entry 0% exit 100%; } }
.bx-reveal.is-in .bx-split__media-col::after { transform-origin: bottom left; animation: bx-mark .4s cubic-bezier(.2,.7,.2,1) 1.1s both; }
.bx-reveal.is-in .bx-split__copy > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-split__copy > :nth-child(1) { animation-delay: .15s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(2) { animation-delay: .27s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(3) { animation-delay: .39s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(4) { animation-delay: .51s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(5) { animation-delay: .63s; }
@media (prefers-reduced-motion: reduce) { .bx-reveal *, .bx-reveal .bx-split__media-col::after, .bx-reveal .bx-point::before { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; } }
/* ==========================================================================
8. Tiles (image-box doors) and project cards — photo + red label with the logo's gold edge
========================================================================== */
.bx-tile { position: relative; overflow: hidden; background: var(--bx-ink); transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.bx-tile:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 40px -22px rgba(0,0,0,.5); }
.bx-tile .elementor-image-box-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.bx-tile .elementor-image-box-img { position: relative; }
.bx-tile .elementor-image-box-wrapper .elementor-image-box-img { margin: 0; width: 100%; }
/* Elementor makes the figure inline-block on the text baseline, so the line box left an ink strip under (or, with
different markup, above) the photo — Nov 4, client's "czarne paski" on Oferta. Block boxes have no line box. */
.bx-tile .elementor-image-box-wrapper .elementor-image-box-img, .bx-tile .elementor-image-box-img > a { display: block; }
.bx-tile .elementor-image-box-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .4s ease; }
.bx-tile:hover .elementor-image-box-img img { transform: scale(1.04); }
.bx-tile .elementor-image-box-content { position: absolute; left: 0; bottom: 24px; padding: 0; text-align: left; }
.bx-tile .elementor-image-box-title { margin: 0; }
/* the heading is the red box; the link inside it is plain (Elementor nests in the , so styling both drew two gold bars) */
.bx-tile .elementor-image-box-title { display: inline-block; background: var(--bx-red); border-left: 4px solid var(--bx-gold); color: #fff; font-family: var(--bx-font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; padding: 14px 26px 14px 22px; transition: padding-right .3s cubic-bezier(.4,0,.2,1); }
.bx-tile:hover .elementor-image-box-title { padding-right: 40px; }
.bx-tile .elementor-image-box-title a { color: #fff; text-decoration: none; }
.bx-tile .elementor-image-box-title a::after { content: ""; position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .bx-tile .elementor-image-box-img img { transition: none; } }
.bx-card { position: relative; overflow: hidden; background: var(--bx-ink); color: #fff; transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.bx-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 40px -22px rgba(0,0,0,.5); }
.bx-card .elementor-widget-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
.bx-card .elementor-widget-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.bx-card:hover .elementor-widget-image img { transform: scale(1.04); }
.bx-card .bx-card__label { position: absolute; left: 0; bottom: 24px; width: auto; }
.bx-card .bx-card__label .elementor-heading-title { margin: 0; display: inline-block; background: var(--bx-red); border-left: 4px solid var(--bx-gold); color: #fff; font-family: var(--bx-font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; padding: 14px 26px 14px 22px; transition: padding-right .3s cubic-bezier(.4,0,.2,1); }
.bx-card:hover .bx-card__label .elementor-heading-title { padding-right: 40px; }
.bx-card .bx-card__label .elementor-heading-title a { color: #fff; text-decoration: none; }
.bx-card .bx-card__label .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; }
.bx-card .bx-card__status { position: absolute; top: 16px; right: 16px; width: auto; }
.bx-card .bx-card__status .elementor-heading-title { font-family: var(--bx-font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(18,18,18,.78); color: #fff; padding: 6px 10px; }
.bx-card .bx-card__status .elementor-heading-title a { color: inherit; text-decoration: none; }
.e-loop-item { height: 100%; }
.bx-works .e-loop-item { cursor: pointer; } /* nav.js opens the card's link on a click anywhere on it */
@media (prefers-reduced-motion: reduce) { .bx-card, .bx-tile, .bx-card .elementor-widget-image img, .bx-tile .elementor-image-box-img img, .bx-btn .elementor-button, .bx-nav a::after { transition: none; } .bx-card:hover, .bx-tile:hover { transform: none; } }
/* ==========================================================================
8b. Points (icon-box, Dlaczego warto): a line icon in red, title + copy, hairlines between rows
========================================================================== */
.bx-point { position: relative; padding: 26px 0; }
.bx-point + .bx-point::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bx-line); transform-origin: left; }
.bx-point:first-child { padding-top: 0; }
.bx-point:last-child { padding-bottom: 0; }
.bx-point .elementor-icon-box-wrapper { align-items: flex-start; }
.bx-point .elementor-icon-box-icon { margin-inline-end: 26px; }
.bx-point .elementor-icon-box-icon .elementor-icon { display: block; width: 40px; height: 40px; color: var(--bx-red); line-height: 0; }
.bx-point .elementor-icon-box-icon .elementor-icon svg { display: block; width: 40px; height: 40px; fill: none; stroke: currentColor; }
.bx-point .elementor-icon-box-title { margin: 6px 0 8px; }
.bx-point .elementor-icon-box-title, .bx-point .elementor-icon-box-title span { color: var(--bx-red); font-family: var(--bx-font-head); font-size: var(--bx-h3); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.25; }
.bx-point .elementor-icon-box-description { margin: 0; max-width: 58ch; }
/* --- entry reveal for a points band: the pen draws each icon, the rule draws in, the row's text rises --- */
@keyframes bx-ink-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes bx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bx-reveal .bx-point svg > * { stroke-dasharray: 80; }
.bx-reveal .bx-point:nth-child(1) { --bx-d: .15s; }
.bx-reveal .bx-point:nth-child(2) { --bx-d: .4s; }
.bx-reveal .bx-point:nth-child(3) { --bx-d: .65s; }
.bx-reveal .bx-point:nth-child(4) { --bx-d: .9s; }
.bx-reveal .bx-point:nth-child(5) { --bx-d: 1.15s; }
.bx-reveal .bx-point svg > :nth-child(1) { --bx-p: 0s; }
.bx-reveal .bx-point svg > :nth-child(2) { --bx-p: .18s; }
.bx-reveal .bx-point svg > :nth-child(3) { --bx-p: .36s; }
html.bx-js .bx-reveal:not(.is-in) .bx-aside__head { opacity: 0; transform: translateY(18px); }
html.bx-js .bx-reveal:not(.is-in) .bx-aside__head .bx-red { opacity: 0; }
html.bx-js .bx-reveal:not(.is-in) .bx-point svg > * { stroke-dashoffset: 80; }
html.bx-js .bx-reveal:not(.is-in) .bx-point::before { transform: scaleX(0); }
html.bx-js .bx-reveal:not(.is-in) .bx-point .elementor-icon-box-content { opacity: 0; transform: translateY(12px); }
.bx-reveal.is-in .bx-aside__head { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-aside__head .bx-red { animation: bx-fade-in .5s ease-out .4s both; }
.bx-reveal.is-in .bx-point::before { animation: bx-draw-x .55s cubic-bezier(.2,.7,.2,1) var(--bx-d) both; }
.bx-reveal.is-in .bx-point svg > * { animation: bx-ink-draw .7s cubic-bezier(.4,0,.2,1) calc(var(--bx-d) + .1s + var(--bx-p)) both; }
.bx-reveal.is-in .bx-point .elementor-icon-box-content { animation: bx-rise .55s cubic-bezier(.2,.7,.2,1) calc(var(--bx-d) + .35s) both; }
@media (max-width: 767px) { .bx-point { padding: 20px 0; } .bx-point .elementor-icon-box-icon { margin-inline-end: 16px; } .bx-point .elementor-icon-box-icon .elementor-icon, .bx-point .elementor-icon-box-icon .elementor-icon svg { width: 32px; height: 32px; } .bx-point .elementor-icon-box-title { margin-top: 2px; } }
/* ==========================================================================
10. Footer — light grey, red small-caps column titles, bold contact
========================================================================== */
.bx-footer { background: var(--bx-grey); color: var(--bx-text); font-size: 15px; }
.bx-footer__inner { max-width: var(--bx-max); margin: 0 auto; padding: 56px var(--bx-gutter) 40px; }
.bx-footer__logo img { height: 48px; width: auto; }
/* same multiply as the hero logo: the JPEG's white box takes the footer grey and texture. The inner drops its
z-index (stays above ::before by source order) so the blend reaches the footer, not an isolated group. */
.bx-footer__inner { z-index: auto; }
.bx-footer__logo { mix-blend-mode: multiply; }
.bx-footer__cols { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: 40px; margin-top: 40px; }
@media (max-width: 767px) { .bx-footer__cols { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; } }
.bx-footer h2 { color: var(--bx-red); font-size: 14px; letter-spacing: .06em; margin: 0 0 18px; }
.bx-footer p { margin: 0 0 .6em; }
.bx-footer ul { list-style: none; margin: 0; padding: 0; }
.bx-footer li { margin: 0 0 8px; }
.bx-footer a { color: var(--bx-ink); text-decoration: none; }
.bx-footer a:hover { color: var(--bx-red); text-decoration: underline; }
.bx-footer__email, .bx-footer__phone { display: inline-block; font-family: var(--bx-font-head); font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); line-height: 1.3; margin-bottom: 6px; overflow-wrap: anywhere; }
.bx-footer a.bx-footer__phone { color: var(--bx-red); }
.bx-footer__address { margin-top: 14px; }
.bx-footer__privacy { display: inline-block; margin-top: 14px; text-decoration: underline; }
.bx-footer__copy { margin: 40px 0 0; font-size: 13px; color: var(--bx-muted); }
/* ==========================================================================
11. Project single (single-realizacja.php)
========================================================================== */
body .site-main.bx-project { max-width: none; padding: 0; margin: 0; }
.bx-project__hero { position: relative; min-height: 300px; display: flex; align-items: center; background: var(--bx-ink) center / cover no-repeat; color: #fff; }
.bx-project__hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(155,27,30,.86) 0 44%, rgba(18,18,18,.55) 44.5%); }
.bx-project__hero-inner { position: relative; max-width: var(--bx-max); width: 100%; margin: 0 auto; padding: 48px var(--bx-gutter); }
.bx-project__hero .bx-breadcrumb { margin: 0 0 24px; }
.bx-project__hero h1 { margin: 0; }
.bx-project__status { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #fff; color: var(--bx-red); padding: 6px 10px; margin: 0 0 16px; }
.bx-project__status--w-trakcie { background: var(--bx-gold); color: var(--bx-ink); }
.bx-project__body { max-width: var(--bx-max); margin: 0 auto; padding: var(--bx-band) var(--bx-gutter); display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 48px; }
@media (max-width: 900px) { .bx-project__body { grid-template-columns: 1fr; gap: 32px; } }
.bx-project__content > p { max-width: 68ch; }
.bx-project__content h2 { font-size: 1.1rem; color: var(--bx-red); letter-spacing: .03em; margin: 1.8em 0 .6em; }
/* core gallery is a flex row whose item widths are calc'd from --wp--style--unstable-gallery-gap, but its
actual gap comes from the theme block-gap (24px) — three items then overflow the row by a hair and wrap
to two. Pin the real gap to the same variable. The first photo leads at full width. */
.bx-project__content { --wp--style--gallery-gap-default: 12px; }
.bx-project__content .wp-block-gallery.bx-gallery { margin-top: 20px; gap: var(--wp--style--unstable-gallery-gap, 12px); }
.bx-project__content .wp-block-gallery .wp-block-image { overflow: hidden; background: var(--bx-ink); }
.bx-project__content .wp-block-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; cursor: zoom-in; }
.bx-project__content .wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }
.bx-project__content .wp-block-gallery .wp-block-image:first-child { width: 100% !important; }
.bx-project__content .wp-block-gallery .wp-block-image:first-child img { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) { .bx-project__content .wp-block-gallery img { transition: none; } }
/* core lightbox chrome in the brand (core's rules load after this file, hence the html prefix) */
html .wp-lightbox-overlay .scrim { background-color: var(--bx-ink) !important; opacity: .94; } /* core writes the scrim colour as an inline style from global styles */
html .wp-lightbox-overlay .close-button, html .wp-lightbox-overlay .lightbox-nav-button, html .wp-lightbox-overlay button { color: #fff; }
html .wp-lightbox-overlay button svg { fill: #fff; }
.bx-project__facts { background: var(--bx-grey); padding: 28px; align-self: start; position: sticky; top: calc(var(--bx-header-h) + 24px); }
.bx-project__facts h2 { color: var(--bx-red); font-size: 14px; letter-spacing: .06em; margin: 0 0 16px; }
.bx-project__facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 15px; }
.bx-project__facts dt { font-weight: 700; color: var(--bx-ink); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; padding-top: 3px; }
.bx-project__facts dd { margin: 0; }
.bx-project__facts a.bx-btn { margin-top: 24px; }
.bx-project__nav { max-width: var(--bx-max); margin: 0 auto; padding: 0 var(--bx-gutter) var(--bx-band); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bx-project__nav a { font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--bx-ink); }
.bx-project__nav a:hover { color: var(--bx-red); }
/* ==========================================================================
12. Misc
========================================================================== */
.bx-br-wide { display: inline; } /* the hero headline's break: kept at every width now that the panel is centred on phones too */
/* anchored bands land below the sticky header */
.e-con[id] { scroll-margin-top: calc(var(--bx-header-h) + 24px); }
/* points inside a copy column (split `items`): the bx-point rows keep their hairlines; the copy stagger covers the extra children */
.bx-split__copy .bx-points.e-con { width: 100%; }
.bx-reveal.is-in .bx-split__copy > :nth-child(6) { animation-delay: .75s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(7) { animation-delay: .87s; }
.bx-reveal.is-in .bx-split__copy > :nth-child(8) { animation-delay: .99s; }
/* ==========================================================================
13. Section head row, pinned aside, timeline band, doors, featured + rows, CTA band
========================================================================== */
.bx-sh.e-con { margin-bottom: 8px; }
.bx-more .elementor-heading-title { font: 700 13px/1 var(--bx-font-body); letter-spacing: .04em; text-transform: uppercase; }
.bx-more .elementor-heading-title a { position: relative; display: inline-block; color: var(--bx-ink); text-decoration: none; padding-bottom: 6px; }
.bx-more .elementor-heading-title a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bx-red); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.bx-more .elementor-heading-title a:hover::before { transform: scaleX(1); }
/* the arrow is drawn here, not typed into the heading, so inline editing in Elementor cannot lose it (Oct 15) */
.bx-more .elementor-heading-title a::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.bx-more .elementor-heading-title a:hover::after { transform: translateX(4px); }
.bx-note .elementor-heading-title { font: 400 17px/1.5 var(--bx-font-body); text-transform: none; letter-spacing: 0; color: var(--bx-muted); }
/* the aside's heading column stays in view while the rows scroll */
.bx-aside__col.e-con { position: sticky; top: calc(var(--bx-header-h) + 32px); align-self: flex-start; }
@media (max-width: 1024px) { .bx-aside__col.e-con { position: static; } }
/* --- timeline band --- */
.bx-tl__k .elementor-heading-title { font: 500 12px/1 var(--bx-font-mono, ui-monospace, Menlo, Consolas, monospace); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bx-tl__h .elementor-heading-title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); }
.bx-tl__sub p { color: rgba(255,255,255,.75); text-align: right; font-size: 1.02rem; line-height: 1.5; max-width: 36ch; margin: 0 0 0 auto; }
.bx-tl__track.e-con { position: relative; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) left top / 100% 1px no-repeat; }
.bx-tl__track::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 80%; background: var(--bx-red); transform-origin: left; }
.bx-tn.e-con { position: relative; color: #fff; text-decoration: none; }
.bx-tn::after { content: ""; position: absolute; left: -1px; top: -37px; width: 14px; height: 14px; background: var(--bx-red); border: 3px solid var(--bx-ink); box-shadow: 0 0 0 1px rgba(255,255,255,.4); transition: box-shadow .3s; }
.bx-tn--now::after { background: var(--bx-gold); }
a.bx-tn:hover::after { box-shadow: 0 0 0 6px rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.6); }
.bx-tn__y .elementor-heading-title { font: 800 1.5rem/1 var(--bx-font-head); letter-spacing: -.01em; text-transform: none; }
.bx-tn__y .elementor-heading-title small { font: 700 .55em/1 var(--bx-font-head); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-left: .4em; }
.bx-tn__n .elementor-heading-title { font: 700 13px/1.35 var(--bx-font-body); letter-spacing: .04em; text-transform: uppercase; }
.bx-tn__p .elementor-heading-title { font: 400 12px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.bx-tn--now .bx-tn__p .elementor-heading-title { color: var(--bx-gold); }
@keyframes bx-pop { from { transform: scale(0); } to { transform: scale(1); } }
html.bx-js .bx-reveal .bx-tl__track::after { transform: scaleX(0); }
html.bx-js .bx-reveal .bx-tn::after { transform: scale(0); }
html.bx-js .bx-reveal .bx-tn > *, html.bx-js .bx-reveal .bx-tl__head > * > * { opacity: 0; transform: translateY(12px); }
.bx-reveal.is-in .bx-tl__head > * > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-tl__track::after { animation: bx-draw-x 1.5s cubic-bezier(.2,.7,.2,1) .2s both; }
.bx-reveal.is-in .bx-tn::after { animation: bx-pop .4s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--bx-i) * .3s) both; }
.bx-reveal.is-in .bx-tn > * { animation: bx-rise .55s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--bx-i) * .3s) both; }
.bx-tn:nth-child(1) { --bx-i: 0; } .bx-tn:nth-child(2) { --bx-i: 1; } .bx-tn:nth-child(3) { --bx-i: 2; } .bx-tn:nth-child(4) { --bx-i: 3; } .bx-tn:nth-child(5) { --bx-i: 4; } .bx-tn:nth-child(6) { --bx-i: 5; }
@media (max-width: 767px) {
.bx-tl__sub p { text-align: left; margin: 0; }
.bx-tl__track.e-con { background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) left top / 1px 100% no-repeat; }
.bx-tl__track::after { width: 2px; height: 80%; transform-origin: top; }
.bx-reveal.is-in .bx-tl__track::after { animation-name: bx-draw-y; }
.bx-tn::after { left: -37px; top: 3px; }
}
/* --- doors --- */
.bx-band--doors.e-con { padding-top: var(--bx-band); padding-bottom: 0; } /* the head gets the band rhythm above it; the doors stay flush below (the builder's 0 padding keeps them full-bleed at the sides) */
.bx-doors > .bx-door.e-con { --width: 0; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0%; flex: 1 1 0; width: 0; position: relative; color: #fff; transition: flex-grow .8s cubic-bezier(.2,.7,.2,1); }
.bx-doors > .bx-door.e-con:hover, .bx-doors > .bx-door.e-con:focus-within { --flex-grow: 1.7; flex-grow: 1.7; }
/* a container's ::before is Elementor's overlay slot (`content: var(--background-overlay)`, which beats a
one-class rule on order and renders nothing while the var is unset): claim it with the var, then paint it */
.bx-door.e-con { --background-overlay: ""; --overlay-transition: background .6s; }
.bx-door::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); transition: background .6s; pointer-events: none; z-index: 0; }
.bx-doors:hover .bx-door:not(:hover)::before { background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.3) 70%); }
.bx-door::after { content: ""; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.bx-door:hover::after { opacity: 1; }
.bx-door__body.e-con { position: relative; z-index: 1; }
.bx-door__k .elementor-heading-title { font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.bx-door__lbl .elementor-heading-title { display: inline-block; background: var(--bx-red); border-left: 4px solid var(--bx-gold); color: #fff; font: 800 1.15rem/1.2 var(--bx-font-head); letter-spacing: .04em; text-transform: uppercase; padding: 14px 26px 14px 22px; }
.bx-door__lbl .elementor-heading-title a { color: #fff; text-decoration: none; }
.bx-door__more.e-con { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1); }
.bx-door__in.e-con { overflow: hidden; min-height: 0; }
.bx-door:hover .bx-door__more.e-con, .bx-door:focus-within .bx-door__more.e-con, body.elementor-editor-active .bx-door__more.e-con { grid-template-rows: 1fr; }
@media (hover: none) { .bx-door__more.e-con { grid-template-rows: 1fr; } .bx-doors > .bx-door.e-con:hover { --flex-grow: 1; flex-grow: 1; } }
.bx-door__text p { color: rgba(255,255,255,.92); font-size: 1.05rem; line-height: 1.5; max-width: 42ch; margin: 6px 0 2px; }
@media (max-width: 767px) { .bx-doors > .bx-door.e-con { --width: 100%; width: 100%; flex: 0 0 auto; } }
html.bx-js .bx-reveal .bx-doors__head .bx-sh > * > *, html.bx-js .bx-reveal .bx-doors { opacity: 0; transform: translateY(18px); }
.bx-reveal.is-in .bx-doors__head .bx-sh > * > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-doors { animation: bx-rise .7s cubic-bezier(.2,.7,.2,1) .2s both; }
/* --- realizacje: featured + rows --- */
.bx-feat.e-con { position: relative; overflow: hidden; background: var(--bx-ink); color: #fff; min-height: 518px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 50px -28px rgba(0,0,0,.5); }
.bx-feat .elementor-widget-image { position: absolute; inset: 0; margin: 0; }
.bx-feat .elementor-widget-image .elementor-widget-container, .bx-feat .elementor-widget-image img { width: 100%; height: 100%; }
.bx-feat .elementor-widget-image img { object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.bx-feat:hover .elementor-widget-image img { transform: scale(1.05); }
.bx-feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 50%); pointer-events: none; }
/* Elementor paints .elementor-widget { position: relative; width: … } after this file, hence the compound selectors */
.bx-feat > .bx-chip.elementor-widget, .bx-feat > .bx-feat__label.elementor-widget, .bx-feat > .bx-feat__body.e-con, .bx-feat > .bx-feat__meta.e-con { position: absolute; z-index: 2; width: auto; max-width: calc(100% - 36px); }
.bx-feat > .bx-chip.elementor-widget { top: 18px; left: 18px; }
.bx-chip .elementor-heading-title { font: 700 11px/1 var(--bx-font-body); letter-spacing: .1em; text-transform: uppercase; background: rgba(18,18,18,.78); color: #fff; padding: 7px 10px; }
.e-loop-item.status_realizacji-w-trakcie .bx-chip .elementor-heading-title { background: var(--bx-gold); color: var(--bx-ink); }
.bx-feat > .bx-feat__label.elementor-widget, .bx-feat > .bx-feat__body.e-con { left: 0; bottom: 24px; }
.bx-feat > .bx-feat__body.e-con { max-width: 560px; }
.bx-feat__body .bx-feat__label.elementor-widget { width: auto; }
.bx-feat__desc .elementor-heading-title { margin: 14px 0 0 24px; font: 400 15px/1.5 var(--bx-font-body); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.9); max-width: 46ch; }
.bx-feat__desc .elementor-heading-title:empty { display: none; }
.bx-feat__label .elementor-heading-title { display: inline-block; background: var(--bx-red); border-left: 4px solid var(--bx-gold); color: #fff; font: 800 1.05rem/1.2 var(--bx-font-head); letter-spacing: .04em; text-transform: uppercase; padding: 14px 26px 14px 22px; transition: padding-right .3s cubic-bezier(.2,.7,.2,1); }
.bx-feat:hover .bx-feat__label .elementor-heading-title { padding-right: 40px; }
.bx-feat__label .elementor-heading-title a { color: #fff; text-decoration: none; }
.bx-feat__label .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; }
.bx-feat > .bx-feat__meta.e-con { right: 24px; bottom: 24px; }
/* banner layout (`layout: banner`, Oct 14 — Karol's pick C): the featured card runs full width with its excerpt, three tile cards in a row under it */
.bx-works--banner .bx-feat.e-con { min-height: 440px; }
.bx-works--banner .bx-feat::after { background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%), linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); }
.bx-works--banner .bx-feat > .bx-feat__body.e-con, .bx-works--banner .bx-feat > .bx-feat__meta.e-con { bottom: 32px; }
.bx-tc.e-con { position: relative; }
.bx-tc__ph.e-con { position: relative; overflow: hidden; background: #1b1b1b; padding-top: 75%; }
.bx-tc__ph .elementor-widget-image { position: absolute; inset: 0; margin: 0; }
.bx-tc__ph .elementor-widget-image .elementor-widget-container, .bx-tc__ph .elementor-widget-image img { width: 100%; height: 100%; }
.bx-tc__ph .elementor-widget-image img { object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bx-tc:hover .bx-tc__ph .elementor-widget-image img { transform: scale(1.05); }
.bx-tc__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 50%); pointer-events: none; }
.bx-tc__ph > .bx-chip.elementor-widget, .bx-tc__ph > .bx-tc__label.elementor-widget { position: absolute; z-index: 2; width: auto; max-width: calc(100% - 32px); }
.bx-tc__ph > .bx-chip.elementor-widget { top: 16px; left: 16px; }
.bx-tc__ph > .bx-tc__label.elementor-widget { left: 0; bottom: 20px; }
.bx-tc__label .elementor-heading-title { display: inline-block; background: var(--bx-red); border-left: 4px solid var(--bx-gold); color: #fff; font: 800 .95rem/1.2 var(--bx-font-head); letter-spacing: .04em; text-transform: uppercase; padding: 11px 18px 11px 16px; transition: padding-right .3s cubic-bezier(.2,.7,.2,1); }
.bx-tc:hover .bx-tc__label .elementor-heading-title { padding-right: 36px; }
.bx-tc__label .elementor-heading-title a { color: #fff; text-decoration: none; }
.bx-tc__label .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bx-tc__meta .elementor-widget { width: auto; }
.bx-tc__m .elementor-heading-title { font: 400 12px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.bx-tc__m--years .elementor-heading-title { color: rgba(255,255,255,.9); text-align: right; white-space: nowrap; }
.bx-tc__m--years.elementor-widget { margin-left: auto; } /* years stay right even when a realizacja has no location */
@media (max-width: 767px) { .bx-works--banner .bx-feat.e-con { min-height: 340px; } .bx-works--banner .bx-feat > .bx-feat__meta.e-con { display: none; } }
/* Phones: as a flex column, Chrome sized the one-column tile grid (grid-auto-rows 1fr + Elementor's height:100% cards)
from the photos alone, so the cards' location · years rows (126px) spilled under the red CTA band — Nov 4, client
screenshot. A block column measures the grid from its real content; the margin stands in for the 16px gap. */
@media (max-width: 767px) { .bx-works--banner.e-con { display: block; } .bx-works--banner.e-con > * + * { margin-top: 16px; } }
.bx-feat__m .elementor-heading-title { font: 500 12px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; text-align: right; color: rgba(255,255,255,.85); }
.bx-row.e-con { position: relative; background: #fff; border: 1px solid var(--bx-line); overflow: hidden; min-height: 162px; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.bx-row.e-con:hover { background: var(--bx-grey); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 22px 40px -24px rgba(0,0,0,.45); transform: translateY(-3px); }
.bx-row__ph.e-con { overflow: hidden; }
.bx-row__ph .elementor-widget-image, .bx-row__ph .elementor-widget-container, .bx-row__ph img { height: 100%; }
.bx-row__ph .elementor-widget-image { margin: 0; }
.bx-row__ph img { width: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.bx-row.e-con:hover .bx-row__ph img { transform: scale(1.06); }
.bx-row__title .elementor-heading-title { font: 700 15px/1.3 var(--bx-font-head); letter-spacing: .03em; text-transform: uppercase; }
.bx-row__title .elementor-heading-title a { color: var(--bx-ink); text-decoration: none; }
.bx-row__title .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bx-row__m .elementor-heading-title { font: 400 12px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-muted); }
.bx-row__m:not(.bx-row__m--years) .elementor-heading-title::after { content: " ·"; } /* separator rides on the location, so a project without one shows no stray dot */
.bx-row__st .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--bx-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bx-ink); }
.bx-row__st .elementor-heading-title::before { content: ""; width: 8px; height: 8px; background: var(--bx-red); }
.e-loop-item.status_realizacji-w-trakcie .bx-row__st .elementor-heading-title::before { background: var(--bx-gold); }
.bx-row::after { content: "→"; position: absolute; right: 20px; bottom: 14px; color: var(--bx-red); font: 800 18px/1 var(--bx-font-head); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1); }
.bx-row.e-con:hover::after { opacity: 1; transform: none; }
.bx-works__rows .elementor-loop-container { height: 100%; align-content: space-between; }
html.bx-js .bx-reveal .bx-works .e-loop-item, html.bx-js .bx-reveal .bx-sh > * > * { opacity: 0; transform: translateY(18px); }
.bx-reveal.is-in .bx-sh > * > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-works .e-loop-item { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--bx-i, 0) * .11s) both; }
.bx-works__rows .e-loop-item:nth-child(1) { --bx-i: 1; } .bx-works__rows .e-loop-item:nth-child(2) { --bx-i: 2; } .bx-works__rows .e-loop-item:nth-child(3) { --bx-i: 3; }
@media (max-width: 1024px) { .bx-feat.e-con { min-height: 420px; } .bx-aside__col.e-con { position: static; } }
/* --- CTA band --- */
/* CTA band (Oct 14 redo — the client's question is the lead in sentence case, "Skontaktuj się z nami" the heading,
and the actions sit in a white card so the phone and the form button read as the thing to do) */
.bx-band--red .bx-lead p { color: rgba(255,255,255,.92); max-width: 46ch; }
.bx-cta__text p { font-size: 1.15rem; line-height: 1.5; max-width: 40ch; color: rgba(255,255,255,.9); margin: 0; }
.bx-cta__card.e-con { color: var(--bx-text); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 30px 50px -28px rgba(0,0,0,.55); }
.bx-band--red .bx-cta__card .elementor-heading-title { color: var(--bx-ink); }
.bx-cta__k .elementor-heading-title { font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.bx-band--red .bx-cta__card .bx-cta__k .elementor-heading-title { color: var(--bx-muted); }
.bx-cta__k--or { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--bx-line); }
.bx-cta__tel .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--bx-font-head); letter-spacing: .01em; text-transform: none; }
.bx-cta__tel .elementor-heading-title::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.bx-band--red .bx-cta__card .bx-cta__tel .elementor-heading-title, .bx-band--red .bx-cta__card .bx-cta__tel .elementor-heading-title a { color: var(--bx-red); text-decoration: none; }
.bx-cta__card .bx-cta__tel .elementor-heading-title a:hover { color: var(--bx-red-deep); }
.bx-cta__card .bx-btn { width: 100%; } .bx-cta__card .bx-btn .elementor-button { width: 100%; text-align: center; }
html.bx-js .bx-reveal.bx-band--red .e-con > .e-con > * { opacity: 0; transform: translateY(18px); }
.bx-reveal.is-in.bx-band--red .e-con > .e-con > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) calc(var(--bx-i, 0) * .12s) both; }
.bx-band--red .e-con > .e-con > :nth-child(2) { --bx-i: 1; } .bx-band--red .e-con > .e-con > :nth-child(3) { --bx-i: 2; }
@media (prefers-reduced-motion: reduce) { .bx-reveal *, .bx-reveal *::before, .bx-reveal *::after, .bx-doors > .bx-door.e-con, .bx-row.e-con, .bx-feat .elementor-widget-image img { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }
/* ==========================================================================
14. Doors inside the container (Oct 14, Karol: the full-bleed version with its own white heading band did not flow)
========================================================================== */
.bx-doors.bx-doors--boxed.e-con { width: 100%; }
.bx-doors--boxed > .bx-door.e-con { min-height: 520px; }
.bx-door__text p { max-width: 38ch; }
html.bx-js .bx-reveal .bx-doors__head > * { opacity: 0; transform: translateY(18px); }
.bx-reveal.is-in .bx-doors__head > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-doors__head > :nth-child(2) { animation-delay: .12s; }
.bx-reveal.is-in .bx-doors__head > :nth-child(3) { animation-delay: .24s; }
@media (max-width: 767px) { .bx-doors--boxed > .bx-door.e-con { min-height: 360px; } }
/* ==========================================================================
15. Door plate (Oct 14, Karol: the hover was weak and hard to read). On hover, keyboard focus or touch the lower
part of the door becomes a solid ink plate holding kicker, label, icon bullets and the button; the whole door
is a link (the label's anchor covers it), the button sits above that cover.
========================================================================== */
.bx-door__body.e-con { transition: background-color .4s cubic-bezier(.2,.7,.2,1), padding .4s cubic-bezier(.2,.7,.2,1); }
.bx-door:hover .bx-door__body.e-con, .bx-door:focus-within .bx-door__body.e-con, body.elementor-editor-active .bx-door__body.e-con { background-color: rgba(18,18,18,.92); padding: 26px 28px 28px; } /* the editor shows the open plate, so the bullets can be edited in place */
@media (hover: none) { .bx-door__body.e-con { background-color: rgba(18,18,18,.92); padding: 22px 22px 24px; } }
.bx-door__lbl .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bx-door .bx-btn { position: relative; z-index: 2; }
.bx-door__list .elementor-icon-list-items { margin: 2px 0 0; }
.bx-door__list .elementor-icon-list-item { align-items: center; }
.bx-door__list .elementor-icon-list-icon { color: #fff; }
.bx-door__list .elementor-icon-list-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.bx-door__list .elementor-icon-list-text { color: #fff; font: 500 15px/1.35 var(--bx-font-body); padding-left: 4px; }
.bx-door:hover .bx-door__lbl .elementor-heading-title, .bx-door:focus-within .bx-door__lbl .elementor-heading-title, body.elementor-editor-active .bx-door__lbl .elementor-heading-title { padding-right: 40px; }
.bx-door__lbl .elementor-heading-title { transition: padding-right .3s cubic-bezier(.2,.7,.2,1); }
.bx-door__lbl .elementor-heading-title a:focus-visible { outline: 3px solid var(--bx-gold); outline-offset: 4px; }
/* ==========================================================================
16. Harmonogram textures (Oct 14): two construction-schedule drawings in the drafting language, both generated by
scripts/make-illustrations.py (rerun, never hand-edit). `bx-band--harmonogram` = the flat 52-week chart
(Dlaczego warto); `bx-band--harmonogram-tilt` = a three-building schedule drawn at 37° counter-clockwise, sized
to cover the band (Nasza oferta). The tilt is in the SVG, not a CSS transform: a rotated ::before needs
clip/overflow on the band, which breaks the sticky heading column. Same mechanics as the blueprint band: claim
Elementor's overlay slot (::before), blank the contour on ::after, lift the content above it. Bump ?v= on change.
========================================================================== */
.bx-band--harmonogram.bx-band::after, .bx-band--harmonogram-tilt.bx-band::after { background: none; }
.bx-band--harmonogram.e-con, .bx-band--harmonogram-tilt.e-con { --background-overlay: ""; }
.bx-band--harmonogram > .e-con-inner, .bx-band--harmonogram > .e-con, .bx-band--harmonogram > .elementor-widget,
.bx-band--harmonogram-tilt > .e-con-inner, .bx-band--harmonogram-tilt > .e-con, .bx-band--harmonogram-tilt > .elementor-widget { position: relative; z-index: 1; }
.bx-band--harmonogram.e-con::before, .bx-band--harmonogram-tilt.e-con::before { content: ""; position: absolute; inset: 0; background: url(assets/img/harmonogram.svg?v=39) center / cover no-repeat; opacity: .05; pointer-events: none; } /* 5 % at every width */
.bx-band--harmonogram-tilt.e-con::before { background-image: url(assets/img/harmonogram-tilt.svg?v=39); }
/* tall bands (Oferta's Generalne wykonawstwo, Oct 15): the flat chart at natural width across the top of the band, fading
out by ~760px so it does not run under the long column of points */
.bx-band--harmonogram-top.bx-band::after { background: none; }
.bx-band--harmonogram-top.e-con { --background-overlay: ""; }
.bx-band--harmonogram-top > .e-con-inner, .bx-band--harmonogram-top > .e-con, .bx-band--harmonogram-top > .elementor-widget { position: relative; z-index: 1; }
.bx-band--harmonogram-top.e-con::before { content: ""; position: absolute; inset: 0; background: url(assets/img/harmonogram.svg?v=39) center top / 100% auto no-repeat; opacity: .05; pointer-events: none; -webkit-mask-image: linear-gradient(#000 420px, transparent 760px); mask-image: linear-gradient(#000 420px, transparent 760px); }
@media (max-width: 767px) { .bx-band--harmonogram-top.e-con::before { background-size: 1100px auto; } } /* phones: natural scale, not a 390px strip */
/* ==========================================================================
17. Realizacje index cards (static, link to the estate bands below)
========================================================================== */
.bx-card--w-trakcie .bx-card__status .elementor-heading-title { background: var(--bx-gold); color: var(--bx-ink); }
.bx-band--index .elementor-widget-text-editor p { max-width: none; } /* the one-line intro above the index runs the full width */
.bx-cards--index .bx-card .bx-card__label .elementor-heading-title { font-size: .95rem; padding: 12px 22px 12px 18px; }
.bx-cards--index .bx-card .bx-card__status .elementor-heading-title { font-size: 11px; }
@media (max-width: 767px) {
.bx-cards--index .bx-card .bx-card__label .elementor-heading-title { font-size: .72rem; letter-spacing: .02em; padding: 9px 14px 9px 12px; border-left-width: 3px; }
.bx-cards--index .bx-card .bx-card__label { bottom: 12px; }
.bx-cards--index .bx-card .bx-card__status { top: 10px; right: 10px; }
.bx-cards--index .bx-card .bx-card__status .elementor-heading-title { font-size: 9px; padding: 5px 7px; }
}
/* ==========================================================================
18. Kontakt (Oct 15, Karol: "premium form page") — details column beside the form in a white card on the grey band;
the band's foot carries the route sketch in ink (assets/img/mapa.svg — the red CTA band's drawing, dark copy)
========================================================================== */
.bx-band--mapa.bx-band--grey::after { background: url(assets/img/mapa.svg?v=1) center bottom / 100% auto no-repeat; opacity: .07; }
@media (max-width: 767px) { .bx-band--mapa.bx-band--grey::after { background-size: 1100px auto; } } /* natural scale, not a 390px strip */
/* details: mono caps label over the value, hairlines between rows */
.bx-contact__aside .bx-lead p { max-width: 34ch; }
.bx-contact__details.e-con { margin-top: 6px; border-top: 1px solid #d9d9d9; }
.bx-contact__item.e-con { padding: 18px 0; border-bottom: 1px solid #d9d9d9; }
.bx-contact__k .elementor-heading-title { font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--bx-muted); }
.bx-contact__v .elementor-heading-title { font: 600 1.1rem/1.45 var(--bx-font-body); letter-spacing: 0; text-transform: none; color: var(--bx-ink); overflow-wrap: anywhere; }
.bx-contact__v .elementor-heading-title a { color: inherit; text-decoration: none; background: linear-gradient(var(--bx-red), var(--bx-red)) 0 100% / 0 1px no-repeat; transition: background-size .3s cubic-bezier(.4,0,.2,1), color .2s; }
.bx-contact__v .elementor-heading-title a:hover, .bx-contact__v .elementor-heading-title a:focus-visible { background-size: 100% 1px; color: var(--bx-red); }
.bx-contact__aside .bx-cta__tel .elementor-heading-title, .bx-contact__aside .bx-cta__tel .elementor-heading-title a { color: var(--bx-red); text-decoration: none; } /* the CTA card's phone (glyph + display size), red on grey */
.bx-contact__aside .bx-cta__tel .elementor-heading-title a:hover { color: var(--bx-red-deep); }
.bx-contact__map .elementor-heading-title { font: 700 12px/1.2 var(--bx-font-body); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.bx-contact__map .elementor-heading-title a { color: var(--bx-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s; }
.bx-contact__map .elementor-heading-title a:hover { color: var(--bx-red); }
/* the card: a white sheet with a deep soft shadow and the photos' red corner mark */
.bx-contact__card.e-con { position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 50px -28px rgba(0,0,0,.35); }
.bx-contact__card.e-con::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 28px; height: 28px; background: var(--bx-red); }
@media (max-width: 767px) { .bx-contact__card.e-con::after { left: -8px; bottom: -8px; width: 20px; height: 20px; } }
.bx-contact__hint p { margin: 0; font-size: 14px; color: var(--bx-muted); }
.bx-contact__card > .bx-contact__hint.elementor-widget { margin-top: -6px; margin-bottom: 6px; }
/* fields: the drafting mono caps as labels, quiet grey fills with a hairline foot; focus paints the foot red and the label with it */
.bx-form .elementor-field-group { position: relative; }
.bx-form .elementor-field-group > .elementor-field-label { display: block; margin: 0 0 8px; padding: 0; font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--bx-muted); transition: color .2s; }
.bx-form .elementor-field-group:focus-within > .elementor-field-label { color: var(--bx-red); }
.bx-form .elementor-mark-required .elementor-field-label::after { color: var(--bx-red); }
.bx-form .elementor-field-type-acceptance > .elementor-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* "Zgoda" for screen readers only */
.bx-form .elementor-field-group .elementor-field-textual { font-family: var(--bx-font-body); font-size: 16px; line-height: 1.4; color: var(--bx-ink); background: #f5f5f5; border: 0; border-bottom: 1px solid #d0d0d0; border-radius: 0; padding: 14px 16px; min-height: 52px; box-shadow: none; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.bx-form .elementor-field-group .elementor-field-textual:hover { border-bottom-color: var(--bx-ink); }
.bx-form .elementor-field-group .elementor-field-textual:focus { outline: none; background: #fff; border-bottom-color: var(--bx-red); box-shadow: inset 0 -2px 0 var(--bx-red); }
.bx-form .elementor-field-group .elementor-field-textual::placeholder { color: #9b9b9b; opacity: 1; }
.bx-form textarea.elementor-field-textual { min-height: 150px; resize: vertical; }
.bx-form .elementor-select-wrapper select.elementor-field-textual { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.bx-form .elementor-select-wrapper .select-caret-down-wrapper { inset-inline-end: 16px; color: var(--bx-ink); }
/* consent: a drawn 20px box, red with a white tick once checked */
.bx-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 12px; }
.bx-form .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; line-height: 1.5; color: var(--bx-muted); cursor: pointer; }
.bx-form .elementor-field-type-acceptance .elementor-field-option label a { color: var(--bx-ink); text-decoration: underline; text-underline-offset: 2px; }
.bx-form .elementor-field-type-acceptance input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--bx-ink); border-radius: 0; background: #fff; cursor: pointer; display: grid; place-content: center; transition: background-color .2s, border-color .2s; }
.bx-form .elementor-field-type-acceptance input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transform: scale(0); transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.bx-form .elementor-field-type-acceptance input[type="checkbox"]:checked { background: var(--bx-red); border-color: var(--bx-red); }
.bx-form .elementor-field-type-acceptance input[type="checkbox"]:checked::before { transform: scale(1); }
.bx-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible { outline: 2px solid var(--bx-red); outline-offset: 2px; }
/* submit: the signature button, wide; full width on phones */
.bx-form .elementor-field-type-submit { margin-top: 8px; }
.bx-form .elementor-field-type-submit .elementor-button { width: auto; min-width: 280px; padding: 18px 36px; }
@media (max-width: 767px) { .bx-form .elementor-field-type-submit .elementor-button { width: 100%; min-width: 0; } }
/* messages and field errors */
.bx-form .elementor-message { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--bx-ink); background: var(--bx-grey); color: var(--bx-ink); font-size: 15px; }
.bx-form .elementor-message.elementor-message-danger { border-left-color: var(--bx-red); color: var(--bx-red); }
.bx-form .elementor-error .elementor-field-textual { border-bottom-color: var(--bx-red); box-shadow: inset 0 -2px 0 var(--bx-red); }
.bx-form .elementor-help-inline { display: block; margin-top: 6px; font-size: 13px; color: var(--bx-red); }
/* entry: the column rises line by line, the card after it, the mark last (reduced motion: the generic .bx-reveal reset in §13) */
html.bx-js .bx-reveal:not(.is-in) .bx-contact__aside > *, html.bx-js .bx-reveal:not(.is-in) .bx-contact__card { opacity: 0; transform: translateY(18px); }
html.bx-js .bx-reveal:not(.is-in) .bx-contact__card::after { transform: scale(0); }
.bx-reveal.is-in .bx-contact__aside > * { animation: bx-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.bx-reveal.is-in .bx-contact__aside > :nth-child(1) { animation-delay: .1s; }
.bx-reveal.is-in .bx-contact__aside > :nth-child(2) { animation-delay: .22s; }
.bx-reveal.is-in .bx-contact__aside > :nth-child(3) { animation-delay: .34s; }
.bx-reveal.is-in .bx-contact__aside > :nth-child(4) { animation-delay: .46s; }
.bx-reveal.is-in .bx-contact__card { animation: bx-rise .7s cubic-bezier(.2,.7,.2,1) .3s both; }
.bx-reveal.is-in .bx-contact__card::after { transform-origin: bottom left; animation: bx-mark .4s cubic-bezier(.2,.7,.2,1) 1.1s both; }
/* ==========================================================================
19. Split photos open in Elementor's lightbox (Oct 15, Karol) — the link is the whole photo box; an expand glyph
rises in the corner on hover / keyboard focus; the lightbox itself wears the site's ink scrim (rules below)
========================================================================== */
.bx-split-media.elementor-widget a, .bx-stack__inset.elementor-widget a { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.bx-split-media.elementor-widget a:focus-visible, .bx-stack__inset.elementor-widget a:focus-visible { outline: 3px solid var(--bx-red); outline-offset: -3px; }
.bx-split-media.elementor-widget::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; z-index: 1; pointer-events: none; background: rgba(18,18,18,.78) url("data:image/svg+xml;utf8,") center / 20px no-repeat; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1); }
.bx-split-media.elementor-widget:hover::after, .bx-split-media.elementor-widget:focus-within::after { opacity: 1; transform: none; }
@media (hover: none) { .bx-split-media.elementor-widget::after { opacity: 1; transform: none; background-color: rgba(18,18,18,.55); } } /* touch: the glyph stays, quieter */
/* the lightbox in the site's tone: Elementor paints its controls from these custom properties; ink scrim, white controls,
the counter in the drafting mono caps, no share menu and no caption bar (no captions are set). The sticky header sits
under the scrim (z 100 vs 9999; headless captures composite it on top — a capture artefact, hit-testing confirms). */
.elementor-lightbox.dialog-type-lightbox { --lightbox-ui-color: rgba(255,255,255,.82); --lightbox-ui-color-hover: #fff; --lightbox-text-color: #fff; --lightbox-header-icons-size: 22px; background-color: rgba(18,18,18,.94); }
.elementor-lightbox .elementor-slideshow__header > [class*="share"], .elementor-lightbox .elementor-slideshow__share-menu, .elementor-lightbox .elementor-slideshow__footer { display: none; } /* the share icon is an inline svg; its class carries "share" */
.elementor-lightbox .elementor-slideshow__counter { font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; }
.elementor-lightbox.dialog-type-lightbox .elementor-lightbox-image { border-radius: 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); } /* one class up on Elementor's own rule, which loads later */
.elementor-lightbox .elementor-swiper-button { opacity: .75; transition: opacity .25s; }
/* the prev/next zones: Elementor's rule that places swiper buttons ships with its carousel widgets, so on a page without
one the lightbox's arrows flow below the slide and off screen — pinned here instead: full-height side zones, 56px chevrons */
.elementor-lightbox.dialog-type-lightbox .elementor-swiper-button { position: absolute; top: 0; bottom: 0; height: auto; width: 15%; z-index: 2; cursor: pointer; }
.elementor-lightbox.dialog-type-lightbox .elementor-swiper-button-prev { left: 0; }
.elementor-lightbox.dialog-type-lightbox .elementor-swiper-button-next { right: 0; }
.elementor-lightbox.dialog-type-lightbox .elementor-swiper-button svg { width: 56px; height: 56px; }
.elementor-lightbox .elementor-swiper-button:hover { opacity: 1; }
.elementor-lightbox.dialog-type-lightbox .elementor-swiper-button:focus-visible, .elementor-lightbox.dialog-type-lightbox .dialog-lightbox-close-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }