/* ============================================================ YAFA — DESIGN TOKENS Six colours, extracted from Milan and published with their sources on /studio. Three type voices. One line weight. Nothing in this file is decorative; everything is derived. LOAD ORDER: tokens.css → site.css → rete.css (opening only). This file must load first; the other two read its variables. ============================================================ */ /* ============================================================ THE FACES — self-hosted, no CDN, no third-party request. Latin and latin-ext are split so a page that never sets an accented character never pays for one. Amiri is subset to the four letters of the seal and nothing else: 3 KB, not 108. All four families are SIL Open Font License 1.1. Archivo — Omnibus-Type. Newsreader — Production Type. IBM Plex Mono — IBM. Amiri — Khaled Hosny. ============================================================ */ /* ---- ARCHIVO — interface. One variable file, 100–900. ------ */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- NEWSREADER — statement. Static 300, roman and italic. The site sets the serif at 300 and nowhere else, so two static instances ship instead of a 132 KB variable file. --- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/newsreader-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/newsreader-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/newsreader-300i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/newsreader-300i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- IBM PLEX MONO — catalogue. 400 and 500. --------------- */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plexmono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plexmono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plexmono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- AMIRI — the seal, and nothing else. ------------------- Subset to ي ا ف — the three distinct letters of يافا. 3 KB. The full Arabic face is 108 KB and would be a lie about how much Arabic this site sets. */ @font-face { font-family: "Amiri Seal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-seal.woff2") format("woff2"); unicode-range: U+0627, U+0641, U+064A; } :root { /* ---- GROUND ------------------------------------------------- Pure #000 and #fff are banned. They are the fastest visual tell of a default stylesheet. */ --paper: #F2EFE9; /* plaster, warm daylight */ --paper-2: #E8E4DC; /* the page, one step down */ --candoglia: #E4D9D2; /* Duomo marble, Val d'Ossola */ --fog: #B9B4AC; /* Milanese overcast */ --ceppo: #8A8A86; /* conglomerate stone */ --brass: #8C6F3F; /* oxidised metal */ --brass-lit: #BD9A5C; /* the same metal under the key */ --brass-deep: #453419; /* the same metal in shadow */ --ink: #0E0E0D; --stone: #1A1815; /* warm dark. never neutral black. */ --stone-2: #14120F; --levante: #415353; /* the cool note. under 1% of surface*/ /* ---- TEXT ROLES ------------------------------------------- */ --t-ink: var(--ink); --t-quiet: #6B6862; --t-faint: #97928A; --t-brass: #6E5730; /* ---- RULES -------------------------------------------------- One line weight across the entire site. 1px hairline for structure, 2px for a section start. Nothing between. */ --hair: 1px solid rgba(14,14,13,.16); --hair-soft: 1px solid rgba(14,14,13,.09); --rule: 2px solid rgba(14,14,13,.82); --hair-dark: 1px solid rgba(226,216,196,.18); /* ---- TYPE --------------------------------------------------- Interface: Archivo — neo-grotesque, Milanese modernist descent Statement: Newsreader — epigraphic, contemporary drawing Catalogue: IBM Plex Mono — field notes, find numbers Trajan is banned. Letterspaced caps appear once: the wordmark. Newsreader replaced Cormorant Garamond. Cormorant is the most circulated luxury serif in use and it is already the jewelry face elsewhere in this founder's work. Newsreader was chosen against Instrument Serif over the three sizes it actually has to hold — .title-l 76px, .opening-thesis 62px, .entry__title 36px. Instrument Serif carries the two display sizes and collapses at 36px, where the register lives; it also has one weight, which would have forced the whole site off 300. */ --ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --serif:"Newsreader", "Times New Roman", Times, serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --arabic: "Amiri Seal", "Amiri", "Noto Naskh Arabic", serif; /* ---- MEASURE & GRID ----------------------------------------- The left sixth of every measure is reserved. Numbering, scheda and captions live there. No image ever enters it. */ --page-max: 1560px; --gutter: clamp(20px, 4.4vw, 68px); --col-reserved: clamp(150px, 15vw, 232px); --col-gap: clamp(24px, 3.4vw, 56px); /* ---- SPACING — movements, not paddings --------------------- */ --s-1: 8px; --s-2: 16px; --s-3: 28px; --s-4: 44px; /* plate to its next block */ --s-5: 72px; --s-6: 96px; /* between movements */ --s-7: clamp(120px, 15vh, 190px); /* ---- MOTION ------------------------------------------------- Four motions exist: turn, travel, dilate, rise. Anything that is not one of those does not ship. */ --rise: 400ms cubic-bezier(.22,.61,.36,1); --settle: 350ms cubic-bezier(.22,.61,.36,1); --dilate: 700ms cubic-bezier(.22,.61,.36,1); --travel: 900ms cubic-bezier(.65,0,.35,1); --hover: 140ms linear; /* corner radius resolves to zero. this is an engraved object, not a card. */ --radius: 0; } /* The instrument route, and the night project, invert to warm stone. This is the only theme change on the site, and it should feel like walking into a different room. */ .room-stone { --paper: var(--stone); --paper-2: var(--stone-2); --t-ink: #E6DFD1; --t-quiet: #9A9184; --t-faint: #6E675C; --t-brass: #C8A465; --hair: 1px solid rgba(226,216,196,.17); --hair-soft: 1px solid rgba(226,216,196,.10); --rule: 2px solid rgba(226,216,196,.6); }