/* ============================================================ ESPEK — design system (teemaversio) Espek Pintakäsittely Oy · versio 1.0.0 Vaalea, ilmava ja asiallinen. Yksi fonttiperhe (Inter), viisi typografista tasoa, ei laatikkoreunuksia. Rytmi syntyy tyhjästä tilasta, epäsymmetriasta ja kuvista — ei väripinnoista. Tämä on sama todennettu design-järjestelmä kuin Espek Ilme -lisäosassa, siirrettynä teemaksi. Luokat on siistitty: koska sivu ei enää kulje lohkoeditorin kautta, "wp-block-*"-luokkia ei tarvita — kaikki on nyt esp-etuliitteisiä, tarkoitushakuisia luokkia. Kaikki tyylit on rajattu .esp-juuri -luokkaan, joka on kiinnitetty -elementtiin (ks. functions.php → body_class). ============================================================ */ /* ============================================================ FONTIT — Inter, teeman omista tiedostoista Espek Pintakäsittely Oy Aiemmin Inter haettiin fonts.googleapis.com-osoitteesta wp_enqueue_style()-kutsulla (ks. functions.php, osio 3). Se oli renderöinnin ESTÄVÄ pyyntö kolmannen osapuolen palvelimelle (~230 ms PageSpeedin mittauksissa mobiilissa), ja se lähetti jokaisen kävijän IP-osoitteen Googlelle — tarpeeton tietosuojariski EU:ssa, ja hankala perustella sivustolla jolla on evästehyväksyntä. Tiedostot: assets/fonts/, Inter v20, latin-osajoukko, woff2. Neljä leikkausta = ne jotka ilme.css:ssä oikeasti esiintyvät (400, 500, 600, 700). CSS:ssä on kaksi font-weight: 800 -sääntöä, mutta 800:aa ei ladattu Google Fontsistakaan, joten selain on aina piirtänyt ne 700:lla — tilanne ei siis muutu. Polut ovat suhteellisia TÄHÄN tiedostoon nähden (assets/ilme.css → assets/fonts/), joten ne toimivat myös jos teema siirretään toiseen hakemistoon. unicode-range on tarkoituksella jätetty pois: sivusto on kokonaan latin-merkistöä, ja ilman rajausta Inter piirtää kaikki merkit joille sillä on glyfi. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-v20-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-v20-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-v20-latin-700.woff2') format('woff2'); } .esp-juuri { /* ---- Värit -------------------------------------------- Grafiitti + teräksensininen. Ei mustaa, ei oranssia. ------------------------------------------------------ */ --muste: #1e2429; /* leipäteksti ja otsikot */ --muste-2: #4b545b; /* toissijainen teksti — tummennettu (oli #59636b), jotta WCAG AA (4.5:1) täyttyy myös vaihtelevalla --tausta-pohjalla */ --muste-3: #606b74; /* pienet etiketit — tummennettu (oli #8b959c, vain 3:1 valkealla, ei täyttänyt AA:ta pienelle tekstille) */ --viiva: #e3e6e7; /* hiusviiva */ --viiva-2: #cdd3d5; --paperi: #ffffff; --tausta: #edf0f1; /* vuorotteleva vaalea pohja */ --sini: #1c5c86; /* korostus: painikkeet, linkit, luvut */ --sini-2: #14486a; /* hover */ --sini-3: #e9f0f5; /* pehmeä korostustausta */ /* Toinen, "punchimpi" korostusväri — ei korvaa sinistä toiminnallista väriä (napit/linkit pysyvät sinisinä, jotta klikattava pysyy aina samana värinä), vaan käytetään säästeliäästi pelkkinä koristeellisina kiintopisteinä (ikonikehät, pienet merkit, jälkeen-tunniste) — tuo sivulle toisen sävyn sinisen rinnalle ilman että se muuttuu epäselväksi mikä on klikattavaa. Vertailukypsä liekki-/hehkumetalli- sävy — kytkeytyy suoraan tuotteen omaan aiheeseen (korroosiosuoja, hehkuva metalli), ei asiakkaan kielletty hälyttävä liikennemerkki- oranssi eikä musta. Ensimmäinen versio (#b5502e, tumma ruoste) koettiin liian vaimeaksi/ei "pop"annut riittävästi vaaleaa tai tummaa taustaa vasten — kirkastettu selvästi (saturaatio 59 % → 78 %, vaaleus 45 % → 52 %) pitäen sävyn silti punaisen puolella (H≈10°) eikä oranssin (H≈25–40°). --aksentti-2 on tarkoituksella paljon tummempi sisarsävy, ei vain kevyt hover-tummennus — sitä käytetään ainoana paikkana missä valkoinen teksti istuu suoraan aksenttivärin päällä (esim. jälkeen-tunniste), jotta kirkkaampi --aksentti ei riko tekstikontrastia siellä. */ --aksentti: #e44525; --aksentti-2: #b63116; /* Ristikkoikonin (espek_ikoni_ristikko) värit omina muuttujinaan, jotta sama ikoni toimii sekä vaaleassa (hero) että tummassa (kapasiteetti) jaksossa ilman erillistä PHP-haaraa. */ --ristikko-tausta: var(--viiva-2); --ristikko-vari: var(--sini); /* Yksi tietoinen tumma korostus vaalean sivun keskellä (ei koko sivun tummuutta — ks. kapasiteetti-jakso). Grafiitti, ei musta. */ --tumma: #1b2226; --tumma-viiva: rgba(255,255,255,.12); --tumma-teksti: #dbe0e2; --tumma-himmea: #93a0a5; --tumma-sini: #7ec1ea; /* ---- Typografia: yksi perhe, viisi tasoa -------------- */ --fontti: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --t-iso: clamp(2.05rem, 1.35rem + 2.7vw, 3.35rem); /* H1 — pienennetty, jotta hero-otsikko mahtuu kolmelle riville */ --t-h2: clamp(1.7rem, 1.25rem + 1.75vw, 2.5rem); /* H2 */ --t-h3: clamp(1.05rem, .99rem + .3vw, 1.22rem); /* H3 */ --t-leipa: clamp(1rem, .97rem + .18vw, 1.08rem); /* leipä */ --t-pieni: .82rem; /* etiketti */ --t-luku: clamp(2rem, 1.35rem + 2.4vw, 3.1rem); /* mittaluvut */ --t-ingressi: clamp(1.1rem, 1rem + .5vw, 1.3rem); /* ---- Mitat ------------------------------------------- */ --kehys: 1180px; --kouru: clamp(20px, 5vw, 48px); --jakso-y: clamp(46px, 5.4vw, 84px); --otsikko-korkeus: 68px; font-family: var(--fontti); font-size: var(--t-leipa); line-height: 1.6; color: var(--muste); background: var(--paperi); -webkit-font-smoothing: antialiased; font-feature-settings: 'kern' 1; } /* Huom: ei overflow-clipiä juuressa. Jos toinen akseli on clip ja toinen visible, selain muuttaa visiblen autoksi ja leikkaa myös pystysuunnassa — silloin heron limittyvä kuva katkeaisi. */ .esp-juuri *, .esp-juuri *::before, .esp-juuri *::after { box-sizing: border-box; } .esp-juuri { margin: 0; } /* Turvaverkko kaikille kuville: pysyy aina palstan levyisenä eikä venytä riviä, vaikka kuvalle ei olisi omaa laatikkoluokkaa. */ .esp-juuri img { max-width: 100%; height: auto; display: block; } /* Ohita sisältöön -linkki näppäimistökäyttäjille */ .esp-skip { position: absolute; left: -9999px; top: 0; background: var(--sini); color: #fff; padding: 12px 18px; z-index: 1000; text-decoration: none; font-weight: 600; border-radius: 0 0 4px 0; } .esp-skip:focus { left: 0; top: 0; } /* ============================================================ 0. PÄÄTUNNISTE (sivun ylätunniste, korvaa Astran headerin) ============================================================ */ .esp-paatunniste { position: sticky; top: 0; z-index: 40; background: var(--paperi); border-bottom: 1px solid var(--viiva); } .esp-paatunniste-rivi { width: min(100%, var(--kehys)); margin-inline: auto; padding-inline: var(--kouru); min-height: var(--otsikko-korkeus); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .esp-juuri .esp-logo { display: inline-flex; align-items: center; flex: none; } .esp-juuri .esp-logo img { display: block; height: clamp(26px, 3.2vw, 34px); width: auto; } .esp-nav-lista { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); list-style: none; margin: 0; padding: 0; } .esp-juuri .esp-nav-lista > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 22px 0; color: var(--muste); text-decoration: none; font-size: .92rem; font-weight: 600; white-space: nowrap; } .esp-juuri .esp-nav-lista > li > a:hover { color: var(--sini); } /* Pudotusvalikko: Pintakäsittelypalvelut-linkki on itsessään klikattava (vie palvelusivulle), ja sen alle avautuu hiiren tai näppäimistön kohdistuksella kaksi alipalvelua. Ei JS:ää — pelkkä hover/focus-within. */ .esp-nav-pudotus { position: relative; } .esp-juuri .esp-nav-pudotus:hover > a, .esp-juuri .esp-nav-pudotus:focus-within > a { color: var(--sini); } .esp-nav-nuoli { flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; opacity: .7; } .esp-nav-pudotus:hover .esp-nav-nuoli, .esp-nav-pudotus:focus-within .esp-nav-nuoli { transform: rotate(225deg) translateY(2px); } .esp-nav-alivalikko { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); min-width: 210px; background: var(--paperi); border: 1px solid var(--viiva); border-radius: 10px; box-shadow: 0 14px 30px -8px rgba(30,36,41,.18), 0 2px 8px rgba(30,36,41,.06); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50; } .esp-nav-pudotus:hover .esp-nav-alivalikko, .esp-nav-pudotus:focus-within .esp-nav-alivalikko { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .esp-juuri .esp-nav-alivalikko a { display: block; padding: 11px 14px; border-radius: 6px; color: var(--muste-2); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; } .esp-juuri .esp-nav-alivalikko a:hover, .esp-juuri .esp-nav-alivalikko a:focus-visible { background: var(--sini-3); color: var(--sini-2); } .esp-paatunniste-oikea { display: flex; align-items: center; gap: clamp(26px, 3.2vw, 44px); } /* Tarkkuus .esp-nappi.esp-paatunniste-cta (ei pelkkä .esp-paatunniste-cta) TARKOITUKSELLA: pelkkä yhden luokan sääntö hävisi myöhemmin tiedostossa tulevalle .esp-juuri .esp-nappi -perussäännölle (sama tarkkuus, myöhempi sijainti voittaa) — nappi piirtyi koko ajan ison peruskoon mukaisena (17px/28px), ei tätä pienempää versiota, riippumatta näytön leveydestä. Sama tarkkuusbugi-perhe kuin faktarivin ja UKK:n aiemmat korjaukset. */ .esp-juuri .esp-nappi.esp-paatunniste-cta { padding: 11px 20px; font-size: .88rem; border-radius: 8px; } /* Mobiilivalikon avaaja-nappi: piilossa työpöydällä, näkyy vain pienellä näytöllä (ks. media-kysely alla). Ikoni vaihtuu napin omasta aria-expanded-tilasta CSS:llä, ei JS-ehdolla. */ .esp-nav-avaaja { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--viiva); border-radius: 8px; background: var(--paperi); color: var(--muste); cursor: pointer; } .esp-nav-avaaja:hover { border-color: var(--sini-3); color: var(--sini); } .esp-nav-avaaja .esp-ico-sulje { display: none; } .esp-nav-avaaja[aria-expanded="true"] .esp-ico-valikko { display: none; } .esp-nav-avaaja[aria-expanded="true"] .esp-ico-sulje { display: block; } /* Mobiilivalikko: alle 760px leveydellä .esp-nav on oletuksena koottu (max-height:0, overflow hidden) täysleveä paneeli ylätunnisteen alla, ja avautuu footer.php:n skriptin lisäämällä .esp-nav--auki -luokalla. Aiemmin nav oli täysin piilossa (display:none) eikä sivulle päässyt ollenkaan käsiksi mobiilissa — käyttäjäpalaute. Alivalikko (Hiekkapuhallus/Märkämaalaus) näytetään mobiilissa aina auki-tilassa sisennettynä listana, ei hover/focus-dropdownina, koska kosketusnäytöllä ei ole hoveria. */ @media (max-width: 760px) { .esp-nav-avaaja { display: inline-flex; } /* CTA-nappi oli mobiilissa selvästi hamburger-nappia korkeampi (käyttäjäpalaute) — sama kiinteä 40px-korkuinen laatikko kuin .esp-nav-avaaja:lla, jotta molempien reunat ovat samalla korkeudella riippumatta fontin omista mittasuhteista. */ .esp-juuri .esp-nappi.esp-paatunniste-cta { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; } /* Avautumisanimaatio (max-height + overflow:hidden) on tarkoituksella .esp-nav-lista:lla, EI .esp-nav:lla itsellään — molemmat olivat aiemmin samassa elementissä (.esp-nav), jolloin sen oma box-shadow rajautui pois omalla overflow:hidden-säännöllään aina kun paneeli oli auki (käyttäjäpalaute: "varjo... clippaa kun valikko avautuu"). Nyt overflow-rajaus on vain listalla, ja varjo on ehdollinen (näkyy vain .esp-nav--auki-tilassa) ettei se jää näkymään ohuena viivana myös kiinni-tilassa. */ .esp-nav { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--paperi); border-bottom: 1px solid var(--viiva); box-shadow: none; } .esp-nav.esp-nav--auki { box-shadow: 0 16px 32px -12px rgba(30,36,41,.22); } /* Pystysuuntainen padding (8px/22px) on ehdollinen, EI kiinteä — max-height:0 ei tosiasiassa puserra paddingia pois (todennettu oikealla laitteella: laatikon korkeus jäi 30px:ään eli täsmälleen padding-top + padding-bottom summaan, vaikka max-height oli 0 ja box-sizing border-box), joten kiinni-tilassa listan alla näkyi ohut raita ensimmäisen linkin tekstistä ("squiggly bits" / haamu- teksti käyttäjäpalautteessa). Kun padding on 0 kiinni-tilassa, ei ole mitään korkeutta joka voisi vuotaa näkyviin riippumatta tästä max-height-oudosta. */ .esp-nav-lista { flex-direction: column; align-items: stretch; gap: 0; width: min(100%, var(--kehys)); margin-inline: auto; padding: 0 var(--kouru); max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; } .esp-nav.esp-nav--auki .esp-nav-lista { max-height: 80vh; overflow-y: auto; padding: 8px var(--kouru) 22px; } .esp-juuri .esp-nav-lista > li > a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--viiva); } .esp-nav-nuoli { display: none; } .esp-nav-alivalikko { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; min-width: 0; border: none; box-shadow: none; border-radius: 0; padding: 2px 0 10px 16px; } .esp-nav-pudotus:hover .esp-nav-alivalikko, .esp-nav-pudotus:focus-within .esp-nav-alivalikko { transform: none; } .esp-juuri .esp-nav-alivalikko a { padding: 10px 0; } } /* ============================================================ 1. RAKENNE ============================================================ */ .esp-jakso { position: relative; padding-block: var(--jakso-y); background: var(--paperi); } .esp-jakso.esp-pohja { background: var(--tausta); } .esp-jakso.esp-sini { background: var(--sini-3); } /* Väli-CTA: täysleveä jakso Palvelut- ja Kapasiteetti-jaksojen välissä — sama rakennemalli kuin tummalla Kapasiteetti-jaksolla (väri suoraan
:lla reunasta reunaan), EI irrallinen kortti valkoisen pohjan päällä. Aiemmat yritykset (yksivärinen sininen, ristikkokuvio, sumeat hehkupallot + renkaat) koettiin joko tylsäksi tai huonoksi — vaihdettu valokuvataustaan: oikea työkuva (sama kuva jota käytetään muuallakin sivustolla, tässä paikallaan yksi asennuskehikko) + tumma grafiitti- sävytys päällä (EI sininen — asiakas halusi vaihtelua, kortti on jo liikaa sinistä). Sävytys on gradientti (tummempi tekstin puolella, kevyempi toisessa reunassa), jotta kuva näkyy mutta ei vie huomiota tekstiltä ja napeilta. */ .esp-jakso.esp-cta { position: relative; background-image: linear-gradient(120deg, rgba(27,34,38,.86) 0%, rgba(27,34,38,.68) 55%, rgba(27,34,38,.5) 100%), url('/wp-content/uploads/2026/09/ESPEK-11.jpg'); background-size: cover; background-position: center 55%; background-repeat: no-repeat; text-align: center; } .esp-cta-sisalto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 46ch; margin-inline: auto; } /* Tarkkuus .esp-cta-sisalto .esp-cta-otsikko (ei pelkkä .esp-cta-otsikko) TARKOITUKSELLA: kun tätä luokkaa käytetään h2-elementissä (kuten pintakäsittelypalvelut-sivun päätös-CTA:ssa), pelkkä yhden luokan sääntö (0,1,0) hävisi typografiaosion ".esp-juuri h2"-säännölle (0,1,1) ja otsikko piirtyi tumman muste-värisenä tumman valokuvan päällä eli lähes näkymättömänä — sama tarkkuusbugi-perhe kuin muuallakin sivustolla (ks. faktarivin ja UKK:n aiemmat korjaukset). */ .esp-cta-sisalto .esp-cta-otsikko { margin: 0 0 10px; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.9rem); font-weight: 800; letter-spacing: -.017em; line-height: 1.15; color: #fff; max-width: none; } .esp-cta-teksti { margin: 0; color: rgba(255,255,255,.88); font-size: 1.02rem; line-height: 1.5; } .esp-cta-napit { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 30px); } .esp-cta-napit .esp-nappi { flex: none; } .esp-juuri .esp-cta .esp-nappi--toissijainen { background: #fff; border-color: #fff; color: var(--sini); } .esp-juuri .esp-cta .esp-nappi--toissijainen:hover, .esp-juuri .esp-cta .esp-nappi--toissijainen:focus-visible { background: #fff; border-color: #fff; color: var(--sini-2); } /* Toinen, hillitympi nappi samalla kortilla: läpikuultava täyttö + valkea reunus. Kaksi kertaa valkoista täyttöä vierekkäin olisi raskas, joten toissijainen puhelinsoitto on selvästi kevyempi. */ .esp-juuri .esp-cta .esp-nappi--reunus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); color: #fff; } .esp-juuri .esp-cta .esp-nappi--reunus:hover, .esp-juuri .esp-cta .esp-nappi--reunus:focus-visible { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; } .esp-juuri .esp-cta .esp-nappi--reunus .esp-ico-puh { color: #fff; } @media (max-width: 560px) { .esp-cta-napit { flex-direction: column; align-items: stretch; width: 100%; } .esp-cta-napit .esp-nappi { width: 100%; justify-content: center; } } .esp-kehys { width: min(100%, var(--kehys)); margin-inline: auto; padding-inline: var(--kouru); position: relative; } /* Kuva jatkuu kehyksen reunan yli. Ei vw-laskentaa: se aiheuttaisi vierityspalkin levyisen vaakavierityksen. */ .esp-vuoto-oikea { margin-right: calc(-1 * var(--kouru)); } .esp-vuoto-vasen { margin-left: calc(-1 * var(--kouru)); } /* ============================================================ 2. TYPOGRAFIA — viisi tasoa, ei enempää ============================================================ */ .esp-juuri h1, .esp-juuri h2, .esp-juuri h3 { font-family: inherit; color: var(--muste); margin: 0 0 .55em; text-wrap: balance; } .esp-juuri h1 { font-size: var(--t-iso); font-weight: 700; line-height: 1.03; letter-spacing: -.031em; } .esp-juuri h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; max-width: 22ch; } .esp-juuri h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.32; letter-spacing: -.011em; margin-bottom: .5em; } .esp-juuri p { margin: 0 0 1.1em; } .esp-juuri p:last-child { margin-bottom: 0; } /* Pieni etiketti — ainoa versaalityyli koko sivustolla */ .esp-etiketti { font-size: var(--t-pieni); font-weight: 500; letter-spacing: .075em; text-transform: uppercase; color: var(--muste-3); margin: 0 0 1.2em; line-height: 1.5; } .esp-ingressi { font-size: var(--t-ingressi); line-height: 1.52; color: var(--muste-2); max-width: 48ch; } .esp-teksti { color: var(--muste-2); } .esp-pieni { font-size: .9rem; color: var(--muste-2); line-height: 1.55; } /* Jakson otsikkorivi: otsikko YLLÄ, ingressi ALLA koko lohkon levyisenä (ei enää rinnakkaisina sarakkeina — kaksipalstainen versio näytti oudolta, kun otsikko ja ingressi olivat eripituisia ja "end"- kohdistus jätti otsikon roikkumaan alas ilman selvää syytä). */ .esp-otsikkorivi { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); margin-bottom: clamp(28px, 3.2vw, 46px); padding-bottom: clamp(16px, 1.8vw, 22px); border-bottom: 1px solid var(--viiva); } .esp-otsikkorivi > .esp-etiketti { margin-bottom: 0; } .esp-otsikkorivi h2 { margin-bottom: 0; } /* Artikkelit-sivun oma otsikkorivi käyttää H1:tä (sivun ainoa H1, oikein SEO:n ja saavutettavuuden kannalta), mutta sen pitää näyttää täsmälleen samalta kuin H2 muualla — muuten sivun aloitus poikkeaisi visuaalisesti kaikista muista jaksoista. */ .esp-otsikkorivi h1 { font-size: var(--t-h2); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; max-width: 22ch; margin-bottom: 0; } /* Pieni korostusmerkki jokaisen jakso-otsikon yllä — sama pieni yksityiskohta toistuu jokaisen pääjakson kohdalla ilman että se on iso väripinta, ja tuo ruoste-aksenttivärin näkyviin myös vaaleilla jaksoilla, ei vain tummilla. */ .esp-otsikkorivi h2::before, .esp-otsikkorivi h1::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--aksentti); margin-bottom: 16px; } .esp-otsikkorivi .esp-ingressi { max-width: none; width: 100%; } /* Yhden sarakkeen otsikkorivi jaksoille ilman etikettiä/ingressiä (esim. kapasiteetti) — sama pinorakenne, ei erillistä sääntöä enää tarvita paitsi yhteensopivuuden vuoksi vanhalle luokkanimelle. */ .esp-otsikkorivi--yksi {} /* ============================================================ 3. LINKIT JA PAINIKKEET ============================================================ */ .esp-napit { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .esp-juuri .esp-nappi { display: inline-flex; align-items: center; gap: 10px; font-family: inherit; font-size: .96rem; font-weight: 700; line-height: 1; letter-spacing: -.006em; padding: 17px 28px; border: 1px solid var(--sini); /* Maltillinen pyöristys — ei täyspyöreä pilleri, ei myöskään terävä 90 asteen laatikko. Yleiskäyttöinen, ei erikoismuotoiltu kulma. */ border-radius: 9px; background: var(--sini); color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(30,36,41,.08), 0 10px 22px -6px rgba(28,92,134,.45); transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .esp-juuri .esp-nappi:hover, .esp-juuri .esp-nappi:focus-visible { background: var(--sini-2); border-color: var(--sini-2); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(30,36,41,.1), 0 16px 28px -6px rgba(28,92,134,.5); } .esp-juuri .esp-nappi--toissijainen { background: var(--paperi); border-color: var(--viiva-2); color: var(--muste); box-shadow: 0 1px 2px rgba(30,36,41,.05); } .esp-juuri .esp-nappi--toissijainen:hover { border-color: var(--muste); background: var(--paperi); color: var(--muste); box-shadow: 0 4px 8px rgba(30,36,41,.08); } .esp-nappi .esp-ico-puh, .esp-paatunniste-puh .esp-ico-puh { flex: none; width: 17px; height: 17px; } /* Puhelinikoni väritettynä sinisellä aina kun se ei jo istu sinisellä pohjalla (siellä currentColor=valkoinen riittää ja on parempi kontrasti). */ .esp-juuri .esp-nappi--toissijainen .esp-ico-puh, .esp-juuri .esp-paatunniste-puh .esp-ico-puh { color: var(--sini); } .esp-juuri a { color: var(--sini); } .esp-linkki a { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: .93rem; color: var(--sini); text-decoration: none; border-bottom: 1px solid var(--sini-3); padding-bottom: 2px; transition: border-color .15s ease; } .esp-linkki a:hover { border-bottom-color: var(--sini); } .esp-linkki a::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, 1px); transition: transform .15s ease; } .esp-linkki a:hover::after { transform: rotate(45deg) translate(1px, -1px); } .esp-juuri a:focus-visible, .esp-juuri summary:focus-visible, .esp-juuri button:focus-visible { outline: 2px solid var(--sini); outline-offset: 3px; border-radius: 2px; } /* ============================================================ 4. HERO ============================================================ */ .esp-hero { background: var(--paperi); padding-top: clamp(32px, 4vw, 58px); padding-bottom: clamp(44px, 5.4vw, 80px); } /* Flexbox eikä grid: näin tekstisarake saa määrätä rivin korkeuden luonnostaan, ja kuvasarake voi venyä (align-items: stretch) täsmälleen saman korkuiseksi — kuvan alareuna asettuu aina "Kuva tai piirustus..." -tekstin alareunan tasalle, oli tekstiä vähän tai paljon. */ .esp-hero-grid { display: flex; align-items: stretch; gap: clamp(30px, 4.5vw, 60px); } .esp-hero-teksti { flex: 1.12 1 0%; min-width: 0; display: flex; flex-direction: column; } .esp-hero h1 { margin-bottom: .42em; overflow-wrap: break-word; hyphens: auto; } .esp-hero .esp-ingressi, .esp-hero .is-style-espek-ingressi { max-width: 44ch; } .esp-hero .esp-napit, .esp-hero .wp-block-buttons { margin-top: clamp(20px, 2.4vw, 28px); gap: 12px; } .esp-hero .esp-pieni { margin-top: 16px; color: var(--muste-3); font-size: .87rem; } /* Herokuva: venyy tekstisarakkeen korkuiseksi (ks. yllä). Kuva ja figure ovat position:absolute + inset:0 omassa position:relative -laatikossaan, jotta kuvan OMA kuvasuhde ei koskaan vaikuta rivin korkeuteen (poissa dokumenttivirrasta = ei kontribuoi flex-rivin korkeuslaskentaan) — pelkkä tekstisarake määrää korkeuden, kuva vain "cover"-täyttää sen. */ .esp-hero-kuva { flex: 0 1 380px; max-width: 380px; position: relative; } .esp-hero-kuva figure { margin: 0; position: absolute; inset: 0; } .esp-hero-kuva img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 6px; } @media (max-width: 980px) { .esp-hero-grid { flex-direction: column; gap: 28px; } /* Mobiilissa pinottuna ei ole riviä jonka korkeuteen venyä, joten laatikolle annetaan kiinteä kuvasuhde — absoluuttiasemointi pitää kuvan silti coverina sen sisällä. */ .esp-hero-kuva { flex: none; max-width: 420px; margin-inline: auto; width: 100%; aspect-ratio: 16 / 10; } /* Pinottuna teksti keskitetään: otsikko, ingressi ja napit näyttävät tasapainoisemmilta keskellä kapeaa palstaa kuin vasempaan reunaan ankkuroituna. */ .esp-hero-teksti { align-items: center; text-align: center; } .esp-hero .esp-ingressi, .esp-hero .is-style-espek-ingressi { max-width: 44ch; margin-inline: auto; } .esp-hero .esp-napit, .esp-hero .wp-block-buttons { justify-content: center; } .esp-hero .esp-pieni { text-align: center; } } /* Faktarivi: koko heron levyinen (teksti + kuva yhteensä), keskitetty sisältö per faktalaatikko — ei enää vain tekstisarakkeen levyinen. */ .esp-faktat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 28px); border-top: 1px solid var(--viiva); padding-top: 22px; margin-top: clamp(28px, 3.2vw, 44px); width: 100%; text-align: center; } .esp-fakta p { margin: 0; } .esp-fakta-ikoni { margin: 0 auto 10px; display: flex; justify-content: center; } .esp-fakta-ikoni .esp-ico-ristikko { display: block; width: 100%; max-width: 120px; height: 24px; } .esp-fakta .esp-fakta-arvo { font-size: 1.06rem; font-weight: 600; letter-spacing: -.017em; line-height: 1.3; margin-bottom: 4px; } .esp-fakta .esp-fakta-nimi { font-size: .84rem; color: var(--muste-3); line-height: 1.45; } @media (max-width: 560px) { .esp-faktat { grid-template-columns: 1fr; gap: 18px; } .esp-fakta-ikoni .esp-ico-ristikko { max-width: 120px; } } /* ============================================================ 5. PALVELUT — 1×3 korttiruudukko, kuva ylhäällä, sisältö alla. Kolme ydinpalvelua rinnakkain samankokoisina pystykortteina; aiempi vaakakortti (kuva + teksti rinnan) ei istunut kolmeen palstaan, koska kapeat vaakakuvat litistyivät. ============================================================ */ .esp-palvelut, .esp-artikkelit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); } .esp-palvelu, .esp-artikkeli { display: flex; flex-direction: column; border: 1px solid var(--viiva); border-radius: 8px; background: var(--paperi); box-shadow: 0 1px 2px rgba(30,36,41,.04); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .esp-palvelu:hover, .esp-artikkeli:hover { box-shadow: 0 14px 30px -10px rgba(30,36,41,.18); transform: translateY(-3px); border-color: var(--viiva-2); } .esp-palvelu-kuva, .esp-artikkeli-kuva { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--ristikko-tausta); } .esp-palvelu-kuva img, .esp-artikkeli-kuva img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .esp-palvelu:hover .esp-palvelu-kuva img, .esp-artikkeli:hover .esp-artikkeli-kuva img { transform: scale(1.06); } .esp-palvelu-sisalto, .esp-artikkeli-sisalto { flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(18px, 2.2vw, 24px); min-width: 0; } .esp-palvelu-sisalto h3, .esp-artikkeli-sisalto h3 { margin-bottom: .4em; } .esp-juuri .esp-palvelu-sisalto h3 a, .esp-juuri .esp-artikkeli-sisalto h3 a { color: var(--muste); text-decoration: none; } .esp-juuri .esp-palvelu-sisalto h3 a:hover, .esp-juuri .esp-artikkeli-sisalto h3 a:hover { color: var(--sini); } .esp-palvelu .esp-teksti, .esp-artikkeli .esp-teksti { font-size: .93rem; margin-bottom: 14px; flex: 1 1 auto; } .esp-palvelu .esp-linkki, .esp-artikkeli .esp-linkki { margin-top: auto; } /* Julkaisupäivä-etiketti kortin sisällön yläreunassa on kevyempi kuin jakson otsikon oma etiketti (1.2em marginaali näyttäisi liian isolta pieneen korttiin), joten se saa oman tiiviimmän välinsä. */ .esp-artikkeli-sisalto > .esp-etiketti { margin-bottom: .5em; } @media (max-width: 860px) { .esp-palvelut, .esp-artikkelit { grid-template-columns: 1fr; } .esp-palvelu-kuva, .esp-artikkeli-kuva { aspect-ratio: 16 / 9; } } @media (max-width: 1080px) and (min-width: 861px) { .esp-artikkelit { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 6. KAPASITEETTI — leipäteksti vasemmalla, kaksi hallikohtaista faktalaatikkoa oikealla (yksi per halli, ei geneeristä kolmen luvun riviä), ja niiden alla täysleveä vaakakuva. ============================================================ */ .esp-kapasiteetti { display: flex; flex-direction: column; gap: clamp(28px, 3.2vw, 44px); } .esp-kapasiteetti-ylarivi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .esp-kapasiteetti-teksti { display: flex; flex-direction: column; gap: 14px; } .esp-kapasiteetti-hallit { display: flex; flex-direction: column; gap: 14px; } .esp-halli { border: 1px solid var(--tumma-viiva); border-radius: 10px; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px); background: rgba(255,255,255,.03); transition: border-color .2s ease, background .2s ease, transform .2s ease; } .esp-halli:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.055); transform: translateY(-2px); } .esp-halli p { margin: 0; } .esp-halli-nimi { font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tumma-himmea); margin-bottom: 12px; } .esp-halli-lista, /* Hallilaatikon sisällä käytetään nykyään WordPressin OMAA Luettelo-lohkoa (core/list, ks. lohkot.js "Hallilaatikko" ja sen sisään lisättävä InnerBlocks) suoraan kovakoodatun