UNIT 14 • STAGE 7 OF 7
Today
Add a present-day sovereignty section and close the site with a footer
The Final Section: Today
Stage 7 adds the Today section and the site footer. This completes your Reservation System research website.
The Today section follows the same then/now split card structure you used in Unit 12. Each card has a Then column and a Now column, separated by a vertical rule. The Then column documents something from the 1850-1887 era. The Now column documents the present-day status of that same issue. The point is not nostalgia or contrast for its own sake. The point is continuity: the legal cases, the land claims, and the sovereignty questions from this era are not resolved. They are active.
The Reservation System in the present tense
The Black Hills claim is the most direct example: a treaty violation ruled unconstitutional in 1980 with an unclaimed $1 billion award. But there are others. The water rights guaranteed by the Fort Laramie Treaty of 1868 are actively litigated. Federal trust responsibility obligations established during this era are disputed in courts today. The Dakota Access Pipeline protest at Standing Rock in 2016 was, in legal terms, partly about those same 1868 treaty rights. This era did not end. Its unresolved questions are present-day political and legal realities.
New CSS: Today Section and Footer
Then/Now split card (same as Unit 12 Stage 7)
display: grid;
grid-template-columns: 1fr 1px 1fr;
}
.split-divider { background: var(--gold-border); }
.then-col { padding-right: 28px; }
.now-col { padding-left: 28px; }
.split-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; }
.then-col .split-label { color: var(--text-muted); }
.now-col .split-label { color: var(--gold); }
grid-template-columns: 1fr 1px 1fr: three grid columns: left content, a 1-pixel-wide middle column, and right content. The 1px middle column is assigned a background color by.split-divider, creating a vertical rule without any absolute positioning or border tricks..then-col .split-label { color: var(--text-muted) }: the "THEN" label uses--text-muted(#506070), the dimmest text in the palette. It visually recedes. The past is not the destination..now-col .split-label { color: var(--gold) }: the "NOW" label uses--gold(#778DA9), the accent color. It draws the eye forward. The present is where the stakes are.
Today card wrapper
.today-card { background: var(--bg-card); border: 1px solid var(--gold-border); border-radius: 12px; padding: 32px 36px; }
.split-heading { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.split-text { font-size: 0.875rem; color: var(--text-dim); line-height: 1.65; }
.split-text strong { color: var(--text-light); }
Site footer
background: #080E18;
border-top: 1px solid var(--gold-border);
padding: 48px;
text-align: center;
}
background: #080E18: one shade darker than--bg-main(#0D1B2A). The footer is not a section with content. It is the base of the page. Going slightly darker signals "you have reached the end" without requiring any explicit label.border-top: 1px solid var(--gold-border): a thin line separates the footer from the last section above it. Same low-opacity Lavender Grey border used throughout the site. Visually consistent.
Your Task
Three pre-built then/now cards are in the starter code. They cover three of the most important present-day continuations of the Reservation System era: the Black Hills legal claim, water rights, and Tribal sovereignty. Your task is to add a fourth then/now card using the <!-- ADD YOUR THEN/NOW CARD --> placeholder.
For your fourth card, choose something connected to the specific nation you researched in Stage 5. Find one thing from the 1850-1887 era that directly affects that nation today. Some ideas to research:
- A specific treaty provision from this era that is still legally active for that nation
- A boundary reduction from this period and what the current land status is
- A present-day governance, language, or sovereignty initiative connected to history from this era
Finding then/now connections
The best then/now cards are specific, not general. "Treaties were broken then, and Tribal sovereignty is challenged now" is too broad to be useful. "The Fort Laramie Treaty of 1868 guaranteed hunting rights in Wyoming and Montana. In 2019, the Crow Tribe sued the state of Wyoming over those same hunting rights in Wyoming v. Herrera, and won at the Supreme Court" is specific and traceable. Start with the nation's official website and look for what legal or political issues they currently identify as priorities.
Unit 14 Complete
You have built your third era research website in the Federal Indian Policy Series. Seven sections. Seven stages. A complete document.
Look at what you have built across Units 11, 12, and 13:
- Unit 11: Treaty-Making era. New pattern: CSS 3D flip cards
- Unit 12: Removal era. New pattern: CSS accordion
- Unit 14: Reservation System era. New pattern: CSS pull quote with
::before
Each unit added one new UX pattern to your toolkit. You now know flip cards, accordions, and editorial pull quotes. You have built three research websites in the same design system, which means you know what it feels like to extend a codebase rather than restart from scratch. That is professional practice.
Four more era units remain before the Unit 18 capstone where you combine everything into one multi-page site. The history of each era connects to the next. Allotment (Unit 14) grew directly out of the Reservation System. The patterns you are building are also connected: each unit uses what you learned in the last one and adds something new.
Your Unit 14 site is done.
Unit 14 covers the Allotment and Assimilation era (1887 to 1934). The Dawes Act of 1887, passed in the same year the Reservation System era ends, directly addressed the reservation boundaries you have been documenting in this unit. The thread continues.
© 2026 Relentless Feather. All rights reserved.