/* ========================================================= Zeal Portal — Tier 2 (Expressive) The workspace tier. Pages where staff do meaningful work but the work is interpretive or project-focused. Usage: standard Tier 2 external-facing variant (profile page today) Pages using this tier: - Projects list - Project detail - Opportunity detail - Company Info - Margin Impact Calculator - Studio Manager (Tier 2 hero + Tier 3 calendar — mixed) - Roadmap - Profile (warm register) - Playbook detail pages (PB-01 through PB-07) Red flags (drifting out of tier): - Body as stylised as the crown → drifting to Tier 1 - Crown shrunk to just a breadcrumb → drifting to Tier 3 - Editorial pull-quotes mid-body → drifting to Tier 1 ========================================================= */ .tier-expressive { /* Tier-level tokens consumed by components + page CSS */ --page-bg: var(--paper); --page-fg: var(--ink); --crown-pad-y: var(--s-5); /* 24px — compact but distinct */ --crown-gap: var(--s-4); --crown-title-family: var(--font-ex); --crown-title-weight: var(--w-bold); --crown-title-size: var(--t-h1); /* 60px lowercase ex */ --crown-title-case: lowercase; --card-pad: var(--s-5); /* 24px */ --section-gap: var(--s-6); /* 32px between content blocks */ --row-h: 44px; /* 40–48px range */ --body-measure: var(--content-std); /* 1040px default work canvas */ background: var(--page-bg); color: var(--page-fg); } /* --- Status pills are allowed at this tier; reserved for compliance, verification, phase state. --- */ /* --- Tier-2 structural defaults --- Inert until a page carries the class. Full component rules (crown layout, card patterns, row tables, status pills) arrive in PR F. */ .tier-expressive .crown { padding-block: var(--crown-pad-y); } .tier-expressive .content { max-width: var(--body-measure); margin-inline: auto; } .pb-detail { /* Internal tokens — page can override */ --pb-pad-x: 48px; --pb-rule: rgba(0, 0, 0, 0.10); --pb-rule-2: rgba(0, 0, 0, 0.18); --pb-ink-2: rgba(0, 0, 0, 0.72); --pb-ink-3: rgba(0, 0, 0, 0.55); --pb-ink-4: rgba(0, 0, 0, 0.38); --pb-paper-2: var(--zeal-warm-grey-25, #f5f0eb); --pb-accent: var(--zeal-orange-digital); --pb-roles-top: 67px; /* ribbon height — see ribbon.css */ --pb-section-anchor: 140px; /* scroll-margin-top so anchors clear sticky chrome */ font-family: var(--font-std); color: var(--ink); background: var(--paper); } /* Heading reset within the playbook scope. legacy/portal-system.css forces h1..h4 to var(--p-ink) and adds margin. Editorial sections own their own rhythm. Specificity 0,0,2 to win cleanly. */ :where(.pb-detail) h1, :where(.pb-detail) h2, :where(.pb-detail) h3, :where(.pb-detail) h4, :where(.pb-detail) h5 { color: inherit; margin: 0; } /* p-main inside a playbook detail page should not constrain or pad — sections handle their own width and padding. */ body.tier-expressive > main.p-main:has(.pb-detail) { max-width: none; padding: 0; margin: 0; background: transparent; } /* ---------- Crown ---------- */ .pb-detail .pb-crown { padding: 72px var(--pb-pad-x) 48px; display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: end; } .pb-detail[data-hero="paper"] .pb-crown { background: var(--paper); border-bottom: 1px solid var(--ink); } .pb-detail[data-hero="black"] .pb-crown { background: var(--zeal-black); color: var(--paper); } .pb-detail .pb-crown__num { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 13px; letter-spacing: 0.14em; color: var(--pb-accent); margin-bottom: 16px; } .pb-detail .pb-crown__num::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--pb-accent); vertical-align: middle; margin-right: 10px; } .pb-detail .pb-crown__num b { color: inherit; font-weight: var(--w-medium); } .pb-detail[data-hero="paper"] .pb-crown__num b { color: var(--ink); } .pb-detail[data-hero="black"] .pb-crown__num b { color: var(--paper); } .pb-detail .pb-crown h1 { font-family: var(--font-ex); font-weight: var(--w-black); font-size: clamp(64px, 9vw, 140px); line-height: 0.86; letter-spacing: -0.045em; text-transform: lowercase; text-wrap: balance; } .pb-detail .pb-crown h1 em { font-family: var(--font-ex); font-weight: var(--w-thin); font-style: normal; color: var(--pb-accent); } .pb-detail .pb-crown__sub { font-family: var(--font-std); font-size: 17px; line-height: 1.5; max-width: 42ch; text-wrap: pretty; margin: 0; } .pb-detail[data-hero="paper"] .pb-crown__sub { color: var(--pb-ink-2); } .pb-detail[data-hero="paper"] .pb-crown__sub b { color: var(--ink); font-weight: var(--w-medium); } .pb-detail[data-hero="black"] .pb-crown__sub { color: rgba(255, 255, 255, 0.82); } .pb-detail[data-hero="black"] .pb-crown__sub b { color: var(--paper); font-weight: var(--w-medium); } .pb-detail .pb-crown__meta { grid-column: 1 / -1; margin-top: 56px; padding-top: 20px; display: flex; gap: 40px; font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.06em; flex-wrap: wrap; } .pb-detail[data-hero="paper"] .pb-crown__meta { border-top: 1px solid var(--pb-rule); color: var(--pb-ink-3); } .pb-detail[data-hero="black"] .pb-crown__meta { border-top: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.55); } .pb-detail .pb-crown__meta > div { min-width: 120px; } .pb-detail .pb-crown__meta span { display: block; margin-bottom: 3px; font-size: 10px; letter-spacing: 0.08em; } .pb-detail[data-hero="paper"] .pb-crown__meta span { color: var(--pb-ink-4); } .pb-detail[data-hero="black"] .pb-crown__meta span { color: rgba(255, 255, 255, 0.4); } .pb-detail .pb-crown__meta b { font-family: var(--font-std); font-size: 14px; font-weight: var(--w-medium); letter-spacing: 0; } .pb-detail[data-hero="paper"] .pb-crown__meta b { color: var(--ink); } .pb-detail[data-hero="black"] .pb-crown__meta b { color: var(--paper); } /* ---------- Role tabs (sticky under ribbon) ---------- */ .pb-detail .pb-roles { position: sticky; top: var(--pb-roles-top); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 0 var(--pb-pad-x); display: flex; align-items: center; gap: 28px; } .pb-detail .pb-roles__label { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.08em; color: var(--pb-ink-3); padding: 14px 0; text-transform: lowercase; } .pb-detail .pb-roles__label::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--pb-accent); vertical-align: middle; margin-right: 10px; } .pb-detail .pb-roles__tabs { display: flex; gap: 0; flex: 1; } .pb-detail .pb-roles__tab { padding: 14px 18px; font-family: var(--font-std); font-size: 14px; color: var(--pb-ink-3); background: transparent; border: 0; cursor: pointer; letter-spacing: 0; position: relative; font-weight: var(--w-regular); text-transform: lowercase; } .pb-detail .pb-roles__tab:hover { color: var(--ink); } .pb-detail .pb-roles__tab.is-on { color: var(--ink); font-weight: var(--w-medium); } .pb-detail .pb-roles__tab.is-on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--pb-accent); } .pb-detail .pb-roles__tab small { font-family: var(--font-cd); font-size: 10px; color: var(--pb-ink-4); margin-left: 6px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; vertical-align: 1px; } /* ---------- Page grid (content + TOC) ---------- */ .pb-detail .pb-page { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; padding: 56px var(--pb-pad-x) 96px; max-width: 1400px; margin: 0 auto; } .pb-detail .pb-toc { position: sticky; top: 124px; align-self: start; font-family: var(--font-cd); font-size: 12px; letter-spacing: 0.02em; padding-top: 4px; } .pb-detail .pb-toc__label { font-size: 10px; letter-spacing: 0.12em; color: var(--pb-ink-3); text-transform: uppercase; margin-bottom: 12px; padding-left: 12px; } .pb-detail .pb-toc__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--pb-rule); } .pb-detail .pb-toc__item { padding: 6px 12px; color: var(--pb-ink-3); border-left: 2px solid transparent; margin-left: -1px; transition: color .15s, border-color .15s; font-family: var(--font-std); font-size: 13px; letter-spacing: 0; text-decoration: none; } .pb-detail .pb-toc__item:hover { color: var(--ink); } .pb-detail .pb-toc__item.is-on { color: var(--ink); border-left-color: var(--pb-accent); font-weight: var(--w-medium); } /* ---------- Sections ---------- */ .pb-detail section[data-section] { padding: 8px 0 64px; scroll-margin-top: var(--pb-section-anchor); } .pb-detail section[data-section] + section[data-section] { border-top: 1px solid var(--pb-rule); padding-top: 56px; } .pb-detail .pb-sh { margin-bottom: 32px; display: flex; align-items: baseline; gap: 24px; } .pb-detail .pb-sh__num { font-family: var(--font-cd); font-weight: var(--w-medium); font-size: 11px; letter-spacing: 0.12em; color: var(--pb-accent); font-variant-numeric: tabular-nums; width: 44px; flex-shrink: 0; padding-top: 4px; } .pb-detail .pb-sh h2 { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.025em; text-transform: lowercase; text-wrap: balance; } .pb-detail .pb-sh__tag { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.08em; color: var(--pb-ink-4); background: var(--pb-paper-2); padding: 3px 8px; border-radius: 2px; margin-left: auto; text-transform: lowercase; } .pb-detail .pb-lede { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); max-width: 60ch; margin: 0 0 8px; text-wrap: pretty; padding-left: 68px; } .pb-detail .pb-body { padding-left: 68px; max-width: 72ch; } .pb-detail .pb-body p { font-family: var(--font-std); font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 16px; text-wrap: pretty; } .pb-detail .pb-body p.small { font-size: 14px; color: var(--pb-ink-2); } .pb-detail .pb-body strong { font-weight: var(--w-medium); } .pb-detail .pb-body em { font-style: normal; color: var(--pb-accent); font-weight: var(--w-medium); } .pb-detail .pb-body a { color: var(--pb-accent); text-decoration: underline; text-underline-offset: 3px; } .pb-detail .pb-body a:hover { color: var(--ink); } /* ---------- Stack (numbered tools) ---------- */ .pb-detail .pb-stack { padding-left: 68px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--pb-rule); } .pb-detail .pb-stack__row { display: grid; grid-template-columns: 40px 1fr 2fr auto; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--pb-rule); align-items: center; } .pb-detail .pb-stack__num { font-family: var(--font-cd); font-size: 12px; color: var(--pb-ink-4); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .pb-detail .pb-stack__name { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 22px; letter-spacing: -0.015em; text-transform: lowercase; } .pb-detail .pb-stack__desc { font-family: var(--font-std); font-size: 14px; color: var(--pb-ink-2); line-height: 1.45; } .pb-detail .pb-stack__tag { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.08em; color: var(--pb-ink-3); padding: 3px 8px; border: 1px solid var(--pb-rule-2); border-radius: 2px; white-space: nowrap; text-transform: lowercase; } .pb-detail .pb-stack__tag.is-primary, .pb-detail .pb-stack__tag.is-auto { color: var(--pb-accent); border-color: var(--pb-accent); } /* ---------- Callout ---------- */ .pb-detail .pb-callout { padding-left: 68px; margin: 24px 0; } .pb-detail .pb-callout__inner { max-width: 72ch; padding: 18px 22px; background: rgba(255, 125, 51, 0.06); border-left: 3px solid var(--pb-accent); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .pb-detail .pb-callout__inner .pb-callout__mark { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.1em; color: var(--pb-accent); font-weight: var(--w-medium); padding-top: 2px; white-space: nowrap; text-transform: uppercase; } .pb-detail .pb-callout__inner p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pb-ink-2); font-family: var(--font-std); } .pb-detail .pb-callout__inner p b { color: var(--ink); font-weight: var(--w-medium); } /* ---------- Quick reference (if / then) ---------- */ .pb-detail .pb-qr { padding-left: 68px; max-width: 72ch; } .pb-detail .pb-qr__row { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--pb-rule); } .pb-detail .pb-qr__row:first-child { border-top: 1px solid var(--pb-rule); } .pb-detail .pb-qr__if { font-family: var(--font-std); font-size: 15px; color: var(--ink); font-weight: var(--w-medium); } .pb-detail .pb-qr__arrow { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.06em; color: var(--pb-accent); padding-top: 2px; } .pb-detail .pb-qr__then { font-family: var(--font-std); font-size: 15px; color: var(--pb-ink-2); line-height: 1.55; } .pb-detail .pb-qr__then b { color: var(--ink); font-weight: var(--w-medium); } /* ---------- FAQ ---------- */ .pb-detail .pb-faq { padding-left: 68px; max-width: 72ch; } .pb-detail .pb-faq__item { padding: 20px 0; border-bottom: 1px solid var(--pb-rule); } .pb-detail .pb-faq__item:first-child { border-top: 1px solid var(--pb-rule); } .pb-detail .pb-faq__q { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 18px; letter-spacing: -0.01em; margin: 0 0 8px; text-transform: lowercase; } .pb-detail .pb-faq__a { font-family: var(--font-std); font-size: 15px; line-height: 1.55; color: var(--pb-ink-2); margin: 0; max-width: 56ch; text-wrap: pretty; } .pb-detail .pb-faq__a b { color: var(--ink); font-weight: var(--w-medium); } /* ---------- Change log ---------- */ .pb-detail .pb-log { padding-left: 68px; } .pb-detail .pb-log table { border-collapse: collapse; width: 100%; max-width: 860px; font-family: var(--font-std); font-size: 14px; } .pb-detail .pb-log th, .pb-detail .pb-log td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--pb-rule); vertical-align: baseline; font-weight: var(--w-regular); } .pb-detail .pb-log th { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.1em; color: var(--pb-ink-3); font-weight: var(--w-medium); border-bottom: 1px solid var(--ink); padding-top: 0; padding-bottom: 10px; text-transform: uppercase; } .pb-detail .pb-log td.v { font-family: var(--font-cd); color: var(--pb-accent); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .pb-detail .pb-log td.d { color: var(--pb-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .pb-detail .pb-log td.a { color: var(--ink); font-weight: var(--w-medium); white-space: nowrap; } /* ---------- Stub (content to come) ---------- */ .pb-detail .pb-stub { padding-left: 68px; max-width: 72ch; } .pb-detail .pb-stub__card { border: 1px dashed var(--pb-rule-2); padding: 18px 22px; background: var(--pb-paper-2); display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .pb-detail .pb-stub__lbl { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.12em; color: var(--pb-ink-4); font-weight: var(--w-medium); text-transform: uppercase; } .pb-detail .pb-stub__txt { font-family: var(--font-std); font-size: 14px; color: var(--pb-ink-2); margin: 0; line-height: 1.5; } .pb-detail .pb-stub__txt b { color: var(--ink); font-weight: var(--w-medium); } .pb-detail .pb-stub__owner { font-family: var(--font-cd); font-size: 11px; letter-spacing: 0.06em; color: var(--pb-ink-3); text-transform: uppercase; white-space: nowrap; } /* ---------- Footer / cross-links ---------- */ .pb-detail .pb-footer { margin-top: 32px; padding: 48px var(--pb-pad-x) 96px; background: var(--pb-paper-2); border-top: 1px solid var(--ink); } .pb-detail .pb-footer__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; max-width: 1400px; margin: 0 auto; } .pb-detail .pb-footer__cell { display: flex; flex-direction: column; gap: 10px; } .pb-detail .pb-footer__cell.center { text-align: center; align-items: center; } .pb-detail .pb-footer__cell.end { text-align: right; align-items: flex-end; } .pb-detail .pb-footer__lbl { font-family: var(--font-cd); font-size: 10px; letter-spacing: 0.12em; color: var(--pb-ink-3); text-transform: uppercase; } .pb-detail .pb-footer__link { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 24px; letter-spacing: -0.015em; text-transform: lowercase; color: var(--ink); transition: color .15s; text-decoration: none; } .pb-detail .pb-footer__link:hover { color: var(--pb-accent); } .pb-detail .pb-footer__link small { font-family: var(--font-cd); font-size: 11px; color: var(--pb-ink-3); letter-spacing: 0.04em; font-weight: var(--w-medium); display: block; text-transform: uppercase; margin-bottom: 4px; } .pb-detail .pb-footer__related { display: flex; flex-direction: column; gap: 6px; } .pb-detail .pb-footer__related a { font-family: var(--font-std); font-size: 14px; color: var(--pb-ink-2); text-decoration: none; } .pb-detail .pb-footer__related a:hover { color: var(--pb-accent); } /* ---------- Role filtering ---------- */ .pb-detail [data-roles]:not(.is-visible) { display: none; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .pb-detail { --pb-pad-x: 20px; } .pb-detail .pb-page { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; } .pb-detail .pb-toc { display: none; } .pb-detail .pb-crown { grid-template-columns: 1fr; padding-top: 48px; gap: 32px; } .pb-detail .pb-sh { flex-direction: column; gap: 8px; align-items: flex-start; } .pb-detail .pb-sh__tag { margin-left: 0; } .pb-detail .pb-lede, .pb-detail .pb-body, .pb-detail .pb-stack, .pb-detail .pb-callout, .pb-detail .pb-qr, .pb-detail .pb-faq, .pb-detail .pb-log, .pb-detail .pb-stub { padding-left: 0; } .pb-detail .pb-footer__row { grid-template-columns: 1fr; } .pb-detail .pb-footer__cell.end { text-align: left; align-items: flex-start; } .pb-detail .pb-footer__cell.center { text-align: left; align-items: flex-start; } .pb-detail .pb-roles { overflow-x: auto; gap: 0; } .pb-detail .pb-roles__label { white-space: nowrap; padding-right: 16px; } }