mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Angel Simon Sierra
bb912587b9
Adds the 25 video primitive compositions and their generated Mintlify pages. Each page embeds a live <hyperframes-player> preview with editable composition variables rather than a rendered MP4. Adds the catalog-browsing eval under evals/catalog-retrieval: a 424-entry shelf built from HEAD, nine retrieval conditions (no-catalog control, full read, lexical, semantic, and hybrid across several values of k), a brief generator that constructs each brief from a known target, a blind three-pass gold validation committee, and a mechanical scorer that keeps mountable and fit as two separate numbers. The eval vendors its own shelf, primitive sources, and preview list instead of reading them from an ignored working directory, so the shelf regenerates byte for byte from a clean checkout. Derived artifacts stay out: the embedding cache and the run checkpoints are regenerated rather than committed, so no run can score against a stale copy of either. Lint ignores now cover vendored minified player bundles by pattern instead of one path at a time.
659 lines
14 KiB
CSS
659 lines
14 KiB
CSS
/* HyperFrames Design System - Mintlify Theme Overrides */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ── TT Norms Pro (matches hyperframes.heygen.com) ── */
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Normal.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Medium.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_DemiBold.woff2') format('woff2');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TT Norms Pro';
|
|
src: url('https://www-static-assets.heygen.com/fonts/tt-norms/TT_Norms_Pro_Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Light mode (default) ── */
|
|
/*
|
|
* NOTE: All custom variables are namespaced with `--hf-` to avoid
|
|
* colliding with Mintlify's Tailwind color system, which owns names
|
|
* like `--background-light` / `--background-dark` and uses them via
|
|
* `rgb(var(--background-light)/<alpha>)`. Overriding those with hex
|
|
* values breaks the rgb() call and makes surfaces transparent (e.g.
|
|
* the "Copy page" dropdown panel in light mode).
|
|
*/
|
|
|
|
:root {
|
|
--hf-background: #f6f5f1;
|
|
--hf-background-light: #ffffff;
|
|
--hf-surface2: #eeedea;
|
|
--hf-border-color: #e0dfdb;
|
|
--hf-border-color-light: #d0cfcb;
|
|
--hf-text: #1a1a1a;
|
|
--hf-text-secondary: #6b6b6b;
|
|
--hf-text-tertiary: #999999;
|
|
--hf-heading: #0a0a0a;
|
|
--hf-code-bg: #ffffff;
|
|
|
|
--hf-accent-green: #1a7a0a;
|
|
--hf-accent-green-light: rgba(26, 122, 10, 0.07);
|
|
--hf-accent-green-border: rgba(26, 122, 10, 0.25);
|
|
--hf-accent-blue: #2563eb;
|
|
--hf-accent-blue-light: rgba(37, 99, 235, 0.06);
|
|
--hf-accent-blue-border: rgba(37, 99, 235, 0.2);
|
|
--hf-accent-purple: #7c3aed;
|
|
--hf-accent-purple-light: rgba(124, 58, 237, 0.06);
|
|
--hf-accent-purple-border: rgba(124, 58, 237, 0.2);
|
|
|
|
--hf-selection-bg: rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
/* ── Dark mode ── */
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
--hf-background: #0a0a0a;
|
|
--hf-background-light: #141414;
|
|
--hf-surface2: #1a1a1a;
|
|
--hf-border-color: #2a2a2a;
|
|
--hf-border-color-light: #3a3a3a;
|
|
--hf-text: #e5e5e5;
|
|
--hf-text-secondary: #a0a0a0;
|
|
--hf-text-tertiary: #666666;
|
|
--hf-heading: #f5f5f5;
|
|
--hf-code-bg: #141414;
|
|
|
|
--hf-accent-green: #22c55e;
|
|
--hf-accent-green-light: rgba(34, 197, 94, 0.1);
|
|
--hf-accent-green-border: rgba(34, 197, 94, 0.3);
|
|
--hf-accent-blue: #3b82f6;
|
|
--hf-accent-blue-light: rgba(59, 130, 246, 0.1);
|
|
--hf-accent-blue-border: rgba(59, 130, 246, 0.3);
|
|
--hf-accent-purple: #a78bfa;
|
|
--hf-accent-purple-light: rgba(167, 139, 250, 0.1);
|
|
--hf-accent-purple-border: rgba(167, 139, 250, 0.3);
|
|
|
|
--hf-selection-bg: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* ── Typography ── */
|
|
|
|
body {
|
|
font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'TT Norms Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
h1, h2 {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h3 {
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Code font - IBM Plex Mono (loaded via Google Fonts above) */
|
|
code, pre, pre code, kbd,
|
|
[class*="code"],
|
|
[class*="Code"] {
|
|
font-family: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
|
|
}
|
|
|
|
/* ── Code blocks ── */
|
|
|
|
pre {
|
|
background: var(--hf-code-bg) !important;
|
|
border: 1px solid var(--hf-border-color) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* ── Selection ── */
|
|
|
|
::selection {
|
|
background: var(--hf-selection-bg);
|
|
}
|
|
|
|
/* ── Links ── */
|
|
|
|
a:not([class]) {
|
|
color: var(--hf-accent-blue);
|
|
}
|
|
|
|
a:not([class]):hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Catalog texture examples */
|
|
|
|
.hf-texture-preview-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin: 24px 0 40px;
|
|
}
|
|
|
|
.hf-texture-preview-card {
|
|
min-width: 0;
|
|
border: 1px solid rgba(127, 127, 127, 0.22);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
background: #101010;
|
|
}
|
|
|
|
.hf-texture-preview-label {
|
|
margin-bottom: 12px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hf-texture-preview-shadow {
|
|
filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.48));
|
|
}
|
|
|
|
.hf-texture-preview-word {
|
|
color: #fff;
|
|
font-family: Impact, 'Arial Black', sans-serif;
|
|
font-size: 42px;
|
|
line-height: 0.9;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
-webkit-mask-image: var(--mask-url);
|
|
mask-image: var(--mask-url);
|
|
-webkit-mask-size: cover;
|
|
mask-size: cover;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-mode: luminance;
|
|
mask-mode: luminance;
|
|
}
|
|
|
|
.hf-texture-animate-demo {
|
|
border: 1px solid rgba(127, 127, 127, 0.22);
|
|
border-radius: 8px;
|
|
padding: 22px;
|
|
margin: 20px 0 24px;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.54) 1px, transparent 1px),
|
|
#f1f1f1;
|
|
background-size: 44px 100%;
|
|
}
|
|
|
|
.hf-texture-animate-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.hf-texture-animate-label {
|
|
min-width: 0;
|
|
color: rgba(24, 24, 24, 0.62);
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hf-texture-animate-class {
|
|
max-width: 62%;
|
|
padding: 2px 6px;
|
|
border: 1px solid rgba(24, 24, 24, 0.12);
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: rgba(24, 24, 24, 0.78);
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hf-texture-animate-shadow {
|
|
filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.48));
|
|
}
|
|
|
|
.hf-texture-animate-word {
|
|
color: #181818;
|
|
font-family: Impact, 'Arial Black', sans-serif;
|
|
font-size: 92px;
|
|
line-height: 0.9;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
-webkit-mask-image: var(--mask-url);
|
|
mask-image: var(--mask-url);
|
|
-webkit-mask-size: 180% 180%;
|
|
mask-size: 180% 180%;
|
|
-webkit-mask-position: 0% 50%;
|
|
mask-position: 0% 50%;
|
|
-webkit-mask-mode: luminance;
|
|
mask-mode: luminance;
|
|
animation: hf-texture-mask-pan 2.1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes hf-texture-mask-pan {
|
|
from {
|
|
-webkit-mask-position: 0% 50%;
|
|
mask-position: 0% 50%;
|
|
}
|
|
|
|
to {
|
|
-webkit-mask-position: 100% 50%;
|
|
mask-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
.hf-texture-example-groups {
|
|
display: grid;
|
|
gap: 32px;
|
|
margin: 20px 0 40px;
|
|
}
|
|
|
|
.hf-texture-example-title {
|
|
margin: 0 0 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hf-texture-example-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.hf-texture-example-card {
|
|
border: 1px solid rgba(127, 127, 127, 0.22);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
.hf-texture-example-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.hf-texture-example-label {
|
|
min-width: 0;
|
|
color: rgba(24, 24, 24, 0.62);
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hf-texture-example-class {
|
|
max-width: 62%;
|
|
padding: 2px 6px;
|
|
border: 1px solid rgba(24, 24, 24, 0.12);
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: rgba(24, 24, 24, 0.78);
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hf-texture-example-shadow {
|
|
filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.48));
|
|
}
|
|
|
|
.hf-texture-example-word {
|
|
color: #181818;
|
|
font-family: Impact, 'Arial Black', sans-serif;
|
|
font-size: 54px;
|
|
line-height: 0.9;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
-webkit-mask-image: var(--mask-url);
|
|
mask-image: var(--mask-url);
|
|
-webkit-mask-size: cover;
|
|
mask-size: cover;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-mode: luminance;
|
|
mask-mode: luminance;
|
|
}
|
|
|
|
.hf-texture-example-usage {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
margin-top: 14px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(24, 24, 24, 0.1);
|
|
color: rgba(24, 24, 24, 0.56);
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hf-texture-example-usage code {
|
|
min-width: 0;
|
|
color: rgba(24, 24, 24, 0.82);
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.hf-texture-preview-panel {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.hf-texture-preview-panel {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hf-texture-preview-word {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.hf-texture-animate-meta {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hf-texture-animate-class {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hf-texture-animate-word {
|
|
font-size: 56px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hf-texture-animate-word {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Primitive gallery */
|
|
|
|
:root {
|
|
--hf-primitive-surface: #ffffff;
|
|
--hf-primitive-text: #172033;
|
|
--hf-primitive-muted: #526079;
|
|
--hf-primitive-border: rgba(23, 32, 51, 0.12);
|
|
--hf-primitive-focus: #315efb;
|
|
}
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
--hf-primitive-surface: #11141b;
|
|
--hf-primitive-text: #f4f7fb;
|
|
--hf-primitive-muted: #b8c3d4;
|
|
--hf-primitive-border: rgba(244, 247, 251, 0.14);
|
|
--hf-primitive-focus: #8fa8ff;
|
|
}
|
|
|
|
.hf-primitive-hero {
|
|
max-width: 680px;
|
|
margin: 8px 0 48px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.hf-primitive-eyebrow {
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hf-primitive-hero h1 {
|
|
margin: 0;
|
|
color: var(--hf-primitive-text);
|
|
font-size: clamp(36px, 7vw, 56px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.045em;
|
|
line-height: 1;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hf-primitive-hero p {
|
|
max-width: 62ch;
|
|
margin: 20px 0 0;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 17px;
|
|
line-height: 1.65;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.hf-primitive-sections {
|
|
display: grid;
|
|
gap: 48px;
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.hf-primitive-section {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hf-primitive-section-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.hf-primitive-section-index {
|
|
padding-top: 3px;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.hf-primitive-section-header h2 {
|
|
margin: 0;
|
|
color: var(--hf-primitive-text);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hf-primitive-section-header p {
|
|
margin: 3px 0 0;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.hf-primitive-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.hf-primitive-card {
|
|
display: block;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
background: var(--hf-primitive-surface);
|
|
color: var(--hf-primitive-text);
|
|
text-decoration: none !important;
|
|
box-shadow:
|
|
0 0 0 1px var(--hf-primitive-border),
|
|
0 1px 2px rgba(15, 23, 42, 0.05),
|
|
0 8px 24px rgba(15, 23, 42, 0.06);
|
|
transform: translateY(0) scale(1);
|
|
transition-property: transform, box-shadow;
|
|
transition-duration: 180ms;
|
|
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
|
|
.hf-primitive-card:hover {
|
|
color: var(--hf-primitive-text);
|
|
box-shadow:
|
|
0 0 0 1px var(--hf-primitive-border),
|
|
0 3px 8px rgba(15, 23, 42, 0.08),
|
|
0 18px 42px rgba(15, 23, 42, 0.12);
|
|
transform: translateY(-2px) scale(1);
|
|
}
|
|
|
|
.hf-primitive-card:active {
|
|
transform: translateY(0) scale(0.96);
|
|
}
|
|
|
|
.hf-primitive-card:focus-visible {
|
|
outline: 3px solid var(--hf-primitive-focus);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.hf-primitive-card .hf-player-frame {
|
|
overflow: hidden;
|
|
border-radius: 13px 13px 0 0;
|
|
background: #0b0c0e;
|
|
}
|
|
|
|
.hf-primitive-card .hf-embed-preview {
|
|
transform: scale(1);
|
|
transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
|
|
.hf-primitive-card:hover .hf-embed-preview {
|
|
transform: scale(1.015);
|
|
}
|
|
|
|
.hf-primitive-card-body {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 16px;
|
|
background: var(--hf-primitive-surface);
|
|
}
|
|
|
|
.hf-primitive-card-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Deliberately not a heading element: a real heading inside the card's anchor
|
|
made Mintlify nest an anchor inside an anchor, which broke hydration. */
|
|
.hf-primitive-card-title {
|
|
min-width: 0;
|
|
margin: 0;
|
|
color: var(--hf-primitive-text);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.35;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hf-primitive-card-aspect {
|
|
flex: 0 0 auto;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.hf-primitive-card-body > p {
|
|
display: -webkit-box;
|
|
margin: 8px 0 0;
|
|
overflow: hidden;
|
|
color: var(--hf-primitive-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-wrap: pretty;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.hf-player-frame,
|
|
.hf-player-host {
|
|
min-width: 0;
|
|
}
|
|
|
|
.hf-player-frame:not(.hf-player-frame-preview) {
|
|
margin: 24px 0 32px;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.hf-primitive-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-auto-flow: dense;
|
|
gap: 20px;
|
|
}
|
|
|
|
.hf-primitive-card[data-orientation="portrait"] {
|
|
grid-row: span 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.hf-primitive-hero {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.hf-primitive-sections {
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hf-primitive-card,
|
|
.hf-primitive-card .hf-embed-preview {
|
|
transition: none;
|
|
}
|
|
|
|
.hf-primitive-card:hover,
|
|
.hf-primitive-card:active,
|
|
.hf-primitive-card:hover .hf-embed-preview {
|
|
transform: none;
|
|
}
|
|
}
|