/* THE GENESYS — design tokens (GENESIS) */ :root{ /* superfici */ --gns-bg:#0A0C10; --gns-surface:#0C0F14; --gns-card:#0D1016; --gns-elevated:#12151C; /* testo */ --gns-text:#ECEFF4; --gns-body:#B9BEC8; --gns-secondary:#828B99; --gns-secondary-2:#8B92A0; --gns-muted:#7C8494; /* * ⚠️ muted DEVIATES from the handoff's #5E6572, on the same contrast grounds * as the light palette. It carries the 10px uppercase mono labels, which are * normal text for WCAG, so they need 4.5:1 - and #5E6572 gave only 3.34 on * the page ground and 3.11 inside an elevated panel. * * #5E6572 (handoff) bg 3.34 surface 3.27 card 3.25 elevated 3.11 * #7C8494 (here) bg 5.21 surface 5.10 card 5.06 elevated 4.86 * * This narrows the gap to --gns-secondary (#828B99, 5.69). On a near-black * ground there is simply not much legible room below secondary, so the muted * role now leans on typography - 10px, uppercase, wide tracking - to read as * recessed, rather than on colour alone. */ /* brand */ --gns-cyan:#00BFFF; --gns-magenta:#FF6EFF; --gns-on-accent:#06222E; --gns-gradient:linear-gradient(120deg,#00BFFF,#FF6EFF); --gns-seal:conic-gradient(#00BFFF,#FF6EFF,#00BFFF); /* bordi */ --gns-border-faint:rgba(255,255,255,.06); --gns-border:rgba(255,255,255,.08); --gns-border-strong:rgba(255,255,255,.12); --gns-border-heavy:rgba(255,255,255,.14); --gns-border-cyan:rgba(0,191,255,.25); --gns-border-magenta:rgba(255,110,255,.3); /* tinte */ --gns-cyan-tint:rgba(0,191,255,.05); --gns-cyan-tint-2:rgba(0,191,255,.10); --gns-magenta-tint:rgba(255,110,255,.06); /* raggi */ --gns-r-chip:6px; --gns-r-input:11px; --gns-r-card:14px; --gns-r-panel:18px; --gns-r-hero:24px; --gns-r-pill:999px; /* ombre */ --gns-glow-cta:0 12px 36px rgba(0,191,255,.25); --gns-glow-card:0 14px 44px rgba(0,191,255,.14); --gns-shadow-model:drop-shadow(0 40px 46px rgba(0,0,0,.55)); /* tipografia */ --gns-font:"DM Sans",system-ui,sans-serif; --gns-font-mono:"DM Mono",ui-monospace,monospace; /* Surface tints, scrims and shadows. Added for the light theme: these were hard-coded white/black alphas in the screen stylesheets, which do not survive a palette flip. */ --gns-tint-weak:rgba(255,255,255,.02); --gns-tint:rgba(255,255,255,.05); --gns-tint-strong:rgba(255,255,255,.10); --gns-tint-strong-2:rgba(255,255,255,.12); --gns-scrim:rgba(10,12,16,.72); --gns-scrim-grad:linear-gradient(180deg,rgba(10,12,16,.55),rgba(10,12,16,.88)); /* Busy veil - laid over a panel while it recalculates (loading.css). NOT an alias of --gns-scrim: a scrim exists to make light text readable over an arbitrary image and is therefore dark in both themes, whereas this one has to recede into the page it covers. So it takes the ground colour, and inverts with the palette. */ --gns-veil:rgba(10,12,16,.55); --gns-on-scrim:#ECEFF4; /* text over a scrim stays light in BOTH themes */ --gns-on-scrim-border:rgba(255,255,255,.3); /* hairline ON a scrim - see --gns-on-scrim */ --gns-shadow-pop:0 18px 48px rgba(0,0,0,.55); --gns-shadow-model-sm:drop-shadow(0 14px 20px rgba(0,0,0,.6)); /* On dark the brand colours already clear AA (cyan 9.22), so the ink aliases simply resolve to them. */ --gns-cyan-ink:#00BFFF; --gns-magenta-ink:#FF6EFF; --gns-note-error-ink:#FFC9FF; --gns-note-success-ink:#BFEBFF; --gns-label:500 10px/1 var(--gns-font-mono); /* + letter-spacing .12em, uppercase, colore --gns-muted */ /* griglia tecnica */ --gns-grid:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 44px); /* animazioni */ --gns-ease-slice:cubic-bezier(.22,.9,.24,1); /* * Focus ring. NOT an alias of --gns-cyan: a focus indicator is a non-text * element, so WCAG 2.2 (1.4.11) wants 3:1 against what it sits on, and the * brand cyan measures 1.96 against the light ground. On dark it clears * easily (9.22), so here it simply is the brand colour. */ --gns-focus:#00BFFF; /* * Editorial header band (Terms, and anything else that wants the parent's * hero treatment). The parent hard-codes --wp--preset--gradient--sfuma-chiari * here, a fixed pastel that does not invert; on dark the band takes the * elevated surface instead and the title keeps the brand gradient, which * clears AA comfortably against a near-black ground. */ /* Stated as a gradient, not a colour, so the one token is valid both as `background:` (the Terms band) and as `background-image:` (Elementor's ::before overlay, which only accepts an image - a bare colour there is an invalid declaration and gets dropped, leaving the pastel in place). */ --gns-band:linear-gradient(99deg,var(--gns-surface) 0%,var(--gns-surface) 100%); --gns-band-title:linear-gradient(135deg,#00BFFF 0%,#FF6EFF 100%); } @keyframes gns-pulse{0%,100%{opacity:.55}50%{opacity:1}} @keyframes gns-spin{to{transform:rotate(360deg)}} @keyframes gns-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* LIGHT THEME — switch: app Profile → Aspetto (Chiaro/Scuro/Auto); web account menu. Persist per account (web+app in sync). Apply by setting data-theme="light" on . */ [data-theme="light"]{ --gns-bg:#F5F6F8; --gns-surface:#FFFFFF; --gns-card:#FFFFFF; --gns-elevated:#EEF1F5; --gns-text:#0E1116; --gns-body:#3D4654; --gns-secondary:#6B7482; --gns-secondary-2:#6B7482; --gns-muted:#98A0AC; --gns-on-accent:#06222E; /* brand cyan/magenta/gradient unchanged */ --gns-border-faint:rgba(10,15,25,.06); --gns-border:rgba(10,15,25,.08); --gns-border-strong:rgba(10,15,25,.12); --gns-border-heavy:rgba(10,15,25,.16); --gns-cyan-tint:rgba(0,191,255,.06); --gns-cyan-tint-2:rgba(0,191,255,.10); --gns-magenta-tint:rgba(255,110,255,.07); --gns-glow-cta:0 10px 26px rgba(0,191,255,.25); --gns-glow-card:0 10px 30px rgba(15,23,42,.08); --gns-shadow-model:drop-shadow(0 30px 40px rgba(15,23,42,.2)); --gns-grid:repeating-linear-gradient(0deg,rgba(10,15,25,.03) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(10,15,25,.03) 0 1px,transparent 1px 44px); --gns-tint-weak:rgba(10,15,25,.03); --gns-tint:rgba(10,15,25,.05); --gns-tint-strong:rgba(10,15,25,.08); --gns-tint-strong-2:rgba(10,15,25,.10); /* A scrim sits over an arbitrary image, so it stays dark in both themes - and so does the text on it, hence --gns-on-scrim is not inverted. ⚠️ It is DARKER here than in the dark palette. A scrim is a guarantee that light text reads whatever is beneath it, and on a light page more of that page shows through: at the dark palette's .72 alpha, --gns-on-scrim measured only 2.74:1 over this ground. .88 restores it. */ --gns-scrim:rgba(10,12,16,.88); --gns-scrim-grad:linear-gradient(180deg,rgba(10,12,16,.72),rgba(10,12,16,.94)); /* ...and here the veil inverts, where the scrim above deliberately does not: a near-black wash over a white card reads as a fault rather than as a pause. */ --gns-veil:rgba(255,255,255,.66); --gns-on-scrim:#ECEFF4; --gns-on-scrim-border:rgba(255,255,255,.3); /* also not inverted - it is on the scrim */ --gns-shadow-pop:0 18px 48px rgba(15,23,42,.14); --gns-shadow-model-sm:drop-shadow(0 14px 20px rgba(15,23,42,.25)); --gns-note-error-ink:#8A1F8A; --gns-note-success-ink:#0067A3; /* * ⚠️ DEVIATION FROM THE HANDOFF, on contrast grounds. Measured with the WCAG * 2.x formula against this palette's own #F5F6F8 ground, the handoff values * were: secondary 4.37, muted 2.44, cyan 1.96, cyan-ink 3.97 - so muted * labels and every cyan link were unreadable, and secondary sat just under * AA. Darkened to clear 4.5:1: * secondary #5E6674 5.35 muted #626A78 5.04 * cyan-ink #00719C 5.05 magenta-ink #A21CA2 6.02 * The brand cyan and magenta themselves are untouched, so fills, borders, * tints and the gradient still carry the exact handoff colour - the design's * "il gradiente resta l'unico colore" holds. Only TEXT uses the ink. */ --gns-secondary:#5E6674; --gns-secondary-2:#5E6674; --gns-muted:#626A78; --gns-cyan-ink:#00719C; --gns-magenta-ink:#A21CA2; /* The ring follows the ink for the same reason the links do: brand cyan is 1.96 on this ground, #00719C is 5.05, well past the 3:1 that 1.4.11 asks of a focus indicator. */ --gns-focus:#00719C; /* The parent's pastel hero, kept verbatim - it is a light-only brand value and the design wants it here. */ --gns-band:linear-gradient(99.43deg,#D7F5FF 0%,#FFE9FF 100%); /* * ⚠️ The TITLE on that band uses the INK stops, not the brand stops. Brand * cyan over #D7F5FF measures 1.96:1 - the same 1.96 that forced every other * ink token - while #00719C over it measures 5.1. Same gradient gesture, * readable. If the designer wants the exact brand stops here, this is the * line to change, and the heading then fails AA by measurement. */ --gns-band-title:linear-gradient(135deg,#00719C 0%,#A21CA2 100%); } /* * The handoff left an empty `:root[data-theme="auto"]` block here to be filled * with a copy of the light palette. That copy is deliberately NOT made: two * hand-maintained copies of the same 30 tokens drift. * * Instead "auto" never reaches CSS. The stored preference may be auto, but the * inline script in the document head resolves it against * `prefers-color-scheme` and writes the RESOLVED value - light or dark - to * data-theme, re-resolving live when the OS setting changes. So this file only * ever needs the two real palettes above. */