/* Julkisen tilaussivun GENEERINEN tyyli: perusasettelu ja tilauskortit. Kaikille asiakkaille sama — asiakaskohtainen ilme tulee kehyksen omasta tyylitiedostosta ja lehtikohtaisista väreistä (--paa / --korostus / --otsikko), jotka Tilaa.razor kirjoittaa -elementin style-attribuuttiin. Muuta tätä tiedostoa vain, kun lomake itse muuttuu. Yksittäisen lehden ilmeen muutokset kuuluvat asiakkaan JSON-tiedostoon. */ :root { /* Varavärit: lehtikohtaiset arvot yliajavat nämä inline-tyylillä. */ --paa: #f37021; --korostus: #21a4f3; --otsikko: #00a3ce; --pohja: #e6e6e6; --viiva: #dadada; --musta: #111111; --teksti: #222222; --himmea: #666666; --valkoinen: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--pohja); color: var(--teksti); font-family: Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; } a { color: inherit; text-decoration: none; } .kuori { min-height: 100vh; background: var(--valkoinen); display: flex; flex-direction: column; } /* Sivun sisältöleveys. Kehykset käyttävät samoja luokkia, jotta ylä- ja alatunniste asettuvat samaan linjaan lomakkeen kanssa. */ .verkosto-sisa, .nimio-sisa, .valikko-sisa, .osio-sisa, .alatunniste-sisa { width: min(1140px, calc(100% - 28px)); margin: 0 auto; } main { background: var(--valkoinen); flex: 1; } .tilaukset { padding: 40px 0 40px; } .osio-otsikko { margin-bottom: 22px; border-bottom: 5px solid var(--paa); } .osio-otsikko h1 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; color: var(--musta); } .tila { margin: 0 0 18px; padding: 14px 16px; background: var(--pohja); font-weight: 700; } .tila[hidden] { display: none; } .tila a { color: var(--korostus); text-decoration: underline; } .kortit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .kortti { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--valkoinen); border: 1px solid var(--viiva); border-radius: 4px; } .kortti[hidden] { display: none; } .kortti-kuva { min-height: 150px; padding: 20px; color: var(--valkoinen); background: linear-gradient(135deg, var(--paa) 0%, #111111 100%); } .kortti[data-kortti="digi"] .kortti-kuva { background: linear-gradient(135deg, var(--korostus) 0%, #000000 100%); } .kortti-kuva h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform: uppercase; } .alkaen { margin: 48px 0 0; min-height: 1.6em; font-size: 1.2rem; font-weight: 700; } .alkaen span { font-size: 2.4rem; line-height: 1; } .kortti-sisalto { display: flex; flex-direction: column; gap: 18px; padding: 22px; } .valinnat { display: grid; gap: 14px; } .valintaryhma { display: grid; gap: 7px; } .valintaryhma[hidden] { display: none; } .valintaotsikko { color: var(--himmea); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .napit { display: flex; flex-wrap: wrap; gap: 8px; } .nappi { min-height: 38px; padding: 0 14px; border: 1px solid var(--viiva); border-radius: 3px; background: var(--valkoinen); color: var(--musta); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .nappi:hover, .nappi.valittu { border-color: var(--paa); background: var(--paa); color: var(--valkoinen); } .valittu-hinta { width: fit-content; padding: 10px 13px; background: var(--pohja); color: var(--musta); font-size: 1.05rem; font-weight: 800; } .kortti h3 { margin: 0; color: var(--otsikko); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; } .kortti ul { margin: 0; padding-left: 19px; } .kortti li { margin: 7px 0; } .tilaa-painike { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: fit-content; margin-top: auto; padding: 0 28px; background: var(--paa); color: var(--valkoinen); border-radius: 3px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; transition: background 160ms ease, transform 160ms ease; } .tilaa-painike:hover { background: var(--korostus); transform: translateY(-1px); } .huomautus { margin: 24px 0 0; color: var(--himmea); font-size: 0.85rem; } @media (max-width: 860px) { .kortit { grid-template-columns: 1fr; } }