/* ====================================================================== Karhulan Kanat — Peltopäivä: myyntisivu Seuraavat päivät -lista ja REKO-tilauslomake. Ladataan vain sivuilla, joiden sisällössä on [kk_tilauslomake] tai [kk_jakelulista]. Lähde: myynti.html, "TÄMÄN SIVUN OMAT TYYLIT" (sivuotsikko, rajaus, tekstipalsta ja kuvapaikat ovat osiot.css:ssä). Merkintä tulee kk-coren shortcodeista ja skripteistä; data-tila- ja html[data-myyntitila]-säännöt ovat skriptien asettamia. WordPress-merkinnän vuoksi muutetut valitsimet on merkitty "WP:". ====================================================================== */ /* ---------- Piilotus ---------- */ /* Skripti näyttää ja piilottaa sivun osia hidden-attribuutilla. Luokkien display-säännöt voittaisivat selaimen oman [hidden]-säännön, joten se vahvistetaan tällä sivulla. */ [hidden]{ display:none !important; } /* ---------- Seuraavat päivät ---------- */ /* Tiloissa A ja B osio on teksti tai päivälista ja postilistalomake rinnakkain. Kun REKO-tilaus on auki (C, D), postilistalomaketta ei näytetä, ja lista saa kaistan koko leveyden. html[data-myyntitila] asetetaan jo issä (jaettu/myyntitila.js). */ html[data-myyntitila="c"] .myyntipaiva[data-tila="lista"] .myyntipaiva__sisus, html[data-myyntitila="d"] .myyntipaiva[data-tila="lista"] .myyntipaiva__sisus{ grid-template-columns:minmax(0,1fr); } html[data-myyntitila="c"] .myyntipaiva .myyntipaiva__lomake, html[data-myyntitila="c"] .myyntipaiva .kiitos, html[data-myyntitila="d"] .myyntipaiva .myyntipaiva__lomake, html[data-myyntitila="d"] .myyntipaiva .kiitos{ display:none; } /* WP: [data-paivat-tyhja] ja [data-paivat-lista] ovat vain CSS:n käytössä, joten ne ovat luokkia. */ .myyntipaiva[data-tila="lista"] .kk-paivat-tyhja{ display:none; } .myyntipaiva:not([data-tila="lista"]) .kk-paivat-lista{ display:none; } /* Postilistalomakkeen yläpuolella (A, B). */ .myyntipaiva__jo{ margin:0 0 var(--v5); font-size:.9375rem; line-height:1.65; color:var(--vaalea-teksti); max-width:44ch; } /* Päivärivin taitto seuraa listan omaa leveyttä: tilassa B lista on kapeammassa palstassa lomakkeen vieressä. */ .myyntipaiva__lista{ container-type:inline-size; container-name:paivalista; } .myyntipaiva__lisa a{ color:var(--kerma); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; } .myyntipaiva__lisa a:hover{ text-decoration-thickness:2px; } .paivat{ margin-top:var(--v4); border-top:1px solid var(--vaalea-hillitty); } .paiva{ display:grid; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) auto; gap:var(--v2) clamp(1rem, 3vw, 2.5rem); align-items:start; padding-block:clamp(1.25rem, 2.6vw, 1.75rem); border-bottom:1px solid var(--vaalea-hillitty); } .paiva__pvm{ margin:0; font-family:var(--otsikko); font-weight:700; font-size:clamp(2rem, 1.55rem + 1.5vw, 2.75rem); line-height:1; letter-spacing:-.02em; font-variation-settings:"opsz" 144; font-variant-numeric:lining-nums tabular-nums; color:var(--kerma); } .paiva__aika{ margin:0; font-weight:600; font-size:1rem; line-height:1.45; color:var(--kerma); } .paiva__nimi{ margin:.2rem 0 0; font-size:clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height:1.2; font-variation-settings:"opsz" 40; color:var(--kerma); } .paiva__paikka{ margin:.2rem 0 0; font-size:.9375rem; line-height:1.55; color:var(--vaalea-teksti); } .paiva__laji{ margin:.6rem 0 0; font-size:var(--t-mikro); font-weight:600; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; color:var(--vaalea-hillitty); } .paiva__tilaus{ margin:.2rem 0 0; font-size:.9375rem; line-height:1.55; color:var(--vaalea-teksti); } .paiva__tilaus--kiinni{ font-weight:600; color:var(--kerma); } .paiva__linkki{ display:inline-flex; align-items:center; min-height:2.75rem; font-size:.875rem; font-weight:600; white-space:nowrap; color:var(--kerma); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; } .paiva__linkki:hover{ text-decoration-thickness:2px; } /* Avoimen REKO-jakelun Tilaa tähän jakeluun -painike. */ .paiva__tilaa{ white-space:nowrap; } /* Suljettu tai loppuunmyyty jakelu listan lopussa tiiviinä: päivä, nimi ja syy yhdellä rivillä. Himmennetty sävy --vaalea-hillitty (#DCCDB2) on vihreää pohjaa #3F5B3C vasten 4,84:1. Tumma --hillitty (#6B6157) olisi vihreällä pohjalla vain 1,25:1, joten sitä ei käytetä tässä. */ .paiva--kiinni{ grid-template-columns:minmax(0,8.5rem) minmax(0,1fr); align-items:baseline; padding-block:var(--v3); } .paiva--kiinni .paiva__pvm{ font-size:1.125rem; letter-spacing:0; font-variation-settings:"opsz" 24; color:var(--vaalea-hillitty); } .paiva--kiinni .paiva__tiedot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--v3); } .paiva--kiinni .paiva__nimi{ margin:0; font-size:1rem; line-height:1.45; font-variation-settings:"opsz" 24; color:var(--vaalea-hillitty); } .paiva--kiinni .paiva__aika, .paiva--kiinni .paiva__paikka, .paiva--kiinni .paiva__laji{ display:none; } .paiva--kiinni .paiva__tilaus{ margin:0; font-size:.875rem; font-weight:400; line-height:1.45; color:var(--vaalea-hillitty); } /* Kapea lista (puhelin, tai tilassa B lomakkeen vieressä): päivämäärä ja kellonaika samalle riville, muut tiedot ja painike niiden alle koko leveydelle. Näin lomake alkaa puhelimella noin 40 px aiemmin jokaista päivää kohden. */ @container paivalista (max-width:38rem){ .paiva{ grid-template-columns:auto minmax(0,1fr); gap:0 var(--v3); align-items:baseline; } .paiva:not(.paiva--kiinni) .paiva__tiedot{ display:contents; } .paiva__pvm{ grid-column:1; } .paiva__aika{ grid-column:2; } .paiva__tiedot > :not(.paiva__aika){ grid-column:1 / -1; } .paiva__linkki, .paiva__tilaa{ grid-column:1 / -1; justify-self:start; margin-top:var(--v3); } .paiva.paiva--kiinni{ gap:0 var(--v3); } } /* ---------- REKO-tilaus: johdanto ---------- */ .tilaus__johdanto{ margin-top:var(--v5); } /* Hinnastolinkki omalle rivilleen kappaleen loppuun. */ .tilaus__johdanto .nuoli{ display:flex; width:max-content; margin-top:var(--v2); } /* WP: hinnastolinkki on painikeryhmä kappaleen perässä. Väli kappaleesta on sama v2 kuin mockupissa. */ .tilaus__johdanto p:has(+ .wp-block-buttons){ margin-bottom:var(--v2); } .tilaus__johdanto .wp-block-button.nuoli{ margin-top:0; } /* Syvälinkki tai Tilaa-painike jakeluun, johon ei voi enää tilata. */ .tilaus__viesti{ margin:clamp(1.5rem, 3vw, 2rem) 0 0; max-width:46rem; font-size:.9375rem; line-height:1.55; } /* Hyppykohteet (Tilaa-painikkeet, syvälinkki, Jatka yhteystietoihin) pysähtyvät kiinteiden palkkien alle samoin kuin osioiden ankkurit. */ #otsikko-vaihe-jakelu, #otsikko-vaihe-tuotteet, #otsikko-vaihe-yhteystiedot, .tilaus__viesti, .vaihe .muutos{ scroll-margin-top:calc(var(--palkki) + var(--tiivis-korkeus) + 1.25rem); } /* ---------- Tilauslomake ---------- */ .tilaus__laatikko, .tilaus__kiitos, .tilaus__tyhja, .tilaus__ilmanjs{ margin-top:clamp(2rem, 4vw, 3rem); } /* Ilman JavaScriptiä lomake ei saa tuotteita eikä jakeluja, joten sen tilalla kerrotaan, miten tilaus tehdään muuten. */ .tilaus__ilmanjs{ max-width:60ch; font-size:var(--t-ingressi); line-height:1.7; } html.js .tilaus__ilmanjs{ display:none; } html:not(.js) .tilaus__laatikko{ display:none; } /* Tyhjä tila: yhteenkään jakeluun ei voi tilata. */ .tilaus__tyhja{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,27rem); gap:var(--v6) clamp(2rem, 5vw, 4rem); align-items:start; } .tilaus__tyhja-teksti{ margin:0; font-family:var(--otsikko); font-weight:500; font-size:clamp(1.25rem, 1.05rem + .85vw, 1.875rem); line-height:1.35; color:var(--muste); font-variation-settings:"opsz" 60; max-width:36ch; } @media (max-width:56rem){ .tilaus__tyhja{ grid-template-columns:minmax(0,1fr); } } /* ---------- Vaiheet ---------- */ .vaihe{ margin:0; padding:0; border:0; min-width:0; } .vaihe + .vaihe{ margin-top:clamp(2.5rem, 5vw, 3.5rem); } .vaihe__legend{ display:block; width:100%; padding:0; margin:0; } /* Yhteinen .lomakelaatikko h3 -sääntö on tehty postilistalomakkeen otsikolle, joten vaiheotsikot tarvitsevat tarkemman valitsimen. */ .lomakelaatikko .vaihe__otsikko{ display:flex; align-items:baseline; gap:.75rem; margin:0 0 var(--v4); padding:0 0 var(--v3); border-bottom:1px solid var(--muste); font-size:clamp(1.25rem, 1.12rem + .6vw, 1.625rem); line-height:1.2; } .vaihe__nro{ font-variant-numeric:lining-nums tabular-nums; color:var(--brandi); } .vaihe > .kentta__ohje, .vaihe__legend + .kentta__ohje{ margin:0 0 var(--v4); } .kentta__ohje{ margin:.45rem 0 0; font-size:.875rem; line-height:1.55; color:var(--hillitty); max-width:60ch; } /* ---------- Vaihe 1: jakelut ---------- */ /* Radiopainikkeet kortteina. Reunaviiva on --hillitty eikä vaalea --reuna, koska se on valittavan kohteen raja ja sen pitää erottua valkoisesta pohjasta vähintään 3:1. */ .jakelut{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap:var(--v3); } .jakelu{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.75rem; align-content:start; padding:var(--v4); background:var(--pinta); border:1px solid var(--hillitty); cursor:pointer; transition:border-color 180ms var(--helppo), background-color 180ms var(--helppo); } /* Valinnan paksumpi reuna piirretään päälle, jotta sisältö ei siirry. */ .jakelu::before{ content:""; position:absolute; inset:-1px; border:2px solid transparent; pointer-events:none; } .jakelu:hover{ border-color:var(--brandi); } .jakelu[data-valittu="true"]{ background:var(--nosto); } .jakelu[data-valittu="true"]::before{ border-color:var(--brandi); } .jakelu input{ grid-column:1; grid-row:1 / span 6; width:1.25rem; height:1.25rem; margin:.3rem 0 0; accent-color:var(--brandi); cursor:inherit; } .jakelu > span{ grid-column:2; display:block; } .jakelu__pvm{ font-family:var(--otsikko); font-weight:700; font-size:1.875rem; line-height:1; letter-spacing:-.02em; font-variation-settings:"opsz" 96; font-variant-numeric:lining-nums tabular-nums; color:var(--brandi); } .jakelu__aika{ margin-top:.4rem; font-weight:600; font-size:.9375rem; line-height:1.45; color:var(--muste); } .jakelu__nimi{ margin-top:.35rem; font-family:var(--otsikko); font-weight:700; font-size:1.125rem; line-height:1.3; font-variation-settings:"opsz" 24; color:var(--muste); } .jakelu__paikka{ font-size:.875rem; line-height:1.5; color:var(--hillitty); } .jakelu__raja{ margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--reuna-vahva); font-size:.875rem; line-height:1.5; color:var(--muste); } /* Suljettu jakelu on estetty kontrolli, mutta sen teksti ja syy pidetään luettavina: harmaa teksti kermaa vasten on 5,7:1. */ .jakelu[data-tila="suljettu"]{ background:var(--tausta); border-style:dashed; cursor:default; } .jakelu[data-tila="suljettu"]:hover{ border-color:var(--hillitty); } .jakelu[data-tila="suljettu"] .jakelu__pvm, .jakelu[data-tila="suljettu"] .jakelu__aika, .jakelu[data-tila="suljettu"] .jakelu__nimi{ color:var(--hillitty); } .jakelu[data-tila="suljettu"] .jakelu__raja{ font-weight:600; color:var(--brandi-tumma); } /* ---------- Vaihe 2: tuotteet ja yhteenveto ---------- */ /* Puhelimessa yhteenveto tulee tuotelistan perään ja kelluu sen päällä ruudun alalaidassa. Leveällä näytöllä se on oma palstansa listan vieressä ja pysyy näkyvissä, kun listaa vieritetään. */ .tilaus__tuoteosa{ display:block; } @media (min-width:60rem){ .tilaus__tuoteosa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(17rem, 21rem); gap:0 clamp(2rem, 4vw, 3rem); align-items:start; } } /* .piiloteksti (vain ruudunlukijalle) on tiedostossa jaettu/jaettu.css. */ /* Jakelun vaihdon jälkeen näkyvä ilmoitus siitä, mitä tilauksesta poistettiin tai pienennettiin. Ei poisteta mitään hiljaa. */ .muutos{ margin:var(--v4) 0 0; padding:var(--v4); background:var(--pinta); border:1px solid var(--muste); border-inline-start:2px solid var(--brandi); } .muutos p{ margin:0 0 var(--v2); font-size:.9375rem; line-height:1.55; } .muutos .muutos__otsikko{ font-weight:600; } .muutos ul{ margin:0 0 var(--v3); padding-inline-start:1.25rem; list-style:disc; font-size:.9375rem; line-height:1.55; } .muutos ul:last-child{ margin-bottom:0; } /* Rivin taitto seuraa listan omaa leveyttä, ei ikkunan leveyttä. */ .tuotteet__lista{ container-type:inline-size; container-name:tuotelista; margin-top:var(--v4); border-top:1px solid var(--reuna); } .tuote{ position:relative; padding-block:var(--v4); border-bottom:1px solid var(--reuna); } /* Valitun tuotteen tausta ja terrakottaviiva piirretään sisällön taakse, jotta valinta ei siirrä tekstiä. Ulottuma (12 px) mahtuu lomakelaatikon omaan sisennykseen, joten sivulle ei tule vaakavieritystä. */ .tuote::before{ content:""; position:absolute; z-index:0; inset-block:0; inset-inline:calc(-1 * var(--v3)); border-inline-start:2px solid transparent; background:transparent; pointer-events:none; } .tuote > *{ position:relative; z-index:1; } .tuote[data-tila="valittu"]::before{ background:var(--nosto); border-inline-start-color:var(--brandi); } .tuote__paa{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--v3); align-items:center; } @container tuotelista (min-width:20rem){ .tuote__paa{ grid-template-columns:minmax(0,1fr) auto; } .tuote__toiminto{ justify-self:end; text-align:end; } } .tuote__nimi{ display:block; font-family:var(--otsikko); font-weight:700; font-size:1.0625rem; line-height:1.3; font-variation-settings:"opsz" 24; color:var(--muste); } .tuote__hinta{ display:block; margin-top:.15rem; font-weight:600; font-size:.9375rem; font-variant-numeric:tabular-nums; color:var(--brandi); white-space:nowrap; } .tuote__kuvaus{ margin:.3rem 0 0; font-size:.875rem; line-height:1.55; color:var(--hillitty); max-width:44ch; } .tuote__jaljella{ margin:.35rem 0 0; font-size:.875rem; font-weight:600; line-height:1.5; color:var(--korostus); } .tuote__loppu{ margin:0; font-size:.9375rem; font-weight:600; line-height:1.5; color:var(--hillitty); } .tuote__lisaa{ display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.55rem 1.4rem; font-family:var(--leipa); font-weight:600; font-size:.9375rem; letter-spacing:.03em; color:var(--muste); background:transparent; border:1px solid var(--muste); border-radius:0; cursor:pointer; white-space:nowrap; transition:background-color 180ms var(--helppo), color 180ms var(--helppo); } .tuote__lisaa:hover{ background:var(--muste); color:var(--kerma); } /* ---------- Pakkausrivit ---------- */ /* Yksi rivi = yksi pakkauskoko ja sen kappalemäärä. Samalla tuotteella voi olla useita rivejä. Ryhmät rivittyvät luonnostaan: leveässä palstassa pakkauskoko ja kappalemäärä ovat rinnakkain, kapeassa allekkain. */ .tuote__rivit{ margin-top:var(--v3); } .pakkaus{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--v3) var(--v5); padding-block:var(--v3); border-top:1px solid var(--reuna-vahva); } .pakkaus__koot{ flex:0 1 auto; min-width:0; margin:0; padding:0; border:0; } .pakkaus__maara{ flex:none; } .pakkaus__nimio{ display:block; margin:0 0 var(--v2); padding:0; font-family:var(--leipa); font-size:var(--t-mikro); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--hillitty); line-height:1.4; } /* Pakkauskoon vaihtoehdot ovat oikeita radiopainikkeita. Painike on läpinäkyvänä nimilapun päällä, joten näppäimistö, nuolinäppäimet ja ruudunlukija toimivat kuten missä tahansa radioryhmässä. */ .koot{ display:flex; flex-wrap:wrap; } .koko{ position:relative; display:inline-flex; } .koko + .koko{ margin-inline-start:-1px; } .koko input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .koko span{ display:inline-flex; align-items:center; justify-content:center; min-width:3.5rem; min-height:2.75rem; padding:.5rem .7rem; font-weight:600; font-size:.9375rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--muste); background:var(--pinta); border:1px solid var(--muste); white-space:nowrap; transition:background-color 180ms var(--helppo), color 180ms var(--helppo); } .koko input:hover + span{ background:var(--nosto); color:var(--brandi); } .koko input:checked + span{ background:var(--muste); color:var(--kerma); } .koko input:focus-visible + span{ position:relative; z-index:1; outline:2px solid var(--brandi); outline-offset:2px; } /* Oma pakkauskoko grammoina. */ .pakkaus__muu{ margin-top:var(--v3); } .gramma{ display:inline-flex; align-items:center; gap:.35rem; padding-inline-end:.6rem; background:var(--pinta); border:1px solid var(--muste); } .gramma:focus-within{ border-color:var(--brandi); } .gramma input{ width:4.5rem; min-height:2.75rem; margin:0; padding:0 .25rem 0 .6rem; text-align:right; font-family:var(--otsikko); font-weight:500; font-size:1.125rem; font-variation-settings:"opsz" 24; font-variant-numeric:tabular-nums; color:var(--muste); background:transparent; border:0; border-radius:0; -webkit-appearance:none; appearance:none; } .gramma input:focus-visible{ outline-offset:-2px; } .gramma input[aria-invalid="true"]{ color:var(--brandi-tumma); } .gramma span{ font-size:.875rem; color:var(--hillitty); } .pakkaus__ohje{ margin:.35rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--hillitty); } /* Säädin: suorakulmainen, ohutreunainen, kolme solua. Kumpikin painike on 44 px kosketuskohde. */ .saadin{ display:inline-flex; align-items:stretch; background:var(--pinta); border:1px solid var(--muste); transition:border-color 180ms var(--helppo); } .saadin:focus-within{ border-color:var(--brandi); } .saadin__nappi{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.75rem; min-height:2.75rem; margin:0; padding:0; background:transparent; border:0; border-radius:0; cursor:pointer; font-family:var(--leipa); font-size:1.375rem; line-height:1; color:var(--muste); transition:background-color 180ms var(--helppo), color 180ms var(--helppo); } .saadin__nappi--vahenna{ border-inline-end:1px solid var(--muste); } .saadin__nappi--lisaa{ border-inline-start:1px solid var(--muste); } /* Hover vain laitteille, joilla on oikea osoitin. Kosketusnäytöllä napautuksen jälkeen jäävä hover-tila sai estetyn painikkeen näyttämään toimivalta. */ @media (hover:hover){ .saadin__nappi:not([aria-disabled="true"]):hover{ background:var(--nosto); color:var(--brandi); } } /* Estetty painike: haalea merkki kerman värisellä solulla, jotta se erottuu toimivista painikkeista myös ilman tekstiä. Estetyltä kontrollilta ei vaadita kontrastia; syy on aina kirjoitettuna painikkeen alla. */ .saadin__nappi[aria-disabled="true"]{ color:var(--reuna-vahva); background:var(--tausta); cursor:default; } .saadin__syote{ width:3.25rem; min-height:2.75rem; margin:0; padding:0; text-align:center; font-family:var(--otsikko); font-weight:500; font-size:1.125rem; font-variation-settings:"opsz" 24; font-variant-numeric:tabular-nums; color:var(--muste); background:transparent; border:0; border-radius:0; -webkit-appearance:none; appearance:none; } /* Yhteinen 3 px:n ulkorajaus piirtyisi säätimen reunan yli. */ .saadin__syote:focus-visible{ outline-offset:-2px; } .saadin__syote[aria-invalid="true"]{ color:var(--brandi-tumma); } /* Rivin määrä, arvio ja poisto. Arvio pysyy oikeassa laidassa, jolloin rivien hinnat ovat allekkain kuin hinnastossa. */ .pakkaus__yhteenveto{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--v4); } .pakkaus__kuvaus{ flex:1 1 11rem; margin:0; font-size:.9375rem; line-height:1.5; font-variant-numeric:tabular-nums; color:var(--muste); } .pakkaus__hinta{ margin:0 0 0 auto; font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums; color:var(--brandi); } .pakkaus__huomio{ flex:1 1 100%; margin:.25rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--hillitty); } /* Linkkimäiset painikkeet: Poista ja Lisää toinen pakkauskoko. */ .tuote__poista, .tuote__toinen{ display:inline-flex; align-items:center; min-height:2.75rem; padding:0 .15rem; margin:0; background:transparent; border:0; border-radius:0; cursor:pointer; font-family:var(--leipa); font-weight:600; font-size:.875rem; color:var(--brandi); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; white-space:nowrap; } .tuote__poista:hover, .tuote__toinen:hover{ color:var(--brandi-tumma); text-decoration-thickness:2px; } .tuote__toinen[aria-disabled="true"]{ color:var(--hillitty); text-decoration:none; cursor:default; } .tuote__ala{ display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--v4); } /* Viiva vain kg-tuotteille, joilla rivien alla on "Lisää toinen pakkauskoko". Kokonaisella linnulla alaosassa on vain piilossa olevat huomautukset, eikä tyhjän viivan pidä jäädä rivin alle. */ .tuote__ala--viiva{ border-top:1px solid var(--reuna-vahva); } .tuote__rajahuomio{ flex:1 1 100%; margin:.25rem 0 .5rem; font-size:.875rem; line-height:1.5; color:var(--hillitty); } .tuote__ala .virhe{ flex:1 1 100%; margin:.25rem 0 .5rem; } /* ---------- Yhteenveto valituista tuotteista ---------- */ .yhteenveto{ margin-top:var(--v5); padding:var(--v4); background:var(--nosto); border:1px solid var(--reuna-vahva); } .yhteenveto__otsikko{ margin:0 0 var(--v2); font-family:var(--leipa); font-weight:600; font-size:var(--t-mikro); letter-spacing:.2em; text-transform:uppercase; color:var(--hillitty); line-height:1.4; } .yhteenveto__jakelu{ margin:0 0 var(--v3); font-size:.875rem; line-height:1.5; color:var(--muste); } .yhteenveto__lista{ margin:0; } .yhteenveto__rivi{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.1rem .75rem; align-items:baseline; padding-block:.5rem; border-top:1px solid var(--reuna-vahva); } .yhteenveto__rivi:first-child{ border-top:0; padding-top:0; } .yhteenveto__nimi{ font-family:var(--otsikko); font-weight:500; font-size:1rem; font-variation-settings:"opsz" 24; color:var(--muste); } .yhteenveto__hinta{ font-weight:600; font-size:.9375rem; font-variant-numeric:tabular-nums; text-align:end; color:var(--muste); } .yhteenveto__maara{ grid-column:1 / -1; font-size:.875rem; line-height:1.5; color:var(--hillitty); font-variant-numeric:tabular-nums; } .yhteenveto__tulos{ margin-top:var(--v3); } .yhteenveto__tyhja{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--hillitty); } /* Valittu jakelu vaiheen 2 alussa. */ .tilaus__valittu{ margin:0 0 var(--v3); font-weight:600; color:var(--muste); } .tilaus__valittu .linkki{ font-weight:400; white-space:nowrap; } .yhteenveto__tiivis{ display:none; margin:0; font-size:.9375rem; line-height:1.4; color:var(--muste); font-variant-numeric:tabular-nums; } .yhteenveto__loppu{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem var(--v4); margin:0; padding-top:var(--v3); border-top:1px solid var(--muste); } .yhteenveto__loppu-nimi{ font-family:var(--leipa); font-weight:600; font-size:var(--t-mikro); letter-spacing:.2em; text-transform:uppercase; color:var(--hillitty); } .yhteenveto__loppu-arvo{ font-family:var(--otsikko); font-weight:700; font-size:clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height:1.1; font-variation-settings:"opsz" 72; font-variant-numeric:tabular-nums; color:var(--brandi); } .yhteenveto__nappula{ display:none; align-items:center; min-height:2.75rem; padding:0 .15rem; background:transparent; border:0; border-radius:0; cursor:pointer; font-family:var(--leipa); font-weight:600; font-size:.875rem; color:var(--brandi); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; } .yhteenveto__nappula:hover{ color:var(--brandi-tumma); text-decoration-thickness:2px; } .yhteenveto__huomio{ margin:var(--v3) 0 0; font-size:.875rem; line-height:1.55; color:var(--hillitty); max-width:52ch; } .yhteenveto[data-tila="tyhja"] .yhteenveto__runko, .yhteenveto[data-tila="tyhja"] .yhteenveto__loppu, .yhteenveto[data-tila="tyhja"] .yhteenveto__huomio{ display:none; } .yhteenveto[data-tila="valittu"] .yhteenveto__tyhja{ display:none; } @media (min-width:60rem){ /* Kiinteä tiivis palkki peittää sivun yläreunan, joten yhteenveto pysähtyy sen alapuolelle. */ .yhteenveto{ position:sticky; top:calc(var(--palkki) + var(--tiivis-korkeus) + var(--v4)); margin-top:0; } } @media (max-width:59.999rem){ /* Puhelimella tuotelista on pitkä, joten yhteenveto jää näkyviin listan päälle. Kiinteä alapalkki varaa ruudun alalaidan, joten yhteenveto pysähtyy sen yläpuolelle. */ .yhteenveto{ position:sticky; bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px)); z-index:2; /* Kelluva palkki tarvitsee oman reunansa. Vaalea --reuna-vahva erottuu lomakkeen valkoisesta pohjasta vain 1,5:1, jolloin palkin alle jäävä rivi näyttäisi olevan osa palkkia. Musteviiva erottaa kerrokset ilman varjoa tai pyöristystä. */ border-color:var(--muste); } /* Tyhjänä kiinnitetty palkki ei kertoisi mitään. */ .yhteenveto[data-tila="tyhja"]{ display:none; } /* Suljettuna yhteenveto on yksi rivi: "3 tuotetta · n. 57–75 €" ja painike, joka avaa erittelyn. */ .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki){ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--v2) var(--v4); padding-block:var(--v3); } .yhteenveto[data-tila="valittu"] .yhteenveto__nappula{ display:inline-flex; } .yhteenveto[data-tila="valittu"] .yhteenveto__tiivis{ display:block; } .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__otsikko, .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__jakelu, .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__runko, .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__loppu, .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__huomio{ display:none; } .yhteenveto[data-tila="valittu"]:not(.yhteenveto--auki) .yhteenveto__tulos{ margin-top:0; } .yhteenveto[data-tila="valittu"].yhteenveto--auki .yhteenveto__tiivis{ display:none; } /* Auki oleva erittely voi olla korkeampi kuin ruutu. */ .yhteenveto--auki{ max-height:70vh; overflow-y:auto; } /* Jatka yhteystietoihin: oma rivinsä tiivistetyn rivin alla. */ .yhteenveto[data-tila="valittu"] .yhteenveto__jatka{ display:inline-flex; flex:1 1 100%; min-height:2.75rem; padding:.55rem 1rem; font-size:.875rem; } .yhteenveto--auki .yhteenveto__jatka{ margin-top:var(--v3); } /* Kun tilauslomake on ruudulla (C, D), pohjapalkki väistyy (html.tilaus-nakyvissa, jaettu/myyntitila.js), ja yhteenveto saa ruudun alalaidan. */ html.tilaus-nakyvissa .yhteenveto{ bottom:env(safe-area-inset-bottom, 0px); } } /* Työpöydällä yhteenveto on listan vieressä, joten painiketta ei tarvita. */ .yhteenveto__jatka{ display:none; } /* ---------- Vaihe 3: yhteystiedot ja lähetys ---------- */ .vaihe--yhteystiedot > :not(.vaihe__otsikko){ max-width:46rem; } /* Sitovuusvahvistus ja vapaaehtoinen markkinointilupa ovat pari, joten niiden väli on tiiviimpi kuin kenttien väli. */ .vaihe--yhteystiedot .virhe--lupa[hidden] + .suostumus{ margin-top:calc(-1 * var(--v3)); } /* Kentät, joita etusivulla ei ole: puhelin ja tekstialue. Sama ulkoasu kuin etusivun teksti- ja sähköpostikentissä. */ .kentta input[type="tel"]{ width:100%; min-height:3rem; padding:.65rem 0 .55rem; font-family:var(--otsikko); font-weight:500; font-size:1.125rem; color:var(--muste); font-variation-settings:"opsz" 24; background:transparent; border:0; border-bottom:1.5px solid var(--muste); border-radius:0; transition:border-color 180ms var(--helppo); } /* Tekstialue saa koko reunuksen, koska pelkkä alaviiva ei kerro kentän korkeutta. */ /* WP: rajattu tilauslomakkeeseen, koska yhteydenottolomakkeen tekstialue (osiot.css) on erilainen. */ #tilaus-lomake .kentta textarea{ width:100%; min-height:7.5rem; padding:.75rem; font-family:var(--leipa); font-size:1rem; line-height:1.6; font-weight:400; font-variation-settings:normal; color:var(--muste); background:transparent; border:1px solid var(--muste); border-radius:0; resize:vertical; transition:border-color 180ms var(--helppo); } #tilaus-lomake .kentta textarea:hover{ border-color:var(--brandi); } /* Lähetyspainikkeen estetty tila. Painike pysyy fokusoitavana ja kertoo itse, miksi sitä ei voi vielä painaa. */ .nappi[aria-disabled="true"]{ background:var(--hillitty); border-color:var(--hillitty); cursor:default; } .nappi[aria-disabled="true"]:hover{ background:var(--hillitty); } .lomake__syy{ display:none; margin:var(--v3) 0 0; font-size:.875rem; line-height:1.55; color:var(--brandi-tumma); text-align:center; } .nappi[aria-disabled="true"] ~ .lomake__syy{ display:block; } /* ---------- Kiitostila ja tilauksen yhteenveto ---------- */ /* Yhteinen .kiitos p -sääntö tekee kiitostekstistä ison vihreän otsikon. Yhteenvedon kappaleet palautetaan leipätekstiksi. */ .kuitti{ margin-top:var(--v5); padding-top:var(--v5); border-top:1px solid var(--reuna-vahva); max-width:40rem; } .kiitos .kuitti p{ margin:0 0 var(--v3); font-family:var(--leipa); font-weight:400; font-size:.9375rem; line-height:1.6; font-variation-settings:normal; color:var(--muste); } .kuitti__tiedot{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem var(--v4); margin:0 0 var(--v2); } .kuitti__tiedot dt{ font-size:var(--t-mikro); font-weight:600; line-height:1.9; letter-spacing:.2em; text-transform:uppercase; color:var(--hillitty); } .kuitti__tiedot dd{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--muste); } .kuitti__kalenteri{ display:inline-flex; align-items:center; min-height:2.75rem; font-weight:600; font-size:.9375rem; } .kuitti .yhteenveto__lista{ margin-top:var(--v4); border-top:1px solid var(--muste); padding-top:var(--v3); } .kiitos .kuitti .yhteenveto__loppu{ display:flex; margin:var(--v2) 0 0; font-family:var(--leipa); } .kiitos .kuitti .yhteenveto__huomio{ margin-top:var(--v3); font-size:.875rem; color:var(--hillitty); } /* ---------- Käyttötestin jälkeiset lisäykset ---------- */ /* Tyhjän tilan viittaus sivun alun postilistalomakkeeseen. */ .tilaus__tyhja-viittaus{ margin:var(--v4) 0 0; font-size:var(--t-ingressi); line-height:1.7; color:var(--muste); max-width:48ch; } /* Jakelun vaihdon ilmoitus on korttien alla. */ .vaihe .muutos{ margin-top:var(--v4); } .muutos .muutos__lopuksi{ margin:0; color:var(--hillitty); font-size:.875rem; } /* Kokonaisen linnun kappalehinta heti kilohinnan alla. */ .tuote__kpl-hinta{ display:block; margin-top:.1rem; font-size:.875rem; line-height:1.5; font-variant-numeric:tabular-nums; color:var(--hillitty); } /* Koko, joka on jo toisella rivillä, ei ole valittavissa. Katkoviiva ja kerman värinen pohja erottavat sen; teksti pysyy luettavana (5,7:1). */ .koko input:disabled{ cursor:default; } .koko input:disabled + span{ color:var(--hillitty); background:var(--tausta); border-style:dashed; } .koko input:disabled:hover + span{ color:var(--hillitty); background:var(--tausta); } .pakkaus__koot-ohje{ margin:.35rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--hillitty); max-width:40ch; } /* Rivi, jolta puuttuu oma koko. */ .pakkaus__kuvaus--puuttuu{ color:var(--brandi-tumma); font-weight:600; }