/* * Shopping In My Basement – Metal Design * Version 1.0.1 – refined metallic headers and dropdown navigation. */ :root { --simb-burgundy:#7E2928; --simb-burgundy-dark:#64201F; --simb-metal:#C5C7C8; --simb-metal-light:#F4F5F5; --simb-metal-mid:#D7DADB; --simb-graphite:#34383B; --simb-ink:#25292C; --simb-page:#F3F5F6; --simb-white:#FFFFFF; --simb-border:#C8CDD0; --simb-shadow:0 6px 20px rgba(36,42,46,.10); } /* Global */ body.simb-metal-design { background:var(--simb-page); color:var(--simb-ink); } .simb-metal-design a { text-underline-offset:3px; } .simb-metal-design a:hover { color:var(--simb-burgundy); } /* Kadence header */ .simb-metal-design .site-header, .simb-metal-design .site-header-row-container-inner, .simb-metal-design .site-main-header-wrap { background:#fff; } .simb-metal-design .main-navigation .primary-menu-container>ul>li>a, .simb-metal-design .header-navigation .header-menu-container>ul>li>a { border:1px solid transparent; border-radius:7px; transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; } /* Main dropdown trigger: metallic silver at rest, not burgundy */ body.simb-metal-design .header-navigation .header-menu-container>ul>li.menu-item-has-children>a, body.simb-metal-design .main-navigation .primary-menu-container>ul>li.menu-item-has-children>a { padding:11px 15px; border:1px solid #C8CDD0!important; border-radius:7px; background:linear-gradient(180deg,#FFFFFF 0%,#F0F1F1 42%,#D9DCDD 100%)!important; color:#7E2928!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(30,35,38,.07); } body.simb-metal-design .header-navigation .header-menu-container>ul>li.menu-item-has-children>a:hover, body.simb-metal-design .main-navigation .primary-menu-container>ul>li.menu-item-has-children>a:hover { background:linear-gradient(180deg,#FFFFFF 0%,#E4E7E8 100%)!important; border-color:#9FA6A9!important; color:#64201F!important; } /* Force the actual Kadence dropdown panel to use a light metallic surface */ body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu, body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu ul, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu, body.simb-metal-design .primary-menu-container .sub-menu { min-width:260px; padding:10px!important; border:1px solid #AEB4B7!important; border-top:3px solid #7E2928!important; border-radius:0 0 10px 10px!important; background:linear-gradient(135deg,#D5D8D9 0%,#F7F8F8 48%,#C9CDCF 100%)!important; background-color:#E6E8E9!important; box-shadow:0 12px 28px rgba(25,31,35,.18)!important; } /* Remove dark backgrounds applied to dropdown list items or wrappers by the theme */ body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li { background:transparent!important; border:0!important; } /* Individual dropdown buttons */ body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li { margin:0 0 7px!important; padding:0!important; } body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li:last-child, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li:last-child { margin-bottom:0!important; } body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li>a, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li>a { display:block; padding:12px 15px!important; border:1px solid #B9BFC2!important; border-left:3px solid #A4AAAD!important; border-radius:7px!important; background:linear-gradient(180deg,#FFFFFF 0%,#F0F1F1 48%,#E1E4E5 100%)!important; background-color:#F0F1F1!important; color:#34383B!important; font-size:14px; font-weight:600; line-height:1.45; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,35,38,.05); transition:all .18s ease; } body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li>a:hover, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li>a:hover, body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li.current-menu-item>a, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li.current-menu-item>a { border-color:#7E2928!important; border-left-color:#7E2928!important; background:linear-gradient(180deg,#8E3834 0%,#702522 100%)!important; color:#FFFFFF!important; transform:translateX(1px); } /* Main content and cards */ .simb-metal-design .entry-content-wrap, .simb-metal-design .content-bg, .simb-metal-design .site-container .content-bg { background:#fff; } .simb-metal-design .loop-entry, .simb-metal-design .grid-entry, .simb-metal-design .post, .simb-metal-design .type-upc_product, .simb-metal-design .upc-product-card, .simb-metal-design .product, .simb-metal-design .woocommerce ul.products li.product { overflow:hidden; border:1px solid #D9DEDF; border-radius:8px; background:#fff; box-shadow:0 2px 9px rgba(36,42,46,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .simb-metal-design .loop-entry:hover, .simb-metal-design .grid-entry:hover, .simb-metal-design .upc-product-card:hover, .simb-metal-design .woocommerce ul.products li.product:hover { border-color:#B98785; box-shadow:var(--simb-shadow); transform:translateY(-2px); } .simb-metal-design .loop-entry .entry-content-wrap, .simb-metal-design .grid-entry .entry-content-wrap { padding:20px; } .simb-metal-design .entry-title, .simb-metal-design .loop-entry h2, .simb-metal-design .grid-entry h2, .simb-metal-design .woocommerce-loop-product__title { color:var(--simb-graphite); font-weight:750; line-height:1.3; } .simb-metal-design .entry-title a, .simb-metal-design .loop-entry h2 a, .simb-metal-design .grid-entry h2 a { color:inherit;text-decoration:none; } .simb-metal-design .entry-title a:hover, .simb-metal-design .loop-entry h2 a:hover, .simb-metal-design .grid-entry h2 a:hover { color:var(--simb-burgundy); } /* Article headings */ .simb-metal-design .entry-content h2, .simb-metal-design .entry-content h3, .simb-metal-design .entry-content h4, .simb-metal-design .wp-block-post-content h2, .simb-metal-design .wp-block-post-content h3 { color:var(--simb-graphite);font-weight:750; } .simb-metal-design .entry-content h2, .simb-metal-design .wp-block-post-content h2 { padding-bottom:9px; border-bottom:2px solid transparent; border-image:linear-gradient(90deg,var(--simb-burgundy) 0%,#C5C7C8 65%,transparent 100%) 1; } .simb-metal-design .entry-content blockquote, .simb-metal-design blockquote { border-left:4px solid var(--simb-burgundy); background:#F4F5F5; padding:16px 20px; border-radius:0 7px 7px 0; } /* Buttons */ .simb-metal-design .button, .simb-metal-design .wp-block-button__link, .simb-metal-design .kb-button, .simb-metal-design .kt-button, .simb-metal-design button, .simb-metal-design input[type=submit], .simb-metal-design .woocommerce a.button, .simb-metal-design .woocommerce button.button, .simb-metal-design .woocommerce input.button, .simb-metal-design a.more-link, .simb-metal-design .entry-footer .more-link { border:1px solid #64201F; border-radius:6px; background:linear-gradient(180deg,#98413D 0%,#7E2928 55%,#64201F 100%); color:#fff!important; font-weight:700; text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 2px 5px rgba(40,20,20,.14); transition:filter .2s ease,transform .2s ease,box-shadow .2s ease; } .simb-metal-design .button:hover, .simb-metal-design .wp-block-button__link:hover, .simb-metal-design .kb-button:hover, .simb-metal-design .kt-button:hover, .simb-metal-design button:hover, .simb-metal-design input[type=submit]:hover, .simb-metal-design .woocommerce a.button:hover, .simb-metal-design .woocommerce button.button:hover, .simb-metal-design .woocommerce input.button:hover, .simb-metal-design a.more-link:hover, .simb-metal-design .entry-footer .more-link:hover { filter:brightness(1.08);color:#fff!important;transform:translateY(-1px); box-shadow:0 5px 12px rgba(80,28,27,.2); } /* Forms, tables, footer */ .simb-metal-design input[type=text], .simb-metal-design input[type=email], .simb-metal-design input[type=tel], .simb-metal-design input[type=number], .simb-metal-design input[type=search], .simb-metal-design input[type=url], .simb-metal-design select, .simb-metal-design textarea { border:1px solid #C9CED1;border-radius:6px;background:#fff;color:var(--simb-graphite); } .simb-metal-design input:focus, .simb-metal-design select:focus, .simb-metal-design textarea:focus { border-color:var(--simb-burgundy);box-shadow:0 0 0 3px rgba(126,41,40,.12);outline:none; } .simb-metal-design .entry-content th, .simb-metal-design .wp-block-table th { background:linear-gradient(180deg,#E5E8E9 0%,#CDD1D3 100%);color:var(--simb-graphite); } .simb-metal-design .pagination .current, .simb-metal-design .page-numbers.current { background:var(--simb-burgundy);color:#fff;border-color:var(--simb-burgundy); } .simb-metal-design .site-footer, .simb-metal-design .site-bottom-footer-wrap { background:linear-gradient(180deg,#3D4245 0%,#292D30 100%); color:#E9ECEE;border-top:3px solid var(--simb-burgundy); } .simb-metal-design .site-footer a { color:#fff; } .simb-metal-design .site-footer a:hover { color:#E3B9B7; } /* UPC catalog – appearance only */ .simb-metal-design .upc-product, .simb-metal-design .upc-product-single, .simb-metal-design .upc-product-card, .simb-metal-design .upc-quote, .simb-metal-design .upc-product-gallery, .simb-metal-design .upc-product-summary { border-color:var(--simb-border); } .simb-metal-design .upc-product h1, .simb-metal-design .upc-product h2, .simb-metal-design .upc-product h3, .simb-metal-design .upc-product-single h1, .simb-metal-design .upc-product-single h2, .simb-metal-design .upc-product-single h3 { color:var(--simb-graphite); } .simb-metal-design a:focus-visible, .simb-metal-design button:focus-visible, .simb-metal-design input:focus-visible, .simb-metal-design select:focus-visible, .simb-metal-design textarea:focus-visible { outline:3px solid rgba(126,41,40,.35);outline-offset:2px; } @media(prefers-reduced-motion:reduce) { .simb-metal-design *,.simb-metal-design *:before,.simb-metal-design *:after { transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important; } } @media(max-width:767px) { .simb-metal-design .loop-entry .entry-content-wrap, .simb-metal-design .grid-entry .entry-content-wrap { padding:15px; } .simb-metal-design .main-navigation ul ul, .simb-metal-design .header-navigation ul ul { box-shadow:none; } } /* v1.0.3 – compact single-line dropdown links */ body.simb-metal-design .header-navigation .header-menu-container ul.sub-menu>li>a, body.simb-metal-design .main-navigation .primary-menu-container ul.sub-menu>li>a { box-sizing:border-box!important; width:100%!important; white-space:nowrap!important; overflow:visible; padding:9px 10px!important; font-size:12px!important; line-height:1.25!important; font-weight:600!important; } /* v1.1.2 – set the complete top-level trigger to exactly 70 mm */ body.simb-metal-design #primary-menu > li#menu-item-30.menu-item-has-children { box-sizing:border-box!important; display:inline-flex!important; flex:0 0 70mm!important; align-items:stretch!important; width:70mm!important; min-width:70mm!important; max-width:70mm!important; height:43px!important; min-height:43px!important; max-height:43px!important; overflow:visible!important; position:relative!important; } body.simb-metal-design #primary-menu > li#menu-item-30.menu-item-has-children > a { box-sizing:border-box!important; display:flex!important; flex:1 1 auto!important; width:calc(70mm - 34px)!important; min-width:0!important; max-width:calc(70mm - 34px)!important; height:43px!important; min-height:43px!important; max-height:43px!important; align-items:center!important; justify-content:center!important; padding:9px 4px 9px 10px!important; margin:0!important; border:1px solid #B9BFC2!important; border-right:0!important; border-radius:7px 0 0 7px!important; background:linear-gradient(180deg,#FFFFFF 0%,#F0F1F1 48%,#E1E4E5 100%)!important; color:#34383B!important; font-size:14px!important; font-weight:600!important; line-height:1.25!important; white-space:nowrap!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,35,38,.05)!important; } body.simb-metal-design #primary-menu > li#menu-item-30.menu-item-has-children > button.dropdown-nav-special-toggle { box-sizing:border-box!important; display:flex!important; flex:0 0 34px!important; width:34px!important; min-width:34px!important; max-width:34px!important; height:43px!important; min-height:43px!important; max-height:43px!important; align-items:center!important; justify-content:center!important; padding:0!important; margin:0!important; border:1px solid #B9BFC2!important; border-left:0!important; border-radius:0 7px 7px 0!important; background:linear-gradient(180deg,#FFFFFF 0%,#F0F1F1 48%,#E1E4E5 100%)!important; color:#34383B!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(30,35,38,.05)!important; } /* Keep the dropdown panel visible below the compact trigger */ body.simb-metal-design #primary-menu > li#menu-item-30 > ul.sub-menu { overflow:visible!important; z-index:9999!important; } /* v1.1.3 – full-width metallic fascia for Kadence archive/category title area */ body.simb-metal-design .entry-hero, body.simb-metal-design .archive .page-header, body.simb-metal-design .archive-hero-section, body.simb-metal-design .entry-hero-section, body.simb-metal-design .entry-hero-container, body.simb-metal-design .entry-hero-container-inner, body.simb-metal-design .woocommerce-products-header { position:relative!important; background-color:#D8DCDE!important; background-image: repeating-linear-gradient( 0deg, rgba(255,255,255,.18) 0px, rgba(255,255,255,.18) 1px, rgba(80,86,90,.045) 2px, rgba(255,255,255,.10) 3px, rgba(255,255,255,.10) 4px ), linear-gradient( 180deg, #F7F8F8 0%, #D0D4D6 16%, #E9EBEC 34%, #BFC4C6 51%, #E6E8E9 69%, #C9CED0 86%, #F3F4F4 100% )!important; border-top:1px solid #FFFFFF!important; border-bottom:1px solid #AEB4B7!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important; } /* Keep the title itself clean; the metal effect belongs to the full-width fascia */ body.simb-metal-design .entry-hero h1, body.simb-metal-design .entry-hero .entry-title, body.simb-metal-design .archive .page-header .page-title, body.simb-metal-design .archive .page-header h1, body.simb-metal-design .woocommerce-products-header__title, body.simb-metal-design h1.page-title, body.simb-metal-design .archive-title { color:#34383B!important; background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; text-shadow:0 1px 0 rgba(255,255,255,.8)!important; } /* Thin RAL 8012 accent along the bottom edge of the fascia */ body.simb-metal-design .entry-hero:after, body.simb-metal-design .archive .page-header:after, body.simb-metal-design .archive-hero-section:after, body.simb-metal-design .woocommerce-products-header:after { content:""!important; display:block!important; position:absolute!important; left:0!important; right:0!important; bottom:0!important; height:4px!important; width:100%!important; background:linear-gradient( 90deg, #7E2928 0%, #A65A55 18%, #C6C9CA 50%, #A65A55 82%, #7E2928 100% )!important; opacity:1!important; pointer-events:none!important; } /* v1.1.4 – style the archive heading “Врати” as a compact metallic button */ body.simb-metal-design .entry-hero h1, body.simb-metal-design .entry-hero .entry-title, body.simb-metal-design .archive .page-header .page-title, body.simb-metal-design .archive .page-header h1, body.simb-metal-design .woocommerce-products-header__title, body.simb-metal-design h1.page-title, body.simb-metal-design .archive-title { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; max-width:max-content!important; margin:0 auto!important; padding:10px 24px!important; border:1px solid #7E2928!important; border-radius:7px!important; background: repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0px,rgba(255,255,255,.16) 1px,rgba(80,86,90,.035) 2px,rgba(255,255,255,.08) 3px), linear-gradient(180deg,#F8F9F9 0%,#D5D9DA 45%,#BFC4C6 52%,#EEF0F0 100%)!important; color:#34383B!important; font-weight:750!important; line-height:1.2!important; text-shadow:0 1px 0 rgba(255,255,255,.9)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(35,40,43,.16)!important; } /* Keep the button-like heading centered in the full-width fascia */ body.simb-metal-design .entry-hero .entry-hero-container, body.simb-metal-design .archive .page-header, body.simb-metal-design .woocommerce-products-header { text-align:center!important; } /* ========================================================= v1.2.0 – Homepage and site-wide Metal Silver / RAL 8012 ========================================================= */ :root { --simb-ral8012:#7B3F3A; --simb-ral8012-dark:#612B28; --simb-brushed-a:#F8F9F9; --simb-brushed-b:#D8DCDE; --simb-brushed-c:#BFC4C6; --simb-paper:#FFFFFF; --simb-background:#EEF1F3; } /* Global canvas */ html body.simb-metal-design { background:var(--simb-background)!important; color:#292E32; } /* Header: continuous brushed stainless-steel fascia */ body.simb-metal-design .site-header, body.simb-metal-design .site-header-row-container-inner, body.simb-metal-design .site-main-header-wrap, body.simb-metal-design .site-header-inner-wrap { background: repeating-linear-gradient( 0deg, rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 1px, rgba(70,76,80,.035) 2px, rgba(255,255,255,.10) 3px, rgba(255,255,255,.10) 4px ), linear-gradient(180deg,#F8F9F9 0%,#D5D9DA 38%,#ECEEEF 60%,#C6CBCE 100%)!important; border-top:2px solid var(--simb-ral8012)!important; border-bottom:4px solid var(--simb-ral8012)!important; box-shadow:0 3px 10px rgba(30,36,40,.12)!important; } /* Main site title */ body.simb-metal-design .site-branding a, body.simb-metal-design .site-title, body.simb-metal-design .site-title a { color:#252A2E!important; font-weight:800!important; text-shadow:0 1px 0 rgba(255,255,255,.75); } /* Home page: broad light-gray canvas and one white content panel */ body.simb-metal-design.home, body.simb-metal-design.front-page { background:#EEF1F3!important; } body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary { background:transparent!important; } body.simb-metal-design.home .content-bg, body.simb-metal-design.front-page .content-bg, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { background:#FFFFFF!important; } body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box; border:1px solid #D3D8DA!important; border-radius:11px!important; box-shadow:0 5px 18px rgba(38,45,49,.09)!important; padding:0!important; overflow:hidden; } /* Homepage article body */ body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding:24px 30px 28px!important; background:#FFFFFF!important; color:#292E32!important; font-size:16px; line-height:1.72; } body.simb-metal-design.home .entry-content p, body.simb-metal-design.front-page .entry-content p { margin:0 0 20px!important; } body.simb-metal-design.home .entry-content p:last-child, body.simb-metal-design.front-page .entry-content p:last-child { margin-bottom:0!important; } /* Homepage title banner: brushed silver with a fine RAL 8012 lower edge */ body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child { box-sizing:border-box; display:block; width:100%; margin:0!important; padding:24px 28px 20px!important; border:0!important; border-bottom:3px solid var(--simb-ral8012)!important; border-radius:0!important; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.20) 0px, rgba(255,255,255,.20) 1px, rgba(70,76,80,.045) 2px, rgba(255,255,255,.12) 3px, rgba(255,255,255,.12) 4px ), linear-gradient(180deg,#F7F8F8 0%,#D3D7D9 44%,#E9EBEC 57%,#C5CACC 100%)!important; color:#252A2E!important; font-size:clamp(23px,2.1vw,32px)!important; font-weight:800!important; line-height:1.25!important; text-align:center!important; text-shadow:0 1px 0 rgba(255,255,255,.85); box-shadow:inset 0 1px 0 #fff!important; } /* General pages and posts: consistent clean content panel */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { background:#FFFFFF!important; border:1px solid #D5DADD; border-radius:9px; box-shadow:0 3px 14px rgba(38,45,49,.06); } body.simb-metal-design .entry-content h1, body.simb-metal-design .entry-content h2, body.simb-metal-design .entry-content h3 { color:#30363A!important; } body.simb-metal-design .entry-content h2 { border-bottom:2px solid transparent; border-image:linear-gradient(90deg,var(--simb-ral8012) 0%,#C7CCCE 65%,transparent 100%) 1; } /* Archive title fascia */ body.simb-metal-design .entry-hero, body.simb-metal-design .entry-hero-container, body.simb-metal-design .entry-hero-container-inner, body.simb-metal-design .archive .page-header, body.simb-metal-design .woocommerce-products-header { background: repeating-linear-gradient( 0deg, rgba(255,255,255,.17) 0px, rgba(255,255,255,.17) 1px, rgba(70,76,80,.04) 2px, rgba(255,255,255,.10) 3px, rgba(255,255,255,.10) 4px ), linear-gradient(180deg,#F7F8F8 0%,#D2D6D8 45%,#E8EAEB 58%,#C5CACC 100%)!important; border-top:1px solid #FFFFFF!important; border-bottom:3px solid var(--simb-ral8012)!important; } body.simb-metal-design .entry-hero h1, body.simb-metal-design .entry-hero .entry-title, body.simb-metal-design .archive .page-header h1, body.simb-metal-design .archive .page-header .page-title, body.simb-metal-design .woocommerce-products-header__title { display:inline-block; padding:9px 22px!important; border:1px solid var(--simb-ral8012)!important; border-radius:7px!important; background:linear-gradient(180deg,#F9FAFA 0%,#D4D8D9 50%,#EEF0F0 100%)!important; color:#30363A!important; box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(30,36,40,.12)!important; } /* Product and archive cards */ body.simb-metal-design .loop-entry, body.simb-metal-design .grid-entry, body.simb-metal-design .type-upc_product, body.simb-metal-design .upc-product-card, body.simb-metal-design .woocommerce ul.products li.product { border:1px solid #D0D5D7!important; border-radius:9px!important; background:#FFFFFF!important; box-shadow:0 3px 12px rgba(35,42,46,.07)!important; } body.simb-metal-design .loop-entry:hover, body.simb-metal-design .grid-entry:hover, body.simb-metal-design .upc-product-card:hover, body.simb-metal-design .woocommerce ul.products li.product:hover { border-color:#A97874!important; box-shadow:0 7px 20px rgba(35,42,46,.12)!important; } /* Buttons: silver base with restrained RAL 8012 trim */ body.simb-metal-design .wp-block-button__link, body.simb-metal-design .kb-button, body.simb-metal-design .kt-button, body.simb-metal-design a.button, body.simb-metal-design button, body.simb-metal-design input[type=submit] { border:1px solid var(--simb-ral8012)!important; border-radius:7px!important; background:linear-gradient(180deg,#FAFBFB 0%,#D8DCDE 52%,#F0F2F2 100%)!important; color:#30363A!important; font-weight:700!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(30,36,40,.10)!important; } body.simb-metal-design .wp-block-button__link:hover, body.simb-metal-design .kb-button:hover, body.simb-metal-design .kt-button:hover, body.simb-metal-design a.button:hover, body.simb-metal-design button:hover, body.simb-metal-design input[type=submit]:hover { background:linear-gradient(180deg,#8A413C 0%,#71332F 100%)!important; color:#FFFFFF!important; } /* Slim footer: only the copyright line, not a large decorative metal panel */ body.simb-metal-design .site-bottom-footer-wrap, body.simb-metal-design .site-footer-row-container, body.simb-metal-design .site-footer-section { background:linear-gradient(180deg,#3B4043 0%,#292D30 100%)!important; color:#F4F5F5!important; } body.simb-metal-design .site-bottom-footer-wrap { min-height:0!important; padding:8px 12px!important; border-top:3px solid var(--simb-ral8012)!important; } body.simb-metal-design .site-bottom-footer-inner-wrap, body.simb-metal-design .site-bottom-footer-wrap .site-container { min-height:0!important; padding-top:0!important; padding-bottom:0!important; } body.simb-metal-design .site-bottom-footer-wrap p, body.simb-metal-design .site-bottom-footer-wrap .footer-html { margin:0!important; padding:0!important; font-size:13px!important; line-height:1.4!important; text-align:center!important; color:#F4F5F5!important; } /* Responsive spacing */ @media(max-width:767px) { body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding:17px 16px 20px!important; font-size:15px; } body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child { padding:18px 14px 15px!important; } body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { border-radius:8px!important; } } /* ========================================================= v1.3.0 – proportion and readability correction Target: supplied homepage mockup (silver / RAL 8012) ========================================================= */ :root { --simb-ral8012:#7B3F3A; --simb-graphite:#30363A; --simb-page:#EEF1F3; } /* Readable, consistent base typography. Do not allow theme rules to shrink homepage paragraphs or headings. */ html body.simb-metal-design { background:var(--simb-page)!important; color:#292E32!important; font-size:16px!important; } body.simb-metal-design .entry-content, body.simb-metal-design .entry-content p, body.simb-metal-design .entry-content li { color:#292E32!important; font-size:16px!important; line-height:1.65!important; } body.simb-metal-design .entry-content p { margin:0 0 18px!important; } body.simb-metal-design .entry-content p:last-child { margin-bottom:0!important; } /* Header fascia – full viewport width, restrained steel grain. */ body.simb-metal-design .site-header, body.simb-metal-design .site-header-row-container-inner, body.simb-metal-design .site-main-header-wrap, body.simb-metal-design .site-header-inner-wrap, body.simb-metal-design .site-header-row-container { background: repeating-linear-gradient( 0deg, rgba(255,255,255,.24) 0px, rgba(255,255,255,.24) 1px, rgba(95,101,105,.045) 2px, rgba(255,255,255,.14) 3px, rgba(255,255,255,.14) 4px ), linear-gradient(180deg,#F8F9F9 0%,#D6DADC 42%,#ECEEEF 58%,#C4C9CB 100%)!important; border-top:2px solid var(--simb-ral8012)!important; border-bottom:4px solid var(--simb-ral8012)!important; box-shadow:0 3px 12px rgba(25,30,34,.12)!important; } body.simb-metal-design .site-branding a, body.simb-metal-design .site-title, body.simb-metal-design .site-title a { color:#252A2E!important; font-weight:800!important; } /* Homepage canvas and central white panel. Target width follows the mockup: broad panel with breathing room. */ body.simb-metal-design.home, body.simb-metal-design.front-page { background:#EEF1F3!important; } body.simb-metal-design.home #inner-wrap, body.simb-metal-design.front-page #inner-wrap, body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary { background:transparent!important; } body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container { width:100%!important; max-width:none!important; } body.simb-metal-design.home .content-area, body.simb-metal-design.front-page .content-area { width:100%!important; max-width:none!important; } body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box!important; width:min(92%,1400px)!important; max-width:1400px!important; margin:34px auto 48px!important; padding:0!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #CDD3D6!important; border-radius:10px!important; box-shadow:0 4px 15px rgba(32,39,43,.09)!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { box-sizing:border-box!important; width:100%!important; max-width:none!important; padding:22px 30px 28px!important; margin:0!important; background:#FFFFFF!important; color:#292E32!important; font-size:16px!important; line-height:1.65!important; } /* The first heading becomes the full-width steel title fascia. Covers both direct Gutenberg headings and common Kadence wrappers. */ body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child, body.simb-metal-design.home .entry-content > :first-child:is(h1,h2), body.simb-metal-design.front-page .entry-content > :first-child:is(h1,h2) { display:block!important; box-sizing:border-box!important; width:calc(100% + 60px)!important; max-width:none!important; margin:-22px -30px 18px!important; padding:22px 28px 18px!important; border:0!important; border-bottom:3px solid var(--simb-ral8012)!important; border-radius:0!important; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.22) 0px, rgba(255,255,255,.22) 1px, rgba(80,86,90,.045) 2px, rgba(255,255,255,.13) 3px, rgba(255,255,255,.13) 4px ), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 43%,#E9EBEC 58%,#C5CACC 100%)!important; color:#252A2E!important; font-size:clamp(24px,2.35vw,34px)!important; font-weight:800!important; line-height:1.24!important; text-align:center!important; text-shadow:0 1px 0 rgba(255,255,255,.9)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important; } /* If Kadence wraps the first title in a block, make that wrapper span full width. */ body.simb-metal-design.home .entry-content > .wp-block-heading:first-child, body.simb-metal-design.front-page .entry-content > .wp-block-heading:first-child { width:calc(100% + 60px)!important; max-width:none!important; margin:-22px -30px 18px!important; } /* Archive title fascia and button title remain separate from homepage. */ body.simb-metal-design.archive .entry-hero, body.simb-metal-design.archive .entry-hero-container, body.simb-metal-design.archive .entry-hero-container-inner, body.simb-metal-design.archive .page-header, body.simb-metal-design.woocommerce .woocommerce-products-header { background: repeating-linear-gradient(0deg,rgba(255,255,255,.20) 0px,rgba(255,255,255,.20) 1px,rgba(80,86,90,.04) 2px,rgba(255,255,255,.12) 3px), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 45%,#E9EBEC 58%,#C5CACC 100%)!important; border-bottom:3px solid var(--simb-ral8012)!important; } /* Product cards */ body.simb-metal-design .loop-entry, body.simb-metal-design .grid-entry, body.simb-metal-design .type-upc_product, body.simb-metal-design .upc-product-card, body.simb-metal-design .woocommerce ul.products li.product { background:#FFFFFF!important; border:1px solid #D0D5D7!important; border-radius:9px!important; box-shadow:0 3px 12px rgba(35,42,46,.07)!important; } /* Footer – short strip, only for the copyright notice. */ body.simb-metal-design .site-bottom-footer-wrap { min-height:0!important; padding:6px 12px!important; border-top:3px solid var(--simb-ral8012)!important; border-bottom:2px solid var(--simb-ral8012)!important; background:linear-gradient(180deg,#3B4043 0%,#292D30 100%)!important; } body.simb-metal-design .site-bottom-footer-inner-wrap, body.simb-metal-design .site-bottom-footer-wrap .site-container, body.simb-metal-design .site-bottom-footer-wrap .site-footer-row-container-inner { min-height:0!important; padding-top:0!important; padding-bottom:0!important; } body.simb-metal-design .site-bottom-footer-wrap p, body.simb-metal-design .site-bottom-footer-wrap .footer-html { margin:0!important; padding:0!important; color:#F4F5F5!important; font-size:13px!important; line-height:1.35!important; text-align:center!important; } /* Mobile: retain full-width fascia and legible copy without horizontal overflow. */ @media(max-width:767px) { body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { width:calc(100% - 24px)!important; margin:18px auto 28px!important; border-radius:8px!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding:16px 16px 20px!important; font-size:15px!important; line-height:1.6!important; } body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child, body.simb-metal-design.home .entry-content > .wp-block-heading:first-child, body.simb-metal-design.front-page .entry-content > .wp-block-heading:first-child { width:calc(100% + 32px)!important; margin:-16px -16px 16px!important; padding:17px 13px 15px!important; font-size:22px!important; } } /* ========================================================= v1.3.1 – RAL 8012 frame, transparent surround and buttons ========================================================= */ :root { --simb-ral8012:#7B3F3A; --simb-ral8012-dark:#612B28; --simb-steel-top:#F8F9F9; --simb-steel-mid:#D4D8DA; --simb-steel-low:#C2C7C9; } /* Remove Kadence's extra white backing behind the homepage card. The page canvas itself stays light gray. */ body.simb-metal-design.home, body.simb-metal-design.front-page, body.simb-metal-design.home #inner-wrap, body.simb-metal-design.front-page #inner-wrap, body.simb-metal-design.home #wrapper, body.simb-metal-design.front-page #wrapper, body.simb-metal-design.home #main, body.simb-metal-design.front-page #main, body.simb-metal-design.home .site-main, body.simb-metal-design.front-page .site-main, body.simb-metal-design.home .content-bg, body.simb-metal-design.front-page .content-bg, body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container, body.simb-metal-design.home .content-area, body.simb-metal-design.front-page .content-area { background:transparent!important; } /* The actual homepage content panel gets the complete RAL 8012 outline, including rounded corners, instead of a pale gray hairline. */ body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap, body.simb-metal-design.home article, body.simb-metal-design.front-page article { background:#FFFFFF!important; border:2px solid var(--simb-ral8012)!important; border-radius:12px!important; box-shadow:0 4px 16px rgba(35,39,42,.12)!important; overflow:hidden!important; } /* The title fascia has its own matching rounded upper corners; the lower edge remains a solid RAL 8012 divider. */ body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child, body.simb-metal-design.home .entry-content > .wp-block-heading:first-child, body.simb-metal-design.front-page .entry-content > .wp-block-heading:first-child { border-top-left-radius:10px!important; border-top-right-radius:10px!important; border-bottom:3px solid var(--simb-ral8012)!important; outline:0!important; } /* Header navigation trigger – same footprint and metal treatment as submenu buttons. */ body.simb-metal-design .primary-menu-container > ul > li.menu-item-has-children > a, body.simb-metal-design .primary-menu-container > ul > li.menu-item-has-children > .dropdown-nav-special-toggle, body.simb-metal-design .header-navigation .menu-item-has-children > a, body.simb-metal-design .header-navigation .menu-item-has-children > button, body.simb-metal-design .header-navigation .dropdown-nav-special-toggle { box-sizing:border-box!important; min-height:43px!important; padding:9px 16px!important; border:1px solid #AEB5B8!important; border-radius:7px!important; background:linear-gradient(180deg,#FAFBFB 0%,#D8DCDE 52%,#EEF0F1 100%)!important; color:#34383B!important; font-size:14px!important; font-weight:700!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(30,36,40,.10)!important; } /* Dropdown panel and each submenu item become distinct compact buttons. */ body.simb-metal-design .primary-menu-container .sub-menu, body.simb-metal-design .header-navigation .sub-menu, body.simb-metal-design .primary-menu-container ul ul { padding:9px!important; border:2px solid var(--simb-ral8012)!important; border-radius:0 0 10px 10px!important; background:linear-gradient(180deg,#F4F5F5 0%,#D9DDDE 100%)!important; box-shadow:0 7px 18px rgba(25,30,34,.18)!important; } body.simb-metal-design .primary-menu-container .sub-menu a, body.simb-metal-design .header-navigation .sub-menu a, body.simb-metal-design .primary-menu-container ul ul a { display:flex!important; align-items:center!important; box-sizing:border-box!important; min-height:42px!important; margin:0 0 7px!important; padding:9px 13px!important; border:1px solid #AEB5B8!important; border-left:4px solid #AEB5B8!important; border-radius:7px!important; background:linear-gradient(180deg,#FAFBFB 0%,#D9DDDE 100%)!important; color:#34383B!important; font-size:14px!important; font-weight:600!important; line-height:1.3!important; white-space:normal!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important; } body.simb-metal-design .primary-menu-container .sub-menu a:hover, body.simb-metal-design .primary-menu-container .sub-menu .current-menu-item > a, body.simb-metal-design .header-navigation .sub-menu a:hover, body.simb-metal-design .header-navigation .sub-menu .current-menu-item > a { border-color:var(--simb-ral8012)!important; border-left-color:var(--simb-ral8012)!important; background:linear-gradient(180deg,#87443E 0%,#672F2B 100%)!important; color:#FFFFFF!important; } /* Standard action buttons across the site: visible RAL outline at rest, filled RAL on hover/active. */ body.simb-metal-design .wp-block-button__link, body.simb-metal-design .kb-button, body.simb-metal-design .kt-button, body.simb-metal-design a.button, body.simb-metal-design button, body.simb-metal-design input[type=submit], body.simb-metal-design .upc-actions a, body.simb-metal-design .upc-quote button { border:1px solid var(--simb-ral8012)!important; border-radius:7px!important; background:linear-gradient(180deg,#FAFBFB 0%,#D8DCDE 52%,#EEF0F1 100%)!important; color:#30363A!important; font-weight:700!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(30,36,40,.10)!important; } body.simb-metal-design .wp-block-button__link:hover, body.simb-metal-design .kb-button:hover, body.simb-metal-design .kt-button:hover, body.simb-metal-design a.button:hover, body.simb-metal-design button:hover, body.simb-metal-design input[type=submit]:hover, body.simb-metal-design .upc-actions a:hover, body.simb-metal-design .upc-quote button:hover { background:linear-gradient(180deg,#87443E 0%,#672F2B 100%)!important; color:#FFFFFF!important; } /* Do not add a white full-width backing to the footer. */ body.simb-metal-design .site-bottom-footer-wrap, body.simb-metal-design .site-bottom-footer-wrap .site-container, body.simb-metal-design .site-bottom-footer-wrap .site-footer-row-container-inner { background:linear-gradient(180deg,#3B4043 0%,#292D30 100%)!important; } /* ========================================================= v1.3.2 – retain and frame the white backing panel ========================================================= */ /* The broad white backing is intentional: keep it visible and give it a deliberate silver / RAL 8012 surround. */ body.simb-metal-design.home article, body.simb-metal-design.front-page article { box-sizing:border-box!important; background: linear-gradient(#FFFFFF,#FFFFFF) padding-box, linear-gradient(145deg,#8A4842 0%,#C7CCCE 13%,#F8F9F9 27%,#AEB5B8 48%,#7B3F3A 72%,#D7DBDD 88%,#7B3F3A 100%) border-box!important; border:3px solid transparent!important; border-radius:15px!important; padding:22px!important; box-shadow: 0 5px 18px rgba(30,36,40,.12), inset 0 1px 0 rgba(255,255,255,.95)!important; } /* Keep the inner content panel white, clearly outlined in RAL 8012, and slightly inset from the outer backing. */ body.simb-metal-design.home article .entry-content-wrap, body.simb-metal-design.front-page article .entry-content-wrap, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box!important; background:#FFFFFF!important; border:2px solid #7B3F3A!important; border-radius:11px!important; margin:0 auto!important; overflow:hidden!important; box-shadow:0 2px 8px rgba(30,36,40,.08)!important; } /* On narrow screens reduce only the backing inset, not the panel width. */ @media(max-width:767px) { body.simb-metal-design.home article, body.simb-metal-design.front-page article { padding:9px!important; border-radius:11px!important; } body.simb-metal-design.home article .entry-content-wrap, body.simb-metal-design.front-page article .entry-content-wrap, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { border-radius:8px!important; } } /* ========================================================= v1.3.3 – remove outer white backing, widen content, strengthen RAL 8012 outlines ========================================================= */ :root { --simb-ral8012:#7B3F3A; --simb-ral8012-dark:#612B28; } /* No separate white backing card around the content. */ body.simb-metal-design.home article, body.simb-metal-design.front-page article { display:block!important; box-sizing:border-box!important; width:100%!important; max-width:none!important; margin:0 auto!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; } /* Let the actual content use the available page width. */ body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container, body.simb-metal-design.home .content-area, body.simb-metal-design.front-page .content-area, body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary { width:100%!important; max-width:none!important; padding-left:0!important; padding-right:0!important; margin-left:0!important; margin-right:0!important; background:transparent!important; } /* One wide, clearly outlined content panel – no extra outer white card. */ body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box!important; display:block!important; width:96%!important; max-width:1700px!important; margin:30px auto 42px!important; padding:0!important; background:#FFFFFF!important; border:4px solid var(--simb-ral8012)!important; border-radius:15px!important; box-shadow:0 5px 18px rgba(30,36,40,.13)!important; overflow:hidden!important; } /* Wider text measure and stronger inner spacing. */ body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { box-sizing:border-box!important; width:100%!important; max-width:none!important; margin:0!important; padding:24px 32px 30px!important; background:#FFFFFF!important; color:#292E32!important; font-size:16px!important; line-height:1.65!important; } body.simb-metal-design.home .entry-content p, body.simb-metal-design.front-page .entry-content p { margin:0 0 18px!important; } /* Stronger RAL 8012 border around the title fascia. */ body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child, body.simb-metal-design.home .entry-content > .wp-block-heading:first-child, body.simb-metal-design.front-page .entry-content > .wp-block-heading:first-child { box-sizing:border-box!important; width:calc(100% + 64px)!important; max-width:none!important; margin:-24px -32px 20px!important; padding:22px 28px 19px!important; border:0!important; border-bottom:5px solid var(--simb-ral8012)!important; border-radius:10px 10px 0 0!important; background: repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0px,rgba(255,255,255,.22) 1px,rgba(80,86,90,.05) 2px,rgba(255,255,255,.13) 3px,rgba(255,255,255,.13) 4px), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 43%,#E9EBEC 58%,#C5CACC 100%)!important; color:#252A2E!important; font-size:clamp(24px,2.25vw,34px)!important; font-weight:800!important; line-height:1.24!important; text-align:center!important; text-shadow:0 1px 0 rgba(255,255,255,.9)!important; } /* Header and footer keep the same thicker RAL 8012 metal trim. */ body.simb-metal-design .site-header, body.simb-metal-design .site-header-row-container-inner, body.simb-metal-design .site-main-header-wrap, body.simb-metal-design .site-header-inner-wrap { border-top:4px solid var(--simb-ral8012)!important; border-bottom:6px solid var(--simb-ral8012)!important; } body.simb-metal-design .site-bottom-footer-wrap { border-top:5px solid var(--simb-ral8012)!important; border-bottom:4px solid var(--simb-ral8012)!important; } /* Mobile: nearly full width, with controlled padding and no overflow. */ @media(max-width:767px) { body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { width:calc(100% - 18px)!important; margin:16px auto 26px!important; border-width:3px!important; border-radius:11px!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding:16px 15px 20px!important; font-size:15px!important; line-height:1.6!important; } body.simb-metal-design.home .entry-content > h1:first-child, body.simb-metal-design.home .entry-content > h2:first-child, body.simb-metal-design.front-page .entry-content > h1:first-child, body.simb-metal-design.front-page .entry-content > h2:first-child, body.simb-metal-design.home .entry-content > .wp-block-heading:first-child, body.simb-metal-design.front-page .entry-content > .wp-block-heading:first-child { width:calc(100% + 30px)!important; margin:-16px -15px 16px!important; padding:17px 12px 15px!important; border-bottom-width:4px!important; font-size:21px!important; } } /* ========================================================= v1.4.0 – unify inner pages, products, posts and archives Same visual system as homepage: silver / RAL 8012 / graphite ========================================================= */ :root { --simb-ral8012:#7B3F3A; --simb-ral8012-dark:#612B28; --simb-page:#EEF1F3; --simb-text:#292E32; } /* Site-wide canvas: remove Kadence's default white content backplates. */ body.simb-metal-design, body.simb-metal-design #inner-wrap, body.simb-metal-design #main, body.simb-metal-design .site-main, body.simb-metal-design .content-bg, body.simb-metal-design .content-container { background:var(--simb-page)!important; } /* All content types use the same wide, framed white panel. Covers standard pages, posts, product CPT, and WooCommerce product detail. */ body.simb-metal-design:not(.home):not(.front-page) article, body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap, body.simb-metal-design.single .type-post, body.simb-metal-design.page .type-page, body.simb-metal-design.single-upc_product .type-upc_product, body.simb-metal-design.single-product div.product, body.simb-metal-design .woocommerce div.product { box-sizing:border-box!important; background:#FFFFFF!important; border:4px solid var(--simb-ral8012)!important; border-radius:14px!important; box-shadow:0 5px 18px rgba(30,36,40,.12)!important; overflow:hidden!important; } /* Make content broad and keep consistent internal spacing. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { width:96%!important; max-width:1700px!important; margin:30px auto 42px!important; padding:0!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content { box-sizing:border-box!important; width:100%!important; max-width:none!important; padding:24px 32px 30px!important; margin:0!important; background:#FFFFFF!important; color:var(--simb-text)!important; font-size:16px!important; line-height:1.65!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content p { color:var(--simb-text)!important; font-size:16px!important; line-height:1.65!important; margin:0 0 18px!important; } /* Inner-page title: same brushed-steel fascia and thick RAL lower edge. */ body.simb-metal-design:not(.home):not(.front-page) .entry-hero, body.simb-metal-design:not(.home):not(.front-page) .entry-hero-container, body.simb-metal-design:not(.home):not(.front-page) .entry-hero-container-inner { background: repeating-linear-gradient( 0deg, rgba(255,255,255,.22) 0px, rgba(255,255,255,.22) 1px, rgba(80,86,90,.05) 2px, rgba(255,255,255,.13) 3px, rgba(255,255,255,.13) 4px ), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 43%,#E9EBEC 58%,#C5CACC 100%)!important; border-top:2px solid #FFFFFF!important; border-bottom:5px solid var(--simb-ral8012)!important; box-shadow:0 3px 10px rgba(30,36,40,.10)!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-hero h1, body.simb-metal-design:not(.home):not(.front-page) .entry-hero .entry-title, body.simb-metal-design:not(.home):not(.front-page) .entry-hero .page-title { color:#252A2E!important; font-weight:800!important; text-shadow:0 1px 0 rgba(255,255,255,.9)!important; } /* Where Kadence puts the title inside the content rather than hero. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap > .entry-header, body.simb-metal-design:not(.home):not(.front-page) article > .entry-header { box-sizing:border-box!important; padding:20px 28px!important; margin:0!important; background: repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0px,rgba(255,255,255,.22) 1px,rgba(80,86,90,.05) 2px,rgba(255,255,255,.13) 3px), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 43%,#E9EBEC 58%,#C5CACC 100%)!important; border-bottom:5px solid var(--simb-ral8012)!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-header .entry-title, body.simb-metal-design:not(.home):not(.front-page) .entry-header h1 { color:#252A2E!important; font-size:clamp(24px,2.2vw,34px)!important; line-height:1.25!important; font-weight:800!important; text-align:center!important; } /* Images inside product pages align to the same framed panel, without stretching or cropping the original product photography. */ body.simb-metal-design.single-upc_product .entry-content img, body.simb-metal-design.single-product .entry-content img, body.simb-metal-design.single .entry-content img { max-width:100%!important; height:auto!important; } body.simb-metal-design.single-upc_product .upc-gallery, body.simb-metal-design.single-product .woocommerce-product-gallery { border:2px solid var(--simb-ral8012)!important; border-radius:10px!important; overflow:hidden!important; background:#FFFFFF!important; } /* Archives/categories: same steel title, same card frame, same page canvas. */ body.simb-metal-design.archive .content-bg, body.simb-metal-design.tax-upc_category .content-bg, body.simb-metal-design.blog .content-bg { background:var(--simb-page)!important; } body.simb-metal-design.archive .loop-entry, body.simb-metal-design.archive .grid-entry, body.simb-metal-design.tax-upc_category .loop-entry, body.simb-metal-design.tax-upc_category .grid-entry, body.simb-metal-design.blog .loop-entry, body.simb-metal-design.blog .grid-entry { background:#FFFFFF!important; border:3px solid var(--simb-ral8012)!important; border-radius:11px!important; box-shadow:0 4px 13px rgba(30,36,40,.10)!important; overflow:hidden!important; } body.simb-metal-design.archive .entry-hero, body.simb-metal-design.tax-upc_category .entry-hero, body.simb-metal-design.blog .entry-hero { border-bottom:5px solid var(--simb-ral8012)!important; } /* Shared typography and headings across all inner content. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content h1, body.simb-metal-design:not(.home):not(.front-page) .entry-content h2, body.simb-metal-design:not(.home):not(.front-page) .entry-content h3 { color:#30363A!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content h2 { border-bottom:2px solid var(--simb-ral8012)!important; padding-bottom:7px!important; } /* Keep inner pages responsive and avoid a fixed desktop-width panel. */ @media(max-width:767px) { body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { width:calc(100% - 18px)!important; margin:16px auto 26px!important; border-width:3px!important; border-radius:10px!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content { padding:16px 15px 20px!important; font-size:15px!important; line-height:1.6!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content p { font-size:15px!important; line-height:1.6!important; } } /* ========================================================= v1.4.1 – FIX: one content frame only; no nested white cards. Homepage rules from 1.3.3 remain untouched. ========================================================= */ /* Do not style the article AND its inner Kadence content wrapper. The article is only a structural shell. */ body.simb-metal-design:not(.home):not(.front-page) article, body.simb-metal-design:not(.home):not(.front-page) article.type-post, body.simb-metal-design:not(.home):not(.front-page) article.type-page, body.simb-metal-design:not(.home):not(.front-page) article.type-upc_product, body.simb-metal-design:not(.home):not(.front-page) .single-content article { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; } /* Exactly one framed surface: Kadence's entry-content-wrap. No additional border on the article, entry-content, or gallery parent. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { box-sizing:border-box!important; width:96%!important; max-width:1700px!important; margin:30px auto 42px!important; padding:0!important; background:#FFFFFF!important; border:4px solid #7B3F3A!important; border-radius:14px!important; box-shadow:0 5px 18px rgba(30,36,40,.12)!important; overflow:hidden!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } /* Do not add a separate outline around product galleries. */ body.simb-metal-design.single-upc_product .upc-gallery, body.simb-metal-design.single-product .woocommerce-product-gallery { border:0!important; border-radius:0!important; box-shadow:none!important; } /* Keep archive cards as their own single cards; remove duplicate styling from nested Kadence entry wrappers. */ body.simb-metal-design.archive .loop-entry .entry-content-wrap, body.simb-metal-design.tax-upc_category .loop-entry .entry-content-wrap, body.simb-metal-design.blog .loop-entry .entry-content-wrap, body.simb-metal-design.archive .grid-entry .entry-content-wrap, body.simb-metal-design.tax-upc_category .grid-entry .entry-content-wrap, body.simb-metal-design.blog .grid-entry .entry-content-wrap { width:auto!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; } /* Structural wrappers stay transparent on the homepage as before. */ body.simb-metal-design.home article, body.simb-metal-design.front-page article { background:transparent!important; border:0!important; box-shadow:none!important; } /* ========================================================= v1.4.2 – homepage isolation: restore the original homepage treatment; apply the unified inner-page frame only outside the homepage. ========================================================= */ /* Homepage: explicitly cancel every global content-panel rule introduced in 1.4.0/1.4.1. Keep its original page canvas and single original entry-content treatment from the base plugin. */ body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap, body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { width:auto!important; max-width:none!important; margin:initial!important; padding:initial!important; background:initial!important; border:initial!important; border-radius:initial!important; box-shadow:initial!important; overflow:visible!important; } /* Do not create an outer card around the homepage's content. The homepage keeps only its original content styling. */ body.simb-metal-design.home .content-bg, body.simb-metal-design.front-page .content-bg, body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container, body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary, body.simb-metal-design.home #main, body.simb-metal-design.front-page #main { background:transparent!important; border:0!important; box-shadow:none!important; } /* Inner pages: one outline only, on the actual content wrapper. The article shell and inner content remain transparent. */ body.simb-metal-design:not(.home):not(.front-page) article, body.simb-metal-design:not(.home):not(.front-page) article.type-post, body.simb-metal-design:not(.home):not(.front-page) article.type-page, body.simb-metal-design:not(.home):not(.front-page) article.type-upc_product { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:visible!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { background:#FFFFFF!important; border:4px solid #7B3F3A!important; border-radius:14px!important; box-shadow:0 5px 18px rgba(30,36,40,.12)!important; overflow:hidden!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } /* Prevent nested wrappers inside single content panels from creating another white surface or another outline. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap .entry-content-wrap, body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap .content-bg, body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap .content-container { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } /* Homepage title/content structure is not replaced by the inner-page archive or entry-hero treatment. */ body.simb-metal-design.home .entry-hero, body.simb-metal-design.front-page .entry-hero, body.simb-metal-design.home .entry-hero-container, body.simb-metal-design.front-page .entry-hero-container, body.simb-metal-design.home .entry-header, body.simb-metal-design.front-page .entry-header { border:0!important; box-shadow:none!important; } /* ========================================================= v1.4.3 – homepage layout repair. Keep one centered wide composition; no full-viewport fascia, no flush-to-edge text, no nested backing card. ========================================================= */ /* Restore a deliberate page canvas without a separate white backing. */ body.simb-metal-design.home, body.simb-metal-design.front-page, body.simb-metal-design.home #inner-wrap, body.simb-metal-design.front-page #inner-wrap, body.simb-metal-design.home #main, body.simb-metal-design.front-page #main, body.simb-metal-design.home .site-main, body.simb-metal-design.front-page .site-main { background:#EEF1F3!important; } /* The title fascia and body panel share the same width and align as one composition. The title is a top section, not a full-width bar. */ body.simb-metal-design.home .entry-hero, body.simb-metal-design.front-page .entry-hero { box-sizing:border-box!important; width:96%!important; max-width:1700px!important; margin:30px auto 0!important; padding:0!important; border:3px solid #7B3F3A!important; border-bottom:5px solid #7B3F3A!important; border-radius:14px 14px 0 0!important; overflow:hidden!important; background: repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0px,rgba(255,255,255,.22) 1px,rgba(80,86,90,.05) 2px,rgba(255,255,255,.13) 3px,rgba(255,255,255,.13) 4px), linear-gradient(180deg,#F8F9F9 0%,#D3D7D9 43%,#E9EBEC 58%,#C5CACC 100%)!important; box-shadow:0 3px 10px rgba(30,36,40,.10)!important; } body.simb-metal-design.home .entry-hero-container, body.simb-metal-design.front-page .entry-hero-container, body.simb-metal-design.home .entry-hero-container-inner, body.simb-metal-design.front-page .entry-hero-container-inner { width:100%!important; max-width:none!important; margin:0!important; padding:22px 28px!important; background:transparent!important; border:0!important; box-shadow:none!important; } body.simb-metal-design.home .entry-hero h1, body.simb-metal-design.front-page .entry-hero h1, body.simb-metal-design.home .entry-hero .entry-title, body.simb-metal-design.front-page .entry-hero .entry-title { margin:0!important; color:#252A2E!important; font-weight:800!important; text-align:center!important; text-shadow:0 1px 0 rgba(255,255,255,.9)!important; } /* Main content panel directly joins the fascia. It is the only white content surface and has no extra outer white wrapper. */ body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { display:block!important; box-sizing:border-box!important; width:96%!important; max-width:1700px!important; margin:0 auto 42px!important; padding:0!important; background:#FFFFFF!important; border:3px solid #7B3F3A!important; border-top:0!important; border-radius:0 0 14px 14px!important; box-shadow:0 5px 18px rgba(30,36,40,.12)!important; overflow:hidden!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { box-sizing:border-box!important; width:100%!important; max-width:none!important; margin:0!important; padding:26px 32px 30px!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#292E32!important; font-size:16px!important; line-height:1.65!important; } body.simb-metal-design.home .entry-content p, body.simb-metal-design.front-page .entry-content p { margin:0 0 18px!important; padding:0!important; } /* Remove any Kadence content container offsets that can push text to the viewport edge; do not paint them white or add borders. */ body.simb-metal-design.home .content-bg, body.simb-metal-design.front-page .content-bg, body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container, body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } /* Mobile sizing. */ @media(max-width:767px) { body.simb-metal-design.home .entry-hero, body.simb-metal-design.front-page .entry-hero { width:calc(100% - 18px)!important; margin-top:16px!important; border-width:3px!important; border-radius:10px 10px 0 0!important; } body.simb-metal-design.home .entry-hero-container, body.simb-metal-design.front-page .entry-hero-container, body.simb-metal-design.home .entry-hero-container-inner, body.simb-metal-design.front-page .entry-hero-container-inner { padding:16px 14px!important; } body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { width:calc(100% - 18px)!important; margin-bottom:26px!important; border-width:3px!important; border-radius:0 0 10px 10px!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding:17px 15px 20px!important; font-size:15px!important; line-height:1.6!important; } } /* ========================================================= v1.4.4 – breathing room for inner-page content. Match the reference article layout: clear gap below header, inset title/content, and visible bottom breathing space. ========================================================= */ /* Add separation between the site header and the page panel. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { margin-top:32px!important; margin-bottom:48px!important; } /* Text pages: readable inset on every side, not flush to edges. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content { padding:28px 34px 38px!important; margin:0!important; } /* If the title is rendered as a separate Kadence hero, give it the same width and breathing room as the content panel. */ body.simb-metal-design:not(.home):not(.front-page) .entry-hero { margin-top:32px!important; margin-bottom:0!important; } /* Product pages and pages whose first block is an image: keep a deliberate top and bottom inset around the first/last block. */ body.simb-metal-design.single-upc_product .entry-content, body.simb-metal-design.single-product .entry-content, body.simb-metal-design.single .entry-content { padding-top:30px!important; padding-bottom:40px!important; } body.simb-metal-design.single-upc_product .entry-content > :first-child, body.simb-metal-design.single-product .entry-content > :first-child, body.simb-metal-design.single .entry-content > :first-child { margin-top:0!important; } body.simb-metal-design.single-upc_product .entry-content > :last-child, body.simb-metal-design.single-product .entry-content > :last-child, body.simb-metal-design.single .entry-content > :last-child { margin-bottom:0!important; } /* Ensure the final paragraph/block never touches the lower border. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content > :last-child { margin-bottom:0!important; } /* Archive cards need their own compact padding, not the large single-page article spacing. */ body.simb-metal-design.archive .loop-entry .entry-content, body.simb-metal-design.tax-upc_category .loop-entry .entry-content, body.simb-metal-design.blog .loop-entry .entry-content, body.simb-metal-design.archive .grid-entry .entry-content, body.simb-metal-design.tax-upc_category .grid-entry .entry-content, body.simb-metal-design.blog .grid-entry .entry-content { padding:18px 20px 22px!important; } /* Mobile breathing room. */ @media(max-width:767px) { body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { margin-top:18px!important; margin-bottom:28px!important; } body.simb-metal-design:not(.home):not(.front-page) .entry-content { padding:19px 16px 25px!important; } } /* ========================================================= v1.4.5 – homepage spacing correction. The homepage was excluded by the v1.4.4 inner-page selector. Keep the existing metal header/title styling and panel width. ========================================================= */ body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { margin-top:30px!important; margin-bottom:48px!important; padding-bottom:26px!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding-top:28px!important; padding-bottom:42px!important; margin-bottom:0!important; } @media(max-width:767px) { body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { margin-top:20px!important; margin-bottom:30px!important; padding-bottom:18px!important; } body.simb-metal-design.home .entry-content, body.simb-metal-design.front-page .entry-content { padding-top:20px!important; padding-bottom:28px!important; } } /* ========================================================= v1.4.6 – fix the OUTER homepage article position. The visible RAL frame is applied to article, not only to .entry-content-wrap. Move that outer frame away from header. ========================================================= */ body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home #primary > article, body.simb-metal-design.front-page #primary > article { margin-top:34px!important; margin-bottom:48px!important; } @media(max-width:767px) { body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home #primary > article, body.simb-metal-design.front-page #primary > article { margin-top:18px!important; margin-bottom:28px!important; } } /* ========================================================= v1.4.7 – homepage panel must stay wide at reduced browser zoom. Remove the 1700px cap: it made the panel occupy only part of a very wide CSS viewport when the user zoomed out to capture the whole page. Keep a proportional 96% page width instead. ========================================================= */ body.simb-metal-design.home #inner-wrap, body.simb-metal-design.front-page #inner-wrap, body.simb-metal-design.home #main, body.simb-metal-design.front-page #main, body.simb-metal-design.home .site-main, body.simb-metal-design.front-page .site-main, body.simb-metal-design.home .content-container, body.simb-metal-design.front-page .content-container, body.simb-metal-design.home .content-area, body.simb-metal-design.front-page .content-area, body.simb-metal-design.home #primary, body.simb-metal-design.front-page #primary { width:100%!important; max-width:none!important; } body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box!important; width:96%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } @media(max-width:767px) { body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { width:calc(100% - 18px)!important; } } /* ========================================================= v1.4.8 – exact 13 mm outer spacing on the homepage. Apply the same top and bottom breathing room to the visible framed article. Do not add a second margin to inner wrappers. ========================================================= */ body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home #primary > article, body.simb-metal-design.front-page #primary > article { margin-top:13mm!important; margin-bottom:13mm!important; } body.simb-metal-design.home article .entry-content-wrap, body.simb-metal-design.front-page article .entry-content-wrap { margin-top:0!important; margin-bottom:0!important; } @media(max-width:767px) { body.simb-metal-design.home article, body.simb-metal-design.front-page article, body.simb-metal-design.home #primary > article, body.simb-metal-design.front-page #primary > article { margin-top:13mm!important; margin-bottom:13mm!important; } } /* ========================================================= v1.4.9 – exact homepage article spacing. Confirmed DOM: body.home > #wrapper > #inner-wrap > #primary > .content-area > .content-container > #main.site-main > article#post-64.entry.single-entry. Apply the 13 mm outer gap to the ARTICLE, not .entry-content. ========================================================= */ body.home article#post-64.entry.single-entry, body.front-page article#post-64.entry.single-entry { margin-top:13mm!important; margin-bottom:13mm!important; } /* Keep the article's inner content sizing and typography unchanged. */ body.home article#post-64.entry.single-entry > .entry-content-wrap, body.front-page article#post-64.entry.single-entry > .entry-content-wrap { margin-top:0!important; margin-bottom:0!important; } /* ========================================================= v1.5.0 – category archive refinement. 1) Remove the separate archive-title fascia (e.g. “Врати”). 2) Add readable inner spacing to archive card text only. Product images and metallic card title strips remain full width. ========================================================= */ /* Hide only the category/archive title band; keep the global site header. */ body.category .entry-hero, body.category .archive .page-header, body.tax-upc_category .entry-hero, body.tax-upc_category .archive .page-header, body.post-type-archive-upc_product .entry-hero, body.post-type-archive-upc_product .archive .page-header { display:none!important; } /* Remove leftover spacing reserved for the hidden archive title band. */ body.category #inner-wrap, body.tax-upc_category #inner-wrap, body.post-type-archive-upc_product #inner-wrap { padding-top:0!important; } /* Give archive excerpt/body copy breathing room without shrinking images or moving the full-width metallic title header inside each card. */ body.category .loop-entry .entry-summary, body.category .grid-entry .entry-summary, body.category .loop-entry .entry-content, body.category .grid-entry .entry-content, body.tax-upc_category .loop-entry .entry-summary, body.tax-upc_category .grid-entry .entry-summary, body.tax-upc_category .loop-entry .entry-content, body.tax-upc_category .grid-entry .entry-content, body.post-type-archive-upc_product .loop-entry .entry-summary, body.post-type-archive-upc_product .grid-entry .entry-summary, body.post-type-archive-upc_product .loop-entry .entry-content, body.post-type-archive-upc_product .grid-entry .entry-content { box-sizing:border-box!important; padding-left:16px!important; padding-right:16px!important; } /* Separate the excerpt from the card edge vertically. */ body.category .loop-entry .entry-summary, body.category .grid-entry .entry-summary, body.tax-upc_category .loop-entry .entry-summary, body.tax-upc_category .grid-entry .entry-summary, body.post-type-archive-upc_product .loop-entry .entry-summary, body.post-type-archive-upc_product .grid-entry .entry-summary { padding-top:12px!important; padding-bottom:12px!important; } /* Keep read-more/footer links aligned with the padded text. */ body.category .loop-entry .entry-footer, body.category .grid-entry .entry-footer, body.tax-upc_category .loop-entry .entry-footer, body.tax-upc_category .grid-entry .entry-footer, body.post-type-archive-upc_product .loop-entry .entry-footer, body.post-type-archive-upc_product .grid-entry .entry-footer { padding-left:16px!important; padding-right:16px!important; padding-bottom:14px!important; } /* ========================================================= v1.5.1 – archive product-card titles use normal weight. Keep the metallic title strip, its size, alignment and borders; remove only the heavy bold appearance from card headings. ========================================================= */ body.category .loop-entry .entry-title, body.category .loop-entry h2, body.category .grid-entry .entry-title, body.category .grid-entry h2, body.tax-upc_category .loop-entry .entry-title, body.tax-upc_category .loop-entry h2, body.tax-upc_category .grid-entry .entry-title, body.tax-upc_category .grid-entry h2, body.post-type-archive-upc_product .loop-entry .entry-title, body.post-type-archive-upc_product .loop-entry h2, body.post-type-archive-upc_product .grid-entry .entry-title, body.post-type-archive-upc_product .grid-entry h2 { font-weight:400!important; } body.category .loop-entry .entry-title a, body.category .loop-entry h2 a, body.category .grid-entry .entry-title a, body.category .grid-entry h2 a, body.tax-upc_category .loop-entry .entry-title a, body.tax-upc_category .loop-entry h2 a, body.tax-upc_category .grid-entry .entry-title a, body.tax-upc_category .grid-entry h2 a, body.post-type-archive-upc_product .loop-entry .entry-title a, body.post-type-archive-upc_product .loop-entry h2 a, body.post-type-archive-upc_product .grid-entry .entry-title a, body.post-type-archive-upc_product .grid-entry h2 a { font-weight:400!important; } /* ========================================================= v1.5.2 – strengthen the H2 underline on inner pages. Match the visible 5 px RAL 8012 side-frame thickness. ========================================================= */ body.simb-metal-design:not(.home):not(.front-page) .entry-content h2 { border-bottom-width:5px!important; border-bottom-style:solid!important; border-image:linear-gradient(90deg,var(--simb-ral8012) 0%,#C7CCCE 65%,transparent 100%) 1!important; } /* ========================================================= v1.5.3 – single product title sits inside the main frame, directly above the product gallery / large image. ========================================================= */ body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { display:block!important; box-sizing:border-box!important; width:100%!important; margin:0 0 18px!important; padding:18px 28px 12px!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } body.simb-metal-design.single-upc_product .simb-product-title-before-gallery .entry-title, body.simb-metal-design.single-product .simb-product-title-before-gallery .entry-title { margin:0!important; padding:0!important; color:#30363A!important; font-size:clamp(25px,2.5vw,38px)!important; line-height:1.2!important; font-weight:600!important; text-align:left!important; text-shadow:none!important; } @media(max-width:767px) { body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { padding:14px 16px 10px!important; margin-bottom:12px!important; } body.simb-metal-design.single-upc_product .simb-product-title-before-gallery .entry-title, body.simb-metal-design.single-product .simb-product-title-before-gallery .entry-title { font-size:24px!important; } } /* ========================================================= v1.5.4 – compact single product heading and remove duplicate title rendered again below the gallery by the product content. ========================================================= */ body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { margin:0 0 9px!important; padding:9px 28px 6px!important; } @media(max-width:767px) { body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { margin-bottom:6px!important; padding:7px 16px 5px!important; } } /* ========================================================= v1.5.5 – halve the vertical whitespace around the single product title. Keep its typography and horizontal spacing. ========================================================= */ body.simb-metal-design.single-upc_product .entry-content, body.simb-metal-design.single-product .entry-content { padding-top:15px!important; padding-bottom:20px!important; } body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { margin-top:0!important; margin-bottom:4.5px!important; padding-top:4.5px!important; padding-bottom:3px!important; } @media(max-width:767px) { body.simb-metal-design.single-upc_product .entry-content, body.simb-metal-design.single-product .entry-content { padding-top:10px!important; padding-bottom:14px!important; } body.simb-metal-design.single-upc_product .simb-product-title-before-gallery, body.simb-metal-design.single-product .simb-product-title-before-gallery { margin-bottom:3px!important; padding-top:3.5px!important; padding-bottom:2.5px!important; } } /* ========================================================= v2.0.0 – restore broad layout at 96% viewport width. Based directly on the user's supplied v1.5.5 package. Remove the old 1700px ceiling; do not change page content, title height, typography, gallery sizing or card internals. ========================================================= */ /* Single pages, product pages and standard inner-page frame. */ body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap { box-sizing:border-box!important; width:96%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } /* Homepage title fascia and content panel: both exactly 96%. */ body.simb-metal-design.home .entry-hero, body.simb-metal-design.front-page .entry-hero, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap { box-sizing:border-box!important; width:96%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } /* Category/archive listing area: let the card grid use the same broad 96% canvas instead of Kadence's narrower max-width. */ body.simb-metal-design.archive .content-container, body.simb-metal-design.blog .content-container, body.simb-metal-design.tax-upc_category .content-container, body.simb-metal-design.post-type-archive-upc_product .content-container { box-sizing:border-box!important; width:96%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } /* Do not let the content column impose an additional width cap. */ body.simb-metal-design.archive .content-area, body.simb-metal-design.blog .content-area, body.simb-metal-design.tax-upc_category .content-area, body.simb-metal-design.post-type-archive-upc_product .content-area, body.simb-metal-design.archive #primary, body.simb-metal-design.blog #primary, body.simb-metal-design.tax-upc_category #primary, body.simb-metal-design.post-type-archive-upc_product #primary { box-sizing:border-box!important; width:100%!important; max-width:none!important; } /* Mobile remains nearly full width with safe side gutters. */ @media(max-width:767px) { body.simb-metal-design:not(.home):not(.front-page) .entry-content-wrap, body.simb-metal-design.home .entry-hero, body.simb-metal-design.front-page .entry-hero, body.simb-metal-design.home .entry-content-wrap, body.simb-metal-design.front-page .entry-content-wrap, body.simb-metal-design.archive .content-container, body.simb-metal-design.blog .content-container, body.simb-metal-design.tax-upc_category .content-container, body.simb-metal-design.post-type-archive-upc_product .content-container { width:calc(100% - 18px)!important; } } /* v2.0.0 correction: remove Kadence's parent max-width on single pages. The previous 96% rule was applied to the frame, but its containing layout remained narrow. Expand the complete content chain first. */ body.simb-metal-design.single-upc_product #inner-wrap, body.simb-metal-design.single-product #inner-wrap, body.simb-metal-design.single-upc_product #primary, body.simb-metal-design.single-product #primary, body.simb-metal-design.single-upc_product .content-area, body.simb-metal-design.single-product .content-area, body.simb-metal-design.single-upc_product .content-container, body.simb-metal-design.single-product .content-container, body.simb-metal-design.single-upc_product #main, body.simb-metal-design.single-product #main, body.simb-metal-design.single-upc_product .site-main, body.simb-metal-design.single-product .site-main, body.simb-metal-design.single-upc_product article, body.simb-metal-design.single-product article { box-sizing:border-box!important; width:100%!important; max-width:none!important; min-width:0!important; } body.simb-metal-design.single-upc_product #primary, body.simb-metal-design.single-product #primary, body.simb-metal-design.single-upc_product .content-area, body.simb-metal-design.single-product .content-area, body.simb-metal-design.single-upc_product .content-container, body.simb-metal-design.single-product .content-container { margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; } body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing:border-box!important; width:96vw!important; max-width:none!important; margin-left:2vw!important; margin-right:2vw!important; } @media(max-width:767px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { width:calc(100vw - 18px)!important; margin-left:9px!important; margin-right:9px!important; } } /* v2.0.2: Keep the 96vw expansion strictly inside Kadence's main content branch. Never reset .site-container globally: Kadence also uses that class in header/navigation and it must retain its layout. */ body.simb-metal-design.single-upc_product, body.simb-metal-design.single-product { overflow-x:hidden!important; } body.simb-metal-design.single-upc_product main#inner-wrap, body.simb-metal-design.single-product main#inner-wrap, body.simb-metal-design.single-upc_product #primary, body.simb-metal-design.single-product #primary, body.simb-metal-design.single-upc_product #primary > .content-container, body.simb-metal-design.single-product #primary > .content-container, body.simb-metal-design.single-upc_product #main, body.simb-metal-design.single-product #main, body.simb-metal-design.single-upc_product #main > article, body.simb-metal-design.single-product #main > article { box-sizing:border-box!important; width:100%!important; max-width:none!important; min-width:0!important; } body.simb-metal-design.single-upc_product #primary > .content-container, body.simb-metal-design.single-product #primary > .content-container { margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; } body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing:border-box!important; display:block!important; width:96vw!important; max-width:96vw!important; min-width:0!important; margin-left:2vw!important; margin-right:2vw!important; } @media(max-width:767px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { width:calc(100vw - 18px)!important; max-width:calc(100vw - 18px)!important; margin-left:9px!important; margin-right:9px!important; } } /* ========================================================= v2.0.3 – MOBILE CENTERING FIX FOR THE THREE PRODUCT PAGES. Scope only single product pages. Keep the Kadence header/menu untouched. Expand the content branch to viewport width, then center the framed product panel with equal side gutters. ========================================================= */ @media (max-width: 767px) { body.simb-metal-design.single-upc_product #primary, body.simb-metal-design.single-product #primary, body.simb-metal-design.single-upc_product .content-area, body.simb-metal-design.single-product .content-area, body.simb-metal-design.single-upc_product .content-container, body.simb-metal-design.single-product .content-container, body.simb-metal-design.single-upc_product #main, body.simb-metal-design.single-product #main, body.simb-metal-design.single-upc_product .site-main, body.simb-metal-design.single-product .site-main, body.simb-metal-design.single-upc_product #main > article, body.simb-metal-design.single-product #main > article { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; left: auto !important; right: auto !important; transform: none !important; } body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing: border-box !important; display: block !important; float: none !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; } } /* v2.0.4 – center the product frame against its actual containing column. Auto margins alone were ineffective because Kadence's mobile content column is narrower than the viewport. */ @media (max-width: 767px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { position: relative !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* ========================================================= v2.0.5 – unified tablet + mobile centering. Center the product frame within its available layout column at ALL narrow/tablet breakpoints. Do not touch the header. ========================================================= */ @media (max-width: 1024px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing: border-box !important; display: block !important; float: none !important; position: relative !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; width: 96vw !important; max-width: 96vw !important; } } @media (max-width: 767px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* v2.0.6 – widen mobile single-product content to 96% of viewport. Previous mobile override left the frame visibly too narrow. */ @media (max-width: 767px) { body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing: border-box !important; width: 96vw !important; max-width: 96vw !important; min-width: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; } body.simb-metal-design.single-upc_product .entry-content, body.simb-metal-design.single-product .entry-content { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================= v2.0.7 – one explicit tablet + mobile rule: 96% viewport width and true viewport centering. Keep the site header/navigation outside this adjustment. ========================================================= */ @media (max-width: 1024px) { body.simb-metal-design.single-upc_product main#inner-wrap, body.simb-metal-design.single-product main#inner-wrap { box-sizing: border-box !important; display: block !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } body.simb-metal-design.single-upc_product #primary, body.simb-metal-design.single-product #primary, body.simb-metal-design.single-upc_product #primary > .content-container, body.simb-metal-design.single-product #primary > .content-container, body.simb-metal-design.single-upc_product #main, body.simb-metal-design.single-product #main, body.simb-metal-design.single-upc_product #main > article, body.simb-metal-design.single-product #main > article, body.simb-metal-design.single-upc_product article, body.simb-metal-design.single-product article, body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { box-sizing: border-box !important; display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; left: auto !important; right: auto !important; transform: none !important; } body.simb-metal-design.single-upc_product .entry-content-wrap, body.simb-metal-design.single-product .entry-content-wrap { width: 96vw !important; max-width: 96vw !important; margin-left: 2vw !important; margin-right: 2vw !important; } }