/* ═══════════════════════════════════════════════════════════════════════════ SIGNATURMOMENTET Fyra regler som gäller allt i den här filen: 1. TRE RESERVERADE ZONER. Scenen är ett grid med raderna caption / canvas / action. En beat skriver bara i sin egen rad. Bildtext hamnar aldrig i canvas-raden, grafik aldrig i action-raden. Det är så överlappet elimineras — genom layout, inte genom lagerordning. 2. INGEN TEXT ÄR ABSOLUTPOSITIONERAD. Absolut positionering av text var precis hur överlappen uppstod. All text ligger i grid-flödet. 3. INGEN position:fixed. Ingen z-index över 10. Scenen isolerar, så interna värden når aldrig ut i sidan. 4. INGEN transform, filter, perspective, will-change eller contain:paint på någon förälder till scenen. Kontrollerat med getComputedStyle hela vägen till . Allt avstånd är en multipel av 8. Inga 13px, inga 27px. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Scenen i kortet ─────────────────────────────────────────────────────── Fast grundstorlek 860x540 som skalas till kortets innerbredd. Allt inuti designas mot grundstorleken; --fit sätts av JS vid start och resize. aspect-ratio på behållaren gör höjden formstabil oavsett vilken beat som spelar — kortet får aldrig ändra höjd under loopen (CLS 0). */ .sig__stage{ position:relative;flex:1;min-height:0; overflow:hidden; /* ingenting lämnar kortet */ contain:layout paint; isolation:isolate; display:grid;place-items:center; /* KRITISK: scenen är 720px i LAYOUT (transform:scale krymper bara det visuella), så gridspåret blir bredare än kortet. Överskjutande grid- innehåll läggs vänsterställt och klipps åt höger — place-items centrerar objektet i spåret, inte spåret i containern. place-content centrerar spåret, så skalningens mitt sammanfaller med kortets mitt. Utan raden låg scenen 134px höger om mitten och högra nodkolumnen klipptes. */ place-content:center; } .sig__scen{ /* Grundstorleken sätts av JS (BAS) — samma tal måste gälla i CSS-boxen och i fit-räkningen, annars skalas scenen mot en yta den inte har. */ width:var(--sig-bas-w,720px);height:var(--sig-bas-h,340px); transform:scale(var(--fit,1)); transform-origin:center center; display:grid; grid-template-rows:1fr auto; gap:16px; place-items:center; } .sig__canvas{ position:relative;width:100%;height:100%;min-height:0; display:grid; /* stretch, inte center: lagren måste FYLLA cellen, annars får .sig-karta (height:100%) noll höjd och radien kollapsar till några få pixlar. */ grid-template:1fr / 1fr; } .sig__layer{ grid-area:1 / 1; display:grid;place-items:center; width:100%;height:100%;min-height:0; opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--d-slow) var(--ease-solutra), visibility 0s linear var(--d-slow); } .sig__layer.is-active{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity var(--d-slow) var(--ease-solutra), visibility 0s linear 0s; } /* Panelen tar över ytan från navet och bär text. Dess inträde fördröjs en hel utfasning så det utgående lagret är helt borta först — text korsfadar aldrig med text. */ .sig__layer--panel.is-active{ transition:opacity var(--d-slow) var(--ease-solutra) var(--d-slow), visibility 0s linear var(--d-slow); } /* Bildtextraden. Fast höjd så inget hoppar när texten byts. */ .sig__caption{ height:32px;display:flex;align-items:center;justify-content:center; width:100%;text-align:center; font-size:23px;font-weight:700;line-height:1.2; color:#fff;letter-spacing:-.01em; transition:opacity var(--d-quick) var(--ease-solutra); } .sig__caption[data-tom]{opacity:0} /* ── Grafiken ────────────────────────────────────────────────────────────── Nod- och ekerpositioner räknas ut i JS ur vinkel och radie, aldrig för hand. Kartan har fast bildförhållande så cirkeln förblir en cirkel. */ .sig-karta{ position:relative;width:100%;height:100%; transition:opacity var(--d-story) var(--ease-solutra); } .sig-ekrar{position:absolute;inset:0;width:100%;height:100%;overflow:visible} /* Navet. Enda noden som får avvika visuellt, och den avviker på ETT sätt: större. Samma hörnradie, ramtjocklek och bakgrundsalpha som de övriga. Alla storlekar nedan är i grundstorlekens pixlar (scenen är 860x540) och skalas sedan av --fit. Typografin är satt så att den landar över läsbarhetsgolvet EFTER skalningen — se JS:ens mätning. */ .sig-nav{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:196px;height:104px;padding:14px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:4px; background:var(--card);border:1px solid var(--g2);border-radius:16px; transform-origin:center; /* 700 ms, inte --d-story (1100): anslagets 1,5x måste vara UR VÄGEN innan nodkorten anländer, annars ligger navet över dem i en halv sekund. Korten kommer ut ur navet, så en kort överlappning är avsiktlig — en lång är slarv. */ transition:scale 700ms var(--ease-solutra); z-index:4; } /* Namnet bär hela identiteten sedan CRM-etiketten togs bort (den blev redundant när namnet blev "CRM-system"). 24px i stället för 29 — navet ska vara tyngdpunkten, inte ropa. */ .sig-nav-nm{font-size:24px;font-weight:800;color:#fff;line-height:1.15} .sig-nav-ds{font-size:17px;color:var(--muted);line-height:1.3} /* Nodkorten. EXAKT samma bredd, höjd, hörnradie, ramtjocklek och bakgrundsalpha på alla sex. Texten kortas inom kortet — det växer aldrig. */ .sig-nod{ position:absolute;left:0;top:0; width:242px;height:68px; display:flex;align-items:center;gap:10px; padding:10px;border-radius:13px; background:var(--card);border:1px solid var(--line); z-index:3; /* Bara ram och glöd — transform och opacity ägs av inträdesanimationen nedan, och två system på samma egenskap slåss alltid. */ transition:border-color 420ms var(--ease-out-soft), box-shadow 420ms var(--ease-out-soft); } /* ── Nodernas inträde: LÄNGS eken, ut ur navet ───────────────────────────── motion.css:s cardBloom lyfter kort nedifrån. Det är rätt för kort i ett sidflöde, men här läste det som en kortlek som delas ut. Noderna hör ihop med navet de hänger i, så de ska komma UR det: --fx/--fy sätts i JS till 38 % av ekerns riktning och animationen tar dem hem. Specificiteten (.js-enabled .sig-nod.bloom.in) slår motion.css:s .js-enabled .bloom.in — annars hade båda animationerna gällt samma element. */ .js-enabled .sig-nod.bloom.in{ animation:sigNodIn 880ms var(--ease-solutra) both var(--d,0ms); } @keyframes sigNodIn{ 0% {opacity:0;transform:translate3d(var(--fx,0),var(--fy,0),0) scale(.965)} 46% {opacity:1} 100%{opacity:1;transform:none} } /* Noden som arbetar just nu. Glinten är en blixt som är borta innan ögat hunnit koppla den till ett kort; den här ramen ligger kvar under hela uppehållet och lämnas över till nästa nod. Exakt en nod bär den (se körResan i signatur.js). */ .sig-nod.arbetar{ border-color:rgba(122,156,255,.72); box-shadow:0 0 0 1px rgba(122,156,255,.26), 0 10px 30px rgba(16,34,110,.5); } .sig-b{ flex:0 0 auto;width:32px;height:32px;border-radius:9px; display:grid;place-items:center; font-family:'JetBrains Mono',ui-monospace,monospace; /* 17px, inte 14: i laptopskärmen landade 14 px på 10,6 efter skalningen — under sajtens läsbarhetsgolv på 11. 17 ger 11,9 även vid det lägsta fit laptopklämman tillåter (0,70). Uppmätt, inte gissat. */ font-size:17px;font-weight:700;color:#fff;letter-spacing:.04em; background:color-mix(in srgb, var(--c) 26%, transparent); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); } .sig-t{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:3px} .sig-t b{font-size:21px;line-height:1.15;color:#fff;font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sig-t small{font-size:18px;line-height:1.15;color:var(--muted);opacity:.8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sig-p{position:absolute;width:6px;height:6px;border-radius:50%; background:var(--g1);box-shadow:0 0 8px rgba(79,195,255,.8);z-index:2} /* Token och glint ärver z-index 18 respektive 15 från motion.css, satta för bruk utanför en isolerad scen. Här skulle de bryta regeln om att ingenting inuti momentet ligger över 10. */ /* Leadbrickan. Motion.css ger den en solid accentbakgrund — här inne läste det som ett klumpigt block som slogs med nodkorten om uppmärksamheten. I scenen är den i stället en mörk bricka i kortens eget material, med en lysande statuspunkt: ärendet i versal mono överst, status i fetstil under. Texten sätts i grundstorlekens px (motion.css använder rem, som inte följer med skalningen); 18/20 px landar på 11,3/12,5 efter fit — över golvet. */ .sig__stage .token{ /* z-index 2: UNDER nodkorten (3) och navet (4). Det är garantin mot att brickan någonsin täcker text — även mitt i en flygning glider den under korten, aldrig över dem. Vilopunkterna ligger i kartans fria mittremsa (byggStopp i signatur.js), så i vila är den alltid fullt läsbar. */ z-index:2;padding:8px 12px 9px 10px;border-radius:12px; background:rgba(10,17,72,.94); border:1px solid rgba(122,156,255,.5); box-shadow:0 14px 34px rgba(4,8,31,.65); } .sig__stage .token .tk-rad1{ font-size:18px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);display:flex;align-items:center;gap:8px; } .sig__stage .token .tk-rad1::before{ content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%; background:var(--g1,#4fc3ff);box-shadow:0 0 10px rgba(79,195,255,.9); } .sig__stage .token .tk-rad2{font-size:20px;font-weight:700;margin-top:4px;color:#fff;opacity:1} /* Framme i CRM:et: brickan behåller sitt material — bara ljuset slår om till kvittogrönt. Hela bakgrundsbytet i motion.css var för högljutt här. */ .sig__stage .token.klar{ background:rgba(10,17,72,.94);color:#fff; border-color:rgba(98,211,154,.65); } .sig__stage .token.klar .tk-rad1::before{ background:var(--motion-gron,#62d39a);box-shadow:0 0 10px rgba(98,211,154,.9); } .sig__stage .token.klar .tk-rad2{color:var(--motion-gron,#62d39a)} .sig__stage .glint{z-index:7} /* ── Morgonmötespanelen (beat 5) ───────────────────────────────────────── */ .sig-brief{ width:420px;padding:26px; background:var(--card);border:1px solid rgba(92,141,255,.42); border-radius:18px;box-shadow:0 24px 60px rgba(6,12,52,.55); } .sig-brief-h{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--muted); padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line2)} .sig-brief-h > span{display:flex;flex-direction:column;line-height:1.25} .sig-brief-h b{color:#fff;font-size:21px} .sig-brief-h small{color:var(--faint);font-size:17px} .sig-brief-l{list-style:none;display:flex;flex-direction:column;gap:8px} .sig-brief-l li{position:relative;padding-left:20px;font-size:19px;color:var(--text);line-height:1.35} .sig-brief-l li::before{content:"";position:absolute;left:0;top:.44em; width:6px;height:6px;border-radius:50%;background:var(--motion-gron,#62d39a)} .sig-brief-slut{margin-top:16px;padding-top:12px;border-top:1px solid var(--line2); font-size:19px;color:var(--muted)} .sig-brief-slut b{color:var(--motion-gron,#62d39a);font-weight:800} /* Raderna tickar in en i taget. Fördröjningarna räknar från lagrets AKTIVERING, och lagret själv väntar en utfasning (700 ms) innan det börjar tona in — därför startar första raden på 800. Sista raden får 800 ms extra paus: den är poängen och ska landa ensam. */ .js-enabled .sig-brief [data-brief]{ opacity:0;transform:translate3d(0,var(--lift-sm),0); transition:opacity var(--d-base) var(--ease-solutra) var(--d,0ms), transform var(--d-base) var(--ease-solutra) var(--d,0ms); } .js-enabled .sig__layer.is-active .sig-brief [data-brief]{opacity:1;transform:none} .sig-brief-l li:nth-child(1){--d:800ms} .sig-brief-l li:nth-child(2){--d:1200ms} .sig-brief-l li:nth-child(3){--d:1600ms} .sig-brief-slut{--d:2900ms} /* ── Felsökningsläge ─────────────────────────────────────────────────────── Träder ENDAST i kraft med ?debug=motion, som sätter .sig-debug på . HUD-elementet skapas bara då och finns annars inte i DOM:en alls. */ /* Inga outlines ens i debug: ramarna hamnade på skärmavbilder och lästes som en del av designen. HUD:en (siffrorna) räcker för felsökning. */ #sig-hud{ position:fixed;right:12px;top:12px;z-index:9999; font:600 11px/1.5 ui-monospace,SFMono-Regular,monospace; background:rgba(6,12,52,.92);color:#b9d7ff; border:1px solid rgba(130,160,255,.4);border-radius:8px;padding:8px 12px; pointer-events:none;white-space:pre} #sig-hud b{color:#fff} #sig-hud .varn{color:var(--motion-amber,#f5a623)} /* ── Mobil ───────────────────────────────────────────────────────────────── En cirkel med sju kort blir oläsbar under 480px. Noderna staplas i en vertikal kedja och tokenen färdas nedåt genom den i stället. */ @media (max-width: 760px){ /* Scenen FLÖDAR på mobil i stället för att skalas. Den fasta 720x340-ytan med transform:scale gav fit ≈ 0,33: ett 1,5x-skalat nav i ett i övrigt tomt kort, och den ~600 px höga nodkedjan klipptes av 340-höjden. Nu: ingen skalning (JS sätter --fit:1 under 760), scenen tar kortets bredd, höjden kommer från innehållet och kortet växer med den — .osdemo går samtidigt ur absolut läge (se index.html) så .shotbox faktiskt ärver höjden. Det var därför "min-height:0 + overflow" ensamt kollapsade kortet förut: den absoluta osdemon gav shotboxen noll höjd. */ .sig__stage{display:block;overflow:visible;contain:layout;padding:16px 4px 8px} .sig__scen{width:100%;height:auto;transform:none;display:block} .sig__canvas{width:100%;display:grid;grid-template:1fr/1fr} .sig-karta{width:100%;height:auto;aspect-ratio:auto;min-height:0} /* POSITIONERINGEN ÄGS AV läggUtMobil() I JS. CSS sätter bara storlek. Navet sist i kedjan (order) — berättelsen slutar i CRM:et. */ .sig-nod{width:min(280px,100%);height:56px;padding:8px} .sig-nav{position:relative;left:auto;top:auto;translate:none;margin:0 auto; width:min(280px,100%);height:auto;padding:10px;order:99} /* Typografin dimensioneras för fit = 1. Grundstorlekens px är satta för att skalas ned och blir jättelika oskalade. */ .sig-t b{font-size:15px} .sig-t small{font-size:13px} .sig-b{width:26px;height:26px;font-size:11px;border-radius:7px} .sig-nav-ix{font-size:10px} .sig-nav-nm{font-size:20px} .sig-nav-ds{font-size:12px} .sig__caption{font-size:16px;height:auto;min-height:24px;margin-top:10px} .sig-brief{width:min(420px,100%);padding:16px} .sig-brief-h b{font-size:16px} .sig-brief-h small{font-size:12px} .sig-brief-l li{font-size:14px;padding-left:16px} .sig-brief-slut{font-size:14px} .sig__stage .token{padding:6px 9px} .sig__stage .token .tk-rad1{font-size:11px} .sig__stage .token .tk-rad2{font-size:13px;margin-top:2px} } /* ── Statisk instans ─────────────────────────────────────────────────────── Startsidans kort bär en STILL av systemet: alla noder uppkopplade runt navet. Ingenting som rör sig får finnas kvar i den — brickan, svepet, glinten och pulserna är berättelsens verktyg, inte bildens. */ .sig__stage.ar-statisk .token, .sig__stage.ar-statisk .sweep, .sig__stage.ar-statisk .glint, .sig__stage.ar-statisk .puls{display:none} /* Inte ens ett engångsinträde: en still ska stå still redan i första rutan. */ .sig__stage.ar-statisk .sig-nod.bloom, .sig__stage.ar-statisk .sig-nod.bloom.in{animation:none;opacity:1;transform:none} /* ── Reducerad rörelse ───────────────────────────────────────────────────── Ingen tidsaxel alls. Beat 5 visas direkt som en färdigkomponerad bild, med bildtexten från beat 1 och CTA:t från beat 6 synliga samtidigt. Ska se avsiktlig ut, inte som ett avbrott. */ @media (prefers-reduced-motion: reduce){ .sig__stage{min-height:auto;padding:32px 24px 48px} .sig__layer{transition:none} .sig__layer--hub{display:none} /* ...men den statiska instansen ÄR sin slutbild, och dess slutbild är hubben. Reglerna ovan gäller det animerade momentet, där slutsatsen (morgonmötet) väger tyngre än kartan. */ .sig__stage.ar-statisk .sig__layer--hub{display:grid;opacity:1;visibility:visible} .sig__stage.ar-statisk .sig__layer--panel{display:none} .sig__stage.ar-statisk{padding:16px 8px 24px} .sig__layer--panel, .sig__layer--cta{opacity:1;visibility:visible;pointer-events:auto} .js-enabled .sig-brief [data-brief]{opacity:1;transform:none;transition:none} .sig__caption{opacity:1} .token,.sweep,.glint,.puls{display:none} /* sigNodIn har högre specificitet än motion.css:s .bloom.in{animation:none} och hade därför fortsatt röra sig här. Släckt uttryckligen — en specificitetsmiss är ingen ursäkt för att köra rörelse mot uttryckt vilja. */ .js-enabled .sig-nod.bloom, .js-enabled .sig-nod.bloom.in{animation:none;opacity:1;transform:none} } /* ── Utan JS ─────────────────────────────────────────────────────────────── Samma statiska slutläge: panel och CTA synliga, grafiken dold (den kräver beräknade positioner). Ingenting osynligt, ingenting överlappande. */ html:not(.js-enabled) .sig__layer--hub{display:none} html:not(.js-enabled) .sig__layer--panel, html:not(.js-enabled) .sig__layer--cta{opacity:1;visibility:visible;pointer-events:auto}