/* ========================================================================== TENSEC — tillägg. Läggs SIST, efter style.css. Inget i style.css ändras. ========================================================================== */ /* --- 1. Innehållet får inte vara osynligt utan JavaScript ----------------- style.css sätter .reveal och .panel till opacity:0 och site.js lägger till klassen .in. Går skriptet inte igenom står sidan tom. Regeln nedan visar allt så länge saknar klassen "js" — som fixes.js sätter direkt. */ html:not(.js) .reveal, html:not(.js) .panel{ opacity:1; transform:none; transition:none; transition-delay:0s; } /* Skyddsnät: ett block som är högre än fönstret når aldrig observerns tröskel på 16 % och skulle annars stanna osynligt. */ .reveal.seen, .panel.seen{opacity:1;transform:none} /* Intoningen var för långsam för att hinna med normal läshastighet: 0,8 s på avsnitten och upp till 1,02 s fördröjning plus 1,05 s på fjärde panelen, alltså över två sekunder innan den stod klar. Man hann läsa förbi. Tiderna kortas här och rörelsen dämpas. Ordningen mellan panelerna behålls, men avståndet mellan dem krymper från 0,34 s till 0,10 s. Skriptet startar dessutom intoningen innan avsnittet nått fönstret, så att den i praktiken är klar när texten går att läsa. Regeln för prefers-reduced-motion i style.css slår ut allt detta med !important och gäller alltså fortfarande. */ .reveal{transform:translateY(12px); transition:opacity .40s ease-out,transform .40s ease-out} .panel{transform:translateY(16px); transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.7,.3,1)} .panel.p1{transition-delay:0s} .panel.p2{transition-delay:.10s} .panel.p3{transition-delay:.20s} .panel.p4{transition-delay:.30s} /* --- 2. Bilder ------------------------------------------------------------ Alla bilder ligger i img/. Plattorna i korten är fullbleed; sajtens egen .scrim ligger ovanpå och gör texten läsbar. */ .panel.p1 .plate{background-image:url("img/live-fire-card-bomb_900x1500.jpg")} .panel.p2 .plate{background-image:url("img/gripen-card_900x1710.jpg")} .panel.p3 .plate{background-image:url("img/antidrone-card_900x1710.jpg")} .panel.p4 .plate{background-image:url("img/other-systems-card.jpg")} .panel .plate{ background-size:cover; background-position:top center; background-repeat:no-repeat; } /* Startsidans hero: bilden förankrad i underkanten, uttonad uppåt mot sidans egen bakgrund. Texten flyttas upp så målen inte krockar med den. */ .home-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:65%; z-index:1; background:url("img/hero-range-blue_xwide.jpg") bottom center/cover no-repeat; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 18%,#000 34%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.75) 18%,#000 34%); pointer-events:none; } /* Heron ar centrerad i style.css. Med den stora scenbilden hamnar rubriken da mitt i flygplanet och dronaren. Texten ankras darfor mot overkanten i stallet, med ett matt som foljer fonsterhojden men aldrig kryper in under navigeringen pa laga fonster. */ /* Heron tog hela forsta skarmen. Den kortas ner sa att innehallet under syns, och scenbilden ligger pa en bredare platta sa att flygplanet och dronaren hamnar under rubriken trots den lagre hojden. */ .home-hero{height:84svh;min-height:560px} .home-hero{align-items:flex-start} .home-hero .hero-inner{margin-top:clamp(110px,14vh,170px)} /* Laga fonster: 76 % scenhojd trycker upp flygplanet och dronaren i underrubriken. Scenen far mindre hojd, sa malen hamnar under texten. */ @media(min-width:901px) and (max-height:880px){ .home-hero::after{height:60%} .home-hero .hero-inner{margin-top:clamp(112px,14vh,150px)} } @media(max-width:900px){ .home-hero::after{height:60%} .home-hero .hero-inner{margin-top:clamp(104px,14vh,150px)} } /* Band under hero på undersidorna. Full bredd, ingen text över. */ .imgband{ display:block; width:100%; aspect-ratio:1773/487; background-size:cover; background-position:center; background-repeat:no-repeat; } /* .imgband.lf togs bort fran Live Fire Scoring: samma foto anvands i heron pa startsidan. Regeln sparad om bandet ska tillbaka. .imgband.lf{aspect-ratio:1884/835;background-image:url("img/live-fire-band_1884x835.jpg")} */ /* .imgband.vt togs bort fran Video Tracking .imgband.vt{background-image:url("img/tracker-triple-band_1773x487.jpg")} */ /* .imgband.ad togs bort: bilden ligger nu som figur i avsnittet Our approach .imgband.ad{background-image:url("img/antidrone-band_1773x487.jpg")} */ /* .imgband.ct togs bort fran Contact .imgband.ct{aspect-ratio:1800/548;background-image:url("img/contact-band_1800x548.jpg")} */ /* Figurer inne i textkroppen. */ .fig img{display:block;width:100%;height:auto} .fig video{display:block;width:100%;height:auto;background:#0d1322} .fig figcaption{ margin-top:12px; font-size:13px; line-height:1.55; color:var(--body-dark); } /* Bildpar: samma höjd oavsett originalens format. */ /* Bildpar i bredare format än 4:3. */ /* Fjarde panelen bar ett fotografi med mycket detalj. Overtoningen dras darfor upp tidigare an pa de tre andra, sa att rubrik och brodtext far en lugn yta. */ .panel.p4 .scrim{background:linear-gradient(180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 26%, rgba(255,255,255,.72) 46%,rgba(255,255,255,.94) 66%,rgba(255,255,255,.98) 100%)} /* Panelernas brodtext nagot morkare. Textfargen ar densamma i alla fyra, men bakgrunderna ar olika ljusa fotografier, sa den svagaste panelen lag pa 4,1 mot kravet 4,5. Med detta varde klarar samtliga fyra med marginal. */ .panel p{color:#333849} /* Staplad layout. Ingressen behaller sin breda sats eftersom den ar kort. Avsnitten halls pa 712 px, cirka 75 tecken per rad. Allt vansterstallt. */ .doc .inner{max-width:962px} .doc .intro{max-width:none} .doc .row{grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px)} .doc .row .txt h2{margin-bottom:clamp(12px,1.4vw,18px)} .doc .row .txt p{max-width:712px} /* .narrow centrerade sig sjalv i det gamla systemet och nollstalls har */ /* --- STAPLAD SATS PA PRODUKTSIDORNA -------------------------------------- */ /* Rubrik, brodtext och bild ligger under varandra i ett block pa 962 px, centrerat i innehallsytan. Texten ar vansterlast. Ersatter den tidigare tvaspaltssatsen. De gamla figurvarianterna pair, wide, narrow, p16 och p17 hor till det systemet och ar borttagna. */ .doc .inner{max-width:962px} .doc .intro{max-width:none} .doc .row{grid-template-columns:1fr;gap:clamp(20px,2.4vw,30px)} .doc .row h2{margin-bottom:clamp(12px,1.4vw,18px)} .doc .row p{max-width:none} .doc .row .txt{width:100%} .fig{margin:0 auto;width:100%;max-width:none;display:block;float:none} .fig img,.fig video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} /* Tva bilder i samma figur staller sig sida vid sida och delar bildtext. Under 700 px faller de under varandra. */ .fig.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(12px,1.6vw,22px);row-gap:0} .fig.pair img{aspect-ratio:4/3} .fig.pair figcaption{grid-column:1/-1} @media(max-width:700px){.fig.pair{grid-template-columns:1fr}} /* Tva figurer sida vid sida, var och en med egen bildtext. Anvands nar tva bilder hor ihop men sager olika saker. Faller under varandra pa smal skarm. */ .figrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px); align-items:start;width:100%} .figrow .fig{margin:0} @media(max-width:760px){.figrow{grid-template-columns:1fr}} /* Operatorsfonstret ar 4:3 och FlightMap beskuren till samma matt. Med det enhetliga 16:9-formatet foll knappraden bort ur det ena och hela flygtabellen ur det andra. Raden far darfor 4:3. */ .figrow.kvart .fig img{aspect-ratio:4/3} /* Bilder vars egna proportioner ligger langt fran 16:9 beskars sonder av det enhetliga formatet. De far darfor behalla sitt eget forhallande. */ /* .hel anvands inte langre men lamnas kvar; samma fallgrop galler dar, sa ett forhallande maste anges om den tas i bruk igen. */ .fig.hel img{aspect-ratio:auto;object-fit:contain;height:auto} /* Tva bilder i en figur med en gemensam bildtext under bada. Bilderna har samma matt, sa de blir lika hoga utan beskarning. */ .fig.par{display:grid;grid-template-columns:1fr 1fr; column-gap:clamp(14px,1.8vw,26px);row-gap:0;width:100%} /* Par av bilder foljer sajtens vanliga 16:9. Forhallandet anges alltid explicit sa att platsen reserveras innan bilden laddats, annars blir hojden noll och layouten hoppar nar lazy loading hinner ifatt. */ .fig.par img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto} /* Paret pa Video Tracking bestar av tva renderingar pa 1800x1594 som ska visas hela, darav eget forhallande och contain. */ .fig.par.kvadratisk img{aspect-ratio:1800/1594;object-fit:contain} .fig.par figcaption{grid-column:1/-1;margin-top:clamp(8px,0.9vw,12px)} @media(max-width:760px){.fig.par{grid-template-columns:1fr}} /* Bildtexterna hade ingen marginal nedat, sa nasta bild eller harlinjen kom for tatt inpa. Ett avstand laggs till efter varje figur. */ .doc .fig figcaption{margin-bottom:0} .doc .fig,.doc .figrow{margin-bottom:clamp(22px,2.6vw,36px)} .doc .figrow .fig{margin-bottom:0} /* Sista elementets marginal lacker ut ur .doc, som saknar bottenmarginal, och da syns sidans svarta bakgrund i glappet mot sidfoten. */ .doc .inner > *:last-child{margin-bottom:0} /* en figur som ar sist i sitt avsnitt behover samma luft ner till harlinjen */ .doc .row > .fig:last-child,.doc .row > .figrow:last-child{margin-bottom:clamp(10px,1.2vw,16px)} .doc .row:has(> .fig:last-child),.doc .row:has(> .figrow:last-child){padding-bottom:clamp(22px,2.6vw,36px)} /* style.css satter foljande ingressstycken som brodtext. Har ska alla ingressstycken se likadana ut, sa varden fran .doc .intro aterstalls. */ .doc .intro + .intro{font-weight:500;color:#2c3345; font-size:clamp(17px,1.45vw,22px);line-height:1.55;margin-top:0} /* nar tva ingressstycken foljer pa varandra ska de lasa som ett block, sa mellanrummet mellan dem tas bort helt */ .doc .intro:has(+ .intro){margin-bottom:0} /* Kontaktrutan far heronsbehandling med skenet uppe till vanster, sa att rutan hor ihop med sidans topp i stallet for att infora en ny farg. */ .doc .row.contact{padding-left:clamp(24px,3vw,42px);padding-right:clamp(24px,3vw,42px); border-color:rgba(243,242,236,.14); background: radial-gradient(90% 110% at 18% 6%, rgba(52,90,160,.42), transparent 62%), linear-gradient(160deg, #12203a 0%, #0a1826 55%, #070f19 100%)} .doc .row.contact h2{color:#f3f2ec} .doc .row.contact .details li{border-top-color:rgba(243,242,236,.14)} .doc .row.contact .details .k{color:#8b95b6} .doc .row.contact .details .v,.doc .row.contact .details .v a{color:#f3f2ec} .doc .row.contact .details .v a{border-bottom-color:rgba(236,115,34,.75)} /* Kontaktrutan dras ihop nagot i hojdled: mindre inre marginal och tatare rader, sa att den inte kanns overdimensionerad pa en kort sida. */ .doc .row.contact{padding-top:clamp(24px,2.6vw,34px);padding-bottom:clamp(24px,2.6vw,34px)} .doc .row.contact h2{margin-bottom:clamp(8px,1vw,14px)} .doc .row.contact .details li{padding:clamp(9px,1vw,12px) 0} /* Harlinjen ovanfor ett avsnitt ar en avgransare. Ar avsnittet forst i innehallsblocket finns ingenting att avgransa mot, sa den tas bort. */ .doc .inner > .row:first-child{border-top:0;padding-top:0} /* Paret pa Live Fire Scoring: kontrolltornet och besattningen vid konsolerna. Tornbilden ar nastan kvadratisk och taler darfor inte 16:9, sa paret satts i 4:3 och bada bilderna behaller sitt motiv. */ .fig.lfspar img{aspect-ratio:4/3;object-fit:cover} /* Generationsbilden ar 2200x929. Med det enhetliga 16:9-formatet skars den yttersta trackern bort i vardera kanten, sa den behaller sitt eget matt. */ .fig.generationer img{aspect-ratio:2200/929} /* Dubbelnedslaget pa Live Fire Scoring ar en bred bandbild (2290x687). Med 16:9 hade den ena av de tva explosionerna skurits bort i kanten, sa den far behalla sitt eget matt precis som generationsbilden ovan. */ .fig.dubbeldrop img{aspect-ratio:1900/570} /* En liten, kvadratisk figur for korta klipp som inte ska ta hela bredden av innehallsspalten. G1X-klippet pa Video Tracking ar forsta exemplet. */ .fig.small{max-width:420px;margin:0 auto clamp(22px,2.6vw,36px)} .fig.small img,.fig.small video{aspect-ratio:1/1;border-radius:4px} @media(max-width:500px){.fig.small{max-width:280px}} /* Kvadratiska klipp i full spaltbredd. Kalkallans eget matt ar 1:1, och 16:9 hade skurit bort antingen planet eller nedslaget beroende pa var i passet klippet befinner sig, sa formatet behalls precis som dubbeldrop. */ /* Testrangebilden ar 1289x570, alltsa betydligt bredare an 16:9. Med det enhetliga formatet hade bade trackern till vanster och radarn till hoger skurits bort, sa den behaller sitt eget matt. */ .fig.testrange img{aspect-ratio:1289/570} /* Klippen pa Anti-Drone ar 640x456. Formatet ligger narmare 4:3 an 16:9, sa spargrinden hade klippts i over- och underkant av det enhetliga formatet. .klipp ar ett ensamt klipp, .dronrad ett par i bredd. */ .figrow.dronrad .fig video{aspect-ratio:640/456} .fig.klipp{max-width:560px;margin:0 auto clamp(22px,2.6vw,36px)} .fig.klipp video{aspect-ratio:640/456} @media(max-width:620px){.fig.klipp{max-width:100%}} /* Tre operatorsvyer i rad pa Video Tracking, 1773x487. Med 16:9 hade den forsta och tredje enhetens ruta skurits bort, och det ar just att alla tre ser samma mal samtidigt som bilden ska visa. */ .fig.trippel img{aspect-ratio:1773/487} /* Triptyken pa Live Fire Scoring ar tre rutor i rad, 1916x478. Den ar nastan 4:1 och maste behalla sitt matt; med 16:9 hade den forsta och sista rutan skurits bort pa mitten. */ .fig.triptyk img{aspect-ratio:1916/478} /* Klippet gar i full spaltbredd men beskars till samma hojd som bilderna i paret under, alltsa halva spalten i 4:3. Da linjerar de tre elementen. */ .fig.kvadrat{max-width:100%;margin:0 0 clamp(22px,2.6vw,36px)} .fig.kvadrat img,.fig.kvadrat video{aspect-ratio:962/351;object-fit:cover;object-position:50% 62%} /* --- HERO PA LIVE FIRE SCORING ------------------------------------------- */ /* Undersidornas hero ar annars enfargad. Live Fire far scenbilden bakom sig, nertonad mot sidans egen bakgrund i overkanten sa rubriken star fritt. Bilden ar blatonad i samma skala som startsidans hero. */ .lfs-hero{position:relative;overflow:hidden} .lfs-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:url("img/live-fire-hero_1885x733.jpg") center 52%/cover no-repeat; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); pointer-events:none; } .lfs-hero .hero-inner{position:relative;z-index:10} /* Samma behandling pa ovriga undersidor. Varje sida far sitt eget motiv, blatonat i samma skala, med accentfargen kvar: gront harkors pa trackerbilderna, orange malskarmar pa kontaktsidan. */ .vt-hero,.ad-hero,.ct-hero,.co-hero{position:relative;overflow:hidden} .vt-hero::after,.ad-hero::after,.ct-hero::after,.co-hero::after{ content:""; position:absolute; inset:0; z-index:1; background-repeat:no-repeat; background-size:cover; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); pointer-events:none; } .vt-hero::after{background-image:url("img/vt-hero_1448x540.jpg");background-position:center 85%} .ad-hero::after{background-image:url("img/ad-hero_1448x563.jpg");background-position:center 55%} .ct-hero::after{background-image:url("img/ct-hero_1672x650.jpg");background-position:center 42%} /* Company: ingenjorernas whiteboard med barings geometrin uppritad for hand. Motivet ar ljust, sa duotonen ar dragen morkare an de ovriga for att rubriken ska sta kvar med samma kontrast som pa systemsidorna. */ .co-hero::after{background-image:url("img/company-hero_1800x700.jpg");background-position:center 60%} .vt-hero .hero-inner,.ad-hero .hero-inner,.ct-hero .hero-inner, .co-hero .hero-inner{position:relative;z-index:10} /* Smal skarm: heron blir hogre an den ar bred, sa bilderna beskars i sidled i stallet for i hojdled. Motiven ligger inte i mitten, darfor egna lagen. */ @media(max-width:700px){ .vt-hero::after{background-position:20% 78%} .ad-hero::after{background-position:center 55%} .ct-hero::after{background-position:46% center} .lfs-hero::after{background-position:20% 52%} } /* --- UNDERSIDORNAS HERO: LIKA HOGA --------------------------------------- Heron vaxte med sitt innehall, sa de fem undersidorna blev olika hoga och rubriken hamnade olika langt ner. Har lases hojden, och sidor utan brodsmula far dess hojd reserverad, sa att morkret ovanfor rubriken ar lika stort pa alla fem. */ .hero.inner-hero{height:560px;min-height:560px; align-items:flex-start;padding:230px 0 0} .hero.inner-hero .hero-inner{width:100%} .hero.inner-hero .hero-inner > h1:first-child{margin-top:37px} /* --- STARTSIDANS HERO ----------------------------------------------------- Heron fyller hela forsta skarmen, sa varken den vita sektionen eller nasta rubrik syns nar sidan oppnas. Scenbilden ligger lagre och beskars i underkanten, vilket tar bort tom mark och lamnar mer morker at rubriken. */ .home-hero{height:100svh;min-height:640px} .home-hero::after{height:62%;background-position:center 34%} .home-hero .hero-inner{margin-top:clamp(190px,24vh,300px)} @media(min-width:901px) and (max-height:880px){ .home-hero::after{height:58%;background-position:center 34%} .home-hero .hero-inner{margin-top:clamp(160px,20vh,230px)} } @media(max-width:900px){ /* I mobil ar bilden beskuren i sidled och tonade tidigare in for langt ner, sa texten och scenen lag som tva skilda block med en skarp grans emellan. Har tonar bilden in ovanfor rubriken, alltsa bakom texten, och texten ligger nagot lagre sa den star mitt i det morka partiet. */ .home-hero::after{height:76%;background-position:center 40%; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 20%,rgba(0,0,0,.8) 46%,#000 66%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 20%,rgba(0,0,0,.8) 46%,#000 66%)} .home-hero .hero-inner{margin-top:clamp(180px,23vh,250px)} } /* --- KLICKYTOR I MOBIL ---------------------------------------------------- Lankarna var 20 till 34 px hoga, alltsa mindre an ett fingertopps yta. Sidfotens lankar lag dessutom tatt ihop i staplat lage. Har far varje klickbar yta minst 44 px hojd utan att texten flyttar sig synligt. */ @media(max-width:900px){ .menu-btn{min-height:44px;padding-top:0;padding-bottom:0;display:flex;align-items:center} .foot-bottom .fl{gap:0;flex-direction:column;align-items:flex-start} .foot-bottom .fl a{min-height:44px;display:flex;align-items:center} .foot-cta .cta{min-height:44px;display:inline-flex;align-items:center} .drawer a{min-height:52px;display:flex;align-items:center} .details .v a{min-height:44px;display:inline-flex;align-items:center} } /* --- BILDLAGE I UNDERSIDORNAS HERO --------------------------------------- Bildfilerna ar beskurna till heronsproportion. Vid 1440 px fyller de ytan exakt; pa bredare skarmar uppstar hojdmarginal och da styr lagesvardet. Anti-Drone ligger pa 85 procent sa att den roda pricken syns aven da. */ .lfs-hero::after,.ct-hero::after{background-size:cover;background-position:center} /* Video Tracking ar orord: originalfilen och Stefans eget bildlage. */ .vt-hero::after{background-size:cover;background-position:center 85%} .ad-hero::after{background-size:cover;background-position:center 85%} .co-hero::after{background-size:cover;background-position:center 25%} /* --- RORLIG BAKGRUND I TVA HEROER ---------------------------------------- Kontaktsidan och Live Fire far film bakom rubriken i stallet for stillbild. Klippet ligger ovanpa ::after, som behalls som underlag: gar filmen inte att spela - blockerad autostart, langsam uppkoppling, ett format webblasaren inte klarar - syns stillbilden i stallet, sa rutan blir aldrig svart. Overtoningen ar densamma som pa sidans ovriga heroer. Vid prefers-reduced-motion doljs filmen helt och stillbilden tar over. */ .ct-hero .hero-vid, .lfs-hero .hero-vid, .vt-hero .hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:2; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.85) 74%,#000 100%); } /* Nar filmen val rullar tas stillbilden under den bort. Bada har samma motiv men ar ur fas, sa utan detta syns motivet dubbelt genom overtoningen. Klassen satts av fixes.js forst nar uppspelningen har borjat, vilket gor att stillbilden ligger kvar i alla lagen dar filmen inte spelar. */ .ct-hero.vid-on::after, .lfs-hero.vid-on::after, .vt-hero.vid-on::after{opacity:0} @media(prefers-reduced-motion:reduce){ .ct-hero .hero-vid, .lfs-hero .hero-vid, .vt-hero .hero-vid{display:none} } /* Planet flyger i nedre tredjedelen av filmrutan. Utan lagesvarde hamnar det i underkant och skars av, sa beskarningen flyttas ner. */ .vt-hero .hero-vid{object-position:center 72%}