/* tb-build foundation-cement-bags-calculator b49fc55d5e8b */ /* cement-bags — ToolBoss deployment build. Source of truth: delivery/apps/cement-bags/app.css (cycle 2, accepted). */ /* Fonts: same-origin WOFF2 uploaded through the WP Font Library (/wp-content/uploads/fonts). */ @font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/fonts/unbounded-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/fonts/unbounded-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/wp-content/uploads/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/wp-content/uploads/fonts/ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} #js-tool-container-foundation-cement-bags-calculator .cb { --cb-bg: #e9e9e6; --cb-panel: #f4f4f1; --cb-ink: #17191c; --cb-mute: #676c74; --cb-line: #cfd2d6; --cb-board: #1b1d21; --cb-board-2: #24272c; --cb-board-ink: #f2f2ef; --cb-board-mute: #9aa0a8; --cb-signal: #ff6a1f; --cb-signal-ink: #1a0c04; --cb-bag: #3b4048; --cb-bad: #c2331f; --cb-display: 'Unbounded', 'Manrope', system-ui, sans-serif; --cb-text: 'IBM Plex Sans', system-ui, sans-serif; color: var(--cb-ink); font-family: var(--cb-text); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "panel board" "method method"; gap: 18px 22px; align-items: start; min-width: 0; } html[data-theme="dark"] #js-tool-container-foundation-cement-bags-calculator .cb { --cb-bg: #131416; --cb-panel: #1c1e22; --cb-ink: #eceeef; --cb-mute: #9aa0a8; --cb-line: #33373d; --cb-board: #0d0e10; --cb-board-2: #17191d; --cb-board-ink: #f4f4f1; --cb-board-mute: #8a9098; --cb-signal: #ff7a33; --cb-bag: #2f343b; --cb-bad: #ff8a73; } #js-tool-container-foundation-cement-bags-calculator .cb [hidden] { display: none !important; } #js-tool-container-foundation-cement-bags-calculator .cb > * { min-width: 0; } #js-tool-container-foundation-cement-bags-calculator .cb-panel { grid-area: panel; display: grid; gap: 0; background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 6px; } #js-tool-container-foundation-cement-bags-calculator .cb-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); border-bottom: 1px solid var(--cb-line); } #js-tool-container-foundation-cement-bags-calculator .cb-step:last-child { border-bottom: 0; } #js-tool-container-foundation-cement-bags-calculator .cb-step__n { margin: 0; padding: 22px 0 0 18px; font: 400 .95rem/1 var(--cb-display); color: var(--cb-mute); letter-spacing: .02em; } #js-tool-container-foundation-cement-bags-calculator .cb-step__body { padding: 20px 22px 22px 0; display: grid; gap: 14px; min-width: 0; } #js-tool-container-foundation-cement-bags-calculator .cb-step__t { margin: 0; font: 600 .78rem/1 var(--cb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cb-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #js-tool-container-foundation-cement-bags-calculator .cb-types button { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 92px; padding: 12px 6px; border-radius: 6px; border: 1px solid var(--cb-line); background: var(--cb-bg); color: var(--cb-ink); font: 600 .84rem/1 var(--cb-text); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } #js-tool-container-foundation-cement-bags-calculator .cb-types button svg { width: 56px; height: 34px; fill: currentColor; } #js-tool-container-foundation-cement-bags-calculator .cb-types button:hover { transform: translateY(-1px); border-color: var(--cb-ink); } #js-tool-container-foundation-cement-bags-calculator .cb-types button[aria-pressed="true"] { background: var(--cb-ink); color: var(--cb-panel); border-color: var(--cb-ink); } html[data-theme="dark"] #js-tool-container-foundation-cement-bags-calculator .cb-types button[aria-pressed="true"] { background: var(--cb-signal); color: var(--cb-signal-ink); border-color: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-geom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #js-tool-container-foundation-cement-bags-calculator .cb-field { display: grid; gap: 6px; min-width: 0; } #js-tool-container-foundation-cement-bags-calculator .cb-field > span:first-child { font-size: .82rem; color: var(--cb-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-field__v { display: flex; align-items: baseline; gap: 6px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: 6px; background: var(--cb-bg); transition: border-color .15s; min-width: 0; } #js-tool-container-foundation-cement-bags-calculator .cb-field__v:focus-within { border-color: var(--cb-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-signal) 25%, transparent); } #js-tool-container-foundation-cement-bags-calculator .cb-field__v input { width: 100% !important; min-width: 0 !important; min-height: 50px !important; border: 0 !important; background: transparent !important; color: var(--cb-ink) !important; font: 500 1.5rem/1 var(--cb-display) !important; letter-spacing: -.02em !important } #js-tool-container-foundation-cement-bags-calculator .cb-field__v input::placeholder { color: color-mix(in srgb, var(--cb-mute) 45%, transparent) !important } #js-tool-container-foundation-cement-bags-calculator .cb-field__v input:focus { outline: none !important } #js-tool-container-foundation-cement-bags-calculator .cb-field__v em { font-style: normal; color: var(--cb-mute); font-size: .9rem; white-space: nowrap; } #js-tool-container-foundation-cement-bags-calculator .cb-field--bad .cb-field__v { border-color: var(--cb-bad); } #js-tool-container-foundation-cement-bags-calculator .cb-field--bad .cb-field__v input { color: var(--cb-bad) !important } #js-tool-container-foundation-cement-bags-calculator .cb-help { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--cb-mute); line-height: 1.4; } #js-tool-container-foundation-cement-bags-calculator .cb-error { margin: 0; padding: 10px 12px; border-left: 3px solid var(--cb-bad); background: color-mix(in srgb, var(--cb-bad) 8%, transparent); color: var(--cb-bad); font-size: .9rem; font-weight: 500; } #js-tool-container-foundation-cement-bags-calculator .cb-choice { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; } #js-tool-container-foundation-cement-bags-calculator .cb-choice__k { font-size: .84rem; color: var(--cb-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-seg { display: flex; gap: 4px; padding: 3px; border-radius: 6px; background: var(--cb-bg); border: 1px solid var(--cb-line); } #js-tool-container-foundation-cement-bags-calculator .cb-seg button { flex: 1 1 0; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--cb-ink); font: 600 .86rem/1 var(--cb-text); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; } #js-tool-container-foundation-cement-bags-calculator .cb-seg button:hover { background: color-mix(in srgb, var(--cb-ink) 8%, transparent); } #js-tool-container-foundation-cement-bags-calculator .cb-seg button[aria-pressed="true"] { background: var(--cb-ink); color: var(--cb-panel); } html[data-theme="dark"] #js-tool-container-foundation-cement-bags-calculator .cb-seg button[aria-pressed="true"] { background: var(--cb-signal); color: var(--cb-signal-ink); } #js-tool-container-foundation-cement-bags-calculator .cb-place-bad { margin: 0; font-size: .85rem; color: var(--cb-bad); font-weight: 500; } #js-tool-container-foundation-cement-bags-calculator .cb-board { grid-area: board; position: relative; isolation: isolate; overflow: hidden; align-self: stretch; padding: 28px 30px 26px; border-radius: 6px; background: linear-gradient(160deg, var(--cb-board-2), var(--cb-board) 60%); color: var(--cb-board-ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); display: grid; align-content: start; } #js-tool-container-foundation-cement-bags-calculator .cb-board__grain { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; } #js-tool-container-foundation-cement-bags-calculator .cb-board::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-empty { display: grid; gap: 6px; align-content: start; min-height: 320px; } #js-tool-container-foundation-cement-bags-calculator .cb-empty__t { margin: 0; font: 600 .78rem/1 var(--cb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cb-board-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-empty__n { margin: 0; font: 700 clamp(5rem, 12vw, 9rem)/1 var(--cb-display); letter-spacing: -.04em; color: color-mix(in srgb, var(--cb-board-ink) 10%, transparent); } #js-tool-container-foundation-cement-bags-calculator .cb-empty__d { margin: 0; max-width: 28ch; font-size: 1.05rem; color: var(--cb-board-mute); line-height: 1.4; } #js-tool-container-foundation-cement-bags-calculator .cb-result { display: grid !important; gap: 18px !important } #js-tool-container-foundation-cement-bags-calculator .cb-big { margin: 0; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } #js-tool-container-foundation-cement-bags-calculator .cb-big__n { font: 700 clamp(5rem, 10vw, 8.5rem)/.9 var(--cb-display); letter-spacing: -.05em; color: var(--cb-signal); font-variant-numeric: tabular-nums; } #js-tool-container-foundation-cement-bags-calculator .cb-big__u { display: grid; gap: 4px; padding-bottom: 10px; } #js-tool-container-foundation-cement-bags-calculator .cb-big__u b { font: 600 1.35rem/1 var(--cb-display); letter-spacing: -.01em; } #js-tool-container-foundation-cement-bags-calculator .cb-big__u i { font-style: normal; color: var(--cb-board-mute); font-size: .95rem; } #js-tool-container-foundation-cement-bags-calculator .cb-tons { margin: -6px 0 0; color: var(--cb-board-mute); font-size: 1rem; } #js-tool-container-foundation-cement-bags-calculator .cb-tons b { color: var(--cb-board-ink); font-weight: 600; } #js-tool-container-foundation-cement-bags-calculator .cb-pallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 4px; max-height: 96px; overflow: hidden; padding: 12px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); } #js-tool-container-foundation-cement-bags-calculator .cb-bag { display: block; aspect-ratio: 22 / 13; border-radius: 3px; background: var(--cb-bag); position: relative; } #js-tool-container-foundation-cement-bags-calculator .cb-bag::after { content: ""; position: absolute; inset: 3px 5px auto; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); } #js-tool-container-foundation-cement-bags-calculator .cb-bag--ten { background: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-bag--extra { background: transparent; border: 1px dashed rgba(255, 255, 255, .28); } #js-tool-container-foundation-cement-bags-calculator .cb-pallet__more { margin: -10px 0 0; font-size: .82rem; color: var(--cb-board-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-chain { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: c; } #js-tool-container-foundation-cement-bags-calculator .cb-chain li { counter-increment: c; display: grid; grid-template-columns: 28px 120px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .09); } #js-tool-container-foundation-cement-bags-calculator .cb-chain li::before { content: counter(c, decimal-leading-zero); font: 400 .8rem/1 var(--cb-display); color: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-chain__v { font: 600 1.35rem/1 var(--cb-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } #js-tool-container-foundation-cement-bags-calculator .cb-chain__k { color: var(--cb-board-mute); font-size: .9rem; line-height: 1.4; } #js-tool-container-foundation-cement-bags-calculator .cb-chain__k i { font-style: normal; color: var(--cb-board-ink); } #js-tool-container-foundation-cement-bags-calculator .cb-chain__k small { display: block; font-size: .8rem; opacity: .85; } #js-tool-container-foundation-cement-bags-calculator .cb-ladder-wrap { display: grid; gap: 8px; padding-top: 6px; } #js-tool-container-foundation-cement-bags-calculator .cb-ladder__t { margin: 0; font: 600 .78rem/1 var(--cb-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cb-board-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-ladder { display: grid; gap: 4px; } #js-tool-container-foundation-cement-bags-calculator .cb-rung { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); color: var(--cb-board-ink); text-align: left; cursor: pointer; font: inherit; transition: background .12s, border-color .12s; } #js-tool-container-foundation-cement-bags-calculator .cb-rung:hover { background: rgba(255, 255, 255, .07); } #js-tool-container-foundation-cement-bags-calculator .cb-rung--cur { border-color: var(--cb-signal); background: color-mix(in srgb, var(--cb-signal) 14%, transparent); } #js-tool-container-foundation-cement-bags-calculator .cb-rung__g { font: 600 .95rem/1.2 var(--cb-display); } #js-tool-container-foundation-cement-bags-calculator .cb-rung__g small { display: block; font: 400 .78rem/1.3 var(--cb-text); color: var(--cb-board-mute); margin-top: 2px; } #js-tool-container-foundation-cement-bags-calculator .cb-rung__bar { width: 110px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; } #js-tool-container-foundation-cement-bags-calculator .cb-rung__bar i { display: block; height: 100%; background: var(--cb-board-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-rung--cur .cb-rung__bar i { background: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-rung__n { font: 600 1.25rem/1 var(--cb-display); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; } #js-tool-container-foundation-cement-bags-calculator .cb-rung__n small { display: block; font: 400 .78rem/1.3 var(--cb-text); color: var(--cb-board-mute); } #js-tool-container-foundation-cement-bags-calculator .cb-rung--cur .cb-rung__n small { color: var(--cb-signal); } #js-tool-container-foundation-cement-bags-calculator .cb-method { grid-area: method; margin: 0; max-width: 980px; font-size: .86rem; line-height: 1.5; color: var(--cb-mute); } @media (max-width: 1000px) { #js-tool-container-foundation-cement-bags-calculator .cb { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "panel" "board" "method"; } #js-tool-container-foundation-cement-bags-calculator .cb-board { align-self: auto; } #js-tool-container-foundation-cement-bags-calculator .cb-rung__bar { display: none; } } @media (max-width: 600px) { #js-tool-container-foundation-cement-bags-calculator .cb { gap: 12px; } #js-tool-container-foundation-cement-bags-calculator .cb-panel { display: contents; } #js-tool-container-foundation-cement-bags-calculator .cb-step { grid-template-columns: 44px minmax(0, 1fr); background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 6px; } #js-tool-container-foundation-cement-bags-calculator .cb-step__n { padding: 16px 0 0 12px; font-size: .8rem; } #js-tool-container-foundation-cement-bags-calculator .cb-step__body { padding: 14px 14px 16px 0; gap: 12px; } #js-tool-container-foundation-cement-bags-calculator .cb { grid-template-areas: none; grid-template-columns: 1fr; } #js-tool-container-foundation-cement-bags-calculator .cb-board, #js-tool-container-foundation-cement-bags-calculator .cb-method { grid-area: auto; } #js-tool-container-foundation-cement-bags-calculator .cb-step:nth-child(1) { order: 1; } #js-tool-container-foundation-cement-bags-calculator .cb-step:nth-child(2) { order: 2; } #js-tool-container-foundation-cement-bags-calculator .cb-board { order: 3; padding: 20px 18px 20px; } #js-tool-container-foundation-cement-bags-calculator .cb-step:nth-child(3) { order: 4; } #js-tool-container-foundation-cement-bags-calculator .cb-method { order: 5; } #js-tool-container-foundation-cement-bags-calculator .cb-types { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #js-tool-container-foundation-cement-bags-calculator .cb-types button { min-height: 76px; font-size: .78rem; padding: 8px 2px; } #js-tool-container-foundation-cement-bags-calculator .cb-types button svg { width: 40px; height: 26px; } #js-tool-container-foundation-cement-bags-calculator .cb-geom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #js-tool-container-foundation-cement-bags-calculator .cb-field__v { padding: 0 8px; } #js-tool-container-foundation-cement-bags-calculator .cb-field__v input { font-size: 1.15rem !important; min-height: 46px !important } #js-tool-container-foundation-cement-bags-calculator .cb-choice { grid-template-columns: 1fr; gap: 6px; } #js-tool-container-foundation-cement-bags-calculator .cb-seg button { padding: 6px 4px; font-size: .8rem; } #js-tool-container-foundation-cement-bags-calculator .cb-big__n { font-size: 4.6rem; } #js-tool-container-foundation-cement-bags-calculator .cb-chain li { grid-template-columns: 24px minmax(0, 1fr); } #js-tool-container-foundation-cement-bags-calculator .cb-chain__k { grid-column: 2; } #js-tool-container-foundation-cement-bags-calculator .cb-rung { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } #js-tool-container-foundation-cement-bags-calculator .cb-rung__bar { display: none; } #js-tool-container-foundation-cement-bags-calculator .cb-empty { min-height: 0; } } /* ===== ToolBoss host integration (id-scoped) ===== */ /* 1. Wrapper neutralised: our block is the tool itself, no theme card around it. Focus mode («На весь экран») keeps its own padding. */ #js-tool-container-foundation-cement-bags-calculator:not(.tb-focus-mode) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; contain: layout style !important; } #js-tool-container-foundation-cement-bags-calculator > .js-premium-app-html-content { display: contents; padding: 0 !important; background: transparent !important; } /* 1b. Focus mode: core.min.css forces `background:0 0!important` on `:has(.tb-zone)` wrappers (wins in dark), so the page would show through the fixed overlay — paint it with the page background. */ #js-tool-container-foundation-cement-bags-calculator.tb-focus-mode { background: var(--bg0, #f4f5f7) !important; } html[data-theme="dark"] #js-tool-container-foundation-cement-bags-calculator.tb-focus-mode { background: var(--bg0, #0b0c10) !important; } /* 2. .tb-zone on the app root switches the wrapper into zone layout (action links become the rounded end); the zone card itself is zeroed. */ #js-tool-container-foundation-cement-bags-calculator .tb-zone.cb { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; font-size: 1rem; line-height: 1.55; } /* 3. Theme control resets (tools-engine / semantic-dark force these with !important). Kept at (1,0,x) specificity so app rules win. */ #js-tool-container-foundation-cement-bags-calculator input:where(:not([type="range"], [type="checkbox"], [type="radio"])), #js-tool-container-foundation-cement-bags-calculator :where(select, textarea) { height: auto !important; border-radius: 0 !important; padding: 1px 2px !important; font-weight: inherit !important; } #js-tool-container-foundation-cement-bags-calculator :where(select) { border-radius: 8px !important; } #js-tool-container-foundation-cement-bags-calculator :where(input, select, textarea):focus { background-color: transparent !important; box-shadow: none !important; } #js-tool-container-foundation-cement-bags-calculator :where(label) { color: inherit !important; } #js-tool-container-foundation-cement-bags-calculator :where(table, thead, tbody, tr, th, td) { color: inherit; background: transparent; } #js-tool-container-foundation-cement-bags-calculator :where([class*="val"], [class*="result"], [id*="res"]) { line-height: inherit !important; max-width: none !important; overflow-wrap: normal !important; word-break: normal !important; font-variant-numeric: inherit !important; }