wehub-resource-sync
85453da49f
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
CodeQL / Analyze (actions) (push) Has been cancelled
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
CodeQL / Analyze (python) (push) Has been cancelled
Docs / Validate docs (push) Has been cancelled
Sync skills to ClawHub / Publish changed skills (push) Has been cancelled
1215 lines
34 KiB
HTML
1215 lines
34 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Biennale Yellow</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style id="ds-tokens">
|
||
:root {
|
||
--paper: #e9e5db;
|
||
--paper-deep: #dcd6c4;
|
||
--sun: #f1ee2e;
|
||
--sun-soft: #f8f39b;
|
||
--haze: #f0da7c;
|
||
--ink: #1b2566;
|
||
--ember: #e26b4a;
|
||
--serif: "Instrument Serif", Georgia, serif;
|
||
--sans: "Archivo", sans-serif;
|
||
--mono: "JetBrains Mono", ui-monospace, monospace;
|
||
--bloom: radial-gradient(
|
||
circle at 50% 50%,
|
||
rgba(241, 238, 46, 0.92) 0%,
|
||
rgba(241, 238, 46, 0.5) 30%,
|
||
rgba(240, 218, 124, 0.22) 55%,
|
||
rgba(233, 229, 219, 0) 78%
|
||
);
|
||
}
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
background: #0c0d1a;
|
||
}
|
||
body {
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.serif {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
letter-spacing: -0.018em;
|
||
line-height: 0.9;
|
||
}
|
||
.micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
font-size: 13px;
|
||
}
|
||
|
||
section {
|
||
padding: 120px 76px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 24px;
|
||
border-bottom: 1px solid var(--ink);
|
||
padding-bottom: 18px;
|
||
margin-bottom: 56px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.sec-head .micro {
|
||
color: var(--ink);
|
||
}
|
||
.sec-head h2 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.sec-head .sp {
|
||
flex: 1;
|
||
}
|
||
|
||
/* COVER */
|
||
.cover {
|
||
min-height: 100vh;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cover .bloom {
|
||
position: absolute;
|
||
width: 62%;
|
||
height: 70%;
|
||
left: 8%;
|
||
top: 14%;
|
||
background: var(--bloom);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.cover .ember {
|
||
position: absolute;
|
||
width: 36%;
|
||
height: 40%;
|
||
right: -6%;
|
||
bottom: -6%;
|
||
background: radial-gradient(
|
||
circle at 60% 60%,
|
||
rgba(226, 107, 74, 0.2) 0%,
|
||
rgba(226, 107, 74, 0) 70%
|
||
);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.cover .daterail {
|
||
position: absolute;
|
||
top: 64px;
|
||
right: 76px;
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: clamp(48px, 5.2vw, 84px);
|
||
line-height: 0.96;
|
||
text-align: right;
|
||
letter-spacing: -0.005em;
|
||
z-index: 2;
|
||
}
|
||
.cover .inner {
|
||
padding: 0 76px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.cover .micro {
|
||
margin-bottom: 28px;
|
||
}
|
||
.cover h1 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: clamp(110px, 15vw, 230px);
|
||
line-height: 0.84;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.cover h1 em {
|
||
font-style: italic;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.cover .footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
|
||
gap: 36px;
|
||
padding: 0 76px 56px;
|
||
z-index: 2;
|
||
}
|
||
.cover .fcell {
|
||
border-top: 1px solid var(--ink);
|
||
padding-top: 14px;
|
||
}
|
||
.cover .fcell .t {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.cover .fcell .b {
|
||
font-family: var(--sans);
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
}
|
||
.cover .pagenum {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 48px;
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
letter-spacing: 0.08em;
|
||
opacity: 0.75;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* PALETTE */
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.sw .chip {
|
||
height: 130px;
|
||
border: 1px solid var(--ink);
|
||
}
|
||
.sw .name {
|
||
font-family: var(--serif);
|
||
font-size: 26px;
|
||
margin-top: 14px;
|
||
}
|
||
.sw .hex {
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--ink);
|
||
opacity: 0.7;
|
||
margin-top: 6px;
|
||
}
|
||
.sw .role {
|
||
font-family: var(--sans);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* TYPE */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr;
|
||
align-items: center;
|
||
padding: 26px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
}
|
||
.type-row .tok {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
.type-row .m {
|
||
font-family: var(--mono);
|
||
font-size: 11px;
|
||
color: var(--ink);
|
||
opacity: 0.65;
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
}
|
||
.type-row .spec {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* COMPONENTS */
|
||
.cnote {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 12px;
|
||
margin-bottom: 22px;
|
||
}
|
||
.cgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 48px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.s4 {
|
||
grid-column: span 4;
|
||
}
|
||
.s5 {
|
||
grid-column: span 5;
|
||
}
|
||
.s6 {
|
||
grid-column: span 6;
|
||
}
|
||
.s7 {
|
||
grid-column: span 7;
|
||
}
|
||
.s8 {
|
||
grid-column: span 8;
|
||
}
|
||
.ledger .row {
|
||
display: grid;
|
||
grid-template-columns: 92px 1.6fr 0.9fr 80px;
|
||
gap: 24px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.ledger .dt {
|
||
font-family: var(--mono);
|
||
font-size: 14px;
|
||
}
|
||
.ledger .ti {
|
||
font-family: var(--serif);
|
||
font-size: 26px;
|
||
line-height: 1.1;
|
||
}
|
||
.ledger .vn {
|
||
font-family: var(--sans);
|
||
font-size: 13px;
|
||
color: var(--ink);
|
||
}
|
||
.ledger .du {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
text-align: right;
|
||
}
|
||
.strand .row {
|
||
display: grid;
|
||
grid-template-columns: 56px 1fr;
|
||
gap: 20px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.strand .nm {
|
||
font-family: var(--serif);
|
||
font-size: 34px;
|
||
line-height: 1;
|
||
}
|
||
.strand .ti {
|
||
font-family: var(--serif);
|
||
font-size: 24px;
|
||
line-height: 1.1;
|
||
}
|
||
.strand .bd {
|
||
font-family: var(--sans);
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
margin-top: 4px;
|
||
}
|
||
.bars .row {
|
||
display: grid;
|
||
grid-template-columns: 60px 1fr 60px;
|
||
gap: 16px;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
.bars .yr {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
}
|
||
.bars .bar {
|
||
height: 20px;
|
||
background: var(--ink);
|
||
}
|
||
.bars .bar.lit {
|
||
background: var(--sun);
|
||
border: 1px solid var(--ink);
|
||
}
|
||
.bars .vl {
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
text-align: right;
|
||
}
|
||
.ypanel {
|
||
background: var(--sun);
|
||
padding: 36px;
|
||
color: var(--ink);
|
||
}
|
||
.ypanel .l {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
.ypanel .h {
|
||
font-family: var(--serif);
|
||
font-size: 44px;
|
||
line-height: 0.95;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* COMPOSITIONS */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.fw .flabel {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: baseline;
|
||
margin-bottom: 16px;
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
color: var(--ink);
|
||
opacity: 0.6;
|
||
}
|
||
.fw .flabel b {
|
||
opacity: 1;
|
||
}
|
||
.frame {
|
||
aspect-ratio: 16/9;
|
||
container-type: size;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--paper);
|
||
box-shadow: 0 0 0 1px rgba(27, 37, 102, 0.15);
|
||
}
|
||
.frame > .body {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
}
|
||
.frame .bloom {
|
||
position: absolute;
|
||
background: var(--bloom);
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
.frame .pn {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: 2.6cqw;
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
opacity: 0.75;
|
||
z-index: 4;
|
||
}
|
||
|
||
/* f1 cover */
|
||
.yf1 .bloom {
|
||
width: 58%;
|
||
height: 64%;
|
||
left: 6%;
|
||
top: 16%;
|
||
}
|
||
.yf1 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw;
|
||
}
|
||
.yf1 .micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3cqw;
|
||
font-size: 1cqw;
|
||
margin-bottom: 1.8cqw;
|
||
}
|
||
.yf1 h3 {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 13cqw;
|
||
line-height: 0.84;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.yf1 h3 em {
|
||
font-style: italic;
|
||
}
|
||
.yf1 .dr {
|
||
position: absolute;
|
||
top: 4cqw;
|
||
right: 4cqw;
|
||
font-family: var(--serif);
|
||
font-size: 5cqw;
|
||
line-height: 0.96;
|
||
text-align: right;
|
||
letter-spacing: -0.005em;
|
||
z-index: 4;
|
||
}
|
||
|
||
/* f2 chapter divider */
|
||
.yf2 .bloom {
|
||
width: 60%;
|
||
height: 80%;
|
||
right: -10%;
|
||
top: -10%;
|
||
left: auto;
|
||
}
|
||
.yf2 .rail {
|
||
position: absolute;
|
||
left: 3cqw;
|
||
top: 50%;
|
||
transform: rotate(-90deg) translateX(50%);
|
||
transform-origin: left center;
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.32em;
|
||
font-size: 1cqw;
|
||
white-space: nowrap;
|
||
z-index: 4;
|
||
}
|
||
.yf2 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 5cqw 0 9cqw;
|
||
}
|
||
.yf2 .num {
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 38cqw;
|
||
line-height: 0.84;
|
||
letter-spacing: -0.04em;
|
||
color: var(--ink);
|
||
}
|
||
.yf2 .ti {
|
||
font-family: var(--serif);
|
||
font-size: 3.6cqw;
|
||
line-height: 1.05;
|
||
margin-top: -2cqw;
|
||
max-width: 46cqw;
|
||
}
|
||
|
||
/* f3 ledger */
|
||
.yf3 .body {
|
||
padding: 6cqw 5cqw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.yf3 .top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 1px solid var(--ink);
|
||
padding-bottom: 1.2cqw;
|
||
margin-bottom: 1.6cqw;
|
||
}
|
||
.yf3 .top h4 {
|
||
font-family: var(--serif);
|
||
font-size: 3.6cqw;
|
||
line-height: 1;
|
||
}
|
||
.yf3 .top .micro {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2cqw;
|
||
font-size: 0.9cqw;
|
||
}
|
||
.yf3 .row {
|
||
display: grid;
|
||
grid-template-columns: 8cqw 1.6fr 0.9fr 6cqw;
|
||
gap: 1.6cqw;
|
||
padding: 1cqw 0;
|
||
border-bottom: 1px solid rgba(27, 37, 102, 0.2);
|
||
align-items: baseline;
|
||
}
|
||
.yf3 .dt {
|
||
font-family: var(--mono);
|
||
font-size: 1cqw;
|
||
}
|
||
.yf3 .ti {
|
||
font-family: var(--serif);
|
||
font-size: 1.9cqw;
|
||
line-height: 1.1;
|
||
}
|
||
.yf3 .vn {
|
||
font-family: var(--sans);
|
||
font-size: 0.95cqw;
|
||
}
|
||
.yf3 .du {
|
||
font-family: var(--mono);
|
||
font-size: 0.95cqw;
|
||
text-align: right;
|
||
}
|
||
|
||
/* f4 manifesto */
|
||
.yf4 .bloom {
|
||
width: 54%;
|
||
height: 60%;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.yf4 .body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 0 9cqw;
|
||
}
|
||
.yf4 .qm {
|
||
font-family: var(--serif);
|
||
font-size: 14cqw;
|
||
line-height: 0.5;
|
||
height: 7cqw;
|
||
}
|
||
.yf4 .q {
|
||
font-family: var(--serif);
|
||
font-style: italic;
|
||
font-size: 5cqw;
|
||
line-height: 1.04;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.yf4 .at {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.25cqw;
|
||
font-size: 1cqw;
|
||
margin-top: 2.4cqw;
|
||
}
|
||
|
||
/* PRINCIPLES */
|
||
.dos {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 56px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.do-card h4 {
|
||
font-family: var(--serif);
|
||
font-size: 34px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.do-card .rule {
|
||
height: 1px;
|
||
background: var(--ink);
|
||
margin-bottom: 22px;
|
||
}
|
||
.do-card ul {
|
||
list-style: none;
|
||
}
|
||
.do-card li {
|
||
font-family: var(--sans);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
padding-left: 22px;
|
||
position: relative;
|
||
margin-bottom: 13px;
|
||
color: var(--ink);
|
||
}
|
||
.do-card li::before {
|
||
position: absolute;
|
||
left: 0;
|
||
font-family: var(--serif);
|
||
}
|
||
.do-card.do li::before {
|
||
content: "\2014";
|
||
}
|
||
.do-card.dont li::before {
|
||
content: "\00d7";
|
||
color: var(--ember);
|
||
}
|
||
|
||
.foot {
|
||
padding: 64px 76px;
|
||
border-top: 1px solid var(--ink);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.foot .l {
|
||
font-family: var(--serif);
|
||
font-size: 30px;
|
||
}
|
||
.foot .r {
|
||
font-family: var(--sans);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
font-size: 11px;
|
||
}
|
||
@media (max-width: 1100px) {
|
||
.gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.swatches {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
|
||
/>
|
||
<style id="ft-override">
|
||
:root {
|
||
--primary: #e9e5db !important;
|
||
--secondary: #1b2566 !important;
|
||
--tertiary: #dcd6c4 !important;
|
||
--accent: #f1ee2e !important;
|
||
--f-disp: "Instrument Serif", sans-serif !important;
|
||
--f-body: "Archivo", sans-serif !important;
|
||
--paper: #e9e5db !important;
|
||
--paper-deep: #dcd6c4 !important;
|
||
--sun: #f1ee2e !important;
|
||
--ink: #1b2566 !important;
|
||
--serif: "Instrument Serif", sans-serif !important;
|
||
--sans: "Archivo", sans-serif !important;
|
||
--sun-soft: #f8f39b !important;
|
||
--haze: #f0da7c !important;
|
||
--ember: #e26b4a !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- COVER -->
|
||
<section class="cover">
|
||
<div class="bloom"></div>
|
||
<div class="ember"></div>
|
||
<div class="daterail">2026<br />—2027</div>
|
||
<div class="inner">
|
||
<div class="micro">Frame System · Vol. 01</div>
|
||
<h1>Paper, ink<br />& <em>yellow.</em></h1>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="fcell">
|
||
<div class="t">Register</div>
|
||
<div class="b">Literary-editorial, biennale catalogue.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Ground</div>
|
||
<div class="b">Warm parchment, never white.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Type</div>
|
||
<div class="b">Instrument Serif · Archivo · JetBrains Mono.</div>
|
||
</div>
|
||
<div class="fcell">
|
||
<div class="t">Depth</div>
|
||
<div class="b">Atmospheric blooms, no shadows, hairline rules.</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagenum">01 / 06</div>
|
||
</section>
|
||
|
||
<!-- PALETTE -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">01</span>
|
||
<h2>Palette</h2>
|
||
<span class="sp"></span><span class="micro">Paper · Ink · Yellow</span>
|
||
</div>
|
||
<div class="swatches">
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper)"></div>
|
||
<div class="name">Paper</div>
|
||
<div class="hex">#E9E5DB</div>
|
||
<div class="role">The warm parchment ground.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ink)"></div>
|
||
<div class="name">Ink</div>
|
||
<div class="hex">#1B2566</div>
|
||
<div class="role">The single text + rule color.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--sun)"></div>
|
||
<div class="name">Sun</div>
|
||
<div class="hex">#F1EE2E</div>
|
||
<div class="role">Panel, bloom, tile underprint.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--ember)"></div>
|
||
<div class="name">Ember</div>
|
||
<div class="hex">#E26B4A</div>
|
||
<div class="role">Subordinate counter-bloom only.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--paper-deep)"></div>
|
||
<div class="name">Paper Deep</div>
|
||
<div class="hex">#DCD6C4</div>
|
||
<div class="role">Secondary parchment band.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--sun-soft)"></div>
|
||
<div class="name">Sun Soft</div>
|
||
<div class="hex">#F8F39B</div>
|
||
<div class="role">Mid stop in sun blooms.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--haze)"></div>
|
||
<div class="name">Haze</div>
|
||
<div class="hex">#F0DA7C</div>
|
||
<div class="role">Outer stop in sun blooms.</div>
|
||
</div>
|
||
<div class="sw">
|
||
<div class="chip" style="background: var(--bloom), var(--paper)"></div>
|
||
<div class="name">Sun Bloom</div>
|
||
<div class="hex">radial · atmosphere</div>
|
||
<div class="role">The primary depth layer.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">02</span>
|
||
<h2>Typography</h2>
|
||
<span class="sp"></span><span class="micro">Serif · Sans · Mono</span>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">display</div>
|
||
<div class="m">Instrument Serif 400 · line 0.86 · −0.018em</div>
|
||
</div>
|
||
<div class="spec"><span class="serif" style="font-size: 104px">Biennale</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">display-it</div>
|
||
<div class="m">Instrument Serif italic · slow-reading</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-style: italic; font-size: 72px; line-height: 1.04"
|
||
>quietly,</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">numeral-md</div>
|
||
<div class="m">Instrument Serif 400 · hero stat</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="serif" style="font-size: 96px; letter-spacing: -0.04em">240</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div>
|
||
<div class="tok">body</div>
|
||
<div class="m">Archivo 400 · line 1.5 · ink</div>
|
||
</div>
|
||
<div class="spec">
|
||
<p style="font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 620px">
|
||
Archivo carries every paragraph — the quiet sans beneath the serif display, always in
|
||
ink.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="type-row" style="border-bottom: 0">
|
||
<div>
|
||
<div class="tok">micro-label</div>
|
||
<div class="m">Archivo 600 · uppercase · 0.18em</div>
|
||
</div>
|
||
<div class="spec">
|
||
<span class="micro">Programme · Section</span>
|
||
<span
|
||
class="serif"
|
||
style="font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em"
|
||
>12 — 14 JUN</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPONENTS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">03</span>
|
||
<h2>Components</h2>
|
||
<span class="sp"></span><span class="micro">Hairlines · Blooms · Panels</span>
|
||
</div>
|
||
|
||
<div class="cgrid">
|
||
<div class="s7">
|
||
<div class="cnote">
|
||
Ledger rows — mono date · serif title · sans venue · mono duration
|
||
</div>
|
||
<div class="ledger">
|
||
<div class="row">
|
||
<span class="dt">12 JUN</span><span class="ti">Opening Address</span
|
||
><span class="vn">Giardini Pavilion</span><span class="du">45m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
|
||
><span class="vn">Arsenale Hall</span><span class="du">90m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
|
||
><span class="vn">Central Library</span><span class="du">30m</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s5">
|
||
<div class="cnote">Strand list + chart bars</div>
|
||
<div class="strand">
|
||
<div class="row">
|
||
<span class="nm">01</span>
|
||
<div><div class="ti">Parchment</div></div>
|
||
</div>
|
||
<div class="row">
|
||
<span class="nm">02</span>
|
||
<div><div class="ti">Ink</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="bars" style="margin-top: 20px">
|
||
<div class="row">
|
||
<span class="yr">'24</span><span class="bar" style="width: 60%"></span
|
||
><span class="vl">60</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="yr">'25</span><span class="bar lit" style="width: 88%"></span
|
||
><span class="vl">88</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cgrid" style="margin-bottom: 0">
|
||
<div class="s5">
|
||
<div class="cnote">Yellow panel — strongest color statement</div>
|
||
<div class="ypanel">
|
||
<div class="l">Poster Fill</div>
|
||
<div class="h">Ink on Sun.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s7">
|
||
<div class="cnote">Sun bloom + ember counter-bloom</div>
|
||
<div
|
||
style="
|
||
position: relative;
|
||
height: 170px;
|
||
border: 1px solid rgba(27, 37, 102, 0.2);
|
||
overflow: hidden;
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
width: 60%;
|
||
height: 130%;
|
||
left: 6%;
|
||
top: -15%;
|
||
background: var(--bloom);
|
||
"
|
||
></div>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
width: 40%;
|
||
height: 90%;
|
||
right: -8%;
|
||
bottom: -20%;
|
||
background: radial-gradient(circle, rgba(226, 107, 74, 0.22), transparent 70%);
|
||
"
|
||
></div>
|
||
<div style="position: absolute; left: 24px; bottom: 20px" class="serif">
|
||
<span style="font-size: 40px">atmosphere.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPOSITIONS -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">04</span>
|
||
<h2>Frame Compositions</h2>
|
||
<span class="sp"></span><span class="micro">True 16:9 · cqw</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Cover</b><span>· identity · sun bloom · date rail</span></div>
|
||
<div class="frame yf1">
|
||
<div class="bloom"></div>
|
||
<div class="dr">2026<br />—27</div>
|
||
<div class="body">
|
||
<div class="micro">Frame System</div>
|
||
<h3>Paper, ink<br />& <em>yellow.</em></h3>
|
||
</div>
|
||
<div class="pn">01 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Chapter Divider</b><span>· section · jumbo numeral · vertical rail</span>
|
||
</div>
|
||
<div class="frame yf2">
|
||
<div class="bloom"></div>
|
||
<div class="rail">Section — Two</div>
|
||
<div class="body">
|
||
<div class="num">02</div>
|
||
<div class="ti">On measure & the slow page.</div>
|
||
</div>
|
||
<div class="pn">02 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Ledger</b><span>· catalog · hairline rows · the dense frame</span>
|
||
</div>
|
||
<div class="frame yf3">
|
||
<div class="body">
|
||
<div class="top">
|
||
<h4>Programme</h4>
|
||
<span class="micro">12 — 14 JUN</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">12 JUN</span><span class="ti">Opening Address</span
|
||
><span class="vn">Giardini</span><span class="du">45m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
|
||
><span class="vn">Arsenale</span><span class="du">90m</span>
|
||
</div>
|
||
<div class="row">
|
||
<span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
|
||
><span class="vn">Library</span><span class="du">30m</span>
|
||
</div>
|
||
</div>
|
||
<div class="pn">03 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Manifesto</b><span>· quote · italic serif · centered bloom</span>
|
||
</div>
|
||
<div class="frame yf4">
|
||
<div class="bloom"></div>
|
||
<div class="body">
|
||
<div class="qm">“</div>
|
||
<div class="q">Read it slowly,<br />or not at all.</div>
|
||
<div class="at">— The System Voice</div>
|
||
</div>
|
||
<div class="pn">04 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRINCIPLES -->
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">05</span>
|
||
<h2>Frame Rules</h2>
|
||
<span class="sp"></span><span class="micro">Restraint</span>
|
||
</div>
|
||
<div class="dos">
|
||
<div class="do-card do">
|
||
<h4>Do</h4>
|
||
<div class="rule"></div>
|
||
<ul>
|
||
<li>Start on warm parchment; add at least one sun bloom for atmosphere.</li>
|
||
<li>
|
||
Set every line in ink — display, body, label, mono; contrast is size, not color.
|
||
</li>
|
||
<li>Use Instrument Serif 400, tight line-height, negative tracking, for display.</li>
|
||
<li>
|
||
Make every separator a 1px ink hairline; flood a yellow panel for poster moments.
|
||
</li>
|
||
<li>Reserve JetBrains Mono for dates, numerals, and the bottom-right pagenum.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="do-card dont">
|
||
<h4>Don't</h4>
|
||
<div class="rule"></div>
|
||
<ul>
|
||
<li>No drop shadows, no rounded corners, no bordered cards.</li>
|
||
<li>No second text color; no bold Instrument Serif.</li>
|
||
<li>No borders thicker than 1px; no inverted ink grounds.</li>
|
||
<li>No mono for body or headlines; no font substitutes.</li>
|
||
<li>Don't crowd the canvas — sparse reads as elegant.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
|
||
<style>
|
||
/* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
|
||
.capdemo {
|
||
--cap-ink: var(--ink);
|
||
--cap-canvas: var(--paper);
|
||
--cap-accent: var(--sun);
|
||
--cap-accent-2: var(--ember);
|
||
}
|
||
.capdemo .stage {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 16.67cqh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 4;
|
||
}
|
||
.capdemo .pill {
|
||
max-width: 80cqw;
|
||
padding: 1.4cqw 3cqw 1.7cqw;
|
||
background: var(--cap-canvas);
|
||
border: 1px solid var(--cap-ink);
|
||
border-radius: 0;
|
||
}
|
||
.capdemo .line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.1em 0.34em;
|
||
font-family: var(--serif);
|
||
font-weight: 400;
|
||
font-size: 3.4cqw;
|
||
line-height: 1.16;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.capdemo .w {
|
||
display: inline-block;
|
||
padding: 0 0.06em;
|
||
color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
|
||
}
|
||
.capdemo .w.spoken {
|
||
color: var(--cap-ink);
|
||
}
|
||
.capdemo .w.active {
|
||
color: var(--cap-ink);
|
||
background: var(--cap-accent);
|
||
box-shadow: 0 0 0 0.06em var(--cap-accent);
|
||
}
|
||
.capdemo .bandline {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 16.67cqh;
|
||
border-top: 1px dashed rgba(27, 37, 102, 0.28);
|
||
z-index: 3;
|
||
}
|
||
.capdemo .bandtag {
|
||
position: absolute;
|
||
right: 3cqw;
|
||
bottom: calc(16.67cqh + 0.7cqw);
|
||
font-family: var(--mono);
|
||
font-size: 0.95cqw;
|
||
letter-spacing: 0.04em;
|
||
color: var(--ink);
|
||
opacity: 0.5;
|
||
z-index: 4;
|
||
}
|
||
</style>
|
||
<section>
|
||
<div class="sec-head">
|
||
<span class="micro">06</span>
|
||
<h2>Captions</h2>
|
||
<span class="sp"></span><span class="micro">Lower-third · Karaoke</span>
|
||
</div>
|
||
<div class="gallery">
|
||
<div class="fw">
|
||
<div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
|
||
<div class="frame capdemo">
|
||
<div class="bloom" style="width: 54%; height: 60%; left: 10%; top: 12%"></div>
|
||
<div class="bandline"></div>
|
||
<div class="bandtag">caption band · 16.7%</div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Built</span>
|
||
<span class="w spoken">for</span>
|
||
<span class="w active">teams</span>
|
||
<span class="w">who</span>
|
||
<span class="w">ship.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pn">05 / 06</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fw">
|
||
<div class="flabel">
|
||
<b>Settled line</b><span>· all spoken · underprint cleared</span>
|
||
</div>
|
||
<div class="frame capdemo">
|
||
<div
|
||
class="bloom"
|
||
style="width: 50%; height: 58%; right: -6%; bottom: -6%; left: auto"
|
||
></div>
|
||
<div class="stage">
|
||
<div class="pill">
|
||
<div class="line">
|
||
<span class="w spoken">Ship</span>
|
||
<span class="w spoken">faster</span>
|
||
<span class="w spoken">today.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pn">06 / 06</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="foot">
|
||
<span class="l">Biennale Yellow</span>
|
||
<span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
|
||
</div>
|
||
|
||
<template id="__bundler_thumbnail">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="100" height="100" fill="#E9E5DB" />
|
||
<circle cx="42" cy="42" r="34" fill="#F1EE2E" opacity="0.55" />
|
||
<text x="14" y="64" font-family="Georgia" font-size="30" fill="#1B2566">Aa</text>
|
||
<rect x="14" y="74" width="60" height="1.5" fill="#1B2566" />
|
||
</svg>
|
||
</template>
|
||
</body>
|
||
</html>
|