/* ========================================================= Zeal Portal — Tier 3 (Functional) Dense, repetitive work. Tools staff use many times a day. Content is the point; brand appears as motif and craft signal. Usage: standard Tier 3 external-facing variant (reserved; no page yet) Pages using this tier: - User Admin - Stillages (the dense T3 variant) - Label Maker (full app and project-tab embed) - Label Assets - Portal Updates - Future calendars, forms, workflow surfaces Red flags (drifting out of tier): - Writing a section lead → drifting to Tier 2 - Avatar bigger than 24px → drifting to Tier 2 - Italics or pull-quotes → drifting to Tier 2 or 1 - Added a "why we ask" form explanation → probably Tier 2.5 (use .tier-functional.is-warm instead, but most cases want expressive) Phase 1 note: this file is not yet loaded by any page. It declares tier-level custom properties that PR F's components read from, and sets structural defaults. The dense-table component, toolbar, filter controls, and status dots arrive in PR F. ========================================================= */ .tier-functional { /* Tier-level tokens consumed by components + page CSS */ --page-bg: var(--surface); /* softer than paper */ --page-fg: var(--ink); --crown-pad-y: var(--s-4); /* 16px — minimal, sticky toolbar */ --crown-gap: var(--s-3); --crown-title-family: var(--font-std); --crown-title-weight: var(--w-medium); --crown-title-size: var(--t-h5); /* 21px std sentence case */ --crown-title-case: none; --card-pad: var(--s-3); /* 12px */ --section-gap: var(--s-5); /* 24px between content blocks */ --row-h: 30px; /* 28–32px tabular */ --body-measure: var(--content-wide); /* 1280px — room for dense tables */ background: var(--page-bg); color: var(--page-fg); } /* --- No full-bleed hero. No editorial components. Status dots and state pills are the decorative vocabulary. --- */ /* --- Tier-3 structural defaults --- Inert until a page carries the class. The dense-table pattern, toolbar with filter + primary action, bulk-select mode, and keyboard-nav patterns all land in PR F. */ .tier-functional .crown { padding-block: var(--crown-pad-y); } .tier-functional .content { max-width: var(--body-measure); margin-inline: auto; } /* Tabular numerals for number-heavy tables sit best at this tier. */ .tier-functional td, .tier-functional th, .tier-functional .num { font-variant-numeric: tabular-nums; } /* ========================================================= Dense table — Tier 3 list / audit / pages / labels Sticky header, hairline rules, hover row, hover-revealed actions, optional sort indicator. Pairs with the bulk-select pattern in destructive-actions.css. Foreseen by CLAUDE.md as deferred PR F work. ========================================================= */ .tier-functional .table { width: 100%; border-collapse: collapse; font-family: var(--font-std); font-size: var(--t-small, 13px); color: var(--ink, #000); } .tier-functional .table thead th { font-family: var(--font-cd); font-size: var(--t-micro, 11px); font-weight: var(--w-medium, 500); letter-spacing: var(--track-wide, 0.08em); text-transform: uppercase; color: var(--ink-3, rgba(0, 0, 0, 0.55)); text-align: left; padding: 10px 12px; background: var(--page-bg, var(--surface)); border-bottom: 1px solid var(--ink, #000); white-space: nowrap; } .tier-functional .table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.08)); height: var(--row-h, 30px); vertical-align: middle; } .tier-functional .table tbody tr:hover { background: var(--warm, #f2ede2); } .tier-functional .table tbody tr.is-selected { background: var(--accent-soft, color-mix(in oklab, var(--zeal-orange) 22%, transparent)); } /* Hover-revealed action cluster inside a cell */ .tier-functional .table .tr__actions { display: inline-flex; align-items: center; gap: var(--s-1, 4px); opacity: 0; transition: opacity var(--dur-fast) var(--ease-std); } .tier-functional .table tr:hover .tr__actions, .tier-functional .table tr:focus-within .tr__actions { opacity: 1; } @media (hover: none) { .tier-functional .table .tr__actions { opacity: 0.6; } } /* Sort-direction indicator on header cells */ .tier-functional .table thead th[aria-sort] { cursor: pointer; } .tier-functional .table thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--ink-2, rgba(0, 0, 0, 0.72)); } .tier-functional .table thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--ink-2, rgba(0, 0, 0, 0.72)); } /* Sticky-header modifier — pairs with a sticky toolbar at top:0/48px; the 94px offset lands the header just below ribbon + toolbar. */ .tier-functional .table--sticky-header thead th { position: sticky; top: 94px; z-index: 2; }