/* =========================================================================
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 line with the admin design bible:
· Plus Jakarta Sans for display / headings
· Inter for body copy
· JetBrains Mono for small caps labels and timecodes
· Pill CTA buttons (gradient gold → orange → burnt)
· Glass cards (linear-gradient bg + backdrop-filter + 4-layer shadow)
· Orange halftone accent (#DE762B)
· Legible neutral dark theme
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.review-page, body.project-landing-page) {
--pv-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--pv-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--pv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--pv-accent: #DE762B;
--pv-accent-hover: #E8853D;
--pv-bg: #0a0f0e;
--pv-bg-deep: #070b0a;
--pv-bg-panel: #0f1614;
--pv-text: #E9E0D7;
--pv-text-muted: rgba(233,224,215,0.58);
--pv-text-dim: rgba(233,224,215,0.38);
--pv-border: rgba(233,224,215,0.08);
--pv-border-card: rgba(233,224,215,0.14);
}
/* -------------------------------------------------------------------------
1. GLOBAL TYPOGRAPHY — platform fonts on every portal surface.
------------------------------------------------------------------------- */
body.portal-page,
body.review-page,
body.project-landing-page {
font-family: var(--pv-font-body) !important;
color: var(--pv-text);
letter-spacing: -0.005em;
}
body.portal-page h1, body.portal-page h2, body.portal-page h3,
body.review-page h1, body.review-page h2, body.review-page h3,
body.project-landing-page h1, body.project-landing-page h2, body.project-landing-page h3,
.portal-client-name,
.portal-entry-title,
.portal-gate-title {
font-family: var(--pv-font-display) !important;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.22;
}
/* Small caps labels (FORMAT, VERSION, FEEDBACK, etc.) — JetBrains Mono. */
.portal-label,
.portal-selector-label,
.portal-selector-helper,
.review-sidebar-section-title,
.portal-format-pill-label,
.portal-version-note,
.portal-resource-type,
.portal-kind-label,
.section-label,
.portal-status-label {
font-family: var(--pv-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--pv-accent) !important;
}
/* -------------------------------------------------------------------------
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.
------------------------------------------------------------------------- */
.rf-pv-halftone {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 32px 24px 8px;
margin: 0 0 28px;
overflow: visible;
pointer-events: none;
}
.rf-pv-halftone svg {
display: block;
width: 300px;
height: 100px;
overflow: visible;
filter:
drop-shadow(0 0 13.6862px rgba(222,118,43,0.29))
drop-shadow(0 0 36.4964px rgba(222,118,43,0.094));
}
@media (max-width: 720px) {
.rf-pv-halftone { padding-top: 24px; margin-bottom: 20px; }
.rf-pv-halftone svg { width: 240px; height: 80px; }
}
/* -------------------------------------------------------------------------
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.
------------------------------------------------------------------------- */
.rf-pv-btn,
.rf-pv-btn-primary,
body.portal-page .portal-entry-btn,
body.portal-page .portal-resource-btn,
body.review-page .btn-approve,
body.review-page .btn-changes,
body.review-page .review-download {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
font-family: var(--pv-font-display) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 11px 22px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
cursor: pointer !important;
text-decoration: none !important;
transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease !important;
white-space: nowrap;
}
/* Primary (gold → orange gradient) */
.rf-pv-btn-primary,
body.portal-page .portal-entry-btn,
body.review-page .btn-approve:not(.rf-pv-btn-secondary) {
background: linear-gradient(
rgba(255,210,120,0.55) 0%,
#DE762B 30%,
#C4621A 70%,
rgba(140,45,5,0.95) 100%
) !important;
color: #fff !important;
box-shadow:
0 10px 26px rgba(222,118,43,0.38),
inset 0 2px 0 rgba(255,235,160,0.55) !important;
}
.rf-pv-btn-primary:hover,
body.portal-page .portal-entry-btn:hover,
body.review-page .btn-approve:hover {
transform: translateY(-1px) !important;
box-shadow:
0 14px 32px rgba(222,118,43,0.46),
inset 0 2px 0 rgba(255,235,160,0.6) !important;
}
/* Secondary (glass outline) */
.rf-pv-btn-secondary,
body.portal-page .portal-resource-btn,
body.review-page .review-download {
background: rgba(233,224,215,0.04) !important;
color: var(--pv-text) !important;
border-color: var(--pv-border-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.rf-pv-btn-secondary:hover,
body.portal-page .portal-resource-btn:hover,
body.review-page .review-download:hover {
background: rgba(233,224,215,0.08) !important;
border-color: rgba(222,118,43,0.35) !important;
color: #fff !important;
}
/* 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.
------------------------------------------------------------------------- */
.rf-pv-glass,
body.portal-page .portal-entry,
body.portal-page .portal-gate,
body.portal-page .portal-project-card,
body.review-page .review-sidebar,
body.review-page .review-note,
body.project-landing-page .project-landing-card {
background:
linear-gradient(180deg, rgba(233,224,215,0.04) 0%, rgba(233,224,215,0.015) 100%),
var(--pv-bg-panel) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid var(--pv-border-card) !important;
border-radius: 14px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 0 0 1px rgba(0,0,0,0.2),
0 20px 40px -12px rgba(0,0,0,0.55),
0 8px 16px -8px rgba(0,0,0,0.3) !important;
}
/* -------------------------------------------------------------------------
6. REVIEW PAGE — specific polish.
------------------------------------------------------------------------- */
body.review-page {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(222,118,43,0.06) 0%, transparent 60%),
linear-gradient(180deg, var(--pv-bg-deep) 0%, var(--pv-bg) 50%, var(--pv-bg-deep) 100%) !important;
}
body.review-page .review-bar {
font-family: var(--pv-font-display) !important;
}
body.review-page .review-title {
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: -0.005em !important;
color: var(--pv-text) !important;
}
body.review-page .review-version-dropdown,
body.review-page select {
font-family: var(--pv-font-body) !important;
font-size: 13px !important;
background: rgba(0,0,0,0.35) !important;
border: 1px solid var(--pv-border-card) !important;
border-radius: 999px !important;
color: var(--pv-text) !important;
padding: 6px 30px 6px 14px !important;
}
body.review-page .review-status-badge {
font-family: var(--pv-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
padding: 6px 12px !important;
border-radius: 999px !important;
/* Default/awaiting/pending: muted chip — not a saturated orange focal point */
background: rgba(233,224,215,0.06) !important;
border: 1px solid rgba(233,224,215,0.14) !important;
color: var(--pv-text-muted) !important;
}
body.review-page .review-status-badge.approved {
background: rgba(74,222,128,0.10) !important;
border-color: rgba(74,222,128,0.22) !important;
color: rgba(74,222,128,0.85) !important;
}
/* pending and changes-requested: keep muted — don't compete with APPROVE CTA */
body.review-page .review-status-badge.changes-requested,
body.review-page .review-status-badge.pending {
background: rgba(233,224,215,0.06) !important;
border-color: rgba(233,224,215,0.14) !important;
color: var(--pv-text-muted) !important;
}
body.review-page .review-sidebar-section-title {
margin-bottom: 12px !important;
}
body.review-page .review-note {
padding: 14px 16px !important;
margin-bottom: 12px !important;
background: rgba(233,224,215,0.03) !important;
border: 1px solid var(--pv-border) !important;
border-radius: 12px !important;
}
body.review-page .review-note-author {
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
color: var(--pv-text) !important;
}
body.review-page .review-note-timecode {
font-family: var(--pv-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
color: var(--pv-accent) !important;
background: rgba(222,118,43,0.1) !important;
border: 1px solid rgba(222,118,43,0.3) !important;
padding: 3px 8px !important;
border-radius: 6px !important;
}
/* -------------------------------------------------------------------------
7. PORTAL LOGIN (portal.html) — polish the entry card.
------------------------------------------------------------------------- */
body.portal-page .portal-entry,
body:not(.review-page):not(.project-landing-page) .portal-entry {
padding: 48px 40px !important;
max-width: 460px !important;
}
body.portal-page .portal-entry-title,
.portal-entry-title {
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
font-size: 28px !important;
letter-spacing: -0.015em !important;
margin-bottom: 8px !important;
color: var(--pv-text) !important;
}
body.portal-page .portal-entry-subtitle,
.portal-entry-subtitle {
font-family: var(--pv-font-body) !important;
font-size: 14px !important;
color: var(--pv-text-muted) !important;
margin-bottom: 28px !important;
line-height: 1.5 !important;
max-width: none !important;
}
body.portal-page .portal-entry-form input[type="text"],
body.portal-page .portal-entry-form input[type="password"],
.portal-entry-form input {
font-family: var(--pv-font-body) !important;
font-size: 14px !important;
padding: 12px 16px !important;
background: rgba(0,0,0,0.35) !important;
border: 1px solid var(--pv-border-card) !important;
border-radius: 10px !important;
color: var(--pv-text) !important;
}
.portal-entry-form input:focus {
outline: none !important;
border-color: var(--pv-accent) !important;
box-shadow: 0 0 0 3px rgba(222,118,43,0.15) !important;
}
/* -------------------------------------------------------------------------
8. PORTAL DASHBOARD (portal-dashboard.html) — client header + project rail.
------------------------------------------------------------------------- */
body.portal-page .portal-header {
padding-top: 48px !important;
}
body.portal-page .portal-client-name {
font-family: var(--pv-font-display) !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
color: var(--pv-text) !important;
line-height: 1.1 !important;
}
body.portal-page .portal-label {
margin-bottom: 8px !important;
}
/* Project card in the rail — already glass-card via rule 5. */
body.portal-page .portal-project-card {
padding: 0 !important;
overflow: hidden !important;
transition: transform 0.15s ease, border-color 0.2s ease !important;
}
body.portal-page .portal-project-card:hover {
transform: translateY(-2px) !important;
border-color: rgba(222,118,43,0.35) !important;
}
body.portal-page .portal-project-card-title,
body.portal-page .portal-project-card .portal-project-title {
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: -0.01em !important;
color: var(--pv-text) !important;
}
/* -------------------------------------------------------------------------
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(--pv-font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: var(--pv-text-muted) !important;
}
body.portal-page .portal-format-selector .portal-format-pill,
body.portal-page .portal-version-selector .portal-version-pill {
font-family: var(--pv-font-display) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 8px 16px !important;
border-radius: 999px !important;
border: 1px solid var(--pv-border-card) !important;
background: rgba(233,224,215,0.03) !important;
color: var(--pv-text-muted) !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
}
body.portal-page .portal-format-selector .portal-format-pill:hover,
body.portal-page .portal-version-selector .portal-version-pill:hover {
border-color: rgba(222,118,43,0.4) !important;
color: #fff !important;
}
body.portal-page .portal-format-selector .portal-format-pill.active,
body.portal-page .portal-version-selector .portal-version-pill.active {
background: rgba(222,118,43,0.2) !important;
color: #fff !important;
border-color: rgba(222,118,43,0.5) !important;
box-shadow: none !important;
}
/* =========================================================================
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 !important;
}
body.portal-page .portal-section:not(#resources-section) .category-row-header {
display: none !important;
}
/* Give the header breathing room without the label below it */
body.portal-page .portal-header {
margin-bottom: var(--space-8, 32px) !important;
}
/* -------------------------------------------------------------------------
S10 — Heading typography: H1/H2/H3 weights and sizes per design bible.
Design bible:
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: 800 !important;
}
body.portal-page .portal-entry-title {
font-weight: 800 !important;
font-size: 32px !important;
}
body.portal-page .portal-gate-title {
font-weight: 800 !important;
font-size: 28px !important;
}
body.project-landing-page .project-landing-title {
font-family: var(--pv-font-display) !important;
font-weight: 800 !important;
font-size: clamp(28px, 4vw, 42px) !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
color: var(--pv-text) !important;
}
/* Video watch page H1 */
body.watch-page.portal-page .view-title {
font-family: var(--pv-font-display) !important;
font-weight: 800 !important;
font-size: clamp(22px, 3vw, 32px) !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
color: var(--pv-text) !important;
}
/* Section H2s — project landing section titles */
body.project-landing-page .project-landing-section-title {
font-family: var(--pv-font-mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--pv-text-dim) !important;
}
/* Deliverable card title H3 equivalent */
body.project-landing-page .deliverable-name,
body.portal-page .deliverable-name {
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
}
/* -------------------------------------------------------------------------
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.project-landing-page .ms-client-label {
font-family: var(--pv-font-mono) !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--pv-text-dim) !important;
white-space: normal !important;
text-align: center !important;
max-width: 64px !important;
line-height: 1.3 !important;
}
body.project-landing-page .ms-client-step.complete .ms-client-label,
body.project-landing-page .ms-client-step.current .ms-client-label {
color: var(--pv-text-muted) !important;
}
/* Complete dot: filled orange */
body.project-landing-page .ms-client-step.complete .ms-client-dot {
background: var(--pv-accent) !important;
border-color: var(--pv-accent) !important;
color: #fff !important;
box-shadow: 0 0 0 4px rgba(222,118,43,0.18) !important;
}
/* Current dot: accent border with pulse ring */
body.project-landing-page .ms-client-step.current .ms-client-dot {
border-color: var(--pv-accent) !important;
background: rgba(222,118,43,0.15) !important;
color: var(--pv-accent) !important;
box-shadow: 0 0 0 4px rgba(222,118,43,0.12),
0 0 0 8px rgba(222,118,43,0.05) !important;
animation: pv-milestone-pulse 2.2s ease-in-out infinite !important;
}
/* Upcoming dot: visibly muted */
body.project-landing-page .ms-client-step:not(.complete):not(.current) .ms-client-dot {
background: rgba(233,224,215,0.04) !important;
border-color: rgba(233,224,215,0.14) !important;
color: var(--pv-text-dim) !important;
}
@keyframes pv-milestone-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(222,118,43,0.12), 0 0 0 8px rgba(222,118,43,0.05); }
50% { box-shadow: 0 0 0 6px rgba(222,118,43,0.20), 0 0 0 12px rgba(222,118,43,0.08); }
}
/* Connector line */
body.project-landing-page .ms-client-line {
background: rgba(233,224,215,0.10) !important;
}
body.project-landing-page .ms-client-line.ms-client-line-done {
background: var(--pv-accent) !important;
}
/* Mobile milestone: stack vertically so labels don't overlap */
@media (max-width: 600px) {
body.project-landing-page .ms-client-bar {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
padding: var(--space-4, 16px) 0 !important;
}
body.project-landing-page .ms-client-step {
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 6px 0 !important;
}
body.project-landing-page .ms-client-label {
max-width: none !important;
text-align: left !important;
font-size: 11px !important;
}
body.project-landing-page .ms-client-line {
display: none !important;
}
}
/* -------------------------------------------------------------------------
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 */
body.portal-page .portal-gate {
background:
linear-gradient(150deg,
rgba(233,224,215,0.06) 0%,
rgba(233,224,215,0.03) 50%,
rgba(0,0,0,0.05) 100%
) !important;
border-color: rgba(233,224,215,0.16) !important;
}
/* Design-bible input spec — both gate and entry forms */
body.portal-page .pw-gate-form input[type="password"],
body.portal-page .pw-gate-form input[type="text"],
body.portal-page .portal-entry-form input[type="text"],
body.portal-page .portal-entry-form input[type="password"] {
background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.18) 100%) !important;
border: 1px solid rgba(233,224,215,0.18) !important;
border-top-color: rgba(0,0,0,0.35) !important;
border-radius: 10px !important;
color: rgba(233,224,215,0.92) !important;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.30), inset 0 1px 0 rgba(0,0,0,0.18) !important;
}
body.portal-page .pw-gate-form input::placeholder,
body.portal-page .portal-entry-form input::placeholder {
color: rgba(233,224,215,0.30) !important;
}
body.portal-page .pw-gate-form input:focus,
body.portal-page .portal-entry-form input:focus {
border-color: rgba(222,118,43,0.55) !important;
border-top-color: rgba(0,0,0,0.35) !important;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.30), 0 0 0 3px rgba(222,118,43,0.15) !important;
outline: none !important;
}
/* Helper copy label above the password input */
body.portal-page .pw-gate-label {
font-family: var(--pv-font-body) !important;
font-size: 13px !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--pv-text-muted) !important;
margin-bottom: 20px !important;
line-height: 1.5 !important;
}
/* Slightly softer CTA so button and input are balanced, not just orange vs void */
body.portal-page .pw-gate-form .btn,
body.portal-page .portal-entry-form .btn {
background: linear-gradient(
180deg,
rgba(255,210,120,0.50) 0%,
#DE762B 28%,
#C4621A 68%,
rgba(140,45,5,0.92) 100%
) !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
color: #fff !important;
font-family: var(--pv-font-display) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
height: 48px !important;
box-shadow:
0 8px 22px rgba(222,118,43,0.32),
inset 0 2px 0 rgba(255,235,160,0.50) !important;
transition: transform 0.12s ease, box-shadow 0.18s ease !important;
}
body.portal-page .pw-gate-form .btn:hover,
body.portal-page .portal-entry-form .btn:hover {
transform: translateY(-1px) !important;
box-shadow:
0 12px 28px rgba(222,118,43,0.42),
inset 0 2px 0 rgba(255,235,160,0.60) !important;
}
/* Mobile padding fix (S14) */
@media (max-width: 480px) {
body.portal-page .portal-gate,
body.portal-page .portal-entry {
padding: 32px 24px !important;
margin: 16px !important;
width: calc(100% - 32px) !important;
max-width: none !important;
}
}
/* -------------------------------------------------------------------------
S15 — Hero deliverable card hover: line-height, focus ring, single target.
------------------------------------------------------------------------- */
/* Fix overlay text stacking */
body.project-landing-page .browse-overlay-title,
body.portal-page .browse-overlay-title {
line-height: 1.35 !important;
margin-bottom: 4px !important;
}
body.project-landing-page .browse-overlay-meta,
body.portal-page .browse-overlay-meta {
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
/* Keyboard focus ring on the card link */
body.project-landing-page .portal-project-card:focus-visible,
body.portal-page .portal-project-card:focus-visible {
outline: 2px solid var(--pv-accent) !important;
outline-offset: 3px !important;
box-shadow:
0 0 0 5px rgba(222,118,43,0.18),
0 20px 48px rgba(0,0,0,0.45) !important;
}
/* Differentiate hover vs focus: hover lifts, focus uses ring without lift */
body.project-landing-page .portal-project-card:focus-visible:hover,
body.portal-page .portal-project-card:focus-visible:hover {
transform: none !important;
}
/* Deliverable card focus ring */
body.project-landing-page .deliverable-card:focus-visible,
body.portal-page .deliverable-card:focus-visible {
outline: 2px solid var(--pv-accent) !important;
outline-offset: 3px !important;
}
/* -------------------------------------------------------------------------
S18 — "Back to Dashboard" link → visible chip with chevron.
------------------------------------------------------------------------- */
body.project-landing-page .project-landing-back {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 34px !important;
padding: 0 14px 0 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(233,224,215,0.16) !important;
background: rgba(233,224,215,0.04) !important;
font-family: var(--pv-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: var(--pv-text-muted) !important;
text-decoration: none !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
body.project-landing-page .project-landing-back:hover {
background: rgba(233,224,215,0.08) !important;
border-color: rgba(222,118,43,0.35) !important;
color: var(--pv-text) !important;
}
body.project-landing-page .project-landing-back:focus-visible {
outline: 2px solid var(--pv-accent) !important;
outline-offset: 2px !important;
}
/* -------------------------------------------------------------------------
S19 — Footer: add top border and increase vertical padding on portal pages.
------------------------------------------------------------------------- */
body.portal-page .site-footer,
body.project-landing-page .site-footer,
body.watch-page.portal-page .site-footer {
border-top: 1px solid rgba(233,224,215,0.08) !important;
margin-top: var(--space-10, 40px) !important;
}
body.portal-page .site-footer .footer-row,
body.project-landing-page .site-footer .footer-row,
body.watch-page.portal-page .site-footer .footer-row {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/* =========================================================================
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(--review-accent) = #DE762B at full opacity.
Here we reduce opacity to make it a gentle signal, not a focal point.
------------------------------------------------------------------------- */
body.review-page .review-tab.active {
border-bottom-color: rgba(222,118,43,0.45) !important;
}
/* -------------------------------------------------------------------------
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.
------------------------------------------------------------------------- */
body.review-page .review-download,
body.review-page .review-download:visited {
color: var(--pv-text-muted) !important;
}
body.review-page .review-download:hover {
color: var(--pv-text) !important;
}
/* =========================================================================
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 !important;
margin-bottom: var(--space-7, 28px) !important;
padding-bottom: var(--space-4, 16px) !important;
}
body.portal-page #resources-section .category-row-title {
font-family: var(--pv-font-display) !important;
font-size: 36px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
color: var(--pv-text) !important;
line-height: 1.1 !important;
}
body.portal-page #resources-section .category-row-count {
font-size: 11px !important;
}
/* -------------------------------------------------------------------------
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) !important;
}
}
/* =========================================================================
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.project-landing-page .deliverable-actions .btn-watch,
body.project-landing-page .deliverable-actions .btn-review,
body.project-landing-page .deliverable-actions .btn-view,
body.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 !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex: 1 !important;
min-width: 80px !important;
height: 36px !important;
padding: 0 16px !important;
border-radius: var(--radius-md, 8px) !important;
font-family: var(--pv-font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
}
/* Primary: Watch — filled orange (btn-primary pattern) */
body.project-landing-page .deliverable-actions .btn-watch,
body.portal-page .deliverable-actions .btn-watch {
background: linear-gradient(180deg,
rgba(255,210,120,0.55) 0%,
#DE762B 30%,
#c4621a 70%,
rgba(140,45,5,0.95) 100%
) !important;
border: none !important;
outline: 1px solid rgba(255,185,80,0.55) !important;
outline-offset: 0 !important;
color: #fff !important;
box-shadow:
0 8px 22px rgba(222,118,43,0.32),
inset 0 2px 0 rgba(255,235,160,0.55) !important;
}
body.project-landing-page .deliverable-actions .btn-watch:hover,
body.portal-page .deliverable-actions .btn-watch:hover {
transform: translateY(-1px) !important;
box-shadow:
0 12px 28px rgba(222,118,43,0.44),
inset 0 2px 0 rgba(255,235,160,0.70) !important;
}
/* Secondary: Review / View / Download — ghost (btn-ghost pattern) */
body.project-landing-page .deliverable-actions .btn-review,
body.project-landing-page .deliverable-actions .btn-view,
body.project-landing-page .deliverable-actions .btn-download,
body.portal-page .deliverable-actions .btn-review,
body.portal-page .deliverable-actions .btn-view,
body.portal-page .deliverable-actions .btn-download {
background: transparent !important;
border: 1px solid rgba(222,118,43,0.35) !important;
color: rgba(222,118,43,0.85) !important;
box-shadow: inset 0 1px 0 rgba(255,200,100,0.08), 0 2px 8px rgba(0,0,0,0.18) !important;
}
body.project-landing-page .deliverable-actions .btn-review:hover,
body.project-landing-page .deliverable-actions .btn-view:hover,
body.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 {
background: rgba(222,118,43,0.10) !important;
border-color: rgba(222,118,43,0.60) !important;
color: #DE762B !important;
transform: translateY(-1px) !important;
box-shadow: inset 0 1px 0 rgba(255,200,100,0.14), 0 4px 14px rgba(222,118,43,0.14) !important;
}
/* Deliverable caption row: clear hierarchy between film name and actions */
body.project-landing-page .deliverable-info,
body.portal-page .deliverable-info {
padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px) !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-2, 8px) !important;
}
body.project-landing-page .deliverable-actions,
body.portal-page .deliverable-actions {
padding-top: var(--space-2, 8px) !important;
gap: var(--space-2, 8px) !important;
border-top: 1px solid rgba(233,224,215,0.07) !important;
}
/* -------------------------------------------------------------------------
REGRESSION-5 — Deliverables empty state: replace bare text with a
structured empty state that matches the resources/review empty-state
pattern, preventing a tall black void on mobile.
------------------------------------------------------------------------- */
body.project-landing-page .deliverables-empty-state {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: var(--space-10, 40px) var(--space-8, 32px) !important;
min-height: 160px !important;
border: 1px dashed rgba(233,224,215,0.12) !important;
border-radius: var(--radius-md, 8px) !important;
background: rgba(233,224,215,0.02) !important;
}
body.project-landing-page .deliverables-empty-state .deliverables-empty-icon {
color: rgba(233,224,215,0.18) !important;
margin-bottom: var(--space-4, 16px) !important;
}
body.project-landing-page .deliverables-empty-state .deliverables-empty-label {
font-family: var(--pv-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--pv-text-dim) !important;
margin: 0 0 var(--space-2, 8px) !important;
}
body.project-landing-page .deliverables-empty-state .deliverables-empty-sub {
font-family: var(--pv-font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--pv-text-dim) !important;
line-height: 1.55 !important;
max-width: 260px !important;
margin: 0 !important;
}
/* ── Review header — mobile compaction ─────────────────────────── */
@media (max-width: 600px) {
body.review-page .review-title {
font-size: 14px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 50vw !important;
min-width: 0 !important;
}
body.review-page .review-version-dropdown {
display: none !important;
}
body.review-page .review-status-badge {
display: none !important;
}
body.review-page .review-download span#review-download-text {
display: none;
}
body.review-page .review-bar {
padding: 0 12px !important;
}
body.review-page .review-bar-left {
gap: 10px !important;
flex: 1 !important;
min-width: 0 !important;
}
}
/* ── Format pills — keep label + thumb from overlapping at narrow widths ── */
@media (max-width: 600px) {
body.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.review-page .portal-format-pill svg,
body.review-page .portal-format-pill .portal-format-icon {
display: none !important;
}
body.review-page .portal-format-pill .portal-format-pill-label {
margin-left: 0 !important;
}
}
/* =========================================================================
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 !important;
min-height: 40px !important;
align-items: center !important;
padding: 8px 14px !important;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-icon {
flex-shrink: 0 !important;
width: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-pill-label {
white-space: normal !important;
word-break: break-word !important;
line-height: 1.2 !important;
text-align: left !important;
}
/* Active pill: white-glass fill, matches review-page S20 pattern */
body.watch-page.portal-page .portal-format-selector .portal-format-pill.active {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.28) !important;
color: rgba(255,255,255,0.92) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 6px rgba(0,0,0,0.20) !important;
}
/* Hover: slightly more visible */
body.watch-page.portal-page .portal-format-selector .portal-format-pill:hover {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.18) !important;
color: rgba(255,255,255,0.80) !important;
}
/* -------------------------------------------------------------------------
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: 9px !important;
letter-spacing: 0.16em !important;
color: rgba(255,255,255,0.32) !important;
font-weight: 500 !important;
margin-bottom: var(--space-2, 8px) !important;
}
/* -------------------------------------------------------------------------
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(--pv-text-muted) !important;
font-weight: 500 !important;
}
/* Separator slash: keep extra-dim */
body.watch-page.portal-page .portal-breadcrumb .portal-breadcrumb-sep {
opacity: 0.35 !important;
font-weight: 400 !important;
}
/* -------------------------------------------------------------------------
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.
------------------------------------------------------------------------- */
body.watch-page.portal-page .view-review-btn {
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
box-shadow: inset 0 1px 0 rgba(255,200,100,0.08), 0 2px 8px rgba(0,0,0,0.20) !important;
}
body.watch-page.portal-page .view-review-btn:hover {
transform: translateY(-1px) !important;
box-shadow:
inset 0 1px 0 rgba(255,200,100,0.14),
0 4px 14px rgba(222,118,43,0.20) !important;
}
/* -------------------------------------------------------------------------
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 !important;
}
body.watch-page.portal-page .view-player-container .player-wrap:hover .player-controls {
opacity: 1 !important;
}
body.watch-page.portal-page .view-player-container video {
border-radius: var(--radius-lg, 12px) !important;
}
/* -------------------------------------------------------------------------
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 !important;
overflow: hidden !important;
max-width: calc(100vw - 140px) !important;
}
body.watch-page.portal-page .portal-breadcrumb a {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 28vw !important;
}
/* Review button: collapse label, keep icon */
body.watch-page.portal-page .view-review-btn {
padding: 0 10px !important;
gap: 0 !important;
font-size: 0 !important;
width: 36px !important;
justify-content: center !important;
}
body.watch-page.portal-page .view-review-btn svg {
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
}
/* Format pill grid: 2-up */
body.watch-page.portal-page .portal-format-selector {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--space-2, 8px) !important;
}
/* Format icon hidden on mobile */
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-icon {
display: none !important;
}
/* Pills fill their grid cell */
body.watch-page.portal-page .portal-format-selector .portal-format-pill {
width: 100% !important;
min-height: 36px !important;
justify-content: center !important;
text-align: center !important;
}
body.watch-page.portal-page .portal-format-selector .portal-format-pill .portal-format-pill-label {
text-align: center !important;
}
/* Compact the view title on mobile */
body.watch-page.portal-page .view-title {
font-size: clamp(20px, 6vw, 26px) !important;
}
/* Compact the header row padding */
body.watch-page.portal-page .view-header-row {
padding: 0 !important;
margin-bottom: var(--space-3, 12px) !important;
}
}