/* Project Version HTML Library — frontend viewer
Design system: a warm, editorial palette built from exactly five
brand colors — two primaries (#f29f67 warm orange, #1e1e2c ink navy)
and three supporting accents (#3b8ff3 blue, #34b1aa teal, #e0b50f
gold). The hero is a bold dark-navy panel (not another light card);
everything else stays light and airy so the dark hero reads as a
deliberate accent, not the whole product. Every color/spacing token
lives on `.pvhl-frontend`; the page background itself is set on
`.pvhl-frontend-page` (the class PageChrome always adds) so
the theme is consistent across the directory, a single project's
page, and the version viewer — three separate routes/templates, one
shared look. */
.pvhl-frontend-page {
background: #fefcfa;
color: #1e1e2c;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.pvhl-frontend {
--pvhl-ink: #1e1e2c;
--pvhl-primary: #f29f67;
--pvhl-on-primary: #1e1e2c;
/* A darker mix of the primary for text/links/icons on a light
surface: the raw #f29f67 doesn't have enough contrast against
white to use as body/link text (it's meant as a fill color, with
dark ink sitting on top of it — see --pvhl-on-primary above), so
anywhere the orange itself needs to *be* the text, it's mixed
toward ink first. */
--pvhl-primary-strong: color-mix(in srgb, #f29f67 58%, #1e1e2c 42%);
--pvhl-primary-container: color-mix(in srgb, #f29f67 16%, white 84%);
--pvhl-on-primary-container: #1e1e2c;
--pvhl-blue: #3b8ff3;
--pvhl-teal: #34b1aa;
--pvhl-gold: #e0b50f;
--pvhl-surface: #fefcfa;
--pvhl-surface-container-low: #f8f4ef;
--pvhl-surface-container: #f2ece3;
--pvhl-surface-container-high: #ebe3d7;
--pvhl-on-surface: #1e1e2c;
--pvhl-on-surface-variant: #5c5a68;
--pvhl-outline: #8b8896;
--pvhl-outline-variant: #ddd7cd;
--pvhl-radius: 16px;
--pvhl-radius-lg: 28px;
--pvhl-elevation-1: 0px 1px 2px rgba(30, 30, 44, 0.22), 0px 1px 3px 1px rgba(30, 30, 44, 0.12);
--pvhl-elevation-2: 0px 1px 2px rgba(30, 30, 44, 0.22), 0px 2px 6px 2px rgba(30, 30, 44, 0.12);
--pvhl-elevation-3: 0px 1px 3px rgba(30, 30, 44, 0.24), 0px 4px 8px 3px rgba(30, 30, 44, 0.14);
max-width: 1180px;
margin: 0 auto;
padding: 40px 20px 72px;
}
.pvhl-frontend h1,
.pvhl-frontend h2,
.pvhl-frontend h3 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: var(--pvhl-on-surface);
}
.pvhl-frontend h1 {
font-size: 30px;
letter-spacing: -0.02em;
margin: 0 0 20px;
}
.pvhl-frontend h2 {
font-size: 20px;
letter-spacing: -0.01em;
}
.pvhl-frontend a {
color: var(--pvhl-primary-strong);
}
.pvhl-frontend .pvhl-breadcrumb {
margin: 0 0 20px;
font-size: 14px;
}
.pvhl-frontend .pvhl-breadcrumb a {
color: var(--pvhl-on-surface-variant);
text-decoration: none;
font-weight: 500;
}
.pvhl-frontend .pvhl-breadcrumb a:hover {
color: var(--pvhl-primary-strong);
}
.pvhl-frontend .pvhl-empty-state {
color: var(--pvhl-on-surface-variant);
background: var(--pvhl-surface-container-low);
border: 1px dashed var(--pvhl-outline-variant);
border-radius: var(--pvhl-radius);
padding: 40px;
text-align: center;
}
.pvhl-frontend .pvhl-chip {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pvhl-frontend .pvhl-chip--active {
background: var(--pvhl-primary-container);
color: var(--pvhl-on-primary-container);
}
.pvhl-frontend .pvhl-chip--muted {
background: var(--pvhl-surface-container-high);
color: var(--pvhl-on-surface-variant);
}
/* Ripple: a real Material-style click/tap ripple, added by
assets/js/frontend-interactions.js to any element marked
data-pvhl-ripple. The base rule gives that element the positioning
context and clipping the ripple needs, so no template has to set
position/overflow itself just to support it. */
[data-pvhl-ripple] {
position: relative;
overflow: hidden;
}
.pvhl-ripple {
position: absolute;
border-radius: 50%;
background: currentColor;
opacity: 0.18;
transform: scale(0);
animation: pvhl-ripple 0.55s ease-out;
pointer-events: none;
}
@keyframes pvhl-ripple {
to {
transform: scale(1);
opacity: 0;
}
}
/* Directory — hero: a bold dark-navy panel, the one deliberately dark
surface in an otherwise light product, with warm/cool blurred blobs
(orange, teal, gold) drifting behind the content for depth. */
.pvhl-hero {
position: relative;
overflow: hidden;
border-radius: var(--pvhl-radius-lg);
padding: 60px 44px 48px;
margin-bottom: 40px;
background: linear-gradient(165deg, #23233a 0%, #1e1e2c 55%, #19192a 100%);
box-shadow: var(--pvhl-elevation-2);
isolation: isolate;
}
/* A single flat, direct accent stripe — the primary orange — instead
of a blurred/abstract glow. A plain, literal use of the brand color:
a straight-edged rectangle, not an organic shape. */
.pvhl-hero::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--pvhl-primary);
}
.pvhl-hero-layout {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
}
.pvhl-hero-content {
position: relative;
max-width: 560px;
}
.pvhl-hero-eyebrow {
margin: 0 0 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--pvhl-primary);
}
.pvhl-hero-content h1 {
margin: 0 0 12px;
color: #fff;
font-size: 44px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
.pvhl-hero-tagline {
margin: 0 0 28px;
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.55;
}
/* Stat cards — plain rectangles (the same corner radius as every other
card in this design, not a distinct shape of their own), each filled
with one direct, undiluted brand color rather than a low-opacity
tint, so the two supporting numbers read clearly at a glance. */
.pvhl-hero-stats {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 14px;
flex-shrink: 0;
}
.pvhl-stat-card {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 130px;
padding: 16px 22px;
border-radius: var(--pvhl-radius);
/* Dark ink text, not white: neither the orange nor the teal fill
has enough contrast against white to pass WCAG AA (roughly 2:1
and 2.7:1 respectively) — ink navy against either gives ~6–8:1. */
color: var(--pvhl-ink);
}
.pvhl-stat-card--primary {
background: var(--pvhl-primary);
}
.pvhl-stat-card--teal {
background: var(--pvhl-teal);
}
.pvhl-stat-card strong {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
}
.pvhl-stat-card span {
font-size: 12px;
font-weight: 600;
margin-top: 2px;
}
@media screen and (max-width: 860px) {
.pvhl-hero-layout {
flex-direction: column;
}
.pvhl-hero-stats {
align-self: stretch;
}
.pvhl-stat-card {
flex: 1;
/* Flex items default to `min-width: auto`, which resolves to the
content's own min-content width (here, the longest word in
"Published versions") and silently defeats `flex: 1` — the
item refuses to shrink past that, overflowing its sibling
instead of wrapping. `min-width: 0` is what actually lets it
shrink and the label wrap onto a second line. */
min-width: 0;
}
}
/* Directory search: a bright pill floating on the dark hero for
maximum contrast, with the primary orange as its accent border/button
so the one interactive element in the hero clearly reads as such. */
.pvhl-directory-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
max-width: 440px;
background: var(--pvhl-surface);
border: 1px solid transparent;
border-radius: 999px;
padding: 4px 4px 4px 42px;
box-shadow: var(--pvhl-elevation-2);
transition: box-shadow 0.15s ease;
}
.pvhl-directory-search:focus-within {
box-shadow: 0 0 0 3px rgba(242, 159, 103, 0.4), var(--pvhl-elevation-2);
}
.pvhl-search-icon {
position: absolute;
left: 14px;
width: 18px;
height: 18px;
color: var(--pvhl-on-surface-variant);
pointer-events: none;
}
.pvhl-directory-search input[type='search'] {
flex: 1;
border: 0;
background: transparent;
padding: 10px 4px;
font-size: 14px;
color: var(--pvhl-on-surface);
}
.pvhl-directory-search input[type='search']::placeholder {
color: var(--pvhl-on-surface-variant);
}
.pvhl-directory-search input[type='search']:focus {
outline: none;
}
.pvhl-directory-search button {
padding: 10px 22px;
border: 0;
border-radius: 999px;
background: var(--pvhl-primary);
color: var(--pvhl-on-primary);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: filter 0.15s ease;
}
.pvhl-directory-search button:hover {
filter: brightness(1.06);
}
@media screen and (max-width: 640px) {
.pvhl-hero {
padding: 40px 24px 32px;
border-radius: 24px;
}
.pvhl-hero-content h1 {
font-size: 32px;
}
}
/* Project grid — light elevated cards: image on top at a fixed aspect
ratio, content in a plain surface body below, a state-layer tint on
hover, and a ripple on click. */
.pvhl-project-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 270px, 1fr ) );
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.pvhl-project-card {
position: relative;
border-radius: var(--pvhl-radius);
overflow: hidden;
background: var(--pvhl-surface);
box-shadow: var(--pvhl-elevation-1);
transition: box-shadow 0.18s ease, translate 0.18s ease;
opacity: 0;
translate: 0 12px;
animation: pvhl-card-in 0.4s ease forwards;
animation-delay: calc(var(--pvhl-stagger, 0) * 50ms);
}
@keyframes pvhl-card-in {
from {
opacity: 0;
translate: 0 12px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pvhl-project-card {
opacity: 1;
animation: none;
}
}
.pvhl-project-card:hover,
.pvhl-project-card:focus-within {
box-shadow: var(--pvhl-elevation-3);
translate: 0 -3px;
}
.pvhl-project-card a {
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
/* The state layer: a flat tint of the surface at a fixed low opacity on
hover/focus, kept independent of the ripple (which needs its own
stacking so it sits above this tint, not blended into it). */
.pvhl-project-card a::after {
content: '';
position: absolute;
inset: 0;
background: var(--pvhl-primary);
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.pvhl-project-card:hover a::after,
.pvhl-project-card:focus-within a::after {
opacity: 0.06;
}
.pvhl-project-card-media {
position: relative;
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--pvhl-surface-container-high);
}
.pvhl-project-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pvhl-project-card-initial {
font-size: 42px;
font-weight: 800;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.02em;
}
.pvhl-project-card-badge {
position: absolute;
top: 12px;
right: 12px;
background: rgba(255, 255, 255, 0.92);
color: var(--pvhl-on-surface);
box-shadow: var(--pvhl-elevation-1);
}
.pvhl-project-card-content {
padding: 18px 18px 16px;
}
.pvhl-project-card h2 {
margin: 0 0 6px;
font-size: 17px;
letter-spacing: -0.01em;
}
.pvhl-project-card-content p:not(.pvhl-project-card-meta) {
margin: 0 0 10px;
font-size: 14px;
color: var(--pvhl-on-surface-variant);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pvhl-project-card-meta {
font-size: 12px;
color: var(--pvhl-on-surface-variant);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
.pvhl-project-card-cta {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--pvhl-primary-strong);
font-weight: 700;
}
.pvhl-project-card-cta svg {
width: 12px;
height: 12px;
transition: transform 0.15s ease;
}
.pvhl-project-card:hover .pvhl-project-card-cta svg {
transform: translateX(3px);
}
/* Generated cover (no administrator-supplied image): one straight,
direct two-color linear gradient between exactly one pair out of the
fixed brand palette (CoverPlaceholder::PALETTE — orange/blue/teal/gold
combined with each other or with ink navy), never an arbitrary hue —
a generated cover should always look like it belongs to this product.
No radial highlights, no texture overlay: the two brand colors
themselves, plainly. Shared by the directory tile cover and the
project-detail hero so both surfaces render a project's generated
cover identically.
The two-class selector is deliberate, not stylistic: both
`.pvhl-project-card-media` and `.pvhl-project-detail-hero` declare
their own plain `background` elsewhere in this file (a neutral
fallback behind a real `![]()
` while it loads) at equal specificity
to a bare `.pvhl-cover-generated` — chaining both classes raises this
rule's specificity above either element rule regardless of source
order, so it can't silently lose that tie. */
.pvhl-project-card-media.pvhl-cover-generated,
.pvhl-project-detail-hero.pvhl-cover-generated {
/* Two of the six palette pairs (orange+gold, blue+teal) are both
light-to-mid colors with no dark navy in the mix — on their own
they don't have enough contrast for the white initial mark and
version-badge chip on top (roughly 2:1, against a 4.5:1 AA
target). A light, uniform darkening keeps every pair legible
without turning this back into a multi-layer effect. */
background: linear-gradient(
var(--pvhl-cover-angle),
color-mix(in srgb, var(--pvhl-cover-c1) 82%, black),
color-mix(in srgb, var(--pvhl-cover-c2) 78%, black)
);
}
.pvhl-pagination {
display: flex;
gap: 8px;
margin-top: 32px;
}
.pvhl-pagination a,
.pvhl-pagination-current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 999px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.pvhl-pagination a {
color: var(--pvhl-on-surface-variant);
background: var(--pvhl-surface-container-low);
}
.pvhl-pagination a:hover {
background: var(--pvhl-surface-container-high);
color: var(--pvhl-on-surface);
}
.pvhl-pagination-current {
background: var(--pvhl-primary);
color: var(--pvhl-on-primary);
}
.pvhl-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 22px;
border-radius: 999px;
background: var(--pvhl-primary);
color: var(--pvhl-on-primary) !important;
text-decoration: none;
font-weight: 700;
font-size: 14px;
box-shadow: var(--pvhl-elevation-1);
transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.pvhl-button:hover {
box-shadow: var(--pvhl-elevation-2);
filter: brightness(1.05);
}
/* Project detail */
.pvhl-project-detail-hero {
position: relative;
border-radius: var(--pvhl-radius-lg);
overflow: hidden;
min-height: 220px;
display: flex;
align-items: flex-end;
margin-bottom: 28px;
background: var(--pvhl-surface-container-high);
box-shadow: var(--pvhl-elevation-1);
}
.pvhl-project-detail-hero-image {
position: absolute;
inset: 0;
}
.pvhl-project-detail-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pvhl-project-detail-hero-initial {
position: absolute;
top: 24px;
left: 28px;
font-size: 40px;
font-weight: 800;
color: rgba(255, 255, 255, 0.55);
}
.pvhl-project-detail-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(30, 30, 44, 0.7) 0%, rgba(30, 30, 44, 0) 60%);
}
.pvhl-project-detail-hero-content {
position: relative;
z-index: 1;
padding: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
width: 100%;
}
.pvhl-project-detail-hero-content h1 {
margin: 0;
color: #fff;
flex: 1;
min-width: 200px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.pvhl-project-detail-description {
margin-bottom: 28px;
line-height: 1.6;
color: var(--pvhl-on-surface-variant);
}
.pvhl-version-history {
list-style: none;
margin: 0;
padding: 0;
background: var(--pvhl-surface);
border-radius: var(--pvhl-radius);
box-shadow: var(--pvhl-elevation-1);
overflow: hidden;
}
.pvhl-version-history li {
border-bottom: 1px solid var(--pvhl-outline-variant);
}
.pvhl-version-history li:last-child {
border-bottom: 0;
}
.pvhl-version-history a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
text-decoration: none;
color: inherit;
}
.pvhl-version-history a::after {
content: '';
position: absolute;
inset: 0;
background: var(--pvhl-primary);
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.pvhl-version-history a:hover::after {
opacity: 0.08;
}
.pvhl-version-history-label {
font-weight: 600;
color: var(--pvhl-on-surface);
}
.pvhl-version-history-chips {
display: flex;
gap: 6px;
flex: 1;
}
.pvhl-project-card-arrow {
color: var(--pvhl-primary-strong);
font-weight: 700;
}
/* Viewer shell */
.pvhl-viewer {
max-width: none;
padding: 20px 24px;
display: flex;
flex-direction: column;
height: calc( 100vh - 40px );
box-sizing: border-box;
}
.pvhl-viewer-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pvhl-viewer-switchers {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.pvhl-viewer-project-name {
font-weight: 600;
color: var(--pvhl-on-surface-variant);
font-size: 14px;
}
.pvhl-switcher select {
appearance: none;
padding: 8px 32px 8px 14px;
border-radius: 999px;
border: 1px solid var(--pvhl-outline-variant);
background: var(--pvhl-surface-container-low) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c5a68' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
font-size: 13px;
font-weight: 600;
color: var(--pvhl-on-surface);
cursor: pointer;
max-width: 220px;
}
.pvhl-switcher select:focus {
outline: 2px solid var(--pvhl-primary);
outline-offset: 1px;
}
.pvhl-viewer-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}
.pvhl-viewer-title-row h1 {
margin: 0;
font-size: 22px;
flex: 1;
color: var(--pvhl-on-surface);
}
.pvhl-fullscreen-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--pvhl-outline-variant);
background: var(--pvhl-surface-container-low);
color: var(--pvhl-on-surface);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.pvhl-fullscreen-toggle:hover {
border-color: var(--pvhl-primary);
color: var(--pvhl-primary-strong);
}
.pvhl-fullscreen-icon {
width: 12px;
height: 12px;
position: relative;
display: inline-block;
}
.pvhl-fullscreen-icon::before,
.pvhl-fullscreen-icon::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
border: 1.5px solid currentColor;
}
.pvhl-fullscreen-icon::before {
top: 0;
left: 0;
border-right: 0;
border-bottom: 0;
}
.pvhl-fullscreen-icon::after {
bottom: 0;
right: 0;
border-left: 0;
border-top: 0;
}
.pvhl-release-notes {
margin-top: 12px;
font-size: 13px;
}
.pvhl-release-notes summary {
cursor: pointer;
color: var(--pvhl-on-surface-variant);
font-weight: 600;
}
.pvhl-release-notes p {
margin: 8px 0 0;
color: var(--pvhl-on-surface-variant);
}
.pvhl-viewer-body {
flex: 1;
display: flex;
gap: 20px;
min-height: 0;
margin-top: 16px;
}
.pvhl-page-menu-toggle {
display: none;
}
.pvhl-page-menu {
background: var(--pvhl-surface);
border-radius: var(--pvhl-radius);
box-shadow: var(--pvhl-elevation-1);
padding: 10px;
align-self: flex-start;
}
.pvhl-page-menu ul {
list-style: none;
margin: 0;
padding: 0;
min-width: 200px;
}
.pvhl-page-menu a {
display: block;
padding: 9px 12px;
border-radius: 999px;
text-decoration: none;
color: var(--pvhl-on-surface);
font-size: 14px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
}
.pvhl-page-menu a:hover {
background: var(--pvhl-surface-container-high);
}
.pvhl-page-menu a[aria-current='page'] {
background: var(--pvhl-primary-container);
color: var(--pvhl-on-primary-container) !important;
font-weight: 600;
}
.pvhl-viewer-frame {
flex: 1;
min-height: 0;
border-radius: var(--pvhl-radius);
overflow: hidden;
box-shadow: var(--pvhl-elevation-2);
background: #fff;
}
.pvhl-viewer-frame iframe {
width: 100%;
height: 100%;
border: 0;
background: #fff;
display: block;
}
.pvhl-viewer-frame--fullscreen {
border-radius: 0;
}
@media screen and ( max-width: 782px ) {
.pvhl-viewer {
padding: 14px;
height: calc( 100vh - 28px );
}
.pvhl-page-menu-toggle {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--pvhl-outline-variant);
background: var(--pvhl-surface-container-low);
color: var(--pvhl-on-surface);
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
cursor: pointer;
}
.pvhl-viewer-body {
flex-direction: column;
}
.pvhl-page-menu {
display: none;
}
.pvhl-page-menu--open {
display: block;
}
.pvhl-viewer-frame {
flex: 1;
}
.pvhl-project-detail-hero-content {
padding: 20px;
}
}