@charset "UTF-8";
/*
* Collect scss files and process them as prh-styles.css.
*/
/*
* prh.fi colours
*/
/* PRH Design Systemistä: */
/* Varuiksi valkoinen ja musta myös muuttujiin.
* Käyttö muuttujana esim svg-ikonien rakentamisessa
* Sassissa.
*/
/* Ensimmäisen leiskamallin mukana tuli värejä,
* joita ei ollut siinä vaiheessa käytössä muualla.
* Näitä tarkennettiin myöhemmin.
*/
/* Tässä viralliset värit jotka tarkentuivat
* toisen katselmuksen aikana.
*/
/*
* Bootstrap overrides
*/
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
/* Font-face määrittelyt
* TTF-fontit tuntuvat toimivan aika kehnosti, mutta laitetaan mukaan
* mainostoimiston suosituksesta.
*/
@font-face {
font-family: "FagoCompPro-Medium";
src: local("FagoCompPro-Medium"), url("/assets/fonts/FagoCompPro-Medium.ttf") format("ttf");
}
@font-face {
font-family: "FagoCompPro-CondBold";
src: local("FagoCompPro-CondBold"), url("/assets/fonts/FagoCompPro-CondBold.ttf") format("ttf");
}
@font-face {
font-family: "FagoCompPro-Bold";
src: local("FagoCompPro-Bold"), url("/assets/fonts/FagoCompPro-Bold.ttf") format("ttf");
}
@font-face {
font-family: "FagoScCompPro-Medium";
src: local("FagoScCompPro-Medium"), url("/assets/fonts/FagoScCompPro-Medium.ttf") format("ttf");
}
@font-face {
font-family: "FagoScCompPro-CondBold";
src: local("FagoScCompPro-CondBold"), url("/assets/fonts/FagoScCompPro-CondBold.ttf") format("ttf");
}
@font-face {
font-family: "FagoScCompPro-Bold";
src: local("FagoScCompPro-Bold"), url("/assets/fonts/FagoScCompPro-Bold.ttf") format("ttf");
}
/* Woff2-formaatin fontit on otettu PRH:n Design Systemistä
* ja nämä toimivat.
*/
@font-face {
font-family: "FagoWebPro-CondBold";
src: local("FagoWebPro-CondBold"), url("/assets/fonts/FagoWebPro-CondBold.woff") format("woff"), url("/assets/fonts/FagoWebPro-CondBold.woff2") format("woff2");
}
@font-face {
font-family: "FagoWebPro-Medium";
src: local("FagoWebPro-Medium"), url("/assets/fonts/FagoWebPro-Medium.woff") format("woff"), url("/assets/fonts/FagoWebPro-Medium.woff2") format("woff2");
}
@font-face {
font-family: "FagoWebPro-CondBold";
src: local("FagoWebPro-CondBold"), url("/assets/fonts/FagoWebPro-CondBold.woff") format("woff"), url("/assets/fonts/FagoWebPro-CondBold.woff2") format("woff2");
}
/* Peruskoko 16 px johon suhteelliset koot vertaantuvat. */
html {
font-size: 16px;
}
/* Kun suunnittelupuolelta linjattiin että käytetään systeemifontteja,
* body-määrittely jäi pois. Komponenteilla on myöhemmin omia määrittelyjä.
* Periaatteessa kaikki pitäisi olla ok ilman body-määrettä, jos se
* tarvii laittaa niin voi sen laittaa. Nyt kuitenkin pois päältä kun
* malli hyväksyttiin ilman.
*/
body {
/*font-family: 'FagoWebPro-Medium', sans-serif;*/
}
/* Otsikkokomponenttien ja niiden rinnakkaisluokkien tyylit */
h1,
.h1 {
/*font-family: 'FagoCompPro-Bold', 'FagoWebPro-Bold', sans-serif;*/
font-weight: 700;
font-size: 2.25rem;
}
h2 .h2 {
font-size: 1.75rem;
color: #002776;
}
/* Eräitä spesifejä otsikkoja pyydettiin säätämään erikseen. */
#otsikko-ajankohtaista {
font-size: 1.75rem;
color: #002776;
}
#otsikko-asiakastiedotteet,
#otsikko-uutiset {
font-size: 1.75rem;
color: #7b207f;
}
#otsikko-kysymykset {
font-size: 1.25rem;
}
/* Yleiset linkkityylit. */
a {
color: #035ca7;
}
a:focus, a:hover {
color: #d0268f;
}
a:focus {
outline: 2px solid #035ca7;
}
main a {
text-decoration: none;
}
main a:hover {
text-decoration: underline;
}
/* Jos linkin kanssa on ikoni, se asemoituu näin. Lainattu PRH:n Design Systemistä. */
a.link-icon::before, a.link-icon::after {
display: inline-block;
background-repeat: no-repeat;
background-size: 1rem 1rem;
width: 1rem;
height: 1rem;
margin-left: 0.25rem;
margin-right: 0.25rem;
vertical-align: -0.175rem;
}
/* Focus linkeille, jotka ovat myös otsikoita tai listan osia. */
h1 > a:focus,
h2 > a:focus,
h3 > a:focus,
h4 > a:focus,
h5 > a:focus,
h6 > a:focus,
p > a:focus,
div > a:focus,
ol a:focus,
ul a:focus,
td a:focus,
label a:focus,
dd a:focus {
outline: 2px solid #035ca7;
color: #d0268f;
}
.bg-primary a:focus {
outline: 2px solid white;
}
/* Linkin yhteydessä olevat ikonit luodaan paloista. Näin voidaan vaihtaa ikonin
* väriä CSS:llä. Menetelmä lainattu PRH:n Design Systemistä.
* Perustekstin yhteydessä. */
a.link-internal {
/* Making chevre icon */
}
a.link-internal::after {
content: "";
background-image: url('data:image/svg+xml,');
}
a.link-internal:hover::after, a.link-internal:focus::after, a.link-internal:active::after {
background-image: url('data:image/svg+xml,');
}
/* link-internal-reverse katsoo vasempaan. */
a.link-internal-reverse {
/* Making reverse chevre icon */
}
a.link-internal-reverse::before {
content: "";
background-image: url('data:image/svg+xml,');
}
a.link-internal-reverse:hover::before, a.link-internal-reverse:focus::before, a.link-internal-reverse:active::before {
background-image: url('data:image/svg+xml,');
}
/* Ulkoiset linkit.
* Ulkoisen linkin HTML on tämmöinen:
* Facebook (avautuu uuteen ikkunaan)
*/
a.link-external {
/* Making external link icon */
}
a.link-external::after {
content: "";
background-image: url('data:image/svg+xml,');
}
a.link-external:hover::after, a.link-external:focus::after, a.link-external:active::after {
background-image: url('data:image/svg+xml,');
}
/* Tekstiin ja svg-ikoineihin liittyviä määrittelyjä, kun alla on tumma tausta.*/
.prh-tumma-tausta,
.prh-tumma-tausta h1, .prh-tumma-tausta .h1,
.prh-tumma-tausta h2, .prh-tumma-tausta .h2,
.prh-tumma-tausta h3, .prh-tumma-tausta .h3,
.prh-tumma-tausta h4, .prh-tumma-tausta .h4,
.prh-tumma-tausta h5, .prh-tumma-tausta .h5,
.prh-tumma-tausta h6, .prh-tumma-tausta .h6,
.prh-tumma-tausta li {
color: white;
}
.prh-tumma-tausta a {
color: white;
}
.prh-tumma-tausta a:focus, .prh-tumma-tausta a:hover {
color: #ffffff;
text-decoration: none;
}
.prh-tumma-tausta a:focus {
outline: 2px solid #ffffff;
}
.prh-tumma-tausta a.link-internal::after {
content: "";
background-image: url('data:image/svg+xml,');
}
.prh-tumma-tausta a.link-internal:hover::after, .prh-tumma-tausta a.link-internal:focus::after, .prh-tumma-tausta a.link-internal:active::after {
background-image: url('data:image/svg+xml,');
}
.prh-tumma-tausta a.link-internal-reverse::before {
content: "";
background-image: url('data:image/svg+xml,');
}
.prh-tumma-tausta a.link-internal-reverse:hover::after, .prh-tumma-tausta a.link-internal-reverse:focus::after, .prh-tumma-tausta a.link-internal-reverse:active::after {
background-image: url('data:image/svg+xml,');
}
.prh-tumma-tausta a.link-external::after {
content: "";
background-image: url('data:image/svg+xml,');
}
.prh-tumma-tausta a.link-external:hover::after, .prh-tumma-tausta a.link-external:focus::after, .prh-tumma-tausta a.link-external:active::after {
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a {
color: #000000;
}
.yleisimmat-palvelut-linkkikortti a:focus, .yleisimmat-palvelut-linkkikortti a:hover {
color: #000000;
text-decoration: underline;
background-color: #d9effa;
}
.yleisimmat-palvelut-linkkikortti a.link-internal::after {
content: "";
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a.link-internal:hover::after, .yleisimmat-palvelut-linkkikortti a.link-internal:focus::after, .yleisimmat-palvelut-linkkikortti a.link-internal:active::after {
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a.link-internal-reverse::before {
content: "";
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a.link-internal-reverse:hover::after, .yleisimmat-palvelut-linkkikortti a.link-internal-reverse:focus::after, .yleisimmat-palvelut-linkkikortti a.link-internal-reverse:active::after {
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a.link-external::after {
content: "";
background-image: url('data:image/svg+xml,');
}
.yleisimmat-palvelut-linkkikortti a.link-external:hover::after, .yleisimmat-palvelut-linkkikortti a.link-external:focus::after, .yleisimmat-palvelut-linkkikortti a.link-external:active::after {
background-image: url('data:image/svg+xml,');
}
/* Fonttien koonti muuttujiksi.*/
/* Fonttien määrittely komponenteille.*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
p,
input,
textarea,
li,
dd,
.prh-sisaltoalue footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 400;
font-display: swap;
}
.prh-sisaltoalue h2, .prh-sisaltoalue .h2,
.prh-sisaltoalue h3, .prh-sisaltoalue .h3 {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.prh-sisaltoalue p a,
.prh-sisaltoalue li a,
.prh-sisaltoalue footer a {
color: #002776;
font-weight: 500;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* btn-primary
* Perusnappi yleiseen käyttöön.
*/
.btn-primary {
background-color: #002776;
border-color: #002776;
color: #ffffff;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
padding: 0.5rem 1.5rem;
}
.btn-primary:focus, .btn-primary:hover {
background-color: #d0268f;
border-color: #d0268f;
color: #ffffff;
text-decoration: none;
}
.btn-primary:focus {
outline: 2px solid #035ca7;
box-shadow: 0 0 0 0 #ffffff;
}
/* btn-secondary
* Tässä napissa ei ole taustaa, mutta
* focus ja hover tuovat napin muodon esiin.
*/
.btn-secondary {
background-color: transparent;
border-color: #ffffff;
color: #ffffff;
margin: 1rem 0;
border-radius: 2.5rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.btn-secondary:focus, .btn-secondary:hover {
background-color: #d0268f;
border-color: #ffffff;
color: #ffffff;
}
.btn-secondary:focus img, .btn-secondary:hover img {
filter: brightness(999%);
}
/* btn-header
* Tämä on käytössä headerissa.
*/
.btn-header {
background-color: white;
border-color: #002776;
color: #002776;
margin-left: 1rem;
min-width: 7rem;
width: 78px;
}
.btn-header:focus, .btn-header:hover {
background-color: #faeafd;
border-color: #002776;
color: white;
}
/* btn-footer
* Käytössä footterissa. Voisi käyttää tummalla pohjalla muuallakin
* jos tarves.
*/
.btn-footer {
background-color: #035ca7;
text-decoration: none;
margin-right: 1rem;
}
.btn-footer:focus, .btn-footer:hover {
background-color: #f8a9e2;
border-color: #f8a9e2;
color: #002776 !important;
}
/* btn-link
* Jos napista pitää tehdä linkin näköinen.
*/
.btn-link {
color: black;
text-decoration: none;
border: 0;
border-radius: 0;
}
.btn-link:focus, .btn-link:hover {
color: #d0268f;
text-decoration: underline;
}
/* btn-vaaleansininen
* Jossain oli käytössä erillinen vaaleansininen nappi.
*/
.btn-vaaleansininen {
background-color: #e8f7fb;
border-color: #e8f7fb;
color: #035ca7;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
.btn-vaaleansininen:focus, .btn-vaaleansininen:hover {
background-color: #d0268f;
border-color: #d0268f;
color: white;
text-decoration: none;
}
/* btn-levea
* Tämä taitaa olla nyt turha, kun leiskamallia muutettiin
* vielä HTML-katselmuksen jälkeen.
*/
.btn-levea {
width: 100%;
margin: 1rem 0;
padding: 0.75rem;
}
/* btn-ikonilla
* Lisäluokka jonkun muun nappityylin kylkeen. Tällä
* saa ikonin napin sisällä näyttämään järkevältä.
*/
.btn-ikonilla {
display: flex;
justify-content: center;
align-items: center;
max-width: 24rem;
}
.btn-ikonilla span {
display: inline-block;
padding: 0 0.5rem;
}
.btn-ikonilla img {
max-width: 24px;
height: auto;
}
.btn-ikonilla .ikoni-ympyra {
position: static;
}
.btn-ikonilla:focus .ikoni-ympyra, .btn-ikonilla:hover .ikoni-ympyra {
background-color: transparent;
}
.btn-ikonilla.btn-primary:focus img, .btn-ikonilla.btn-primary:hover img {
filter: brightness(999%);
}
/* Headerin spesiaalinappeja. */
.prh-header-hampurilainen,
.prh-header-hakunappi {
color: #002776;
border-color: #002776;
border-radius: 2px;
}
.prh-header-hampurilainen span,
.prh-header-hakunappi span {
color: #002776;
}
.prh-header-hampurilainen img, .prh-header-hampurilainen.prh-header-standalone-link img,
.prh-header-hakunappi img,
.prh-header-hakunappi.prh-header-standalone-link img {
width: 20px;
height: 20px;
margin-left: 0.5rem;
margin-top: -2px;
}
@media (max-width: 991px) {
.prh-header-hampurilainen,
.prh-header-hakunappi {
border: 0px;
margin-right: 1rem;
min-width: auto;
}
}
.prh-header-hampurilainen[aria-expanded=true] {
background-color: #e8f7fb;
}
.prh-header-hampurilainen[aria-expanded=true]:focus, .prh-header-hampurilainen[aria-expanded=true]:hover {
background-color: #f8a9e2;
border-color: #f8a9e2;
color: white;
}
/* Nämä napit ovat mobiilivalikon sisällä vaihtamassa navigaatiotasoa. */
.btn-mobiilinavigaatio,
.btn-mobiilinavigaatio-kaanteinen {
background-color: #f7f7f7;
border: 0px;
color: black;
border-radius: 0px;
padding-top: 0.825rem;
font-weight: 700;
background-repeat: no-repeat;
background-position: center center;
text-indent: -9999px;
width: 2.5rem;
}
.btn-mobiilinavigaatio:focus, .btn-mobiilinavigaatio:active, .btn-mobiilinavigaatio:hover,
.btn-mobiilinavigaatio-kaanteinen:focus,
.btn-mobiilinavigaatio-kaanteinen:active,
.btn-mobiilinavigaatio-kaanteinen:hover {
background-color: #d0268f;
color: white;
}
.btn-mobiilinavigaatio {
border-left: 1px solid #ebebeb;
box-shadow: 0 1px 0 0 #d9d9d9;
background-image: url('data:image/svg+xml,');
}
.btn-mobiilinavigaatio-kaanteinen {
min-height: 3rem;
background-image: url('data:image/svg+xml,');
}
/* Mobiilinavigaatiossa paluu edelliselle tasolle. */
.btn-valikko-takaisin {
padding: 0.825rem 0.5rem;
}
/* Karkeat linjat miten sivun visuaaliset osiot jaetaan.
*/
body {
background-color: #f0f7fd;
}
body > header {
background-color: white;
border-bottom: 1px solid #b1b1b1;
}
body > main {
background-color: white;
padding-bottom: 2rem;
}
body > footer {
background-color: #00009f;
}
/* Kaikki alert-boksit. */
.tiedoterivit {
border-bottom: 1px solid #ebebeb;
background-color: #ffffff;
}
/* Yksi alert-boksi. */
.tiedotekappale {
background-color: #f1d2c3;
background-image: url("/assets/gr/alert-circle.png");
background-repeat: no-repeat;
background-size: 2rem;
background-position: 1rem 1rem;
border-radius: 2px;
margin: 0.5rem;
padding: 0.75rem 1rem 0.75rem 3.75rem;
}
.tiedotekappale a {
color: #000000;
}
.tiedotekappale a:focus, .tiedotekappale a:hover {
color: black;
text-decoration: none;
}
.tiedotekappale strong {
font-family: "FagoCompPro-Bold", sans-serif;
font-weight: 700;
display: inline-block;
padding-right: 2rem;
}
/* Bootstrap-ylikirjoitus. */
.alert {
padding: 0;
margin: 0;
}
/* Alert-boksin sisällä olevan sulkemisrastin tyyli. */
.alert-dismissable .close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.5rem 1rem;
font-size: 1.5rem;
font-weight: 700;
text-shadow: 0 1px 0 #ffffff;
background-color: transparent;
border: 0;
}
.alert-dismissable .close:focus {
outline: 2px solid #002776;
}
/* Joka sivulla toistuva ylätunnistealue. */
.prh-header {
border-bottom: 1px solid #ebebeb;
padding: 1rem 0px;
}
@media (max-width: 991px) {
.prh-header {
border-bottom: 0px;
}
}
@media (max-width: 490px) {
.prh-header ul {
padding-left: 0px;
}
.prh-header .prh-header-kielivalikko,
.prh-header .prh-header-standalone-link {
padding-left: 1px;
padding-right: 1px;
margin-left: 1px;
margin-right: 1px;
}
}
/* Logon esittäminen. */
.prh-header-wrapper-logo {
display: flex;
flex-direction: row;
align-items: center;
}
.prh-header-wrapper-logo img {
width: 60px;
height: 44px;
margin-right: 1rem;
}
@media (max-width: 575px) {
.prh-header-wrapper-logo img {
margin-left: 0.5rem;
}
}
.prh-header-wrapper-logo p {
font-family: "FagoCompPro-Medium", "FagoWebPro-Medium", sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.5rem;
margin-bottom: 0;
}
@media (max-width: 991px) {
.prh-header-wrapper-logo p {
display: none;
}
}
/* Extra linkkien asemointi, jotka eivät kuulu
* päävalikkoon mutta ovat ylätunnisteessa silti.
*/
.prh-header-wrapper-actions {
display: flex;
flex-direction: row;
align-items: center;
}
@media (max-width: 991px) {
.prh-header-wrapper-actions .napin-sisukset-paallekkain {
display: flex;
flex-direction: column;
}
}
/* Yhteystiedot ja Haku -linkit on merkattu
* tällä luokalla.
*/
.prh-header-standalone-link {
display: inline-block;
color: black;
text-decoration: none;
font-weight: 500;
}
.prh-header-standalone-link:focus:not(.btn-header), .prh-header-standalone-link:hover:not(.btn-header) {
color: #000000;
text-decoration: underline;
}
.prh-header-standalone-link img {
width: 25px;
height: 25px;
margin-right: 0.5rem;
margin-top: -3px;
}
/* Päävalikon tyylit*/
/* kaksi päävalikkoa:
* .prh-paavalikko on tabletin ja mobiilin, ruudunlukijan ja crawlerin valikko
* .prh-paavalikko-vain-ylin-taso on desktopin valikko
* #paavalikko on wrapper .prh-paavalikko ja .prh-oikopolut valikoiden ympärillä
*/
@media (min-width: 991px) {
#paavalikko .prh-paavalikko,
#paavalikko .prh-oikopolut {
display: none;
}
}
/* Mobiilivalikko. */
.prh-paavalikko .nav-item {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #ebebeb;
}
.prh-paavalikko .nav-item:last-child {
border-bottom: 0px;
}
.prh-paavalikko .nav-item .nav-link {
color: black;
padding: 0.825rem 1rem;
flex-grow: 1;
}
.prh-paavalikko .nav-item .nav-link:focus, .prh-paavalikko .nav-item .nav-link:hover {
color: #d0268f;
text-decoration: underline;
}
.prh-paavalikko .nav-item .nav-link:focus {
outline: 2px solid #035ca7;
}
@media (max-width: 576px) {
.prh-paavalikko .nav-item .nav-link {
padding-left: 0.5rem;
padding-right: 0rem;
}
}
.prh-paavalikko .nav-item .etusivu-ylin-taso, .prh-paavalikko .nav-item.etusivu-ylin-taso {
font-weight: 700;
padding: 0.825rem 0rem 0.825rem 0.5rem;
background-color: #e8f7fb;
width: 100%;
display: inline-block;
}
.prh-paavalikko .alavalikko {
display: none;
flex-direction: column;
}
.prh-paavalikko > .alavalikko > ul {
padding-left: 0px;
}
.prh-paavalikko .aktiivinen-polku,
.prh-paavalikko .aktiivinen {
background-color: #e8f7fb;
}
.prh-paavalikko .nav-otsikko {
padding: 0.825rem 0.25rem;
background-color: #e8f7fb;
font-weight: 700;
border-top: 1px solid #ebebeb;
}
/* .prh-paavalikko-vain-ylin-taso on desktop-näkymän päävalikko
*/
.prh-paavalikko-vain-ylin-taso {
/* Tämä on se mistä tulee näkyviin desktopissa päävalikkoon
* liittyvä alasvetovalikko. Itse linkki ja siihen liittyvä väkänen siis.
*/
}
@media (max-width: 991px) {
.prh-paavalikko-vain-ylin-taso {
display: none;
/* lisättävä aria-hidden="true" myös */
}
}
.prh-paavalikko-vain-ylin-taso a {
color: #000000;
display: block;
font-family: "FagoWebPro-Medium", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 0.5rem 0.5rem;
border-radius: 0.25rem;
}
.prh-paavalikko-vain-ylin-taso a.aktiivinen {
background-color: #002776;
color: #ffffff;
}
.prh-paavalikko-vain-ylin-taso a:focus, .prh-paavalikko-vain-ylin-taso a:hover, .prh-paavalikko-vain-ylin-taso a.aktiivinen:focus, .prh-paavalikko-vain-ylin-taso a.aktiivinen:hover {
color: #000000;
background-color: #ebebeb;
}
.prh-paavalikko-vain-ylin-taso a:focus {
outline: 2px solid #002776;
box-shadow: 0 0 0 0;
outline-offset: 0px;
position: relative;
z-index: 10;
}
.prh-paavalikko-vain-ylin-taso > ul:not(.dropdown-menu) {
padding-left: 0px;
margin-bottom: 0px;
display: flex;
flex-direction: row;
}
.prh-paavalikko-vain-ylin-taso > ul:not(.dropdown-menu) li {
list-style: none;
padding: 1.25rem 1rem;
}
.prh-paavalikko-vain-ylin-taso > ul:not(.dropdown-menu) li:first-child {
padding-left: 0px;
}
@media (max-width: 1210px) {
.prh-paavalikko-vain-ylin-taso > ul:not(.dropdown-menu) li {
padding: 1.25rem 0.5rem;
}
}
.prh-paavalikko-vain-ylin-taso li.dropdown {
display: flex;
flex-wrap: wrap;
/* Tämä tekee koko napista harmaan/sinisen, eli linkki+toggle eivät
* näytä erilaiselta keskenään.
* Osiossa on kolme !important-määrettä. Nämä ovat sen tähden että
* .aktiivinen-merkattuna pysyvät silti näkyvissä. */
/* Jos linkki on aktiivinen-tilassa, väkänen tarvitsee näyttää
* vähän erilaiselta.
*/
/* Tämä on se mikä tulee sitten näkyviin kun alasvetovalikon avaa.*/
}
.prh-paavalikko-vain-ylin-taso li.dropdown:hover > a, .prh-paavalikko-vain-ylin-taso li.dropdown:hover > .dropdown-toggle {
background-color: #ebebeb !important;
color: #000000;
}
.prh-paavalikko-vain-ylin-taso li.dropdown:hover > a::after, .prh-paavalikko-vain-ylin-taso li.dropdown:hover > .dropdown-toggle::after {
background-image: url("/assets/gr/caret-alas-musta.svg") !important;
}
.prh-paavalikko-vain-ylin-taso li.dropdown:hover > .dropdown-toggle::after {
background-color: #d9d9d9 !important;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle {
border: 0;
background: transparent;
padding: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
position: relative;
padding-left: 0.25rem;
padding-right: 0.5rem;
margin-left: -0.25rem;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle::after {
transition: all 0.05s;
background-color: #ebebeb;
border: none;
background-image: url("/assets/gr/caret-alas-musta.svg");
background-repeat: no-repeat;
background-size: 1rem;
background-position: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 2px;
vertical-align: middle;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle:focus:hover::after {
background-color: #b1b1b1;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle:focus {
outline: 0px solid #002776;
/*border-radius: 0.25rem;*/
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle:focus::after {
outline: 2px solid #002776;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-toggle.show::after {
transform: translateY(0) rotate(180deg);
}
.prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle {
background-color: #002776;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle::after {
background-color: transparent;
background-image: url("/assets/gr/caret-alas-valkoinen.svg");
}
.prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle:focus, .prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle:hover {
background-color: #ebebeb;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle:focus::after, .prh-paavalikko-vain-ylin-taso li.dropdown .aktiivinen + .dropdown-toggle:hover::after {
background-image: url("/assets/gr/caret-alas-musta.svg");
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
padding: 1rem 0;
border: 0;
box-shadow: 0.125rem 0.125rem 0.125rem 1px rgba(0, 0, 0, 0.5);
/* Jos alasvetovalikossa on palstat, merkataan se näin.
* 660px on tällaisen alasvetovalikon minimileveys ja maksimileveys on tässä
* määritelty myös. Maksimileveyttä ei pitäisi koskaan saavuttaa, koska koko
* navigaatioelementti poistuu käytöstä ruudun pienetessä.
* 660px levyinen kolmen palstan alasveto asettuu ruudulla hyvään paikkaan
* automaattisesti Bootstrapin luokkien ohjaamana, ei siis aiheuta bleedejä
* ruudun ulkopuolelle vaikka on näin leveä.
*/
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu .row {
flex-wrap: wrap;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul {
padding-left: 0;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul li {
padding: 0.5rem 0.5rem;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul li a {
display: flex;
padding: 0.25rem 1rem;
font-weight: normal;
text-wrap: wrap;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul li a:focus, .prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul li a:hover {
text-decoration: none;
border-radius: 0;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu ul li:not(:last-child) a {
border-bottom: 1px solid #ebebeb;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu.dropdown-kolme-palstaa {
width: 660px;
max-width: 98vw;
}
.prh-paavalikko-vain-ylin-taso li.dropdown .dropdown-menu.dropdown-kolme-palstaa .col-4:not(:first-child) {
border-left: 1px solid #ebebeb;
}
.navbar-paavalikko {
padding-top: 0px;
}
/* tämä on avoinna olevan mobiilivalikon yläreunus
* haetaan Javascriptillä esiin koska valikko on muuten .containerissa
*/
.avoimen-valikon-ylareuna {
visibility: hidden;
margin: 0;
padding: 0;
transition: all 0.35s;
}
/* Kielivalikon tyylit */
.prh-header-kielivalikko {
padding-left: 0.25rem;
padding-right: 1rem;
margin-left: 1.75rem;
border-left: 1px solid #ebebeb;
}
.prh-header-kielivalikko ul {
margin-bottom: 0px;
}
.prh-header-kielivalikko ul li {
list-style: none;
}
.prh-header-kielivalikko .btn-group {
align-items: center;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.prh-header-kielivalikko .btn-group .nav-link {
margin-right: 0.75rem;
font-weight: 500;
}
.prh-header-kielivalikko .btn-group .dropdown-toggle {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 1rem;
background-position: 50% 50%;
border-radius: 0.5rem;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.prh-header-kielivalikko .btn-group .dropdown-toggle:hover {
background-color: #ebebeb;
}
.prh-header-kielivalikko .btn-group .dropdown-toggle:focus {
outline: 0px;
border-color: #002776;
background-color: #002776;
background-image: url('data:image/svg+xml,');
}
.prh-header-kielivalikko .btn-group .dropdown-toggle::after {
border: 0px;
}
.prh-header-kielivalikko .btn-group .dropdown-toggle.show:focus {
background-image: url('data:image/svg+xml,');
}
.prh-header-kielivalikko .btn-group .dropdown-menu {
border-radius: 0px;
}
.prh-header-kielivalikko .btn-group .dropdown-item {
font-weight: 500;
}
.prh-header-kielivalikko .btn-group .dropdown-item:focus, .prh-header-kielivalikko .btn-group .dropdown-item:hover {
background-color: white;
color: #d0268f;
text-decoration: underline;
}
.prh-header-kielivalikko .kielilippu {
width: 32px;
height: 24px;
}
@media (max-width: 991px) {
.prh-header-kielivalikko {
border-left: 0px;
}
.prh-header-kielivalikko .aktiivinen-kieli {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
/* Sidebarin tyylit */
.prh-oikopolut ul,
.prh-sivupalkki ul {
padding-left: 0px;
margin-bottom: 0px;
}
.prh-oikopolut ul .active-path,
.prh-sivupalkki ul .active-path {
background-color: #f7f7f7;
font-weight: 700;
}
.prh-oikopolut ul .active-path.active-page,
.prh-sivupalkki ul .active-path.active-page {
background-color: #e8f7fb;
}
.prh-oikopolut ul .active-path > a,
.prh-sivupalkki ul .active-path > a {
padding-left: 0;
}
.prh-oikopolut ul .active-page,
.prh-sivupalkki ul .active-page {
background-color: #e8f7fb;
border: 0px;
}
.prh-oikopolut ul li,
.prh-sivupalkki ul li {
list-style: none;
border-bottom: 1px solid #ebebeb;
padding: 0.75rem 0.5rem;
position: relative;
}
.prh-oikopolut ul li:last-child,
.prh-sivupalkki ul li:last-child {
border-bottom: 0px;
}
.prh-oikopolut ul li a,
.prh-sivupalkki ul li a {
text-decoration: none;
display: inline-block;
padding-left: 1rem;
padding-right: 2rem;
color: black;
}
.prh-oikopolut ul li a:hover, .prh-oikopolut ul li a:focus,
.prh-sivupalkki ul li a:hover,
.prh-sivupalkki ul li a:focus {
color: #d0268f;
text-decoration: underline;
}
.prh-oikopolut ul li a::before,
.prh-sivupalkki ul li a::before {
position: absolute;
left: 0.5rem;
top: 1rem;
}
.prh-oikopolut ul li a::after,
.prh-sivupalkki ul li a::after {
position: absolute;
right: 0.5rem;
top: 1rem;
}
.prh-oikopolut ul li a.link-internal-reverse,
.prh-sivupalkki ul li a.link-internal-reverse {
padding-left: 1rem;
}
.prh-oikopolut ul li a.link-internal-reverse::before,
.prh-sivupalkki ul li a.link-internal-reverse::before {
left: 0;
}
.prh-oikopolut ul ul,
.prh-sivupalkki ul ul {
padding-left: 0rem;
}
.prh-oikopolut ul ul li,
.prh-sivupalkki ul ul li {
padding: 0.75rem 0;
}
.prh-oikopolut ul ul li ul li,
.prh-sivupalkki ul ul li ul li {
padding-left: 0.75rem;
}
.prh-oikopolut > ul > li:first-child, .prh-oikopolut.prh-oikopolut ul li,
.prh-sivupalkki > ul > li:first-child,
.prh-sivupalkki.prh-oikopolut ul li {
border-bottom: 0px;
}
.prh-oikopolut .sidebar-otsikko,
.prh-sivupalkki .sidebar-otsikko {
padding: 0.5rem 0.25rem;
background-color: #f7f7f7;
}
/* Liittyy edelliseen. */
.prh-oikopolut {
margin-top: 1rem;
}
.prh-oikopolut li {
list-style: none;
}
.prh-oikopolut img {
width: 20px;
height: 20px;
}
.prh-oikopolut h2 {
font-size: 1rem;
font-weight: 700;
padding-left: 0.5rem;
}
@media (max-width: 991px) {
.prh-sivupalkki {
visibility: hidden;
}
.prh-sivupalkki nav {
display: none;
}
.prh-sivupalkki .prh-sivupalkin-spotlight {
visibility: visible;
padding-top: 1rem;
}
}
/* Breadcrumb varaa tilan tyhjänäkin.
* Mutta kaikilla muilla sivuilla paitsi etusivulla pitäisi
* olla ainakin etusivulinkki tässä.
*/
.prh-breadcrumb {
padding: 1.75rem 1.25rem;
}
@media (max-width: 991px) {
.prh-breadcrumb {
padding-left: 0.25rem;
}
}
.prh-breadcrumb .breadcrumb {
padding: 0;
}
.prh-breadcrumb .breadcrumb-item.active {
color: #323232;
}
.prh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "›"/"";
color: #000000;
}
/* Oletuksena breadcrumb on valkoisella taustalla.
* Jos onkin tummalla niin sitten näin.
*/
.prh-tumma-tausta .prh-breadcrumb {
padding-left: 0px;
}
.prh-tumma-tausta .prh-breadcrumb .breadcrumb-item.active {
color: #ebebeb;
}
.prh-tumma-tausta .prh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "›"/"";
color: #ffffff;
}
/* Etusivulla ei näytetä breadcrumbin sisältöä.
* Tän voisi kai toteuttaa toisinkin, esim niin että sivulle ei
* tulosteta koko elementtiä, mutta mallissa on nyt näin.
*/
.etusivu .prh-breadcrumb .breadcrumb {
display: none;
}
/* Etusivulla olevan hissikokonaisuuden tyylit. */
.kysymykset-accordion {
background-color: #f7f7f7;
border-radius: 0.5rem;
margin: 2rem 0;
padding: 2rem 0 0 0;
}
.kysymykset-accordion h2 {
padding: 0.5rem 1rem;
}
.kysymykset-accordion h3 {
padding: 0.25rem 1rem;
}
.kysymykset-accordion .accordion {
background: transparent;
--bs-accordion-bg: transparent;
--bs-accordion-btn-padding-x: 0;
}
.kysymykset-accordion .accordion .accordion-item {
padding: 0rem 0;
}
.kysymykset-accordion .accordion .accordion-item-first {
border-top: 0px;
}
.kysymykset-accordion .accordion .accordion-button:not(.collapsed) {
color: #000000;
background-color: transparent;
box-shadow: 0 0 0 0;
}
.kysymykset-accordion .accordion .accordion-button:hover {
text-decoration: underline;
}
.kysymykset-accordion .accordion .accordion-button:focus {
box-shadow: 0 0 0 0;
}
.kysymykset-accordion .accordion .accordion-body {
padding-top: 0;
padding-bottom: 1.5rem;
}
/* Mallissa oli toisenkinlainen hissivalinta mutta tätä ei ole nyt
* käytössä esimerkeissä. Taitaa jäädä turhaksi.
*/
.sisalto-accordion {
background-color: #ffffff;
border-radius: 0.5rem;
margin: 2rem 0;
padding: 2rem 0 0 0;
}
.sisalto-accordion h3 {
padding: 0.25rem 0rem;
}
.sisalto-accordion .accordion {
background: transparent;
--bs-accordion-bg: transparent;
--bs-accordion-btn-padding-x: 0;
}
.sisalto-accordion .accordion .accordion-item {
padding: 0rem 0;
border: 0;
}
.sisalto-accordion .accordion .accordion-button {
border: 1px solid #000000;
padding: 0.625rem 1rem 0.5rem 1rem;
}
.sisalto-accordion .accordion .accordion-button:not(.collapsed) {
color: #000000;
background-color: transparent;
box-shadow: 0 0 0 0;
}
.sisalto-accordion .accordion .accordion-button:hover {
text-decoration: underline;
}
.sisalto-accordion .accordion .accordion-button:focus {
box-shadow: 0 0 0 0;
}
.sisalto-accordion .accordion .accordion-body {
padding-top: 0.5rem;
padding-bottom: 1.5rem;
}
/* Koko sisältö poislukien
* header ja footer.
*/
.prh-sisalto-wrapper {
display: flex;
justify-content: center;
}
/* Sisältö ilman breadcrumbia ja sidebaria. */
.prh-sisaltoalue {
max-width: 820px;
/* .prh-sisaltoalueella on oma semanttinen footer
* jossa Tulostettava versio ja Päivitetty viimeksi.
*/
}
@media (max-width: 991px) {
.prh-sisaltoalue h1, .prh-sisaltoalue .h1,
.prh-sisaltoalue h2, .prh-sisaltoalue .h2,
.prh-sisaltoalue h3, .prh-sisaltoalue .h3,
.prh-sisaltoalue h4, .prh-sisaltoalue .h4,
.prh-sisaltoalue h5, .prh-sisaltoalue .h5,
.prh-sisaltoalue h6, .prh-sisaltoalue .h6 {
word-break: break-word;
}
}
.prh-sisaltoalue footer {
padding-top: 1rem;
text-align: end;
}
.prh-sisaltoalue footer a {
display: block;
}
/* Sidebar joka esiintyy .prh-sisaltoalueen kaverina.*/
.prh-sivupalkki {
max-width: 300px;
border-right: 1px solid #ebebeb;
padding-right: 0px;
margin-right: 1rem;
}
.prh-sivupalkki h2 {
font-size: 1rem;
font-weight: 700;
padding-left: 0.5rem;
}
.prh-sivupalkki hr {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
border-width: 2px;
}
.prh-sivupalkki .prh-sivupalkin-spotlight {
padding-right: 0.25rem;
}
/* Osioiden pääsivuilla voi olla sininen starttiosio.
* Tämä on sen pohja.*/
.hero-sininen-taustakuva {
padding: 1rem 0 6rem 0;
background-color: #035ca7;
background-image: url("/assets/gr/header-etusivu-sininen.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* Liittyy edelliseen, käytetään yhdessä. */
.prh-tumma-tausta h2 {
padding-bottom: 1rem;
}
.prh-tumma-tausta h2:has(+ .lista-linkit) {
font-size: 1rem;
padding-top: 1rem;
padding-bottom: 0rem;
padding-left: 0.5rem;
}
@media (max-width: 991px) {
.prh-tumma-tausta h2:has(+ .lista-linkit) {
padding-top: 2rem;
}
}
/* Esimerkiksi Yritykset-ja-yhteisot.html alussa on
* lista laakeita bokseja, jotka ovat linkkejä osion alasivuihin.
*/
.lista-linkit {
padding-left: 0px;
margin-bottom: 0px;
}
.lista-linkit li {
list-style: none;
border-bottom: 1px solid #949494;
}
/* Tämä on -elementin luokka joka auttaa laittamaan
* linkkitekstin ja siihen liittyvän chevronin siististi
* rinnakkain. */
.li-ikonilla {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
}
.li-ikonilla span {
display: block;
padding: 0 0.5rem;
}
.li-ikonilla img {
height: 1rem;
width: auto;
padding: 0 0.5rem;
}
.li-ikonilla:focus, .li-ikonilla:hover {
color: white;
text-decoration: underline;
background-color: #d0268f;
}
.li-ikonilla:focus img, .li-ikonilla:hover img {
/*filter: invert(48%) sepia(94%) saturate(502%) hue-rotate(276deg) brightness(132%) contrast(103%);*/
}
/* Leikamallin mukaan sinisen osion päälle nousee
* desktop-näkymässä valkoisen osion tavaraa.
* Tämä on se offset.
*/
.prh-sisalto-wrapper .prh-offset {
position: relative;
}
.prh-sisalto-wrapper .prh-offset > div {
margin-top: -3rem;
}
@media (max-width: 991px) {
.prh-sisalto-wrapper .prh-offset:not(:first-child) > div {
margin-top: 0rem;
}
}
/* On ikoneita, joilla on pyöreä taustaväri. */
.ikoni-ympyra {
display: inline-block;
background-color: #002776;
background-size: 50%;
background-repeat: no-repeat;
background-position: center center;
border-radius: 20rem;
padding: 0.5rem;
width: 2.5rem;
height: 2.5rem;
top: 0.5rem;
left: 1rem;
position: absolute;
}
/* Leiskamallin jossain versiossa oli vaaleansinisellä
* taustalla tuotettua sisältöä.
*/
.tausta-vaaleansininen {
background-color: #d9effa;
border-color: #d9effa;
border-radius: 2px;
}
.tausta-vaaleansininen a {
color: #002776;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
.tausta-vaaleansininen a:focus, .tausta-vaaleansininen a:hover {
color: #002776;
text-decoration: underline;
}
.tausta-vaaleansininen a:focus .ikoni-ympyra, .tausta-vaaleansininen a:hover .ikoni-ympyra {
background-color: #002776;
}
/* Tämä ei ole enää käytössä, oli jossain leiskamallissa mukana. */
.linkki-etusivu-tumma-osa {
font-size: 1.25rem;
font-weight: 700;
padding: 1.25rem 0 2rem 0;
color: white;
display: inline-block;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.linkki-etusivu-tumma-osa img {
margin-left: 0.5rem;
width: 26px;
height: 26px;
}
/* Sisältösivun osana voi olla sisällysluettelo tai muu
* nostokomponentti. Tämä on se boksi.
*/
.tietoruutu {
padding: 1rem 0rem;
margin-bottom: 1rem;
}
.tietoruutu .tietoruutu-otsikko h3 {
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.25rem;
font-weight: 500;
}
.tietoruutu .tietoruutu-sisus {
padding: 1rem 1.5rem;
background-color: #f0f7fd;
color: #002776;
}
.tietoruutu .tietoruutu-sisus h3 {
padding-top: 0.5rem;
color: #002776;
font-size: 1.625rem;
}
.tietoruutu .tietoruutu-sisus a {
color: #002776;
text-decoration: none;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
.tietoruutu .tietoruutu-sisus a:focus, .tietoruutu .tietoruutu-sisus a:hover {
text-decoration: underline;
}
.tietoruutu .tietoruutu-sisus ul {
margin-bottom: 0;
padding-left: 1rem;
padding-bottom: 1rem;
}
.tietoruutu .tietoruutu-sisus ul li {
padding-top: 0.5rem;
list-style-type: disc;
}
.tietoruutu .tietoruutu-sisus ul ul {
padding-left: 1rem;
padding-bottom: 0rem;
}
.tietoruutu .tietoruutu-sisus ul ul li {
list-style-type: disc;
}
/* Tällä listataan ajankohtaisia ja uutisia. */
.lista-uutiset {
/* Ajankohtais-listoilla on oma semanttinen footer. */
}
.lista-uutiset h2 {
margin-top: 2rem;
}
.lista-uutiset a {
text-decoration: none;
display: block;
margin-bottom: 0.75rem;
border-bottom: 1px solid #ebebeb;
}
.lista-uutiset a:focus, .lista-uutiset a:hover, .lista-uutiset a:focus p, .lista-uutiset a:hover p {
color: #d0268f;
text-decoration: none;
}
.lista-uutiset a:focus time, .lista-uutiset a:hover time {
text-decoration: underline;
}
.lista-uutiset a time {
color: #949494;
font-weight: 700;
font-size: 0.95rem;
}
.lista-uutiset a p {
color: #000000;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.lista-uutiset footer {
background-color: #faeafd;
display: flex;
justify-content: center;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-top: 2.5rem;
margin-bottom: 0.5rem;
}
.lista-uutiset footer .ikoni-ympyra {
background-color: #7b207f;
position: relative;
margin-left: -0.75rem;
background-size: auto;
}
.lista-uutiset footer svg {
width: 2rem;
height: 2rem;
}
.lista-uutiset footer a {
color: #7b207f;
text-decoration: none;
}
.lista-uutiset footer a:focus, .lista-uutiset footer a:hover {
color: #7b207f;
text-decoration: none;
}
.lista-uutiset footer a:focus span:first-child, .lista-uutiset footer a:hover span:first-child {
text-decoration: underline;
}
.lista-uutiset footer a:focus .ikoni-ympyra, .lista-uutiset footer a:hover .ikoni-ympyra {
background-color: #d0268f;
}
.lista-uutiset footer a span:first-child {
position: relative;
top: -0.325rem;
}
/* Jossain sisältösivuissa näkyy EU-reguloitu mainos.*/
.spotlight-your-europe {
background-color: #f7f7f7;
padding: 0.5rem;
transition: all 0.15s;
}
.spotlight-your-europe p {
padding-top: 0.5rem;
}
.spotlight-your-europe a {
color: #000000;
}
.spotlight-your-europe a:focus, .spotlight-your-europe a:hover {
text-decoration: none;
color: #000000;
}
.spotlight-your-europe a:focus p span, .spotlight-your-europe a:hover p span {
text-decoration: underline;
}
.spotlight-your-europe img {
width: 143px;
height: 45px;
}
/* Bootstrapin card-luokkaa
* ylikirjoittavat säännöt ja leiskamallin lisäykset.
*/
.card .card-image-top {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.card .card-kuva-alue {
max-height: 292px;
overflow: hidden;
}
@media (min-width: 992px) {
.card .vaakakortti .card-img-top {
border-top-right-radius: 0;
}
}
@media (min-width: 992px) {
.card .vaakakortti .card-kuva-alue {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
}
.card h3 {
font-size: 1.5rem;
}
.card h3,
.card h3 a {
color: black;
}
.card h3:focus, .card h3:hover,
.card h3 a:focus,
.card h3 a:hover {
color: #d0268f;
}
.card .card-body {
padding: 1.75rem 1.25rem;
}
.card .card-footer {
border-top: 0px;
background-color: transparent;
padding-bottom: 1rem;
}
/* Etusivun tummalla pohjalla olevat valkoiset kortit.*/
.lista-linkkikortit {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 0.5rem;
row-gap: 0.5rem;
grid-auto-flow: row dense;
}
.lista-linkkikortit h3 {
color: #002776;
}
.lista-linkkikortit .card {
background: #ffffff;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.lista-linkkikortit .card .card-title {
border-bottom: 1px solid #ebebeb;
}
.lista-linkkikortit .card h3 {
margin-bottom: 0;
}
.lista-linkkikortit .card .li-ikonilla img {
width: 18px;
height: 12px;
padding: 0;
filter: unset;
}
@media (max-width: 767px) {
.lista-linkkikortit {
display: flex;
flex-direction: column;
}
}
.lista-linkkikortit a .card {
height: 100%;
}
.lista-linkkikortit a:hover .card, .lista-linkkikortit a:focus .card {
background-color: #d0268f;
color: #ffffff;
}
.lista-linkkikortit a:hover .card img, .lista-linkkikortit a:focus .card img {
filter: brightness(0) invert(1);
}
.lista-linkkikortit a:hover .card .card-title, .lista-linkkikortit a:focus .card .card-title {
border-bottom: 1px solid white;
}
.lista-linkkikortit a:hover .card .card-title .li-ikonilla,
.lista-linkkikortit a:hover .card .card-title h3, .lista-linkkikortit a:focus .card .card-title .li-ikonilla,
.lista-linkkikortit a:focus .card .card-title h3 {
color: #ffffff;
text-decoration: none;
}
/* Tämä rakenne oli leiskamallin sisältösivulla kaikki-palvelut.html.
* Mutta palaute tuli että sitä sisältömallia ei näytetä, joten rakenne ei ole
* nyt käytössä.
*/
.korttilista {
padding-left: 0;
}
.korttilista .card {
border: 0;
border-left: 1px solid #ebebeb;
border-radius: 0;
margin: 1.5rem 0;
}
.korttilista .card .card-title,
.korttilista .card .card-title h4 {
font-weight: 700;
font-size: 1rem;
}
.korttilista .card a {
color: black;
}
.korttilista .card a:focus, .korttilista .card a:hover {
color: #d0268f;
}
/* Liittyy edelliseen. */
.kortti-taustalla {
margin: 1rem 0;
background-color: #ebebeb;
border-radius: 1rem;
}
.kortti-taustalla .card-title {
font-weight: 500;
}
.kortti-taustalla .card-title,
.kortti-taustalla .card-title h4 {
font-size: 1.25rem;
}
/* Nämä ovat niitä osioiden pääsivuilla olevia listoja joiden yllä
* otsikkoja "Asiointipalvelut", "Tietopalvelut", "Oikopolut".
*/
.yleisimmat-palvelut-linkkikortti {
background-color: #f0f7fd;
padding: 0.5rem 0;
}
.yleisimmat-palvelut-linkkikortti h2 {
font-size: 1.25rem;
border-bottom: 1px solid #ebebeb;
padding: 1rem 1rem 1.5rem 1rem;
position: relative;
}
.yleisimmat-palvelut-linkkikortti h2:has(.ikoni-ympyra) {
padding-left: 4rem;
}
.yleisimmat-palvelut-linkkikortti ul {
padding-left: 0px;
}
.yleisimmat-palvelut-linkkikortti ul li {
list-style: none;
border-bottom: 1px solid #ebebeb;
position: relative;
}
.yleisimmat-palvelut-linkkikortti ul li a {
display: block;
padding: 1rem;
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
.yleisimmat-palvelut-linkkikortti ul li a::after {
position: absolute;
right: 0.5rem;
}
.yleisimmat-palvelut-linkkikortti ul li img {
width: 20px;
height: 20px;
margin-left: 1rem;
margin-top: -4px;
}
/* Aineettomat-oikeudet.html mallissa olevat sinisellä pohjalla
* neljä rinnakkain sisältönostot.
*/
.kortti-alaosioihin {
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
text-align: center;
}
.kortti-alaosioihin .card-kuvake {
margin-bottom: 1rem;
}
.kortti-alaosioihin .card-kuvake img {
width: 3.5rem;
height: 3.5rem;
}
.kortti-alaosioihin .card-title {
font-family: "FagoWebPro-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.135rem;
font-weight: 700;
}
.kortti-alaosioihin .card-title img {
height: 1.25rem;
width: auto;
margin-left: 0.5rem;
margin-top: -2px;
}
.kortti-alaosioihin .card-title a:focus, .kortti-alaosioihin .card-title a:hover {
color: #f8a9e2;
text-decoration: underline;
}
.kortti-alaosioihin .card-title a:focus img, .kortti-alaosioihin .card-title a:hover img {
filter: invert(48%) sepia(94%) saturate(502%) hue-rotate(276deg) brightness(142%) contrast(103%);
}
/* Liittyy edelliseen. */
a .card.kortti-alaosioihin {
height: 100%;
}
a:hover .card.kortti-alaosioihin, a:focus .card.kortti-alaosioihin {
background-color: #d0268f;
color: #ffffff;
}
a:hover .card.kortti-alaosioihin img, a:focus .card.kortti-alaosioihin img {
filter: brightness(0) invert(1);
}
a:hover .card.kortti-alaosioihin .card-title, a:focus .card.kortti-alaosioihin .card-title {
border-bottom: 0;
}
a:hover .card.kortti-alaosioihin .card-title .li-ikonilla,
a:hover .card.kortti-alaosioihin .card-title h3, a:focus .card.kortti-alaosioihin .card-title .li-ikonilla,
a:focus .card.kortti-alaosioihin .card-title h3 {
color: #ffffff;
text-decoration: none;
}
a:focus .card {
outline: 2px solid #ffffff;
}
/* Sivuston kaikilla sivuilla toistuva alatunniste. */
.prh-sitefooter {
background-color: #00009f;
background-image: url("/assets/gr/footer-sininen.jpg");
}
.prh-sitefooter h2, .prh-sitefooter .h2,
.prh-sitefooter h3, .prh-sitefooter .h3 {
font-size: 1rem;
font-weight: 700;
}
.prh-sitefooter *, .prh-sitefooter a {
color: white;
}
.prh-sitefooter a.link-external::after {
background-image: url('data:image/svg+xml,');
}
.prh-sitefooter a:focus, .prh-sitefooter a:hover {
color: #f8a9e2;
}
.prh-sitefooter a:focus::after, .prh-sitefooter a:hover::after {
background-image: url('data:image/svg+xml,');
}
.prh-sitefooter a:focus {
outline: 2px solid white;
}
.prh-sitefooter .prh-sitefooter-wrapper-content {
padding: 2rem 0;
display: flex;
flex-direction: column;
}
@media (max-width: 575px) {
.prh-sitefooter .prh-sitefooter-wrapper-content {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.prh-sitefooter .prh-sitefooter-wrapper-columns {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
}
.prh-sitefooter .prh-sitefooter-contacts-wrapper-spacing {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
min-height: 250px;
}
.prh-sitefooter .prh-sitefooter-socialmedia {
min-width: 171px;
}
.prh-sitefooter .prh-sitefooter-socialmedia li {
padding: 0.5rem 0;
list-style: none;
}
.prh-sitefooter .prh-sitefooter-socialmedia img {
width: 20px;
height: 20px;
margin-right: 0.5rem;
margin-top: -2px;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
border-top: 1px solid white;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav {
align-items: center;
padding-top: 1rem;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav img {
padding: 3px;
max-width: 60px;
height: auto;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item {
padding-left: 0.75rem;
padding-right: 0.75rem;
border-right: 1px solid white;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item a:not(.btn-footer) {
text-decoration: underline;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item a:not(.btn-footer):focus, .prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item a:not(.btn-footer):hover {
text-decoration: none;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item:first-child {
padding: 0px 1rem 0px 0px;
border-right: 0px;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item:first-child .nav-link {
padding: 0px;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item:last-child {
border-right: 0px;
}
@media (max-width: 768px) {
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav {
flex-wrap: wrap;
}
.prh-sitefooter .prh-sitefooter-wrapper-navigation .navbar-nav .nav-item {
margin-bottom: 1rem;
border-right: 0px;
}
}
/*# sourceMappingURL=prhfi-styles.css.map */