/* AI/O navigaatio ja avaaja, viisi nakymaa. Claude Design -luovutus design_handoff_aio_nav_five_views, 11.9.2026. Ladataan VIIMEISENA navin tyyleista: colors_and_type.css styles.css (etusivu) tai subpage.css (alasivut) garage-channel.css nav-mobile.css nav-views.css <- tama Tiedosto tekee kaksi asiaa: 1. Avaaja on sama taytetty oranssi nappi kaikissa nakymissa (paatos 11.9.2026, vaihtoehto B). Alle 600 px se on jo nav-mobile.css:ssa; tassa sama muoto annetaan 600 pikselista ylospain. Kursori ja kenoviiva poistuvat kaikkialta. 2. Matalassa nakymassa (vaakataso, korkeus enintaan 460 px) palkki tiivistyy vieritettaessa. Se on sama ehto, jolla styles.css ja subpage.css jo tiivistavat heron. Nakyma 4 (puhelin pystyssa, alle 600 px) ei muutu: nav-mobile.css jaa sellaisenaan. Periaate tiivistyksessa: pienennetaan, ei piiloteta. Valikkopaneeli on olemassa vain alle 600 pikselin leveydella, jossa linkeilla ei ole tilaa rivilla. Yli 600 pikselissa kaikki pysyy rivilla, joten paneelia ei tarvita eika sen merkkausta kahdenneta. */ /* ── 0. Avaaja napiksi 600 pikselista ylospain ──────────────────── Sama elementti joka nakymassa: taytetty oranssi, kuplamerkki, ei kursoria eika kenoviivaa. Vain mitat muuttuvat. Leveys pysyy kentan levyisena, joten yksirivisen navin sarakkeet eivat muutu: kentta oli 13 px:n koossa noin 153 px (kursori 1, vali 10, pehmusteet 24, teksti 118) ja nappi on noin 158 px (merkki 18, vali 8, pehmusteet 22, teksti 110). Ero on viisi pikselia. Merkki on sama leikkaus vyohykemerkista kuin pystyasennossa (viiva 3,4 yksikkoa, ei lattiaviivaa). Vyohykesarjan kuusi merkkia eivat muutu. */ @media(min-width:600px){ nav.sitenav.agc-host .in .agc-t{height:34px;gap:8px;padding:0 11px; background:var(--aic-orange-600);border:1px solid var(--aic-orange-600); border-radius:var(--radius-md);color:var(--aic-neutral-900); font-size:13px;font-weight:600; transition:background 180ms ease,border-color 180ms ease} nav.sitenav.agc-host .in .agc-t:hover,nav.sitenav.agc-host .in .agc-t:active{ background:var(--aic-orange-700);border-color:var(--aic-orange-700)} /* --color-focus on sama oranssi kuin tausta, joten rengas on valkoinen. */ nav.sitenav.agc-host .in .agc-t:focus-visible{outline:2px solid #fff;outline-offset:2px} nav.sitenav.agc-host .in .agc-t .agc-car,nav.sitenav.agc-host .in .agc-t .agc-sl{display:none} nav.sitenav.agc-host .in .agc-t:before{content:"";width:18px;height:18px;flex:none; background:url(assets/logos/aio-garage-icon.svg) center/contain no-repeat} } /* Tyopoydalla nappi saa saman koon kuin kentta oli. */ @media(min-width:961px){ nav.sitenav.agc-host .in .agc-t{height:36px;gap:9px;padding:0 13px;font-size:14px} } /* ── 0b. Linkkien kosketusalue 600-759 px ───────────────────────────── Tassa leveydessa linkeilla on oma rivinsa kuten pystyasennossa, ja laite on kosketuslaite, mutta linkit ovat 10 pikselin tekstia: rivin korkeus on noin 13 px ja kosketusalue padding 8 + margin -8 kanssa noin 29 px (garage-channel.css). Pystyasennossa sama linkki on 44 px:n laatikko. Laatikoita ei tuoda tanne: 34 px:n laatikkorivi kasvattaisi navin 81 pikselista noin 102:een eli 27 prosenttiin 375 px:n nakyman korkeudesta. Kasvatetaan vain kosketusalue, joka ei nay eika vie tilaa: pehmuste 15 px ja sama negatiivisena marginaalina, jolloin alue on 43 px mutta rivi vie ruudukossa entiset 13 px. Pseudoelementtia ei kayteta, koska :after on jo varattu aktiivisen sivun oranssille alleviivaukselle (subpage.css). Alue ulottuu 6 px ylarivin puolelle (rivivali on 9). Tunnus tulee merkkauksessa ennen linkkeja, joten se jaisi alle; z-index nostaa sen takaisin paalle. Kielivalitsin, avaaja ja ITEE ovat jo merkkauksessa linkkien jalkeen. */ @media(min-width:600px) and (max-width:759.98px){ nav.sitenav .in .navlinks a{padding:15px 0;margin:-15px 0} nav.sitenav .in .mark{position:relative;z-index:1} /* Sovitus toteutuksessa 11.9.2026: alasivujen aktiivisen sivun alleviivaus (subpage.css, bottom:-11px) on mitoitettu tekstin kokoiselle laatikolle ja navin 11 px:n pehmusteelle. 15 px:n pehmusteella viiva putosi 14 px navin alapuolelle (stagingissa jo 7 px avaajan 8 px:n pehmusteella). Paikka lasketaan pehmusteesta: auki 15 - 11 = 4 px; tiiviina .in on 58 px ja rivit keskitetty, jolloin tekstin alle jaa noin 5 px, eli 15 - 5 = 10 px. */ nav.sitenav .in .navlinks a[aria-current=page]:after{bottom:4px} nav.sitenav.cmp .in .navlinks a[aria-current=page]:after{bottom:10px} } /* ── 1. Matala nakyma, 600 px ja leveampi: yhteinen kuori ───────────── Palkin pinta siirtyy nav-elementista pseudoelementtiin. Nain lohko voi pitaa avoimen korkeutensa (sisalto ei siirry, ankkurit osuvat, hero ei muutu) ja pinta silti kutistua. nav-mobile.css tekee saman siirtamalla pinnan .in-elementtiin; tassa se ei kay, koska .in on enintaan 1140 px levea ja keskitetty: matalassa mutta leveassa selainikkunassa palkki olisi jaanyt kapeaksi keskelle. */ @media(min-width:600px) and (max-height:460px) and (orientation:landscape){ nav.sitenav{background:transparent;border-bottom:0;pointer-events:none} nav.sitenav:before{content:"";position:absolute;left:0;right:0;top:0; height:var(--nav-open-h,100%);background:var(--aic-blue-900); border-bottom:1px solid rgba(255,255,255,.18);pointer-events:none; transition:height 200ms ease} /* .in on staattinen ruudukko ja pseudoelementti on asemoitu, joten ilman tata pinta piirtyisi sisallon paalle. */ nav.sitenav .in{position:relative;z-index:1;pointer-events:auto; transition:height 200ms ease,padding 200ms ease,row-gap 200ms ease} nav.sitenav.cmp,nav.sitenav.cmp-x{height:var(--nav-open-h)} nav.sitenav .mark,nav.sitenav .mark .mk,nav.sitenav .itee,nav.sitenav.agc-host .in .agc-t{ transition:width 200ms ease,height 200ms ease} /* Kuvausteksti (Advanced Intelligence Oulu) on ainoa asia, joka poistuu rivilta. Se on kolmirivinen ja 30 px korkea, eli korkeampi kuin tiivis tunnus. Linkit, kieli, avaaja ja ITEE jaavat. */ nav.sitenav.cmp .mark .dsc{display:none} nav.sitenav.cmp .itee{width:28px;height:28px} /* Sovitus toteutuksessa: ankkurit kuten pystyasennossa (nav-mobile.css). Tiivis palkki on 48 tai 58 px, joten osion ylamarginaali 88/97 jattaisi noin 40 px:n raon; #top vie vierityksen nollaan, jotta "Takaisin ylos" purkaa palkin. */ html.cnav section,html.cnav section[id]{scroll-margin-top:64px} html.cnav #top{scroll-margin-top:100vh} } /* ── 2. Nakyma 5a: puhelin vaakatasossa 760 px:sta ylospain ─────────── 852x393 ja 932x430, ja sama saanto koskee matalaa selainikkunaa tyopoydalla. Navi on yksi rivi 72 px. Tiiviina 48 px, eli 33 % vahemman ja 6 % nakyman korkeudesta takaisin sisallolle. Rivilla sailyvat tunnus, nelja linkkia, kielivalitsin, avaaja ja ITEE. Valikkopainiketta ei nayteta (nav-mobile.css piilottaa sen 600 pikselista ylospain). */ @media(min-width:760px) and (max-height:460px) and (orientation:landscape){ nav.sitenav.cmp:before{height:48px} nav.sitenav.cmp .in{height:48px} nav.sitenav.cmp .mark{height:26px} nav.sitenav.cmp .mark .mk{width:57.9px;height:26px} nav.sitenav.cmp.agc-host .in .agc-t{height:30px;padding:0 10px} } /* ── 3. Nakyma 5b: puhelin vaakatasossa 600-759 px ──────────────────── 667x375. Navi on kaksirivinen 81 px, koska linkit ovat omalla rivillaan ja avaaja on ylarivilla (garage-channel.css). Tiiviina 58 px: molemmat rivit jaavat, vain pehmusteet, tunnus ja ITEE pienenevat. Linkkirivia ei piiloteta, koska se olisi vaatinut valikkopaneelin kahdentamisen tahan leveyteen 23 pikselin vuoksi. Korkeus 58 = tunnusrivi 28 (ITEE ja avaaja maaraavat) + rivivali 5 + linkkirivi 13 + pehmusteet 6+6. .in saa saman kiintean korkeuden kuin pinta, jolloin reunaviiva osuu pikselilleen. */ @media(min-width:600px) and (max-width:759.98px) and (max-height:460px) and (orientation:landscape){ nav.sitenav.cmp:before{height:58px} nav.sitenav.cmp .in{height:58px;grid-template-rows:auto auto;align-content:center; padding-top:0;padding-bottom:0;row-gap:5px} nav.sitenav.cmp .mark{height:25.6px} nav.sitenav.cmp .mark .mk{width:57px;height:25.6px} nav.sitenav.cmp.agc-host .in .agc-t{height:28px;padding:0 10px} } /* ── 4. Kaanto ja tilanvaihto ───────────────────────────────────────── nav-compact.js lisaa luokan nomo siksi aikaa, kun se mittaa avoimen korkeuden uudessa asennossa. Ilman tata kaanto nayttaisi 200 ms siirtyman vanhasta mitasta uuteen. Luokka on paalla yhden ruudun ajan. Ei mediakyselya: koskee myos pystyasentoa (nav-mobile.css). */ nav.sitenav.nomo,nav.sitenav.nomo:before,nav.sitenav.nomo *{transition:none!important} /* ── 5. Sovitus 11.9.2026 illalla: valikko myos vaakatasossa ─────────── Poikkeama paketin kohdasta 2.2. Kayttajan puhelintesti: tiiviina kahdeksan pienennettya elementtia 852 px:n rivilla luki harvana tyokalurivina, ei palkkina. Nyt tiivis tila on vaakatasossa sama kuin pystyssa: tunnus, avaaja ja valikkopainike; linkit, kielivalitsin ja ITEE avautuvat paneelina. Auki-tila (rivi, nappi 34 px) pysyy paketin mukaisena. Paneeli on sama .navlinks-elementti kuin pystyssa, uutta merkkausta ei ole; skripti sallii avauksen short-tilassa. 600-759 px:n kaksirivinen palkki tiivistyy nyt yhteen riviin (49 px, ei 58), koska linkkirivi poistuu. */ @media(min-width:600px) and (max-height:460px) and (orientation:landscape){ /* Tiivis: linkit pois (visibility, jotta pois sarkainjarjestyksesta), kieli ja ITEE pois, valikkopainike ITEE:n paikalle (viimeinen sarake kummassakin ruudukossa). Linkkien 1fr-sarake sailyy 760+ px:ssa, jotta rivin sarakkeet eivat siirry. */ nav.sitenav.cmp .in .navlinks{max-height:0;opacity:0;visibility:hidden;overflow:hidden; transition:max-height 200ms ease,opacity 120ms ease,visibility 0s 200ms} nav.sitenav.cmp .lang,nav.sitenav.cmp .itee{display:none} nav.sitenav.cmp .in .navburger{display:grid;width:34px;height:30px;padding:0;grid-row:1;grid-column:-2/-1;justify-self:end; border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-md);background:none; gap:4px;align-content:center;justify-items:center;cursor:pointer;color:#fff} nav.sitenav.cmp .in .navburger i{display:block;width:18px;height:2px;background:currentColor} nav.sitenav.cmp .in .navburger:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px} /* Paneeli: .in kasvaa kiintean nav-lohkon yli. Pinta on tassa lohkossa nav:before, joten .in saa oman taustan auki-tilassa. */ nav.sitenav.cmp.open .in{height:auto;padding-bottom:16px;background:var(--aic-blue-900); border-bottom:1px solid rgba(255,255,255,.18);grid-template-rows:auto;align-content:start; max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain} /* huomio 12, 1.10.2026 */ nav.sitenav.cmp.open .in .navlinks{grid-row:2;grid-column:1/-1;max-height:none;margin-top:4px;opacity:1;visibility:visible;overflow:visible; display:flex;flex-direction:column;align-items:stretch;gap:0;transition:none} nav.sitenav.cmp.open .in .navlinks a{display:flex;align-items:center;height:auto;justify-content:space-between;padding:14px 0;margin:0;border:0; border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;font-size:14px;letter-spacing:.1em;color:#fff} nav.sitenav.cmp.open .in .navlinks a.on,nav.sitenav.cmp.open .in .navlinks a[aria-current=page]{color:var(--aic-orange-600)} nav.sitenav.cmp.open .in .navlinks a:after{content:"\203A";position:static;height:auto;background:none; color:var(--aic-orange-600);font-size:13px;line-height:1} nav.sitenav.cmp.open .lang{display:flex;grid-row:3;grid-column:1;justify-self:start;margin:12px 0 0} nav.sitenav.cmp.open .itee{display:block;grid-row:3;grid-column:-2/-1;justify-self:end;margin:12px 0 0;width:30px;height:30px} } /* 600-759 px: yksi rivi 49 px, ei paketin 58. Rivivali nollataan, koska tyhja rivi 2 pitaisi muuten valinsa (sama oppi kuin nav-mobile.css). */ @media(min-width:600px) and (max-width:759.98px) and (max-height:460px) and (orientation:landscape){ nav.sitenav.cmp:before{height:49px} nav.sitenav.cmp .in{height:49px;row-gap:0} nav.sitenav.cmp .in .navburger{height:28px} nav.sitenav.cmp.open .in{row-gap:0} }