/* ============================================================ MYNICHEFUND — TOKENS The single source of truth for colour, type, space and motion. Nothing in any page may define these values again. ============================================================ */ /* --- TYPEFACE ------------------------------------------------------ The live face is OUTFIT — see the block two comments down. The two blocks below it are the faces this went through on the way there, kept because each one records a decision and what it cost, not because either is still switched on. THE TRIAL FILES that this note used to be about (GT America) are no longer referenced by anything. Nothing on this site is on trial. */ /* ============================================================ SUPERSEDED 22 Sept 2026 — HELVETICA (client: "put the whole website in helvetica ... find a pair and make a system"). NOTHING IS DOWNLOADED. Helvetica is on every Mac and iPhone, and the stack falls to Arial on Windows and to the system grotesque on Android, which are the same widths — so the page sets the same way everywhere without a licence and without a single font file to fetch. THE WEIGHTS ARE MAPPED, NOT INVENTED. Helvetica Neue ships Regular, Medium and Bold; asking a browser for 900 makes it smear the Bold into a fake black. These three faces name the real cuts, and the display face answers anything from 700 upward with the true Bold. THE PAIR: Helvetica sets everything that is read — the wordmark, the headlines, the nav, the body — and the figures keep a monospace so money and dates stay in columns. That is the system: one voice, one ruler. ============================================================ */ /* ============================================================ OUTFIT + GEIST MONO — the type, 23 September 2026. Chosen by the client from the seven-family Fontshare comparison: "change the whole website to the number 7. Outfit, find a pair". Supersedes Chillax, which superseded Supreme, which superseded Helvetica. OUTFIT (Rodrigo Fuenzalida / Smartsheet, SIL Open Font License, self-hosted here) is a geometric sans with a FULL 100-900 WEIGHT AXIS. That axis is why it is the right end of this search: every face before it capped out below the design's intent — Chillax stopped at Bold, so the wordmark and the .mega lines clamped to 700 and the page never got the black it was drawn for. Outfit has a real Black, so MYNICHEFUND, NO ART TOO NICHE. and the artists' names finally set at 900. NOT THE FONTSHARE BUILD. Fontshare's Outfit has no c-caron, s-caron, z-caron, no Polish, no Czech ring — "Lena Kovac" would have lost its accent exactly the way the GT America trial did. These are Google Fonts' files, same family, same OFL, split latin / latin-ext, and the full Slovak, Czech and Polish sets are in the second one. 45KB total. THE PAIR: Outfit sets everything that is READ — wordmark, headlines, nav, buttons, labels, body. GEIST MONO sets everything that is COUNTED — money, dates, percentages, the loading figure. A monospace holds numbers in columns, so 67% of EUR3,000 lines up under the next campaign's and a page can be read down a column of sums. One voice and one ruler; that is the whole system. HELVETICA STAYS AS THE FALLBACK, so a page still sets properly in the half second before the files arrive, or if they ever fail. Outfit has no left or right arrow; those fall back to it too. WEIGHT IS SET BY font-weight AND NOTHING ELSE — see the note on body in base.css before you reach for font-variation-settings. ============================================================ */ @font-face{font-family:"Outfit"; src:url("font/outfit/Outfit-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; 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:"Outfit"; src:url("font/outfit/Outfit-latin-ext.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Geist Mono"; src:url("font/free/GeistMono-latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; 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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Geist Mono"; src:url("font/free/GeistMono-latin-ext.woff2") format("woff2"); font-weight:100 900; font-display:swap; 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:"MNF Sans"; font-weight:400; font-style:normal; font-display:swap; src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Arial"),local("Liberation Sans")} @font-face{font-family:"MNF Sans"; font-weight:500; font-style:normal; font-display:swap; src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium"),local("Helvetica"),local("Arial"),local("Liberation Sans")} @font-face{font-family:"MNF Sans"; font-weight:600 900; font-style:normal; font-display:swap; src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Arial Bold"),local("Liberation Sans Bold")} @font-face{font-family:"MNF Sans"; font-weight:400; font-style:italic; font-display:swap; src:local("Helvetica Neue Italic"),local("HelveticaNeue-Italic"),local("Helvetica Oblique"),local("Arial Italic")} /* --- COLOUR WORLDS ------------------------------------------------- Grounds share one recipe — hsl(H, 75%, 47%) — so contrast is identical across them. Chrome is exempt: yellow cannot sit at that luminance and stay yellow. Every world carries both ink options. */ /* --- MONOCHROME ------------------------------------------------------ White ground / black type, and its inverse. In a mono world --ink-b and --ink-w are the SAME value: on a white ground the only usable ink is black, on a black ground the only usable ink is white. There is no second option to offer, so both slots hold it. --tint is 0 here. The artwork overlay multiplies the ground over each image to pull it into the palette; with no colour to pull toward, the tint does nothing on white and crushes everything to black on black. Greyscale alone does the unifying in these worlds. */ :root[data-world="white"]{ /* Everything here is exactly as it was before the colour work — ink, soft, rule, deep — EXCEPT --ground, which is the paper the petrol is mixed into. */ --on-deep:#FFFFFF; --tint:0; /* The dark end is a near-black, not #000 — same reasoning as the paper not being #FFF. Pure endpoints read as unset. The reference sits at #1E1E1E, a pure neutral; this takes that value and runs the same petrol through it so both ends of the palette share one hue. Plain value first as a fallback. */ --deep-mix:0%; --deep:#1E1E1E; /* the reference strip, adamclarkecolour.com — measured rgb(30,30,30) */ --ink-b:#000000; --soft-b:#6B6B6B; --rule-b:#B5B5B5; --ink-w:#000000; --soft-w:#6B6B6B; --rule-w:#B5B5B5; /* PETROL — MIXED OUT 2026-09-01 at the user's request. The paper is plain #F0F0F0 again and the dark strip is a pure neutral #1E1E1E. The machinery is left standing on purpose: --accent and the two mixes are still wired to color-mix and to the dev sliders, so the tint is one slider away and needs no code change to come back. Do not delete it — deleting it is not "cleanup", it is throwing away a decision that took a session. h193 s75% l32%, solved to the luminance the reference's own red carries so the tint had the same weight on the page while being nothing like it. No text, rule or control ever read from --accent; it is only the ingredient. */ --accent:#14758F; --ground-mix:0%; /* THE PAPER — #F2F2F2, chosen 2026-09-02 to sit with the #1E1E1E strip: a pure neutral, no blue in it, two steps off white (was #F8F9FA). A barely-warm off-white: 4 points of red over blue, which is enough to read as paper rather than as screen without going cream. Relative luminance 0.948 against pure white's 1.0, so it costs almost nothing in contrast — ink measures 19.96:1 and --soft 5.08:1 on it. THE GROUND MOVED FOUR TIMES IN ONE SESSION: petrol-tinted #DEE6E8, then #F0F0F0, then #FFFFFF, then #F9F6EE, now this. Every one of them was a single line to change, because this token is the ONLY place the value is written and nothing in base.css or index.html hardcodes a paper colour. That property is worth more than any particular value here — keep it. Supersedes the Phase 1 note "the paper is not #FFF, pure endpoints read as unset", which was settled by the user picking these values directly. plain value FIRST so a browser without color-mix keeps a ground at all. */ --ground:#F2F2F2; --ground:color-mix(in srgb, var(--accent) var(--ground-mix), #F2F2F2); --deep:color-mix(in srgb, var(--accent) var(--deep-mix), #1E1E1E); } :root[data-world="black"]{ --ground:#000000; --deep:#1A1A1A; --on-deep:#FFFFFF; --tint:0; --ink-b:#FFFFFF; --soft-b:#8A8A8A; --rule-b:#4A4A4A; --ink-w:#FFFFFF; --soft-w:#8A8A8A; --rule-w:#4A4A4A; } /* --- COLOUR (kept, currently unused by index.html) ------------------- */ :root[data-world="signal"]{ /* H 0 */ --ground:#D21E1E; --deep:#4E0B0B; --on-deep:#F5EFEC; --tint:0.55; --ink-b:#170404; --soft-b:#7A1212; --rule-b:#A01818; --ink-w:#F5EFEC; --soft-w:#F2B4B4; --rule-w:#E87C7C; } :root[data-world="chrome"]{ /* H 45 — exempt from the luminance match. Yellow cannot sit at Signal's luminance and stay yellow; forced down it becomes olive-bronze. */ --ground:#F2B705; --deep:#241A00; --on-deep:#F7EBC8; --tint:0.55; --ink-b:#1A1200; --soft-b:#5A4402; --rule-b:#826203; --ink-w:#FFFCF0; --soft-w:#FDF2C9; --rule-w:#F8E3A2; } /* --- THE SPARK ----------------------------------------------------- #5C7AEA, the colour the client chose for the niche drawings on 22 September. It is the same on white and on black — "use this for both" — so it needs no per-world value and sits outside the ink resolution below on purpose. IT IS AN IDENTITY, NOT A PALETTE (23 September 2026, client: "i like how they have identity, its the yellow color for them ... but also dont use it too much for everything just add a spark"). THE REFERENCE IS cassettemusic.com, whose code the client sent. Their yellow #F0E226 is spent in exactly three kinds of place and nowhere else: the MARK itself (the wordmark on the hero), the thing that is MOVING (the Lottie volume bars, the scrollbar thumb), and the state that is OPEN or CURRENT (the team accordion's icon turns yellow when its row is open). It never carries a heading, a paragraph, a button or a background. That restraint is the whole reason it reads as identity and not as decoration. SO THE RULE HERE IS: the spark marks what is ALIVE, CURRENT, or THE MARK. Eleven places, listed so the next person can see the whole set at once and judge an addition against it: the niche drawings lstack.css — the mark the current sort, ABC base.css — current the loading figure loader.css — alive, it is counting the loader's turning ring loader.css — alive, beside the figure the page's scrollbar base.css — alive, it moves with you the falling dash, screen 1 fs.css — alive, the only thing moving an open question's disc leo.css — open a running campaign's dot profile.css — alive the current section's dot profile.css — current selection and focus ring base.css — the reader's current place the typing caret base.css — the reader's current place Anything else gets ink, ground or soft. If you are about to paint a heading, a paragraph, a button or a background with this, the answer is no — that is the line the reference does not cross either, and it is the only reason a single colour reads as an identity. ------------------------------------------------------------------- */ :root{ --spark:#5C7AEA; } /* ink resolution — black is the default */ :root,:root[data-ink="black"]{ --ink:var(--ink-b); --soft:var(--soft-b); --rule:var(--rule-b); } :root[data-ink="white"]{ --ink:var(--ink-w); --soft:var(--soft-w); --rule:var(--rule-w); } /* --- TYPE DIRECTIONS ----------------------------------------------- ONE DIRECTION NOW. The three that were here (GT America on trial, Archivo, Switzer) were ways of testing a face that had to be licensed; Outfit is free to use and self-hosted, so data-type is kept only so the old markup still resolves — every direction is the same type now. --face the wordmark and the display lines --face-ui everything read as interface: nav, buttons, labels, body --face-data money, dates and counts — monospace, so figures line up */ :root,:root[data-type="gt"],:root[data-type="wide"],:root[data-type="itf"]{ --face:"Outfit","MNF Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --face-ui:"Outfit","MNF Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --face-data:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Outfit has no width axis: the three widths are one width now */ --wide:100; --norm:100; --narrow:100; } :root{ /* SPACE — doubling scale on a 10px root */ --s1:0.25rem; --s2:0.5rem; --s3:1rem; --s4:2rem; --s5:4rem; --s6:8rem; --s7:12rem; --s8:20rem; /* THE SHELL GUTTER — named, because the hero wordmark has to cancel it. .shell pads the page by this on both sides; .hero-mark applies the same value as a NEGATIVE margin so its clip box is the true viewport width and the word crops on the screen edge rather than 20px inside it. Two rules, one number — change it here and both move together. */ --shell-pad:var(--s4); /* THE LANDING WORDMARK ------------------------------------------------ --mark-ratio is MEASURED, not guessed: MYNICHEFUND set in GT America Extended Black at -0.045em tracking is 8.264x its own font-size wide. Re-measure if the face, the weight or the tracking changes, or the fill below stops meaning what it says. --mark-fill is the word's width as a multiple of the viewport: 1.00 exactly edge to edge, nothing lost 1.18 the outer stems of the M and the D run off both edges <- here 1.40 roughly a character and a half gone each side Above ~1.5 the name stops being readable. This is the one number to move if the mark wants to be bigger or smaller; the size solves itself. */ /* CENTRED ON THE SCREEN, NOT ON THE CANVAS. The wordmark's clip box runs from the rail (--edge-w) to the right edge, so its own centre is (100vw + --edge-w)/2 — 670px on a 1280 screen, while the screen's centre is 640. Left alone the name reads 30px right of centre. Shifting by half the rail's width cancels exactly that. The pair of small lines carries the SAME token, so they travel with it. OVERRIDDEN ON DESKTOP since 2026-09-02: alignMark() in site.js writes --mark-x inline so the mark's right edge meets the end of "find your niche". This value is the fallback and the phone value. */ --mark-x:calc(var(--edge-w) / -2); --mark-ratio:8.264; /* 0.90 — set by hand 2026-09-01. Below 1.00 there is NO crop: the word sits whole inside the box with a tenth of it spare, which reverses the earlier decision to let the M and D bleed. The bleed machinery is untouched; put this above 1.00 and it returns. */ /* 0.752 — solved from the size set by hand: the wordmark was dragged to 111px in a 1220px box, and 111 x 8.264 / 1220 = 0.752. Held as the RATIO rather than the 111px, so the name keeps the same share of the screen at every width instead of freezing at one. Below 1.00 there is no crop: the word sits whole with a quarter of the box spare. */ --mark-fill:0.752; /* MOTION — two for movement, and one for colour. --micro and --macro both leave fast and land slow: right for a thing that MOVES, wrong for a thing that only changes shade, where the fast start reads as a switch flicking. --dim is the panel's hover fade: a symmetric ease over 160ms — quick enough to read as a response to the pointer, even enough not to flick. 480ms was tried first and read as lag. Added 2026-09-02 at the user's request. */ --micro:300ms cubic-bezier(0.19,1,0.22,1); --macro:750ms cubic-bezier(0.23,1,0.32,1); --dim:160ms cubic-bezier(0.4,0,0.2,1); } /* --- MOTION, MEASURED (9 Sept 2026) --------------------------------- Two durations and five curves, read directly off the reference the client asked this page to match. They are its values, not chosen ones: the whole system there runs on .3s and .6s and reuses this short set of curves for everything, which is most of why it feels the way it does. --micro / --macro above stay as they are; they belong to the rest of the site. These are for the campaigns viewer. */ :root{ --speed:.3s; --speed-slow:.6s; --easing:cubic-bezier(.215,.61,.355,1); /* their default */ --bounce:cubic-bezier(.17,.67,.3,1.33); /* overshoot */ --power1-out:cubic-bezier(.25,.46,.45,.94); --power3-out:cubic-bezier(.165,.84,.44,1); /* item reveals */ --power2-in-out:cubic-bezier(.645,.045,.355,1); /* the flight */ }