.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== The Train Factory — Elementor Custom CSS Liitä tämä kokonaisuudessaan: Elementor > Site Settings > Custom CSS (Elementor Pro -ominaisuus, sivustonlaajuinen) Tämä tiedosto sisältää VAIN ne tyylit, joita Elementorin omat widget-asetukset eivät kata (marquee-animaatio, vaihtuva hero-kuva, vedettävä kortti-rivi, jne). Kaikki värit, fontit, tekstit ja kuvat itsessään on tehty natiiveilla Elementor-widgeteillä ja ovat siis muokattavissa suoraan Elementorin käyttöliittymästä. -------------------------------------------------------------------------- MUUTOKSET 27.8.2026 (fonttien osalta): 1. Kaikki {{SITE_URL}}-paikkamerkit korvattu SUHTEELLISILLA poluilla. Sivusto siirtyy toiselle palvelimelle — suhteellinen polku toimii ilman muokkausta niin tuotannossa, staging-ympäristössä kuin verkkotunnuksen vaihtuessakin. 2. Fonttien src-listasta poistettu .otf ja .woff — vain .woff2 jää. Dinamon lisenssiehto (fontin metatiedoissa) kieltää tiedostojen säilyttämisen julkisilla palvelimilla, ja .otf on työpöytäasennuskelpoinen: kuka tahansa voisi ladata ja asentaa ABC Diatypen. woff2:n selaintuki on yli 98 %. 3. Poistettu Google Fonts -@import (Anton + Inter). Ne korvautuivat brändifonteilla, ja rivi oli @font-face-sääntöjen JÄLKEEN, jolloin selain ohittaa sen CSS-spekin mukaan joka tapauksessa. 4. Lisätty välilyönnilliset fonttialiakset ("ABC Diatype", "MFred 2.0"). Sivun .tf-seo-lohko käytti niitä, mutta @font-face määritteli vain "ABCDiatype"/"MFred2.0" — nimet ovat merkkitarkkoja, joten koko SEO-lohko renderöityi järjestelmäfontilla. 5. .tf-seo__btn font-weight 600 -> 700 (ABC Diatypessa ei ole 600:aa, selain teki faux boldin). ========================================================================== */ /* ---------- Design-tokenit (dokumentaatio) ---------- Käytä näitä kun asetat värejä widgettien omissa Style-välilehdissä. Voit myös tallentaa ne Elementorin Global Colors -listaan (Site Settings > Global Colors) klikkaamalla minkä tahansa värivalitsimen vieressä olevaa pientä ympyrää > "Add to Global". TF Black #000000 TF White #FFFFFF TF Off-white #F2EDE6 TF Yellow #FFC954 TF Blue #95BBBF TF Red #F37060 TF Brick #BA4435 Otsikkofontti: MFred 2.0 (lisensoitu, itse isännöity — ks. alla) Leipätekstifontti: ABC Diatype (lisensoitu, itse isännöity — ks. alla) ------------------------------------------------------------------------- */ /* ---------- Lisensoidut brändifontit (MFred 2.0 + ABC Diatype) ---------- Fonttitiedostot ladataan UUDEN palvelimen kansioon: wp-content/uploads/train-factory/ Tiedostot löytyvät projektin kansiosta fontit/woff2/ : ABCDiatype-Regular.woff2 (50 kt) ABCDiatype-Bold.woff2 (55 kt) MFred2.0-Regular.woff2 (13 kt) MFred2.0-Heavy.woff2 (13 kt) ⚠️ ÄLÄ lataa .otf- tai .ttf-tiedostoja palvelimelle. Ne ovat työpöytäasennuskelpoisia ja niiden julkinen tarjoilu rikkoo Dinamon lisenssiehtoa. Suunnittelijan .otf-tiedostot pysyvät paikallisesti kansiossa fontit/desktop/. Painot: MFred 400 Regular + 800 Heavy (EI 700 — jos widgetissä on font-weight 700, selain syntetisoi faux boldin; vaihda 800:aan). ABC Diatype 400 Regular + 700 Bold. */ @font-face { font-family: "ABCDiatype"; src: url("/wp-content/uploads/train-factory/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ABCDiatype"; src: url("/wp-content/uploads/train-factory/ABCDiatype-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "MFred2.0"; src: url("/wp-content/uploads/train-factory/MFred2.0-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "MFred2.0"; src: url("/wp-content/uploads/train-factory/MFred2.0-Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: block; } /* Aliakset välilyönnillisille kirjoitusasuille. CSS-fonttinimet ovat merkkitarkkoja: 'ABC Diatype' EI ole sama kuin "ABCDiatype". Nämä kattavat .tf-seo-lohkon lisäksi ne kohdat, joissa nimi on kirjoitettu käsin Elementorin widget-asetuksiin. Sama tiedosto, ei lisäpyyntöä. */ @font-face { font-family: "ABC Diatype"; src: url("/wp-content/uploads/train-factory/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ABC Diatype"; src: url("/wp-content/uploads/train-factory/ABCDiatype-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "MFred 2.0"; src: url("/wp-content/uploads/train-factory/MFred2.0-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "MFred 2.0"; src: url("/wp-content/uploads/train-factory/MFred2.0-Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: block; } /* ---------- Koko leveyden osiot (ei "boxed"-kapeutta) ---------- Alkuperäinen sivusto EI koskaan rajoita osion leveyttä (ei max-width-keskitystä missään .market-hall/.about/.find-us -tyyppisessä osiossa) — ainoa "marginaali" tulee sisäisestä clamp()-pohjaisesta sivupaddingista (--container-pad, 20–50px). Elementorin Site Settings -oletus "Boxed"-sisältöleveys (tyypillisesti 1140px, keskitettynä) kapeutti kuitenkin jokaisen osion sisällön .e-con-inner-kääreen kautta, jolloin leveille näytöille jäi iso tyhjä marginaali kummallekin puolelle — juuri se mitä "elementit ei asetu koko näytön leveydelle" tarkoittaa. Tämä poistaa rajoituksen kauttaaltaan; jokaisen containerin OMA padding-asetus (jo asetettu JSON:issa) hoitaa reunavälit edelleen. */ .e-con-inner { max-width: none !important; } /* ---------- Yleiset ---------- HUOM: Tällä Elementor-versiolla (4.2.2, "Atomic Widgets" -kokeilu päällä) css_classes EI tallennu Widget-elementeille (Heading, Text Editor, Button, Image) tuonnissa/renderöinnissä — vain Container- elementeille. Siksi .tf-text-link ei koskaan käytännössä osu mihinkään (jätetty varmuuden vuoksi, ei haittaa). Alleviivaus on sen sijaan asetettu natiivisti jokaiselle napille (typography_text_decoration). */ .tf-text-link { text-decoration: underline !important; text-underline-offset: 4px; padding: 0 !important; border: none !important; background: transparent !important; display: inline-block !important; width: auto !important; } .tf-text-link .elementor-button-content-wrapper { justify-content: flex-start; } .tf-text-link--light { color: #FFFFFF !important; } /* ---------- Header ---------- */ .tf-header-row { position: sticky !important; top: 0 !important; z-index: 999; background: #FFFFFF; } /* TÄRKEÄ löydös: Elementorin container-elementti käyttää oletuksena width:100% (CSS-muuttujan --width kautta), EI content-perustaista automaattileveyttä, ellei "Width"-kenttää aseteta erikseen natiivisti (mikä puolestaan ei tallennu luotettavasti tällä versiolla samasta syystä kuin muutkin tässä tiedostossa mainitut natiivi-asetusbugit). Header- ja footer-rivin sisäryhmät (nav-linkit, logo-ryhmä jne.) eivät ole tarkoitettu venymään koko rivin levyisiksi, vaan mahtumaan oman sisältönsä mukaisesti vierekkäin — muuten footerin 4 ryhmää pinoutuvat allekkain (width:100% + flex-wrap yhdessä) ja headerin ryhmät venyvät virheellisen leveiksi (kutistuvat mahtuakseen riville, mutta säilyttävät väärän sisäisen tilanjaon). Todennettu suoraan selaimen laskettujen tyylien CSS-muuttujien kautta (--width: 100% jokaisella). */ .tf-header-row .e-con-inner > .e-con, .tf-footer .e-con-inner > .e-con { width: auto !important; } /* Logo aidosti vaakakeskitetyksi ILMAN että kumpaakaan sivua pakotetaan samanlevyiseksi: flex:1 (tasajako) kokeiltiin ensin, mutta se pakotti "Market Hall / Palvelut / Lounas / Tapahtumat" -ryhmän kutistumaan kapeammaksi kuin sen sisältö tarvitsee (koska oikea puoli on luonnostaan paljon lyhyempi), jolloin "Market Hall" rivittyi kahdelle riville ja meni päällekkäin logon kanssa. CSS Grid (1fr auto 1fr) ratkaisee tämän: nav-ryhmät pysyvät omassa luonnollisessa sisältöleveydessään (justify-self: start/end asemoi vain SIJAINNIN, ei pakota leveyttä). Nimetyt grid-areat (ei pelkkä auto-sijoittelu DOM-järjestyksen mukaan): mobiilissa nav-vasen (tf-nav-desktop) piiloutuu kokonaan display:none- säännöllä, ja pelkkä auto-sijoittelu olisi silloin siirtänyt logon ja hampurilaisvalikon vasemmalle "täyttämään aukon" — nimetty alue pitää ne omassa sarakkeessaan riippumatta siitä onko naapuri piilossa. */ .tf-header-row > .e-con-inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-areas: "navleft logo navright" !important; align-items: center !important; column-gap: 20px; } .tf-header-row > .e-con-inner > .e-con:first-child { grid-area: navleft !important; justify-self: start !important; } .tf-header-row > .e-con-inner > .elementor-widget-image { grid-area: logo !important; justify-self: center !important; } .tf-header-row > .e-con-inner > .e-con:last-child { grid-area: navright !important; justify-self: end !important; } /* Hampurilaisvalikko: piilossa työpöydällä, näkyy mobiilissa. Desktop-nav (tf-nav-desktop) ja Instagram-kuvake päinvastoin. Instagram-kuvake on Image-widget, jonka omaan css_classes-arvoon ei voi luottaa (ks. yllä), joten se kohdistetaan :has()-valitsimella linkin osoitteen kautta. */ .tf-menu-toggle { display: none; cursor: pointer; } /* Napin teksti oli aiemmin "☰" (Unicode), jonka WordPress muuntaa väriliseksi emoji-KUVAKSI — sama ilmiö kuin nuolinapeissa. Piirretään hampurilaiskuvake CSS:llä: keskiviiva itse elementtinä + kaksi pseudoelementtiä ylä-/alaviivoiksi. */ .tf-menu-toggle .elementor-button-text { display: block; position: relative; width: 26px; height: 2px; background: #000; font-size: 0; line-height: 0; } .tf-menu-toggle .elementor-button-text::before, .tf-menu-toggle .elementor-button-text::after { content: ''; position: absolute; left: 0; width: 26px; height: 2px; background: #000; } .tf-menu-toggle .elementor-button-text::before { top: -8px; } .tf-menu-toggle .elementor-button-text::after { top: 8px; } .tf-mobile-nav { display: none; } .tf-mobile-nav-link:last-child { border-bottom: none !important; } /* HUOM: raja nostettu 900px:stä 1150px:ään. Koko desktop-navi (Market Hall/Palvelut/Lounas/Tapahtumat + Meistä/Sijainti/FI-EN/Instagram + logo) tarvitsee enemmän tilaa kuin 900px riittää monilla tavallisilla kannettavan näytöillä (esim. 1024–1100px), jolloin "Market Hall" alkoi rivittyä kahdelle riville ja mennä päällekkäin logon kanssa. 1150px antaa reilusti puskuria ennen kuin koko rivi edes yrittää mahtua yhdelle riville — hampurilaisvalikko astuu kuvaan aiemmin sen sijaan. */ @media (max-width: 1150px) { .tf-nav-desktop, .tf-header-row .elementor-widget-image:has(a[href*="instagram"]) { display: none !important; } .tf-menu-toggle { display: flex !important; } .tf-mobile-nav.is-open { display: flex !important; } } /* ---------- Footer ---------- T-ikoni ja copyright-teksti olivat alunperin SAMASSA containerissa (pinottuna), mutta mobiilimallikuva vaatii ne ERI kohtiin (ikoni yksin ylhäällä, copyright yksin alhaalla, nav+somelinkit niiden välissä kahtena sarakkeena). JSON jaettiin siis kahdeksi erilliseksi containeriksi (tf-footer-logo, tf-footer-copyright), ja CSS Grid -asemointi pitää ne silti työpöydällä täsmälleen samalla paikalla kuin ennen (ikoni + copyright allekkain "logo"-sarakkeessa nav- ja some-linkkien välissä), mutta järjestää ne mobiilissa mallikuvan mukaisesti täysin eri asetteluun (grid-template-areas). */ .tf-footer > .e-con-inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-areas: "nav icon social" "copy copy copy" !important; align-items: start !important; column-gap: 40px; row-gap: 20px; } /* nav/social ovat kumpikin omassa 1fr-sarakkeessaan ja työntyvät rivin ULKOreunoihin (start/end) — logo jää siten aina AIDOSTI rivin keskelle, riippumatta siitä onko nav- vai some-linkkejä enemmän kummallakin puolella (sama periaate kuin headerin flex:1-korjauksessa yllä). */ .tf-footer-cols { grid-area: nav !important; justify-self: start !important; } .tf-footer-logo { grid-area: icon !important; justify-self: center !important; } .tf-footer-copyright { grid-area: copy !important; justify-self: center !important; } .tf-footer-social { grid-area: social !important; justify-self: end !important; } @media (max-width: 900px) { .tf-footer > .e-con-inner { grid-template-columns: 1fr 1fr !important; grid-template-areas: "icon icon" "nav social" "copy copy" !important; justify-items: center !important; text-align: center !important; row-gap: 30px !important; } /* Työpöydän justify-self:start/end (logon keskitystä varten) pitää nollata mobiilissa takaisin keskitetyksi, muuten nav/social työntyisivät oman sarakkeensa reunaan eivätkä pysyisi keskellä. */ .tf-footer-cols, .tf-footer-social { justify-self: center !important; } .tf-footer-cols { flex-direction: column !important; align-items: center !important; gap: 20px !important; } /* Nav- ja some-sarakkeet saavat vain n. 50% leveydestä miinus padding kapealla näytöllä — työpöydän 21px/16px fontit + pitkä sähköposti- osoite ("info@trainfactory.com") ylittivät oman sarakkeensa ja leikkautuivat pois näkyvistä. Pienennetään fonttia ja sallitaan tarvittaessa rivittyminen sanan sisältä. */ .tf-footer-cols .elementor-widget-button .elementor-button-text, .tf-footer-social .elementor-widget-button .elementor-button-text, .tf-footer-social .elementor-widget-text-editor { font-size: 16px !important; } .tf-footer-social .elementor-widget-button, .tf-footer-social .elementor-widget-text-editor, .tf-footer-cols .elementor-widget-button { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } } /* ---------- Ticker (kategoria-marquee) ---------- Elementorin container oletusarvo "Justify Content" on center kun sitä ei ole erikseen asetettu — koska tf-ticker-track on width:max-content (paljon leveämpi kuin oma säiliönsä), se keskittyi näkyvän kaistaleen sisään, jolloin näkyviin jäi väärä (keskeltä leikattu, kahden kopion sauma) kohta tekstistä ja translateX(-50%)-animaatio ei enää täsmännyt näkyvän ikkunan kanssa → teksti näytti menevän päällekkäin. */ .tf-ticker { overflow: hidden; } .tf-ticker-track { width: max-content !important; justify-content: flex-start !important; animation: tf-ticker-scroll 40s linear infinite; } .tf-ticker-track .elementor-widget-text-editor { white-space: nowrap; } @keyframes tf-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Etusivun hero-kuvakaruselli ---------- */ .tf-hero-photo-band { position: relative !important; height: clamp(280px, 42vw, 810px); overflow: hidden; border-bottom: 3px solid #000; } .tf-hero-photo-slide { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; } /* HUOM: Elementorin todellinen flex-käyttäytyminen (display:flex, justify-content, align-items) on .e-con-inner-kääreessä, EI itse .e-con-luokan elementissä (sama "tupla e-con-inner" -ansa kuin muuallakin projektissa) — siksi sääntö täytyy kohdistaa yhtä tasoa syvemmälle. flex-direction: column -> justify-content ohjaa PYSTY- sijaintia (ei align-items, joka ohjaisi vain vaakasijaintia). Teksti kuuluu sivun alareunaan kuvan päällä, kuten About-heron mallissa. */ .tf-hero-photo-slide > .e-con-inner { height: 100%; justify-content: flex-end !important; } .tf-hero-photo-slide.is-active { opacity: 1; z-index: 1; } .tf-hero-photo-content { padding: 0 150px 90px; max-width: 520px; } @media (max-width: 900px) { .tf-hero-photo-content { padding: 0 24px 32px; } } .tf-hero-photo-dots { position: absolute !important; left: var(--tf-container-pad, 50px) !important; bottom: 18px !important; z-index: 2; } .tf-hero-photo-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); } .tf-hero-photo-dot.is-active { background: #fff; } /* ---------- Market Hall hero-kuva ---------- */ .tf-mh-hero-photo { height: clamp(280px, 45vw, 810px); border-bottom: 3px solid #000; } /* ---------- Näe ja koe ---------- */ /* .tf-seedo-intro (otsikko+nuolet) ja .tf-seedo-grid (kortit) ovat sisarelementtejä yhteisen kääreen sisällä. Kääre on läpinäkyvä ja sillä on Elementorin oletus-gap (20px) + pystypadding (10px+10px) — koska .tf-seedo-intro on väriltään sininen mutta .tf-seedo-grid läpinäkyvä, tuo n. 40px:n oletusrako näkyi valkoisena raitana otsikkolaatikon ja korttirivin välissä, vaikka molemmat näyttivät muuten oikein asetelluilta. */ .e-con-inner:has(> .tf-seedo-intro) { gap: 0 !important; padding: 0 !important; } .tf-seedo-intro { position: relative !important; } /* !important pakollinen: Elementor asettaa jokaiselle elementille oman ID-kohtaisen säännön (esim. .elementor-element.elementor-element-XXXXX), joka on kahden luokan spesifisyydellä (0,0,2,0) vahvempi kuin pelkkä .tf-seedo-arrows (0,0,1,0) — ilman !importantia position palasi aina Elementorin omaan oletukseen "static" ja width oletukseen "100%", jolloin nuolet asettuivat väärään kohtaan ja väärän levyisinä (275px kahdelle pienelle napille). Todennettu suoraan CSS-kaskadista. */ .tf-seedo-arrows { position: absolute !important; right: var(--tf-container-pad, 50px) !important; bottom: 60px !important; width: max-content !important; } .tf-seedo-arrows .elementor-button { border-radius: 0 !important; border: 3px solid #000 !important; background: transparent !important; padding: 16px 20px !important; } /* Nappien teksti oli aiemmin Unicode-nuolimerkki (◀/▶), jonka WordPress muuntaa ajonaikaisesti väriliseksi emoji-KUVAKSI (wp-emoji-release.min.js) — CSS-väriasetus ei voi vaikuttaa kuvaan. Piirretään nuolet sen sijaan puhtaalla CSS:llä (reunus-kolmio-tekniikka), jolloin väri pysyy aina mustana ja on täysin muokattavissa. Elementor ei renderöi Button-widgettiä JOS text-kenttä on tyhjä merkkijono — siksi napeilla on nyt oikea teksti ("Edellinen"/"Seuraava"), joka piilotetaan visuaalisesti (font-size:0) näyttöruudulla, mutta pysyy näytönlukijoille. */ .tf-seedo-arrows .elementor-button-text { font-size: 0; line-height: 0; } .tf-seedo-arrows .elementor-widget-button:first-child .elementor-button-text::before { content: ''; display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid #000; } .tf-seedo-arrows .elementor-widget-button:last-child .elementor-button-text::before { content: ''; display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #000; } .tf-seedo-grid { overflow-x: auto; scrollbar-width: none; cursor: grab; flex-wrap: nowrap !important; gap: 0 !important; border-top: 3px solid #000 !important; } /* Kortit ovat oikeasti .tf-seedo-gridin OMAN e-con-inner-kääreen lapsia (sama toistuva rakenne kuin kaikkialla muuallakin Elementorissa), ei suoraan .tf-seedo-gridin lapsia — pelkkä yllä oleva gap:0 ei siis riittänyt, koska väli asuu tuossa sisemmässä kääreessä. Sama koskee myös pystysuuntaista paddingia (Elementorin ~10px-oletus ylä/ala- reunassa), joka jäi jäljelle vaikka gap oli jo nollattu. */ .tf-seedo-grid > .e-con-inner { gap: 0 !important; padding: 0 !important; } .tf-seedo-grid::-webkit-scrollbar { display: none; } .tf-seedo-grid.tf-dragging { cursor: grabbing; } .tf-seedo-card { flex: 0 0 clamp(260px, 32vw, 447px) !important; border-right: 3px solid #000; } /* Kortin sisällä kuvan ja alaotsikko-rivin väliin ei alkuperäisessäkään suunnittelussa jää tilaa (.see-do-card ei aseta gapia lainkaan) — sama oletus-gap/padding-vuoto korjattu myös kortin omaan sisäkääreeseen. */ .tf-seedo-card > .e-con-inner { gap: 0 !important; padding: 0 !important; } .tf-seedo-media { aspect-ratio: 1 / 1.16; overflow: hidden; } .tf-seedo-media img { width: 100%; height: 100%; object-fit: cover; } /* Kortit joissa kuva on suoraan Image-widgetinä (ei erillistä media-containeria): css_classes ei tallennu widgeteille tällä Elementor-versiolla, joten kohdistus tehdään toimivan yläkontainerin (tf-seedo-card) kautta suoraan lapsi-widgettiin. HUOM: valitsin rajattu SUORAAN lapseen (> .e-con-inner >), koska muuten se osuu myös alaotsikkorivin pieneen pin-ikoniin (sekin on .elementor-widget-image, mutta yhtä tasoa syvemmällä alaotsikkorivin omassa e-con-inner-kääreessä) ja venytti/ rajasi sen näkymättömiin object-fit: cover -säännöllä. */ .tf-seedo-card > .e-con-inner > .elementor-widget-image { aspect-ratio: 1 / 1.16; overflow: hidden; } .tf-seedo-card > .e-con-inner > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; } /* ---------- About-kuva ---------- .tf-about-media-img oli Image-widgetin oma luokka (ei tallennu), joten kohdistus tehdään toimivan yläkontainerin (tf-about-media) kautta. */ .tf-about-media, .tf-findus-media { overflow: hidden; } .tf-about-media .elementor-widget-image img, .tf-findus-media img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Market Hall: kuva+teksti-rivit (tf-mh-row) ---------- HUOM: rakenne muutettu kahdesta itsenäisestä pystysarakkeesta kolmeksi riviksi (yksi kuva + yksi teksti per rivi). align_items: center on asetettu natiivisti jokaiselle riville JSON:issa, mutta varmistetaan sama myös CSS:llä suoraan e-con-inner-tasolle — sama "tupla e-con-inner" -ansa on toistunut tässä projektissa niin usein ettei pelkkään natiiviasetukseen kannata luottaa sokeasti. */ .tf-mh-row > .e-con-inner { align-items: center !important; } .tf-mh-img { aspect-ratio: 561/692; overflow: hidden; } /* HUOM: pelkkä "height: 100%" itse img-tagille ei riitä, koska väliin jää kaksi kääre-elementtiä (.e-con-inner, .elementor-widget-image) joilla ei ole omaa korkeutta — sama toistuva bugi kuin Palvelut-sivun korteissa ja tapahtumakorteissa. Kuva jäi n. 474px korkuiseksi 780px:n laatikossa, jättäen ison valkoisen raon kuvan alle ennen seuraavaa tekstilohkoa. */ .tf-mh-img > .e-con-inner { height: 100%; padding: 0 !important; } .tf-mh-img .elementor-widget-image { height: 100%; } .tf-mh-img img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Footer T-ikoni tumma tausta ---------- .tf-t-icon-light oli Image-widgetin oma luokka (ei tallennu tälle Elementor-versiolle) — kohdistus tehdään toimivan yläkontainerin (tf-footer-logo, lisätty footer.json:iin) kautta. */ .tf-t-icon-light img { filter: invert(1); } .tf-footer-logo .elementor-widget-image img { filter: invert(1); } /* ---------- Palvelut-sivut (services / services-art-culture / services-food-drink / services-sports-games) ---------- HUOM: pelkkä "height: 100%" itse img-tagille ei riitä, koska väliin jää kaksi kääre-elementtiä (.e-con-inner, .elementor-widget-image) joilla ei ole omaa korkeutta — height: 100% ei silloin osaa laskeutua mihinkään ja kuva renderöityi vain ~24px korkuisena kontin ollessa 269px (4:3). Sama korjaus kuin tapahtumakorteissa: korkeus pitää asettaa koko ketjuun. */ .tf-svc-thumb { aspect-ratio: 4 / 3; overflow: hidden; } .tf-svc-thumb > .e-con-inner { height: 100%; padding: 0 !important; } .tf-svc-thumb .elementor-widget-image { height: 100%; } .tf-svc-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Palvelukartta (services-map) ---------- */ /* HUOM: 26 Button-widgetiä eivät rivity oletuksena (white-space:nowrap), joten pisin nimi ("Empanadas Café" tms.) pakotti koko sivupalkin paljon JSON:issa asetettua 329px leveämmäksi — kartalle ei jäänyt tilaa lainkaan (0px). Lukitaan leveys ja pakotetaan tekstit rivittymään palkin sisään sen sijaan että työntäisivät sitä leveämmäksi. */ .tf-map-sidebar { max-height: 740px; overflow-y: auto; width: 329px !important; flex: 0 0 329px !important; } .tf-map-sidebar .elementor-widget-button, .tf-map-sidebar .elementor-button, .tf-map-sidebar .elementor-button-text { white-space: normal !important; max-width: 100% !important; overflow-wrap: break-word !important; } .tf-map-graphic { position: relative !important; flex: 1 !important; min-width: 0 !important; } .tf-map-graphic-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .tf-map-graphic-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* .tf-map-graphic-bg oli Image-widgetin oma luokka (ei tallennu) — varakohdistus toimivan yläkontainerin (tf-map-graphic) suoran lapsi-widgetin kautta. */ .tf-map-graphic .elementor-widget-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .tf-map-graphic .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* HUOM: pelkkä position:absolute ei riittänyt — Elementorin oma leveysasetus (native width:26px JSON:issa) ei jostain syystä säily absoluuttisesti asemoidulle containerille, jolloin pinni venyi koko kartan levyiseksi soikioksi (border-radius:50% + 916px leveys = pitkä linssin muotoinen viiva). Koko lukitaan suoraan CSS:llä. */ .tf-map-pin, .tf-map-pin-label { position: absolute !important; } .tf-map-pin { width: 26px !important; height: 26px !important; min-height: 26px !important; flex: 0 0 auto !important; } .tf-map-pin-1 { left: 44.47% !important; top: 30.54% !important; } .tf-map-pin-2 { left: 28.52% !important; top: 19.73% !important; } .tf-map-pin-3 { left: 25.14% !important; top: 22.57% !important; } .tf-map-pin-4 { left: 21.76% !important; top: 25.41% !important; } .tf-map-pin-5 { left: 18.39% !important; top: 28.24% !important; } .tf-map-pin-6 { left: 15.01% !important; top: 31.08% !important; } .tf-map-pin-7 { left: 11.63% !important; top: 33.92% !important; } .tf-map-pin-8 { left: 7.13% !important; top: 43.92% !important; } .tf-map-pin-9 { left: 17.35% !important; top: 47.70% !important; } .tf-map-pin-10 { left: 25.80% !important; top: 40.81% !important; } .tf-map-pin-11 { left: 27.86% !important; top: 36.08% !important; } .tf-map-pin-12 { left: 30.96% !important; top: 33.78% !important; } .tf-map-pin-13 { left: 34.62% !important; top: 33.38% !important; } .tf-map-pin-14 { left: 39.59% !important; top: 35.81% !important; } .tf-map-pin-15 { left: 46.81% !important; top: 44.05% !important; } .tf-map-pin-16 { left: 35.84% !important; top: 55.81% !important; } .tf-map-pin-17 { left: 60.69% !important; top: 51.49% !important; } .tf-map-pin-18 { left: 59.29% !important; top: 66.62% !important; } .tf-map-pin-19 { left: 75.80% !important; top: 65.14% !important; } .tf-map-pin-20 { left: 72.33% !important; top: 68.11% !important; } .tf-map-pin-21 { left: 62.85% !important; top: 75.95% !important; } .tf-map-pin-22 { left: 59.85% !important; top: 78.38% !important; } .tf-map-pin-23 { left: 56.85% !important; top: 75.54% !important; } .tf-map-pin-24 { left: 53.85% !important; top: 72.57% !important; } .tf-map-pin-25 { left: 51.22% !important; top: 76.22% !important; } .tf-map-pin-26 { left: 51.03% !important; top: 85.81% !important; } .tf-map-pin-p { left: 88.56% !important; top: 54.86% !important; } /* Korostuskuva (tf-map-highlight) täyttää saman .tf-map-graphic .elementor- widget-image -säännön kuin taustakartta (asemointi/koko jo hoidettu ylempänä) — lisätään vain pointer-events: none ettei se estä nastojen klikkausta, ja z-index-järjestys DOM-järjestyksen mukaan (tausta, sitten korostus, sitten nastat päällimmäisenä). */ .tf-map-highlight { pointer-events: none !important; z-index: 1; } .tf-map-pin { z-index: 2; } /* .tf-map-sidebar-item oli Button-widgetin oma luokka (ei tallennu) — kohdistus toimivan yläkontainerin (tf-map-sidebar) kautta. is-active lisätään/poistetaan ajonaikaisesti JS:llä klikatessa. */ .tf-map-sidebar .elementor-widget-button { cursor: pointer; } .tf-map-sidebar .elementor-widget-button:hover .elementor-button-text { text-decoration: underline; } .tf-map-sidebar .elementor-widget-button.is-active .elementor-button-text { text-decoration: underline; } @media (max-width: 800px) { .tf-map-sidebar { max-height: 280px; } } /* ---------- Sijainti (find-us) ---------- */ .tf-fu-top-map { overflow: hidden; max-height: clamp(220px, 34vw, 520px); } .tf-fu-top-map-img img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: difference; } /* .tf-fu-top-map-img oli Image-widgetin oma luokka (ei tallennu) — varakohdistus toimivan yläkontainerin (tf-fu-top-map) kautta. */ .tf-fu-top-map .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: difference; } .tf-fu-map-promo-img { mix-blend-mode: multiply; } .tf-fu-map-promo-img img { width: 100%; height: auto; display: block; } .tf-fu-discover-media { position: relative !important; } /* HUOM: suhteellinen polku (ei {{SITE_URL}}) — sivusto siirtyy toiselle palvelimelle. Varmista että hero-graphic.svg on ladattu myös uuden palvelimen kansioon wp-content/uploads/train-factory/ . */ .tf-fu-discover-media::after { content: ''; position: absolute; inset: 0; background: url('/wp-content/uploads/train-factory/hero-graphic.svg') center/60% no-repeat; pointer-events: none; } /* ---------- Lounaslistat (lunch-menus): ravintolavalitsin pudotusvalikkona ---------- Sama malli kuin Tapahtumat-sivun kohde-suodattimessa (tf-filter-dropdown/ tf-venue-list): tf-lunch-dropdown on togglenappi, jonka alle tf-lunch-tabs avautuu kelluvana listana. position: relative tarvitaan silti (vaikka sticky poistettiin), jotta kelluva lista asemoituu togglen alle eikä jonkin muun esivanhemman suhteen. */ .tf-lunch-dropdown { position: relative; background: #FFFFFF; border-bottom: 3px solid #000; } /* .tf-lunch-toggle oli Button-widgetin oma luokka (ei tallennu tälle Elementor-versiolle) — kohdistus tehdään toimivan yläkontainerin (tf-lunch-dropdown, Container-elementti, säilyttää luokkansa) kautta, samaan tapaan kuin Tapahtumien tf-filter-toggle-nuoli. */ .tf-lunch-dropdown > .e-con-inner > .elementor-widget-button .elementor-button-text::after { content: ''; display: inline-block; margin-left: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; vertical-align: middle; } .tf-lunch-tabs { display: none; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 50; width: 280px !important; background: #fff !important; border: 3px solid #000 !important; border-top: none !important; } .tf-lunch-dropdown.is-open .tf-lunch-tabs { display: flex !important; } /* .tf-lunch-tab-btn oli Button-widgetin oma luokka (ei tallennu tälle Elementor-versiolle) — kohdistus tehdään toimivan yläkontainerin (tf-lunch-tabs) kautta. is-active lisätään ajonaikaisesti JS:llä suoraan elementtiin, joten se toimii normaalisti. */ .tf-lunch-tabs .elementor-widget-button { width: 100%; border-top: 1px solid rgba(0,0,0,.15); cursor: pointer; } .tf-lunch-tabs .elementor-widget-button:first-child { border-top: none; } .tf-lunch-tabs .elementor-widget-button .elementor-button { width: 100%; } .tf-lunch-tabs .elementor-widget-button.is-active .elementor-button { background: #F37060 !important; } .tf-lunch-panel { display: none; } .tf-lunch-panel.is-active { display: block; } /* HUOM: height: 100% poistettu kuva-widgetiltä ja img:ltä — se pakotti kuvan aina täyttämään koko kontainerin korkeuden ja ohitti Elementorin omat Height/Object Fit -asetukset kokonaan (käyttäjä ei saanut asetettua kuvalle omaa 500px-korkeutta). min-height toimii silti "lattiana" niille kuville joille ei ole asetettu omaa korkeutta. */ .tf-discover-logo-overlay { position: relative !important; overflow: hidden; min-height: 320px; } .tf-discover-logo-overlay .elementor-widget-image { width: 100%; } .tf-discover-logo-overlay .elementor-widget-image img { width: 100%; filter: brightness(0.8); } .tf-discover-logo-overlay-graphic { position: absolute !important; inset: 0; pointer-events: none; } /* HUOM: sama "tupla e-con-inner" -ansa kuin muuallakin — tf-discover- logo-overlay-graphicin ainoa lapsi on .e-con-inner, joten flex- keskitys pitää kohdistaa siihen, ei itse tf-discover-logo-overlay- graphic-elementtiin (jolla ei näy mitään vaikutusta, koska sillä on vain yksi täysleveä/täyskorkea lapsi). */ .tf-discover-logo-overlay-graphic > .e-con-inner { display: flex !important; align-items: center !important; justify-content: center !important; height: 100%; } /* !important pakollinen: tämä on sanamerkki/logografiikka joka pitää AINA skaalautua suhteessa leveyteensä (ei koskaan rajautua/venyä pystysuunnassa). Jos joku vahingossa asettaa Elementorista kiinteän Height + Object Fit: Cover -asetuksen tälle kuvalle, se voi olla kehystään korkeampi ja leikkautua overflow:hidden:lla näkymättömiin. */ .tf-discover-logo-overlay-graphic img { width: 40% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* ---------- Tapahtumat: hero-osion pallot (tf-wo-hero-dots) ---------- Jokaiselle pallolle on JSONissa asetettu natiivisti width:8px/ height:8px/border-radius:50% — mutta Elementorin flex-rivi venyttää lapset silti tasan (flex-grow-oletus) JA pystysuunnassa koko rivin korkuisiksi (align-items: stretch), jolloin pyöreät 8px-pallot näyttivät venyneiltä soikeilta "pillereiltä". Oikea flex-rivi on taas .e-con-inner, ei itse tf-wo-hero-dots-luokan elementti (sama tuttu tuplaus-ansa). */ .tf-wo-hero-dots > .e-con-inner { align-items: center !important; } .tf-wo-hero-dots > .e-con-inner > .e-con { flex: 0 0 auto !important; width: 8px !important; height: 8px !important; } /* ---------- Tapahtumat: työkalurivin näkymä-ikonit (tf-view-btn) ---------- Sama juurisyy kuin muuallakin: Elementorin container saa oletuksena width: var(--width) (=100%), vaikka flex-grow olisi 0 — leveys ei tule flex-grow'sta vaan omasta width-asetuksesta, joten pelkkä flex-grow:0 ei riitä. Ikonipainikkeet (22px kuva + 6px padding) venyivät koko rivin levyisiksi valtaviksi laatikoiksi. */ .tf-events-toolbar > .e-con-inner > .tf-view-btn { flex: 0 0 auto !important; width: auto !important; } /* ---------- Tapahtumat-ruudukko (whats-on-grid): kohde-suodatin ---------- whats-on-list ei käytä tätä — sillä ei ole suodatinta. Alkuperäisessä suunnittelussa (events/whats-on-grid.html) lista on ABSOLUTE-asemoitu kelluva pudotusvalikko togglen alla — pelkkä display:none/flex ei riittänyt, koska lista työntyi omaksi riviksi sivulle ja vei muiden elementtien tilan. */ .tf-filter-dropdown { position: relative; } .tf-filter-dropdown .tf-venue-list { display: none; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 40; width: 220px !important; background: #fff !important; border: 3px solid #000 !important; border-top: none !important; } .tf-filter-dropdown.is-open .tf-venue-list { display: flex !important; } /* .tf-filter-toggle ja .tf-venue-btn olivat Button-widgetin omia luokkia (eivät tallennu) — kohdistus toimivien yläkontainerien (tf-filter-dropdown, tf-venue-list) kautta. active lisätään ajonaikaisesti JS:llä. */ .tf-filter-dropdown .elementor-widget-button, .tf-venue-list .elementor-widget-button { cursor: pointer; } .tf-venue-list .elementor-widget-button { width: 100%; border-top: 1px solid rgba(0,0,0,.15); } .tf-venue-list .elementor-widget-button:first-child { border-top: none; } .tf-venue-list .elementor-widget-button .elementor-button { width: 100%; } /* HUOM: väri pitää asettaa NÄKYVÄÄN nappiin (.elementor-button), ei sen ulkokääreeseen (.elementor-widget-button) — kääre ei täytä napin koko alaa, joten väri näkyi aiemmin irrallisena laatikkona napin vieressä sen sijaan että täyttäisi koko napin taustan. */ .tf-venue-list .elementor-widget-button.active .elementor-button { background: #F37060 !important; } .tf-event-row.tf-is-hidden, .tf-list-row.tf-is-hidden { display: none !important; } /* ---------- Tapahtumat-ruudukko: tapahtumakuvan koko lukitaan ---------- .tf-event-media-img oli Image-widgetin oma luokka (ei tallennu Button/ Image-tyyppisille widgeteille tällä Elementor-versiolla), joten kohdistus toimivan yläkontainerin (tf-event-media, Container-elementti, SÄILYTTÄÄ luokkansa) kautta. Ilman tätä mikä tahansa Mediakirjastosta valittu kuva näkyi omassa luonnollisessa koossaan (usein paljon korttia isompana) sen sijaan että rajautuisi korttiin sopivaksi. */ .tf-event-media { height: 260px; min-height: 260px; overflow: hidden; position: relative; } /* Elementorin oletus ~10px pystypadding jäi näkymään .e-con-inner- kääreessä (sama toistuva vuoto kuin muuallakin) ja söi 20px pois kuvan korkeudesta (260px -> 240px) — nollataan se erikseen. */ .tf-event-media > .e-con-inner { padding: 0 !important; height: 100%; } .tf-event-media .elementor-widget-image { height: 100%; } .tf-event-media .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 700px) { .tf-event-media { height: 220px; min-height: 220px; } } /* Suodatinpainikkeen teksti oli aiemmin "Kaikki ▾" (Unicode-merkillä), joka WordPress muuntaisi väriliseksi emoji-KUVAKSI keskellä tekstiä — sama ilmiö kuin nuolinapeissa/hampurilaisvalikossa. Nuoli piirretään CSS ::after -kolmiona; JS päivittää enää pelkän kohteen nimen tekstinä. */ .tf-filter-dropdown > .e-con-inner > .elementor-widget-button .elementor-button-text::after { content: ''; display: inline-block; margin-left: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; vertical-align: middle; } /* ---------- Prosentuaaliset sarakkeet (2/3/4-palstaiset asettelut) ---------- Elementorin oma "Width (%)" -kenttä flex-lapsielementeille EI tallennu/ sovellu tällä versiolla (sama juurisyy kuin css_classes-bugissa) — jokainen sivuston moni­palstainen osio (Market Hall, About, Löydä meidät, Palvelut- ruudukot, tapahtumakortit, jne.) käytti tätä kenttää, joten kaikki pinoutuivat allekkain rikki menneen leveyden takia. HUOM (korjattu): flex-shrink EI riitä ratkaisemaan gap+wrap-yhdistelmää, koska flex-wrap päättää mahtuuko alkio nykyiselle riville alkuperäisen (kutistamattoman) koon perusteella JO ENNEN kuin shrink lasketaan — eli esim. Market Hallin 570px+570px+20px gap-väli (yht. 1160px > 1140px) työnsi toisen laatikon aina seuraavalle riville shrink-arvosta riippumatta. Kaksi eri korjaustapaa kiinteän parin/ruudukon mukaan: .tf-w-45/50/55: aina täsmälleen 2 lasta samassa rivissä (esim. Market Hall, About, Löydä meidät, tapahtumakortin media+info) — käytetään flex-basis:0 + flex-grow-suhdetta, joka jakaa jäljelle jäävän tilan (gapin vähentämisen JÄLKEEN) automaattisesti oikeassa suhteessa, olipa kyseisen rivin oma gap-arvo mikä tahansa (20/30/40px) — ei tarvitse tietää tarkkaa gap-arvoa etukäteen. .tf-w-25/33: osa tasakokoisten korttien flex-wrap-ruudukkoa (esim. Palvelut-sivujen 12 kortin rivi), jossa TARKOITUKSELLA halutaan kortin rivittyvän seuraavalle riville 4./3. kortin jälkeen — flex-grow ei käy, koska se estäisi rivityksen kokonaan. Sivuston oletusväli on 20px kun flex_gap-kenttää ei ole erikseen asetettu (todennettu suoraan julkaistulta sivulta), joten leveydestä on vähennetty kortin osuus tuosta välistä valmiiksi. */ /* !important pakollinen: Elementorin frontend.min.css asettaa ".e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis); }" — KAKSI luokkaa (spesifisyys 0,0,2,0), joka voittaa aina yhden luokan säännön (esim. pelkkä .tf-w-50, spesifisyys 0,0,1,0) riippumatta CSS:n järjestyksestä. Todennettu suoraan selaimen laskettujen tyylien kautta: ilman !importantia flex-grow jäi aina Elementorin omaan oletukseen (0) eikä .tf-w-50 koskaan tehonnut, vaikka luokka oli oikein elementissä. */ .tf-w-25 { width: calc(25% - 15px) !important; flex: 0 1 calc(25% - 15px) !important; } .tf-w-33 { width: calc(33.333% - 13.333px) !important; flex: 0 1 calc(33.333% - 13.333px) !important; } .tf-w-45 { flex: 45 1 0% !important; } .tf-w-50 { flex: 1 1 0% !important; } .tf-w-55 { flex: 55 1 0% !important; } @media (max-width: 900px) { .tf-w-25, .tf-w-33, .tf-w-50, .tf-w-45, .tf-w-55 { width: 100% !important; flex: 1 1 100% !important; } } /* Alkuperäinen sivusto erottaa sarakkeet/kortit AINA reunaviivalla (border-right/border-left), ei välillä — sarakkeiden väliin ei pidä jäädä tyhjää valkoista rakoa. Sivustonlaajuinen oletusväli (~20px, joka näkyy kun containerin omaa flex_gap-arvoa ei ole erikseen asetettu) näkyi kuitenkin ylimääräisenä valkoisena rakona minkä tahansa 2/3/4- palstaisen rivin sisällä. Poistetaan väli jokaiselta suoralta yläkontainerilta jolla on tf-w-*-luokkainen lapsi — :has() toimii kaikissa nykyisissä selaimissa, eikä vaadi erillistä luokkaa jokaiseen yläkontaineriin (joilla ei useimmilla ollut mitään omaa luokkaa). */ .e-con-inner:has(> .tf-w-25), .e-con-inner:has(> .tf-w-33), .e-con-inner:has(> .tf-w-45), .e-con-inner:has(> .tf-w-50), .e-con-inner:has(> .tf-w-55) { gap: 0 !important; /* Sama Elementorin ~10px pystypaddingin oletusvuoto kuin muuallakin — aiemmin nollasin vain gapin, mutta ylä/ala-padding jäi näkymään ohuena valkoisena raitana rivin ylä- ja alapuolelle. */ padding: 0 !important; } /* ---------- Täysleveät media-containerit (ei sisäistä paddingia) ---------- Elementor asettaa JOKAISELLE containerille oletuksena n. 10px paddingin CSS-muuttujan kautta, ellei sitä nimenomaisesti ole ylikirjoitettu (sama ilmiö kuin flex-grow/-basis-oletusarvoissa). Nämä containerit ovat tarkoitettu täysleveiksi kuva-alueiksi (kuva täyttää koko laatikon reunasta reunaan) — kukaan JSON-tiedostoista ei koskaan asettanut niille paddingia nollaksi erikseen, joten oletus-10px jäi näkyviin läpinäkyvän taustan läpi valkoisena "rakona" kuvan reunalla, vaikka container itsessään oli jo kiinni naapurissaan (gap: 0). */ .tf-about-media, .tf-findus-media, .tf-mh-hero-photo, .tf-mh-img, .tf-svc-thumb, .tf-fu-top-map, .tf-map-graphic, .tf-discover-logo-overlay, .tf-event-media, .tf-seedo-media { padding: 0 !important; } /* ---------- tf-flush: sama 10px-oletuspadding-vuoto, laajempi audit ---------- Yllä oleva lista kattoi vain tietyt nimetyt media-luokat, mutta sama ilmiö osui myös MONEEN tf-w-*-sarakkeeseen joilla ei ollut mitään omaa erityisluokkaa (esim. CTA-osion otsikko/teksti-sarakkeet, Palvelut- ruudukon kortit, Market Hallin masonry-sarakkeet). Kävin läpi KAIKKI 14 tiedostoa ohjelmallisesti: jokainen tf-w-*-container jolla EI ollut omaa "padding"-arvoa JSON:issa sai tämän uuden tf-flush-merkkiluokan (68 kpl) — containerit joilla JO ON oma tarkoituksellinen padding (esim. Market Hallin 60px tekstisarakkeet) EIVÄT saaneet luokkaa, joten niiden padding säilyy koskemattomana. */ .tf-flush { padding: 0 !important; } /* ---------- Responsiivisuus ---------- */ @media (max-width: 900px) { .tf-hero-photo-band { height: clamp(280px, 60vw, 500px); } .tf-seedo-card { flex-basis: clamp(220px, 70vw, 320px) !important; } } /* HUOM: nuolet pysyvät position:absolute-tilassa myös mobiilissa (käyttäjän toimittaman mallikuvan mukaan nuolet ovat aina oikeassa reunassa, eivät tekstin alla omalla rivillään). Jotta otsikko/teksti ei mene nuolien alle kapealla näytöllä, tekstisisällölle varataan tilaa oikealta reunasta. */ .tf-seedo-intro > .e-con-inner > .elementor-widget-heading, .tf-seedo-intro > .e-con-inner > .elementor-widget-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-text-editor { max-width: calc(100% - 130px) !important; } @media (max-width: 500px) { /* Hyvin kapealla näytöllä 130px on liikaa varattua tilaa "Tutustu palveluihimme" -linkille — nuolet pienenevät ja siirtyvät hieman lähemmäs reunaa, jotta teksti mahtuu paremmin. */ .tf-seedo-intro > .e-con-inner > .elementor-widget-heading, .tf-seedo-intro > .e-con-inner > .elementor-widget-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-text-editor { max-width: calc(100% - 100px) !important; } .tf-seedo-arrows { right: 20px !important; } .tf-seedo-arrows .elementor-button { padding: 12px 14px !important; } } /* ---------- Meistä-sivu: hero "The" -alleviivaus ---------- .tf-about-hero-the oli Text Editor -widgetin oma luokka (ei tallennu), joten kohdistus tehdään toimivan yläkontainerin (tf-about-hero, Container-elementti, säilyttää luokkansa) kautta ensimmäiseen Text Editor -lapseen. border-bottom antaa paksumman, siistimmän alleviivauksen kuin typography_text_decoration: underline. */ .tf-about-hero > .e-con-inner > .elementor-widget-text-editor, .tf-about-services-photo > .e-con-inner > .elementor-widget-text-editor { display: inline-block; border-bottom: 3px solid #F2EDE6; padding-bottom: 4px; } /* ---------- Meistä-sivu: vaihtuva sanalista (tf-about-word-rotator) ---------- Sama ristihäivytys-tekniikka kuin etusivun hero-karusellissa: kaikki sanat pinottu päällekkäin (position: absolute), vain .is-active näkyy. JS vaihtaa aktiivisen luokan ajastetusti. */ .tf-about-word-rotator { position: relative !important; min-height: 220px; } .tf-about-word-rotator > .e-con-inner { position: relative; width: 100%; height: 100%; } .tf-about-word-slide { position: absolute !important; inset: 0; width: 100%; opacity: 0; transition: opacity 1s ease; } .tf-about-word-slide.is-active { opacity: 1; z-index: 1; } @media (max-width: 900px) { .tf-about-word-rotator { min-height: 120px; } .tf-about-services-box, .tf-about-word-rotator { width: 100% !important; flex: 1 1 100% !important; } } /* ---------- Market Hall -ravintolaticker (tf-menu-ticker) ---------- Sama .tf-about-word-rotator/.tf-about-word-slide-mekaniikka ja JS kuin Meistä-sivun sanakiertäjässä, mutta pinottuna riveiksi allekkain isomman listan (10-21 ravintolaa) sijaan yhden ison keskitetyn sanan. Ilman tätä ylikirjoitusta jokainen rivi perisi 220px min-heightin ja koko lista venyisi valtavaksi. */ .tf-menu-ticker .tf-about-word-rotator { min-height: 86px; } @media (max-width: 900px) { .tf-menu-ticker .tf-about-word-rotator { min-height: 62px; width: 100% !important; flex: 1 1 100% !important; } } .tf-service-card:hover, .tf-service-card:hover * { color: #BA4435 !important; border-color: #BA4435 !important; } /* ========================================================= TF – "Lue lisää" SEO-tekstilohko (kategoriasivut) Pelkkä CSS: teksti aina HTML:ssä → indeksoituu HUOM: fonttinimet käyttävät välilyönnillisiä muotoja ('ABC Diatype', 'MFred 2.0'). Ne toimivat, koska tiedoston alussa on määritelty aliakset molemmille kirjoitusasuille. ========================================================= */ .tf-seo { max-width: 820px; margin: 3rem auto; font-family: 'ABC Diatype', system-ui, sans-serif; color: #1a1a1a; line-height: 1.7; } /* otsikko – musta */ .tf-seo h2, .tf-seo h3 { font-family: 'MFred 2.0', 'ABC Diatype', sans-serif; color: #1a1a1a; line-height: 1.15; margin: 0 0 1rem; } .tf-seo p { margin: 0 0 1rem; } /* piilotettava osuus – nappi keskitettynä */ .tf-seo details { margin-top: .5rem; text-align: center; } .tf-seo details > summary { list-style: none; } .tf-seo details > summary::-webkit-details-marker { display: none; } /* nappi (= summary) – #f37060, tumma teksti, neliömäinen, kevyt pyöristys HUOM: font-weight 700 (ei 600) — ABC Diatypessa on vain 400 ja 700, joten 600 pakotti selaimen syntetisoimaan faux boldin. */ .tf-seo__btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .75rem 1.4rem; cursor: pointer; font-family: 'ABC Diatype', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: #1a1a1a; background: #f37060; border-radius: 6px; transition: background .2s ease, transform .1s ease; user-select: none; } .tf-seo__btn:hover { background: #e05a49; } .tf-seo__btn:active { transform: translateY(1px); } .tf-seo__btn:focus-visible { outline: 3px solid #95BBBF; outline-offset: 2px; } /* nuoli */ .tf-seo__btn::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .tf-seo details[open] .tf-seo__btn::after { transform: rotate(-135deg); } /* tekstin vaihto auki/kiinni */ .tf-seo__btn .label-close { display: none; } .tf-seo details[open] .tf-seo__btn .label-open { display: none; } .tf-seo details[open] .tf-seo__btn .label-close { display: inline; } /* piilotettu teksti – vasempaan tasattuna (nappi pysyy keskellä) */ .tf-seo__more { margin-top: 1.25rem; text-align: left; } /* ========================================================= Variantti: Market Hall -sivu Keskitetty, versaali, läpinäkyvä "ghost" -nappi ========================================================= */ .tf-seo--market { max-width: 900px; text-align: center; } /* versaaliotsikko sivun tyyliin */ .tf-seo--market h2 { text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: .01em; } /* keskitetty, luettava johdanto */ .tf-seo--market > p { max-width: 720px; margin-inline: auto; } /* nappi – läpinäkyvä ghost, musta ääriviiva */ .tf-seo--market .tf-seo__btn { text-transform: uppercase; letter-spacing: .06em; padding: .8rem 1.9rem; color: #1a1a1a; background: transparent; border: 2px solid #1a1a1a; border-radius: 6px; } .tf-seo--market .tf-seo__btn:hover { background: #1a1a1a; color: #F2EDE6; } /* piilotettu teksti vasempaan tasattuna (nappi & johdanto keskellä) */ .tf-seo--market .tf-seo__more { max-width: 720px; margin-inline: auto; text-align: left; } /* ========================================================================== HEADER-LISÄYKSET – liitä nykyisen Custom CSS:n LOPPUUN Todennettu selaimessa 27.8.2026 osoitteessa https://trainfactory.fi-e.seravo.com/ — ei arvattu. JUURISYY joka korjattiin: kaikki aiemmat säännöt kohdistuivat ".tf-header-row > .e-con-inner" -kääreeseen. Sitä ei ole olemassa: kontit on tuotu "e-con-full" -tyyppisinä, jolloin Elementor EI luo sisäkäärettä ja lapset ovat suoraan .e-con-elementin alla. Todennettu: .tf-header-row:n display oli "flex", ei "grid". Todellinen rakenne: header.elementor-location-header └── .tf-header-row (e-con-full) ├── .tf-nav-desktop.tf-nav-left ├── .tf-header-logo └── .e-con (ei omaa tf-luokkaa) ├── .tf-nav-desktop.tf-nav-right + Instagram └── .tf-menu-toggle (hampurilainen) ========================================================================== */ /* ---------- 1. Header-palkki, työpöytä ---------- Tuotannon mitat: 1fr 1fr 1fr, 65px, padding 0 32px. */ .tf-header-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; grid-template-areas: "navleft logo navright" !important; align-items: center !important; gap: 0 !important; height: 65px; padding: 0 32px !important; max-width: none !important; background: #FFFFFF; border-bottom: 3px solid #000000; } .tf-header-row > .tf-nav-left { grid-area: navleft !important; justify-self: start !important; } .tf-header-row > .tf-header-logo { grid-area: logo !important; justify-self: center !important; } .tf-header-row > .e-con:last-child { grid-area: navright !important; justify-self: end !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 26px !important; } /* Kontit eivät saa venyä sarakkeen levyisiksi */ .tf-header-row .e-con { width: auto !important; padding: 0 !important; } /* ---------- 2. Navigaatiot ---------- */ .tf-header-row .elementor-nav-menu { flex-wrap: nowrap !important; gap: 26px !important; } .tf-header-row .elementor-nav-menu > li > a { white-space: nowrap !important; padding: 0 !important; font-size: 24px !important; line-height: 1 !important; text-transform: uppercase; font-weight: 400 !important; } /* ---------- 3. Yhden valikon jako logon molemmin puolin ---------- Sama "header"-valikko näytetään kolmesti. Jakokohta 4: kohdat 1-4 vasemmalle, 5-> oikealle. Muuta MOLEMMAT luvut parina jos haluat toisen jaon. */ .tf-nav-left .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(n+5) { display: none !important; } .tf-nav-right .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(-n+4) { display: none !important; } /* ---------- 4. Logo ---------- Tuotannossa koko määräytyy KORKEUDESTA. SVG on 358x23. */ .tf-header-logo img { height: 23px !important; width: auto !important; max-width: none !important; } @media (max-width: 1350px) { .tf-header-logo img { height: 21px !important; } } /* ---------- 5. VÄLIAIKAINEN: kapea varafontti kunnes MFred on palvelimella ---------- MFred on huomattavasti kapeampi kuin mikään järjestelmäfontti. Ilman sitä navigaatio oli 590px leveä 459px sarakkeessa ja valui logon päälle. size-adjust kutistaa VARAFONTIN MFredin mittoihin. Kun MFred-tiedostot ilmestyvät palvelimelle, selain käyttää niitä eikä varafonttia lainkaan — tämä lohko väistyy itsestään, sitä EI tarvitse poistaa käsin. Mitattu: 50% -> vasen navi 442px, sarake 459px. Mahtuu. */ @font-face { font-family: "MFred-fallback"; src: local("Arial Narrow"), local("Roboto Condensed"), local("Helvetica Neue Condensed"), local("Arial"); size-adjust: 50%; font-weight: 400; } .tf-header-row .elementor-nav-menu > li > a { font-family: "MFred", "MFred2.0", "MFred-fallback", sans-serif !important; } /* ---------- 6. Instagram-ikoni ---------- */ .tf-header-row .elementor-widget-icon svg, .tf-header-row .elementor-widget-icon i { width: 24px; height: 24px; font-size: 24px; } /* ---------- 7. Kielivalitsin "FI / EN" ---------- Todennettu selaimessa. TranslatePress antaa luotettavat luokat: li.trp-language-switcher-container molemmat kielet li.current-language-menu-item nykyinen kieli (ei käytössä, ks. alla) KOLME ANSAA jotka piti kiertää — kaikki mitattu, ei arvattu: 1. li-elementillä on PAKOTETTU LEVEYS (36,75px vaikka sisältö on 9px). Linkki keskittyi siihen, jolloin FI:n ja kauttaviivan väliin jäi 14px tyhjää molemmin puolin. width:auto + min-width:0 + flex:0 0 auto pudotti li:n sisällön kokoiseksi. 2. .elementor-item::before on varattu Elementorin osoitin-efektille: display:block ja OPACITY:0. Kauttaviiva oli koko ajan siellä, näkymättömänä. 3. Työpöydällä ul:lla on flex-gap 26px. Se kumotaan kieliparin väliltä negatiivisella marginaalilla, jotta kauttaviivan marginaalit (7px molemmin puolin) määräävät välin — ja siitä tulee symmetrinen. Mitattu lopputulos: työpöytä 17px, mobiili 21px, molemmissa yhtä paljon tilaa kauttaviivan kummallakin puolella. */ .tf-header-row .trp-flag-image { display: none !important; } /* li ei saa olla sisältöään leveämpi */ .tf-header-row li.trp-language-switcher-container { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: flex-start !important; padding: 0 !important; } .tf-header-row li.trp-language-switcher-container > a { margin: 0 !important; min-width: 0 !important; flex: 0 0 auto !important; } /* Kauttaviiva jälkimmäisen kielen eteen, yhtä suuret marginaalit */ .tf-nav-right li.trp-language-switcher-container + li.trp-language-switcher-container > a::before, .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container + li.trp-language-switcher-container .elementor-item::before { content: "/" !important; display: inline !important; opacity: 1 !important; position: static !important; width: auto !important; height: auto !important; background: none !important; transform: none !important; transition: none !important; margin: 0 7px !important; padding: 0 !important; font-size: inherit !important; color: inherit !important; } /* EI alleviivausta kummallekaan kielelle */ .tf-header-row li.trp-language-switcher-container > a > span, .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container .elementor-item > span { border-bottom: none !important; padding-bottom: 0 !important; } /* Työpöytä: kumoa ul:n 26px flex-gap kieliparin väliltä */ .tf-nav-right li.trp-language-switcher-container + li.trp-language-switcher-container { margin-left: -26px !important; } /* Mobiili: FI ja EN samalle riville, ei rivin alaviivaa */ .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container { display: inline-block !important; margin: 0 !important; } .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container .elementor-item { display: inline-block !important; border-bottom: none !important; } .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container:not(:last-child) .elementor-item { padding-right: 0 !important; } .tf-menu-toggle .elementor-nav-menu--dropdown li.trp-language-switcher-container + li.trp-language-switcher-container .elementor-item { padding-left: 0 !important; } /* ---------- 8. Mobiili (alle 1175px) ---------- Tuotannossa header vaihtaa mobiilissa GRIDISTÄ FLEXIIN: logo keskitetään ja hampurilainen asemoidaan absoluuttisesti oikeaan reunaan. Gridillä logo (233px) ylitti kolmanneksensa (119px) ja meni päällekkäin. */ @media (max-width: 1175px) { .tf-header-row { display: flex !important; grid-template-columns: none !important; grid-template-areas: none !important; justify-content: center !important; align-items: center !important; position: relative !important; height: 51px; padding: 0 16px !important; } .tf-nav-desktop { display: none !important; } .tf-header-logo img { height: 15px !important; } .tf-header-row > .e-con:last-child { position: absolute !important; right: 16px !important; top: 0 !important; height: 100% !important; display: flex !important; align-items: center !important; } .tf-menu-toggle { display: flex !important; } } @media (min-width: 1176px) { .tf-menu-toggle { display: none !important; } } /* ---------- 9. Mobiilivalikko designin mukaiseksi ---------- Figma "Mobile Menu" 390x768: keltainen koko ruutu, kohdat täysleveinä 3px mustin alaviivoin. Tabletilla paneeli on 450px oikeassa reunassa. */ .tf-menu-toggle .elementor-nav-menu--dropdown { position: fixed !important; left: 0 !important; right: 0 !important; top: 51px !important; height: calc(100vh - 51px) !important; height: calc(100dvh - 51px) !important; overflow-y: auto !important; background: #FFC954 !important; border-top: 3px solid #000000 !important; z-index: 99; } @media (min-width: 768px) and (max-width: 1175px) { .tf-menu-toggle .elementor-nav-menu--dropdown { left: auto !important; width: 450px !important; border-left: 3px solid #000000 !important; } } .tf-menu-toggle .elementor-nav-menu--dropdown .elementor-item { display: block !important; padding: 12px 16px !important; font-size: 24px !important; line-height: 1.2 !important; color: #000000 !important; background: transparent !important; border-bottom: 3px solid #000000 !important; } @media (max-width: 768px) { .tf-menu-toggle .elementor-nav-menu--dropdown .elementor-item { font-size: 32px !important; } } .tf-menu-toggle .elementor-menu-toggle { background: transparent !important; color: #000000 !important; padding: 0 !important; } /* ---------- 10. Sticky header ---------- Header jää ruudun yläreunaan vieritettäessä. Todennettu selaimessa 28.8.2026: header.elementor-location-header oli position:static. Kohdistus WRAPPERIIN, ei .tf-header-row -konttiin: sticky toimii vain suhteessa lähimpään vierittyvään esi-isään, ja .tf-header-row on wrapperin ainoa lapsi — jos sticky asetettaisiin siihen, se "kiinnittyisi" vain wrapperin oman korkeuden (65px) matkalle eli ei lainkaan. Mobiilivalikon paneeli on jo position:fixed + top:51px, joten se pysyy oikeassa kohdassa myös kun header on kiinnitetty. */ header.elementor-location-header { position: sticky !important; top: 0 !important; z-index: 999 !important; } /* ========================================================================== ETUSIVUN LISÄYKSET – liitä Custom CSS:n loppuun (header-lisäysten jälkeen) HUOM: etusivu perustuu toimivaan Elementor-vientiin, jonka asettelu toimii jo nykyisen train-factory-custom.css:n kanssa. Siksi tässä EI ole hero-, kortti- eikä palstasääntöjä — ne toimivat jo, eikä niitä pidä ylikirjoittaa. Tässä on vain se mikä on aidosti rikki tai uutta. ========================================================================== */ /* ---------- 1. Kuvat täyttämään laatikkonsa ---------- Mitattu ongelma: kuvasarake venyi tekstisarakkeen mukaan (811px), mutta kuva jäi luonnolliseen korkeuteensa (688px) → alle jäi 123px valkoista. Kaksi syytä, molemmat korjattava: a) kuvawidget ei venynyt sarakkeen korkuiseksi b) .e-con-inner -kääreessä oli Elementorin 10px pystypadding — nykyinen CSS nollaa sen vain ULOIMMASTA .e-con-elementistä, joka on jo 0 Kohdistus tiedostonimen perusteella, jotta logot ja grafiikat eivät veny. */ .elementor-widget-image:has(img[src*="about-media"]), .elementor-widget-image:has(img[src*="event-map"]) { flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; align-self: stretch !important; } .elementor-widget-image:has(img[src*="about-media"]) .elementor-widget-container, .elementor-widget-image:has(img[src*="event-map"]) .elementor-widget-container { height: 100% !important; } .elementor-widget-image:has(img[src*="about-media"]) img, .elementor-widget-image:has(img[src*="event-map"]) img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Pystypadding pois media-containerien SISÄKÄÄREESTÄ */ .tf-about-media > .e-con-inner, .tf-findus-media > .e-con-inner, .tf-mh-hero-photo > .e-con-inner, .tf-mh-img > .e-con-inner, .tf-svc-thumb > .e-con-inner, .tf-fu-top-map > .e-con-inner, .tf-map-graphic > .e-con-inner, .tf-discover-logo-overlay > .e-con-inner, .tf-event-media > .e-con-inner, .tf-seedo-media > .e-con-inner { padding: 0 !important; gap: 0 !important; height: 100% !important; } /* ---------- 2. Market Hall -osio (uusi) ---------- Korvasi rikkinäisen ravintolakiertäjän. Vanhassa nimet oli pinottu päällekkäin .tf-about-word-slide -kiertäjässä opacity-vaihdolla; kun JS ei siirtänyt .is-active -luokkaa, kaikki piirtyivät päällekkäin. Uusi on tavallinen pystylista Heading-widgettejä, joissa kullakin on oma linkki. Ei animaatiota, ei JS-riippuvuutta. Palstaleveydet hoituvat pohjan omalla .tf-w-50 -luokalla — sitä ei tarvitse ylikirjoittaa. */ /* ---------- Ravintolakiertäjä: lentokenttätaulu ---------- Nimet vaihtuvat merkki kerrallaan vasemmalta oikealle. Efektin hoitaa ravintolakiertaja.js — ILMAN SITÄ kaikki nimet piirtyisivät päällekkäin. JS piilottaa muut nimet display:none:lla ja animoi vain näkyvän tekstin, joten CSS:n ristihäivytystä (opacity) ei käytetä. Siksi opacity pakotetaan ykköseen — muuten yleinen .tf-about-word-slide { opacity: 0 } piilottaisi kaiken. VÄLIT: nimien väliin ei tule rakoa. Ne tulivat kolmesta paikasta ja kaikki kolme on nollattava: 1. .tf-menu-ticker flex-gap 16px (asetettu templassa) 2. rotaattorin min-height oli nimeä korkeampi 3. Elementorin 10px pystypadding jokaisessa .e-con-inner -kääreessä Mitattu lopputulos: 5 paikkaa á 108px, välit 0px. */ .tf-menu-ticker, .tf-menu-ticker > .e-con-inner { gap: 0 !important; padding: 0 !important; } .tf-menu-ticker .tf-about-word-rotator { min-height: clamp(27px, 5.4vw, 108px) !important; /* = fonttikoko x .9 */ position: relative !important; padding: 0 !important; } .tf-menu-ticker .tf-about-word-rotator > .e-con-inner { padding: 0 !important; gap: 0 !important; height: 100% !important; } .tf-menu-ticker .tf-about-word-slide { opacity: 1 !important; position: static !important; transition: none !important; padding: 0 !important; } .tf-menu-ticker .tf-about-word-slide > .e-con-inner { padding: 0 !important; gap: 0 !important; } .tf-menu-ticker .elementor-widget-heading { margin: 0 !important; } /* Fonttikoko joustaa, jotta pisin nimi ("Twisted St Kitchen") mahtuu palstaan kaikilla näytöillä. Mitattu 1440px: 86px -> nimi 656px, palsta 656px. Ilman clamp()ia 120px ylitti reunan. */ .tf-menu-ticker .elementor-heading-title { font-family: "MFred", "MFred2.0", "MFred-fallback", sans-serif !important; font-size: clamp(30px, 6vw, 120px) !important; line-height: .9 !important; margin: 0 !important; text-align: center !important; white-space: nowrap !important; } .tf-menu-ticker .elementor-heading-title a { color: inherit !important; text-decoration: none !important; white-space: nowrap !important; transition: color .2s cubic-bezier(.63,.47,.23,.51); } .tf-mh-left { align-items: flex-start !important; } .tf-mh-right { align-items: center !important; text-align: center; } .tf-menu-ticker { width: 100% !important; } /* MFred + size-adjust-varafontti (määritelty header-lisäyksissä). Varafontti kutistuu MFredin mittoihin, joten rivit eivät rivity ennen kuin fonttitiedostot ovat palvelimella. Mitattu: ilman tätä "TWISTED ST KITCHEN" 120px:llä rivittyi kahdelle riville ja nimet menivät päällekkäin. */ .tf-mh-left .elementor-heading-title, .tf-menu-ticker .elementor-heading-title { font-family: "MFred", "MFred2.0", "MFred-fallback", sans-serif !important; margin: 0 !important; } /* Linkitetty ravintolanimi näyttää samalta, saa hover-värin */ .tf-menu-ticker .elementor-heading-title a { color: inherit !important; text-decoration: none !important; display: inline-block; transition: color .2s cubic-bezier(.63,.47,.23,.51); } .tf-menu-ticker .elementor-heading-title a:hover { color: #BA4435 !important; } /* Sanamerkki on 358x23. Leveys asetetaan eksplisiittisesti, koska flex venyttäisi sen palstan levyiseksi. */ .tf-mh-left .elementor-widget-image { align-self: flex-start !important; } .tf-mh-left .elementor-widget-image img { height: 24px !important; width: 374px !important; max-width: 100% !important; } @media (max-width: 768px) { .tf-mh-left .elementor-widget-image img { height: 18px !important; width: 280px !important; } } /* ---------- 3. Tekstipalstojen leveydet ---------- Mitattu ongelma 1440px näytöllä: Tervetuloa-osio 1340px leveä -> leipäteksti yhtenä pitkänä rivinä Näe ja koe 1246px leveä Tuotannossa vastaavat sarakkeet ovat kapeita (.column 675px, article 445px). Ilman rajausta teksti leviää koko ruudun levyiseksi eikä vastaa designia. Osioiden luokat (tf-tervetuloa, tf-seedo ...) tulevat templasta. */ .tf-tervetuloa .elementor-widget-heading { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } .tf-tervetuloa .elementor-widget-text-editor { max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 992px) { .tf-tervetuloa .elementor-widget-heading { max-width: 700px !important; } .tf-tervetuloa .elementor-widget-text-editor { max-width: 500px !important; } } /* Näe ja koe: johdantoteksti ei saa levitä koko leveydelle */ .tf-seedo-intro .elementor-widget-text-editor { max-width: 900px !important; } /* Hero: tekstilohko alavasemmalla, ei koko leveydelle */ .tf-hero-photo-content { max-width: 700px !important; } /* Kaksipalstaisten osioiden leipäteksti tuotannon 445px:iin */ .tf-about .elementor-widget-text-editor, .tf-findus .elementor-widget-text-editor { max-width: 445px; } @media (max-width: 768px) { .tf-about .elementor-widget-text-editor, .tf-findus .elementor-widget-text-editor { max-width: 500px; } } /* ========================================================================== 4. ETUSIVUN KORJAUSKIERROS 28.8.2026 Kaikki mitat mitattu selaimessa https://trainfactory.fi-e.seravo.com/ (työpöytä 1265px, mobiili 375px) ennen ja jälkeen. ========================================================================== */ /* ---------- 4.1 Hero: isompi kuva, isompi teksti ---------- Mitattu: kaista 538px, otsikko 28px, tekstilohko 700px leveä josta 150px+150px oli paddingia -> otsikolle jäi 400px ja se rivittyi. Padding vaihdettu clamp()iin, koska pistepalkin (4.2) vasen reuna sidotaan SAMAAN arvoon — näin teksti ja pisteet pysyvät linjassa ilman kahta erikseen ylläpidettävää lukua. */ .tf-hero-photo-band { height: clamp(360px, 56vw, 900px) !important; } @media (max-width: 900px) { .tf-hero-photo-band { height: clamp(380px, 92vw, 620px) !important; } } .tf-hero-photo-content { max-width: min(900px, 100%) !important; padding: 0 clamp(24px, 8vw, 150px) 80px !important; } .tf-hero-photo-content .elementor-heading-title { font-size: clamp(30px, 3.6vw, 56px) !important; line-height: 1.05 !important; } .tf-hero-photo-content > .e-con-inner > .elementor-widget-text-editor, .tf-hero-photo-content .elementor-widget-text-editor { font-size: clamp(15px, 1.3vw, 20px) !important; } /* ---------- 4.2 Hero-karusellin pisteet: neliöt, heti tekstin alle ---------- Olivat 8px pyöreitä (border-radius 50%) ja ankkuroitu sivun omaan --tf-container-pad -muuttujaan (50px), eli 100px tekstin vasemmasta reunasta sisennettynä. Nyt sama clamp() kuin tekstilohkon padding. */ .tf-hero-photo-dots { left: clamp(24px, 8vw, 150px) !important; right: auto !important; width: auto !important; bottom: 30px !important; gap: 8px !important; } .tf-hero-photo-dot { width: 12px !important; height: 12px !important; border-radius: 0 !important; flex: 0 0 auto !important; } /* ---------- 4.3 Tervetuloa: otsikko ei leveämmäksi kuin leipäteksti ---------- Oli otsikko 900px / leipäteksti 560px. Yksi muuttuja, jotta ne eivät pääse eriytymään uudestaan. */ .tf-tervetuloa { --tf-tervetuloa-w: 560px; } @media (max-width: 992px) { .tf-tervetuloa { --tf-tervetuloa-w: 500px; } } .tf-tervetuloa .elementor-widget-heading, .tf-tervetuloa .elementor-widget-text-editor { max-width: var(--tf-tervetuloa-w) !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- 4.4 Kategoriaticker: matalampi kaista, isompi teksti ---------- Mitattu: kaista 99px, teksti 24px/36px. 99px tuli Elementorin oletuspystypaddingista (10px) kahdessa kääreessä + radan 56px. Kaistan korkeus tulee nyt suoraan tekstin line-heightista. */ .tf-ticker, .tf-ticker > .e-con-inner, .tf-ticker-track > .e-con-inner { padding: 0 !important; min-height: 0 !important; } .tf-ticker-track .elementor-widget-text-editor { font-size: 30px !important; line-height: 60px !important; } /* ---------- 4.5 Mikä Train Factory: kapeampi tekstipalsta ---------- Osiossa oli jo max-width: 445px ILMAN !importantia (kohta 3), mutta Elementorin oma ID-sääntö .elementor-element.elementor-element-XXXXX { max-width: 100% } on samalla spesifisyydellä (0,0,2,0) ja myöhempänä -> se voitti. Mitattu leveys oli 601px. */ .tf-about > .e-con-inner > .e-con:last-child > .e-con-inner > .elementor-widget-heading, .tf-about > .e-con-inner > .e-con:last-child > .e-con-inner > .elementor-widget-text-editor, .tf-about > .e-con-inner > .e-con:last-child > .e-con-inner > .elementor-widget-button { max-width: 445px !important; } /* ---------- 4.6 Linkkinapit: isommat ja vasempaan reunaan tasatut ---------- Elementorin Button-widgetissä on 12px 24px padding, joka sisensi "Lisää meistä" -linkin 24px leipätekstin vasemmasta reunasta. Nuolinapit (.tf-seedo-arrows) jätetään rauhaan — niissä padding on nappikehyksen osa. */ .tf-about .elementor-widget-button, .tf-findus .elementor-widget-button, .tf-mh-left .elementor-widget-button, .tf-cta .elementor-widget-button, .tf-hero-photo-content .elementor-widget-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-button { text-align: left !important; } .tf-about .elementor-widget-button .elementor-button, .tf-findus .elementor-widget-button .elementor-button, .tf-mh-left .elementor-widget-button .elementor-button, .tf-cta .elementor-widget-button .elementor-button, .tf-hero-photo-content .elementor-widget-button .elementor-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-button .elementor-button { padding-left: 0 !important; padding-right: 0 !important; font-size: 24px !important; line-height: 1.2 !important; justify-content: flex-start !important; text-align: left !important; } /* ---------- 4.7 CTA "Haluatko olla osa Train Factoryn tarinaa?" ---------- Oli sininen (#95BBBF) ja 148px korkea, tekstit koko puolikkaan levyisinä (601px). Figman malli: keltainen, reilu pystypadding, otsikko kolmelle riville ja oikean palstan teksti selvästi kapeampi. */ .tf-cta { background-color: #FFC954 !important; padding: clamp(56px, 7vw, 110px) 32px !important; } .tf-cta > .e-con-inner > .e-con:first-child .elementor-widget-heading { max-width: 460px !important; } .tf-cta > .e-con-inner > .e-con:last-child .elementor-widget-text-editor, .tf-cta > .e-con-inner > .e-con:last-child .elementor-widget-button { max-width: 380px !important; } /* ---------- 4.8 Market Hall -ravintolakiertäjä mobiilissa ---------- JUURISYY: train-factory-custom.css antaa @media (max-width: 900px) -lohkossa säännön .tf-about-word-rotator { flex: 1 1 100% } (tarkoitettu Meistä-sivun YHDELLE kiertäjälle). Elementorin containerin oletus on flex-wrap: wrap, joten pystysuunnassa jokainen 100%-korkuinen rivi kääriytyi OMAKSI SARAKKEEKSEEN — ja koska jokainen on myös width:100%, kaikki viisi sarakketta osuivat päällekkäin. Mitattu ennen: 5 kiertäjää, kaikki top 60px, korkeus 135px (= koko säiliö) -> vain viimeisenä piirtyvä ravintolanimi näkyi. Mitattu jälkeen: 5 x 27px allekkain, top 60/87/114/141/168. Sääntö on ULKONA media queryn — spesifisyys (0,0,2,0) voittaa perussäännön (0,0,1,0) eikä media query nosta spesifisyyttä. */ .tf-menu-ticker > .e-con-inner { flex-wrap: nowrap !important; } .tf-menu-ticker .tf-about-word-rotator { flex: 0 0 auto !important; width: 100% !important; height: auto !important; } /* ---------- 4.9 Footerin oikea palsta oikealle myös mobiilissa ---------- Mobiililohko keskitti molemmat palstat (justify-items: center + text-align: center). Some/yhteystiedot kuuluvat oikeaan reunaan. */ @media (max-width: 900px) { .tf-footer > .e-con-inner .tf-footer-social { justify-self: end !important; align-items: flex-end !important; text-align: right !important; } .tf-footer-social .elementor-widget-button, .tf-footer-social .elementor-widget-text-editor, .tf-footer-social .elementor-widget-heading { text-align: right !important; width: 100% !important; } .tf-footer-social .elementor-button { justify-content: flex-end !important; text-align: right !important; } } /* ---------- 4.10 Mobiilin fonttikoot ---------- Mitattu 375px: otsikot 48-80px, leipäteksti 21px. "TERVETULOA KAUPUNGIN UUTEEN SYKKEESEEN HELSINGIN VALLILAAN." vei 48px:llä viisi riviä ja 240px korkeutta. Elementorin oma typografiasääntö on .elementor-element.elementor-element-XXXXX .elementor-heading-title (0,0,3,0), joten !important on pakollinen. */ @media (max-width: 767px) { .tf-tervetuloa .elementor-heading-title { font-size: 30px !important; line-height: 1.05 !important; } .tf-about .elementor-heading-title, .tf-findus .elementor-heading-title, .tf-cta .elementor-heading-title { font-size: 34px !important; line-height: 1.05 !important; } .tf-seedo-intro .elementor-heading-title { font-size: 40px !important; line-height: 1 !important; } .tf-hero-photo-content .elementor-heading-title { font-size: 26px !important; line-height: 1.1 !important; } .tf-tervetuloa .elementor-widget-text-editor, .tf-about .elementor-widget-text-editor, .tf-findus .elementor-widget-text-editor, .tf-cta .elementor-widget-text-editor, .tf-mh-left .elementor-widget-text-editor, .tf-mh-right > .e-con-inner > .elementor-widget-text-editor, .tf-seedo-intro .elementor-widget-text-editor, .tf-seedo-card .elementor-widget-text-editor { font-size: 17px !important; line-height: 1.5 !important; } .tf-hero-photo-content .elementor-widget-text-editor { font-size: 15px !important; } .tf-about .elementor-widget-button .elementor-button, .tf-findus .elementor-widget-button .elementor-button, .tf-mh-left .elementor-widget-button .elementor-button, .tf-cta .elementor-widget-button .elementor-button, .tf-hero-photo-content .elementor-widget-button .elementor-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-button .elementor-button { font-size: 18px !important; } .tf-menu-ticker .elementor-heading-title { font-size: 28px !important; } .tf-menu-ticker .tf-about-word-rotator { min-height: 34px !important; } .tf-ticker-track .elementor-widget-text-editor { font-size: 20px !important; line-height: 44px !important; } } /* ========================================================================== 5. MOBIILIN KORJAUSKIERROS 28.8.2026 Mitattu selaimessa 375px-näkymässä. Vertailukohtana tuotannon trainfactory.com mobiilinäkymä. ========================================================================== */ /* ---------- 5.1 Osioiden 185px:n pystypadding ---------- JUURISYY yhteinen viidelle "liian korkealle" osiolle: templaten e-con-inner -kääreissä on padding "185px 0". Se on tarkoitettu työpöydän kaksipalstaiselle asettelulle, jossa lyhyt tekstipalsta keskittyy korkean kuvapalstan rinnalle. Mobiilissa palstat ovat allekkain, jolloin 185+185 = 370px pelkkää tyhjää joka osiossa. Mitattu ennen (375px): Market Hall (keltainen) 833px, josta 370px tyhjää Ruokaa ja juomaa 596px, josta 370px tyhjää Mikä Train Factory 874px Löydä meidät 752px Media-containerit (kuva/kartta) rajataan pois :not()-ehdolla — niiden e-con-inner on jo nollattu kohdassa 1, ja tämä sääntö (0,0,4,0) voittaisi sen (0,0,2,0). */ @media (max-width: 767px) { .tf-mh-left > .e-con-inner, .tf-mh-right > .e-con-inner, .tf-about > .e-con-inner > .tf-w-50:not(.tf-about-media) > .e-con-inner, .tf-findus > .e-con-inner > .tf-w-50:not(.tf-findus-media) > .e-con-inner { padding-top: 48px !important; padding-bottom: 48px !important; } } /* ---------- 5.2 "MARKET HALL" -otsikko ---------- Kohdan 4.10 mobiilisääntö pienensi KAIKKI .tf-mh-left -tekstieditorit 17px:iin, myös näyttöotsikon (työpöydällä n. 180px). Otsikko on kääreen toinen lapsi (1 = sanamerkkikuva, 2 = otsikko, 3 = leipäteksti, 4 = linkki), joten leipätekstisääntö rajataan :nth-child(3):een ja otsikko saa oman kokonsa. */ @media (max-width: 767px) { .tf-mh-left > .e-con-inner > .elementor-widget-text-editor:nth-child(2) { font-size: 64px !important; line-height: .95 !important; font-family: "MFred", "MFred2.0", sans-serif !important; text-transform: uppercase; } } /* ---------- 5.3 Ravintolakiertäjä isommalla ---------- Mitattu: nimet 28px, pisin "Twisted St Kitchen" 160px 311px palstassa. 44px -> 251px, mahtuu yhä yhdelle riville (white-space: nowrap). */ @media (max-width: 767px) { .tf-menu-ticker .elementor-heading-title { font-size: 44px !important; } .tf-menu-ticker .tf-about-word-rotator { min-height: 52px !important; } } /* ---------- 5.4 Näe ja koe ---------- Nuolet olivat pystysuunnassa otsikon kohdalla, jolloin otsikolle jäi vain 211px 311px:stä (max-width: calc(100% - 130px), kohta "Responsiivisuus" pääsisällössä). Mobiilissa nuolet siirretään osion alareunaan, jolloin otsikko saa koko leveyden. Korttikuvien kuvasuhde 1/1.16 (pysty) -> 4/3 (vaaka): 260px levyinen kortti madaltuu 302px:stä 195px:iin. */ @media (max-width: 767px) { .tf-seedo-intro > .e-con-inner > .elementor-widget-heading, .tf-seedo-intro > .e-con-inner > .elementor-widget-text-editor { max-width: 100% !important; } .tf-seedo-intro > .e-con-inner > .elementor-widget-button { max-width: calc(100% - 120px) !important; } .tf-seedo-intro .elementor-heading-title { font-size: 52px !important; line-height: 1 !important; } .tf-seedo-arrows { top: auto !important; bottom: 20px !important; right: 20px !important; transform: none !important; } .tf-seedo-media, .tf-seedo-card > .e-con-inner > .elementor-widget-image { aspect-ratio: 4 / 3 !important; } } /* ---------- 5.5 CTA: isompi otsikko, ilmavampi ---------- Mitattu: otsikko 34px kahdella rivillä, osio 365px. Mallissa otsikko on kolmella rivillä yläreunassa ja teksti painuu alareunaan. */ @media (max-width: 767px) { .tf-cta .elementor-heading-title { font-size: 44px !important; line-height: 1 !important; } .tf-cta > .e-con-inner { gap: 80px !important; } } /* ---------- 5.6 Hero: isompi teksti, pisteet lähemmäs ---------- Mitattu: "Lue lisää" -tekstin alareuna y316, pisteiden yläreuna y366 = 50px rakoa. Tekstilohkon padding-bottom 80px -> 44px ja pisteiden bottom 30px -> 20px tuo raon n. 20px:iin. */ @media (max-width: 767px) { .tf-hero-photo-content { padding-bottom: 44px !important; } .tf-hero-photo-dots { bottom: 20px !important; } .tf-hero-photo-content .elementor-heading-title { font-size: 30px !important; } .tf-hero-photo-content .elementor-widget-text-editor { font-size: 16px !important; } } /* ---------- 5.7 Linkit isoilla kirjaimilla (kaikki näyttöleveydet) ---------- Sisältölinkit versaalilla: "LISÄÄ MEISTÄ", "AVAA GOOGLE MAPS", "YHTEYDENOTTO", "LUE LISÄÄ", "TUTUSTU PALVELUIHIMME". Kaksi poikkeusta, jotka ovat gemenalla myös tuotannossa: heron "Lue lisää" ja footerin valikko. Ne eivät ole listalla. */ .tf-about .elementor-widget-button .elementor-button, .tf-findus .elementor-widget-button .elementor-button, .tf-mh-left .elementor-widget-button .elementor-button, .tf-cta .elementor-widget-button .elementor-button, .tf-seedo-intro > .e-con-inner > .elementor-widget-button .elementor-button { text-transform: uppercase !important; } /* ---------- 5.8 Footer koko leveydelle ---------- Mitattu: sisältö 295px (footerin padding 0 40px), josta kumpikin palsta sai vain 128px keskitettynä -> "Market Hall" ja "info@trainfactory.com" rivittyivät kahdelle riville. Korjaus: kapeampi reunapadding, palstat omiin reunoihinsa ja linkkinapeista vaakapadding pois, jotta teksti alkaa aidosti reunasta. Ryhmien väli tasataan linkkien keskinäiseen väliin (Elementorin 10px oletuspadding kahdessa ryhmäkääreessä teki siitä kaksinkertaisen). */ @media (max-width: 900px) { .tf-footer { padding-left: 20px !important; padding-right: 20px !important; } .tf-footer > .e-con-inner { /* 1fr auto: oikea palsta saa sisältönsä leveyden ("info@trainfactory.com" 160px yhdellä rivillä) ja vasen ottaa lopun. auto auto jakoi tilan tasan 158/158, jolloin sähköpostiosoite ylitti ruudun 7px:llä. */ grid-template-columns: 1fr auto !important; justify-items: stretch !important; column-gap: 20px !important; } .tf-footer .e-con-inner > .tf-footer-cols { width: 100% !important; justify-self: start !important; align-items: flex-start !important; text-align: left !important; } .tf-footer .e-con-inner > .tf-footer-social { width: 100% !important; justify-self: end !important; } .tf-footer-cols > .e-con-inner { gap: 9px !important; } .tf-footer-cols > .e-con-inner > .e-con > .e-con-inner { padding: 0 !important; } .tf-footer-cols .elementor-widget-button { text-align: left !important; } .tf-footer-cols .elementor-widget-button .elementor-button, .tf-footer-social .elementor-widget-button .elementor-button { padding-left: 0 !important; padding-right: 0 !important; } .tf-footer-cols .elementor-button-text, .tf-footer-social .elementor-button-text { white-space: nowrap !important; } } /* ========================================================================== 6. TYÖPÖYDÄN KORJAUSKIERROS 28.8.2026 Mitattu selaimessa 1440px-näkymässä. Raja on min-width: 901px, jotta lohko ei mene ristiin osion 5 mobiilisääntöjen (max-width 767/900) kanssa — media query ei nosta spesifisyyttä, joten päällekkäisillä rajoilla myöhempi sääntö voittaisi aina. ========================================================================== */ @media (min-width: 901px) { /* ---------- 6.1 Hero korkeammaksi, pisteet lähemmäs tekstiä ---------- Mitattu 1440px: kaista 806px, "Lue lisää" -tekstin alareuna y757, pisteiden yläreuna y806 = 49px rakoa. Pisteet on ankkuroitu kaistan alareunaan (bottom: 30px) ja teksti kelluu paddingin varassa sen yläpuolella, joten rakoa kavennetaan TEKSTIN pystypaddingista, ei pisteiden bottomista: 80px -> 56px tuo tekstin 24px alemmas ja raoksi jää n. 25px. */ /* Korkeus laskettiin pelkästä ruudun LEVEYDESTÄ (64vw), jolloin 1440x900 -läppärillä hero oli 922px vaikka headerin (65px) alle mahtuu vain 835px — alareuna ja pisteet jäivät taitteen alle. Nyt korkeus on pienin kolmesta: 64vw, kattona 1000px, ja ruudun korkeus miinus header. Lattia 420px estää heroa litistymästä matalassa ikkunassa. Kaksi height-riviä tarkoituksella: svh (small viewport height) on oikea yksikkö mobiiliselaimissa, joissa osoiterivi piiloutuu vieritettäessä, mutta vanhemmat selaimet eivät tunne sitä. Ne jättävät jälkimmäisen rivin huomiotta ja käyttävät vh-versiota. */ .tf-hero-photo-band { height: max(420px, min(64vw, 1000px, calc(100vh - 65px))) !important; height: max(420px, min(64vw, 1000px, calc(100svh - 65px))) !important; } .tf-hero-photo-content { padding-bottom: 56px !important; } /* ---------- 6.2 Näe ja koe ---------- Mallissa otsikko on omana lohkonaan ylhäällä ja alarivillä teksti vasemmalla + nuolet oikeassa reunassa kiinni korttirivissä. Meillä otsikko ja linkki olivat kiinni toisissaan ja nuolet kelluivat 60px korttirivin yläpuolella, 18px reunasta. */ .tf-seedo-intro > .e-con-inner > .elementor-widget-heading { margin-bottom: 60px !important; } .tf-seedo-arrows { right: 0 !important; bottom: 0 !important; } /* ---------- 6.3 "Mikä Train Factory?" keskemmälle ---------- Mitattu: kuvapalsta päättyy x688, teksti alkaa x720 — vain 32px väliä. Tuotannossa väli on n. 12 % ruudun leveydestä (~170px). Tekstin oma max-width (445px) säilyy, palsta vain siirtyy. */ .tf-about > .e-con-inner > .tf-w-50:not(.tf-about-media) > .e-con-inner { padding-left: 130px !important; } /* ---------- 6.4 CTA: molemmat palstat keskemmälle, isompi otsikko ---------- Mitattu: otsikko alkoi x32 (2 % reunasta) ja teksti x720 (50 %). Mallissa otsikko on n. 11 %:ssa ja teksti n. 62 %:ssa. Otsikko 56px -> 64px ja max-width 460px -> 440px, jolloin se taittuu mallin mukaisesti kolmelle riville kahden sijaan. */ .tf-cta { padding-left: clamp(32px, 10vw, 150px) !important; padding-right: clamp(32px, 10vw, 150px) !important; } .tf-cta > .e-con-inner > .e-con:last-child { padding-left: 250px !important; } .tf-cta .elementor-heading-title { font-size: 64px !important; line-height: 1 !important; } .tf-cta > .e-con-inner > .e-con:first-child .elementor-widget-heading { max-width: 440px !important; } } /* ---------- 6.1b Hero 901–1175px: header on 51px, ei 65px ---------- Header vaihtaa korkeutta 1175px:ssä (lisays-header.css kohta 8). Ilman tätä vähennys olisi 14px liian suuri ja etusivun seuraava osio kurkistaisi taitteen yli. Mitattu 1100x600: 586px -> 549px. */ @media (min-width: 901px) and (max-width: 1175px) { .tf-hero-photo-band { height: max(420px, min(64vw, 1000px, calc(100vh - 51px))) !important; height: max(420px, min(64vw, 1000px, calc(100svh - 51px))) !important; } } /* ---------- 6.5 Footerin T-kuvake isommaksi ---------- Mitattu: 50x25px. Kaikilla näyttöleveyksillä, ei vain työpöydällä. max-width: none tarvitaan, koska Elementorin kuvasääntö rajaa leveyden alkuperäiseen tiedostokokoon. */ .tf-footer-logo .elementor-widget-image img { width: 90px !important; height: auto !important; max-width: none !important; } /* ========================================================================== 7. VIIMEISTELY 28.8.2026 ========================================================================== */ /* ---------- 7.1 "Löydä meidät" kapeammaksi ---------- Sama juurisyy kuin kohdassa 4.5 oli Mikä Train Factory -osiossa: osion 3 sääntö .tf-findus .elementor-widget-text-editor { max-width: 445px } on ILMAN !importantia, ja Elementorin oma ID-sääntö .elementor-element.elementor-element-XXXXX { max-width: 100% } on samalla spesifisyydellä (0,0,2,0) mutta myöhempänä -> se voitti. Mitattu 1440px ennen: otsikko, molemmat tekstilohkot ja linkki 688px. Jälkeen: kaikki neljä 445px, sama kuin Mikä Train Factory -osiossa. */ .tf-findus > .e-con-inner > .e-con:not(.tf-findus-media) > .e-con-inner > .elementor-widget-heading, .tf-findus > .e-con-inner > .e-con:not(.tf-findus-media) > .e-con-inner > .elementor-widget-text-editor, .tf-findus > .e-con-inner > .e-con:not(.tf-findus-media) > .e-con-inner > .elementor-widget-button { max-width: 445px !important; } /* ---------- 7.2 Nuolet kiinni korttirivin viivaan ---------- Kohta 6.2 asetti tämän jo työpöydälle (min-width: 901px), mutta 768–900px:llä oli yhä pohjan bottom: 60px ja mobiilissa kohdan 5.4 bottom: 20px. Nyt sama kaikilla leveyksillä: nuolten alareuna osuu .tf-seedo-gridin 3px mustaan yläreunaviivaan. Mitattu 1440px: nuolten alareuna y2748, ruudukon yläreuna y2748 -> 0px. Vaakasijainti jätetään ennalleen (työpöydällä 6.2:n right: 0, kapealla pohjan right: 20px). */ .tf-seedo-arrows { bottom: 0 !important; } /* ---------- 7.3 Musta viiva kortin kuvan ja nimipalkin väliin ---------- Kortti on kaksiosainen: Image-widget ja sen alla nimipalkkikontti (sininen tausta + nimi + karttanasta). Niiden välissä ei ollut mitään erotusta, vaikka korttien VÄLISSÄ on 3px musta viiva (.tf-seedo-card { border-right: 3px solid #000 }). Sama viiva myös vaakasuuntaan. */ .tf-seedo-card > .e-con-inner > .e-con { border-top: 3px solid #000 !important; } /* ========================================================================== MARKET HALL -SIVU (page-id-1022) — korjaukset Liitä nykyisen Custom CSS:n LOPPUUN (header- ja etusivulisäysten jälkeen). Kaikki luvut on MITATTU, ei arvattu: - Figma-frame "Market Hall Page" (1440 x 8236) pikselitasolla skannattuna - tuotantosivu https://trainfactory.com/market-hall (1440px leveys) - staging https://trainfactory.fi-e.seravo.com/market-hall/ (1440px) Designin osiokorkeudet (Figma, 1440px): hero 61 – 872 811px intro-teksti 875 – 1319 444px aukiolot/lounas 1322 – 1833 511px Löydä meidät 1836 – 2671 835px 3 kuva+teksti-riviä 2674 – 5215 2541px (847px / rivi) ravintolalista 5218 – 6056 838px tausta #F2EDE6 Stage 6056 – 6894 838px tausta #000 CTA (sininen) 6894 – 7337 443px tausta #95BBBF Designin vaakagridi (toistuu joka osiossa): vasen sisältö alkaa x = 151 oikea sisältö alkaa x = 843 (= 122px oman puolikkaansa reunasta) oikea reuna x = 1289 -> sisältöalue 1138px, keskitetty Osiot kohdistetaan järjestysnumerolla (nth-of-type), koska Elementorin 4.2.2 Atomic Widgets EI tallenna css_classes-arvoja kuin containereille ja osa näistä osioista tuli sivupohjasta ilman omaa tf-luokkaa. Jos osioita lisätään tai järjestys muuttuu, numerot on päivitettävä. ========================================================================== */ /* ---------- 0. FONTIT: puuttuva "MFred"-alias + väliaikainen varafontti ---- MITATTU 27.8.2026: kaikki neljä woff2-tiedostoa vastaavat 404:llä /wp-content/uploads/train-factory/MFred2.0-Regular.woff2 404 /wp-content/uploads/train-factory/MFred2.0-Heavy.woff2 404 /wp-content/uploads/train-factory/ABCDiatype-Regular.woff2 404 /wp-content/uploads/train-factory/ABCDiatype-Bold.woff2 404 /wp-content/uploads/train-factory/hero-graphic.svg 404 -> document.fonts näyttää jokaisen brändifontin tilassa "error", ja koko sivu ladotaan järjestelmäfontilla. Tämä on suurin yksittäinen syy siihen ettei sivu näytä designilta: MFred on kapea display-fontti, joten kaikki otsikot ovat järjestelmäfontilla huomattavasti liian leveitä ja rivittyvät väärin. TÄTÄ EI VOI KORJATA CSS:LLÄ — tiedostot on vietävä palvelimelle. Kaksi asiaa jotka CSS voi silti tehdä: a) Sivustolla EI ollut lainkaan @font-face-määrittelyä pelkälle nimelle "MFred", vaikka JSON-generaattorit (tee-markethall-json.py ym.) kirjoittavat widgetteihin juuri tuon kirjoitusasun ja headerin CSS-pino alkaa sillä. Lisätään puuttuva alias, jotta oikea fontti löytyy heti kun tiedostot ovat paikallaan. b) Varafontiksi kapea grotesk (Arial Narrow) tavallisen leveän järjestelmäfontin sijaan. EI size-adjustia kuten headerissa — display-kokoisissa otsikoissa 50 %:n kutistus näyttäisi väärältä. Tämä poistuu käytöstä itsestään heti kun MFred latautuu. */ @font-face { font-family: "MFred"; src: url("/wp-content/uploads/train-factory/MFred2.0-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "MFred"; src: url("/wp-content/uploads/train-factory/MFred2.0-Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: block; } .page-id-1022 .elementor-heading-title { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. tf-w-50: puolikkaat eivät olleet puolikkaita ---------- MITATTU: "Löydä meidät" -osion sarakkeet olivat 660px ja 780px, vaikka MOLEMMILLA on .tf-w-50 ja laskettu flex on 1 / 1 / 0%. Sama 660/780 toistui Stage-osiossa ja kuvariveillä. Syy: flex-basis: 0% + box-sizing: border-box. Speksin mukaan flex base size on tällöin BORDER-BOXIN koko, ja 0 kiristyy alarajaansa eli padding+border-summaan. Sarake jolla on padding 0 60px saa siis flex-basiksekseen 120px ja toinen 0px; jäljelle jäävä 1320px jaetaan tasan (660 + 660), jolloin lopputulos on 780 ja 660. Korjaus: flex-basis 50%, jolloin molempien lähtökoko on jo valmiiksi puolikas ja padding mahtuu sen sisään. Rajattu tälle sivulle, koska .tf-w-50 on käytössä myös etusivulla ja muilla sivuilla, jotka on jo viritetty nykyisen käytöksen varaan. */ .page-id-1022 .tf-w-50 { flex-basis: 50% !important; } /* ---------- 2. Hero ---------- Design 811px @1440 = 56.3vw. Voimassa ollut sääntö oli 45vw -> 648px, eli hero jäi 163px designia matalammaksi. */ .page-id-1022 .tf-mh-hero-photo { height: clamp(320px, 56.3vw, 811px) !important; } /* ---------- 3. Intro-teksti (osio 2) ---------- MITATTU staging: kappale oli 1340px leveä eli koko sisältöalueen levyinen, jolloin teksti venyi yhdeksi loputtoman pitkäksi riviksi. Design ja tuotanto: 675px leveä keskitetty palsta (tuotannon .column). */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(2) > .e-con-inner { padding: 100px 0 !important; gap: 24px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(2) > .e-con-inner > * { width: 100% !important; max-width: 675px !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- 4. Aukioloajat / Lounas (osio 3) ---------- Rakenne on jo oikein (kaksi valkoista saraketta, 3px musta jakoviiva keskellä ja 3px viivat ylä- ja alareunassa). Vain sisennys poikkesi: staging 60px, design 151px vasemmalla ja 843px oikean sarakkeen tekstille. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:first-child { padding-left: 150px !important; padding-right: 60px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:last-child { padding-left: 122px !important; padding-right: 150px !important; } /* ---------- 5. Löydä meidät (osio 4) ---------- MITATTU staging: osio 518px korkea, design 835px. Kuva näkyi omassa luonnollisessa 4:3-korkeudessaan (660x495) sen sijaan että täyttäisi puolikkaan, ja keltaisen sarakkeen sisältö oli kiinni yläreunassa vaikka designissa se on pystysuunnassa keskellä. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner { min-height: clamp(420px, 58vw, 835px) !important; align-items: stretch !important; } /* Kuvasarake reunasta reunaan, kuva rajautuu täyttämään koko puolikkaan. HUOM: korkeus on asetettava koko ketjuun (.e-con-inner -> widget -> .elementor-widget-container -> img), muuten height:100% ei laskeudu mihinkään — sama toistuva ansa kuin muuallakin projektissa. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner > *:first-child > .e-con-inner { padding: 0 !important; height: 100% !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) .elementor-widget-image, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) .elementor-widget-image .elementor-widget-container { height: 100% !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Keltainen sarake: sisältö pystysuunnassa keskelle, sisennys designin mukaiseksi (843px sivun vasemmasta reunasta = 122px puolikkaan sisään). */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner > *:last-child { padding-left: 122px !important; padding-right: 150px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner > *:last-child > .e-con-inner { justify-content: center !important; padding: 60px 0 !important; } /* ---------- 6. Kuva + teksti -rivit (tf-mh-row, osiot 5–7) ---------- TÄMÄ ON SIVUN ISOIN POIKKEAMA. MITATTU staging: rivit olivat reunasta reunaan, teksti 780px ja kuva 660px, ilman marginaaleja. Design (mitattu Figmasta pikselitasolla, kaikki kolme riviä identtisiä): kuva 561 x 692 vasen tai oikea reuna x = 151 / 1289 tekstipalsta 445 leveä väli 130 ryhmä 1138 leveä, keskitetty (151px marginaali molemmin puolin) rivin korkeus 847 (= 692 + 78 + 78) Sama 445px vahvistuu tuotannosta: article.portable-text-root = 445px. HUOM: aiempi .tf-mh-img { aspect-ratio: 561/692 } oli jo oikea arvaus kuvan mittasuhteesta, mutta koska sarake oli tf-w-50 eli venyvä, suhde pakotti LEVEYDEN korkeudesta (814 * 561/692 = 660) sen sijaan että leveys olisi määrännyt korkeuden. Nyt leveys lukitaan ensin. */ .page-id-1022 .tf-mh-row > .e-con-inner { max-width: 1136px !important; margin-left: auto !important; margin-right: auto !important; padding: 78px 0 !important; gap: 130px !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; } .page-id-1022 .tf-mh-row .tf-mh-text { flex: 0 0 445px !important; width: 445px !important; max-width: 445px !important; padding: 0 !important; } .page-id-1022 .tf-mh-row .tf-mh-text > .e-con-inner { padding: 0 !important; } .page-id-1022 .tf-mh-row .tf-mh-img { flex: 0 0 561px !important; width: 561px !important; max-width: 561px !important; aspect-ratio: 561 / 692 !important; height: auto !important; } /* Kapeammat näytöt: 1138px:n kiinteä ryhmä ei enää mahdu marginaaleineen, joten palataan suhteellisiin leveyksiin ennen kuin rivi puskee reunoja. */ @media (max-width: 1200px) { .page-id-1022 .tf-mh-row > .e-con-inner { max-width: none !important; padding: 60px 40px !important; gap: 48px !important; } .page-id-1022 .tf-mh-row .tf-mh-text { flex: 1 1 45% !important; width: auto !important; max-width: none !important; } .page-id-1022 .tf-mh-row .tf-mh-img { flex: 0 1 50% !important; width: auto !important; max-width: 561px !important; } } @media (max-width: 900px) { .page-id-1022 .tf-mh-row > .e-con-inner { flex-direction: column !important; padding: 48px 20px !important; gap: 28px !important; } .page-id-1022 .tf-mh-row .tf-mh-text, .page-id-1022 .tf-mh-row .tf-mh-img { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* ---------- 7. Ravintolalista (osio 8) ---------- MITATTU: osion tausta oli läpinäkyvä eli valkoinen. Designissa koko lohko on kermanvärinen #F2EDE6 (sama arvo myös tuotannossa) mustien 3px-viivojen välissä. Viivat ovat jo paikallaan, tausta puuttui. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(8) { background-color: #F2EDE6 !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(8) > .e-con-inner { padding: 96px 0 !important; gap: 40px !important; } /* ---------- 8. The Market Hall Stage (osio 9) ---------- Sarakejako korjaantuu jo kohdan 1 flex-basis-korjauksella (660/780 -> 720/720). Tässä vain kuvan rajaus ja tekstin sisennys/keskitys. ⚠️ SISÄLTÖPUUTE, EI CSS: vasemman sarakkeen Image-widgetin src on tyhjä (naturalWidth 0). Kuva on valittava Elementorissa Mediakirjastosta — mikään CSS ei tuo sitä näkyviin. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) > .e-con-inner > *:first-child > .e-con-inner { padding: 0 !important; height: 100% !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) .elementor-widget-image, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) .elementor-widget-image .elementor-widget-container { height: 100% !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) > .e-con-inner > *:last-child { padding-left: 122px !important; padding-right: 150px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) > .e-con-inner > *:last-child > .e-con-inner { justify-content: center !important; padding: 60px 0 !important; } /* ---------- 9. Sininen CTA (osio 10) ---------- MITATTU staging: osio 584px korkea (design 443), ja sarakkeet olivat pystysuunnassa eri linjoilla — vasemmalla 100px yläpadding, oikealla Elementorin 10px oletus, jolloin oikea teksti alkoi ~90px ylempää kuin otsikko. Design käyttää täsmälleen samaa 1138px:n gridiä kuin kuvarivit: otsikko x 152 – 712 (561 leveä) teksti x 843 – 1288 (445 leveä) joten sama sarakejako kierrätetään tähän. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) { padding-left: 0 !important; padding-right: 0 !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner { max-width: 1136px !important; margin-left: auto !important; margin-right: auto !important; padding: 130px 0 !important; gap: 130px !important; align-items: flex-start !important; flex-wrap: nowrap !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:first-child { flex: 0 0 561px !important; width: 561px !important; max-width: 561px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:last-child { flex: 0 0 445px !important; width: 445px !important; max-width: 445px !important; } /* Molemmat sarakkeet samalle ylälinjalle: nollataan Elementorin sarakekohtaiset pystypaddingit, koska ryhmän padding hoitaa välit. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > * > .e-con-inner { padding: 0 !important; } /* ---------- 10. Yhteinen kapean näytön palautus osioille 3, 4, 9, 10 ---- Kiinteät 150px/122px-sisennykset ja 561/445-sarakkeet ovat mielekkäitä vain leveällä näytöllä. Alle 1200px palataan suhteellisiin arvoihin ja alle 900px sarakkeet pinoutuvat (sivuston yleinen tf-w-* -sääntö hoitaa pinoamisen, tässä vain paddingit). */ @media (max-width: 1200px) { .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:first-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:last-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner > *:last-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) > .e-con-inner > *:last-child { padding-left: 60px !important; padding-right: 60px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner { max-width: none !important; padding: 90px 60px !important; gap: 60px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:first-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:last-child { flex: 1 1 50% !important; width: auto !important; max-width: none !important; } } @media (max-width: 900px) { /* HUOM: kohdan 1 flex-basis-korjaus (.page-id-1022 .tf-w-50, spesifisyys 0,0,2,0) voittaa sivuston yleisen mobiilisäännön (.tf-w-50, 0,0,1,0) myös media queryn sisällä, jolloin puolikkaat EIVÄT enää pinoutuneet kapealla näytöllä vaan jäivät 50/50-sarakkeiksi. Todennettu 412px leveydellä: "Aukioloajat", "Löydä meidät" ja Stage jäivät 195px leveiksi sarakkeiksi. Palautetaan pinoutuminen samalla spesifisyydellä. */ .page-id-1022 .tf-w-50 { flex: 1 1 100% !important; width: 100% !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:first-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(3) > .e-con-inner > *:last-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner > *:last-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) > .e-con-inner > *:last-child { padding-left: 20px !important; padding-right: 20px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) > .e-con-inner { min-height: 0 !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(4) .elementor-widget-image img, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(9) .elementor-widget-image img { height: auto !important; aspect-ratio: 4 / 3 !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner { flex-direction: column !important; padding: 60px 20px !important; gap: 28px !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:first-child, .page-id-1022 .elementor-1022 > .e-con:nth-of-type(10) > .e-con-inner > *:last-child { flex: 1 1 100% !important; width: 100% !important; } /* Osiolla on oma 0 50px -sivupadding, jonka päälle sisäkääreen 20px jättäisi 390px:n näytöllä vain 250px sisällölle. Nollataan ulompi. */ .page-id-1022 .elementor-1022 > .e-con:nth-of-type(2) { padding-left: 0 !important; padding-right: 0 !important; } .page-id-1022 .elementor-1022 > .e-con:nth-of-type(2) > .e-con-inner { padding: 60px 20px !important; } } /* ========================================================================== LOUNAS-SIVU (/lounas/) — liitä Custom CSS:n loppuun Pari: elementor/tee-lounas-json.py -> templates/train-factory-lounas.json Mitat kopioitu tuotannosta https://trainfactory.com/lounas (mitattu selaimessa 1440px leveydellä): section.description padding 160px 32px, palsta 675px keskitettynä, border-bottom 3px musta div.grid grid-template-columns: 478px 478px 478px gap 3px, background #000 div.card 478 x 478 valkoinen article.content padding 32px, flex column h2 MFred 56px / 58px, VERSAALI, margin-bottom 20px p.time ABCDiatype 21px / 700, VERSAALI p ABCDiatype 21px / 29px / 700 a.link 21px / 700, VERSAALI, border-bottom 3px, margin-top: auto (= kiinni kortin alareunassa) HUOM containerien muodosta: tee-lounas-json.py asettaa content_width: "full", jolloin Elementor renderöi kontit muodossa .e-con-full EIKÄ luo .e-con-inner -sisäkäärettä (sama havainto kuin header-templatessa). Jos joku myöhemmin vaihtaa kontin Boxed-tilaan Elementorin käyttöliittymästä, sisäkääre ilmestyy ja säännöt osuisivat väärään tasoon. Siksi jokainen asettelusääntö on kirjoitettu parina: .tf-x:not(:has(> .e-con-inner)), <- e-con-full (nykytila) .tf-x > .e-con-inner <- e-con-boxed (varalta) ========================================================================== */ /* ---------- 0. Otsikkofontin varapino ---------- Sama juurisyy kuin Market Hall -sivulla: brändifontit vastaavat 404:llä osoitteessa /wp-content/uploads/train-factory/, joten "MFred2.0" ei lataudu ja otsikot ladotaan leveällä järjestelmäfontilla. Kapea Arial Narrow on lähempänä MFrediä. Väistyy itsestään kun woff2- tiedostot on viety palvelimelle. */ .tf-lunch-intro .elementor-heading-title, .tf-lunch-card .elementor-heading-title { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. Johdanto ---------- Nykyisellä sivulla johdantoteksti levisi lähes koko ruudun leveydelle (n. 1900px), jolloin siitä tuli neljä loputtoman pitkää riviä. Tuotannossa palsta on 675px ja keskitetty — sama tässä, ja sama leveys annetaan myös "Lue lisää" -SEO-lohkolle. */ .tf-lunch-intro:not(:has(> .e-con-inner)), .tf-lunch-intro > .e-con-inner { align-items: center !important; } .tf-lunch-intro .elementor-widget-heading, .tf-lunch-intro .elementor-widget-text-editor, .tf-lunch-intro .elementor-widget-html { width: 100% !important; max-width: 675px !important; margin-left: auto !important; margin-right: auto !important; } /* Yleinen .tf-seo--market antaa 900px; tällä sivulla lohko tasataan johdantopalstan kanssa samaan 675px:n leveyteen. */ .tf-lunch-intro .tf-seo { max-width: 675px !important; margin: 0 auto !important; } .tf-lunch-intro .tf-seo__more { max-width: 675px !important; margin-inline: auto !important; } /* ---------- 2. Ravintolaruudukko ---------- CSS Grid eikä flex: 3px:n ruudukkoviivat syntyvät siitä että kontin tausta on musta ja gap on 3px. Flexillä sama vaatisi calc()-leveyksiä, jotka törmäisivät samaan flex-basis + border-box -ansaan joka jo sotki Market Hall -sivun puolikkaat (ks. lisays-markethall.css kohta 1). Gridillä 1fr-sarakkeet ovat aina oikein gapista riippumatta. */ .tf-lunch-grid:not(:has(> .e-con-inner)), .tf-lunch-grid > .e-con-inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; padding: 0 !important; max-width: none !important; } /* Neliömäinen kortti. aspect-ratio määrää RIVIN korkeuden (= sarakkeen leveys), mutta koska grid-kohteet venyvät oletuksena rivin korkuisiksi (align-items: stretch), pidempi teksti kasvattaa koko rivin sen sijaan että leikkautuisi pois. Juuri tätä halutaan: tuotannossa kortit ovat 478x478, mutta suomenkieliset kuvaukset ovat paikoin englantia pidempiä. min-width: 0 estää grid-kohteen automaattisen vähimmäisleveyden venyttämästä saraketta pitkän sanan takia. */ .tf-lunch-card { aspect-ratio: 1 / 1; min-width: 0 !important; } .tf-lunch-card:not(:has(> .e-con-inner)), .tf-lunch-card > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; height: 100% !important; } /* Boxed-varatapauksessa padding on kortilla, ei sisäkääreellä. */ .tf-lunch-card > .e-con-inner { padding: 0 !important; } /* Linkki kortin alareunaan, kuten tuotannossa (margin-top: auto). Kohdistus sekä suoraan lapseen (e-con-full) että sisäkääreen lapseen. */ .tf-lunch-card > .elementor-widget-button, .tf-lunch-card > .e-con-inner > .elementor-widget-button { margin-top: auto !important; width: auto !important; } /* Linkin alleviivaus on tuotannossa 3px reunaviiva, ei text-decoration — se piirtyy paksumpana ja irti tekstin alapidennyksistä. */ .tf-lunch-card .elementor-button { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; } .tf-lunch-card .elementor-button-text { display: inline-block; border-bottom: 3px solid currentColor; padding-bottom: 2px; } .tf-lunch-card .elementor-button:hover .elementor-button-text { color: #BA4435; } /* Tuotannon pystyrytmi kortin sisällä: otsikon alle 20px, lounasajan alle 20px. Elementorin oma 20px flex-gap hoitaa nämä, mutta widgetien omat marginaalit tulisivat sen päälle — nollataan ne. */ .tf-lunch-card .elementor-heading-title, .tf-lunch-card .elementor-widget-text-editor p { margin: 0 !important; } /* Tyhjä paikanvaraajakortti täyttää viimeisen rivin (tuotannon .card-placeholder). 17 ravintolaa + 1 tyhjä = 18 = 6 riviä a 3 tai 9 riviä a 2. Yhdellä sarakkeella sitä ei tarvita. */ .tf-lunch-card--tyhja { pointer-events: none; } /* ---------- 3. Responsiivisuus ---------- */ @media (max-width: 1200px) { .tf-lunch-card .elementor-heading-title { font-size: 40px !important; } } @media (max-width: 1100px) { .tf-lunch-grid:not(:has(> .e-con-inner)), .tf-lunch-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 700px) { .tf-lunch-grid:not(:has(> .e-con-inner)), .tf-lunch-grid > .e-con-inner { grid-template-columns: 1fr !important; } /* Yhdellä sarakkeella neliömuoto tekisi korteista turhan korkeita ja tyhjiä — annetaan korkeuden seurata sisältöä. */ .tf-lunch-card { aspect-ratio: auto !important; min-height: 0 !important; } /* Spesifisyys on oltava vähintään (0,0,3,0): kohdan 2 sääntö ".tf-lunch-card:not(:has(> .e-con-inner))" on (0,0,2,0), koska :not() ja :has() perivät argumenttiensa spesifisyyden — pelkkä ".tf-lunch-card--tyhja" (0,0,1,0) hävisi sille display-arvossa myös !importantin kanssa, ja tyhjä kortti jäi näkyviin. */ .tf-lunch-grid .tf-lunch-card.tf-lunch-card--tyhja { display: none !important; } .tf-lunch-card .elementor-heading-title { font-size: 36px !important; } .tf-lunch-intro .elementor-widget-heading, .tf-lunch-intro .elementor-widget-text-editor, .tf-lunch-intro .elementor-widget-html { max-width: 100% !important; } } /* ========================================================================== TAPAHTUMAT-SIVU — Loop Grid -versio Pari: elementor/tee-tapahtumat-json.py elementor/tapahtumat-suodatin.js Tapahtumat tulevat nyt WordPressin artikkeleista (kategoria "Tapahtumat"), joten yksittäistä korttia ei enää ladota käsin sivulle vaan Elementor Pron Loop Grid monistaa loop-item-templaten jokaiselle artikkelille. Loop Gridin renderöimä rakenne: .tf-events-grid (musta tausta = ruudukkoviivat) .elementor-widget-loop-grid .elementor-loop-container.elementor-grid .e-loop-item <- yksi artikkeli .tf-event-row <- loop-item-templaten juurikontti .tf-event-media .tf-event-info Mitat tuotannosta https://trainfactory.com/tapahtumat (1440px): a.image-row 1440 x 517, valkoinen; rivien välissä 3px musta .image vasen puolikas 720px, object-fit: cover .shell padding 125px 32px article 445px leveä, keskitetty pystysuunnassa ja vaakasuunnassa p.meta ABCDiatype 21/29 lihava, margin-bottom 7px h2 MFred 56/58 VERSAALI, margin-bottom 28px p.location ABCDiatype 21/29 lihava VERSAALI HUOM SPESIFISYYDESTÄ: pääsisällössä on jo vanhat .tf-event-row- ja .tf-event-media -säännöt, jotka on kirjoitettu tapahtumaruudukon VANHALLE korttimallille (media kiinteä 260px korkea, sarakkeet tf-w-45 / tf-w-55). Ne jäävät voimaan /tapahtumat/lista/-sivulla, jota tämä muutos ei koske, joten niitä ei poisteta — kaikki tämän tiedoston säännöt on sen sijaan rajattu .tf-events-grid -esivanhemman alle, jolloin ne voittavat vanhat yhden luokan säännöt eivätkä vuoda muualle. ========================================================================== */ /* ---------- 0. Otsikkofontin varapino ---------- Sama juurisyy kuin muillakin sivuilla: brändifontit vastaavat 404:llä, joten otsikot ladotaan leveällä järjestelmäfontilla. Väistyy itsestään kun woff2-tiedostot on viety palvelimelle. */ .tf-events-intro .elementor-heading-title, .tf-events-section-heading .elementor-heading-title, .tf-events-grid .tf-event-info h2.elementor-heading-title, .tf-events-toolbar .elementor-button { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. Johdanto ---------- Nykyisellä sivulla johdantoteksti levisi koko 1340px:n sisältöalueelle. Tuotannossa palsta on 675px ja keskitetty. */ .tf-events-intro .elementor-widget-heading, .tf-events-intro .elementor-widget-text-editor, .tf-events-intro .elementor-widget-html { width: 100% !important; max-width: 675px !important; margin-left: auto !important; margin-right: auto !important; } .tf-events-intro .elementor-heading-title, .tf-events-intro .elementor-widget-text-editor { text-align: center; } .tf-events-intro .tf-seo { max-width: 675px !important; margin: 0 auto !important; } .tf-events-intro .tf-seo__more { max-width: 675px !important; margin-inline: auto !important; } /* ---------- 2. Työkalurivi ---------- Tuotannossa ikonipainikkeet ovat 85px leveitä (padding 0 30px) ja kohdesuodatin 180px; loput riviä on tyhjää valkoista. Rivin alla 3px musta viiva (asetettu natiivisti JSONissa). */ .tf-events-toolbar > .e-con-inner, .tf-events-toolbar:not(:has(> .e-con-inner)) { align-items: stretch !important; min-height: 54px; } .tf-events-toolbar .tf-view-btn { flex: 0 0 auto !important; width: auto !important; cursor: pointer; } /* Ikonin koko lukitaan myös CSS:llä, vaikka JSONissa on natiivi 22x22. Jos kuvan liitetiedosto-ID puuttuu, Elementor tarjoilee oman placeholder.png:nsä (1200x800) — ilman tätä rajaa työkalurivi venyi 1750px korkeaksi. Todennettu tuotannossa. */ .tf-events-toolbar .tf-view-btn img { width: 22px !important; height: 22px !important; max-width: 22px !important; object-fit: contain !important; } /* Aktiivinen näkymä korostetaan koralliksi, kuten tuotannossa (span.view-icon-img taustaväri #F37060). Ikoni on SVG, joten väri annetaan maskina — näin sama tiedosto kelpaa kumpaankin tilaan. */ .tf-events-toolbar .tf-view-btn--active img { filter: invert(56%) sepia(48%) saturate(1000%) hue-rotate(324deg) brightness(101%) contrast(91%); } .tf-events-toolbar .tf-filter-dropdown { flex: 0 0 auto !important; width: auto !important; min-width: 180px; } /* Loppurivin täyttö: suodattimen jälkeen jäävä tila pysyy valkoisena eikä venytä nappeja (vanha .tf-filter-dropdown venyi 1240px leveäksi). */ .tf-events-toolbar > .e-con-inner > *:last-child, .tf-events-toolbar:not(:has(> .e-con-inner)) > *:last-child { margin-right: auto; } /* ---------- 3. Osion otsikko ---------- Tuotannossa koralli #F37060, padding 20px 32px 32px, alla 3px viiva. Molemmat asetettu natiivisti JSONissa; tässä vain otsikon marginaali. */ .tf-events-section-heading .elementor-heading-title { margin: 0 !important; } /* ---------- 4. Loop Grid: yksi tapahtuma per rivi ---------- Loop Grid piirtää oman CSS-ruudukkonsa muuttujien kautta. Pakotetaan yksi sarake ja 3px rako, jotta .tf-events-grid -kontin musta tausta näkyy riviviivoina — sama tekniikka kuin Lounas-sivun korttiruudukossa. */ .tf-events-grid .elementor-loop-container.elementor-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 3px !important; } /* Loop-item-kääre ei saa jäädä väliin omalla taustallaan eikä paddingillaan. */ .tf-events-grid .e-loop-item { display: block !important; padding: 0 !important; margin: 0 !important; } .tf-events-grid .e-loop-item.tf-is-hidden { display: none !important; } /* Rivi: kaksi yhtä leveää puolikasta. flex-basis on 50% eikä 0%, koska 0% + box-sizing:border-box antaa paddingilliselle sarakkeelle liian suuren lähtökoon (sama ansa joka sotki Market Hall -sivun puolikkaat, ks. lisays-markethall.css kohta 1). */ .tf-events-grid .tf-event-row { min-height: clamp(320px, 36vw, 517px); } .tf-events-grid .tf-event-row > .e-con-inner, .tf-events-grid .tf-event-row:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; } /* min-height: inherit VAIN sisäkääreelle. Jos se annetaan yllä olevassa parisäännössä, se osuu Boxed-varatapauksen lisäksi myös itse riviin (e-con-full), jolloin sen oma clamp() korvautuu vanhemman arvolla (auto) — rivi jäi tällöin 446px korkeaksi tuotannon 517px sijaan. Todennettu mittaamalla ennen ja jälkeen. */ .tf-events-grid .tf-event-row > .e-con-inner { min-height: inherit; } .tf-events-grid .tf-event-media, .tf-events-grid .tf-event-info { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Kuva täyttää oman puolikkaansa. Korkeus on asetettava koko ketjuun (kontti -> widget -> .elementor-widget-container -> img), muuten height:100% ei laskeudu mihinkään — sama toistuva ansa kuin muualla. */ .tf-events-grid .tf-event-media { overflow: hidden; height: auto !important; min-height: 0 !important; padding: 0 !important; } .tf-events-grid .tf-event-media > .e-con-inner { padding: 0 !important; height: 100% !important; } .tf-events-grid .tf-event-media .elementor-widget-image, .tf-events-grid .tf-event-media .elementor-widget-image .elementor-widget-container, .tf-events-grid .tf-event-media .elementor-widget-image a { display: block; height: 100% !important; } .tf-events-grid .tf-event-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Artikkeli ilman artikkelikuvaa: puolikas ei saa romahtaa nollaan. Kermanvärinen tausta on sama jota tuotantokin käyttää paikanvaraajana. */ .tf-events-grid .tf-event-media { background: #F2EDE6; } /* Sisältöpuolikas: teksti 445px leveänä, keskellä sekä pysty- että vaakasuunnassa (tuotannossa article margin: 0 105.5px 720px:n sisällä). */ .tf-events-grid .tf-event-info > .e-con-inner, .tf-events-grid .tf-event-info:not(:has(> .e-con-inner)) { justify-content: center !important; align-items: center !important; gap: 0 !important; } .tf-events-grid .tf-event-info .elementor-widget { width: 100% !important; max-width: 445px !important; } /* Tuotannon pystyrytmi: metarivin alle 7px, otsikon alle 28px. */ .tf-events-grid .tf-event-info .elementor-widget:first-child { margin-bottom: 7px; } .tf-events-grid .tf-event-info h2.elementor-heading-title { margin: 0 0 28px !important; } .tf-events-grid .tf-event-info p.elementor-heading-title { margin: 0 !important; } .tf-events-grid .tf-event-info h2.elementor-heading-title a { color: inherit !important; text-decoration: none !important; } .tf-events-grid .tf-event-info h2.elementor-heading-title a:hover { color: #BA4435 !important; } /* Tyhjä lyhennelmä tai puuttuva avainsana: Elementor jättää widgetin paikalleen tyhjänä, jolloin marginaali jäisi roikkumaan. */ .tf-events-grid .tf-event-info .elementor-widget:has(.elementor-heading-title:empty) { display: none !important; } /* ---------- Nollatila: ei yhtään tapahtumaa ---------- Kategoriassa ei välttämättä ole vielä artikkeleita, ja sivun pitää näyttää siltikin valmiilta. Ilman näitä sääntöjä musta .tf-events-grid romahtaisi muutaman pikselin korkuiseksi mustaksi raidaksi "Menneet tapahtumat" -otsikon alle. Loop Gridin oma "ei tuloksia" -viesti ladotaan valkoiselle pohjalle samaan tapaan kuin tapahtumarivit. */ .tf-events-grid .elementor-widget-loop-grid .e-loop-nothing-found-message, .tf-events-grid .elementor-widget-loop-grid .elementor-loop-container:not(:has(*))::after { display: block; background: #FFFFFF; padding: 80px 32px; text-align: center; font-family: "ABCDiatype", "ABC Diatype", sans-serif; font-size: 21px; font-weight: 700; line-height: 29px; color: #000000; } /* Varasisältö siltä varalta ettei Loop Gridin omaa viestiä ole asetettu: tyhjä ruudukkokontti ei saa jäädä pelkäksi mustaksi viivaksi. */ .tf-events-grid .elementor-widget-loop-grid .elementor-loop-container:not(:has(*))::after { content: "Ei tapahtumia juuri nyt."; } /* Kolmas taso: KOKO Loop Grid -widget puuttuu. Näin käy kun widgetin template_id on tyhjä — Elementor ei renderöi tyhjää widgettiä eikä tulosta edes sen kääretta (should_print_empty), jolloin tf-events-grid jää täysin lapsettomaksi ja näkyy pelkkänä mustana raitana koralliotsikon alla. Todennettu tuotannossa 28.8.2026. Oikea korjaus on valita kortin pohja Loop Gridiin, mutta sivun ei pidä näyttää rikkinäiseltä siihen asti. HUOM :not(:has(*)) eikä :empty — Elementor jättää konttiin rivinvaihdon, ja :empty vaatii ettei elementissä ole YHTÄÄN lapsisolmua, tyhjä tekstisolmu mukaan lukien. Mitattu tuotannosta: tf-events-grid sisältää merkkijonon " ", joten :empty ei osunut siihen lainkaan. :not(:has(*)) katsoo vain elementtilapsia ja osuu oikein. */ .tf-events-grid:not(:has(*))::after { /* HUOM: tämä teksti EI saa olla "Ei tapahtumia juuri nyt." — se on Loop Gridin oma viesti silloin kun kysely ei palauta artikkeleita. Tämä sääntö laukeaa vain kun koko widget puuttuu, eli sivu on konfiguroimatta. Sama teksti molemmissa tapauksissa peitti oikean syyn: kategoriassa oli artikkeli, mutta ruudukko näytti silti "ei tapahtumia", koska widgetiä ei ollut lainkaan. */ content: "Tapahtumalistaus puuttuu tältä sivulta."; display: block; width: 100%; background: #FFFFFF; padding: 80px 32px; text-align: center; font-family: "ABCDiatype", "ABC Diatype", sans-serif; font-size: 21px; font-weight: 700; line-height: 29px; color: #000000; } /* ---------- 5. Responsiivisuus ---------- */ @media (max-width: 900px) { .tf-events-grid .tf-event-row { min-height: 0 !important; } .tf-events-grid .tf-event-row > .e-con-inner, .tf-events-grid .tf-event-row:not(:has(> .e-con-inner)) { flex-direction: column !important; } .tf-events-grid .tf-event-media, .tf-events-grid .tf-event-info { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } .tf-events-grid .tf-event-media img { height: auto !important; aspect-ratio: 3 / 2 !important; } .tf-events-grid .tf-event-info > .e-con-inner, .tf-events-grid .tf-event-info:not(:has(> .e-con-inner)) { align-items: flex-start !important; } .tf-events-grid .tf-event-info .elementor-widget { max-width: 100% !important; } .tf-events-intro .elementor-widget-heading, .tf-events-intro .elementor-widget-text-editor, .tf-events-intro .elementor-widget-html { max-width: 100% !important; } } /* ---------- Metarivin katkaisu kahteen riviin ---------- Sisältömallissa metarivi on lyhennelmä (excerpt) muodossa "11.6 – 19.7 | 20:30". Jos kenttä on TYHJÄ, WordPress generoi sen automaattisesti artikkelin sisällön alusta — todennettu REST APIsta 28.8.2026: artikkelilla 1424 ei ole omaa lyhennelmää, ja kenttä palauttaa "Train Factory toivottaa Vesterinen Yhtyeineen lämpimästi tervetulleeksi kahdeksi...". Yllä oleva :empty-sääntö kattaa vain aidosti tyhjän kentän, ei tätä. Ilman katkaisua kortin metarivi vie 5–6 riviä ja työntää otsikon alas. Oikea korjaus on täyttää Lyhennelmä-kenttä; tämä on suoja. */ .tf-events-grid .tf-event-info .elementor-widget:first-child p.elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== MEISTÄ-SIVU (page-id-1033) — liitä Custom CSS:n loppuun Kaikki luvut mitattu, ei arvattu: - tuotanto https://trainfactory.com/meista (1440px) - staging https://trainfactory.fi-e.seravo.com/meista/ (1440px) - Figma-frame "About Page FIN" (1440 x 7603) pikselitasolla skannattuna Tuotannon osiokorkeudet ja -asettelu 1440px:llä: 0 johdanto 636 padding 200/32/120, palsta 675 keskitettynä H1 MFred 96/86 VERSAALI keskitetty 1 arkistokuva 915 padding 0 32px, kuva 1376 leveä 2 kuva+teksti 971 padding 140 0, gap 130 teksti 509 (sisältö 445), kuva 624 (kuva 560x691) 3 kuva+teksti 974 sama grid peilattuna, alla 3px viiva 4 palvelut 949 grid 719/719, 3px musta rako vasen: valokuva + keskitetty sanamerkki oikea: #F2EDE6, avainsanat MFred 96/86 5 löydä meidät 940 grid 719/719, tausta #000, kuva 719x937 6 keltainen CTA 511 grid 719/719, #FFC954, H1 96/86 Figman vyöhykkeet (oikea reuna) vahvistavat samat rajat: 952–4406 valkoinen, 4409–5244 #F2EDE6, 5244–6137 musta, 6137–6574 #FFC954, 6574–6860 musta (footer). HUOM: Meistä-sivun kontit on tallennettu Elementorin editorissa, joten niillä on --display kunnossa (0 kpl display:inline) — tätä sivua EI siis koske sama container_type-ansa kuin tuotuja templateja. ========================================================================== */ /* ---------- 0. Otsikkofontin varapino ---------- Brändifontit vastaavat 404:llä palvelimelta, joten otsikot ladotaan leveällä järjestelmäfontilla ja rivittyvät liikaa. Arial Narrow on lähempänä MFrediä. Väistyy itsestään kun woff2:t on viety palvelimelle. */ .page-id-1033 .elementor-heading-title { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. tf-w-50: puolikkaat eivät ole puolikkaita ---------- Sama juurisyy kuin Market Hall -sivulla: flex-basis 0% + border-box antaa paddingilliselle sarakkeelle liian suuren lähtökoon, jolloin pari asettuu 780/660 eikä 720/720. Mitattu tällä sivulla osioista 2, 3 ja 5. Rajattu tähän sivuun, koska .tf-w-50 on käytössä myös muualla ja ne on viritetty nykyisen käytöksen varaan. */ .page-id-1033 .tf-w-50 { flex-basis: 50% !important; } /* ---------- 2. Johdanto (osio 1) ---------- MITATTU staging: osio 379px korkea ilman pystypaddingia, ja kappaleet levisivät 981px ja 1340px leveiksi eli koko sisältöalueelle. Tuotannossa palsta on 675px ja keskitetty, ja osio 636px korkea. */ .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) > .e-con-inner { padding: 200px 0 120px !important; gap: 28px !important; align-items: center !important; } .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) > .e-con-inner > * { width: 100% !important; max-width: 675px !important; margin-left: auto !important; margin-right: auto !important; } /* Tuotannon otsikko on 96/86 VERSAALI ja keskitetty; stagingissa 56px. */ .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) .elementor-heading-title { font-size: clamp(48px, 6.7vw, 96px) !important; line-height: 0.9 !important; text-transform: uppercase !important; text-align: center !important; } .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* ---------- 3. Arkistokuva (tf-about-archival) ---------- MITATTU: kuva näkyi luonnollisessa 1368px leveydessään 1440px:n kontissa, eli reunoille jäi epäsymmetrinen 36px rako. Tuotannossa osiolla on 32px sivupadding ja kuva täyttää loput 1376px. */ .page-id-1033 .tf-about-archival { padding: 0 32px !important; } .page-id-1033 .tf-about-archival > .e-con-inner { padding: 0 !important; } .page-id-1033 .tf-about-archival .elementor-widget-image { width: 100% !important; } .page-id-1033 .tf-about-archival .elementor-widget-image img { width: 100% !important; height: auto !important; display: block !important; } /* ---------- 4. Kuva + teksti -rivit (osiot 2 ja 3) ---------- Nämä ovat sivun isoin poikkeama. MITATTU staging: rivit reunasta reunaan, teksti 780 ja kuva 660; osio 3 vain 374px korkea, koska kuva näkyi luonnollisessa mittasuhteessaan (660x371) eikä designin mukaisena 560x691 rajauksena. Tuotannon gridi (mitattu, molemmat rivit identtiset): tekstilaatikko 509 sisäpadding 0 32px -> teksti 445 kuvalaatikko 624 sisäpadding 0 32px -> kuva 560 x 691 väli 130 ryhmä 1263 keskitetty (89px marginaali molemmin puolin) rivin korkeus 971 (= 691 + 140 + 140) Osiot tunnistetaan .tf-about-median kautta — kummallakaan osiolla ei ole omaa luokkaa, mutta vain näissä kahdessa on tuo mediakontti. */ .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) > .e-con-inner { max-width: 1263px !important; margin-left: auto !important; margin-right: auto !important; padding: 140px 0 !important; gap: 130px !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) .tf-w-50:not(.tf-about-media) { flex: 0 0 509px !important; width: 509px !important; max-width: 509px !important; padding: 0 32px !important; } .page-id-1033 .tf-about-media { flex: 0 0 624px !important; width: 624px !important; max-width: 624px !important; padding: 0 32px !important; } .page-id-1033 .tf-about-media > .e-con-inner { padding: 0 !important; } /* Kuva rajautuu designin mittoihin. Korkeus on asetettava koko ketjuun (kontti -> widget -> .elementor-widget-container -> img), muuten height ei laskeudu mihinkään — sama toistuva ansa kuin muualla. */ .page-id-1033 .tf-about-media .elementor-widget-image, .page-id-1033 .tf-about-media .elementor-widget-image .elementor-widget-container { width: 100% !important; } .page-id-1033 .tf-about-media .elementor-widget-image img { width: 100% !important; height: 691px !important; object-fit: cover !important; display: block !important; } /* Tuotannon typografia näissä riveissä: otsikko 56/58, leipäteksti 21/29. Stagingissa 40px ja 18px. */ .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) .elementor-heading-title { font-size: 56px !important; line-height: 58px !important; text-transform: uppercase !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* ---------- 5. Palvelut / avainsanat (tf-about-services-box) ---------- MITATTU staging: yksi 1440px laatikko, korkeus 533px, sarakkeet 679/759, oikea puoli valkoinen ja avainsanat 34px korkeita. Tuotannossa: grid 719/719, 3px musta rako, oikea puoli #F2EDE6, avainsanat MFred 96/86 VERSAALI keskitettynä, osio 949px korkea. ⚠️ SISÄLTÖPUUTE: tuotannossa vasemmalla puolella on valokuva, jonka päällä sanamerkki on keskitettynä. Stagingissa on vain sanamerkki (hero-graphic.svg) ilman taustakuvaa. Tausta on tässä väliaikaisesti musta; oikea korjaus on valita taustakuva Elementorissa. */ .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-services-box) > .e-con-inner { padding: 0 !important; } .page-id-1033 .tf-about-services-box > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 3px !important; padding: 0 !important; background: #000000; min-height: clamp(520px, 66vw, 949px); } /* HUOM calc(50% - 1.5px) eikä 50%: puolikkaiden väliin jää 3px rako, jolloin 50% + 50% + 3px ylittää rivin ja toinen puolikas rivittyy omalle rivilleen. Mitattu ennen korjausta: osio oli 1276px korkea (571 + 3 + 702) eikä 949px, koska sarakkeet olivat allekkain. flex-wrap: nowrap on lisävarmistus. */ .page-id-1033 .tf-about-services-box > .e-con-inner { flex-wrap: nowrap !important; } .page-id-1033 .tf-about-services-box > .e-con-inner > * { flex: 1 1 calc(50% - 1.5px) !important; width: calc(50% - 1.5px) !important; max-width: calc(50% - 1.5px) !important; min-width: 0 !important; } /* Vasen puoli: sanamerkki keskelle, tausta tummana kunnes kuva lisätään. */ .page-id-1033 .tf-about-services-photo { background: #000000; padding: 60px 32px !important; } .page-id-1033 .tf-about-services-photo > .e-con-inner { justify-content: center !important; align-items: center !important; padding: 0 !important; height: 100%; } .page-id-1033 .tf-about-services-photo .elementor-widget-image img { width: 445px !important; max-width: 100% !important; height: auto !important; display: block !important; } /* Oikea puoli: kermanvärinen, sisältö keskitettynä. */ .page-id-1033 .tf-about-services-box > .e-con-inner > .tf-w-50:not(.tf-about-services-photo) { background: #F2EDE6 !important; padding: 60px 32px !important; } .page-id-1033 .tf-about-services-box > .e-con-inner > .tf-w-50:not(.tf-about-services-photo) > .e-con-inner { justify-content: center !important; align-items: center !important; padding: 0 !important; height: 100%; } .page-id-1033 .tf-about-services-box .elementor-widget-text-editor, .page-id-1033 .tf-about-services-box .elementor-widget-button { width: 100% !important; max-width: 445px !important; text-align: center !important; } .page-id-1033 .tf-about-services-box .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* Avainsanat: tuotannossa MFred 96/86 VERSAALI, keskitetty, 5 riviä. */ .page-id-1033 .tf-about-services-box .elementor-widget-heading .elementor-heading-title { font-size: clamp(40px, 6.7vw, 96px) !important; line-height: 0.9 !important; text-transform: uppercase !important; text-align: center !important; margin: 0 !important; white-space: nowrap; } .page-id-1033 .tf-about-services-box .elementor-widget-heading { width: 100% !important; } /* ---------- 6. Löydä meidät (osio 5) ---------- MITATTU staging: osion taustaväri oli #2B120D (tumma ruskea), sarakkeet 780/660 ja korkeus 492px. Tuotannossa tausta on puhdas musta, sarakkeet 719/719 ja osio 940px korkea kuvan täyttäessä oman puolikkaansa. ⚠️ LUOKKATÖRMÄYS: kuvasarakkeella on luokka .tf-map-graphic, joka on alunperin Palvelukartta-sivun luokka. Pääsisällössä sille on sääntö ".tf-map-graphic .elementor-widget-image { position: absolute; inset: 0 }", ja se osuu tähänkin — todennettu: kuvawidgetin laskettu position oli "absolute". Kumotaan se tällä sivulla. Siistein pitkän aikavälin korjaus on vaihtaa luokka Elementorissa (esim. tf-about-map). */ .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) { background-color: #000000 !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) > .e-con-inner { padding: 0 !important; gap: 0 !important; align-items: stretch !important; min-height: clamp(520px, 65vw, 940px); } .page-id-1033 .tf-map-graphic { position: static !important; flex: 1 1 50% !important; min-width: 0 !important; overflow: hidden; } .page-id-1033 .tf-map-graphic > .e-con-inner { padding: 0 !important; height: 100% !important; } .page-id-1033 .tf-map-graphic .elementor-widget-image { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; } .page-id-1033 .tf-map-graphic .elementor-widget-image .elementor-widget-container { height: 100% !important; } .page-id-1033 .tf-map-graphic .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Tekstipuoli: tuotannossa shell padding 185px 32px, sisältö 445px. */ .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) .tf-w-50:not(.tf-map-graphic) { padding: 0 32px !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) .tf-w-50:not(.tf-map-graphic) > .e-con-inner { justify-content: center !important; align-items: center !important; padding: 80px 0 !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) .tf-w-50:not(.tf-map-graphic) .elementor-widget { width: 100% !important; max-width: 445px !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) .elementor-heading-title { font-size: 56px !important; line-height: 58px !important; text-transform: uppercase !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* ---------- 7. Keltainen CTA (viimeinen osio) ---------- MITATTU staging: 268px korkea, padding 0 70px, sarakkeet 650/650 ja otsikko 56px. Tuotannossa 511px, puolikkaat 719/719, shell-padding 125px 32px ja otsikko MFred 96/86. */ .page-id-1033 .elementor-1033 > .e-con:last-child { padding-left: 0 !important; padding-right: 0 !important; } .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner { padding: 0 !important; gap: 0 !important; align-items: stretch !important; } .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner > * { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; padding: 125px 32px !important; } /* Sarakkeen sisäkääreellä oli oma pystypadding (vasemmalla 50px, oikealla Elementorin 10px oletus), joka tuli sarakkeen 125px:n PÄÄLLE — mitattu 696px korkea osio tuotannon 511px sijaan. Nollataan, jotta vain sarakkeen oma padding on voimassa. */ .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner > * > .e-con-inner { padding: 0 !important; } /* Tuotannon otsikko on 550px leveä; leveämmässä laatikossa rivitys menisi eri kohdista kuin designissa. */ .page-id-1033 .elementor-1033 > .e-con:last-child .elementor-widget-heading { width: 100% !important; max-width: 550px !important; } .page-id-1033 .elementor-1033 > .e-con:last-child .elementor-widget-text-editor, .page-id-1033 .elementor-1033 > .e-con:last-child .elementor-widget-button { width: 100% !important; max-width: 445px !important; } .page-id-1033 .elementor-1033 > .e-con:last-child .elementor-heading-title { font-size: clamp(48px, 6.7vw, 96px) !important; line-height: 0.9 !important; text-transform: uppercase !important; } .page-id-1033 .elementor-1033 > .e-con:last-child .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* ---------- 8. Responsiivisuus ---------- Kiinteät 509/624- ja 719-sarakkeet ovat mielekkäitä vain leveällä näytöllä. Alle 1200px palataan suhteellisiin arvoihin, alle 900px sarakkeet pinoutuvat. HUOM: kohdan 1 flex-basis-korjaus (0,0,2,0) voittaa sivuston yleisen mobiilisäännön (.tf-w-50, 0,0,1,0) myös media queryn sisällä, joten pinoutuminen on palautettava erikseen — sama korjaus tehtiin jo Market Hall -sivulle. */ @media (max-width: 1200px) { .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) > .e-con-inner { max-width: none !important; padding: 90px 40px !important; gap: 48px !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) .tf-w-50:not(.tf-about-media), .page-id-1033 .tf-about-media { flex: 1 1 50% !important; width: auto !important; max-width: none !important; } .page-id-1033 .tf-about-media .elementor-widget-image img { height: auto !important; aspect-ratio: 560 / 691 !important; } .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) > .e-con-inner { padding: 120px 20px 80px !important; } } @media (max-width: 900px) { .page-id-1033 .tf-w-50 { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) > .e-con-inner, .page-id-1033 .tf-about-services-box > .e-con-inner, .page-id-1033 .elementor-1033 > .e-con:has(.tf-map-graphic) > .e-con-inner, .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner { flex-direction: column !important; min-height: 0 !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) > .e-con-inner { padding: 56px 20px !important; gap: 28px !important; } .page-id-1033 .elementor-1033 > .e-con:has(.tf-about-media) .tf-w-50:not(.tf-about-media), .page-id-1033 .tf-about-media, .page-id-1033 .tf-about-services-box > .e-con-inner > *, .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner > * { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } .page-id-1033 .elementor-1033 > .e-con:last-child > .e-con-inner > * { padding-top: 56px !important; padding-bottom: 56px !important; } .page-id-1033 .tf-about-media .elementor-widget-image img { height: auto !important; aspect-ratio: 3 / 2 !important; } .page-id-1033 .tf-map-graphic .elementor-widget-image img { height: auto !important; aspect-ratio: 3 / 2 !important; } .page-id-1033 .tf-about-archival { padding: 0 20px !important; } /* Johdanto-osiolla on oma 0 50px -sivupadding, jonka päälle sisäkääreen 20px jättäisi 390px:n näytöllä vain 250px sisällölle. Nollataan ulompi. */ .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) { padding-left: 0 !important; padding-right: 0 !important; } .page-id-1033 .elementor-1033 > .e-con:nth-of-type(1) > .e-con-inner { padding: 80px 20px 56px !important; } .page-id-1033 .tf-about-services-box .elementor-widget-heading .elementor-heading-title { white-space: normal; } } /* ========================================================================== ARTIKKELISIVUN TYYLIT (Single Post) Pari tiedostolle tee-artikkeli-json.py. Liitetään Custom CSS:n loppuun. Mitattu ennen (hello-elementor-teeman oletuspohja, 1440px): artikkelikuva EI DOM:issa lainkaan h1 1140px leveä, teeman oletusfontti leipäteksti 1140px mitta = n. 170 merkkiä rivillä Kaikki alla oleva on kirjoitettu templaten luokkien varaan (tf-post-*), joten se ei osu teeman oletuspohjaan — jos template jostain syystä ei ole voimassa, sivu näyttää entiseltään eikä hajoa. ========================================================================== */ /* ---------- 1. Hero: artikkelikuva ylhäällä ---------- Korkeus sidotaan ruudun korkeuteen samalla kaavalla kuin etusivun ja Sijainti-sivun herot (lisays-etusivu.css 6.1, lisays-sijainti.css): pienin kolmesta — 48vw, katto 720px, ruudun korkeus miinus header. Lattia 360px. Kaksi height-riviä: svh on oikea yksikkö mobiilissa, vanhemmat selaimet ohittavat sen ja käyttävät vh-versiota. Header on 65px yli 1175px:n ja 51px sen alla (lisays-header.css 8). */ .tf-post-hero { position: relative !important; overflow: hidden; border-bottom: 3px solid #000; display: flex !important; justify-content: flex-end !important; } @media (min-width: 1176px) { .tf-post-hero { height: max(360px, min(48vw, 720px, calc(100vh - 65px))) !important; height: max(360px, min(48vw, 720px, calc(100svh - 65px))) !important; } } @media (max-width: 1175px) { .tf-post-hero { height: max(360px, min(48vw, 720px, calc(100vh - 51px))) !important; height: max(360px, min(48vw, 720px, calc(100svh - 51px))) !important; } } /* Kuva täyttää koko heron. Oma kontti siksi, että tekstikontti pysyy normaalissa virrassa ja voi käyttää flexin justify-contentia. */ .tf-post-hero-media { position: absolute !important; inset: 0 !important; padding: 0 !important; z-index: 0; } .tf-post-hero-media > .e-con-inner { padding: 0 !important; height: 100% !important; } .tf-post-hero-media .elementor-widget-image, .tf-post-hero-media .elementor-widget-image .elementor-widget-container { height: 100% !important; } .tf-post-hero-media .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Tummennusliuku. Artikkelikuvat ovat toimittajan valitsemia eikä niiden tummuutta voi taata, joten valkoisen tekstin luettavuus varmistetaan liu'ulla eikä toivomalla. Vain alaosaan, jotta kuva säilyy yläosastaan koskemattomana. */ .tf-post-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 28%, rgba(0,0,0,0) 62%); pointer-events: none; } /* Teksti alavasemmalle kuvan päälle — sama asemointi kuin etusivun herossa (.tf-hero-photo-content). */ .tf-post-hero-sisalto { position: relative !important; z-index: 2; width: 100% !important; max-width: min(900px, 100%) !important; padding: 0 clamp(24px, 8vw, 150px) 64px !important; } .tf-post-hero-sisalto > .e-con-inner { padding: 0 !important; } .tf-post-hero-sisalto .elementor-heading-title { color: #FFFFFF !important; } /* Avainsanarivi: väli erottimen ympärille, koska post-terms tulostaa pelkän pilkun ("Market Hall, Stage"). */ .tf-post-hero-sisalto > .e-con-inner > .elementor-widget-heading:first-child .elementor-heading-title { letter-spacing: .04em; } /* Metarivi (lyhennelmä) katkaistaan kahteen riviin. SYY: jos artikkelin Lyhennelmä-kenttä on tyhjä, WordPress generoi sen automaattisesti sisällön alusta — todennettu REST APIsta 28.8.2026: artikkelilla 1424 ei ole omaa lyhennelmää, ja kenttä palauttaa "Train Factory toivottaa Vesterinen Yhtyeineen lämpimästi tervetulleeksi kahdeksi...". Ilman katkaisua heron alle valuisi kokonainen kappale kuvan päälle. Oikea korjaus on täyttää kenttä ("28.–29.8.2026 | Portit 18.00"), tämä on vain suoja. */ .tf-post-hero-sisalto > .e-con-inner > .elementor-widget-heading:last-child .elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- 2. Leipäteksti luettavaan mittaan ---------- 675px on sama mitta jota Sijainti-sivun keskitetyt tekstiosiot käyttävät (lisays-sijainti.css kohta 3) — n. 75 merkkiä rivillä. */ .tf-post-sisalto { width: 100% !important; max-width: 675px !important; padding: 0 !important; } .tf-post-sisalto > .e-con-inner { padding: 0 !important; } /* Elementorin Post Content -widget tulostaa Gutenbergin lohkot sellaisenaan, joten tyylit kohdistetaan lohkojen omiin elementteihin. Fonttinimet ovat merkkitarkkoja: tuotanto käyttää muotoja "MFred" ja "ABCDiatype" (ks. CLAUDE.md). */ .tf-post-sisalto .elementor-widget-theme-post-content { font-family: "ABCDiatype", "ABC Diatype", sans-serif; font-size: 19px; line-height: 1.6; color: #000000; } .tf-post-sisalto p { margin: 0 0 1.15em; font-size: 19px; line-height: 1.6; } .tf-post-sisalto h2, .tf-post-sisalto h3, .tf-post-sisalto h4 { font-family: "MFred", "MFred2.0", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1.05; margin: 1.8em 0 .5em; } .tf-post-sisalto h2 { font-size: 40px; } .tf-post-sisalto h3 { font-size: 32px; } .tf-post-sisalto h4 { font-size: 24px; } /* Gutenbergin otsikot on ladottu -elementin sisään ("

Perjantai 28.8.

"), ja MFredissä ei ole 700-leikkausta — selain tekisi siitä faux boldin. Ks. CLAUDE.md: MFred 400 ja 800, ei 700. */ .tf-post-sisalto h2 strong, .tf-post-sisalto h3 strong, .tf-post-sisalto h4 strong { font-weight: 400; } .tf-post-sisalto ul, .tf-post-sisalto ol { margin: 0 0 1.15em; padding-left: 1.3em; } .tf-post-sisalto li { margin-bottom: .35em; font-size: 19px; line-height: 1.6; } .tf-post-sisalto a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .tf-post-sisalto a:hover { color: #BA4435; } .tf-post-sisalto img { max-width: 100%; height: auto; } .tf-post-sisalto blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid #000; } /* ---------- 3. Paluulinkki ---------- */ .tf-post-paluu .elementor-widget-button { text-align: center !important; } .tf-post-paluu .elementor-widget-button .elementor-button { padding-left: 0 !important; padding-right: 0 !important; color: #FFFFFF !important; border-bottom: 2px solid #FFFFFF; } .tf-post-paluu .elementor-widget-button .elementor-button:hover { color: #FFC954 !important; border-bottom-color: #FFC954; } /* ---------- 4. Mobiili ---------- Sama linja kuin etusivun kohdassa 4.10: työpöydän otsikkokoot ovat 375px:llä liian isoja. H1 72px -> 34px (Elementorin oma mobiiliarvo olisi 40px, mutta "Vesterinen Yhtyeineen The Train Factorylla 28.–29.8.2026" on pitkä otsikko ja vei sillä viisi riviä). */ @media (max-width: 767px) { .tf-post-hero-sisalto { padding: 0 24px 44px !important; } .tf-post-hero-sisalto .elementor-heading-title { font-size: 34px !important; } .tf-post-hero-sisalto > .e-con-inner > .elementor-widget-heading:first-child .elementor-heading-title, .tf-post-hero-sisalto > .e-con-inner > .elementor-widget-heading:last-child .elementor-heading-title { font-size: 16px !important; } .tf-post-sisalto .elementor-widget-theme-post-content, .tf-post-sisalto p, .tf-post-sisalto li { font-size: 17px; } .tf-post-sisalto h2 { font-size: 30px; } .tf-post-sisalto h3 { font-size: 25px; } .tf-post-sisalto h4 { font-size: 20px; } } /* ========================================================================== GENEROITU TIEDOSTO — ÄLÄ MUOKKAA KÄSIN. Lähde: elementor/tee-kartta-json.py (KOHTEET-lista). Aja uudelleen: python3 elementor/tee-kartta-json.py Kohdekohtaiset värit CSS-muuttujina. Asettelu on tiedostossa lisays-kartta.css, joka lukee nämä muuttujat — näin värilista on olemassa vain yhdessä paikassa (generaattorin KOHTEET). Värit on todennettu itse karttakuvasta: jokainen sävy esiintyy Train-Factory-kartta.png:ssä n. 2100-2400 pikselin täplänä eli yhden numeropallon kokoisena, ja kunkin sävyn keskipiste osuu juuri sen numeron pallon päälle. Kaikki 27 tarkistettu. ========================================================================== */ .tf-map-item--1 { --tf-map-vari: #EC6444; } /* Open Padel */ .tf-map-item--2 { --tf-map-vari: #CC4424; } /* Motivus */ .tf-map-item--3 { --tf-map-vari: #D44C24; } /* Kiipeilyareena K2 */ .tf-map-item--4 { --tf-map-vari: #F4845C; } /* Odessa */ .tf-map-item--5 { --tf-map-vari: #FC9474; } /* Corona Bar */ .tf-map-item--6 { --tf-map-vari: #FCBC1C; } /* Super Bario */ .tf-map-item--7 { --tf-map-vari: #DC8C34; } /* Eagle Club */ .tf-map-item--8 { --tf-map-vari: #FCE49C; } /* Hasan & Partners */ .tf-map-item--9 { --tf-map-vari: #FCD474; } /* Makasiini Contemporary */ .tf-map-item--10 { --tf-map-vari: #FCAC24; } /* Kino Konepaja */ .tf-map-item--11 { --tf-map-vari: #64A4A4; } /* Aino */ .tf-map-item--12 { --tf-map-vari: #94BCBC; } /* Franklin */ .tf-map-item--13 { --tf-map-vari: #3C6C74; } /* Dubrovnik */ .tf-map-item--14 { --tf-map-vari: #BCDCE4; } /* Yard */ .tf-map-item--15 { --tf-map-vari: #5C8C94; } /* Metro pikatukku */ .tf-map-item--16 { --tf-map-vari: #9CAC54; } /* Market Hall */ .tf-map-item--17 { --tf-map-vari: #AC9C74; } /* LIDL */ .tf-map-item--18 { --tf-map-vari: #ECDCCC; } /* Pole4fit */ .tf-map-item--19 { --tf-map-vari: #DCB48C; } /* Buli Jiu-Jitsu */ .tf-map-item--20 { --tf-map-vari: #C49C74; } /* Medanta */ .tf-map-item--21 { --tf-map-vari: #B4BC94; } /* Floranna */ .tf-map-item--22 { --tf-map-vari: #6C844C; } /* Subway */ .tf-map-item--23 { --tf-map-vari: #BCC484; } /* Empanadas Café */ .tf-map-item--24 { --tf-map-vari: #C4CC8C; } /* Apteekki */ .tf-map-item--25 { --tf-map-vari: #9C6848; } /* Konepaja näyttämö */ .tf-map-item--26 { --tf-map-vari: #B8754F; } /* Universum Teatteri */ .tf-map-item--p { --tf-map-vari: #74ACAC; } /* Pysäköinti */ /* ========================================================================== PALVELUKARTTA (/palvelut/kartta/) — liitä Custom CSS:n loppuun Pari: elementor/tee-kartta-json.py elementor/lisays-kartta-varit.css (generoitu värilista) Kohdenumerot saavat saman värin kuin karttakuvan numeropallot, jolloin listan rivin ja kartan pallon yhdistää yhdellä silmäyksellä. Värit tulevat CSS-muuttujana --tf-map-vari, joka asetetaan lisays-kartta-varit.css:ssä kohdekohtaisesti (.tf-map-item--1 … .tf-map-item--26, .tf-map-item--p). Tämä tiedosto ei siis sisällä yhtään väriarvoa — värilista on olemassa vain generaattorissa. Rakenne jota tämä ohjaa (tulee templatesta): .tf-map-section .tf-map-sidebar .tf-map-item.tf-map-item--1 .elementor-widget-text-editor numero -> värillinen pallo .elementor-widget-button nimi … .tf-map-graphic .elementor-widget-image karttakuva HUOM: .tf-map-sidebar ja .tf-map-graphic ovat käytössä jo pääsisällössä, ja niille on siellä säännöt vanhalle pinnikartalle (kuva absoluuttisesti asemoituna ja object-fit: cover). Uusi kartta on tavallinen kuva, jonka pitää näkyä KOKONAAN — cover rajaisi reunimmaiset numerot pois. Vanhat säännöt kumotaan alla nimenomaisesti. Jokainen sisäkääreeseen kohdistuva sääntö on kirjoitettu PARINA: .tf-x > .e-con-inner, <- Boxed-kontti .tf-x:not(:has(> .e-con-inner)) <- Full-kontti (nykytila) Generaattori asettaa content_width: "full", jolloin Elementor EI luo .e-con-inner-käärettä. Mitattu: ilman paria sivupalkin kaksisarakkeinen ruudukko ei osunut mihinkään 1024px:llä. ⚠️ PARIIN EI SAA LAITTAA "padding: 0". Full-tilassa parin jälkimmäinen haara osuu ITSE konttiin, joka kantaa oikean paddingin — ja koska pari on spesifisyydeltään (0,0,2,0) ja yhden luokan sääntö (0,0,1,0), pari voittaa myös oman tiedoston myöhemmän säännön. Mitattu tuotannossa: .tf-kartta-cta jäi 145px korkeaksi (template 100px 70px) ja .tf-kartta-events-media menetti 60px 32px -paddinginsa. Padding-nollaus kuuluu VAIN "> .e-con-inner" -haaraan omana sääntönään. ========================================================================== */ /* ---------- 0. Otsikkofontin varapino ---------- Brändifontit vastaavat 404:llä palvelimelta. Väistyy itsestään kun woff2-tiedostot on viety palvelimelle. */ .page-id-1070 .elementor-heading-title, .page-id-1070 .tf-kartta-tabs .elementor-button { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. Näkymävalitsin (Palvelut / Kartta) ---------- */ .tf-kartta-tabs > .e-con-inner, .tf-kartta-tabs:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .tf-kartta-tab { flex: 0 0 auto !important; width: auto !important; } .tf-kartta-tab .elementor-button { white-space: nowrap; } /* ---------- 2. Kartta-osio: lista + kuva ---------- */ .tf-map-section > .e-con-inner, .tf-map-section:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 0 !important; } /* Sivupalkki. Pääsisällön sääntö rajaa sen 740px korkeaksi ja panee vierityksen päälle; 27 riviä ei mahdu siihen, ja puolet kohteista jäisi piiloon juuri kun tarkoitus on löytää ne helposti. Annetaan listan olla koko pituudessaan ja pidetään kartta mukana sticky-asemoinnilla. */ .page-id-1070 .tf-map-sidebar { flex: 0 0 329px !important; width: 329px !important; max-height: none !important; overflow: visible !important; border-right: 3px solid #000000; align-self: stretch; } .page-id-1070 .tf-map-sidebar > .e-con-inner, .page-id-1070 .tf-map-sidebar:not(:has(> .e-con-inner)) { padding: 24px 0 !important; gap: 0 !important; } /* Yksi kohderivi: värillinen numeropallo + nimi. */ .tf-map-item > .e-con-inner, .tf-map-item:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; } .tf-map-item { cursor: default; transition: background-color .15s ease; } .tf-map-item:hover { background: rgba(0, 0, 0, .05); } /* Numeropallo. Sama ilme kuin kartan palloilla: väri täyttönä, musta ääriviiva ja musta numero. Musta teksti toimii kaikilla 27 sävyllä, koska kartassakin numerot ovat mustia — vaaleimmatkin sävyt (#ECDCCC, #FCE49C) ovat riittävän vaaleita mustalle tekstille. */ .tf-map-item .elementor-widget-text-editor { flex: 0 0 auto !important; width: auto !important; } .tf-map-item .elementor-widget-text-editor p { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; border-radius: 50%; background: var(--tf-map-vari, #FFFFFF); border: 2px solid #000000; color: #000000; font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* Kohteen nimi */ .tf-map-item .elementor-widget-button { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } /* Nimet vasempaan reunaan. Mitattu: nimien vasen reuna vaihteli rivistä toiseen (110–152px), eli teksti oli keskitetty. Keskitys tulee tällä Elementor-versiolla widgetin kääreen text-alignista, EI napin omasta asetuksesta — nappielementtiä ei myöskään aina kääritä .elementor-button-wrapperiin. Siksi tasaus pakotetaan koko ketjuun. */ .tf-map-item .elementor-widget-button, .tf-map-item .elementor-widget-button .elementor-widget-container, .tf-map-item .elementor-button-wrapper { text-align: left !important; } .tf-map-item .elementor-button { display: flex !important; justify-content: flex-start !important; text-align: left !important; width: 100% !important; } .tf-map-item .elementor-button-content-wrapper { justify-content: flex-start !important; width: 100%; } .tf-map-item .elementor-button-text { white-space: normal !important; overflow-wrap: break-word !important; } .tf-map-item:hover .elementor-button-text { text-decoration: underline; } /* Karttakuva. Pääsisällön .tf-map-graphic-säännöt on kirjoitettu vanhalle pinnikartalle: kuvawidget position:absolute + object-fit:cover. Tässä kartta on tavallinen kuva ja se pitää näkyä kokonaan, joten molemmat kumotaan. Sticky pitää kartan näkyvissä kun pitkää listaa selataan. */ .page-id-1070 .tf-map-graphic { position: sticky !important; top: 80px; flex: 1 1 auto !important; min-width: 0 !important; align-self: flex-start !important; padding: 20px !important; } .page-id-1070 .tf-map-graphic > .e-con-inner { padding: 0 !important; } .page-id-1070 .tf-map-graphic .elementor-widget-image { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; } .page-id-1070 .tf-map-graphic .elementor-widget-image img { width: 100% !important; height: auto !important; object-fit: contain !important; display: block !important; } /* ---------- 3. Löydä tapahtumat -osio ---------- Kuvapuolisko on sanamerkki (hero-graphic.svg), ei valokuva, joten sitä ei rajata vaan keskitetään mustalle pohjalle kuten muillakin sivuilla. */ .tf-kartta-events > .e-con-inner, .tf-kartta-events:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; } .tf-kartta-events > .e-con-inner > *, .tf-kartta-events:not(:has(> .e-con-inner)) > * { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; } /* Kontilla on Elementorissa asetettu TAUSTAKUVA (lunch-discover-scaled.jpg). Elementor ei kirjoita sille background-sizea, joten selaimen oletukset jäävät voimaan: auto / 0% 0% / repeat — kuva näkyy luonnollisessa koossaan vasemmasta yläkulmasta ja toistuu. Juuri se näkyi "väärin rajautuvana" nauhana. Rajataan kuva kunnolla. background-shorthandia EI saa käyttää: se nollaisi background-imagen, ja Elementorin oma sääntö on spesifisyydeltään korkeampi, joten lopputulos olisi arvaamaton. Asetetaan vain tarvittavat osat. Spesifisyys .page-id-1070-etuliitteellä: ilman sitä .tf-flush (padding: 0 !important) ja tämän tiedoston omat parisäännöt voittavat yhden luokan säännön. */ .page-id-1070 .tf-kartta-events-media { background-color: #000000; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; padding: 60px 32px !important; align-self: stretch !important; min-height: 420px; } .tf-kartta-events-media > .e-con-inner, .tf-kartta-events-media:not(:has(> .e-con-inner)) { justify-content: center !important; align-items: center !important; height: 100%; } .tf-kartta-events-media > .e-con-inner { padding: 0 !important; } /* Sanamerkki on grafiikka: se skaalautuu leveyden mukaan eikä sitä saa rajata. Pääsisällön .tf-about-media-sääntö asettaa kuville object-fit: cover, mikä leikkaisi sanamerkin — kumotaan se tässä. */ /* Sanamerkin leveys kiinteänä eikä prosentteina: prosentti ratkeaa widget-kääreen leveydestä, joka ei ole tässä puolikkaan leveys vaan 445px (widgetin oma max-width), jolloin 60 % antoi vain 267px. */ .page-id-1070 .tf-kartta-events-media .elementor-widget-image { width: 100% !important; max-width: none !important; } .page-id-1070 .tf-kartta-events-media .elementor-widget-image img { width: 100% !important; max-width: 380px !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } .tf-kartta-events .elementor-widget-text-editor, .tf-kartta-events .elementor-widget-heading, .tf-kartta-events .elementor-widget-button { width: 100% !important; max-width: 445px !important; } /* ---------- 4. Sininen CTA ---------- */ /* Pystypadding asetetaan CSS:llä eikä jätetä Elementorin --padding-* -muuttujien varaan. Mitattu tuotannossa: kontilla oli --padding-top:100px ja --padding-left:70px, mutta laskettu padding oli 0px eikä yksikään sääntö kuluttanut noita muuttujia — osio jäi 145px korkeaksi. Sama ilmiö kuin --display-ansassa: muuttuja on olemassa, mutta sitä lukevaa sääntöä ei. Kirjoitetaan arvo suoraan. */ .page-id-1070 .tf-kartta-cta { padding: 100px 70px !important; } .tf-kartta-cta > .e-con-inner, .tf-kartta-cta:not(:has(> .e-con-inner)) { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 60px !important; } .tf-kartta-cta > .e-con-inner > *, .tf-kartta-cta:not(:has(> .e-con-inner)) > * { flex: 1 1 50% !important; width: 50% !important; min-width: 0 !important; } .tf-kartta-cta .elementor-widget-text-editor, .tf-kartta-cta .elementor-widget-button { width: 100% !important; max-width: 445px !important; } /* ---------- 5. Responsiivisuus ---------- */ @media (max-width: 1100px) { /* Kartta ja lista allekkain: kapealla näytöllä 329px:n palkki veisi liian ison osan leveydestä, ja kartta jäisi lukukelvottoman pieneksi. */ .tf-map-section > .e-con-inner, .tf-map-section:not(:has(> .e-con-inner)) { flex-direction: column !important; } .page-id-1070 .tf-map-sidebar { flex: 1 1 auto !important; width: 100% !important; border-right: none !important; border-top: 3px solid #000000; order: 2; } .page-id-1070 .tf-map-graphic { position: static !important; width: 100% !important; order: 1; } /* Lista kahteen sarakkeeseen, jotta 27 riviä ei venytä sivua turhaan. */ .page-id-1070 .tf-map-sidebar > .e-con-inner, .page-id-1070 .tf-map-sidebar:not(:has(> .e-con-inner)) { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; padding: 24px 8px !important; } } @media (max-width: 700px) { .page-id-1070 .tf-map-sidebar > .e-con-inner, .page-id-1070 .tf-map-sidebar:not(:has(> .e-con-inner)) { grid-template-columns: 1fr !important; } .tf-kartta-events > .e-con-inner, .tf-kartta-events:not(:has(> .e-con-inner)), .tf-kartta-cta > .e-con-inner, .tf-kartta-cta:not(:has(> .e-con-inner)) { flex-direction: column !important; gap: 28px !important; } .tf-kartta-events > .e-con-inner > *, .tf-kartta-events:not(:has(> .e-con-inner)) > *, .tf-kartta-cta > .e-con-inner > *, .tf-kartta-cta:not(:has(> .e-con-inner)) > * { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } .tf-kartta-tab .elementor-button { font-size: 20px !important; } } /* ========================================================================== SIJAINTI-SIVU (page-id-1080) — liitä Custom CSS:n loppuun Kaikki luvut mitattu: - Figma-frame "Find Us" (1440 x 8236) pikselitasolla skannattuna - tuotanto https://trainfactory.com/sijainti (1440px) - staging https://trainfactory.fi-e.seravo.com/sijainti/ (1440px) Figman vyöhykkeet (oikea reuna) ja tuotannon osiokorkeudet: 0 karttahero 61–872 811 koko leveys, katukartta 1 johdantoteksti 875–1389 514 palsta 675 keskitettynä 2 beige-jako 1392–2227 835 kuva 719 / #F2EDE6 719, 3px rako 3 keltainen 2230–2673 443 teksti 719 / karttakuva 719 4 kuva+teksti 2768–3460 831 kuva 561x692 oikealla 5 kuva+teksti 3599–4291 831 kuva 561x692 vasemmalla 6 kuva+teksti 4430–5122 831 kuva 561x692 oikealla 7 tekstiosio 5122–5622 456 palsta 675 keskitettynä 8 keltainen 5625–6463 838 kuva 719 / #FFC954 719 Kuva+teksti-rivit (4–6) käyttävät TÄSMÄLLEEN samaa gridiä kuin Market Hall -sivu: kuva 561x692, teksti 445, väli 130, ryhmä 1138 keskitettynä 151px marginaalein. Mitattu Figmasta: kuvat x 728–1289 / 151–712. HUOM: tuotannon osiot 4–6 EIVÄT kelpaa mittalähteeksi — niiden kuvat ovat rikki (leveys 64px), aivan kuten Market Hall -sivullakin. Siksi näiden rivien mitat on otettu Figmasta. ========================================================================== */ /* ---------- 0. Otsikkofontin varapino ---------- Brändifontit vastaavat 404:llä palvelimelta. Väistyy itsestään kun woff2-tiedostot on viety palvelimelle. */ .page-id-1080 .elementor-heading-title { font-family: "MFred", "MFred2.0", "Arial Narrow", "Roboto Condensed", sans-serif !important; } /* ---------- 1. tf-w-50: puolikkaat eivät ole puolikkaita ---------- Sama flex-basis 0% + border-box -ansa kuin Market Hall- ja Meistä- sivuilla: paddingillinen sarake saa liian suuren lähtökoon ja pari asettuu esim. 770/670 eikä 720/720. Mitattu tämän sivun osioista 2, 3, 4, 5, 6 ja 8. */ .page-id-1080 .tf-w-50 { flex-basis: 50% !important; } /* ---------- 2. Karttahero (tf-fu-top-map) ---------- MITATTU staging: osio 490px korkea, mutta sen sisällä oleva kuvawidget oli 1440x1440 — neliökuva puskee ulos matalasta laatikosta ja overflow: hidden leikkaa siitä näkyviin vain ylimmän kolmanneksen. Designissa kartta on 811px korkea kaistale, jossa Train Factoryn korttelin pitää näkyä keskellä. Korkeus 811/1440 = 56.3vw, sama suhde kuin Market Hallin herossa. */ .page-id-1080 .tf-fu-top-map { height: clamp(320px, 56.3vw, 811px) !important; max-height: none !important; overflow: hidden; padding: 0 !important; } .page-id-1080 .tf-fu-top-map > .e-con-inner, .page-id-1080 .tf-fu-top-map:not(:has(> .e-con-inner)) { height: 100% !important; } .page-id-1080 .tf-fu-top-map > .e-con-inner { padding: 0 !important; } .page-id-1080 .tf-fu-top-map .elementor-widget-image, .page-id-1080 .tf-fu-top-map .elementor-widget-image .elementor-widget-container { height: 100% !important; } .page-id-1080 .tf-fu-top-map .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ---------- 3. Tekstiosiot (osiot 1 ja 7) ---------- MITATTU staging: molemmat 367px korkeita ja kappale 1340px leveä eli koko sisältöalueen levyinen. Designissa palsta on 675px ja keskitetty, ja osion pystypadding on 120px. Osioilla ei ole omaa luokkaa. Ne ovat sivun ainoat kontit joilla ei ole yhtään tf-luokkaa, joten ne tunnistetaan siitä. */ .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]):not(:has(> .e-con-inner)) { align-items: center !important; gap: 24px !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) > .e-con-inner { padding: 120px 0 !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-heading, .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-text-editor, .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-button { width: 100% !important; max-width: 675px !important; margin-left: auto !important; margin-right: auto !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-heading-title { text-align: center !important; text-transform: uppercase !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-text-editor { font-size: 21px !important; line-height: 29px !important; } /* ---------- 4. Puolikkaat kuva/väri-osiot (osiot 2, 3 ja 8) ---------- Designissa nämä ovat 719/719 puolikkaita 3px mustalla raolla; kuva täyttää oman puolikkaansa reunasta reunaan ja väripuoliskon teksti alkaa 122px sisällä omasta reunastaan (= 843px sivun vasemmasta reunasta, sama sisennysgridi kuin Market Hall -sivulla). MITATTU staging: sarakkeet 670/770 ja osiot 459 / 461 / 426 px korkeita designin 835 / 443 / 838 sijaan — kuvat näkyivät luonnollisessa mittasuhteessaan eivätkä täyttäneet puolikastaan. HUOM: osiot valitaan järjestysnumerolla eikä :has(.tf-about-media) -ehdolla. Sama mediakontti esiintyy myös riveissä 4–6, ja :has() perii argumenttinsa spesifisyyden — :has(> .e-con-inner > .tf-about-media) -sääntö oli (0,0,5,0) ja voitti rivien oman (0,0,4,0) säännön, jolloin riveille valui puolikasjaon gap: 3px ja padding: 0. Mitattu: rivit jäivät 747–1028px korkeiksi ilman 70px pystypaddingiaan. nth-of-type: 3 = beige-jako, 4 = keltainen kartta, 9 = keltainen lopetus. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) { background-color: #000000; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner { gap: 3px !important; align-items: stretch !important; padding: 0 !important; flex-wrap: nowrap !important; } /* 3px rako söisi rivin yli jos puolikas on tasan 50 % */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > *, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > *, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > * { flex: 1 1 calc(50% - 1.5px) !important; width: calc(50% - 1.5px) !important; max-width: calc(50% - 1.5px) !important; min-width: 0 !important; } /* Kuvapuolisko reunasta reunaan. Korkeus asetettava koko ketjuun (kontti -> widget -> .elementor-widget-container -> img). */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-fu-map-promo-img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-fu-map-promo-img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-fu-map-promo-img { overflow: hidden; padding: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-about-media > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-about-media > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-about-media > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-fu-map-promo-img > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-fu-map-promo-img > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-fu-map-promo-img > .e-con-inner { padding: 0 !important; height: 100% !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-about-media .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-about-media .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-about-media .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-about-media .elementor-widget-image .elementor-widget-container, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-about-media .elementor-widget-image .elementor-widget-container, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-about-media .elementor-widget-image .elementor-widget-container, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-fu-map-promo-img .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-fu-map-promo-img .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-fu-map-promo-img .elementor-widget-image, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-fu-map-promo-img .elementor-widget-image .elementor-widget-container, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-fu-map-promo-img .elementor-widget-image .elementor-widget-container, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-fu-map-promo-img .elementor-widget-image .elementor-widget-container { height: 100% !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-fu-map-promo-img .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-fu-map-promo-img .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-fu-map-promo-img .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Väripuoliskon sisältö: pystysuunnassa keskelle, 445px leveänä, 122px sisennys omasta reunastaan. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) { padding: 60px 122px !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) > .e-con-inner { justify-content: center !important; padding: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) .elementor-widget, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) .elementor-widget, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) .elementor-widget { width: 100% !important; max-width: 445px !important; } /* Osiokohtaiset korkeudet designin mukaan. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner { min-height: clamp(480px, 58vw, 835px); } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner { min-height: clamp(320px, 31vw, 443px); } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner { min-height: clamp(480px, 58vw, 838px); } /* Keltaisen osion (nth 4) kuvapuolisko on isometrinen piirros, ei valokuva: sen pitää mahtua kokonaan puolikkaaseensa. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-fu-map-promo-img .elementor-widget-image img { object-fit: contain !important; object-position: right center !important; } /* ---------- 5. Kuva + teksti -rivit (osiot 5, 6 ja 7) ---------- Sama gridi kuin Market Hall -sivulla, mitattu Figmasta: kuva 561 x 692, teksti 445, väli 130 ryhmä 1136 keskitettynä, rivin korkeus 832 (= 692 + 70 + 70) MITATTU staging: rivit reunasta reunaan (782/659) ja 826–991px korkeita, koska kuvat näkyivät luonnollisessa mittasuhteessaan. Rivit tunnistetaan siitä, että niissä .tf-about-media on tf-w-50:n PARINA ilman värillistä puoliskoa — käytännössä järjestysnumerolla, koska osiot 3 ja 9 käyttävät samaa mediakonttia toisella tavalla. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner { max-width: 1136px !important; margin-left: auto !important; margin-right: auto !important; padding: 70px 0 !important; gap: 130px !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; background: #FFFFFF; min-height: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) { background-color: #FFFFFF !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-w-50:not(.tf-about-media) { flex: 0 0 445px !important; width: 445px !important; max-width: 445px !important; padding: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-about-media { flex: 0 0 561px !important; width: 561px !important; max-width: 561px !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) .tf-about-media .elementor-widget-image img { height: 692px !important; } /* ---------- 6. Viimeinen keltainen osio: puuttuva sanamerkki ---------- .tf-fu-discover-media saa pääsisällössä ::after-pseudoelementin, joka hakee sanamerkin osoitteesta /wp-content/uploads/train-factory/ hero-graphic.svg. Se vastaa 404:llä (tiedosto on kansiossa /wp-content/uploads/2026/08/), joten pseudoelementti on tyhjä ja peittää silti kuvan päällä olevan alueen. Osoitetaan se oikeaan tiedostoon. */ .page-id-1080 .tf-fu-discover-media::after { background-image: url("/wp-content/uploads/2026/08/hero-graphic.svg") !important; background-size: 45% auto !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ---------- 6b. Ylimääräiset reunaviivat pois ---------- MITATTU staging: jokaisella yhdeksällä osiolla on natiivisti border-bottom: 3px, ja kuva+teksti-rivien tekstisarakkeella lisäksi pystysuora 3px reunaviiva (osiossa 4 ja 6 oikealla, osiossa 5 vasemmalla). Design ei tunne kumpaakaan noista. Figman "Find Us" -framessa mustia 3px viivoja on VAIN vyöhykerajoilla y=872, 1389, 2227 ja 5622 — eli heron, johdantotekstin, beige-jaon ja viimeisen tekstiosion alla. Kolmen valkoisen kuva+teksti-rivin ympärillä ja välissä ei ole yhtään viivaa, eikä keltaisen karttaosion alla. Sama tuotannossa: osioiden 3–6 border-bottom on 0. Ylimääräisiä oli siis neljä vaakaviivaa ja kolme pystyviivaa. Nämä ovat Elementorin natiiviasetuksia, joten ne voi vaihtoehtoisesti poistaa suoraan Elementorissa (osion Style > Border). CSS-poisto tehdään tässä, jotta korjaus tulee samalla liitoksella kuin muutkin. nth-of-type: 4 = keltainen kartta, 5–7 = kuva+teksti-rivit. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) { border-bottom-width: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-w-50, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-w-50, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-w-50 { border-width: 0 !important; } /* ---------- 7. Responsiivisuus ---------- HUOM: jokainen ylikirjoitus käyttää TÄSMÄLLEEN samaa valitsinta kuin vastaava perussääntö. Ensimmäinen yritys kirjoitettiin lyhyemmillä valitsimilla (esim. "> .e-con-inner > *", spesifisyys 0,0,4,0), mutta perussäännöt ovat 0,0,7,0 eivätkä väistyneet — mitattu 1024px:llä sarakkeet jäivät 445/561 leveiksi ja valuivat ruudun ulkopuolelle (vasen reuna -15px, vaakavieritys päällä). */ @media (max-width: 1200px) { .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner { max-width: none !important; padding: 60px 40px !important; gap: 48px !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-w-50:not(.tf-about-media) { flex: 1 1 45% !important; width: auto !important; max-width: none !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-about-media { flex: 0 1 50% !important; width: auto !important; max-width: 561px !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) .tf-about-media .elementor-widget-image img { height: auto !important; aspect-ratio: 561 / 692 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) { padding: 48px !important; } } @media (max-width: 900px) { /* Puolikkaat allekkain. Perussääntö on 0,0,4,0, joten sivuston yleinen .tf-w-50-mobiilisääntö (0,0,1,0) ei riitä sitä kumoamaan. */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner { flex-direction: column !important; min-height: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > *, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > *, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > * { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-w-50:not(.tf-about-media), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner > .tf-about-media, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner > .tf-about-media { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) > .e-con-inner, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) > .e-con-inner { padding: 48px 20px !important; gap: 28px !important; } .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img), .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) > .e-con-inner > .tf-w-50:not(.tf-about-media):not(.tf-fu-map-promo-img) { padding: 40px 20px !important; } /* Kuvat matalammiksi pinotussa tilassa */ .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(3) .tf-fu-map-promo-img .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(4) .tf-fu-map-promo-img .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(9) .tf-fu-map-promo-img .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(5) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(6) .tf-about-media .elementor-widget-image img, .page-id-1080 .elementor-1080 > .e-con:nth-of-type(7) .tf-about-media .elementor-widget-image img { height: auto !important; aspect-ratio: 3 / 2 !important; } /* Tekstiosioiden ulompi 0 50px -padding pois, jotta sisältö saa 390px:n näytöllä 350px eikä 250px. */ .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) { padding-left: 0 !important; padding-right: 0 !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) > .e-con-inner { padding: 60px 20px !important; } } /* ========================================================================== SIJAINTI-SIVUN KORJAUKSET 28.8.2026 ========================================================================== */ /* ---------- Karttahero skaalautuu näytön korkeuden mukaan ---------- Sama juurisyy kuin etusivun herossa (lisays-etusivu.css kohta 6.1): korkeus laskettiin pelkästä ruudun LEVEYDESTÄ (56.3vw), jolloin 1440x800 -läppärillä header (65px) + kartta (811px) = 876px eli 76px yli ruudun. Nyt korkeus on pienin kolmesta: 56.3vw, katto 811px, ja ruudun korkeus miinus header. Lattia 320px säilyy. Kaksi height-riviä: svh on oikea yksikkö mobiiliselaimissa, joissa osoiterivi piiloutuu vieritettäessä, mutta vanhemmat selaimet ohittavat sen ja käyttävät vh-versiota. Header on 65px yli 1175px:n ja 51px sen alla (lisays-header.css kohta 8), joten vähennys on kaksi eri lukua. */ @media (min-width: 1176px) { .page-id-1080 .tf-fu-top-map { height: max(320px, min(56.3vw, 811px, calc(100vh - 65px))) !important; height: max(320px, min(56.3vw, 811px, calc(100svh - 65px))) !important; } } @media (max-width: 1175px) { .page-id-1080 .tf-fu-top-map { height: max(320px, min(56.3vw, 811px, calc(100vh - 51px))) !important; height: max(320px, min(56.3vw, 811px, calc(100svh - 51px))) !important; } } /* ---------- Keskitettyjen tekstiosioiden linkit ---------- Koskee kahta osiota: "Saapuminen Train Factorylle" ja "Pysäköinti". Ne ovat sivun ainoat osiot ILMAN tf-luokkaa, joten sama valitsin kuin kohdassa 3 osuu täsmälleen niihin — ei muihin. Otsikko ja leipäteksti olivat jo keskitettyjä ja otsikko versaalilla, mutta linkkiwidget peri text-align: start, jolloin nappi jäi 675px levyisen keskitetyn lohkonsa vasempaan reunaan (mitattu x383 kun keskikohta on x641). */ .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-button { text-align: center !important; } .page-id-1080 .elementor-1080 > .e-con:not([class*="tf-"]) .elementor-widget-button .elementor-button { text-transform: uppercase !important; justify-content: center !important; } /* ---------- Puolikkaiden osioiden linkit tekstin linjaan ja versaalille ---------- Koskee kahta linkkiä: "Avaa kartta" (raitiovaunuosio) ja "Katso tapahtumat". Ne ovat sivun ainoat .tf-w-50 -palstoissa olevat napit — todennettu selaimessa, osumia tasan 2. Elementorin Button-widgetissä on padding 12px 24px, joka sisensi linkkitekstin 24px palstan leipätekstin reunasta. Mitattu 1440px: leipäteksti x122 / x844, linkkiteksti x146 / x868. Vaakapadding pois -> molemmat alkavat samasta x:stä kuin otsikko ja leipäteksti. */ .page-id-1080 .tf-w-50 .elementor-widget-button { text-align: left !important; } .page-id-1080 .tf-w-50 .elementor-widget-button .elementor-button { padding-left: 0 !important; padding-right: 0 !important; text-transform: uppercase !important; justify-content: flex-start !important; }/* End custom CSS */