/* * Copyright (c) 2026 Notamy Ltd. All rights reserved. * * This file is part of Watchfloor, proprietary software of Notamy Ltd. * Unauthorised copying, modification, distribution, public display, reverse * engineering, or use of this file, in whole or in part, via any medium, is * strictly prohibited. No licence is granted except by written agreement. * See the LICENSE file at the root of this repository. */ /* IL VESTITO CHIARO — UNA SORGENTE (5 set 2026; Simone: «in alto fai come per notamy.app, che si puo' vedere bianco oppure dark»). Le pagine commerciali tengono i loro token SCURI in :root, ognuna con i suoi nomi (coverage --bg/--card/--tx, products --d-bg/--d-card/--d-text, methodology --text/--hair, studio --surface/--ink …): non si toccano. Qui i VALORI del chiaro vivono una volta sola (--wf-*) e ogni nome di pagina vi si aggancia. `:root:not([data-theme="dark"])` batte `:root` per specificita', quindi l'ordine dei fogli non conta e nessuna pagina va riscritta. La palette e' la CARTA di casa (css/design-tokens.css, tema «paper»: crema calda, inchiostro caldo, mai bianco puro ne' nero puro), non un bianco da framework. Il ciano #5ad6ff su carta non si legge (2,1:1): il chiaro usa il ciano profondo #0b6e9e (5,8:1), gia' token di products. Chi vuole il chiaro su una pagina: in testa. nav.js vede il link e monta l'interruttore; senza link niente interruttore — il Floor e il globo restano scuri per mestiere. 5 set 2026, un'ora dopo (Simone, vista la pagina in chiaro): «terrei questo chiaro come default, e farei effetto vetro». Quindi: il CHIARO e' il default e vive in CSS puro — `:root:not([data-theme="dark"])` — cosi' il primo fotogramma e' gia' chiaro senza script; lo scuro e' la scelta (`data-theme="dark"`, ricordata per browser). Il vetro: schede traslucide su un fondo con due aloni tenui, sfocatura solo sopra i 700 px (su un telefono venti pannelli sfocati costano piu' di quanto rendono). Polarita' giusta: velo CHIARO sotto testo SCURO ([[project_translucent_panel_polarity_class]]). */ :root:not([data-theme="dark"]) { color-scheme: light; /* i valori, una volta */ --wf-bg: #f6f1e6; /* carta, oklch(94% .014 80) */ --wf-card: #fcfaf5; /* scheda, oklch(96.5% .012 80) */ --wf-card2: #efe9dc; /* rilievo, hover, barre */ --wf-line: rgba(26,24,21,.13); --wf-line2: rgba(26,24,21,.22); --wf-hair: rgba(26,24,21,.08); --wf-glass: rgba(246,241,230,.72); --wf-tx: #1a1815; /* inchiostro caldo */ --wf-tx2: #3d3934; --wf-mut: #5a554d; /* 6,9:1 su carta */ --wf-dim: #6f6960; /* 4,9:1 su carta: passa AA */ --wf-accent: #0b6e9e; /* ciano profondo */ --wf-accent-strong: #084f72; --wf-accent-soft: rgba(11,110,158,.10); --wf-green: #1f7a4d; --wf-amber: #b8601e; --wf-gold: #8a6a12; --wf-red: #b3261e; --wf-violet: #6b4fd8; /* coverage · enterprise */ --bg: var(--wf-bg); --card: var(--wf-card); --card2: var(--wf-card2); --line: var(--wf-line); --line2: var(--wf-line2); --tx: var(--wf-tx); --mut: var(--wf-mut); --dim: var(--wf-dim); --cyan: var(--wf-accent); --green: var(--wf-green); --amber: var(--wf-amber); --gold: var(--wf-gold); --red: var(--wf-red); --violet: var(--wf-violet); /* products */ --d-bg: var(--wf-bg); --d-card: var(--wf-card); --d-line: var(--wf-line); --d-text: var(--wf-tx); --d-mut: var(--wf-mut); --cyan-deep: var(--wf-accent-strong); /* methodology */ --bar: var(--wf-card2); --text: var(--wf-tx); --mut2: var(--wf-dim); --hair: var(--wf-hair); --hair-2: var(--wf-line); --glass: var(--wf-glass); /* studio (/commission) */ --bg2: var(--wf-bg); --surface: var(--wf-card); --surface2: var(--wf-card2); --ink: var(--wf-tx); --ink2: var(--wf-tx2); --muted: var(--wf-mut); --teal: var(--wf-accent); --teal-strong: var(--wf-accent-strong); --teal-soft: var(--wf-accent-soft); --on-teal: #ffffff; --navy: #2b5c8a; --on-navy: #ffffff; --crit: var(--wf-red); --good: var(--wf-green); } /* I pochi colori scritti a mano che il chiaro rovescerebbe (misurati: 8 in coverage, 5 in products, 3 in enterprise, 2 in methodology, 13 in studio; qui solo quelli che si vedono). */ :root:not([data-theme="dark"]) .top { background: rgba(246,241,230,.92); } :root:not([data-theme="dark"]) .doc, :root:not([data-theme="dark"]) .card li, :root:not([data-theme="dark"]) .armed { border-top-color: var(--wf-hair); } :root:not([data-theme="dark"]) .toastbox { background: var(--wf-card2); color: var(--wf-tx); } :root:not([data-theme="dark"]) .gen:disabled { background: rgba(26,24,21,.06); } :root:not([data-theme="dark"]) .cv-ko { background: rgba(184,96,30,.07); } /* L'interruttore, montato da nav.js dentro il menu': sole quando si e' al buio, luna al chiaro. */ .wf-theme{appearance:none;border:1px solid var(--line,var(--d-line,var(--hair,rgba(255,255,255,.14))));background:transparent; color:inherit;border-radius:99px;width:30px;height:30px;line-height:1;font-size:15px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:.85;flex-shrink:0} .wf-theme:hover{opacity:1} .wf-theme:focus-visible{outline:2px solid var(--cyan,#5ad6ff);outline-offset:2px} /* Colori scritti a mano che il chiaro rovescia, misurati in anteprima il 5 set (ciano #5ad6ff e verde #7ee2a8 su crema non si leggono: 2,1:1 e 1,6:1). Stessi ruoli, valori del chiaro. */ :root:not([data-theme="dark"]) { --acc: var(--wf-accent-strong); } /* products */ :root:not([data-theme="dark"]) .logo .name, :root:not([data-theme="dark"]) .logo, :root:not([data-theme="dark"]) .fm-sample, :root:not([data-theme="dark"]) .fm-order, :root:not([data-theme="dark"]) .fm-exp, :root:not([data-theme="dark"]) .fm-org { color: var(--wf-accent); } :root:not([data-theme="dark"]) .chip.chain, :root:not([data-theme="dark"]) .price.ct { color: var(--wf-green); border-color: rgba(31,122,77,.4); background: rgba(31,122,77,.07); } :root:not([data-theme="dark"]) .hitas, :root:not([data-theme="dark"]) .fm-piano { background: rgba(11,110,158,.04); border-color: var(--wf-line); } :root:not([data-theme="dark"]) .fm-pill.on { background: rgba(31,122,77,.28); } :root:not([data-theme="dark"]) .fm-pill.on i { background: var(--wf-green); } :root:not([data-theme="dark"]) .fm-tlab { color: var(--wf-dim); } :root:not([data-theme="dark"]) .fm-tlab.on { color: var(--wf-green); } :root:not([data-theme="dark"]) .fm-selbar { background: var(--wf-card); border-color: var(--wf-line); border-top-color: var(--wf-accent); } :root:not([data-theme="dark"]) .toastbox { border-color: var(--wf-accent); } /* coverage */ :root:not([data-theme="dark"]) .tag.ct { border-color: rgba(31,122,77,.4); } :root:not([data-theme="dark"]) .sw.on { background: rgba(31,122,77,.25); } :root:not([data-theme="dark"]) .price { background: linear-gradient(180deg, rgba(11,110,158,.07), transparent); border-color: rgba(11,110,158,.35); } :root:not([data-theme="dark"]) .ico { background: var(--wf-card2); color: var(--wf-tx); } :root:not([data-theme="dark"]) .br-haz { border-color: rgba(11,110,158,.3); } /* studio (/commission) */ :root:not([data-theme="dark"]) .hero .specimen { border-bottom-color: rgba(11,110,158,.35); } :root:not([data-theme="dark"]) .pprice { color: var(--wf-accent-strong); } /* pricing */ :root:not([data-theme="dark"]) .card--price { border-color: rgba(11,110,158,.34); box-shadow: 0 0 0 1px rgba(11,110,158,.10), 0 24px 60px -30px rgba(11,110,158,.35); } :root:not([data-theme="dark"]) .chk { background: rgba(11,110,158,.14); } :root:not([data-theme="dark"]) .lede { color: var(--wf-mut); } :root:not([data-theme="dark"]) .b-t, :root:not([data-theme="dark"]) td.pro { color: var(--wf-tx); } :root:not([data-theme="dark"]) .foot { color: var(--wf-dim); } /* IL VETRO (5 set 2026). Un fondo con qualcosa da sfocare, e i pannelli che lo lasciano trasparire. Selettori larghi: ogni pagina ha i suoi nomi per «scheda», e uno che non esiste su una pagina non costa nulla. */ :root:not([data-theme="dark"]) body{ background-color:var(--wf-bg); background-image:radial-gradient(900px 520px at 8% -6%, rgba(11,110,158,.11), transparent 62%), radial-gradient(760px 460px at 96% 4%, rgba(184,96,30,.09), transparent 60%), radial-gradient(600px 400px at 50% 110%, rgba(31,122,77,.06), transparent 60%); background-attachment:fixed; } :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .row, :root:not([data-theme="dark"]) .cv-tot, :root:not([data-theme="dark"]) .cv-pallet, :root:not([data-theme="dark"]) .br-ev, :root:not([data-theme="dark"]) .fm-selbar, :root:not([data-theme="dark"]) .fm-piano, :root:not([data-theme="dark"]) .hitas, :root:not([data-theme="dark"]) .panel, :root:not([data-theme="dark"]) .pcard, :root:not([data-theme="dark"]) .tier, :root:not([data-theme="dark"]) .rail, :root:not([data-theme="dark"]) .chosen, :root:not([data-theme="dark"]) .job, :root:not([data-theme="dark"]) .stmt, :root:not([data-theme="dark"]) .card--price, :root:not([data-theme="dark"]) .acctmenu, :root:not([data-theme="dark"]) .toastbox{ background-color:rgba(255,253,248,.64); border-color:rgba(26,24,21,.11); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 32px -22px rgba(26,24,21,.28); } :root:not([data-theme="dark"]) .top, :root:not([data-theme="dark"]) .topbar, :root:not([data-theme="dark"]) .navrow{ background-color:rgba(246,241,230,.72); } @media (min-width:700px){ :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .row, :root:not([data-theme="dark"]) .cv-tot, :root:not([data-theme="dark"]) .cv-pallet, :root:not([data-theme="dark"]) .br-ev, :root:not([data-theme="dark"]) .fm-selbar, :root:not([data-theme="dark"]) .fm-piano, :root:not([data-theme="dark"]) .hitas, :root:not([data-theme="dark"]) .panel, :root:not([data-theme="dark"]) .pcard, :root:not([data-theme="dark"]) .tier, :root:not([data-theme="dark"]) .rail, :root:not([data-theme="dark"]) .chosen, :root:not([data-theme="dark"]) .job, :root:not([data-theme="dark"]) .stmt, :root:not([data-theme="dark"]) .card--price, :root:not([data-theme="dark"]) .acctmenu, :root:not([data-theme="dark"]) .toastbox, :root:not([data-theme="dark"]) .top, :root:not([data-theme="dark"]) .topbar, :root:not([data-theme="dark"]) .navrow{ -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25); } } /* ══ LA RIGA DELLO SCAFFALE — una grammatica, due rese (7 set 2026) ═══════════════════════ Simone: «una tabella come stile, ovunque per coverage e my products». Le quattro domande sono sempre le stesse e sempre nello stesso ordine — LINE · WHAT ARRIVES · STATE · SWITCH — ma la FORMA cambia con lo spazio, perche' misurato: /products era alto 16.206 px su uno schermo da 390 (4.549 sul desktop) proprio perche' le colonne non collassavano. Larga: colonne allineate, si scorre una colonna invece di leggere ogni riga. Stretta: gli stessi campi impilati, con la parola d'intestazione come micro-etichetta — nessuna tabella che scorre di lato, che e' il modo in cui una tabella muore sul telefono. */ .wf-head, .wf-row{display:grid;grid-template-columns:minmax(180px,1.15fr) minmax(220px,1.6fr) 168px 176px; gap:18px;align-items:start} .wf-head{padding:0 2px 8px;border-bottom:1px solid var(--line,var(--wf-line)); font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-micro,10px);letter-spacing:.16em; text-transform:uppercase;color:var(--dim,var(--wf-dim))} .wf-row{padding:14px 2px;border-top:1px solid var(--hair,var(--wf-hair))} .wf-row:first-of-type{border-top:0} .wf-line b{display:block;font-size:var(--t-text,15px);font-weight:500;line-height:1.35} .wf-cad{display:block;margin-top:3px;font-family:var(--mono,ui-monospace,monospace); font-size:var(--t-micro,10px);letter-spacing:.11em;text-transform:uppercase; color:var(--dim,var(--wf-dim))} .wf-desc{margin:0;font-size:var(--t-base,13px);line-height:1.55;color:var(--mut,var(--wf-mut))} /* Il campione vive QUI perche' e' cio' che arriva, non un attributo accanto. */ .wf-spec{display:inline-block;margin-top:5px;font-size:var(--t-base,13px); color:var(--accent,var(--wf-accent));text-decoration:none} .wf-spec:hover{text-decoration:underline} .wf-note{display:block;margin-top:5px;font-size:var(--t-micro,10px); font-family:var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:var(--dim,var(--wf-dim))} /* Lo STATO e' una parola sola, e la coda dice cosa cambia per chi legge. Le parole vengono da WFDelivery.stateLabel: qui si sceglie solo il colore, e i toni sono cinque, non liberi. */ .wf-state b{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-micro,10px); font-weight:600;letter-spacing:.13em;line-height:1.5} .wf-state span{display:block;margin-top:3px;font-size:var(--t-micro,10px); font-family:var(--mono,ui-monospace,monospace);letter-spacing:.03em;color:var(--dim,var(--wf-dim))} .wf-state[data-tone=live] b{color:var(--accent,var(--wf-accent))} .wf-state[data-tone=armed] b{color:var(--green,var(--wf-green))} .wf-state[data-tone=warn] b{color:var(--amber,var(--wf-amber))} .wf-state[data-tone=order] b{color:var(--gold,var(--wf-gold))} .wf-state[data-tone=off] b{color:var(--dim,var(--wf-dim))} .wf-switch{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right} /* Il prezzo sta dentro SWITCH perche' e' parte della decisione di accendere, non una quinta colonna: prima impilava «included / with Pro» su due righe in 76 px. */ .wf-price{font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-micro,10px); letter-spacing:.06em;color:var(--dim,var(--wf-dim));white-space:nowrap} /* ── STRETTO: LA TABELLA RESTA UNA TABELLA, A TRE COLONNE (8 set 2026) ─────────────────── Simone, dal telefono: «i prodotti non sono ordinati, cioe' come in tabelle o colonne chiare». Misurato PRIMA di toccare, /products servito a 390×844: la pila faceva 281 px per riga, 64 micro-etichette a schermo, 10.282 px di pagina (12,2 schermate) — una scheda per prodotto, non una tabella. Le quattro domande restano quattro e nello stesso ordine: WHAT ARRIVES scende SOTTO il nome, nella colonna LINE (e' la risposta al nome, si legge di seguito); STATE e SWITCH tengono colonna e intestazione. Niente etichette ripetute per riga: le colonne allineate dicono il ruolo da sole, come sul desktop. Nessuno scorrimento laterale: le due colonne fisse sommano 168 px + 16 di spazio, e la prima prende il resto. */ @media (max-width:820px){ .wf-head, .wf-row:not(.wf-stack){grid-template-columns:minmax(0,1fr) 76px 92px;gap:0 8px} .wf-head{padding:0 0 6px} /* WHAT ARRIVES non ha piu' una colonna sua: la sua parola d'intestazione se ne va. */ .wf-head>span:nth-child(2){display:none} .wf-row:not(.wf-stack){padding:12px 0; grid-template-areas:"line state switch" "what state switch" "extra extra extra"} .wf-row:not(.wf-stack)>.wf-cell{min-width:0} .wf-row:not(.wf-stack) .wf-line{grid-area:line} .wf-row:not(.wf-stack) .wf-what{grid-area:what} .wf-row:not(.wf-stack) .wf-what:not(:empty){margin-top:4px} .wf-row:not(.wf-stack) .wf-state{grid-area:state} .wf-row:not(.wf-stack) .wf-switch{grid-area:switch} .wf-row:not(.wf-stack) .wf-extra{grid-area:extra} /* Una riga il cui WHAT ARRIVES e' un paragrafo (le dichiarate: «the engine EXISTS…») in una colonna da 174 px faceva 19 righe e 551 px. Il paragrafo scende sotto la riga, a tutta larghezza: la riga resta nome · stato · comando, il testo si legge a 8 righe. Chi decide e' shelf-row.js (classe wf-long oltre i 220 caratteri), qui solo la forma. */ .wf-row.wf-long:not(.wf-stack){grid-template-areas:"line state switch" "what what what" "extra extra extra"} .wf-row.wf-long:not(.wf-stack) .wf-what{margin-top:6px} /* In 76 px «DELIVERING» a .13em non entra (misurato: si spezzava «DELIVERIN / G»): la spaziatura scende a .06em e la parola va a capo solo agli spazi («NOT BUILT / YET»). */ .wf-row:not(.wf-stack) .wf-state b{letter-spacing:.06em;overflow-wrap:break-word} .wf-row:not(.wf-stack) .wf-state span{overflow-wrap:break-word} /* SWITCH: comando sopra, prezzo sotto, tutto a destra come sul desktop. Le larghezze fisse che products.html da' ai comandi (126/186 px) sono piu' larghe della colonna: qui cadono, altrimenti la cella sfonda la traccia e la pagina scorre di lato. */ .wf-row:not(.wf-stack) .wf-switch{gap:5px} .wf-row:not(.wf-stack) .wf-switch .wf-price{white-space:normal;line-height:1.35} .wf-row:not(.wf-stack) .wf-switch .fm-toggle, .wf-row:not(.wf-stack) .wf-switch .fm-order, .wf-row:not(.wf-stack) .wf-switch .fm-soon, .wf-row:not(.wf-stack) .wf-switch .fm-sample{width:auto;max-width:100%} .wf-row:not(.wf-stack) .wf-switch>a{line-height:1.3;text-align:right} /* Il bersaglio da pollice resta: 44 px, non 21. */ .wf-switch>a,.wf-switch>button,.wf-switch .fm-toggle,.wf-switch [role=switch]{ min-height:44px;display:inline-flex;align-items:center} /* La pila FORZATA (.wf-stack, la riga dentro una stanza stretta) resta una pila, e le intestazioni tornano come etichette: senza, la pila e' un elenco di frasi senza ruoli. */ .wf-row.wf-stack .wf-cell + .wf-cell{margin-top:11px} .wf-row.wf-stack .wf-cell[data-lab]::before{content:attr(data-lab);display:block;margin-bottom:4px; font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--dim,var(--wf-dim));opacity:.75} /* LINE non ha bisogno dell'etichetta: il nome in grande dice gia' che ruolo ha. */ .wf-row.wf-stack .wf-cell.wf-line::before{display:none} .wf-row.wf-stack .wf-line b{font-size:var(--t-lead,17px)} .wf-row.wf-stack .wf-switch{align-items:center;text-align:left;flex-direction:row;flex-wrap:wrap;gap:12px} .wf-row.wf-stack .wf-switch .wf-price{order:2} } /* La barra colore della copertura, diventata un bordo: distingue le famiglie a colpo d'occhio senza chiedere una colonna. Assente sullo scaffale, dove le famiglie hanno gia' un titolo. */ .wf-row[style*="--wf-accent-bar"]{border-left:3px solid var(--wf-accent-bar);padding-left:12px} /* Una riga che NON e' un prodotto non ha uno stato: il trattino lo dice, in grigio, senza fingere un OFF che sarebbe falso. */ .wf-state[data-tone=none] b{color:var(--dim,var(--wf-dim));letter-spacing:0} /* Cio' che appartiene alla riga ma non a una colonna: storico, porta d'organizzazione. */ .wf-extra{grid-column:1/-1;margin-top:10px} .wf-extra .orgline{font-size:var(--t-base,13px)} .wf-extra .orgline a{color:var(--accent,var(--wf-accent));text-decoration:none} @media (max-width:820px){ .wf-extra{margin-top:14px} } /* La resa impilata, forzata: per una riga che vive dentro un contenitore stretto mentre la finestra e' larga. Una media query guarda la FINESTRA e non la stanza — misurato il 7 set: la riga della sismica sforava di 383 px dentro una scheda da 284. */ .wf-row.wf-stack{grid-template-columns:1fr;gap:0;padding:16px 2px 18px} .wf-row.wf-stack .wf-cell + .wf-cell{margin-top:11px} .wf-row.wf-stack .wf-cell[data-lab]::before{content:attr(data-lab);display:block;margin-bottom:4px; font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--dim,var(--wf-dim));opacity:.75} .wf-row.wf-stack .wf-cell.wf-line::before{display:none} .wf-row.wf-stack .wf-switch{align-items:stretch;text-align:left;flex-direction:column} /* Una cella vuota non deve lasciare un'etichetta orfana: «SWITCH» sopra il nulla e' rumore. */ .wf-cell:empty{display:none} .wf-cell:empty::before{display:none} /* La porta accanto a un muro — «Add credit →» — sta nel gesto, non nella prosa. */ .wf-door a{color:var(--accent,var(--wf-accent));text-decoration:none;font-size:var(--t-base,13px)} /* Il link al campione e' l'unico gesto commerciale dentro WHAT ARRIVES: 21 px di altezza misurati sul telefono. Cresce l'area premibile, non il corpo del testo. */ @media (max-width:820px){ .wf-spec{min-height:44px;display:inline-flex;align-items:center} }