/* GLOO — site-dark · design tokens.
*
* Direction A, "美術館の暗室". The whole site is one unlit room with a few
* things in it that hold light, and exactly one moment where the room's own
* lights come up. Every colour, size, duration and scroll budget on the page
* resolves through a name declared here; style.css carries no literal values.
*
* Contrast is a first-class token here rather than an afterthought, because
* on a #0a0a0a ground it is the single easiest thing to get wrong. Every
* foreground below is annotated with its measured ratio against the ground it
* is actually used on. Nothing under 4.5:1 is allowed to carry words.
*/
:root {
/* ---- the dark room -------------------------------------------------
One ground, and two half-steps off it. --void is the room; --void-2 is
the same room a hair warmer, used only where a full-bleed plate has to
be seen as a plate; --void-3 is the inside of the shutter. */
--void: #0a0a0a;
--void-2: #121110;
--void-3: #070707;
/* ---- what holds light ----------------------------------------------
ratios measured against --void:
--ink 17.66:1 headings, body, anything set at any size
--quiet 11.26:1 second-voice body, figure captions at 12px+
--dim 6.29:1 10–11px plate labels. The floor of the page, and
still 1.4× the AA requirement for normal text.
--amber 11.28:1 the one accent: the light itself. Lines, glow,
the rule under a heading, ::selection. */
--ink: #f4f2ea;
--quiet: #c9c3b4;
--dim: #97917f;
--amber: #ffb54a;
--amber-2: #ffd9a0; /* the hot core of a light source, never text */
/* One step under --dim, and the only thing allowed to use it is the
constellation's outer texture words — the twelve that are material
rather than copy. 5.03:1 on --void, so it is over the AA floor for
normal text and nothing here is relying on those words being decorative
to pass. It was set at 4.63:1 first and raised after measurement: those
words sit in a field with drawn lines in it, and where one crosses a lit
line the local ground is not --void — the mean over a word's own box
measured 4.36:1 at 4.63, and 5.03 puts the mean back over the floor.
Never used for anything a reader is asked to read. */
--faint: #858073;
/* ---- the third step ---------------------------------------------------
The page had two luminances and no middle: #0a0a0a everywhere and
#f2efe7 once. The client read ABOUT as 暗すぎる／怖い, which is what a
band of reading copy on the page's own floor colour does when there is
no step above it to be measured against.
--slate is that step, and it is chosen to be unmistakably neither end:
L* 2.1 (--void) → 26.5 (--slate) → 94.2 (--paper)
contrast 1.88:1 off --void, 9.19:1 off --paper
so it cannot be mistaken for the room going dark and it cannot be
mistaken for the room being lit — the light band keeps its uniqueness,
which is the whole argument of the design.
Measured against it (all ≥ AA):
--ink 9.08:1 --quiet 5.98:1 --amber 6.01:1
--dim 3.34:1 ← the one that does not clear it, so the plate label
in this band is lifted to --quiet. See
.band--about .plate.
--slate-2 is the same ground taken back toward the room for the half of
the band the photograph is in, so a picture whose own base is near-black
(measured on the current one: median luminance 12/255) does not sit on
the grey as a dark rectangle. It is a ground decision, not an image one:
nothing about it assumes which photograph is in the slot. */
--slate: #413e39;
--slate-2: #22201c;
/* ---- the light band -------------------------------------------------
The one place on the page that is not dark. Its own ink pair, because
--ink on --paper would be 1.06:1 — the inversion has to be complete or
it is not an inversion.
--paper-ink 16.28:1 on --paper
--paper-dim 6.36:1 on --paper */
--paper: #f2efe7;
--paper-ink: #14120e;
--paper-dim: #5b564a;
/* ---- type ------------------------------------------------------------
The two families the client saw and chose in explore/a-dark. Cormorant
at 300 is the only thing on the page allowed to be large; Zen Kaku
carries both scripts everywhere else, at 300 and 500 and nothing else.
--font-jp-display is the fix for a mismatch the client heard but the
tokens had already mis-set: --font-display's own JP fallbacks ("Hiragino
Mincho ProN" etc.) name a mincho, but nothing on the page actually
requests it — .node inherited --font-body (a gothic) instead, so the
one place JP text sits directly beside Cormorant Garamond ran a
different skeleton (uniform stroke vs. Cormorant's high-contrast one).
Shippori Mincho was chosen over Zen Old Mincho after rendering both at
the actual sizes (/tmp/gloo-qa/shots-fix1/fontcompare*.png): it keeps
Cormorant's thin/thick stroke contrast and its serif hooks read as the
same "hand" next to Cormorant 300, where Zen Old Mincho's more uniform,
warmer strokes read as a different, sturdier voice. Weight 500 (not
Shippori's 400) because at .node's mobile floor (1.05rem) on a 1×
screen 400's hairline strokes thin out; 500 keeps the contrast without
that. Scoped to .node only — see the report for why body copy stays
gothic. */
--font-display: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
--font-jp-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
--text-plate: 0.6875rem; /* 11px — the wall label. --dim, 6.29:1. */
--text-sm: 0.8125rem;
--text-base: 1rem;
--text-md: 1.0625rem;
--text-lg: 1.1875rem;
/* display. Nothing on the page goes past 8rem any more.
The hero used to be the exception: WE CONNECT / SOMETHING BEGINS. was set
to fill the measure exactly, off a per-string glyph-advance table
(--hero-adv-1/2) and an indent for the second line. Both the copy and the
mechanism are gone with the white-room hero — its two lines are short,
bottom-left, at one viewport-derived size each, so there is no measure to
fill and no advance constant that has to be kept in sync with the words.
The hero's own two lines and its kicker are the only type on the page
sized here rather than in the display block above, because they are the
only type that has to hold at 320px against a photograph rather than
against the ground. */
--text-hero: clamp(2rem, 4.6vw, 3rem);
--text-kicker: clamp(0.625rem, 0.9vw, 0.6875rem);
--text-vert: clamp(1.75rem, 5vw, 4.25rem); /* the vertical setting */
--text-node: clamp(1.05rem, 2.5vw, 1.9rem); /* a constellation node */
--text-sat: clamp(0.5rem, 0.85vw, 0.625rem);
/* the outer texture words, a step under the six named satellites so the
hierarchy is carried by size as well as by tone */
--text-txw: clamp(0.4375rem, 0.68vw, 0.5625rem);
--text-section: clamp(1.6rem, 4.4vw, 3.4rem);
--text-numeral: clamp(6rem, 21vw, 17rem); /* WHAT WE DO, as a plate */
/* The light band is now set in Japanese, and 現場は、準備で決まる。 is 11
glyphs — 11.7 em with its own tracking, against a measure of 100vw less
two gutters. At 1280 that is 1104px, so 7.2vw (92px) fits with 28px to
spare; above 1600 the clamp caps it rather than the measure doing it.
The floor was 1.6rem and is measured down to 1.4: at 320 the measure is
280px and 1.6rem set the line at 298, which broke it after 決ま and left
る。 alone on a second row. The whole point of this section is one line
landing flat, and an orphaned 2-glyph row is the opposite of バシッと.
At 1.4 the vw term wins at 320 (23.04px → 269px with the tighter
tracking below 26rem) and the line holds. */
--text-light: clamp(1.4rem, 7.2vw, 5.4rem);
--text-mail: clamp(1.1rem, 2.6vw, 1.85rem);
/* ---- WHAT WE DO's own four steps ------------------------------------
The section is four cards plus a left intro, and before this they were
typed on five unrelated scales — the intro's lede at 13px, the English
service name at 14–16, the Japanese lead at 26–30, the note at 13. The
client read that as 「テキストが小さく、画面の中で埋もれている」 and 「英語ラベル・
和文見出し・本文のヒエラルキー差が弱い」, which is what four sizes inside one
octave will always look like. Below are the four steps everything in the
section now takes, the intro included, so the run has one ladder:
--wd-lead 55px the Japanese line. The card's display element.
--wd-en 18px the English service name
--wd-jp = --wd-en, the Japanese service name, in amber — see the
note under the declarations below for why it now aliases
--wd-en instead of stating its own 12px
--wd-note 16px every piece of reading copy, cards and intro alike
THE LEAD'S vw TERM IS NOT A TASTE. The longest lead is nine full-width
glyphs (さまざまな業務を、 / それぞれの役割が、 / 積み重ねた準備を、) and the
tracking is 0.04em, so the line needs 9.36em. Below the gutter and the gap
caps, five columns of the section's own twelve-column grid measure
5·(0.9W − 0.187W)/12 + 4·0.017W = 0.365083W
and 0.365083 / 9.36 = 0.039005 — so 3.9vw IS the five-column fit, exactly,
at every width in that range, and above the caps the columns only widen.
3.84vw is that number with 1.5% held back, so no font-metric rounding can
break the line onto a third row: 55.3px against a 526px column at 1440.
The svh term is the short-laptop guard. At 1440×800 the panel is 588px and
a 56px lead over a 16px note beside a 21%-tall numeral does not fit; 6.6svh
steps the lead to 52.8 there and every card clears. Both terms stay inside
the client's own 48–64px band on every screen this page is measured at. */
--wd-lead: clamp(1.75rem, min(3.84vw, 6.6svh), 3.75rem);
--wd-en: clamp(1rem, 1.25vw, 1.25rem);
/* --WD-JP WAS 12/13PX, TWO-THIRDS OF --wd-en, and read as the English name's
footnote rather than the other half of the same name. English and
Japanese here are one service name in two scripts, not a name and a
caption under it, and the client called the Japanese half 「結構大事」 —
there is no basis left for it to run at 2/3 the size. Aliasing to
--wd-en rather than writing a second clamp keeps the two locked through
every future edit to either; a matching literal value would be the same
size today and a silent mismatch the next time --wd-en moves. Spends no
new rung on the type scale either — 18/20px was already --wd-en's own
step, just reused. */
--wd-jp: var(--wd-en);
--wd-note: clamp(0.9375rem, 1.15vw, 1rem);
--track-plate: 0.32em;
--track-caps: 0.14em;
--measure: 32em;
/* ---- space (4pt) ----------------------------------------------------- */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--space-4xl: 9rem;
--gutter: clamp(1.25rem, 5vw, 5.5rem);
/* one gap for the WHAT WE DO grid. 24px at 1440, which with 12 columns and
the gutter puts the column lines at 72, 182, 292 … 1282. */
--grid-gap: clamp(0.75rem, 1.7vw, 1.5rem);
/* ---- motion -----------------------------------------------------------
One curve, one speed family, one stagger step — shared and never
overridden, which is what makes seven different gestures read as one
hand. --dur-micro is pointer feedback and deliberately outside it. */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-micro: 140ms;
--dur-rise: 900ms;
--dur-open: 1100ms;
--dur-draw: 1400ms;
--step: 90ms;
/* every scroll-linked amplitude is multiplied by this; halved ≤768px so
the small screen gets the same gestures at half the throw */
--amp: 1;
/* ---- the four pins, and there is no fifth ----------------------------
How much scroll each pinned block steals on top of the screen it already
holds. The entire scroll budget of the page is these four numbers plus
the natural height of three ordinary bands.
--pin-hero is new: the white-room hero is no longer a still that scrolls
away, it is a held screen that goes dark under the reader. It is the
longest of the four because it is the only one carrying a gesture that
has to cross the whole screen and then be believed — the darkness front
spends --dk-span of it travelling and the rest of it landing. */
--pin: 100svh;
--pin-hero: 120svh;
/* Twice what it was, and the extra screen is not for the drawing — the
drawing's own schedule was halved in --q to land on exactly the scroll
distance it used to (measured: within 1.9% at 1920x1080). The second half
is the field's, which starts as the figure lands and keeps going outward
to the edge of the screen and past it. The client's note is the whole
brief for this number: 「どんどんどんどん、あの言葉とかが出て星も出ていく」
— and continuing to spread needs scroll to spread through. */
--pin-constel: 200svh;
--pin-about: 110svh; /* four regions, then the panel, then the words */
--pin-work: 110svh;
--pin-light: 100svh;
/* ---- the hero, per aspect band ----------------------------------------
The dark-room hero framed one crushed photograph inside the page and
continued its tape beam past the frame's top edge in CSS. That whole
apparatus is gone: the white-room hero is full bleed on all four sides,
so there is no frame edge, no crop row, and nothing for a drawn beam to
be joined to. --hero-src / --hero-k / --hero-ar-max (the crop-window
maths) and --tape-w / --tape-lum / --tape-edge / --tape-core / --tape-run
(the drawn beam's own colour and run) went with it.
One number survives, because one thing still needs it. --tape-l is the
column the tape stands in, as a share of the file's width — measured off
these same six renders (top 3–9% of frame, 22% of peak above the 20th
percentile). The tape is the last thing the darkness front covers, and
what is left where it was is a warm afterimage; that afterimage has to
stand in the tape's own column and not near it. Because the hero is
cover-fit at 50% 50% and every band is served the render nearest its own
aspect, x maps essentially 1:1 from file to screen, so this is a screen
percentage as well as a file one.
Default below is the 9:16 band — the narrowest, and the one the noscript
fallback points at. */
--tape-l: 49.203%;
--z-plate: 1;
--z-raised: 10;
--z-sticky: 200;
--z-shutter: 300;
}
/* The bands, ascending so the last match wins. They now have to carry the same
five numbers as two other lists: the preloads in the head, and the band
picker beside the hero ![]()
. That picker replaced the the old
hero used — see the comment on it in index.html for the crop bug that made
a unusable here — so the agreement is now between three lists and
not two, and all three read the same five boundaries below.
Each boundary is the midpoint of the two file aspects either side of it, so
every screen is served the framing nearest its own shape:
0.6816 = (0.5628 + 0.8003)/2 17/25 9:16 | 4:5
0.9002 = (0.8003 + 1.0000)/2 9/10 4:5 | 1:1
1.1667 = (1.0000 + 1.3333)/2 7/6 1:1 | 4:3
1.5551 = (1.3333 + 1.7768)/2 14/9 4:3 | 16:9
2.0557 = (1.7768 + 2.3346)/2 37/18 16:9 | 21:9
v3's boundaries were each the midpoint of the pair one step below, so a
16:9 screen was served the 21:9 crop and a square screen the 16:9 — the
tokens and the agreed with each other, and both were one framing
too wide. Nothing broke, because style.css never assumes the frame matches
the file; but the art direction was not the art direction. */
@media (min-aspect-ratio: 17/25) { :root { --tape-l: 49.109%; } } /* 4:5 */
@media (min-aspect-ratio: 9/10) { :root { --tape-l: 48.644%; } } /* 1:1 */
@media (min-aspect-ratio: 7/6) { :root { --tape-l: 48.826%; } } /* 4:3 */
@media (min-aspect-ratio: 14/9) { :root { --tape-l: 49.402%; } } /* 16:9 */
@media (min-aspect-ratio: 37/18) { :root { --tape-l: 49.167%; } } /* 21:9 */
/* one throw setting for the whole small screen — half the amplitude, and
roughly half the stolen scroll at every pin.
The hero is the exception among the four: it keeps most of its steal. The
other three pins hold a screen while something is *arranged* on it, and a
phone has less patience for that. The hero's pin holds a screen while a
front crosses it, and shortening that below about a screen's worth of
scroll turns a travelling boundary into a wipe. 90svh, not 60. */
@media (max-width: 48rem) {
:root {
--amp: 0.5;
--pin-hero: 90svh;
/* doubled with the desktop, and for the same reason — a phone has less
patience for a held screen, but the thing being held here is not an
arrangement waiting to be finished, it is a spread still spreading */
--pin-constel: 140svh;
--pin-about: 85svh;
--pin-work: 90svh;
--pin-light: 65svh;
--track-plate: 0.26em;
}
}