/* rorelse.css — hover och rörelse i Företagsdata, 2026-10-14. Sami: "hover och att allt rör sig när man ändrar något". Rörelserna själva kommer ur designsystemet (design/byte.*, rakna.js, intrade.*); här står bara hur de används här. Smaken ur animation-skillen: - knappar och kort byter färg, inget lyft, ingen uppskalning (2026-05-25, 2026-10-06) - länkar: understrykningen viker undan och kommer tillbaka (.lnk--vik i varianter.css) - snabbt in, tydlig inbromsning; tider ur tokens.css Med prefers-reduced-motion stänger app.css av alla övergångar. */ /* Rubriken stiger ur sin mask när fliken byts (inträdet vid laddning sköts av intrade). */ .tool-title h1 span.byter{animation:rubrik-upp var(--tid-lugn) var(--kurva-expo)} @keyframes rubrik-upp{from{transform:translateY(105%)}} /* Medan ett nytt urval räknas står talen och raderna kvar, dämpade, och räknar sedan till de nya. Dämpningen väntar --tid-kvick, så att ett snabbt svar inte blinkar. */ #match-title,#tool-preview,#panel-find .result-coverage strong,#panel-find .order-bar strong,#selection-of{ transition:opacity var(--tid-normal) var(--kurva-standard)} .result-area.uppdaterar #match-title,.result-area.uppdaterar #tool-preview,.result-area.uppdaterar .result-coverage strong, .order-bar.uppdaterar strong,.order-bar.uppdaterar #selection-of{opacity:.42;transition-delay:var(--tid-kvick)} /* Stegen: siffran fylls när steget har ett val. */ .steg-nr{transition:background-color var(--tid-normal) var(--kurva-standard),border-color var(--tid-normal) var(--kurva-standard),color var(--tid-normal) var(--kurva-standard)} .steg-val{transition:color var(--tid-normal) var(--kurva-standard)} /* Flikar och vyväxlare: markören (byte.css) glider; knappen själv byter bara färg. */ .tool-tabs[data-byte-vaxel] button[aria-current=page]{border-color:transparent;background:transparent} .tool-tabs[data-byte-vaxel]{--byte-markor:var(--text)} .tool-tabs button{transition:color var(--tid-normal) var(--kurva-standard),background-color var(--tid-normal) var(--kurva-standard)} .tool-tabs button:hover{color:var(--text);background:var(--yta-2)} .view-switch[data-byte-vaxel] button[aria-pressed=true]{background:transparent;border-color:transparent;box-shadow:none} .view-switch[data-byte-vaxel]{--byte-platta:var(--yta);--byte-radie:5px} .view-switch button{position:relative;transition:color var(--tid-normal) var(--kurva-standard)} .view-switch button:hover{color:var(--text)} /* Knappar: färgen sveper in från den sida musen kommer ifrån och ut åt den sida den lämnar (design/glans.*, data-glans på body). Lyften på Hitta företag, hjälpknappen och kontots genvägar är borttagna. */ .site-header .nav-tool.glans-knapp{--glans-fyll:var(--accent-hover)} .site-header .nav-tool.glans-knapp:hover{background-color:var(--accent)} .help-launch.glans-knapp{--glans-fyll:var(--yta-ton-svag)} .help-launch.glans-knapp.help-launch--inline{position:relative;inset:auto} #demo-order .glans-pil{margin-right:-4px} .knapp--spok{transition:background-color var(--tid-normal) var(--kurva-standard),color var(--tid-normal) var(--kurva-standard),box-shadow var(--tid-normal) var(--kurva-standard)} .knapp--spok:hover:not(:disabled){background:var(--yta-2);color:var(--text)} .knapp--primar:disabled{transition:background-color var(--tid-normal) var(--kurva-standard),opacity var(--tid-normal) var(--kurva-standard)} .site-header .nav-tool:hover{transform:none} /* Textlänkar och textknappar: .lnk--vik. Strecket ligger i innehållsrutan, tätt under texten. */ .tool-main .text-button,.order-bar .order-monthly,.result-bottom>a,.purchase-terms-links a{ text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat; background-origin:content-box;background-clip:content-box;background-position:100% 100%;background-size:100% 1px; transition:background-size var(--tid-normal) var(--kurva-standard),color var(--tid-normal) var(--kurva-standard)} .tool-main .text-button:hover:not(:disabled),.order-bar .order-monthly:hover,.result-bottom>a:hover,.purchase-terms-links a:hover{ background-size:0% 1px;text-decoration:none} .tool-main .text-button:disabled{background-size:0% 1px} /* Sidfotens länkar: inget streck i vila, det dras fram från vänster vid hover (.lnk). */ .footer-nav a,.tool-footer a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat; background-position:0 100%;background-size:0% 1px;transition:background-size var(--tid-normal) var(--kurva-standard)} .footer-nav a:hover,.tool-footer a:hover{background-size:100% 1px;text-decoration:none} /* Fält, rader och val: ytan byter färg, inget rör sig. */ .tool-main .falt{transition:border-color var(--tid-normal) var(--kurva-standard),box-shadow var(--tid-normal) var(--kurva-standard)} .tool-main .falt:hover:not(:focus){border-color:var(--yta-ton)} .tool-main .check-line{cursor:pointer;transition:background-color var(--tid-normal) var(--kurva-standard),border-color var(--tid-normal) var(--kurva-standard),box-shadow var(--tid-normal) var(--kurva-standard)} .tool-main .check-line:hover{border-color:var(--yta-ton);background:var(--yta-2)} .tool-main .check-line:has(input:checked):hover{border-color:var(--accent)} .industry-open{transition:border-color var(--tid-normal) var(--kurva-standard),background-color var(--tid-normal) var(--kurva-standard)} .industry-open:hover:not(:disabled){border-color:var(--accent);background:var(--yta-2)} .industry-open span:last-child{transition:transform var(--tid-normal) var(--kurva-standard)} .industry-open:hover:not(:disabled) span:last-child{transform:translate(2px,-2px)} .chosen-places button,.industry-tag{transition:background-color var(--tid-normal) var(--kurva-standard),border-color var(--tid-normal) var(--kurva-standard)} .chosen-places button:hover,.industry-tag:hover{background:var(--yta-ton);border-color:var(--accent)} .place-results button{transition:background-color var(--tid-kvick) var(--kurva-standard)} .tool-table tbody tr,.work-table tbody tr,.sni-row{transition:background-color var(--tid-kvick) var(--kurva-standard)} .tool-table tbody tr:hover{background:var(--yta-2)} .map-frame path{transition:fill var(--tid-normal) var(--kurva-standard),stroke var(--tid-normal) var(--kurva-standard)} .demo-card,.purchase-grid>*{transition:border-color var(--tid-normal) var(--kurva-standard),box-shadow var(--tid-normal) var(--kurva-standard)} .demo-card:hover,.purchase-grid>:hover{border-color:var(--yta-ton);box-shadow:var(--skugga)} /* Sidhuvudets Mer-meny: rutan avtäcks uppifrån som en rörelse (shell.js stänger den speglat). */ .nav-more[open]>div{animation:mer-in var(--tid-lugn) var(--kurva-expo)} .nav-more.stanger>div{animation:mer-ut var(--tid-normal) cubic-bezier(.78,0,.81,0) forwards} @keyframes mer-in{from{clip-path:inset(0 0 100% 0 round 12px);transform:translateY(-6px)}to{clip-path:inset(0 0 0 0 round 12px)}} @keyframes mer-ut{to{clip-path:inset(0 0 100% 0 round 12px);transform:translateY(-6px)}} .nav-more summary span{display:inline-block;transition:transform var(--tid-normal) var(--kurva-standard)} .nav-more[open]:not(.stanger) summary span{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .tool-title h1 span.byter,.nav-more[open]>div,.nav-more.stanger>div{animation:none} } /* Villkorens innehållsförteckning: strecket vid avsnittet du läser glider dit i stället för att hoppa. */ .avtal-index ol[data-byte-vaxel]{--byte-markor:var(--gnista)} .avtal-index ol[data-byte-vaxel] a[aria-current="true"]{border-left-color:transparent} .avtal-index a{transition:color var(--tid-normal) var(--kurva-standard)} /* Mobilens Mer-meny: strecken blir ett X på samma plats, panelen avtäcks under sidhuvudet och länkarna kommer en i taget. Stängningen går samma väg tillbaka med samma kurva, speglad (shell.js). */ @media (max-width:760px){ .site-header .nav-more summary::before,.site-header .nav-more summary::after{transition:transform var(--tid-lugn) var(--kurva-expo)} .site-header .nav-more summary span{transition:opacity var(--tid-normal) var(--kurva-standard)} .site-header .nav-more[open]:not(.stanger) summary::before{transform:translateY(5px) rotate(45deg)} .site-header .nav-more[open]:not(.stanger) summary::after{transform:translateY(-5px) rotate(-45deg)} .site-header .nav-more[open]:not(.stanger) summary span{transform:none;opacity:0} .nav-more[open]>div{animation:mer-in-hel var(--tid-lugn) var(--kurva-expo)} .nav-more.stanger>div{animation:mer-ut-hel var(--tid-normal) cubic-bezier(.78,0,.81,0) forwards} .nav-more[open]:not(.stanger)>div>a{animation:mer-lank var(--tid-lugn) var(--kurva-expo) backwards} .nav-more[open]:not(.stanger)>div>a:nth-child(2){animation-delay:50ms} .nav-more[open]:not(.stanger)>div>a:nth-child(3){animation-delay:100ms} } @keyframes mer-in-hel{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -40px 0)}} @keyframes mer-ut-hel{from{clip-path:inset(0 0 -40px 0)}to{clip-path:inset(0 0 100% 0)}} @keyframes mer-lank{from{transform:translateY(-10px);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -4px 0)}} @media (prefers-reduced-motion:reduce){.nav-more[open]>div>a{animation:none}} /* Stegens pil i mobilens dragspel vrids som de utfällbara (steg.js, urval.css). */ .steg-knapp::after{transition:transform var(--tid-normal) var(--kurva-standard)} /* Rullgardinerna (design/valj.*): knappen ersätter