Skip to content

Commit 6d94062

Browse files
brandonvkaragozianbrandonvkaragozian
authored
Merge pull request #122 from code4policy/impact-belen
impact page added context
2 parents 42f14f9 + 0b3ca82 commit 6d94062

2 files changed

Lines changed: 117 additions & 63 deletions

File tree

‎impacts.html‎

Lines changed: 60 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -32,49 +32,53 @@
3232
<!-- Main Page Title -->
3333
<h1>Pay-As-You-Throw in Boston</h1>
3434

35-
<p class="intro-text">How might implementing a Pay-As-You-Throw (PAYT) program impact the City of Boston? How do PAYT Programs compare across other Massachusetts municipalities?</p>
35+
<p class="intro-text">How might implementing a Pay-As-You-Throw (PAYT) program impact the City of Boston?</p>
3636
<div class="squiggle" aria-hidden="true"></div>
37+
38+
<p>To estimate the impact of a PAYT program on Boston's trash tonnage and revenue, we <span class="mini-badge">1</span> calculated how much trash Boston households produced in 2024 and how much the city spent to incinerate it. <span class="mini-badge">2</span> We projected the impact of a PAYT program on trash reduction and how much the city could save in incineration costs from the reduction alone based off of <span class="mini-badge">3</span> reductions seen in other municipalities. We <span class="mini-badge">4</span> estimated how much Boston could generate in revenue from PAYT-bag sales based on the city of Malden.</a> </p>
39+
</p>
40+
3741
<!-- Section: Boston 2024 vs PAYT side-by-side -->
3842
<div class="impact-compare">
3943
<div class="impact-column">
40-
<div class="sectionbanner"><strong>Without</strong> Pay-As-You-Throw (2024)</div>
44+
<div class="sectionbanner"><span class="banner-badge">1</span><strong>Without</strong> Pay-As-You-Throw (2024)</div>
4145
<!-- Result Cards Column -->
4246
<div class="stat-blocks stack">
4347
<div class="stat-block">
44-
<h3 class="block-title">Bostonians disposed of</h3>
45-
<p class="block-reduction"><span class="reduction-percent">186,305 tons of trash</span> </p>
48+
<h3 class="block-title">Boston disposed of</h3>
49+
<p class="block-reduction"><span class="reduction-percent">186,305 tons of trash in 2024</span> </p>
4650
<p class="block-description">This includes household and bulky waste</p>
4751
</div>
4852
<div class="stat-block">
4953
<h3 class="block-title">Each household disposed of</h3>
50-
<p class="block-reduction"><span class="reduction-percent">0.68 tons of trash</span> </p>
54+
<p class="block-reduction"><span class="reduction-percent">0.68 tons of trash in 2024</span> </p>
5155
<p class="block-description">This is an average per household</p>
5256
</div>
5357
<div class="stat-block">
5458
<h3 class="block-title">Boston spent</h3>
5559
<p class="block-reduction"><span class="reduction-percent">$19,260,210.90</span></p>
56-
<p class="block-description">on incinerating all household trash</p>
60+
<p class="block-description">on incinerating all household trash in 2024</p>
5761
</div>
5862
</div>
5963
</div>
6064

6165
<div class="impact-column">
62-
<div class="sectionbanner"><strong>With</strong> Pay-As-You-Throw (by 2031)</div>
66+
<div class="sectionbanner"><span class="banner-badge">2</span><strong>With</strong> Pay-As-You-Throw (by 2031)</div>
6367
<div class="stat-blocks stack">
6468
<div class="stat-block">
65-
<h3 class="block-title">Bostonians could dispose of</h3>
66-
<p class="block-reduction"><span class="reduction-percent">102,675 tons of trash</span></p>
67-
<p class="block-description">A <strong>44.95%</strong> reduction over 5 years</p>
69+
<h3 class="block-title">Boston could dispose of</h3>
70+
<p class="block-reduction"><span class="reduction-percent">102,675 tons of trash (45% less) by 2031</span></p>
71+
<p class="block-description">Estimated based on reductions seen in other municipalities</p>
6872
</div>
6973
<div class="stat-block">
7074
<h3 class="block-title">Each household could dispose of</h3>
71-
<p class="block-reduction"><span class="reduction-percent">0.32 tons of trash</span></p>
75+
<p class="block-reduction"><span class="reduction-percent">0.36 fewer tons of trash by 2031</span></p>
7276
<p class="block-description">This is an average per household</p>
7377
</div>
7478
<div class="stat-block">
7579
<h3 class="block-title">Boston could save</h3>
7680
<p class="block-reduction"><span class="reduction-percent">$1,729,131.19</span></p>
77-
<p class="block-description">in annual trash incineration costs</p>
81+
<p class="block-description">in annual trash incineration costs with this 44.95% reduction in tonnage alone.</p>
7882
</div>
7983
</div>
8084
</div>
@@ -97,51 +101,10 @@ <h4>Terminology</h4>
97101
</div>
98102
</div>
99103
</div>
100-
<!-- Section: Case Study of Malden -->
101-
<div class="sectionbanner">Potential Revenue from PAYT: A Case Study of Malden</div>
102-
<p>We used the city of Malden as a case study to estimate the potential revenue Boston could generate if they implemented a similar PAYT program. Malden residents have two options to dispose of their trash: 1) Buy <strong>blue PAYT trash bags </strong>that can be placed in any barrel, or 2) Buy an <strong>annual "trash tag"</strong> to stick to a 35-gallon city-issued trash cart and continue using standard trash bags.<a href="https://www.cityofmalden.org/238/Trash-Recycling"><sup>1</sup></a></p>
103-
<div class="two-column-divider">
104-
<div class="column-left">
105-
<h3>
106-
<img src="images/trash.jpg" alt="PAYT trash bag" class="column-image">
107-
2024 PROPOSED REVENUE FROM PAYT BAG SALES
108-
</h3>
109-
<div class="large-text">
110-
$12,837,475
111-
</div>
112-
<div class="asteric">Statistic includes household and bulky waste for the City of Malden</div>
113-
</div>
114-
<div class="divider-line"></div>
115-
<div class="column-right">
116-
<h3>
117-
<img src="images/tag.jpg" alt="Trash disposal tag" class="column-image">
118-
2024 PROPOSED REVENUE FROM PAYT TRASH TAGS
119-
</h3>
120-
<div class="large-text">
121-
$8,518,760
122-
</div>
123-
<div class="asteric">Statistic includes household and bulky waste for the City of Malden</div>
124-
</div>
125-
</div>
126-
<div class="footnote">Revenue projections are based on the city of Malden's PAYT revenue from PAYT bag and tag sales for participating households only. The city of Malden is a densely populated municipality, with a smaller population size than the city of Boston. For more information on the methodology, visit the <a href="method.html">Methodology page</a>.</div>
127-
128-
<div class="method-banner">
129-
<button class="method-toggle" aria-expanded="false">What Are These Numbers? <span class="chev">▾</span></button>
130-
<div class="method-content" hidden>
131-
<h4>Terminology</h4>
132-
<ul style="margin-bottom: 20px;">
133-
<li><strong>Per-Household Revenue:</strong> How much money each household generates through PAYT bag and tag sales in Malden.</li>
134-
<li><strong>Revenue Source:</strong> The different ways cities earn money from PAYT, like bag sales or trash tag sales.</li>
135-
<li><strong>Scaling:</strong> Using Malden's revenue earned per household to estimate how much Boston could earn.</li>
136-
<li><strong>Illustrative:</strong> This is an example calculation, not a prediction of what will actually happen.</li>
137-
</ul>
138-
<p style="margin-top: 15px; font-size: 14px;">For more information on the methodology, visit the <a href="method.html">Methodology page</a>.</p>
139-
</div>
140-
141-
</div>
104+
142105
<!-- Section: PAYT Results in Other Municipalities -->
143106
<section class="stats-fullpage">
144-
<div class="sectionbanner">PAYT Results in Other Massachusetts Municipalities</div>
107+
<div class="sectionbanner"><span class="banner-badge">3</span>PAYT Results in Other Massachusetts Municipalities</div>
145108

146109
<div class="stat-blocks">
147110
<div class="stat-block">
@@ -195,6 +158,48 @@ <h4>Terminology</h4>
195158
</div>
196159

197160
</div>
161+
<!-- Section: Case Study of Malden -->
162+
<div class="sectionbanner"><span class="banner-badge">4</span>Potential Revenue from PAYT: A Case Study of Malden</div>
163+
<p>We used the city of Malden as a case study to estimate the potential revenue Boston could generate if they implemented a similar PAYT program. Malden residents have two options to dispose of their trash: 1) Buy <strong>blue PAYT trash bags </strong>that can be placed in any barrel, or 2) Buy an <strong>annual "trash tag"</strong> to stick to a 35-gallon city-issued trash cart and continue using standard trash bags.<a href="https://www.cityofmalden.org/238/Trash-Recycling"><sup>1</sup></a></p>
164+
<div class="two-column-divider">
165+
<div class="column-left">
166+
<h3>
167+
<img src="images/trash.jpg" alt="PAYT trash bag" class="column-image">
168+
2024 PROPOSED REVENUE FROM PAYT BAG SALES
169+
</h3>
170+
<div class="large-text">
171+
$12,837,475
172+
</div>
173+
<div class="asteric">Statistic includes household and bulky waste for the City of Malden</div>
174+
</div>
175+
<div class="divider-line"></div>
176+
<div class="column-right">
177+
<h3>
178+
<img src="images/tag.jpg" alt="Trash disposal tag" class="column-image">
179+
2024 PROPOSED REVENUE FROM PAYT TRASH TAGS
180+
</h3>
181+
<div class="large-text">
182+
$8,518,760
183+
</div>
184+
<div class="asteric">Statistic includes household and bulky waste for the City of Malden</div>
185+
</div>
186+
</div>
187+
<div class="footnote">Revenue projections are based on the city of Malden's PAYT revenue from PAYT bag and tag sales for participating households only. The city of Malden is a densely populated municipality, with a smaller population size than the city of Boston. For more information on the methodology, visit the <a href="method.html">Methodology page</a>.</div>
188+
189+
<div class="method-banner">
190+
<button class="method-toggle" aria-expanded="false">What Are These Numbers? <span class="chev">▾</span></button>
191+
<div class="method-content" hidden>
192+
<h4>Terminology</h4>
193+
<ul style="margin-bottom: 20px;">
194+
<li><strong>Per-Household Revenue:</strong> How much money each household generates through PAYT bag and tag sales in Malden.</li>
195+
<li><strong>Revenue Source:</strong> The different ways cities earn money from PAYT, like bag sales or trash tag sales.</li>
196+
<li><strong>Scaling:</strong> Using Malden's revenue earned per household to estimate how much Boston could earn.</li>
197+
<li><strong>Illustrative:</strong> This is an example calculation, not a prediction of what will actually happen.</li>
198+
</ul>
199+
<p style="margin-top: 15px; font-size: 14px;">For more information on the methodology, visit the <a href="method.html">Methodology page</a>.</p>
200+
</div>
201+
202+
</div>
198203

199204
<div class="footnote">Interviews with officials from the Massachusetts Department of Environmental Protection, the City of Boston's Zero Waste Initiative team, the University of New Hampshire, the City of Brockton, and the City of Malden have informed the analysis on this page. For works cited, see the <a href="sources.html">Sources page</a>.</div>
200205

‎styles/styles.css‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,9 @@ ul ul li {
477477
background: var(--freedom-red);
478478
color: #ffffff;
479479
text-align: left;
480+
display: flex;
481+
align-items: center;
482+
gap: 10px;
480483
/* make banner text more prominent */
481484
font-size: 16px;
482485
/* match Boston headings: heading font, weight and uppercase spacing */
@@ -487,13 +490,45 @@ ul ul li {
487490
/* add vertical spacing between banners */
488491
margin-top: 24px;
489492
margin-bottom: 12px;
490-
padding: 10px 18px;
493+
padding: 10px 18px 10px 14px;
491494
border-radius: 4px;
492495
width: 100%;
493496
box-sizing: border-box;
494497
font-weight: 600;
495498
}
496499

500+
.sectionbanner .banner-badge {
501+
display: inline-flex;
502+
align-items: center;
503+
justify-content: center;
504+
width: 28px;
505+
height: 28px;
506+
border-radius: 50%;
507+
background: var(--brand-navy);
508+
color: #ffffff;
509+
font-family: var(--font-heading);
510+
font-weight: 700;
511+
font-size: 14px;
512+
flex-shrink: 0;
513+
}
514+
515+
/* Mini inline badge for use in paragraph text */
516+
.mini-badge {
517+
display: inline-flex;
518+
align-items: center;
519+
justify-content: center;
520+
width: 18px;
521+
height: 18px;
522+
border-radius: 50%;
523+
background: var(--brand-navy);
524+
color: #ffffff;
525+
font-family: var(--font-heading);
526+
font-weight: 700;
527+
font-size: 10px;
528+
vertical-align: middle;
529+
margin: 0 2px;
530+
}
531+
497532
/* Small inline section note used near figures (not the global top banner) */
498533
.section-note {
499534
background: transparent;
@@ -914,7 +949,7 @@ img {
914949
display: grid;
915950
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
916951
gap: 24px;
917-
align-items: start;
952+
align-items: stretch;
918953
margin: 10px 0 10px;
919954
}
920955

@@ -931,15 +966,27 @@ img {
931966
.impact-compare .stat-blocks {
932967
margin: 10px 0 10px; /* cap space under banner at ~10px */
933968
padding: 0; /* remove padding so cards extend to match banner width */
969+
flex: 1;
970+
display: flex;
971+
flex-direction: column;
934972
}
935973

936974
.impact-compare .stat-blocks.stack {
937-
grid-auto-rows: 1fr; /* make each row the same height within a column */
975+
display: flex;
976+
flex-direction: column;
938977
gap: 16px;
939978
}
940979

941980
.impact-compare .stat-blocks.stack .stat-block {
942-
min-height: 160px; /* normalize heights to the tallest card */
981+
display: flex;
982+
flex-direction: column;
983+
flex: 1;
984+
min-height: 144px;
985+
padding: 16px 16px 16px 16px;
986+
}
987+
988+
.impact-compare .stat-blocks.stack .stat-block > *:last-child {
989+
margin-bottom: 0;
943990
}
944991

945992
/* Stat Blocks - Boston.gov style card layout */
@@ -981,17 +1028,19 @@ img {
9811028
font-size: 20px;
9821029
font-weight: 700;
9831030
color: var(--brand-navy);
984-
margin: 0 0 10px 0;
1031+
margin: 0 0 6px 0;
9851032
font-family: var(--font-heading);
9861033
text-transform: uppercase;
9871034
text-decoration: none;
1035+
line-height: 1.2;
9881036
}
9891037

9901038
.block-reduction {
9911039
font-size: 18px;
9921040
color: var(--optimistic-blue);
993-
margin: 10px 0;
1041+
margin: 6px 0;
9941042
font-weight: 500;
1043+
line-height: 1.3;
9951044
}
9961045

9971046
.reduction-percent {
@@ -1002,8 +1051,8 @@ img {
10021051
.block-description {
10031052
font-size: 14px;
10041053
color: #666;
1005-
margin: 10px 0 0 0;
1006-
line-height: 1.5;
1054+
margin: 6px 0 0 0;
1055+
line-height: 1.3;
10071056
}
10081057

10091058
/* Ensure nav is hidden on small screens even if earlier rules re-enable it */

0 commit comments

Comments
 (0)