/* ============================================================= tf-instrument.css Tillväxtfabriken · Instrument — produktionsstilark ------------------------------------------------------------- Detta stilark ÄGER sidan. Ladda det ENSAMT (inte tillsammans med styles.css) på de sidor som byggs om enligt mockupen. Ordning i : tf-instrument.css → sidans utseende consent.css → cookie-dialog (tematiseras i §14) ============================================================= */ /* Självhostade fonter (latin-subset, räcker för svenska). Inter Tight och JetBrains Mono är variabelfonter — en fil täcker viktspannet. Ingen Google Fonts-request på kritiska vägen längre. Sidorna preloadar inter-tight-latin-var.woff2 i . */ @font-face{ font-family:"Inter Tight"; font-style:normal; font-weight:300 700; font-display:swap; src:url("/assets/fonts/inter-tight-latin-var.woff2") format("woff2"); } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); } @font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/playfair-display-latin.woff2") format("woff2"); } @font-face{ font-family:"Playfair Display SC"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/playfair-display-sc-latin.woff2") format("woff2"); } /* ---------- 1. Tokens ------------------------------------- */ :root{ --paper:#F3EFE8; --paper-2:#FAF8F4; --card:#FFFFFF; --sand:#F8F5F0; --ink:#101112; --ink-2:#3d4146; --ink-3:#4a4e54; --ink-4:#7b8087; --ink-5:#9aa0a6; --line:rgba(16,17,18,.11); --hair:rgba(16,17,18,.09); --rule:#101112; --teal:#0ea7a1; --teal-d:#0a5c5f; --teal-l:#30cec1; --coral:#e65a35; --panel:#0f1012; --panel-2:#0a0b0c; --panel-ink:#FAF8F4; --panel-ink-2:#c9ced4; --panel-ink-3:#8b9096; --sans:"Inter Tight",Inter,system-ui,-apple-system,sans-serif; --serif:"Playfair Display",Georgia,serif; --wordmark:"Playfair Display SC",serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --gutter:clamp(20px,4vw,40px); --block:clamp(44px,5.5vw,64px); --max:1280px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} main [id],section[id]{scroll-margin-top:84px;} body{ margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;} ul,ol{list-style:none;} img{display:block;max-width:100%;height:auto;} a{color:var(--teal-d);text-decoration:none;} a:hover{color:var(--coral);} strong{font-weight:500;color:var(--ink);} ::selection{background:rgba(14,167,161,.22);} :focus-visible{outline:2px solid var(--teal);outline-offset:2px;} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} /* ---------- 2. Byggstenar --------------------------------- */ .tfi-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);} .tfi-eyebrow{ display:flex;align-items:center;gap:10px; font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-d); } .tfi-eyebrow::before{content:"";width:24px;height:2px;background:var(--coral);} .tfi-eyebrow--plain{display:block;} .tfi-eyebrow--plain::before{display:none;} .tfi-label{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);} .tfi-mono{font:400 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);} .tfi-h1{font-weight:500;font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.0;letter-spacing:-.035em;text-wrap:pretty;overflow-wrap:break-word;} .tfi-h2{font-weight:500;font-size:clamp(1.55rem,2.8vw,2rem);line-height:1.1;letter-spacing:-.03em;text-wrap:pretty;} .tfi-h3{font-weight:500;font-size:1.15rem;line-height:1.25;letter-spacing:-.02em;} .tfi-lead{font-size:17px;line-height:1.6;color:var(--ink-3);max-width:56ch;text-wrap:pretty;} .tfi-body{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:74ch;text-wrap:pretty;} .tfi-body + .tfi-body{margin-top:.9em;} .tfi-btn{ display:inline-flex;align-items:center;justify-content:center; background:var(--ink);color:var(--paper); border:1px solid var(--ink);border-radius:2px; padding:15px 28px;font:500 15px/1 var(--sans);cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; } .tfi-btn:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff;} .tfi-btn--ghost{background:transparent;color:var(--ink);border-color:rgba(16,17,18,.2);} .tfi-btn--ghost:hover{background:var(--sand);color:var(--teal-d);border-color:var(--teal);} .tfi-btn--mint{background:var(--teal-l);border-color:var(--teal-l);color:#0a1a1a;font-weight:600;} .tfi-btn--mint:hover{background:#fff;border-color:#fff;color:var(--ink);} .tfi-btn--block{width:100%;} .tfi-section{padding-block:var(--block);} .tfi-section--card{background:var(--card);border-top:1px solid var(--line);} .tfi-section--paper{background:var(--paper);border-top:1px solid var(--line);} .tfi-section--panel{background:var(--panel);color:var(--panel-ink);} .tfi-section--panel .tfi-h2,.tfi-section--panel .tfi-h3{color:var(--panel-ink);} .tfi-section--panel .tfi-lead,.tfi-section--panel .tfi-body{color:var(--panel-ink-2);} .tfi-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap;} .tfi-section__head .tfi-h2{max-width:38ch;} /* hårlinjegrid – ersätter kort */ .tfi-grid{display:grid;gap:0;border-top:1px solid var(--rule);} .tfi-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));} .tfi-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));} .tfi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));} .tfi-grid > .tfi-cell{padding:22px 26px 22px 0;border-bottom:1px solid var(--line);} .tfi-grid > .tfi-cell + .tfi-cell{border-left:1px solid var(--line);padding-left:26px;} .tfi-grid--2 > .tfi-cell:nth-child(2n+1){border-left:0;padding-left:0;} .tfi-grid--3 > .tfi-cell:nth-child(3n+1){border-left:0;padding-left:0;} .tfi-grid--4 > .tfi-cell:nth-child(4n+1){border-left:0;padding-left:0;} .tfi-cell__num{font:400 10px/1 var(--mono);letter-spacing:.14em;color:var(--teal-d);} .tfi-cell:nth-child(even) .tfi-cell__num{color:var(--coral);} .tfi-cell h3{margin:8px 0 8px;font-weight:500;font-size:18px;letter-spacing:-.02em;} .tfi-cell h3 a{color:var(--ink);} .tfi-cell h3 a:hover{color:var(--teal-d);} .tfi-cell p{font-size:14.5px;line-height:1.55;color:var(--ink-3);} .tfi-cell p + p{margin-top:.6em;} /* radlista med löpnummer */ .tfi-rows{border-top:1px solid var(--line);} .tfi-rows li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);} .tfi-rows li > span:first-child{min-width:26px;padding-top:4px;font:400 10px/1 var(--mono);color:var(--ink-4);} .tfi-rows li p{font-size:15px;line-height:1.5;color:var(--ink-2);} .tfi-rows--plain li{display:block;} /* nyckeltalstabell (snabbfakta i heron) */ .tfi-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line);} .tfi-facts div{padding:18px 20px 18px 0;border-bottom:1px solid var(--line);} .tfi-facts div + div{border-left:1px solid var(--line);padding-left:20px;} .tfi-facts dt,.tfi-facts .k{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);} .tfi-facts dd,.tfi-facts .v{margin:5px 0 0;font-size:15px;color:var(--ink);} /* markerad ruta */ .tfi-note{ background:var(--sand);border:1px solid var(--line);border-left:3px solid var(--teal); border-radius:3px;padding:20px 22px; } .tfi-note--coral{border-left-color:var(--coral);background:var(--card);} .tfi-note__kicker{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);} .tfi-note--coral .tfi-note__kicker{color:var(--coral);} .tfi-note p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-2);} .tfi-note p strong{color:var(--ink);font-weight:600;} /* ---------- 3. Nav --------------------------------------- */ .tfi-nav{position:sticky;top:0;z-index:900;background:var(--card);border-bottom:1px solid var(--line);} .tfi-nav__inner{ max-width:var(--max);margin:0 auto;padding:14px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:24px; } .tfi-logo{display:flex;align-items:center;gap:11px;color:var(--ink);} .tfi-logo img{width:26px;height:26px;} .tfi-logo span{font:400 19px/1 var(--wordmark);letter-spacing:.01em;} .tfi-nav__links{display:flex;align-items:center;gap:26px;} .tfi-nav__links a{font-size:14px;color:var(--ink-3);padding-bottom:3px;} .tfi-nav__links a:hover{color:var(--ink);} .tfi-nav__links a[aria-current],.tfi-nav__links a.is-active{color:var(--ink);font-weight:500;border-bottom:2px solid var(--teal);} .tfi-nav .tfi-btn{padding:10px 18px;font-size:14px;background:var(--teal-d);border-color:var(--teal-d);color:#fff;font-weight:500;} .tfi-nav .tfi-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);} .tfi-nav__cta-bar{display:none;} .tfi-nav__toggle{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:2px;position:relative;cursor:pointer;} .tfi-nav__toggle::before,.tfi-nav__toggle::after{content:"";position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);} .tfi-nav__toggle::before{top:15px;} .tfi-nav__toggle::after{top:22px;} .tfi-crumbs{background:var(--card);border-bottom:1px solid var(--hair);} .tfi-crumbs > div{max-width:var(--max);margin:0 auto;padding:12px var(--gutter);font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);} .tfi-crumbs a{color:var(--ink-4);} .tfi-crumbs [aria-current]{color:var(--ink);} @media (max-width:900px){ .tfi-nav__inner{gap:12px;} .tfi-logo{min-width:0;flex-shrink:1;} .tfi-logo span{font-size:18px;white-space:nowrap;} .tfi-nav .tfi-nav__cta-bar{display:inline-flex;margin-left:auto;padding:9px 14px;font-size:13.5px;white-space:nowrap;flex:0 0 auto;} .tfi-nav__toggle{display:block;flex:0 0 auto;} .tfi-nav__links{ position:absolute;top:100%;left:12px;right:12px; display:none;flex-direction:column;align-items:stretch;gap:0; background:var(--card);border:1px solid var(--line);border-radius:4px; box-shadow:0 20px 44px rgba(16,17,18,.14);padding:6px; } .tfi-nav__links.is-open{display:flex;} .tfi-nav__links a{padding:13px 12px;border-bottom:1px solid var(--hair);} .tfi-nav__links .tfi-btn{margin-top:6px;} } @media (max-width:480px){ .tfi-nav__inner{padding-inline:12px;gap:10px;} .tfi-logo{gap:8px;} .tfi-logo img{width:22px;height:22px;} .tfi-logo span{font-size:16px;} .tfi-nav .tfi-nav__cta-bar{padding:8px 10px;font-size:12px;} } /* --- 3.1 Dropdown i navet (samma sex länkar som partials/global-nav.html) --- */ .tfi-nav__dd{position:relative;} .tfi-nav__dd > summary{ display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none; font-size:14px;color:var(--ink-3);padding-bottom:3px; } .tfi-nav__dd > summary::-webkit-details-marker{display:none;} .tfi-nav__dd > summary::after{content:"▾";font-size:10px;opacity:.55;} .tfi-nav__dd > summary:hover{color:var(--ink);} .tfi-nav__dd[open] > summary{color:var(--ink);font-weight:500;border-bottom:2px solid var(--teal);} .tfi-nav__dd[aria-current] > summary,.tfi-nav__dd.is-current > summary{color:var(--ink);font-weight:500;border-bottom:2px solid var(--teal);} .tfi-nav__menu{ position:absolute;top:calc(100% + 13px);left:-14px;min-width:320px;z-index:20; background:var(--card);border:1px solid var(--line);border-radius:3px; box-shadow:0 18px 44px rgba(16,17,18,.14);padding:6px; } .tfi-nav__menu a{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:11px 12px;font-size:14px;color:var(--ink-3);border-radius:2px;white-space:nowrap; } .tfi-nav__menu a small{flex:0 0 auto;} .tfi-nav__menu a small{font:400 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-5);} .tfi-nav__menu a:hover{background:var(--sand);color:var(--teal-d);} .tfi-nav__menu a:hover small{color:var(--teal);} .tfi-nav__menu a[aria-current]{color:var(--ink);font-weight:500;background:var(--sand);} @media (max-width:900px){ .tfi-nav__dd{width:100%;} .tfi-nav__dd > summary{padding:13px 12px;border-bottom:1px solid var(--hair);} .tfi-nav__menu{position:static;left:0;box-shadow:none;border:0;border-bottom:1px solid var(--hair);padding:0 0 6px 12px;} } /* --- 16.2b Kollapsad innehållsförteckning på tablet/mobil --- */ .tfi-toc-mobile{display:none;} @media (max-width:1080px){ .tfi-toc-mobile{ display:block;position:sticky;top:66px;z-index:800; background:var(--card);border:1px solid var(--line);border-radius:3px;margin-bottom:24px; } .tfi-toc-mobile > summary{ display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none; padding:14px 16px;font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink); } .tfi-toc-mobile > summary::-webkit-details-marker{display:none;} .tfi-toc-mobile > summary::after{content:"+";font:400 16px/1 var(--mono);color:var(--teal-d);} .tfi-toc-mobile[open] > summary::after{content:"–";} .tfi-toc-mobile[open] > summary{border-bottom:1px solid var(--line);} .tfi-toc-mobile__list{padding:6px 16px 14px;} .tfi-toc-mobile__list a{ display:flex;align-items:baseline;gap:12px;padding:11px 0; font-size:14.5px;color:var(--ink-3);border-bottom:1px solid var(--hair); } .tfi-toc-mobile__list a i{font:400 9.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-5);font-style:normal;} .tfi-toc-mobile__list a.is-active{color:var(--teal-d);font-weight:500;} .tfi-toc-mobile__list a.is-active i{color:var(--teal);} } /* ---------- 4. Hero -------------------------------------- */ .tfi-hero{background:var(--paper);border-bottom:1px solid var(--line);} .tfi-hero__inner{ max-width:var(--max);margin:0 auto;padding:var(--block) var(--gutter); display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,56px);align-items:start; } .tfi-hero--form .tfi-hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} .tfi-hero__copy{display:flex;flex-direction:column;gap:20px;} .tfi-hero__copy .tfi-h1{max-width:22ch;} @media (max-width:960px){ .tfi-hero__inner,.tfi-hero--form .tfi-hero__inner{grid-template-columns:minmax(0,1fr);} } /* ---------- 5. Mätpanel (KPI) ---------------------------- */ .tfi-panel-card{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .tfi-panel-card__head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--line); } .tfi-panel-card__head h3{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);} .tfi-live{display:inline-flex;align-items:center;gap:6px;font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--teal-d);} .tfi-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);} .tfi-kpi{display:grid;grid-template-columns:1fr 1fr;} .tfi-kpi > div{padding:18px;border-bottom:1px solid var(--hair);} .tfi-kpi > div:nth-child(odd){border-right:1px solid var(--hair);} .tfi-kpi__label{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);} .tfi-kpi__value{font-weight:500;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em;color:var(--ink);} .tfi-kpi__delta{font:400 11px/1.4 var(--mono);color:var(--teal-d);} .tfi-kpi__delta--flat{color:var(--ink-4);} .tfi-kpi__delta--warn{color:var(--coral);} .tfi-spark{padding:18px;border-bottom:1px solid var(--hair);} .tfi-spark__bars{display:flex;align-items:flex-end;gap:4px;height:56px;margin-top:12px;} .tfi-spark__bars i{flex:1;display:block;background:rgba(230,90,53,.42);} .tfi-spark__bars i:nth-child(n+6){background:#B8DDD8;} .tfi-spark__bars i:nth-child(n+9){background:var(--teal);} .tfi-spark__bars i:last-child{background:var(--teal-d);} .tfi-flow{display:flex;align-items:center;gap:8px;padding:16px 18px;background:var(--sand);} .tfi-flow span{font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;} .tfi-flow i{flex:1;height:1px;background:rgba(16,17,18,.18);} .tfi-flow span:last-child{color:var(--teal-d);font-weight:500;} .tfi-flow i:last-of-type{background:var(--teal);} /* ---------- 6. Terminal (mörkt instrument) --------------- */ .tfi-term{background:var(--panel);border-radius:4px;overflow:hidden;} .tfi-term__chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);} .tfi-term__chrome i{width:8px;height:8px;border-radius:50%;background:#3a3d42;} .tfi-term__chrome span{margin-left:8px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--panel-ink-3);} .tfi-term__body{padding:18px 16px;display:flex;flex-direction:column;gap:9px;font:400 12.5px/1.5 var(--mono);color:var(--panel-ink-2);} .tfi-term__body .err{color:var(--coral);} .tfi-term__body .ok{color:var(--teal-l);} .tfi-term__body .cursor{color:var(--teal-l);animation:tfiBlink 1.1s steps(2,jump-none) infinite;} @keyframes tfiBlink{0%,49%{opacity:1}50%,100%{opacity:.15}} /* ---------- 7. AI-chat (Gemini-stil, ljus) --------------- */ .tfi-chat{position:relative;max-width:680px;} .tfi-chat::before{ content:"";position:absolute;inset:-26px -28px -28px -26px; background: radial-gradient(58% 58% at 20% 26%,rgba(14,167,161,.22),transparent 70%), radial-gradient(52% 52% at 84% 80%,rgba(230,90,53,.17),transparent 72%); filter:blur(28px);pointer-events:none; } .tfi-chat__shell{ position:relative;border-radius:20px;padding:1.5px; background:linear-gradient(125deg,#0ea7a1,#30cec1 28%,rgba(255,255,255,.75) 50%,#ff9a7a 74%,#e65a35); box-shadow:0 26px 60px rgba(14,167,161,.15),0 8px 24px rgba(16,17,18,.10); } .tfi-chat__inner{background:var(--card);border-radius:19px;overflow:hidden;display:flex;flex-direction:column;} .tfi-chat__head{display:flex;align-items:center;gap:14px;padding:20px 22px 16px;} .tfi-chat__orb{position:relative;width:44px;height:44px;flex:0 0 auto;} .tfi-chat__orb::before{ content:"";position:absolute;inset:-11px; background:radial-gradient(circle,rgba(14,167,161,.38),transparent 70%); filter:blur(9px);animation:tfiBreathe 5.5s ease-in-out infinite; } .tfi-chat__orb img{position:relative;width:44px;height:44px;animation:tfiFloat 9s ease-in-out infinite;} @keyframes tfiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes tfiBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}} .tfi-chat__title{display:flex;flex-direction:column;gap:3px;} .tfi-chat__title b{font-weight:500;font-size:16.5px;letter-spacing:-.015em;color:var(--ink);} .tfi-chat__title em{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-style:normal;} .tfi-chat__intro{padding:0 22px 14px;display:flex;flex-direction:column;gap:12px;} .tfi-chat__intro p{font-size:15px;line-height:1.55;color:var(--ink-3);max-width:52ch;} .tfi-chat__seeds{display:flex;flex-direction:column;gap:8px;} .tfi-seed{ display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--paper-2); font:400 14.5px/1.4 var(--sans);color:var(--ink-2); } .tfi-seed:hover{border-color:var(--teal);color:var(--ink);} .tfi-seed::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 auto;} .tfi-seed:nth-child(2)::before{background:var(--coral);} .tfi-seed:nth-child(3)::before{background:var(--teal-d);} .tfi-seed span{flex:1;} .tfi-seed em{font:400 11px/1 var(--mono);color:var(--ink-5);font-style:normal;} /* logg (fylls av scripts/chat.js) */ .tfi-chat__log{padding:0 22px;display:none;flex-direction:column;gap:12px;max-height:34vh;overflow:auto;} .tfi-chat.has-log .tfi-chat__log{display:flex;padding-bottom:16px;} .tfi-chat.has-log .tfi-chat__intro{display:none;} .tfi-chat__log .msg{font-size:14.5px;line-height:1.55;padding:12px 15px;border-radius:16px;} .tfi-chat__log .msg.user{align-self:flex-end;max-width:80%;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px;} .tfi-chat__log .msg.assistant{max-width:92%;background:var(--sand);border:1px solid var(--hair);color:var(--ink);border-radius:16px 16px 16px 4px;} .tfi-chat__foot{padding:14px 16px;border-top:1px solid var(--hair);background:linear-gradient(180deg,#FFFFFF,#FBF9F6);} .tfi-chat__field{ display:flex;align-items:center;gap:10px;background:var(--card); border:1px solid rgba(14,167,161,.38);border-radius:14px;padding:8px 8px 8px 16px; box-shadow:0 0 0 3px rgba(14,167,161,.09); } .tfi-chat__field textarea{ flex:1;border:0;outline:none;resize:none;background:none; font:400 15px/1.45 var(--sans);color:var(--ink);padding:6px 0;max-height:96px; } .tfi-chat__field textarea::placeholder{color:var(--ink-5);} .tfi-chat__send{ width:40px;height:40px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--coral));color:#fff; display:grid;place-items:center; } .tfi-chat__presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;} .tfi-chat__presets button{ border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer; padding:7px 14px;font:400 13px/1 var(--sans);color:var(--ink-3); } .tfi-chat__presets button:first-child{color:var(--teal-d);border-color:rgba(14,167,161,.38);} .tfi-chat__presets button:hover{border-color:var(--teal);color:var(--teal-d);} .tfi-chat__proof{margin-top:11px;font:400 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);} /* Hero v2: glow bakom chatten + ghost-typewriter i fältet */ .tfi-chat__glow{position:absolute;inset:-26px -28px -28px -26px;background:radial-gradient(58% 58% at 20% 26%,rgba(14,167,161,.20),transparent 70%),radial-gradient(52% 52% at 84% 80%,rgba(230,90,53,.15),transparent 70%);filter:blur(14px);animation:tf-breathe 5.5s cubic-bezier(.2,.7,.2,1) infinite;pointer-events:none;z-index:0} @keyframes tf-breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}} .tfi-chat__field{position:relative} .tfi-chat__ghost{position:absolute;inset:0;display:flex;align-items:center;padding:inherit;font:inherit;color:var(--ink-4);pointer-events:none;white-space:nowrap;overflow:hidden} .tfi-chat__caret{display:inline-block;width:2px;height:1em;background:var(--teal);margin-left:2px;animation:tf-caret 1.1s steps(1,end) infinite} @keyframes tf-caret{0%,49%{opacity:1}50%,100%{opacity:0}} /* Hero v2: fullskärm, vänsterställd layout, kompakt chattkort */ .tfi-hero--v2{display:flex;flex-direction:column;min-height:calc(100vh - 66px);min-height:calc(100svh - 66px)} .tfi-hero__v2-inner{flex:1;padding-block:clamp(28px,4vh,56px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;width:100%} .tfi-hero--v2 .tfi-chat{width:100%;max-width:770px} .tfi-hero--v2 .tfi-chat::before{display:none} .tfi-hero--v2 .tfi-chat__head{padding:18px 22px 2px;gap:11px} .tfi-hero--v2 .tfi-chat__orb{width:28px;height:28px} .tfi-hero--v2 .tfi-chat__orb::before{inset:-8px} .tfi-hero--v2 .tfi-chat__orb img{width:28px;height:28px} .tfi-hero--v2 .tfi-chat__title{flex-direction:row;align-items:center;gap:14px} .tfi-hero--v2 .tfi-chat__title b{font:400 11px/1 var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)} .tfi-hero--v2 .tfi-chat__title em{display:inline-flex;align-items:center;gap:6px;color:var(--teal-d)} .tfi-hero--v2 .tfi-chat__title em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)} .tfi-hero--v2 .tfi-chat__foot{border-top:0;background:none;padding:4px 22px 16px} .tfi-hero--v2 .tfi-chat__field{border:0;box-shadow:none;background:none;padding:10px 0;gap:14px} .tfi-hero--v2 .tfi-chat__field textarea{font-size:19px;line-height:1.4;padding:8px 0} .tfi-hero--v2 .tfi-chat__ghost{font:400 19px/1.4 var(--sans);color:var(--ink)} .tfi-hero--v2 .tfi-chat__send{width:44px;height:44px;border-radius:8px;background:var(--panel)} .tfi-hero--v2 .tfi-chat__presets{margin-top:4px} .tfi-hero--v2 .tfi-chat__presets button{border-radius:6px;padding:9px 14px;color:var(--ink-2)} .tfi-hero--v2 .tfi-chat__presets button:first-child{color:var(--ink-2);border-color:var(--line)} .tfi-hero--v2 .tfi-chat__presets button:hover{border-color:var(--teal);color:var(--teal-d)} .tfi-hero__v2-inner > .tfi-chat__proof{margin-top:0} /* Hero v2: KPI-remsa i fullbredd (ersätter tfi-panel-card på startsidan) */ .tfi-hero__strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--card)} .tfi-hero__strip > div{padding:16px clamp(18px,2.2vw,32px) 18px;display:flex;flex-direction:column;gap:7px;min-width:0} .tfi-hero__strip > div:first-child{padding-left:var(--gutter)} .tfi-hero__strip > div + div{border-left:1px solid var(--line)} .tfi-hero__strip > div > span:first-child{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)} .tfi-hero__strip > div > span:first-child{line-height:1.5} .tfi-hero__strip b{font-weight:500;font-size:clamp(19px,1.7vw,25px);line-height:1.1;letter-spacing:-.03em;color:var(--ink);white-space:nowrap} .tfi-hero__strip em{font:400 11px/1.2 var(--mono);color:var(--teal-d);font-style:normal} .tfi-hero__strip em.down{color:var(--coral)} .tfi-hero__strip em.flat{color:var(--ink-4)} .tfi-hero__strip-bars{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:auto} .tfi-hero__strip-bars i{flex:1;display:block;background:rgba(230,90,53,.42)} .tfi-hero__strip-bars i:nth-child(n+4){background:#F1B7A4} .tfi-hero__strip-bars i:nth-child(n+6){background:#B8DDD8} .tfi-hero__strip-bars i:nth-child(n+8){background:var(--teal)} .tfi-hero__strip-bars i:last-child{background:var(--teal-d)} @media (max-width:960px){ .tfi-hero__strip{grid-template-columns:repeat(2,1fr)} .tfi-hero__strip > div{padding-inline:var(--gutter)} .tfi-hero__strip > div + div{border-left:0} .tfi-hero__strip > div:nth-child(even){border-left:1px solid var(--line)} .tfi-hero__strip > div:nth-child(n+3){border-top:1px solid var(--line)} .tfi-hero__strip-spark{grid-column:1/-1} } /* ---------- 8. Bevisband --------------------------------- */ .tfi-proof{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .tfi-proof__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} .tfi-proof__item{padding:34px var(--gutter);border-right:1px solid var(--hair);} .tfi-proof__item:last-child{border-right:0;} .tfi-proof__value{font-weight:500;font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.035em;color:var(--teal-d);} .tfi-proof__item--cost .tfi-proof__value{color:var(--coral);} .tfi-proof__label{margin-top:4px;font-weight:500;font-size:15px;color:var(--ink);} .tfi-proof__sub{margin-top:6px;font-size:14px;line-height:1.45;color:var(--ink-4);} /* ---------- 9. Citat ------------------------------------- */ .tfi-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} .tfi-quote{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:26px;display:flex;flex-direction:column;gap:14px;} .tfi-quote p{font:400 20px/1.35 var(--serif);color:var(--ink);} .tfi-quote cite{font:400 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-style:normal;} /* ---------- 10. Tabeller (case, tidslinje, jämförelse) --- */ .tfi-table{width:100%;border-collapse:collapse;border-top:1px solid var(--rule);} .tfi-table th{ padding:12px 0;text-align:left;border-bottom:1px solid var(--line); font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4); } .tfi-table td{padding:20px 0;border-bottom:1px solid var(--line);vertical-align:top;} .tfi-table .num{text-align:right;font-weight:500;font-size:26px;letter-spacing:-.025em;color:var(--teal-d);white-space:nowrap;} .tfi-table .num--coral{color:var(--coral);} .tfi-table .meta{text-align:right;font:400 12px/1.4 var(--mono);color:var(--ink-4);white-space:nowrap;} .tfi-table th:not(:first-child),.tfi-table td:not(:first-child){padding-left:16px;text-align:right;} .tfi-table b{display:block;font-weight:500;font-size:17px;color:var(--ink);} .tfi-table small{display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--ink-4);} .tfi-timeline{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .tfi-timeline__head{padding:16px 22px;border-bottom:1px solid var(--line);font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);} .tfi-timeline dl{display:grid;grid-template-columns:auto 1fr;margin:0;} .tfi-timeline dt{ padding:20px 22px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);white-space:nowrap; } .tfi-timeline dd{margin:0;padding:20px 22px;border-bottom:1px solid var(--hair);} .tfi-timeline dd b{display:block;font-weight:500;font-size:16px;color:var(--ink);} .tfi-timeline dd span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink-3);} .tfi-timeline dl > :nth-last-child(-n+2){border-bottom:0;} /* ---------- 11. Formulär -------------------------------- */ .tfi-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .tfi-field{display:flex;flex-direction:column;gap:7px;} .tfi-field--wide{grid-column:1/-1;} .tfi-field label{font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);} .tfi-field input,.tfi-field textarea,.tfi-field select{ background:var(--sand);border:1px solid rgba(16,17,18,.16);border-radius:2px; padding:12px 14px;font:400 15px/1.4 var(--sans);color:var(--ink);min-height:46px; } .tfi-field textarea{min-height:86px;resize:vertical;} .tfi-field input:focus,.tfi-field textarea:focus,.tfi-field select:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,167,161,.12); } .tfi-form__actions{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .tfi-form-card{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .tfi-form-card__head{padding:22px 24px 18px;border-bottom:1px solid var(--line);} .tfi-form-card__head b{display:block;font-weight:500;font-size:21px;letter-spacing:-.02em;color:var(--ink);} .tfi-form-card__head span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-4);} .tfi-form-card__body{padding:22px 24px;} .tfi-form-card__body .tfi-form{grid-template-columns:1fr;} .tfi-form-card__foot{ padding:16px 24px;background:var(--sand);border-top:1px solid var(--line); display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.45;color:var(--ink-3); } .tfi-form-card__foot img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;} @media (max-width:640px){.tfi-form{grid-template-columns:1fr;}} .tfi-form-status{display:none;margin:0;font-size:14.5px;line-height:1.5;flex-basis:100%;} .tfi-form-status.is-error{display:block;color:#a83c1f;} .tfi-form-status.is-success{display:block;color:var(--teal-d);font-weight:500;} .tfi-form.is-submitting button[type=submit]{opacity:.6;cursor:progress;} /* ---------- 12. Kontakt / CTA-band ---------------------- */ .tfi-contact{background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);} .tfi-contact__media{position:relative;min-height:520px;background:#E8E3DA;} .tfi-contact__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tfi-contact__body{padding:var(--block) var(--gutter);display:flex;flex-direction:column;gap:20px;} @media (max-width:900px){ .tfi-contact{grid-template-columns:1fr;} /* Formuläret först på mobil – fotot ska inte vara det man landar på via "Kontakta oss" */ .tfi-contact__media{min-height:240px;order:2;} } /* Mjuk landning via CTA: kort teal-puls runt formuläret när #contact träffas */ @keyframes tfiTargetGlow{ 0%{box-shadow:0 0 0 0 rgba(14,167,161,0);} 30%{box-shadow:0 0 0 10px rgba(14,167,161,.15);} 100%{box-shadow:0 0 0 0 rgba(14,167,161,0);} } :target .tfi-form,:target .tfi-form-card,form:target{border-radius:4px;animation:tfiTargetGlow 1.8s ease .4s both;} .tfi-band{ background:radial-gradient(65% 130% at 0% 100%,rgba(14,167,161,.17),transparent 62%),var(--panel); color:var(--panel-ink); } .tfi-band__inner{ max-width:var(--max);margin:0 auto;padding:var(--block) var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap; } .tfi-band h2{font-weight:500;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.1;letter-spacing:-.03em;max-width:44ch;} .tfi-band p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--panel-ink-2);max-width:56ch;} .tfi-band__cta{display:flex;align-items:center;gap:16px;} .tfi-band__cta .tfi-mono{color:var(--panel-ink-3);} /* ---------- 13. Footer ---------------------------------- */ .site-footer{background:var(--panel);color:var(--panel-ink-2);padding:clamp(36px,5vw,56px) var(--gutter);} .site-footer .container{max-width:var(--max);margin:0 auto;} .footer-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem clamp(1rem,3vw,2rem);} .footer-group{border-top:1px solid rgba(255,255,255,.12);padding-top:.4rem;} .footer-summary{ padding:.85rem 0;font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--panel-ink); } .footer-links li{padding:.2rem 0;} .footer-links a,.footer-presence-text,.footer-contact-text{color:var(--panel-ink-3);font-size:14.5px;line-height:1.5;} .footer-links a:hover{color:var(--teal-l);} .footer-presence-text a{color:var(--panel-ink-2);border-bottom:1px solid rgba(255,255,255,.2);} .tfi-colophon{background:var(--panel);border-top:1px solid rgba(255,255,255,.1);padding:20px var(--gutter);} .tfi-colophon > div{ max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font:400 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--panel-ink-3); } .tfi-colophon em{color:var(--teal-l);font-style:normal;} /* ---------- 14. Cookie-dialog --------------------------- */ body .tf-consent__backdrop{background:rgba(16,17,18,.42)!important;} body .tf-consent__panel{ width:min(720px,100%)!important;background:var(--card)!important; border:1px solid var(--line)!important;border-radius:4px!important; box-shadow:0 30px 70px rgba(16,17,18,.20)!important;color:var(--ink)!important; } body .tf-consent__kicker{font-family:var(--mono)!important;font-size:10px!important;letter-spacing:.16em!important;color:var(--teal-d)!important;} body .tf-consent__title{font-family:var(--sans)!important;font-weight:500!important;letter-spacing:-.03em!important;color:var(--ink)!important;} body .tf-consent__lead{color:var(--ink-3)!important;} body .tf-consent__benefits span{ font-family:var(--mono)!important;font-size:10px!important;letter-spacing:.12em!important; color:var(--ink-4)!important;background:var(--sand)!important;border:1px solid var(--line)!important;border-radius:2px!important; } body .tf-consent__btn{ border-radius:2px!important;border:1px solid rgba(16,17,18,.18)!important;background:var(--card)!important; color:var(--ink)!important;font:400 14px/1 var(--sans)!important;padding:14px 18px!important;box-shadow:none!important; } body .tf-consent__btn:hover{transform:none!important;border-color:var(--teal)!important;color:var(--teal-d)!important;} body .tf-consent__btn--primary{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important;font-weight:500!important;} body .tf-consent__btn--subtle{background:none!important;border-color:transparent!important;color:var(--ink-4)!important;font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.1em!important;text-transform:uppercase;} body .tf-consent__more{color:var(--teal-d)!important;} body .tf-consent__details{border-top:1px solid var(--line)!important;} body .tf-consent__card{background:var(--paper-2)!important;border:1px solid var(--line)!important;border-radius:3px!important;} body .tf-consent__card h3{font-family:var(--sans)!important;font-weight:500!important;color:var(--ink)!important;} body .tf-consent__card p,body .tf-consent__meta li{color:var(--ink-3)!important;} /* ---------- 15. Hygien ---------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms!important;animation-iteration-count:1!important;} } /* ============================================================= 16. DELIGHTERS — rytm och belöningar på långa sidor ============================================================= */ /* --- 16.1 Läsprogress (teal → korall) --------------------- */ .tfi-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:1000; background:linear-gradient(90deg,var(--teal),var(--teal-l) 40%,var(--coral)); transform:scaleX(0);transform-origin:0 50%; transition:transform .12s linear;pointer-events:none; } /* --- 16.2 Layout med sticky innehållsförteckning ---------- */ .tfi-layout{ max-width:var(--max);margin:0 auto;padding-inline:var(--gutter); display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start; } .tfi-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;} .tfi-toc__title{ font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-4);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:8px; } .tfi-toc a{ display:flex;align-items:baseline;gap:10px;padding:9px 0; font:400 13px/1.35 var(--sans);color:var(--ink-4);border-bottom:1px solid var(--hair); transition:color .18s ease; } .tfi-toc a i{font:400 9.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-5);font-style:normal;} .tfi-toc a:hover{color:var(--ink);} .tfi-toc a.is-active{color:var(--teal-d);font-weight:500;} .tfi-toc a.is-active i{color:var(--teal);} .tfi-toc a.is-active::after{content:"";flex:1;height:1px;background:var(--teal);align-self:center;} @media (max-width:1080px){ .tfi-layout{grid-template-columns:minmax(0,1fr);} .tfi-toc{display:none;} } /* --- 16.3 Kapitelmarkör ----------------------------------- */ .tfi-chapter{ display:flex;align-items:center;gap:14px;margin-bottom:16px; font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4); } .tfi-chapter b{color:var(--teal-d);font-weight:400;} .tfi-chapter::after{content:"";flex:1;height:1px;background:var(--line);} /* --- 16.4 Reveal vid scroll ------------------------------- */ .tfi-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .tfi-reveal.is-in{opacity:1;transform:none;} .tfi-reveal:nth-child(2){transition-delay:.06s;} .tfi-reveal:nth-child(3){transition-delay:.12s;} .tfi-reveal:nth-child(4){transition-delay:.18s;} /* hårlinjer som dras in */ .tfi-grid.tfi-reveal{position:relative;} .tfi-grid.tfi-reveal::before{ content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--teal); transition:width 1.1s cubic-bezier(.2,.7,.2,1) .1s; } .tfi-grid.tfi-reveal.is-in::before{width:100%;} /* --- 16.5 Hover-mikrointeraktion i grid ------------------- */ .tfi-cell{position:relative;transition:background .25s ease;} .tfi-cell::after{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--teal); transition:width .35s cubic-bezier(.2,.7,.2,1); } .tfi-cell:hover::after{width:100%;} .tfi-cell:hover{background:linear-gradient(180deg,rgba(14,167,161,.05),transparent 70%);} .tfi-cell:nth-child(even):hover::after{background:var(--coral);} .tfi-cell:nth-child(even):hover{background:linear-gradient(180deg,rgba(230,90,53,.05),transparent 70%);} /* --- 16.6 Räknande siffror -------------------------------- */ [data-count]{font-variant-numeric:tabular-nums;} /* --- 16.7 FAQ / accordion -------------------------------- */ .tfi-faq{border-top:1px solid var(--rule);} .tfi-faq details{border-bottom:1px solid var(--line);} .tfi-faq summary{ display:flex;align-items:baseline;gap:16px;cursor:pointer;list-style:none; padding:20px 0;font-weight:500;font-size:17.5px;letter-spacing:-.015em;color:var(--ink); } .tfi-faq summary::-webkit-details-marker{display:none;} .tfi-faq summary i{ flex:0 0 auto;min-width:26px;font:400 10px/1.6 var(--mono);letter-spacing:.1em;color:var(--teal-d);font-style:normal; } .tfi-faq summary span{flex:1;} .tfi-faq summary::after{ content:"+";flex:0 0 auto;font:400 18px/1 var(--mono);color:var(--ink-4); transition:transform .25s ease,color .25s ease; } .tfi-faq details[open] summary::after{content:"–";color:var(--teal-d);} .tfi-faq details[open] summary{color:var(--teal-d);} .tfi-faq__body{padding:0 42px 22px;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:78ch;} .tfi-faq details:hover summary{color:var(--teal-d);} /* --- 16.8 Budgeträknare ---------------------------------- */ .tfi-calc{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;} .tfi-calc__head{ padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px; font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink); } .tfi-calc__body{padding:24px 22px;display:flex;flex-direction:column;gap:20px;} .tfi-calc__slider{display:flex;flex-direction:column;gap:12px;} .tfi-calc__slider header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;} .tfi-calc__slider header b{font-weight:500;font-size:28px;letter-spacing:-.03em;color:var(--ink);} .tfi-calc input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);cursor:pointer; } .tfi-calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%;border:0;cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--coral));box-shadow:0 2px 10px rgba(14,167,161,.35); } .tfi-calc input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;border:0;cursor:pointer; background:linear-gradient(135deg,var(--teal),var(--coral)); } .tfi-calc__out{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);} .tfi-calc__out div{padding:18px;border-bottom:1px solid var(--hair);} .tfi-calc__out div:nth-child(odd){border-right:1px solid var(--hair);padding-left:0;} .tfi-calc__out span{display:block;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);} .tfi-calc__out b{display:block;margin-top:5px;font-weight:500;font-size:26px;letter-spacing:-.03em;color:var(--teal-d);} .tfi-calc__out div:nth-child(2) b{color:var(--coral);} .tfi-calc__foot{padding:14px 22px;background:var(--sand);border-top:1px solid var(--line);} /* --- 16.9 Marginalcitat (bryter textmassa) --------------- */ .tfi-pull{ border-top:1px solid var(--rule);border-bottom:1px solid var(--line); padding:26px 0;margin:32px 0;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start; } .tfi-pull__mark{font:400 46px/1 var(--serif);color:var(--teal);} .tfi-pull p{font:400 22px/1.4 var(--serif);color:var(--ink);} .tfi-pull cite{ display:block;margin-top:10px;font:400 10.5px/1.5 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-4);font-style:normal; } /* --- 16.10 Sticky CTA-rail ------------------------------- */ .tfi-rail{ position:fixed;left:0;right:0;bottom:0;z-index:950; background:var(--panel);border-top:1px solid rgba(255,255,255,.12); transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1); } .tfi-rail.is-in{transform:none;} .tfi-rail__inner{ max-width:var(--max);margin:0 auto;padding:12px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:20px; } .tfi-rail p{font-size:15px;color:var(--panel-ink);} .tfi-rail p span{color:var(--panel-ink-3);} .tfi-rail .tfi-btn{padding:12px 22px;font-size:14px;} @media (max-width:640px){ .tfi-rail p{font-size:13.5px;} .tfi-rail p span{display:none;} } /* --- 16.11 Inline-statistik i löptext -------------------- */ .tfi-stat{ display:inline-flex;align-items:baseline;gap:6px;padding:2px 8px; background:rgba(14,167,161,.10);border:1px solid rgba(14,167,161,.28);border-radius:2px; font-weight:500;color:var(--teal-d);white-space:nowrap; } .tfi-stat--coral{background:rgba(230,90,53,.10);border-color:rgba(230,90,53,.28);color:#a83c1f;} /* --- 16.12 Sektionsavdelare med ordning ----------------- */ .tfi-divider{ display:flex;align-items:center;gap:16px;padding-block:8px; font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-5); } .tfi-divider::before,.tfi-divider::after{content:"";flex:1;height:1px;background:var(--line);} @media (prefers-reduced-motion:reduce){ .tfi-reveal{opacity:1!important;transform:none!important;} .tfi-grid.tfi-reveal::before{width:100%!important;transition:none;} .tfi-rail{transition:none;} } /* ============================================================= 17. RESPONSIVT — mobilfixar för grids, splitar och tabeller ============================================================= */ /* Tvåspaltssektioner (ersätter inline grid-template-columns) */ .tfi-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,52px);align-items:start;} .tfi-split--45{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);} .tfi-split--38{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);} @media (max-width:960px){ .tfi-split,.tfi-split--45,.tfi-split--38{grid-template-columns:1fr;} } /* Mörk diagnostikgrid (hinder-blocket) */ .tfi-dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);} .tfi-dark-grid > div{background:var(--panel);padding:22px;} .tfi-dark-grid__label{font:400 10px/1 var(--mono);letter-spacing:.14em;color:var(--coral);} .tfi-dark-grid__body{font-size:14.5px;line-height:1.55;color:var(--panel-ink-2);margin-top:8px;} .tfi-dark-grid__body strong{color:var(--panel-ink);} @media (max-width:640px){ .tfi-dark-grid{grid-template-columns:1fr;} } /* Hårlinjegrid: 3/4 kolumner → 2 på tablet, allt → 1 på mobil */ @media (max-width:1020px){ .tfi-grid--3,.tfi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));} .tfi-grid--3 > .tfi-cell,.tfi-grid--4 > .tfi-cell{border-left:0;padding-left:0;} .tfi-grid--3 > .tfi-cell:nth-child(2n),.tfi-grid--4 > .tfi-cell:nth-child(2n){border-left:1px solid var(--line);padding-left:26px;} } @media (max-width:640px){ .tfi-grid--2,.tfi-grid--3,.tfi-grid--4{grid-template-columns:1fr;} .tfi-grid > .tfi-cell{border-left:0!important;padding-left:0!important;padding-right:0;} } /* Tabeller: textvariant + scroll på små skärmar */ .tfi-table--text th:not(:first-child),.tfi-table--text td:not(:first-child){text-align:left;} .tfi-table--text td:not(:first-child){font-size:14.5px;line-height:1.5;color:var(--ink-3);} .tfi-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} .tfi-table-wrap .tfi-table{min-width:560px;} /* Texttabeller staplas som kort på mobil (kräver data-label på td) */ @media (max-width:640px){ .tfi-table-wrap .tfi-table--text{min-width:0;} .tfi-table--text thead{display:none;} .tfi-table--text tr{display:block;padding:16px 0 6px;border-bottom:1px solid var(--line);} .tfi-table--text td{display:block;padding:8px 0 0!important;border-bottom:0;text-align:left!important;} .tfi-table--text td[data-label]::before{ content:attr(data-label);display:block;margin-bottom:3px; font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4); } } /* Säkerhetsnät: dekorativa glows (t.ex. .tfi-chat::before) får inte skapa sidscroll */ html,body{overflow-x:clip;} /* Sidonot i longform */ .tfi-sidenote{margin-top:18px;display:grid;gap:10px;} .tfi-sidenote .tfi-note p{margin-top:4px;} /* CTA-bandets kontaktrad får brytas på smala skärmar */ .tfi-band__cta{flex-wrap:wrap;} .tfi-band__cta .tfi-mono{overflow-wrap:anywhere;} /* ============================================================= 18. MALL C — kunskapsbank-artiklar (redaktionell serif) ============================================================= */ .tfi-article .tfi-h1,.tfi-article .tfi-h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;} .tfi-article .tfi-h1{font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1.08;} .tfi-article .tfi-lead{font-size:18px;} .tfi-article .tfi-body{font-size:16.5px;line-height:1.7;}