:root {
--ink: #1f2937;
--muted: #6b7280;
--line: #e5e7eb;
--bg: #ffffff;
--bg-soft: #f8f9fb;
--accent: #e8590c;
--accent-dark: #c94e0b;
--accent-soft: #fff3e8;
--max: 1080px;
--content: 760px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.05rem;
line-height: 1.7;
color: var(--ink);
background: var(--bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); }
h1 { font-size: 2rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.screen-reader-text {
clip-path: inset(50%);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
border: 0;
margin: -1px;
padding: 0;
word-wrap: normal !important;
}
.screen-reader-text:focus {
clip-path: none;
position: absolute !important;
display: block;
top: 6px;
left: 6px;
z-index: 100000;
width: auto;
height: auto;
padding: .75rem 1.25rem;
background: #fff;
color: var(--ink);
font-size: 1rem;
font-weight: 600;
line-height: normal;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(15, 23, 42, .25);
outline: 2px solid var(--accent);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
max-width: var(--max);
margin: 0 auto;
padding: .65rem 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
}
.site-logo {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 800;
font-size: 1.15rem;
text-decoration: none;
color: var(--ink) !important;
white-space: nowrap;
}
.site-logo svg { flex: 0 0 auto; }
.site-logo span em { color: var(--accent); font-style: normal; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
display: block;
padding: .45rem .8rem;
text-decoration: none;
color: var(--ink);
font-weight: 600;
font-size: .93rem;
border-radius: 8px;
}
.site-nav a:hover { background: var(--bg-soft); color: var(--accent-dark); }
.region-toggle {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
flex: 0 0 auto;
}
.region-toggle button {
font: inherit;
font-size: .78rem;
font-weight: 700;
padding: .3rem .65rem;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
.region-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.nav-toggle {
display: none;
margin-left: auto;
background: none;
border: 1px solid var(--line);
border-radius: 8px;
padding: .4rem .6rem;
font-size: 1.1rem;
cursor: pointer;
}
@media (max-width: 860px) {
.site-header__inner { flex-wrap: wrap; gap: .5rem .75rem; padding: .55rem .9rem; }
.site-logo { font-size: 1.05rem; }
.region-toggle button { font-size: .72rem; padding: .28rem .5rem; }
.nav-toggle { display: block; }
.site-nav {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
background: #fff;
border-bottom: 1px solid var(--line);
padding: .75rem 1.25rem 1rem;
margin-left: 0;
}
.site-nav.is-open { display: block; }
.site-nav ul { flex-direction: column; }
.region-toggle { margin-left: auto; }
}
.site-main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.entry-content, .page-intro { max-width: var(--content); }
.entry-content > .cc-calc { max-width: none; }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin: 0 0 .25rem; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-dark); }
.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
margin: 1rem 0 1.5rem;
display: block;
overflow-x: auto;
}
.entry-content th, .entry-content td { text-align: left; padding: .55rem .7rem; border: 1px solid var(--line); }
.entry-content thead th { background: var(--bg-soft); }
.entry-content code {
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 6px;
padding: .1rem .4rem;
font-size: .92em;
}
blockquote {
margin: 1.25rem 0;
padding: .75rem 1.25rem;
border-left: 4px solid var(--accent);
background: var(--accent-soft);
border-radius: 0 10px 10px 0;
}
details.cc-faq {
border: 1px solid var(--line);
border-radius: 10px;
padding: 0;
margin: 0 0 .6rem;
background: #fff;
}
details.cc-faq summary {
cursor: pointer;
font-weight: 700;
padding: .8rem 1rem;
list-style: none;
position: relative;
padding-right: 2.4rem;
}
details.cc-faq summary::-webkit-details-marker { display: none; }
details.cc-faq summary::after {
content: "+";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: var(--accent);
font-weight: 800;
}
details.cc-faq[open] summary::after { content: "–"; }
details.cc-faq > :not(summary) { padding: 0 1rem; }
details.cc-faq > p:last-child { padding-bottom: .9rem; }
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: .9rem;
margin: 1rem 0 2rem;
padding: 0;
list-style: none;
}
.tool-grid a {
display: block;
padding: .95rem 1.1rem;
border: 1px solid var(--line);
border-radius: 12px;
text-decoration: none;
color: var(--ink);
font-weight: 600;
font-size: .95rem;
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.tool-grid a:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(232, 89, 12, .12);
color: var(--accent-dark);
}
.tool-grid a small { display: block; font-weight: 400; color: var(--muted); margin-top: .2rem; font-size: .82rem; }
.post-list { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; max-width: var(--content); }
.post-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 1.1rem 1.25rem;
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(232, 89, 12, .1); }
.post-card__title { margin: 0 0 .3rem; font-size: 1.2rem; }
.post-card__title a { text-decoration: none; color: var(--ink); }
.post-card__title a:hover { color: var(--accent-dark); }
.post-card__meta { margin: 0 0 .5rem; font-size: .82rem; color: var(--muted); display: flex; gap: .45rem; flex-wrap: wrap; }
.post-card__excerpt { margin: 0 0 .6rem; font-size: .96rem; }
.post-card__more { font-weight: 600; font-size: .92rem; text-decoration: none; }
.post-meta {
font-size: .85rem;
color: var(--muted);
display: flex;
gap: .45rem;
flex-wrap: wrap;
margin: 0 0 1.5rem;
padding-bottom: .9rem;
border-bottom: 1px solid var(--line);
}
.post-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: .9rem;
margin: 2rem 0;
max-width: var(--content);
}
.post-nav__link {
display: block;
border: 1px solid var(--line);
border-radius: 12px;
padding: .85rem 1.1rem;
text-decoration: none;
color: var(--ink);
font-weight: 600;
font-size: .95rem;
}
.post-nav__link:hover { border-color: var(--accent); color: var(--accent-dark); }
.post-nav__link small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; margin-bottom: .15rem; }
.pagination { margin: 2rem 0; }
.pagination .page-numbers {
display: inline-block;
padding: .4rem .75rem;
border: 1px solid var(--line);
border-radius: 8px;
margin-right: .3rem;
text-decoration: none;
font-size: .9rem;
color: var(--ink);
}
.pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.snippet-box {
background: var(--accent-soft);
border: 1px solid #f5d9c3;
border-radius: 12px;
padding: 1rem 1.25rem;
margin: 1rem 0 1.5rem;
font-size: 1.02rem;
}
.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-soft);
margin-top: 2rem;
}
.site-footer__inner {
max-width: var(--max);
margin: 0 auto;
padding: 2rem 1.25rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
font-size: .9rem;
}
.site-footer h4 { margin: 0 0 .6rem; font-size: .95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-dark); }
.site-footer__bottom {
border-top: 1px solid var(--line);
padding: 1rem 1.25rem;
text-align: center;
font-size: .82rem;
color: var(--muted);
}
@media (max-width: 560px) {
h1 { font-size: 1.55rem; }
h2 { font-size: 1.3rem; }
body { font-size: 1rem; }
}
.cc-calc {
--cc-accent: #e8590c;
--cc-accent-dark: #c94e0b;
--cc-ink: #1f2937;
--cc-muted: #6b7280;
--cc-line: #e5e7eb;
--cc-bg: #ffffff;
--cc-bg-soft: #f8f9fb;
background: var(--cc-bg);
border: 1px solid var(--cc-line);
border-radius: 14px;
box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
padding: 1.5rem;
margin: 1.5rem 0 2rem;
color: var(--cc-ink);
}
.cc-calc__layout {
display: flex;
gap: 1.75rem;
align-items: flex-start;
}
.cc-calc__form { flex: 1 1 auto; min-width: 0; }
.cc-calc__figure {
flex: 0 0 310px;
margin: 0;
position: sticky;
top: 4.5rem;
}
.cc-calc__figure.is-empty { display: none; }
.cc-calc__figure:not(:has(.cc-calc__figpanel:not([hidden]))) { display: none; }
.cc-calc__figpanel[hidden] { display: none; }
.cc-calc__figpanel svg { width: 100%; height: auto; display: block; }
.cc-calc__figpanel figcaption {
text-align: center;
font-size: .78rem;
color: var(--cc-muted);
margin-top: .3rem;
}
.cc-fig-face { stroke: #8f97a4; stroke-width: 1.4; stroke-linejoin: round; }
.cc-fig-outline { fill: none; stroke: #8f97a4; stroke-width: 1.4; }
.cc-fig-blockface { stroke: #9aa1ad; stroke-width: .8; }
.cc-fig-woodface { stroke: #a87844; stroke-width: 1; }
.cc-fig-shadow { fill: #0f172a; opacity: .08; }
.cc-fig-ground { stroke: #7ca35b; stroke-width: 3.5; stroke-linecap: round; }
.cc-fig-road { stroke: #cbd0d8; stroke-width: 3; stroke-linecap: round; }
.cc-fig-rebar { stroke: #7c8592; stroke-width: 2.5; stroke-dasharray: 5 4; opacity: .55; stroke-linecap: round; }
.cc-fig-seam { fill: none; stroke: #9aa1ad; stroke-width: 1; opacity: .7; }
.cc-fig-grain { stroke: #a87844; stroke-width: 1; opacity: .6; }
.cc-fig-paver { fill: #d9c2b8; stroke: #b99a8d; stroke-width: 1; }
.cc-fig-paverline { stroke: #b99a8d; stroke-width: 1; }
.cc-fig-asphalt { fill: #4b5563; }
.cc-fig-zoom { fill: rgba(232, 89, 12, .08); stroke: #94a3b8; stroke-width: 1.4; }
.cc-fig-steel { fill: #b6bcc6; stroke: #8f97a4; stroke-width: 1.2; }
.cc-fig-dial { fill: #fff; stroke: #8f97a4; stroke-width: 1.5; }
.cc-fig-needle { stroke: #e8590c; stroke-width: 2; stroke-linecap: round; }
.cc-fig-wheel { fill: #1f2937; }
.cc-fig-hub { fill: #6b7280; }
.cc-fig-window { fill: #bfdbfe; stroke: #8f97a4; }
.cc-fig-stripe { fill: none; stroke: #9aa1ad; stroke-width: 1.6; opacity: .65; }
.cc-fig-pour { fill: #b6bcc6; stroke: #8f97a4; }
.cc-fig-handleline{ stroke: #6b7280; stroke-width: 3; stroke-linecap: round; }
.cc-fig-bag { fill: #e8eaee; stroke: #9aa1ad; stroke-width: 1.4; }
.cc-fig-bagline { stroke: #9aa1ad; stroke-width: 1; }
.cc-fig-baglabel { fill: #6b7280; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-anchor: middle; font-family: inherit; }
.cc-fig-ghost polygon { fill: rgba(232, 89, 12, .06); stroke: #e8590c; stroke-width: 1.4; stroke-dasharray: 6 4; stroke-linejoin: round; }
.cc-fig-arrowtext { fill: #94a3b8; font-size: 22px; text-anchor: middle; font-family: inherit; }
.cc-fig-cement { fill: #64748b; }
.cc-fig-sand { fill: #eab308; }
.cc-fig-gravel2 { stroke: #9aa1ad; stroke-width: 1; }
.cc-fig-gravel3 { fill: #aab2bf; }
.cc-fig-label { fill: #6b7280; font-size: 11.5px; text-anchor: middle; font-family: inherit; }
.cc-fig-legend { fill: #6b7280; font-size: 11px; font-weight: 600; text-anchor: start; font-family: inherit; }
.cc-fig-part { fill: #ffffff; font-size: 16px; font-weight: 800; text-anchor: middle; font-family: inherit; paint-order: stroke; stroke: rgba(15,23,42,.35); stroke-width: 2px; }
.cc-fig-ext { stroke: #b6bcc6; stroke-width: 1; stroke-dasharray: 3 3; }
.cc-dim line {
stroke: #8593a6;
stroke-width: 1.4;
transition: stroke .12s ease, stroke-width .12s ease;
}
.cc-dim__head { fill: #8593a6; transition: fill .12s ease; }
.cc-dim__pill {
fill: rgba(255, 255, 255, .92);
stroke: #e2e6eb;
stroke-width: 1;
transition: stroke .12s ease, fill .12s ease;
}
.cc-dim text {
fill: #475569;
font-size: 11.5px;
font-weight: 700;
text-anchor: middle;
font-family: inherit;
transition: fill .12s ease;
}
.cc-dim.is-active line { stroke: var(--cc-accent); stroke-width: 2.4; }
.cc-dim.is-active .cc-dim__head { fill: var(--cc-accent); }
.cc-dim.is-active .cc-dim__pill { stroke: var(--cc-accent); fill: #fff3e8; }
.cc-dim.is-active text { fill: var(--cc-accent-dark); }
.cc-dim.is-active .cc-fig-zoom { stroke: var(--cc-accent); fill: rgba(232, 89, 12, .16); }
.cc-calc__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1rem 1.25rem;
}
.cc-field[hidden] { display: none; }
.cc-field__label {
display: block;
font-size: .82rem;
font-weight: 600;
letter-spacing: .01em;
margin-bottom: .35rem;
color: var(--cc-ink);
}
.cc-field input[type="number"],
.cc-field select {
width: 100%;
font: inherit;
font-size: .95rem;
padding: .55rem .65rem;
border: 1px solid var(--cc-line);
border-radius: 8px;
background: var(--cc-bg-soft);
color: var(--cc-ink);
min-height: 42px;
}
.cc-field input[type="number"]:focus,
.cc-field select:focus {
outline: 2px solid var(--cc-accent);
outline-offset: 1px;
border-color: var(--cc-accent);
background: #fff;
}
.cc-field__combo { display: flex; gap: .4rem; }
.cc-field__combo input { flex: 1 1 auto; min-width: 0; }
.cc-field__combo select { flex: 0 0 5.2rem; }
.cc-field__combo--suffix { align-items: center; }
.cc-field__suffix { font-weight: 600; color: var(--cc-muted); padding: 0 .25rem; }
.cc-calc__actions { display: flex; gap: .75rem; margin-top: 1.25rem; }
.cc-btn {
font: inherit;
font-weight: 600;
font-size: .95rem;
padding: .65rem 1.4rem;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: background .15s ease;
}
.cc-btn--primary { background: var(--cc-accent); color: #fff; }
.cc-btn--primary:hover { background: var(--cc-accent-dark); }
.cc-btn--ghost { background: transparent; color: var(--cc-ink); border-color: var(--cc-line); }
.cc-btn--ghost:hover { background: var(--cc-bg-soft); }
.cc-calc__results {
margin-top: 1.5rem;
border-top: 2px solid var(--cc-line);
padding-top: 1.25rem;
animation: cc-fade .3s ease;
}
@keyframes cc-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.cc-results__hero {
background: linear-gradient(135deg, #fff7f0, #fdeee0);
border: 1px solid #f5d9c3;
border-radius: 14px;
padding: 1.15rem 1.3rem;
margin-bottom: 1.25rem;
}
.cc-results__big { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.cc-results__num {
font-size: clamp(1.5rem, 8vw, 2.4rem);
font-weight: 800;
color: var(--cc-accent-dark);
line-height: 1.1;
min-width: 0;
overflow-wrap: anywhere;
}
.cc-results__unit { font-size: 1.05rem; font-weight: 600; color: var(--cc-ink); }
.cc-results__alt { margin-top: .35rem; font-size: .95rem; color: var(--cc-ink); }
.cc-results__note { margin-top: .5rem; font-size: .82rem; color: var(--cc-muted); }
.cc-results__error { color: #b91c1c; font-weight: 600; }
.cc-results__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.cc-chip {
background: rgba(255, 255, 255, .85);
border: 1px solid #f0dcc9;
border-radius: 999px;
padding: .28rem .75rem;
font-size: .85rem;
color: var(--cc-ink);
white-space: nowrap;
}
.cc-chip strong { color: var(--cc-accent-dark); }
.cc-results__heading {
font-size: 1.02rem;
font-weight: 700;
margin: 1.25rem 0 .6rem;
}
.cc-results__list { list-style: none; margin: 0; padding: 0; }
.cc-results__list li {
padding: .45rem 0;
border-bottom: 1px dashed var(--cc-line);
font-size: .95rem;
}
.cc-results__list li:last-child { border-bottom: 0; }
.cc-bags {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: .6rem;
}
.cc-bags__card {
background: var(--cc-bg-soft);
border: 1px solid var(--cc-line);
border-radius: 12px;
padding: .7rem .55rem .6rem;
text-align: center;
display: flex;
flex-direction: column;
gap: .1rem;
min-width: 0;
overflow: hidden;
container-type: inline-size;
}
.cc-bags__card--highlight {
background: #fff3e8;
border-color: var(--cc-accent);
box-shadow: 0 2px 10px rgba(232, 89, 12, .12);
}
.cc-bags__count {
font-size: 1.45rem;
font-weight: 800;
color: var(--cc-ink);
line-height: 1.15;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
white-space: nowrap;
min-width: 0;
}
.cc-bags__card[data-digits="4"] .cc-bags__count { font-size: 1.3rem; }
.cc-bags__card[data-digits="5"] .cc-bags__count { font-size: 1.12rem; }
.cc-bags__card[data-digits="6"] .cc-bags__count { font-size: .98rem; }
.cc-bags__card[data-digits="7"] .cc-bags__count { font-size: .86rem; }
.cc-bags__card[data-digits="8"] .cc-bags__count { font-size: .76rem; }
.cc-bags__card[data-digits="9"] .cc-bags__count { font-size: .68rem; }
.cc-bags__count {
font-size: clamp(.62rem, calc(155cqi / var(--ch, 3)), 1.45rem);
}
.cc-bags__card--highlight .cc-bags__count { color: var(--cc-accent-dark); }
.cc-bags__size { font-size: .78rem; color: var(--cc-muted); font-weight: 600; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cc-table th, .cc-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--cc-line); }
.cc-table thead th { background: var(--cc-bg-soft); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.cc-table__highlight td { background: #fff3e8; font-weight: 600; }
.cc-results__tools { margin-top: 1.25rem; }
.cc-calc__noscript { color: #b91c1c; font-weight: 600; }
@media (max-width: 760px) {
.cc-calc__layout { flex-direction: column; }
.cc-calc__figure {
position: static;
flex-basis: auto;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
}
@media (max-width: 560px) {
.cc-calc { padding: 1rem; }
.cc-calc__grid { grid-template-columns: 1fr; }
.cc-field input[type="number"],
.cc-field select { font-size: 16px; }
.cc-calc__actions { flex-wrap: wrap; }
.cc-calc__actions .cc-btn--primary { flex: 1 1 100%; padding: .85rem 1.4rem; font-size: 1.02rem; }
.cc-results__num { font-size: clamp(1.4rem, 8.5vw, 2rem); }
.cc-bags { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: .5rem; }
.cc-bags__card { padding: .65rem .4rem .55rem; }
.cc-bags__card[data-digits="4"] .cc-bags__count { font-size: 1.2rem; }
.cc-bags__card[data-digits="5"] .cc-bags__count { font-size: 1.02rem; }
.cc-bags__card[data-digits="6"] .cc-bags__count { font-size: .9rem; }
.cc-bags__card[data-digits="7"] .cc-bags__count { font-size: .8rem; }
.cc-bags__card[data-digits="8"] .cc-bags__count { font-size: .72rem; }
.cc-bags__card[data-digits="9"] .cc-bags__count { font-size: .64rem; }
.cc-bags__count { font-size: clamp(.6rem, calc(160cqi / var(--ch, 3)), 1.35rem); }
.cc-bags__size { font-size: .72rem; }
.cc-calc__results .cc-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}