/* Portal CSS part: visual standardisation (2026-04-17) and the April 2026 fix waves 3 to 8. */
/* Split from portal.css (Phase 6): linked straight after portal.css and the earlier portal-*.css parts, in this order, so the cascade is unchanged. */
/* =========================================================================
Client Portal — Visual Standardisation (2026-04-17)
Loads LAST on every client portal HTML file.
Brings the portal surfaces (login, dashboard, project landing, project
detail, review) into the shared Revelstoke Glass system:
· Plus Jakarta Sans object headings with Inter body and control copy
· JetBrains Mono only for compact metadata and timecodes
· Rectangular 10px controls with 40px default / 48px prominent heights
· G2 neutral glass panels with 14px radii and restrained depth
· Orange reserved for primary action and brand emphasis
· Green reserved for real status and subtle environmental light
Brand tokens (logo, primary hero colour) are still sourced from brand.css
/ theme.css per the multi-brand system — this file ONLY touches platform
chrome that should be uniform across every page.
========================================================================= */
:where(body.portal-page, body.portal-page.review-page, body.portal-page.project-landing-page) {
--client-type-display: var(--rf-type-heading-family);
--client-type-body: var(--rf-type-client-family, 'Inter', system-ui, -apple-system, sans-serif);
--client-type-technical: var(--rf-type-client-technical-family, 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace);
--client-accent: var(--orange);
--client-canvas: #0a0f0e;
--client-canvas-deep: #070b0a;
--client-panel-solid: #0f1614;
--client-brand-text: var(--cream);
--client-brand-text-muted: rgba(var(--cream-rgb), 0.58);
--client-brand-text-dim: rgba(var(--cream-rgb), 0.38);
--client-auth-support-text: rgba(var(--cream-rgb),0.62);
--client-danger-text: rgba(255,80,60,0.90);
--client-border-subtle: rgba(var(--cream-rgb), 0.08);
--client-border-card: rgba(var(--cream-rgb), 0.14);
--client-review-text: rgba(var(--rf-white-rgb), 0.88);
--client-review-muted: rgba(var(--rf-white-rgb), 0.60);
}
/* -------------------------------------------------------------------------
1. GLOBAL TYPOGRAPHY — platform fonts on every portal surface.
------------------------------------------------------------------------- */
body.portal-page,
body.portal-page.review-page,
body.portal-page.project-landing-page {
font-family: var(--client-type-body);
color: var(--client-brand-text);
letter-spacing: -0.005em;
}
body.portal-page h1, body.portal-page h2, body.portal-page h3,
body.portal-page.review-page h1, body.portal-page.review-page h2, body.portal-page.review-page h3,
body.portal-page.project-landing-page h1, body.portal-page.project-landing-page h2, body.portal-page.project-landing-page h3,body.portal-page
.portal-client-name,body.portal-page
.portal-entry-title,body.portal-page
.portal-gate-title {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
line-height: var(--rf-type-leading-1-22);
}
/* Small caps labels (FORMAT, VERSION, FEEDBACK, etc.) — JetBrains Mono. */
body.portal-page .portal-label,body.portal-page
.portal-selector-label,body.portal-page
.portal-selector-helper,body.portal-page
.review-sidebar-section-title,body.portal-page
.portal-format-pill-label,body.portal-page
.portal-version-note,body.portal-page
.portal-resource-type,body.portal-page
.portal-kind-label,body.portal-page
.section-label,body.portal-page
.portal-status-label {
font-family: var(--client-type-technical);
font-size: var(--rf-type-size-11px, 11px);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--client-accent);
--rf-type-heading-size: var(--rf-type-size-11px);
}
/* -------------------------------------------------------------------------
2. HALFTONE WORDMARK — a small reusable SVG-bearing slot.
Any portal page can drop in a ``
and the inline script below fills it with the 300×100 halftone SVG.
Same spec as the admin Drop title so the platform feels coherent.
------------------------------------------------------------------------- */
@media (max-width: 720px) {
}
/* -------------------------------------------------------------------------
3. PILL CTA BUTTONS — match design bible primary action.
Applied to any element with .rf-pv-btn OR to the legacy portal/review
classes so we don't need to touch every HTML file.
------------------------------------------------------------------------- */
/* Primary (gold → orange gradient) */
/* Secondary (glass outline) */
/* Review approval footer: keep the two actions in stable columns and place the
status line below them. The base footer was a single flex row, which allowed
the status element and adjacent buttons to overlap hit targets in the review
sidebar. */
body.portal-page.review-page .approval-buttons {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
overflow: visible;
}
body.portal-page.review-page .approval-buttons .approval-status {
grid-column: 1 / -1;
}
body.portal-page.review-page .team-approval-tracker {
grid-column: 1 / -1;
display: grid;
gap: 0.65rem;
padding: 0 0 0.15rem;
}
body.portal-page.review-page .team-approval-people {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
body.portal-page.review-page .team-approval-person {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(var(--cream-rgb), 0.1);
border-radius: 0.6rem;
background: rgba(var(--cream-rgb), 0.035);
color: rgba(var(--cream-rgb), 0.48);
font-size: 0.72rem;
}
body.portal-page.review-page .team-approval-person strong {
color: var(--client-brand-text, #f5f1e8);
}
body.portal-page.review-page .team-approval-state {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
text-align: right;
}
body.portal-page.review-page .team-approval-person.is-approved .team-approval-state {
color: var(--rf-tone-success-ink);
}
body.portal-page.review-page .team-approval-person.is-changes .team-approval-state {
color: var(--orange);
}
body.portal-page.review-page .team-approval-tracker > p {
margin: 0;
color: rgba(var(--cream-rgb), 0.58);
font-size: 0.72rem;
}
@media (max-width: 520px) {
body.portal-page.review-page .team-approval-people {
grid-template-columns: 1fr;
}
}
/* Approve button — V6 uses the orange gradient from the prototype */
/* Request changes — only primary (non-secondary) variant gets the orange fill.
When the button also carries .approval-btn-secondary it must stay neutral glass
so APPROVE remains the sole saturated-orange CTA. */
/* Request Changes — V6 uses ghost style from the prototype */
/* -------------------------------------------------------------------------
4. PILL SEGMENT CONTROLS — filter rails like ALL / UNRESOLVED / RESOLVED.
------------------------------------------------------------------------- */
/* Filter tabs — V6 uses inline tab style, not pill segment */
/* -------------------------------------------------------------------------
5. GLASS CARDS — applied to major portal surfaces.
------------------------------------------------------------------------- */
/* Client panel material is owned by /css/shared/client-surfaces.css. */
/* -------------------------------------------------------------------------
6. REVIEW PAGE — specific polish.
------------------------------------------------------------------------- */
body.portal-page.review-page {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--orange-rgb), 0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--client-canvas-deep) 0%, var(--client-canvas) 50%, var(--client-canvas-deep) 100%);
}
body.portal-page.review-page .review-bar {
font-family: var(--client-type-display);
}
body.portal-page.review-page .review-title {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
color: var(--client-brand-text);
--rf-type-heading-size: var(--rf-type-size-16px);
}
body.portal-page.review-page .review-version-dropdown {
font-family: var(--client-type-body);
font-size: var(--rf-type-size-13px, 13px);
background: color-mix(in srgb, var(--black) 35%, transparent);
border: 1px solid var(--client-border-card);
border-radius: var(--client-control-radius, 10px);
color: var(--client-brand-text);
padding: 6px 30px 6px 14px;
}
/* The badge itself is the shared .rf-badge (tone set by portal-review.js); only where it shows and its icon gap are local. */
body.portal-page.review-page #review-status-badge.review-status-badge {
display: inline-flex;
align-items: center;
gap: 0.45em;
}
body.portal-page.review-page .review-status-icon {
display: inline-flex;
width: 1em;
height: 1em;
flex: 0 0 auto;
}
body.portal-page.review-page .review-status-icon svg {
display: block;
width: 100%;
height: 100%;
}
body.portal-page.review-page .approval-status .review-status-icon {
width: 14px;
height: 14px;
}
body.portal-page.review-page .review-sidebar-section-title {
margin-bottom: 12px;
}
body.portal-page.review-page .review-note {
padding: 14px 16px;
margin-bottom: 12px;
}
body.portal-page.review-page .review-note-author {
font-family: var(--client-type-display);
font-weight: 700;
color: var(--client-brand-text);
}
body.portal-page.review-page .review-note-timecode {
font-family: var(--client-type-technical);
font-size: var(--rf-type-size-11px, 11px);
letter-spacing: 0.1em;
color: var(--client-accent);
background: rgba(var(--orange-rgb), 0.1);
border: 1px solid rgba(var(--orange-rgb), 0.3);
padding: 3px 8px;
border-radius: 6px;
}
/* -------------------------------------------------------------------------
7. PORTAL LOGIN (portal.html) — polish the entry card.
------------------------------------------------------------------------- */
body.portal-page .portal-entry,
body.portal-page:not(.review-page):not(.project-landing-page) .portal-entry {
padding: 48px 40px;
max-width: 460px;
}
body.portal-page .portal-entry-title,body.portal-page
.portal-entry-title {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
margin-bottom: 8px;
color: var(--client-brand-text);
--rf-type-heading-size: var(--rf-type-size-28px);
}
body.portal-page .portal-entry-subtitle,body.portal-page
.portal-entry-subtitle {
font-family: var(--client-type-body);
font-size: var(--rf-type-size-14px, 14px);
color: var(--client-auth-support-text);
margin-bottom: 28px;
line-height: 1.5;
max-width: none;
}
body.portal-page .portal-error,
body.portal-page .portal-gate .pw-modal-error {
color: var(--client-danger-text);
}
/* -------------------------------------------------------------------------
8. PORTAL DASHBOARD (portal-dashboard.html) — client header + project rail.
------------------------------------------------------------------------- */
body.portal-dashboard-page.portal-page {
display: block;
min-height: 100vh;
overflow-x: hidden;
background:
radial-gradient(circle at 72% 34%, rgba(var(--orange-rgb), 0.12), transparent 30%),
radial-gradient(circle at 22% 78%, rgba(var(--green-deep-rgb), 0.58), transparent 36%),
var(--black);
}
body.portal-dashboard-page.portal-page .work-bg-overlay {
opacity: 0.2;
}
body.portal-dashboard-page.portal-page .page-content {
min-height: 100vh;
}
body.portal-dashboard-page.portal-page .portal-body {
width: 100%;
}
body.portal-dashboard-page.portal-page .portal-shell-loading {
box-sizing: border-box;
width: min(100%, 34rem);
min-height: calc(100vh - 80px);
margin: 0 auto;
padding: var(--client-shell-gutter, 40px);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4, 16px);
color: var(--client-text, var(--text-primary));
text-align: left;
}
body.portal-dashboard-page.portal-page .portal-shell-loading-mark {
position: relative;
width: 10px;
height: 10px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--orange);
box-shadow: 0 0 0 6px rgba(var(--orange-rgb), 0.12);
}
body.portal-dashboard-page.portal-page .portal-shell-loading-copy {
display: grid;
gap: var(--space-1, 4px);
}
body.portal-dashboard-page.portal-page .portal-shell-loading h1,
body.portal-dashboard-page.portal-page .portal-shell-loading p {
margin: 0;
letter-spacing: 0;
text-transform: none;
}
body.portal-dashboard-page.portal-page .portal-shell-loading h1 {
color: var(--client-text, var(--text-primary));
font-weight: var(--rf-type-heading-weight);
line-height: var(--rf-type-leading-1-25);
--rf-type-heading-size: var(--rf-type-size-1-5rem);
}
body.portal-dashboard-page.portal-page .portal-shell-loading p {
color: var(--client-text-soft, rgba(var(--cream-rgb), 0.78));
font-size: var(--rf-type-size-0-9rem, 0.9rem);
line-height: 1.5;
}
body.portal-dashboard-page.portal-page .portal-dashboard {
width: min(100%, 1520px);
max-width: none;
margin: 0 auto;
padding: clamp(5rem, 7vw, 7rem) clamp(1rem, 3.6vw, 4.5rem) clamp(2.5rem, 5vw, 5.5rem);
}
body.portal-dashboard-page.portal-page .client-masthead {
padding: 0 0 clamp(3.25rem, 7vw, 5.5rem);
}
body.portal-dashboard-page.portal-page .client-logo {
max-width: min(24rem, 72vw);
max-height: 9rem;
opacity: 0.92;
filter: brightness(0) invert(1) drop-shadow(0 1.25rem 2.5rem color-mix(in srgb, var(--black) 35%, transparent));
}
body.portal-dashboard-page.portal-page .client-logo.portal-logo-svg {
filter: brightness(0) invert(1) drop-shadow(0 1.25rem 2.5rem color-mix(in srgb, var(--black) 35%, transparent));
}
body.portal-dashboard-page.portal-page #projects-section,
body.portal-dashboard-page.portal-page #resources-section,
body.portal-dashboard-page.portal-page #producer-section {
margin: 0 auto clamp(3rem, 6vw, 5rem);
width: min(100%, 1200px);
}
body.portal-dashboard-page.portal-page .section-label {
color: var(--client-accent);
margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
body.portal-dashboard-page.portal-page .section-label::after {
background: rgba(var(--cream-rgb), 0.1);
}
body.portal-dashboard-page.portal-page .film-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 2vw, 1.75rem);
margin-bottom: 0;
}
body.portal-dashboard-page.portal-page .film-card {
position: relative;
display: grid;
gap: 0.85rem;
min-width: 0;
color: var(--client-brand-text);
transition: transform 0.2s ease, opacity 0.2s ease;
}
body.portal-dashboard-page.portal-page .film-card:hover {
transform: translateY(-3px);
}
body.portal-dashboard-page.portal-page .film-thumb {
margin: 0;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(var(--cream-rgb), 0.04), rgba(var(--cream-rgb), 0.015)),
color-mix(in srgb, var(--black) 48%, transparent);
border: 1px solid rgba(var(--cream-rgb), 0.13);
box-shadow:
0 1.25rem 3rem color-mix(in srgb, var(--black) 36%, transparent),
0 0 0 1px color-mix(in srgb, var(--black) 28%, transparent);
}
body.portal-dashboard-page.portal-page .film-thumb::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(var(--rf-tone-neutral-rgb), 0.04), transparent 24%),
linear-gradient(0deg, color-mix(in srgb, var(--black) 12%, transparent), transparent 38%);
}
body.portal-dashboard-page.portal-page .film-thumb img {
display: block;
transform: translateZ(0);
}
body.portal-dashboard-page.portal-page .film-card:hover .film-thumb img {
transform: scale(1.025);
}
body.portal-dashboard-page.portal-page .film-title {
min-width: 0;
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
line-height: var(--rf-type-leading-1-2);
color: rgba(241,232,220,0.76);
text-wrap: balance;
--rf-type-heading-size: var(--rf-type-size-clamp-1rem-1-2vw-1-2rem);
}
body.portal-dashboard-page.portal-page .film-card:hover .film-title {
color: var(--client-brand-text);
}
body.portal-dashboard-page.portal-page .film-thumb-empty {
background:
linear-gradient(135deg, rgba(var(--cream-rgb), 0.05), rgba(var(--cream-rgb), 0.015)),
color-mix(in srgb, var(--black) 52%, transparent);
border: 0;
}
body.portal-dashboard-page.portal-page .film-thumb-initials {
color: rgba(var(--cream-rgb), 0.28);
}
body.portal-page .portal-header {
padding-top: 48px;
}
body.portal-page .portal-client-name {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
color: var(--client-brand-text);
line-height: var(--rf-type-leading-1-1);
--rf-type-heading-size: var(--rf-type-size-clamp-28px-4vw-44px);
}
body.portal-page .portal-label {
margin-bottom: 8px;
}
/* Project card in the rail — already glass-card via rule 5. */
body.portal-page .portal-project-card {
padding: 0;
overflow: hidden;
transition: transform 0.15s ease, border-color 0.2s ease;
}
body.portal-page .portal-project-card:hover {
transform: translateY(-2px);
border-color: rgba(var(--orange-rgb), 0.35);
}
body.portal-page .portal-project-card-title,
body.portal-page .portal-project-card .portal-project-title {
font-family: var(--client-type-display);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
color: var(--client-brand-text);
--rf-type-heading-size: var(--rf-type-size-17px);
}
@media (max-width: 760px) {
body.portal-dashboard-page.portal-page .portal-dashboard {
padding: clamp(5rem, 18vw, 6.25rem) 1rem 2.5rem;
}
body.portal-dashboard-page.portal-page .client-masthead {
padding-bottom: 2.5rem;
}
body.portal-dashboard-page.portal-page .film-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
/* -------------------------------------------------------------------------
9. PORTAL PROJECT (portal-project.html, portal-project-landing.html).
------------------------------------------------------------------------- */
body.portal-page .portal-breadcrumb,
body.watch-page.portal-page .portal-breadcrumb {
font-family: var(--client-type-technical);
font-size: var(--rf-type-size-11px, 11px);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--client-brand-text-muted);
}
body.portal-page .portal-format-selector .portal-format-pill,
body.portal-page .portal-version-selector .portal-version-pill {
font-family: var(--client-type-display);
font-size: var(--rf-type-size-12px, 12px);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: var(--radius-pill);
border: 1px solid var(--client-border-card);
background: rgba(var(--cream-rgb), 0.03);
color: var(--client-brand-text-muted);
cursor: pointer;
transition: all 0.18s ease;
}
body.portal-page .portal-format-selector .portal-format-pill:hover,
body.portal-page .portal-version-selector .portal-version-pill:hover {
border-color: rgba(var(--orange-rgb), 0.4);
color: var(--white);
}
body.portal-page .portal-format-selector .portal-format-pill.active,
body.portal-page .portal-version-selector .portal-version-pill.active {
background: rgba(var(--orange-rgb), 0.2);
color: var(--white);
border-color: rgba(var(--orange-rgb), 0.5);
box-shadow: none;
}
/* =========================================================================
WAVE 3 SNAG FIXES (2026-04-29)
S12 · S10 · S11 · S13 · S14 · S15 · S18 · S19
========================================================================= */
/* -------------------------------------------------------------------------
S12 — Collapse triple-stacked header on client dashboard.
Hide the "CLIENT PORTAL" label and the "Projects" category row header so
the page leads with the client name then immediately shows their projects.
------------------------------------------------------------------------- */
body.portal-page .portal-header .portal-label {
display: none;
}
body.portal-page .portal-section:not(#resources-section) .category-row-header {
display: none;
}
/* Give the header breathing room without the label below it */
body.portal-page .portal-header {
margin-bottom: var(--space-8, 32px);
}
/* -------------------------------------------------------------------------
S10 — Heading typography: H1/H2/H3 weights and sizes per design bible.
Display font = Plus Jakarta Sans (shared client product system). Sizes/weights:
H1 (page title): Plus Jakarta Sans 800, 48px, -0.02em
H2 (section): Plus Jakarta Sans 700, 24px, -0.01em
H3 (card title): Plus Jakarta Sans 700, 18px, -0.01em
------------------------------------------------------------------------- */
/* Page-level H1s */
body.portal-page .portal-client-name {
font-weight: var(--rf-type-heading-weight);
}
body.portal-page .portal-entry-title {
font-weight: var(--rf-type-heading-weight);
--rf-type-heading-size: var(--rf-type-size-32px);
}
body.portal-page .portal-gate-title {
font-weight: var(--rf-type-heading-weight);
--rf-type-heading-size: var(--rf-type-size-28px);
}
body.portal-page.project-landing-page .project-landing-title {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
line-height: var(--rf-type-leading-1-1);
color: var(--client-brand-text);
--rf-type-heading-size: var(--rf-type-size-clamp-28px-4vw-42px);
}
/* Video watch page H1 */
body.watch-page.portal-page .view-title {
font-family: var(--rf-type-heading-family);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
line-height: var(--rf-type-leading-1-15);
color: var(--client-brand-text);
--rf-type-heading-size: var(--rf-type-size-clamp-22px-3vw-32px);
}
/* Section H2s — project landing section titles */
body.portal-page.project-landing-page .project-landing-section-title {
font-family: var(--client-type-technical);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
text-transform: uppercase;
color: var(--client-brand-text-dim);
--rf-type-heading-size: var(--rf-type-size-10px);
}
/* Deliverable card title H3 equivalent */
body.portal-page.project-landing-page .deliverable-name,
body.portal-page .deliverable-name {
font-family: var(--client-type-display);
font-weight: 700;
font-size: var(--rf-type-size-14px, 14px);
letter-spacing: -0.01em;
line-height: var(--rf-type-leading-1-3, 1.3);
}
/* -------------------------------------------------------------------------
S11 — Milestone progress strip legibility.
Labels: bump from 9px to 10px, add wrapping, tighten spacing on desktop.
States: complete = orange filled dot with glow; current = pulse ring;
upcoming = muted grey.
Mobile: labels wrap below dot without overlapping.
------------------------------------------------------------------------- */
body.portal-page.project-landing-page .ms-client-label {
font-family: var(--client-type-technical);
font-size: var(--rf-type-size-10px, 10px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--client-brand-text-dim);
white-space: normal;
text-align: center;
max-width: 64px;
line-height: var(--rf-type-leading-1-3, 1.3);
}
body.portal-page.project-landing-page .ms-client-step.complete .ms-client-label,
body.portal-page.project-landing-page .ms-client-step.current .ms-client-label,
body.portal-page.project-landing-page .ms-client-step.ms-client-done .ms-client-label,
body.portal-page.project-landing-page .ms-client-step.ms-client-active .ms-client-label {
color: var(--client-brand-text-muted);
}
/* Complete dot: filled orange */
body.portal-page.project-landing-page .ms-client-step.complete .ms-client-dot,
body.portal-page.project-landing-page .ms-client-step.ms-client-done .ms-client-dot {
background: var(--client-accent);
border-color: var(--client-accent);
color: var(--white);
box-shadow: 0 0 0 4px rgba(var(--orange-rgb), 0.18);
}
/* Current dot: accent border with pulse ring */
body.portal-page.project-landing-page .ms-client-step.current .ms-client-dot,
body.portal-page.project-landing-page .ms-client-step.ms-client-active .ms-client-dot {
border-color: var(--client-accent);
background: rgba(var(--orange-rgb), 0.15);
color: var(--client-accent);
box-shadow: 0 0 0 4px rgba(var(--orange-rgb), 0.12),
0 0 0 8px rgba(var(--orange-rgb), 0.05);
animation: pv-milestone-pulse 2.2s ease-in-out infinite;
}
/* Upcoming dot: visibly muted */
body.portal-page.project-landing-page .ms-client-step:not(.complete):not(.current):not(.ms-client-done):not(.ms-client-active) .ms-client-dot {
background: rgba(var(--cream-rgb), 0.04);
border-color: rgba(var(--cream-rgb), 0.14);
color: var(--client-brand-text-dim);
}
@keyframes pv-milestone-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(var(--orange-rgb), 0.12), 0 0 0 8px rgba(var(--orange-rgb), 0.05); }
50% { box-shadow: 0 0 0 6px rgba(var(--orange-rgb), 0.20), 0 0 0 12px rgba(var(--orange-rgb), 0.08); }
}
/* Connector line */
body.portal-page.project-landing-page .ms-client-line {
background: rgba(var(--cream-rgb), 0.1);
}
body.portal-page.project-landing-page .ms-client-line.ms-client-line-done {
background: var(--client-accent);
}
/* Mobile milestone: stack vertically so labels don't overlap */
@media (max-width: 600px) {
body.portal-page.project-landing-page .ms-client-bar {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: var(--space-4, 16px) 0;
}
body.portal-page.project-landing-page .ms-client-step {
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
padding: 6px 0;
}
body.portal-page.project-landing-page .ms-client-label {
display: block;
max-width: none;
text-align: left;
font-size: var(--rf-type-size-11px, 11px);
}
body.portal-page.project-landing-page .ms-client-line {
display: none;
}
}
/* -------------------------------------------------------------------------
S13 / S14 — Password gate card + input contrast fix.
Problem: card is dark on dark; input is near-invisible.
Fix: lift card background; use design-bible input spec for both
.pw-gate-form and .portal-entry-form inputs; add helper copy.
------------------------------------------------------------------------- */
/* Lift the gate card surface so it reads against the page */
/* Raised gate material is the shared client gate mode. */
/* Design-bible input spec — both gate and entry forms */
/* Helper copy label above the password input */
body.portal-page .pw-gate-label {
font-family: var(--client-type-body);
font-size: var(--rf-type-size-13px, 13px);
letter-spacing: 0;
text-transform: none;
color: var(--client-auth-support-text);
margin-bottom: 20px;
line-height: 1.5;
}
/* Slightly softer CTA so button and input are balanced, not just orange vs void */
/* Mobile padding fix (S14) */
@media (max-width: 480px) {
body.portal-page .portal-gate,
body.portal-page .portal-entry {
padding: 32px 24px;
margin: 16px;
width: calc(100% - 32px);
max-width: none;
}
}
/* -------------------------------------------------------------------------
S15 — Hero deliverable card hover: line-height, focus ring, single target.
------------------------------------------------------------------------- */
/* Fix overlay text stacking */
body.portal-page.project-landing-page .browse-overlay-title,
body.portal-page .browse-overlay-title {
line-height: var(--rf-type-leading-1-35);
margin-bottom: 4px;
}
body.portal-page.project-landing-page .browse-overlay-meta,
body.portal-page .browse-overlay-meta {
line-height: var(--rf-type-leading-1-4, 1.4);
margin-bottom: 4px;
}
/* Keyboard focus ring on the card link */
body.portal-page.project-landing-page .portal-project-card:focus-visible,
body.portal-page .portal-project-card:focus-visible {
outline: 2px solid var(--client-accent);
outline-offset: 3px;
box-shadow:
0 0 0 5px rgba(var(--orange-rgb), 0.18),
0 20px 48px color-mix(in srgb, var(--black) 45%, transparent);
}
/* Differentiate hover vs focus: hover lifts, focus uses ring without lift */
body.portal-page.project-landing-page .portal-project-card:focus-visible:hover,
body.portal-page .portal-project-card:focus-visible:hover {
transform: none;
}
/* Deliverable card focus ring */
body.portal-page.project-landing-page .deliverable-card:focus-visible,
body.portal-page .deliverable-card:focus-visible {
outline: 2px solid var(--client-accent);
outline-offset: 3px;
}
/* -------------------------------------------------------------------------
S18 — "Back to Dashboard" link → visible chip with chevron.
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
S19 — Footer: add top border and increase vertical padding on portal pages.
------------------------------------------------------------------------- */
body.portal-page .site-footer,
body.portal-page.project-landing-page .site-footer,
body.watch-page.portal-page .site-footer {
border-top: 1px solid rgba(var(--cream-rgb), 0.08);
margin-top: var(--space-10, 40px);
}
body.portal-page .site-footer .footer-copy {
font: 400 var(--rf-type-size-12px, 12px)/normal var(--client-type-body);
}
body.portal-page .site-footer .footer-tagline {
font: 400 var(--rf-type-size-10px, 10px)/normal var(--client-type-body);
}
body.portal-page .site-footer .footer-row,
body.portal-page.project-landing-page .site-footer .footer-row,
body.watch-page.portal-page .site-footer .footer-row {
padding-top: 24px;
padding-bottom: 24px;
}
@media (max-width: 640px) {
body.portal-page .site-footer .footer-row,
body.portal-page.project-landing-page .site-footer .footer-row,
body.watch-page.portal-page .site-footer .footer-row {
flex-wrap: wrap;
justify-content: center;
gap: 12px 18px;
padding-inline: 20px;
text-align: center;
}
body.portal-page .site-footer .footer-copy,
body.portal-page.project-landing-page .site-footer .footer-copy,
body.watch-page.portal-page .site-footer .footer-copy,
body.portal-page .site-footer .footer-tagline,
body.portal-page.project-landing-page .site-footer .footer-tagline,
body.watch-page.portal-page .site-footer .footer-tagline,
body.portal-page .site-footer .footer-social,
body.portal-page.project-landing-page .site-footer .footer-social,
body.watch-page.portal-page .site-footer .footer-social {
flex: 1 1 100%;
justify-content: center;
min-width: 0;
}
}
/* =========================================================================
WAVE 4 REGRESSION FIXES (2026-04-29)
R1 · R2 · R3 · R4(JS) · Resources heading · S8
========================================================================= */
/* -------------------------------------------------------------------------
S8 — Soften FEEDBACK tab active underline.
The tab indicator should be a subtle accent, not a competing orange bar.
The rule in portal.css uses var(--client-accent) = var(--orange) at full opacity.
Here we reduce opacity to make it a gentle signal, not a focal point.
------------------------------------------------------------------------- */
body.portal-page.review-page .review-tab.active {
border-bottom-color: rgba(var(--orange-rgb), 0.45);
}
/* -------------------------------------------------------------------------
S8 — DOWNLOAD button: ensure neutral glass colour.
The SVG icon inherits currentColor; force it to the platform text token
so it renders cream-white rather than orange.
------------------------------------------------------------------------- */
/* =========================================================================
WAVE 5 FIXES (2026-04-29)
W5-1 · Resources page heading W5-2 · Mobile login overflow
========================================================================= */
/* -------------------------------------------------------------------------
W5-1 — Resources page heading.
On /portal//resources the section shows only a thin 10px mono
"RESOURCES" label because .category-row-header was never upgraded for
this section. Upgrade the header and its title child to H1 scale so it
matches the landing page's client-name heading (Plus Jakarta Sans 800,
36px, -0.02em). The divider line and count remain unchanged.
------------------------------------------------------------------------- */
body.portal-page #resources-section .category-row-header {
align-items: baseline;
margin-bottom: var(--space-7, 28px);
padding-bottom: var(--space-4, 16px);
}
body.portal-page #resources-section .category-row-title {
font-family: var(--client-type-display);
font-weight: var(--rf-type-heading-weight);
letter-spacing: var(--rf-type-heading-tracking);
text-transform: none;
color: var(--client-brand-text);
line-height: var(--rf-type-leading-1-1);
--rf-type-heading-size: var(--rf-type-size-36px);
}
body.portal-page #resources-section .category-row-count {
font-size: var(--rf-type-size-11px, 11px);
}
/* -------------------------------------------------------------------------
W5-2 — Mobile login card overflow (390px viewport).
The login card has max-width: 460px and padding: 48px 40px from S13/14
with no constraint on .clients-body's own 40px padding. On narrow
viewports the outer container padding prevents the card from shrinking
to fit, producing scrollWidth > viewport width.
Fix: collapse .clients-body padding at mobile. The existing S14
@media rule already handles the card's own padding and max-width reset.
------------------------------------------------------------------------- */
@media (max-width: 480px) {
body.portal-page .clients-body {
padding: var(--space-4, 16px);
}
}
/* =========================================================================
WAVE 7 FIXES (2026-04-29)
S16 · S17 · REGRESSION-5
========================================================================= */
/* -------------------------------------------------------------------------
S16 — Hero deliverable action buttons: unified style.
btn-watch is the primary CTA (btn-primary pattern from design-system).
btn-review, btn-view, btn-download are secondary (btn-ghost pattern).
Previously these classes had no CSS definitions and rendered as plain
unstyled anchor tags, making them look like two different component sets.
------------------------------------------------------------------------- */
/* Shared base for all deliverable action links */
body.portal-page.project-landing-page .deliverable-actions .btn-watch,
body.portal-page.project-landing-page .deliverable-actions .btn-review,
body.portal-page.project-landing-page .deliverable-actions .btn-view,
body.portal-page.project-landing-page .deliverable-actions .btn-download,
body.portal-page .deliverable-actions .btn-watch,
body.portal-page .deliverable-actions .btn-review,
body.portal-page .deliverable-actions .btn-view,
body.portal-page .deliverable-actions .btn-download {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
min-width: 80px;
cursor: pointer;
transition: all 0.18s ease;
}
/* Primary: Watch — filled orange (btn-primary pattern) */
body.portal-page.project-landing-page .deliverable-actions .btn-watch:hover,
body.portal-page .deliverable-actions .btn-watch:hover {
transform: translateY(-1px);
}
/* Secondary: Review / View / Download — ghost (btn-ghost pattern) */
body.portal-page.project-landing-page .deliverable-actions .btn-review:hover,
body.portal-page.project-landing-page .deliverable-actions .btn-view:hover,
body.portal-page.project-landing-page .deliverable-actions .btn-download:hover,
body.portal-page .deliverable-actions .btn-review:hover,
body.portal-page .deliverable-actions .btn-view:hover,
body.portal-page .deliverable-actions .btn-download:hover {
transform: translateY(-1px);
}
/* Deliverable caption row: clear hierarchy between film name and actions */
body.portal-page.project-landing-page .deliverable-info,
body.portal-page .deliverable-info {
padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
display: flex;
flex-direction: column;
gap: var(--space-2, 8px);
}
body.portal-page.project-landing-page .deliverable-actions,
body.portal-page .deliverable-actions {
padding-top: var(--space-2, 8px);
gap: var(--space-2, 8px);
border-top: 1px solid rgba(var(--cream-rgb), 0.07);
}
/* ── Review header — mobile compaction ─────────────────────────── */
@media (max-width: 600px) {
body.portal-page.review-page .review-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 50vw;
min-width: 0;
--rf-type-heading-size: var(--rf-type-size-14px);
}
body.portal-page.review-page .review-version-dropdown {
display: none;
}
body.portal-page.review-page #review-status-badge.review-status-badge {
display: none;
}
body.portal-page.review-page .review-bar {
padding: 0 12px;
}
body.portal-page.review-page .review-bar-left {
gap: 10px;
flex: 1;
min-width: 0;
}
}
/* ── Format pills — keep label + thumb from overlapping at narrow widths ── */
@media (max-width: 600px) {
body.portal-page.review-page .portal-selector-card {
min-width: 0;
}
}
/* ── Format pills — hide the aspect-ratio icon on narrow mobile so long
labels (e.g. "Scotland Weekender", "Barcelona Marathon") have room.
Label-only pills wrap cleanly without the icon collision. ─────── */
@media (max-width: 600px) {
body.portal-page.review-page .portal-format-pill svg,
body.portal-page.review-page .portal-format-pill .portal-format-icon {
display: none;
}
body.portal-page.review-page .portal-format-pill .portal-format-pill-label {
margin-left: 0;
}
}
/* =========================================================================
WAVE 8 — WATCH PAGE POLISH (2026-04-29)
W8-1 Format pills · W8-2 Section label · W8-3 Breadcrumb · W8-4 Review btn
W8-5 Player chrome · W8-6 Mobile compaction
========================================================================= */
/* -------------------------------------------------------------------------
W8-1 — Format pill unified component.
Problem: pills with long labels (SCOTLAND WEEKENDER, BARCELONA MARATHON)
have the icon and label colliding because the icon has no fixed width and
the pill has a fixed height of 34px. Long labels overflow or wrap into
the icon column.
Fix:
· Remove the fixed height; use min-height 40px so short labels sit
centred and long labels expand the pill.
· Give the icon a fixed width and flex-shrink: 0.
· Let the label wrap with line-height: 1.2.
· Override the active state to use the white-glass pattern from S20
(review page) rather than the saturated gradient which is reserved
for primary CTAs (Watch button etc.).
· Align items to center so text stays vertically centred in the taller
pill.
------------------------------------------------------------------------- */
body.watch-page.portal-page .portal-format-selector .portal-format-pill {
height: auto;
min-height: 40px;
align-items: center;
padding: 8px 14px;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-icon {
flex-shrink: 0;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-pill-label {
white-space: normal;
word-break: break-word;
line-height: var(--rf-type-leading-1-2, 1.2);
text-align: left;
}
/* Active pill: white-glass fill, matches review-page S20 pattern */
body.watch-page.portal-page .portal-format-selector .portal-format-pill.active {
background: rgba(var(--rf-tone-neutral-rgb), 0.12);
border-color: rgba(var(--rf-tone-neutral-rgb), 0.28);
color: rgba(var(--rf-tone-neutral-rgb), 0.92);
box-shadow: inset 0 1px 0 rgba(var(--rf-tone-neutral-rgb), 0.22), 0 2px 6px color-mix(in srgb, var(--black) 20%, transparent);
}
/* Hover: slightly more visible */
body.watch-page.portal-page .portal-format-selector .portal-format-pill:hover {
background: rgba(var(--rf-tone-neutral-rgb), 0.08);
border-color: rgba(var(--rf-tone-neutral-rgb), 0.18);
color: rgba(var(--rf-tone-neutral-rgb), 0.8);
}
/* -------------------------------------------------------------------------
W8-2 — "AVAILABLE FORMATS" section label.
Matches S22 on the review page: 9px mono, 0.16em tracking, dim opacity,
visibly subordinate to the pill labels themselves.
------------------------------------------------------------------------- */
body.watch-page.portal-page .portal-selector-label {
font-size: var(--rf-type-size-9px, 9px);
letter-spacing: 0.16em;
color: rgba(var(--rf-tone-neutral-rgb), 0.32);
font-weight: 500;
margin-bottom: var(--space-2, 8px);
}
/* -------------------------------------------------------------------------
W8-3 — Breadcrumb: last segment gets primary text emphasis.
The client and project links are already dim via the portal-page override
at line 487. The terminal "WATCH" span should be noticeably brighter to
signal current location.
------------------------------------------------------------------------- */
body.watch-page.portal-page .portal-breadcrumb > span:last-child {
color: var(--client-brand-text-muted);
font-weight: 500;
}
/* Separator slash: keep extra-dim */
body.watch-page.portal-page .portal-breadcrumb .portal-breadcrumb-sep {
opacity: 0.35;
font-weight: 400;
}
/* -------------------------------------------------------------------------
W8-4 — "REVIEW & COMMENT" CTA button.
Currently it works but lacks backdrop-filter and the hover lift that
secondary buttons on this platform use. Bring it into line with the
btn-ghost pattern from the design bible.
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
W8-5 — Player chrome.
· Make controls softly visible by default (opacity 0.65) so the scrubber
is readable when the video is paused at the poster frame. On hover the
controls rise to full opacity. This is a CSS-only fix that does not
require JS changes.
· Round the video element's corners to match the container so there's
no hard-edge flash during poster display.
· The big-play button already has the correct orange pill style.
------------------------------------------------------------------------- */
body.watch-page.portal-page .view-player-container .player-controls {
opacity: 0.65;
}
body.watch-page.portal-page .view-player-container .player-wrap:hover .player-controls {
opacity: 1;
}
body.watch-page.portal-page .view-player-container video {
border-radius: var(--radius-lg, 12px);
}
@media (max-width: 640px) {
body.portal-page.review-page .player-controls {
padding-inline: 10px;
}
body.portal-page.review-page .player-buttons {
gap: 4px;
min-width: 0;
}
body.portal-page.review-page .player-spacer {
min-width: 0;
}
}
/* -------------------------------------------------------------------------
W8-6 — Mobile compaction at <=600px.
· Breadcrumb: truncate so it doesn't push the review button off-screen.
· Review button: shrink to icon-only at very narrow widths.
· Format pills: wrap into a 2-column grid so long labels read without
overflowing the container.
· Format icon: hidden at mobile — the label alone is sufficient
(saves width, eliminates the icon/label overlap that occurs on
small screens).
· Header row: tighter margins.
------------------------------------------------------------------------- */
@media (max-width: 600px) {
/* Breadcrumb: allow flex, truncate middle segments */
body.watch-page.portal-page .portal-breadcrumb {
flex-wrap: nowrap;
overflow: hidden;
max-width: calc(100vw - 140px);
}
body.watch-page.portal-page .portal-breadcrumb a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 28vw;
}
/* Review button: collapse label, keep icon */
/* Format pill grid: 2-up */
body.watch-page.portal-page .portal-format-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2, 8px);
}
/* Format icon hidden on mobile */
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-icon {
display: none;
}
/* Pills fill their grid cell */
body.watch-page.portal-page .portal-format-selector .portal-format-pill {
width: 100%;
min-height: 36px;
justify-content: center;
text-align: center;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-pill-label {
text-align: center;
}
/* Compact the view title on mobile */
body.watch-page.portal-page .view-title {
--rf-type-heading-size: var(--rf-type-size-clamp-20px-6vw-26px);
}
/* Compact the header row padding */
body.watch-page.portal-page .view-header-row {
padding: 0;
margin-bottom: var(--space-3, 12px);
}
}