/* Article figures: responsive, accessible HTML figures.
Replaces fixed-viewBox SVG for any figure that is fundamentally text + boxes.
An SVG scales like an image, so its type shrinks with the container (measured
4.2px on a 375px phone). These components use real CSS type instead: they
reflow at every breakpoint, honour user font-size and zoom, and never render
below ~14px. Mobile-first; breakpoints match the site (481 / 768 / 1024). */
/* STAGING ONLY (Chris, 2026-08-13). These figures are layout references that show
where commissioned artwork will go. They are useful internally but are not
customer-facing quality, so they must never render on the live site.
`main.js` adds .prod to only when hostname === 'greendrains.com', so
staging keeps them and production drops them. Marked explicitly on each container
rather than with :has(), because an unsupported selector in a list invalidates the
whole rule and would leak the figures onto production. */
.prod .gd-staging-only { display: none !important; }
.gdfig {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.15rem;
margin: var(--space-2xl) 0;
}
@media (min-width: 768px) {
.gdfig { padding: 1.75rem 1.9rem; }
}
.gdfig-title {
font-size: 1.2rem;
font-weight: var(--font-weight-semibold);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-green-dark);
margin: 0 0 0.4rem;
}
@media (min-width: 768px) { .gdfig-title { font-size: 1.45rem; } }
.gdfig-sub {
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-muted);
margin: 0 0 1.2rem;
}
.gdfig-note {
font-size: 0.85rem;
line-height: 1.5;
color: var(--color-text-muted);
opacity: 0.85;
margin: 1.15rem 0 0;
}
/* ------------------------------------------------------- hub card art
Two article cards have no photograph available (Trap Guard comparison and
the 5-year cost comparison). Leaving them empty left a 0px image area in a
grid whose other cards are 180px, so the row stretched and the cards read as
broken (Chris, 2026-08-13). These are built as real CSS type rather than a
shrunken SVG: at card size a 1200-wide viewBox rendered its labels at 6.5px
to 13px. Legible at every size, and the ONLY figure art cleared for
production; everything else stays gd-staging-only. */
.gdcard {
height: 180px;
display: flex;
overflow: hidden;
}
/* styles.css hides `.prod .article-card-image:has(span):not(:has(img))` with
`display:none !important`, because spans-without-an-image was the old
text-placeholder pattern. This card art is deliberate content, not a
placeholder, so it opts back in. !important is required to answer the
!important above it; specificity alone loses. Without this the cards render
on staging and silently vanish on production. */
.prod .article-card-image.gdcard { display: flex !important; }
.gdcard--vs { align-items: stretch; }
.gdcard-side {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.9rem 0.7rem;
text-align: center;
font-size: 1.05rem;
font-weight: var(--font-weight-semibold);
line-height: 1.25;
color: var(--color-green-dark);
background: var(--color-cream);
}
.gdcard-side--alt { background: var(--color-green-light); }
.gdcard-vs {
align-self: center;
flex: none;
width: 2.5rem; height: 2.5rem;
margin: 0 -1.25rem;
z-index: 1;
border-radius: 50%;
background: var(--color-green-dark);
color: #fff;
font-size: 0.85rem;
font-weight: var(--font-weight-semibold);
display: flex; align-items: center; justify-content: center;
}
.gdcard--cost {
flex-direction: column;
justify-content: center;
gap: 0.55rem;
padding: 1rem 1.15rem;
background: var(--color-cream);
}
.gdcard-kicker {
font-size: 0.72rem;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-green-mid);
margin-bottom: 0.15rem;
}
.gdcard-row { display: flex; align-items: center; gap: 0.55rem; }
.gdcard-bar { height: 1.35rem; border-radius: 5px; flex: none; }
.gdcard-bar--sm { width: 12%; background: var(--color-green-dark); }
.gdcard-bar--lg { width: 62%; background: #b4501a; }
.gdcard-val {
font-size: 0.85rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
white-space: nowrap;
}
.gdcard-val--alert { color: #b4501a; }
/* ---------------------------------------------------------------- bars */
.gdfig-bars { display: grid; gap: 1.05rem; }
.gdfig-bar-label {
font-size: 0.95rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
margin-bottom: 0.35rem;
}
/* The value label lives INSIDE the track, immediately after the bar, so it reads as
that bar's value instead of floating at the far right. Bar widths are scaled to a
max of 80% of the track (see build_html_figures.py) to leave room for the label. */
.gdfig-bar-row { display: flex; align-items: center; }
/* No gap here: split bars (4x + up-to-12x) must read as one continuous bar. The
label is offset with its own margin instead. */
.gdfig-bar-track { flex: 1; display: flex; align-items: center; min-width: 0; }
.gdfig-bar {
height: 2.1rem;
border-radius: 7px;
min-width: 5px;
background: var(--color-green-dark);
}
.gdfig-bar--alert { background: #b4501a; }
.gdfig-bar--alert-soft { background: #e8c4ab; }
.gdfig-bar--split-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gdfig-bar--split-r { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gdfig-bar-val {
margin-left: 0.65rem;
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
white-space: nowrap;
}
.gdfig-bar-val--alert { color: #b4501a; }
/* ------------------------------------------------------------- panels */
.gdfig-panels { display: grid; gap: 0.9rem; }
@media (min-width: 768px) { .gdfig-panels { grid-template-columns: 1fr 1fr; } }
.gdfig-panel { border-radius: 12px; padding: 1.1rem 1.15rem; }
.gdfig-panel--cream { background: var(--color-cream); }
.gdfig-panel--green { background: var(--color-green-light); }
.gdfig-panel-title {
font-size: 1.02rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
margin: 0 0 0.75rem;
}
.gdfig-panel ul { list-style: none; padding: 0; margin: 0; }
.gdfig-panel li {
position: relative;
padding-left: 1.05rem;
margin-bottom: 0.55rem;
font-size: 0.93rem;
line-height: 1.5;
color: var(--color-text-muted);
}
.gdfig-panel li:last-child { margin-bottom: 0; }
.gdfig-panel li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-green-soft);
}
.gdfig-panel--cream li::before { background: #b4501a; }
.gdfig-callout {
margin-top: 0.95rem;
padding: 0.8rem 0.9rem;
border-radius: 9px;
font-size: 0.92rem;
line-height: 1.5;
}
.gdfig-callout--alert { background: #e8c4ab; color: #7d3812; }
.gdfig-callout--plain { background: #fff; color: var(--color-text-muted); }
.gdfig-callout strong { display: block; margin-bottom: 0.15rem; color: inherit; }
/* -------------------------------------------------------------- steps */
.gdfig-steps { display: grid; gap: 0.7rem; }
@media (min-width: 481px) { .gdfig-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
.gdfig-steps--4 { grid-template-columns: repeat(4, 1fr); }
.gdfig-steps--5 { grid-template-columns: repeat(5, 1fr); }
}
.gdfig-step {
background: var(--color-green-mid);
border-radius: 10px;
padding: 0.95rem 1rem 1.05rem;
}
.gdfig-step-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.85rem; height: 1.85rem;
border-radius: 50%;
background: rgba(255,255,255,0.22);
color: #fff;
font-size: 0.88rem;
font-weight: var(--font-weight-semibold);
margin-bottom: 0.6rem;
}
.gdfig-step-title {
font-size: 0.98rem;
font-weight: var(--font-weight-semibold);
color: #fff;
line-height: 1.25;
margin-bottom: 0.3rem;
}
.gdfig-step-desc {
font-size: 0.88rem;
line-height: 1.45;
color: rgba(248,247,242,0.88);
}
/* ---------------------------------------------------------- checklist */
.gdfig-check { list-style: none; padding: 0; margin: 0; }
.gdfig-check li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.8rem;
align-items: start;
padding: 0.8rem 0.85rem;
border-radius: 10px;
}
.gdfig-check li:nth-child(odd) { background: var(--color-cream); }
.gdfig-check-n {
display: flex;
align-items: center;
justify-content: center;
width: 1.85rem; height: 1.85rem;
border-radius: 50%;
background: var(--color-green-mid);
color: #fff;
font-size: 0.88rem;
font-weight: var(--font-weight-semibold);
}
.gdfig-check-title {
font-size: 0.98rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
line-height: 1.3;
}
.gdfig-check-desc {
font-size: 0.9rem;
line-height: 1.45;
color: var(--color-text-muted);
margin-top: 0.15rem;
}
.gdfig-check-box {
width: 1.3rem; height: 1.3rem;
border: 2px solid var(--color-green-soft);
border-radius: 5px;
margin-top: 0.2rem;
}
@media (max-width: 480px) { .gdfig-check-box { display: none; } }
/* -------------------------------------------------------------- parts */
.gdfig-part {
background: var(--color-cream);
border-left: 6px solid var(--color-green-dark);
border-radius: 10px;
padding: 0.95rem 1.1rem;
margin-bottom: 0.8rem;
}
.gdfig-part:last-child { margin-bottom: 0; }
.gdfig-part--2 { border-left-color: var(--color-green-mid); }
.gdfig-part--3 { border-left-color: var(--color-green-soft); }
.gdfig-part-title {
font-size: 1.02rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
margin-bottom: 0.5rem;
}
.gdfig-part p {
font-size: 0.93rem;
line-height: 1.5;
color: var(--color-text-muted);
margin: 0 0 0.3rem;
}
.gdfig-part p:last-child { margin-bottom: 0; }
/* -------------------------------------------------------------- cards
One item per ROW, running horizontally: [n] Title | description.
Four side-by-side columns inside the 720px article measure gave each card
~160px, wrapping the description every two or three words (Chris, 2026-08-13).
Rows use the full measure; title/description collapse to stacked under 700px. */
.gdfig-cards { display: grid; gap: 0.7rem; }
.gdfig-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
background: var(--color-cream);
border-radius: 11px;
padding: 0.95rem 1.05rem;
}
.gdfig-card-n {
display: flex; align-items: center; justify-content: center;
width: 1.7rem; height: 1.7rem; flex: none;
border-radius: 50%;
background: #b4501a;
color: #fff;
font-size: 0.85rem;
font-weight: var(--font-weight-semibold);
}
@media (min-width: 700px) {
.gdfig-card-body {
display: grid;
grid-template-columns: minmax(170px, 225px) 1fr;
gap: 0 1.3rem;
align-items: baseline;
}
}
.gdfig-card-title {
font-size: 0.98rem;
font-weight: var(--font-weight-semibold);
color: var(--color-green-dark);
line-height: 1.3;
margin: 0 0 0.2rem;
}
@media (min-width: 700px) { .gdfig-card-title { margin-bottom: 0; } }
.gdfig-card-flag { font-size: 0.85rem; font-weight: 400; color: #b4501a; }
.gdfig-card-desc {
font-size: 0.92rem;
line-height: 1.5;
color: var(--color-text-muted);
margin: 0;
}
/* ------------------------------------------------------------ pyramid */
.gdfig-pyr { display: flex; flex-direction: column-reverse; gap: 5px; align-items: center; }
.gdfig-pyr-row {
width: 100%;
border-radius: 5px;
padding: 0.7rem 0.85rem;
text-align: center;
color: #fff;
}
@media (min-width: 640px) {
.gdfig-pyr-row { width: var(--w, 100%); }
}
.gdfig-pyr-title { font-size: 0.98rem; font-weight: var(--font-weight-semibold); line-height: 1.25; }
.gdfig-pyr-desc { font-size: 0.87rem; line-height: 1.4; color: rgba(248,247,242,0.85); margin-top: 0.15rem; }
.gdfig-pyr-row--l1 { background: var(--color-green-dark); }
.gdfig-pyr-row--l2 { background: var(--color-green-mid); }
.gdfig-pyr-row--l3 { background: var(--color-green-soft); }
.gdfig-pyr-row--l4 { background: #7d967d; }
.gdfig-pyr-row--l5 { background: #b9c6b9; }
.gdfig-pyr-row--l4 .gdfig-pyr-title,
.gdfig-pyr-row--l5 .gdfig-pyr-title { color: var(--color-green-dark); }
.gdfig-pyr-axis {
font-size: 0.85rem;
color: var(--color-text-muted);
text-align: center;
margin-top: 0.7rem;
}
/* -------------------------------------------------------------- cycle */
.gdfig-cycle { display: grid; gap: 0.7rem; }
@media (min-width: 481px) { .gdfig-cycle { grid-template-columns: 1fr 1fr; } }
.gdfig-cycle-item {
background: #b4501a;
color: #fff;
border-radius: 10px;
padding: 0.85rem 0.95rem;
}
.gdfig-cycle-item .gdfig-step-title { color: #fff; }
.gdfig-cycle-loop {
grid-column: 1 / -1;
text-align: center;
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
color: #b4501a;
padding-top: 0.15rem;
}
.gdfig-flow { display: grid; gap: 0.55rem; }
.gdfig-flow-item {
background: var(--color-green-dark);
color: #fff;
border-radius: 10px;
padding: 0.85rem 0.95rem;
text-align: center;
}
.gdfig-flow-item + .gdfig-flow-item { background: var(--color-green-mid); }
.gdfig-flow-arrow { text-align: center; color: var(--color-green-mid); font-size: 1.1rem; line-height: 1; }