/* --signal e' IDENTITA', non stato. Il vocabolario del colore su questo sito e' ghiaccio = congelato, ambra = azionabile, e nient'altro e' colorato: un terzo colore su una riga, una card o un badge rimangerebbe quel vocabolario, e un arco verde su un quadrante legge "tutto ok" proprio mentre la pagina dice il contrario. Vive nel mark, nella card social e nel banner. Mai su una misura — test/brand.test.ts lo verifica invece di sperarlo. */ :root{ color-scheme:dark; --ink:#07090B; --panel:#0D1116; --rule:#1A2129; --rule-soft:rgba(26,33,41,.6); --frost:#E6EDF3; --dim:#8794A1; --dimmer:#7C8996; --ice:#7FB3D5; --amber:#E0A458; --signal:#A6FF4D; --ice-rgb:127,179,213; --amber-rgb:224,164,88; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace; } /* The light palette. Same vocabulary — ink, panel, rule, frost, dim, dimmer, ice, amber — so no rule below needs to know which one is on; every pair a page uses is held above 4.5:1 by test/contrast.test.ts, in both, by arithmetic and not by eye. Ice and amber are darker here because the same two hues that read on ink wash out on paper; they still mean frozen and actionable, nothing else. --signal is identity and does not change. */ @media (prefers-color-scheme:light){ :root{ color-scheme:light; --ink:#F3F5F7; --panel:#FFFFFF; --rule:#D5DCE3; --rule-soft:rgba(213,220,227,.6); --frost:#141C24; --dim:#4A5866; --dimmer:#56636F; --ice:#1B6A94; --amber:#8A5006; --ice-rgb:27,106,148; --amber-rgb:138,80,6; } /* The two logo repairs exist for marks too dark to read on ink. On paper a dark mark is the readable case, and inverting it would print white on white — so neither repair applies. The files on disk are untouched either way. */ .logo--invert,.logo--lift,.blind .logo--lift{filter:none} } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--frost); font:400 14px/1.6 var(--mono); -webkit-font-smoothing:antialiased; } .wrap{max-width:1140px;margin:0 auto;padding:0 24px} a{color:var(--dim);text-decoration:none} a:hover{color:var(--frost)} :focus-visible{outline:2px solid var(--ice);outline-offset:3px} /* ── masthead ───────────────────────────────────────────── */ .top{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap; } .wordmark{display:flex;align-items:center;gap:9px;color:var(--frost)} .mark{width:15px;height:15px} .wordmark span{font-size:12px;letter-spacing:.19em;text-transform:uppercase} .topright{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase} /* Marks the boundary between link groups (elsewhere I can be reached / the other two pages / what proves any of this) without adding a second visual language — same middot the eyebrow and footer already use for " · ". */ .navsep{color:var(--dimmer);opacity:.5} .chip{ font:inherit;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; background:var(--panel);border:1px solid var(--rule);color:var(--frost); padding:6px 10px;border-radius:2px;cursor:pointer; } .chip span{color:var(--dim);margin-left:7px;text-transform:none;letter-spacing:0} .chip--pending{cursor:default;color:var(--dim)} .chip:hover:not(.chip--pending){border-color:var(--ice)} /* ── hero: the counter is the thesis, the field is the proof ── The design note says the signature is "35 clocks climbing together and none of them resetting — no sentence explains the product as well". It was true and it was not on the page: the hero showed ONE clock and the right half of a 1140px canvas was empty. The field puts the sentence on screen. It needs no new script — every row carries data-updated and a [data-age] cell, which is what tickAges already drives. */ .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0} @media (min-width:1000px){ .hero{grid-template-columns:minmax(0,1fr) 300px;gap:0 56px;align-items:start} .hero__main{grid-column:1} .field{grid-column:2;grid-row:1 / span 2;margin-top:4px} } .field{border-top:1px solid var(--rule);padding-top:12px;margin-top:34px} .field__head{display:flex;justify-content:space-between;align-items:baseline; font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:10px} .field__list{list-style:none;margin:0;padding:0; /* Two columns under the breakpoint so 35 rows do not push the page down. */ columns:2;column-gap:28px} @media (min-width:1000px){.field__list{columns:1}} .field__row{display:flex;justify-content:space-between;gap:12px; font-size:12px;line-height:1.95;color:var(--dim);break-inside:avoid} .field__row b{font-weight:400;color:var(--dim);letter-spacing:.02em} .field__row span{font-variant-numeric:tabular-nums;color:var(--dimmer)} /* Same ice/amber system as the tape. Colour is state, never emphasis: a feed that is merely on time gets none, because the boring state must not compete with the actionable one. */ .field__row--cold b,.field__row--cold span{color:var(--ice)} .field__row--hot b,.field__row--hot span{color:var(--amber)} .field__foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule-soft); font-size:11.5px;line-height:1.6;color:var(--dimmer)} /* The six stats moved out from under both columns and into the left one. They were already the summary of everything above them, and sitting full-width below the fold they left the left column ending 270px short of the clock field — a hole that read as a rendering fault rather than as space. Three across, so six wrap into two whole rows instead of the 4+2 the auto-fit default produces at this width: the orphan case the original comment on .status was written to avoid. */ @media (min-width:1000px){ .hero__main .status{grid-template-columns:repeat(3,1fr)} .hero__main .status a:nth-child(3n){border-right:0;padding-right:0} .hero__main .status a:nth-child(-n+3){border-bottom:1px solid var(--rule)} } /* ── hero: the counter is the thesis ────────────────────── */ header{padding:64px 0 0} .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)} /* Sits between the eyebrow and the headline on purpose: a fact about the project's history has to land before the live counter, or the counter is the first thing anyone judges it by. Same size and colour as .since below — a supporting fact, not a second headline. */ .proof{margin:12px 0 0;color:var(--dim);font-size:13px} /* Le due righe di prova portano i fatti piu' forti della pagina — 1.074 aperture e sette weekend agli atti — e stavano in grigio piccolo sopra un contatore da 46px: gerarchia visiva invertita rispetto a quella dei fatti. Peso, non dimensione: restano righe di prova, non diventano titoli. */ .proof a{color:var(--frost);font-weight:500} .proof--log{font-size:14px} .proof--log a{border-bottom:1px solid var(--rule);text-decoration:none} .proof--log a:hover{border-bottom-color:var(--frost)} h1{ font:400 clamp(26px,4.6vw,46px)/1.14 var(--mono); letter-spacing:-.02em;margin:18px 0 0;max-width:24ch; } /* Le due letture sotto il titolo: la piu' fresca e la piu' indietro. Stessa forma, cosi' si leggono come una coppia e non come un dato e una nota. Il peggiore in ambra perche' e' il vocabolario del sito per "azionabile" — mai il verde, che qui e' identita' e non stato (vedi il commento su --signal). */ .roadmap{margin:14px 0 0;padding-left:20px;color:var(--frost)} .roadmap>li{margin:0 0 16px;line-height:1.6} .roadmap b{color:var(--frost)} .how{display:block;margin-top:5px;color:var(--dim);font-size:13px; border-left:2px solid var(--rule);padding-left:10px} .tier__sub{color:var(--dim);font-size:13px;margin:-4px 0 10px} .sample{font:12px/1.5 var(--mono);color:var(--dim);background:var(--panel); border:1px solid var(--rule);border-radius:6px;padding:12px;margin:10px 0;overflow-x:auto} /* The two readings under the question are one block, and one of them leads. They used to be two inline pairs of nearly the same size, both ice: the eye had no order to follow. Now the label sits above its number, the newest print is the large one, and "furthest behind" is the same shape at half the size — a pair, with a first and a second. */ .readings{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 48px;margin:22px 0 0} @media (min-width:640px){.readings{grid-template-columns:auto auto;justify-content:start;align-items:end}} .reading{display:flex;flex-direction:column;gap:8px;min-width:0} .reading__k{color:var(--dim);font-size:12.5px} /* ⚠️ NIENTE ambra qui, ed e' una regola del sito non una preferenza: l'ambra vuol dire "azionabile", e questa pagina dice a chiare lettere che "behind by" e' una MISURA e non un verdetto — "it is a measurement, not a verdict, and the page says which of the two you are looking at rather than colouring everything alarming". Colorarla di allarme direbbe il contrario del paragrafo che sta trenta righe sotto. Eredita il colore del contatore, che e' giusto. */ .count{ display:block;margin:0;font-variant-numeric:tabular-nums; font-size:clamp(40px,6.6vw,68px);line-height:1;letter-spacing:-.03em;color:var(--ice); } /* AFTER .count, or it loses: same specificity, and the later rule wins. It sat before .count until 2026-09-02, so the "half size" it declared never applied and both readings rendered at the full size — which is why they read as equals. */ .count--worst{text-decoration:none;font-size:clamp(22px,3.2vw,34px);white-space:nowrap} .count--worst:hover{text-decoration:underline} .count[data-hot="1"]{color:var(--amber)} /* Il registro non colora il proprio titolone. La regola #3 dice "il colore e' stato, mai enfasi, headline compresa": un conteggio di weekend NON misurati e' l'assenza di stato, e metterlo in ghiaccio — il colore che significa "congelato" — gli dava un significato che non ha. archivepage.ts dichiarava gia' di non colorare niente; fino al 04/08 non era vero. */ .count--quiet{color:var(--dim)} .since{margin:14px 0 0;color:var(--dim);font-size:13px} .live{ display:inline-flex;align-items:center;gap:8px;margin-top:26px; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim); } .dot{width:6px;height:6px;border-radius:50%;background:var(--ice);flex:none} .stand{margin:26px 0 0;max-width:66ch;color:var(--dim);font-size:14px;line-height:1.75} .stand strong{color:var(--frost);font-weight:400} /* ── fast lane control ─────────────────────────────────── The holder tier is the one thing a stranger cannot check from the outside, so while the gate is open it unlocks itself and says so. */ .lane{margin-top:22px;border:1px solid var(--rule);border-radius:3px;padding:14px 16px;max-width:66ch} .lane--on{border-color:rgba(var(--ice-rgb),.4)} .lane__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .lane__head b{font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .lane--on .lane__head b{color:var(--ice)} .lane button{ font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase; background:transparent;border:1px solid var(--rule);color:var(--dim); padding:5px 11px;border-radius:2px;cursor:pointer; } .lane button:hover{border-color:var(--ice);color:var(--frost)} .lane p{margin:11px 0 0;font-size:13px;color:var(--dim);line-height:1.7} .lane p b{color:var(--frost);font-weight:400} .lane__err{color:var(--amber)} /* A ticker refreshed by the fast lane is marked. The rest are still on the 20-minute sweep and must not borrow its freshness. */ .is-fast [data-age]::after,.card.is-fast .card__foot span::after{ content:"·60s";margin-left:6px;color:var(--ice);font-size:9.5px;letter-spacing:.06em; } /* Grid, not flex: six stats wrapped into an orphaned single cell that read as a rendering fault. A grid wraps into full rows that still look deliberate. */ .status{ display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); border-top:1px solid var(--rule);margin-top:34px; } /* Each stat is a link to the thing that proves it: the table, the list of tickers with no oracle, or the machine-readable read the page was built from. The page's claim is that every number here is checkable, and a number you cannot click is a number you have to take on trust. Colour and weight stay exactly as they were -- these read as data, not as navigation, until you hover one. */ .status a{display:block;padding:15px 22px 15px 0;border-right:1px solid var(--rule); text-decoration:none;color:inherit;transition:background .12s ease} .status a:hover,.status a:focus-visible{background:rgba(var(--ice-rgb),.055)} .status a:hover b,.status a:focus-visible b{color:var(--ice)} .status a:focus-visible{outline:1px solid var(--ice);outline-offset:-1px} .status a:last-child{border-right:0} .status b{display:block;font-weight:400;color:var(--dimmer);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px} .status span{font-size:22px;color:var(--frost);font-variant-numeric:tabular-nums} #selfcheck{ display:none;margin:22px 0 0;padding:11px 14px; border-left:2px solid var(--amber);background:rgba(var(--amber-rgb),.07); font-size:12.5px;color:var(--amber); } #selfcheck.show{display:block} /* ── sections ───────────────────────────────────────────── */ section{padding:56px 0 0} /* A heading, not a label. It was 10.5px, tracked, uppercase — the same treatment as the eyebrow and the stat captions — so a page of eight sections offered nothing to scan by. Sentence case at 17px is the one element between body and h1, and the hairline under it still marks where a section starts. */ h2{ font:500 17px/1.3 var(--mono);letter-spacing:-.01em;text-transform:none; color:var(--frost);margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--rule); } .note{color:var(--dim);font-size:14px;max-width:66ch;margin:18px 0 0;line-height:1.75} /* A heading that follows prose inside the same section needs the room a new section would get; the log page has two of them. */ .note+h2,.cmd+h2,.scroll+h2{margin-top:44px} .note strong{color:var(--frost);font-weight:400} /* Due nella pagina token lo chiedevano con un attributo. Una classe fa la stessa cosa e non ha bisogno di 'unsafe-inline'. */ .frost{color:var(--frost)} /* ── cards: newest print first ─────────────────────────── Border carries state, content never does. A grid is for browsing and a table is for comparing, so this lane browses the ten most recent and the tape below stays the place you compare all 35. */ .cards{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .card{ border:1px solid var(--rule);border-radius:4px;background:var(--panel); padding:12px;display:flex;flex-direction:column;gap:10px; } .card--cold{border-color:rgba(var(--ice-rgb),.34)} .card--hot{border-color:var(--amber)} .card__top{display:flex;align-items:center;justify-content:space-between;gap:8px} .tag{font-size:8.5px;letter-spacing:.13em;color:var(--amber);white-space:nowrap} .card--cold .tag{color:var(--ice)} .tag--quiet{color:var(--dimmer)} .rank{font-size:10.5px;color:var(--dimmer);font-variant-numeric:tabular-nums} /* The logo is the card's largest element and carries the company's own colour, so state lives on the border and the badge only. The light backing is for the few marks that arrive with a transparent background; the full-bleed SVGs cover it entirely and never see it. */ .logo{ display:block;width:100%;aspect-ratio:1;object-fit:contain; background:transparent;border-radius:4px;padding:10px; } /* The two repairs for a mark measured too dark to read on this background. Which one a mark gets is decided by tools/logo-prep.py from its saturation, never by eye, because the choice is wrong in a different way each direction. invert — for a mark with no colour of its own. EWY, MSTR and SLV measure luminance 0.000: solid black, which inverts to solid white and is what every dark-mode page does with a monochrome wordmark. Nothing is misrepresented, because there was no colour to misrepresent. lift — for a mark that does have a colour. Inverting SNDK's red would hand the reader another company's logo, which is a worse failure than being dark, so these are only brightened and keep their hue. 2 is enough: the darkest of them measures 0.14 and lands near 0.28, above the floor that put it here. Neither touches the file on disk. The SVGs and PNGs stay exactly as the company published them and the repair is one class, removable in one edit. */ .logo--invert{filter:invert(1)} .logo--lift{filter:brightness(2)} .logo--mono{ display:flex;align-items:center;justify-content:center; background:var(--ink);border:1px solid var(--rule);color:var(--dim); font-size:clamp(16px,2vw,21px);letter-spacing:-.02em; } .card__name{ font-size:15px;letter-spacing:.02em;color:var(--frost); padding-bottom:2px;border-bottom:1px solid var(--rule); } .card--hot .card__name{color:var(--amber)} .spark{width:100%;height:22px;display:block} .spark path{fill:none;stroke:var(--ice);stroke-width:1.2;vector-effect:non-scaling-stroke} .card--hot .spark path{stroke:var(--amber)} .card--ok .spark path{stroke:var(--dimmer)} .card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px} .card__foot b{font-weight:400;color:var(--frost);font-variant-numeric:tabular-nums;font-size:14px} .card__foot span{color:var(--dim);font-variant-numeric:tabular-nums} .hush{ border-left:2px solid var(--ice);background:rgba(var(--ice-rgb),.05); padding:15px 18px;color:var(--dim);font-size:13px;line-height:1.7; } .hush b{color:var(--ice);font-weight:400;font-variant-numeric:tabular-nums} .scroll{overflow-x:auto;margin-top:8px} table{width:100%;border-collapse:collapse;font:400 13px/1 var(--mono)} thead th{ text-align:left;font-weight:400;color:var(--dimmer);font-size:10px; letter-spacing:.15em;text-transform:uppercase;padding:16px 14px 12px 0; border-bottom:1px solid var(--rule);white-space:nowrap; } thead th.num,thead th.age{text-align:right} tbody th{text-align:left;font-weight:400;padding:11px 14px 11px 0;color:var(--frost)} tbody td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-soft);white-space:nowrap} tbody th{border-bottom:1px solid var(--rule-soft)} tbody tr:hover td,tbody tr:hover th{background:var(--panel)} .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)} .num--wide{color:var(--frost)} .thin{color:var(--dimmer);margin-left:5px;cursor:help} .row--flag th{color:var(--amber)} /* signature: how far past its own rhythm a feed has drifted, on a log scale */ .age{text-align:right;font-variant-numeric:tabular-nums;min-width:196px} .bar{display:inline-block;vertical-align:middle;height:7px;width:var(--w);max-width:132px;margin-right:12px;border-radius:1px} /* On-time is the boring state and gets no colour — but it still has to be visible, or a healthy market reads as a broken renderer. */ .bar--ok{background:var(--dimmer);opacity:.45} .bar--over{background:var(--amber)} .bar--cold{background:var(--ice);opacity:.75} .bar--none{background:var(--rule);width:8px} .cyc{display:inline-block;min-width:56px;color:var(--dim)} .cyc--over{color:var(--amber)} .cyc--cold{color:var(--ice)} .typ{color:var(--dim)} .flags{color:var(--dimmer);font-size:10.5px;letter-spacing:.05em} .flag{margin-right:9px;white-space:nowrap} /* a feed printing is the rarest event on this page — mark it */ tr.printed td,tr.printed th{animation:flash 2.4s ease-out both} @keyframes flash{from{background:rgba(var(--ice-rgb),.16)}to{background:transparent}} /* The blind grid. See the long comment above blindGrid() in render.ts for why 0.45 and why .lift gets its own, stronger filter in here — this block is just the numbers that comment argues for. */ .blind{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px 12px; grid-template-columns:repeat(auto-fill,minmax(52px,1fr))} .blind__item{display:flex;flex-direction:column;align-items:center;gap:6px} .blind__logo{ display:block;width:100%;aspect-ratio:1;object-fit:contain;opacity:.45; } .blind .logo--lift{filter:brightness(3)} .blind__mono{ display:flex;align-items:center;justify-content:center; background:var(--panel);border:1px solid var(--rule-soft);color:var(--dim); font-size:9px;letter-spacing:-.02em;border-radius:3px; } /* Not dimmed: the ticker is the fact, the logo above it is only recognition — a reader has to be able to read every one of the 61 even where the mark itself does not land. */ .blind__ticker{font-size:9px;letter-spacing:.03em;color:var(--dimmer); font-variant-numeric:tabular-nums;white-space:nowrap} .limits{margin:18px 0 0;padding:0;list-style:none;max-width:72ch} .limits li{padding:16px 0;border-bottom:1px solid var(--rule);color:var(--dim);font-size:14px;line-height:1.75} .limits b{color:var(--frost);font-weight:400} footer{margin-top:68px;padding:26px 0 60px;border-top:1px solid var(--rule);color:var(--dimmer);font-size:12px;line-height:1.8} .card__name a{color:inherit} .card__name a:hover{color:var(--frost);text-decoration:underline} .blind__item a{display:flex;flex-direction:column;align-items:center;gap:6px;color:inherit} footer p{margin:0 0 10px;max-width:80ch} footer p:last-child{margin-bottom:0} footer code{color:var(--dim)} /* The link row is the one part of the footer meant to be scanned rather than read, so it gets the masthead's spacing vocabulary — not a second one. */ .foot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px} .foot__nav a{color:var(--dim)} .foot__nav a:hover{color:var(--frost)} .navsep--wide{margin:0 6px} @media (max-width:640px){ header{padding-top:38px} .topright{gap:8px 12px;font-size:10.5px} .topright .navsep{display:none} .status a{padding-right:16px;margin-right:16px} .age{min-width:150px} .bar{max-width:64px} } @media (prefers-reduced-motion:no-preference){ .bar{animation:grow .5s cubic-bezier(.2,.7,.3,1) both} @keyframes grow{from{width:0}to{width:var(--w)}} .dot{animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} } @media (prefers-reduced-motion:reduce){ tr.printed td,tr.printed th{animation:none;background:rgba(var(--ice-rgb),.1)} } /* Regole della pagina token. Stavano in un secondo