(click target for
the row's primary action) alongside a sibling .row-kebab (secondary
actions) — used where a row both navigates AND has per-row actions
(Messages inbox/archived). Plain .row-list-main divs (no navigation,
e.g. group members) are unaffected. */
a.row-list-main {
display: block;
text-decoration: none;
color: inherit;
}
a.row-list-main:hover .row-list-title { color: var(--bronze); }
/* Same "row navigates, sibling holds per-row actions" idea as
a.row-list-main above, but for rows that also need a thumbnail inside
the clickable area (Resources) — a.row-list-main alone only wraps
text, so this variant lays out thumb + text-stack together as the link. */
a.row-list-link {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
}
a.row-list-link:hover .row-list-title { color: var(--bronze); }
.row-list-inline-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* Condensed row density (Resources) — this list is expected to grow to
hundreds of entries, so it gets tighter padding/thumb size than the
default .row-list-item everywhere else; scoped to #resource-list only,
no effect on Directory/Roster/Messages/etc. */
#resource-list .row-list-item { padding: 7px 14px; }
#resource-list .row-list-thumb { width: 30px; height: 30px; }
/* Unread indicator (Messages inbox) — bold title text + small dot, standard
inbox convention. */
.row-list-title.is-unread { font-weight: 700; }
.unread-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bronze);
margin-right: 8px;
vertical-align: middle;
flex-shrink: 0;
}
/* Small read-only tag chips inside a row-list row (Journal list) — reuses
.filter-pill's look at a more compact size since they sit inside a
single-line row rather than a filter bar. */
.row-list-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.row-list-tags .filter-pill {
padding: 2px 10px;
font-size: 0.7rem;
cursor: default;
}
/* ==========================================================================
TABS (aesthetics phase 4 — Messages Inbox/Archived/Sent)
========================================================================== */
.tabs-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
border-bottom: 1px solid rgba(43,43,40,0.12);
}
.tabs { display: flex; gap: 28px; }
.tab-link {
padding: 10px 2px;
margin-bottom: -1px;
font-family: var(--sans);
font-size: 0.92rem;
font-weight: 600;
color: #6b6a63;
border-bottom: 2px solid transparent;
}
.tab-link:hover { color: var(--bronze); }
.tab-link.is-active { color: var(--ink); border-bottom-color: var(--bronze); }
/* ==========================================================================
ICON BUTTON (message detail Archive/Delete — a deliberate exception to
the row-kebab pattern: once a message is open, its actions are primary,
not secondary, so they're visible icon buttons, same circular sizing as
.profile-menu-toggle)
========================================================================== */
.message-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.message-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(43,43,40,0.15);
background: #fff;
color: var(--ink);
cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--bronze); color: var(--bronze); background: rgba(184,134,60,0.06); }
/* ==========================================================================
PILL PICKER (checkbox-driven toggle pills — Journal entry-creation form's
life-area tag picker. Pure CSS: the checkbox is visually hidden but stays
in the DOM/tab order, the sibling .filter-pill span shows the toggle
state via :checked, and the wrapping 
at 2560x1440 when real photography is ready)
========================================================================== */
.hero {
position: relative;
min-height: 62vh;
display: flex;
align-items: flex-end;
background: var(--navy);
overflow: hidden;
color: var(--on-navy);
}
.hero.hero--short { min-height: 42vh; }
.hero-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.92) 88%);
}
.hero-content {
position: relative;
z-index: 1;
padding: 0 32px 64px;
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
}
.eyebrow {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze-light);
font-weight: 600;
margin-bottom: 14px;
display: block;
}
.hero h1 {
font-size: clamp(2.1rem, 4.6vw, 3.4rem);
max-width: 15ch;
margin-bottom: 0.4em;
}
.hero-sub {
font-size: 1.08rem;
max-width: 56ch;
color: rgba(245,243,239,0.85);
margin-bottom: 1.6em;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
font-family: var(--sans);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--radius);
border: 1px solid var(--bronze);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-primary {
background: var(--bronze);
color: var(--navy);
}
.btn-primary:hover { background: var(--bronze-light); border-color: var(--bronze-light); }
.btn-ghost {
background: transparent;
color: var(--on-navy);
border-color: rgba(245,243,239,0.4);
}
.btn-ghost:hover { border-color: var(--bronze-light); color: var(--bronze-light); }
.btn-dark {
border-color: var(--navy);
color: var(--navy);
background: transparent;
}
.btn-dark:hover { background: var(--navy); color: var(--on-navy); }
/* ==========================================================================
SECTIONS
========================================================================== */
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--panel { background: var(--navy-panel); color: var(--on-navy); }
.section--panel h2, .section--panel h3 { color: var(--on-navy); }
.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-head .eyebrow { color: var(--bronze); }
.section--panel .section-head .eyebrow { color: var(--bronze-light); }
.lede { font-size: 1.08rem; color: #52514c; }
.section--panel .lede { color: rgba(245,243,239,0.82); }
hr.divider {
border: none;
border-top: 1px solid rgba(43,43,40,0.12);
margin: 3.5rem 0;
}
.section--panel hr.divider { border-top-color: rgba(245,243,239,0.15); }
/* three-slash divider mark, used as the site's structural signature */
.slash-mark {
display: flex;
gap: 6px;
margin-bottom: 1.4rem;
}
.slash-mark span {
width: 3px;
height: 26px;
background: var(--bronze);
transform: skewX(-18deg);
}
.section--panel .slash-mark span,
.on-navy .slash-mark span { background: var(--bronze-light); }
/* ==========================================================================
GRIDS / CARDS
========================================================================== */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
.grid-3, .grid-2 { grid-template-columns: 1fr; }
}
.card {
background: #fff;
border: 1px solid rgba(43,43,40,0.08);
padding: 32px 28px;
border-radius: var(--radius);
}
.section--panel .card {
background: rgba(245,243,239,0.04);
border-color: rgba(245,243,239,0.12);
}
.card-icon { width: 42px; height: 42px; margin-bottom: 18px; }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5em; }
.card p { font-size: 0.95rem; color: #52514c; margin-bottom: 0; }
.section--panel .card p { color: rgba(245,243,239,0.78); }
/* Requirement-status rows (src/views/partials/progressStatusRow.ejs) —
green check / red X / amber partial-fill ring, clearly distinct at a
glance without relying on color alone (check vs X vs empty ring). */
.progress-status-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(43,43,40,0.07);
}
.progress-status-row:last-child { border-bottom: none; }
.progress-status-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.progress-status-icon svg { width: 13px; height: 13px; }
.progress-status-icon--met { background: #2f8f4e; color: #fff; }
.progress-status-icon--none { background: #c23b3b; color: #fff; }
.progress-status-icon--partial {
background: conic-gradient(var(--bronze) calc(var(--pct, 0) * 1%), rgba(184,134,60,0.18) 0);
}
/* Toggleable status rows (Leadership Sign-Off, Central Chair Approval)
render as a real on/off slider switch instead of the static badge
above — a slider unambiguously reads as interactive at rest (unlike a
colored circle that only differs on hover), which is the whole point:
nothing here should be discoverable only by accident. */
.toggle-switch {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
border-radius: 999px;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
background: rgba(43,43,40,0.18);
transition: background 0.15s ease;
}
.toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: left 0.15s ease;
}
.toggle-switch--on { background: var(--bronze); }
.toggle-switch--on::after { left: 22px; }
.toggle-switch:hover { filter: brightness(0.93); }
.toggle-switch:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.progress-status-label { flex: 1; font-size: 0.92rem; }
.progress-status-value { font-size: 0.83rem; font-weight: 600; color: #52514c; white-space: nowrap; }
/* Inline "Manage X"/"View X" links directly under a progress-status-row
(progression-chart.ejs only — Task 2 #3) — indented to align with the
row's label text (24px icon + 12px gap above), sitting close beneath
its own row rather than reading as a new, separate line item. No
font-size here (Task 4 #2) — .link-classic below now owns that
directly, so it renders identically regardless of what wraps it. */
.inline-link-row { padding-left: 36px; margin-top: -6px; }
.card-label {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
margin-bottom: 10px;
}
/* ==========================================================================
PROFILE HEADER (Dashboard — aesthetics phase 3)
========================================================================== */
.profile-header {
display: flex;
align-items: center;
gap: 24px;
}
.profile-header .rank-mark { flex-shrink: 0; }
.profile-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: rgba(43,43,40,0.06);
}
.profile-header-info h1 { margin-bottom: 4px; }
.profile-header-id {
font-family: var(--sans);
font-size: 0.95rem;
letter-spacing: 0.04em;
color: var(--bronze);
font-weight: 700;
margin-bottom: 2px;
}
.profile-header-rank {
font-size: 0.92rem;
color: #6b6a63;
}
@media (max-width: 600px) {
.profile-header { gap: 16px; }
.profile-header .rank-mark { width: 64px; height: 64px; }
.profile-header .profile-avatar { width: 64px; height: 64px; }
}
/* Two-column field grid: a fixed marker-column width shared by every
.field-grid instance (Contact and Professional both use it) is what
makes the marker/value boundary land at the same x-coordinate across
separate .card elements — grid's own max-content sizing is per-instance
and would NOT stay aligned between two independent grids on its own. */
.field-grid {
display: grid;
grid-template-columns: 130px 1fr;
column-gap: 16px;
}
.field-marker {
grid-column: 1;
justify-self: end;
align-self: center;
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
border-bottom: 1px solid rgba(43,43,40,0.07);
border-right: 1px solid rgba(43,43,40,0.1);
padding-right: 16px;
margin-right: -16px;
}
.field-marker-label {
color: var(--bronze);
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
text-align: right;
}
.field-icon { width: 20px; height: 20px; flex-shrink: 0; margin-bottom: 0; }
.field-value {
grid-column: 2;
justify-self: stretch;
align-self: center;
padding: 10px 0;
border-bottom: 1px solid rgba(43,43,40,0.07);
font-size: 0.95rem;
min-width: 0;
overflow-wrap: anywhere;
}
.field-grid > .field-marker:nth-last-child(2),
.field-grid > .field-value:last-child {
border-bottom: none;
}
@media (max-width: 500px) {
.field-grid { grid-template-columns: 90px 1fr; column-gap: 10px; }
.field-marker-label { font-size: 0.64rem; }
}
/* ==========================================================================
TABLES (Governance page — information-dense treatment)
========================================================================== */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.93rem;
background: #fff;
}
.data-table th, .data-table td {
text-align: left;
padding: 14px 18px;
border-bottom: 1px solid rgba(43,43,40,0.1);
vertical-align: top;
}
.data-table th {
font-family: var(--sans);
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bronze);
font-weight: 700;
border-bottom: 2px solid var(--bronze);
}
.data-table tr:last-child td { border-bottom: none; }
.step-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
}
.step-list li {
counter-increment: step;
display: grid;
grid-template-columns: 44px 1fr;
gap: 18px;
padding: 18px 0;
border-bottom: 1px solid rgba(43,43,40,0.1);
}
.section--panel .step-list li { border-bottom-color: rgba(245,243,239,0.12); }
.step-list li:last-child { border-bottom: none; }
.step-list li::before {
content: counter(step);
font-family: var(--serif);
font-weight: 600;
font-size: 1.2rem;
color: var(--bronze);
line-height: 1.4;
}
.info-block {
background: var(--light);
border-left: 3px solid var(--bronze);
padding: 22px 26px;
font-size: 0.95rem;
}
.section--panel .info-block { background: rgba(245,243,239,0.05); }
/* ==========================================================================
COMPACT ROW LIST (aesthetics phase 2 — Chapters, Meetings, Resources, Admin)
Each item is a single 1-2 line row instead of a full .card. A row is
either a plain div (kebab menu supplies its action) or an (whole row
links to a detail page) — same list/item classes either way.
========================================================================== */
.row-list {
border: 1px solid rgba(43,43,40,0.08);
border-radius: var(--radius);
overflow: hidden;
background: #fff;
}
.row-list-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-bottom: 1px solid rgba(43,43,40,0.08);
text-decoration: none;
color: inherit;
}
.row-list-item:last-child { border-bottom: none; }
a.row-list-item:hover { background: rgba(184,134,60,0.06); }
.row-list-thumb {
width: 40px;
height: 40px;
border-radius: 4px;
object-fit: cover;
flex-shrink: 0;
background: rgba(43,43,40,0.06);
}
/* Profile photos in a row-list (Directory, Admin Roster) — same thumb
sizing, circular crop to distinguish a person from a resource cover. */
.row-list-thumb-round { border-radius: 50%; }
.row-list-main {
flex: 1;
min-width: 0;
}
.row-list-title {
display: block;
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-list-sub {
display: block;
font-size: 0.82rem;
color: #6b6a63;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-list-badge {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bronze);
font-weight: 700;
flex-shrink: 0;
white-space: nowrap;
}
.row-list-empty { padding: 16px; color: #6b6a63; font-size: 0.9rem; }
/* Kebab (⋮) menu — same