Mites täällä Gtihubissa kannattaakos laittaa tänne tuo domainhotellin SSH key ja muuta? maanantai 12.16 Mitä tässä ominaisuudessa voi tehdä cPanelissa? Meillä on tuolla kaksi Sittenkin vain yksi 4e240dd9-bfad-4512-af94-434cf5252d87.png e1ab0552-1be2-416e-b743-d2c46541f418.png c8b5fa0b-27d7-40ee-96ed-d5d329b0681c.png a6a4c810-ad33-4fd6-bcd2-6046b4018936.png Mitä tämä yksi nappi tarkoittaa tässä tuo oikean puoleinen jossa luki ohjeessa Collapse folders in explorer? Siis tässä power shellissä 41c9ca4f-a7fb-4509-a829-5c7a4bd5e206.png a29c181c-fc28-445c-b9c6-938bdb5bc64a.png Nyt tehtiin Koskenkuiskeeseen vielä yksi sivu lisää "Hemmottelupaketit" Tee siihen kiva hemmottelupakettikuva ja katso tyyliä tästä Hoidot ja palvelut sivun fiiliskuvista: Ohessa kuva myös Hemmottelupaketit sivusta. Tee tälle sivulle myös niiin, että Sivun otsikko tulee keskitettynä. Muokkaa Muokkaa Muokkaa Muokkaa 94520d14-7e16-4596-9141-e37afe7d4aba.png 048495f6-c76e-4cdb-be6a-9c9f0f3943ba.png cb5ab72c-88b3-43ee-b5c9-247b207aabbd.png Elikkä sen otsikon pitää skaalautua ruudun leveyden mukaan koko ajan. Että jos skaalataan pienemmäksi, niin silloin se ei saa ykskään kirjaimen mennä toiselle riville siinä, vaan sen pitää vaan pienentyä sen koko tekstin sen mukaan, miten skaalataan. Ja sitten etusivulla niin se leveydessä pitää ollakin sen kolmen hoitopalvelun levyinen silloin, kun on kolme hoitopalvelua rinnakkain, näkyy siinä yläpuolella. Sitten kun niitä on kaksi, niin se loksahtaa niiden kahden levyiseksi, ja sitten kun on yksi, niin yhden levyiseksi. Ja samoten siinä etusivulla on se otsikko, mikä ei nyt skaalaudu oikein, että sen pitää koko ajan pysyä siinä nätisti skaalautua pienemmäksi sitten siinä alueella, missä sen kuuluu oikeasti näkyä. Tuo hemmotteluhoidot pitää nyt tietysti lisätä myös samalla tavalla tuonne Hoidot ja palvelut sivulle fbccf3d9-cd9b-470c-9279-9ec5a55e71aa.png bc0bd381-7e92-487e-a28e-7c4a5524ed2f.png 6a5b14eb-8905-4f40-8c6f-8da269fcbed8.png No niin, nyt meidän pitäisi seuraavaksi sitten tehdä näille kaikille hoitokategorioille, niin tota sinne niitten sivulle, sinne kategoriasivulle ylhäälle siihen aiheeseen sopiva tommoinen kuva samalla lailla kuin näissä hemmotteluhoidoissakin, ja keskitettynä kaikki, ja sitten fiksusti kautta siististi ne hoidot tässä sitten sinne alle niin kuin ne nytkin on, mutta mä mietin, että saanko niihin jotain tyyliä tai mukavuutta tai muuta sommittelua, kun ne on nyt tolleen niin kuin alekkain silleen vasemmalle tasattuna, ja sit kuitenkin se otsikko olisi ihan siisti, jos se ois, ja se kuvausteksti, niin ois kuitenkin keskitettynä, mutta nyt siinä tommosta vähän ristiriitaisuutta on. Mutta tosiaan se kuva tarvittais sinne, ja sit se voisi olla semmoinen, että sen kuvan päälle tulee sitten aina sen kyseisen hoitokategorian se kategorian nimi, vaikka sit jollain vaalean, läpinäkyvällä harmaalla taustalla tai näin päin pois, että se erottuu siitä. Muokkaa No, muuten toi näyttää kyllä kivalta ja hyvältä, että voitais tommosella tyylillä tän laittaakin. Mutta toi kasvohoidot ja se alla oleva harmaa palkki, niin se vähän on huono ehkä tossa, että pitäisikö se laittaa sitten kuitenkin sillä tyylillä, kun toi hemmotteluhoidotkin laitettiin, että siinä on se kuva, mutta siinä on sitten se teksti sen kuvan sitten, onko se sitten ylä- vai alapuolella, mitäs se nyt meillä oli tossa äsken. Eli näin ja silloin tuo fiiliskuva saa olla tosiaan vähän pienemmällä. Samalla koolla kuin hemmottelupakettisivulla Aloitetaan sen tekeminen ja sitten myös kokeilin tuohon sivun kuvakaappauksen päälle tuollaista kultaista gradient palkkia jossa on sisällä navigaatiolinkit, niin näyttäis kyllä hienolta. Tehdään tämä myös: Pitää sitten katsoa miltä se alasvetovalikko tulee näyttämään ja fiksataan sitä sitten vielä siihen sopivaksi. Nytten tuo valikko taitaa pysyä, mutta se avatessa heittää sitä sivulle päin typerästi. Nyt se toimii ja viellä todella nopeasti. Nyt nuo headerin alla olevat siuvut ovat vähän sivussa headerin keskityksestä tai sitten ne on toisin päin header sivussa. Miten tuon ison välin saa tuosta alusta pienemmäksi? Tällä pigmentointi sivulla voisi olla tuossa alussa tuo osio jossa kerrotaan pigmentoinnista niin yhdessä tietoruudussa ja sitten eriteltynä nuo missä on hinta 534c3fef-a93d-4839-83a3-f7136093dc02.png d58fbd17-81ba-4a75-b040-39ea8b50929e.png Asettelu meni tässä vähän huonoksi. Korjaa ja anna uusi k oodi. Liitetty koodi(7).css Tiedosto Nyt saat kyllä siivota tässä kohtaa tämän main.css ja laitta itse nämä sinne tilalle: Kiitos, tässä on mobiilissa vähän skaalaus ongelmia ja sitten nuo selityskohdat voisi olla mobilissa silloin kun muuttuvat päällekkäisiksi niin keskitettynä. Hoidot voi jäädä jos tyyli on muuallakin sama. Sitten tuo navigaatio ei saa mennä tuollatavalla kahdelle riville edesd kapeimmalla näytöllä, vaan pitää skaalautua mukana kaikissa näytöissä ja laitteissa. 8f417b06-76a7-4929-8bef-f3e659b3e176.png 2a6628e1-f852-4bdc-91e6-9ccbd694d851.png Alasvetovalikko heittää taas sivuun.Footeri menee päällekkäiseksi liian aikaisin ja sitten se on sivussa.SIlloin kun se menee päällekkäiseksi niin sen pitää olla keskitetty sivulle dbca5a81-4d9f-413d-9090-bb1a5b044c8d.png 7b9a9cf5-8481-49df-8e95-5feb03bf2d40.png 5ac01999-ca69-4673-a230-8b8c4208e16f.png f15b44a8-993e-4e01-b280-5cf7198438ad.png Vieläkään ei otsikko skaalaudu ainakaan kestopigmentoinnissa. Footeri ei keskity vieläkään mobiilissa ja siellä on sininen painike. Etusivulla tuo yksi teksti pitää keskittää ja katsoa mistä. Nämä alaosan jutut pitää myös keskittää heti kun leveys menee ohi pöytäkoneen näyttöjän liian alas. Eli silloin kun palvelukortitkin alkaa mennä kahdelle riville. Samoin yhteystieto sivu pitää keskittää siinä kohdassa kun footerikin keskitetään näytön kaventuessa. oli sitten mobiili, tabletti tai tietokone, mutta leveys saa määrärtä aika painokkaasti sen milloin keskitetään. EI ainakkan tämän napin vöri muuttunut 71af8315-f724-4ba4-ab16-58dbb7cc11b7.png 43a28f17-98f1-4114-b4a1-3f0f9d4ceee8.png 5e874de0-9d25-448d-a019-61cad8281875.png d312ebef-6346-4c29-ac0f-c5095653bab2.png ceeaa7d8-c991-4723-a859-47d6ca938bae.png 6f306f9a-0253-4b6e-9f12-b41f0da2bc3d.png d87878bf-abbb-49f7-afc2-d2d31dc6d517.png a2357c94-3e8f-455f-aac7-e2f16530dede.png 878cc204-7a98-4c54-b0c2-2a517eca3b37.png Sen verran olen katsonut selaimen debug ohjelmalla, että älyan koodin tulevan sieltä teeman tai sen osan kautta väkisin tuonne footeriinkin jota voi ohjata sieltä teeman selainmuokkauksesta. 94fad6e8-9620-446b-9f24-f7f4be792a69.png e3753581-8db4-4ef3-8a2f-d37395f4677f.png d943812b-2324-499a-882f-261ab9903985.png 86f94acb-094d-40c4-aaea-6fb08842df5c.png 6aeb9d6e-8478-4b10-89b6-13ac490242e1.png Haluaisin tasata nämä kolme saraketta nin, että saadaan tuo keskellä oleva JUHLAPAKETTI Samalle tasolle vieressä olevien kahden muun hoitopaketin otsikoiden kanssa niin, että sen jälkeen myös muutkin kentät ovat samalla tasolla näissä eri hoitopaketeissa. 20a74485-8463-45ca-9b06-f8abd3bfd152.png 4b5582a4-edc4-488b-9946-2e7771aba999.png Kyllä se main on siirtynyt tiistai 11.52 Väittäisi, että tuota meidän teemaa ja sen perustamis tiedostoja ei tehty täysin oikein. Tiedän, että sen lapsiteeman pitäsi olla tässä valikossa mukana. Eipä ole ihmekkään, että ei toimi tuo footerissa olevan napin ja sen tekstin värien vaihto kun meidän footeri on jätetty ihan tyhjäksi. Ei olekkaan eilen 9.05 3f44b0c9-7b4b-4d45-8943-10c6e1960988.png bba94770-dbf2-4b55-aa71-aad60d708ba9.png Voinko käyttää tätä Domanhotellin cPanelissa olevaa Git Version Control ominaisuutta jotenkin nyt hyödyksi tässä koskenkuiske.fi sivustossa? Onko näin tämä oikein? 97f81ad2-ef11-42af-9ccd-7f60c851680b.png 0c333145-4ab6-46f0-acab-10b51e06d927.png 87cf8c9a-e489-429e-bad1-3214570861d4.png 83ae5891-84a0-4748-b97e-f6eb4da2c695.png 486460a4-073b-4c0f-9346-95e3bcaab60a.png 5f1976b0-976f-40f5-86c2-1ac4731d4b1c.png e51456eb-231f-4eec-b112-39fb2e05bb5f.png f505c228-2dc8-47c8-8086-424bb935ca3e.png Pasted code.css Tiedosto Tässä main. Anna uusi siivottu kokonaan. Tuollainen kohta pitää korjata vielä kun mobiilin menu aukeaa tuollatavalla sivuun. Lisäksi tuohon menuun ympärille tulevaan kehykseen haluan yläosaan sellaisen, että se ikään kuin sulautuu tuohon navigaatio palkkiin kun nyt se on vähän irrallaan siitä. siinä saisi ylhäällä mennä vaikka tuo tumma navigaatiopalkin viiva tuon alas tippuvan osuuden ylitse. Pasted code(1).css Tiedosto Lisääs sinä tuo koodi tähän siististi: 127cc197-2047-4ae5-9a4e-a89ad4831ea8.png cbe37b2d-a720-4887-a462-1d92a67fd877.png Sitten näyttää olevan myös tällainen ongelma, joka tulee esille ainakin näiden kahden palvelu sivun kanssa Tämä on seuraava korjattava kun tuo päänavigointi menee kahdelle riville eilen 11.53 Pasted code(2).css Tiedosto Tässä vanha header.css Tee tästä uusi puhdas versio Kokeilin tässä välissä tällaista testiä sivulle: Tässä viellä tulos tuolla https:// osoitteell. Kokeilin muuten työpaikan nettisivua tuolla testillä ja sain tällaisen tuloksem: be8840de-65bd-48a2-8fb5-c0e019ca6d26.png 4de270db-32e4-4d14-94e4-423ee9d48f4b.png 93507ff4-a917-40e2-9c8d-1162f93ffef6.png 1b9392ab-e6a0-4e62-8979-e7b34783158e.png 55242be1-cf48-44ba-b668-5c20b090882f.png Tässä muutamista sivuista kuvia tuon otsikon osalta. Niiden väliä pitäisi hienosäätää kun navigointipalkin ja otsikon väliin jää turhan iso väli, sellainen, että se ei näytä minun mielestä hyvältä. bb1e01c0-d01f-4870-82af-5d5038c501bf.png c82ae5a8-f42f-45d9-a9f0-0c05cd6de91f.png Etusivulla on tuo etusivun otsikko tuollataavalla vasemmalle tasattu niin se pitäisi keskittää kaikissa näkymissä. ja itse otsikko pitäisi olla niin että se etusivulla oleva myös skaalautuu kaikkiin kokoihin pysyen yhdellä rivillä. eilen 17.10 No niin, nyt näkyy tässä kuva, miten hienosti toi ajanvaraus sillä Timman osoitteella aukeaa tonne headerin ja footerin väliin. Niin nyt mä haluaisin kyllä varmaan niin, että jokaisesta ajanvarauslinkistä, buttonista, niin se menee tällaiselle ajanvaraussivulle. Elikkä tää olisi se meidän ajanvaraussivu. Ja tähän tarvittaessa sitten tekisin tohon jonkun oman kirjoitusalueen, mihinkä tehdään sitten mahdollisesti jotain ohjeita tähän varauksen tekemiseen tai kerrotaan, että se aukeaa tästä, kun valitsee niin tuota laajemmin sitten se ajanvarausmahdollisuus sieltä Timman sivuilta. Ja sitten johonkin tonne varmaan alasta, tuohon ylös laitetaan just se, että voi myös ottaa yhteyttä sähköpostilla tai soittamalla tai näin päin pois. Ja se meidän ajanvaraussivu, se itse sivu, niin se olisi tämä, olisi sen yksi elementti, elikkä nyt ensimmäinen, mikä siellä tulee olemaan. Nyt olen kotona ja pitää saada tänne nyt lähetettyä tuo viimeisin versio sivustosta vCodeen eilen 19.26 Liitetty koodi(1).php Tiedosto Nyt sinulla on kyllä jotain väärää tietoa muistissasi. Tee sinä tämä koodi Liitetty koodi(2).php Tiedosto Tässä varmuuden vuoksi front-page.php ja sitten vielä tuo footer.php Liitetty koodi(8).css Tiedosto Tässä tämän hetken main.css päivitä tämö kokonaan ja siivoa jos on jotain tarvetta 899866c9-88fc-4efe-9d6a-87a7e658dfb1.png bf7b26e4-66a0-43b6-bb4c-ba0a1225be73.png Joku tässä nyt meni pieleen tuolla ajanvarus sivulla meillä kun nyt se aukeaa väärällä tavalla. Toinen kuva näyttää miten se aukesi ennen. Tuesta ennen sivusta joka aukesi muuten hienosti ja oikein olisin pyytänyt seuraavaksi muokkaamaan sitä niin, että se timman sivu ei aukea siihen niin, että siihen tulee sellainen laatikkom, että se sivu ei mahdu siihen kokonaa vaan siihen tulee pientä siirtymää varten vierittyspalkit ja mobiililla sitä pitää vierittää sen ajanvaraussivun vierityksen lisäksi. niin sen varmaan saa sellaiseen laatikkoon mikä muosdostuu luonnollisesti sen kokoisena mitä se timman sivu sitten sisältääkään. No niin, nyt se toimii. Seuraavaksi tekisin tuosta valkoisesta alueesta tastav värin osalta saman värisen kuin on sivun reunoillakin. Sitten pitää olla mahdollisuus lisätä meidän omaa tekstiä sekä ylä että alapuolelle word ressin omalla sivueditorilla. Alaosaan nyt ei niin tärkeää ole lisätä mutta yläpuolelle voi tulla tarpeelliseksi ja tuo eräisyys on nyt ainakin ilman lisätekstejä liian lähellä navigaatio palkkia. No nyt kävi taas näin timma saa pysyä tuossa omassa taustavärissään ja siinä saa olla ne kulmanpyöristykset. Niin tuolla TImmassa ei kyllä ole sitä valkoista: fb23d198-a401-4060-b3b0-c685deb02f4f.png e27a3cc7-1fb0-4d24-b58f-7ffb13259bfe.png Tästä näet nyt mistä nämä värit vaihtuvat Lisäksi tässä vaaleaksi jäävässä alueessa on reunoilla joku varjostus ja ilmeisesti joku transparent ominausyys f66840d9-61b5-42f9-a393-ddd16e645703.png ef55c15f-09b3-4a54-a401-b3355b0059d7.png Noniin nyt se onnistui AI näinkö? Meillä on muuten tällä sivulla piilotettuna tuo sivun otsikko vai tarkoititko että teen tässä uuden otsikon viellä? Kyllä näin ajattelin ja tee se. Miksi edes ehdotit noin kun tiedän, että kaksi H1 otsikkoa oli se sitten piilossa se toinen tai ei niin se ei ole paras asia. Mitä muuten tällaisessa kohdassa kannattaa valita sähköpostin linkille? df8718f1-ad0b-4c4f-b2cb-91ee33eeb624.png d208046b-1eba-435f-ba45-21ebe278b214.png Taas meilläö on tämä tilanne noiden sinun uusien aineistojen kanssa. Vanhojen kanssa tuo alkuteksti näkyi kun kokeilin, niin siinä ei ollut ongelmaa Analysoidaan Liitetty koodi(9).css Tiedosto Ja tässä on toimiva main.css a1b98291-24ae-4c21-a22a-c8139d03de5e.png Seuraavaksi pitää sitten pyytää vielä erikseen sinua keskittämään se otsikko. Joo — tuo olisi pitänyt tehdä samalla. Nyt otsikko tulee oikein WordPressin omasta sivunimestä, mutta sille ei vielä annettu keskitystä. PHP:hen ei tarvitse enää koskea. Lisää toimivaan main.css:ään Timma/Ajanvaraus-osion tyylien yhteyteen tämä: /* Ajanvaraus-sivun pääotsikko */ .timma-page-content-before > h1:first-child { width: 100%; margin: 0 0 26px; text-align: center !important; } Siinä kaikki. Tämän jälkeen: Ajanvaraus asettuu keskelle samaan linjaan muun johdantosisällön ja Timman kanssa, mutta mikään muu toimivassa ajanvaraussivussa ei muutu. Ctrl+S → sitten selaimessa Ctrl+F5. 427782F9-3FB3-425D-9472-267476A7A118.jpeg No nyt se keskittys onnistu, joo. Nyt on semmoinen juttu, että tässä iPhonen 17-puhelimella katon tätä ja tuota navigointipalkkia ylipäätään, niin noi fontit on kyllä liian pienet vanhemmille ihmisille tai huononäköisille. Niin mikä ois mahdollisuus niin, ettei mene kahdelle riville vielä, niin suurentaa näitä fontteja mobiilinäkymässä? Kyllä, sitä kannattaa suurentaa. Kuvassa 13–14 px olisi mielestäni selvästi luettavampi, ja neljä valikkokohtaa mahtuu vielä yhdelle riville, kun emme kasvata niiden vaakasuuntaista paddingia. Tekisin tämän nimenomaan header.css:ään mobiilisääntöön. Nykyisen hyvin pienen fonttikoon tilalle: @media (max-width: 650px) { .site-header .header-navigation .main-navigation .primary-menu > li > a { font-size: clamp(12.5px, 3.35vw, 14px); line-height: 1.2; padding-left: 3px; padding-right: 3px; white-space: nowrap; } } Ja aivan pienille puhelimille varmistus: @media (max-width: 360px) { .site-header .header-navigation .main-navigation .primary-menu > li > a { font-size: 12px; padding-left: 2px; padding-right: 2px; } } Tällä esimerkiksi iPhone 17:n kokoisella näytöllä teksti olisi käytännössä noin 13,5–14 px, eli nykyistä huomattavasti helpompi lukea. Pienimmilläkin puhelimilla se pysyy noin 12 px:ssä eikä valikon pitäisi hajota kahdelle riville. Samalla voitaisiin kasvattaa hieman painettavaa pystysuuntaista aluetta ilman että valikko levenee: @media (max-width: 650px) { .site-header .header-navigation .main-navigation .primary-menu > li > a { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } } Tuo olisi hyvä myös vanhemmille käyttäjille: fontti suuremmaksi ja linkkien kosketusalue korkeammaksi. Jos halutaan oikeasti noin 16 px teksti mobiilissa, neljä pitkää valikkokohtaa alkaa jo olla riskialtis 320–375 px näytöillä. Siinä vaiheessa käyttäisin ennemmin hamburger-valikkoa kuin antaisin tekstien mennä kahdelle riville. Minä kokeilisin ensin max 14 px. Kuvasi perusteella se on juuri sopiva seuraava askel. tänään 0.51 Liitetty koodi(10).css Tiedosto Onkohan nämä lisäykset nyt oikein? Siivoa samalla.. Kyllä, lisäykset olivat periaatteessa oikeassa paikassa, mutta tiedostoon oli syntynyt päällekkäisiä mobiilisääntöjä. Esimerkiksi max-width:650px-kohdassa fonttikoko määriteltiin ensin 11–14px ja heti myöhemmin uudelleen 12.5–14px. Lisäksi max-width:420px vaihtoi fontin taas enintään 12 pikseliin, joten iPhonen kaltaisella noin 400 px leveällä näytöllä tuo myöhempi sääntö käytännössä kumosi juuri tekemämme suurennuksen. Siivosin koko header.css:n ja yhdistin mobiilisäännöt järkevästi. Korvaa tällä nykyinen: assets/css/header.css Uudessa versiossa päävalikon fontit toimivat näin: 421–650 px → 13–15 px 361–420 px → 12,5–14 px 341–360 px → 12 px ≤ 340 px → 11 px Eli iPhone 17:n kokoisessa näkymässä pitäisi nyt päästä noin 14 px fonttiin, mutta neljä valikkokohtaa pysyvät edelleen yhdellä rivillä. Alle 420 px näkymässä säilytin nykyisen hyvän neljän yhtä leveän sarakkeen grid-rakenteen. Samalla: poistin päällekkäiset fonttisäännöt säilytin white-space: nowrap säilytin Hoidot-nuolen kompaktina päävalikon kosketusalue pysyy 52–56 px korkeana nostin myös mobiilin Hoidot-alavalikon tekstin 15 px:iin en muuttanut desktop-headeria, logoa tai animaatioita muuten Tämä on nyt paljon siistimpi pohja kuin lisätä uusia overrideja aina tiedoston loppuun. Ctrl+S ja sitten testaa iPhonella uudestaan. Kirjasto / header-clean.css /* ========================================================= KOSKENKUISKE – HEADER Puhdas versio: - logo ja kipinäanimaatio - kultainen navigaatiopalkki - Hoidot-alavalikko - leveämpi hover-alue hiirelle - mobiilissa navigaatio aina yhdellä rivillä ========================================================= */ /* ========================================================= HEADER / LOGOALUE ========================================================= */ .site-header { position: relative; z-index: 1000; width: 100%; background: #216f6d; } .header-brand { position: relative; overflow: hidden; width: 100%; background: linear-gradient( 180deg, #267b78 0%, #216f6d 45%, #195b59 100% ); } .header-brand-inner { display: flex; align-items: center; justify-content: center; min-height: 275px; padding: 22px 0 20px; } /* ========================================================= LOGO ========================================================= */ .site-logo { position: relative; display: inline-block; width: fit-content; max-width: 94vw; margin-inline: auto; line-height: 0; isolation: isolate; } .site-logo-image { position: relative; z-index: 1; display: block; width: clamp(700px, 52vw, 940px); max-width: 90vw; height: auto; transform-origin: center; animation: koskenkuiske-logo-glow 18s ease-in-out infinite; } /* ========================================================= LOGON PEHMEÄ HOHDE ========================================================= */ @keyframes koskenkuiske-logo-glow { 0%, 10%, 70%, 100% { filter: brightness(1) saturate(1) drop-shadow( 0 2px 4px rgba(0, 0, 0, 0.08) ); transform: scale(1); } 30% { filter: brightness(1.035) saturate(1.04) drop-shadow( 0 0 5px rgba(240, 213, 140, 0.15) ); transform: scale(1.0005); } 43% { filter: brightness(1.085) saturate(1.09) drop-shadow( 0 0 9px rgba(255, 225, 130, 0.30) ) drop-shadow( 0 0 18px rgba(230, 189, 97, 0.12) ); transform: scale(1.0015); } 56% { filter: brightness(1.03) saturate(1.04) drop-shadow( 0 0 4px rgba(240, 213, 140, 0.12) ); transform: scale(1); } } /* ========================================================= LOGON KIPINÄT ========================================================= */ .logo-sparkle { position: absolute; z-index: 5; display: block; pointer-events: none; color: #fff9dc; font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1; opacity: 0; transform-origin: center; text-shadow: 0 0 3px #ffffff, 0 0 7px #fff4c2, 0 0 13px #f0d58c, 0 0 22px rgba(230, 189, 97, 0.75), 0 0 32px rgba(230, 189, 97, 0.30); animation-name: koskenkuiske-sparkle; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .sparkle-1 { top: 17%; left: 25%; font-size: 24px; animation-delay: 0s; } .sparkle-2 { top: 20%; left: 70%; font-size: 18px; animation-delay: 2.2s; } .sparkle-3 { top: 46%; left: 33%; font-size: 27px; animation-delay: 4.4s; } .sparkle-4 { top: 48%; left: 55%; font-size: 20px; animation-delay: 6.6s; } .sparkle-5 { top: 52%; left: 72%; font-size: 23px; animation-delay: 8.8s; } .sparkle-6 { top: 30%; left: 87%; font-size: 25px; animation-delay: 11s; } .sparkle-7 { top: 78%; left: 43%; font-size: 17px; animation-delay: 13.2s; } .sparkle-8 { top: 75%; left: 76%; font-size: 21px; animation-delay: 15.4s; } @keyframes koskenkuiske-sparkle { 0%, 7%, 100% { opacity: 0; transform: scale(0.15) rotate(0deg); } 9% { opacity: 0.20; transform: scale(0.40) rotate(10deg); } 11% { opacity: 0.80; transform: scale(1.10) rotate(28deg); } 12.5% { opacity: 1; transform: scale(1.30) rotate(42deg); } 14% { opacity: 0.55; transform: scale(0.90) rotate(58deg); } 16% { opacity: 0; transform: scale(0.35) rotate(78deg); } 100% { opacity: 0; transform: scale(0.15) rotate(90deg); } } .site-logo:hover .site-logo-image, .site-logo:focus-visible .site-logo-image { filter: brightness(1.06) saturate(1.08) drop-shadow( 0 0 9px rgba(240, 213, 140, 0.22) ); } /* ========================================================= KULTAINEN NAVIGAATIOPALKKI ========================================================= */ .header-navigation { position: relative; z-index: 100; width: 100%; overflow: visible; background: linear-gradient( 180deg, #9b6205 0%, #c88913 14%, #e7b740 31%, #f8dc82 43%, #fff3b7 50%, #f3cd69 59%, #d99d22 76%, #a76a06 100% ); border-top: 1px solid rgba(255, 240, 175, 0.75); border-bottom: 1px solid rgba(105, 62, 0, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(96, 54, 0, 0.28), 0 3px 10px rgba(57, 43, 31, 0.12); } .header-navigation-inner { display: flex; align-items: center; justify-content: center; min-height: 62px; } .main-navigation { position: relative; width: 100%; overflow: visible; } /* ========================================================= PÄÄVALIKKO ========================================================= */ .primary-menu { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: clamp( 28px, 3vw, 50px ); width: 100%; margin: 0; padding: 0; list-style: none; } .primary-menu > li { position: relative; flex: 0 0 auto; margin: 0; padding: 0; } .primary-menu > li > a { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 62px; padding: 0 2px; color: #195b59; font-family: "Cabin", Arial, Helvetica, sans-serif; font-size: 19px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38); transition: color 0.2s ease; } .primary-menu > li > a:hover, .primary-menu > li > a:focus { color: #104b49; } /* ========================================================= AKTIIVISEN VALIKON ALAVIIVA ========================================================= */ .primary-menu > .current-menu-item > a::before, .primary-menu > .current-menu-ancestor > a::before, .primary-menu > li > a:hover::before, .primary-menu > li > a:focus::before { content: ""; position: absolute; right: 0; bottom: 15px; left: 0; height: 2px; background: #216f6d; } /* ========================================================= HOIDOT-NUOLI ========================================================= */ .primary-menu > .menu-item-has-children > a::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } .primary-menu > .menu-item-has-children:hover > a::after, .primary-menu > .menu-item-has-children:focus-within > a::after, .primary-menu > .menu-item-has-children.submenu-open > a::after { transform: translateY(4px) rotate(225deg); } /* ========================================================= HOIDOT-ALAVALIKKO ========================================================= */ .site-header .main-navigation .menu-item-has-children > .sub-menu { position: absolute; z-index: 1000; top: 100%; left: 50%; right: auto; width: max-content; min-width: 240px; margin: 0; padding: 10px 0; list-style: none; border: 7px solid rgba(148, 107, 36, 0.22); /* * Tumma yläreuna sulauttaa alavalikon * navigaatiopalkin alareunaan. */ border-top: 3px solid #195b59; border-radius: 0 0 18px 18px; background: rgba(247, 243, 238, 0.99); box-shadow: 0 16px 30px rgba(57, 43, 31, 0.16); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.20s ease, transform 0.20s ease, visibility 0.20s ease; } /* Auki hiirellä, näppäimistöllä tai JS:n submenu-open-luokalla */ .site-header .main-navigation .menu-item-has-children:hover > .sub-menu, .site-header .main-navigation .menu-item-has-children:focus-within > .sub-menu, .site-header .main-navigation .menu-item-has-children.submenu-open > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } /* ========================================================= ALAVALIKON LINKIT ========================================================= */ .primary-menu .sub-menu li { display: block; margin: 0; padding: 0; } .primary-menu .sub-menu a { display: block; width: 100%; padding: 12px 22px; color: #195b59; background: transparent; font-family: "Cabin", Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-decoration: none; transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease; } .primary-menu .sub-menu a:hover, .primary-menu .sub-menu a:focus { color: #104b49; background: linear-gradient( 90deg, rgba(230, 189, 97, 0.20), rgba(230, 189, 97, 0.04) ); padding-left: 27px; } /* ========================================================= HOIDOT-ALAVALIKKO – LEVEÄMPI HOVER-ALUE HIIRELLE Näkymätön silta helpottaa siirtymistä Hoidot-linkistä alas aukeavaan valikkoon ilman että valikko katoaa. ========================================================= */ @media (min-width: 651px) and (hover: hover) and (pointer: fine) { .site-header .primary-menu > .menu-item-has-children::after { content: ""; position: absolute; z-index: 998; top: calc(100% - 3px); left: 50%; width: 280px; height: 28px; transform: translateX(-50%); background: transparent; } } /* ========================================================= TABLETTI ========================================================= */ @media (max-width: 950px) { .header-brand-inner { min-height: 230px; padding: 20px 0; } .site-logo-image { width: clamp( 560px, 76vw, 760px ); max-width: 92vw; } .primary-menu { gap: clamp( 16px, 2.5vw, 24px ); } .primary-menu > li > a { font-size: clamp( 14px, 1.7vw, 16px ); } .sparkle-1 { font-size: 21px; } .sparkle-3 { font-size: 23px; } .sparkle-6 { font-size: 22px; } } /* ========================================================= MOBIILI ========================================================= */ @media (max-width: 650px) { .header-brand-inner { min-height: 170px; padding: 14px 0; } .site-logo { max-width: 96vw; } .site-logo-image { width: 94vw; max-width: 540px; animation-duration: 24s; } .logo-sparkle { animation-duration: 24s; text-shadow: 0 0 3px #ffffff, 0 0 6px #fff4c2, 0 0 10px #f0d58c, 0 0 17px rgba(230, 189, 97, 0.65); } .sparkle-1 { font-size: 15px; animation-delay: 0s; } .sparkle-2 { font-size: 12px; animation-delay: 3s; } .sparkle-3 { font-size: 17px; animation-delay: 6s; } .sparkle-4 { font-size: 13px; animation-delay: 9s; } .sparkle-5 { font-size: 15px; animation-delay: 12s; } .sparkle-6 { font-size: 16px; animation-delay: 15s; } .sparkle-7 { font-size: 11px; animation-delay: 18s; } .sparkle-8 { font-size: 14px; animation-delay: 21s; } .header-navigation-inner { min-height: 56px; } /* * Neljä nykyistä päävalikon kohtaa pidetään yhdellä rivillä. * Fonttia kasvatetaan mobiilissa, mutta vaakasuuntainen * padding ja väli pidetään maltillisina. */ .primary-menu { flex-wrap: nowrap; gap: clamp( 6px, 2vw, 12px ); padding: 0 6px; } .primary-menu > li { min-width: 0; } .site-header .header-navigation .main-navigation .primary-menu > li > a { min-height: 56px; padding: 0 3px; font-size: clamp( 13px, 2.7vw, 15px ); line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; } /* * Mobiilissa li-elementti ei määrää dropdownin sijaintia. * Alavalikko keskitetään koko navigaatiopalkin alle. */ .site-header .main-navigation .menu-item-has-children { position: static; } .site-header .main-navigation .menu-item-has-children > .sub-menu { top: 100%; left: 50%; right: auto; width: min( 260px, calc(100vw - 24px) ); min-width: 0; transform: translate(-50%, 8px); } .site-header .main-navigation .menu-item-has-children:hover > .sub-menu, .site-header .main-navigation .menu-item-has-children:focus-within > .sub-menu, .site-header .main-navigation .menu-item-has-children.submenu-open > .sub-menu { transform: translate(-50%, 0); } .primary-menu .sub-menu a { padding: 12px 18px; font-size: 15px; } } /* ========================================================= PIENET PUHELIMET – PÄÄVALIKKO AINA YHDELLÄ RIVILLÄ Neljä nykyistä kohtaa jaetaan neljään yhtä leveään sarakkeeseen. ========================================================= */ @media (max-width: 420px) { .header-brand-inner { min-height: 145px; } .site-logo-image { width: 96vw; } .header-navigation-inner { min-height: 52px; } .site-header .header-navigation .main-navigation .primary-menu { display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); align-items: center; width: 100%; margin: 0; padding: 0 2px; gap: 0; } .site-header .header-navigation .main-navigation .primary-menu > li { min-width: 0; margin: 0; padding: 0; text-align: center; } .site-header .header-navigation .main-navigation .primary-menu > li > a { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 52px; gap: 2px; padding: 0 1px; font-size: clamp( 12.5px, 3.45vw, 14px ); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; } /* * Hoidot-nuoli pienemmäksi, jotta se ei vie * turhaa leveyttä kapealla näytöllä. */ .primary-menu > .menu-item-has-children > a::after { width: 6px; height: 6px; margin-top: -3px; border-right-width: 1.5px; border-bottom-width: 1.5px; } .primary-menu > .current-menu-item > a::before, .primary-menu > .current-menu-ancestor > a::before, .primary-menu > li > a:hover::before, .primary-menu > li > a:focus::before { right: 6px; bottom: 11px; left: 6px; } } /* ========================================================= ERITTÄIN KAPEAT NÄYTÖT ========================================================= */ @media (max-width: 360px) { .site-header .header-navigation .main-navigation .primary-menu > li > a { font-size: 12px; } } @media (max-width: 340px) { .site-header .header-navigation .main-navigation .primary-menu { padding-inline: 1px; } .site-header .header-navigation .main-navigation .primary-menu > li > a { padding-inline: 0; font-size: 11px; letter-spacing: -0.025em; } } /* ========================================================= VÄHENNETTY LIIKE ========================================================= */ @media (prefers-reduced-motion: reduce) { .site-logo-image, .logo-sparkle { animation: none !important; } .primary-menu .sub-menu, .primary-menu > .menu-item-has-children > a::after { transition: none; } }