TARGETED.ARMY / FRONT-END SYSTEMCanonical

Panel CSS & Examples

The recovery and implementation standard for every dark panel, card, workspace, and inset surface. The joined War Room page frame documented below is required across every primary War tool.

Fix Light Panels All Other Styles

01Neutral Charcoal BodyNever theme-flood the whole panel.

02Square GeometryUse 0px radius unless a component says otherwise.

03Hard Offset ShadowUse crisp depth, not a pale glow.

04Two Accent CornersThe selected theme belongs in the short marks.

01 / CANONICAL FOUNDATION

Core Panel Classes

Start here for all new panels. Size, elevation, corner emphasis, and nesting are separate modifiers so workers can combine only what the page needs.

Panel Reference

Panel 01 — Neutral Base

The default contained section. It stays neutral charcoal in every selected theme.

Section

Evidence Summary

One clear subject inside a neutral panel.

Classes: ta-box ta-box--medium
Source: app/styles/canonical.css

Show JSX & CSS

Canonical JSX

<section className="ta-box ta-box--medium">
  <span className="ta-eyebrow">Section</span>
  <h2 className="ta-subheading">Evidence Summary</h2>
  <p className="ta-body">Keep one clear subject inside each panel.</p>
</section>

Canonical CSS

.ta-box {
  position: relative;
  border: 1px solid var(--ta-rule);
  background: var(--ta-panel);
  color: var(--ta-copy);
}
.ta-box--large { padding: 32px; }
.ta-box--medium { padding: 24px; }
.ta-box--small { padding: 18px; }
.ta-box--raised {
  background: var(--ta-panel-raised);
  box-shadow: var(--ta-shadow-offset);
}

Panel Reference

Panel 02 — Raised Workspace

The primary working region on a page. Use the hard offset shadow for hierarchy, not a pale or glossy fill.

Primary Workspace

Build The Record

The hard offset shadow creates hierarchy without a pale fill.

Classes: ta-box ta-box--large ta-box--raised
Source: Home story panel; War Room working panels

Show JSX & CSS

Canonical JSX

<section className="ta-box ta-box--large ta-box--raised">
  <span className="ta-eyebrow">Primary Workspace</span>
  <h2 className="ta-heading">Build The Record</h2>
  <p className="ta-body">The main task belongs here.</p>
</section>

Canonical CSS

.ta-box {
  position: relative;
  border: 1px solid var(--ta-rule);
  background: var(--ta-panel);
  color: var(--ta-copy);
}
.ta-box--large { padding: 32px; }
.ta-box--medium { padding: 24px; }
.ta-box--small { padding: 18px; }
.ta-box--raised {
  background: var(--ta-panel-raised);
  box-shadow: var(--ta-shadow-offset);
}

:root {
  --ta-shadow-offset: 8px 9px 0 rgba(0,0,0,.28);
}

Panel Reference

Panel 03 — Corner Accent

Marks an important panel with two short theme-colored corners. Never replace the neutral border with a full accent border.

Important

Two Corners, Not A Full Frame

The selected theme appears only in the short corner marks.

Classes: ta-box ta-box--medium ta-box--raised ta-box--accent
Source: Home cards; About cornerPanel; War Room cards

Show JSX & CSS

Canonical JSX

<article className="ta-box ta-box--medium ta-box--raised ta-box--accent">
  <span className="ta-eyebrow">Important</span>
  <h3 className="ta-subheading">Two Corners, Not A Full Frame</h3>
</article>

Canonical CSS

.ta-box--accent::before,
.ta-box--accent::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.ta-box--accent::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--theme-accent);
  border-left: 2px solid var(--theme-accent);
}
.ta-box--accent::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--theme-accent);
  border-bottom: 2px solid var(--theme-accent);
}

Panel Reference

Panel 04 — Inset Surface

A recessed surface inside a panel for previews, code, file metadata, or secondary data.

Protected File Previeworiginal-recording.mp3

Classes: ta-box ta-box--small ta-box--inset
Source: Home media cards; War Room preview regions

Show JSX & CSS

Canonical JSX

<section className="ta-box ta-box--medium">
  <div className="ta-box ta-box--small ta-box--inset">
    <code>Protected File Preview</code>
  </div>
</section>

Canonical CSS

.ta-box--inset {
  border-color: #36383d;
  background: #111214;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

Panel Reference

Panel 05 — Header, Body & Actions

The preferred content order for working panels: identity and status, clear title, concise body, then actions.

Workspace

Panel Title

Online

Put the purpose and instructions in the body.

Classes: ta-box ta-box--large ta-box--raised ta-box--accent; panel-example__header; panel-example__actions
Source: HomeStoryStart; PanelPageHeader; War Room page header

Show JSX & CSS

Canonical JSX

<section className="ta-box ta-box--large ta-box--raised ta-box--accent">
  <header className="panel-header">
    <div><span className="ta-eyebrow">Workspace</span><h2>Panel Title</h2></div>
    <span className="ta-badge ta-badge--online">Online</span>
  </header>
  <div className="panel-body">...</div>
  <footer className="panel-actions"><button>Primary Action</button></footer>
</section>

Canonical CSS

.panel-header,
.panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panel-body { margin-block: 24px; }
.panel-actions { padding-top: 18px; border-top: 1px solid var(--ta-rule); }

Panel Reference

Panel 06 — Responsive Grid

Use an auto-fitting grid for peer panels. Let cards wrap; never force a horizontal page scroll on mobile.

Workspace

Evidence

A peer panel that wraps cleanly.

Workspace

Files

A peer panel that wraps cleanly.

Workspace

Reports

A peer panel that wraps cleanly.

Classes: panel-grid; ta-box ta-box--medium ta-box--accent
Source: Home topic grid; About foundation and operation grids

Show JSX & CSS

Canonical JSX

<div className="panel-grid">
  {items.map((item) => (
    <article className="ta-box ta-box--medium ta-box--accent" key={item.id}>...</article>
  ))}
</div>

Canonical CSS

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.panel-grid > * { min-width: 0; }

02 / HOME PAGE SOURCE PATTERNS

Home Page Panels

These are the strongest live examples. They establish the neutral charcoal base, square geometry, short accent corners, dark inset areas, and hard offset shadows used throughout the site.

Panel Reference

Home 01 — Story Toolbox

A high-priority action panel with a technical grid, deep neutral gradient, status, and one obvious action.

START HERETARGETED INDIVIDUALS

ONLINE

WAR ROOM

Tell Your Story In Your Own Words.

Talk naturally with 'Speech to Text', add files, and build an organized record you can continue over time.

Classes: toolbox-v2 home-story-start; toolbox-v2-header; toolbox-v2-status; home-story-start-body; home-story-start-action
Source: app/page.tsx; app/ui/home-story-start.tsx; app/globals.css

Show JSX & CSS

Canonical JSX

<section className="toolbox-v2 home-story-start" aria-labelledby="home-story-start-title">
  <header className="toolbox-v2-header">
    <div><span>START HERE</span><strong id="home-story-start-title">TARGETED INDIVIDUALS</strong></div>
    <span className="toolbox-v2-status">ONLINE</span>
  </header>
  <div className="home-story-start-body">
    <span>WAR ROOM</span>
    <h2>Tell Your Story In Your Own Words.</h2>
    <p>Talk naturally with 'Speech to Text', add files, and build an organized record you can continue over time.</p>
    <button className="home-story-start-action">Create My Story</button>
  </div>
</section>

Canonical CSS

.toolbox-v2 {
  border: 1px solid #3e4146;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(145deg, #111519, #080b0d 72%);
  box-shadow: 18px 20px 34px rgba(0,0,0,.54), 5px 7px 0 rgba(0,0,0,.26);
}
.home-story-start-body {
  padding: 24px;
  border-top: 1px solid #34373c;
  background: linear-gradient(145deg, #14171a, #0a0c0e);
}

Panel Reference

Home 02 — Compact Media Panel

A dense secondary panel with one accent corner and several inset media choices.

POSTERS + ORIGINAL MUSICDownload. Listen. Share.

MusicThe Jury Is Awake

PosterAwareness

Classes: home-media-preview; home-media-grid; home-media-card
Source: app/ui/home-media-preview.tsx; app/globals.css

Show JSX & CSS

Canonical JSX

<section className="home-media-preview">
  <header><div><span>POSTERS + ORIGINAL MUSIC</span><strong>Download. Listen. Share.</strong></div></header>
  <div className="home-media-grid"><a className="home-media-card">...</a></div>
</section>

Canonical CSS

.home-media-preview {
  padding: 13px 14px 14px;
  border: 1px solid #3e4146;
  background: linear-gradient(145deg, #111519, #080b0d 72%);
  box-shadow: 8px 10px 20px rgba(0,0,0,.36);
}

Panel Reference

Home 03 — Topic Directory Card

A repeatable clickable card with centered icon, compact counts, two accent corners, and a controlled hover lift.

Evidence & Research

12 Public Items

Articles · Tools · Images→

Classes: topic-directory-card; topic-directory-icon-box; topic-directory-arrow
Source: app/ui/topic-directory-grid.tsx; app/globals.css

Show JSX & CSS

Canonical JSX

<Link className="topic-directory-card" href={href}>
  <span className="topic-directory-icon-box"><PageIcon name="research" /></span>
  <h2>Evidence & Research</h2>
  <p>12 Public Items</p>
  <small>Articles · Tools · Images</small>
  <span className="topic-directory-arrow">→</span>
</Link>

Canonical CSS

.topic-directory-card {
  border: 1px solid #363c41;
  background: linear-gradient(155deg, rgba(18,23,26,.97), rgba(7,10,12,.98));
  box-shadow: 8px 10px 19px rgba(0,0,0,.38), 3px 4px 0 rgba(0,0,0,.28);
}
.topic-directory-card:hover { transform: translateY(-4px); }

Panel Reference

Home 04 — Expandable Answer Card

A compact panel grid for disclosure content. The whole summary is clickable and expanded copy stays inside the same boundary.

Repeated Patterns
Record observable details, dates, times, and supporting files inside the same panel.

Classes: home-symptom-list; home-feature-icon
Source: app/page.tsx; app/globals.css

Show JSX & CSS

Canonical JSX

<ul className="home-symptom-list">
  <li><details><summary><PageIcon /><strong>Repeated Patterns</strong></summary>
    <div>Expanded answer text...</div>
  </details></li>
</ul>

Canonical CSS

.home-symptom-list li {
  position: relative;
  padding: 24px;
  border: 1px solid #414349;
  border-radius: 0;
  background: #17181b;
  box-shadow: 8px 9px 0 rgba(0,0,0,.24);
}

03 / ABOUT PAGE SOURCE PATTERNS

About Page Panels

The About page demonstrates the same dark language at three scales. Its current CSS-module class names are local; workers should use the canonical class combinations shown here for new shared work.

Panel Reference

About 01 — Foundation Card

A centered peer card with one icon, one short title, and a single paragraph.

Human Rights

Inherent. Universal. Inalienable.

Classes: ta-box ta-box--medium ta-box--raised ta-box--accent; local source: cornerPanel foundationCard
Source: app/about/page.tsx; app/about/about.module.css

Show JSX & CSS

Canonical JSX

<article className="ta-box ta-box--medium ta-box--raised ta-box--accent about-foundation-card">
  <span className="panel-icon"><PageIcon name="rights" /></span>
  <h3>Human Rights</h3>
  <p>One focused explanation.</p>
</article>

Canonical CSS

.about-foundation-card {
  min-height: 258px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

Panel Reference

About 02 — Wide Statement Panel

A full-width panel for one decisive statement, supporting copy, and an optional checklist or action area.

Our Non-Negotiable

No Agency Above The Law.

One decisive statement belongs in a wide panel.

No secret program above the law.
No full accent frame.
No pale panel fill.

Classes: ta-box ta-box--large ta-box--raised ta-box--accent; local source: cornerPanel lawPanel
Source: app/about/page.tsx; app/about/about.module.css

Show JSX & CSS

Canonical JSX

<section className="ta-box ta-box--large ta-box--raised ta-box--accent about-wide-panel">
  <PageIcon name="rights" />
  <div><span className="ta-eyebrow">Our Non-Negotiable</span><h2>No Agency Above The Law.</h2></div>
  <ul>...</ul>
</section>

Canonical CSS

.about-wide-panel {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) minmax(260px,.8fr);
  align-items: center;
  gap: 28px;
}
@media (max-width: 800px) { .about-wide-panel { grid-template-columns: 1fr; } }

Panel Reference

About 03 — Framed List Panel

A tall companion panel for a short, scannable list. Use separators inside one frame instead of giving every row a shadow.

Classes: ta-box ta-box--medium ta-box--raised; local source: pathwaysPanel
Source: app/about/page.tsx; app/about/about.module.css

Show JSX & CSS

Canonical JSX

<aside className="ta-box ta-box--medium ta-box--raised panel-list">
  <span className="ta-eyebrow">Our Pathways</span>
  <ul><li><PageIcon /><div><strong>Human Rights</strong><small>Inherent. Universal.</small></div></li></ul>
</aside>

Canonical CSS

.panel-list li {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding-block: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}

04 / WAR ROOM & RECOVERY

War Room Panel Standard

This is the live standard for every primary War Room page. One exterior frame contains a breadcrumb row, title row, and darker content region. The two header rows use the same neutral panel color and exterior-colored dividers; theme color stays in controls and icons, not the panel fill.

Panel Reference

War 01 — Page Header Panel

The required primary-page structure: breadcrumbs and membership, page identity, then working content. Keep both header rows the same color, use the exterior border for both dividers, and do not add a clipped corner accent to the outer frame.

TARGETED.ARMY / WAR ROOMMembers

FOIA

Prepare focused public-records requests.

Working ContentWhat Records Will You Demand?

Classes: war-room-route war-room-route--framed; war-room-page-header__breadcrumb-row; war-room-page-header__title-row; war-room-page-content
Source: Live shared standard: app/war/war-room-page.tsx and app/war/war-room.css

Show JSX & CSS

Canonical JSX

<article className="war-room-route war-room-route--framed">
  <header className="war-room-page-header">
    <div className="war-room-page-header__topline war-room-page-header__breadcrumb-row">
      <nav aria-label="Breadcrumb"><span className="ta-eyebrow">TARGETED.ARMY / WAR ROOM</span></nav>
      <span className="ta-badge ta-badge--member">Members</span>
    </div>
    <div className="war-room-page-header__title-row">
      <span className="war-room-page-header__icon"><PageIcon /></span>
      <div><h1 className="ta-heading">FOIA</h1><p className="ta-lead">Prepare focused public-records requests.</p></div>
    </div>
  </header>
  <div className="war-room-page-content">...</div>
</article>

Canonical CSS

.war-room-route--framed {
  overflow: hidden;
  border: 1px solid var(--war-border);
  border-radius: var(--ta-radius-lg);
  background: var(--war-shell);
  box-shadow: var(--ta-shadow-offset);
}
.war-room-page-header__breadcrumb-row,
.war-room-page-header__title-row {
  border-bottom: 1px solid var(--war-border);
  background: var(--war-panel);
}
.war-room-page-header__title-row {
  padding-right: clamp(50px, 5vw, 75px);
}
.war-room-page-header .ta-lead { max-width: none; }
.war-room-page-content { background: var(--war-shell); }

Panel Reference

War 02 — Tool Card

A near-black tool container with a visibly lighter charcoal preview surface. Use this hierarchy inside the joined War page content region.

Visited

My Story

Build your record with Nano.

Classes: war-dashboard-tool-card ta-box ta-box--medium ta-box--accent; war-panel-shell war-panel-inset
Source: War Room dashboard tool cards inside the shared joined page frame

Show JSX & CSS

Canonical JSX

<article className="war-dashboard-tool-card ta-box ta-box--medium ta-box--accent war-panel-shell">
  <div className="war-dashboard-tool-card__preview war-panel-inset">...</div>
  <h2 className="ta-subheading">My Story</h2>
  <p className="ta-supporting">Build your record.</p>
  <Link className="ta-button ta-button--secondary">Open My Story →</Link>
</article>

Canonical CSS

.war-dashboard-tool-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #3b3e43;
  background: #0d0f11;
  box-shadow: 8px 9px 0 rgba(0,0,0,.34);
}
.war-dashboard-tool-card__preview {
  min-height: 104px;
  border: 1px solid #383b40;
  background: #17191c;
}
.war-dashboard-tool-card .ta-button { margin-top: auto; }

Panel Reference

Recovery 01 — Fix Overly Light Panels

Use this when a route's panels became blue, green, pink, purple, or otherwise too light after theme work.

WrongTheme-Flooded PanelToo light and too colorful

RestoredNeutral Dark PanelTheme accent stays in the corners.

Classes: Restore --ta-panel tokens; keep ta-box modifiers; remove route-level light background overrides
Source: app/globals.css; app/styles/canonical.css

Show JSX & CSS

Canonical JSX

// Good
<section className="ta-box ta-box--medium ta-box--raised ta-box--accent">...</section>

// Remove route-level panel fills such as:
// background: var(--theme-surface-raised);
// background: #f4f4f4;
// background: color-mix(... white ...);

Canonical CSS

:root {
  --ta-panel: #151618;
  --ta-panel-raised: #1b1c1f;
  --ta-panel-hover: #24262a;
  --ta-rule: #45474d;
  --ta-rule-strong: #55575c;
}

/* Do not remap --ta-panel or --ta-panel-raised to --theme-surface*. */

05 / SITEWIDE STATEMENT STRIPS

Statement Bars

Use this narrow interruption bar between major regions for one short, repeatable declaration. It adapts the live MaxisRichards.com hero mantra to the TARGETED.ARMY theme.

Panel Reference

Statement 01 — Hero Mantra Bar

A thin full-width declaration with restrained text, a faint top rule, and one theme-colored divider.

NO SILENCE. NOT EVER.THE HUMAN MIND IS NOT GOVERNMENT PROPERTY.

Classes: ta-statement-bar; ta-statement-bar__divider
Source: MaxisRichards.com home hero mantra; app/styles/canonical.css

Show JSX & CSS

Canonical JSX

<p className="ta-statement-bar">
  NO SILENCE. NOT EVER.
  <span className="ta-statement-bar__divider" aria-hidden="true">•</span>
  THE HUMAN MIND IS NOT GOVERNMENT PROPERTY.
</p>

Canonical CSS

.ta-statement-bar {
  margin: 0;
  padding: 11px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(2,2,5,.45);
  color: rgba(255,255,255,.42);
  font: 800 8px/1 var(--font-geist-mono), monospace;
  letter-spacing: 3.5px;
  text-align: center;
}
.ta-statement-bar__divider {
  margin-inline: 18px;
  color: var(--theme-accent);
}