, so we target it there. */ .single-post article.category-mood-board > .wd-single-post-header, .single-post article.category-articole > .wd-single-post-header, .single-post article.category-gama-noastra > .wd-single-post-header, .single-post article.category-arborea > .wd-single-post-header, .single-post article.category-bio-water-based-coatings > .wd-single-post-header, .single-post article.category-efecte-speciale > .wd-single-post-header, .single-post article.category-iridea > .wd-single-post-header, .single-post article.category-parkea > .wd-single-post-header, .single-post article.category-prometea-fire-retardant > .wd-single-post-header, .single-post article.category-s-matt-superpower-coatings > .wd-single-post-header, .single-post article.category-urban-matter > .wd-single-post-header, .single-post article.category-vidrea-glass-paints > .wd-single-post-header { display: none !important; } /* Articole posts also hide the BLOG breadcrumb bar (.wd-page-title-bg.wd-fill). The shared Articole Elementor wrapper renders its own eyebrow + title + separator, so the gray BLOG bar above is redundant noise. Body has `category-articole` only on archives + a few WP versions on singles so we rely on a stronger guard via the `.single-post` body class plus the archive class. The archive listing (`/category/articole/`) keeps its bar. */ .single-post.category-articole .wd-page-title-bg.wd-fill, body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-articole) { display: none !important; } /* Our Ranges posts use the same wrapper-owned layout as Mood Board / Articole, so hide the BLOG breadcrumb bar on every Gama noastră post (any depth of sub-category). The Elementor wrapper renders its own eyebrow + title + separator chain. */ .single-post.category-gama-noastra .wd-page-title-bg.wd-fill, .single-post.category-arborea .wd-page-title-bg.wd-fill, .single-post.category-bio-water-based-coatings .wd-page-title-bg.wd-fill, .single-post.category-efecte-speciale .wd-page-title-bg.wd-fill, .single-post.category-iridea .wd-page-title-bg.wd-fill, .single-post.category-parkea .wd-page-title-bg.wd-fill, .single-post.category-prometea-fire-retardant .wd-page-title-bg.wd-fill, .single-post.category-s-matt-superpower-coatings .wd-page-title-bg.wd-fill, .single-post.category-urban-matter .wd-page-title-bg.wd-fill, .single-post.category-vidrea-glass-paints .wd-page-title-bg.wd-fill, body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-gama-noastra), body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-arborea), body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-iridea), body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-parkea), body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-urban-matter), body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-vidrea-glass-paints) { display: none !important; } /* ---------- Articole article body styling ---------- The shared wrapper renders the article body via an Elementor `html` widget marked `.article-body` (using the placeholder __ARTICLE_BODY__ replaced per-post by _build_articole.php). All images are pulled out of the prose and rendered in a uniform block at the bottom — either `.article-single` (1 image, centered) or `.article-gallery` (2+ images, uniform 3-col grid). Body text gets a clean reading layout: left-aligned typography, no inline styles, no justify, no per-post quirks. --------------------------------------------------------------------- */ /* Body prose ------------------------------------------------------------ */ .elementor-widget-html .article-body, .elementor-widget-html.article-body { max-width: 820px; margin: 0 auto; line-height: 1.7; text-align: left; } .elementor-widget-html .article-body p, .elementor-widget-html.article-body p { margin: 0 0 16px; text-align: left; } .elementor-widget-html .article-body h2, .elementor-widget-html.article-body h2 { font-size: 24px; font-weight: 600; margin: 32px 0 12px; text-align: left; } .elementor-widget-html .article-body h3, .elementor-widget-html.article-body h3 { font-size: 20px; font-weight: 600; margin: 24px 0 10px; text-align: left; } .elementor-widget-html .article-body h1, .elementor-widget-html.article-body h1 { /* Defensive: any leftover H1 in the body shouldn't render bigger than the wrapper title; the strip-duplicate-title pass usually removes these but keep typography sane just in case. */ font-size: 26px; font-weight: 600; margin: 32px 0 12px; text-align: left; } .elementor-widget-html .article-body ul, .elementor-widget-html .article-body ol, .elementor-widget-html.article-body ul, .elementor-widget-html.article-body ol { margin: 0 0 16px 24px; padding: 0; } .elementor-widget-html .article-body li { margin: 4px 0; text-align: left; } .elementor-widget-html .article-body a { color: #d6212c; text-decoration: underline; } .elementor-widget-html .article-body a:hover { color: #b51920; } /* Inline CTA (e.g. "Comandă online") ------------------------------------- */ .elementor-widget-html .art-cta { margin: 32px 0; text-align: left; } .elementor-widget-html .art-cta .btn { display: inline-block; padding: 12px 28px; background: #d6212c; color: #fff !important; text-decoration: none; border-radius: 2px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 14px; } .elementor-widget-html .art-cta .btn:hover { background: #b51920; } .elementor-widget-html .art-sep { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 32px 0; } .elementor-widget-html .art-spacer { height: 16px; } /* Single image at the bottom -------------------------------------------- */ .elementor-widget-html .article-single { margin: 40px auto 0; max-width: 800px; text-align: center; } .elementor-widget-html .article-single img { width: 100%; height: auto; display: block; border-radius: 4px; } /* Multi-image gallery at the bottom ------------------------------------- */ .elementor-widget-html .article-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 40px 0 0; } .elementor-widget-html .article-gallery > a { display: block; overflow: hidden; border-radius: 4px; background: #f5f5f5; } .elementor-widget-html .article-gallery > a img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.4s ease; } .elementor-widget-html .article-gallery > a:hover img { transform: scale(1.04); } @media (max-width: 768px) { .elementor-widget-html .article-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* Eyebrow link inside the Articole wrapper template */ .article-eyebrow .elementor-heading-title { font-size: 12px !important; letter-spacing: 0.18em; text-transform: uppercase; color: #999 !important; } .article-eyebrow .elementor-heading-title a { color: inherit; text-decoration: none; } .article-eyebrow .elementor-heading-title a:hover { color: #d6212c !important; } /* ---------- Our Ranges leaf v2: body 2-col image sizing ---------- The leaf wrapper's body section (`.gama-noastra-leaf-body`) is a 70/30 split: 70% text-editor on the left, 30% media slot on the right. The media slot holds one or more single widgets stacked vertically (one per side image; the gallery widget is no longer used). Without a max-height the right column out-runs the text on short bodies (a single tall swatch dwarfs the prose). Cap each image so the two columns stay roughly balanced, and force `object-fit: cover` so landscape / portrait / square swatches all look like uniform tiles. Mobile (<= 768px): the columns stack, so the cap is relaxed. --------------------------------------------------------------------- */ .gama-noastra-leaf-body > .elementor-container { align-items: flex-start; } .gama-noastra-leaf-body .gama-noastra-leaf-body-media { padding-top: 4px; } .gama-noastra-leaf-body .elementor-widget-image .elementor-widget-container { margin: 0 0 12px; } .gama-noastra-leaf-body .elementor-widget-image:last-child .elementor-widget-container { margin-bottom: 0; } .gama-noastra-leaf-body .elementor-widget-image img { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 4px; } @media (max-width: 1024px) { .gama-noastra-leaf-body .elementor-widget-image img { max-height: 280px; } } @media (max-width: 768px) { .gama-noastra-leaf-body > .elementor-container { align-items: stretch; } .gama-noastra-leaf-body .elementor-widget-image img { max-height: 320px; margin: 0 auto; } } /* ========================================================= "Alege culoarea" (Choose The Color) — chrome cleanup Same approach as the existing Gama Noastra / Mood Board categories: strip Woodmart's leftover single-post chrome (date pill, author, comments, sidebar) so the Elementor layout renders edge-to-edge. ========================================================= */ .category-alege-culoarea .post-date, .category-alege-culoarea .post-meta, .category-alege-culoarea .author-info, .category-alege-culoarea .comments-area, .category-alege-culoarea .related-posts, .category-alege-culoarea .post-share-buttons, .category-alege-culoarea .page-title, .category-alege-culoarea .breadcrumbs { display: none !important; } .category-alege-culoarea .single-product-content, .category-alege-culoarea .article-main-content, .category-alege-culoarea .post-content { padding: 0 !important; } .category-alege-culoarea .site-content > .container, .category-alege-culoarea .site-content > .row { max-width: 100% !important; padding: 0 !important; } /* Hide the Woodmart single-post header on every Alege Culoarea post. `.wd-single-post-header` contains: the post categories pill, the H1 title, the post meta (Posted by / On ) AND the featured image. The Elementor template renders its own eyebrow + heading + swatch grid right below, so leaving this header in place creates a duplicate title and — crucially — a stretched skinny-swatch hero image (because the featured image picked from the swatch folder is a horizontal paint sample, not a hero-shaped photo). Mirrors the same fix used for Mood Board / Ranges. */ .single-post article.category-alege-culoarea > .wd-single-post-header { display: none !important; } /* Also hide the BLOG breadcrumb bar (`.wd-page-title-bg.wd-fill`) above the Elementor wrapper — the eyebrow link inside the template handles category context, so the gray BLOG bar is redundant noise. */ .single-post.category-alege-culoarea .wd-page-title-bg.wd-fill, body.single-post .wd-page-title-bg.wd-fill:has(+ * article.category-alege-culoarea) { display: none !important; } /* Paletar chart variant (single full-width image) — center + cap height so the chart doesn't dominate the viewport on huge displays. */ .cc-paletar-chart img { max-width: 100% !important; width: auto !important; height: auto !important; max-height: 75vh; margin: 0 auto; display: block; } /* ========================================================= ICA / large-paletar "Vezi toate" expand toggle. Build script tags swatch rows 13+ with .cc-row-hidden and appends a .cc-expand-toggle button. Clicking the button toggles a sibling-state class on the post body that reveals every hidden row. ========================================================= */ .cc-row-hidden { display: none !important; } body.cc-show-all .cc-row-hidden { display: flex !important; } .cc-expand-toggle-wrap { display: flex; justify-content: center; width: 100%; margin: 20px 0 60px; } .cc-expand-toggle { appearance: none; background: transparent; border: 2px solid #D1C9C9; color: #D1C9C9; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 2px; line-height: 1; padding: 14px 28px; text-transform: uppercase; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; } .cc-expand-toggle:hover, .cc-expand-toggle:focus { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .04); } /* Hidden state: the inline JS that ships next to the button swaps the label, so we don't try to add a pseudo-element prefix here (it would compose poorly with screen readers and translation). */ /* ========================================================= Gama Noastră swatch-wall "Vezi toate" toggle. js/swatch-wall.js auto-installs this on any run of 7+ consecutive .moodboard-swatch-row siblings: first 4 rows stay visible, rows 5+ get .swatch-wall-extra, and a .swatch-wall-toggle-wrap is inserted right after the 4th row. ========================================================= */ .swatch-wall-extra, section.swatch-wall-extra, .elementor-section.swatch-wall-extra { display: none !important; } .swatch-wall-toggle-wrap { background-color: #F1F1F1; padding: 18px 30px 28px; margin: 0; text-align: center; display: flex; justify-content: center; } .swatch-wall-toggle { appearance: none; background: #fff; border: 1px solid #c8c8c8; color: #2b2b2b; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 2px; line-height: 1; padding: 14px 32px; text-transform: uppercase; cursor: pointer; border-radius: 999px; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .swatch-wall-toggle:hover, .swatch-wall-toggle:focus { background: #2b2b2b; border-color: #2b2b2b; color: #fff; outline: none; } /* AE landing header and mobile fixes */ html:has(body.page-id-29611), body.page-id-29611 { scroll-behavior: smooth; } body.page-id-29611 header.whb-header, body.page-id-29611 .whb-header, body.page-id-29611 .whb-header_764321, body.page-id-29611 .whb-header_796916 { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } body.page-id-29611 .wd-page-content, body.page-id-29611 .main-page-wrapper, body.page-id-29611 .wd-content-layout { margin-top: 0 !important; padding-top: 0 !important; } body.page-id-29611 .elementor-29611 > .elementor-element-fc26c8d { position: sticky !important; top: 0 !important; z-index: 9998 !important; transform: translateZ(0); box-shadow: 0 12px 32px rgba(0,0,0,.16); } body.admin-bar.page-id-29611 .elementor-29611 > .elementor-element-fc26c8d { top: var(--wp-admin--admin-bar--height, 32px) !important; } body.page-id-29611 .elementor-29611 [id^="ae-"] { scroll-margin-top: 250px; } body.admin-bar.page-id-29611 .elementor-29611 [id^="ae-"] { scroll-margin-top: 285px; } body.page-id-29611 .elementor-29611, body.page-id-29611 .elementor-29611 :is(h1,h2,h3,h4,h5,h6,p,span,div,a,strong,em,li,button,label) { font-family: "Mulish", Arial, Helvetica, sans-serif !important; } body.page-id-29611 .elementor-29611 iframe.ae-location-map { border: 0 !important; width: 100% !important; height: 100% !important; min-height: 450px !important; display: block !important; } body.page-id-29611 .ae-landing-footer, body.page-id-29611 #ae-footer { background: #000 !important; color: rgba(255,255,255,.72) !important; } body.page-id-29611 .ae-footer-copy { max-width: 1160px; margin: 0 auto; text-align: center; } body.page-id-29611 .ae-footer-copy p { margin: 0; color: rgba(255,255,255,.72) !important; font-size: 12px; line-height: 1.7; letter-spacing: .02em; } body.page-id-29611 .ae-particle-section::before, body.page-id-29611 .ae-particle-section::after { content: none !important; display: none !important; } @media (max-width: 767px) { body.page-id-29611 { overflow-x: clip !important; overflow-y: visible !important; } body.page-id-29611 .wd-page-wrapper, body.page-id-29611 .wd-content-layout, body.page-id-29611 .elementor-29611 { overflow: visible !important; } body.page-id-29611 .elementor-29611 > .elementor-element-fc26c8d { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-height: 72px !important; height: auto !important; margin-top: 0 !important; padding: 10px 14px !important; box-shadow: 0 8px 24px rgba(0,0,0,.18); } body.page-id-29611 .elementor-29611 [id^="ae-"] { scroll-margin-top: 92px; } body.admin-bar.page-id-29611 .elementor-29611 [id^="ae-"] { scroll-margin-top: 138px; } body.page-id-29611 .elementor-29611 .elementor-element-70132bf { flex: 1 1 auto !important; width: auto !important; max-width: calc(100% - 62px) !important; min-height: 0 !important; padding: 0 !important; } body.page-id-29611 .elementor-29611 .elementor-element-70132bf .elementor-widget-image, body.page-id-29611 .elementor-29611 .elementor-element-70132bf .elementor-widget-container { width: auto !important; height: auto !important; margin: 0 !important; } body.page-id-29611 .elementor-29611 .elementor-element-70132bf img { width: auto !important; max-width: min(180px, 100%) !important; max-height: 52px !important; height: auto !important; object-fit: contain !important; } body.page-id-29611 .elementor-29611 .elementor-element-05456d6 { flex: 0 0 auto !important; width: auto !important; max-width: 54px !important; min-height: 0 !important; padding: 0 !important; } body.page-id-29611 .elementor-29611 .elementor-element-cfc8630 { width: auto !important; max-width: 54px !important; } body.page-id-29611 .elementor-29611 .elementor-element-cfc8630 .elementor-menu-toggle { width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 8px !important; } body.page-id-29611 .elementor-29611 .elementor-element-cfc8630 .elementor-nav-menu--dropdown { left: auto !important; right: 0 !important; top: 100% !important; width: min(100vw, 320px) !important; margin-top: 8px !important; } body.page-id-29611 .elementor-29611 .elementor-section, body.page-id-29611 .elementor-29611 .e-con { max-width: 100vw !important; } body.page-id-29611 .elementor-29611 .elementor-container, body.page-id-29611 .elementor-29611 .elementor-row { flex-wrap: wrap !important; } body.page-id-29611 .elementor-29611 .elementor-column { width: 100% !important; max-width: 100% !important; } body.page-id-29611 .elementor-29611 [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } body.page-id-29611 .elementor-29611 [style*="min-width"] { min-width: 0 !important; } body.page-id-29611 .elementor-29611 [style*="display: flex"][style*="justify-content: space-between"], body.page-id-29611 .elementor-29611 [style*="display:flex"][style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 22px !important; } body.page-id-29611 .elementor-29611 [style*="display: flex"][style*="justify-content: space-between"] > *, body.page-id-29611 .elementor-29611 [style*="display:flex"][style*="justify-content:space-between"] > * { width: 100% !important; max-width: 100% !important; flex: 0 1 auto !important; } body.page-id-29611 .elementor-29611 [style*="font-size:72px"], body.page-id-29611 .elementor-29611 [style*="font-size:68px"], body.page-id-29611 .elementor-29611 [style*="font-size:64px"] { font-size: clamp(38px, 12vw, 54px) !important; line-height: .95 !important; } body.page-id-29611 .elementor-29611 [style*="font-size:44px"], body.page-id-29611 .elementor-29611 [style*="font-size:42px"], body.page-id-29611 .elementor-29611 [style*="font-size:40px"] { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.04 !important; } body.page-id-29611 .elementor-29611 [style*="padding:80px"], body.page-id-29611 .elementor-29611 [style*="padding:72px"], body.page-id-29611 .elementor-29611 [style*="padding:64px"] { padding: 42px 22px !important; } body.page-id-29611 .elementor-29611 [style*="gap:32px"], body.page-id-29611 .elementor-29611 [style*="gap:36px"], body.page-id-29611 .elementor-29611 [style*="gap:40px"] { gap: 22px !important; } body.page-id-29611 .elementor-29611 iframe.ae-location-map { min-height: 320px !important; } body.page-id-29611 .ae-footer-copy p { font-size: 11px; } }