.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================= MAJSTER SZKLARZ – style strony głównej Wklej całość w: Elementor → Ustawienia witryny → Własny CSS (lub Wygląd → Dostosuj → Dodatkowy CSS). Wszystkie klasy mają prefiks .ms- żeby nie kolidowały z motywem. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); .ms { --ms-ink: #1a1c1f; --ms-ink-2: #24272b; --ms-ink-3: #202327; --ms-paper: #f4f2ee; --ms-white: #ffffff; --ms-orange: #f7931e; --ms-orange-hi: #ffb15a; --ms-rust: #c2410c; --ms-text-muted: #5f636a; --ms-text-muted-dark: #a9adb3; --ms-line: #d9d5ce; --ms-line-dark: rgba(255, 255, 255, 0.1); --ms-gutter: clamp(20px, 5vw, 80px); --ms-font: 'Archivo', system-ui, sans-serif; --ms-mono: 'JetBrains Mono', ui-monospace, monospace; font-family: var(--ms-font); line-height: 1.5; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .ms *, .ms *::before, .ms *::after { box-sizing: border-box; } .ms h1, .ms h2, .ms h3, .ms p, .ms ul, .ms ol, .ms figure { margin: 0; padding: 0; font-family: inherit; color: inherit; line-height: inherit; } .ms ul, .ms ol { list-style: none; } .ms img { display: block; max-width: none; border: 0; border-radius: 0; box-shadow: none; } .ms a, .ms a:hover, .ms a:focus { text-decoration: none; color: inherit; } .ms button, .ms button:hover, .ms button:focus { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; } /* Uwaga: reguły komponentów poniżej mają dopisek :not(#ms-z) – podnosi on ich priorytet, żeby kolory i odstępy motywu / Elementora ich nie nadpisywały. */ .ms :focus-visible { outline: 2px solid var(--ms-orange); outline-offset: 3px; } /* ---------- elementy wspólne ---------- */ .ms-wrap:not(#ms-z){ width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--ms-gutter); padding-right: var(--ms-gutter); } .ms-eyebrow:not(#ms-z){ display: inline-flex; align-items: center; gap: 14px; font-family: var(--ms-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ms-rust); } .ms-eyebrow:not(#ms-z)::before{ content: ""; width: 66px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+") no-repeat center / contain; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+") no-repeat center / contain; } .ms-eyebrow--light:not(#ms-z){ color: var(--ms-orange); } .ms-h2:not(#ms-z){ font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-accent:not(#ms-z){ color: var(--ms-rust); } .ms-accent--light:not(#ms-z){ color: var(--ms-orange); } /* miarka (taśma miernicza) – pozioma */ .ms-tape:not(#ms-z){ display: block; height: 14px; border-bottom: 1px solid var(--ms-tape-base, rgba(255,255,255,0.55)); background: repeating-linear-gradient(to right, var(--ms-tape-major, #f7931e) 0 2px, transparent 2px 40px) left bottom / 100% 13px no-repeat, repeating-linear-gradient(to right, var(--ms-tape-mid, rgba(255,255,255,0.65)) 0 1px, transparent 1px 20px) left bottom / 100% 8px no-repeat, repeating-linear-gradient(to right, var(--ms-tape-minor, rgba(255,255,255,0.4)) 0 1px, transparent 1px 4px) left bottom / 100% 4px no-repeat; } .ms-tape--rtl:not(#ms-z){ background-position: right bottom, right bottom, right bottom; transform: scaleX(-1); } .ms-tape--paper:not(#ms-z){ --ms-tape-base: #c9c4bc; --ms-tape-major: #c2410c; --ms-tape-mid: #b8b3ab; --ms-tape-minor: #cfcac2; } /* przyciski */ .ms-btn:not(#ms-z){ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 4px; font-family: var(--ms-font); font-size: 16px; font-weight: 600; line-height: 1; transition: background .2s, color .2s, border-color .2s, transform .2s; } .ms-btn:not(#ms-z) svg{ flex: none; transition: transform .2s; } .ms-btn:not(#ms-z):hover svg{ transform: translateX(3px); } .ms-btn--primary:not(#ms-z){ background: var(--ms-orange); color: var(--ms-ink); box-shadow: 0 12px 32px rgba(247,147,30,0.25); } .ms-btn--primary:not(#ms-z):hover{ background: var(--ms-orange-hi); color: var(--ms-ink); } .ms-btn--ghost:not(#ms-z){ border: 1px solid #4a4f55; color: #f4f2ee; } .ms-btn--ghost:not(#ms-z):hover{ border-color: var(--ms-orange); color: #fff; } .ms-btn--dark:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; } .ms-btn--dark:not(#ms-z):hover{ background: #000; color: #fff; } .ms-link-line:not(#ms-z){ font-weight: 600; color: #f4f2ee; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-color: var(--ms-orange) !important; } /* ========================================================= 01 · MENU GŁÓWNE ========================================================= */ .ms-header:not(#ms-z){ position: sticky; top: 0; z-index: 1000; background: var(--ms-ink); color: #f4f2ee; } .ms-topbar:not(#ms-z){ background: #141518; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ms-text-muted-dark); } .ms-topbar:not(#ms-z) .ms-wrap{ min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; } .ms-topbar__loc:not(#ms-z){ display: inline-flex; align-items: center; gap: 8px; } .ms-topbar__links:not(#ms-z){ display: inline-flex; gap: 22px; } .ms-topbar:not(#ms-z) a:hover{ color: #fff; } .ms-bar:not(#ms-z){ position: relative; background: var(--ms-ink); border-bottom: 1px solid rgba(255,255,255,0.08); } .ms-bar:not(#ms-z) .ms-wrap{ min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ms-bar__tape:not(#ms-z){ position: absolute; left: 0; right: 0; bottom: 0; height: 8px; pointer-events: none; background: repeating-linear-gradient(to right, rgba(247,147,30,0.75) 0 1.5px, transparent 1.5px 40px) left bottom / 100% 8px no-repeat, repeating-linear-gradient(to right, rgba(255,255,255,0.22) 0 1px, transparent 1px 8px) left bottom / 100% 4px no-repeat; } .ms-logo:not(#ms-z){ display: inline-flex; align-items: center; gap: 14px; color: #f4f2ee; flex: none; } .ms-logo__text:not(#ms-z){ display: flex; flex-direction: column; line-height: 1; } .ms-logo__main:not(#ms-z){ font-size: 21px; font-weight: 800; letter-spacing: 0.02em; } .ms-logo__sub:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.42em; color: var(--ms-orange); margin-top: 4px; } .ms-nav:not(#ms-z){ display: flex; align-self: stretch; } .ms-nav__item:not(#ms-z){ position: relative; display: flex; } .ms-nav__link:not(#ms-z){ position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px; min-height: 84px; white-space: nowrap; font-size: 15px; font-weight: 600; color: #c9ccd1; transition: color .2s; } .ms-nav__num:not(#ms-z){ font-family: var(--ms-mono); font-size: 11px; color: #6b7077; transition: color .2s; } .ms-nav__chev:not(#ms-z){ transition: transform .25s; } .ms-nav__link:not(#ms-z)::after{ content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--ms-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .ms-nav__link:not(#ms-z)::before{ content: ""; position: absolute; left: 50%; bottom: 2px; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--ms-orange); opacity: 0; transition: opacity .3s; } .ms-nav__link:not(#ms-z):hover, .ms-nav__link:not(#ms-z):focus-visible, .ms-nav__link:not(#ms-z)[aria-current="page"], .ms-nav__link:not(#ms-z)[aria-expanded="true"]{ color: #fff; } .ms-nav__link:not(#ms-z):hover .ms-nav__num, .ms-nav__link:not(#ms-z)[aria-current="page"] .ms-nav__num, .ms-nav__link:not(#ms-z)[aria-expanded="true"] .ms-nav__num{ color: var(--ms-orange); } .ms-nav__link:not(#ms-z):hover::after, .ms-nav__link:not(#ms-z)[aria-current="page"]::after, .ms-nav__link:not(#ms-z)[aria-expanded="true"]::after{ transform: scaleX(1); } .ms-nav__link:not(#ms-z):hover::before, .ms-nav__link:not(#ms-z)[aria-current="page"]::before, .ms-nav__link:not(#ms-z)[aria-expanded="true"]::before{ opacity: 1; } .ms-nav__link:not(#ms-z)[aria-expanded="true"] .ms-nav__chev{ transform: rotate(180deg); } .ms-actions:not(#ms-z){ display: flex; align-items: center; gap: 12px; flex: none; } .ms-actions:not(#ms-z) .ms-btn{ min-height: 48px; padding: 0 18px; font-size: 15px; box-shadow: none; } .ms-burger:not(#ms-z){ display: none; width: 48px; height: 48px; border: 1px solid #4a4f55; border-radius: 4px; align-items: center; justify-content: center; color: #f4f2ee; } .ms-burger:not(#ms-z) .ms-ico-close{ display: none; } .ms-header:not(#ms-z).is-drawer .ms-burger .ms-ico-open{ display: none; } .ms-header:not(#ms-z).is-drawer .ms-burger .ms-ico-close{ display: block; } /* mega menu */ .ms-mega:not(#ms-z){ position: absolute; left: 0; right: 0; top: 100%; background: var(--ms-ink-3); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 60px rgba(0,0,0,0.45); display: none; } .ms-header:not(#ms-z).is-mega .ms-mega{ display: block; animation: ms-drop .3s ease-out; } @keyframes ms-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .ms-mega:not(#ms-z) .ms-wrap{ display: flex; flex-wrap: wrap; gap: 40px; padding-top: 32px; padding-bottom: 36px; } .ms-mega__col:not(#ms-z){ display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ms-mega__col--list:not(#ms-z){ flex: 1 1 380px; } .ms-mega__col--tiles:not(#ms-z){ flex: 1.5 1 560px; } .ms-mega__label:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.22em; color: #8a8f96; } .ms-mega__links:not(#ms-z){ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; } .ms-mega__links:not(#ms-z) a{ display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 4px; color: #e2e4e7; font-size: 15px; transition: background .2s; } .ms-mega__links:not(#ms-z) a::before{ content: ""; width: 6px; height: 6px; background: var(--ms-orange); transform: skewX(-12deg); flex: none; } .ms-mega__links:not(#ms-z) a:hover{ background: rgba(255,255,255,0.05); color: #fff; } .ms-mega__cta:not(#ms-z){ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--ms-ink); border: 1px solid rgba(247,147,30,0.4); border-radius: 4px; color: #f4f2ee; } .ms-mega__cta:not(#ms-z) strong{ display: block; font-weight: 700; } .ms-mega__cta:not(#ms-z) span span{ display: block; font-size: 14px; color: var(--ms-orange); margin-top: 2px; } .ms-mega__tiles:not(#ms-z){ display: flex; gap: 6px; height: 200px; padding: 0 22px; } .ms-skewtile:not(#ms-z){ position: relative; flex: 1; min-width: 0; overflow: hidden; transform: skewX(-12deg); border-radius: 2px; color: #f4f2ee; } .ms-skewtile:not(#ms-z) img{ position: absolute; top: 0; left: -50px; width: calc(100% + 100px); height: 100%; object-fit: cover; transform: skewX(12deg); transition: transform .5s; } .ms-skewtile:not(#ms-z):hover img{ transform: skewX(12deg) scale(1.08); } .ms-skewtile:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,28,31,0) 30%, rgba(26,28,31,0.85) 100%); } .ms-skewtile__txt:not(#ms-z){ position: absolute; z-index: 1; left: 22px; right: 10px; bottom: 14px; transform: skewX(12deg); display: flex; flex-direction: column; gap: 2px; } .ms-skewtile__num:not(#ms-z){ font-family: var(--ms-mono); font-size: 11px; color: var(--ms-orange); } .ms-skewtile__title:not(#ms-z){ font-size: 15px; font-weight: 700; } /* szuflada mobilna */ .ms-drawer:not(#ms-z){ display: none; position: fixed; left: 0; right: 0; top: 72px; bottom: 0; background: var(--ms-ink); flex-direction: column; overflow-y: auto; z-index: 999; } .ms-header:not(#ms-z).is-drawer .ms-drawer{ display: flex; animation: ms-slide .3s ease-out; } @keyframes ms-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } .ms-drawer__nav:not(#ms-z){ flex: 1; padding: 12px 20px 0; } .ms-drawer__row:not(#ms-z){ display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--ms-line-dark); color: #f4f2ee; text-align: left; } .ms-drawer__num:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; color: #6b7077; } .ms-drawer__row--open:not(#ms-z) .ms-drawer__num{ color: var(--ms-orange); } .ms-drawer__label:not(#ms-z){ flex: 1; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .ms-drawer__chev:not(#ms-z){ transition: transform .25s; } .ms-drawer__row:not(#ms-z)[aria-expanded="true"] .ms-drawer__chev{ transform: rotate(180deg); } .ms-drawer__sub:not(#ms-z){ display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 0 18px 28px; border-bottom: 1px solid var(--ms-line-dark); } .ms-drawer__sub:not(#ms-z).is-open{ display: grid; } .ms-drawer__sub:not(#ms-z) a{ position: relative; display: flex; align-items: flex-end; height: 64px; padding: 8px 10px; border-radius: 3px; overflow: hidden; color: #f4f2ee; font-size: 14px; font-weight: 700; } .ms-drawer__sub:not(#ms-z) a img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ms-drawer__sub:not(#ms-z) a::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,28,31,0.1), rgba(26,28,31,0.85)); } .ms-drawer__sub:not(#ms-z) a span{ position: relative; z-index: 1; } .ms-drawer__sub:not(#ms-z) a.ms-drawer__all{ border: 1px dashed #4a4f55; justify-content: center; align-items: center; color: var(--ms-orange); font-weight: 600; } .ms-drawer__sub:not(#ms-z) a.ms-drawer__all::after{ display: none; } .ms-drawer__foot:not(#ms-z){ flex: none; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 10px; background: #141518; } .ms-drawer__foot:not(#ms-z) .ms-btn{ width: 100%; min-height: 54px; } .ms-drawer__loc:not(#ms-z){ text-align: center; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.06em; color: #8a8f96; padding-top: 4px; } @media (max-width: 1180px) { .ms-topbar:not(#ms-z), .ms-nav:not(#ms-z), .ms-actions:not(#ms-z), .ms-mega:not(#ms-z){ display: none !important; } .ms-burger:not(#ms-z){ display: inline-flex; } .ms-bar:not(#ms-z) .ms-wrap{ min-height: 72px; } } @media (min-width: 1181px) { .ms-drawer:not(#ms-z){ display: none !important; } } /* ========================================================= 02 · HERO ========================================================= */ .ms-hero:not(#ms-z){ position: relative; min-height: 860px; display: flex; flex-direction: column; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; } .ms-hero__bg:not(#ms-z){ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; } .ms-hero__shade:not(#ms-z){ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,28,31,0.97) 0%, rgba(26,28,31,0.9) 34%, rgba(26,28,31,0.35) 62%, rgba(26,28,31,0.1) 100%); } .ms-hero__grid:not(#ms-z){ position: absolute; inset: 0 55% 0 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; } .ms-hero__diamond:not(#ms-z){ position: absolute; left: -120px; top: 120px; width: 520px; height: 520px; border: 1px solid rgba(247,147,30,0.18); transform: rotate(45deg); } .ms-glint:not(#ms-z){ position: absolute; top: -10%; bottom: -10%; transform: rotate(16deg); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,var(--a,0.1)) 50%, rgba(255,255,255,0) 100%); pointer-events: none; } .ms-cross:not(#ms-z){ position: absolute; width: 18px; height: 18px; pointer-events: none; } .ms-cross:not(#ms-z)::before, .ms-cross:not(#ms-z)::after{ content: ""; position: absolute; background: var(--c, rgba(255,255,255,0.7)); } .ms-cross:not(#ms-z)::before{ left: 8px; top: 0; width: 1.5px; height: 18px; } .ms-cross:not(#ms-z)::after{ top: 8px; left: 0; height: 1.5px; width: 18px; } .ms-corner:not(#ms-z){ position: absolute; width: 28px; height: 28px; pointer-events: none; } .ms-corner--tr:not(#ms-z){ top: 40px; right: 40px; border-top: 2px solid var(--ms-orange); border-right: 2px solid var(--ms-orange); } .ms-corner--tl:not(#ms-z){ top: 40px; left: 52%; border-top: 2px solid rgba(255,255,255,0.5); border-left: 2px solid rgba(255,255,255,0.5); } .ms-hero__vruler:not(#ms-z){ position: absolute; right: 40px; top: 112px; bottom: 150px; display: flex; align-items: center; gap: 10px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.24em; color: rgba(255,255,255,0.8); pointer-events: none; } .ms-hero__vruler-label:not(#ms-z){ writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 4px; background: rgba(26,28,31,0.6); border-radius: 3px; } .ms-hero__vruler-tape:not(#ms-z){ align-self: stretch; width: 18px; border-right: 1px solid rgba(255,255,255,0.6); background: repeating-linear-gradient(to bottom, #f7931e 0 2px, transparent 2px 40px) right top / 16px 100% no-repeat, repeating-linear-gradient(to bottom, rgba(255,255,255,0.7) 0 1px, transparent 1px 20px) right top / 10px 100% no-repeat, repeating-linear-gradient(to bottom, rgba(255,255,255,0.45) 0 1px, transparent 1px 4px) right top / 5px 100% no-repeat; } .ms-spot:not(#ms-z){ position: absolute; display: flex; align-items: center; gap: 10px; } .ms-spot__dot:not(#ms-z){ position: relative; width: 14px; height: 14px; flex: none; } .ms-spot__dot:not(#ms-z)::before, .ms-spot__dot:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ms-orange); } .ms-spot__dot:not(#ms-z)::before{ animation: ms-ping 1.8s ease-out infinite; animation-delay: var(--d, 0s); } .ms-spot__dot:not(#ms-z)::after{ border: 3px solid var(--ms-ink); } @keyframes ms-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } } .ms-spot__line:not(#ms-z){ width: 28px; height: 1px; background: rgba(255,255,255,0.7); } .ms-spot__label:not(#ms-z){ padding: 8px 12px; background: rgba(26,28,31,0.85); border-radius: 4px; font-size: 13px; white-space: nowrap; } .ms-spot__label:not(#ms-z) b{ font-weight: 600; } .ms-spot__label:not(#ms-z) span{ color: var(--ms-text-muted-dark); } .ms-hero__main:not(#ms-z){ position: relative; flex: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px; padding-top: 112px; padding-bottom: 48px; } .ms-hero__copy:not(#ms-z){ flex: 0 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 28px; } .ms-hero__title:not(#ms-z){ font-size: clamp(46px, 6.4vw, 96px); line-height: 0.94; font-weight: 800; letter-spacing: -0.035em; color: #f4f2ee; } .ms-hero__title:not(#ms-z) em{ font-style: normal; color: var(--ms-orange); position: relative; display: inline-block; } .ms-hero__title:not(#ms-z) em svg{ position: absolute; left: 0; bottom: -10px; width: 100%; height: 14px; } .ms-hero__lead:not(#ms-z){ max-width: 500px; font-size: 19px; line-height: 1.55; color: #c3c6cb; } .ms-hero__ctas:not(#ms-z){ display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 8px; } .ms-hero__ctas:not(#ms-z) .ms-btn{ min-height: 56px; padding: 0 28px; font-size: 17px; } .ms-guarantee:not(#ms-z){ display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; margin-top: 8px; padding: 14px 18px; background: rgba(36,39,43,0.8); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; font-size: 15px; color: #c3c6cb; } .ms-guarantee__ico:not(#ms-z){ width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(247,147,30,0.15); display: flex; align-items: center; justify-content: center; } .ms-guarantee:not(#ms-z) strong{ color: #f4f2ee; font-weight: 600; } .ms-pills:not(#ms-z){ display: flex; flex-wrap: wrap; gap: 8px; margin-right: 48px; } .ms-pill:not(#ms-z){ display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(26,28,31,0.7); border: 1px solid rgba(255,255,255,0.18); color: #e2e4e7; font-size: 14px; transition: background .2s, border-color .2s; } .ms-pill:not(#ms-z):hover{ border-color: var(--ms-orange); color: #fff; } .ms-pill:not(#ms-z).is-active{ background: var(--ms-orange); border-color: var(--ms-orange); color: var(--ms-ink); font-weight: 600; } .ms-hero__measure:not(#ms-z){ position: relative; display: flex; align-items: center; gap: 16px; padding-bottom: 18px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.24em; } .ms-hero__measure:not(#ms-z) .ms-tape{ flex: 1; height: 18px; } .ms-hero__measure-label:not(#ms-z){ padding: 6px 12px; background: rgba(26,28,31,0.7); border-radius: 3px; color: #f4f2ee; font-weight: 500; white-space: nowrap; } .ms-stats:not(#ms-z){ position: relative; background: rgba(20,22,25,0.88); border-top: 1px solid rgba(255,255,255,0.1); } .ms-stats:not(#ms-z)::before{ content: ""; position: absolute; top: -1px; left: 0; width: 220px; height: 2px; background: var(--ms-orange); } .ms-stats:not(#ms-z) .ms-wrap{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ms-stat:not(#ms-z){ display: flex; align-items: center; gap: 16px; padding: 26px 24px; border-left: 1px solid rgba(255,255,255,0.1); } .ms-stat:not(#ms-z):first-child{ padding-left: 0; border-left: 0; } .ms-stat__val:not(#ms-z){ font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .ms-stat__val:not(#ms-z) small{ color: var(--ms-orange); font-size: 17px; } .ms-stat__txt:not(#ms-z){ font-size: 14px; color: var(--ms-text-muted-dark); } @media (max-width: 1000px) { .ms-hero:not(#ms-z){ min-height: 0; } .ms-hero__shade:not(#ms-z){ background: linear-gradient(180deg, rgba(26,28,31,0.75) 0%, rgba(26,28,31,0.92) 60%, rgba(26,28,31,0.97) 100%); } .ms-spot:not(#ms-z), .ms-hero__vruler:not(#ms-z), .ms-cross:not(#ms-z), .ms-corner:not(#ms-z), .ms-hero__diamond:not(#ms-z), .ms-hero__grid:not(#ms-z){ display: none; } .ms-hero__main:not(#ms-z){ padding-top: 72px; } .ms-pills:not(#ms-z){ margin-right: 0; } .ms-stats:not(#ms-z) .ms-wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-stat:not(#ms-z){ padding: 20px 16px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); } .ms-stat:not(#ms-z):first-child{ padding-left: 16px; } } @media (max-width: 560px) { .ms-hero__measure-label:not(#ms-z){ font-size: 9px; letter-spacing: 0.14em; } .ms-stats:not(#ms-z) .ms-wrap{ grid-template-columns: 1fr; } } /* ========================================================= 03 · NASZE USŁUGI ========================================================= */ .ms-services:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0 120px; } .ms-services:not(#ms-z) .ms-wrap{ display: flex; flex-direction: column; gap: 56px; } .ms-sechead:not(#ms-z){ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; } .ms-sechead__title:not(#ms-z){ display: flex; flex-direction: column; gap: 20px; flex: 1 1 640px; min-width: 0; } .ms-sechead__lead:not(#ms-z){ flex: 0 1 400px; font-size: 18px; line-height: 1.55; color: var(--ms-text-muted); } .ms-acc:not(#ms-z){ position: relative; height: 620px; background: var(--ms-ink); border-radius: 6px; overflow: hidden; } .ms-acc__track:not(#ms-z){ position: absolute; top: 4px; bottom: 4px; left: 66px; right: 66px; display: flex; gap: 4px; } .ms-acc__item:not(#ms-z){ position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; transform: skewX(-12deg); transition: flex-grow .6s cubic-bezier(.2,.7,.2,1); color: #f4f2ee; } .ms-acc__item:not(#ms-z).is-active{ flex-grow: 6; } .ms-acc__img:not(#ms-z){ position: absolute; top: 0; left: -140px; width: calc(100% + 280px); height: 100%; object-fit: cover; transform: skewX(12deg); } .ms-acc__item:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,28,31,0.25) 0%, rgba(26,28,31,0.75) 100%); transition: opacity .5s; } .ms-acc__item:not(#ms-z).is-active::before{ background: linear-gradient(180deg, rgba(26,28,31,0.05) 35%, rgba(26,28,31,0.88) 100%); } .ms-acc__item:not(#ms-z)::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: var(--ms-orange); opacity: 0; transition: opacity .4s; } .ms-acc__item:not(#ms-z).is-active::after{ opacity: 1; } .ms-acc__inner:not(#ms-z){ position: absolute; inset: 0; z-index: 3; transform: skewX(12deg); } .ms-acc__num:not(#ms-z){ position: absolute; top: 26px; left: 84px; font-family: var(--ms-mono); font-size: 13px; color: rgba(255,255,255,0.8); } .ms-acc__item:not(#ms-z).is-active .ms-acc__num{ color: var(--ms-orange); } .ms-acc__label:not(#ms-z){ position: absolute; top: 50%; left: 50%; writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(192deg); font-size: 20px; font-weight: 700; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,0.5); transition: opacity .3s; } .ms-acc__item:not(#ms-z).is-active .ms-acc__label{ opacity: 0; } .ms-acc__body:not(#ms-z){ position: absolute; left: 90px; right: 120px; bottom: 48px; max-width: 560px; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s .15s, transform .4s .15s, visibility 0s .55s; } .ms-acc__item:not(#ms-z).is-active .ms-acc__body{ opacity: 1; visibility: visible; transform: none; transition: opacity .45s .2s, transform .45s .2s, visibility 0s; } .ms-acc__title:not(#ms-z){ font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; transform: skewX(-12deg); transform-origin: left bottom; } .ms-acc__desc:not(#ms-z){ font-size: 16px; line-height: 1.55; color: #d6d8dc; } .ms-acc__btn:not(#ms-z){ align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; box-shadow: none; } .ms-acc__tape:not(#ms-z){ position: absolute; left: 24px; right: 24px; bottom: 14px; height: 12px; pointer-events: none; z-index: 4; --ms-tape-base: rgba(255,255,255,0.35); --ms-tape-mid: rgba(255,255,255,0.4); --ms-tape-minor: rgba(255,255,255,0.25); } .ms-cards:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-card:not(#ms-z){ position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px 18px 14px; background: var(--ms-white); color: var(--ms-ink); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: transform .25s, box-shadow .25s; } .ms-card:not(#ms-z):hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(26,28,31,0.12); } .ms-card__cut:not(#ms-z){ position: absolute; top: 0; right: 0; width: 34px; height: 34px; } .ms-card__img:not(#ms-z){ width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ms-orange); } .ms-card__txt:not(#ms-z){ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ms-card__title:not(#ms-z){ font-size: 16px; font-weight: 700; } .ms-card__desc:not(#ms-z){ font-size: 13px; line-height: 1.4; color: var(--ms-text-muted); } .ms-card__arrow:not(#ms-z){ flex: none; transition: transform .2s; } .ms-card:not(#ms-z):hover .ms-card__arrow{ transform: translateX(3px); } .ms-card:not(#ms-z) .ms-tape{ position: absolute; left: 14px; right: 14px; bottom: 6px; height: 6px; background-size: 100% 6px, 100% 3px, 100% 3px; } .ms-card--dark:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 14px 18px; overflow: hidden; } .ms-card--dark:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; } .ms-card--dark:not(#ms-z) .ms-card__title{ font-weight: 800; position: relative; } .ms-card--dark:not(#ms-z) .ms-card__desc{ color: var(--ms-orange); position: relative; } .ms-card__go:not(#ms-z){ position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ms-orange); color: var(--ms-ink); display: flex; align-items: center; justify-content: center; } @media (max-width: 1100px) { .ms-cards:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .ms-services:not(#ms-z){ padding: 80px 0; } .ms-acc:not(#ms-z){ height: auto; background: none; border-radius: 0; overflow: visible; } .ms-acc__track:not(#ms-z){ position: static; flex-direction: column; gap: 10px; } .ms-acc__item:not(#ms-z), .ms-acc__item:not(#ms-z).is-active{ transform: none; height: 240px; flex: none; border-radius: 6px; } .ms-acc__img:not(#ms-z){ left: 0; width: 100%; transform: none; } .ms-acc__item:not(#ms-z)::before, .ms-acc__item:not(#ms-z).is-active::before{ background: linear-gradient(180deg, rgba(26,28,31,0.05) 25%, rgba(26,28,31,0.9) 100%); } .ms-acc__inner:not(#ms-z){ transform: none; } .ms-acc__num:not(#ms-z){ left: 20px; top: 18px; color: var(--ms-orange); } .ms-acc__label:not(#ms-z){ display: none; } .ms-acc__body:not(#ms-z), .ms-acc__item:not(#ms-z).is-active .ms-acc__body{ left: 20px; right: 20px; bottom: 20px; opacity: 1; visibility: visible; transform: none; gap: 8px; } .ms-acc__title:not(#ms-z){ font-size: 30px; transform: none; } .ms-acc__desc:not(#ms-z){ font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-acc__btn:not(#ms-z){ display: none; } .ms-acc__tape:not(#ms-z){ display: none; } } @media (max-width: 600px) { .ms-cards:not(#ms-z){ grid-template-columns: 1fr; } } /* ========================================================= 04 · RYSUNEK TECHNICZNY NA ŻYWO ========================================================= */ .ms-draw:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 96px 0; } .ms-draw:not(#ms-z) .ms-wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: 56px; } .ms-draw__panel:not(#ms-z){ flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 26px; } .ms-draw__title:not(#ms-z){ font-size: clamp(36px, 4.2vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-draw__lead:not(#ms-z){ font-size: 18px; line-height: 1.55; color: #b3b7bd; } .ms-field:not(#ms-z){ display: flex; flex-direction: column; gap: 10px; } .ms-field__head:not(#ms-z){ display: flex; justify-content: space-between; align-items: baseline; } .ms-field__label:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: #8a8f96; } .ms-field__val:not(#ms-z){ font-family: var(--ms-mono); font-size: 18px; font-weight: 500; } .ms-field__val:not(#ms-z) small{ color: var(--ms-orange); font-size: 13px; } .ms-range:not(#ms-z){ -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --p: 50%; } .ms-range:not(#ms-z)::-webkit-slider-runnable-track{ height: 2px; background: linear-gradient(90deg, var(--ms-orange) var(--p), #4a4f55 var(--p)); } .ms-range:not(#ms-z)::-moz-range-track{ height: 2px; background: #4a4f55; } .ms-range:not(#ms-z)::-moz-range-progress{ height: 2px; background: var(--ms-orange); } .ms-range:not(#ms-z)::-webkit-slider-thumb{ -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--ms-ink); border: 2px solid var(--ms-orange); } .ms-range:not(#ms-z)::-moz-range-thumb{ width: 18px; height: 18px; border-radius: 50%; background: var(--ms-ink); border: 2px solid var(--ms-orange); } .ms-chips:not(#ms-z){ display: flex; flex-wrap: wrap; gap: 8px; } .ms-chip:not(#ms-z){ min-height: 48px; padding: 0 18px; border-radius: 4px; border: 1px solid #4a4f55; color: #f4f2ee; font-size: 15px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; } .ms-chip:not(#ms-z):hover{ border-color: #8a8f96; } .ms-chip:not(#ms-z)[aria-pressed="true"]{ background: #f4f2ee; color: var(--ms-ink); border-color: #f4f2ee; } .ms-draw__cta:not(#ms-z){ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid #34383d; } .ms-draw__cta:not(#ms-z) .ms-btn{ min-height: 56px; font-size: 17px; } .ms-draw__note:not(#ms-z){ font-size: 14px; line-height: 1.45; color: #8a8f96; max-width: 260px; } .ms-stage:not(#ms-z){ flex: 1.3 1 600px; min-width: 0; position: relative; height: 640px; border-radius: 6px; overflow: hidden; background-color: #1f2226; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; } .ms-stage__tag:not(#ms-z){ position: absolute; top: 20px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.2em; color: #8a8f96; } .ms-stage__tag--l:not(#ms-z){ left: 22px; } .ms-stage__tag--r:not(#ms-z){ right: 22px; color: var(--ms-orange); } .ms-stage__area:not(#ms-z){ position: absolute; top: 70px; right: 60px; bottom: 110px; left: 90px; display: flex; align-items: center; justify-content: center; } .ms-frame:not(#ms-z){ position: relative; width: 300px; height: 300px; transition: width .6s cubic-bezier(.2,.7,.2,1), height .6s cubic-bezier(.2,.7,.2,1); } .ms-frame__box:not(#ms-z){ position: absolute; inset: 0; display: flex; border: 5px solid #0b0c0d; box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 20px 50px rgba(0,0,0,0.4); background: rgba(160,196,206,0.10); } .ms-pane:not(#ms-z){ position: relative; flex: 1; min-width: 0; overflow: hidden; } .ms-pane:not(#ms-z) + .ms-pane{ border-left: 4px solid #0b0c0d; } .ms-pane:not(#ms-z) svg{ position: absolute; inset: 0; width: 100%; height: 100%; } .ms-pane__handle:not(#ms-z){ position: absolute; right: 10%; top: 46%; width: 4px; height: 12%; background: #d6d8dc; border-radius: 2px; } .ms-pane__slide:not(#ms-z){ position: absolute; left: 50%; top: 50%; width: 44px; height: 16px; margin: -8px 0 0 -22px; } .ms-pane:not(#ms-z) .ms-door-line{ animation: ms-dash 1.2s linear infinite; } @keyframes ms-dash { to { stroke-dashoffset: -24; } } .ms-frame__rail:not(#ms-z){ position: absolute; left: -12px; right: -12px; top: -14px; height: 6px; background: #0b0c0d; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); display: none; } .ms-frame:not(#ms-z).is-slide .ms-frame__rail{ display: block; } .ms-frame__top:not(#ms-z){ position: absolute; left: 0; right: 0; bottom: calc(100% + 24px); display: flex; } .ms-frame__top:not(#ms-z) span{ flex: 1; text-align: center; font-family: var(--ms-mono); font-size: 11px; color: #8a8f96; border-left: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25); margin-right: -1px; overflow: hidden; white-space: nowrap; } .ms-dim:not(#ms-z){ position: absolute; display: flex; align-items: center; } .ms-dim:not(#ms-z) i{ display: block; background: var(--ms-orange); } .ms-dim--w:not(#ms-z){ left: 0; right: 0; top: calc(100% + 26px); height: 14px; } .ms-dim--w:not(#ms-z) i:nth-child(1), .ms-dim--w:not(#ms-z) i:nth-child(3){ width: 1px; height: 14px; } .ms-dim--w:not(#ms-z) i:nth-child(2){ flex: 1; height: 1px; } .ms-dim--h:not(#ms-z){ top: 0; bottom: 0; right: calc(100% + 28px); width: 14px; flex-direction: column; } .ms-dim--h:not(#ms-z) i:nth-child(1), .ms-dim--h:not(#ms-z) i:nth-child(3){ width: 14px; height: 1px; } .ms-dim--h:not(#ms-z) i:nth-child(2){ flex: 1; width: 1px; } .ms-dim:not(#ms-z) b{ position: absolute; padding: 2px 10px; background: #1f2226; font-family: var(--ms-mono); font-size: 14px; font-weight: 500; color: #f4f2ee; white-space: nowrap; } .ms-dim--w:not(#ms-z) b{ left: 50%; transform: translateX(-50%); } .ms-dim--h:not(#ms-z) b{ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); } .ms-readout:not(#ms-z){ position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(20,22,25,0.92); border-top: 1px solid rgba(255,255,255,0.1); } .ms-readout:not(#ms-z) > div{ padding: 16px 22px; } .ms-readout:not(#ms-z) > div + div{ border-left: 1px solid rgba(255,255,255,0.1); } .ms-readout__k:not(#ms-z){ font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.18em; color: #8a8f96; } .ms-readout__v:not(#ms-z){ font-size: 22px; font-weight: 800; margin-top: 4px; } .ms-readout__v:not(#ms-z) small{ font-size: 13px; color: var(--ms-orange); } @media (max-width: 700px) { .ms-draw:not(#ms-z){ padding: 72px 0; } .ms-stage:not(#ms-z){ height: 520px; } .ms-stage__area:not(#ms-z){ top: 64px; right: 24px; bottom: 120px; left: 60px; } .ms-readout:not(#ms-z) > div{ padding: 12px 14px; } .ms-readout__v:not(#ms-z){ font-size: 17px; } .ms-stage__tag--r:not(#ms-z){ display: none; } } /* ========================================================= 05 · OD WSTĘPNEJ WYCENY DO MONTAŻU ========================================================= */ .ms-process:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0 120px; } .ms-process:not(#ms-z) .ms-wrap{ display: flex; flex-direction: column; gap: 48px; } .ms-process__count:not(#ms-z){ display: flex; align-items: baseline; gap: 10px; font-family: var(--ms-mono); color: var(--ms-text-muted); } .ms-process__count:not(#ms-z) b{ font-size: 44px; font-weight: 500; color: var(--ms-ink); } .ms-process__count:not(#ms-z) span{ font-size: 16px; } .ms-steps:not(#ms-z){ display: flex; flex-direction: column; gap: 28px; } .ms-ptape:not(#ms-z){ position: relative; height: 64px; } .ms-ptape__hook:not(#ms-z){ position: absolute; left: 0; top: 18px; width: 28px; height: 34px; background: #8a8f96; border-radius: 3px 0 0 3px; } .ms-ptape__band:not(#ms-z){ position: absolute; left: 20px; right: 0; top: 10px; height: 50px; border-radius: 4px; background: var(--ms-ink); overflow: hidden; } .ms-ptape__fill:not(#ms-z){ position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ms-orange); transition: width .9s cubic-bezier(.2,.7,.2,1); } .ms-ptape__ticks:not(#ms-z){ position: absolute; inset: 0; background: repeating-linear-gradient(to right, rgba(255,255,255,0.75) 0 1.5px, transparent 1.5px 40px) left top / 100% 22px no-repeat, repeating-linear-gradient(to right, rgba(255,255,255,0.55) 0 1px, transparent 1px 20px) left top / 100% 14px no-repeat, repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 1px, transparent 1px 4px) left top / 100% 7px no-repeat; } .ms-ptape__stop:not(#ms-z){ position: absolute; top: 0; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ms-mono); font-size: 16px; font-weight: 500; background: var(--ms-paper); color: var(--ms-ink); border: 3px solid var(--ms-ink); transform: scale(0.9); box-shadow: 0 8px 20px rgba(26,28,31,0.25); transition: background .3s, color .3s, transform .3s, border-color .3s; } .ms-ptape__stop:not(#ms-z).is-done{ background: var(--ms-ink); color: var(--ms-orange); } .ms-ptape__stop:not(#ms-z).is-active{ background: var(--ms-orange); color: var(--ms-ink); border-color: #fff; transform: scale(1.12); } .ms-pcards:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-pcard:not(#ms-z){ position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; padding: 26px 24px 28px; border-radius: 6px; border: 1px solid var(--ms-line); background: transparent; color: var(--ms-ink); transition: background .4s, box-shadow .4s, border-color .4s; } .ms-pcard:not(#ms-z)::before{ content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; background: var(--ms-orange); opacity: 0; transition: opacity .4s; } .ms-pcard__ico:not(#ms-z){ width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8e4dd; color: var(--ms-text-muted); transition: background .4s, color .4s; } .ms-pcard__num:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ms-text-muted); } .ms-pcard__title:not(#ms-z){ font-size: 23px; font-weight: 800; letter-spacing: -0.01em; } .ms-pcard__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-pcard:not(#ms-z).is-active{ background: var(--ms-white); border-color: var(--ms-white); box-shadow: 0 20px 40px rgba(26,28,31,0.10); } .ms-pcard:not(#ms-z).is-active::before{ opacity: 1; } .ms-pcard:not(#ms-z).is-active .ms-pcard__ico{ background: var(--ms-ink); color: var(--ms-orange); } .ms-pcard:not(#ms-z).is-active .ms-pcard__num{ color: var(--ms-rust); } .ms-pcard:not(#ms-z).is-active .ms-pcard__text{ color: #3d4046; } .ms-example:not(#ms-z){ display: flex; flex-wrap: wrap; align-items: stretch; border-radius: 6px; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; } .ms-example__img:not(#ms-z){ position: relative; flex: 1.4 1 520px; min-width: 0; background: #fff; } .ms-example__img:not(#ms-z) img{ width: 100%; height: 100%; max-height: 380px; object-fit: contain; } .ms-example__img:not(#ms-z)::before, .ms-example__img:not(#ms-z)::after{ content: ""; position: absolute; width: 20px; height: 20px; } .ms-example__img:not(#ms-z)::before{ top: 14px; left: 14px; border-top: 2px solid var(--ms-rust); border-left: 2px solid var(--ms-rust); } .ms-example__img:not(#ms-z)::after{ bottom: 14px; right: 14px; border-bottom: 2px solid var(--ms-rust); border-right: 2px solid var(--ms-rust); } .ms-example__txt:not(#ms-z){ flex: 1 1 340px; min-width: 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .ms-example__tag:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ms-orange); } .ms-example__title:not(#ms-z){ font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .ms-example__desc:not(#ms-z){ font-size: 16px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-example__txt:not(#ms-z) .ms-btn{ align-self: flex-start; margin-top: 8px; } @media (max-width: 1100px) { .ms-pcards:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ms-process:not(#ms-z){ padding: 80px 0; } .ms-ptape__stop:not(#ms-z){ width: 48px; height: 48px; margin-left: -24px; font-size: 13px; top: 8px; } .ms-pcards:not(#ms-z){ grid-template-columns: 1fr; } .ms-example__txt:not(#ms-z){ padding: 28px 22px; } } @media (prefers-reduced-motion: reduce) { .ms *, .ms *::before, .ms *::after { animation: none !important; transition: none !important; } } /* ========================================================= 06 · STOPKA (obszar montażu) ========================================================= */ .ms-footer:not(#ms-z){ position: relative; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; } .ms-footer:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .ms-footer__in:not(#ms-z){ position: relative; padding-top: 88px; } .ms-footer__top:not(#ms-z){ display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; } .ms-footer__info:not(#ms-z){ flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .ms-footer__title:not(#ms-z){ font-size: clamp(34px, 4.2vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-zones:not(#ms-z){ display: flex; flex-direction: column; border-bottom: 1px solid var(--ms-line-dark); } .ms-zone:not(#ms-z){ display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ms-line-dark); } .ms-zone__mark:not(#ms-z){ width: 22px; height: 22px; flex: none; border-radius: 50%; } .ms-zone__mark--1:not(#ms-z){ border: 2px solid var(--ms-orange); background: rgba(247,147,30,0.25); } .ms-zone__mark--2:not(#ms-z){ border: 2px solid rgba(247,147,30,0.6); } .ms-zone__mark--3:not(#ms-z){ border: 2px dashed rgba(255,255,255,0.45); } .ms-zone__mark--4:not(#ms-z){ border: 1px dotted rgba(255,255,255,0.45); } .ms-zone__name:not(#ms-z){ display: block; font-weight: 700; } .ms-zone__txt:not(#ms-z){ display: block; font-size: 14px; color: var(--ms-text-muted-dark); } .ms-footer__contact:not(#ms-z){ display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 6px; } .ms-footer__phone:not(#ms-z){ display: flex; flex-direction: column; color: #f4f2ee; } .ms-footer__phone small:not(#ms-z){ font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.2em; color: #8a8f96; } .ms-footer__phone span:not(#ms-z){ font-size: 30px; font-weight: 800; letter-spacing: -0.01em; } .ms-footer__contact .ms-btn:not(#ms-z){ min-height: 56px; } .ms-radar:not(#ms-z){ flex: 0 1 520px; min-width: 0; display: flex; justify-content: center; } .ms-radar__box:not(#ms-z){ position: relative; width: 520px; max-width: 100%; aspect-ratio: 1 / 1; } .ms-radar__axis:not(#ms-z){ position: absolute; background: rgba(255,255,255,0.12); } .ms-radar__axis--v:not(#ms-z){ left: 50%; top: 0; bottom: 0; width: 1px; } .ms-radar__axis--h:not(#ms-z){ top: 50%; left: 0; right: 0; height: 1px; } .ms-radar__ring:not(#ms-z){ position: absolute; border-radius: 50%; } .ms-radar__ring--4:not(#ms-z){ inset: 0; border: 1px dotted rgba(255,255,255,0.35); } .ms-radar__ring--sweep:not(#ms-z){ inset: 0; border: 1px dashed rgba(247,147,30,0.4); border-top-color: transparent; border-right-color: transparent; animation: ms-spin 40s linear infinite; } .ms-radar__ring--3:not(#ms-z){ inset: 16%; border: 2px dashed rgba(255,255,255,0.4); } .ms-radar__ring--2:not(#ms-z){ inset: 31%; border: 2px solid rgba(247,147,30,0.6); background: rgba(247,147,30,0.05); } .ms-radar__ring--1:not(#ms-z){ inset: 41%; border: 2px solid var(--ms-orange); background: rgba(247,147,30,0.22); } @keyframes ms-spin { to { transform: rotate(360deg); } } .ms-radar__radius:not(#ms-z){ position: absolute; left: 50%; top: 50%; width: 50%; height: 0; border-top: 1px solid var(--ms-orange); transform-origin: left center; transform: rotate(-35deg); } .ms-radar__radius:not(#ms-z)::after{ content: ""; position: absolute; right: 0; top: -5.5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid var(--ms-orange); } .ms-radar__radius-label:not(#ms-z){ position: absolute; left: 56%; top: 36%; transform-origin: left center; padding: 4px 10px; background: var(--ms-ink); border: 1px solid var(--ms-orange); border-radius: 3px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ms-orange); transform: rotate(-35deg); white-space: nowrap; } .ms-radar__dot:not(#ms-z){ position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; } .ms-radar__dot:not(#ms-z)::before, .ms-radar__dot:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ms-orange); } .ms-radar__dot:not(#ms-z)::before{ animation: ms-pulse 2s ease-out infinite; } .ms-radar__dot:not(#ms-z)::after{ border: 3px solid var(--ms-ink); } @keyframes ms-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } } .ms-radar__home:not(#ms-z){ position: absolute; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); padding: 4px 10px; background: #f4f2ee; color: var(--ms-ink); border-radius: 3px; font-size: 13px; font-weight: 700; white-space: nowrap; } .ms-radar__tag:not(#ms-z){ position: absolute; left: 50%; transform: translate(-50%, -100%); margin-top: -6px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; } .ms-footer__links:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.08); } .ms-footer__col:not(#ms-z){ display: flex; flex-direction: column; gap: 6px; } .ms-footer__col--brand:not(#ms-z){ gap: 18px; } .ms-footer__label:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.22em; color: #8a8f96; padding-bottom: 10px; } .ms-footer__col a:not(#ms-z){ min-height: 34px; display: flex; align-items: center; font-size: 15px; color: #c9ccd1; transition: color .2s; } .ms-footer__col a:not(#ms-z):hover{ color: #fff; } .ms-footer__col a.ms-footer__shop:not(#ms-z){ color: var(--ms-orange); } .ms-footer__col a.ms-logo:not(#ms-z){ min-height: 0; color: #f4f2ee; } .ms-footer__addr:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); font-style: normal; } .ms-footer__bottom:not(#ms-z){ position: relative; background: #141518; border-top: 1px solid rgba(255,255,255,0.08); } .ms-footer__bottom:not(#ms-z)::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(to right, rgba(247,147,30,0.75) 0 1.5px, transparent 1.5px 40px) left top / 100% 8px no-repeat, repeating-linear-gradient(to right, rgba(255,255,255,0.22) 0 1px, transparent 1px 8px) left top / 100% 4px no-repeat; } .ms-footer__bottom .ms-wrap:not(#ms-z){ padding-top: 22px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.06em; color: #8a8f96; } .ms-footer__legal:not(#ms-z){ display: flex; flex-wrap: wrap; gap: 22px; } .ms-footer__legal a:not(#ms-z):hover{ color: #fff; } .ms-totop:not(#ms-z){ display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid #34383d; border-radius: 4px; color: #c9ccd1; transition: border-color .2s; } .ms-totop:not(#ms-z):hover{ border-color: var(--ms-orange); color: #fff; } @media (max-width: 900px) { .ms-footer__in:not(#ms-z){ padding-top: 64px; } .ms-footer__links:not(#ms-z){ grid-template-columns: 1fr 1fr; padding-top: 48px; margin-top: 40px; } .ms-footer__col--brand:not(#ms-z){ grid-column: 1 / -1; } } @media (max-width: 560px) { .ms-radar__radius-label:not(#ms-z){ display: none; } .ms-radar__tag:not(#ms-z){ font-size: 9px; } .ms-footer__links:not(#ms-z){ grid-template-columns: 1fr; } } /* ========================================================= 02 · HERO – pokaz slajdów ========================================================= */ .ms-sr:not(#ms-z){ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ms-hero__bg:not(#ms-z){ opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 1.2s ease; } .ms-hero__bg:not(#ms-z).is-active{ opacity: 1; transform: scale(1); transition: opacity 1.2s ease, transform var(--ms-slide-time, 6000ms) ease-out; } .ms-hero__sweep:not(#ms-z){ position: absolute; top: -10%; bottom: -10%; left: -30%; width: 240px; transform: rotate(16deg); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%); opacity: 0; pointer-events: none; } .ms-hero:not(#ms-z).is-sweep .ms-hero__sweep{ animation: ms-sweep 1.4s ease-out; } @keyframes ms-sweep { 0% { transform: translateX(0) rotate(16deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(145vw) rotate(16deg); opacity: 0; } } .ms-hero__spots:not(#ms-z){ position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; } .ms-hero__spots:not(#ms-z).is-active{ opacity: 1; visibility: visible; transition: opacity .6s .6s, visibility 0s; } .ms-hero__slides:not(#ms-z){ display: grid; } .ms-hero__slide:not(#ms-z){ grid-area: 1 / 1; display: flex; flex-direction: column; gap: 28px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s, transform .5s, visibility 0s .5s; } .ms-hero__slide:not(#ms-z).is-active{ opacity: 1; visibility: visible; transform: none; transition: opacity .7s .35s, transform .7s .35s, visibility 0s; } .ms-pill:not(#ms-z){ position: relative; overflow: hidden; cursor: pointer; font-family: var(--ms-font); } .ms-pill:not(#ms-z) span{ position: relative; z-index: 1; } .ms-pill__bar:not(#ms-z){ position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(26,28,31,0.45); transform: scaleX(0); transform-origin: left; } .ms-pill:not(#ms-z).is-running .ms-pill__bar{ animation: ms-pillfill var(--ms-slide-time, 6000ms) linear forwards; } @keyframes ms-pillfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 1000px) { .ms-hero__spots:not(#ms-z){ display: none; } } /* ========================================================= WERSJA NATYWNA ELEMENTORA (klasy ms-n-*) Bloki zbudowane z kontenerów i zwykłych widżetów Elementora. ========================================================= */ :where(.ms) .e-con:not(#ms-z), :where(.e-con).ms:not(#ms-z) { padding: 0; gap: 0; min-height: 0; flex-wrap: nowrap; } :where(.ms) .elementor-widget:not(#ms-z) { margin: 0; } :where(.ms) .elementor-widget-container:not(#ms-z) { margin: 0; padding: 0; } :where(.ms) .elementor-heading-title:not(#ms-z) { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; } :where(.ms) .elementor-widget-text-editor:not(#ms-z) { color: inherit; font-family: inherit; } :where(.ms) .elementor-widget-text-editor p:not(#ms-z) { margin: 0; } :where(.ms) .elementor-widget-image:not(#ms-z) { text-align: left; } /* ---------- wspólne ---------- */ .ms-n-wrap:not(#ms-z){ width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--ms-gutter); padding-right: var(--ms-gutter); flex-direction: column; } .ms-n-eyebrow:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 14px; font-family: var(--ms-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ms-rust); line-height: 1.4; } .ms-n-eyebrow:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 66px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+") no-repeat center / contain; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+") no-repeat center / contain; } .ms-n-eyebrow--light:not(#ms-z) .elementor-heading-title{ color: var(--ms-orange); } .ms-n-h2:not(#ms-z) .elementor-heading-title{ font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-n-h2:not(#ms-z) .elementor-heading-title span{ color: var(--ms-rust); } .ms-n-h2--light:not(#ms-z) .elementor-heading-title span{ color: var(--ms-orange); } .ms-n-sechead:not(#ms-z){ flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; } .ms-n-sechead__title:not(#ms-z){ flex: 1 1 640px; min-width: 0; flex-direction: column; gap: 20px; } .ms-n-sechead__lead:not(#ms-z){ flex: 0 1 400px; font-size: 18px; line-height: 1.55; color: var(--ms-text-muted); } .ms-n-ico:not(#ms-z){ flex: none; line-height: 0; } /* przyciski (widżet Przycisk) */ .ms-n-btn:not(#ms-z) .elementor-button{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 4px; font-family: var(--ms-font); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none; box-shadow: none; transition: background .2s, color .2s, border-color .2s; } .ms-n-btn:not(#ms-z) .elementor-button-content-wrapper{ display: inline-flex; align-items: center; gap: 12px; } .ms-n-btn--primary:not(#ms-z) .elementor-button, .ms-n-btn--primary:not(#ms-z) .elementor-button:visited{ background: var(--ms-orange); color: var(--ms-ink); box-shadow: 0 12px 32px rgba(247,147,30,0.25); } .ms-n-btn--primary:not(#ms-z) .elementor-button:hover, .ms-n-btn--primary:not(#ms-z) .elementor-button:focus{ background: var(--ms-orange-hi); color: var(--ms-ink); } .ms-n-btn--primary:not(#ms-z) .elementor-button-text::after, .ms-n-btn--dark:not(#ms-z) .elementor-button-text::after{ content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 12px; vertical-align: -3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; } .ms-n-btn:not(#ms-z) .elementor-button:hover .elementor-button-text::after{ transform: translateX(3px); } .ms-n-btn--line:not(#ms-z) .elementor-button, .ms-n-btn--line:not(#ms-z) .elementor-button:hover, .ms-n-btn--line:not(#ms-z) .elementor-button:focus{ background: transparent; color: #f4f2ee; padding: 0; min-height: 52px; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--ms-orange); } .ms-n-btn--ghost:not(#ms-z) .elementor-button, .ms-n-btn--ghost:not(#ms-z) .elementor-button:hover{ background: transparent; color: #f4f2ee; border: 1px solid #4a4f55; } .ms-n-btn--ghost:not(#ms-z) .elementor-button:hover{ border-color: var(--ms-orange); } .ms-n-btn--dark:not(#ms-z) .elementor-button, .ms-n-btn--dark:not(#ms-z) .elementor-button:visited{ background: var(--ms-ink); color: #f4f2ee; } .ms-n-btn--dark:not(#ms-z) .elementor-button:hover{ background: #000; color: #fff; } .ms-n-btn--dark:not(#ms-z) .elementor-button-text::after{ background: var(--ms-orange); } .ms-n-btn--outline-dark:not(#ms-z) .elementor-button, .ms-n-btn--outline-dark:not(#ms-z) .elementor-button:hover{ background: transparent; color: var(--ms-ink); border: 2px solid var(--ms-ink); font-weight: 700; } /* obraz wypełniający rodzica */ .ms-n-fill:not(#ms-z){ position: absolute; inset: 0; z-index: 0; } .ms-n-fill:not(#ms-z) .elementor-widget-container, .ms-n-fill:not(#ms-z) img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* ========================================================= HERO – pokaz slajdów ========================================================= */ .ms-n-hero:not(#ms-z){ position: relative; display: block; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; --ms-side: calc(max(0px, (100% - 1440px) / 2) + var(--ms-gutter)); } .ms-n-hero__decor:not(#ms-z){ position: absolute; inset: 0; z-index: 3; pointer-events: none; } .ms-n-hero__decor:not(#ms-z) .ms-hero__grid{ inset: 0 55% 0 0; } .ms-n-hero__slides:not(#ms-z){ display: grid; min-height: 860px; } .ms-n-slide:not(#ms-z){ grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 112px var(--ms-side) 300px; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; } .ms-n-slide:not(#ms-z).is-active{ opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; } .ms-n-slide:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(26,28,31,0.97) 0%, rgba(26,28,31,0.9) 34%, rgba(26,28,31,0.35) 62%, rgba(26,28,31,0.1) 100%); pointer-events: none; } .ms-n-slide__bg:not(#ms-z) img{ object-position: 70% center; transform: scale(1.08); transition: transform 1.2s ease; } .ms-n-slide:not(#ms-z).is-active .ms-n-slide__bg img{ transform: scale(1); transition: transform var(--ms-slide-time, 6000ms) ease-out; } .ms-n-slide__spots:not(#ms-z){ position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; } .ms-n-slide:not(#ms-z).is-active .ms-n-slide__spots{ opacity: 1; transition: opacity .6s .6s; } .ms-n-slide__copy:not(#ms-z){ position: relative; z-index: 4; max-width: 620px; flex-direction: column; gap: 28px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; } .ms-n-slide:not(#ms-z).is-active .ms-n-slide__copy{ opacity: 1; transform: none; transition: opacity .7s .35s, transform .7s .35s; } .ms-n-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(46px, 6.4vw, 96px); line-height: 0.94; font-weight: 800; letter-spacing: -0.035em; color: #f4f2ee; } .ms-n-hero__title:not(#ms-z) .elementor-heading-title em, .ms-n-subhero__title:not(#ms-z) .elementor-heading-title span{ font-style: normal; color: var(--ms-orange); position: relative; display: inline-block; padding-bottom: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 80 2, 200 2, 298 8' fill='none' stroke='%23f7931e' stroke-width='3' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E") left bottom / 100% 12px no-repeat; } .ms-n-hero__lead:not(#ms-z){ max-width: 500px; font-size: 19px; line-height: 1.55; color: #c3c6cb; } .ms-n-ctas:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 8px; } .ms-n-ctas:not(#ms-z) .ms-n-btn .elementor-button{ min-height: 56px; font-size: 17px; } .ms-n-ctas:not(#ms-z) .ms-n-btn--primary .elementor-button{ padding: 0 28px; } .ms-n-hero__pills:not(#ms-z){ width: auto; max-width: 60%; position: absolute; z-index: 5; top: 112px; right: calc(var(--ms-side) + 48px); flex-direction: row; flex-wrap: wrap; gap: 8px; } .ms-n-pill:not(#ms-z) .elementor-button{ position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(26,28,31,0.7); border: 1px solid rgba(255,255,255,0.18); color: #e2e4e7; font-family: var(--ms-font); font-size: 14px; font-weight: 400; line-height: 1; box-shadow: none; transition: background .2s, border-color .2s; } .ms-n-pill:not(#ms-z) .elementor-button:hover{ border-color: var(--ms-orange); color: #fff; background: rgba(26,28,31,0.7); } .ms-n-pill:not(#ms-z).is-active .elementor-button, .ms-n-pill:not(#ms-z).is-active .elementor-button:hover{ background: var(--ms-orange); border-color: var(--ms-orange); color: var(--ms-ink); font-weight: 600; } .ms-n-pill:not(#ms-z) .elementor-button::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(26,28,31,0.45); transform: scaleX(0); transform-origin: left; } .ms-n-pill:not(#ms-z).is-running .elementor-button::after{ animation: ms-pillfill var(--ms-slide-time, 6000ms) linear forwards; } .ms-n-guarantee:not(#ms-z){ width: auto; max-width: 520px; position: absolute; z-index: 5; left: var(--ms-side); bottom: 190px; flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(36,39,43,0.85); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; font-size: 15px; color: #c3c6cb; } .ms-n-guarantee:not(#ms-z) .ms-n-ico{ width: 40px; height: 40px; border-radius: 50%; background: rgba(247,147,30,0.15); display: flex; align-items: center; justify-content: center; } .ms-n-guarantee:not(#ms-z) strong{ color: #f4f2ee; font-weight: 600; } .ms-n-hero__measure:not(#ms-z){ position: absolute; z-index: 4; left: 0; right: 0; bottom: 100px; pointer-events: none; } .ms-n-hero__measure:not(#ms-z) .ms-hero__measure{ max-width: 1440px; margin: 0 auto; padding-left: var(--ms-gutter); padding-right: var(--ms-gutter); } .ms-n-stats:not(#ms-z){ position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; background: rgba(20,22,25,0.88); border-top: 1px solid rgba(255,255,255,0.1); flex-direction: row; padding: 0 var(--ms-side); } .ms-n-stats:not(#ms-z)::before{ content: ""; position: absolute; top: -1px; left: 0; width: 220px; height: 2px; background: var(--ms-orange); } .ms-n-stat:not(#ms-z){ flex: 1 1 0; min-width: 0; flex-direction: row; align-items: center; gap: 16px; padding: 26px 24px; border-left: 1px solid rgba(255,255,255,0.1); } .ms-n-stat:not(#ms-z):first-child{ padding-left: 0; border-left: 0; } .ms-n-stat__txt:not(#ms-z){ position: static; flex-direction: column; gap: 2px; min-width: 0; } .ms-n-stat__val:not(#ms-z) .elementor-heading-title{ font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #f4f2ee; } .ms-n-stat__val:not(#ms-z) .elementor-heading-title small{ color: var(--ms-orange); font-size: 17px; } .ms-n-stat__label:not(#ms-z) .elementor-heading-title{ font-size: 14px; color: var(--ms-text-muted-dark); line-height: 1.4; } @media (max-width: 1000px) { .ms-n-hero__slides:not(#ms-z){ min-height: 0; } .ms-n-slide:not(#ms-z){ padding: 72px var(--ms-gutter) 40px; } .ms-n-slide:not(#ms-z)::after{ background: linear-gradient(180deg, rgba(26,28,31,0.75) 0%, rgba(26,28,31,0.92) 60%, rgba(26,28,31,0.97) 100%); } .ms-n-slide__spots:not(#ms-z), .ms-n-hero__decor:not(#ms-z){ display: none; } .ms-n-hero__pills:not(#ms-z), .ms-n-guarantee:not(#ms-z){ position: relative; top: auto; right: auto; left: auto; bottom: auto; margin: 0 var(--ms-gutter) 20px; align-self: flex-start; } .ms-n-hero:not(#ms-z){ display: flex; flex-direction: column; } .ms-n-hero__pills:not(#ms-z){ max-width: none; } .ms-n-hero__measure:not(#ms-z), .ms-n-stats:not(#ms-z){ position: relative; bottom: auto; } .ms-n-hero__measure:not(#ms-z){ padding: 8px 0; } .ms-n-stats:not(#ms-z){ flex-wrap: wrap; padding: 0 var(--ms-gutter); } .ms-n-stat:not(#ms-z), .ms-n-stat:not(#ms-z):first-child{ flex: 1 1 45%; padding: 20px 16px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); } } @media (max-width: 560px) { .ms-n-stat:not(#ms-z), .ms-n-stat:not(#ms-z):first-child{ flex-basis: 100%; } } /* ========================================================= USŁUGI – ukośna harmonijka + karty ========================================================= */ .ms-n-services:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0 120px; } .ms-n-services__in:not(#ms-z){ gap: 56px; } .ms-n-acc:not(#ms-z){ position: relative; height: 620px; background: var(--ms-ink); border-radius: 6px; overflow: hidden; } .ms-n-acc__track:not(#ms-z){ position: absolute; top: 4px; bottom: 4px; left: 66px; right: 66px; flex-direction: row; gap: 4px; } .ms-n-acc__item:not(#ms-z){ position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; transform: skewX(-12deg); transition: flex-grow .6s cubic-bezier(.2,.7,.2,1); color: #f4f2ee; } .ms-n-acc__item:not(#ms-z).is-active{ flex-grow: 6; } .ms-n-acc__img:not(#ms-z){ left: -140px; right: auto; width: calc(100% + 280px); transform: skewX(12deg); } .ms-n-acc__item:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,28,31,0.25) 0%, rgba(26,28,31,0.75) 100%); } .ms-n-acc__item:not(#ms-z).is-active::before{ background: linear-gradient(180deg, rgba(26,28,31,0.05) 35%, rgba(26,28,31,0.88) 100%); } .ms-n-acc__item:not(#ms-z)::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: var(--ms-orange); opacity: 0; transition: opacity .4s; } .ms-n-acc__item:not(#ms-z).is-active::after{ opacity: 1; } .ms-n-acc__inner:not(#ms-z){ position: absolute; inset: 0; z-index: 3; transform: skewX(12deg); } .ms-n-acc__num:not(#ms-z){ position: absolute; top: 26px; left: 84px; font-family: var(--ms-mono); font-size: 13px; color: rgba(255,255,255,0.8); } .ms-n-acc__item:not(#ms-z).is-active .ms-n-acc__num{ color: var(--ms-orange); } .ms-n-acc__label:not(#ms-z){ position: absolute; top: 50%; left: 50%; writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(192deg); font-size: 20px; font-weight: 700; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,0.5); transition: opacity .3s; } .ms-n-acc__item:not(#ms-z).is-active .ms-n-acc__label{ opacity: 0; } .ms-n-acc__body:not(#ms-z){ position: absolute; left: 90px; right: 120px; bottom: 48px; max-width: 560px; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .4s, visibility 0s .4s; } .ms-n-acc__item:not(#ms-z).is-active .ms-n-acc__body{ opacity: 1; visibility: visible; transform: none; transition: opacity .45s .2s, transform .45s .2s, visibility 0s; } .ms-n-acc__title:not(#ms-z) .elementor-heading-title{ font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; transform: skewX(-12deg); transform-origin: left bottom; color: #f4f2ee; } .ms-n-acc__desc:not(#ms-z){ font-size: 16px; line-height: 1.55; color: #d6d8dc; } .ms-n-acc__btn:not(#ms-z){ align-self: flex-start; } .ms-n-acc__btn:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 4px; background: var(--ms-orange); color: var(--ms-ink); font-size: 15px; font-weight: 600; } .ms-n-acc__tape:not(#ms-z){ position: absolute; left: 24px; right: 24px; bottom: 14px; z-index: 4; pointer-events: none; } .ms-n-cards:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-n-card:not(#ms-z){ position: relative; flex-direction: row; align-items: center; gap: 14px; padding: 14px 44px 18px 14px; background: var(--ms-white); color: var(--ms-ink); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: transform .25s, box-shadow .25s; } .ms-n-card:not(#ms-z):hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(26,28,31,0.12); } .ms-n-card:not(#ms-z)::before{ content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 6px; border-bottom: 1px solid #c9c4bc; background: repeating-linear-gradient(to right, #c2410c 0 1.5px, transparent 1.5px 40px) left bottom / 100% 6px no-repeat, repeating-linear-gradient(to right, #cfcac2 0 1px, transparent 1px 8px) left bottom / 100% 3px no-repeat; } .ms-n-card:not(#ms-z)::after{ content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(45deg, transparent calc(50% - 1px), #f7931e calc(50% - 1px), #f7931e calc(50% + 1px), transparent calc(50% + 1px)); } .ms-n-card__img:not(#ms-z){ flex: none; width: 48px; height: 48px; } .ms-n-card__img:not(#ms-z) img{ width: 48px; height: 48px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ms-orange); } .ms-n-card__txt:not(#ms-z){ position: static; flex: 1; min-width: 0; flex-direction: column; gap: 2px; } .ms-n-card__txt:not(#ms-z)::after{ content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ms-rust); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; } .ms-n-card:not(#ms-z):hover .ms-n-card__txt::after{ transform: translateX(3px); } .ms-n-card__title:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 700; line-height: 1.3; } .ms-n-card__desc:not(#ms-z) .elementor-heading-title{ font-size: 13px; line-height: 1.4; color: var(--ms-text-muted); } .ms-n-card--dark:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 14px 70px 14px 18px; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; } .ms-n-card--dark:not(#ms-z)::before{ display: none; } .ms-n-card--dark:not(#ms-z) .ms-n-card__title .elementor-heading-title{ font-weight: 800; } .ms-n-card--dark:not(#ms-z) .ms-n-card__desc .elementor-heading-title{ color: var(--ms-orange); } .ms-n-card--dark:not(#ms-z) .ms-n-card__txt::after{ right: 18px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; -webkit-mask: none; mask: none; background: var(--ms-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; } @media (max-width: 1100px) { .ms-n-cards:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .ms-n-services:not(#ms-z){ padding: 80px 0; } .ms-n-acc:not(#ms-z){ height: auto; background: none; border-radius: 0; overflow: visible; } .ms-n-acc__track:not(#ms-z){ position: static; flex-direction: column; gap: 10px; } .ms-n-acc__item:not(#ms-z), .ms-n-acc__item:not(#ms-z).is-active{ transform: none; height: 240px; flex: none; border-radius: 6px; } .ms-n-acc__img:not(#ms-z){ left: 0; width: 100%; transform: none; } .ms-n-acc__item:not(#ms-z)::before, .ms-n-acc__item:not(#ms-z).is-active::before{ background: linear-gradient(180deg, rgba(26,28,31,0.05) 25%, rgba(26,28,31,0.9) 100%); } .ms-n-acc__inner:not(#ms-z){ transform: none; } .ms-n-acc__num:not(#ms-z){ left: 20px; top: 18px; color: var(--ms-orange); } .ms-n-acc__label:not(#ms-z), .ms-n-acc__btn:not(#ms-z), .ms-n-acc__tape:not(#ms-z){ display: none; } .ms-n-acc__body:not(#ms-z), .ms-n-acc__item:not(#ms-z).is-active .ms-n-acc__body{ left: 20px; right: 20px; bottom: 20px; opacity: 1; visibility: visible; transform: none; gap: 8px; } .ms-n-acc__title:not(#ms-z) .elementor-heading-title{ font-size: 30px; transform: none; } .ms-n-acc__desc:not(#ms-z){ font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-width: 600px) { .ms-n-cards:not(#ms-z){ grid-template-columns: 1fr; } } /* ========================================================= RYSUNEK TECHNICZNY ========================================================= */ .ms-n-draw:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 96px 0; } .ms-n-draw__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 56px; } .ms-n-draw__panel:not(#ms-z){ flex: 1 1 400px; min-width: 0; flex-direction: column; gap: 26px; } .ms-n-draw__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(36px, 4.2vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-n-draw__title:not(#ms-z) .elementor-heading-title span{ color: var(--ms-orange); } .ms-n-draw__lead:not(#ms-z){ font-size: 18px; line-height: 1.55; color: #b3b7bd; } .ms-n-draw__controls:not(#ms-z) .elementor-widget-container, .ms-n-draw__controls:not(#ms-z) > div{ display: flex; flex-direction: column; gap: 26px; } .ms-n-draw__cta:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid #34383d; } .ms-n-draw__cta:not(#ms-z) .ms-n-btn .elementor-button{ min-height: 56px; font-size: 17px; } .ms-n-draw__note:not(#ms-z){ font-size: 14px; line-height: 1.45; color: #8a8f96; max-width: 260px; } .ms-n-draw__stage:not(#ms-z){ flex: 1.3 1 600px; min-width: 0; } .ms-n-draw__stage:not(#ms-z) .ms-stage{ width: 100%; } /* ========================================================= PROCES ========================================================= */ .ms-n-process:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0 120px; } .ms-n-process__in:not(#ms-z){ gap: 48px; } .ms-n-ptape:not(#ms-z){ margin-top: -20px; } .ms-n-pcards:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-n-pcard:not(#ms-z){ position: relative; flex-direction: column; gap: 14px; padding: 26px 24px 28px; border-radius: 6px; border: 1px solid var(--ms-line); background: transparent; cursor: pointer; transition: background .4s, box-shadow .4s, border-color .4s; } .ms-n-pcard:not(#ms-z)::before{ content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; background: var(--ms-orange); opacity: 0; transition: opacity .4s; } .ms-n-pcard__ico:not(#ms-z){ width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8e4dd; color: var(--ms-text-muted); transition: background .4s, color .4s; } .ms-n-pcard__ico:not(#ms-z) .elementor-widget-container{ line-height: 0; } .ms-n-pcard__num:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ms-text-muted); } .ms-n-pcard__title:not(#ms-z) .elementor-heading-title{ font-size: 23px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .ms-n-pcard__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-n-pcard:not(#ms-z).is-active{ background: var(--ms-white); border-color: var(--ms-white); box-shadow: 0 20px 40px rgba(26,28,31,0.10); } .ms-n-pcard:not(#ms-z).is-active::before{ opacity: 1; } .ms-n-pcard:not(#ms-z).is-active .ms-n-pcard__ico{ background: var(--ms-ink); color: var(--ms-orange); } .ms-n-pcard:not(#ms-z).is-active .ms-n-pcard__num .elementor-heading-title{ color: var(--ms-rust); } .ms-n-pcard:not(#ms-z).is-active .ms-n-pcard__text{ color: #3d4046; } .ms-n-example:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: stretch; border-radius: 6px; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; } .ms-n-example__img:not(#ms-z){ position: relative; flex: 1.4 1 520px; min-width: 0; background: #fff; min-height: 300px; } .ms-n-example__img:not(#ms-z)::before, .ms-n-example__img:not(#ms-z)::after{ content: ""; position: absolute; z-index: 1; width: 20px; height: 20px; } .ms-n-example__img:not(#ms-z)::before{ top: 14px; left: 14px; border-top: 2px solid var(--ms-rust); border-left: 2px solid var(--ms-rust); } .ms-n-example__img:not(#ms-z)::after{ bottom: 14px; right: 14px; border-bottom: 2px solid var(--ms-rust); border-right: 2px solid var(--ms-rust); } .ms-n-example__img:not(#ms-z) .ms-n-fill img{ object-fit: contain; } .ms-n-example__txt:not(#ms-z){ flex: 1 1 340px; min-width: 0; padding: 40px; flex-direction: column; justify-content: center; gap: 16px; } .ms-n-example__tag:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ms-orange); } .ms-n-example__title:not(#ms-z) .elementor-heading-title{ font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .ms-n-example__desc:not(#ms-z){ font-size: 16px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-n-example__txt:not(#ms-z) .ms-n-btn{ align-self: flex-start; margin-top: 8px; } @media (max-width: 1100px) { .ms-n-pcards:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ms-n-process:not(#ms-z){ padding: 80px 0; } .ms-n-pcards:not(#ms-z){ grid-template-columns: 1fr; } .ms-n-example__txt:not(#ms-z){ padding: 28px 22px; } } /* ========================================================= STOPKA ========================================================= */ .ms-n-footer:not(#ms-z){ position: relative; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-footer__in:not(#ms-z){ padding-top: 88px; } .ms-n-footer__top:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px 72px; } .ms-n-footer__info:not(#ms-z){ flex: 1 1 460px; min-width: 0; flex-direction: column; gap: 24px; } .ms-n-footer__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(34px, 4.2vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; } .ms-n-footer__title:not(#ms-z) .elementor-heading-title span{ color: var(--ms-orange); } .ms-n-zones:not(#ms-z){ flex-direction: column; border-bottom: 1px solid var(--ms-line-dark); } .ms-n-zone:not(#ms-z){ position: relative; flex-direction: column; padding: 14px 0 14px 38px; border-top: 1px solid var(--ms-line-dark); } .ms-n-zone:not(#ms-z)::before{ content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; box-sizing: border-box; } .ms-n-zone:not(#ms-z):nth-child(1)::before{ border: 2px solid var(--ms-orange); background: rgba(247,147,30,0.25); } .ms-n-zone:not(#ms-z):nth-child(2)::before{ border: 2px solid rgba(247,147,30,0.6); } .ms-n-zone:not(#ms-z):nth-child(3)::before{ border: 2px dashed rgba(255,255,255,0.45); } .ms-n-zone:not(#ms-z):nth-child(n+4)::before{ border: 1px dotted rgba(255,255,255,0.45); } .ms-n-zone__name:not(#ms-z) .elementor-heading-title{ font-weight: 700; font-size: 16px; line-height: 1.4; } .ms-n-zone__txt:not(#ms-z) .elementor-heading-title{ font-size: 14px; color: var(--ms-text-muted-dark); line-height: 1.4; } .ms-n-footer__contact:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 6px; } .ms-n-footer__phone:not(#ms-z){ flex-direction: column; } .ms-n-footer__phone-k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.2em; color: #8a8f96; } .ms-n-footer__phone-v:not(#ms-z) .elementor-heading-title, .ms-n-footer__phone-v:not(#ms-z) .elementor-heading-title a{ font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: #f4f2ee; } .ms-n-footer__contact:not(#ms-z) .ms-n-btn .elementor-button{ min-height: 56px; } .ms-n-radar-w:not(#ms-z){ flex: 0 1 520px; min-width: 0; } .ms-n-radar-w:not(#ms-z) .ms-radar{ width: 100%; } .ms-n-footer__links:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.08); } .ms-n-footer__col:not(#ms-z){ flex-direction: column; gap: 6px; } .ms-n-footer__col--brand:not(#ms-z){ gap: 18px; } .ms-n-footer__label:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.22em; color: #8a8f96; padding-bottom: 10px; } .ms-n-footer__addr:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-n-footer__mail:not(#ms-z) .elementor-heading-title, .ms-n-footer__mail:not(#ms-z) .elementor-heading-title a{ font-size: 15px; color: #c9ccd1; } .ms-n-list:not(#ms-z) .elementor-icon-list-items{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ms-n-list:not(#ms-z) .elementor-icon-list-item{ margin: 0; padding: 0; } .ms-n-list:not(#ms-z) .elementor-icon-list-item a, .ms-n-list:not(#ms-z) .elementor-icon-list-item > span{ min-height: 34px; display: flex; align-items: center; font-size: 15px; color: #c9ccd1; transition: color .2s; } .ms-n-list:not(#ms-z) .elementor-icon-list-item a:hover{ color: #fff; } .ms-n-list:not(#ms-z) .elementor-icon-list-text{ color: inherit; padding: 0; } .ms-n-list:not(#ms-z) .elementor-icon-list-item:last-child a{ color: var(--ms-orange); } .ms-n-list--plain:not(#ms-z) .elementor-icon-list-item:last-child a{ color: #c9ccd1; } .ms-n-footer__bottom:not(#ms-z){ position: relative; background: #141518; border-top: 1px solid rgba(255,255,255,0.08); } .ms-n-footer__bottom:not(#ms-z)::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(to right, rgba(247,147,30,0.75) 0 1.5px, transparent 1.5px 40px) left top / 100% 8px no-repeat, repeating-linear-gradient(to right, rgba(255,255,255,0.22) 0 1px, transparent 1px 8px) left top / 100% 4px no-repeat; } .ms-n-footer__bar:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; padding-bottom: 20px; font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.06em; color: #8a8f96; } .ms-n-footer__bar:not(#ms-z) .ms-n-list .elementor-icon-list-items{ flex-direction: row; gap: 22px; } .ms-n-footer__bar:not(#ms-z) .ms-n-list .elementor-icon-list-item a{ font-family: var(--ms-mono); font-size: 12px; color: #8a8f96; min-height: 24px; } .ms-n-totop:not(#ms-z) .elementor-button, .ms-n-totop:not(#ms-z) .elementor-button:hover{ display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; background: transparent; border: 1px solid #34383d; border-radius: 4px; color: #c9ccd1; font-family: var(--ms-mono); font-size: 12px; font-weight: 400; box-shadow: none; } .ms-n-totop:not(#ms-z) .elementor-button:hover{ border-color: var(--ms-orange); color: #fff; } .ms-n-totop:not(#ms-z) .elementor-button-text::after{ content: " ↑"; color: var(--ms-orange); } @media (max-width: 900px) { .ms-n-footer__in:not(#ms-z){ padding-top: 64px; } .ms-n-footer__links:not(#ms-z){ grid-template-columns: 1fr 1fr; padding-top: 48px; margin-top: 40px; } .ms-n-footer__col--brand:not(#ms-z){ grid-column: 1 / -1; } } @media (max-width: 560px) { .ms-n-footer__links:not(#ms-z){ grid-template-columns: 1fr; } } /* ========================================================= PODSTRONA ========================================================= */ .ms-n-subhero:not(#ms-z){ position: relative; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; } .ms-n-subhero:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; } .ms-n-subhero__in:not(#ms-z){ position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 80px; padding-bottom: 96px; } .ms-n-subhero__copy:not(#ms-z){ flex: 1 1 480px; min-width: 0; flex-direction: column; gap: 24px; } .ms-n-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.08em; color: #8a8f96; } .ms-n-crumbs:not(#ms-z) a{ color: #c9ccd1; } .ms-n-crumbs:not(#ms-z) a:hover{ color: var(--ms-orange); } .ms-n-subhero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(42px, 5.4vw, 80px); line-height: 0.96; font-weight: 800; letter-spacing: -0.035em; color: #f4f2ee; } .ms-n-subhero__lead:not(#ms-z){ max-width: 520px; font-size: 19px; line-height: 1.55; color: #c3c6cb; } .ms-n-subhero__media:not(#ms-z){ position: relative; flex: 1 1 520px; min-width: 0; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #24272b; } .ms-n-subhero__deco:not(#ms-z){ position: absolute; inset: 0; z-index: 2; pointer-events: none; } .ms-n-subhero__tape:not(#ms-z){ position: absolute; left: 0; right: 0; bottom: 0; } .ms-n-subhero__tape:not(#ms-z) .ms-hero__measure{ max-width: 1440px; margin: 0 auto; padding: 0 var(--ms-gutter) 18px; } .ms-n-about:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0; } .ms-n-about__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 64px; align-items: flex-start; } .ms-n-about__text:not(#ms-z){ flex: 1.2 1 480px; min-width: 0; flex-direction: column; gap: 22px; } .ms-n-prose:not(#ms-z){ font-size: 17px; line-height: 1.7; color: #3d4046; } .ms-n-prose:not(#ms-z) p + p{ margin-top: 1em; } .ms-n-prose:not(#ms-z) ul{ margin: 1em 0; padding: 0; list-style: none; } .ms-n-prose:not(#ms-z) li{ position: relative; padding-left: 22px; margin: .4em 0; } .ms-n-prose:not(#ms-z) li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--ms-orange); transform: skewX(-12deg); } .ms-n-feats:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; border-top: 1px solid var(--ms-line); counter-reset: msfeat; } .ms-n-feat:not(#ms-z){ position: relative; flex-direction: column; gap: 6px; padding: 22px 0 22px 64px; border-bottom: 1px solid var(--ms-line); counter-increment: msfeat; } .ms-n-feat:not(#ms-z)::before{ content: "0" counter(msfeat); position: absolute; left: 0; top: 18px; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--ms-rust); } .ms-n-feat__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.25; } .ms-n-feat__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-n-gallery:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 112px 0; } .ms-n-gallery__in:not(#ms-z){ gap: 48px; } .ms-n-gal:not(#ms-z) .gallery{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; } .ms-n-gal:not(#ms-z) .gallery-item{ margin: 0; padding: 0; width: auto; max-width: none; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; background: #e8e4dd; } .ms-n-gal:not(#ms-z) .gallery-icon, .ms-n-gal:not(#ms-z) .gallery-icon a{ display: block; height: 100%; } .ms-n-gal:not(#ms-z) .gallery-item img{ width: 100%; height: 100%; object-fit: cover; border: 0; transition: transform .5s; } .ms-n-gal:not(#ms-z) .gallery-item:hover img{ transform: scale(1.05); } .ms-n-gal:not(#ms-z) .gallery-item::after{ content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(45deg, transparent calc(50% - 1px), #f7931e calc(50% - 1px), #f7931e calc(50% + 1px), transparent calc(50% + 1px)); pointer-events: none; } .ms-n-gal:not(#ms-z) .gallery-caption{ display: none; } .ms-n-gal:not(#ms-z) br{ display: none; } .ms-n-variants:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 112px 0; } .ms-n-variants__in:not(#ms-z){ gap: 48px; } .ms-n-vcards:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ms-n-vcard:not(#ms-z){ position: relative; flex-direction: column; background: var(--ms-white); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .ms-n-vcard:not(#ms-z)::after{ content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 42px; background: linear-gradient(45deg, transparent calc(50% - 1px), #f7931e calc(50% - 1px), #f7931e calc(50% + 1px), transparent calc(50% + 1px)); } .ms-n-vcard__img:not(#ms-z){ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e8e4dd; } .ms-n-vcard__txt:not(#ms-z){ flex-direction: column; gap: 10px; padding: 24px 24px 30px; } .ms-n-vcard__title:not(#ms-z) .elementor-heading-title{ font-size: 22px; font-weight: 800; line-height: 1.2; } .ms-n-vcard__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-n-cta:not(#ms-z){ background: var(--ms-ink); padding: 72px 0; } .ms-n-cta__band:not(#ms-z){ position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 40px 56px 46px; background: var(--ms-orange); color: var(--ms-ink); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); background-image: linear-gradient(rgba(26,28,31,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,31,0.06) 1px, transparent 1px); background-size: 32px 32px; } .ms-n-cta__band:not(#ms-z)::after{ content: ""; position: absolute; left: 56px; right: 96px; bottom: 14px; height: 12px; border-bottom: 1px solid rgba(26,28,31,0.5); background: repeating-linear-gradient(to right, #1a1c1f 0 2px, transparent 2px 40px) left bottom / 100% 11px no-repeat, repeating-linear-gradient(to right, rgba(26,28,31,0.5) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat; } .ms-n-cta__txt:not(#ms-z){ flex: 1 1 520px; min-width: 0; flex-direction: column; gap: 10px; } .ms-n-cta__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.22em; } .ms-n-cta__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } .ms-n-cta__btns:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 12px; } .ms-n-cta__btns:not(#ms-z) .ms-n-btn .elementor-button{ min-height: 56px; } @media (max-width: 900px) { .ms-n-about:not(#ms-z), .ms-n-gallery:not(#ms-z), .ms-n-variants:not(#ms-z){ padding: 80px 0; } .ms-n-gal:not(#ms-z) .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-n-vcards:not(#ms-z){ grid-template-columns: 1fr; } .ms-n-cta__band:not(#ms-z){ padding: 32px 24px 44px; } .ms-n-cta__band:not(#ms-z)::after{ left: 24px; right: 64px; } } /* animacja refleksu przy zmianie slajdu */ .ms-n-hero:not(#ms-z).is-sweep .ms-hero__sweep{ animation: ms-sweep 1.4s ease-out; } /* w edytorze Elementora pokazujemy wszystkie slajdy jeden pod drugim, żeby dało się je edytować */ .elementor-editor-active .ms-n-hero__slides:not(#ms-z) { display: flex; flex-direction: column; } .elementor-editor-active .ms-n-slide:not(#ms-z) { opacity: 1; visibility: visible; min-height: 760px; border-bottom: 4px dashed rgba(247,147,30,0.6); } .elementor-editor-active .ms-n-slide__copy:not(#ms-z) { opacity: 1; transform: none; } .elementor-editor-active .ms-n-slide__spots:not(#ms-z) { opacity: 1; } /* nagłówek i stopka Theme Buildera bez białej ramki – zerujemy tylko zewnętrzne obudowy Elementora */ .elementor-location-header, .elementor-location-footer { margin: 0 !important; padding: 0 !important; } .elementor-location-header > .elementor-element:not(.ms), .elementor-location-header > .elementor-element:not(.ms) > .elementor-element:not(.ms), .elementor-location-footer > .elementor-element:not(.ms), .elementor-location-footer > .elementor-element:not(.ms) > .elementor-element:not(.ms) { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --container-max-width: 100%; --content-width: 100%; --gap: 0px; --row-gap: 0px; --column-gap: 0px; } .elementor-location-header .elementor-widget-html > .elementor-widget-container, .elementor-location-footer .elementor-widget-html > .elementor-widget-container:has(> .ms) { padding: 0 !important; margin: 0 !important; } /* ukrycie tytułu motywu na stronach */ .page .page-header { display: none; } /* zdjęcia wypełniające – Elementor ogranicza widżety do max-width:100%, tu musi być szerzej */ .ms-n-fill:not(#ms-z){ max-width: none !important; margin: 0 !important; flex: none !important; } .ms-n-fill:not(#ms-z) img{ max-width: none !important; width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .ms-n-acc__img:not(#ms-z){ left: -140px !important; right: auto !important; width: calc(100% + 280px) !important; } @media (max-width: 900px) { .ms-n-acc__img:not(#ms-z){ left: 0 !important; width: 100% !important; } } /* harmonijka: proste krawędzie z lewej i prawej (bez ciemnych trójkątów) */ @media (min-width: 901px) { .ms-n-acc__track:not(#ms-z){ left: -66px !important; right: -66px !important; width: auto !important; max-width: none !important; } .ms-n-acc__item:not(#ms-z):first-child, .ms-n-acc__item:not(#ms-z):last-child{ flex-basis: 66px !important; } .ms-n-acc__item:not(#ms-z):first-child .ms-n-acc__inner{ left: 66px; } .ms-n-acc__item:not(#ms-z):last-child .ms-n-acc__inner{ right: 66px; } } /* ========================================================= HERO – nawigacja slajdów (budowana przez skrypt) ========================================================= */ .ms-n-hero:not(#ms-z).has-nav .ms-n-hero__pills{ display: none !important; } .ms-hnav:not(#ms-z){ position: absolute; z-index: 20; right: var(--ms-side); bottom: 186px; display: flex; align-items: stretch; max-width: calc(100% - 2 * var(--ms-side)); background: rgba(20,22,25,0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); } .ms-hnav:not(#ms-z)::after{ content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; pointer-events: none; background: linear-gradient(45deg, transparent calc(50% - 1px), #f7931e calc(50% - 1px), #f7931e calc(50% + 1px), transparent calc(50% + 1px)); } .ms-hnav__items:not(#ms-z){ display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; } .ms-hnav__items:not(#ms-z)::-webkit-scrollbar{ display: none; } .ms-hnav__item:not(#ms-z), .ms-hnav__item:not(#ms-z):hover, .ms-hnav__item:not(#ms-z):focus{ position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 150px; padding: 15px 22px 13px; margin: 0; border: 0; border-left: 1px solid rgba(255,255,255,0.08); border-radius: 0; background: transparent; color: #a9adb3; font-family: var(--ms-font); text-align: left; text-transform: none; letter-spacing: normal; line-height: 1.2; cursor: pointer; box-shadow: none; transition: background .3s, color .3s; } .ms-hnav__item:not(#ms-z):hover{ color: #fff; background: rgba(255,255,255,0.05); } .ms-hnav__item:not(#ms-z).is-active{ color: #fff; background: rgba(247,147,30,0.10); } .ms-hnav__item:not(#ms-z):focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: -2px; } .ms-hnav__head:not(#ms-z){ display: flex; align-items: baseline; gap: 10px; } .ms-hnav__num:not(#ms-z){ font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.14em; color: #6b7077; transition: color .3s; } .ms-hnav__item:not(#ms-z).is-active .ms-hnav__num{ color: var(--ms-orange); } .ms-hnav__label:not(#ms-z){ font-size: 14px; font-weight: 600; white-space: nowrap; } .ms-hnav__bar:not(#ms-z){ position: relative; display: block; height: 7px; border-bottom: 1px solid rgba(255,255,255,0.22); background: repeating-linear-gradient(to right, rgba(255,255,255,0.28) 0 1px, transparent 1px 8px) left bottom / 100% 4px no-repeat; } .ms-hnav__bar:not(#ms-z) i{ position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ms-orange); transform: scaleX(0); transform-origin: left; } .ms-hnav__item:not(#ms-z).is-done .ms-hnav__bar i{ transform: scaleX(1); background: rgba(247,147,30,0.35); } .ms-hnav__item:not(#ms-z).is-active .ms-hnav__bar i{ transform: scaleX(1); } .ms-hnav__item:not(#ms-z).is-running .ms-hnav__bar i{ transform: scaleX(0); animation: ms-pillfill var(--ms-slide-time, 6000ms) linear forwards; } .ms-hnav__arrow:not(#ms-z), .ms-hnav__arrow:not(#ms-z):hover, .ms-hnav__arrow:not(#ms-z):focus{ flex: none; width: 54px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: #f4f2ee; cursor: pointer; box-shadow: none; transition: background .2s, color .2s; } .ms-hnav__arrow:not(#ms-z):hover{ background: var(--ms-orange); color: var(--ms-ink); } .ms-hnav__arrow--next:not(#ms-z), .ms-hnav__arrow--next:not(#ms-z):hover{ border-left: 1px solid rgba(255,255,255,0.08); padding-right: 6px; } @media (max-width: 1000px) { .ms-hnav:not(#ms-z){ position: relative; right: auto; bottom: auto; margin: 0 var(--ms-gutter) 20px; max-width: none; align-self: stretch; } .ms-hnav__item:not(#ms-z), .ms-hnav__item:not(#ms-z):hover, .ms-hnav__item:not(#ms-z):focus{ min-width: 128px; padding: 13px 16px 11px; } .ms-hnav__arrow:not(#ms-z), .ms-hnav__arrow:not(#ms-z):hover, .ms-hnav__arrow:not(#ms-z):focus{ width: 44px; } } /* węższe ekrany: nieaktywne pozycje pokazują tylko numer */ @media (max-width: 1280px) { .ms-hnav__item:not(#ms-z), .ms-hnav__item:not(#ms-z):hover, .ms-hnav__item:not(#ms-z):focus{ min-width: 74px; } .ms-hnav__item:not(#ms-z):not(.is-active) .ms-hnav__label{ display: none; } .ms-hnav__item:not(#ms-z).is-active{ min-width: 170px; } } @media (max-width: 1000px) { .ms-hnav__items:not(#ms-z){ flex: 1; } .ms-hnav__item:not(#ms-z), .ms-hnav__item:not(#ms-z):hover, .ms-hnav__item:not(#ms-z):focus{ min-width: 56px; flex: 1 1 auto; padding: 13px 12px 11px; } .ms-hnav__item:not(#ms-z).is-active{ min-width: 0; flex: 3 1 auto; } .ms-hnav__label:not(#ms-z){ overflow: hidden; text-overflow: ellipsis; } } /* ========================================================= Zdjęcia menu – kontener z widżetami Obraz (tylko źródło zdjęć) ========================================================= */ .ms-menu-photos:not(#ms-z){ display: none !important; } .elementor-editor-active .ms-menu-photos { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 14px var(--ms-gutter, 24px) !important; background: #24272b !important; border-top: 1px dashed #f7931e !important; border-bottom: 1px dashed #f7931e !important; } .elementor-editor-active .ms-menu-photos::before { content: "ZDJĘCIA DO MENU (01–05) · widoczne tylko w edytorze · kliknij zdjęcie, aby je zmienić"; flex: 0 0 100%; font: 500 11px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; color: #f7931e; } .elementor-editor-active .ms-menu-photos > .elementor-element { width: 130px !important; max-width: 130px !important; flex: none !important; } .elementor-editor-active .ms-menu-photos img { width: 130px !important; height: 86px !important; object-fit: cover; display: block; } /* Teksty menu – kontener z listami (tylko źródło tekstów) */ .ms-menu-texts:not(#ms-z){ display: none !important; } .elementor-editor-active .ms-menu-texts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px 24px !important; padding: 16px var(--ms-gutter, 24px) !important; background: #24272b !important; border-top: 1px dashed #f7931e !important; border-bottom: 1px dashed #f7931e !important; } .elementor-editor-active .ms-menu-texts::before { content: "TEKSTY I LINKI MENU · widoczne tylko w edytorze · kliknij listę, aby zmienić nazwy i linki"; grid-column: 1 / -1; font: 500 11px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; color: #f7931e; } .elementor-editor-active .ms-menu-texts > .elementor-element { width: auto !important; max-width: none !important; } .elementor-editor-active .ms-menu-texts .elementor-widget-container::before { display: block; margin-bottom: 6px; font: 500 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .1em; color: #8a8f96; } .elementor-editor-active .ms-menu-main .elementor-widget-container::before { content: "MENU GŁÓWNE 01–06"; } .elementor-editor-active .ms-menu-products .elementor-widget-container::before { content: "ZABUDOWY I PRODUKTY (lista)"; } .elementor-editor-active .ms-menu-rooms .elementor-widget-container::before { content: "POMIESZCZENIA – kafelki 01–05"; } .elementor-editor-active .ms-menu-contact .elementor-widget-container::before { content: "TELEFON / E-MAIL"; } .elementor-editor-active .ms-menu-texts .elementor-icon-list-text, .elementor-editor-active .ms-menu-texts a { color: #f4f2ee !important; font: 500 13px/1.6 "Archivo", sans-serif !important; } /* nagłówek: widżety w kolumnie (Elastyczne pole domyślnie układa je w rzędzie) */ .elementor-location-header > .elementor-element:not(.ms) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .elementor-location-header .elementor-widget-html { width: 100% !important; max-width: 100% !important; } /* ========================================================= Podmenu 02–05 – ten sam panel co „Drzwi szklane i zabudowy” ========================================================= */ .ms-header:not(#ms-z) .ms-mega.ms-mega--sub{ display: none !important; } .ms-header:not(#ms-z) .ms-mega.ms-mega--sub.is-open{ display: block !important; animation: ms-drop .3s ease-out; } .ms-header:not(#ms-z).is-drawer .ms-mega.ms-mega--sub{ display: none !important; } .ms-mega--sub:not(#ms-z) .ms-mega__col--list:only-child .ms-mega__links{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-drawer__sub:not(#ms-z) a.ms-drawer__noimg{ background: #24272b; border: 1px solid rgba(255,255,255,0.08); align-items: center; } .ms-drawer__sub:not(#ms-z) a.ms-drawer__noimg::after{ display: none; } .ms-menu-subphotos:not(#ms-z){ display: none !important; } .elementor-editor-active .ms-menu-subphotos { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; padding: 12px var(--ms-gutter, 24px) !important; background: #24272b !important; border-bottom: 1px dashed #f7931e !important; } .elementor-editor-active .ms-menu-subphotos::before { flex: 0 0 100%; font: 500 11px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; color: #f7931e; } .elementor-editor-active .ms-menu-sub-2-photos::before { content: "ZDJĘCIA PODMENU 02 – DRZWI SZKLANE (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-3-photos::before { content: "ZDJĘCIA PODMENU 03 – LUSTRA (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-4-photos::before { content: "ZDJĘCIA PODMENU 04 – SZYBY ZESPOLONE (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-5-photos::before { content: "ZDJĘCIA PODMENU 05 – POZOSTAŁE USŁUGI (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-subphotos > .elementor-element { width: 130px !important; max-width: 130px !important; flex: none !important; } .elementor-editor-active .ms-menu-subphotos img { width: 130px !important; height: 86px !important; object-fit: cover; display: block; } .elementor-editor-active .ms-menu-sub-2 .elementor-widget-container::before { content: "PODMENU 02 – DRZWI SZKLANE"; } .elementor-editor-active .ms-menu-sub-3 .elementor-widget-container::before { content: "PODMENU 03 – LUSTRA"; } .elementor-editor-active .ms-menu-sub-4 .elementor-widget-container::before { content: "PODMENU 04 – SZYBY ZESPOLONE"; } .elementor-editor-active .ms-menu-sub-5 .elementor-widget-container::before { content: "PODMENU 05 – POZOSTAŁE USŁUGI SZKLARSKIE"; } /* ========================================================= Obszar działania – osobny blok strony głównej (wyjęty ze stopki) ========================================================= */ .ms-n-area:not(#ms-z){ position: relative; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-area__in:not(#ms-z){ padding-top: 104px; padding-bottom: 104px; } .ms-n-footer__in:not(#ms-z){ padding-top: 0; } .ms-n-footer__links:not(#ms-z){ margin-top: 0; } @media (max-width: 900px) { .ms-n-area__in:not(#ms-z){ padding-top: 72px; padding-bottom: 72px; } .ms-n-footer__links:not(#ms-z){ margin-top: 0; } } /* ========================================================= Miarka z taśmą – ten sam znak w kolejnych miejscach ========================================================= */ :root { --ms-tape-ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+"); } /* etykiety kolumn w rozwijanym menu i w stopce */ .ms-mega__label:not(#ms-z), .ms-n-footer__label:not(#ms-z) .elementor-heading-title{ display: inline-flex !important; align-items: center; gap: 10px; } .ms-mega__label:not(#ms-z)::before, .ms-n-footer__label:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 52px; height: 16px; flex: none; background: var(--ms-orange); opacity: .85; -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } /* ramka „Nietypowe rozwiązanie?” w menu */ .ms-mega__cta:not(#ms-z){ justify-content: flex-start !important; gap: 16px !important; } .ms-mega__cta:not(#ms-z)::before{ content: ""; width: 72px; height: 22px; flex: none; background: var(--ms-orange); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-mega__cta:not(#ms-z) > svg{ margin-left: auto; } /* „ZADZWOŃ” w bloku Obszar działania */ .ms-n-footer__phone-k:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 10px; } .ms-n-footer__phone-k:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 46px; height: 14px; flex: none; background: var(--ms-orange); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } /* pomarańczowy pas wyceny na podstronach: etykieta + duży znak wodny */ .ms-n-cta__k:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 12px; } .ms-n-cta__k:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 56px; height: 17px; flex: none; background: var(--ms-ink); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-n-cta__band:not(#ms-z)::before{ content: ""; position: absolute; right: 4%; bottom: 36px; width: 300px; height: 92px; background: var(--ms-ink); opacity: .09; pointer-events: none; -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-n-cta__band:not(#ms-z) > *{ position: relative; z-index: 1; } @media (max-width: 900px) { .ms-n-cta__band:not(#ms-z)::before{ width: 200px; height: 62px; right: 16px; bottom: 40px; } } /* ========================================================= Logo Majster Szklarz (znak MS z łukiem) – nagłówek, menu na telefonie, stopka ========================================================= */ :root { --ms-logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 4 1405 722'%3E%3Cdefs%3E%3ClinearGradient id='msg' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23e8402f'/%3E%3Cstop offset='.55' stop-color='%23f7931e'/%3E%3Cstop offset='1' stop-color='%23fbb040'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23f4f2ee' fill-rule='evenodd' d='M3 721C3 720 6 709 10 698C14 686 21 664 26 650C30 635 38 610 44 594C49 578 57 552 62 536C67 520 73 501 76 492C79 484 84 467 88 455C92 443 98 425 101 416C104 406 107 394 109 390C111 385 115 370 119 358C123 345 130 324 134 310C139 297 146 273 152 258C157 242 165 216 170 200C175 184 182 164 184 155C187 146 193 128 197 116C207 83 216 58 216 57C216 57 218 59 219 62C221 64 223 68 224 70C225 72 233 85 242 100C250 115 266 142 277 160C304 206 308 214 320 234C326 244 337 262 344 275C352 288 364 309 372 321C379 333 387 347 390 352C392 357 398 366 402 373C406 380 412 390 416 396C419 402 424 411 428 417C431 422 434 427 434 427C435 427 447 406 461 382C475 357 496 321 506 302C517 283 531 260 536 250C542 240 549 228 552 223C560 209 584 167 617 110C633 82 646 58 647 58C648 57 650 62 665 111C671 127 678 150 682 161C685 173 688 182 689 182C689 182 691 179 694 175C716 138 756 110 806 97C829 91 843 90 878 89C895 89 909 89 909 89C909 89 907 91 904 93C902 94 896 98 893 101C889 103 885 106 884 107C883 108 880 110 879 111C876 113 874 113 869 113C854 113 828 117 812 120C760 134 722 164 705 207C703 212 698 227 695 239C690 255 688 261 688 259C688 258 684 249 681 239C645 127 642 117 641 117C641 117 628 139 612 166C581 221 541 291 490 380C471 413 451 448 445 458C436 474 435 476 434 474C432 472 424 459 418 448C415 443 404 425 395 409C386 393 376 377 374 374C373 371 364 356 354 340C345 324 332 302 326 292C320 280 310 265 306 256C301 248 291 232 285 221C278 210 269 194 264 185C258 176 251 164 247 157C243 150 237 140 234 134C230 128 226 122 226 120C224 117 222 116 222 118C216 136 182 240 180 250C178 253 174 266 170 278C167 289 162 306 158 315C149 344 136 385 127 414C122 429 113 456 108 474C102 491 94 517 89 531C84 545 77 568 73 582C68 595 64 609 63 612C62 615 58 629 53 643C48 657 43 675 40 683C37 691 36 698 36 698C36 699 64 699 97 699L158 699L202 566C226 492 248 425 251 417C254 408 257 401 257 401C257 401 260 405 263 411C271 425 272 426 294 464C305 484 319 508 326 520C332 530 339 542 340 545C342 548 345 552 346 555C350 561 373 601 379 612C382 616 384 621 384 621C384 622 372 640 370 642C370 643 368 641 367 639C363 633 343 598 334 582C328 573 320 558 315 550C310 541 305 532 304 530C300 524 278 485 271 473C267 466 263 460 263 461C262 462 183 698 178 714L176 723L89 723L2 723L3 721ZM694 701C690 689 678 652 666 618L646 557L648 553C655 543 664 534 665 535C665 536 677 573 692 618L719 698L923 698C1144 698 1136 699 1164 693C1221 681 1260 651 1279 603C1293 567 1297 507 1289 466C1278 410 1246 378 1188 363C1166 358 1169 358 1006 357C854 356 853 356 846 354C837 352 829 348 829 347C829 346 833 342 837 337L846 329L852 331C857 332 869 332 1009 333C1175 334 1167 333 1194 340C1234 349 1265 368 1284 394C1285 396 1287 398 1287 398C1290 401 1300 420 1304 431C1308 441 1312 459 1315 475C1317 488 1317 492 1317 518C1316 549 1315 561 1310 583C1294 654 1246 700 1171 716C1141 723 1138 723 908 723L701 723L694 701ZM788 566C787 566 786 565 786 565C786 564 784 557 781 548C778 540 773 523 769 511C765 499 761 485 760 482C754 466 746 440 746 438C746 437 748 435 750 433L753 429L767 435C785 444 798 448 816 451C820 452 824 452 826 453C828 453 898 454 981 454C1124 454 1133 455 1139 456C1165 464 1176 479 1176 510C1175 536 1168 550 1151 559C1137 566 1152 565 962 566C868 566 790 566 788 566ZM1135 540C1145 536 1149 531 1151 521C1152 513 1152 506 1150 498C1148 487 1145 484 1134 480C1129 479 1112 478 977 478C844 477 824 477 816 476C802 473 797 472 789 470C785 469 782 468 781 468C781 469 786 485 800 529C802 534 804 539 804 540C805 542 813 542 968 542C1116 542 1131 541 1135 540ZM1185 274C1041 273 905 272 904 272C904 271 921 254 926 251L929 248L1104 249C1209 250 1280 250 1281 249C1281 249 1282 218 1281 181L1280 114L1192 113L1102 112L1106 110C1112 106 1132 95 1139 92L1145 89L1225 89L1305 89L1305 181C1306 232 1306 273 1306 274C1305 274 1302 275 1298 275C1294 275 1243 274 1185 274Z'/%3E%3Cpath fill='url(%23msg)' d='M337 715C337 713 350 693 355 686C357 684 359 681 360 680C361 678 364 674 366 672C368 669 372 663 376 658C379 654 387 644 393 636C399 628 405 620 406 618C409 615 429 590 431 588C431 587 437 581 442 574C459 554 465 547 475 535C481 529 488 522 490 519C492 516 496 511 499 508C501 506 508 499 512 494C521 484 531 473 557 446C569 433 645 357 658 344C663 340 673 330 680 324C688 317 696 309 700 306C703 303 712 295 720 288C727 281 734 275 734 275C734 275 739 270 745 266C751 260 756 256 757 256C757 255 762 251 766 248C771 244 776 239 779 236C795 223 837 190 862 171C871 164 879 158 880 158C881 157 883 156 884 155C885 155 891 150 897 146C960 101 1032 60 1088 38C1170 5 1239 -1 1290 21C1318 33 1339 51 1360 82C1370 95 1383 124 1391 148C1394 158 1400 181 1400 183C1400 185 1398 184 1397 180C1396 176 1395 174 1389 160C1386 155 1384 150 1384 150C1384 149 1380 141 1373 130C1371 127 1369 124 1369 124C1368 124 1368 123 1368 123C1368 122 1361 112 1359 110C1359 110 1357 108 1355 105C1340 86 1313 68 1288 60C1252 48 1204 52 1157 71C1138 79 1127 84 1119 88C1116 90 1111 93 1106 95C1096 101 1086 106 1083 108C1081 109 1077 111 1074 113C1065 118 1036 138 1022 148C1011 156 980 180 979 181C979 181 976 183 974 185C968 189 952 203 946 208C944 211 940 214 938 215C931 222 908 242 902 248C899 251 892 258 886 262C874 273 814 333 793 356C777 373 765 385 764 387C757 394 753 399 749 404C743 410 729 426 723 433C721 435 718 439 716 441C713 444 700 459 677 486C659 507 654 513 636 536C628 546 617 560 611 567C594 588 585 600 568 622C559 635 551 645 550 646C550 646 547 649 545 653C542 657 536 666 530 673C524 680 520 686 520 687C520 687 505 709 501 713L499 716L418 716C351 716 337 716 337 715Z'/%3E%3C/svg%3E"); } .ms-logo:not(#ms-z) > svg{ display: none !important; } .ms-logo:not(#ms-z)::before{ content: ""; width: 76px; height: 39px; flex: none; background: var(--ms-logo-mark) no-repeat left center / contain; } .ms-logo:not(#ms-z){ gap: 12px; } /* menu główne – 6 pozycji: dłuższe nazwy w dwóch liniach (łamie skrypt menu) */ .ms-bar:not(#ms-z) .ms-wrap{ gap: 20px; } .ms-nav__txt:not(#ms-z){ display: block; line-height: 1.15; text-align: left; white-space: nowrap; } .ms-nav__item:not(#ms-z){ flex: none; } .ms-nav__chev:not(#ms-z){ flex: none; } .ms-nav__link:not(#ms-z){ flex: none; max-width: none !important; width: auto !important; } .ms-nav__txt:not(#ms-z){ flex: none; } @media (min-width: 1181px) { .ms-nav__num:not(#ms-z){ display: none !important; } .ms-nav__link:not(#ms-z){ padding-left: 13px !important; padding-right: 13px !important; } .ms-nav__link:not(#ms-z)::after{ left: 13px !important; right: 13px !important; } } @media (max-width: 1720px) and (min-width: 1181px) { .ms-nav__num:not(#ms-z){ display: none !important; } .ms-nav__link:not(#ms-z){ padding-left: 11px !important; padding-right: 11px !important; } .ms-nav__link:not(#ms-z)::after{ left: 11px !important; right: 11px !important; } } @media (max-width: 1500px) and (min-width: 1181px) { .ms-actions:not(#ms-z){ gap: 8px !important; } .ms-actions:not(#ms-z) .ms-btn{ padding: 0 14px !important; } .ms-actions:not(#ms-z) .ms-btn--ghost{ font-size: 0 !important; gap: 0 !important; width: 48px; padding: 0 !important; justify-content: center; } .ms-actions:not(#ms-z) .ms-btn--ghost svg{ width: 18px; height: 18px; } } @media (max-width: 1360px) and (min-width: 1181px) { .ms-nav__link:not(#ms-z){ padding-left: 8px !important; padding-right: 8px !important; font-size: 14px !important; gap: 5px !important; } .ms-nav__link:not(#ms-z)::after{ left: 8px !important; right: 8px !important; } .ms-logo__text:not(#ms-z){ display: none !important; } } @media (max-width: 1260px) and (min-width: 1181px) { .ms-actions:not(#ms-z) .ms-btn--primary{ font-size: 14px !important; padding: 0 12px !important; } .ms-actions:not(#ms-z) .ms-btn--primary svg{ display: none; } } .ms-mega--sub:not(#ms-z) .ms-mega__col--list:only-child .ms-mega__links{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-drawer__sub:not(#ms-z) a.ms-drawer__noimg{ background: #24272b; border: 1px solid rgba(255,255,255,0.08); align-items: center; } .ms-drawer__sub:not(#ms-z) a.ms-drawer__noimg::after{ display: none; } .ms-menu-subphotos:not(#ms-z){ display: none !important; } .elementor-editor-active .ms-menu-subphotos { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; padding: 12px var(--ms-gutter, 24px) !important; background: #24272b !important; border-bottom: 1px dashed #f7931e !important; } .elementor-editor-active .ms-menu-subphotos::before { flex: 0 0 100%; font: 500 11px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; color: #f7931e; } .elementor-editor-active .ms-menu-sub-2-photos::before { content: "ZDJĘCIA PODMENU 02 – DRZWI SZKLANE (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-3-photos::before { content: "ZDJĘCIA PODMENU 03 – LUSTRA (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-4-photos::before { content: "ZDJĘCIA PODMENU 04 – SZYBY ZESPOLONE (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-sub-5-photos::before { content: "ZDJĘCIA PODMENU 05 – POZOSTAŁE USŁUGI (kolejność = kolejność pozycji)"; } .elementor-editor-active .ms-menu-subphotos > .elementor-element { width: 130px !important; max-width: 130px !important; flex: none !important; } .elementor-editor-active .ms-menu-subphotos img { width: 130px !important; height: 86px !important; object-fit: cover; display: block; } .elementor-editor-active .ms-menu-sub-2 .elementor-widget-container::before { content: "PODMENU 02 – DRZWI SZKLANE"; } .elementor-editor-active .ms-menu-sub-3 .elementor-widget-container::before { content: "PODMENU 03 – LUSTRA"; } .elementor-editor-active .ms-menu-sub-4 .elementor-widget-container::before { content: "PODMENU 04 – SZYBY ZESPOLONE"; } .elementor-editor-active .ms-menu-sub-5 .elementor-widget-container::before { content: "PODMENU 05 – POZOSTAŁE USŁUGI SZKLARSKIE"; } /* ========================================================= Obszar działania – osobny blok strony głównej (wyjęty ze stopki) ========================================================= */ .ms-n-area:not(#ms-z){ position: relative; overflow: hidden; background: var(--ms-ink); color: #f4f2ee; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-area__in:not(#ms-z){ padding-top: 104px; padding-bottom: 104px; } .ms-n-footer__in:not(#ms-z){ padding-top: 0; } .ms-n-footer__links:not(#ms-z){ margin-top: 0; } @media (max-width: 900px) { .ms-n-area__in:not(#ms-z){ padding-top: 72px; padding-bottom: 72px; } .ms-n-footer__links:not(#ms-z){ margin-top: 0; } } /* ========================================================= Miarka z taśmą – ten sam znak w kolejnych miejscach ========================================================= */ :root { --ms-tape-ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NiAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMyI+PHBhdGggZD0iTTEuNiAxOC4yVjkuNkE4LjQgOC40IDAgMCAxIDEwIDEuMkgxNkEzIDMgMCAwIDEgMTkgNC4yVjE4LjJaIi8+PHBhdGggZD0iTTAuNCAxOS4xSDIwLjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHJlY3QgeD0iMTkiIHk9IjguNiIgd2lkdGg9IjIiIGhlaWdodD0iNC40IiByeD0iLjYiIGZpbGw9IiMwMDAiIHN0cm9rZT0ibm9uZSIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjQuMiIvPjxjaXJjbGUgY3g9IjEwLjIiIGN5PSI5LjgiIHI9IjEuNCIgZmlsbD0iIzAwMCIgc3Ryb2tlPSJub25lIi8+PHJlY3QgeD0iMTkuNiIgeT0iMTcuNSIgd2lkdGg9IjQzLjIiIGhlaWdodD0iMC44IiBmaWxsPSIjMDAwIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNMjQgMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0yOCAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTM2IDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTQwIDE3LjVWMTQuOCIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDQgMTcuNVYxNiIgc3Ryb2tlLXdpZHRoPSIwLjciLz48cGF0aCBkPSJNNDggMTcuNVYxNC44IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01MiAxNy41VjE2IiBzdHJva2Utd2lkdGg9IjAuNyIvPjxwYXRoIGQ9Ik01NiAxNy41VjE0LjgiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYwIDE3LjVWMTYiIHN0cm9rZS13aWR0aD0iMC43Ii8+PHBhdGggZD0iTTYzLjMgMTQuNnY0LjQiIHN0cm9rZS13aWR0aD0iMS4yIi8+PC9zdmc+"); } /* etykiety kolumn w rozwijanym menu i w stopce */ .ms-mega__label:not(#ms-z), .ms-n-footer__label:not(#ms-z) .elementor-heading-title{ display: inline-flex !important; align-items: center; gap: 10px; } .ms-mega__label:not(#ms-z)::before, .ms-n-footer__label:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 52px; height: 16px; flex: none; background: var(--ms-orange); opacity: .85; -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } /* ramka „Nietypowe rozwiązanie?” w menu */ .ms-mega__cta:not(#ms-z){ justify-content: flex-start !important; gap: 16px !important; } .ms-mega__cta:not(#ms-z)::before{ content: ""; width: 72px; height: 22px; flex: none; background: var(--ms-orange); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-mega__cta:not(#ms-z) > svg{ margin-left: auto; } /* „ZADZWOŃ” w bloku Obszar działania */ .ms-n-footer__phone-k:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 10px; } .ms-n-footer__phone-k:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 46px; height: 14px; flex: none; background: var(--ms-orange); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } /* pomarańczowy pas wyceny na podstronach: etykieta + duży znak wodny */ .ms-n-cta__k:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; gap: 12px; } .ms-n-cta__k:not(#ms-z) .elementor-heading-title::before{ content: ""; width: 56px; height: 17px; flex: none; background: var(--ms-ink); -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-n-cta__band:not(#ms-z)::before{ content: ""; position: absolute; right: 4%; bottom: 36px; width: 300px; height: 92px; background: var(--ms-ink); opacity: .09; pointer-events: none; -webkit-mask: var(--ms-tape-ico) no-repeat center / contain; mask: var(--ms-tape-ico) no-repeat center / contain; } .ms-n-cta__band:not(#ms-z) > *{ position: relative; z-index: 1; } @media (max-width: 900px) { .ms-n-cta__band:not(#ms-z)::before{ width: 200px; height: 62px; right: 16px; bottom: 40px; } } /* ========================================================= Logo Majster Szklarz (znak MS z łukiem) – nagłówek, menu na telefonie, stopka ========================================================= */ :root { --ms-logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 4 1405 722'%3E%3Cdefs%3E%3ClinearGradient id='msg' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23e8402f'/%3E%3Cstop offset='.55' stop-color='%23f7931e'/%3E%3Cstop offset='1' stop-color='%23fbb040'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23f4f2ee' fill-rule='evenodd' d='M3 721C3 720 6 709 10 698C14 686 21 664 26 650C30 635 38 610 44 594C49 578 57 552 62 536C67 520 73 501 76 492C79 484 84 467 88 455C92 443 98 425 101 416C104 406 107 394 109 390C111 385 115 370 119 358C123 345 130 324 134 310C139 297 146 273 152 258C157 242 165 216 170 200C175 184 182 164 184 155C187 146 193 128 197 116C207 83 216 58 216 57C216 57 218 59 219 62C221 64 223 68 224 70C225 72 233 85 242 100C250 115 266 142 277 160C304 206 308 214 320 234C326 244 337 262 344 275C352 288 364 309 372 321C379 333 387 347 390 352C392 357 398 366 402 373C406 380 412 390 416 396C419 402 424 411 428 417C431 422 434 427 434 427C435 427 447 406 461 382C475 357 496 321 506 302C517 283 531 260 536 250C542 240 549 228 552 223C560 209 584 167 617 110C633 82 646 58 647 58C648 57 650 62 665 111C671 127 678 150 682 161C685 173 688 182 689 182C689 182 691 179 694 175C716 138 756 110 806 97C829 91 843 90 878 89C895 89 909 89 909 89C909 89 907 91 904 93C902 94 896 98 893 101C889 103 885 106 884 107C883 108 880 110 879 111C876 113 874 113 869 113C854 113 828 117 812 120C760 134 722 164 705 207C703 212 698 227 695 239C690 255 688 261 688 259C688 258 684 249 681 239C645 127 642 117 641 117C641 117 628 139 612 166C581 221 541 291 490 380C471 413 451 448 445 458C436 474 435 476 434 474C432 472 424 459 418 448C415 443 404 425 395 409C386 393 376 377 374 374C373 371 364 356 354 340C345 324 332 302 326 292C320 280 310 265 306 256C301 248 291 232 285 221C278 210 269 194 264 185C258 176 251 164 247 157C243 150 237 140 234 134C230 128 226 122 226 120C224 117 222 116 222 118C216 136 182 240 180 250C178 253 174 266 170 278C167 289 162 306 158 315C149 344 136 385 127 414C122 429 113 456 108 474C102 491 94 517 89 531C84 545 77 568 73 582C68 595 64 609 63 612C62 615 58 629 53 643C48 657 43 675 40 683C37 691 36 698 36 698C36 699 64 699 97 699L158 699L202 566C226 492 248 425 251 417C254 408 257 401 257 401C257 401 260 405 263 411C271 425 272 426 294 464C305 484 319 508 326 520C332 530 339 542 340 545C342 548 345 552 346 555C350 561 373 601 379 612C382 616 384 621 384 621C384 622 372 640 370 642C370 643 368 641 367 639C363 633 343 598 334 582C328 573 320 558 315 550C310 541 305 532 304 530C300 524 278 485 271 473C267 466 263 460 263 461C262 462 183 698 178 714L176 723L89 723L2 723L3 721ZM694 701C690 689 678 652 666 618L646 557L648 553C655 543 664 534 665 535C665 536 677 573 692 618L719 698L923 698C1144 698 1136 699 1164 693C1221 681 1260 651 1279 603C1293 567 1297 507 1289 466C1278 410 1246 378 1188 363C1166 358 1169 358 1006 357C854 356 853 356 846 354C837 352 829 348 829 347C829 346 833 342 837 337L846 329L852 331C857 332 869 332 1009 333C1175 334 1167 333 1194 340C1234 349 1265 368 1284 394C1285 396 1287 398 1287 398C1290 401 1300 420 1304 431C1308 441 1312 459 1315 475C1317 488 1317 492 1317 518C1316 549 1315 561 1310 583C1294 654 1246 700 1171 716C1141 723 1138 723 908 723L701 723L694 701ZM788 566C787 566 786 565 786 565C786 564 784 557 781 548C778 540 773 523 769 511C765 499 761 485 760 482C754 466 746 440 746 438C746 437 748 435 750 433L753 429L767 435C785 444 798 448 816 451C820 452 824 452 826 453C828 453 898 454 981 454C1124 454 1133 455 1139 456C1165 464 1176 479 1176 510C1175 536 1168 550 1151 559C1137 566 1152 565 962 566C868 566 790 566 788 566ZM1135 540C1145 536 1149 531 1151 521C1152 513 1152 506 1150 498C1148 487 1145 484 1134 480C1129 479 1112 478 977 478C844 477 824 477 816 476C802 473 797 472 789 470C785 469 782 468 781 468C781 469 786 485 800 529C802 534 804 539 804 540C805 542 813 542 968 542C1116 542 1131 541 1135 540ZM1185 274C1041 273 905 272 904 272C904 271 921 254 926 251L929 248L1104 249C1209 250 1280 250 1281 249C1281 249 1282 218 1281 181L1280 114L1192 113L1102 112L1106 110C1112 106 1132 95 1139 92L1145 89L1225 89L1305 89L1305 181C1306 232 1306 273 1306 274C1305 274 1302 275 1298 275C1294 275 1243 274 1185 274Z'/%3E%3Cpath fill='url(%23msg)' d='M337 715C337 713 350 693 355 686C357 684 359 681 360 680C361 678 364 674 366 672C368 669 372 663 376 658C379 654 387 644 393 636C399 628 405 620 406 618C409 615 429 590 431 588C431 587 437 581 442 574C459 554 465 547 475 535C481 529 488 522 490 519C492 516 496 511 499 508C501 506 508 499 512 494C521 484 531 473 557 446C569 433 645 357 658 344C663 340 673 330 680 324C688 317 696 309 700 306C703 303 712 295 720 288C727 281 734 275 734 275C734 275 739 270 745 266C751 260 756 256 757 256C757 255 762 251 766 248C771 244 776 239 779 236C795 223 837 190 862 171C871 164 879 158 880 158C881 157 883 156 884 155C885 155 891 150 897 146C960 101 1032 60 1088 38C1170 5 1239 -1 1290 21C1318 33 1339 51 1360 82C1370 95 1383 124 1391 148C1394 158 1400 181 1400 183C1400 185 1398 184 1397 180C1396 176 1395 174 1389 160C1386 155 1384 150 1384 150C1384 149 1380 141 1373 130C1371 127 1369 124 1369 124C1368 124 1368 123 1368 123C1368 122 1361 112 1359 110C1359 110 1357 108 1355 105C1340 86 1313 68 1288 60C1252 48 1204 52 1157 71C1138 79 1127 84 1119 88C1116 90 1111 93 1106 95C1096 101 1086 106 1083 108C1081 109 1077 111 1074 113C1065 118 1036 138 1022 148C1011 156 980 180 979 181C979 181 976 183 974 185C968 189 952 203 946 208C944 211 940 214 938 215C931 222 908 242 902 248C899 251 892 258 886 262C874 273 814 333 793 356C777 373 765 385 764 387C757 394 753 399 749 404C743 410 729 426 723 433C721 435 718 439 716 441C713 444 700 459 677 486C659 507 654 513 636 536C628 546 617 560 611 567C594 588 585 600 568 622C559 635 551 645 550 646C550 646 547 649 545 653C542 657 536 666 530 673C524 680 520 686 520 687C520 687 505 709 501 713L499 716L418 716C351 716 337 716 337 715Z'/%3E%3C/svg%3E"); } .ms-logo:not(#ms-z) > svg{ display: none !important; } .ms-logo:not(#ms-z)::before{ content: ""; width: 76px; height: 39px; flex: none; background: var(--ms-logo-mark) no-repeat left center / contain; } .ms-logo:not(#ms-z){ gap: 12px; } /* menu główne – 6 pozycji: dłuższe nazwy łamią się na dwie linie */ .ms-bar:not(#ms-z) .ms-wrap{ gap: 20px; } @media (min-width: 1181px) { .ms-nav__link:not(#ms-z){ white-space: normal !important; line-height: 1.15 !important; max-width: 11.5em; padding-left: 12px !important; padding-right: 12px !important; font-size: 15px !important; } .ms-nav__link:not(#ms-z)::after{ left: 12px !important; right: 12px !important; } } @media (max-width: 1720px) and (min-width: 1181px) { .ms-nav__num:not(#ms-z){ display: none !important; } .ms-nav__link:not(#ms-z){ max-width: 9.2em; padding-left: 10px !important; padding-right: 10px !important; } .ms-nav__link:not(#ms-z)::after{ left: 10px !important; right: 10px !important; } } @media (max-width: 1560px) and (min-width: 1181px) { .ms-actions:not(#ms-z){ gap: 8px !important; } .ms-actions:not(#ms-z) .ms-btn{ padding: 0 14px !important; } .ms-actions:not(#ms-z) .ms-btn--ghost{ font-size: 0 !important; gap: 0 !important; width: 48px; padding: 0 !important; justify-content: center; } .ms-actions:not(#ms-z) .ms-btn--ghost svg{ width: 18px; height: 18px; } } @media (max-width: 1400px) and (min-width: 1181px) { .ms-nav__link:not(#ms-z){ padding-left: 8px !important; padding-right: 8px !important; font-size: 14px !important; max-width: 8.6em; } .ms-nav__link:not(#ms-z)::after{ left: 8px !important; right: 8px !important; } .ms-logo__text:not(#ms-z){ display: none !important; } } @media (max-width: 1260px) and (min-width: 1181px) { .ms-actions:not(#ms-z) .ms-btn--primary{ font-size: 14px !important; padding: 0 12px !important; } .ms-actions:not(#ms-z) .ms-btn--primary svg{ display: none; } } .ms-mega--sub:not(#ms-z) .ms-mega__col--list:only-child .ms-mega__links{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .elementor-editor-active .ms-menu-sub-6 .elementor-widget-container::before { content: "PODMENU 06"; } .ms-n-footer:not(#ms-z) .ms-logo::before{ width: 92px; height: 47px; } @media (max-width: 1180px) { .ms-logo:not(#ms-z)::before{ width: 72px; height: 37px; } } /* ========================================================= PODSTRONA „DRZWI SZKLANE” – skróty, rodzaje z rysunkami, szkło, FAQ ========================================================= */ /* skróty do rodzajów */ .ms-n-dnav:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 96px 0 40px; } .ms-n-dnav__in:not(#ms-z){ gap: 40px; } .ms-n-dnav__head:not(#ms-z){ flex-direction: column; gap: 18px; } .ms-n-dnav__grid:not(#ms-z){ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .ms-n-dchip:not(#ms-z){ position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px 16px; background: var(--ms-white); border: 1px solid var(--ms-line); border-radius: 4px; color: var(--ms-ink); text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); } .ms-n-dchip:not(#ms-z)::after{ content: ""; position: absolute; top: 0; right: 0; width: 23px; height: 23px; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--ms-orange) calc(50% - 1px), var(--ms-orange) calc(50% + 1px), transparent calc(50% + 1px)); } .ms-n-dchip:not(#ms-z):hover{ border-color: var(--ms-orange); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(26,28,31,0.08); } .ms-n-dchip__ico:not(#ms-z){ width: 64px; height: 72px; } .ms-n-dchip__ico:not(#ms-z) svg{ width: 100%; height: 100%; display: block; } .ms-n-dchip__name:not(#ms-z) .elementor-heading-title{ font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ms-ink); } .ms-n-dchip__num:not(#ms-z){ position: absolute !important; right: 16px; bottom: 14px; } .ms-n-dchip__num:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ms-text-muted); } @media (max-width: 1100px) { .ms-n-dnav__grid:not(#ms-z){ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-dnav__grid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-n-dnav:not(#ms-z){ padding-top: 64px; } } /* rodzaje drzwi – wiersze naprzemienne */ .ms-n-doors:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 40px 0 112px; } .ms-n-doors__in:not(#ms-z){ gap: 0; } .ms-n-door:not(#ms-z){ position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px 72px; padding: 72px 0; border-top: 1px solid var(--ms-line); scroll-margin-top: 140px; } .ms-n-door:not(#ms-z):nth-child(even){ flex-direction: row-reverse; } .ms-n-door__info:not(#ms-z){ position: relative; flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 16px; } .ms-n-door__num:not(#ms-z){ position: absolute !important; top: -70px; right: 0; z-index: 0; pointer-events: none; } .ms-n-door__num:not(#ms-z) .elementor-heading-title{ font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(194,65,12,0.28); } .ms-n-door__info:not(#ms-z) > *{ position: relative; z-index: 1; } .ms-n-door__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; color: var(--ms-ink); } .ms-n-door__desc:not(#ms-z){ max-width: 560px; } .ms-n-door__specs:not(#ms-z){ margin-top: 4px; } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-items{ border-top: 1px solid var(--ms-line); } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--ms-line); font-size: 15px; color: #3d4046; } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-item a{ color: inherit; pointer-events: none; } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 2px; background: var(--ms-orange); } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-item::after{ content: ""; position: absolute; left: 14px; top: calc(50% - 4px); width: 2px; height: 10px; background: var(--ms-orange); } .ms-n-door__specs:not(#ms-z) .elementor-icon-list-icon{ display: none; } .ms-n-door__btns:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .ms-n-door__media:not(#ms-z){ position: relative; flex: 1.15 1 480px; min-width: 0; } /* galeria: pierwsze zdjęcie duże, kolejne w rzędzie */ /* galeria pod pionowe zdjęcia drzwi: duże zdjęcie 2:3 z lewej, kwadraty z prawej */ .ms-n-door__gal:not(#ms-z) .gallery{ display: grid; grid-template-columns: 2fr 1fr; grid-auto-flow: dense; gap: 10px; margin: 0; } .ms-n-door__gal:not(#ms-z) .gallery-item{ margin: 0; padding: 0; width: auto !important; max-width: none; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 1 / 1; background: #e8e4dd; } .ms-n-door__gal:not(#ms-z) .gallery-item:first-child{ grid-row: span 3; aspect-ratio: auto; } .ms-n-door__gal:not(#ms-z) .gallery-item:nth-child(n+5){ aspect-ratio: 4 / 3; } .ms-n-door__gal:not(#ms-z) .gallery-icon, .ms-n-door__gal:not(#ms-z) .gallery-icon a{ display: block; height: 100%; } .ms-n-door__gal:not(#ms-z) .gallery-item img{ width: 100%; height: 100%; object-fit: cover; border: 0; transition: transform .5s; } .ms-n-door__gal:not(#ms-z) .gallery-item:hover img{ transform: scale(1.05); } .ms-n-door__gal:not(#ms-z) .gallery-caption{ display: none; } .ms-n-door__gal:not(#ms-z) br{ display: none; } /* rysunek techniczny przypięty do galerii */ .ms-n-door__plan:not(#ms-z){ position: absolute !important; z-index: 3; top: -28px; left: -28px; width: 170px; flex-direction: column; gap: 0; padding: 12px 12px 10px; background: #f4f2ee; border: 1px solid var(--ms-line); box-shadow: 0 18px 40px rgba(26,28,31,0.16); background-image: linear-gradient(rgba(26,28,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,31,0.05) 1px, transparent 1px); background-size: 12px 12px; transform: rotate(-2deg); } .ms-n-door:not(#ms-z):nth-child(even) .ms-n-door__plan{ left: auto; right: -28px; transform: rotate(2deg); } .ms-n-door__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-n-door__cap:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ms-text-muted); text-transform: uppercase; line-height: 1.3; } @media (max-width: 900px) { .ms-n-door:not(#ms-z), .ms-n-door:not(#ms-z):nth-child(even){ flex-direction: column; align-items: stretch; padding: 56px 0; gap: 36px; } .ms-n-door__num:not(#ms-z) .elementor-heading-title{ font-size: 110px; } .ms-n-door__media:not(#ms-z){ order: -1; flex: none !important; } .ms-n-door__info:not(#ms-z){ flex: none !important; } .ms-n-door__plan:not(#ms-z), .ms-n-door:not(#ms-z):nth-child(even) .ms-n-door__plan{ width: 120px; top: auto; bottom: -22px; left: auto; right: 10px; padding: 8px; } } /* rodzaje szkła – próbki */ .ms-n-glass:not(#ms-z){ position: relative; background: var(--ms-ink); color: #f4f2ee; padding: 112px 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-glass__in:not(#ms-z){ gap: 48px; } .ms-n-glass__lead:not(#ms-z){ color: #c3c6cb !important; } .ms-n-swatches:not(#ms-z){ display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .ms-n-swatch:not(#ms-z){ flex-direction: column; gap: 4px; } .ms-n-swatch:not(#ms-z)::before{ content: ""; display: block; aspect-ratio: 3 / 4; margin-bottom: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 0 0 6px rgba(255,255,255,0.06); background-image: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.35) 40%, transparent 46% 58%, rgba(255,255,255,0.18) 60%, transparent 64%); } .ms-n-swatch--clear:not(#ms-z)::before{ background-color: rgba(150,200,175,0.30); } .ms-n-swatch--optiwhite:not(#ms-z)::before{ background-color: rgba(220,236,242,0.30); } .ms-n-swatch--satin:not(#ms-z)::before{ background-color: rgba(236,238,240,0.78); background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px); background-size: 4px 4px; } .ms-n-swatch--graphite:not(#ms-z)::before{ background-color: rgba(70,74,80,0.85); } .ms-n-swatch--bronze:not(#ms-z)::before{ background-color: rgba(140,96,60,0.80); } .ms-n-swatch--pattern:not(#ms-z)::before{ background-color: rgba(236,238,240,0.25); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.75) 0 10px, transparent 10px 20px); } .ms-n-swatch__name:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 700; color: #f4f2ee; } .ms-n-swatch__txt:not(#ms-z) .elementor-heading-title{ font-size: 13px; line-height: 1.4; color: var(--ms-text-muted-dark); } @media (max-width: 1100px) { .ms-n-swatches:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-swatches:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* FAQ – akordeon Elementora */ .ms-n-faq:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 112px 0; } .ms-n-faq__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; } .ms-n-faq__head:not(#ms-z){ flex: 1 1 340px; min-width: 0; flex-direction: column; gap: 18px; position: sticky; top: 140px; } .ms-n-faq__lead:not(#ms-z){ font-size: 17px; line-height: 1.6; color: var(--ms-text-muted); } .ms-n-acc2:not(#ms-z){ flex: 1.6 1 520px; min-width: 0; } .ms-n-acc2:not(#ms-z) .elementor-accordion-item{ border: 0 !important; border-top: 1px solid var(--ms-line) !important; } .ms-n-acc2:not(#ms-z) .elementor-accordion-item:last-child{ border-bottom: 1px solid var(--ms-line) !important; } .ms-n-acc2:not(#ms-z) .elementor-tab-title{ display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0 !important; border: 0 !important; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; cursor: pointer; } .ms-n-acc2:not(#ms-z) .elementor-tab-title a, .ms-n-acc2:not(#ms-z) .elementor-accordion-title{ color: var(--ms-ink) !important; text-decoration: none; font: inherit; } .ms-n-acc2:not(#ms-z) .elementor-tab-title.elementor-active a{ color: var(--ms-rust) !important; } .ms-n-acc2:not(#ms-z) .elementor-accordion-icon{ flex: none; width: 36px !important; height: 36px; display: flex !important; align-items: center; justify-content: center; border: 1px solid var(--ms-line); border-radius: 50%; color: var(--ms-orange); font-size: 18px; float: none !important; } .ms-n-acc2:not(#ms-z) .elementor-tab-title.elementor-active .elementor-accordion-icon{ background: var(--ms-orange); border-color: var(--ms-orange); color: var(--ms-ink); } .ms-n-acc2:not(#ms-z) .elementor-tab-content{ padding: 0 60px 26px 0 !important; border: 0 !important; font-size: 16px; line-height: 1.7; color: #3d4046; } @media (max-width: 900px) { .ms-n-faq__head:not(#ms-z){ position: static; } .ms-n-acc2:not(#ms-z) .elementor-tab-content{ padding-right: 0 !important; } } .ms-n-acc2:not(#ms-z) .elementor-accordion-icon-opened{ display: none !important; } .ms-n-acc2:not(#ms-z) .elementor-tab-title.elementor-active .elementor-accordion-icon-closed{ display: none !important; } .ms-n-acc2:not(#ms-z) .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{ display: block !important; } .ms-n-acc2:not(#ms-z) .elementor-accordion-icon i, .ms-n-acc2:not(#ms-z) .elementor-accordion-icon svg{ font-size: 14px; width: 14px; height: 14px; fill: currentColor; } .ms-n-dchip__name:not(#ms-z){ padding-right: 24px; } @media (max-width: 900px) { .ms-n-door__plan:not(#ms-z), .ms-n-door:not(#ms-z):nth-child(even) .ms-n-door__plan{ width: 104px; top: -14px; bottom: auto; right: -6px; left: auto; padding: 6px; } .ms-n-door__cap:not(#ms-z){ display: none; } .ms-n-door__num:not(#ms-z){ top: -40px; } } /* ========================================================= PODSTRONA „LUSTRA” ========================================================= */ .ms-n-mfeat:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0 96px; } .ms-n-mfeat__in:not(#ms-z){ gap: 48px; } .ms-n-mfeats:not(#ms-z){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ms-line); border-left: 1px solid var(--ms-line); } .ms-n-mfeat__card:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; padding: 28px 28px 30px; border-right: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); transition: background .3s; } .ms-n-mfeat__card:not(#ms-z):hover{ background: var(--ms-paper); } .ms-n-mfeat__card:not(#ms-z)::after{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--ms-orange); transition: width .35s; } .ms-n-mfeat__card:not(#ms-z):hover::after{ width: 100%; } .ms-n-mfeat__ico:not(#ms-z){ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(247,147,30,0.12); color: var(--ms-rust); margin-bottom: 6px; } .ms-n-mfeat__ico:not(#ms-z) .elementor-widget-container{ display: flex; } .ms-n-mfeat__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ms-ink); } .ms-n-mfeat__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } @media (max-width: 900px) { .ms-n-mfeats:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-mfeats:not(#ms-z){ grid-template-columns: 1fr; } } .ms-n-dnav--m:not(#ms-z){ padding-top: 80px; } .ms-n-glass__sub:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8f96; } .ms-n-glass__in:not(#ms-z) .ms-n-swatches + .ms-n-glass__sub{ margin-top: 12px; } /* próbki luster */ .ms-n-swatch--silver:not(#ms-z)::before{ background-color: #d9e0e4; background-image: linear-gradient(115deg, rgba(255,255,255,0) 0 38%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0) 46% 58%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 64%), linear-gradient(180deg, #eef2f4, #b9c3c9); } .ms-n-swatch--graphite-m:not(#ms-z)::before{ background-color: #5a6066; background-image: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.35) 40%, transparent 46% 58%, rgba(255,255,255,0.2) 60%, transparent 64%), linear-gradient(180deg, #767c82, #3f4449); } .ms-n-swatch--bronze-m:not(#ms-z)::before{ background-color: #8a6a4a; background-image: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.35) 40%, transparent 46% 58%, rgba(255,255,255,0.2) 60%, transparent 64%), linear-gradient(180deg, #a98762, #6b4f35); } .ms-n-swatch--antique:not(#ms-z)::before{ background-color: #b9b29e; background-image: radial-gradient(circle at 20% 30%, rgba(90,80,60,0.45) 0 8%, transparent 14%), radial-gradient(circle at 70% 60%, rgba(90,80,60,0.35) 0 10%, transparent 18%), radial-gradient(circle at 40% 85%, rgba(90,80,60,0.4) 0 6%, transparent 12%), linear-gradient(180deg, #d3cdb9, #8f8873); } /* barwa LED – lustro z poświatą */ .ms-n-swatch--led-warm:not(#ms-z)::before, .ms-n-swatch--led-neutral:not(#ms-z)::before, .ms-n-swatch--led-cold:not(#ms-z)::before{ background-color: #c9d1d6; border-radius: 10px; background-image: linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,0.6) 42%, transparent 48%), linear-gradient(180deg, #e6ebee, #aeb8be); } .ms-n-swatch--led-warm:not(#ms-z)::before{ box-shadow: 0 0 0 6px rgba(255,186,110,0.9), 0 0 34px 10px rgba(255,170,80,0.55); } .ms-n-swatch--led-neutral:not(#ms-z)::before{ box-shadow: 0 0 0 6px rgba(255,240,210,0.95), 0 0 34px 10px rgba(255,236,200,0.5); } .ms-n-swatch--led-cold:not(#ms-z)::before{ box-shadow: 0 0 0 6px rgba(210,232,255,0.95), 0 0 34px 10px rgba(170,210,255,0.5); } .ms-n-glass__in:not(#ms-z) .ms-n-swatches{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .ms-n-glass__in:not(#ms-z) .ms-n-swatches:has(.ms-n-swatch--led-warm){ margin-top: 18px; } @media (max-width: 1100px) { .ms-n-glass__in:not(#ms-z) .ms-n-swatches{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-glass__in:not(#ms-z) .ms-n-swatches{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* lustra: przerwa w liście rodzajów na pas LED */ .ms-n-doors--cont:not(#ms-z){ padding-top: 0; } .ms-n-doors--cont:not(#ms-z) .ms-n-door:first-child{ border-top: 0; } .ms-n-glass--led:not(#ms-z){ padding: 96px 0; } .ms-n-glass--led:not(#ms-z) .ms-n-swatches{ grid-template-columns: repeat(3, minmax(0, 260px)) !important; gap: 36px; } .ms-n-glass--led:not(#ms-z) + .ms-n-doors--cont{ padding-top: 40px; } @media (max-width: 900px) { .ms-n-doors--cont:not(#ms-z) .ms-n-door:nth-child(odd), .ms-n-doors--cont:not(#ms-z) .ms-n-door:nth-child(even){ flex-direction: column; } .ms-n-doors--cont:not(#ms-z) .ms-n-door .ms-n-door__plan{ width: 104px; top: -14px; bottom: auto; right: -6px; left: auto; transform: rotate(2deg); } .ms-n-glass--led:not(#ms-z) .ms-n-swatches{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; } } .ms-n-doors--rev:not(#ms-z) .ms-n-door:nth-child(odd){ flex-direction: row-reverse; } .ms-n-doors--rev:not(#ms-z) .ms-n-door:nth-child(odd) .ms-n-door__plan{ left: auto; right: -28px; transform: rotate(2deg); } .ms-n-glass:not(#ms-z) + .ms-n-doors--cont{ padding-top: 40px; } @media (max-width: 900px) { .ms-n-doors--rev:not(#ms-z) .ms-n-door:nth-child(odd){ flex-direction: column; } } /* galeria pozioma (lustra): duże zdjęcie 3:2 na całą szerokość, pod nim 3 zdjęcia 4:3 */ .ms-n-door__gal--wide:not(#ms-z) .gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .ms-n-door__gal--wide:not(#ms-z) .gallery-item{ aspect-ratio: 4 / 3 !important; } .ms-n-door__gal--wide:not(#ms-z) .gallery-item:first-child{ grid-column: 1 / -1 !important; grid-row: auto !important; aspect-ratio: 3 / 2 !important; } /* ===== Kolor lustra – karty z odbiciem ===== */ .ms-n-mcol:not(#ms-z){ --ms-mscene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e9e6e1'/%3E%3Cstop offset='1' stop-color='%23cfcac2'/%3E%3C/linearGradient%3E %3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b9a58c'/%3E%3Cstop offset='1' stop-color='%238e7a62'/%3E%3C/linearGradient%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff6df' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23fff6df' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E %3Crect width='200' height='250' fill='url(%23w)'/%3E %3Cpolygon points='0,190 200,190 200,250 0,250' fill='url(%23f)'/%3E %3Cpath d='M0 196h200M0 210h200M0 228h200' stroke='%237e6b55' stroke-opacity='.35'/%3E %3Crect x='22' y='48' width='74' height='104' fill='%23f7fbfd'/%3E%3Crect x='22' y='48' width='74' height='104' fill='none' stroke='%235c5f63' stroke-width='5'/%3E %3Cpath d='M59 48v104M22 100h74' stroke='%235c5f63' stroke-width='3'/%3E %3Cpath d='M30 140l16-30 12 18 10-12 20 24z' fill='%23c9d6cf' opacity='.8'/%3E %3Crect x='138' y='70' width='46' height='120' fill='%23cdbca4'/%3E%3Crect x='138' y='70' width='46' height='120' fill='none' stroke='%239b8c78' stroke-width='3'/%3E%3Ccircle cx='176' cy='132' r='2.5' fill='%235c5f63'/%3E %3Cline x1='118' y1='0' x2='118' y2='60' stroke='%233b3e42' stroke-width='1.5'/%3E%3Ccircle cx='118' cy='86' r='34' fill='url(%23g)'/%3E %3Cpath d='M106 60h24l-4 16h-16z' fill='%233b3e42'/%3E %3Cpath d='M98 190l4-26h22l4 26z' fill='%235c5f63'/%3E %3Cg fill='%236f8b6a'%3E%3Cellipse cx='104' cy='150' rx='7' ry='16' transform='rotate(-25 104 150)'/%3E%3Cellipse cx='113' cy='145' rx='7' ry='19'/%3E%3Cellipse cx='122' cy='151' rx='7' ry='16' transform='rotate(25 122 151)'/%3E%3C/g%3E %3C/svg%3E"); --ms-mspeck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .26 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); background: #ebe7e0; padding: 104px 0; } .ms-n-mcol__in:not(#ms-z){ gap: 48px; } .ms-n-mcol__grid:not(#ms-z){ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-n-mcard:not(#ms-z){ --lvl: 5; position: relative; flex-direction: column; gap: 6px; padding: 14px 14px 22px; background: #fff; border-radius: 6px; box-shadow: 0 1px 0 rgba(26,28,31,0.06), 0 14px 34px -18px rgba(26,28,31,0.35); transition: transform .25s ease, box-shadow .25s ease; } .ms-n-mcard:not(#ms-z):hover{ transform: translateY(-4px); box-shadow: 0 1px 0 rgba(26,28,31,0.06), 0 24px 44px -20px rgba(26,28,31,0.45); } .ms-n-mcard:not(#ms-z)::before{ content: ""; display: block; aspect-ratio: 4 / 5; margin-bottom: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 0 0 5px rgba(255,255,255,0.18), 0 0 0 1px rgba(26,28,31,0.18); background-image: linear-gradient(118deg, rgba(255,255,255,0) 0 34%, rgba(255,255,255,0.55) 37%, rgba(255,255,255,0) 44% 56%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 63%), linear-gradient(var(--tint), var(--tint2, var(--tint))), var(--ms-mscene); background-size: 100% 100%, 100% 100%, cover; background-position: center; background-blend-mode: normal, multiply, normal; transition: background-position .6s ease; } .ms-n-mcard--silver:not(#ms-z){ --tint: #f3f6f8; --tint2: #e1e7eb; --lvl: 5; } .ms-n-mcard--graphite:not(#ms-z){ --tint: #7b8187; --tint2: #5d6268; --lvl: 2; } .ms-n-mcard--bronze:not(#ms-z){ --tint: #c4a07c; --tint2: #9e7c5a; --lvl: 3; } .ms-n-mcard--antique:not(#ms-z){ --tint: #e3d9bd; --tint2: #c9bc98; --lvl: 4; } .ms-n-mcard--antique:not(#ms-z)::before{ background-image: linear-gradient(118deg, rgba(255,255,255,0) 0 34%, rgba(255,255,255,0.4) 37%, rgba(255,255,255,0) 44%), var(--ms-mspeck), radial-gradient(ellipse at 12% 8%, rgba(70,60,40,0.55), transparent 32%), radial-gradient(ellipse at 92% 94%, rgba(70,60,40,0.5), transparent 35%), linear-gradient(var(--tint), var(--tint2)), var(--ms-mscene); background-size: 100% 100%, 120px 120px, 100% 100%, 100% 100%, 100% 100%, cover; background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-blend-mode: normal, multiply, multiply, multiply, multiply, normal; } .ms-n-mcard__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .18em; color: var(--ms-rust); } .ms-n-mcard__name:not(#ms-z) .elementor-heading-title{ font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ms-ink); line-height: 1.15; } .ms-n-mcard__txt:not(#ms-z){ margin-bottom: 18px; } .ms-n-mcard__txt:not(#ms-z) .elementor-heading-title{ font-size: 15px; line-height: 1.5; color: #4a4d52; font-weight: 400; } .ms-n-mcard__lbl:not(#ms-z){ margin-top: auto; padding-top: 14px; border-top: 1px solid #e6e1d9; } .ms-n-mcard__lbl:not(#ms-z) .elementor-heading-title, .ms-n-mcard__lvl:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a8f96; font-weight: 400; } .ms-n-mcard__where:not(#ms-z) .elementor-heading-title{ font-size: 14px; font-weight: 600; color: var(--ms-ink); } .ms-n-mcard__lvl:not(#ms-z){ margin-top: 10px; } .ms-n-mcard__lvl:not(#ms-z)::after{ content: ""; display: block; margin-top: 8px; width: 116px; height: 6px; background: repeating-linear-gradient(90deg, var(--ms-orange) 0 20px, transparent 20px 24px) 0 0 / calc(var(--lvl) * 24px) 100% no-repeat, repeating-linear-gradient(90deg, #e2ddd4 0 20px, transparent 20px 24px); } @media (max-width: 1100px) { .ms-n-mcol__grid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-mcol:not(#ms-z){ padding: 72px 0; } .ms-n-mcol__grid:not(#ms-z){ gap: 14px; } .ms-n-mcard:not(#ms-z){ padding: 10px 10px 18px; } .ms-n-mcard__name:not(#ms-z) .elementor-heading-title{ font-size: 20px; } .ms-n-mcard__txt:not(#ms-z){ margin-bottom: 18px; } .ms-n-mcard__txt:not(#ms-z) .elementor-heading-title{ font-size: 14px; } } .ms-n-mcol:not(#ms-z) + .ms-n-doors--cont{ padding-top: 96px; } /* ===== Kolor lustra – wariant B: jedna ściana, cztery tafle ===== */ .ms-n-mstrip:not(#ms-z){ --ms-mwide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ece9e4'/%3E%3Cstop offset='1' stop-color='%23d3cec6'/%3E%3C/linearGradient%3E %3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bba78d'/%3E%3Cstop offset='1' stop-color='%238a765e'/%3E%3C/linearGradient%3E %3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff4d6' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23fff4d6' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6fbfd'/%3E%3Cstop offset='1' stop-color='%23dfeae6'/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect width='800' height='400' fill='url(%23w)'/%3E %3Crect y='300' width='800' height='100' fill='url(%23f)'/%3E %3Cpath d='M0 312h800M0 332h800M0 360h800' stroke='%236f5c47' stroke-opacity='.3'/%3E %3Crect x='60' y='70' width='150' height='190' fill='url(%23sky)'/%3E %3Cpath d='M70 250l40-70 30 40 25-25 45 55z' fill='%23b9cdc2'/%3E %3Crect x='60' y='70' width='150' height='190' fill='none' stroke='%2355585c' stroke-width='8'/%3E%3Cpath d='M135 70v190M60 160h150' stroke='%2355585c' stroke-width='5'/%3E %3Crect x='250' y='300' width='12' height='0'/%3E %3Cpath d='M240 300l8-50h44l8 50z' fill='%23585b5f'/%3E %3Cg fill='%236d8a66'%3E%3Cellipse cx='255' cy='225' rx='12' ry='32' transform='rotate(-28 255 225)'/%3E%3Cellipse cx='270' cy='212' rx='12' ry='38'/%3E%3Cellipse cx='286' cy='225' rx='12' ry='32' transform='rotate(28 286 225)'/%3E%3C/g%3E %3Cline x1='400' y1='0' x2='400' y2='110' stroke='%2334373b' stroke-width='2'/%3E%3Ccircle cx='400' cy='140' r='70' fill='url(%23g)'/%3E%3Cpath d='M378 110h44l-7 26h-30z' fill='%2334373b'/%3E %3Crect x='330' y='235' width='190' height='45' rx='10' fill='%239aa29a'/%3E%3Crect x='320' y='215' width='210' height='38' rx='12' fill='%23aab2aa'/%3E%3Crect x='332' y='278' width='8' height='22' fill='%234a4d50'/%3E%3Crect x='510' y='278' width='8' height='22' fill='%234a4d50'/%3E %3Crect x='355' y='190' width='40' height='30' rx='6' fill='%23d9b27a'/%3E %3Crect x='560' y='95' width='90' height='70' fill='%23d8cfc0' stroke='%236b6e72' stroke-width='5'/%3E%3Cpath d='M572 150l22-30 16 18 14-12 18 24z' fill='%23b49d7e'/%3E %3Crect x='680' y='80' width='90' height='220' fill='%23c8b59b'/%3E%3Crect x='680' y='80' width='90' height='220' fill='none' stroke='%239a8a75' stroke-width='5'/%3E%3Ccircle cx='758' cy='195' r='4' fill='%234f5256'/%3E %3Crect x='560' y='240' width='100' height='60' fill='%23b3a28a'/%3E%3Cpath d='M560 270h100' stroke='%238d7d68' stroke-width='2'/%3E %3C/svg%3E"); --ms-mspeck2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .26 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); position: relative; background: var(--ms-ink); color: #f4f2ee; padding: 104px 0 96px; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-mstrip__in:not(#ms-z){ gap: 48px; } .ms-n-mstrip__wall:not(#ms-z){ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #0e0f11; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7); } .ms-n-mpane:not(#ms-z){ position: relative; flex-direction: column; gap: 2px; padding: 0 0 22px; background: #16181b; border-radius: 2px; overflow: hidden; } .ms-n-mpane:not(#ms-z)::before{ content: ""; display: block; height: clamp(220px, 32vw, 440px); margin-bottom: 18px; background-image: linear-gradient(118deg, rgba(255,255,255,0) 0 30%, rgba(255,255,255,0.32) 34%, rgba(255,255,255,0) 42%), linear-gradient(var(--tint), var(--tint2, var(--tint))), var(--ms-mwide); background-size: 100% 100%, 100% 100%, 400% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, var(--px) 0; background-blend-mode: normal, multiply, normal; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); transition: filter .3s ease; } .ms-n-mpane:not(#ms-z):nth-child(1){ --px: 0%; } .ms-n-mpane:not(#ms-z):nth-child(2){ --px: 33.333%; } .ms-n-mpane:not(#ms-z):nth-child(3){ --px: 66.667%; } .ms-n-mpane:not(#ms-z):nth-child(4){ --px: 100%; } .ms-n-mpane--silver:not(#ms-z){ --tint: #f4f7f9; --tint2: #e3e9ed; } .ms-n-mpane--graphite:not(#ms-z){ --tint: #7b8187; --tint2: #5a5f65; } .ms-n-mpane--bronze:not(#ms-z){ --tint: #c4a07c; --tint2: #9e7c5a; } .ms-n-mpane--antique:not(#ms-z){ --tint: #e3d9bd; --tint2: #c9bc98; } .ms-n-mpane--antique:not(#ms-z)::before{ background-image: linear-gradient(118deg, rgba(255,255,255,0) 0 30%, rgba(255,255,255,0.28) 34%, rgba(255,255,255,0) 42%), var(--ms-mspeck2), radial-gradient(ellipse at 90% 6%, rgba(70,60,40,0.5), transparent 35%), radial-gradient(ellipse at 10% 96%, rgba(70,60,40,0.45), transparent 38%), linear-gradient(var(--tint), var(--tint2)), var(--ms-mwide); background-size: 100% 100%, 240px 240px, 100% 100%, 100% 100%, 100% 100%, 400% 100%; background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, var(--px) 0; background-blend-mode: normal, multiply, multiply, multiply, multiply, normal; } .ms-n-mstrip__wall:not(#ms-z):hover .ms-n-mpane::before{ filter: saturate(.6) brightness(.8); } .ms-n-mstrip__wall:not(#ms-z) .ms-n-mpane:hover::before{ filter: none; } .ms-n-mpane__name:not(#ms-z), .ms-n-mpane__txt:not(#ms-z){ padding: 0 20px; } .ms-n-mpane__name:not(#ms-z) .elementor-heading-title{ font-size: 22px; font-weight: 800; color: #f4f2ee; line-height: 1.2; } .ms-n-mpane__name:not(#ms-z) .elementor-heading-title::before{ content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: linear-gradient(var(--tint), var(--tint2)); box-shadow: 0 0 0 2px rgba(255,255,255,0.15); vertical-align: 2px; } .ms-n-mpane__txt:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .06em; color: #9ea3aa; font-weight: 400; line-height: 1.5; } @media (max-width: 760px) { .ms-n-mstrip:not(#ms-z){ padding: 72px 0; } .ms-n-mstrip__wall:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-n-mpane:not(#ms-z)::before{ height: 200px; background-size: 100% 100%, 100% 100%, 200% 100%; } .ms-n-mpane--antique:not(#ms-z)::before{ background-size: 100% 100%, 240px 240px, 100% 100%, 100% 100%, 100% 100%, 200% 100%; } .ms-n-mpane:not(#ms-z):nth-child(odd){ --px: 0%; } .ms-n-mpane:not(#ms-z):nth-child(even){ --px: 100%; } .ms-n-mpane__name:not(#ms-z), .ms-n-mpane__txt:not(#ms-z){ padding: 0 14px; } .ms-n-mpane__name:not(#ms-z) .elementor-heading-title{ font-size: 18px; } } .ms-n-mstrip:not(#ms-z) + .ms-n-doors--cont{ padding-top: 96px; } /* galeria na 5 zdjęć: wysokie zdjęcie główne + 4 kwadraty 2×2 */ .ms-n-door__gal--five:not(#ms-z) .gallery{ grid-template-columns: 4fr 3fr 3fr !important; } .ms-n-door__gal--five:not(#ms-z) .gallery-item{ aspect-ratio: 1 / 1 !important; } .ms-n-door__gal--five:not(#ms-z) .gallery-item:first-child{ grid-row: span 2 !important; aspect-ratio: auto !important; } @media (min-width: 1101px) { .ms-n-door:not(#ms-z):has(.ms-n-door__gal--five) .ms-n-door__plan{ top: auto; bottom: -30px; left: -30px; width: 132px; padding: 9px; } } /* ===== SZYBY ZESPOLONE: rodzaje pakietów (karty z przekrojem) ===== */ .ms-n-igu:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 104px 0 112px; } .ms-n-igu__in:not(#ms-z){ gap: 48px; } .ms-n-igu__grid:not(#ms-z){ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-n-igu__card:not(#ms-z){ position: relative; flex-direction: column; gap: 0; background: var(--ms-white); border: 1px solid var(--ms-line); border-radius: 4px; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; } .ms-n-igu__card:not(#ms-z)::after{ content: ""; position: absolute; top: 0; right: 0; width: 23px; height: 23px; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--ms-orange) calc(50% - 1px), var(--ms-orange) calc(50% + 1px), transparent calc(50% + 1px)); } .ms-n-igu__card:not(#ms-z):hover{ border-color: var(--ms-orange); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(26,28,31,0.08); } .ms-n-igu__plan:not(#ms-z){ flex-direction: column; gap: 4px; padding: 14px 14px 12px; background: #f9f8f5; border-bottom: 1px solid var(--ms-line); background-image: linear-gradient(rgba(26,28,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,31,0.05) 1px, transparent 1px); background-size: 16px 16px; } .ms-n-igu__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-n-igu__cap:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ms-text-muted); text-transform: uppercase; line-height: 1.3; } .ms-n-igu__txt:not(#ms-z){ flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 20px 20px 22px; } .ms-n-igu__num:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ms-rust); } .ms-n-igu__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ms-ink); } .ms-n-igu__text:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-n-igu__specs:not(#ms-z){ margin-top: auto; } .ms-n-igu__specs:not(#ms-z) .elementor-icon-list-items{ border-top: 1px solid var(--ms-line); } .ms-n-igu__specs:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--ms-line); font-size: 13.5px; line-height: 1.4; color: #3d4046; } .ms-n-igu__specs:not(#ms-z) .elementor-icon-list-item a{ color: inherit; pointer-events: none; } .ms-n-igu__specs:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--ms-orange); transform: skewX(-12deg); } .ms-n-igu__specs:not(#ms-z) .elementor-icon-list-icon{ display: none; } @media (max-width: 1100px) { .ms-n-igu__grid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .ms-n-igu:not(#ms-z){ padding: 80px 0; } .ms-n-igu__grid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ms-n-igu__grid:not(#ms-z){ grid-template-columns: 1fr; } } /* ===== SZYBY ZESPOLONE: „Zanim zadzwonisz” obok listy ===== */ .ms-n-ask:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 18px; } /* ===== POGOTOWIE SZKLARSKIE (ciemny blok) ===== */ .ms-n-sos:not(#ms-z){ position: relative; background: var(--ms-ink); color: #f4f2ee; padding: 112px 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; scroll-margin-top: 120px; } .ms-n-sos__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 56px 80px; } .ms-n-sos__copy:not(#ms-z){ flex: 1.35 1 520px; min-width: 0; flex-direction: column; gap: 22px; } .ms-n-sos__lead:not(#ms-z){ max-width: 620px; font-size: 18px; line-height: 1.6; color: #c3c6cb; } .ms-n-sos__steps:not(#ms-z){ flex-direction: column; margin-top: 8px; border-bottom: 1px solid var(--ms-line-dark); } .ms-n-sos__step:not(#ms-z){ flex-direction: row; align-items: flex-start; gap: 22px; padding: 20px 0; border-top: 1px solid var(--ms-line-dark); } .ms-n-sos__no:not(#ms-z){ width: auto; flex: 0 0 auto; } .ms-n-sos__no:not(#ms-z) .elementor-heading-title{ font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--ms-orange); } .ms-n-sos__stxt:not(#ms-z){ flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 6px; } .ms-n-sos__stitle:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.25; color: #f4f2ee; } .ms-n-sos__sdesc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-n-sos__card:not(#ms-z){ position: relative; flex: 1 1 340px; min-width: 0; max-width: 460px; flex-direction: column; gap: 18px; padding: 40px 36px 36px; background: var(--ms-ink-2); border: 1px solid var(--ms-line-dark); border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); } .ms-n-sos__card:not(#ms-z)::before{ content: ""; position: absolute; top: -1px; left: 36px; width: 120px; height: 3px; background: var(--ms-orange); } .ms-n-sos__big:not(#ms-z) .elementor-heading-title{ font-size: clamp(72px, 8vw, 112px); font-weight: 800; line-height: .9; letter-spacing: -0.05em; color: var(--ms-orange); } .ms-n-sos__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #c3c6cb; line-height: 1.5; } .ms-n-sos__list:not(#ms-z) .elementor-icon-list-items{ border-top: 1px solid var(--ms-line-dark); } .ms-n-sos__list:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--ms-line-dark); font-size: 15px; color: #e2e4e7; } .ms-n-sos__list:not(#ms-z) .elementor-icon-list-item a{ color: inherit; pointer-events: none; } .ms-n-sos__list:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--ms-orange); } .ms-n-sos__list:not(#ms-z) .elementor-icon-list-icon{ display: none; } .ms-n-sos__card:not(#ms-z) .ms-n-btn, .ms-n-sos__card:not(#ms-z) .ms-n-btn .elementor-button{ width: 100%; } @media (max-width: 700px) { .ms-n-sos:not(#ms-z){ padding: 80px 0; } .ms-n-sos__card:not(#ms-z){ padding: 32px 22px 24px; } .ms-n-sos__card:not(#ms-z)::before{ left: 22px; } } .ms-n-ask:not(#ms-z) .ms-n-feats{ flex: 0 0 auto; } /* ===== SZYBY ZESPOLONE: jak zamówić (etapy) ===== */ .ms-n-steps:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0 96px; } .ms-n-steps__in:not(#ms-z){ gap: 40px; } .ms-n-steps:not(#ms-z) .ms-n-pcard{ cursor: default; background: var(--ms-paper); border-color: var(--ms-paper); } .ms-n-steps:not(#ms-z) .ms-n-pcard:hover::before{ opacity: 1; } .ms-n-steps:not(#ms-z) .ms-n-pcard__ico{ background: var(--ms-ink); color: var(--ms-orange); } .ms-n-steps:not(#ms-z) .ms-n-pcard__num .elementor-heading-title{ color: var(--ms-rust); } .ms-n-steps__who:not(#ms-z){ max-width: 900px; font-size: 16px; line-height: 1.65; color: var(--ms-text-muted); } .ms-n-steps__who:not(#ms-z) strong{ color: var(--ms-ink); } @media (max-width: 700px) { .ms-n-steps:not(#ms-z){ padding: 80px 0; } } /* ===== SZYBY ZESPOLONE: budowa pakietu (duży przekrój) ===== */ .ms-n-build:not(#ms-z){ position: relative; background: var(--ms-ink); color: #f4f2ee; padding: 104px 0 112px; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-n-build__in:not(#ms-z){ gap: 48px; } .ms-n-build__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-n-build__fig:not(#ms-z){ flex: 1 1 440px; min-width: 0; max-width: 560px; flex-direction: column; gap: 12px; } .ms-n-build__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-n-build__cap:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: #8a8f96; line-height: 1.5; } .ms-n-build__legend:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; border-top: 1px solid var(--ms-line-dark); } .ms-n-build__item:not(#ms-z){ flex-direction: row; align-items: flex-start; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ms-line-dark); } .ms-n-build__no:not(#ms-z){ width: auto; flex: 0 0 auto; } .ms-n-build__no:not(#ms-z) .elementor-heading-title{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ms-orange); color: var(--ms-ink); font-family: var(--ms-mono); font-size: 14px; font-weight: 700; line-height: 1; } .ms-n-build__txt:not(#ms-z){ flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 4px; } .ms-n-build__t:not(#ms-z) .elementor-heading-title{ font-size: 18px; font-weight: 800; line-height: 1.3; color: #f4f2ee; } .ms-n-build__d:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); } @media (max-width: 700px) { .ms-n-build:not(#ms-z){ padding: 80px 0; } } /* ===== POGOTOWIE: galeria bez przycinania (kolumny) ===== */ .ms-n-sos__galwrap:not(#ms-z){ flex: 1 1 100%; min-width: 0; flex-direction: column; gap: 16px; margin-top: 16px; } .ms-n-sos__gal:not(#ms-z) .gallery{ display: block !important; columns: 3 240px; column-gap: 12px; margin: 0; } .ms-n-sos__gal:not(#ms-z) .gallery-item{ display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 0 12px !important; padding: 0 !important; break-inside: avoid; overflow: hidden; border-radius: 4px; } .ms-n-sos__gal:not(#ms-z) .gallery-icon, .ms-n-sos__gal:not(#ms-z) .gallery-icon a{ display: block; } .ms-n-sos__gal:not(#ms-z) .gallery-item img{ display: block; width: 100%; height: auto; border: 0 !important; transition: transform .5s; } .ms-n-sos__gal:not(#ms-z) .gallery-item:hover img{ transform: scale(1.03); } .ms-n-sos__gal:not(#ms-z) .gallery-caption, .ms-n-sos__gal:not(#ms-z) br{ display: none; } /* ================= BALUSTRADY SZKLANE (własny układ ms-b-) ================= */ .ms-b-hero:not(#ms-z){ position: relative; overflow: hidden; color: var(--ms-ink); background: linear-gradient(180deg, #e9f0f3 0%, #f1f3f2 55%, var(--ms-paper) 100%); } .ms-b-hero:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(26,28,31,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,31,0.045) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .ms-b-hero__in:not(#ms-z){ position: relative; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 32px 56px; padding-top: 72px; } .ms-b-hero__copy:not(#ms-z){ flex: 1 1 460px; min-width: 0; flex-direction: column; gap: 22px; padding-bottom: 80px; } .ms-b-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-b-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-b-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(48px, 7.4vw, 108px); line-height: .9; font-weight: 800; letter-spacing: -0.045em; color: var(--ms-ink); } .ms-b-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: transparent; -webkit-text-stroke: 2px var(--ms-ink); background: linear-gradient(100deg, transparent 40%, rgba(247,147,30,0.35) 50%, transparent 60%) no-repeat; background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: msb-glint 6s ease-in-out infinite; } @keyframes msb-glint { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .ms-b-hero__title:not(#ms-z) .elementor-heading-title span{ animation: none; } } .ms-b-hero__lead:not(#ms-z){ max-width: 540px; font-size: 19px; line-height: 1.6; color: #3d4046; } .ms-b-facts:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 8px; } .ms-b-fact:not(#ms-z){ width: auto; } .ms-b-fact:not(#ms-z) .elementor-heading-title{ display: inline-block; padding: 8px 14px; border: 1px solid var(--ms-line); border-radius: 999px; background: rgba(255,255,255,0.6); font-family: var(--ms-mono); font-size: 12px; letter-spacing: .06em; color: var(--ms-ink); } .ms-b-hero__fig:not(#ms-z){ flex: 1.1 1 520px; min-width: 0; align-self: flex-end; } .ms-b-hero__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-b-norm:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0 96px; } .ms-b-norm__in:not(#ms-z){ gap: 48px; } .ms-b-tiles:not(#ms-z){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .ms-b-tile:not(#ms-z){ flex-direction: column; gap: 12px; padding-top: 22px; border-top: 3px solid var(--ms-ink); } .ms-b-tile:not(#ms-z):first-child{ border-top-color: var(--ms-orange); } .ms-b-tile__big:not(#ms-z) .elementor-heading-title{ font-size: clamp(64px, 7vw, 112px); line-height: .9; font-weight: 800; letter-spacing: -0.05em; color: var(--ms-ink); } .ms-b-tile__big:not(#ms-z) .elementor-heading-title small{ font-size: .32em; letter-spacing: 0; margin-left: 6px; color: var(--ms-rust); font-weight: 700; } .ms-b-tile__lbl:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-rust); line-height: 1.5; } .ms-b-tile__txt:not(#ms-z){ font-size: 16px; line-height: 1.6; color: var(--ms-text-muted); max-width: 360px; } .ms-b-norm__note:not(#ms-z){ max-width: 760px; padding: 16px 20px; border-left: 3px solid var(--ms-orange); background: var(--ms-paper); font-size: 16px; line-height: 1.6; color: #3d4046; } .ms-b-sys:not(#ms-z){ position: relative; background: var(--ms-ink); color: #f4f2ee; padding: 104px 0 96px; scroll-margin-top: 120px; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px; } .ms-b-sys__in:not(#ms-z){ gap: 48px; } .ms-b-cards:not(#ms-z){ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ms-b-card:not(#ms-z){ flex-direction: column; gap: 0; background: var(--ms-ink-2); border: 1px solid var(--ms-line-dark); border-radius: 6px; overflow: hidden; transition: border-color .25s, transform .25s; } .ms-b-card:not(#ms-z):hover{ border-color: var(--ms-orange); transform: translateY(-4px); } .ms-b-card__fig:not(#ms-z){ padding: 18px 18px 8px; background: #202327; border-bottom: 1px solid var(--ms-line-dark); background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 16px 16px; } .ms-b-card__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; max-height: 240px; } .ms-b-card__txt:not(#ms-z){ flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 22px 22px 24px; } .ms-b-card__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .2em; color: var(--ms-orange); } .ms-b-card__title:not(#ms-z) .elementor-heading-title{ font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: #f4f2ee; } .ms-b-card__tag:not(#ms-z) .elementor-heading-title{ font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ms-orange-hi); } .ms-b-card__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-b-card__where:not(#ms-z){ margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ms-line-dark); } .ms-b-card__where:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c3c6cb; line-height: 1.5; } .ms-b-sys__note:not(#ms-z){ font-size: 15px; color: var(--ms-text-muted-dark); } .ms-b-sys__note:not(#ms-z) p::before{ content: "+ "; color: var(--ms-orange); font-weight: 700; } .ms-b-glass:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0; border-top: 1px solid var(--ms-line); } .ms-b-glass__in:not(#ms-z){ gap: 64px; } .ms-b-glass__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-b-glass__fig:not(#ms-z){ flex: 1 1 440px; min-width: 0; } .ms-b-glass__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-b-glass__txt:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 20px; } .ms-b-glass__specs:not(#ms-z) .elementor-icon-list-items{ border-top: 1px solid var(--ms-line); } .ms-b-glass__specs:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--ms-line); font-size: 15px; color: #3d4046; } .ms-b-glass__specs:not(#ms-z) .elementor-icon-list-item a{ color: inherit; pointer-events: none; } .ms-b-glass__specs:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--ms-orange); } .ms-b-glass__specs:not(#ms-z) .elementor-icon-list-icon{ display: none; } .ms-b-vars:not(#ms-z){ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .ms-b-var:not(#ms-z){ flex-direction: column; gap: 8px; } .ms-b-var__sw:not(#ms-z){ width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 4px; border: 1px solid var(--ms-line); position: relative; overflow: hidden; background: var(--ms-sw, #e6eef1); } .ms-b-var__sw:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 38%, transparent 46%, transparent 58%, rgba(255,255,255,0.3) 63%, transparent 68%); } .ms-b-var--clear:not(#ms-z) .ms-b-var__sw{ background: linear-gradient(160deg, #eef5f7, #d7e6ec); } .ms-b-var--graphite:not(#ms-z) .ms-b-var__sw{ background: linear-gradient(160deg, #6b7178, #3c4146); } .ms-b-var--bronze:not(#ms-z) .ms-b-var__sw{ background: linear-gradient(160deg, #a88a6a, #6f5640); } .ms-b-var--satin:not(#ms-z) .ms-b-var__sw{ background: linear-gradient(160deg, #f2f3f3, #dde1e2); } .ms-b-var--satin:not(#ms-z) .ms-b-var__sw::after{ background: none; } .ms-b-var--rib:not(#ms-z) .ms-b-var__sw{ background: repeating-linear-gradient(90deg, #e3ecef 0 7px, #cfdde3 7px 9px, #f2f6f7 9px 14px); } .ms-b-var__name:not(#ms-z) .elementor-heading-title{ font-size: 17px; font-weight: 800; color: var(--ms-ink); } .ms-b-var__txt:not(#ms-z) .elementor-heading-title{ font-size: 14px; line-height: 1.45; color: var(--ms-text-muted); } .ms-b-where:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 104px 0; } .ms-b-where__in:not(#ms-z){ gap: 40px; } .ms-b-places:not(#ms-z){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; } .ms-b-place:not(#ms-z){ flex-direction: column; gap: 8px; padding: 26px 0 30px; border-top: 1px solid var(--ms-line); } .ms-b-place__name:not(#ms-z) .elementor-heading-title{ font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ms-ink); transition: color .2s; } .ms-b-place:not(#ms-z):hover .ms-b-place__name .elementor-heading-title{ color: var(--ms-rust); } .ms-b-place__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); max-width: 380px; } .ms-b-steps:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0 96px; } .ms-b-steps__in:not(#ms-z){ gap: 48px; } .ms-b-steps__row:not(#ms-z){ display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; } .ms-b-steps__row:not(#ms-z)::before{ content: ""; position: absolute; left: 16px; right: 16px; top: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--ms-ink) 0 10px, transparent 10px 16px); opacity: .25; } .ms-b-step:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; } .ms-b-step__no:not(#ms-z){ width: auto; } .ms-b-step__no:not(#ms-z) .elementor-heading-title{ position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ms-ink); color: var(--ms-orange); font-family: var(--ms-mono); font-size: 14px; font-weight: 700; box-shadow: 0 0 0 6px var(--ms-white); } .ms-b-step:not(#ms-z):last-child .ms-b-step__no .elementor-heading-title{ background: var(--ms-orange); color: var(--ms-ink); } .ms-b-step__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ms-ink); margin-top: 6px; } .ms-b-step__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } @media (max-width: 1180px) { .ms-b-cards:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-b-vars:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-b-steps__row:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } .ms-b-steps__row:not(#ms-z)::before{ display: none; } } @media (max-width: 860px) { .ms-b-tiles:not(#ms-z), .ms-b-places:not(#ms-z){ grid-template-columns: 1fr; } .ms-b-tiles:not(#ms-z){ gap: 28px; } .ms-b-hero__copy:not(#ms-z){ padding-bottom: 0; } .ms-b-norm:not(#ms-z), .ms-b-sys:not(#ms-z), .ms-b-glass:not(#ms-z), .ms-b-where:not(#ms-z), .ms-b-steps:not(#ms-z){ padding: 80px 0; } } @media (max-width: 600px) { .ms-b-cards:not(#ms-z){ grid-template-columns: 1fr; } .ms-b-vars:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ms-b-var__name:not(#ms-z) .elementor-heading-title{ font-size: 15px; } .ms-b-var__txt:not(#ms-z) .elementor-heading-title{ font-size: 12.5px; } .ms-b-steps__row:not(#ms-z){ grid-template-columns: 1fr; } } /* ================= PANELE SZKLANE (własny układ ms-p-) ================= */ .ms-p-hero:not(#ms-z){ --msp-c: #9caf88; position: relative; overflow: hidden; color: var(--ms-ink); background: var(--ms-paper); } .ms-p-hero:not(#ms-z)::after{ content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 120%; border-radius: 50%; background: var(--msp-c); opacity: .16; filter: blur(60px); transition: background .5s; pointer-events: none; } .ms-p-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-p-hero__copy:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; } .ms-p-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-p-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-p-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 6.2vw, 92px); line-height: .95; font-weight: 800; letter-spacing: -0.04em; color: var(--ms-ink); } .ms-p-hero__title:not(#ms-z) .elementor-heading-title span{ background: linear-gradient(transparent 58%, var(--msp-c) 58%, var(--msp-c) 92%, transparent 92%); transition: background .5s; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ms-p-hero__lead:not(#ms-z){ max-width: 520px; font-size: 19px; line-height: 1.6; color: #3d4046; } .ms-p-hero__fig:not(#ms-z){ flex: 1.2 1 520px; min-width: 0; flex-direction: column; gap: 18px; } .ms-p-hero__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 30px 60px rgba(26,28,31,0.14); } .ms-p-hero__svg:not(#ms-z) .msp-panel{ transition: fill .5s; } .ms-p-hero:not(#ms-z) .msp-picker{ display: flex; flex-direction: column; gap: 10px; } .ms-p-hero:not(#ms-z) .msp-picker__lbl{ margin: 0; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-p-hero:not(#ms-z) .msp-picker__lbl b{ color: var(--ms-ink); } .ms-p-hero:not(#ms-z) .msp-picker__row{ display: flex; flex-wrap: wrap; gap: 10px; } .ms-p-hero:not(#ms-z) .msp-chip{ display: block; width: 40px; height: 40px; min-height: 0; padding: 0 !important; border-radius: 50% !important; border: 2px solid #fff !important; background: var(--c) !important; box-shadow: 0 0 0 1px var(--ms-line), 0 4px 10px rgba(26,28,31,0.12); cursor: pointer; transition: transform .2s, box-shadow .2s; } .ms-p-hero:not(#ms-z) .msp-chip:hover{ transform: translateY(-2px); } .ms-p-hero:not(#ms-z) .msp-chip:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 3px; } .ms-p-hero:not(#ms-z) .msp-chip.is-on{ box-shadow: 0 0 0 2px var(--ms-ink), 0 6px 14px rgba(26,28,31,0.18); transform: scale(1.08); } .ms-p-cmp:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0; } .ms-p-cmp__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; } .ms-p-cmp__head:not(#ms-z){ flex: 1 1 320px; min-width: 0; flex-direction: column; gap: 18px; position: sticky; top: 140px; } .ms-p-cmp__head:not(#ms-z) .ms-n-sechead__lead{ flex: 0 0 auto; } .ms-p-table:not(#ms-z){ flex: 1.6 1 560px; min-width: 0; flex-direction: column; border-top: 2px solid var(--ms-ink); } .ms-p-row:not(#ms-z){ display: grid !important; grid-template-columns: 1fr 1.3fr 1.5fr; border-bottom: 1px solid var(--ms-line); } .ms-p-cell:not(#ms-z){ padding: 18px 16px; } .ms-p-cell:not(#ms-z) .elementor-heading-title{ font-size: 16px; line-height: 1.5; color: var(--ms-text-muted); font-weight: 400; } .ms-p-cell--k:not(#ms-z) .elementor-heading-title{ font-size: 17px; font-weight: 800; color: var(--ms-ink); } .ms-p-cell--glass:not(#ms-z){ background: var(--ms-paper); border-left: 3px solid var(--ms-orange); } .ms-p-cell--glass:not(#ms-z) .elementor-heading-title{ color: var(--ms-ink); font-weight: 600; } .ms-p-row--head:not(#ms-z) .ms-p-cell .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--ms-text-muted); } .ms-p-row--head:not(#ms-z) .ms-p-cell--glass .elementor-heading-title{ color: var(--ms-rust); } .ms-p-types:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 104px 0; scroll-margin-top: 120px; } .ms-p-types__in:not(#ms-z){ gap: 48px; } .ms-p-tcards:not(#ms-z){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ms-p-tcard:not(#ms-z){ flex-direction: column; background: var(--ms-ink-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--ms-line-dark); } .ms-p-tcard__vis:not(#ms-z){ height: 200px; position: relative; overflow: hidden; } .ms-p-tcard__vis:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.28) 0%, transparent 32%, transparent 60%, rgba(255,255,255,0.12) 66%, transparent 72%); } .ms-p-tcard--lak:not(#ms-z) .ms-p-tcard__vis{ background: linear-gradient(160deg, #2f4f3e, #1f3a2d); } .ms-p-tcard--laco:not(#ms-z) .ms-p-tcard__vis{ background: linear-gradient(90deg, #f3f2ee 0 14%, #d8c7ae 14% 28%, #c0623f 28% 42%, #9caf88 42% 57%, #1f3550 57% 71%, #4a4f55 71% 85%, #1d1e20 85%); } .ms-p-tcard--graf:not(#ms-z) .ms-p-tcard__vis{ background: radial-gradient(circle at 20% 70%, #6f8f5a 0 18%, transparent 19%), radial-gradient(circle at 46% 40%, #9caf88 0 22%, transparent 23%), radial-gradient(circle at 78% 64%, #4f6e43 0 26%, transparent 27%), radial-gradient(circle at 70% 20%, #c9d8b8 0 12%, transparent 13%), linear-gradient(160deg, #e9eee2, #cfdcc3); } .ms-p-tcard__txt:not(#ms-z){ flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 24px; } .ms-p-tcard__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .2em; color: var(--ms-orange); } .ms-p-tcard__title:not(#ms-z) .elementor-heading-title{ font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #f4f2ee; line-height: 1.1; } .ms-p-tcard__tag:not(#ms-z) .elementor-heading-title{ font-size: 15px; font-weight: 600; color: var(--ms-orange-hi); } .ms-p-tcard__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted-dark); } .ms-p-tcard__specs:not(#ms-z){ margin-top: auto; } .ms-p-tcard__specs:not(#ms-z) .elementor-icon-list-items{ border-top: 1px solid var(--ms-line-dark); } .ms-p-tcard__specs:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--ms-line-dark); font-size: 14px; color: #e2e4e7; } .ms-p-tcard__specs:not(#ms-z) .elementor-icon-list-item a{ color: inherit; pointer-events: none; } .ms-p-tcard__specs:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--ms-orange); } .ms-p-tcard__specs:not(#ms-z) .elementor-icon-list-icon{ display: none; } .ms-p-opti:not(#ms-z){ background: var(--ms-white); color: var(--ms-ink); padding: 104px 0; } .ms-p-opti__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px 80px; } .ms-p-opti__txt:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 20px; } .ms-p-opti__pair:not(#ms-z){ flex: 1 1 440px; min-width: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; } .ms-p-glass:not(#ms-z){ flex-direction: column; gap: 10px; } .ms-p-glass__face:not(#ms-z){ aspect-ratio: 3 / 4; max-width: 100%; border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(26,28,31,0.10); } .ms-p-glass__face:not(#ms-z)::before{ content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 14px; } .ms-p-glass__face:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.6) 0%, transparent 30%, transparent 62%, rgba(255,255,255,0.35) 68%, transparent 74%); } .ms-p-glass--float:not(#ms-z) .ms-p-glass__face{ background: linear-gradient(160deg, #eef3ec, #e1ebdf); } .ms-p-glass--float:not(#ms-z) .ms-p-glass__face::before{ background: linear-gradient(90deg, #a9c9b4, #6f9c80); } .ms-p-glass--opti:not(#ms-z) .ms-p-glass__face{ background: linear-gradient(160deg, #fbfbfa, #f1f2f2); } .ms-p-glass--opti:not(#ms-z) .ms-p-glass__face::before{ background: linear-gradient(90deg, #e6eef0, #c9d6db); } .ms-p-glass__name:not(#ms-z) .elementor-heading-title{ font-size: 18px; font-weight: 800; color: var(--ms-ink); } .ms-p-glass__txt:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .06em; color: var(--ms-text-muted); } .ms-p-cut:not(#ms-z){ background: var(--ms-paper); color: var(--ms-ink); padding: 104px 0; } .ms-p-cut__in:not(#ms-z){ gap: 48px; } .ms-p-cut__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-p-cut__fig:not(#ms-z){ flex: 1.2 1 480px; min-width: 0; } .ms-p-cut__svg:not(#ms-z) svg{ width: 100%; height: auto; display: block; } .ms-p-cut__steps:not(#ms-z){ flex: 1 1 360px; min-width: 0; flex-direction: column; } .ms-p-cstep:not(#ms-z){ flex-direction: row; align-items: flex-start; gap: 18px; padding: 18px 0; border-top: 1px solid var(--ms-line); } .ms-p-cstep:not(#ms-z):last-child{ border-bottom: 1px solid var(--ms-line); } .ms-p-cstep__no:not(#ms-z){ width: auto; flex: 0 0 auto; } .ms-p-cstep__no:not(#ms-z) .elementor-heading-title{ font-size: 40px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--ms-rust); letter-spacing: -0.04em; } .ms-p-cstep__txt:not(#ms-z){ flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 4px; } .ms-p-cstep__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; color: var(--ms-ink); line-height: 1.3; } .ms-p-cstep__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: var(--ms-text-muted); } .ms-p-where:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 56px 0; } .ms-p-where__in:not(#ms-z){ gap: 24px; } .ms-p-where__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ms-orange); } .ms-p-where__row:not(#ms-z){ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .ms-p-spot:not(#ms-z){ flex-direction: column; gap: 6px; padding: 4px 24px 4px 0; border-right: 1px solid var(--ms-line-dark); margin-right: 24px; } .ms-p-spot:not(#ms-z):last-child{ border-right: 0; margin-right: 0; } .ms-p-spot__name:not(#ms-z) .elementor-heading-title{ font-size: 22px; font-weight: 800; color: #f4f2ee; } .ms-p-spot__txt:not(#ms-z){ font-size: 14px; line-height: 1.55; color: var(--ms-text-muted-dark); } @media (max-width: 1100px) { .ms-p-tcards:not(#ms-z){ grid-template-columns: 1fr; } .ms-p-tcard:not(#ms-z){ flex-direction: row; } .ms-p-tcard__vis:not(#ms-z){ height: auto; flex: 0 0 34%; min-height: 180px; } .ms-p-where__row:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .ms-p-spot:not(#ms-z):nth-child(2n){ border-right: 0; margin-right: 0; } .ms-p-cmp__head:not(#ms-z){ position: static; } } @media (max-width: 860px) { .ms-p-cmp__in:not(#ms-z), .ms-p-opti__in:not(#ms-z), .ms-p-cut__row:not(#ms-z), .ms-p-hero__in:not(#ms-z){ flex-direction: column; align-items: stretch; } .ms-p-cmp__head:not(#ms-z), .ms-p-table:not(#ms-z), .ms-p-opti__txt:not(#ms-z), .ms-p-opti__pair:not(#ms-z), .ms-p-cut__fig:not(#ms-z), .ms-p-cut__steps:not(#ms-z), .ms-p-hero__copy:not(#ms-z), .ms-p-hero__fig:not(#ms-z){ flex: 0 0 auto; width: 100%; } } @media (max-width: 700px) { .ms-p-cmp:not(#ms-z), .ms-p-types:not(#ms-z), .ms-p-opti:not(#ms-z), .ms-p-cut:not(#ms-z){ padding: 80px 0; } .ms-p-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-p-row:not(#ms-z){ grid-template-columns: 1fr 1fr; } .ms-p-row:not(#ms-z) .ms-p-cell--k{ grid-column: 1 / -1; padding-bottom: 0; } .ms-p-row--head:not(#ms-z) .ms-p-cell--k{ display: none; } .ms-p-cell:not(#ms-z){ padding: 12px 12px; } .ms-p-cell:not(#ms-z) .elementor-heading-title{ font-size: 14.5px; } .ms-p-tcard:not(#ms-z){ flex-direction: column; } .ms-p-tcard__vis:not(#ms-z){ flex: none; height: 140px; min-height: 0; } .ms-p-where__row:not(#ms-z){ grid-template-columns: 1fr; } .ms-p-spot:not(#ms-z){ border-right: 0; margin-right: 0; padding: 0 0 16px; border-bottom: 1px solid var(--ms-line-dark); } .ms-p-hero:not(#ms-z) .msp-chip{ width: 36px; height: 36px; } } /* Panele – wybór koloru: panel, szafki górne, szafki dolne, blat */ .ms-p-hero__svg:not(#ms-z) .msp-fill{ transition: fill .5s; } .ms-p-hero:not(#ms-z) .msp-tabs{ display: flex; flex-wrap: wrap; gap: 6px; } .ms-p-hero:not(#ms-z) .msp-tab{ display: inline-block; margin: 0; min-height: 0; padding: 7px 14px !important; border: 1px solid var(--ms-line) !important; border-radius: 999px !important; background: transparent !important; color: var(--ms-ink) !important; font-family: var(--ms-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .ms-p-hero:not(#ms-z) .msp-tab:hover{ border-color: var(--ms-ink) !important; } .ms-p-hero:not(#ms-z) .msp-tab.is-on{ background: var(--ms-ink) !important; border-color: var(--ms-ink) !important; color: #fff !important; } .ms-p-hero:not(#ms-z) .msp-tab:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 2px; } .ms-p-hero:not(#ms-z) .msp-picker__row[hidden]{ display: none !important; } @media (max-width: 480px) { .ms-p-hero:not(#ms-z) .msp-tabs{ display: grid; grid-template-columns: 1fr 1fr; } .ms-p-hero:not(#ms-z) .msp-tab{ padding: 8px 10px !important; font-size: 11px; text-align: center; } } /* ========================================================= ŚCIANY SZKLANE – prefiks ms-s- (ciemny baner z arkuszem rysunku) ========================================================= */ .ms-s-hero:not(#ms-z){ position: relative; overflow: hidden; color: #f4f2ee; background: var(--ms-ink); } .ms-s-hero:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .ms-s-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-s-hero__copy:not(#ms-z){ flex: 1 1 400px; min-width: 0; flex-direction: column; gap: 22px; } .ms-s-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted-dark); } .ms-s-crumbs:not(#ms-z) a{ color: #f4f2ee; text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-s-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 6vw, 88px); line-height: .95; font-weight: 800; letter-spacing: -0.04em; color: #f4f2ee; } .ms-s-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: var(--ms-orange); } .ms-s-hero__lead:not(#ms-z){ max-width: 540px; font-size: 19px; line-height: 1.6; color: #c9ccd1; } .ms-s-hero__sheet:not(#ms-z){ flex: 1.25 1 540px; min-width: 0; flex-direction: column; gap: 20px; padding: 22px 22px 24px; background: #f4f2ee; color: var(--ms-ink); border-radius: 4px; box-shadow: 0 30px 70px rgba(0,0,0,0.45); background-image: linear-gradient(rgba(26,28,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,28,31,0.05) 1px, transparent 1px); background-size: 20px 20px; } .ms-s-hero__svg:not(#ms-z) svg{ display: block; width: 100%; height: auto; } .ms-s-hero:not(#ms-z) .mss-pane{ fill: #cfe0ea; fill-opacity: .55; transition: fill .5s, fill-opacity .5s; } .ms-s-hero:not(#ms-z) .mss-band{ fill: #f2f3f4; fill-opacity: 0; transition: fill-opacity .5s; } .ms-s-hero:not(#ms-z) .mss-glare{ opacity: .8; transition: opacity .5s; } .ms-s-hero:not(#ms-z) .mss-bars{ opacity: 0; transition: opacity .5s; } .ms-s-hero:not(#ms-z) .mss-wall.is-mat .mss-pane{ fill: #e8ecee; fill-opacity: .95; } .ms-s-hero:not(#ms-z) .mss-wall.is-mat .mss-glare{ opacity: 0; } .ms-s-hero:not(#ms-z) .mss-wall.is-band .mss-band{ fill-opacity: .95; } .ms-s-hero:not(#ms-z) .mss-wall.is-loft .mss-bars{ opacity: 1; } .ms-s-hero:not(#ms-z) .mss-switch{ display: flex; flex-direction: column; gap: 10px; } .ms-s-hero:not(#ms-z) .mss-switch__lbl{ margin: 0; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-s-hero:not(#ms-z) .mss-switch__row{ display: flex; flex-wrap: wrap; gap: 8px; } .ms-s-hero:not(#ms-z) .mss-opt{ display: inline-block; margin: 0; min-height: 0; padding: 9px 16px !important; border: 1px solid var(--ms-ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--ms-ink) !important; font-family: var(--ms-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .ms-s-hero:not(#ms-z) .mss-opt:hover{ background: rgba(26,28,31,0.06) !important; } .ms-s-hero:not(#ms-z) .mss-opt.is-on{ background: var(--ms-ink) !important; color: #f4f2ee !important; box-shadow: 4px 4px 0 var(--ms-orange); } .ms-s-hero:not(#ms-z) .mss-opt:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 2px; } .ms-s-hero:not(#ms-z) .mss-switch__hint{ margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.5; color: #3d4046; } .ms-s-intro:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-s-intro__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 48px 80px; } .ms-s-intro__txt:not(#ms-z){ flex: 1.4 1 520px; min-width: 0; flex-direction: column; gap: 22px; } .ms-s-intro:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-s-facts:not(#ms-z){ flex: 1 1 340px; min-width: 0; flex-direction: column; gap: 0; border-top: 3px solid var(--ms-ink); background: #fff; padding: 8px 28px 16px; box-shadow: 0 20px 50px rgba(26,28,31,0.08); } .ms-s-facts__k:not(#ms-z) .elementor-heading-title{ padding: 16px 0 8px; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-rust); } .ms-s-fact:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--ms-line); } .ms-s-fact:not(#ms-z):last-child{ border-bottom: 0; } .ms-s-fact__k:not(#ms-z){ flex: 0 0 110px; } .ms-s-fact__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-text-muted); } .ms-s-fact__v:not(#ms-z){ flex: 1 1 160px; min-width: 0; } .ms-s-fact__v:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ms-ink); } .ms-s-types:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-s-types__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-s-tlist:not(#ms-z){ flex-direction: column; border-top: 1px solid var(--ms-ink); } .ms-s-trow:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding: 32px 0; border-bottom: 1px solid var(--ms-line); transition: background .3s; } .ms-s-trow:not(#ms-z):hover{ background: linear-gradient(90deg, rgba(247,147,30,0.07), transparent 70%); } .ms-s-trow__no:not(#ms-z){ flex: 0 0 48px; } .ms-s-trow__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 14px; color: var(--ms-rust); } .ms-s-trow__pic:not(#ms-z){ flex: 0 0 150px; } .ms-s-trow__pic:not(#ms-z) svg{ display: block; width: 150px; height: auto; } .ms-s-trow__txt:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 6px; } .ms-s-trow__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ms-ink); } .ms-s-trow__tag:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-rust); } .ms-s-trow__desc:not(#ms-z){ max-width: 620px; font-size: 16px; line-height: 1.6; color: #3d4046; } .ms-s-trow__where:not(#ms-z){ flex: 0 1 220px; min-width: 0; } .ms-s-trow__where:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-direction: column; gap: 6px; } .ms-s-trow__where:not(#ms-z) .elementor-icon-list-item{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-text-muted); } .ms-s-trow__where:not(#ms-z) .elementor-icon-list-item::before{ content: "→ "; color: var(--ms-orange); } .ms-s-split:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 104px 0; } .ms-s-split__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-s-split__head:not(#ms-z){ flex-direction: column; gap: 20px; } .ms-s-split__cols:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 24px; } .ms-s-col:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 20px; padding: 36px 36px 32px; border: 1px solid var(--ms-line-dark); background: var(--ms-ink-2); } .ms-s-col__title:not(#ms-z) .elementor-heading-title{ font-size: 24px; font-weight: 800; color: #f4f2ee; } .ms-s-col__list:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-direction: column; } .ms-s-col__list:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 13px 0 13px 26px; border-top: 1px solid var(--ms-line-dark); font-size: 16px; line-height: 1.45; color: #c9ccd1; } .ms-s-col__list:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 10px; border: 2px solid var(--ms-orange); } .ms-s-glass:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-s-glass__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-s-swatches:not(#ms-z){ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } .ms-s-sw:not(#ms-z){ flex-direction: column; gap: 10px; } .ms-s-sw__face:not(#ms-z){ position: relative; aspect-ratio: 3 / 4; min-height: 0; border: 1px solid rgba(26,28,31,0.15); background: linear-gradient(135deg, #c9dbe5, #e3edf2); overflow: hidden; } .ms-s-sw__face:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 38%, transparent 46%, transparent 60%, rgba(255,255,255,0.3) 64%, transparent 68%); } .ms-s-sw--clear:not(#ms-z) .ms-s-sw__face{ background: linear-gradient(160deg, #b9cfdb 0%, #dbe8ef 60%, #a8bfcc 100%); } .ms-s-sw--mat:not(#ms-z) .ms-s-sw__face{ background: #eef0f1; } .ms-s-sw--mat:not(#ms-z) .ms-s-sw__face::after{ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 60%); } .ms-s-sw--sand:not(#ms-z) .ms-s-sw__face{ background: repeating-linear-gradient(180deg, #c9dbe5 0 22px, #eef0f1 22px 44px); } .ms-s-sw--foil:not(#ms-z) .ms-s-sw__face{ background: linear-gradient(160deg, #b9cfdb, #dbe8ef); } .ms-s-sw--foil:not(#ms-z) .ms-s-sw__face::before{ content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 26%; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.85) 0 6px, rgba(255,255,255,0.45) 6px 12px); } .ms-s-sw--tint:not(#ms-z) .ms-s-sw__face{ background: linear-gradient(160deg, #4b5056, #6b7076 60%, #3d4146); } .ms-s-sw__name:not(#ms-z) .elementor-heading-title{ font-size: 18px; font-weight: 800; color: var(--ms-ink); } .ms-s-sw__txt:not(#ms-z) .elementor-heading-title{ font-size: 15px; line-height: 1.45; color: var(--ms-text-muted); } .ms-s-safe:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-s-safe__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 24px; } .ms-s-safe__card:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 14px; padding: 40px; border: 1px solid var(--ms-line); border-left: 6px solid var(--ms-orange); background: var(--ms-paper); } .ms-s-safe__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-rust); } .ms-s-safe__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ms-ink); } .ms-s-safe__txt:not(#ms-z){ font-size: 17px; line-height: 1.65; color: #3d4046; } .ms-s-safe__txt:not(#ms-z) strong{ color: var(--ms-ink); } .ms-s-steps:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-s-steps__in:not(#ms-z){ flex-direction: column; gap: 56px; } .ms-s-line:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ms-ink); } .ms-s-step:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; padding: 28px 28px 0 0; } .ms-s-step:not(#ms-z)::before{ content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; background: var(--ms-orange); border: 3px solid var(--ms-paper); border-radius: 50%; } .ms-s-step__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-rust); } .ms-s-step__title:not(#ms-z) .elementor-heading-title{ font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--ms-ink); } .ms-s-step__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-s-schema:not(#ms-z){ display: none; } .ms-s-rel:not(#ms-z){ background: #fff; padding: 0 0 72px; } .ms-s-rel__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 32px; border-top: 1px solid var(--ms-line); } .ms-s-rel__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-s-rel__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 10px; } .ms-s-rel__link:not(#ms-z) .elementor-heading-title a{ display: inline-block; padding: 9px 16px; border: 1px solid var(--ms-line); font-size: 15px; font-weight: 600; color: var(--ms-ink); transition: border-color .2s, background .2s; } .ms-s-rel__link:not(#ms-z) .elementor-heading-title a:hover{ border-color: var(--ms-ink); background: var(--ms-paper); } @media (max-width: 1024px) { .ms-s-swatches:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-s-line:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; border-top: 0; } .ms-s-step:not(#ms-z){ border-top: 2px solid var(--ms-ink); } } @media (max-width: 767px) { .ms-s-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-s-hero__sheet:not(#ms-z){ padding: 12px 12px 18px; } .ms-s-intro:not(#ms-z), .ms-s-types:not(#ms-z), .ms-s-split:not(#ms-z), .ms-s-glass:not(#ms-z), .ms-s-safe:not(#ms-z), .ms-s-steps:not(#ms-z){ padding: 72px 0; } .ms-s-facts:not(#ms-z){ padding: 4px 20px 12px; } .ms-s-trow:not(#ms-z){ gap: 14px 20px; padding: 24px 0; } .ms-s-trow__no:not(#ms-z){ flex: 0 0 auto; } .ms-s-trow__pic:not(#ms-z){ flex: 0 0 110px; } .ms-s-trow__pic:not(#ms-z) svg{ width: 110px; } .ms-s-col:not(#ms-z){ padding: 28px 22px 24px; } .ms-s-swatches:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-s-safe__card:not(#ms-z){ padding: 28px 22px; } .ms-s-line:not(#ms-z){ grid-template-columns: 1fr; } .ms-s-step:not(#ms-z){ padding-right: 0; } } @media (max-width: 480px) { .ms-s-hero:not(#ms-z) .mss-switch__row{ display: grid; grid-template-columns: 1fr 1fr; } .ms-s-hero:not(#ms-z) .mss-opt{ padding: 9px 8px !important; font-size: 11px; text-align: center; } } /* ========================================================= KABINY PRYSZNICOWE – prefiks ms-k- (jasny baner „płytki”, rzut z góry) ========================================================= */ .ms-k-hero:not(#ms-z){ --mk-fit: #c9ced4; position: relative; overflow: hidden; color: var(--ms-ink); background: #f1f5f6; } .ms-k-hero:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(143,184,207,0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(143,184,207,0.28) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; } .ms-k-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-k-hero__copy:not(#ms-z){ flex: 1 1 400px; min-width: 0; flex-direction: column; gap: 22px; } .ms-k-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-k-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-k-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(42px, 5.6vw, 84px); line-height: .98; font-weight: 800; letter-spacing: -0.04em; color: var(--ms-ink); } .ms-k-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: #3b7a99; } .ms-k-hero__lead:not(#ms-z){ max-width: 540px; font-size: 19px; line-height: 1.6; color: #3d4046; } .ms-k-hero__plan:not(#ms-z){ flex: 1.15 1 500px; min-width: 0; flex-direction: column; gap: 18px; padding: 20px 20px 22px; background: #fff; border-radius: 10px; box-shadow: 0 30px 60px rgba(26,40,50,0.14); } .ms-k-hero__svg:not(#ms-z) svg{ display: block; width: 100%; height: auto; border-radius: 6px; } .ms-k-hero:not(#ms-z) .mk-l{ opacity: 0; transition: opacity .45s; } .ms-k-hero:not(#ms-z) .mk-plan.is-niche .mk-l--niche, .ms-k-hero:not(#ms-z) .mk-plan.is-corner .mk-l--corner, .ms-k-hero:not(#ms-z) .mk-plan.is-fixed .mk-l--fixed, .ms-k-hero:not(#ms-z) .mk-plan.is-slide .mk-l--slide, .ms-k-hero:not(#ms-z) .mk-plan.is-walkin .mk-l--walkin, .ms-k-hero:not(#ms-z) .mk-plan.is-bath .mk-l--bath{ opacity: 1; } .ms-k-hero:not(#ms-z) .mk-floor{ transition: opacity .45s; } .ms-k-hero:not(#ms-z) .mk-plan.is-bath .mk-floor{ opacity: 0; } .ms-k-hero:not(#ms-z) .mk-fit{ fill: var(--mk-fit); transition: fill .4s; } .ms-k-hero:not(#ms-z) .mk-cfg{ display: flex; flex-direction: column; gap: 10px; } .ms-k-hero:not(#ms-z) .mk-cfg__lbl{ margin: 0; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-k-hero:not(#ms-z) .mk-cfg__lbl b{ color: var(--ms-ink); } .ms-k-hero:not(#ms-z) .mk-cfg__row{ display: flex; flex-wrap: wrap; gap: 8px; } .ms-k-hero:not(#ms-z) .mk-opt{ display: inline-block; margin: 0; min-height: 0; padding: 9px 14px !important; border: 1px solid #c6d6de !important; border-radius: 6px !important; background: #f1f5f6 !important; color: var(--ms-ink) !important; font-family: var(--ms-font); font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; transition: background .2s, border-color .2s; } .ms-k-hero:not(#ms-z) .mk-opt:hover{ border-color: var(--ms-ink) !important; } .ms-k-hero:not(#ms-z) .mk-opt.is-on{ background: var(--ms-orange) !important; border-color: var(--ms-orange) !important; color: var(--ms-ink) !important; } .ms-k-hero:not(#ms-z) .mk-opt:focus-visible, .ms-k-hero:not(#ms-z) .mk-fitbtn:focus-visible{ outline: 2px solid var(--ms-ink); outline-offset: 2px; } .ms-k-hero:not(#ms-z) .mk-cfg__hint{ margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.5; color: #3d4046; } .ms-k-hero:not(#ms-z) .mk-cfg__fits{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1px solid #e3e9ec; } .ms-k-hero:not(#ms-z) .mk-cfg__chips{ display: flex; gap: 10px; } .ms-k-hero:not(#ms-z) .mk-fitbtn{ display: block; width: 34px; height: 34px; min-height: 0; padding: 0 !important; border-radius: 50% !important; border: 2px solid #fff !important; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.75), transparent 45%), var(--c) !important; box-shadow: 0 0 0 1px #c6d6de, 0 3px 8px rgba(26,28,31,0.15); cursor: pointer; transition: transform .2s, box-shadow .2s; } .ms-k-hero:not(#ms-z) .mk-fitbtn.is-on{ box-shadow: 0 0 0 2px var(--ms-ink), 0 4px 10px rgba(26,28,31,0.2); transform: scale(1.08); } .ms-k-when:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-k-when__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-k-when__grid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-k-wcard:not(#ms-z){ flex-direction: column; gap: 12px; padding: 28px 24px; background: #f1f5f6; border-radius: 10px; border: 1px solid #e3e9ec; } .ms-k-wcard__ico:not(#ms-z) svg{ display: block; width: 56px; height: 56px; } .ms-k-wcard__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--ms-ink); } .ms-k-wcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-k-types:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 104px 0; } .ms-k-types__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-k-tgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ms-line-dark); border: 1px solid var(--ms-line-dark); } .ms-k-tcard:not(#ms-z){ flex-direction: column; gap: 14px; padding: 32px 28px; background: var(--ms-ink); transition: background .3s; } .ms-k-tcard:not(#ms-z):hover{ background: var(--ms-ink-2); } .ms-k-tcard__ico:not(#ms-z) svg{ display: block; width: 80px; height: 64px; } .ms-k-tcard__title:not(#ms-z) .elementor-heading-title{ font-size: 21px; font-weight: 800; line-height: 1.2; color: #f4f2ee; } .ms-k-tcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #c9ccd1; } .ms-k-types__note:not(#ms-z){ font-size: 16px; color: #c9ccd1; } .ms-k-types__note:not(#ms-z) a{ color: var(--ms-orange); text-decoration: underline; text-underline-offset: 3px; } .ms-k-glass:not(#ms-z){ background: #f1f5f6; padding: 104px 0; } .ms-k-glass__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; } .ms-k-glass__txt:not(#ms-z){ flex: 1.2 1 480px; min-width: 0; flex-direction: column; gap: 22px; } .ms-k-glass:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-k-spec:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; background: #fff; border-radius: 10px; padding: 8px 28px; box-shadow: 0 20px 50px rgba(26,40,50,0.08); } .ms-k-spec__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid #e3e9ec; } .ms-k-spec__row:not(#ms-z):last-child{ border-bottom: 0; } .ms-k-spec__k:not(#ms-z){ flex: 0 0 104px; } .ms-k-spec__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: #3b7a99; } .ms-k-spec__v:not(#ms-z){ flex: 1 1 180px; min-width: 0; } .ms-k-spec__v:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ms-ink); } .ms-k-fins:not(#ms-z){ flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-k-fin:not(#ms-z){ flex-direction: row; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 10px; border: 1px solid #e3e9ec; } .ms-k-fin__sw:not(#ms-z){ flex: 0 0 52px; width: 52px; height: 52px; min-height: 0; border-radius: 50%; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12); } .ms-k-fin--chrom:not(#ms-z) .ms-k-fin__sw{ background: linear-gradient(135deg, #f4f6f8 0%, #a9b1b9 45%, #eef1f4 55%, #8d959e 100%); } .ms-k-fin--black:not(#ms-z) .ms-k-fin__sw{ background: linear-gradient(135deg, #3a3c40, #151618); } .ms-k-fin--steel:not(#ms-z) .ms-k-fin__sw{ background: repeating-linear-gradient(90deg, #b3b0aa 0 2px, #9e9b95 2px 4px); } .ms-k-fin--gold:not(#ms-z) .ms-k-fin__sw{ background: linear-gradient(135deg, #f3dc9c 0%, #c9a45c 45%, #f0d48c 55%, #a8843c 100%); } .ms-k-fin__name:not(#ms-z){ flex: 1 1 auto; } .ms-k-fin__name:not(#ms-z) .elementor-heading-title{ font-size: 17px; font-weight: 800; color: var(--ms-ink); } .ms-k-fin__txt:not(#ms-z){ flex: 1 1 100%; } .ms-k-fin:not(#ms-z){ flex-wrap: wrap; } .ms-k-fin__txt:not(#ms-z) .elementor-heading-title{ font-size: 14px; line-height: 1.45; color: var(--ms-text-muted); } .ms-k-ready:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-k-ready__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; } .ms-k-ready__card:not(#ms-z){ flex: 1 1 440px; min-width: 0; flex-direction: column; gap: 14px; padding: 40px; background: #f1f5f6; border-radius: 10px; border-left: 6px solid var(--ms-orange); } .ms-k-ready__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-rust); } .ms-k-ready__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ms-ink); } .ms-k-ready__lead:not(#ms-z){ font-size: 16px; line-height: 1.6; color: #3d4046; } .ms-k-ready__list:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-direction: column; gap: 4px; } .ms-k-ready__list:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 9px 0 9px 34px; font-size: 16px; line-height: 1.45; color: var(--ms-ink); } .ms-k-ready__list:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 6px; background: var(--ms-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; } .ms-k-steps:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; } .ms-k-step:not(#ms-z){ flex-direction: row; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--ms-line); } .ms-k-step:not(#ms-z):first-child{ padding-top: 0; } .ms-k-step__no:not(#ms-z){ flex: 0 0 44px; } .ms-k-step__no:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ms-ink); font-family: var(--ms-mono); font-size: 14px; font-weight: 700; color: var(--ms-ink); } .ms-k-step__txt:not(#ms-z){ flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 4px; } .ms-k-step__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: var(--ms-ink); } .ms-k-step__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-k-care:not(#ms-z){ background: #f1f5f6; padding: 104px 0; } .ms-k-care__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-k-care__grid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: mktip; } .ms-k-tip:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; padding: 56px 24px 28px; background: #fff; border-radius: 10px; } .ms-k-tip:not(#ms-z)::before{ counter-increment: mktip; content: "0" counter(mktip); position: absolute; top: 22px; left: 24px; font-family: var(--ms-mono); font-size: 13px; color: #3b7a99; } .ms-k-tip__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; color: var(--ms-ink); } .ms-k-tip__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } @media (max-width: 1024px) { .ms-k-when__grid:not(#ms-z), .ms-k-care__grid:not(#ms-z), .ms-k-fins:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-k-tgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-k-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-k-hero__plan:not(#ms-z){ padding: 12px 12px 16px; } .ms-k-when:not(#ms-z), .ms-k-types:not(#ms-z), .ms-k-glass:not(#ms-z), .ms-k-ready:not(#ms-z), .ms-k-care:not(#ms-z){ padding: 72px 0; } .ms-k-when__grid:not(#ms-z), .ms-k-care__grid:not(#ms-z), .ms-k-fins:not(#ms-z), .ms-k-tgrid:not(#ms-z){ grid-template-columns: 1fr; } .ms-k-spec:not(#ms-z){ padding: 4px 20px; } .ms-k-ready__card:not(#ms-z){ padding: 28px 22px; } } @media (max-width: 480px) { .ms-k-hero:not(#ms-z) .mk-cfg__row{ display: grid; grid-template-columns: 1fr 1fr; } .ms-k-hero:not(#ms-z) .mk-opt{ padding: 9px 8px !important; font-size: 13px; text-align: center; } } /* ========================================================= DASZKI SZKLANE – prefiks ms-d- (wieczorne niebo, deszcz, przekrój boczny) ========================================================= */ .ms-d-hero:not(#ms-z){ position: relative; overflow: hidden; color: #e9e6e0; background: linear-gradient(180deg, #18202a 0%, #233140 100%); } .ms-d-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-d-hero__copy:not(#ms-z){ flex: 1 1 400px; min-width: 0; flex-direction: column; gap: 22px; } .ms-d-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: #9fb2c2; } .ms-d-crumbs:not(#ms-z) a{ color: #e9e6e0; text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-d-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 6vw, 88px); line-height: .96; font-weight: 800; letter-spacing: -0.04em; color: #f4f2ee; } .ms-d-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: var(--ms-orange); } .ms-d-hero__lead:not(#ms-z){ max-width: 540px; font-size: 19px; line-height: 1.6; color: #c3ccd5; } .ms-d-hero__fig:not(#ms-z){ flex: 1.2 1 520px; min-width: 0; flex-direction: column; gap: 18px; } .ms-d-hero__svg:not(#ms-z) svg{ display: block; width: 100%; height: auto; } .ms-d-hero:not(#ms-z) .md-drop{ animation: md-rain 1.4s linear infinite; } .ms-d-hero:not(#ms-z) .md-splash{ opacity: .7; } @keyframes md-rain { 0% { transform: translateY(-30px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ms-d-hero:not(#ms-z) .md-drop{ animation: none; } } .ms-d-hero:not(#ms-z) .md-m{ opacity: 0; transition: opacity .45s; } .ms-d-hero:not(#ms-z) .md-side.is-rods .md-m--rods, .ms-d-hero:not(#ms-z) .md-side.is-brackets .md-m--brackets, .ms-d-hero:not(#ms-z) .md-side.is-profile .md-m--profile{ opacity: 1; } .ms-d-hero:not(#ms-z) .md-glass{ fill: #9fc3d6; fill-opacity: .55; transition: fill .45s, fill-opacity .45s; } .ms-d-hero:not(#ms-z) .md-side.is-mat .md-glass{ fill: #e6ecef; fill-opacity: .9; } .ms-d-hero:not(#ms-z) .md-side.is-grafit .md-glass{ fill: #5a626c; fill-opacity: .9; } .ms-d-hero:not(#ms-z) .md-cfg{ display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid rgba(233,230,224,0.16); background: rgba(255,255,255,0.04); border-radius: 8px; } .ms-d-hero:not(#ms-z) .md-cfg__grp{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .ms-d-hero:not(#ms-z) .md-cfg__lbl{ flex: 0 0 110px; margin: 0; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9fb2c2; } .ms-d-hero:not(#ms-z) .md-cfg__row{ display: flex; flex-wrap: wrap; gap: 8px; } .ms-d-hero:not(#ms-z) .md-opt, .ms-d-hero:not(#ms-z) .md-tint{ display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 0; padding: 8px 14px !important; border: 1px solid rgba(233,230,224,0.3) !important; border-radius: 999px !important; background: transparent !important; color: #e9e6e0 !important; font-family: var(--ms-font); font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .ms-d-hero:not(#ms-z) .md-opt:hover, .ms-d-hero:not(#ms-z) .md-tint:hover{ border-color: #e9e6e0 !important; } .ms-d-hero:not(#ms-z) .md-opt.is-on, .ms-d-hero:not(#ms-z) .md-tint.is-on{ background: var(--ms-orange) !important; border-color: var(--ms-orange) !important; color: var(--ms-ink) !important; } .ms-d-hero:not(#ms-z) .md-tint::before{ content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25); } .ms-d-hero:not(#ms-z) .md-tint--clear::before{ background: #9fc3d6; } .ms-d-hero:not(#ms-z) .md-tint--mat::before{ background: #e6ecef; } .ms-d-hero:not(#ms-z) .md-tint--grafit::before{ background: #5a626c; } .ms-d-hero:not(#ms-z) .md-opt:focus-visible, .ms-d-hero:not(#ms-z) .md-tint:focus-visible{ outline: 2px solid #e9e6e0; outline-offset: 2px; } .ms-d-hero:not(#ms-z) .md-cfg__hint{ margin: 0; min-height: 1.5em; font-size: 15px; line-height: 1.5; color: #c3ccd5; } .ms-d-why:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-d-why__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; } .ms-d-why__head:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; } .ms-d-why:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-d-why__list:not(#ms-z){ flex: 1.2 1 480px; min-width: 0; flex-direction: column; border-top: 2px solid var(--ms-ink); } .ms-d-ben:not(#ms-z){ flex-direction: row; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--ms-line); } .ms-d-ben__no:not(#ms-z){ flex: 0 0 40px; } .ms-d-ben__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 14px; color: var(--ms-rust); } .ms-d-ben__txt:not(#ms-z){ flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 6px; } .ms-d-ben__title:not(#ms-z) .elementor-heading-title{ font-size: 21px; font-weight: 800; color: var(--ms-ink); } .ms-d-ben__desc:not(#ms-z){ font-size: 16px; line-height: 1.6; color: #3d4046; } .ms-d-types:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-d-types__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-d-tgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-d-tcard:not(#ms-z){ flex-direction: column; gap: 12px; padding: 24px 24px 28px; background: #fff; border-top: 4px solid var(--ms-ink); box-shadow: 0 16px 40px rgba(26,28,31,0.06); transition: border-color .3s, transform .3s; } .ms-d-tcard:not(#ms-z):hover{ border-color: var(--ms-orange); transform: translateY(-3px); } .ms-d-tcard__ico:not(#ms-z) svg{ display: block; width: 100%; max-width: 180px; height: auto; } .ms-d-tcard__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--ms-ink); } .ms-d-tcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-d-glass:not(#ms-z){ background: linear-gradient(180deg, #18202a 0%, #1f2a36 100%); color: #e9e6e0; padding: 104px 0; } .ms-d-glass__in:not(#ms-z){ flex-direction: column; gap: 56px; } .ms-d-glass__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-d-glass__txt:not(#ms-z){ flex: 1 1 440px; min-width: 0; flex-direction: column; gap: 22px; } .ms-d-glass__prose:not(#ms-z){ font-size: 17px; line-height: 1.7; color: #c3ccd5; } .ms-d-glass__prose:not(#ms-z) p + p{ margin-top: 1em; } .ms-d-glass__prose:not(#ms-z) strong{ color: #f4f2ee; } .ms-d-glass__fig:not(#ms-z){ flex: 1 1 420px; min-width: 0; } .ms-d-glass__svg:not(#ms-z) svg{ display: block; width: 100%; height: auto; } .ms-d-tints:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ms-d-tint:not(#ms-z){ flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(233,230,224,0.14); border-radius: 8px; } .ms-d-tint__sw:not(#ms-z){ height: 90px; min-height: 0; border-radius: 4px; position: relative; overflow: hidden; } .ms-d-tint__sw:not(#ms-z)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.35) 45%, transparent 55%); } .ms-d-tint--clear:not(#ms-z) .ms-d-tint__sw{ background: linear-gradient(160deg, #9fc3d6, #c9dde8); } .ms-d-tint--mat:not(#ms-z) .ms-d-tint__sw{ background: #e6ecef; } .ms-d-tint--grafit:not(#ms-z) .ms-d-tint__sw{ background: linear-gradient(160deg, #4b525a, #6b7279); } .ms-d-tint__name:not(#ms-z) .elementor-heading-title{ font-size: 18px; font-weight: 800; color: #f4f2ee; } .ms-d-tint__txt:not(#ms-z) .elementor-heading-title{ font-size: 15px; line-height: 1.5; color: #c3ccd5; } .ms-d-places:not(#ms-z){ background: var(--ms-orange); padding: 56px 0; } .ms-d-places__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 40px; } .ms-d-places__k:not(#ms-z){ flex: 0 1 320px; } .ms-d-places__k:not(#ms-z) .elementor-heading-title{ font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ms-ink); } .ms-d-places__list:not(#ms-z){ flex: 1 1 520px; min-width: 0; } .ms-d-places__list:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-wrap: wrap; gap: 10px; } .ms-d-places__list:not(#ms-z) .elementor-icon-list-item{ padding: 10px 16px; background: var(--ms-ink); color: #f4f2ee; font-size: 15px; font-weight: 600; border-radius: 999px; } .ms-d-mount:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-d-mount__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; } .ms-d-check:not(#ms-z){ flex: 1 1 440px; min-width: 0; flex-direction: column; gap: 14px; padding: 40px; background: var(--ms-paper); border-left: 6px solid var(--ms-orange); } .ms-d-check__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-rust); } .ms-d-check__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ms-ink); } .ms-d-check__lead:not(#ms-z){ font-size: 16px; line-height: 1.6; color: #3d4046; } .ms-d-check__list:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-direction: column; gap: 2px; } .ms-d-check__list:not(#ms-z) .elementor-icon-list-item{ position: relative; padding: 9px 0 9px 30px; font-size: 16px; line-height: 1.45; color: var(--ms-ink); } .ms-d-check__list:not(#ms-z) .elementor-icon-list-item::before{ content: ""; position: absolute; left: 0; top: 15px; width: 16px; height: 2px; background: var(--ms-orange); box-shadow: 0 -5px 0 var(--ms-orange); } .ms-d-steps:not(#ms-z){ flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ms-d-step:not(#ms-z){ flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--ms-line); } .ms-d-step__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 28px; font-weight: 700; color: var(--ms-orange); } .ms-d-step__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; color: var(--ms-ink); } .ms-d-step__desc:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } @media (max-width: 1024px) { .ms-d-tgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-d-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-d-why:not(#ms-z), .ms-d-types:not(#ms-z), .ms-d-glass:not(#ms-z), .ms-d-mount:not(#ms-z){ padding: 72px 0; } .ms-d-hero:not(#ms-z) .md-cfg{ padding: 16px; } .ms-d-hero:not(#ms-z) .md-cfg__lbl{ flex-basis: 100%; } .ms-d-tgrid:not(#ms-z), .ms-d-tints:not(#ms-z), .ms-d-steps:not(#ms-z){ grid-template-columns: 1fr; } .ms-d-check:not(#ms-z){ padding: 28px 22px; } } /* ========================================================= POGOTOWIE SZKLARSKIE – prefiks ms-g- (taśma ostrzegawcza, „Co się stało?”, mapa zasięgu) ========================================================= */ .ms-g-hero:not(#ms-z){ position: relative; overflow: hidden; color: #e9e6e0; background: var(--ms-ink); } .ms-g-tape:not(#ms-z){ overflow: hidden; background: repeating-linear-gradient(-45deg, var(--ms-orange) 0 22px, var(--ms-ink) 22px 44px); padding: 6px 0; } .ms-g-tape:not(#ms-z) .mg-tape{ display: flex; width: max-content; background: var(--ms-orange); animation: mg-tape 40s linear infinite; } .ms-g-tape:not(#ms-z) .mg-tape span{ padding: 6px 0; font-family: var(--ms-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--ms-ink); white-space: nowrap; } @keyframes mg-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ms-g-tape:not(#ms-z) .mg-tape{ animation: none; } } .ms-g-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 64px; padding-bottom: 88px; } .ms-g-hero__copy:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; } .ms-g-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted-dark); } .ms-g-crumbs:not(#ms-z) a{ color: #e9e6e0; text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-g-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(42px, 5.8vw, 86px); line-height: .96; font-weight: 800; letter-spacing: -0.04em; color: #f4f2ee; } .ms-g-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: var(--ms-orange); } .ms-g-hero__lead:not(#ms-z){ max-width: 560px; font-size: 19px; line-height: 1.6; color: #c9ccd1; } .ms-g-hero__call:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 8px; } .ms-g-hero__big:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--ms-orange); } .ms-g-hero__calltxt:not(#ms-z){ flex-direction: column; gap: 10px; } .ms-g-hero__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-text-muted-dark); } .ms-g-hero__help:not(#ms-z){ position: relative; flex: 1.1 1 500px; min-width: 0; flex-direction: column; padding: 26px; background: var(--ms-ink-2); border: 1px solid var(--ms-line-dark); border-radius: 6px; overflow: hidden; } .ms-g-hero__crack:not(#ms-z){ position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ms-g-hero__crack:not(#ms-z) svg{ display: block; width: 100%; height: 100%; } .ms-g-hero__cases:not(#ms-z){ position: relative; z-index: 1; } .ms-g-hero:not(#ms-z) .mg-help{ display: flex; flex-direction: column; gap: 16px; } .ms-g-hero:not(#ms-z) .mg-help__lbl{ margin: 0; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-orange); } .ms-g-hero:not(#ms-z) .mg-help__row{ display: flex; flex-wrap: wrap; gap: 8px; } .ms-g-hero:not(#ms-z) .mg-case{ margin: 0; min-height: 0; padding: 10px 14px !important; border: 1px solid rgba(233,230,224,0.28) !important; border-radius: 0 !important; background: rgba(26,28,31,0.6) !important; color: #e9e6e0 !important; font-family: var(--ms-font); font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .ms-g-hero:not(#ms-z) .mg-case:hover{ border-color: #e9e6e0 !important; } .ms-g-hero:not(#ms-z) .mg-case.is-on{ background: var(--ms-orange) !important; border-color: var(--ms-orange) !important; color: var(--ms-ink) !important; } .ms-g-hero:not(#ms-z) .mg-case:focus-visible{ outline: 2px solid #e9e6e0; outline-offset: 2px; } .ms-g-hero:not(#ms-z) .mg-panel{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ms-g-hero:not(#ms-z) .mg-panel[hidden]{ display: none !important; } .ms-g-hero:not(#ms-z) .mg-panel__col{ padding: 18px; background: rgba(26,28,31,0.72); border-top: 3px solid #e9e6e0; } .ms-g-hero:not(#ms-z) .mg-panel__col--we{ border-top-color: var(--ms-orange); } .ms-g-hero:not(#ms-z) .mg-panel__k{ margin: 0 0 10px; font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted-dark); } .ms-g-hero:not(#ms-z) .mg-panel ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .ms-g-hero:not(#ms-z) .mg-panel li{ position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: #e9e6e0; } .ms-g-hero:not(#ms-z) .mg-panel li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: #e9e6e0; transform: rotate(45deg); } .ms-g-hero:not(#ms-z) .mg-panel__col--we li::before{ background: var(--ms-orange); } .ms-g-hero:not(#ms-z) .mg-help__call{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--ms-orange); color: var(--ms-ink); font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s; } .ms-g-hero:not(#ms-z) .mg-help__call:hover{ background: var(--ms-orange-hi); color: var(--ms-ink); } .ms-g-hero:not(#ms-z) .mg-help__call b{ font-family: var(--ms-mono); } .ms-g-safe:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-g-safe__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-g-safe__grid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-g-tile:not(#ms-z){ flex-direction: column; gap: 10px; padding: 0 0 24px; background: var(--ms-paper); } .ms-g-tile:not(#ms-z)::before{ content: ""; display: block; height: 10px; background: repeating-linear-gradient(-45deg, var(--ms-orange) 0 10px, var(--ms-ink) 10px 20px); } .ms-g-tile:not(#ms-z) > .e-con-inner, .ms-g-tile:not(#ms-z) > *{ margin-left: 24px; margin-right: 24px; } .ms-g-tile__no:not(#ms-z){ margin-top: 18px; } .ms-g-tile__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 32px; font-weight: 700; color: var(--ms-ink); } .ms-g-tile__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: var(--ms-ink); } .ms-g-tile__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-g-flow:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-g-flow__in:not(#ms-z){ flex-direction: column; gap: 56px; } .ms-g-flow__head:not(#ms-z){ flex-direction: column; gap: 20px; max-width: 760px; } .ms-g-flow:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-g-flow__line:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; } .ms-g-fstep:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; padding: 28px 24px; background: #fff; border-bottom: 4px solid var(--ms-ink); } .ms-g-fstep:not(#ms-z):not(:last-child)::after{ content: ""; position: absolute; top: 44px; right: -14px; width: 12px; height: 12px; border-top: 3px solid var(--ms-orange); border-right: 3px solid var(--ms-orange); transform: rotate(45deg); z-index: 2; } .ms-g-fstep__no:not(#ms-z) .elementor-heading-title{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--ms-orange); font-family: var(--ms-mono); font-size: 16px; font-weight: 700; color: var(--ms-ink); } .ms-g-fstep__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: var(--ms-ink); } .ms-g-fstep__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-g-glass:not(#ms-z){ background: var(--ms-ink); color: #f4f2ee; padding: 104px 0; } .ms-g-glass__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-g-gl:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ms-g-gcard:not(#ms-z){ flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--ms-line-dark); border-left: 4px solid var(--ms-orange); background: var(--ms-ink-2); } .ms-g-gcard__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; color: #f4f2ee; } .ms-g-gcard__txt:not(#ms-z) .elementor-heading-title{ font-size: 15px; line-height: 1.5; color: #c9ccd1; } .ms-g-area:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-g-area__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; } .ms-g-area__txt:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; align-items: flex-start; } .ms-g-area__map:not(#ms-z){ flex: 1.1 1 460px; min-width: 0; padding: 16px; background: var(--ms-paper); border-radius: 6px; } .ms-g-area__svg:not(#ms-z) svg{ display: block; width: 100%; height: auto; } .ms-g-cta:not(#ms-z){ position: relative; background: var(--ms-ink); padding: 72px 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--ms-orange) 0 14px, var(--ms-ink) 14px 28px) 12; } .ms-g-cta__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; } .ms-g-cta__txt:not(#ms-z){ flex: 1 1 520px; min-width: 0; flex-direction: column; gap: 10px; } .ms-g-cta__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-orange); } .ms-g-cta__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #f4f2ee; } .ms-g-cta:not(#ms-z) .ms-n-btn .elementor-button{ min-height: 60px; padding: 0 32px; font-size: 18px; } @media (max-width: 1024px) { .ms-g-safe__grid:not(#ms-z), .ms-g-flow__line:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-g-fstep:not(#ms-z):nth-child(2n)::after{ display: none; } .ms-g-gl:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-g-hero__in:not(#ms-z){ padding-top: 40px; padding-bottom: 64px; } .ms-g-hero__help:not(#ms-z){ padding: 18px; } .ms-g-hero:not(#ms-z) .mg-panel{ grid-template-columns: 1fr; } .ms-g-safe:not(#ms-z), .ms-g-flow:not(#ms-z), .ms-g-glass:not(#ms-z), .ms-g-area:not(#ms-z){ padding: 72px 0; } .ms-g-safe__grid:not(#ms-z), .ms-g-flow__line:not(#ms-z), .ms-g-gl:not(#ms-z){ grid-template-columns: 1fr; } .ms-g-fstep:not(#ms-z)::after{ display: none; } .ms-g-area__map:not(#ms-z){ padding: 8px; } } /* ========================================================= TABLICE SZKLANE – prefiks ms-t- (tablica do rysowania w banerze) ========================================================= */ .ms-t-hero:not(#ms-z){ position: relative; overflow: hidden; color: var(--ms-ink); background: linear-gradient(180deg, #ecebe6 0%, #e3e1da 100%); } .ms-t-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-t-hero__copy:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 22px; } .ms-t-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-t-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-t-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 5.8vw, 86px); line-height: .96; font-weight: 800; letter-spacing: -0.04em; color: var(--ms-ink); } .ms-t-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: var(--ms-rust); } .ms-t-hero__lead:not(#ms-z){ max-width: 520px; font-size: 19px; line-height: 1.6; color: #3d4046; } .ms-t-hero__fig:not(#ms-z){ flex: 1.3 1 540px; min-width: 0; } .ms-t-hero:not(#ms-z) .mt-board{ display: flex; flex-direction: column; gap: 16px; } .ms-t-hero:not(#ms-z) .mt-glass{ --mt-bg: #fbfbf8; position: relative; aspect-ratio: 1200 / 760; border-radius: 6px; background: var(--mt-bg); box-shadow: 0 2px 0 rgba(255,255,255,0.8) inset, 0 30px 60px rgba(26,28,31,0.18), 0 0 0 1px rgba(26,28,31,0.08); overflow: hidden; transition: background .4s; } .ms-t-hero:not(#ms-z) .mt-glass::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0) 78%); } .ms-t-hero:not(#ms-z) .mt-glass canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: crosshair; touch-action: none; } .ms-t-hero:not(#ms-z) .mt-planer{ position: absolute; inset: 6% 5%; z-index: 1; display: none; border: 2px solid rgba(26,28,31,0.25); background-image: linear-gradient(90deg, rgba(26,28,31,0.18) 1px, transparent 1px); background-size: calc(100% / 7) 100%; } .ms-t-hero:not(#ms-z) .mt-glass.has-planer .mt-planer{ display: block; } .ms-t-hero:not(#ms-z) .mt-planer__head{ display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 2px solid rgba(26,28,31,0.25); } .ms-t-hero:not(#ms-z) .mt-planer__head span{ padding: 6px 0; text-align: center; font-family: var(--ms-mono); font-size: 12px; font-weight: 700; color: rgba(26,28,31,0.55); } .ms-t-hero:not(#ms-z) .mt-glass.is-dark .mt-planer, .ms-t-hero:not(#ms-z) .mt-glass.is-dark .mt-planer__head{ border-color: rgba(244,242,238,0.35); } .ms-t-hero:not(#ms-z) .mt-glass.is-dark .mt-planer{ background-image: linear-gradient(90deg, rgba(244,242,238,0.25) 1px, transparent 1px); } .ms-t-hero:not(#ms-z) .mt-glass.is-dark .mt-planer__head span{ color: rgba(244,242,238,0.7); } .ms-t-hero:not(#ms-z) .mt-hint{ position: absolute; left: 50%; top: 50%; z-index: 1; margin: 0; transform: translate(-50%, -50%); font-family: var(--ms-mono); font-size: 15px; color: rgba(26,28,31,0.45); white-space: nowrap; pointer-events: none; transition: opacity .3s; } .ms-t-hero:not(#ms-z) .mt-glass.is-dark .mt-hint{ color: rgba(244,242,238,0.6); } .ms-t-hero:not(#ms-z) .mt-r{ position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8bec4 45%, #7d848b 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.35); pointer-events: none; } .ms-t-hero:not(#ms-z) .mt-r--tl{ top: 14px; left: 14px; } .ms-t-hero:not(#ms-z) .mt-r--tr{ top: 14px; right: 14px; } .ms-t-hero:not(#ms-z) .mt-r--bl{ bottom: 14px; left: 14px; } .ms-t-hero:not(#ms-z) .mt-r--br{ bottom: 14px; right: 14px; } .ms-t-hero:not(#ms-z) .mt-tools{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(26,28,31,0.08); } .ms-t-hero:not(#ms-z) .mt-tools__grp{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ms-t-hero:not(#ms-z) .mt-tools__lbl{ margin-right: 4px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-t-hero:not(#ms-z) .mt-pen, .ms-t-hero:not(#ms-z) .mt-bg{ display: block; width: 28px; height: 28px; min-height: 0; padding: 0 !important; border: 2px solid #fff !important; border-radius: 50% !important; background: var(--c) !important; box-shadow: 0 0 0 1px #c9c6bf; cursor: pointer; transition: transform .15s, box-shadow .15s; } .ms-t-hero:not(#ms-z) .mt-bg{ border-radius: 6px !important; } .ms-t-hero:not(#ms-z) .mt-pen.is-on, .ms-t-hero:not(#ms-z) .mt-bg.is-on{ box-shadow: 0 0 0 2px var(--ms-ink); transform: scale(1.1); } .ms-t-hero:not(#ms-z) .mt-sponge, .ms-t-hero:not(#ms-z) .mt-act{ margin: 0; min-height: 0; padding: 6px 12px !important; border: 1px solid #c9c6bf !important; border-radius: 6px !important; background: #fff !important; color: var(--ms-ink) !important; font-family: var(--ms-font); font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; } .ms-t-hero:not(#ms-z) .mt-sponge.is-on, .ms-t-hero:not(#ms-z) .mt-act.is-on{ background: var(--ms-ink) !important; border-color: var(--ms-ink) !important; color: #fff !important; } .ms-t-hero:not(#ms-z) .mt-pen:focus-visible, .ms-t-hero:not(#ms-z) .mt-bg:focus-visible, .ms-t-hero:not(#ms-z) .mt-sponge:focus-visible, .ms-t-hero:not(#ms-z) .mt-act:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 2px; } .ms-t-why:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-t-why__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-t-why__head:not(#ms-z){ flex-direction: column; gap: 20px; max-width: 760px; } .ms-t-why:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-t-why__grid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ms-ink); border-left: 1px solid var(--ms-line); } .ms-t-why__item:not(#ms-z){ flex-direction: column; gap: 10px; padding: 28px 24px 32px; border-right: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); } .ms-t-why__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-rust); } .ms-t-why__title:not(#ms-z) .elementor-heading-title{ font-size: 21px; font-weight: 800; color: var(--ms-ink); } .ms-t-why__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-t-types:not(#ms-z){ background: #2f4a3c; color: #f4f2ee; padding: 104px 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 18px 18px; } .ms-t-types__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-t-tlist:not(#ms-z){ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .ms-t-titem:not(#ms-z){ flex-direction: column; gap: 10px; padding: 24px 20px 28px; border: 2px dashed rgba(244,242,238,0.35); border-radius: 6px; transition: border-color .3s, background .3s; } .ms-t-titem:not(#ms-z):hover{ border-color: #f4f2ee; background: rgba(255,255,255,0.04); } .ms-t-titem__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-orange); } .ms-t-titem__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; line-height: 1.2; color: #f4f2ee; } .ms-t-titem__txt:not(#ms-z){ font-size: 15px; line-height: 1.55; color: rgba(244,242,238,0.8); } .ms-t-colors:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-t-colors__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-t-colors__txt:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; } .ms-t-colors:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-t-ral:not(#ms-z){ flex: 1 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ms-t-chip:not(#ms-z){ flex-direction: column; gap: 4px; padding: 10px 10px 14px; background: #fff; border-radius: 6px; box-shadow: 0 8px 20px rgba(26,28,31,0.06); } .ms-t-chip:not(#ms-z) .mt-swatch{ display: block; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(26,28,31,0.1); position: relative; overflow: hidden; } .ms-t-chip:not(#ms-z) .mt-swatch::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.4) 0%, transparent 35%); } .ms-t-chip__name:not(#ms-z) .elementor-heading-title{ margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--ms-ink); } .ms-t-chip__ral:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; color: var(--ms-text-muted); } .ms-t-mount:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-t-mount__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-t-mgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-t-mcard:not(#ms-z){ flex-direction: column; gap: 12px; padding: 24px; background: var(--ms-paper); border-radius: 6px; } .ms-t-mcard__ico:not(#ms-z) svg{ display: block; width: 120px; height: auto; } .ms-t-mcard__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--ms-ink); } .ms-t-mcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-t-places:not(#ms-z){ background: var(--ms-ink); padding: 64px 0; } .ms-t-places__in:not(#ms-z){ flex-direction: column; gap: 20px; } .ms-t-places__k:not(#ms-z) .elementor-heading-title{ font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: #f4f2ee; } .ms-t-places__list:not(#ms-z) .elementor-icon-list-items{ display: flex; flex-wrap: wrap; gap: 10px; } .ms-t-places__list:not(#ms-z) .elementor-icon-list-item{ padding: 10px 16px; border: 1px solid rgba(244,242,238,0.3); border-radius: 999px; color: #f4f2ee; font-size: 15px; font-weight: 600; } .ms-t-places__note:not(#ms-z){ font-size: 16px; color: #c9ccd1; } .ms-t-places__note:not(#ms-z) strong{ color: var(--ms-orange); } @media (max-width: 1024px) { .ms-t-tlist:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-t-why__grid:not(#ms-z), .ms-t-mgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-t-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-t-why:not(#ms-z), .ms-t-types:not(#ms-z), .ms-t-colors:not(#ms-z), .ms-t-mount:not(#ms-z){ padding: 72px 0; } .ms-t-tlist:not(#ms-z), .ms-t-why__grid:not(#ms-z), .ms-t-mgrid:not(#ms-z){ grid-template-columns: 1fr; } .ms-t-ral:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-t-hero:not(#ms-z) .mt-r{ width: 12px; height: 12px; } .ms-t-hero:not(#ms-z) .mt-hint{ font-size: 12px; } } /* ========================================================= KABINY WALK-IN – prefiks ms-w- (rysunek ścianki z konfiguratorem) ========================================================= */ .ms-w-hero:not(#ms-z){ position: relative; overflow: hidden; color: var(--ms-ink); background-color: #e4eae9; background-image: linear-gradient(#d3dbda 2px, transparent 2px), linear-gradient(90deg, #d3dbda 2px, transparent 2px); background-size: 96px 96px; background-position: -2px -2px; } .ms-w-hero:not(#ms-z)::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(228,234,233,0.96) 0%, rgba(228,234,233,0.85) 45%, rgba(228,234,233,0.2) 100%); pointer-events: none; } .ms-w-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 64px; padding-top: 72px; padding-bottom: 88px; } .ms-w-hero__copy:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 22px; } .ms-w-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-w-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-w-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 5.8vw, 86px); line-height: .96; font-weight: 800; letter-spacing: -0.04em; color: var(--ms-ink); } .ms-w-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; color: #1f6f6a; } .ms-w-nw:not(#ms-z){ white-space: nowrap; font-style: normal; } .ms-w-hero__lead:not(#ms-z){ max-width: 520px; font-size: 19px; line-height: 1.6; color: #3d4046; } .ms-w-hero__fig:not(#ms-z){ flex: 1.2 1 520px; min-width: 0; } .ms-w-hero:not(#ms-z) .mw-cfg{ display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 30px 60px rgba(26,28,31,0.14); overflow: hidden; } .ms-w-hero:not(#ms-z) .mw-fig{ background: #f7f9f9; padding: 14px 14px 4px; border-bottom: 1px solid #e3e7e7; } .ms-w-hero:not(#ms-z) .mw-svg{ display: block; width: 100%; height: auto; } .ms-w-hero:not(#ms-z) .mw-drop{ stroke: rgba(70,150,190,0.55); stroke-width: 1.6; stroke-dasharray: 7 15; animation: mwRain .9s linear infinite; } @keyframes mwRain { to { stroke-dashoffset: -22; } } .ms-w-hero:not(#ms-z) .mw-ctl{ display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; } .ms-w-hero:not(#ms-z) .mw-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .ms-w-hero:not(#ms-z) .mw-row--split{ justify-content: space-between; gap: 14px 28px; } .ms-w-hero:not(#ms-z) .mw-row--split > div{ display: flex; flex-direction: column; gap: 8px; } .ms-w-hero:not(#ms-z) .mw-w{ flex: 1 1 220px; } .ms-w-hero:not(#ms-z) .mw-lbl{ margin: 0; min-width: 84px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-w-hero:not(#ms-z) .mw-lbl b{ color: var(--ms-ink); letter-spacing: 0; text-transform: none; font-size: 13px; } .ms-w-hero:not(#ms-z) .mw-chips{ display: flex; flex-wrap: wrap; gap: 6px; } .ms-w-hero:not(#ms-z) .mw-sty, .ms-w-hero:not(#ms-z) .mw-mnt{ margin: 0; min-height: 0; padding: 7px 12px !important; border: 1px solid #c9cfcf !important; border-radius: 999px !important; background: #fff !important; color: var(--ms-ink) !important; font-family: var(--ms-font); font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; transition: background .2s, color .2s; } .ms-w-hero:not(#ms-z) .mw-sty.is-on, .ms-w-hero:not(#ms-z) .mw-mnt.is-on{ background: #1f6f6a !important; border-color: #1f6f6a !important; color: #fff !important; } .ms-w-hero:not(#ms-z) .mw-fit{ display: block; width: 28px; height: 28px; min-height: 0; padding: 0 !important; border: 2px solid #fff !important; border-radius: 50% !important; background: var(--c) !important; box-shadow: 0 0 0 1px #c9cfcf; cursor: pointer; } .ms-w-hero:not(#ms-z) .mw-fit.is-on{ box-shadow: 0 0 0 2px var(--ms-ink); } .ms-w-hero:not(#ms-z) .mw-range{ width: 100%; accent-color: #1f6f6a; margin: 4px 0 0; } .ms-w-hero:not(#ms-z) .mw-sty:focus-visible, .ms-w-hero:not(#ms-z) .mw-mnt:focus-visible, .ms-w-hero:not(#ms-z) .mw-fit:focus-visible, .ms-w-hero:not(#ms-z) .mw-range:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 2px; } .ms-w-hero:not(#ms-z) .mw-note{ margin: 0; font-size: 12px; color: var(--ms-text-muted); } .ms-w-intro:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-w-intro__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 40px 80px; } .ms-w-intro__txt:not(#ms-z){ flex: 1 1 420px; min-width: 0; flex-direction: column; gap: 22px; } .ms-w-intro:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-w-spec:not(#ms-z){ flex: 1 1 440px; min-width: 0; flex-direction: column; gap: 0; border-top: 2px solid var(--ms-ink); } .ms-w-spec__row:not(#ms-z){ flex-direction: row; flex-wrap: wrap; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--ms-line); } .ms-w-spec__k:not(#ms-z){ flex: 0 0 130px; } .ms-w-spec__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #1f6f6a; } .ms-w-spec__v:not(#ms-z){ flex: 1 1 220px; min-width: 0; } .ms-w-spec__v:not(#ms-z) .elementor-heading-title{ font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ms-ink); } .ms-w-styles:not(#ms-z){ background: #163633; color: #f4f2ee; padding: 104px 0; } .ms-w-styles__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-w-sgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-w-scard:not(#ms-z){ flex-direction: column; gap: 12px; } .ms-w-scard__fig:not(#ms-z) svg{ display: block; width: 100%; height: auto; border-radius: 6px; } .ms-w-scard__title:not(#ms-z) .elementor-heading-title{ margin-top: 6px; font-size: 20px; font-weight: 800; color: #f4f2ee; } .ms-w-scard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: rgba(244,242,238,0.78); } .ms-w-mount:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-w-mount__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-w-mgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ms-w-mcard:not(#ms-z){ flex-direction: column; gap: 12px; padding: 20px 20px 26px; background: #fff; border-radius: 8px; border-top: 4px solid #1f6f6a; } .ms-w-mcard__fig:not(#ms-z) svg{ display: block; width: 100%; height: auto; border-radius: 4px; } .ms-w-mcard__title:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; color: var(--ms-ink); } .ms-w-mcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-w-plan:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-w-plan__in:not(#ms-z){ flex-direction: column; gap: 40px; } .ms-w-steps:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: none; } .ms-w-step:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; padding: 26px 22px 30px; border-top: 4px solid #c9cfcf; background: #f6f7f7; } .ms-w-step:not(#ms-z) + .ms-w-step{ border-left: 1px solid #fff; } .ms-w-step--us:not(#ms-z){ border-top-color: var(--ms-orange); background: #fff5e8; } .ms-w-step__who:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-w-step--us:not(#ms-z) .ms-w-step__who .elementor-heading-title{ color: var(--ms-rust); font-weight: 700; } .ms-w-step__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: var(--ms-ink); } .ms-w-step__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-w-tips:not(#ms-z){ flex-direction: column; gap: 12px; padding: 28px 30px; border: 2px dashed #1f6f6a; border-radius: 8px; } .ms-w-tips__k:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: #1f6f6a; } .ms-w-tips__list:not(#ms-z) ul{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; } .ms-w-tips__list:not(#ms-z) li{ position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: #3d4046; } .ms-w-tips__list:not(#ms-z) li::before{ content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border: 2px solid #1f6f6a; border-radius: 2px; } .ms-w-vs:not(#ms-z){ background: #eef2f1; padding: 104px 0; } .ms-w-vs__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 40px 72px; } .ms-w-vs__head:not(#ms-z){ flex: 1 1 340px; min-width: 0; flex-direction: column; gap: 20px; } .ms-w-vs__head:not(#ms-z) .ms-n-prose a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-w-vs__table:not(#ms-z){ flex: 1.5 1 520px; min-width: 0; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 40px rgba(26,28,31,0.07); } .ms-w-vs__row:not(#ms-z){ display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 0; border-bottom: 1px solid #e3e7e7; } .ms-w-vs__row:not(#ms-z):last-child{ border-bottom: 0; } .ms-w-vs__row:not(#ms-z) > .elementor-element{ padding: 16px 18px; } .ms-w-vs__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ms-text-muted); } .ms-w-vs__a:not(#ms-z){ background: #f0f7f6; } .ms-w-vs__a:not(#ms-z) .elementor-heading-title{ font-size: 15px; font-weight: 700; color: #1f6f6a; } .ms-w-vs__b:not(#ms-z) .elementor-heading-title{ font-size: 15px; font-weight: 500; color: #3d4046; } .ms-w-vs__row--head:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; } .ms-w-vs__row--head:not(#ms-z) .ms-w-vs__a{ background: #1f6f6a; } .ms-w-vs__row--head:not(#ms-z) .ms-w-vs__a .elementor-heading-title{ color: #fff; } .ms-w-vs__row--head:not(#ms-z) .ms-w-vs__b .elementor-heading-title{ color: var(--ms-ink); } @media (max-width: 1024px) { .ms-w-sgrid:not(#ms-z), .ms-w-steps:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-w-hero__in:not(#ms-z){ padding-top: 48px; padding-bottom: 64px; } .ms-w-intro:not(#ms-z), .ms-w-styles:not(#ms-z), .ms-w-mount:not(#ms-z), .ms-w-plan:not(#ms-z), .ms-w-vs:not(#ms-z){ padding: 72px 0; } .ms-w-mgrid:not(#ms-z), .ms-w-steps:not(#ms-z), .ms-w-tips__list:not(#ms-z) ul{ grid-template-columns: 1fr; } .ms-w-sgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ms-w-step:not(#ms-z) + .ms-w-step{ border-left: 0; } .ms-w-hero:not(#ms-z) .mw-ctl{ padding: 16px; } .ms-w-vs__row:not(#ms-z){ grid-template-columns: 1fr 1fr; } .ms-w-vs__row:not(#ms-z) > .ms-w-vs__k{ grid-column: 1 / -1; padding-bottom: 0; } .ms-w-vs__row--head:not(#ms-z) > .ms-w-vs__k{ display: none; } .ms-w-spec__k:not(#ms-z){ flex-basis: 100%; } } /* ========================================================= ZABUDOWY LOFTOWE – prefiks ms-l- (szeroka scena z projektantem podziałów) ========================================================= */ .ms-l-hero:not(#ms-z){ position: relative; overflow: hidden; color: var(--ms-ink); background: #e7e2d9; background-image: radial-gradient(rgba(26,28,31,0.06) 1px, transparent 1px); background-size: 14px 14px; } .ms-l-hero__in:not(#ms-z){ position: relative; z-index: 1; flex-direction: column; gap: 36px; padding-top: 64px; padding-bottom: 80px; } .ms-l-hero__top:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; } .ms-l-hero__copy:not(#ms-z){ flex: 1 1 520px; min-width: 0; flex-direction: column; gap: 18px; } .ms-l-hero__side:not(#ms-z){ flex: 0 1 460px; min-width: 0; flex-direction: column; gap: 22px; } .ms-l-crumbs:not(#ms-z){ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .04em; color: var(--ms-text-muted); } .ms-l-crumbs:not(#ms-z) a{ color: var(--ms-ink); text-decoration: underline; text-decoration-color: var(--ms-orange); text-underline-offset: 3px; } .ms-l-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(44px, 6.4vw, 96px); line-height: .94; font-weight: 800; letter-spacing: -0.045em; color: var(--ms-ink); } .ms-l-hero__title:not(#ms-z) .elementor-heading-title span{ display: block; -webkit-text-stroke: 2px var(--ms-ink); color: transparent; } .ms-l-hero__lead:not(#ms-z){ font-size: 18px; line-height: 1.6; color: #3d4046; } .ms-l-hero:not(#ms-z) .ml-stage{ display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(26,28,31,0.16); } .ms-l-hero:not(#ms-z) .ml-svg{ display: block; width: 100%; height: auto; } .ms-l-hero:not(#ms-z) .ml-bar{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; padding: 18px 22px; background: var(--ms-ink); color: #f4f2ee; } .ms-l-hero:not(#ms-z) .ml-ctl{ display: flex; flex-direction: column; gap: 8px; } .ms-l-hero:not(#ms-z) .ml-lbl{ margin: 0; font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #a9adb3; } .ms-l-hero:not(#ms-z) .ml-lbl b{ color: #f4f2ee; text-transform: none; letter-spacing: 0; font-size: 13px; } .ms-l-hero:not(#ms-z) .ml-stepper{ display: flex; align-items: center; gap: 10px; } .ms-l-hero:not(#ms-z) .ml-step{ width: 34px; height: 34px; min-height: 0; padding: 0 !important; border: 1px solid #4a4e55 !important; border-radius: 6px !important; background: transparent !important; color: #f4f2ee !important; font-size: 18px; line-height: 1; cursor: pointer; } .ms-l-hero:not(#ms-z) .ml-step:hover{ border-color: var(--ms-orange) !important; color: var(--ms-orange) !important; } .ms-l-hero:not(#ms-z) .ml-val{ min-width: 18px; text-align: center; font-family: var(--ms-mono); font-size: 18px; color: var(--ms-orange); } .ms-l-hero:not(#ms-z) .ml-chips{ display: flex; flex-wrap: wrap; gap: 6px; } .ms-l-hero:not(#ms-z) .ml-door, .ms-l-hero:not(#ms-z) .ml-glass{ margin: 0; min-height: 0; padding: 7px 12px !important; border: 1px solid #4a4e55 !important; border-radius: 999px !important; background: transparent !important; color: #e3e4e6 !important; font-family: var(--ms-font); font-size: 13px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; } .ms-l-hero:not(#ms-z) .ml-door.is-on, .ms-l-hero:not(#ms-z) .ml-glass.is-on{ background: var(--ms-orange) !important; border-color: var(--ms-orange) !important; color: var(--ms-ink) !important; } .ms-l-hero:not(#ms-z) .ml-swatch{ display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ms-ink), 0 0 0 3px #4a4e55; cursor: pointer; } .ms-l-hero:not(#ms-z) .ml-swatch.is-on{ box-shadow: 0 0 0 2px var(--ms-ink), 0 0 0 4px var(--ms-orange); } .ms-l-hero:not(#ms-z) .ml-step:focus-visible, .ms-l-hero:not(#ms-z) .ml-door:focus-visible, .ms-l-hero:not(#ms-z) .ml-glass:focus-visible, .ms-l-hero:not(#ms-z) .ml-swatch:focus-visible{ outline: 2px solid var(--ms-orange); outline-offset: 2px; } .ms-l-hero:not(#ms-z) .ml-note{ margin: 0; padding: 10px 22px 14px; background: var(--ms-ink); border-top: 1px solid #2c2f34; font-size: 12px; color: #a9adb3; } .ms-l-hero:not(#ms-z) .ml-out{ font-family: var(--ms-mono); color: #f4f2ee; } .ms-l-intro:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-l-intro__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 80px; } .ms-l-intro__txt:not(#ms-z){ flex: 1 1 460px; min-width: 0; flex-direction: column; gap: 22px; } .ms-l-intro:not(#ms-z) .ms-n-prose strong{ color: var(--ms-ink); } .ms-l-facts:not(#ms-z){ flex: 1 1 400px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 2px solid var(--ms-ink); } .ms-l-fact:not(#ms-z){ flex-direction: column; gap: 6px; padding: 24px 22px; border-right: 1px solid var(--ms-ink); border-bottom: 1px solid var(--ms-ink); } .ms-l-fact:not(#ms-z):nth-child(2n){ border-right: 0; } .ms-l-fact:not(#ms-z):nth-child(n+3){ border-bottom: 0; } .ms-l-fact__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-rust); } .ms-l-fact__v:not(#ms-z) .elementor-heading-title{ font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ms-ink); } .ms-l-places:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-l-places__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-l-pgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ms-l-pcard:not(#ms-z){ flex-direction: column; gap: 10px; padding: 26px 24px 30px; background: #fff; border-left: 6px solid var(--ms-ink); } .ms-l-pcard__no:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 13px; color: var(--ms-rust); } .ms-l-pcard__title:not(#ms-z) .elementor-heading-title{ font-size: 20px; font-weight: 800; color: var(--ms-ink); } .ms-l-pcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-l-doors:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-l-doors__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-l-dgrid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-l-dcard:not(#ms-z){ flex-direction: column; gap: 12px; } .ms-l-dcard__fig:not(#ms-z) svg{ display: block; width: 100%; height: auto; border-radius: 6px; } .ms-l-dcard__title:not(#ms-z) .elementor-heading-title{ margin-top: 4px; font-size: 19px; font-weight: 800; color: var(--ms-ink); } .ms-l-dcard__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } .ms-l-glass:not(#ms-z){ background: #24211e; color: #f4f2ee; padding: 104px 0; } .ms-l-glass__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-l-ggrid:not(#ms-z){ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .ms-l-gcard:not(#ms-z){ flex-direction: column; gap: 10px; } .ms-l-gcard__fig:not(#ms-z) svg{ display: block; width: 100%; height: auto; border-radius: 4px; } .ms-l-gcard__title:not(#ms-z) .elementor-heading-title{ margin-top: 4px; font-size: 18px; font-weight: 800; color: #f4f2ee; } .ms-l-gcard__txt:not(#ms-z){ font-size: 14px; line-height: 1.55; color: rgba(244,242,238,0.75); } .ms-l-ral:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 28px; border-top: 1px solid rgba(244,242,238,0.15); } .ms-l-ral__k:not(#ms-z) .elementor-heading-title{ font-family: var(--ms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-orange); } .ms-l-ral__list:not(#ms-z) .elementor-widget-container{ display: flex; flex-wrap: wrap; gap: 10px; } .ms-l-ral:not(#ms-z) .ml-ral{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid rgba(244,242,238,0.2); border-radius: 999px; font-size: 14px; font-weight: 600; color: #f4f2ee; } .ms-l-ral:not(#ms-z) .ml-ral i{ display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); } .ms-l-ral:not(#ms-z) .ml-ral--more{ padding-left: 14px; border-style: dashed; color: rgba(244,242,238,0.8); } .ms-l-layouts:not(#ms-z){ background: #fff; padding: 104px 0; } .ms-l-layouts__in:not(#ms-z){ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px 72px; } .ms-l-layouts__txt:not(#ms-z){ flex: 1 1 380px; min-width: 0; flex-direction: column; gap: 22px; } .ms-l-lgrid:not(#ms-z){ flex: 1.4 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .ms-l-lcard:not(#ms-z){ flex-direction: column; gap: 10px; padding: 12px; background: #3a3f45; border-radius: 6px; } .ms-l-lcard__fig:not(#ms-z) svg{ display: block; width: 100%; height: auto; } .ms-l-lcard__title:not(#ms-z) .elementor-heading-title{ font-size: 13px; font-weight: 700; line-height: 1.3; color: #f4f2ee; text-align: center; } .ms-l-steps:not(#ms-z){ background: var(--ms-paper); padding: 104px 0; } .ms-l-steps__in:not(#ms-z){ flex-direction: column; gap: 48px; } .ms-l-track:not(#ms-z){ position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } .ms-l-track:not(#ms-z)::before{ content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--ms-ink) 0 10px, transparent 10px 18px); } .ms-l-step:not(#ms-z){ position: relative; flex-direction: column; gap: 10px; } .ms-l-step__no:not(#ms-z) .elementor-heading-title{ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ms-orange); font-family: var(--ms-mono); font-size: 18px; font-weight: 700; color: var(--ms-ink); } .ms-l-step__title:not(#ms-z) .elementor-heading-title{ margin-top: 8px; font-size: 19px; font-weight: 800; color: var(--ms-ink); } .ms-l-step__txt:not(#ms-z){ font-size: 15px; line-height: 1.6; color: #3d4046; } @media (max-width: 1024px) { .ms-l-dgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-l-ggrid:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-l-pgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-l-track:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-l-track:not(#ms-z)::before{ display: none; } .ms-l-lgrid:not(#ms-z){ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .ms-l-hero__in:not(#ms-z){ padding-top: 44px; padding-bottom: 56px; gap: 28px; } .ms-l-intro:not(#ms-z), .ms-l-places:not(#ms-z), .ms-l-doors:not(#ms-z), .ms-l-glass:not(#ms-z), .ms-l-layouts:not(#ms-z), .ms-l-steps:not(#ms-z){ padding: 72px 0; } .ms-l-pgrid:not(#ms-z), .ms-l-track:not(#ms-z){ grid-template-columns: 1fr; } .ms-l-ggrid:not(#ms-z), .ms-l-dgrid:not(#ms-z), .ms-l-facts:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-l-lgrid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-l-hero:not(#ms-z) .ml-bar{ padding: 16px; gap: 14px 20px; } .ms-l-hero:not(#ms-z) .ml-ctl--wide{ flex: 1 1 100%; } .ms-l-hero:not(#ms-z) .ml-note{ padding: 10px 16px 14px; } .ms-l-fact:not(#ms-z){ padding: 18px 16px; } .ms-l-fact__v:not(#ms-z) .elementor-heading-title{ font-size: 16px; } } /* LOFT – realizacje: 5 boxów w układzie z Luster (ms-n-door) */ .ms-l-real:not(#ms-z){ padding-top: 104px; } .ms-l-real__head:not(#ms-z){ padding-bottom: 32px; } @media (min-width: 901px) { .ms-l-real:not(#ms-z) .ms-n-door:nth-child(odd){ flex-direction: row-reverse; } .ms-l-real:not(#ms-z) .ms-n-door:nth-child(even){ flex-direction: row; } .ms-l-real:not(#ms-z) .ms-n-door:nth-child(odd) .ms-n-door__plan{ left: auto; right: -28px; transform: rotate(2deg); } .ms-l-real:not(#ms-z) .ms-n-door:nth-child(even) .ms-n-door__plan{ right: auto; left: -28px; transform: rotate(-2deg); } } @media (max-width: 767px) { .ms-l-real:not(#ms-z){ padding-top: 72px; } } /* === Galeria 5 zdjęć + rozwijanie kolejnych zdjęć na stronie (klasa ms-n-door__gal--more) === Widać 5 zdjęć: duże + 4 pionowe. Gdy w galerii jest więcej zdjęć, 5. kafelek pokazuje „+N zdjęć”, a kliknięcie rozwija resztę zdjęć pod spodem (skrypt w stopce). Zdjęcia nie są ucinane. */ .ms-n-door__gal--more:not(#ms-z) .gallery{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .ms-n-door__gal--more:not(#ms-z) .gallery-item{ aspect-ratio: 3 / 4 !important; grid-column: auto !important; } .ms-n-door__gal--more:not(#ms-z) .gallery-item:first-child{ grid-column: span 2 !important; grid-row: span 2 !important; aspect-ratio: auto !important; } .ms-n-door__gal--more:not(#ms-z) .gallery-item img{ object-fit: contain; } .ms-n-door__gal--more:not(#ms-z) .gallery:not(.is-expanded) .gallery-item:nth-child(n+6){ display: none !important; } .ms-n-door__gal--more:not(#ms-z) .gallery:not(.is-expanded) a[data-ms-more]::after{ content: attr(data-ms-more); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(26,28,31,.6); color: #fff; font-weight: 800; font-size: 20px; letter-spacing: .01em; text-align: center; transition: background .2s; } .ms-n-door__gal--more:not(#ms-z) .gallery:not(.is-expanded) a[data-ms-more]:hover::after{ background: rgba(247,147,30,.85); color: #1a1c1f; } .ms-n-door__gal--more:not(#ms-z) .ms-gal-less{ display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border: 1px solid #1a1c1f; border-radius: 3px; background: transparent; color: #1a1c1f; font: 600 14px/1.2 inherit; cursor: pointer; } .ms-n-door__gal--more:not(#ms-z) .ms-gal-less:hover{ background: #1a1c1f; color: #fff; } .ms-n-door__gal--more:not(#ms-z) .ms-gal-less[hidden]{ display: none; } @media (max-width: 767px){ .ms-n-door__gal--more:not(#ms-z) .gallery:not(.is-expanded) a[data-ms-more]::after{ font-size: 15px; } } /* galeria --more z 4 zdjęciami: ostatnie zdjęcie na szerokość dwóch kafelków (bez pustego miejsca) */ .ms-n-door__gal--more:not(#ms-z) .gallery-item:nth-child(4):last-child{ grid-column: span 2 !important; aspect-ratio: 3 / 2 !important; } /* galeria --more z 3 zdjęciami: dwa mniejsze jedno pod drugim, na szerokość dwóch kafelków */ .ms-n-door__gal--more:not(#ms-z) .gallery-item:nth-child(2):nth-last-child(2){ grid-column: span 2 !important; aspect-ratio: 3 / 2 !important; } .ms-n-door__gal--more:not(#ms-z) .gallery-item:nth-child(3):last-child{ grid-column: span 2 !important; aspect-ratio: 3 / 2 !important; } /* Realizacje loft – naprzemienne tło boxów (02, 04 … lekko ciemniejsze, pas na całą szerokość ekranu) */ .ms-l-real:not(#ms-z){ overflow-x: clip; } .ms-l-real:not(#ms-z) .ms-n-door{ z-index: 0; } .ms-l-real:not(#ms-z) .ms-n-door:nth-child(odd)::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #ebe7df; z-index: -1; pointer-events: none; } /* Naprzemienne tło boxów – klasa ms-alt-bg na sekcji (np. Drzwi szklane): co drugi box (02, 04, 06…) lekko ciemniejszy, pas na całą szerokość */ .ms-alt-bg:not(#ms-z){ overflow-x: clip; } .ms-alt-bg:not(#ms-z) .ms-n-door{ z-index: 0; } .ms-alt-bg:not(#ms-z) .ms-n-door:nth-child(even of .ms-n-door)::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #ebe7df; z-index: -1; pointer-events: none; } /* duże zdjęcie w galerii --more nie rozpycha wysokości (wysokie zdjęcia pionowe) */ .ms-n-door__gal--more:not(#ms-z) .gallery-item:first-child img{ position: absolute; inset: 0; } /* === Sekcja „zobacz też” ze zdjęciami (ms-x-cross) – zachęta do przejścia na sąsiedni dział (lofty ↔ drzwi szklane) === */ .ms-x-cross:not(#ms-z){ background: #f4f2ee; padding: 96px 0; border-top: 1px solid #d9d5ce; } .ms-x-cross__in:not(#ms-z){ display: flex; flex-direction: column; gap: 44px; } .ms-x-cross__head:not(#ms-z){ display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "eb eb" "title lead" "title btn"; column-gap: 64px; row-gap: 14px; align-items: start; } .ms-x-cross__head:not(#ms-z) > .ms-n-eyebrow{ grid-area: eb; } .ms-x-cross__title:not(#ms-z){ grid-area: title; } .ms-x-cross__lead:not(#ms-z){ grid-area: lead; align-self: end; } .ms-x-cross__btn:not(#ms-z){ grid-area: btn; justify-self: start; } .ms-x-cross__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; margin: 0; } .ms-x-cross__lead:not(#ms-z) p{ margin: 0; color: #5a5e63; font-size: 16px; line-height: 1.65; } .ms-x-cross__btn:not(#ms-z){ margin-top: 8px; } .ms-x-cross__grid:not(#ms-z){ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ms-x-cross__card:not(#ms-z){ display: flex; flex-direction: column; gap: 0; color: #1a1c1f; text-decoration: none; position: relative; } .ms-x-cross__img:not(#ms-z){ margin: 0 0 12px; } .ms-x-cross__img:not(#ms-z) img{ display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: contain; background: #e8e4dd; border-radius: 4px; transition: transform .5s, box-shadow .3s; } .ms-x-cross__card:not(#ms-z):hover .ms-x-cross__img img{ transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(26,28,31,.45); } .ms-x-cross__k:not(#ms-z) .elementor-heading-title{ font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; color: #f7931e; margin: 0 0 2px; } .ms-x-cross__t:not(#ms-z) .elementor-heading-title{ font-size: 16px; font-weight: 700; line-height: 1.3; color: #1a1c1f; margin: 0; } .ms-x-cross__t:not(#ms-z) .elementor-heading-title::after{ content: " →"; color: #f7931e; display: inline-block; transition: transform .2s; } .ms-x-cross__card:not(#ms-z):hover .ms-x-cross__t .elementor-heading-title::after{ transform: translateX(4px); } @media (max-width: 900px){ .ms-x-cross__head:not(#ms-z){ grid-template-columns: 1fr; grid-template-areas: "eb" "title" "lead" "btn"; } .ms-x-cross__in:not(#ms-z){ gap: 32px; } } @media (max-width: 767px){ .ms-x-cross:not(#ms-z){ padding: 64px 0; } .ms-x-cross__grid:not(#ms-z){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ms-x-cross__t:not(#ms-z) .elementor-heading-title{ font-size: 14px; } } /* === Tablice – galeria (ms-t-gal): tekst po lewej, galeria 5 zdjęć + rozwijanie po prawej === */ .ms-t-gal:not(#ms-z){ background: #f4f2ee; padding: 104px 0; } .ms-t-gal__in:not(#ms-z){ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 64px; align-items: center; } .ms-t-gal__head:not(#ms-z){ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .ms-t-gal__title:not(#ms-z) .elementor-heading-title{ margin: 0; } .ms-t-gal__lead:not(#ms-z) p{ margin: 0 0 12px; color: #5a5e63; font-size: 16px; line-height: 1.65; } .ms-t-gal__lead:not(#ms-z) p:last-child{ font-size: 13px; color: #7a7e83; margin-bottom: 4px; } @media (max-width: 900px){ .ms-t-gal:not(#ms-z){ padding: 64px 0; } .ms-t-gal__in:not(#ms-z){ grid-template-columns: 1fr; gap: 32px; } } /* === KONTAKT – nagłówek (ms-k-hero), kreator (ms-wz), „Napisz do nas” (ms-k-msg), pola formularzy (ms-form) === */ .ms-k-hero:not(#ms-z){ background: #1a1c1f; color: #f4f2ee; padding: 120px 0 72px; position: relative; overflow: hidden; } .ms-k-hero:not(#ms-z)::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px); pointer-events:none; } .ms-k-hero__in:not(#ms-z){ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; } .ms-k-hero__copy:not(#ms-z){ display: flex; flex-direction: column; gap: 14px; } .ms-k-crumbs:not(#ms-z) p, .ms-k-crumbs:not(#ms-z) a{ color: #9a9ea3; font-size: 13px; margin: 0; } .ms-k-hero__title:not(#ms-z) .elementor-heading-title{ font-size: clamp(42px, 6vw, 76px); font-weight: 800; line-height: 1; color: #f4f2ee; margin: 0; letter-spacing: -.02em; } .ms-k-hero__title:not(#ms-z) .elementor-heading-title span{ color: #f7931e; } .ms-k-hero__lead:not(#ms-z) p{ color: #c9c6c0; font-size: 17px; line-height: 1.6; margin: 0; max-width: 520px; } .ms-k-cards:not(#ms-z){ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .ms-k-card:not(#ms-z){ border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 16px 18px; background: rgba(255,255,255,.03); gap: 4px; } .ms-k-card__k:not(#ms-z) .elementor-heading-title{ font: 600 11px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #f7931e; margin: 0; } .ms-k-card__v:not(#ms-z) .elementor-heading-title, .ms-k-card__v:not(#ms-z) .elementor-heading-title a{ font-size: 17px; font-weight: 700; color: #f4f2ee; margin: 0; word-break: break-word; } .ms-k-card__v:not(#ms-z) .elementor-heading-title a:hover{ color: #f7931e; } .ms-wz:not(#ms-z){ background: #f4f2ee; padding: 88px 0 104px; scroll-margin-top: 80px; } .ms-wz__in:not(#ms-z){ max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .ms-wz__head:not(#ms-z){ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .ms-wz__lead:not(#ms-z) p{ margin: 0; color: #5a5e63; font-size: 16px; } .ms-k-msg:not(#ms-z){ background: #fff; padding: 96px 0; border-top: 1px solid #e8e4dd; scroll-margin-top: 80px; } .ms-k-msg__in:not(#ms-z){ display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } .ms-k-msg__head:not(#ms-z){ display: flex; flex-direction: column; gap: 14px; } .ms-k-msg__lead:not(#ms-z) p{ color: #5a5e63; font-size: 16px; line-height: 1.65; margin: 0 0 10px; } .ms-k-msg__lead:not(#ms-z) a{ color: #1a1c1f; font-weight: 700; } .ms-form:not(#ms-z) .elementor-form-fields-wrapper{ margin-left: -8px; margin-right: -8px; } .ms-form:not(#ms-z) .elementor-field-group{ padding-left: 8px; padding-right: 8px; margin-bottom: 18px; } .ms-form:not(#ms-z) .elementor-field-label{ font-weight: 700; font-size: 15px; color: #1a1c1f; margin-bottom: 8px; } .ms-form:not(#ms-z) .elementor-field-textual{ border: 1px solid #d9d5ce; border-radius: 4px; background: #fff; padding: 12px 14px; font-size: 15px; color: #1a1c1f; min-height: 48px; box-shadow: none; } .ms-form:not(#ms-z) .elementor-field-textual:focus{ border-color: #f7931e; outline: none; box-shadow: 0 0 0 3px rgba(247,147,30,.15); } .ms-form:not(#ms-z) .elementor-field-type-upload input[type=file]{ width: 100%; border: 1px dashed #c9c3b9; border-radius: 4px; background: #faf8f5; padding: 16px; font-size: 14px; color: #5a5e63; } .ms-form:not(#ms-z) .elementor-field-type-acceptance .elementor-field-subgroup label{ font-size: 13px; line-height: 1.5; color: #5a5e63; font-weight: 400; } .ms-form:not(#ms-z) .elementor-field-type-acceptance input{ accent-color: #f7931e; margin-right: 8px; } .ms-form:not(#ms-z) .elementor-mark-required .elementor-field-label::after{ color: #f7931e; } .ms-form:not(#ms-z) .elementor-button{ background: #f7931e; color: #1a1c1f; font-weight: 700; font-size: 15px; border-radius: 4px; padding: 16px 28px; min-height: 52px; box-shadow: 0 10px 22px -12px rgba(247,147,30,.9); transition: background .2s; } .ms-form:not(#ms-z) .elementor-button:hover{ background: #ffa53a; color: #1a1c1f; } .ms-form:not(#ms-z) .elementor-message{ font-size: 15px; margin-top: 14px; } .ms-form:not(#ms-z) .elementor-message-success{ color: #2e7d32; } .ms-form:not(#ms-z) .elementor-message-danger, .ms-form:not(#ms-z) .elementor-error{ color: #c0392b; } @media (max-width: 900px){ .ms-k-hero:not(#ms-z){ padding: 96px 0 48px; } .ms-k-hero__in:not(#ms-z), .ms-k-msg__in:not(#ms-z){ grid-template-columns: 1fr; gap: 32px; } .ms-wz:not(#ms-z){ padding: 56px 0 72px; } .ms-k-msg:not(#ms-z){ padding: 64px 0; } } @media (max-width: 480px){ .ms-k-cards:not(#ms-z){ grid-template-columns: 1fr; } }/* End custom CSS */