elements are flex items too,
and were shrinking to fit their text content instead of filling the
column — this is what caused each card/image to be a different width */
#mw-team .layout__region > section, #mw-team-de .layout__region > section {
width: 100%;
min-width: 0;
}
#mw-team .layout__region--content, #mw-team-de .layout__region--content {
min-width: 0;
}
#mw-team .layout__region--content > section,
#mw-team-de .layout__region--content > section{
width: 100%;
min-width: 0;
}
/* ===== Each team member becomes a card ===== */
#mw-team .field--name-body, #mw-team-de .field--name-body {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
min-width: 0;
}
#mw-team .field--name-body:hover, #mw-team-de .field--name-body:hover {
transform: translateY(-8px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}
/* Image wrapper (the holding the ![]()
) */
#mw-team .field--name-body p:first-child,
#mw-team-de .field--name-body p:first-child {
margin: 0;
overflow: hidden;
line-height: 0;
}
#mw-team .field--name-body img, #mw-team-de .field--name-body img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
#mw-team .field--name-body:hover img, #mw-team-de .field--name-body:hover img {
transform: scale(1.06);
}
/* Name */
#mw-team .field--name-body h3, #mw-team-de .field--name-body h3 {
font-size: 20px;
font-weight: 700;
color: #2b2b2b;
margin: 20px 20px 4px;
text-align: center;
}
/* Role label */
#mw-team .field--name-body p:last-child, #mw-team-de .field--name-body p:last-child {
margin: 0 20px 24px;
padding-top: 4px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #EB8D34;
text-align: center;
}
/* ===== Responsive: stack to single column on small screens ===== */
@media (max-width: 760px) {
#mw-team .layout__region, #mw-team-de .layout__region {
flex: 1 1 100%;
}
/*
#mw-team .field--name-body img {
height: 320px;
}*/
}
.form-type-search .button {
/* font-size: initial !important;*/
height: 32px;
}
#contact-us-forms .layout__region--first {
background: var(--mw-gray-5);
}
#contact-us-forms .layout__region--first .layout__region--content,
#contact-us-forms .layout__region--first .layout__region--content:hover
{
box-shadow: none;
background: none;
border: none;
color: var(--mw-white);
}
#contact-us-forms .layout__region--second, #contact-us-forms .layout__region--third {
background: var(--mw-white);
}
/*
.page-node-41 #contact-details-on-contact {
border-top: 1px solid var(--mw-gray-5);
border-bottom: 1px solid var(--mw-gray-5);
}
*/
#contact-details-on-contact h3 {
margin-top: 2em;
}
#block-mwconstruction3-mwlocationmap {
margin-bottom: -25px;
}
img.linkedin-img {
width: 36px !important;
}
/* RETRO TEAM IMAGES */
#mw-team img:not(.linkedin-img), #mw-team-de img:not(.linkedin-img) {
filter: grayscale(100%);
}
#mw-team img:not(.linkedin-img):hover, #mw-team-de img:not(.linkedin-img):hover {
filter:
grayscale(60%)
sepia(25%)
contrast(90%)
brightness(105%);
}
#mw-team h3, #mw-team-de h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#mw-team h3 .linkedin-img, #mw-team-de h3 .linkedin-img {
width: 36px;
height: 36px;
display: block;
}
.mw-team-wrapper .container {
width: 100%;
padding-left: 0;
padding-right: 0;
}
p.position-contact {
margin: 0 20px 24px;
padding-top: 4px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
p.position-contact a {
font-weight: 600;
text-decoration: none;
color: var(--mw-gray-6);
}
/* Fix: these inner Drupal wrapper elements are flex items too,
and were shrinking to fit their text content instead of filling the
column — this is what caused each card/image to be a different width */
#mw-team-de .layout__region > section {
width: 100%;
min-width: 0;
}
#mw-team-de .layout__region--content {
min-width: 0;
}
#mw-team-de .layout__region--content > section {
width: 100%;
min-width: 0;
}
/* ===== Each team member becomes a card ===== */
#mw-team-de .field--name-body {
display: flex;
flex-direction: column;
background: #fff;
/*border-radius: 16px;*/
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
min-width: 0;
}
#mw-team-de .field--name-body:hover {
transform: translateY(-8px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}
/* Image wrapper (the holding the ![]()
) */
#mw-team-de .field--name-body p:first-child {
margin: 0;
overflow: hidden;
line-height: 0;
}
#mw-team-de .field--name-body img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
#mw-team-de .field--name-body:hover img {
transform: scale(1.06);
}
/* Name */
#mw-team-de .field--name-body h3
{
font-size: 20px;
font-weight: 700;
color: #2b2b2b;
margin: 20px 20px 4px;
text-align: center;
}
/* Role label */
#mw-team-de p.position {
margin: 0 20px 24px;
padding-top: 4px;
font-size: 14px;
font-weight: 600 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #EB8D34;
text-align: center;
}
/* ===== Responsive: stack to single column on small screens ===== */
@media (max-width: 760px) {
#mw-team-de .layout__region {
flex: 1 1 100%;
}
/*
#mw-team-de .field--name-body img {
height: 320px;
}*/
}
.mw-team-wrapper .container {
width: 100%;
padding-left: 0;
padding-right: 0;
}
p.position-contact {
margin: 0 20px 24px;
padding-top: 4px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
p.position-contact a {
font-weight: 600;
text-decoration: none;
}
#mw-team-de {
padding: 30px 0px 70px;
box-sizing: border-box;
flex-wrap: wrap;
align-items: stretch;
display: flex; /* ADD — this is what actually activates the flex properties below */
gap: 0; /* CHANGE from "30px 24px" */
row-gap: 30px; /* ADD — keeps vertical spacing when cards wrap on mobile */
column-gap: 0; /* ADD — horizontal spacing already comes from .col-lg-3 padding */
}
#mw-team-de > [class*="col-"] {
display: flex;
}
#mw-team-de > [class*="col-"] > .block-layout-builder.block-inline-blockbasic {
display: flex;
width: 100%;
}
#mw-team-de .layout--onecol {
display: flex;
width: 100%;
}
#mw-team-de .field--name-body {
height: 100%;
}
#mw-team-de .col-md-3, #mw-team-de .col-lg-3 {
padding-left: 15px;
padding-right: 15px;
}
/*#### EOF July 2026 CSS improvements ####*/
/*########################################*/
/*############### Imported from font awesome megamenu only item ###############*/
.tb-megamenu-button .fa.fa-reorder {
position: relative;
display: inline-block;
width: 22px;
height: 16px;
vertical-align: middle;
font-size: 0;
}
.tb-megamenu-button .fa.fa-reorder::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 2px;
background: currentColor;
box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}
/*############### EOF Imported from font awesome megamenu only item ###############*/
p, ul {
/*font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* fluid: ~16px mobile, 18px desktop */
line-height: 1.65;
font-weight: 400 !important; /* a bit heavier than 300 for better legibility at small sizes */
margin: 0 0 1.1em;
text-wrap: pretty; /* reduces awkward single-word last lines, in supporting browsers */
}
p:last-child {
margin-bottom: 0;
}
@media (max-width: 480px) {
p {
line-height: 1.55;
}
}
:root {
--heading-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
--heading-color: #eb8d34; /* default for headings on light backgrounds */
--heading-accent: #eb8d34; /* your existing orange accent color */
}
h1 {
position: relative; /* <-- this is what's missing */
padding-bottom: 10px; /* gives the underline some breathing room below the text */
}
h1::after {
content: "";
position: absolute;
left: 0;
bottom: 6px;
width: 48px;
height: 3px;
border-radius: 2px;
background: var(--heading-color);
}
h1, h2, h3 {
font-family: var(--heading-font);
color: var(--heading-color);
line-height: 1.2;
margin: 0 0 0.2em;
}
h1 {
font-size: clamp(2.2rem, 1.76rem + 2.2vw, 3.575rem); /* ~35px on mobile to 57px on desktop */
font-weight: 800;
line-height: 1.1;
}
h2 {
font-size: clamp(1.65rem, 1.375rem + 1.375vw, 2.475rem); /* ~26px to 40px */
font-weight: 700;
}
h3 {
font-size: clamp(1.58rem, 1.39rem + 0.95vw, 2.21rem); /* ~25px to 35px */
font-weight: 700;
}
/* For headings placed over photos or dark/colored backgrounds,
e.g. the netflix-banner overlay and the slider captions you already have in white */
.heading--on-dark {
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* For the orange section titles like "Budynki modułowe dla Twojej branży" */
.heading--accent {
color: var(--heading-accent);
}
/* ===================================================================
REALIZACJA PAGE — BLOCK RESHAPING FIXES
Target: gama.mwconstruction.group /pl/realizacje/salon-audi-...
Scope : (1) #realizacja-kategorie-i-kontent .layout__region--first
(2) #realizacja-main-text (SEO body text under the webforms)
No copy changes — layout/spacing/shadow only.
Drop this at the end of pawilony-custom-style.css (or as a new
Asset Injector CSS snippet) so it loads after the base theme file.
Uses the site's existing tokens (--radius-lg, --mw-orange-3, etc.)
and mirrors the rounded-corner / soft-shadow card language already
used on the webform blocks (#contact-us-forms .layout__region).
=================================================================== */
/* ===================================================================
AREA 1 — Property / spec list with icons
#realizacja-kategorie-i-kontent .layout__region--first
=================================================================== */
/* The theme forces align-items:center on this flex row, which is why
the two columns end up different heights — switch back to stretch
so .layout__region--first matches .layout__region--second exactly */
#realizacja-kategorie-i-kontent {
align-items: stretch;
}
/* Whole list becomes one card, matching the webform card style —
one property per row (single column) instead of the 2-up grid,
and the extra rows now share the leftover height evenly so the
card's bottom edge lines up with the webform column's bottom edge */
#realizacja-kategorie-i-kontent > .layout__region--first {
display: grid;
grid-template-columns: 1fr;
align-content: space-between;
gap: 12px;
height: 100%;
padding: 35px 0;
/*
background: var(--mw-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px;
*/
}
.page-node-type-nowe_projekty #realizacja-kategorie-i-kontent > .layout__region--first {
padding: 22px 0;
}
/* Each property becomes its own tidy row/chip instead of a bare line */
#realizacja-kategorie-i-kontent .layout__region--first section.bi {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin: 0;
background: var(--mw-gray-text);
border-radius: var(--radius-md);
transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
#realizacja-kategorie-i-kontent .layout__region--first section.bi:hover {
background: var(--mw-white);
box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 18px;
transform: translateY(-2px);
}
/* Reset the old absolutely-nudged icon and turn it into a round badge */
#realizacja-kategorie-i-kontent .layout__region--first section.bi::before {
position: static;
top: auto;
left: auto;
margin-top: 0;
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--mw-orange-3);
background: rgba(235, 141, 52, 0.12);
border-radius: var(--radius-pill);
}
/* Label stacked above value instead of the old float/inline run-on */
#realizacja-kategorie-i-kontent .layout__region--first .field {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#realizacja-kategorie-i-kontent .layout__region--first .field--label {
float: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mw-gray-5);
}
#realizacja-kategorie-i-kontent .layout__region--first .field--item,
#realizacja-kategorie-i-kontent .layout__region--first .field--items {
padding-left: 0;
font-size: 17px;
font-weight: 600;
color: var(--mw-gray-6);
word-break: break-word;
}
@media screen and (max-width: 600px) {
#realizacja-kategorie-i-kontent .layout__region--first {
padding: 20px;
}
}
/* ===================================================================
AREA 2 — Body text under the webforms
#realizacja-main-text
=================================================================== */
/*
#realizacja-main-text .layout__region--content {
display: flex;
justify-content: center;
}
*/
#realizacja-main-text > .field--name-body,
#realizacja-main-text .layout__region--content {
width: 100%;
/*
max-width: 860px;
*/
background: var(--mw-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
padding: 44px 48px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px;
margin-bottom: 24px;
}
@media (max-width: 600px){
#realizacja-main-text > .field--name-body,
#realizacja-main-text .layout__region--content{
padding: 44px 0;
}
}
#realizacja-main-text .field--name-body h2 {
font-size: 28px;
font-weight: 800;
color: var(--mw-orange-3);
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#realizacja-main-text .field--name-body h3 {
font-size: 20px;
font-weight: 700;
color: var(--mw-gray-6);
margin: 32px 0 12px;
padding-left: 14px;
border-left: 3px solid var(--mw-orange-3);
}
/* subtitle right under the main h2 shouldn't get the full section gap */
#realizacja-main-text .field--name-body h2 + h3 {
margin-top: 0;
}
#realizacja-main-text .field--name-body p {
margin: 0 0 14px;
line-height: 1.7;
color: var(--mw-gray-6);
}
#realizacja-main-text .field--name-body p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 600px) {
#realizacja-main-text .field--name-body {
padding: 28px 22px;
}
#realizacja-main-text .field--name-body h2 {
font-size: 24px;
}
}
/* ============================================================
Sprzedaż grid — modern ecommerce product tile
Scoped to .view-id-sprzedaz so it never touches other
twocol_section layouts elsewhere on the site.
.views-field-field-price-m2 is intentionally NOT modified.
============================================================ */
/* 1. Breathing room between cards/rows (replaces the old 4px/16px rule) */
.view-id-sprzedaz .views-row .layout--twocol-section {
gap: 28px;
}
.view-id-sprzedaz .views-row {
margin-bottom: 28px;
}
/* 2. Card shell */
.view-id-sprzedaz .views-row .layout__region--first,
.view-id-sprzedaz .views-row .layout__region--second {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 0;
margin-bottom: 0;
background: var(--mw-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(20, 20, 20, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.view-id-sprzedaz .views-row .layout__region--first:hover,
.view-id-sprzedaz .views-row .layout__region--second:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(20, 20, 20, 0.14);
border-color: rgba(235, 141, 52, 0.35);
}
/* 3. Image — uniform ratio so mismatched source images still line up.
Scoped to the actual image field only (not the empty
new-projects-image placeholder, which shares the same
.reaization-grid-element class but has no content). */
.view-id-sprzedaz .views-row .views-field-field-realization- .reaization-grid-element {
aspect-ratio: 16 / 9;
}
.view-id-sprzedaz .views-row .views-field-field-realization- .reaization-grid-element img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder field is unused across this whole view — remove it from flow */
.view-id-sprzedaz .views-row .views-field-field-new-projects-image {
display: none;
}
/* 4. Title — fixes the h3/h2 selector mismatch, keeps it neutral so
the orange price badge stays the one accent color on the tile */
.view-id-sprzedaz .views-row .views-field-field-secondary-title {
padding: 18px 20px 0;
}
.view-id-sprzedaz .views-row .views-field-field-secondary-title h2 {
margin: 0;
padding: 0;
font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--mw-gray-6);
}
/* 5. Subtitle (funkcja) */
.view-id-sprzedaz .views-row .views-field-field-funkcja {
padding: 4px 20px 0;
}
.view-id-sprzedaz .views-row .views-field-field-funkcja .field-content {
font-size: 14px;
color: var(--mw-gray-5);
}
/* 6. Meta row — small caps, separated with a hairline like a card footer */
.view-id-sprzedaz .views-row .views-field-field-number-of-realization {
margin: 12px 20px 0;
padding: 12px 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-size: 12px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--mw-gray-7);
}
/* 7. CTA — real pill button instead of a plain text link,
pinned to the bottom so short/long titles still align across a row */
.view-id-sprzedaz .views-row .views-field-view-node {
margin-top: auto;
padding: 16px 20px 20px;
}
.view-id-sprzedaz .views-row .views-field-view-node a {
display: block;
text-align: center;
background-color: var(--mw-orange-3);
color: var(--mw-white);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
padding: 11px 18px;
border-radius: var(--radius-pill);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.view-id-sprzedaz .views-row .views-field-view-node a:hover,
.view-id-sprzedaz .views-row .views-field-view-node a:focus {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 141, 52, 0.35);
filter: brightness(1.05);
text-decoration: none;
color: var(--mw-white);
}
/* 8. Optional — makes the whole card clickable, not just the image/button.
Remove this block if you'd rather keep click targets separate. */
.view-id-sprzedaz .views-row .views-field-view-node a {
position: relative;
z-index: 1;
}
.view-id-sprzedaz .views-row .views-field-view-node a::after {
content: "";
position: absolute;
inset: 0;
}
/* ============================================================
Realizacja / Nowe Projekty — title block
h1 = specific project name (headline, now first in DOM)
h2 = generic category (kicker, shown above the headline visually)
Scoped to #realizacja-titles, shared by both content types.
============================================================ */
#realizacja-titles {
padding-bottom: 24px;
margin-bottom: 32px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#realizacja-titles .layout__region--content {
display: flex;
flex-direction: column;
}
/* Kicker (category) block — visually first via order, though it's the h2 */
#realizacja-titles .block-field-blocknoderealizationfield-secondary-title,
#realizacja-titles .block-field-blocknodenowe-projektyfield-secondary-title {
order: 1;
}
#realizacja-titles h2 {
margin: 0 0 8px;
font-family: var(--heading-font);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mw-orange-3);
}
/* Headline block (specific project name) — dominant, now the true h1 */
#realizacja-titles .block-field-blocknoderealizationtitle,
#realizacja-titles .block-field-blocknodenowe-projektytitle {
order: 2;
}
#realizacja-titles h1 {
position: static;
padding-bottom: 0;
margin: 0;
font-family: var(--heading-font);
font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
color: var(--mw-gray-6);
}
#realizacja-titles h1::after {
content: "";
position: static;
display: block;
width: 56px;
height: 3px;
margin-top: 14px;
border-radius: 2px;
background: var(--mw-orange-3);
}
@media (max-width: 600px) {
#realizacja-titles h2 { font-size: 12px; }
#realizacja-titles { padding-bottom: 18px; margin-bottom: 24px; }
}
/* ============================================================
#typy-obiektow-modulowych-v5 — modular object type grid
Final version: fixed-height caption panel (identical on every
card), title always visible, description + CTA auto-fade-in
on load, button always pinned in place regardless of text length.
============================================================ */
/* 1. Grid */
#typy-obiektow-modulowych-v5 .field--name-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
max-width: 1440px;
margin: 2rem auto;
}
#typy-obiektow-modulowych-v5 .box-el {
display: contents;
}
@media (max-width: 380px) {
#typy-obiektow-modulowych-v5 .field--name-body {
grid-template-columns: 1fr;
}
}
/* 2. Card shell */
#typy-obiektow-modulowych-v5 .box-1,
#typy-obiektow-modulowych-v5 .box-3 {
float: none;
width: 100%;
}
#typy-obiektow-modulowych-v5 .box {
height: 450px;
margin: 0;
background-size: 52%;
background-position: center 18%;
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#typy-obiektow-modulowych-v5 .box:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(20, 20, 20, 0.14);
border-color: rgba(235, 141, 52, 0.35);
}
/* 3. Caption panel — flex column so the button is pinned and never
pushed out, regardless of how long the title or description are */
#typy-obiektow-modulowych-v5 .box-inner {
position: static;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#typy-obiektow-modulowych-v5 .the-content-box {
position: static;
width: 100%;
height: 220px;
overflow: hidden;
background: var(--mw-gray-4);
color: var(--mw-white);
padding: 18px 20px;
transform: none;
}
#typy-obiektow-modulowych-v5 .content-box-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
#typy-obiektow-modulowych-v5 .the-content-box h3 {
flex: 0 0 auto;
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
color: var(--mw-white);
}
/* Description — flexible: fills whatever space is left between the
title and the button, clipping its own overflow rather than the
button's space. Line-clamp is a bonus for the common case. */
#typy-obiektow-modulowych-v5 .the-content-box p {
flex: 1 1 auto;
min-height: 0;
margin: 0 0 14px;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
color: var(--mw-gray-text);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 0;
transform: translateY(10px);
animation: content-in 0.5s ease 0.4s both;
}
/* CTA — fixed size, always the last flex item, never shrinks */
#typy-obiektow-modulowych-v5 .the-content-box a.button {
flex: 0 0 auto;
align-self: flex-start;
display: inline-block;
padding: 8px 16px;
transition: filter 0.2s ease;
opacity: 0;
transform: translateY(10px);
animation: content-in 0.5s ease 0.55s both;
}
#typy-obiektow-modulowych-v5 .the-content-box a.button:hover {
filter: brightness(1.08);
}
/* 4. Entrance animations */
@keyframes tile-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes content-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#typy-obiektow-modulowych-v5 .box {
animation: tile-in 0.6s ease both;
}
#typy-obiektow-modulowych-v5 .box:nth-child(1) { animation-delay: 0s; }
#typy-obiektow-modulowych-v5 .box:nth-child(2) { animation-delay: 0.12s; }
#typy-obiektow-modulowych-v5 .box:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
#typy-obiektow-modulowych-v5 .box,
#typy-obiektow-modulowych-v5 .the-content-box p,
#typy-obiektow-modulowych-v5 .the-content-box a.button {
animation: none;
opacity: 1;
transform: none;
}
}
#typy-obiektow-modulowych-v5 .box {
background-repeat: no-repeat;
}
/* ============================================================
#oferta-grid — modular building offer grid
Reverted from a flattened single grid (unreliable due to
nested display:contents) back to the site's native 3-row
two-column flex layout, with consistent spacing added.
============================================================ */
/* 1. Spacing between and within the 3 rows — no flattening this time */
#oferta-grid .layout__region--content > section {
margin-bottom: 28px;
}
#oferta-grid .layout__region--content > section:last-child {
margin-bottom: 0;
}
#oferta-grid .layout--twocol-section {
display: flex;
flex-wrap: wrap;
gap: 28px;
}
#oferta-grid .layout__region--first,
#oferta-grid .layout__region--second {
flex: 1 1 calc(50% - 14px);
}
@media (max-width: 720px) {
#oferta-grid .layout__region--first,
#oferta-grid .layout__region--second {
flex: 1 1 100%;
}
}
/* 2. Card shell */
#oferta-grid .layout__region--first,
#oferta-grid .layout__region--second {
position: relative;
display: flex;
flex-direction: column;
background: var(--mw-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#oferta-grid .layout__region--first:hover,
#oferta-grid .layout__region--second:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(20, 20, 20, 0.14);
border-color: rgba(235, 141, 52, 0.35);
}
#oferta-grid .layout__region--first > section,
#oferta-grid .layout__region--second > section {
display: contents;
}
#oferta-grid .field--type-text-long {
display: flex;
flex-direction: column;
height: 100%;
}
/* 3. Icon zone */
#oferta-grid [class*="oferta-"] {
flex: 0 0 auto;
width: auto;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 28px 24px 12px;
}
#oferta-grid [class*="oferta-"] img {
width: 58%;
height: auto;
display: block;
}
/* 4. Dark caption panel */
#oferta-grid .field--type-text-long > h2 {
flex: 0 0 auto;
margin: 0;
padding: 22px 24px 8px;
background: var(--mw-gray-4);
color: var(--mw-white);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
#oferta-grid .field--type-text-long > p:first-of-type {
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 0 24px 14px;
background: var(--mw-gray-4);
color: var(--mw-gray-text);
font-size: 14px;
line-height: 1.5;
}
#oferta-grid .field--type-text-long > p:last-of-type {
flex: 0 0 auto;
margin: 0;
padding: 0 24px 24px;
background: var(--mw-gray-4);
}
/* 5. CTA */
#oferta-grid .field--type-text-long > p:last-of-type a.btn-primary {
display: inline-block;
background-color: var(--mw-orange-3);
border-color: var(--mw-orange-3);
color: var(--mw-white);
border-radius: var(--radius-pill);
padding: 11px 22px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#oferta-grid .field--type-text-long > p:last-of-type a.btn-primary:hover {
background-color: var(--mw-orange-3);
border-color: var(--mw-orange-3);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 141, 52, 0.35);
filter: brightness(1.05);
text-decoration: none;
}
/* 6. Card entrance animation */
@keyframes tile-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
#oferta-grid .layout__region--first,
#oferta-grid .layout__region--second {
animation: tile-in 0.6s ease both;
}
#oferta-grid .layout__region--first { animation-delay: 0s; }
#oferta-grid .layout__region--second { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
#oferta-grid .layout__region--first,
#oferta-grid .layout__region--second {
animation: none;
}
}
#oferta-grid {
margin: 50px 0;
}
/* Disable the old underline so only one remains */
h1::after {
content: none;
display: none;
}
h1 .mwhi-text {
position: relative;
display: inline-block;
}
h1 .mwhi-text::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 64px;
height: 4px;
border-radius: 2px;
background: #eb8d34; /* solid orange instead of gradient */
}
h1 .mwhi-icon {
color: var(--heading-color);
}
/* ============================================================
#plansze-isometric — process/features grid (6 cards)
Base .box/.box-inner/.the-content-box styling was removed
site-wide in an earlier cleanup round, so this rebuilds the
whole section rather than layering on top of anything.
Per-card background-color stays on the inline style — only
layout/spacing is touched here.
============================================================ */
/* 1. Grid — deterministic column count, not auto-fit */
#plansze-isometric .field--name-body {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
max-width: 1440px;
margin: 2rem auto;
}
@media (max-width: 980px) {
#plansze-isometric .field--name-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
#plansze-isometric .field--name-body {
grid-template-columns: 1fr;
}
}
/* 2. Card shell — background-image lives on .box itself via inline
style, so padding-top reserves the image area at the top */
#plansze-isometric .box {
height: auto;
margin: 0;
display: flex;
flex-direction: column;
background-size: contain;
background-repeat: no-repeat;
background-position: center 24px;
padding-top: 230px;
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#plansze-isometric .box:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(20, 20, 20, 0.14);
border-color: rgba(235, 141, 52, 0.35);
}
/* 3. Panel — always visible, no hover-gated reveal */
#plansze-isometric .box-inner {
position: static;
height: auto;
width: 100%;
overflow: visible;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
#plansze-isometric .the-content-box {
position: static;
width: 100%;
height: auto;
transform: none;
transition: none;
flex: 1 1 auto;
}
#plansze-isometric .the-content-box:hover {
opacity: 1;
}
#plansze-isometric .content-box-inner {
padding: 20px 22px 24px;
}
#plansze-isometric .the-content-box h3 {
margin: 0 0 8px;
padding-top: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
#plansze-isometric .the-content-box p {
margin: 0;
font-size: 14px;
line-height: 1.6;
font-weight: 400;
letter-spacing: normal;
opacity: 1;
transform: none;
}
/* 4. Entrance animation, staggered by column position */
@keyframes tile-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
#plansze-isometric .box {
animation: tile-in 0.6s ease both;
}
#plansze-isometric .box:nth-child(3n+1) { animation-delay: 0s; }
#plansze-isometric .box:nth-child(3n+2) { animation-delay: 0.1s; }
#plansze-isometric .box:nth-child(3n+3) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
#plansze-isometric .box {
animation: none;
}
}
#plansze-isometric h3 {font-size: 24px; color: var(--mw-white); padding-top: 1em; font-weight: 900;}
#plansze-isometric .box-3.box[style*="Plansza-5_044.jpg"] .content-box-inner p,
#plansze-isometric .box-3.box[style*="Plansza-4_099.jpg"] .content-box-inner p{
color: #ffffff;
}
/* ============================================================
#konstrukcja-div / #sciany-div / #elewacje-div / #wykonczenie-div
Photo-background hero bands → card grid.
No shared wrapper ID exists, so :has() scopes the shared
parent precisely (only matches the one region containing
#konstrukcja-div as a direct child).
============================================================ */
/* Technologia images bckg */
#konstrukcja-div {background-image: url("../images/technologia-001.jpeg"); min-height: 400px; padding: 8%; margin-bottom: 40px;}
#sciany-div {background-image: url("../images/photo-sciany-dach-004.jpeg"); min-height: 400px; padding: 8%; margin-bottom: 40px; background-size: cover;}
#elewacje-div {background-image: url("../images/wizka-elewacje-002.jpeg"); min-height: 400px; padding: 8%; margin-bottom: 40px; background-size: cover; background-position: bottom;}
#wykonczenie-div {background-image: url("../images/photo-wykonczenie-wnetrz-004.jpeg"); min-height: 400px; padding: 8%; margin-bottom: 40px; background-size: cover; background-position: bottom;}
#produkcja-div {background-image: url("../images/photo-wykonczenie-wnetrz-004.jpeg"); min-height: 400px; padding: 8%; margin-bottom: 40px; background-size: cover; background-position: bottom;}
/* 1. Turn the shared parent into a grid; the intro block (no ID,
first child) spans the full width instead of becoming a card */
.layout__region--content:has(> #konstrukcja-div) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 1440px;
margin: 2rem auto;
}
.layout__region--content:has(> #konstrukcja-div) > section:not(#konstrukcja-div):not(#sciany-div):not(#elewacje-div):not(#wykonczenie-div) {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
.layout__region--content:has(> #konstrukcja-div) {
grid-template-columns: 1fr;
}
}
/* 2. Card shell — background photo already set via existing CSS
(background-image/background-size:cover), just adding the
card treatment on top */
#konstrukcja-div,
#sciany-div,
#elewacje-div,
#wykonczenie-div {
min-height: 340px;
margin-bottom: 0;
padding: 0;
display: flex;
align-items: flex-end;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#konstrukcja-div:hover,
#sciany-div:hover,
#elewacje-div:hover,
#wykonczenie-div:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(20, 20, 20, 0.18);
}
/* 3. Text scrim — gradient instead of the old flat 40%-opacity
overlay, so the photo stays visible rather than being
uniformly darkened */
#konstrukcja-div .layout,
#sciany-div .layout,
#elewacje-div .layout,
#wykonczenie-div .layout {
width: 100%;
background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.55) 45%, rgba(20, 20, 20, 0.88) 100%);
padding: 32px 26px 26px;
}
#konstrukcja-div h2,
#sciany-div h2,
#elewacje-div h2,
#wykonczenie-div h2 {
color: var(--mw-white);
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
}
#konstrukcja-div p,
#sciany-div p,
#elewacje-div p,
#wykonczenie-div p {
font-size: 15px;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.92);
line-height: 1.5;
margin: 0 0 16px;
}
/* 4. CTA — pill button, replacing the default gray/square .btn-primary */
#konstrukcja-div a.btn-primary,
#sciany-div a.btn-primary,
#elewacje-div a.btn-primary,
#wykonczenie-div a.btn-primary {
display: inline-block;
background-color: var(--mw-orange-3);
border-color: var(--mw-orange-3);
color: var(--mw-white);
border-radius: var(--radius-pill);
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#konstrukcja-div a.btn-primary:hover,
#sciany-div a.btn-primary:hover,
#elewacje-div a.btn-primary:hover,
#wykonczenie-div a.btn-primary:hover {
background-color: var(--mw-orange-3);
border-color: var(--mw-orange-3);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 141, 52, 0.35);
filter: brightness(1.05);
text-decoration: none;
}
.catalog-download {
max-width: 900px;
margin: 2rem auto;
padding: 0 20px;
}
/* Download card — always visible, mobile and desktop */
.catalog-download__hero {
text-align: center;
background: var(--mw-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-lg);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
padding: 40px 28px;
margin-bottom: 28px;
}
.catalog-download__icon {
width: 48px;
height: 48px;
color: var(--mw-orange-3);
}
.catalog-download__title {
font-size: 26px;
font-weight: 800;
color: var(--mw-gray-6);
margin: 16px 0 8px;
}
.catalog-download__desc {
font-size: 15px;
color: var(--mw-gray-5);
max-width: 480px;
margin: 0 auto 24px;
line-height: 1.5;
}
.catalog-download__button {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--mw-orange-3);
color: var(--mw-white);
padding: 13px 28px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.catalog-download__button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 141, 52, 0.35);
filter: brightness(1.05);
text-decoration: none;
color: var(--mw-white);
}
/* Preview panel — responsive height via aspect-ratio instead of a
fixed 1000px, capped so it never dominates a tall viewport */
.catalog-download__preview {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.06);
aspect-ratio: 3 / 4;
max-height: 80vh;
}
.catalog-download__preview iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
/* Mobile: skip the embedded viewer entirely, keep the download card */
@media (max-width: 720px) {
.catalog-download__preview {
display: none;
}
}
/* ============================================================
#contact-details-on-contact — dark premium contact cards
Requires the small markup change above (icons wrapped inside
each link). Bootstrap's .row/.col grid stays untouched.
============================================================ */
#contact-details-on-contact {
display: flex;
align-items: stretch;
gap: 28px;
}
/* Card shell — dark panel, matching the modular-objects/isometric cards */
#contact-details-on-contact .field--name-body {
height: 100%;
background: var(--mw-gray-4);
border-radius: var(--radius-lg);
box-shadow: 0 2px 10px rgba(20, 20, 20, 0.1);
padding: 36px 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#contact-details-on-contact .field--name-body:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(20, 20, 20, 0.16);
}
/* Department name — orange pill label instead of a plain heading */
#contact-details-on-contact h3 {
display: inline-block;
background: var(--mw-orange-3);
color: var(--mw-white);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: var(--radius-pill);
margin: 0 0 22px;
}
#contact-details-on-contact p {
margin: 0;
}
#contact-details-on-contact p + p {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Phone / email links — icon + number as one inline unit, so the
existing
-based line stacking between them still works untouched */
#contact-details-on-contact a[href^="tel:"],
#contact-details-on-contact a[href^="mailto:"] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 15px;
color: var(--mw-white);
transition: color 0.2s ease;
}
#contact-details-on-contact a[href^="mailto:"] {
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
}
#contact-details-on-contact a[href^="tel:"]:hover,
#contact-details-on-contact a[href^="mailto:"]:hover {
color: var(--mw-orange-3);
}
#contact-details-on-contact a[href^="tel:"] i,
#contact-details-on-contact a[href^="mailto:"] i {
color: var(--mw-orange-3);
font-size: 14px;
}
/* Address block — icon floats beside the wrapped lines */
#contact-details-on-contact p:not(:has(a)) {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
}
#contact-details-on-contact p:not(:has(a)) i {
margin-top: 2px;
color: var(--mw-orange-3);
font-size: 15px;
}
#contact-details-on-contact i {
display: inline-flex;
justify-content: center;
width: 18px;
flex: 0 0 auto;
}
#contact-details-on-contact {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 28px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Let the two Bootstrap columns share space flexibly instead of
fighting the flex `gap` with a fixed 50% width */
#contact-details-on-contact > [class*="col-"] {
flex: 1 1 0;
max-width: none;
width: auto;
}
/* Stack the two department cards on mobile instead of side-by-side */
@media (max-width: 767px) {
#contact-details-on-contact {
flex-direction: column;
align-items: center;
}
#contact-details-on-contact > [class*="col-"] {
flex: 1 1 auto;
width: 100%;
max-width: 480px;
}
}
/* Center the address/location paragraph */
#contact-details-on-contact p:not(:has(a)) {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
gap: 10px;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
text-align: center;
}
#contact-details-on-contact a:hover,
#contact-details-on-contact a:focus {
text-decoration: none !important
}
/* ============================================================
#Klaro cookie banner
============================================================ */
.klaro_toggle_dialog {
right:unset;
left: 11px;
bottom: 50px;
}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
background-color: #eb8d34 !important;
opacity: 1 !important;
}
.klaro .cookie-modal .cm-list-input.only-required+.cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required+.cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required+.cm-list-label .slider {
background-color: var(--klaro-slider-bg)
}
.klaro_toggle_dialog {
background-image: none;
background-color: #eb8d34;
-webkit-mask-image: url(/modules/contrib/klaro/icons/privacy.svg);
mask-image: url(/modules/contrib/klaro/icons/privacy.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.klaro .cookie-modal .cm-btn,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-decline,
.klaro .context-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro.learn-more-as-button .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more {
background-color: #eb8d34;
border-color: #eb8d34;
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .context-notice .cm-btn:hover,
.klaro .context-notice .cm-btn.cm-btn-info:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-decline:hover,
.klaro .context-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro.learn-more-as-button .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more:hover {
color: #eb8d34 !important;
border-color: #eb8d34 !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) {
bottom: 40px;
}
.klaro {
outline: var(--klaro-dialog-focus-outline);
box-shadow: var(--klaro-dialog-focus-box-shadow), 0 0 0 10px #fff;
}
#oferta-full-width {
/*background-image: url("https://www.modernerverkaufspavillon.de/wp-content/uploads/2021/10/Modulhaeuser-mit-weisser-Fassade-2.jpg");*/
background-color: var(--mw-gray-3);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 30px 30px;
margin-bottom: 50px;
}
#oferta-full-width .layout1040-block {margin-top:0;}