/* SINTEF Intelligence Lab (iLab) - felles stil for alle sider. * * Profil: SINTEF-blå #003c65 er hovedfargen, siden skal oppleves som blå * og hvit. Mellomgrønn #14B978 er iLabs signatur, men har for lav kontrast * som tekst på hvitt (2,5:1). Den brukes derfor bare på flater, markører, * linjer og pulser. Tekst settes i SINTEF-blå, (nesten) svart eller hvitt. * Cyan #64cbe6 er et lite nikk til sintef.energy. * * Motivet er diagonalen fra logosymbolet: ca. 20 grader fra loddrett, * lener som en «/». I CSS er det skewX(-20deg). Brukes sparsomt. * * Kontrasten for alle tekstpar sjekkes av scripts/check-site.py, som leser * tokenene rett fra denne fila. Endrer du en farge, kjør den. * Mørk modus er definert to ganger (auto og manuell); sjekken krever at * blokkene er like. * * Innlogging: betyr at brukeren er innlogget. * Sidene i site/inne/ har klassen fra serveren; på de åpne sidene setter * inline-skriptet i og ilab.js den. Elementer med data-auth="in" * vises bare innlogget, data-auth="out" bare utlogget. */ :root{ --bg:#ffffff; --panel:#f2f6f9; --panel2:#e3ecf3; --line:#cfdbe5; --fg:#10222f; --heading:#003c65; --dim:#4a6072; --link:#003c65; --btn-bg:#003c65; --btn-fg:#ffffff; --hero-bg:#003c65; --hero-panel:#0b4c7a; --hero-fg:#ffffff; --hero-dim:#cfe0ec; --green:#14b978; --cyan:#64cbe6; --focus:#004628; --chart:#003c65; --chart-fill:#cdfae1; --bar:#003c65; --now:#14b978; --now-soft:#cdfae1; --soon:#c89b14; --soon-soft:#e9d7a1; --later:#780050; --later-soft:#ddbfd3; --bad:#be3c37; --bad-soft:#efcecd; --code-bg:#f2f6f9; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --font:Calibri,Carlito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --tilt:-20deg; --wrap:1040px; color-scheme:light; } /* Mørk modus, automatisk. Må være identisk med blokken under. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#001a2c; --panel:#032740; --panel2:#07324f; --line:#1b4463; --fg:#e8f0f6; --heading:#ffffff; --dim:#a6bccc; --link:#8ae8bd; --btn-bg:#14b978; --btn-fg:#001a2c; --hero-bg:#003c65; --hero-panel:#0b4c7a; --hero-fg:#ffffff; --hero-dim:#cfe0ec; --green:#14b978; --cyan:#64cbe6; --focus:#14b978; --chart:#14b978; --chart-fill:#06444b; --bar:#14b978; --now:#14b978; --now-soft:#06444b; --soon:#e9d7a1; --soon-soft:#2e4036; --later:#ddbfd3; --later-soft:#1d1e43; --bad:#efcecd; --bad-soft:#4a1f2a; --code-bg:#011f36; color-scheme:dark; } } /* Mørk modus, valgt manuelt. Må være identisk med blokken over. */ :root[data-theme="dark"]{ --bg:#001a2c; --panel:#032740; --panel2:#07324f; --line:#1b4463; --fg:#e8f0f6; --heading:#ffffff; --dim:#a6bccc; --link:#8ae8bd; --btn-bg:#14b978; --btn-fg:#001a2c; --hero-bg:#003c65; --hero-panel:#0b4c7a; --hero-fg:#ffffff; --hero-dim:#cfe0ec; --green:#14b978; --cyan:#64cbe6; --focus:#14b978; --chart:#14b978; --chart-fill:#06444b; --bar:#14b978; --now:#14b978; --now-soft:#06444b; --soon:#e9d7a1; --soon-soft:#2e4036; --later:#ddbfd3; --later-soft:#1d1e43; --bad:#efcecd; --bad-soft:#4a1f2a; --code-bg:#011f36; color-scheme:dark; } /* ---------- grunnlag ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--fg); font:17px/1.6 var(--font);overflow-wrap:break-word} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} main{display:block;padding-bottom:40px} h1,h2,h3,h4{color:var(--heading);line-height:1.2;font-weight:700} h1{font-size:2.35rem;margin:0 0 14px;letter-spacing:-.01em} h2{font-size:1.55rem;margin:56px 0 12px} h3{font-size:1.14rem;margin:30px 0 8px} h4{font-size:1rem;margin:22px 0 6px} p{margin:0 0 12px} a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px} .dim,.sub{color:var(--dim)} .small{font-size:.9rem} .lead{font-size:1.18rem;max-width:44em} .measure{max-width:44em} [id]{scroll-margin-top:64px} code{font-family:var(--mono);font-size:.86em;background:var(--panel2); padding:.12em .38em;border-radius:4px;overflow-wrap:anywhere} pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px; padding:16px 16px 16px;overflow-x:auto;margin:0;font:13.5px/1.55 var(--mono);color:var(--fg)} pre code{background:none;padding:0;font-size:inherit;overflow-wrap:normal} ul,ol{padding-left:22px} li{margin:5px 0} hr{border:none;border-top:1px solid var(--line);margin:48px 0 0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn-bg);color:var(--btn-fg); padding:8px 14px;border-radius:6px;text-decoration:none} .skip:focus{top:10px} /* Innlogget/utlogget. !important fordi komponentene setter display selv. */ html:not(.innlogget) [data-auth="in"],html.innlogget [data-auth="out"]{display:none!important} noscript p{background:var(--panel);border:1px solid var(--line);padding:12px 16px;border-radius:8px} /* Diagonalmarkør foran seksjonsoverskrifter */ .slash::before{content:"";display:inline-block;width:.34em;height:.9em;margin-right:.55em; background:var(--green);transform:skewX(var(--tilt));vertical-align:-.06em} /* ---------- topplinje ---------- */ .site-head{border-bottom:1px solid var(--line);background:var(--bg)} .head-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;padding-bottom:14px} .brand{display:flex;align-items:center;gap:14px;color:var(--heading);text-decoration:none;min-width:0} .brand:hover .brand-name{text-decoration:underline;text-underline-offset:.2em} /* SINTEF-merket er assets/sintef.svg, uendret. Fila mangler xmlns og kan derfor ikke brukes som eller maske; ilab.js setter den inn inline, så den følger tekstfargen (currentColor) i begge temaer. */ .sintef-mark{display:block;flex:none;width:52px;height:46px;color:var(--heading)} .sintef-mark svg{display:block;width:100%;height:100%} .brand-sep{width:1px;height:38px;background:var(--line);flex:none} .brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0} .brand-name{font-weight:700;font-size:1.12rem} .brand-short{color:var(--dim);font-size:.9rem} .switches{display:flex;gap:8px;flex:none} /* Høyre side av topplinjen: brytere og sintef.energy-logoen. Logoene er gasintef/site/assets/logo-{light,dark}.svg, uendret. Riktig variant vises for manuelt valgt tema og for «auto» (prefers-color-scheme). */ .head-side{display:flex;align-items:center;gap:16px;flex:none;margin-left:auto} .org-logo{display:block;flex:none;padding-left:16px;border-left:1px solid var(--line)} .org-logo img{display:block;height:34px;width:auto} .org-logo .l-dark{display:none} :root[data-theme="dark"] .org-logo .l-light{display:none} :root[data-theme="dark"] .org-logo .l-dark{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .org-logo .l-light{display:none} :root:not([data-theme="light"]) .org-logo .l-dark{display:block} } .sw{background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:7px; padding:6px 11px;font:inherit;font-size:.86rem;cursor:pointer;line-height:1.25;min-height:34px} .sw:hover{border-color:var(--heading)} .sw b{font-weight:700} a.sw{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap} /* Meny til venstre, innlogging til høyre på samme linje */ .nav-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 18px} /* Menyen tar plassen den trenger; blir det for trangt, går innloggingen ned på neste linje, og menyen scroller sidelengs i sin egen stripe (ilab.js toner ut kanten det finnes mer bak). */ .nav-row .page-nav{flex:1 1 auto;min-width:0} .page-nav{position:relative;overflow-x:auto;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%)} .page-nav::-webkit-scrollbar{display:none} .page-nav.more-l{--fade-l:28px} .page-nav.more-r{--fade-r:28px} .auth{display:flex;align-items:center;gap:10px;margin-left:auto;padding-bottom:6px;min-width:0; font-size:.9rem;color:var(--dim)} .auth[hidden]{display:none} .auth-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .auth-who b{color:var(--fg);font-weight:700} .auth .sw{min-height:32px;padding:4px 11px} .auth .sw.go{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;font-weight:700} .page-nav ul{display:flex;gap:2px 4px;list-style:none;margin:0;padding:0 0 6px} .page-nav li{margin:0} .nowrap{white-space:nowrap} .page-nav a{display:block;padding:6px 8px;border-radius:6px;color:var(--fg);text-decoration:none;font-size:.97rem;white-space:nowrap} .page-nav a:focus-visible{outline-offset:-3px} .page-nav a:hover{background:var(--panel)} .page-nav a[aria-current="page"]{font-weight:700;color:var(--heading); box-shadow:inset 0 -3px 0 var(--green);border-radius:6px 6px 0 0} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-fg);isolation:isolate} .hero .wrap{position:relative;padding-top:64px;padding-bottom:60px} .hero h1{color:var(--hero-fg);font-size:2.9rem;max-width:15em;margin-bottom:16px} .hero .lead{color:var(--hero-dim);max-width:33em} .hero a{color:var(--hero-fg)} .hero .eyebrow{color:var(--hero-dim)} .hero-text{max-width:62%} /* Skrå flater til høyre: en bred i lysere blå, en grønn stripe og en tynn cyan linje. Alle med samme helning som logosymbolet. */ .hero::before,.hero::after,.hero .hero-line{content:"";position:absolute;top:-10px;bottom:-10px; transform:skewX(var(--tilt));transform-origin:bottom left;z-index:-1;pointer-events:none} .hero::before{right:-12%;width:46%;background:var(--hero-panel)} .hero::after{right:30%;width:40px;background:var(--green)} .hero .hero-line{right:25%;width:3px;background:var(--cyan)} .page-hero .wrap{padding-top:44px;padding-bottom:40px} .page-hero h1{font-size:2.4rem} .page-hero::before{right:-12%;width:36%} .page-hero::after{right:21%;width:30px} .page-hero .hero-line{right:17%} /* Over 640 px er den grønne stripen og cyanlinjen tegnet inn i illustrasjonen (.hero-art); under blir de korte streker i hjørnet. */ .hero::after,.hero .hero-line{display:none} /* ---------- illustrasjon i hero ---------- */ /* Én enkel inline-SVG per side, aria-hidden og uten tekst. Samme motiv som resten: skrå linjer 20 grader fra loddrett, SINTEF-blå, grønn og cyan fra tokenene. Heroen er blå i begge temaer, så fargene er de samme i lys og mørk modus. Animasjonene stoppes av prefers-reduced-motion nederst; sluttilstanden er da hele tegningen. */ .hero-art{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:min(34%,340px);height:auto; max-height:calc(100% - 28px);display:block;color:var(--hero-fg);fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .page-hero .hero-art{width:min(28%,270px)} .hero-art .s-fg{stroke:var(--hero-fg);stroke-width:2} .hero-art .s-dim{stroke:var(--hero-dim);stroke-width:1.5;opacity:.5} .hero-art .s-cyan{stroke:var(--cyan);stroke-width:2} .hero-art .s-green{stroke:var(--green)} .hero-art .s-thin{stroke-width:1.25;opacity:.75} .hero-art .s-bold{stroke-width:4} .hero-art .s-code{stroke-width:5} .hero-art .s-dash{stroke-dasharray:5 6;opacity:.8} .hero-art .s-grid{stroke:var(--hero-dim);stroke-width:1;opacity:.16} .hero-art .s-wave{stroke-width:3} .hero-art .s-shield{stroke-width:2.5} .hero-art .s-shackle{stroke-width:7} .hero-art .f-green{fill:var(--green)} .hero-art .f-soft{opacity:.85} .hero-art .f-cyan{fill:var(--cyan)} .hero-art .f-fg{fill:var(--hero-fg)} .hero-art .f-dim{fill:var(--hero-dim);opacity:.7} /* Dekker linjene bak noder og bokser */ .hero-art .f-bg{fill:var(--hero-bg)} .hero-art .d1{animation-delay:.15s} .hero-art .d2{animation-delay:.4s} .hero-art .d3{animation-delay:.65s} .hero-art .d4{animation-delay:.9s} /* Tegnes opp én gang (krever pathLength="1") */ .hero-art .ha-draw{stroke-dasharray:1;animation:ha-draw 1.4s cubic-bezier(.3,.7,.4,1) both} @keyframes ha-draw{from{stroke-dashoffset:1}} .hero-art .ha-pulse{transform-box:fill-box;transform-origin:center;animation:ha-pulse 2.8s ease-in-out infinite} @keyframes ha-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.72)}} .hero-art .ha-blink{animation:ha-blink 1.1s steps(1) infinite} @keyframes ha-blink{50%{opacity:0}} .hero-art .ha-rise{animation:ha-rise .9s cubic-bezier(.3,.7,.4,1) both} .hero-art .ha-rise.ha-float{animation:ha-rise .9s cubic-bezier(.3,.7,.4,1) .9s both,ha-float 5s ease-in-out 1.8s infinite} @keyframes ha-rise{from{opacity:0;transform:translateY(12px)}} @keyframes ha-float{50%{transform:translateY(-5px)}} .hero-art .ha-sway{animation:ha-sway 8s ease-in-out infinite} @keyframes ha-sway{50%{transform:translateX(-12px)}} .hero-art .ha-flow{stroke-dasharray:6 12;animation:ha-flow 1.5s linear infinite} @keyframes ha-flow{to{stroke-dashoffset:-18}} /* Et lyst stykke som løper langs pulsen (pathLength="1") */ .hero-art .ha-trace{stroke-dasharray:.28 1;stroke-dashoffset:-.36;animation:ha-trace 3.2s linear infinite} @keyframes ha-trace{from{stroke-dashoffset:.28}to{stroke-dashoffset:-1}} .hero-art .ha-lock{animation:ha-lock 1s cubic-bezier(.3,.7,.4,1) .3s both} @keyframes ha-lock{from{transform:translateY(-10px)}} .eyebrow{display:block;font-size:1rem;font-weight:700;margin-bottom:10px;color:var(--dim)} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .cta{display:inline-block;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none; padding:11px 22px;border-radius:9px;font-weight:700;border:1px solid transparent;line-height:1.3} .cta:hover{filter:brightness(1.08);text-decoration:none} .cta.ghost{background:transparent;color:var(--link);border-color:var(--line)} .cta.ghost:hover{border-color:var(--link)} .hero .cta{background:#ffffff;color:#003c65} .hero .cta.ghost{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.55)} .hero .cta.ghost:hover{border-color:#ffffff} .hero :focus-visible{outline-color:var(--green)} .pills{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none} .pill{border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:4px 13px;font-size:.92rem;margin:0} .hero-status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.95rem; color:var(--hero-dim);text-decoration:none} .hero-status:hover{color:var(--hero-fg)} /* Én rolig linje under knappene på den åpne forsiden */ .hero-note{position:relative;margin:26px 0 0;padding-left:20px;color:var(--hero-dim);max-width:33em} .hero-note::before{content:"";position:absolute;left:2px;top:.3em;width:6px;height:1em; background:var(--green);transform:skewX(var(--tilt))} /* ---------- seksjonsnavigasjon (forsiden) ---------- */ .section-nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)} .section-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none} .section-nav ul::-webkit-scrollbar{display:none} .section-nav li{margin:0} .section-nav a{display:block;padding:12px 12px;color:var(--dim);text-decoration:none;font-size:.95rem; white-space:nowrap;border-bottom:3px solid transparent} .section-nav a:hover{color:var(--fg)} .section-nav a.on{color:var(--heading);border-bottom-color:var(--green);font-weight:700} /* ---------- kort og kolonner ---------- */ .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:18px 0 0} /* Fire kort: 4 i bredden, ellers 2 x 2, aldri 3 + 1 */ .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.grid.four{grid-template-columns:1fr}} .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 0} .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;overflow:hidden} .card h3{margin-top:0} .card p:last-child{margin-bottom:0} /* Liten diagonal i hjørnet: samme motiv som hero, i miniatyr */ .card.tick::after{content:"";position:absolute;top:-6px;right:22px;width:7px;height:34px; background:var(--green);transform:skewX(var(--tilt))} a.card{display:block;color:inherit;text-decoration:none} a.card:hover{border-color:var(--heading)} a.card:hover h3{text-decoration:underline;text-underline-offset:.2em} .card .more{display:inline-block;margin-top:10px;color:var(--link);font-weight:700} .links{display:flex;flex-wrap:wrap;gap:6px 24px;margin:14px 0 0;padding:0;list-style:none} .links li{margin:0} .links a{font-weight:700} .card > .badge:first-child{margin-bottom:10px} .col{display:flex;flex-direction:column} .col .grow{flex:1} .col h2{margin-top:0;font-size:1.35rem} .step{display:block;font-weight:700;color:var(--dim);margin-bottom:6px} .feats{margin:14px 0 0;padding:0;list-style:none} .feats li{padding-left:22px;position:relative;margin:7px 0} .feats li::before{content:"";position:absolute;left:3px;top:.42em;width:6px;height:.85em; background:var(--green);transform:skewX(var(--tilt))} .note{background:var(--panel);border-left:4px solid var(--green);border-radius:0 10px 10px 0; padding:14px 18px;margin:18px 0} .note.warn{border-left-color:var(--soon)} .note b:first-child{color:var(--heading)} .aside{color:var(--dim);border-left:2px solid var(--line);padding-left:14px;margin:22px 0} /* ---------- merkelapper (i drift / snart / planlagt / på sikt) ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700; padding:2px 9px 2px 8px;border-radius:12px;background:var(--panel2);color:var(--fg); line-height:1.5;white-space:nowrap;vertical-align:.08em;font-family:var(--font)} .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim)} .badge.now{background:var(--now-soft)} .badge.now::before{background:var(--now)} .badge.soon{background:var(--soon-soft)} .badge.soon::before{background:var(--soon)} .badge.later{background:var(--later-soft)} .badge.later::before{background:var(--later)} .badge.bad{background:var(--bad-soft)} .badge.bad::before{background:var(--bad)} /* ---------- tabeller ---------- */ .table-wrap{overflow-x:auto;margin:14px 0} table{width:100%;border-collapse:collapse;font-size:.97rem} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} th{color:var(--dim);font-weight:700;font-size:.9rem} td code{white-space:nowrap} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} /* ---------- kodeblokker og kopier-knapp ---------- */ .block{position:relative;margin:12px 0} .block pre{padding-right:84px} .copy{position:absolute;top:8px;right:8px;background:var(--bg);color:var(--fg); border:1px solid var(--line);border-radius:6px;padding:4px 11px;font:inherit;font-size:.82rem;cursor:pointer;min-height:30px} .copy:hover{border-color:var(--heading)} .copy.done{border-color:var(--green);box-shadow:inset 0 -3px 0 var(--green)} /* ---------- faner ---------- */ .tabs{display:flex;gap:2px;flex-wrap:wrap;margin:18px 0 0;border-bottom:1px solid var(--line)} .tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--dim); padding:9px 12px;cursor:pointer;font:inherit;font-size:.97rem;margin-bottom:-1px} .tab:hover{color:var(--fg)} .tab[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--green);font-weight:700} .panel{padding-top:6px} .panel[hidden]{display:none} .panel h3{margin-top:18px} /* ---------- live-status ---------- */ .statwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:16px 0 0} .livehead{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-bottom:14px} .livehead .state{display:flex;align-items:center;gap:9px;font-weight:700} .pulse{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--now);flex:none; animation:pulse 2s ease-in-out infinite} .pulse.off{background:var(--soon);animation:none} .pulse.none{background:var(--dim);animation:none} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}} .stale .livebig,.stale .stats,.stale .gpubox,.stale .table-wrap,.stale .sparks{opacity:.45;filter:grayscale(1)} .livebig{display:flex;gap:14px 30px;flex-wrap:wrap;align-items:baseline;margin:0} .livebig div{display:flex;flex-direction:column} .livebig b{font-size:2rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--heading)} .livebig span{color:var(--dim);font-size:.9rem} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin:14px 0 0} .stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px} .stat b{display:block;font-size:1.4rem;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--heading)} .stat span{color:var(--dim);font-size:.9rem;display:block} .gpubox{margin-top:18px} .meter{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;margin:5px 0 3px;border:1px solid var(--line)} .meter i{display:block;height:100%;background:var(--bar);transition:width .4s} .meter-row{display:flex;justify-content:space-between;gap:10px;color:var(--dim);font-size:.9rem;flex-wrap:wrap} .sparks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} .spark{width:100%;height:64px;display:block;margin-top:4px} .spark-axis{display:flex;justify-content:space-between;color:var(--dim);font-size:.8rem} .statusmsg{color:var(--dim);margin:0} .mini{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline} .mini div{display:flex;flex-direction:column} .mini b{font-size:1.5rem;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.15} .mini span{color:var(--dim);font-size:.88rem} /* ---------- arkitekturskisse ---------- */ .arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;margin-top:18px} .arch svg{width:100%;max-width:470px;height:auto;display:block;margin:0 auto} .arch .box{fill:var(--panel);stroke:var(--line);stroke-width:1.5} .arch .box-strong{fill:var(--panel2);stroke:var(--heading);stroke-width:1.5} .arch .zone{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:6 5} .arch .tunnel{stroke:var(--green);stroke-width:5;fill:none} .arch .wire{stroke:var(--dim);stroke-width:1.5;fill:none} .arch .wire-dash{stroke:var(--dim);stroke-width:1.5;fill:none;stroke-dasharray:4 4} .arch .t{fill:var(--fg);font:600 13px var(--font)} .arch .t-dim{fill:var(--dim);font:12px var(--font)} .arch .t-head{fill:var(--heading);font:700 14px var(--font)} .arch .t-green{fill:var(--heading);font:700 12px var(--font)} .arch .arrow{fill:var(--dim)} .arch .slashmark{fill:var(--green)} /* ---------- bunntekst ---------- */ .site-foot{border-top:1px solid var(--line);margin-top:60px;padding:30px 0 50px;color:var(--dim);font-size:.94rem} .foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px} .site-foot h2{font-size:1rem;margin:0 0 8px;color:var(--heading)} .site-foot ul{list-style:none;padding:0;margin:0} .site-foot li{margin:4px 0} .site-foot a{color:var(--link)} .site-foot .fine{margin-top:22px;font-size:.88rem} /* ---------- smale skjermer ---------- */ @media (max-width:860px){ /* Høy hero på smal skjerm: diagonalene blir korte streker i hjørnet oppe til høyre i stedet for å gå over hele høyden. */ .hero-text{max-width:100%} .hero::before{display:none} .hero::after,.hero .hero-line{top:-10px;bottom:auto;height:140px} .hero::after{right:44px;width:30px} .hero .hero-line{right:30px} /* Illustrasjonen flyter oppe til høyre, teksten brytes rundt den */ .hero-art,.page-hero .hero-art{position:static;transform:none;float:right;width:150px;margin:-8px 0 10px 18px} .arch{grid-template-columns:1fr} } /* Svært smale vinduer (sidepaneler, små telefoner). Overskriftene skal deles med bindestrek på stavelsesgrense (lang="no"/"en" på ), ikke brytes midt i ordet av overflow-wrap på body. */ h1,h2,h3{overflow-wrap:normal} @media (max-width:640px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}} @media (max-width:640px){ body{font-size:16px} .wrap{padding:0 16px} .hero .wrap{padding-top:40px;padding-bottom:40px} .hero-art,.page-hero .hero-art{display:none} .hero::after,.hero .hero-line{display:block} .hero::after{right:34px;width:24px;height:120px} .hero .hero-line{right:22px;height:120px} .hero .eyebrow,.hero h1{margin-right:48px} .sw-long{display:none} .sw{padding:6px 9px} .page-nav a{padding:5px 8px} .hero h1{font-size:2rem} .page-hero h1{font-size:1.8rem} h2{font-size:1.35rem;margin-top:44px} .lead{font-size:1.06rem} .two{grid-template-columns:1fr} .sparks{grid-template-columns:1fr} .head-row{flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:10px} .brand{gap:9px} .sintef-mark{width:38px;height:34px} .brand-sep{height:28px} .brand-name{font-size:.98rem} .switches{gap:6px} .head-side{gap:10px} .org-logo{padding-left:10px} .org-logo img{height:22px} /* Innlogget: «Innlogget som» og «Logg ut» får egen rad under menyen. Utlogget står «Logg inn» på linje med menyen, som da er kortere. */ html.innlogget .auth{flex-basis:100%;margin-left:0;justify-content:space-between; border-top:1px solid var(--line);padding:8px 0 10px} /* E-posten på egen linje under «Innlogget som», så den ikke kappes */ .auth-who{white-space:normal;line-height:1.3} .auth-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card{padding:18px} .statwrap{padding:16px} .livebig b{font-size:1.6rem} .foot-grid{grid-template-columns:1fr} th,td{padding:8px 8px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } @media print{ .site-head .switches,.section-nav,.copy,.hero::before,.hero::after,.hero .hero-line,.hero-art{display:none!important} .hero{background:none;color:#000} } /* Etter 640px-blokken, så disse vinner. */ @media (max-width:380px){ .hero h1{font-size:1.65rem} .page-hero h1{font-size:1.55rem} .hero .eyebrow,.hero h1{margin-right:36px} }