/* ══════════════════════════════════════════════════════════════════ THE SITE EXIT — one definition, four experiences. This is the only element on the site whose job is to say "these five things are one portfolio." On 2026-08-20 it was audited across every surface and found set FOUR different ways, and missing entirely from ALIZA, which made the newest experiment a dead end: The Pattern Space Mono 10px rgba(240,237,230,.42) -> / Archive Space Grotesk 13px #000 -> /#experiments Vagalumes Space Mono 13px rgba(240,237,230,.66) -> /#experiments Be My Hands Helvetica 11px rgba(25,21,16,.62) -> / ALIZA absent A frame that changes with the picture is not a frame. This file is the frame. It is linked, never copied. Change it here and all four move together. WHAT IS DELIBERATELY NOT UNIFIED The Hagara Stuff Archive is a page inside the shell, not a full-bleed takeover, so its way back is the SHELL'S OWN nav (.nlink), which is a different element doing a different job. The four surfaces below take over the whole screen and each needs its own persistent way out. THE VALUES, AND WHY · Helvetica, the site's face on both registers. Each experiment owns its own type world INSIDE the frame; the frame itself is the site speaking, so it does not change costume per page. · 13px, which is the editorial register's own stated micro floor. The old values (10px and 11px) were below it. · Solid colour, never an alpha. Standing rule: do quiet with SIZE, never with an alpha that fails AA. Measured on 2026-08-20: #f0ede6 on #0a0e1a (Pattern) = 16.4:1 #f0ede6 on #0d0d0d (Vagalumes) = 16.1:1 #f0ede6 on #000000 (ALIZA) = 17.4:1 #191510 on #ffffff (Be My Hands) = 18.2:1 · One destination, /#experiments: you came from the index, you go back to the index, where the next experiment is. · target="_top" is REQUIRED on every one of them. These pages run inside an iframe; without it the visitor navigates the frame and stays trapped in the experience. ══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ THE TREATMENT IS VAGALUMES', AND THAT IS A CORRECTION (2026-09-01). She named "the Vagalumes page, opening page" as the reference twice. I read that as the CLOSED DOOR inside this portfolio, which wears `.site-exit`, and standardised everything onto Helvetica 700 tracked caps because that is what `.site-exit` already was. She meant the exit on vagalumes.co.il itself, `.vl-exit` in ui/sky.html, which is a different thing entirely: Space Mono, 11px, wide tracking, dimmed cream, and a hover that BRIGHTENS rather than going coral. Her screenshot settled it. SO THE CORAL HOVER IS OUT, ON EVERY SURFACE. She said the hover "is weird and doesn't match". It was mine, added this morning on the earlier reading, and it never matched the reference she was pointing at. THE SPEC, copied from ui/sky.html rather than re-chosen: Space Mono 11px / .14em / uppercase rest .62 alpha hover .98 alpha arrow .5em gap, translateX(-3px) over .22s cubic-bezier(.22,1,.36,1) WHITE GROUNDS REVERSE IT, her words: "if the page is white, just reverse that and use a dark font." Same two alphas, ink instead of cream. MEASURED, because .62 is an alpha and this file's own standing rule is to never do quiet with an alpha that fails AA. At 11px the floor is 4.5:1 and every ground clears it at rest: Vagalumes #0d0d0d 6.75:1 Pattern #0a0e1a 6.69:1 ALIZA/Voices #000 6.85:1 white #ffffff 5.08:1 Hover lands between 15.85 and 17.30:1. No exception is being taken here. ═══════════════════════════════════════════════════════════════════ */ /* The font travels with the stylesheet, because every one of these pages is its own document inside an iframe and cannot import the app's fonts. Two subsets, absolute paths so the depth of the calling document does not matter, and `swap` so the link is readable in a system mono for the frame before it arrives. */ @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-mono-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: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-mono-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; } .site-exit { display: inline-flex; align-items: center; white-space: nowrap; font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; line-height: 1; padding: 8px 2px; color: rgba(25, 21, 16, 0.62); pointer-events: auto; transition: color 0.22s ease; } .site-exit[data-ground="dark"] { color: rgba(240, 237, 230, 0.62); } .site-exit:hover, .site-exit:focus-visible { color: rgba(25, 21, 16, 0.98); } .site-exit[data-ground="dark"]:hover, .site-exit[data-ground="dark"]:focus-visible { color: rgba(240, 237, 230, 0.98); } .site-exit:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Full-bleed experiences pin it. A takeover must always show the way out. */ .site-exit--fixed { position: fixed; left: clamp(24px, 5vw, 64px); top: clamp(18px, 3vh, 26px); z-index: 90; } .site-exit-arw { display: inline-block; margin-right: 0.5em; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .site-exit:hover .site-exit-arw, .site-exit:focus-visible .site-exit-arw { transform: translateX(-3px); } @media (prefers-reduced-motion: reduce) { .site-exit-arw { transition: none; } .site-exit:hover .site-exit-arw { transform: none; } }