/* ========================================================================== The house's type — ONE SCALE (P's review of 17 October: T7, R3) Loaded last, so it is the word that stands. Every word in the house is set in one of eleven styles, and a room uses only these: no font-size, face or letter-spacing of its own. THE FACES Instrument Serif the display face: a hero, a title, a sub, a label (glossy vinyl) Bodoni Moda the reading face: every paragraph and all normal text (clean ink) CP Catalogue the catalogue's numerals; CP Catalogue SC its small capitals for small labels Nothing is ever faked: font-synthesis is none, so a face is never slanted, emboldened or given small capitals it does not have. CP Catalogue has no italic: it is set upright, always; a reading line that wants italic is Bodoni Moda italic. THE SCALE: one ratio, 6:5 (a minor third), from the reading size. At the desk (1440 wide and up) the reading size is 18px and every step is 18 x 1.2^n; on a phone (390) the same steps stand on 17px and draw in to 1.12 so a room's name fits the glass. Between the two every step is fluid (clamp), and the large steps keep growing a little up to 1920. The steps were measured against what the rooms set today (17 October, all routes, 1440 and 390), so nothing jumps by surprise. class step phone -> desk what it is ink .t-hero 13 75 -> 193 the one biggest display word of a room vinyl .t-display 11 60 -> 134 a room's title vinyl .t-title 6 34 -> 54 a section or an object's title vinyl (section) .t-sub 2 21 -> 26 a subtitle, a name in a list vinyl (section) .t-label nav 11 -> 12 caps: links, nav words, filter words vinyl (letterhead) .t-label-s -2 12 -> 12.5 small capitals: small labels, captions of works vinyl (letterhead) .t-num-l 3 24 -> 31 big catalogue numerals (the ledger's numbers) vinyl (section) .t-num - the line's catalogue numerals in a running line the line's .t-lead 1 19 -> 22 a lead paragraph clean ink .t-body 0 17 -> 18 running text clean ink .t-note -1 15 notes, fine print clean ink Nothing is under 11px but the detail printed on a picture (a film's edge, a label on an object). .t-label is the letterhead's own size (--nav-size), so the nav words, the Editorial's place words and every label in the house are one voice. THE HAND: every word set in a vinyl style answers the hover by its letters, a low wave from where the hand came in, nearest letter first, settling back on the line (house/hand.js); one that is a link or a button also takes the press. A card or a work holding one of them answers by that word. The face, size, weight, style, tracking and case of each style are held (!important), so an older rule a room still has cannot set the word in another voice; line-height and colour stay the room's. Text that is part of a picture (printed on an object, scaled with it) is not set in the scale. ========================================================================== */ :root{ font-synthesis:none; --t-ratio:1.2; --t-hero: clamp(75.5px, 31.96px + 11.155vw, 246px); --t-display:clamp(60px, 32.61px + 7.023vw, 167.5px); --t-title: clamp(33.8px, 26.42px + 1.898vw, 62.9px); --t-sub: clamp(21.4px, 19.7px + .432vw, 25.9px); --t-label: var(--nav-size, 12px); --t-label-s:clamp(12px, 11.63px + .095vw, 12.5px); --t-num-l: clamp(24px, 21.33px + .679vw, 34.4px); --t-num: var(--t-body); --t-lead: clamp(19.1px, 18.12px + .241vw, 21.6px); --t-body: clamp(17px, 16.63px + .095vw, 18px); --t-note: 15px; /* the reading variables the house already had are the scale's reading steps */ --fs-read:var(--t-body); } /* ---- the reading face, by the base rules: Bodoni Moda in clean ink, wherever a room has not said otherwise ---- */ body{ font-family:var(--serif); } :where(p, li, dd, blockquote, figcaption, td, caption){ font-family:var(--serif); } /* ---- the display voices: Instrument Serif, upright, in vinyl ---- */ /* the voices set only how a line breaks (text-wrap-style), never whether it may (the text-wrap shorthand would undo a room's white-space:nowrap: a caption meant to stand on one line would break and climb over what is under it) */ .t-hero, .t-display, .t-title, .t-sub, .t-label{ font-family:var(--display) !important; font-weight:400 !important; font-style:normal !important; font-variant-caps:normal; text-wrap-style:balance; } .t-hero{ font-size:var(--t-hero) !important; line-height:.92; letter-spacing:-.025em !important; filter:url(#cp-vinyl); } .t-display{ font-size:var(--t-display) !important; line-height:.96; letter-spacing:-.02em !important; filter:url(#cp-vinyl); } .t-title{ font-size:var(--t-title) !important; line-height:1.04; letter-spacing:-.015em !important; filter:url(#cp-vinyl-s); } .t-sub{ font-size:var(--t-sub) !important; line-height:1.15; letter-spacing:-.005em !important; filter:url(#cp-vinyl-s); } .t-label{ font-size:var(--t-label) !important; line-height:1.3; letter-spacing:.16em !important; text-transform:uppercase !important; filter:url(#cp-vinyl-xs); } /* small capitals: the catalogue's own (the label cut), its figures lining at their height */ .t-label-s{ font-family:var(--mono) !important; font-weight:400 !important; font-style:normal !important; font-size:var(--t-label-s) !important; line-height:1.4; letter-spacing:var(--tr-mono, .09em) !important; text-transform:none !important; font-variant-numeric:lining-nums proportional-nums; filter:url(#cp-vinyl-xs); } /* the catalogue's numerals */ .t-num-l{ font-family:var(--num) !important; font-weight:400 !important; font-style:normal !important; font-size:var(--t-num-l) !important; line-height:1; letter-spacing:.005em !important; font-variant-numeric:lining-nums proportional-nums; filter:url(#cp-vinyl-s); } .t-num{ font-family:var(--num) !important; font-style:normal !important; font-size:var(--t-num) !important; letter-spacing:var(--tr-num, .01em) !important; font-variant-numeric:oldstyle-nums proportional-nums; } /* in a line of another style a numeral takes that line's size and gloss (one filter, the line's), lining beside capitals */ :is(.t-hero, .t-display, .t-title, .t-sub, .t-label, .t-label-s, .t-num-l, .t-lead, .t-body, .t-note) .t-num{ font-size:1em !important; filter:none; } :is(.t-hero, .t-display, .t-title, .t-sub, .t-label, .t-label-s, .t-num-l) .t-num{ font-variant-numeric:lining-nums proportional-nums; } /* ---- the reading voices: Bodoni Moda, clean ink (no filter) ---- */ .t-lead, .t-body, .t-note{ font-family:var(--serif) !important; font-weight:400 !important; font-style:normal !important; letter-spacing:0 !important; filter:none; text-wrap-style:pretty; font-variant-numeric:oldstyle-nums proportional-nums; } .t-lead{ font-size:var(--t-lead) !important; line-height:1.45; } .t-body{ font-size:var(--t-body) !important; line-height:var(--lh-read, 1.58); } .t-note{ font-size:var(--t-note) !important; line-height:1.5; } /* a reading line that wants italic has the reading face's own */ :is(.t-lead, .t-body, .t-note) :is(em, i){ font-family:var(--serif); font-style:italic; } /* a word of the scale is never also a glossy lacquer or a second shadow: one gloss in the house */ :is(.t-hero, .t-display, .t-title, .t-sub, .t-label, .t-label-s, .t-num-l){ text-shadow:none; -webkit-text-fill-color:currentColor; background-image:none; } @media (max-width:759px){ /* the letterhead's own phone setting for the caps; the big words take the finer vinyl, so their hairlines stay black */ .t-label{ letter-spacing:.06em !important; } .t-hero, .t-display{ filter:url(#cp-vinyl-s); } } @media (prefers-reduced-transparency:reduce){ .t-hero, .t-display, .t-title, .t-sub, .t-label, .t-label-s, .t-num-l{ filter:none; } } /* ========================================================================== What stood here before the scale, kept while the rooms take the scale's classes. Three voices, each with one job: DISPLAY var(--display) a room's and a section's name, upright, in vinyl; READING var(--serif) what is read, plain ink; MONO var(--mono) the label cut. Sizes: --t-room (a room's name), --t-head (a section's name), --t-read (reading). The newspaper keeps its own type: it is a newspaper. ========================================================================== */ :root{ --t-room:clamp(84px, 11vw, 210px); --t-head:clamp(36px, 3.6vw, 64px); --t-read:18px; } /* 1. a room's name: upright, vinyl */ .mb-room, .mbr-title, .ldg-title, .gv.is-viewing .gv-mast, .gv.is-viewing.is-journey .gv-mast, .gv.is-viewing.is-journey.is-wall .gv-mast, .gv.is-viewing.is-phone .gv-mast, .gv.is-viewing.is-journey.is-phone .gv-mast{ font-family:var(--display); font-style:normal; font-weight:400; letter-spacing:-.02em; filter:url(#cp-vinyl); } .mbr-title, .ldg-title, .gv.is-viewing .gv-mast, .gv.is-viewing.is-journey .gv-mast{ font-size:var(--t-room); } /* the Members' front door: three names, the room's size, set in the foot of the left margin */ .mb-room{ font-size:clamp(72px, 12.5vw, 240px); line-height:1.04; color:var(--mb-ink); -webkit-text-fill-color:var(--mb-ink); } .mb-rooms{ gap:.04em; } @media (max-width:759px){ .mb-room{ font-size:clamp(52px, 14.5vw, 66px); } } /* the other rooms' names: Instruments, Volumes, Magazines, the Gallery's name on its wall */ .ins-title, .bd-word, .pv-name-t{ font-style:normal; filter:url(#cp-vinyl); } /* 2. a section's name: upright, the lighter vinyl */ .gx-label-no, .gx-label-title, .gx-work-what, .ins-name, .bd-t{ font-style:normal; filter:url(#cp-vinyl-s); } .prv-dh, .gv.is-viewing .gv-journey-room{ font-family:var(--display); font-style:normal; font-weight:400; font-size:var(--t-head); letter-spacing:-.015em; filter:url(#cp-vinyl-s); } /* the members' menu lives in the house's header row now, in the header's own type (members.css) */ /* 3. reading: one size, plain ink */ .mbr-lede, .prv-doc .reading, .prv-f dd{ font-family:var(--serif); } .mbr-lede{ font-size:var(--t-read); font-style:italic; } /* a label in the viewing room: one left edge, one voice per line, nothing slanted. Its number upright, the line under it upright reading, the ways set like the header's words */ .gv.is-viewing .gv-no, .gv.is-viewing .gv-no .cp-l{ font-style:normal; } .gv.is-viewing .gv-line, .gv.is-viewing .gv-dim{ font-family:var(--serif); font-style:normal; } .gv.is-viewing .gv-ways, .gv.is-viewing.is-journey .gv-ways, .gv.is-viewing.is-journey.is-phone .gv-ways{ margin-left:0; margin-top:32px; gap:10px 28px; } .gv.is-viewing .gv-way, .gv.is-viewing.is-journey .gv-way{ font-family:var(--display); font-style:normal; font-size:var(--nav-size, 12px); letter-spacing:.16em; text-transform:uppercase; } @media (max-width:759px){ :root{ --t-room:clamp(52px, 14vw, 64px); --t-head:clamp(28px, 8vw, 34px); --t-read:17px; } /* at a phone's size the room's name takes the finer vinyl, so its hairlines stay black */ .mbr-title, .ldg-title, .gv.is-viewing .gv-mast, .gv.is-viewing.is-phone .gv-mast, .gv.is-viewing.is-journey.is-phone .gv-mast, .ins-title, .bd-word, .pv-name-t{ filter:url(#cp-vinyl-s); } } @media (prefers-reduced-transparency:reduce){ .mbr-title, .ldg-title, .gv-mast, .prv-dh, .gv-journey-room, .ins-title, .bd-word, .pv-name-t, .gx-label-no, .gx-label-title, .gx-work-what, .ins-name, .bd-t{ filter:none; } } /* the Viewing room's name: bigger, at the foot of the left third, where the metal can catch the light. Two lines, never wider than the third that the work leaves free. */ .gv.is-viewing .gv-mast, .gv.is-viewing.is-journey .gv-mast, .gv.is-viewing.is-journey.is-wall .gv-mast{ font-size:clamp(84px, 10.8vw, 200px); line-height:.98; letter-spacing:-.035em; top:auto; bottom:clamp(36px, 7vh, 88px); } .gv.is-viewing.is-phone .gv-mast, .gv.is-viewing.is-journey.is-phone .gv-mast, .gv.is-viewing.is-journey.is-wall.is-phone .gv-mast{ font-size:clamp(52px, 14vw, 60px); bottom:auto; line-height:1.08; } /* ---------- the photobooks, better made ---------- A spine is a curved cloth board: lit along its upper third, falling into shade at its foot, with a hinge groove at each end, a fibre in the cloth, and its words blind-stamped into it. */ .bd-f.is-front{ background-image: radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%, rgba(15,15,16,.10) 66%, rgba(15,15,16,.34) 100%), url("data:image/svg+xml;utf8,"), repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 3px); background-blend-mode:normal, normal, multiply, normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.28); } .bd-f.is-front::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, rgba(0,0,0,.30) 0, rgba(0,0,0,0) 1.6%, rgba(255,255,255,.14) 2.4%, rgba(255,255,255,0) 3.4%), linear-gradient(to left, rgba(0,0,0,.30) 0, rgba(0,0,0,0) 1.6%, rgba(255,255,255,.14) 2.4%, rgba(255,255,255,0) 3.4%); } .bd-sp-t{ text-shadow:0 1px 0 rgba(255,255,255,.22), 0 -1px 0 rgba(0,0,0,.22); letter-spacing:.02em; } .bd-sp-by, .bd-sp-s{ text-shadow:0 1px 0 rgba(255,255,255,.16); } /* ---------- the house's key: the water and the P, top right ---------- 28 October (P: "the P and navigation button on the top left make no sense, its top right and its the p that opens up the other nagivation or index things"). Nothing stands at the top left any more. After the room words, at the top right, one control (index.html .nav-key): the small glossy black water ellipse with its two waves, and the die-cut P beside it, paired as the Post Office paired the ellipse and "Members" on 15 October. A press anywhere on the pair opens the index and, while the sheet is out, closes it (app.js). The P is the control a key and a reader find; the ellipse is drawn beside it and is not a second button. The P alone: un-comment the one rule marked ELLIPSE below. Later on 28 October (P: "if there is a p, the headers like gallery, editorial, instruments and button are hidden (button remove) this is the discrete header"): the discreet header. The P stands alone at the top right; the room words live only in the index it opens, and the water ellipse leaves the header (it stays with the Post Office's Members). To bring the words back, delete the rule marked WORDS; the ellipse, the rule marked ELLIPSE. */ #nav{ justify-content:flex-end; } #nav .nav-key{ position:relative; z-index:1; flex:none; display:flex; align-items:center; gap:10px; margin-left:clamp(8px, 1.2vw, 18px); cursor:pointer; -webkit-tap-highlight-color:transparent; } /* WORDS */ #nav .nav-links{ display:none; } /* ELLIPSE */ #nav .nav-key .nav-water{ display:none; } .nav-water{ position:relative; flex:none; display:block; width:44px; height:24px; border-radius:50%; pointer-events:auto; background:radial-gradient(120% 90% at 32% 18%, #6d6f74 0%, #2a2b2e 38%, #0b0b0c 78%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.6), 0 5px 12px -4px rgba(10,10,12,.45); transition:transform var(--slow) var(--settle), box-shadow var(--slow) var(--settle), opacity var(--slow) var(--settle), background var(--slow) var(--settle); } .nav-water svg{ position:absolute; left:50%; top:50%; width:28px; height:14px; margin:-7px 0 0 -14px; overflow:visible; fill:none; stroke:#f6f4ef; stroke-width:1.4; stroke-linecap:round; transition:stroke var(--slow) var(--settle); } .nav-water .w1, .nav-water .w2{ transition:transform var(--slower) var(--settle); transform-box:fill-box; transform-origin:center; } .nav-water .w2{ opacity:.55; } @media (hover:hover){ .nav-key:hover .nav-water{ transform:scale(1.08); } .nav-key:hover .nav-water .w1{ transform:translateX(3px); } .nav-key:hover .nav-water .w2{ transform:translateX(-3px); } } /* focus by the same gesture as the hover, never a ring (P2 item 5): the key's P is what the keyboard finds */ .nav-key:has(.nav-mark:focus-visible) .nav-water{ transform:scale(1.08); } .nav-key:has(.nav-mark:focus-visible) .nav-water .w1{ transform:translateX(3px); } .nav-key:has(.nav-mark:focus-visible) .nav-water .w2{ transform:translateX(-3px); } body[data-tone="dark"] .nav-water{ background:radial-gradient(120% 90% at 32% 18%, #ffffff 0%, #cfcdc8 40%, #8d8b86 85%); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -3px 5px rgba(0,0,0,.25), 0 5px 12px -4px rgba(0,0,0,.6); } body[data-tone="dark"] .nav-water svg{ stroke:#161614; } /* a layer over the house that is not the index (the loupe, a lens): the water steps back, as it always did */ html.is-overlaid:not(.is-indexed) .nav-water{ opacity:0; } /* open: the pair stands on the white sheet in black, and the water in the ellipse keeps moving while the sheet is out (the Post Office's ellipse did the same while its line was open) */ html.is-indexed body .nav-water{ opacity:1; background:radial-gradient(120% 90% at 32% 18%, #6d6f74 0%, #2a2b2e 38%, #0b0b0c 78%); box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.6), 0 5px 12px -4px rgba(10,10,12,.45); } html.is-indexed body .nav-water svg{ stroke:#f6f4ef; } html.is-indexed .nav-water .w1{ animation:cp-nav-flow 2.4s ease-in-out infinite; } html.is-indexed .nav-water .w2{ animation:cp-nav-flow 2.4s ease-in-out .6s infinite reverse; } @keyframes cp-nav-flow{ 0%,100%{ transform:translateX(-2px); } 50%{ transform:translateX(3px); } } @media (prefers-reduced-motion:reduce){ html.is-indexed .nav-water .w1, html.is-indexed .nav-water .w2{ animation:none; } } /* the landing's first sheet seats the P; the water comes with it */ body.intro-reveal:not(.p-seated) #nav .nav-water{ opacity:0; } @media (max-width:759px){ .nav-water{ width:40px; height:22px; } .nav-water svg{ width:26px; height:13px; margin:-6.5px 0 0 -13px; } #nav .nav-key{ gap:8px; } #nav .nav-links{ display:none; } #nav .nav-lang{ margin-left:auto; } } /* a thumb: the ellipse keeps its shape (the house's 44 px for buttons would make it a coin), and a wider area round it takes the touch */ @media (pointer:coarse){ .nav-water{ min-height:0; } .nav-water::after{ content:""; position:absolute; inset:-10px -6px; } } /* ---------- the Viewing room's label: one rhythm, in the same metal ---------- The room's name (Anthotypes) large and upright in silver; under it the number in tracked mono, one line of what it is in italic, and the ways in small tracked mono, all on the label's own left edge. */ .gv.is-viewing.is-journey .gv-journey-room{ font-size:clamp(46px, 4.2vw, 76px); font-style:normal; letter-spacing:-.025em; line-height:1.02; margin-top:calc(var(--nav-h) * .1); } .gv.is-viewing .gv-no .cp-l{ background:none; -webkit-text-fill-color:currentColor; color:inherit; } .gv.is-viewing.is-journey .gv-no, .gv.is-viewing.is-journey .gv-slide.is-here .gv-no, .gv.is-viewing.is-journey .gv-slide.is-stood .gv-no{ font:400 11px/1.4 var(--mono); font-style:normal; letter-spacing:.24em; text-transform:uppercase; margin:0 0 18px; color:rgba(244,239,230,.62); } .gv.is-viewing.is-journey .gv-line{ display:block; font:400 11px/1.4 var(--mono); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.62); margin:0 0 14px; } .gv.is-viewing.is-journey .gv-dim, .gv.is-viewing.is-journey .gv-held{ display:block; font:italic 400 19px/1.45 var(--serif); letter-spacing:0; color:rgba(244,239,230,.86); } .gv.is-viewing.is-journey .gv-dim:not(:empty)::before, .gv.is-viewing.is-journey .gv-held:not(:empty)::before{ content:none; } .gv.is-viewing.is-journey .gv-ways{ margin:34px 0 0; gap:10px 26px; } .gv.is-viewing.is-journey .gv-way{ font:400 11px/1.4 var(--mono); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.72); } @media (hover:hover){ .gv.is-viewing.is-journey .gv-way:hover{ color:#fff; } } @media (max-width:759px){ .gv.is-viewing.is-journey .gv-journey-room{ font-size:clamp(36px, 10.5vw, 46px); } .gv.is-viewing.is-journey .gv-ways{ margin-top:26px; } } /* ---------- Magazines and Volumes: the shelf in the Editorial's voice ---------- No running bar, no keyboard notes, no mono catalogue lines. One way back in italic, the room's name in vinyl, the entry set as a magazine's contents line: a numero in italic, the title, its line, then the facts in small serif. The word Sample stays, once, at the end of the facts. */ .bd-furn{ display:block; border:0; padding:0; top:calc(var(--nav-h) + 14px); font:italic 400 16px/1.3 var(--serif); letter-spacing:0; text-transform:none; } .bd-back{ color:var(--ed-ink-2, rgba(28,27,29,.62)); } .bd-back::before{ content:none; } @media (hover:hover){ .bd-back:hover{ color:var(--ed-ink, #1C1B1D); text-decoration:none; } } .bd-rule{ height:0; border-bottom:0; margin-top:26px; opacity:.28; } .bd-leader{ opacity:.6; } .bd-k{ font:italic 400 clamp(17px, 1.3vw, 20px)/1.2 var(--serif); letter-spacing:.01em; text-transform:none; color:var(--ed-ink-2, rgba(28,27,29,.62)); } .bd-t{ margin-top:10px !important; font-size:clamp(36px, 4vw, 66px); letter-spacing:-.015em; } .bd-sub{ margin-top:12px !important; font-size:clamp(18px, 1.5vw, 22px); color:var(--ed-ink, #1C1B1D); opacity:.78; } .bd-facts{ text-wrap:pretty; margin-top:26px !important; padding-top:14px; max-width:30em; font:400 15px/1.6 var(--serif); letter-spacing:.01em; text-transform:none; font-variant-numeric:oldstyle-nums; } .bd-acts{ margin-top:26px !important; } .bd-open, .bd-entry .bd-buy{ font:italic 400 18px/1.3 var(--serif); letter-spacing:0; text-transform:none; padding-bottom:4px; } .bd-index{ font:400 17px/1.6 var(--serif); letter-spacing:.02em; font-variant-numeric:oldstyle-nums; } .bd-dot{ opacity:.25; margin:0 .1em; } .bd-no{ opacity:.38; } .bd-hint{ display:none; } @media (max-width:759px){ .bd-furn{ font-size:15px; top:calc(var(--nav-h) + 6px); } .bd-t{ font-size:clamp(30px, 8.6vw, 40px); } .bd-sub{ font-size:16px; } .bd-facts{ font-size:13.5px; } .bd-open, .bd-entry .bd-buy{ font-size:17px; text-decoration:none; min-height:0; padding-bottom:3px; } .bd-index{ font-size:15px; letter-spacing:0; } } /* the objects are the list: the row of numerals under them said it twice, so it goes (the books and covers are buttons, and the arrow keys still walk them) */ .bd-index, .bd-room.bd-arrived .bd-index{ display:none; } /* ---------- the letterhead over a moved page ---------- Scrolled, the letterhead floats: no band, no feather, no veil of the room's ground under the four words (round 2). It was a band of the room's ground here; it is gone. */ /* the launch preview is only the letter box: the index key opens rooms that are closed to guests, so it waits */ body.launch-on #nav .nav-key{ display:none !important; } /* ---------- the letterhead in the vinyl ---------- On a light room the mark and the four index words are the same glossy black vinyl as the rooms' names, in the letterhead's own filters (index.html, #cp-vinyl-nav-*): the house's lamp and gloss with nothing falling under the letters (23 October, P: "no shading in the main navigation as double exposure with item in grey, no, remove that"), so the white under the mark and the words is the page's own, on every ground and in every room. On a dark ground (a room or a layer that says data-tone="dark") they are the ivory of the same, never black on black. */ #nav .nav-links a{ filter:url(#cp-vinyl-nav-xs); text-shadow:none; } body[data-tone="light"] #nav .nav-mark{ color:#141413; filter:url(#cp-vinyl-nav-s); text-shadow:none; } body[data-tone="light"] #nav .nav-links a{ color:#141413; } body[data-tone="dark"] #nav .nav-mark{ filter:url(#cp-vinyl-nav-w-s); } body[data-tone="dark"] #nav .nav-links a{ filter:url(#cp-vinyl-nav-w-xs); } /* without fork 3's switch (index.html, data-current on the letterhead) the rooms you are not in stand quieter */ body[data-tone="light"] #nav:not([data-current="weight"]) .nav-links a:not(.is-here){ opacity:.78; } body[data-tone="light"] #nav:not([data-current="weight"]) .nav-links a:not(.is-here):hover{ opacity:1; } /* FORK 3 (23 October, behind one switch and waiting for P's word): every word of the one nav in full ink, at rest and with the hand away (--nav-rest, site.css), all four in the same matte vinyl. The room you are in is told by its weight: its strokes thicken, as a word a key has found does (hand.css), only more, so it can be named at a glance on any screen; nothing is greyed and nothing is cut white through its letters. The stroke is drawn under the fill and does not change the word's width, so nothing in the row moves when the room changes. Where no index room is current (the Process room, a record) all four are the same. */ #nav[data-current="weight"]{ --nav-rest:1; } #nav[data-current="weight"] .nav-links a{ color:inherit; opacity:1; filter:url(#cp-vinyl-nav-xs-m); } body[data-tone="dark"] #nav[data-current="weight"] .nav-links a{ filter:url(#cp-vinyl-nav-w-xs-m); } /* at eleven and twelve pixels the face's hairlines go grey on an ordinary screen: every word carries a hair of stroke so all four read as the same full ink; the room you are in carries three times it, and a word a key has found sits between the two */ #nav[data-current="weight"] .nav-links a{ -webkit-text-stroke:.014em currentColor; paint-order:stroke fill; transition:color var(--touch) var(--settle), -webkit-text-stroke-width var(--slow) var(--settle); } #nav[data-current="weight"] .nav-links a:focus-visible{ -webkit-text-stroke-width:.03em; } #nav[data-current="weight"] .nav-links a.is-here{ -webkit-text-stroke-width:var(--nav-here, .045em); } /* the language word too, on every page that sets it quieter (the landing's paper, the atelier): full ink. Not while the index sheet is out, where it steps back (html.is-indexed, below) */ html:not(.is-indexed) body #nav[data-current="weight"] .nav-lang{ color:var(--fg); opacity:1; } /* the index sheet's count is a word of the nav too: full ink */ #nav[data-current="weight"] ~ .tray .tray-cnt{ color:#1A1814; } /* ---------- the room words in the Post Office's glossy black type ---------- 28 October (P: "the intro of the WHOLE CONCEPTO -P WITH the water elipse has a GORGEOUS GLOSSY BLACK TEXT, i want it everywhere"). The four words are set as the Post Office set its "Members" on 15 October (launch-paper.css .launch-mem-w): the display face upright, in its own case, 18 px, tracked a hair, in the black vinyl of that day (index.html #cp-vinyl-nav-gl). On a dark ground they keep the ivory vinyl above, so they stay read. The room you are in is still told by its weight (the stroke above), and the hand still lifts their letters (house/hand.js). */ #nav .nav-links{ --nav-gap:clamp(20px, 2.3vw, 34px); } #nav .nav-links a, #nav .nav-links a.t-label{ font-size:18px !important; line-height:1 !important; letter-spacing:.01em !important; text-transform:none !important; } html:not(.lt-dark) body:not([data-tone="dark"]) #nav .nav-links a{ color:#141413; -webkit-text-fill-color:#141413; filter:url(#cp-vinyl-nav-gl); } @media (max-width:759px){ #nav .nav-links a, #nav .nav-links a.t-label{ font-size:17px !important; } } /* ---------- the die-cut P: the house's mark and its one navigation button ---------- 28 October, later: the P stands at the top right, after the room words, beside the water (the key above). The ellipse is gone from the letterhead. The P is cut from the same glossy vinyl as the rooms' names, a little bolder, and it opens the index; while the sheet is out it stands above it and closes it. It takes the room's ink, so it is there on every ground: black vinyl on paper, light vinyl in a dark room. 28 October (P: "the water ellipse animation was removed from the whole site"): the glossy water ellipse is back beside the P, its two waves moving under the hand; both open the index. */ #nav .nav-mark{ display:inline-block; font-size:38px; line-height:1; letter-spacing:0; padding:6px 2px 8px 4px; margin-right:-2px; -webkit-text-stroke:.04em currentColor; paint-order:stroke fill; filter:url(#cp-vinyl-nav-s); text-shadow:none !important; text-decoration:none; cursor:pointer; transform-origin:40% 60%; transition:transform var(--slow) var(--settle), color var(--slow) var(--settle); -webkit-tap-highlight-color:transparent; } /* the P answers the hand like every word (house/hand.js): it no longer grows under it */ /* open: the P stands on the sheet of water, the only word left in the letterhead */ html.is-indexed #nav{ z-index:86; color:#141413; opacity:1; } html.is-indexed #nav .nav-links, html.is-indexed #nav .nav-lang, html.is-indexed .mbm{ opacity:0; pointer-events:none; } html.is-indexed #nav .nav-mark{ color:#141413; -webkit-text-fill-color:#141413; filter:url(#cp-vinyl-nav-s); transform:rotate(-8deg) scale(1.04); } /* the sheet's own CLOSE word steps back: the P closes it (the word stays for the keyboard and for a reader) */ html.is-indexed .tray-close{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; } @media (max-width:759px){ #nav .nav-mark{ font-size:32px; padding:8px 2px 8px 4px; } }