/* ========================================================================== Vendre — sivuston tyylit Portattu leiskan theme.css:stä (portaa_css.py). ÄLÄ muokkaa käsin, vaan lähteessä: Vendre_Verkkosivusto/leiska/assets/theme.css. Tuotannossa on vain brändi-ilme, joten leiskan WIRE-tila ja wireframe- työkalut (.wnote, .pnote, polkuvalitsin) on poistettu portissa. ========================================================================== */ /* VENDRE — leiskan tyylit. Yhteinen tiedosto kaikille sivuille. Mitoituksen perustelut ja mittaukset: ks. index.html:n alkukommentti. WP-siirto: :root-tokenit → theme.json, tämä tiedosto → theme.css. KAKSI TILAA. :root on wireframe-luonnos (harmaa, kuvat piilossa, punaiset sisältöhuomiot näkyvissä); »vari«-luokka -elementissä on valmis leiska. LEISKA ON OLETUSTILA (kierros 41): luokka on kirjoitettu suoraan jokaisen sivun -elementtiin, ja luonnos paljastuu vain näppäinsarjalla tai ?vari=0. Tiedoston rakenne on silti ennallaan, koska WP-portaus (vendre-teema/_tyokalut/portaa_css.py) litistää tilan tokenit :rootiin ja poistaa luonnostilan säännöt. */ /* ============ TOKENIT (→ WP theme.json) ============ */ :root{ --bg: #FCFBF9; --ink: #3B2535; --ink-2: #6E5A66; --surface: #F8F7F6; --surface-2: #DEDACF; --deep: #3B2535; --deep-2: #584653; --deep-ink: #F8F7F6; --accent: #2F3CC2; --accent-ink: #F8F7F6; --sun: #FFEDB5; --sky: #D5E1EA; --line: #D9D2CC; --tint: #EDEAE4; --menu-rule: rgba(248,247,246,.24); --img-filter: none; --img-opacity: 1; --hero-tint: #3B2535; --logo-w: clamp(18rem, 63vw, 71rem); --hdr-logo: clamp(8.5rem, 12.8vw, 13.2rem); --fs-display: clamp(2.1rem, 4.3vw, 4.2rem); --fs-1: clamp(1.9rem, 3.6vw, 3.5rem); --fs-2: clamp(1.5rem, 2.5vw, 2.4rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.6rem); --fs-num: clamp(5rem, 13.5vw, 13rem); --fs-body: clamp(1rem, .55vw + .78rem, 1.18rem); --fs-card: clamp(.95rem, 1.1vw, 1.05rem); --fs-nav: clamp(1.02rem, 1.3vw, 1.25rem); --fs-small: clamp(.8rem, .78vw, .92rem); --gutter: clamp(1.4rem, 5.5vw, 5.5rem); --inset: clamp(1.4rem, 13.9vw, 15rem); --sect: clamp(5rem, 11vw, 12rem); --nav-h: clamp(5.8rem, 11.5vw, 11.5rem); --sky-50: #E0E9EF; } /* kapeat näytöt: sisennykset ja display-koko mahtuvat palstaan */ @media (max-width:680px){ :root{ --gutter:1.35rem; --inset:1.35rem; --fs-display:clamp(1.65rem,7.4vw,2.4rem); --fs-1:clamp(1.6rem,6.8vw,2.2rem); --fs-lead:1.05rem; --sect:clamp(3.4rem,12vw,5rem); } } /* ============ FONTIT ============ */ @font-face{font-family:'Martina Plantijn';src:url('../fonts/martina-plantijn-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Martina Plantijn';src:url('../fonts/martina-plantijn-medium-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:'DM Sans';src:url('../fonts/DMSans_24pt-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url('../fonts/DMSans_24pt-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* Magnolia Cora Script, LISENSSI KUNNOSSA 23.9.2026. Kattis toimitti MyFontsin verkkofonttikitin (Build ID 3867246, »Magnolia Cora Script Regular by Get Studio«). Tiedostot ovat nyt MyFontsin omaa verkkobuildia, eivät enää 16.9. tekemääni OTF→WOFF2-muunnosta. Muunnos oli tarkka — 278 glyyfiä, 228 cmap-merkkiä, 0 leveyseroa, sama upm — mutta lisensoitu tiedosto on silti oikea toimittaa, koska MyFontsin ehto sitoo käyttöoikeuden juuri näihin tiedostoihin: »All other parties are explicitly restricted from using the Licensed Webfont(s).« HUOM LISENSSIN RAJA: tämä on VERKKOfonttilisenssi sivuston omistajalle. Se ei kata sähköpostiallekirjoituksia, esityspohjia eikä painotuotteita, joissa fontti on työpöytäkäyttöä. Ne menevät ohjeiston mukana tulleen OTF:n ja sen oman lisenssin alle. woff on mukana kitistä sellaisenaan. Se on turha nykyselaimille mutta ei maksa mitään, koska woff2 on ensin src-listassa. */ @font-face{font-family:'Magnolia Cora';src:url('../fonts/MagnoliaCoraScript-Regular.woff2') format('woff2'), url('../fonts/MagnoliaCoraScript-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} /* ============ PERUS ============ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:'DM Sans',-apple-system,'Helvetica Neue',Arial,sans-serif; font-size:var(--fs-body);line-height:1.62; transition:background .5s ease,color .5s ease} h1,h2,h3{font-family:'Martina Plantijn',Georgia,serif;font-weight:500;line-height:1.1;margin:0;text-wrap:balance} p{margin:0} a{color:inherit} img{max-width:100%;display:block} .wrap{padding-inline:var(--gutter)} .inset{padding-inline:var(--inset)} .ph::after{display:none} .kicker{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} /* Script-koroste otsikossa — mitattu ohjeiston esimerkeistä (s.25 "unmade", s.27 "koroste", s.45 "tekemättä"; pikselimittaus 26.8.2026): · script-fontin koko = 1,07–1,13 × otsikkofontin koko → käytetään 1,1 · scriptin baseline NOSTETTU 0,125 × otsikko-em serifin baselinen yläpuolelle (mitattu 0,124 / 0,127 / 0,125 — s.50 web-mockup poikkeaa ylöspäin, outlier) → runko istuu optisesti serifin x-korkeuden tasossa ja häntä pyyhkäisee baselinen tuntumaan. top on script-em:einä: 0,125 / 1,1 = 0,114. */ .script{font-family:'Magnolia Cora',cursive;font-weight:400;font-style:normal; font-size:1.15em;line-height:1;position:relative;top:-.109em} /* 1,15 em asiakkaan pyynnöstä (palaveri 1.9.); top = 0,125/1,15 = 0,109 — sama absoluuttinen baseline-siirto kuin 1,1 em:llä, joten lukot eivät liiku */ .rule{width:clamp(4rem,7.2vw,8rem);height:2px;background:currentColor;opacity:.88;border:0;margin:0} /* ohjeisto s.50: 1,4 px × 104 px @1440 */ /* "Kaikki …" -linkit: sama koko ja käsittely kaikissa osioissa. Nuoli on piirretty CSS:llä (varsi + kärki) — hoverissa varsi KASVAA ja kärki liukuu perässä. Teksti ei liiku, joten alleviivaus ei nytkähdä. */ .all{display:inline-flex;align-items:center;gap:.45em;width:max-content; font-size:var(--fs-body);font-weight:700;letter-spacing:normal;text-decoration:none; border-bottom:2px solid currentColor;padding-bottom:3px} /* alleviivaus = linkin väri */ .arw{position:relative;top:.043em;display:inline-block;flex:0 0 auto;width:1.5em;height:1em; align-self:center} /* PYSTYSIJAINTI (korjattu kierros 20): varsi linjataan tekstin x-korkeuden KESKIKOHTAAN. Mitattu renderöinnistä: arvolla .175em varsi oli +2,5 px eli +0,132 em keskikohdan alapuolella (fonttikoko 18,88 px) → .175 − .132 = .043em. Mittaustapa: "nnn" (ei ascendereita/descendereita) x-korkeuden keskikohta vs. nuolen leveimmän ink-rivin y. */ /* VARREN PITUUS on laskettu kärjen geometriasta, ei silmämääräisesti. Kärki on .32em neliö, jonka keskipiste on .68em kohdalla ja jota kierretään 45°. Kierron jälkeen kulmat ovat keskipisteestä ±.32/√2 = ±.2263em: kärjen huippu .68 + .2263 = .906em (mitattu renderöinnistä .905em ✓) avoimet päät keskiviivaltaan .68em PELKKÄ GEOMETRIA ALIARVIOI: viivanpaksuus on 2 px (= .106em 18,88 px koossa), joten kärjen näkyvä ink ulottuu ~.08em keskiviivaa pidemmälle. Arvot vertailtu renderöimällä todellisessa koossa (.60/.68/.76/.84/.90/.96em): .60 ja .68 → näkyvä RAKO varren ja kärjen välissä (käyttäjän havainto) .90 ja .96 → varsi työntyy kärjen huipun LÄPI (alkuperäinen vika) .76 → varsi osuu kärkeen puhtaasti ← valittu Hover: kärki siirtyy +.42em → varsi .76 + .42 = 1.18em. */ .arw::before{content:'';position:absolute;left:0;top:50%;height:2px;width:.76em; background:currentColor;transform:translateY(-50%); transition:width .45s cubic-bezier(.22,.61,.36,1)} .arw::after{content:'';position:absolute;left:.52em;top:50%;width:.32em;height:.32em; border-top:2px solid currentColor;border-right:2px solid currentColor; transform:translate(0,-50%) rotate(45deg); transition:transform .45s cubic-bezier(.22,.61,.36,1)} .all:hover .arw::before,.more:hover .arw::before,.pager-step:hover .arw::before{width:1.18em} .all:hover .arw::after,.more:hover .arw::after,.pager-step:hover .arw::after{ transform:translate(.42em,-50%) rotate(45deg)} @media (prefers-reduced-motion:reduce){.arw::before,.arw::after{transition:none}} .ph{position:relative;background:var(--surface-2);overflow:hidden} .ph>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0; filter:var(--img-filter);opacity:var(--img-opacity);transition:filter .6s,opacity .6s} .ph::after{content:attr(data-label);position:absolute;left:14px;bottom:10px; font-size:.66rem;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase} .ph::after{display:none} /* NAPIT — yksi koko koko sivustolla (heron mitat, ohjeisto s. 49). Hover: täyttö pyyhkäistyy alhaalta ylös ja teksti kääntyy vastaväriin. --fill = hover-täyttö, --fill-ink = tekstin väri täytön päällä. */ .btn{display:inline-flex;align-items:center;justify-content:center;position:relative; overflow:hidden;isolation:isolate; font:400 clamp(.86rem,.95vw,1.02rem)/1 'DM Sans',sans-serif;letter-spacing:.04em; padding:1.3em 3em;min-width:clamp(8rem,10.5vw,10.5rem);text-align:center; text-decoration:none;border:1.5px solid transparent; transition:color .3s ease .06s,border-color .5s cubic-bezier(.22,.61,.36,1)} .btn::before{content:'';position:absolute;inset:-1px;z-index:-1; background:var(--fill,currentColor);transform:scaleY(0);transform-origin:bottom center; transition:transform .5s cubic-bezier(.22,.61,.36,1)} .btn:hover::before{transform:scaleY(1)} /* Elementtivalitsin mukaan (0,2,1), jotta hover-väri voittaa kontekstisäännöt kuten .hero .btn--sec (0,2,0) — muuten valkoinen teksti jää valkoiselle täytölle näkymättömiin. */ a.btn:hover,button.btn:hover{color:var(--fill-ink,var(--bg));border-color:var(--fill,currentColor)} .btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .btn--pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent); --fill:var(--deep);--fill-ink:var(--deep-ink)} /* ANSA: --fill EI saa olla currentColor. Hover vaihtaa colorin arvoon --fill-ink (vaalea), ja koska ::before-täyttö luki currentColorin, myös täyttö muuttui vaaleaksi → valkoinen teksti valkoisella (asiakkaan huomio yhteystietosivulta). Täyttöväri sidotaan siksi tokeniin, ei tekstinväriin. */ .btn--sec{border-color:currentColor;background:transparent; --fill:var(--ink);--fill-ink:var(--bg)} @media (prefers-reduced-motion:reduce){.btn::before{transition:none}} /* ============ ANIMAATIOT ============ */ /* Tekstianimaatiot vain väritilassa — wireframe on staattinen */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} .fade{opacity:0;transition:opacity 1s cubic-bezier(.22,.61,.36,1)} .fade.in{opacity:1} /* script kirjoittuu vasemmalta oikealle (esityspohjan wipe(right)) — koko glyyfi näkyviin */ .write{display:inline-block;padding:.12em .1em .18em} .write{clip-path:inset(-30% 100% -30% -10%);transition:clip-path 1.15s cubic-bezier(.3,.7,.3,1)} .write.in{clip-path:inset(-30% -14% -30% -10%)} /* alleviivaus: PPT:n wipe(right) = maski paljastaa kuvan, kuva EI veny. bottom kalibroitu uudelleen 26.8.2026 script-mitoituksen muutoksen jälkeen (koko 1,1× + baseline-nosto .125em siirsivät sanan inkkiä ylös): .185em → .2625em → mitattu väli ink-alareunasta 6,2 px / ink 56 px = 0,111 — ohjeiston haarukassa 0,087–0,118 (referenssisanat joiden häntä-desc ~0,14). */ .uline{display:block;position:absolute;left:0;right:-.1em;bottom:.2625em;height:.26em; background:center/100% 100% no-repeat} .uline{clip-path:inset(0 100% 0 0);transition:clip-path .62s cubic-bezier(.3,.7,.3,1) 1.02s} .uline.in{clip-path:inset(0 0 0 0)} .uline--aub{background-image:url('../img/underline-aubergine.png')} .uline--lin{background-image:url('../img/underline-linen.png')} .has-ul{position:relative;display:inline-block;white-space:nowrap;padding-inline:.1em .18em} /* tunnusluvut: kelarulla */ /* isot kuvat: parallax containerin sisällä (JS lukee --amp:n ja asettaa transformin) */ .px{overflow:hidden;--amp:.05} .hero .bg{--fix:.78} /* hero lähes kiinteä: kuva pysyy näkymässä 78 %:sti */ .service .ph{--amp:.095} /* palvelukuviin selvempi liike */ /* Etusivun palvelurivi 3 (KON_4923, neliö): miehen päälaki on lähteen yläreunassa, joten rajaus ankkuroidaan ylös ja puhelimen 1,33-paikka leikkaa alhaalta. */ .service .ph img[src*="/etusivu-palvelu-3"]{object-position:50% 0} .px img{will-change:transform} /* tunnusluvut: kelarullan maskireuna pehmenee liikkeen ajaksi ja terävöityy kun luku on paikallaan */ @property --fade{syntax:'';inherits:false;initial-value:0%} .reel{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:baseline; /* Kelan SISÄLLÄ ei välistystä: negatiivinen letter-spacing kaventaa merkin advance-leveyttä, jolloin overflow:hidden leikkasi glyyfin oikean reunan (0-numerot). Lukujen välinen tiukkuus tulee edelleen .stat b:n letter-spacingista, joka koskee kelaelementtien VÄLEJÄ. */ letter-spacing:normal; --fade:0%;transition:--fade .5s ease; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); mask-image:linear-gradient(to bottom,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)} /* VÄLISTYS. Kelan ruudun leveys on LEVEIMMÄN numeron levyinen (Martina Plantijnissa "4" = .622 em), koska sarake sisältää kaikki numerot 0–9. Numero on ruudussa vasempaan tasattuna, joten kapean numeron oikealle jää tyhjää: "1" .200 em, "3" .140 em, "2" .111 em — "0" vain .008 em, minkä vuoksi nollaparit näyttivät oikein ja muut liian väljiltä (asiakkaan huomio). leiska.js mittaa numeroiden todelliset leveydet ja asettaa --fix-arvon, joka kumoaa juuri tämän tyhjän. Tiukkuus tulee siis fontin omista sivulaakereista, ei erillisestä trackingista. Marginaali siirtyy paikalleen samalla ajoituksella kuin numero laskeutuu, jottei pyörivien numeroiden leveys ylitä ruutua kesken animaation. .stat b:n padding-right kumoaa kokonaisleveyden muutoksen → sarakkeet eivät nytkähdä, vaan luku tiivistyy paikallaan. */ .reel{margin-right:var(--fix,0)} .reel + .reel{margin-left:var(--track,0)} .reel.soft{--fade:16%} .reel .col{display:block;transform:translateY(0);transition:transform 1.05s cubic-bezier(.16,.84,.28,1)} .reel .col span{display:block;height:1em;line-height:1} @media (prefers-reduced-motion:reduce){ .reveal,.fade{opacity:1;transform:none;transition:none} .write,.uline{clip-path:none;transition:none} .reel .col{transition:none} .reel{--fade:0%;transition:none} .px img{transform:none!important} .card:hover .ph,.card:hover .ph img{transform:none} html{scroll-behavior:auto} } /* ============ NAVI — läpinäkyvänä hero-kuvan PÄÄLLÄ (krogerus-malli) ============ */ .site-header{position:absolute;inset:0 0 auto 0;z-index:70;color:#fff; transition:transform .45s cubic-bezier(.22,.61,.36,1),background .3s ease,color .3s ease} /* ============ KIINNITTYVÄ HEADER (esiin vain ylöspäin scrollatessa) ============ */ /* Sivun yläosassa navi on läpinäkyvänä kuvan päällä. Kynnyksen jälkeen se muuttuu kiinteäksi vaaleaksi palkiksi: alaspäin scrollatessa piiloon, ylöspäin esiin (ohjeiston header-esimerkki). Palkki on matalampi ja logo pienempi kuin hero-tilassa, ja siirtymämerkintä jää pois. */ .site-header.hdr-solid{position:fixed;top:0;color:var(--ink); --hdr-logo:clamp(7.4rem,10.8vw,11.2rem); /* ink 9,25 vw = ohjeiston header-esimerkki */ background:var(--surface);box-shadow:0 1px 0 rgba(0,0,0,.06)} .site-header.hdr-solid .bar{align-items:center;min-height:clamp(3.6rem,5.4vw,5.4rem); padding-top:clamp(.6rem,1vw,1rem);padding-bottom:clamp(.6rem,1vw,1rem)} .site-header.hdr-solid nav:not(.menu),.site-header.hdr-solid .bar > .burger{margin-top:0} .site-header.hdr-solid .hdr-note{display:none} .site-header.hdr-solid .burger{color:var(--ink)} /* valikon ollessa auki X on aubergine-paneelin päällä → aina valkoinen */ .nav-open .site-header.hdr-solid .burger{color:#fff} .site-header.hdr-solid .logo-light{display:none} .site-header.hdr-solid .logo-dark{display:block} .logo-dark{display:none} /* VAALEA KANSI (artikkelisivu): headerin oletusväri on valkoinen tummalle kannelle, joten vaalealla pinnalla teksti ja logo vaihtuvat tummiksi. */ .site-header.hdr-light:not(.hdr-solid){color:var(--ink)} .site-header.hdr-light:not(.hdr-solid) .logo-light{display:none} .site-header.hdr-light:not(.hdr-solid) .logo-dark{display:block} .site-header.hdr-light:not(.hdr-solid) .burger i{background:var(--ink)} .site-header.hdr-hidden{transform:translateY(-100%)} .site-header.hdr-notr{transition:none} /* valikon ollessa auki header pysyy aina näkyvissä */ .nav-open .site-header.hdr-hidden{transform:none} /* Valikko avautuu VALKOISEN header-palkin PÄÄLLE. Verho ja paneeli ovat headerin LAPSIA, joten ne asettuvat sen omaan pinojärjestykseen: verho 1 → brändi 2 → paneeli 3 → hampurilainen (X) 4. Näin paneeli peittää palkin, mutta X pysyy päällä ja klikattavana. (Jos header menettäisi oman z-indeksinsä, se putoaisi hero-osion alle, koska hero on DOM:issa myöhemmin ja myös positioitu.) */ .nav-open .site-header .brand{position:relative;z-index:2} /* SAAVUTETTAVUUS: rengas oli valkoinen (1.03:1) aina kun palkki on vaalean pinnan päällä — myös artikkelisivun vaalealla kannella (.hdr-light). */ .site-header.hdr-solid nav:not(.menu) a:focus-visible,.site-header.hdr-solid .burger:focus-visible, .site-header.hdr-light nav:not(.menu) a:focus-visible,.site-header.hdr-light .burger:focus-visible{ outline-color:var(--ink)} @media (prefers-reduced-motion:reduce){.site-header{transition:none}} /* Palkki on kolmipalstainen gridi: brändi vasemmalla, NAVILINKIT KESKELLÄ, hampurilainen oikealla (asiakkaan toive 26.8.2026). 1fr-reunapalstat ovat yhtä leveät → keskipalsta on aidosti näkymän keskellä. */ /* Navin pystysijainti (kierros 14): navi keskitetään siihen tyhjään kaistaan, joka jää sivun yläreunan ja hero-kuvan väliin (alasivuilla kuva alkaa 0,82 × --nav-h kohdalta). Kaistan keskikohta on 0,41 × --nav-h; navi- ryhmän (logo + linkit) korkeus on ~0,435 × --nav-h, joten yläpadding on kaistan keskikohta miinus puolet ryhmästä. Etusivulla sama arvo nostaa navia saman verran ylöspäin. */ .site-header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:start; column-gap:clamp(1.5rem,4vw,3rem); min-height:var(--nav-h);padding-inline:var(--gutter);padding-top:clamp(1.05rem,2.2vw,2.1rem)} .site-header .brand{display:grid;gap:clamp(.1rem,.34vw,.34rem);justify-self:start} .site-header .bar > .burger{justify-self:end; /* pystykeskitys navilinkkien riviin: linkkirivin keskikohta on baseline-kaavan mukaisesta yläreunasta 1,21 × fonttikoko (padding .4em + riviväli 1,62 → rivin korkeus 2,42em), ikoni 18 px korkea */ margin-top:calc(var(--hdr-logo) * .29503 - var(--fs-nav) * .3124 - 9px)} /* etusivun läpinäkyvässä headerissä EI logoa — herossa on jo iso Vendre-logo. visibility säilyttää gridipaikan, ja kiinteässä palkissa logo palaa näkyviin. */ .site-header.hdr-front:not(.hdr-solid) .brand{visibility:hidden} .site-header .logo img{width:var(--hdr-logo);height:auto} /* siirtymämerkintä logon alla: EI venytystä eikä alleviivausta. Fonttikoko on sidottu logoon niin että tekstin LUONNOLLINEN leveys = logon ink-leveys (mitattu: ink 85,8 % SVG-kehyksestä · teksti 15,01 × fonttikoko) */ .hdr-note{display:block;width:max-content;white-space:nowrap; margin-left:calc(var(--hdr-logo) * .071); /* kehyksen tyhjä reuna → ink-linja */ font-size:calc(var(--hdr-logo) * .05717); font-weight:700;letter-spacing:.055em; text-transform:uppercase;text-decoration:none;color:#fff;opacity:.8; transition:opacity .3s} .hdr-note:hover{opacity:1} /* logo jää paikalleen myös valikon ollessa auki (valikkopaneeli on oikealla, joten se ei peitä brändiä; verho tummentaa taustan ja valkoinen logo erottuu) */ /* Linkit ja hampurilainen samaan pystysuunnassa keskitettyyn riviin, ja rivi pudotettu niin että linkkien BASELINE osuu logon wordmarkin baselineen. Logon baseline = 0,29503 × SVG-kehyksen leveys (ink-alareuna, ei descendereitä); linkin baseline = 1,5224 × fonttikoko navwrapin yläreunasta (padding .4em + riviväli 1,62 + DM Sansin ascent) — molemmat em-sidottuja, joten suhde pitää. */ .site-header nav:not(.menu){display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.9rem); /* linkkien BASELINE logon wordmarkin baselinelle (sama kaava kuin ennen): logon baseline 0,29503 × kehys − linkin baseline 1,5224 × fonttikoko */ margin-top:calc(var(--hdr-logo) * .29503 - var(--fs-nav) * 1.5224)} .site-header nav:not(.menu) a{position:relative;font-size:var(--fs-nav);font-weight:400;letter-spacing:.015em;text-decoration:none; padding-block:.4em;border-bottom:1px solid transparent} /* hover-viiva pyyhkäistyy sisään vasemmalta ja ulos oikealle */ .site-header nav:not(.menu) a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right center; transition:transform .42s cubic-bezier(.22,.61,.36,1)} .site-header nav:not(.menu) a:hover::after{transform:scaleX(1);transform-origin:left center} .site-header nav:not(.menu) a:focus-visible,.burger:focus-visible{outline:2px solid #fff;outline-offset:5px} @media (max-width:820px){.site-header nav:not(.menu) a{display:none}} /* hampurilaisikoni: kolme viivaa → X, porrastettu (persoonallinen). MITAT KOKONAISINA PIKSELEINÄ (korjattu kierros 13): aiemmin laatikko oli 1,15rem = 18,4 px ja viivat 1,6 px, jolloin kolme viivaa osuivat ERI pikselirajoille (peittivät 3/3/2 pikseliriviä) ja alin näytti paksummalta. Nyt laatikko 18 px ja viivat 2 px kohdissa 0 / 8 / 16 → kaikilla kolmella on identtinen osapikselivaihe ja siten identtinen paksuus. X-asento: viiva 1 liikkuu +8 px ja viiva 3 −8 px (keskilinja y = 9). */ /* ============ PALVELUMME-DROPDOWN (päänavi, desktop) ============ */ /* Avautuu hoverista JA näppäimistöfokuksesta (:focus-within). Paneeli on VAALEA (Linen): aubergine-paneeli kokeiltiin 1.9. mutta se hukkui alasivujen aubergine-otsikko-osioita vasten (munakoiso munakoisolla) — vaalea laatikko varjoineen erottuu kaikilla pinnoilla. dd-panelin näkymätön yläosa (padding-top) toimii siltana, jottei hover katkea matkalla paneeliin. Pieni kärki (::before-salmiakki) osoittaa avaavaan linkkiin. */ /* SULKEMISEN ARMONAIKA (Matti 24.9.: valikko katosi matkalla Kaupallinen kasvupalvelu -otsikkoon). Otsikko on oikeassa palstassa noin 360 px linkistä oikealle mutta vain 130 px alempana, joten vino polku poistuu linkin OIKEASTA reunasta ennen kuin ehtii sen alareunaan eli paneelin siltaan. Mitattu 24.9. (1440 px, 16 ms:n askel): 20 askeleesta 18 jäi ulos, koska paneelin pointer-events:none katkaisi hoverin heti. Nyt paneeli pysyy näkyvissä ja tavoitettavana --dd-armo ajan ennen häivytystä; pointer-events seuraa näkyvyyttä (visibility:hidden ei ota osumia), joten sitä ei vaihdeta erikseen. Avaaminen on yhä viiveetön (transition-delay:0s). */ .nav-dd{--dd-armo:.35s;position:relative;display:inline-flex;align-items:center} .nav-dd > a{display:inline-flex;align-items:center;gap:.45em} .dd-chev{flex:0 0 auto;width:.32em;height:.32em;margin-top:.04em; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);transform-origin:60% 60%; transition:transform .3s ease var(--dd-armo),margin .3s ease var(--dd-armo)} .nav-dd:hover .dd-chev,.nav-dd:focus-within .dd-chev{transform:rotate(225deg);margin-top:.3em;transition-delay:0s} /* Kärki avaavan linkin alla. ANSA: aiemmin tämä oli 45° kierretty NELIÖ, jonka alapuoli oli tarkoitus jäädä paneelin laatikon taakse. Sisääntulon aikana molemmat ovat osittain läpinäkyviä, joten alapuoli paljastui ja kärki näkyi salmiakkina. Nyt muoto on oikea kolmio (clip-path), jolla ei ole peitettävää alapuolta lainkaan. */ .nav-dd::before{content:'';position:absolute;z-index:9; top:calc(100% + 1.05rem - 8px);left:50%;width:16px;height:8px; background:var(--surface); clip-path:polygon(50% 0,100% 100%,0 100%); transform:translate(-50%,8px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .32s cubic-bezier(.22,.61,.36,1) var(--dd-armo),transform .32s cubic-bezier(.22,.61,.36,1) var(--dd-armo),visibility 0s linear calc(var(--dd-armo) + .32s),background .5s} .nav-dd:hover::before,.nav-dd:focus-within::before{ opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s} /* width:max-content: absoluuttisen elementin automaattileveys on shrink-to-fit CONTAINING BLOCKIN (kapea .nav-dd) mukaan — ilman tätä laatikko jäi sisältöä kapeammaksi ja otsikot työntyivät reunan yli. */ .dd-panel{position:absolute;top:100%;left:calc(-1 * clamp(1.6rem,2.2vw,2.2rem)); width:max-content;transform:translateY(8px); padding-top:1.05rem;z-index:8; opacity:0;visibility:hidden; transition:opacity .32s cubic-bezier(.22,.61,.36,1) var(--dd-armo),transform .32s cubic-bezier(.22,.61,.36,1) var(--dd-armo),visibility 0s linear calc(var(--dd-armo) + .32s)} .nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel{ opacity:1;visibility:visible;transform:translateY(0); transition-delay:0s} .dd-box{display:grid;grid-template-columns:auto auto;gap:0; background:var(--surface);color:var(--ink); border-radius:clamp(.5rem,.85vw,.85rem); box-shadow:0 24px 60px -18px rgba(26,18,23,.45),0 4px 16px -6px rgba(26,18,23,.25); padding:clamp(1.8rem,2.4vw,2.4rem) 0;transition:background .5s} .dd-grp{display:grid;align-content:start;gap:.1rem; padding-inline:clamp(2rem,2.8vw,2.8rem);min-width:16rem} .dd-grp + .dd-grp{border-left:1px solid var(--line)} /* paneelin linkit: omat tyylit, jotka ohittavat headerin navilinkkisäännöt */ .site-header nav:not(.menu) .dd-panel a{display:block;color:var(--ink); font-size:var(--fs-body);font-weight:400;letter-spacing:.01em; padding:.4em 0;border-bottom:0;white-space:nowrap; transition:transform .3s ease,opacity .3s ease;opacity:.85} /* ANSA: siirto tehtiin padding-leftillä, joka kasvattaa linkin laatikkoa. .dd-box on grid-template-columns:auto auto, joten levein linkki määrää sarakkeen leveyden — hover kasvatti koko paneelia. transform ei vaikuta asetteluun, joten paneelin koko pysyy vakiona. */ .site-header nav:not(.menu) .dd-panel a:hover{opacity:1;transform:translateX(.4rem)} .site-header nav:not(.menu) .dd-panel a::after{display:none} .site-header nav:not(.menu) .dd-panel a.dd-head{ font-family:'Martina Plantijn',Georgia,serif;font-weight:500;opacity:1; font-size:clamp(1.1rem,1.45vw,1.4rem);padding:.3em 0 .5em} .site-header nav:not(.menu) .dd-panel a.dd-head:hover{transform:translateX(.4rem)} /* nuoli vain ryhmäotsikoissa — samoin kuin hampurilaisvalikossa */ .dd-panel a.dd-head{display:flex;align-items:center;gap:.5rem} .dd-panel a.dd-head .arw{width:1.05em;margin-right:.3em;opacity:.55;transition:opacity .3s ease} .dd-panel a.dd-head:hover .arw{opacity:1} .dd-grp .dd-head + .dd-head{margin-top:.35rem} .site-header nav:not(.menu) .dd-panel a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media (max-width:820px){.site-header .nav-dd .dd-panel{display:none}} /* Vähennetty liike: ei liukumia, mutta armonaika säilyy (se ei ole liikettä). */ @media (prefers-reduced-motion:reduce){ .dd-chev{transition:none} .dd-panel,.nav-dd::before{transition:opacity 0s var(--dd-armo),transform 0s var(--dd-armo),visibility 0s var(--dd-armo)} } .burger{position:relative;z-index:4;background:none;border:0;cursor:pointer;padding:0; color:#fff;width:2rem;height:18px;flex:0 0 auto} .burger i{position:absolute;left:0;height:2px;width:100%;background:currentColor; transition:transform .42s cubic-bezier(.68,-.3,.32,1.3),opacity .22s ease,width .42s cubic-bezier(.68,-.3,.32,1.3)} .burger i:nth-child(1){top:0} .burger i:nth-child(2){top:8px;width:72%} .burger i:nth-child(3){bottom:0} .burger:hover i:nth-child(2){width:100%} .nav-open .burger{color:#fff} .nav-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-open .burger i:nth-child(2){opacity:0;width:0} .nav-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* valikkopaneeli: liukuu oikealta (krogerus: 0.3s cubic-bezier(.77,0,.175,1)) */ .menu{position:fixed;inset:0 0 0 auto;width:min(100%,42rem);z-index:3; background:var(--deep);color:var(--deep-ink); transform:translateX(100%);transition:transform .52s cubic-bezier(.77,0,.175,1); display:flex;flex-direction:column;overflow-y:auto; /* Mitoitus rajattu myös näkymän KORKEUDELLA (svh), jotta kaikki linkit ja Ota yhteyttä -nappi mahtuvat kerralla näkyviin ilman vieritystä. */ padding:min(calc(var(--nav-h) + 1rem),9.5svh) clamp(1.6rem,5vw,4.5rem) min(clamp(2rem,5vw,4rem),4.6svh)} .nav-open .menu{transform:translateX(0)} .nav-open .site-header nav:not(.menu){opacity:0;pointer-events:none;transition:opacity .25s ease} .menu-veil{position:fixed;inset:0;z-index:1;background:rgba(20,14,18,.5); opacity:0;pointer-events:none;transition:opacity .5s ease} .nav-open .menu-veil{opacity:1;pointer-events:auto} /* linkit: maskattu nousu porrastettuna (sama liikekieli kuin esityspohjassa) */ .menu-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.1rem,.6vw,.5rem)} .menu-list > li{overflow:hidden} .menu-row{display:flex;align-items:center;gap:.7rem;width:100%;background:none;border:0;color:inherit; padding-right:.45rem; /* tilaa 45° kierretylle nuolelle, ettei li:n overflow rajaa sitä */ font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:min(clamp(1.45rem,3.2vw,2.5rem),3.7svh); line-height:1.25;text-align:left;text-decoration:none;cursor:pointer; padding:min(.28em,.8svh) 0; transform:translateY(115%);opacity:0;transition:transform .72s cubic-bezier(.22,.61,.36,1),opacity .5s ease} .nav-open .menu-row{transform:translateY(0);opacity:1} /* HOVER PALE SUNILLA (ehdotus 2.9.). Aiemmin isot rivit HIMMENIVÄT hoverissa (opacity .72), jolloin osoitettu kohta näytti heikommalta kuin muut, ja alalinkit tekivät päinvastoin. Nyt koko valikossa yksi sääntö: osoitettu kohta vaihtuu Pale Suniin (#FFEDB5 Aubergine-pinnalla 11,5:1). Kolmas väri pinnalla pysyy ohjeiston 2–3 sävyn rajassa (Aubergine, Linen, Pale Sun). Vain tumman hampurilaisvalikon sääntö: vaalealla pudotusvalikolla Pale Sun ei erottuisi. */ .menu-row,.menu-sub a{transition:color .25s ease,opacity .3s ease,transform .3s ease} .menu-row:hover,.menu-row:focus-visible{opacity:1;color:var(--sun)} .menu .menu-row:focus-visible,.menu a:focus-visible{outline:2px solid var(--deep-ink);outline-offset:4px} /* sakaramainen nuoli — sama muoto kuin lomakkeen dropdown-nuolessa */ .menu-row .chev{margin-left:auto;flex:0 0 auto;width:.36em;height:.36em; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transform-origin:65% 65%;opacity:.55; transition:transform .35s ease,opacity .3s ease} .menu-row[aria-expanded="true"] .chev{transform:rotate(45deg)} .menu-row:hover .chev{opacity:1} /* toinen taso — kolmatta tasoa ei ole */ .menu-sub{list-style:none;margin:0;padding:0 0 0 clamp(.8rem,2vw,1.6rem); display:grid;gap:.1rem;max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.77,0,.175,1)} /* ANSA: overflow:hidden on paljastusanimaatiota varten (linkit tulevat translateY(120%):sta), mutta se leikkaa PYSYVÄSTI. Kun ryhmälinkkeihin lisättiin nuoli, »Kaupallinen kokonaisuus« leikkautui kesken sanan. Animaation jälkeen leikkaus poistetaan, jolloin sisältö ei voi kadota. */ .menu-sub li,.menu-sub .row{overflow:hidden} .nav-open.nav-valmis .menu-sub li,.nav-open.nav-valmis .menu-sub .row{overflow:visible} /* ryhmäotsikko valikon alatasolla: serif-linkki (Myynnin palvelut / Kaupallinen kokonaisuus / Kansainvälinen kasvu), palvelut sen alla */ .menu-sub a.menu-grp{font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:min(clamp(1.1rem,1.7vw,1.4rem),2.2svh);opacity:1;letter-spacing:0} /* nuoli vain ryhmälinkeissä — ne ovat kohdesivuja. Alalinkeissä nuolta EI ole, jolloin nuoli erottaa tasot sen sijaan että toistuisi joka rivillä. */ /* margin-right = pelivara leikkaukseen. Ilman sitä nuolen oikea reuna osuu TÄSMÄLLEEN sarakkeen reunaan (max-content mitoittuu tekstiin + nuoleen), ja overflow:hidden leikkaa viimeisen alipikselin eri zoom-tasoilla. Pelivara on suurempi kuin hoverin translateX(.18em), joten nuoli ei katoa senkään aikana. */ /* RYHMÄOTSIKOT KAHDELLE RIVILLE (asiakkaan ehdotus 2.9.). Kaksi rinnakkaista serif-otsikkoa ei mahdu 672 px:n valikkoon luotettavasti, koska Martinan renderöintileveys vaihtelee koneesta toiseen: nowrap-versio meni asiakkaalla päällekkäin vaikka omassa selaimessa oli 17 px pelivaraa. Nyt oikean palstan otsikot rivitetään aina (br.mv, piilossa alle 821 px), jolloin palstan max-content on n. 150 px ja vasen saa yli 300 px. Nuoli on inline sanan perässä ja .nw estää sen orpoutumisen omalle riville. */ .menu-sub a.menu-grp{display:block;white-space:normal;line-height:1.12} .menu-sub a.menu-grp .nw{white-space:nowrap} .menu-sub .row{padding-right:.7em} @media (max-width:820px){.menu-sub br.mv{display:none}} .menu-sub a.menu-grp .arw{width:1.05em;margin-right:.3em;opacity:.6; transition:opacity .3s ease,transform .3s ease} .menu-sub a.menu-grp:hover .arw{opacity:1;transform:translateX(.18em)} .menu-sub .msg{display:grid;align-content:start;gap:.05rem} /* Pystyviiva sitoo viisi palvelua Myynnin palvelut -otsikkoon: pelkkä sisennys ei riittänyt kertomaan hierarkiaa (asiakkaan huomio). Sama keino kuin .dd-grp- ja .pnote-lohkoissa. */ .menu-sub .msg ul{list-style:none;margin:.15rem 0 0; padding:0 0 0 clamp(.85rem,1.7vw,1.4rem); border-left:1px solid var(--menu-rule)} .menu-sub a,.menu-sub .menu-row{font-family:'DM Sans',sans-serif;font-weight:400; font-size:min(clamp(.95rem,1.4vw,1.15rem),1.9svh);line-height:1.25;letter-spacing:.01em; padding:min(.5em,.85svh) 0;display:flex;gap:.6rem;align-items:center; text-decoration:none;opacity:0;transform:translateY(120%); transition:transform .62s cubic-bezier(.22,.61,.36,1),opacity .45s ease} .nav-open .menu-sub a,.nav-open .menu-sub .menu-row{transform:none;opacity:.85} /* ANSA: siirto tehtiin padding-leftillä, joka kasvattaa laatikkoa. Alataso on ≥821 px:llä grid-template-columns:auto auto, joten levein linkki määrää sarakkeen leveyden ja hover olisi liikuttanut koko valikkoa. */ .menu-sub a:hover,.menu-sub a:focus-visible{opacity:1;color:var(--sun);transform:translateX(.4rem)} /* desktopissa alataso on valmiiksi auki — ei haitaria eikä nuolta */ @media (min-width:821px){ /* ALATASON KOOT PIENEMMIKSI (Matti 23.9.): koko valikon pitää mahtua näytölle kerralla ilman vieritystä. 1440 x 900: ryhmäotsikko 19,8 -> 17,1 px, alalinkki 17,1 -> 14,4 px. Ylätason koko on tiedoston lopussa .menu-row- säännön perässä, koska täällä se jäisi myöhemmän säännön alle. Mobiiliin ei kosketa: siellä valikko vierittyy tarkoituksella. */ .menu-sub a.menu-grp{font-size:min(clamp(1rem,1.4vw,1.2rem),1.9svh)} .menu-sub a,.menu-sub .menu-row{font-size:min(clamp(.88rem,1.15vw,1rem),1.6svh); padding-block:min(.42em,.72svh)} /* alataso kahdessa palstassa → koko valikko mahtuu kerralla näkyviin */ /* auto-sarakkeet + nowrap ryhmäotsikoissa: 1fr 1fr rivitti »Kaupallinen kokonaisuus« kahdelle riville, jolloin se näytti eriarvoiselta yksirivisen »Kansainvälinen kasvu« rinnalla (asiakkaan huomio 1.9.) */ /* KOLMAS KORJAUS SAMAAN NUOLEEN (2.9.). auto auto -sarakkeet KUTISTUVAT, kun sisältö ylittää 528 px:n: »Nykyasiakkaiden aktivointi« kasvatti vasenta saraketta, oikea kutistui, ja »Kaupallinen kokonaisuus« menetti nuolensa asiakkaan fonttimetriikalla vaikka omassa selaimessa oli 5,9 px pelivaraa. LOPULLINEN: molemmat sarakkeet max-content. Kun oikean palstan otsikot rivitetään kahdelle riville (br.mv), sisältö on 203 + 32 + 153 = 388 px ja tilaa on 502 px, joten mikään ei kutistu eikä riipu li:n overflow- tilasta (auto- ja fr-raiteet vaihtelivat animaation aikana, koska overflow:hidden nollaa grid-alkion automaattisen minimikoon). 1fr taas vei ylijäämän vasemmalle ja työnsi oikean palstan reunaan. Lisäksi .row saa padding-rightin: se on leikkaus- laatikon SISÄLLÄ, joten nuoli pysyy näkyvissä vaikka raide kutistuisi. */ .menu-sub{max-height:none!important;overflow:visible; grid-template-columns:max-content max-content;justify-content:start; column-gap:2rem; padding-top:.4rem;padding-bottom:min(.9rem,1.2svh)} .menu-row[data-sub]{cursor:default} .menu-row[data-sub] .chev{display:none} } /* Ota yhteyttä -nappi valikon sisällä */ .menu-cta{align-self:start;flex:0 0 auto;width:max-content;margin-top:min(clamp(1.4rem,3.2vw,2.4rem),2.2svh); background:var(--deep-ink);color:var(--deep);border-color:var(--deep-ink); --fill:var(--deep-2);--fill-ink:var(--deep-ink); padding:1.3em 3em; transform:translateY(22px);opacity:0; transition:transform .7s cubic-bezier(.22,.61,.36,1) .36s,opacity .6s ease .36s} .nav-open .menu-cta{transform:none;opacity:1} /* nostoa ei tarvita: hover on täyttöpyyhkäisy (ks. .btn) */ .menu-foot{margin-top:auto;flex:0 0 auto;padding-top:min(clamp(1.6rem,4vw,3rem),2.4svh);display:grid;gap:.3rem; font-size:var(--fs-small);opacity:.62;transform:translateY(20px);transition:transform .7s ease .28s,opacity .6s ease .28s} .nav-open .menu-foot{transform:none;opacity:.62} .menu-close{position:absolute;left:-999px} /* matalilla näytöillä valikon yhteystiedot jäävät pois, jotta linkit ja samankokoinen Ota yhteyttä -nappi mahtuvat kerralla näkyviin */ @media (max-height:780px){.menu-foot{display:none}} @media (prefers-reduced-motion:reduce){ .menu,.menu-row,.menu-foot,.burger i,.menu-sub{transition:none} .menu-row{transform:none;opacity:1} } /* ============ HERO (WP: kansi) ============ */ /* Hero: viewport-suhteinen sijoittelu = ohjeiston s.49 mitat taattuina logon pystykeskipiste 48 %, napit ~78 %, korkeus 62,5 vw (16:10) */ .hero{position:relative;background:var(--hero-tint);color:#fff;overflow:hidden; height:max(34rem,min(92svh,62.5vw));transition:background .5s} .hero .bg{position:absolute;inset:0} .hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%; filter:var(--img-filter);opacity:var(--img-opacity);transition:filter .6s,opacity .6s} .hero .bg::after{content:'';position:absolute;inset:0;background:rgba(28,22,26,.16)} /* Vuorottelevat pääkuvat (Kattis ja Toni 26.9.): kuvat päällekkäin, ensimmäinen aina pohjalla. Muut näkyvät vain luokalla .on, jonka leiska.js vaihtaa 7 s välein (ristihäivytys 1 s). Ilman JS:ää näkyy ensimmäinen. */ .hero .bg img{position:absolute;inset:0} .hero .bg img + img{opacity:0;transition:opacity 1s ease-in-out,filter .6s} .hero .bg img.on{opacity:var(--img-opacity)} /* Toinen kuva (KON_5438, Matin malli 28.9.): rajattu niin, että nuoren miehen kasvot jäävät logon yläpuolelle. Hyvin leveällä näytöllä korkeutta leikkautuu enemmän ja logo nousi suun päälle (1920 px, 30 %); 60 % katkaisi otsan 2560 px:llä, 52 % on kompromissi. Kapealla kuva on pysty ja kohta siirtyy miehen kohdalle. */ .hero .bg img[src*="/etusivu-hero-2"]{object-position:50% 40%} @media (min-aspect-ratio:2/1){.hero .bg img[src*="/etusivu-hero-2"]{object-position:50% 52%}} @media (max-width:680px){.hero .bg img[src*="/etusivu-hero-2"]{object-position:26% 40%}} /* Pallot (Matti 28.9.): aktiivinen pitkä, muut pyöreitä, lasipinta kuvan päällä. Myöhemmin samana päivänä pienemmiksi ja läpikuultavammiksi (»ei noin isosti näkyvissä«). Painike on 24 px korkea (kosketuskohde), pallo sen sisällä ::beforena. Aktiivinen painike levenee pallon mukana, jotteivät kohteet mene päällekkäin. */ .hero-dots{position:absolute;left:50%;bottom:clamp(.9rem,3vh,2.2rem);transform:translateX(-50%); z-index:3;display:flex;align-items:center;gap:.15rem} .hero-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer; transition:width .45s cubic-bezier(.3,.7,.3,1)} .hero-dot::before{content:'';position:absolute;left:50%;top:50%;width:.42rem;height:.42rem; transform:translate(-50%,-50%);border-radius:999px;background:rgba(248,247,246,.2); -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(248,247,246,.28); transition:width .45s cubic-bezier(.3,.7,.3,1),background .45s} .hero-dot:hover::before{background:rgba(248,247,246,.45)} .hero-dot[aria-current="true"]{width:calc(1.4rem + 10px)} .hero-dot[aria-current="true"]::before{width:1.4rem;background:rgba(248,247,246,.5)} .hero-dot:focus-visible{outline:none} .hero-dot:focus-visible::before{outline:2px solid #F8F7F6;outline-offset:3px} @media (prefers-reduced-motion:reduce){.hero-dot,.hero-dot::before,.hero .bg img + img{transition:none}} /* HUOM (asiakkaan valinta 28.8.2026): heron kuvaa ei tummenneta. Valkoinen teksti kuvan päällä jää tällöin pahimmillaan 2.35:1:een eli alle AA-rajan. Jos kontrasti halutaan kuntoon kuvaa tummentamatta, vaihtoehto on kaventaa harso pelkän tekstilohkon taakse. */ /* Logo hieman ylemmäs ja saateteksti + napit lähemmäs sitä (asiakkaan toive kierros 13): logon pystykeskipiste 41 % → 38 %, saatelohkon yläreuna 62,5 % → 56,5 %. Logon korkeus on 19,25 vw (kehysaspekti 3,2718), joten 1440 px:llä logon alareuna on 53,4 %:ssa ja väli saatelohkoon 3,1 % (≈28 px) entisen 6,1 %:n (≈55 px) sijaan. */ /* Etusivulta puuttui tason 1 otsikko: logo on nyt H1:n sisällä. Kääre ei saa vaikuttaa asemointiin, koska .hero-logo on absoluuttisesti asemoitu. */ .hero-title{margin:0;font-size:inherit;font-weight:inherit;line-height:0} .hero-logo{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:2; width:var(--logo-w);max-width:86vw;height:auto} .hero-tail{position:absolute;top:56.5%;left:50%;transform:translateX(-50%);z-index:2; width:min(100%,56rem);padding-inline:var(--gutter);display:grid;justify-items:center; gap:clamp(.85rem,1.6vw,1.5rem);text-align:center} /* HARSO VAIN TEKSTILOHKON TAAKSE. Heron yleinen harso on .16, ja se riittää logolle: mitattuna logon kaistan huonoin kontrasti on 4,89 eli AAA isolle tekstille. Saateteksti osuu kuvassa alempana vaaleampaan kohtaan (valkoinen paita, ikkuna) ja jäi 2,53:een eli alle AA:n. Sama vika oli vanhalla kuvalla vielä pahempana, 1,98, eli tämä ei ole uuden kuvan tuoma ongelma vaan vanha, nyt mitattu. Kuvan tummentaminen kokonaan söisi sen mitä kuvasta halutaan, joten harso on vain tässä. Pehmeä soikio eikä laatikko. MITOITUS: huippualfa .20 yhdessä heron .16:n kanssa antaa yhteisalfan 1 - (1-.16)(1-.20) = .33, jolloin kaistan kirkkain 5 % nousee 3,56:een. ANSA (Matti 23.9.: »Bookers on nyt Vendre ympärillä näkyy laatikon muotoinen varjo«). Ensimmäinen versio oli ellipse 62% 58% laatikossa inset -12% -8% -14%: soikio ulottui laatikon reunojen YLI, joten liukuma katkesi reunaan alfassa ~.06 ja tummennus hyppäsi yhdellä pikselillä 0 -> 2-3 tasoa. Nyt sama soikio (sama keskipiste ja säteet) on laatikon SISÄLLÄ: laatikko on laskettu soikion mukaan ja closest-side päättää liukuman tasan reunaan, jossa alfa on 0. Tummennus tekstin kohdalla on sama kuin ennen, joten kontrasti ei muutu. */ .hero-tail::before{content:'';position:absolute;z-index:-1; inset:-27.12% -21.92% -19.04% -21.92%;pointer-events:none; background:radial-gradient(closest-side, rgba(28,22,26,.20) 0%, rgba(28,22,26,.14) 55%, rgba(28,22,26,0) 100%)} /* siirtymämerkintä heron keskellä, otsikkona toimialakuvauksen yläpuolella (siirretty headerin logon alta 26.8.2026 — etusivun headerissä ei enää logoa) */ .hero-note{display:inline-flex;align-items:center;min-height:24px;gap:.55em;width:max-content; font-size:clamp(.82rem,1vw,1rem);font-weight:700;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;color:#fff;opacity:.85; transition:opacity .3s} .hero-note:hover{opacity:1} .hero-lead{font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-lead);line-height:1.45;max-width:44ch} .hero-ctas{display:flex;gap:clamp(.7rem,1.1vw,1.1rem);flex-wrap:wrap;justify-content:center} .hero .btn--pri{background:#fff;color:var(--deep);border-color:#fff; --fill:var(--deep);--fill-ink:#fff} .hero .btn--sec{color:#fff;border-color:rgba(255,255,255,.85); --fill:#fff;--fill-ink:var(--deep)} /* kapeilla näytöillä hero virtaa normaalisti */ @media (max-width:680px){ .hero{height:auto;min-height:34rem;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1.5rem;padding:clamp(4rem,15vw,7rem) var(--gutter)} .hero-tail{position:static;transform:none;left:auto;top:auto;width:auto;padding-inline:0} /* ANSA (todettu 16.9.2026): position:static MITÄTÖI z-indexin, jolloin absoluuttisesti asemoitu .hero .bg piirtyi logon PÄÄLLE ja logo katosi mobiilissa kokonaan. Ingressi ja napit näkyivät, koska ne ovat eri elementissä. relative pitää logon virrassa mutta palauttaa z-indexin. */ .hero-logo{position:relative;transform:none;left:auto;top:auto;width:76vw;max-width:none} } /* ============ KEITÄ OLEMME (WP: ryhmä) — ohjeisto s. 50 ============ */ .who{background:var(--surface-2);transition:background .5s;position:relative;overflow:hidden} .who .inset{padding-block:clamp(4.5rem,9vw,9rem);display:grid;gap:clamp(1.3rem,2.4vw,2.2rem);justify-items:start; position:relative;z-index:2;padding-right:clamp(1.4rem,21vw,21rem)} /* BRÄNDIKUVITUS (Myyntivalmentaja) oikealla — RUUTUANIMAATIO (kierros 19). Lähde: Vendre_Esityspohja/Kuvitukset/myyntivalmentaja animated/SVG, 42 SVG-ruutua. Ruudut on koostettu yhdeksi sprite-sheetiksi (24108 × 658 px, ruutu 574 × 658) ja animoidaan steps()-askelluksella; SVG:tä ei voi animoida -elementissä eikä 42 inline-SVG:tä (13,5 Mt) mahtuisi sivulle. KAKSI ASIAA, JOTKA PITI MITATA (koostoskripti: Vendre_anim_sprite.py): 1) RUUTU 40 oli 210 yksikköä alempana kuin muut 41 — sen viewBox on 1392×1681,85 muiden 1392×1472 (ero 209,85). Ruutu siirrettiin koostossa ylös tuon verran, jolloin KAIKKIEN ruutujen ink-alareuna on y 653. Ilman korjausta käsi olisi hypännyt kerran animaation lopussa. 2) KÄSIVARREN KOKO: vanhassa PNG-kuvituksessa ink täytti koko kanvaasin (746×820, säteet leikkautuivat reunoista), uudessa on tyhjää reunoilla. Siksi kokoa EI voi verrata kanvaasien kokona. Käsivarsi eristettiin molemmista suurimpana yhtenäisenä komponenttina: vanha 625 px / 746 px kanvaasista → näytöllä 241,3 px (20 vw) uusi 476 px / 574 px ruudusta → boksin leveys 20,206 vw antaa käsivarren TASAN 241,3 px:iin. Käsivarren keskipiste on uudessa 8,00 px alempana ja sen oikea reuna 1,73 px lähempänä boksin laitaa → pystysiirto −2,75 % leveydestä ja right 11,8 vw → 11,68 vw. Näin käsi asettuu pikselilleen samaan paikkaan. Perustila (myös wire-tila) on VIIMEINEN ruutu, eli sama pullistunut hauis kuin vanhassa staattisessa kuvituksessa. */ /* SPRITE ON RUUDUKKO 7 × 6 (3052 × 3000 px, ruutu 436 × 500 = 1,5 × näyttökoko). Ensimmäinen versio oli yksirivinen 24108 × 658 px sheet 2× tarkkuudella. Ruudukko valittiin, koska se puolittaa purkumuistin (9,2 Mpx ≈ 37 Mt vs 15,9 Mpx ≈ 63 Mt) eikä kumpikaan mitta ole kymmeniätuhansia pikseleitä. HUOM testaajalle: headless-Chromen kuvakaappaus tuottaa ajoittain lähes tyhjän kuvan tästä osiosta (paint/decode-race --virtual-time-budgetin kanssa) — se EI ole vika sivussa. Sama ajanhetki renderöityi 5/5 oikein kun ajo toistettiin. Verifioi epäselvässä tapauksessa oikeassa selaimessa. */ .who-ill{--ill-w:clamp(9.09rem,20.206vw,20.21rem); --ill-h:calc(var(--ill-w) * 500 / 436); --ill-dur:1.55s; /* 60 ruutua ≈ 39 fps — sama ruutunopeus kuin 42 ruudun versiossa, mutta säteille on oma porrastettu jakso */ position:absolute;right:clamp(1.5rem,11.68vw,11.88rem);top:50%; transform:translateY(calc(-50% - var(--ill-w) * .0275)); width:var(--ill-w);height:var(--ill-h); z-index:1;pointer-events:none;opacity:.9; /* WebP häviöttömänä: 850 → 277 kt, ja mitattu bittitarkasti samaksi (0 eroavaa NÄKYVÄÄ pikseliä, alfa muuttumaton). PNG jää ensimmäiseen declaraatioon varalle: selain joka ei tunne image-setiä jättää jälkimmäisen huomiotta ja käyttää PNG:tä, eikä kumpikaan lataa molempia. */ background:url('../img/kuvitus-myyntivalmentaja-anim.png') no-repeat; background-image:image-set(url('../img/kuvitus-myyntivalmentaja-anim.webp') type('image/webp'), url('../img/kuvitus-myyntivalmentaja-anim.png') type('image/png')); background-size:calc(var(--ill-w) * 10) calc(var(--ill-h) * 6); /* PERUSTILA = 60. ruutu (rivi 5, sarake 9) — sama pullistunut hauis kuin vanhassa staattisessa kuvituksessa. Tämä on myös wire-tilan tila. */ background-position:calc(var(--ill-w) * -9) calc(var(--ill-h) * -5)} /* Animaatio vain leiska-tilassa ja VAIN KERRAN. .fade antaa leiska.js:n IntersectionObserverin lisätä .in-luokan kun osio tulee näkymään; observer tekee unobserven → ei uudelleenkäynnistystä palatessa. .fade valittiin .revealin sijaan, koska .reveal asettaa oman transformin ja kumoaisi pystykeskityksen. Ruudukko askelletaan KAHDELLA animaatiolla: x kiertää rivin 10 saraketta ja toistuu 6 kertaa, y askeltaa rivin kerran per kierros. 60 ruutua / 1,55 s = 25,8 ms per ruutu (39 fps). Ruudut 1–35 ovat hauiksen pullistus, ruudut 36–60 säteiden porrastettu ilmestyminen: seitsemän sädettä syttyy vasemmalta oikealle kolmen ruudun välein ja kasvaa seitsemässä ruudussa täyteen, joten peräkkäiset säteet limittyvät osittain. EI animation-fill-mode:forwards — animaation loputtua elementti palaa perustilaan, joka ON viimeinen ruutu, joten siirtymä on saumaton. (forwards jättäisi x:n arvoon −7 ruutua eli sheetin ulkopuolelle.) */ @keyframes ill-x{from{background-position-x:0} to{background-position-x:calc(var(--ill-w) * -10)}} @keyframes ill-y{from{background-position-y:0} to{background-position-y:calc(var(--ill-h) * -6)}} /* HUOM: tähän EI saa laittaa background-positionia. Sama sääntö pätee myös animaation LOPUTTUA (fill-mode ei ole päällä), joten aloitusruudun asettaminen tänne palauttaisi 1. ruudun kun animaatio on ohi. Aloitusruutu tulee keyframejen from-lohkosta; perustila (42. ruutu) jää voimaan lopussa. Ennen .in-luokkaa elementti on opacity:0 eli näkymätön, joten sillä ei ole väliä minkä ruudun se silloin näyttää. */ .who-ill.fade{opacity:0} .who-ill.fade.in{opacity:.9; animation:ill-x calc(var(--ill-dur) / 6) steps(10) 6, ill-y var(--ill-dur) steps(6) 1} @media (prefers-reduced-motion:reduce){ .who-ill.fade{opacity:.9; background-position:calc(var(--ill-w) * -9) calc(var(--ill-h) * -5)} .who-ill.fade.in{animation:none} } /* Sama Myyntivalmentaja-kuvitus tekstiosion oikeaan laitaan (Myyntivalmennus 24.9., Matti: »etusivun tyyliin oikealle«). .who-ill tuo koon, sijainnin ja kertaalleen soivan animaation; osio antaa sille tilan samalla oikealla varauksella kuin .who .inset. */ /* Varaus lasketaan kuvituksen omista mitoista (right + leveys + väli), koska toisin kuin .who-osiossa teksti täyttää palstan reunaan asti. Valitsin .prose.prose--ill, jotta myöhempi .prose .inset (padding-block) ja .prose .cols (2 palstaa) eivät kumoa. */ .prose--ill{position:relative;overflow:hidden} .prose.prose--ill .inset{position:relative;z-index:2; padding-right:calc(clamp(1.5rem,11.68vw,11.88rem) + clamp(9.09rem,20.206vw,20.21rem) + clamp(1.5rem,3vw,3rem))} .prose.prose--ill .cols{grid-template-columns:1fr;row-gap:1.05em} @media (max-width:860px){ /* puhelimessa kuvitus (10,6 × 12,2 rem) on oikeassa alanurkassa: tila sen alle */ .prose.prose--ill .inset{padding-right:var(--inset);padding-bottom:16rem} } @media (max-width:860px){ .who-ill{--ill-w:6.57rem;right:1rem;top:auto;bottom:clamp(1rem,4vw,2rem); transform:none;opacity:.7} .who-ill.fade.in{opacity:.7} } .who h2{font-size:var(--fs-display);max-width:26ch} .who .body{font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-2);line-height:1.34;max-width:34ch;color:var(--ink)} /* ============ TUNNUSLUVUT (WP: sarakkeet) ============ */ /* Tunnusluvut: tyylit mitattu ohjeiston some-nostosta (s.46, 3:4) numero 46,9 % korttileveydestä · % = 0,348 × numero BASELINE-tasossa selite 10,7 % numerosta, riviväli 1,22, Aubergine · väli numeroon 0,47em */ .stats{background:var(--sun);transition:background .5s} /* Sarakkeet ovat sisällön levyisiä ja vapaa tila jaetaan tasan väleihin (space-between). Kiinteillä 1fr-sarakkeilla leveä "200" ja seuraava luku joutuivat optisesti kiinni toisiinsa, koska luvut ovat vasempaan tasattuja ja eri levyisiä. */ /* Palaveri 1.9.: palstat keskitetään ja selite saa numeron koko leveyden. Toteutus: .stat on min-content → leveimmän rivin (numerolukon) levyinen, ja selite rivittyy siihen mittaan (~2 riviä). space-evenly keskittää ryhmän. */ /* QA-löydös: auto-sarakkeet + space-evenly jättivät erilevyiset lukot jopa 100 px sivuun kolmanneksen keskeltä. Tasakolmannekset + justify-items:center keskittävät jokaisen lukon omaan kolmannekseensa kaikilla leveyksillä. */ /* minmax(0,1fr): pelkkä 1fr antaa raidan minimiksi sisällön min-contentin, jolloin kiinteä 30ch-selite paisutti raidat epätasaisiksi 1440:ssä (359/359/311 px) ja lukot valuivat oikealle — QA-mittauksen löydös. */ .stats .inset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center;gap:clamp(1.4rem,3vw,3.5rem); padding-block:clamp(5.5rem,11.5vw,11.5rem)} /* Kolme toisistaan riippumatonta leveyttä: raita on tasakolmannes (minmax(0,1fr)), lukko (b) on sisältönsä levyinen, selite enintään 30ch ja enintään raidan levyinen. Alleviivaus mitoitetaan JS:llä täsmälleen lukon levyiseksi (ResizeObserver), koska CSS:ssä sisaruksen leveyteen ei pääse käsiksi ilman että jokin kolmesta kuristaa toisensa. */ .stat{width:auto;max-width:100%;display:grid;justify-items:center;text-align:center} .stat b{white-space:nowrap;width:max-content;max-width:none;justify-self:center} /* käsinpiirretty alleviivaus numerolukon alla (ohjeisto s. 28: viiva kulkee koko lukon alla, myös script-yksikön). Mitat numeron em-koossa. */ .stat-ul{width:100%;justify-self:center;font-size:var(--fs-num);height:.11em; background:url('../img/underline-aubergine.png') center/100% 100% no-repeat; margin:-.34em 0 .14em} /* aivan numeron alla, hitusen ilmaa (palaute 1.9. ×2) */ .stat-ul{clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.3,.7,.3,1) .1s} .stat.num-in .stat-ul{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ .stat .unit,.stat-ul{opacity:1;transform:none;clip-path:none;transition:none} } .stat b{display:block;font:500 var(--fs-num)/.94 'Martina Plantijn',Georgia,serif; /* --track on 0: tunnuslukujen pariväli tulee leiska.js:n parikohtaisesta optisesta välistyksestä (.reel --fix), ei tasavälisestä trackingista. Tasaväli kiristi pyöreät parit (0–0, 2–0) kiinni toisiinsa ja jätti ykkösen väljäksi, koska merkkien sivulaakerit eroavat rajusti. */ --track:0;letter-spacing:var(--track);color:var(--ink);margin-bottom:.31em} /* yksikkö Magnolia-scriptillä kuten ohjeiston s. 28 nostossa (1.3 M€). top nostaa scriptin rungon numeroiden baseline-tasoon (Magnolia istuu luonnostaan baselinen alle); piirtyy vasta kelan laskeuduttua (.num-in) */ .stat b{position:relative} /* Yksikkö istuu INLINE-baselineen (sama rivi kuin numerot — luotettava kaikissa selaimissa), mutta sen laatikon leveys on 0: sisältö ylivuotaa oikealle eikä kasvata lukon leveyttä → numerot keskittyvät palstaan ja script-yksikkö saa ylittää palstarajan. ANSA joka kaadettiin: absolute + bottom laski sijainnin b:n laatikon pohjasta, jonka korkeus riippuu kelan inline-metriikasta — yksiköt hyppäsivät ylös oikeassa selaimessa vaikka headless näytti oikein. */ .stat .unit{display:inline-block;width:0;overflow:visible;white-space:nowrap; font-family:'Magnolia Cora',cursive;font-weight:400;letter-spacing:0; position:relative;vertical-align:baseline} .stat .unit-v{font-size:.58em;top:-.09em} /* pystysijainti käyttäjän vahvistama 1.9. (oli -.01em) */ .stat .unit-m{font-size:.36em;top:-.15em} /* QA-mittaus: M:n ink-alareuna ~0:n baselineen */ .stat .unit i{font-style:normal;padding-left:.24em} /* väli numeroon ilman leveysvaikutusta */ .stat .unit-m i{padding-left:0em} /* M:n alaswash kiinni 0:n kaareen — käyttäjän vahvistama 1.9. (oli .13em) */ .stat .unit{opacity:0;transform:translateY(.25em); transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} .stat.num-in .unit{opacity:1;transform:none} .stat span.lbl{display:block;margin-top:0;color:var(--ink); width:auto;max-width:min(30ch,100%);text-wrap:balance;justify-self:center; /* max-width eikä kiinteä width: selite saa olla numerolukkoa leveämpi (30ch asti), mutta sen min-content on vain pisin sana, joten se ei paisuta minmax(0,1fr)-raitaa — raidat pysyvät tasakolmanneksina */ font-size:clamp(.95rem,1.2vw,1.16rem);line-height:1.22;font-weight:400} /* kolmannen selitteen mitta kapeampi, jotta pitkä lause taittuu kahdelle riville (30ch riittäisi yhdelle — ch yliarvioi keskimääräisen merkin) */ .stats .stat:nth-of-type(1) .lbl{max-width:min(26ch,100%)} .stats .src{grid-column:1/-1;margin-top:1.4rem} /* Palvelumme-sivun johdanto (Kattis 26.9.: valkoinen osio oli irrallinen, Matti 28.9. B): kappale »…joka näkyy myös numeroissa« saa perään ne numerot. */ .stats .stats-johdanto{grid-column:1/-1;max-width:46ch;margin:0 auto clamp(1.6rem,3.5vw,3.4rem); text-align:center;font-size:var(--fs-body);line-height:1.62} /* Palvelumme-sivulla tunnusluvut valkoisella (Matti 28.9.): kansi on Aubergine ja seuraava osio Mist, joten valkoinen erottuu molemmista. Etusivulla pysyy Sun. */ .stats--valkoinen{background:var(--bg)} @media (max-width:820px){.stats .inset{grid-template-columns:1fr;justify-content:start; gap:clamp(1.8rem,6vw,3rem)}} /* ============ LOGOKELA ============ */ /* Logonauha omalla vaaleammalla Pale Sky -pinnallaan (Matti 25.9.: etusivun Ajankohtaista, logot ja asiakasarviot olivat 1850 px yhtä Pale Skyta). Oma pinta = symmetrinen osioväli; aiemmin yläreuna oli tiivis, koska nauha jatkoi Ajankohtaisten pintaa. */ .logos{background:var(--sky-50,var(--sky));transition:background .5s; padding-block:var(--sect);overflow:hidden} /* Naapurit nojasivat logonauhan väleihin samalla pinnalla: nyt pinta vaihtuu, joten kumpikin saa oman välinsä (Ajankohtaisten sisältö päättyi 72 px:n päähän reunasta @1440, asiakasarvioilla ei ollut ylämarginaalia). */ .news:has(+ .logos){padding-bottom:clamp(2rem,6vw,6rem)} .logos + .tm .inset{padding-top:var(--sect)} .logos h2{padding-inline:var(--inset);font-size:var(--fs-1);margin-bottom:clamp(2.4rem,5vw,3.8rem)} /* Jatkuva kela: väli on osa RUUTUA (margin-right), ei flex-gapia — muuten siirtymä -1/3 ei osu tasan ruutujakoon ja kela nytkähtää kierroksen vaihtuessa. Sisältö on kolme identtistä sarjaa → translateX(-100%/3) = tasan yksi sarja. */ /* Kesto skaalattu sarjaleveyden mukana (2120 → n. 1904 px 1440 px:llä), jotta vieritysnopeus pysyy samana kuin ennen tiivistämistä. */ .marquee{display:flex;gap:0;width:max-content;animation:kela 85s linear infinite} .marquee:hover,.marquee:focus-within{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .marquee{animation:none;flex-wrap:wrap;width:auto;padding-inline:var(--inset)} .marquee a[aria-hidden="true"]{display:none} .logos a{transition:background .5s,opacity .35s} .marquee a:hover,.marquee a:focus-visible{transform:none} } @keyframes kela{to{transform:translateX(calc(-100% / 3))}} /* logoruutu: wire-tilassa harmaa laatta + "LOGO", väritilassa aito logo ilman laattaa. Optinen tasapaino: leveät wordmarkit rajoittuu leveyteen, neliömäiset korkeuteen (raja-aspekti ~3,4 → accountor/terveystalo/yrittäjät leveysrajattuja) */ /* Ruutu on SISÄLLÖN levyinen, ei kiinteä. Kiinteällä 223 px:n ruudulla kapea logo (Eezy 62 px) jätti 81 px tyhjää molemmin puolin ja leveä (Terveystalo 174 px) vain 24 px — väli näytti epätasaiselta ja löysältä. Nyt jokaisen logon ympärillä on sama ilma ja rytmi on tasainen. */ .logos a{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:auto;padding-inline:clamp(.9rem,1.67vw,1.75rem); height:5.9rem;margin-right:clamp(1.6rem,3.26vw,3.5rem); background:var(--surface); color:var(--ink-2);font-size:.7rem;letter-spacing:.12em;text-decoration:none; transition:background .5s,opacity .35s,transform .38s cubic-bezier(.22,.61,.36,1)} /* Hover: logo kasvaa hillitysti. Kela pysähtyy jo hoverilla, joten kasvu on luettavissa. Skaalaus ei vaikuta asetteluun, joten naapurit pysyvät paikallaan; z-index nostaa kasvavan ruudun niiden päälle. */ .marquee a:hover,.marquee a:focus-visible{transform:scale(1.11);z-index:2} /* Optinen tasapaino: korkeus asetetaan per logo kertoimella --s, jonka arvo on MITATTU niin että jokaisen logon mustepinta-ala on sama (kierros 41). Koot +26 % kierroksella 12 (asiakkaan toive: "logot isommalla"). ANSA JOKA KORJATTIIN: aiemmin tässä oli pelkkä `max-height` + `max-width`, ja koska max-* vain KUTISTAA eikä kasvata, logo jonka oma pikselikoko oli kattoa pienempi piirtyi luonnollisessa koossaan — Varma (91×20) 20 px:nä ja Wulff (145×23) 23 px:nä. Lisäksi leveä wordmark osui leveyskattoon ja kutistui pystysuunnassa: Hasan & Partners (8,7:1) jäi 19,7 px:iin siinä missä Elisa oli 57 px. Nyt `height` kasvattaa myös, ja leveyskatto on KIINTEÄ 18rem — sitä EI kerrota --s:llä, koska --s ilmaisee korkeuden ja kertominen kutistaisi juuri ne leveät logot joita katto koskee. */ .logos a img{width:auto;height:calc(3.4rem * var(--s,1));object-fit:contain; max-width:18rem; opacity:var(--img-opacity);transition:opacity .6s} .logos a .lbl{position:absolute} .logos a{background:none} .logos a .lbl{display:none} .marquee:hover a{opacity:.45} .marquee a:hover{opacity:1} /* ANSA: .all on myös .logos a, joten se peri kelan ruudun sisäreunuksen ja alleviivaus venyi tekstin yli molemmin puolin. Nollataan reunus ja korkeus. */ .logos .all{display:inline-flex;width:max-content;height:auto;padding-inline:0; background:none;color:var(--ink); margin:clamp(3rem,5.2vw,5.2rem) var(--inset) 0;font-size:var(--fs-body);letter-spacing:normal} /* ============ AJANKOHTAISTA ============ */ .news{background:var(--sky);transition:background .5s} .news .inset{padding-block:var(--sect) clamp(2.6rem,5vw,5rem)} .news h2{font-size:var(--fs-1);margin-bottom:clamp(2.2rem,4.5vw,3.6rem)} /* pieni gutter + pyöreät kulmat (asiakkaan viitekuva) */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.3vw,1.3rem)} .card{text-decoration:none;display:block;position:relative} /* ANSA: oma display-arvo yliajaa selaimen [hidden]{display:none} -oletuksen, joten sivutuksen piilottamat kortit jäisivät näkyviin. */ .card[hidden]{display:none} .card:hover{z-index:2} /* hover: kuvapaikka kasvaa, kuva selvästi enemmän sen sisällä */ .card .ph{display:block;aspect-ratio:1/.92;margin-bottom:1.05rem; border-radius:clamp(.5rem,.85vw,.85rem); transition:transform .5s cubic-bezier(.22,.61,.36,1)} .card .ph img{transition:filter .6s,opacity .6s,transform .7s cubic-bezier(.22,.61,.36,1)} .card:hover .ph{transform:scale(1.024)} .card:hover .ph img{transform:scale(1.15)} /* rajaus kasvojen mukaan — vain etusivun kolmelle nostolle (rajattu .news-osioon, jottei sääntö osu muiden sivujen korttiruudukoihin joissa on eri kuvat) */ .news .card:nth-of-type(1) .ph img{object-position:50% 48%} .news .card:nth-of-type(2) .ph img{object-position:52% 20%} .news .card:nth-of-type(3) .ph img{object-position:72% 26%} /* Valve-artikkelin »Lue seuraavaksi« -kortti (KON_6472): nainen ja vaalea mies mahtuvat 1,09:1-korttiin vasta, kun rajaus painottuu oikealle. */ .card .type{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)} /* Listaussivuilla kortin otsikko on h2 (kortit ovat suoraan H1:n alla), etusivun nostoissa h3 (osiolla on oma h2). Sama tyyli molemmille. */ .card h2,.card h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin:.5rem 0 .55rem} .card time{font-size:.86rem;color:var(--ink-2);letter-spacing:.06em} .card:hover h2,.card:hover h3{text-decoration:underline;text-underline-offset:4px} .news .all{margin-top:2.8rem} /* display peritään .all-säännöstä (inline-flex): inline-block asemoisi nuolen tekstin baselinelle ja se osuisi eri korkeudelle kuin muissa linkeissä */ @media (max-width:880px){.news-grid{grid-template-columns:1fr}} /* KORTTIRUUDUKKO LISTAUSSIVUILLE (kierros 13): Asiakaskokemukset ja Ajankohtaista käyttävät samaa korttia kuin etusivun nostot — kuva, tyyppilabel, otsikko ja ingressi. Kuvat poimittu bookers.fi:n nykyisiltä juttusivuilta. Rivien väli on isompi kuin sarakkeiden, jotta rivit erottuvat toisistaan. */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr); column-gap:clamp(.7rem,1.3vw,1.3rem);row-gap:clamp(2.2rem,3.6vw,3.4rem)} /* listaussivujen kuvat ovat 16:9-webbikuvia → väljempi kuvasuhde kuin etusivun lähes neliömäisissä nostoissa, jotta rajaus ei leikkaa kasvoja */ .card-grid .ph{aspect-ratio:16/10} .card .lead-s{font-size:var(--fs-card);line-height:1.55;color:var(--ink-2); margin-top:.35rem;max-width:36ch} @media (max-width:880px){.card-grid{grid-template-columns:1fr}} @media (min-width:881px) and (max-width:1100px){.card-grid{grid-template-columns:repeat(2,1fr)}} /* ============ LISTAUSSIVU (WP: arkistosivu) ============ */ /* Asiakaskokemukset ja Ajankohtaista: puhdas valkoinen pinta, jolla kortit ovat ainoa elementti. Ei erillistä "3 uusinta" -nostoa värillisellä pinnalla — sisällöt ovat joka tapauksessa uutuusjärjestyksessä, joten nosto toisti ensimmäisen rivin (asiakkaan huomio kierros 16). */ .listing{background:var(--bg);transition:background .5s} .listing .inset{padding-block:clamp(3rem,6vw,6rem) var(--sect)} .listing h2{font-size:var(--fs-1);margin-bottom:clamp(2rem,4vw,3.2rem)} /* ============ SIVUTUS (WP: pagination) ============ */ /* Numeroitu sivutus "Näytä lisää" -linkin tilalle: käyttäjä näkee montako sivua sisältöä on ja voi hypätä suoraan. Nykyinen sivu on korostettu Energy-alleviivauksella, edellinen/seuraava käyttävät samaa nuolta kuin muut linkit (.arw). Kaista on erotettu hiusviivalla korttiruudukosta. */ .pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:clamp(.9rem,2vw,2rem);margin-top:clamp(2.4rem,4.5vw,4rem); padding-top:clamp(1.3rem,2.4vw,2rem);border-top:1px solid var(--line)} .pager ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.3rem} .pager li{margin:0} /* Numerot pyöreinä kohteina: nykyinen sivu on täytetty Aubergine-nappula ja muut saavat pehmeän tintti-taustan hoverissa (kierros 20 — aiempi versio oli pelkkä Energy-alleviivaus, joka luki linkin alleviivauksena eikä tilana). */ .pager ol a,.pager ol span{display:inline-flex;align-items:center;justify-content:center; min-width:2.6rem;height:2.6rem;padding:0 .5rem;border-radius:50%;text-decoration:none; font:400 var(--fs-card)/1 'DM Sans',sans-serif;letter-spacing:.01em; font-variant-numeric:tabular-nums; transition:background .28s ease,color .28s ease} .pager ol a:hover{background:var(--tint)} .pager ol [aria-current="page"]{background:var(--deep);color:var(--deep-ink)} .pager ol .gap{min-width:1.4rem;opacity:.45;background:none} /* SAAVUTETTAVUUS 2.5.8: kohde oli 102×15 px. */ .pager-step{display:inline-flex;align-items:center;min-height:24px;gap:.55em;text-decoration:none; font:700 var(--fs-card)/1 'DM Sans',sans-serif;letter-spacing:.02em} .pager-step:hover .arw::before{width:1.3em} .pager-step:hover .arw::after{transform:translate(.42em,-50%) rotate(45deg)} .pager .arw{top:0} /* keskitetty flex-rivi, ei baseline-siirtoa */ /* Nuolen pystyasema on kontekstikohtainen, koska perusarvo .043em on mitoitettu DM Sans -leipätekstin x-korkeuteen. Kaksi poikkeusta asiakkaan omilla, silmällä haetuilla arvoilla (2.9.): versaalilabel headerissa nostaa nuolta, Martina-serif valikossa laskee sitä. Sisällön nuolet (Lue lisää, Kaikki asiakaskokemukset) pysyvät perusarvossa. KIERROS 41: navin dropdownin ryhmäotsikot ovat samaa Martina-serifiä kuin hampurilaisvalikon, mutta niiltä puuttui tämä korjaus — nuoli jäi perusarvoon ja näkyi liian korkealla (asiakkaan havainto). Mitattu 1440×900, fontit ladattuina: varsi (= .arw-laatikon pystykeskipiste, koska ::before on top:50% + translateY(-50%)) vs. otsikon x-korkeuden keskikohta (baseline luodattu nollakorkuisella inline-block-elementillä, x-korkeus canvasin actualBoundingBoxAscentista): .all (DM Sans, .043em) −0,61 px ✓ hyväksytty .menu-grp (Martina, .2em) −1,00 px ✓ hyväksytty .dd-head (Martina, .043em) −4,33 px ← liian korkealla Korjaus .043 + 0,157 = .2em vie dd-headin samaan suhteeseen kuin jo hyväksytty .menu-grp — sama arvo kelpaa molemmille, koska korjaus on fonttimetriikasta johtuva ja siis suhteessa fonttikokoon. */ .hero-note .arw{top:-.05em} .menu-sub a.menu-grp .arw, .dd-panel a.dd-head .arw{top:.2em} .arw--back{transform:scaleX(-1)} .pager .is-off{opacity:.32;pointer-events:none} .pager a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Yhden sivun listauksessa sivutus piilotetaan kokonaan (asiakkaan huomio): display:flex yliajaisi selaimen [hidden]-oletuksen, siksi oma sääntö. */ .pager[hidden]{display:none} @media (max-width:560px){ .pager{justify-content:center} .pager-step span:not(.arw){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} } /* ============ PALVELUMME — korkeus 53 vw (alustava leiska) ============ */ .service{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(28rem,53vw,52rem)} .service .ph{min-height:18rem} .service .txt{display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,1.6vw,1.5rem); padding:clamp(2.6rem,7vw,7rem)} .service:nth-of-type(odd) .txt{background:var(--sun);transition:background .5s} .service:nth-of-type(even) .txt{background:var(--deep);color:var(--deep-ink)} .service:nth-of-type(even) .txt .kicker{color:inherit;opacity:.8} .service h3{font-size:var(--fs-1);max-width:20ch} .service p{max-width:42ch;opacity:.88} .service .more{display:inline-flex;align-items:center;gap:.45em;font-weight:700; text-decoration:none;border-bottom:2px solid currentColor; padding-bottom:3px;width:max-content;margin-top:.4rem} .service:nth-of-type(even) .cell-img{order:2} @media (max-width:880px){ .service{grid-template-columns:1fr;min-height:0} .service:nth-of-type(even) .cell-img{order:0} .service .ph{aspect-ratio:4/3;min-height:0} } /* ============ TYPOGRAFINEN NOSTO ============ */ .claim .inset{padding-block:var(--sect);display:grid;gap:1.4rem;justify-items:start} .claim blockquote{margin:0;font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-display);line-height:1.22;max-width:30ch} .claim .note{font-size:var(--fs-card);color:var(--ink-2);letter-spacing:.01em} /* ============ URA MEILLÄ ============ */ /* URA MEILLÄ — täysleveä kuva, teksti sen päällä */ .career{position:relative;overflow:hidden;background:var(--hero-tint);color:#fff;transition:background .5s} .career .bg{position:absolute;inset:0} .career .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%; filter:var(--img-filter);opacity:var(--img-opacity);transition:filter .6s,opacity .6s} .career .bg::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(26,18,23,.8) 0%,rgba(26,18,23,.62) 58%,rgba(26,18,23,.26) 100%)} /* teksti saa leveämmän palstan: oikea reuna gutterille, ei sisennykselle */ .career .inner{position:relative;z-index:2;padding-block:clamp(6rem,13vw,13rem); padding-right:var(--gutter);display:grid;gap:1.4rem;justify-items:start; max-width:min(70rem,82%)} .career .kicker{color:inherit;opacity:.72} .career h2{font-size:var(--fs-display);max-width:22ch} .career p{max-width:48ch;opacity:.86} @media (max-width:880px){.career .inner{max-width:none;padding-right:var(--inset)}} /* Etusivun Ura-nosto (KON_7291, Matti 23.9.): kasvot ovat kuvan keskellä ja oikealla (vaalean miehen pää 47–60 %, pitkätukkaisen kasvot 87–95 % leveydestä), ja 22ch:n otsikko ulottui 57 %:iin eli vaalean miehen päälle. Otsikko kapenee kolmelle riville ja leipäteksti samaan palstaan: tekstin oikea reuna on 43 % leveyksillä 881–1440 ja alle 40 % leveämmillä (mitattu). Tiedosto on koko lähdekuva 3:2:na, joten desktopin 1,56–3,05:1-paikassa näkyy aina koko leveys. Liike on pienempi: 1,12-skaalaus leikkaisi oikeanpuoleisen miehen poskea, 1,06 jättää 2 %:n väljyyden. Rajaus ankkuroituu ylös, jotta ultraleveä paikka leikkaa pöytää eikä päälakia; puhelimessa näkyy oikea puolisko. */ .career .px:has(img[src*="/etusivu-ura"]){--amp:.02} .career .bg img[src*="/etusivu-ura"]{object-position:50% 20%} @media (min-width:881px){ .career:has(img[src*="/etusivu-ura"]) h2{max-width:13ch} .career:has(img[src*="/etusivu-ura"]) h2 ~ p{max-width:22ch} } @media (max-width:880px){ .career .bg img[src*="/etusivu-ura"]{object-position:96% 20%} } .career .btn{background:#fff;color:var(--deep);border-color:#fff; --fill:var(--deep);--fill-ink:#fff; margin-top:clamp(.7rem,1.4vw,1.4rem)} /* palaveri 1.9.: ilmaa tekstin ja napin väliin */ /* ============ YHTEYDENOTTO ============ */ /* LOMAKE — rohkea tumma pinta, alaviivakentät, arvokas rytmi (krogerus-henki) */ .contact{background:var(--deep-2);color:var(--deep-ink);transition:background .5s} .contact .inset{padding-block:clamp(5rem,10vw,11rem);display:grid; grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,7vw,8rem);align-items:start} .contact .kicker{color:inherit;opacity:.72} /* 23.9. (Matti): yläotsikko »Ota yhteyttä« siirtyi oikeaan palstaan lomakkeen päälle, jotta vasemmassa palstassa on vähemmän eri tekstityylejä (Iiriksen lista: »Liikaa erilaisia ja erikokoisia fontteja vasemmalla palstalla«). Vasemman palstan otsikko on nyt palstan ensimmäinen, joten sen yläväli pois, jolloin otsikko ja yläotsikko alkavat samalta korkeudelta. */ .ct-lomake > .kicker{margin:0 0 clamp(1.2rem,2vw,1.8rem)} .contact .inset > div:first-child > h2:first-of-type{margin-top:0} .contact h2{font-size:var(--fs-display);margin:.9rem 0 1.6rem;max-width:22ch} .ct-body{opacity:.72;max-width:34ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)} .ct-mail{display:block;font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:clamp(1.25rem,2vw,1.9rem);text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.18em;width:max-content; transition:border-color .3s ease} .ct-mail:hover{border-bottom-color:currentColor} .ct-phone{margin-top:.9rem;opacity:.75;font-size:var(--fs-small);letter-spacing:.04em} /* yhteyshenkilö: pyöristetty neliökuva + nimi yhteystietojen yhteydessä */ .ct-person{display:flex;align-items:center;gap:clamp(1rem,1.6vw,1.4rem); margin-bottom:clamp(1.4rem,2.4vw,2rem)} .ct-avatar{position:relative;display:block;flex:0 0 auto;overflow:hidden; width:clamp(4.6rem,7vw,6.6rem);height:clamp(4.6rem,7vw,6.6rem); border-radius:clamp(.5rem,.85vw,.85rem);background:rgba(248,247,246,.14)} .ct-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 32%; filter:var(--img-filter);opacity:var(--img-opacity);transition:filter .6s,opacity .6s} /* ANSA: .ct-person span osui sekä nimikääreeseen että rooliriviin, jolloin opacity kertaantui (0.6 × 0.6 = 0.36 → 2.48:1). Valitsin rajattu ja arvo mitoitettu 4.5:1:n mukaan. */ .ct-person b{display:block;font-weight:700;letter-spacing:.01em} .ct-person > span{display:block} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,2.6vw,2.4rem) clamp(1.4rem,2.4vw,2.2rem)} .f{display:flex;flex-direction:column;gap:.55rem} .f--full{grid-column:1/-1} .f label{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.75} .f input,.f select,.f textarea{font:inherit;color:inherit;background:transparent; border:0;border-bottom:2px solid rgba(248,247,246,.42);border-radius:0;padding:.62em 0; transition:border-color .3s ease} .f textarea{resize:vertical;min-height:5.5rem} .f select{color:rgba(248,247,246,.62)} /* Alasvetovalikon vaihtoehdot piirtyvät käyttöjärjestelmän omalle vaalealle pinnalle, eivät lomakkeen tummalle Aubergine-pohjalle. Ilman omaa väriä ne perivät yllä olevan vaalean sävyn ja jäävät valkoista vasten näkymättömiin. Kattiksen havainto 15.9.2026: »Fonttiväri on vaihtunut? Nyt ei näy vaihtoehtoja.« */ .f select option{color:var(--ink);background:#fff} .f input:hover,.f textarea:hover,.f select:hover{border-bottom-color:rgba(248,247,246,.6)} .f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{ outline:0;border-bottom-color:var(--deep-ink);border-bottom-width:3px} /* tietosuojan hyväksyntä — valintaruutu, luettava tekstikoko */ .f-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:.9rem;margin-top:.6rem} /* SAAVUTETTAVUUS 2.5.8: 1.45rem = 23.2 px jäi alle 24 px:n vähimmäiskoon. */ .f-check input{appearance:none;flex:0 0 auto;width:1.5rem;height:1.5rem;margin-top:.1rem; border:2px solid rgba(248,247,246,.5);background:transparent;cursor:pointer; display:grid;place-content:center;transition:border-color .25s,background .25s} .f-check input::after{content:'';width:.72rem;height:.42rem;border-left:2.5px solid var(--deep-2); border-bottom:2.5px solid var(--deep-2);transform:rotate(-45deg) scale(0);transition:transform .2s} .f-check input:checked{background:var(--deep-ink);border-color:var(--deep-ink)} .f-check input:checked::after{transform:rotate(-45deg) scale(1)} .f-check input:focus-visible{outline:2px solid var(--deep-ink);outline-offset:3px} .f-check label{font-size:var(--fs-body);line-height:1.5;opacity:.9;cursor:pointer;max-width:44ch} .f-check a{border-bottom:1px solid rgba(255,255,255,.5)} /* uutiskirje — oma tummempi laatikko, jotta erottuu lomakkeen pinnasta */ .ct-nl{margin-top:clamp(2.4rem,5vw,4rem);max-width:27rem; padding:clamp(1.5rem,2.6vw,2.3rem);background:var(--deep); border-radius:clamp(.5rem,.85vw,.85rem);transition:background .5s} .ct-nl p{font-size:var(--fs-body);opacity:.78;margin-bottom:1.1rem} .ct-nl form{display:flex;align-items:flex-end;gap:1.2rem} .ct-nl input{flex:1;font:inherit;color:inherit;background:transparent;border:0; border-bottom:2px solid rgba(248,247,246,.42);padding:.5em 0;font-size:var(--fs-body); transition:border-color .3s} .ct-nl input::placeholder{color:rgba(248,247,246,.45)} .ct-nl input:focus-visible{outline:0;border-bottom-color:var(--deep-ink);border-bottom-width:3px} .ct-nl button{display:inline-flex;align-items:center;gap:.45em;background:none;border:0; color:inherit;cursor:pointer;padding:0 0 .4em;flex:0 0 auto; font:700 var(--fs-body)/1 'DM Sans',sans-serif;letter-spacing:.02em; border-bottom:2px solid var(--deep-ink)} .ct-nl button:focus-visible{outline:2px solid var(--deep-ink);outline-offset:4px} .contact .meta{font-size:.75rem;opacity:.5;margin-top:1.6rem;grid-column:1/-1} .contact .meta a{border-bottom:1px solid rgba(255,255,255,.4)} .contact .btn{margin-top:2rem;grid-column:1/-1;justify-self:start; background:var(--deep-ink);color:var(--deep);border-color:var(--deep-ink); --fill:var(--deep);--fill-ink:var(--deep-ink)} @media (max-width:880px){ .contact .inset{grid-template-columns:1fr;gap:clamp(2.4rem,6vw,3.4rem)} } @media (max-width:640px){.form-grid{grid-template-columns:1fr}} /* PAKOLLISEN KENTÄN MERKKI. abbr@title kertoo merkityksen ruudunlukijalle ja hiiren osoittimelle; aria-hidden pitää pelkän tähden pois ääneen luettavasta nimestä. Varsinainen selitys on lomakkeen alussa tekstinä, koska pelkkä tähti ei kerro kenellekään mitä se tarkoittaa. */ /* ANSA: lomake on aubergine-pohjalla (.contact), joten kiinteat varit eivat toimi. Ensimmainen versio kaytti --accentia ja --ink-2:ta, ja mitattu kontrasti oli 1,05 ja 1,37 eli kumpikaan ei nakynyt lainkaan. Molemmat perivat nyt ymparoivan tekstin varin, jolloin kontrasti on sama kuin kenttien nimilla. */ .form-grid label abbr{text-decoration:none;color:inherit;margin-left:.15em;opacity:.85} .form-grid .pakko{grid-column:1/-1;font-size:.82rem;color:inherit;opacity:.8;margin:0} /* ============ UUTISKIRJE — oma osio brändikuvituksella ============ */ /* Ohjeiston kuvitusesimerkkien mukainen sommittelu (vrt. "Sales is a verb" -esimerkki): Pale Sky -pinta, käsinpiirretty kuvitus omana elementtinään tekstin rinnalla. Aiemmin uutiskirje oli lomakkeen sisällä pienenä laatikkona — nyt itsenäinen moduuli, joka voidaan kytkeä päälle/pois rikkomatta rytmiä (wireframen vaatimus: "kytkettäessä ei riko sivun rytmiä"). */ /* Pinta ja kuvituksen sijoittelu mitattu esityspohjan agendasivulta (Vendre_Esityspohja_preview.pdf s. 6, 800×450 px): tausta Mist #DEDACF (EI Pale Sky) kuvitus 36,5 % leveydestä · 79,8 % korkeudesta marginaalit oikea 1,5 % leveydestä · ala 3,6 % korkeudesta Kuvitus on siis käytännössä pinnan oikeassa ALANURKASSA, ei tekstin rinnalla kelluva pikkukuvake. Web-kaista on leveämpi kuin 16:9-slide, joten mitoitus sidotaan KORKEUTEEN (kuvitus ~80 % kaistan korkeudesta) ja negatiivisilla marginaaleilla piirros vedetään ulos sisennyksestä ja pystypaddingista aivan reunojen tuntumaan. --nl-pad ja --nl-edge ovat omia muuttujia, jotta negatiiviset marginaalit pysyvät synkassa. */ .nl{background:var(--surface-2);transition:background .5s;overflow:hidden; --nl-pad:clamp(3.6rem,7vw,7rem);--nl-edge:clamp(.7rem,1.5vw,1.5rem); /* alapadding erikseen: lomakkeen alle enemmän ilmaa (asiakkaan toive), mutta kuvitus pysyy kiinni alareunassa, koska sen negatiivinen alamarginaali lasketaan samasta muuttujasta */ --nl-pad-b:clamp(6rem,11vw,11rem)} .nl .inset{padding-block:var(--nl-pad) var(--nl-pad-b); display:grid;grid-template-columns:1fr auto;align-items:center; gap:clamp(1.6rem,3vw,3.5rem)} .nl-txt{display:grid;gap:clamp(1.2rem,2.2vw,2rem);justify-items:start;max-width:38rem} .nl h2{font-size:var(--fs-1);max-width:18ch} .nl-claim{margin:0;font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-2);line-height:1.3;max-width:34ch} /* ANSA: perussääntö img{max-width:100%} kaappaa leveyden, koska negatiivinen margin-right kutistaa gridin auto-sarakkeen käytettävissä olevan leveyden → kuvitus jäi 266 px:iin vaikka width oli 446 px. max-width:none pakollinen. */ /* 24.9. (Matti): kuvitus puolitettu (34vw → 17vw), koska täysikokoisena se kilpaili otsikon kanssa; ankkurointi oikeaan alanurkkaan säilyy. */ .nl-ill{width:clamp(8rem,17vw,17rem);max-width:none;height:auto;pointer-events:none; justify-self:end;align-self:end; margin-right:calc((var(--inset) - var(--nl-edge)) * -1); margin-bottom:calc((var(--nl-pad-b) - var(--nl-edge)) * -1)} @media (max-width:880px){ .nl .inset{grid-template-columns:1fr;gap:clamp(1.8rem,4vw,2.6rem)} .nl-ill{width:clamp(7rem,30vw,11rem); margin-right:calc((var(--inset) - var(--nl-edge)) * -1); margin-bottom:calc((var(--nl-pad-b) - var(--nl-edge)) * -1)} } /* Lomake: kentän kontrasti nostettu (kierros 14). Aiemmin alaviiva oli --line (#D9D2CC) Pale Sky -pinnalla (#D5E1EA) → ero olematon ja kenttä katosi taustaan. Nyt viiva on --ink-2 ja paksumpi, teksti leipätekstin kokoinen, ja lähetys on brändin oma nappikomponentti (.btn) alaviivalinkin sijaan — selvä kohde ja riittävä kontrasti. */ .nl-form{display:flex;align-items:flex-end;gap:clamp(1rem,2vw,1.8rem);flex-wrap:wrap; width:min(100%,33rem)} .nl-form .f{flex:1 1 15rem;gap:.55rem} .nl-form label{font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink);opacity:.8} .nl-form input{font:inherit;font-size:var(--fs-body);color:var(--ink);background:transparent;border:0; border-bottom:2px solid var(--ink-2);border-radius:0;padding:.5em 0;transition:border-color .3s} .nl-form input:hover{border-bottom-color:var(--ink)} .nl-form input:focus-visible{outline:0;border-bottom-color:var(--ink);border-bottom-width:3px} .nl .btn{flex:0 0 auto;padding:1.05em 2.4em; background:var(--deep);color:var(--deep-ink);border-color:var(--deep); --fill:var(--surface-2);--fill-ink:var(--deep)} /* hover invertoi pinnan väriin */ /* Uutiskirjeen suostumus (Matti 24.9.): sama teksti ja pakollisuus kuin muissa lomakkeissa, oma rivi kentän ja napin alla. ANSA: .nl-form label ja .nl-form input ovat sähköpostikentän tyylit (versaalit, alaviiva), ja .f-check on tehty tummalle yhteysosiolle, joten molemmat palautetaan tässä vaalealle pinnalle. */ .nl-form .f-check{flex:1 1 100%;margin-top:0;gap:.75rem} .nl-form .f-check label{font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none; line-height:1.5;opacity:.85;max-width:none} .nl-form .f-check input{border:2px solid var(--ink-2);border-radius:0;padding:0;background:transparent} .nl-form .f-check input:hover{border-color:var(--ink)} .nl-form .f-check input::after{border-left-color:var(--deep-ink);border-bottom-color:var(--deep-ink)} .nl-form .f-check input:checked{background:var(--deep);border-color:var(--deep)} .nl-form .f-check input:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-width:2px} .nl-form .f-check a{border-bottom:1px solid currentColor} .nl-form .f-check abbr{text-decoration:none;margin-left:.15em;opacity:.85} /* kuten .form-grid label abbr */ /* ============ ASIAKASARVIOT (Trustmary-paikanvaraaja, WP: upotus) ============ */ /* Yksi sitaatti kerrallaan, pisteet vaihtavat. Lopullinen toteutus on Trustmaryn karuselliwidget — tämä lohko näyttää paikan ja mitoituksen. */ /* overflow-x:clip: vaihdossa sitaatit liukuvat osion reunojen yli, ja ilman leikkausta sivulle tulisi vaakavieritys. clip ei tee osiosta vierityssäiliötä; hidden on varalla selaimelle, joka ei tunne clipiä. */ .tm{background:var(--sky);transition:background .5s;overflow-x:hidden;overflow-x:clip} .tm .inset{padding-block:0 clamp(4.5rem,9vw,8.5rem);display:grid;justify-items:start} .tm-quote{display:grid;position:relative;width:min(100%,58rem); --tm-kesto:.8s;--tm-kayra:cubic-bezier(.65,0,.35,1)} /* SITAATIN VAIHTO EI SAA HYPÄYTTÄÄ SIVUA. display:none otti piilotetun sitaatin pois gridistä, jolloin ruudun korkeus oli vain näkyvän sitaatin korkeus. Sitaatit ovat 61-142 merkkiä, eli korkeus muuttui joka vaihdossa ja sivu pomppasi. Nyt kaikki sitaatit pysyvät samassa gridiruudussa ja piilotetut ovat näkymättömiä: ruutu mitoittuu PISIMMÄN mukaan ja korkeus on vakio. visibility:hidden pitää piilotetun sitaatin pois ruudunlukijalta ja sarkainjärjestyksestä, eli hidden-attribuutin merkitys säilyy. SIVUSUUNTAINEN LIUKU (Matti 23.9.): lähtevä sitaatti liukuu vasemmalle ja uusi tulee oikealta, taaksepäin päinvastoin. Suunnan ja lähtöpaikan asettaa leiska.js inline-transformilla, koska sama [hidden]-tila on sekä lähtevän loppupiste että tulevan lähtöpiste eikä CSS yksin tiedä suuntaa. Kevyt häivytys liukuman päällä, jottei sitaatti ilmesty näytön reunaan kerralla. visibility viivästyy lähtevällä koko liukuman ajan, jotta se näkyy loppuun asti, ja kääntyy tulevalla heti näkyväksi. */ .tm-item{grid-area:1/1; transition:transform var(--tm-kesto) var(--tm-kayra),opacity var(--tm-kesto) ease, visibility 0s} .tm-item[hidden]{display:block;opacity:0;visibility:hidden;pointer-events:none; transition:transform var(--tm-kesto) var(--tm-kayra),opacity var(--tm-kesto) ease, visibility 0s var(--tm-kesto)} @media (prefers-reduced-motion: reduce){ .tm-item,.tm-item[hidden]{transition:none} } .tm blockquote{margin:0;font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-2);line-height:1.4;max-width:44ch} .tm-who{display:block;margin-top:1.1rem;font-size:var(--fs-small); font-weight:700;letter-spacing:.04em} .tm-who i{font-style:normal;font-weight:400;opacity:.65;letter-spacing:.01em} .tm-nav{display:flex;gap:.6rem;margin-top:clamp(1.4rem,2.4vw,2rem);align-items:center} .tm-dot{width:.72rem;height:.72rem;border-radius:50%;border:1.5px solid var(--ink); background:transparent;padding:0;cursor:pointer;transition:background .25s ease} .tm-dot[aria-current="true"]{background:var(--ink)} .tm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ============ ARVOT — brändin numeroitu lista (1 — Otsikko) ============ */ /* Palaute 1.9.: pelkkiä otsikoita kantavat laatikot näyttivät tyhjiltä ja teksti osui reunoihin. Ohjeiston oma listanumerointi »1 — Otsikko« hiusviivoin on arvokkaampi ja skaalautuu tekstin mittaan. */ .arvot{list-style:none;margin:clamp(2.2rem,4vw,3.4rem) 0 0;padding:0} .arvot li{display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:clamp(1.1rem,2.4vw,2.2rem); padding-block:clamp(1.3rem,2.3vw,2rem); border-top:1px solid var(--line); border-top-color:color-mix(in srgb, var(--ink-2) 42%, transparent)} .arvot li:last-child{border-bottom:1px solid var(--line); border-bottom-color:color-mix(in srgb, var(--ink-2) 42%, transparent)} .arvot .anro{font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.15rem,1.8vw,1.7rem);line-height:1.2;opacity:.42; min-width:2.3em;white-space:nowrap} .arvot h3{font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.35rem,2.3vw,2.2rem);line-height:1.2;margin:0;max-width:none} /* ============ FOOTER — ohjeiston KANNEN sommittelu (s. 1) ============ */ /* Pieni metatieto vasemmalla ylhäällä + valtava wordmark alhaalla. Kannen mitat: logon ink 93,7 % sivun leveydestä, symmetriset reunat, alamarginaali 11,5 % logon ink-korkeudesta. Tässä ink = 100vw − 2 × gutter, eli logon reunat linjaavat headerin logon ja footerin sisällön kanssa. Muunnos: SVG-kehyksessä ink on 85,8 % leveydestä (tyhjä reuna 7,1 % / puoli). */ .site-footer{background:var(--deep);color:var(--deep-ink);transition:background .5s;overflow:hidden} .site-footer .foot-top{padding-block:clamp(4rem,8vw,8.5rem) clamp(2.6rem,5vw,5rem); display:grid;grid-template-columns:minmax(12rem,1fr) auto; gap:clamp(2.5rem,6vw,7rem);align-items:start} .foot-meta{display:grid;gap:.55rem;font-size:var(--fs-small);line-height:1.6} /* Himmennys koskee vain tekstiä. Menestyjät-sinetti on Kauppalehden merkki, ja palstan .62 haalistaisi sen kullan ja sinisen. */ .foot-meta > :not(.foot-award){opacity:.62} .foot-award{display:block;justify-self:start;width:auto;height:7rem; margin-top:clamp(1.4rem,2.8vw,2.4rem)} /* SINETTI YHTEYSTIETOJEN OIKEALLE (Matti 23.9.): alla se työnsi legal-rivin alas, ja 80 px:n koossa sinetin teksti oli heikkonäköiselle liian pieni. Yhteystietojen teksti on 154 px leveä (1920: 177 px). Tilaa sen oikealla: puhelimella 154-576 px, desktopissa 881-1119 px vain 38-160 px (footerin navi vie leveyden), 1120 px:stä ylöspäin riittävästi. Siksi sinetti on vieressä puhelimella ja 1120 px:stä ylöspäin; välikaistalla se jää alle, mutta suurempana. Sinetti on matalampi kuin yhteystietojen neljä riviä (219-246 px), joten rivien väli ei veny, vaikka se ulottuu niiden yli. */ @media (max-width:880px),(min-width:1120px){ .foot-meta{grid-template-columns:max-content auto;column-gap:clamp(1.5rem,3vw,3rem); justify-content:start} .foot-meta > *{grid-column:1} .foot-meta > .foot-award{grid-column:2;grid-row:1 / span 4;align-self:start;margin-top:0} .foot-meta > .foot-legal-in{grid-column:1 / -1} } @media (max-width:880px){ .foot-award{height:6rem} } @media (min-width:1120px){ .foot-award{height:clamp(7rem,9vw,9rem)} } .foot-meta b{font-weight:700;letter-spacing:.02em;opacity:1} /* legal-tiedot samassa vasemmassa palstassa — ei omaa hiusviivarivistöä */ .foot-legal-in{display:grid;gap:.45rem;margin-top:clamp(1.4rem,2.8vw,2.4rem);font-size:.74rem} .foot-legal-in .lg{display:flex;gap:1.1rem;flex-wrap:wrap} .foot-nav{display:grid;grid-template-columns:repeat(3,minmax(9.5rem,auto));gap:clamp(2rem,4vw,5rem)} .site-footer h3{font:700 .72rem/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase; margin:0 0 1.6rem;opacity:.45} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem; font-size:clamp(1.1rem,1.45vw,1.5rem)} /* SAAVUTETTAVUUS 1.4.1: linkki erottui tekstistä vasta hoverilla. */ .site-footer a{text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;padding-bottom:2px; display:inline-flex;align-items:center;min-height:24px} .site-footer a:hover{text-decoration-thickness:2px} /* Navigaatiopalstat ilman alleviivausta (Matti 24.9.: alapalvelujen jälkeen sekava). 1.4.1 koskee linkkiä leipätekstin seassa; palstassa jokainen rivi on linkki, joten alleviivaus tulee vain hoverilla ja näppäinfokuksella. Lakilinkit (.foot-legal-in) pitävät alleviivauksensa. */ .site-footer .foot-nav a{text-decoration:none} .site-footer .foot-nav a:is(:hover,:focus-visible){text-decoration-line:underline;text-decoration-thickness:1px} /* Myynnin palvelujen alapalvelut (asiakas 24.9.: kaikki alasvetovalikon palvelut alatunnisteeseen). Pienempi ja himmeämpi alalista, jottei Palvelumme-palsta paisu muita korkeammaksi ryhmäotsikoiden kokoisena. */ .site-footer ul.foot-sub{margin-top:.6rem;gap:.1rem;font-size:clamp(.88rem,.95vw,1rem);opacity:.78} /* linkin 24 px:n kosketusala säilyy */ /* valtava wordmark — ink-leveys ja alamarginaali laskettu kannen suhteista */ /* ANSA (asiakas 24.9.: alatunnisteen linkit eivät toimineet): logon kuvan läpinäkyvä yläosa ulottuu negatiivisella marginaalilla linkkien päälle, ja kuva on DOMissa niiden jälkeen, joten se otti klikkaukset. Mitattu 24.9.: lakilinkit peitossa 1024–2560 px, »Kansainvälinen kasvu« 1280 px:stä ja »Kaupallinen kasvupalvelu« 2560 px:ssä. Logo on koriste (aria-hidden). */ .foot-mark{--ink:calc(100vw - 2 * var(--gutter));--box:calc(var(--ink) / .858);pointer-events:none} .foot-mark img{display:block;width:var(--box);max-width:none;height:auto; margin-left:calc(var(--gutter) - var(--box) * .071); margin-top:calc(var(--ink) * -.085); margin-bottom:calc(var(--ink) * -.0498)} @media (max-width:880px){ .site-footer .foot-top{grid-template-columns:1fr;gap:2.8rem} .foot-nav{grid-template-columns:repeat(2,1fr)} } /* ============ KAAVIO (WP: ryhmä) — esityspohjan tyyliin ============ */ /* Pylväskaavio kuten PPT-pohjassa: Mist-pohjaiset pylväät + Aubergine-korostus, iso serif-arvo pylvään päällä, DM Sans -selite baselinen alla, Fig-label. Leiska-tilassa pylväät nousevat baselinesta porrastettuna (sama liikekieli kuin esityspohjan kaavioanimaatiossa), arvot ilmestyvät perässä. Merkintä:
Fig 01 — Selite
……
Lähde: …
--v = pylvään korkeus prosentteina sarjan suurimmasta arvosta, eli suurin pylväs saa arvon 100. .hl = Aubergine-korostuspylväs. */ /* kuvio seuraa usein suoraan leipätekstiä: otsake tarvitsee oman ilmansa */ .fig{margin:clamp(1.8rem,3.4vw,3.2rem) 0 0;max-width:46rem; display:grid;gap:clamp(.9rem,1.6vw,1.4rem); --bar:var(--surface-2);--bar-hl:#8A8680;--fig-cols:2; --fignum:clamp(1.35rem,2.3vw,2.2rem);--fignum-vali:.55rem} .fig{--bar:#BFB8BC;--bar-hl:var(--deep)} /* Aubergine 30 % -tintti + täysi Aubergine */ .fig-cap{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-2)} .fig-bars{display:grid;grid-template-columns:repeat(var(--fig-cols),1fr); column-gap:clamp(1.2rem,2.6vw,2.6rem);align-items:end; height:clamp(10rem,22vw,17rem);padding-inline:clamp(.4rem,1vw,1rem); border-bottom:1.5px solid var(--line)} /* MITTASUHTEET. Lukulappu on irrotettu pylvään pinosta, koska muuten se söisi osan siitä korkeudesta, josta --v lasketaan, ja korkeimmat pylväät kutistuisivat flexissä. MITATTU 390 px:n leveydellä: 190 ja 150 piirtyivät suhteessa 1,20 vaikka luvut ovat suhteessa 1,27. Nyt .figbar varaa lapulle padding-topin, pylvään korkeus lasketaan sen alle jäävästä sisältölaatikosta, ja lappu nostetaan absoluuttisesti täsmälleen saman verran. Molemmat päätyvät arvoon --v % × (kehys − lapun tila), joten lappu istuu pylvään päällä ja suhteet pitävät joka leveydellä. */ .figbar{position:relative;height:100%;min-width:0; padding-top:calc(var(--fignum) + var(--fignum-vali)); display:flex;align-items:flex-end;justify-content:center} .figbar i{display:block;width:min(100%,7.5rem); height:calc(var(--v) * 1%);background:var(--bar);transition:background .5s} .figbar.hl i{background:var(--bar-hl)} .figbar b{position:absolute;left:50%;transform:translateX(-50%); bottom:calc(var(--v) * (100% - var(--fignum) - var(--fignum-vali)) / 100); margin-bottom:var(--fignum-vali); font:500 var(--fignum)/1 'Martina Plantijn',Georgia,serif; letter-spacing:-.02em;white-space:nowrap} .fig-labs{display:grid;grid-template-columns:repeat(var(--fig-cols),1fr); column-gap:clamp(1.2rem,2.6vw,2.6rem);padding-inline:clamp(.4rem,1vw,1rem)} .fig-labs span{text-align:center;font-size:var(--fs-small);line-height:1.35; color:var(--ink-2);max-width:20ch;justify-self:center} .fig-src{font-size:.74rem;color:var(--ink-2);letter-spacing:.02em} /* pylväiden nousu vain leiska-tilassa; wireframe on staattinen */ .fig.reveal .figbar i{transform:scaleY(0);transform-origin:bottom center; transition:transform .95s cubic-bezier(.16,.84,.28,1)} .fig.reveal .figbar b{opacity:0;transition:opacity .6s ease} .fig.reveal .figbar:nth-child(2) i{transition-delay:.12s} .fig.reveal .figbar:nth-child(3) i{transition-delay:.24s} .fig.reveal .figbar:nth-child(4) i{transition-delay:.36s} .fig.reveal .figbar:nth-child(1) b{transition-delay:.55s} .fig.reveal .figbar:nth-child(2) b{transition-delay:.67s} .fig.reveal .figbar:nth-child(3) b{transition-delay:.79s} .fig.reveal .figbar:nth-child(4) b{transition-delay:.91s} .fig.reveal.in .figbar i{transform:none} .fig.reveal.in .figbar b{opacity:1} @media (prefers-reduced-motion:reduce){ .fig.reveal .figbar i{transform:none;transition:none} .fig.reveal .figbar b{opacity:1;transition:none} } /* tumman pinnan variantti (esim. .pagehead/.contact-osioihin) */ .fig--deep{--bar:rgba(248,247,246,.28);--bar-hl:var(--deep-ink)} /* ============ DONITSIKAAVIO — esityspohjan tyyli ============ */ /* MITAT PURETTU esityspohjan omasta kaaviosta (Vendre_Esityspohja_esimerkit.pptx, chart2.xml + slide 16): reikä holeSize 62 % halkaisijasta → maskin säde 31 % aloituskulma 0° (klo 12) myötäpäivään segmentit Aubergine #3B2535 → Energy #2F3CC2 → Pale Sun #FFEDB5 → Pale Sky #D5E1EA, valkoinen ohut erotin väliin keskellä iso serif-luku + yksikkö scriptillä + pieni DM Sans -selite legenda VASEMMALLA, pienet neliömerkit, DM Sans 12 pt, ja kategorianimessä on prosentti mukana ("Kategoria 40 %") KÄYTTÖSÄÄNTÖ: donitsi kelpaa VAIN datalle joka on osuus kokonaisuudesta. Erillisiä tutkimuslukuja (esim. 19 % / 15 % / 32 %) EI saa esittää donitsina — ne eivät summaudu sadaksi eivätkä ole saman kokonaisuuden osia; niille .fig-pylväät. Yhden osuuden donitsissa (esim. »90 % projekteista») legenda jätetään pois: keskiluku ja selite kertovat sisällön, ja »loput 10 %» olisi turha rivi. */ @property --dv{syntax:'';inherits:false;initial-value:0} .fig--donut{--d-fill:#8A8680;--d-rest:var(--surface-2);--d-line:var(--bg); --d-size:clamp(9.5rem,19vw,16rem)} .fig--donut{--d-fill:var(--deep);--d-rest:var(--sky);--d-line:#fff} .donut-wrap{position:relative;width:var(--d-size);height:var(--d-size);flex:0 0 auto} .donut{--dv-target:0;--dv:var(--dv-target);--d-gap:.55; width:100%;height:100%;border-radius:50%; background:conic-gradient( var(--d-fill) 0 calc((var(--dv) - var(--d-gap)) * 1%), var(--d-line) calc((var(--dv) - var(--d-gap)) * 1%) calc(var(--dv) * 1%), var(--d-rest) calc(var(--dv) * 1%) calc((100 - var(--d-gap)) * 1%), var(--d-line) calc((100 - var(--d-gap)) * 1%) 100%); /* ANSA: radial-gradientin oletus on farthest-corner, jolloin 100 % = puoli DIAGONAALIA (0,707 × leveys) eikä säde → 31 % antoi 44 %:n reiän 62 %:n sijaan. closest-side sitoo 100 %:n donitsin säteeseen, joten reiän halkaisija = pysähdysarvo suoraan (62 % = esityspohjan holeSize). */ -webkit-mask:radial-gradient(circle closest-side,transparent 0 62%,#000 62.3%); mask:radial-gradient(circle closest-side,transparent 0 62%,#000 62.3%); transition:background .5s} /* Keskisisältö on donitsin SISAR, ei lapsi — maski leikkaisi sen pois. GEOMETRIA-ANSA: reikä on YMPYRÄ, joten käyttökelpoinen leveys kapenee keskeltä poispäin. Neliömäinen tekstilohko mahtuu vain sisään piirretyn neliön verran = 0,707 × reiän halkaisija → padding (100 − 62 × 0,707) / 2 ≈ 28 %, ei 19 %. Reikään kuuluu siksi VAIN luku + yksi lyhyt sana (esityspohjassa "Kokonaismyynti"); varsinainen selitelause tulee donitsin viereen .donut-note-elementtiin. */ .donut-mid{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.2em;text-align:center; padding:0 28%;pointer-events:none} .donut-mid b{display:block; font:500 calc(var(--d-size) * .175)/1 'Martina Plantijn',Georgia,serif; letter-spacing:-.02em;color:var(--ink);white-space:nowrap} .donut-mid .unit{font-family:'Magnolia Cora',cursive;font-size:.52em; letter-spacing:0;margin-left:.08em} /* SAAVUTETTAVUUS: suhteellinen koko putosi kapealla näytöllä 8 px:ään. */ .donut-mid span{font-size:max(.78rem,calc(var(--d-size) * .052));line-height:1.25; color:var(--ink-2);white-space:nowrap} .donut-note{font-size:var(--fs-card);line-height:1.55;max-width:26ch;color:var(--ink)} .fig--donut .fig-bars{display:flex;align-items:center;gap:clamp(1.4rem,3.5vw,3.5rem); height:auto;border-bottom:0;padding:0} /* legenda (≥3 segmenttiä): vasemmalla kuten esityspohjassa */ .donut-key{display:grid;gap:.55rem;font-size:var(--fs-small);line-height:1.3} .donut-key span{display:flex;align-items:center;gap:.6em;color:var(--ink)} .donut-key i{flex:0 0 auto;width:.62em;height:.62em;background:var(--k,var(--d-fill))} /* nousu vain leiska-tilassa: kaari pyyhkäistyy klo 12:sta myötäpäivään */ .fig--donut.reveal .donut{--dv:0; transition:--dv 1.15s cubic-bezier(.16,.84,.28,1),background .5s} .fig--donut.reveal .donut-mid b, .fig--donut.reveal .donut-mid span{opacity:0;transition:opacity .6s ease .5s} .fig--donut.reveal.in .donut{--dv:var(--dv-target)} .fig--donut.reveal.in .donut-mid b, .fig--donut.reveal.in .donut-mid span{opacity:1} @media (prefers-reduced-motion:reduce){ .fig--donut.reveal .donut{--dv:var(--dv-target);transition:none} .fig--donut.reveal .donut-mid b, .fig--donut.reveal .donut-mid span{opacity:1;transition:none} } @media (max-width:680px){ .fig--donut .fig-bars{flex-direction:column;align-items:flex-start; gap:clamp(1.2rem,4vw,1.8rem)} } .fig--deep .fig-cap,.fig--deep .fig-labs span,.fig--deep .fig-src{color:inherit;opacity:.78} .fig--deep .fig-bars{border-bottom-color:rgba(248,247,246,.35)} /* ============ SISÄLLÖN SUODATUS / JÄRJESTYS ============ */ /* Ajankohtaista-sivun suodatus oli murupolkutyylinen minirivi 50 %:n läpinäkyvyydellä eikä lukenut hallintalaitteeksi (asiakas kierros 20: "Saako artikkelien sorttauksesta näkyvämmän?"). Nyt pillerinapit, joissa valittu on täytetty. Sijaitsee tummalla .pagehead-pinnalla, joten värit tulevat --deep-ink-tokenista. */ /* SUODATA-TEKSTI OMALLE RIVILLEEN, PILLERIT YHDELLE (Matti 23.9.). Mitattu DM Sansin metriikasta: neljä pilleriä on 1280 px:n näytöllä 442 px ja puolikas palsta 411 px, eli ne eivät mahdu yhdelle riville kaikilla leveyksillä. 1440 px:stä ylöspäin mahtuvat. Siksi rivi ei rivity vaan vierittyy, jolloin »yhdellä rivillä« pitää joka leveydellä. Vierityspalkki piilotetaan: pillerit ovat myös näppäimistöllä, ja fokus vierittää rivin itsestään. */ .filters{display:block;width:100%;margin-top:clamp(1.2rem,2.4vw,2rem)} .filters .lbl{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;opacity:.7;margin:0 0 .6rem} .filters .chips{display:flex;gap:.45rem;align-items:center; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; /* Fokusrengas (outline 2px + offset 3px) piirtyy pillerin ulkopuolelle, ja overflow-x:auto tekee rivistä leikkaavan säiliön myös pystysuunnassa. Pehmuste antaa renkaalle tilaa ja negatiivinen marginaali kumoaa sen, joten asettelu ei liiku. scroll-padding pitää fokusoidun pillerin reunan häivytyksen (2,5rem) ulkopuolella. */ padding:5px 0 5px 5px;margin:-5px 0 -5px -5px;scroll-padding-inline:5px 2.5rem; /* Ilman tätä rivin 440 px min-content-leveys leviää .pagehead-gridin raiteeseen (483 px), ja 375 px:n näytöllä koko otsikko-osio leikkautuu oikealta. */ contain:inline-size} .filters .chips::-webkit-scrollbar{display:none} /* Rivi mahtuu palstaan noin 1265 px:stä ylöspäin. Kapeammalla se vierii, ja oikean reunan häivytys kertoo, että pillereitä on lisää. leiska.js lisää .vierii-luokan vain kun rivi oikeasti ylittää palstan, jotta häivytys ei syö mahtuvan rivin viimeistä pilleriä. */ .filters .chips.vierii{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)} .filters .chips.vierii.lopussa{-webkit-mask-image:none;mask-image:none} /* Pinotulla kannella rivi jatkuu näytön reunaan asti, niin vieritys tuntuu luontevalta eikä pilleri katkea keskelle sisennystä. */ @media (max-width:880px){ .filters .chips{margin-right:calc(-1 * var(--inset));padding-right:var(--inset)} } .filters a{flex:0 0 auto;white-space:nowrap} .filters a,.filters .chips > span{display:inline-flex;align-items:center; padding:.52em .8em;border-radius:2rem;text-decoration:none; font:400 var(--fs-card)/1 'DM Sans',sans-serif;letter-spacing:.01em; border:1.5px solid rgba(248,247,246,.32);color:inherit; transition:background .28s ease,border-color .28s ease,color .28s ease} .filters a:hover{border-color:var(--deep-ink)} .filters [aria-current="page"]{background:var(--deep-ink);color:var(--deep); border-color:var(--deep-ink);font-weight:700} .filters a:focus-visible{outline:2px solid var(--deep-ink);outline-offset:3px} /* vaalealla pinnalla (jos moduuli siirretään) */ .listing .filters a,.prose .filters a{border-color:var(--line)} .listing .filters a:hover,.prose .filters a:hover{border-color:var(--ink)} .listing .filters [aria-current="page"],.prose .filters [aria-current="page"]{ background:var(--deep);color:var(--deep-ink);border-color:var(--deep)} /* Leiskassa suodatin on kannessa, WP:ssa listauslohko piirtää sen korttien yläpuolelle. .filters-säännössä on vain yläväli, joten ruudukko alkoi kiinni pillereistä (25.9.). Väli ruudukkoon sama kuin listauksen otsikolla. */ .listing .filters{margin-top:0;margin-bottom:clamp(2rem,4vw,3.2rem)} /* ============ SISÄLTÖPAIKANVARAAJA (ei valetekstiä) ============ */ /* Latinankielinen valeteksti poistettiin sivustolta kokonaan (asiakkaan toive): se näyttää sisällöltä ja asiakas joutuu lukemaan sen huomatakseen ettei se ole sisältöä. Tilalla on neutraalit rivipalkit, jotka näyttävät tekstin MASSAN teeskentelemättä olevansa tekstiä; viereinen punainen .wnote kertoo mitä kohtaan tulee. Rivien määrä = -elementtien määrä. Leveydet vaihtelevat, jotta massa näyttää kappaleelta eikä palkkiryhmältä. */ /* width:100% on pakollinen: paikanvaraaja on prosenttileveä, joten justify-items:start -gridissä (.claim, .pagehead) se kutistuisi nollaan. */ .ph-text{display:grid;gap:.62em;margin:0;max-width:52ch;width:100%} .ph-text span{display:block;height:.6em;border-radius:.3em; background:var(--ink);opacity:.13} .ph-text span:nth-child(2n){width:94%} .ph-text span:nth-child(3n){width:87%} .ph-text span:nth-child(4n){width:97%} .ph-text span:last-child{width:52%} .ph-text + .ph-text{margin-top:1.05em} /* tummalla pinnalla (pagehead, lomake) palkit vaalenevat */ .pagehead .ph-text span,.contact .ph-text span{background:var(--deep-ink);opacity:.22} /* ingressin kokoinen variantti: harvempi ja paksumpi rivi */ .ph-text--lead span{height:.78em;border-radius:.39em;gap:.7em} .ph-text--lead{gap:.72em;max-width:32ch} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.8em 1.3em;z-index:99} .skip:focus{left:0} /* ============ FOKUS: YLEINEN VARARENGAS ============ Kortit, .all/.more-linkit, murupolku, footer ja puhelinlinkit nojasivat selaimen oletusrenkaaseen. currentColor toimii sekä vaalealla että tummalla pinnalla, ja valkoinen apurengas erottaa sen tummasta tekstistä. */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid currentColor;outline-offset:3px;border-radius:2px} .card:focus-visible,.sub-card:focus-visible{outline-offset:5px} /* tummalla pinnalla currentColor on vaalea, joten rengas näkyy sellaisenaan */ @media (forced-colors:active){ a:focus-visible,button:focus-visible{outline:2px solid Highlight} } /* ============ SISÄSIVUN OTSIKKO-OSIO (WP: kansi) ============ */ /* Navi on läpinäkyvä ja valkoinen, joten sisäsivun yläosa on tumma pinta, jonka yläpadding varaa tilaa navipalkille. */ /* Kuvattomalle kannelle sama pohja kuin jaetulle: sisältö kannen alla laskee samalle korkeudelle, mutta pilkottaa aina näytön alareunasta. */ .pagehead{position:relative;background:var(--deep);color:var(--deep-ink); transition:background .5s;overflow:hidden} .pagehead:not(.pagehead--split){min-height:min(80svh, 60rem)} .pagehead .inset{position:relative;z-index:2; padding-block:calc(var(--nav-h) + clamp(2.5rem,5.5vw,5.5rem)) clamp(4rem,8.5vw,8.5rem); display:grid;gap:clamp(1.2rem,2.2vw,2rem);justify-items:start} .pagehead .kicker{color:inherit;opacity:.62} .pagehead h1{font-family:'Martina Plantijn',Georgia,serif;font-weight:500;line-height:1.1; font-size:var(--fs-display);max-width:18ch;margin:0;text-wrap:balance} .pagehead .lead{font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-2);line-height:1.34;max-width:32ch;opacity:.88} .pagehead .rule{opacity:.45} /* murupolku */ /* SAAVUTETTAVUUS: opacity .5 pudotti murupolun 2.17:1:een vaalealla pinnalla. Himmennys on nyt pintakohtainen ja mitoitettu 4.5:1:n mukaan. Linkeissä on pysyvä alleviivaus, koska pelkkä väri ei erottanut niitä tekstistä (1.4.1). */ .crumbs{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center; font-size:var(--fs-small);letter-spacing:.04em} .pagehead .crumbs,.hero .crumbs{opacity:.78} .crumbs a{text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;padding-bottom:1px; display:inline-flex;align-items:center;min-height:24px} .crumbs a:hover{text-decoration-thickness:2px} /* ============ ALASIVUKORTIT (WP: sarakkeet) ============ */ .subs{background:var(--surface-2);transition:background .5s} /* Mist-pinta, jotta vaaleat kortit erottuvat */ .subs .inset{padding-block:var(--sect)} .subs h2{font-size:var(--fs-1);margin-bottom:clamp(1rem,2vw,1.6rem)} /* ryhmäotsikko henkilölistassa (Johtoryhmä, Myynnin johto, …) — ei oma otsikkotaso vaan silmäiltävä väliotsake, jotta 17 korttia jäsentyy */ .subs .grp-lbl{font:700 .74rem/1.4 'DM Sans',sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-2); margin:clamp(1.8rem,3vw,2.6rem) 0 clamp(.7rem,1.2vw,1rem)} .subs h2 + .grp-lbl{margin-top:0} /* ingressi leadin kokoisena (24.9.): --fs-2 oli yhden rivin iskulauseen mitta, ja kahden kappaleen ingressit (Palvelumme, Myynnin palvelut) paisuivat seinäksi */ .subs .body{font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-lead);line-height:1.45;max-width:44ch; margin-bottom:clamp(2.4rem,4.5vw,4rem)} .subs .body:has(+ .body){margin-bottom:.8em} /* ingressin jälkeinen kappale leipätekstinä (Palvelumme 24.9., Matti). Luokka pysyy myös .body:nä, jotta WP-muunnin (tee_subs) ottaa kappaleen mukaan ingressikenttään eikä teksti katoa; tyyli palautetaan leipätekstiksi. */ .subs .body.leipa{font-family:inherit;font-style:normal;font-size:var(--fs-body); line-height:1.62;max-width:52ch} .subs .body:has(+ .leipa){margin-bottom:1.1em} .sub-grid{display:grid;grid-template-columns:repeat(3,1fr); column-gap:clamp(.7rem,1.3vw,1.3rem);row-gap:clamp(.7rem,1.3vw,1.3rem)} /* henkilökorttien riveille enemmän ilmaa: kuva tekee kortista korkean, joten tiukka pystyväli sitoi rivit yhteen möykyksi (asiakkaan huomio) */ .sub-grid:has(.hlo){row-gap:clamp(1.8rem,3.4vw,3.4rem)} .sub-card{--sc-pad:clamp(1.6rem,2.6vw,2.4rem);--sc-r:clamp(.5rem,.85vw,.85rem); display:flex;flex-direction:column;gap:.6rem;text-decoration:none; padding:var(--sc-pad);background:var(--bg); border-radius:var(--sc-r);overflow:hidden; transition:background .35s ease,color .35s ease} .sub-card:hover{background:var(--deep);color:var(--deep-ink)} /* ryhmä jossa on vain yksi palvelu: boksi saa kaksi kolmesta palstasta */ .sub-card--wide{grid-column:span 2} .sub-card--wide p{max-width:52ch} @media (max-width:880px){.sub-card--wide{grid-column:auto}} /* vierekkäisten .subs-ryhmien vuorottelu: joka toinen Linen-pinnalla, jotta väliotsikolliset ryhmät erottuvat toisistaan */ /* Osion tunnuskuvitus otsikon rinnalla. EI korteille: brändin kuvitussarja kuvaa myyntityön tilanteita (tuoli, kahvi, kalenteri, hauis), ei arvoja, joten viidestä arvosta vain yksi saisi osuvan motiivin. */ .subs .subs-head{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:end;column-gap:clamp(2rem,5vw,5rem)} .subs .subs-head > div{min-width:0} .subs .subs-head h2{margin-bottom:clamp(1rem,2vw,1.6rem)} .subs .subs-head .body{margin-bottom:0} .subs-ill{display:block;grid-column:2;align-self:end;pointer-events:none; width:clamp(7rem,14vw,12rem);max-width:none;height:auto; margin-bottom:-.35rem} /* piirroksen alareunan optinen tasaus */ @media (max-width:760px){ .subs .subs-head{grid-template-columns:1fr} .subs-ill{grid-column:1;justify-self:start;margin:1.2rem 0 0; width:clamp(6.5rem,26vw,9rem)} } .subs--alt{background:var(--surface)} .subs--alt .sub-card{background:var(--surface-2)} .subs--alt .sub-card:hover{background:var(--deep)} /* Vaihtoehtokortti, joka EI ole linkki: sama laatikko, mutta ei hoveria. Kaytossa kun yhden palvelun sisalla esitetaan useita vaihtoehtoja (Kaupallinen kokonaisuus), jolloin jokaiselle ei ole omaa sivua. ANSA: .subs--alt .sub-card:hover on yhta tarkka kuin .subs--alt .sub-card--static:hover, joten naiden on oltava sen JALKEEN tiedostossa. Aiemmin ylempana ne havisivat hiljaa. */ .sub-card--static:hover{background:var(--bg);color:inherit} .subs--alt .sub-card--static:hover{background:var(--surface-2);color:inherit} /* staattiset kortit valkoisella tekstialueella (Kaupallinen kasvupalvelu, 24.9.): sama Mist-kortti kuin Palvelumme-sivulla; .prose h3 + p -väli ei koske korttia, koska kortin gap hoitaa otsikon ja tekstin välin */ .prose .sub-card,.prose .sub-card--static:hover{background:var(--surface-2);color:inherit} .prose .sub-card h3 + p{margin-top:0} /* h2 TAI h3 sivun hierarkian mukaan: palvelut.html-sivulla kortit ovat

Myynnin palvelut

:n alla eli h3, mutta myynnin-palvelut.html-sivulla ne ovat h1:n suoria alikohtia eli h2. Ilman tätä myynnin-palvelut hyppäsi h1 → h3. */ .sub-card h3,.sub-card h2{font-size:clamp(1.1rem,1.6vw,1.45rem);max-width:16ch} /* Staattisten korttien otsikot enintään kahdelle riville (asiakas 24.9.: »Kaupallinen kokonaisuus palveluna« ja »CDR yhdistää markkinoinnin ja myynnin« rivittyivät kolmelle kaikilla leveyksillä). 16ch oli 226 px @1440, kortin sisäleveys 259 px, ja pisin rivi »markkinoinnin ja myynnin« on 273 px 23 px:n koolla. 1,45vw mahtuu 1180–1920 px:n leveyksillä (mitattu 24.9.); alle 1180 px kolme kapeaa saraketta rivittää yhä kolmelle. */ .sub-card--static h3{max-width:none;font-size:clamp(1.1rem,1.45vw,1.45rem)} .sub-card p{font-size:var(--fs-card);line-height:1.55;opacity:.78;max-width:34ch} .sub-card .more{margin-top:auto;padding-top:clamp(1.2rem,2vw,1.8rem); border-bottom:0;font-weight:700;display:inline-flex;align-items:center;gap:.45em} /* HENKILÖKORTTI: rintakuva kortin yläosassa, sen alle nimi, rooli ja numero. 23.9.: uudet studiokuvat rajataan rintakuviksi samalla säännöllä kuin myyntiesityksen pelaajakortit (_tyokalut/tee_henkilokuvat.py). 16:9 ei kanna rintakuvaa (kasvot jäisivät pieniksi keskelle), joten paikka nostettiin 4:3:ksi ja tiedostot ovat valmiiksi 4:3 (800 × 600). */ /* Kuva ulottuu kortin reunoihin (asiakkaan leiska): negatiiviset marginaalit kumoavat kortin paddingin, ja pyöristys seuraa kortin ylänurkkia. */ .sub-card .hlo{display:block;position:relative;overflow:hidden;aspect-ratio:4/3; margin:calc(var(--sc-pad) * -1) calc(var(--sc-pad) * -1) clamp(1.1rem,1.9vw,1.7rem); border-radius:var(--sc-r) var(--sc-r) 0 0;background:var(--surface-2)} .sub-card .hlo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%; filter:var(--img-filter);opacity:var(--img-opacity); transition:filter .6s,opacity .6s,transform .5s cubic-bezier(.22,.61,.36,1)} .sub-card:hover .hlo img{transform:scale(1.035)} /* ANSA: vaalea 16 %:n peite oli kirjoitettu tummalle kortille. Kuvakortti pysyy hoverissa vaaleana, joten peite pesi laatan valkoiseksi. Laatta pidetään paikallaan; hover-vihje on kuvan skaalaus. */ /* henkilökortti on tietokortti, ei linkki: ei tummaa hoveria koko kortille */ .sub-card:has(.hlo){gap:.45rem} .sub-card:has(.hlo):hover{background:var(--bg);color:inherit} .sub-card:has(.hlo) h3{font-size:clamp(1.15rem,1.5vw,1.5rem);max-width:20ch} .sub-card:has(.hlo) p{opacity:.72} .sub-card:has(.hlo) p a{color:inherit;min-height:24px; display:inline-flex;align-items:center;border-bottom:1px solid currentColor; padding-bottom:1px;text-decoration:none} .sub-card:has(.hlo) p a:hover{border-bottom-width:2px} @media (max-width:880px){.sub-grid{grid-template-columns:1fr}} /* typografinen nosto Pale Sun -pinnalla */ .claim--sun{background:var(--sun);transition:background .5s} /* SITAATTIEN KOKO — YLEINEN ASETUS. Sitaatti on reilusti otsikkokokoa pienempi: --fs-2 (36 px @1440), ei --fs-display (62 px). Tämä oli aiemmin vain .claim--quote-variantti ura-sivulla, ja siksi sama vika toistui joka kerta kun uusi sitaattinosto tehtiin. Nyt se on moduulin oletus. Rajaus on .claim--sun, EI .claim: pelkkä .claim on brändin oma väite, ja se saa pysyä display-koossa. Ainoa esiintymä on index.html:ssä kommentin sisällä (»Vendre on verbi«, moduuli tallessa mutta ei etusivulla), joten sääntö koskee vain sitä jos moduuli otetaan joskus käyttöön. .claim--sun on sivuston sitaattimoduuli, ja sen neljä esiintymää ovat kaikki pitkiä sitaatteja: asiakastarina, Bassadone, myyntivalmennus ja ura. .claim--quote jää valitsimeen, jottei ura-sivun luokka jää kuolleeksi merkinnäksi. .claim--ill (palvelut) mitoitetaan erikseen ohjeiston sommittelusta, eikä tämä sääntö kosketa sitä. Sitaatin max-width on 46ch eikä 30ch: 30ch on väitteen mitta, ja pitkä sitaatti kapenisi siitä turhan korkeaksi palstaksi. */ .claim--sun blockquote,.claim--quote blockquote{ font-size:var(--fs-2);line-height:1.4;max-width:46ch} /* ============ KUVITUSNOSTO — ohjeiston "Sales is a verb" -sommittelu ============ */ /* MITAT MITATTU ohjeiston s. 43 oikeasta yläpaneelista (2000×1054 px, aspekti 1,90): väite x 5,1–38,2 % · baseline 54,7 % korkeudesta kuvitus x 42,1–76,1 % · leveys 34,0 % · korkeus 86,5 % · ALAMARG 6,4 % logo x 78,4–95,0 % · leveys 16,6 % · baseline 54,8 % · OIKEA MARG 5,0 % KAKSI RATKAISEVAA HAVAINTOA: (1) kuvitus on ANKKUROITU pinnan alareunaan (6,4 %) — siksi se ei leiju; (2) logon baseline on TÄSMÄLLEEN sama kuin väitteen baseline (54,7 / 54,8 %). Toteutus: kolme palstaa (väite | kuvitus | logo). Kuvitus align-self:end + negatiivinen alamarginaali vetää sen ulos pystypaddingista alareunan tuntumaan. Logo ja väite baseline-linjataan gridin baseline-kohdistuksella: logo-SVG:n ink-baselinen alle jää vain 1,06 % kehyksen leveydestä, joten kuvan alareunan kohdistaminen tekstin baselineen antaa ~2 px tarkkuuden. Väitteen vasen reuna pidetään sivun --inset-linjassa (esimerkissä 5,1 % on irrallisen mainosgrafiikan marginaali); logo asettuu --gutter-reunaan. */ .claim--ill{background:var(--sky);transition:background .5s;overflow:hidden; --ci-ill0:clamp(10rem,27.2vw,29rem); /* kuvituspaikan leveys (ohjeisto s. 43) */ /* Hauis 0,77 × paikasta: sen muste täyttää kuvan reunasta reunaan, kun vanhan kuvituksen muste vetäytyi logon korkeudella 0,77:ään. Näin ryhmän leveys pysyy ennallaan eikä väite liu'u sivun reunuksen alle (ks. .mark). */ --ci-ill:calc(var(--ci-ill0) * .77); /* kuvituksen leveys */ --ill-h:calc(var(--ci-ill) * 996 / 900); /* kuvituksen korkeus, hauis 900x996 */ --ci-fs:clamp(1.7rem,4.1vw,3.9rem); /* väitteen pistekoko */ --ci-mark:clamp(6rem,14.7vw,18.4rem)} /* logon leveys */ /* ============================================================ ASETTELU (asiakkaan leiska, kierros 24) — kaikki mitattuna: RIVI 1: väite | kuvitus | logo RIVI 2: täsmennys + linkit Kuvitus jatkuu molempien rivien yli, joten teksti asettuu sen VIEREEN eikä alle. Ryhmä on oikeassa reunassa (justify-content:end), jolloin ylijäämä menee VASEMMALLE — aiemmin ylijäämä oli tekstipalstan sisällä, ja siksi väitteen ja kuvituksen väliin jäi satoja pikseleitä tyhjää. LOGON JA VÄITTEEN BASELINE samalle riville lasketaan, ei arvata: MITATTU SELAIMESSA, ei laskettu fonttitaulukoista: väitteen baseline laatikon yläreunasta = 0,9205 × fonttikoko (mitattu nollakorkuisella inline-block-koettimella, joka asettuu tasan tekstin baselinelle; fontBoundingBoxAscent yliarvioi 6,3 px) logon ink-baseline kuvan yläreunasta = 0,295 × kuvan leveys (logo-SVG piirretty canvasille ja etsitty viimeinen musterivi; aiempi laskennallinen 0,324 oli 3 px väärässä) → logon margin-top = 1,0215 × --ci-fs − 0,295 × --ci-mark (+ sama yläsiirto kuin väitteellä) PYSTYSIJAINTI: kuvitus täyttää kaistasta 91 % (ilmaa ylhäällä 6 %, alhaalla 3 % kuvituksen korkeudesta), ja väitteen laatikon yläreuna on 34,5 % kuvituksen korkeudesta sen yläreunasta — silloin väitteen baseline osuu leiskan mukaisesti n. 44 %:iin kaistan korkeudesta. VÄLIT asiakkaan leiskasta, skaalattuna kuvituksen leveyden suhteen: väite→kuvitus 2,13 vw, kuvitus→logo 0,95 vw (logon SVG:n oma 7,15 % sisätyhjä vähennetty) ja logon ink oikeasta reunasta 10,9 vw. ANSA: gridissä PROSENTTIMARGINAALI laskee oman GRID-ALUEEN leveydestä, ei containerin — 3,72 % antoi 16 px eikä 74 px. Siksi vw. ============================================================ */ .claim--ill .inset{padding-block:0; padding-left:var(--gutter); padding-right:calc(11.6vw - var(--ci-mark) * .0715); display:grid;grid-template-columns:auto auto auto;align-items:start; justify-content:end;gap:0} /* Leveällä näytöllä (≥1700 px, jossa kuvituksen ja logon clampit ovat jo maksimissaan eikä ryhmä enää kasva) ryhmä keskitetään; kapeammalla se pysyy oikeassa marginaalissa kuten ohjeiston paneelissa. padding-right vähentää logon SVG:n sisäisen tyhjän (7,15 %), jotta MUSTE on keskellä. */ @media (min-width:1700px){ .claim--ill .inset{justify-content:center; padding-left:var(--gutter);padding-right:calc(var(--gutter) - var(--ci-mark) * .0715)} } /* Tekstipalsta on YKSI pinottu palsta (väite, täsmennys, linkit), jolloin väitteen ja täsmennyksen väli on suoraan gridin gap — aiemmin kuvitus venytti rivin 1 korkeaksi ja täsmennys valui 180 px alas. */ .claim--ill .ci-txt{grid-column:1;display:grid;justify-items:start; gap:clamp(1.3rem,2.6vw,3.2rem); margin-top:calc(var(--ill-h) * .345)} .claim--ill blockquote{margin:0; font-family:'Martina Plantijn',Georgia,serif;font-style:normal;font-weight:500; white-space:nowrap;font-size:var(--ci-fs);line-height:1.12;max-width:none} .claim--ill .ill{grid-column:2;align-self:start; width:var(--ci-ill);max-width:none;height:auto;pointer-events:none; margin:calc(var(--ill-h) * .06) 0 calc(var(--ill-h) * .03); margin-left:2.25vw} /* LOGON ETÄISYYS mitataan kuvituksen MUSTEESTA, ei kuvalaatikosta. Alkuperäinen mitoitus oli tehty kuvitukselle kuvitus-myyntityo (690x820): sen muste päättyi logon korkeudella 0,77 × kuvan leveys, ja negatiivinen marginaali -2,35vw poisti tyhjän. Musteväli logoon oli 0,16 × kuvituspaikka. 23.9. HAUIS (900x996): oikeanpuoleinen säde ulottuu logon korkeudella kuvan reunaan asti, ja vanhalla marginaalilla säde osui logon v-kirjaimeen (-24 / -29 / -33 / -44 px leveyksillä 1024 / 1280 / 1440 / 1920). Pelkkä logon siirto oikealle levensi ryhmää 0,25 × paikka, ja väite liukui vasemman reunan yli (osio on overflow:hidden, joten se leikkautui). Ratkaisu mitattiin selaimessa kolmesta vaihtoehdosta: hauis 0,77 × paikka ja musteväli 0,14 × paikka. Ryhmän leveys on sama kuin ennen (väitteen vasen reuna 56 / 88 px leveyksillä 1024 / 1440, ennen 56 / 87), ja välit väitteeseen ja logoon ovat hauiksen molemmin puolin suunnilleen yhtä suuret. */ .claim--ill .mark{grid-column:3;align-self:start; width:var(--ci-mark);max-width:none;height:auto; margin-left:calc(var(--ci-ill0) * .14 - var(--ci-mark) * .0715); margin-top:calc(var(--ill-h) * .345 + 0.9205 * var(--ci-fs) - .295 * var(--ci-mark))} .ci-sub{font-size:var(--fs-body);line-height:1.6;max-width:38ch;opacity:.82} .ci-links{display:flex;flex-wrap:wrap;gap:clamp(1.1rem,2.4vw,2.4rem)} .ci-links .all{font-weight:700} /* ALAREUNA (23.9.): nauha sai korkeutensa kuvituksesta, joten padding-block on 0. Hauis (0,77 × paikka) on vanhaa kuvitusta 28 % matalampi, ja tekstipalsta kasvoi sitä korkeammaksi: linkit osuivat nauhan alareunaan (0 px leveyksillä 1024 / 1440 / 2000). Tekstipalsta saa oman alailmansa, ja kuvitus ankkuroituu nauhan alareunaan ohjeiston mukaan (s. 43: alamarginaali 6,4 % nauhasta), jolloin sen yläreuna osuu väitteen yläreunan korkeudelle eikä se leiju. */ .claim--ill .ci-txt{padding-bottom:clamp(2.5rem,5vw,6rem)} .claim--ill .ill{align-self:end;margin-bottom:calc(var(--ill-h) * .09)} /* lisää alailmaa koko nauhalle (24.9. Matti): kuvitus pysyy samalla korkeudella väitteeseen nähden, ja tila kasvaa sekä kuvituksen että linkkien alle */ .claim--ill .inset{padding-bottom:calc(var(--ill-h) * .13)} @media (max-width:880px){ .claim--ill .inset{grid-template-columns:1fr auto;justify-content:stretch; padding-right:var(--gutter);padding-top:clamp(3rem,10vw,4.5rem);padding-bottom:0} .claim--ill .ci-txt{grid-column:1/-1;grid-row:1;margin-top:0;padding-bottom:0} .claim--ill blockquote{white-space:normal} .claim--ill .ill{grid-column:1;grid-row:2;width:clamp(8rem,38vw,13rem); margin:clamp(1.4rem,3vw,2rem) 0 clamp(1rem,4vw,1.6rem)} .claim--ill .mark{grid-column:2;grid-row:2;align-self:end; width:clamp(5rem,17vw,7rem);margin:0 0 clamp(.6rem,2vw,1.2rem);margin-left:auto} } /* Pale Sky -kaista ei saa sulautua seuraavaan Pale Sky -osioon (logokela): kun kuvitusnostoa seuraa logokela, logokela vaihtuu valkoiselle. */ .claim--ill + .logos{background:var(--bg)} /* ============ SISÄSIVUN JAETTU OTSIKKO-OSIO (WP: kansi) ============ */ /* Benchmark krogerus.com/expertise (mitattu 1440 px): pääkuva oikealla 42,4 % viewportin leveydestä, täysin reunaan asti, ja se alkaa vasta navipalkin alta (15,1 vw). Osion korkeus ~49 vw. Teksti vasemmalla omalla palstallaan, ei kuvan päällä → otsikko pysyy luettavana ilman tummennuksia ja kuva säilyy kokonaisena. */ /* KANNEN KORKEUS on sidottu myös NÄKYMÄN KORKEUTEEN (asiakkaan huomio kierros 22): pelkkä vw-mitoitus täytti leveässä ja matalassa ikkunassa koko ensinäkymän, jolloin seuraavan osion otsikko ei pilkottanut lainkaan. 78svh jättää aina vähintään viidenneksen seuraavalle osiolle. 1440×900:ssa arvo ei muutu (46vw = 662 px < 78svh = 702 px), joten hyväksytty sommittelu säilyy. */ .pagehead--split{display:grid;grid-template-columns:50% 50%; align-items:stretch;min-height:min(max(30rem,46vw), 84svh)} .pagehead--split .inset{align-content:center; padding-inline:var(--inset) clamp(1.4rem,4vw,4rem); padding-block:calc(var(--nav-h) + clamp(.5rem,1vw,1rem)) clamp(2.4rem,4.5vw,4.5rem); row-gap:clamp(.9rem,1.5vw,1.5rem)} .pagehead--split h1{font-size:var(--fs-1);max-width:12ch} /* poikkiviiva pois jaetusta herosta: script-sanan käsinpiirretty alleviivaus on jo vaakasuora graafinen elementti, ja kaksi viivaa peräkkäin näyttää levottomalta */ .pagehead--split .rule{display:none} .pagehead--split .lead{font-size:clamp(1.25rem,1.9vw,1.85rem);max-width:32ch} /* KUVA ALKAA VASTA NAVIPALKIN ALTA (korjattu kierros 13). Aiemmin kuva ulottui sivun yläreunaan, jolloin keskitetty navi osui tasan tekstipalstan ja kuvan rajalle: osa linkeistä oli tummalla pinnalla ja osa kuvan päällä, ja raja leikkasi linkkirivin epäsiististi. Gradienttihäivytys ei riittänyt, koska raja on PYSTYSUORA eikä vaakasuora. Ratkaisu: kuvasarake saa yläreunaan navin korkuisen tyhjän, jolloin navi on kokonaan yhtenäisellä Aubergine-pinnalla — sama arkkitehtuuri kuin ohjeiston s. 50 web-mockupissa, jossa navi on omana palkkinaan kuvan yläpuolella. Kuva säilyy silti oikeaan ja alareunaan asti täysleveänä. */ .pagehead--split .ph{background:rgba(248,247,246,.14); margin-top:calc(var(--nav-h) * .95)} /* paneelin kuvasuhde vaihtelee selaimen mukaan, joten cover leikkaa välillä ylä- ja alareunasta. Painotus ylöspäin pitää kasvot ruudussa. */ .pagehead--split .ph img{object-position:50% 38%} /* KANNET, JOTKA EIVÄT LIIKU. Parallaksin 1,12-skaalaus vie kummastakin reunasta 5,4 %. Näissä kuvissa pää tai kasvot ulottuvat lähdekuvan reunaan, joten skaalaus leikkaisi ne kaikissa kuvasuhteissa (mitattu 23.9.): ura-kansi oikean miehen kasvot lähteen oikeassa reunassa palvelut-kansi taustan miehen päälaki 5,5 %:ssa yläreunasta meista-kansi seisovan miehen päälaki 5,1 %:ssa, oikean naisen kasvot 92 %:ssa ajankohtaista-kansi oikean miehen hiukset 96 %:ssa kansainvalinen-kansi miehen päälaki 3 %:ssa --amp:0 pitää kuvan paikallaan ilman skaalausta. Valitsin tarttuu tiedostonimeen kauttaviivan kanssa (»/palvelut-kansi« ei osu »myynnin-palvelut-kansi«-nimeen), joten jos kansikuva vaihdetaan, poikkeus poistuu samalla (WordPressissä vaihtunut kuva saa nimen ura-kansi-.jpg, joka osuu yhä). */ .pagehead--split .px:has(img[src*="/ura-kansi"]), .pagehead--split .px:has(img[src*="/palvelut-kansi"]), .pagehead--split .px:has(img[src*="/meista-kansi"]), .pagehead--split .px:has(img[src*="/ajankohtaista-kansi"]), .pagehead--split .px:has(img[src*="/kansainvalinen-kansi"]), .pagehead--split .px:has(img[src*="/valmennus-kansi"]), /* seinäteksti ja mies ulottuvat rajauksen reunoille (24.9.) */ .pagehead--split .px:has(img[src*="/kaupallinen-kansi"]){--amp:0} /* KON_3407 (26.9.): blondin naisen kasvot 11–21 %:ssa */ /* Etusivun Kaupallinen-kortti, sama KON_3407 neliönä (Matti 28.9. »väljemmin«): neliö on jo lähteen koko korkeus, joten väljyys tulee vain skaalan poistosta (1,21 -> 1). */ .service .ph:has(img[src*="/etusivu-palvelu-2"]){--amp:0} /* Oma rajauskohta, kun paneeli on kuvaa kapeampi tai leveämpi: ura (86 %) ja ajankohtaista (100 %) leikkaavat ensin vasemmalta, missä on epätarkkaa etualaa; meistä ja kansainvälinen (0 %) leikkaavat alhaalta pöytää eivätkä ylhäältä päälakea. */ .pagehead--split .ph img[src*="/ura-kansi"]{object-position:86% 38%} .pagehead--split .ph img[src*="/ajankohtaista-kansi"]{object-position:100% 38%} /* kaupallinen (0 %): 900 px:n 1,18:1-paikka leikkaisi naisen kasvot; oikealla vain sumeaa kasvia */ .pagehead--split .ph img[src*="/kaupallinen-kansi"]{object-position:0 38%} .pagehead--split .ph img[src*="/meista-kansi"], .pagehead--split .ph img[src*="/kansainvalinen-kansi"]{object-position:50% 0} .pagehead--split .ph::after{color:var(--deep-ink);opacity:.7;z-index:3} @media (max-width:880px){ .pagehead--split{grid-template-columns:1fr;min-height:0} .pagehead--split .inset{padding-inline:var(--inset); padding-block:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem)) clamp(2.5rem,6vw,4rem)} .pagehead--split .ph{aspect-ratio:4/3} } /* KANNEN JÄLKEINEN OSIO alkaa lähempää: --sect-padding (jopa 192 px) jätti ensinäkymään pelkän tyhjän pinnan, ei otsikkoa. Sääntö on yhtenäinen kaikilla sivuilla, jotta sisältö pilkottaa aina samalla tavalla. */ .pagehead + section > .inset, .pagehead + section > .wrap{padding-top:clamp(2.4rem,5vw,5.5rem)} /* ============ TEKSTIALUE (WP: ryhmä) — valkoinen pinta pitkälle tekstille ============ */ .prose{background:var(--bg);transition:background .5s} /* PERÄKKÄISTEN TEKSTIALUEIDEN VUOROTTELU (kierros 13): pitkillä sisältösivuilla (esim. SDR-palvelu, 4 osiota) valkoiset alueet muodostivat yhtenäisen jakson, jossa rytmi katosi. Joka toinen PERÄKKÄINEN .prose saa nyt Mist 50 %:n pohjan. Sisarusvalitsin tekee vuorottelun automaattisesti: kun välissä on jokin muu osio (kuva, nosto, kaavio), ketju katkeaa ja vuorottelu alkaa alusta. */ .prose + .prose{background:var(--tint)} .prose + .prose + .prose{background:var(--bg)} .prose + .prose + .prose + .prose{background:var(--tint)} .prose + .prose + .prose + .prose + .prose{background:var(--bg)} .prose + .prose + .prose + .prose + .prose + .prose{background:var(--tint)} /* Otsikko omalle riville ja leipäteksti kahteen palstaan koko sisennysleveydeltä → palstan mitta ~50 merkkiä (rinnakkainen otsikkopalsta jätti vain ~24). */ .prose .inset{padding-block:var(--sect);display:grid;gap:clamp(1.8rem,3.5vw,3.5rem)} .prose h2{font-size:var(--fs-1);max-width:18ch} /* ============ TEKSTIALUE KUVAPAIKALLA (WP: sarakkeet — kuva + teksti) ============ Kuva täyttää osion vasemman puoliskon reunasta reunaan: ylä-, ala- ja vasempaan reunaan asti, keskelle sivua saakka. Teksti asettuu oikealle puoliskolle omalla sisennyksellään. Kuvalla ei ole omaa korkeutta vaan se venyy rivin mukaan (align-items:stretch on gridin oletus), jolloin kuva ulottuu aina tekstilohkon ylä- ja alareunaan. min-height pitää kuvan kohtuullisena myös lyhyen tekstin kanssa. */ .prose--kuva{display:grid;grid-template-columns:1fr 1fr} .prose--kuva > .pk{grid-area:1/1;min-height:clamp(20rem,33vw,34rem)} /* rajaus on korkea ja kapea → painopiste ylös, jottei kasvoja leikkaudu */ .prose--kuva > .pk img{object-position:50% 38%} /* Myynnin ulkoistuksen välikuva (KON_4767): kasvot ovat 22–40 %:ssa korkeudesta, joten puhelimen leveä 1,8:1-paikka ankkuroidaan ylemmäs, ettei hiusraja leikkaudu. */ .prose--kuva > .pk img[src*="/ulkoistus-teksti"]{object-position:50% 20%} /* SDR-välikuva (KON_6103, 26.9.): kasvot 25–52 %:ssa korkeudesta; puhelimen 1,88:1-paikassa keskitys leikkasi päälaen, joten painopiste ylemmäs. */ .prose--kuva > .pk img[src*="/sdr-teksti"]{object-position:50% 25%} /* Aktivoinnin välikuva (KON_5270, 26.9.): kaljupää ja naurava nainen tiedoston oikealla puoliskolla. 900 px:n 0,42:1-paikassa keskitys leikkasi naisen kasvot, 60 % mahduttaa molemmat. */ .prose--kuva > .pk img[src*="/aktivointi-teksti"]{object-position:60% 25%} /* Räätälöity valmennus (KON_6982, 26.9.): lasin heijastuksen kasvot 5–20 % ja pitkätukka 35–50 % korkeudesta; puhelimen 1,88:1-kaistaan molemmat mahtuvat vain 17 %:lla. */ .prose--kuva > .pk img[src*="/valmennus-teksti"]{object-position:50% 17%} .prose--kuva > .inset{grid-area:1/2; padding-inline:clamp(1.6rem,4.2vw,4.8rem) var(--inset); /* kuva tuo oman massansa, joten pystypehmuste on kevyempi kuin pelkässä tekstiosiossa — muuten kuvasta tulee kapea ja korkea */ padding-block:clamp(3.5rem,7.5vw,8rem)} /* teksti saa puolet leveydestä → yksi palsta kahden sijaan. ANSA: .prose .cols on samalla tarkkuudella mutta myöhemmin, joten valitsimen on oltava tarkempi. */ /* 24.9. (Matti): yhdeksi palstaksi pinottuna palstojen väli (4,5rem) oli selvästi isompi kuin saman palstan kappaleväli (1,05em), ja teksti näytti pätkityltä (SDR: »…ostaa.« → »Toisin sanoen…«). Pinottuna väli = kappaleväli. */ .prose.prose--kuva .cols{grid-template-columns:1fr;row-gap:1.05em} .prose--kuva h2{max-width:15ch} .prose--kuva .pk::after{color:var(--deep-ink);opacity:.75} /* kuva oikealle joka toisessa: rytmi ei jää yksitoikkoiseksi, kun samalla sivulla on useampi kuvapaikka */ .prose--kuva.prose--kuva-oik > .pk{grid-area:1/2} .prose--kuva.prose--kuva-oik > .inset{grid-area:1/1; padding-inline:var(--inset) clamp(1.6rem,4.2vw,4.8rem)} @media (max-width:880px){ .prose--kuva,.prose--kuva.prose--kuva-oik{grid-template-columns:1fr} .prose--kuva > .pk,.prose--kuva.prose--kuva-oik > .pk{ grid-area:auto;min-height:clamp(13rem,50vw,20rem)} .prose--kuva > .inset,.prose--kuva.prose--kuva-oik > .inset{ grid-area:auto;padding-inline:var(--inset)} } .prose .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,4.5rem)} /* KUMPPANILOGOT (Kaupallinen kasvupalvelu 24.9.). Mitattu logotiedostoista: Vendre-SVG:ssä pienaakkosten yläreuna 40,76 % ja perusviiva 81,1 % laatikon korkeudesta, ascender 19,7 %, muste alkaa 7,1 % leveydestä; Valve One -PNG:ssä versaalit täyttävät laatikon (98 %). Valven korkeus 0,4135 × Vendre asettaisi versaalit tasan pienaakkosten kaistalle; ks. optinen tasaus alla. */ .kumppanit{--kl-h:clamp(2.6rem,4.2vw,4.2rem);display:flex;align-items:flex-start; gap:clamp(1.1rem,2vw,1.8rem);margin-left:calc(var(--kl-h) * -.196)} .kumppanit img{display:block;width:auto;max-width:none} .kumppanit .k-vendre{height:var(--kl-h)} /* 0,45 = versaalit 1,09 × Vendren pienaakkoset (optinen tasaus: antiikva painaa enemmän); margin-top pitää perusviivat samalla: 0,811 − 0,988 × 0,45 = 0,366 */ .kumppanit .k-valve{height:calc(var(--kl-h) * .45);margin-top:calc(var(--kl-h) * .366)} .kumppanit .k-sep{flex:0 0 1px;height:calc(var(--kl-h) * .614);margin-top:calc(var(--kl-h) * .197); background:var(--ink);opacity:.35} .prose p{max-width:52ch} .prose p + p{margin-top:1.05em} /* VÄLIOTSIKKO KESKELLÄ TEKSTIÄ. Globaali h1,h2,h3{margin:0} jättää väliotsikon kiinni edelliseen kappaleeseen, jolloin se lukeutuu sen jatkoksi eikä uuden jakson aluksi. Valitsin on tarkoituksella sisarusvalitsin: se osuu vain silloin kun otsikkoa edeltää teksti, eikä siis kaksinkertaista väliä listoissa, joissa otsikko on oman kääreensä ensimmäinen lapsi (tietosuojaseloste, evästekäytäntö). Koskee myös artikkelirunkoa. */ .prose :is(p,ul,ol) + h3, .artbody :is(p,ul,ol) + h3{margin-top:clamp(1.7rem,2.8vw,2.6rem)} .prose h3 + p, .artbody h3 + p{margin-top:.55em} /* numeroitu lista brändin merkintätavalla "1 — Otsikko" */ /* rivit jakavat saman numerosarakkeen (subgrid): leveimmän numeron mukaan, jotta otsikot ovat linjassa myös kun »18 —« tai »100 %« on muita leveämpi (24.9.) */ .prose ol{grid-column:1/-1;list-style:none;margin:clamp(2rem,3.6vw,3.2rem) 0 0;padding:0; display:grid;grid-template-columns:auto 1fr;column-gap:clamp(.9rem,2vw,1.8rem)} .prose ol li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:clamp(.9rem,2vw,1.8rem); padding-block:clamp(1rem,1.8vw,1.5rem);border-top:1px solid var(--line)} .prose ol li:last-child{border-bottom:1px solid var(--line)} .prose ol b{font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.2} /* tasalevyiset numerot: suhteellinen »4 —« on 1,81 em ja »3 —« 1,67 em */ .prose ol .num{font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.1rem,1.6vw,1.45rem);opacity:.75; font-variant-numeric:tabular-nums;min-width:1.8em} .prose ol p{margin-top:.35em;opacity:.78;max-width:56ch} /* Kohdan sisäinen luettelo ja väliotsikko (tietosuojaseloste, Petterin vedos 24.9.). ANSA 1: .prose ol li osuu myös sisäkkäisen ul:n riveihin (grid, viivat, padding), joten ne palautetaan tavallisiksi luettelon riveiksi; :last-child tarvitsee oman rivinsä, koska .prose ol li:last-child on tarkempi kuin .prose ol li li. ANSA 2: .prose ol b on kohdan otsikkotyyli, joten luettelon nimiöt ovat . */ .prose ol li ul{margin:.5em 0 0;padding-left:1.2em;list-style:disc;opacity:.78;max-width:56ch} .prose ol li li{display:list-item;padding:0;border:0} .prose ol li li:last-child{border:0} .prose ol li li + li{margin-top:.3em} .prose ol li ul + p{margin-top:.6em} .prose ol h4{font-size:inherit;font-weight:700;margin:1.3em 0 0} .prose ol h4 + p{margin-top:.25em} .prose ol h4 ~ p + p{margin-top:.7em} @media (max-width:880px){ .prose .inset{grid-template-columns:1fr;gap:1.8rem} .prose .cols{grid-template-columns:1fr;row-gap:1.05em} /* pinottuna kuten yllä */ } /* Yhteystietojen Toimipisteet kolmena palstana (Matti 30.9.): Helsinki / Kuopio + laskutus / konserniyhtiöt. Palstojen suhde = rivien mitattu tarve ilman taittoa (219/318/288 px, pisin »Operaattori Maventa (003721291126)«), ja tarve + välit mahtuu vasta 1300 px:stä (1280 px:llä rivit taittuivat); 881–1299 px pysyy kahtena palstana (konserni toisella rivillä) ja mobiili pinottuna. */ @media (min-width:1300px){ .prose.prose--kolme .cols{grid-template-columns:minmax(0,219fr) minmax(0,318fr) minmax(0,288fr)} } /* Konserniluettelo: yhtiö ja y-tunnus samalla rivillä, entinen nimi alla himmeämpänä. inline-block + alamarginaali korottaa ent.-rivin rivilaatikkoa, joten yhtiöt ryhmittyvät pariksi ilman kokonaista tyhjää riviä (Matti 30.9.: »iso möykky«). */ .prose .ent{color:var(--ink-2);display:inline-block;margin-bottom:.45em} /* ============================================================ AIKAJANA (Meistä · 35 vuoden historiikki) ------------------------------------------------------------ Asiakkaan referenssi (kasarmikatu25.fi): jana keskellä, kohdat vuorotellen sen molemmin puolin, valitut kuvat ulkoreunoissa kiinni selaimen reunassa. RAKENNE: jokainen li on oma rivinsä ja oma 4-sarakkeinen ruudukko: [ kuva-vasen 1fr | teksti 19rem | teksti 19rem | kuva-oikea 1fr ] Kaikilla li:llä on sama sarakemäärittely, joten palstat linjautuvat ilman subgridiä (jota vältetään, koska leiska avataan myös vanhoilla selaimilla levyltä). Jana on tasan 50 %:ssa: 1fr-sarakkeet ovat yhtä leveät ja tekstipalstat yhtä leveät, joten keskisarakkeiden välinen kuja osuu li:n keskelle. ANSA 1: grid-row:1 on pakko merkitä eksplisiittisesti. Jos oikean reunan kuva on DOMissa ennen tekstiä, automaattinen sijoittelu vie tekstin riville 2, koska kohdistin on jo ohittanut sarakkeen 2. ANSA 2: valitsimet muotoa .prose ol.aikajana, koska .prose ol li (0,1,2) on tarkempi kuin .aikajana li (0,1,1) ja palauttaisi sarakkeet arvoon »auto 1fr«. Samalla nollataan sen gap ja border. ANSA 3: janan väri on --ink-2 opacity .3, EI --line. Osio on --tint- taustalla, jolla --line antaa kontrastin 1,09:1 eli viiva katoaa. ANSA 4: viiva EI ole border, vaan li::after top/bottom. Reunaviiva alkaisi rivin ylälaidasta ja jättäisi tapin ensimmäisen pisteen yläpuolelle. Pystyväli on li:n padding-bottomissa, jotta absoluuttinen ::after kattaa myös välin ja jana pysyy katkeamattomana. ============================================================ */ .prose ol.aikajana{grid-column:1/-1;list-style:none;padding:0; margin:clamp(1.6rem,3vw,2.8rem) calc(var(--inset) * -1) 0; /* täysleveys */ --tl-kaista:clamp(15rem,26vw,22rem); /* 29 merkkiä @1024 … 37 @1280+ */ --tl-kuja:clamp(1.5rem,3vw,3.2rem); --tl-kuva:34rem; /* kuvan enimmäisleveys */ --tl-piste:.62em} .prose ol.aikajana li{position:relative;display:grid; grid-template-columns:1fr var(--tl-kaista) var(--tl-kaista) 1fr; column-gap:var(--tl-kuja);gap:var(--tl-kuja); padding:0 0 clamp(2.6rem,5vw,4.6rem);border:0} .prose ol.aikajana li:last-child{padding-bottom:0;border:0} /* jana ja pisteet tasan keskellä */ .prose ol.aikajana li::after{content:'';position:absolute;left:50%;top:0;bottom:0; width:1px;transform:translateX(-50%);background:var(--ink-2);opacity:.3} .prose ol.aikajana li:first-child::after{top:var(--tl-piste)} .prose ol.aikajana li:last-child::after{bottom:auto;height:var(--tl-piste)} .prose ol.aikajana li::before{content:'';position:absolute;left:50%;top:var(--tl-piste); width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%); background:var(--ink-2);opacity:.55;z-index:1} .prose ol.aikajana li.nyt::before{width:11px;height:11px; background:var(--deep);opacity:1} /* kohdat vuorotellen */ .prose ol.aikajana .vaihe{grid-column:2;grid-row:1} .prose ol.aikajana li:nth-child(even) .vaihe{grid-column:3} .prose ol.aikajana .vuosi{display:block; font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.3;color:var(--ink-2)} .prose ol.aikajana b{display:block;margin-top:.1em; font-family:'Martina Plantijn',Georgia,serif;font-weight:500; font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.2} .prose ol.aikajana p{margin-top:.45em;opacity:.78;max-width:none} /* kuvat ulkoreunoihin, kiinni selaimen reunassa */ .prose ol.aikajana .tl-kuva{grid-row:1;margin:0;align-self:start; width:min(100%,var(--tl-kuva))} .prose ol.aikajana .tl-kuva--v{grid-column:1;justify-self:start} .prose ol.aikajana .tl-kuva--o{grid-column:4;justify-self:end} /* Kuvan korkeus rajataan tekstipalstan mittaluokkaan: pystykuva rivillä 1 venyttäisi muuten koko kohdan korkuisekseen ja tekstipalstoihin syntyisi pitkiä tyhjiä välejä (asiakkaan huomio 1.9.). cover + kuvakohtainen painopiste pitävät olennaisen näkyvissä. */ .prose ol.aikajana .tl-kuva img{display:block;width:100%;height:auto; max-height:clamp(16rem,24vw,24rem);object-fit:cover;object-position:50% 30%} /* pienikokoiset arkistokuvat (450–800 px): kapeampi enimmäisleveys, jottei retina-näytöllä pehmene suurennoksessa */ .prose ol.aikajana .tl-kuva--s{width:min(100%,23rem)} /* päätöslause janan alle keskitettynä */ /* otsikko janan keskilinjalle (Matti 24.9.): leveällä jana on tasan keskellä, joten vasempaan reunaan jäänyt otsikko ei kuulunut sen kanssa samaan sommitelmaan. Alle 1024 px jana siirtyy vasempaan reunaan, ja otsikko pysyy siellä. */ @media (min-width:1024px){ .prose .inset:has(ol.aikajana) > h2{justify-self:center;text-align:center; max-width:22ch;text-wrap:balance} } .prose .tl-loppu{grid-column:1/-1;margin:clamp(2.2rem,4vw,3.4rem) 0 0; text-align:center;max-width:none; font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.25} @media (max-width:1023px){ /* alle 1024 px kaksi palstaa jäisi noin 30 merkkiin riviltä, joten jana siirtyy vasempaan reunaan ja kuvat tekstin ylle */ .prose ol.aikajana{margin-inline:0} .prose ol.aikajana li{grid-template-columns:1fr; padding-left:clamp(1.2rem,4vw,1.8rem); padding-bottom:clamp(2rem,5vw,2.9rem);gap:0} .prose ol.aikajana .vaihe, .prose ol.aikajana li:nth-child(even) .vaihe{grid-column:1;grid-row:auto} .prose ol.aikajana .tl-kuva, .prose ol.aikajana .tl-kuva--v, .prose ol.aikajana .tl-kuva--o{grid-column:1;grid-row:auto; width:auto;justify-self:stretch;margin:0 0 clamp(1rem,2.5vw,1.6rem)} .prose ol.aikajana li::before, .prose ol.aikajana li::after{left:0} /* yhdessä palstassa rivi venyisi 1023 px:llä 88 merkkiin */ .prose ol.aikajana p{max-width:56ch} .prose .tl-loppu{text-align:left;padding-left:clamp(1.2rem,4vw,1.8rem)} } /* Ura meillä (Eveliina 23.9.): päätöslausetta seuraa vielä leipäkappale, joten keskitys ja aikajanan sisennys jättäisivät kappaleen vinoon. Kun lauseen perässä on kappale, se asettuu samaan vasempaan linjaan. */ .prose .tl-loppu:has(+ p){text-align:left;padding-left:0;text-wrap:pretty} /* ============================================================ ARTIKKELISIVU (WP: single post) — oma editorial-rakenne ------------------------------------------------------------ Artikkelin pitää erottua palvelusivusta ensisilmäyksellä. Erot: · yksi kapea lukupalsta (66ch) — palvelusivut ovat kaksipalstaisia · otsikko JA pääkuva mahtuvat molemmat ensinäkymään: aubergine-kansi on matala ja kuva alkaa heti sen alta reunasta reunaan · lukemisen edistymispalkki sivun yläreunassa · ingressi omalla pistekoollaan, nostositaatti rikkoo palstan · lopussa paluu listaukseen + "Lue seuraavaksi" ============================================================ */ /* edistymispalkki: kertoo heti että kyseessä on luettava sisältö */ .readbar{position:fixed;left:0;top:0;height:3px;width:0;z-index:220; background:var(--accent);transition:width .1s linear;pointer-events:none} /* sama punainen kuin .wnote */ /* Artikkelin kansi on VAALEA — sisältösivujen kansi on aubergine, joten artikkeli erottuu jo pintaväristä (asiakkaan toive). */ .artcover{background:var(--bg);color:var(--ink);transition:background .5s} .artcover .inset{padding-block:calc(var(--nav-h) + clamp(1rem,2vw,2rem)) clamp(2rem,3.8vw,3.8rem); display:grid;justify-items:center;text-align:center;gap:clamp(.9rem,1.7vw,1.7rem)} /* murupolku, metarivi ja kirjoittaja seuraavat keskitystä */ .artcover .crumbs,.artcover .art-meta{justify-content:center} .artcover h1{margin-inline:auto} .artcover .art-by{justify-content:center} .artcover .crumbs{color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.45rem} .artcover .crumbs a{color:inherit} /* metarivi: kategoria · päiväys · lukuaika */ .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem; font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-2)} .art-meta span:not(:last-child)::after{content:'·';margin-left:.7rem;opacity:.5} .artcover h1{font-size:var(--fs-display);max-width:26ch;text-wrap:balance} .art-by{display:flex;align-items:center;gap:.7rem;margin-top:.2rem} .art-by .ct-avatar{width:clamp(2.4rem,3.2vw,3.2rem);height:clamp(2.4rem,3.2vw,3.2rem); border-radius:50%;background:var(--surface-2)} .art-by .nm{font-size:var(--fs-small);line-height:1.35} .art-by .nm b{display:block;font-weight:700} .art-by .nm span{color:var(--ink-2)} /* PÄÄKUVA (24.9., asiakkaan kommentti »kuva skaalautuu huonosti»): ennen kuva oli reunasta reunaan 16:7-rajauksella, jolloin bookers.fi:n kuvista leikkautui ylä- ja alareuna (kasvot, logot) ja 1400 px:n kuva venyi koko näytön levyiseksi. Nyt kuva näkyy omassa kuvasuhteessaan (1,5–1,78:1, yksi neliö) keskitettynä ja rajatun levyisenä, eikä koskaan luonnollista kokoaan leveämpänä (Elisan 800 px). */ /* 24.9. (Matti): 58rem jäi leveällä näytöllä vaatimattomaksi keskelle. Leveys on nyt sivuston sisältöpalsta (sama --inset kuin muiden sivujen tekstillä: 1040 px @1440, 1400 px @1920), mutta kapealla vähintään 58rem / reunus, jottei kuva kutistu. Kulmat samalla säteellä kuin sivuston kortit (.sub-card --sc-r). */ .artmedia{--am-r:clamp(.5rem,.85vw,.85rem); margin:0 auto;position:relative;background:transparent;transition:background .5s; width:fit-content; max-width:max(calc(100% - 2 * var(--inset)), min(calc(100% - 2 * var(--gutter)), 58rem))} .artmedia img{display:block;max-width:100%;height:auto;border-radius:var(--am-r); filter:var(--img-filter);opacity:var(--img-opacity);transition:filter .6s,opacity .6s} /* Kuvateksti kuvan ALAPUOLELLA (jos sellainen joskus annetaan). */ .artmedia figcaption{padding:clamp(.6rem,1.1vw,1rem) 0 0} .artmedia figcaption > span{display:block; font-family:'Martina Plantijn',Georgia,serif;font-style:italic; font-size:var(--fs-card);line-height:1.45;color:var(--ink-2)} /* kapea lukupalsta */ .artbody{background:var(--bg);transition:background .5s} .artbody .wrap{max-width:66ch;margin:0 auto; padding:clamp(3rem,6vw,6rem) var(--gutter) var(--sect)} .artbody > .wrap > * + *{margin-top:1.15em} .artbody .lead{font-size:var(--fs-2);line-height:1.42; font-family:'Martina Plantijn',Georgia,serif} .artbody p{font-size:var(--fs-body);line-height:1.72;max-width:none} .artbody h2{font-size:clamp(1.4rem,2.1vw,2rem);margin-top:2.2em;max-width:28ch} .artbody .ph-text{max-width:none} /* Nostositaatti: viiva on leipätekstin vasemmalla rivillä ja sitaatti sen oikealla puolella sisennettynä. Viiva munakoisolla (--deep) eikä korostus- värillä, ja paksumpana, jotta se lukeutuu graafisena elementtinä eikä ohuena rajaviivana. */ .artquote{margin:clamp(2.2rem,4vw,4rem) 0; padding-left:clamp(1.1rem,2.2vw,2.1rem); font-family:'Martina Plantijn',Georgia,serif; font-style:italic;font-size:var(--fs-2);line-height:1.34;color:var(--ink); border-left:clamp(3px,.3vw,5px) solid var(--deep)} .artquote cite{display:block;margin-top:.8rem;font-style:normal; font-family:'DM Sans',sans-serif;font-size:var(--fs-card);color:var(--ink-2)} /* paluu ja jako */ .artend{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:center;gap:1rem;margin-top:clamp(2.4rem,4vw,4rem); padding-top:clamp(1.2rem,2vw,2rem);border-top:1px solid var(--line)} .artend .share{display:flex;gap:.9rem;font-size:var(--fs-small)} .artend .share a{border-bottom:1px solid currentColor;padding-bottom:2px; text-decoration:none} /* ============ LOHKON LOPPUNAPPI (WP: lohkon alaosa) ============ */ /* Asiakas toivoi Ota yhteyttä -painikkeita viljeltynä sisältöblokkien alaosaan. Nappi on toissijainen (reunaviiva, ei täyttöä), jottei se kilpaile otsikoiden kanssa; ensimmäinen lohko jätetään ilman, jotta lukija saa ensin johdannon. */ .blk-cta{margin-top:clamp(1.8rem,3.2vw,3rem)} .blk-cta .btn{font-size:var(--fs-card)} .prose .blk-cta,.subs .blk-cta,.listing .blk-cta{display:block} /* ============ ANSA: OSION h2 YLIAJOI KORTIN OTSIKON ============ Listaussivuilla kortin otsikko on h2 (saavutettavuus: kortit ovat suoraan H1:n alla). Osiosäännöt .listing h2 / .news h2 / .subs h2 ovat samalla tarkkuudella mutta myöhemmin, joten ne kasvattivat korttiotsikon 50 px:iin. Tämä sääntö on tarkempi (0,2,1) ja palauttaa kortin oman koon. */ :is(.listing,.news,.subs,.logos,.prose,.artbody) .card h2{ font-size:clamp(1.15rem,1.7vw,1.5rem);margin:.5rem 0 .55rem;max-width:none} /* ============ TYÖNTEKIJÄVIDEOT (ura) ============ */ /* Upotus latautuu vasta klikkauksesta. Sivu ei siis ota yhteyttä YouTubeen ennen kuin käyttäjä pyytää videon, mikä ratkaisee kolme asiaa yhdellä kertaa: evästesuostumuksen (kolmannen osapuolen pyyntöä ei synny ennen nimenomaista toimintoa), sivun painon (kaksi valmista upotusta on satoja kilotavuja) ja sen, että poster-ruutu pysyy brändin näköisenä. HUOM: poster on PAIKALLINEN tiedosto eikä i.ytimg.com juuri siksi, ettei latausta tapahdu ulkopuolelta. Älä vaihda sitä YouTuben osoitteeseen. Poster käyttää .ph-luokkaa, joten se noudattaa samaa kuvasääntöä kuin muut kuvat: wireframessa piilossa (--img-opacity:0), leiskassa näkyvissä. */ .videot{display:grid;gap:clamp(1.2rem,2.4vw,2.2rem);margin-top:clamp(2rem,4vw,3.4rem)} @media (min-width:760px){.videot{grid-template-columns:1fr 1fr}} .video{margin:0} .video-kaynnista{display:block;width:100%;padding:0;border:0;background:none; position:relative;cursor:pointer;overflow:hidden} .video-kaynnista .ph{display:block;aspect-ratio:16/9} .video-kaynnista img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0; filter:var(--img-filter);opacity:var(--img-opacity); transition:filter .6s,opacity .6s,transform .7s cubic-bezier(.22,.61,.36,1)} .video-kaynnista:hover img{transform:scale(1.03)} .video-kaynnista:focus-visible{outline:3px solid var(--accent);outline-offset:3px} /* Soittopainike: Aubergine-ympyrä, hoverilla Energy. Kolmio on reunoilla piirretty, jotta se skaalautuu fonttikoon mukana eikä vaadi omaa kuvaa. */ .video-nappi{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(3.4rem,6vw,4.6rem);aspect-ratio:1;border-radius:50%; font-size:clamp(.85rem,1.3vw,1.1rem); background:var(--deep);display:grid;place-items:center; transition:transform .5s cubic-bezier(.22,.61,.36,1),background .35s ease} .video-nappi::before{content:'';width:0;height:0;margin-left:.25em; border-left:.9em solid var(--deep-ink); border-top:.55em solid transparent;border-bottom:.55em solid transparent} .video-kaynnista:hover .video-nappi{transform:translate(-50%,-50%) scale(1.08); background:var(--accent)} .video-kaynnista:hover .video-nappi::before{border-left-color:var(--accent-ink)} .video figcaption{margin-top:.7rem;font-size:var(--fs-card);color:var(--ink-2)} /* Klikkauksen jälkeen painike korvataan upotuksella samassa kehyksessä. */ .video-upotus{position:relative;aspect-ratio:16/9;background:var(--deep)} .video-upotus iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (prefers-reduced-motion:reduce){ .video-kaynnista img,.video-nappi{transition:none} .video-kaynnista:hover img{transform:none} .video-kaynnista:hover .video-nappi{transform:translate(-50%,-50%)} } /* ============ ERÄ B · Kattiksen palaute 15.9.2026 ============ */ /* »Pienemmät luvut ja isommat tekstit.« Luku pienenee noin viidenneksen ja selite kasvaa noin kuudenneksen, jolloin painopiste siirtyy lukemasta sisältöön. Molemmat ovat clamp-arvoja, joten suhde säilyy kaikilla leveyksillä. HUOM: --fs-num ohjaa myös .stat-ul-alleviivauksen korkeutta (.11em), joten alleviivaus kutistuu mukana itsestään. */ :root{ --fs-num: clamp(4rem, 10.6vw, 10.2rem); } .stat span.lbl{font-size:clamp(1.08rem,1.45vw,1.38rem)} /* »Liikaa erilaisia ja erikokoisia fontteja vasemmalla palstalla.« ja Asiakaskokemuksilla »Taas aika monen kokoista fonttia.« (Kattis) Palstassa on kolme kokoa: kicker, otsikko ja kaikki muu leipätekstin koossa. Mitattu 23.9. 1440 px:ssä: koko oli jo yhtenäinen (18,88 px), mutta tyylejä oli yhä liikaa: sähköposti Martina-kursiivina ja puhelin 0,04 em:n harvennuksella. Nyt nimi, titteli, puhelin ja sähköposti ovat samaa DM Sansia kuin leipäteksti; nimi erottuu lihavalla, titteli himmeämpänä ja sähköposti alleviivauksella. Puhelimen opacity kirjoitetaan auki, koska WP:ssä .contact .ct-phone voittaa .reveal.in:n ja leiskassa päinvastoin. »Puhelinnumero on Sini-Tuulin numero, joten se voisi olla hänen nimen alla«: henkilörivin ja puhelimen väli oli 32 px ja puhelimen ja sähköpostin 0 px, jolloin numero luki sähköpostin parina. Väli puolitettu. */ .contact .ct-person{margin-bottom:clamp(.8rem,1.2vw,1rem)} .contact .ct-phone{font-size:var(--fs-body);letter-spacing:normal;opacity:1;margin-top:0} .contact .ct-mail{font-family:inherit;font-style:normal;font-size:var(--fs-body)} /* »Väliotsikkoja vähemmän ja isommalla.« Yhteystietojen ryhmäotsikot olivat 0,74 rem versaalilatomusta; nyt ne ovat oikeita otsikoita. */ .subs .grp-lbl{font:700 clamp(1.05rem,1.5vw,1.35rem)/1.3 'Martina Plantijn',Georgia,serif; letter-spacing:.01em;text-transform:none;margin-top:clamp(2.4rem,4vw,3.6rem)} /* »Voiko tuota whistleblow-kanavan osuutta pienentää jotenkin, pomppaa aika paljon silmään.« (Kattis 23.9.) KEVYT TEKSTIALUE .prose--kevyt on yhden virkkeen sivuhuomio, joka ei saa näyttää omalta pääosioltaan: täysi --sect ja --fs-1 tekivät siitä puolen näytön valkoisen kaistan Mist-korttien ja tumman lomakkeen väliin. Korttiosion perässä se jatkaa samaa pintaa hiusviivan erottamana, jolloin väli tulee korttiosion omasta alapehmusteesta. Otsikko on henkilökortin nimen kokoinen; sisältö ennallaan. WP: vendre/prose-lohkoon lisäluokka »prose--kevyt« (customClassName). */ .prose--kevyt .inset{padding-block:clamp(2.2rem,4vw,3.6rem);gap:clamp(.8rem,1.4vw,1.2rem)} .prose--kevyt h2{font-size:clamp(1.15rem,1.5vw,1.5rem)} .subs + .prose--kevyt{background:var(--surface-2)} .subs + .prose--kevyt .inset{padding-top:0} .subs + .prose--kevyt .inset::before{content:'';margin-bottom:clamp(.6rem,1.2vw,1rem); border-top:1px solid var(--line); border-top-color:color-mix(in srgb, var(--ink-2) 42%, transparent)} /* Footerin osoitteille oma otsikkorivi, jotta Helsinki ja Kuopio erottuvat toisistaan eivätkä lukeudu yhdeksi massaksi. */ .foot-meta span i{display:block;font-style:normal;font-size:var(--fs-small); letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-bottom:.25rem} /* Elisan uusi pääkuva on 800×603 (1,327) eli lähempänä laatikoiden suhteita kuin edellinen 16:9, joten leikkaus puolittui. Korttiruudukossa (16/10) leikkaus kääntyy korkeudeksi, ja keskitettynä se veisi Elisa-logon alareunan. Rajaus alalaitaan säilyttää sekä logon että kaikki kolme kasvoa: ylhäältä jää pois 103 px kattoa. Vaakasuunnassa rajaus pysyy keskellä, joten tämä ei vaikuta niihin laatikoihin joissa leikkaus on vaakasuuntainen. */ img[src*="case-elisa"]{object-position:50% 100%} /* ============ MOBIILIVIIMEISTELY · Matin havainnot 16.9.2026 ============ */ @media (max-width:680px){ /* 1 · Hero hieman korkeammaksi. svh eikä kiinteä rem, jotta lyhyillä puhelimilla (esim. SE, 667 px) hero ei täytä koko ruutua. */ .hero{min-height:min(88svh,48rem)} /* 2 · Hero-logo katosi taustaan. Logo on Linen ja mobiilissa se osuu kuvan kirkkaimpaan kohtaan: kontrasti oli 7 mittauspisteestä neljässä alle 2,7:1 ja oikeassa reunassa 1,03:1 eli täysin näkymätön. Raja ei-tekstisisällölle on 3:1. Mitattu 320 pisteen ruudukolla logon koko alalta, kun logo on 76 vw: harso 0,50 antaa huonoimmaksi 3,24 eikä yhtään pistettä jää alle rajan. Kevyempi ei riitä: 0,45 tipahti yksittäisissä kirkkaissa kohdissa 2,95:een ja 0,38 jää 2,91:een. HUOM: yksittäinen näytepiste voi osua kirkkaaseen täplään, joten mittaa aina ruudukolla eikä yhdeltä riviltä. Desktopilla logo on eri kohdassa kuvaa eikä ongelmaa ole, joten harso on vain mobiilissa. Asiakas pyysi 28.8. poistamaan heron tummennuksen; tämä palauttaa sen VAIN kapeille näytöille, joilla teksti ja logo muuten katoavat. */ .hero .bg::after{background:rgba(28,22,26,.50);transition:background 1s ease-in-out} /* Ensimmäinen pääkuva (KON_4535) Matin lanseerauspostauksen mukaan (29.9.): kohta 42 % (postauksen rajauksen keskikohta 44 % leveydestä) ja kevyempi harso .35, koska tämä kuva on tumma: logo pahin 5 % 5,1:1, tekstialue 5,9:1. Toinen kuva (KON_5438) on vaaleampi ja pitää .50:n: .35:llä logo putosi 2,6:1:een. Harso vaihtuu kuvan mukana (.on toisella kuvalla); ilman :has-tukea jää .50, eli virhe on turvalliseen suuntaan. */ .hero .bg img:first-child{object-position:42% 40%} .hero .bg:not(:has(img:not(:first-child).on))::after{background:rgba(28,22,26,.35)} } /* 3 · Kuvitus oli mobiilissa kutistettu 6,57 rem:iin eli 105 px:iin, mikä on ujon pieni. Nostetaan niin että se lukeutuu kuvitukseksi eikä ikoniksi. */ @media (max-width:860px){ .who-ill{--ill-w:10.6rem} } /* 4 · Tunnusluvut: erässä B luku pienennettiin Kattiksen pyynnöstä, mutta clampin ALARAJA ohjaa mobiilia, joten myös puhelimessa luku kutistui 80 px:stä 64 px:iin. Palautetaan mobiilin lukukoko ja jätetään desktopin pienennys voimaan (10,6vw ja 10,2rem ennallaan). */ :root{ --fs-num: clamp(5.2rem, 10.6vw, 10.2rem); } /* 5 · Hampurilaisvalikon rivit olivat 23,2 px, koska clampin alaraja 1,45rem voitti. Nostetaan alarajaa; svh-katto jää suojaamaan lyhyitä näyttöjä, joilla rivit eivät muuten mahtuisi. */ /* Valikon otsikot isommiksi. RAJOITE: pisin kohta »Asiakaskokemukset« on 17 merkkiä ja se ylivuotaa rivilaatikosta ennen kuin se rivittyy (sama ansa kuin ryhmäotsikon nuolessa aiemmin). 2,4rem = 38,4 px antoi 339 px tekstiä 324 px laatikkoon. Kavennetaan siksi valikon omaa reunapehmustetta kapeilla näytöillä ja pidetään koko sellaisena, että pisimmälle jää mitattu pelivara. Mittaa uudelleen jos valikkoon lisätään pidempi nimi. */ @media (max-width:680px){ .menu{padding-inline:1.125rem} } .menu-row{font-size:min(clamp(2.2rem,3.2vw,2.9rem),5.6svh); /* ANSA: alkuperäinen sääntö asettaa padding-right:.45rem nuolta varten, mutta sen JÄLKEEN tuleva padding-lyhenne nollaa sen. Pienellä fontilla nuoli mahtui silti; isommalla .chev ylitti laatikon 2 px ja li:n overflow:hidden leikkasi sen. Palautetaan pehmuste lyhenteen jälkeen. */ padding-right:.5rem} /* YLÄTASON OTSIKOT PIENEMMIKSI DESKTOPISSA (Matti 23.9.): avatun valikon pitää mahtua näytölle kerralla ilman vieritystä. Vain vw- ja svh-kertoimet pienenevät, rajat pysyvät, joten mobiili ei muutu. ANSA 1: sääntö on tarkoituksella yllä olevan JÄLKEEN. Ensimmäinen versio oli rivin ~670 min-width:821px-lohkossa, ja tämä saman valitsimen myöhempi sääntö kumosi sen kokonaan: valikko ei pienentynyt lainkaan. ANSA 2: 4,6svh mitoitettiin ensin koossa 1280x720 / 1366x768 / 1440x900 / 1920x1080, ja kolmessa ensimmäisessä .menu-foot on piilossa (max-height:780px). Korkeudella 781-1019 px alatunniste palaa, ja valikko vieritti 8-39 px (esim. 1440x790, 1536x864, 1920x800). 3,9svh mahtuu alatunnisteen kanssa. Mitattu 23.9. alavalikko auki, 20 kokoa 1024x781...2560x1300: ylivuoto 0 px kaikissa. Ylätaso: 1440x900 35 px, 1920x1080 42 px (ennen 46 / 46). */ @media (min-width:821px){ .menu-row{font-size:min(clamp(2.2rem,2.7vw,2.9rem),3.9svh)} } /* 6 · Lomakkeen alasvetovalikon nuoli oli selaimen oma: iOS piirsi harmaan kaksoisnuolen, joka ei ole brändin mukainen. Piirretään oma Linen-nuoli ja varataan sille tila oikeaan reunaan. */ .f select{appearance:none;-webkit-appearance:none;padding-right:1.9em; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23F8F7F6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .1em center;background-size:.78em auto} .f select:hover,.f select:focus-visible{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ============ MOBIILINAVIN VIIMEISTELY · 16.9.2026 ============ */ @media (max-width:680px){ /* 1 · Otsikot alkavat alempaa ja saavat ilmaa väliinsä. Rivien väli oli 2 px, eli otsikot lukeutuivat yhtenä massana. */ .menu{padding-top:clamp(6.5rem,17vw,8.5rem)} .menu-row{padding-block:min(.42em,1.5svh)} /* 2 · Nuoli oli kiinteä 2 px:n viiva, joka jäi isomman tekstin rinnalla ohueksi. Nyt paksuus ja koko seuraavat fonttikokoa. ANSA: nuoli on 45° kierretty neliö, ja transform-origin oli 65% 65%, jolloin auki- ja kiinni-tilan kierrot (-45° / +45°) antoivat ERI rajauslaatikon: oikea reuna heilahti 3,2 px sivusuunnassa tilan mukaan, eikä sitä voi linjata X:n kanssa kuin toisessa tilassa kerrallaan. Keskelle siirretty origo antaa molemmille tiloille saman laatikon (mitattu: ero 0,00 px) ja pitää nuolen pystysuunnassa rivin keskellä. Sen jälkeen padding-right säätää oikean reunan hampurilaisen X:ään. */ .menu-row{padding-right:.42rem} .menu-row .chev{width:.42em;height:.42em;border-right-width:.085em; border-bottom-width:.085em;opacity:.8;transform-origin:50% 50%} /* 3 · Alavalikon tekstit selvästi isommiksi. Ryhmäotsikko .menu-grp on allaan olevien linkkien yläkäsite, joten se pysyy isompana; pelkkä .menu-sub a häviää sille spesifisyydessä (0,1,1 vs 0,2,1) ja jättäisi otsikon linkkejään pienemmäksi. */ .menu-sub a.menu-grp{font-size:clamp(1.5rem,4.6vw,1.85rem);line-height:1.2} /* Kolmas taso (palvelut ryhmäotsikon alla) jää tarkoituksella selvästi ryhmäotsikkoa pienemmäksi, jotta taso erottuu. Pienempi teksti tarvitsee suhteessa enemmän ilmaa ympärilleen, joten rivinväli ja riviväljyys kasvavat samalla kun koko pienenee. */ .menu-sub ul a{font-size:clamp(1.05rem,3.1vw,1.25rem);line-height:1.45; padding-block:.42em} .menu-sub ul li + li{margin-top:.1em} .menu-sub{gap:.25rem} /* 4 · Ota yhteyttä -nappi oli 13,8 px eli neljäsosa otsikon koosta ja hukkui valikkoon. */ .menu-cta{font-size:clamp(1rem,3.4vw,1.2rem);padding:.95em 1.7em} } /* ============ HEADERIN PYSTYTASAUS MOBIILISSA · 16.9.2026 ============ */ /* .bar > .burger on kalibroitu DESKTOPIN navilinkkirivin keskikohtaan (margin-top: logon osuus − fs-nav-termi − 9px). Alle 821 px navilinkit piilotetaan (rivi 478), jolloin se vertailukohta katoaa ja hampurilainen jää yksin logon rinnalle 10,1 px liian alas — näkyy alasivuilla, koska etusivun headerissa logo on piilotettu (hero kantaa logon). Mitattu: logon musteen keskikohta on 0,18357 × --hdr-logo kuvan yläreunasta (mustepinta mitattu canvasista, ei laatikosta: SVG-kehyksessä on tyhjää 9,7 px ylhäällä ja 9,2 px alhaalla). Ikoni on 18 px korkea, joten sen puolikas 9 px vähennetään. .hdr-solid keskittää palkin itse. */ @media (max-width:820px){ .site-header:not(.hdr-solid) .bar > .burger{ margin-top:calc(var(--hdr-logo) * .18357 - 9px)} } /* ============ ETUSIVUN »Kasvulla on tekijänsä« · 16.9.2026 ============ */ /* Oli --fs-display, sama kuin ura- ja yhteydenotto-osioiden otsikoilla. Tämä on osion tunnuslause, joten se saa oman, isomman asteikkonsa. .who on vain etusivulla, joten sääntö ei vuoda muille sivuille. */ .who h2{font-size:clamp(2.5rem,5.1vw,5rem)} @media (max-width:680px){ .who h2{font-size:clamp(1.95rem,8.8vw,2.85rem)} } /* ============ VIDEOIDEN SITAATIT · 17.9.2026 ============ */ /* Shakkiruutu: 1. rivillä video vasemmalla ja sitaatti oikealla, 2. rivillä toisin päin. DOM-järjestys on video, sitaatti, video, sitaatti, joten yhden palstan mobiilinäkymässä pari pysyy järjestyksessä video → sitaatti MOLEMMILLA riveillä ilman omaa sääntöä. Työpöydällä vaihdetaan vain toisen parin sarakkeet, jolloin myös ruudunlukijan lukujärjestys säilyy ennallaan — order-ominaisuus olisi rikkonut sen. */ .video-sitaatti{margin:0;font-family:'Martina Plantijn',Georgia,serif; font-style:italic;font-size:clamp(1.25rem,2.1vw,1.85rem);line-height:1.34; color:var(--ink);max-width:24ch} .video-sitaatti cite{display:block;margin-top:1.1em;font-family:'DM Sans',sans-serif; font-style:normal;font-size:var(--fs-card);line-height:1.4;color:var(--ink-2)} /* paikanvaraajan palkit sitaatin pistekokoon, jotta massa vastaa tulevaa tekstiä */ .video-sitaatti .ph-text{gap:.7em;max-width:none} .video-sitaatti .ph-text span{height:.72em;border-radius:.36em} @media (min-width:760px){ .videot{align-items:center} .videot > :nth-child(3){grid-column:2;grid-row:2} /* Alempi sitaatti tasataan sarakkeensa OIKEAAN reunaan, jolloin se asettuu kiinni viereiseen videoon samalla tavalla kuin ylemmällä rivillä. Ilman tätä sitaatti jää palstan vasempaan laitaan ja pariin jää iso aukko, koska laatikko on kapeampi (max-width 24ch) kuin sarake. Vain työpöydällä: mobiilissa on yksi palsta ja tasaus pysyy vasemmalla. */ .videot > :nth-child(4){grid-column:1;grid-row:2;justify-self:end;text-align:right} } /* ============ JAKAUMADONITSI · 18.9.2026 ============ */ /* Nykyinen .donut esittää YHDEN osuuden (»90 % projekteista»), joten sen conic-gradient on kiinteä kaksiosainen. Iiriksen 18.9. toimittamat jakaumat ovat monisegmenttisiä, joten tässä on variantti jossa rajat annetaan instanssikohtaisesti: --s1 ja --s2 ovat KUMULATIIVISIA rajoja prosentteina, eivät segmenttien kokoja. 70/30 on siis --s1:70 ja 20/10/70 on --s1:20 ja --s2:30. Värijärjestys on ohjeiston esityspohjasta: Aubergine → Energy → Pale Sun. Erottimena sama ohut --d-line kuin yhden osuuden donitsissa, jotta segmenttien rajat erottuvat myös silloin kun värit ovat lähellä toisiaan. ANSA: reiän maski on sama radial-gradient(circle closest-side) kuin perusdonitsissa, ks. sen kommentti. Älä vaihda closest-sideä pois. */ .donut--jako{--k1:var(--deep);--k2:var(--accent);--k3:var(--sun)} .donut--jako2{ background:conic-gradient( var(--k1) 0 calc((var(--s1) - var(--d-gap)) * 1%), var(--d-line) calc((var(--s1) - var(--d-gap)) * 1%) calc(var(--s1) * 1%), var(--k2) calc(var(--s1) * 1%) calc((100 - var(--d-gap)) * 1%), var(--d-line) calc((100 - var(--d-gap)) * 1%) 100%)} .donut--jako3{ background:conic-gradient( var(--k1) 0 calc((var(--s1) - var(--d-gap)) * 1%), var(--d-line) calc((var(--s1) - var(--d-gap)) * 1%) calc(var(--s1) * 1%), var(--k2) calc(var(--s1) * 1%) calc((var(--s2) - var(--d-gap)) * 1%), var(--d-line) calc((var(--s2) - var(--d-gap)) * 1%) calc(var(--s2) * 1%), var(--k3) calc(var(--s2) * 1%) calc((100 - var(--d-gap)) * 1%), var(--d-line) calc((100 - var(--d-gap)) * 1%) 100%)} /* Nousu: yhden osuuden donitsi pyyhkäistään --dv-muuttujalla, mutta monisegmenttisen gradientti on staattinen eikä sitä voi pyyhkäistä samalla tempulla ilman toista maskia (mask-composite). Siksi tämä nousee häivyttäen ja hieman skaalaten, mikä riittää eikä lisää hauraita selainriippuvuuksia. */ .fig--donut.reveal .donut--jako{opacity:0;transform:scale(.94); transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.28,1)} .fig--donut.reveal.in .donut--jako{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .fig--donut.reveal .donut--jako{opacity:1;transform:none;transition:none} } /* Jakaumadonitsissa keskellä ei ole yhtä lukua, joten legenda kantaa tiedon. Se ladotaan donitsin viereen ja kapealla näytöllä sen alle (.fig--donut .fig-bars kääntyy jo sarakkeeksi alle 680 px:n). */ /* Ohjeiston mukaan legendan teksti on DM Sansia. Perhe sanotaan tässä ääneen, koska .prose-osiossa on -sääntöjä, jotka vaihtavat sen serifiin. */ .donut-key{font-family:'DM Sans',sans-serif} .donut-key b{font-weight:500;font-family:inherit} .donut-key .osuus{margin-left:auto;padding-left:1.2em;font-variant-numeric:tabular-nums; color:var(--ink-2)} .fig--donut .donut-key{min-width:min(22rem,100%)}