UNIT 18 • STAGE 7 OF 7
Today
Final stage. New CSS: scroll-margin-top fixes anchor nav on fixed-header pages. Era series footer completes the site.
The Today Section: What We Are Building
Stage 7 adds the final section: how the Self-Determination Era connects to the present. The legislation and court cases from 1968 to 1994 are not history in the sense of being over. ISDEAA is still federal law. ICWA is still federal law and is still being challenged in federal courts. NAGPRA repatriation is ongoing. This section makes that connection explicit.
Below the Today section, a footer closes the page with the full era series: pills for all eight federal Indian policy units, with Unit 18 marked as the current one. This is the same era series structure you have seen at the bottom of every era unit in this series.
The era in numbers
Ten major laws passed in 26 years. Most are still federal law. Over 570 Tribal nations now operate federal programs under ISDEAA self-determination contracts or self-governance compacts. More than 50,000 sets of human remains have been repatriated under NAGPRA since 1990. The Tribal Self-Governance Act of 1994 allows over 100 Tribal nations to redesign, consolidate, and redirect federal resources according to Tribal priorities. The Self-Determination Era did not end federal Indian policy. It turned Tribal nations into the administrators of it.
New CSS: scroll-margin-top
Your page has a fixed navigation bar 64px tall. When a visitor clicks a nav link like "The Courts" or "My Research," the browser scrolls so that section's top edge is at the very top of the viewport, directly behind the nav. The heading is hidden.
scroll-margin-top adds offset space to any scroll target. When the browser scrolls to that element via an anchor link, it stops that many pixels early, leaving room for the fixed nav. Set it to slightly more than the nav height so the heading lands comfortably visible.
#the-courts, #my-research, #today {
scroll-margin-top: 80px; /* nav is 64px; 80px gives comfortable breathing room */
}
Try it
After adding this CSS, click any nav link in the preview. The section will scroll into view with the heading visible below the nav bar. Without this property, the heading would be buried behind the fixed nav. This is the fix for every fixed-header website you will ever build.
New CSS: Today Section and Legacy Pillars
The Today section has a 3-column grid of legacy pillars, one for each of the three most consequential legal structures the era produced. Each pillar has a law name, its current status, and a brief statement of how it shapes Tribal governance today.
.legacy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 64px;
}
.legacy-pillar {
background: var(--bg-section);
border: 1px solid var(--gold-border);
border-radius: 14px;
padding: 32px 28px;
}
.pillar-law { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 10px; }
.pillar-heading { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 900; line-height: 1.2; margin-bottom: 14px; }
.pillar-body { font-size: 0.9375rem; line-height: 1.7; color: var(--text-dim); }
Era Series Footer
The era series footer closes the page with navigation pills for all eight federal Indian policy units. Unit 18 is marked .current. Students can navigate directly between era units from the footer of any era page.
.era-footer-inner { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.era-footer-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 20px; }
.era-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.era-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; border: 1px solid var(--gold-border); color: var(--text-dim); transition: all 0.2s; }
.era-pill:hover { border-color: var(--gold); color: var(--text-light); }
.era-pill.current { background: var(--gold); color: #0D1B2A; border-color: var(--gold); font-weight: 700; }
Unit 18 is complete.
Your Self-Determination Era site is fully built. Seven stages. Ten laws. Five court cases. Three nation profiles. One era of history that is still active federal law. The filter works. The nav works. The anchor scroll is fixed. Now replace the placeholder research with your own writing, and move to Unit 18.
© 2026 Relentless Feather. All rights reserved.