:root { --accent: #4151fc; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1); } 50% { box-shadow: -10px -10px rgba(255, 255, 255, 1), 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 255, 255, 0.2), 10px 10px rgba(255, 255, 255, 1), -10px 10px rgba(255, 255, 255, 0.2), -10px -10px rgba(255, 255, 255, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #ffffff }/* MOBIILI – lisää tilaa hierojan nimen yläpuolelle profiilissa */ @media (max-width: 768px) { .single-listing h1.case27-primary-text { padding-top: 45px; } } /* POISTA BLOGIKORTTIEN TEKSTI (excerpt / preview) */ .archive-posts .single-blog-feed p, .archive-posts .single-blog-feed .excerpt, .archive-posts .single-blog-feed .bf-excerpt, .archive-posts .single-blog-feed .listing-preview, .archive-posts .single-blog-feed .entry-summary { display: none !important; } /* BLOGIKORTTIEN OTSIKOT ISOMMAKSI */ .archive-posts .bf-title a, .archive-posts .case27-primary-text { font-size: 19px !important; line-height: 1.35; padding-bottom: 30px !important; padding-top: 8px !important; font-family: "Be Vietnam Pro", sans-serif !important; color: #3a3a3a !important; letter-spacing: -0.4px !important; } /* Mobiili */ @media (max-width: 768px) { .archive-posts .bf-title a, .archive-posts .case27-primary-text { font-size: 19px !important; } } /* ====================================================== BLOGIARKISTO ONLY – EI KOSKE EXPLORE / LISTING NÄKYMÄÄ ====================================================== */ /* Poista blogikorttien päivämäärä badge */ .archive-page .archive-posts .lf-head_btn.event-date { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Poista blogikorttien kategoriarivi */ .archive-page .archive-posts .listing-details { display: none !important; } /* ========================== CONTACT FORM 7 – DESKTOP ========================== */ .wpcf7 input, .wpcf7 textarea, .wpcf7 select { font-size: 17px !important; line-height: 1.35 !important; letter-spacing: 0 !important; font-weight: 400 !important; font-family: inherit !important; } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { font-size: 18px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .wpcf7 input[type="submit"] { font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0 !important; } .wpcf7 label { font-size: 18px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } /* ========================== TABLET (max-width: 1024px) ========================== */ @media (max-width: 1024px) { .wpcf7 input, .wpcf7 textarea, .wpcf7 select, .wpcf7 input::placeholder, .wpcf7 label { font-size: 17px !important; line-height: 1.4 !important; letter-spacing: -0.2px !important; } .wpcf7 input[type="submit"] { font-size: 17px !important; letter-spacing: -0.1px !important; } } /* ========================== MOBILE (max-width: 768px) ========================== */ @media (max-width: 768px) { .wpcf7 input, .wpcf7 textarea, .wpcf7 select, .wpcf7 input::placeholder, .wpcf7 label { font-size: 16px !important; line-height: 1.45 !important; letter-spacing: -0.1px !important; } .wpcf7 input[type="submit"] { font-size: 16px !important; letter-spacing: -0.1px !important; } } /* LISTING CATEGORY NAME */ .single-job_listing span.category-name { font-family: "Manrope", sans-serif !important; font-size: 14px !important; line-height: 1.4; letter-spacing: -0.1px; font-weight: 500 !important; } /* TABLET */ @media (max-width: 1024px) { .single-job_listing span.category-name { font-size: 12px; letter-spacing: 0.35px; } } /* MOBILE */ @media (max-width: 768px) { .single-job_listing span.category-name { font-size: 12px; letter-spacing: -0.1px; } } /* LISTING BODY TEXT */ .single-job_listing .pf-body p { font-family: "Manrope", sans-serif !important; font-size: 16px; line-height: 1.6; letter-spacing: 0.2px; font-weight: 400; margin-bottom: 14px; } /* TABLET */ @media (max-width: 1024px) { .single-job_listing .pf-body p { font-size: 15.5px; } } /* MOBILE */ @media (max-width: 768px) { .single-job_listing .pf-body p { font-size: 16px; letter-spacing: 0.15px; } } /* LISTING TAGLINE – H2 */ .single-job_listing h2.profile-tagline.listing-tagline-field { font-size: 21px; line-height: 1.25; letter-spacing: 0.1px; font-weight: 400; margin-bottom: 16px; } /* TABLET */ @media (max-width: 1024px) { .single-job_listing h2.profile-tagline.listing-tagline-field { font-size: 24px; letter-spacing: 0.6px; } } /* MOBILE */ @media (max-width: 768px) { .single-job_listing h2.profile-tagline.listing-tagline-field { font-size: 18px; line-height: 1.3; letter-spacing: -0.1px; } } /* SINGLE LISTING – SECTION HEADINGS (H5) */ .single-job_listing h5 { font-size: 18px; line-height: 1.3; letter-spacing: -0.4px; font-weight: 700; margin-bottom: 5px; } /* TABLET */ @media (max-width: 1024px) { .single-job_listing h5 { font-size: 18px; letter-spacing: 0.5px; } } /* MOBILE */ @media (max-width: 768px) { .single-job_listing h5 { font-size: 17px; line-height: 1.35; letter-spacing: -0.4px; } } /* LISTING CARD TITLE – DESKTOP */ h4.case27-primary-text.listing-preview-title { font-size: 18px !important; line-height: 1.35 !important; letter-spacing: -0.2px !important; font-weight: 700 !important; } /* TABLET */ @media (max-width: 1024px) { h4.case27-primary-text.listing-preview-title { font-size: 19px; letter-spacing: 0.7px !important; } } /* MOBILE */ @media (max-width: 768px) { h4.case27-primary-text.listing-preview-title { font-size: 18px !important; line-height: 1.4 !important; letter-spacing: -0.3px !important; } } /* Mitä tämä tekee: - Poistaa no results -sivun bad mood -ikonin. */ .no-results-icon::before { content: none !important; } /* Mitä tämä tekee: - Lisää 120px tyhjää tilaa blogipostauksen tekstin (the_content) ALAPUOLELLE. - Kohdistuu nimenomaan MyListingin single blog post -pohjan sisältöwrapiin (.c27-content-wrapper). - Toimii myös silloin, kun the_content on tehty Elementorilla. */ .single-post .blogpost-section .c27-content-wrapper { padding-bottom: 120px !important; } /* ====================================================== GLOBAL HEADING SYSTEM — Hierontahaku Säädä fonttikoot helposti desktop + mobile ====================================================== */ /* ===== YHTEISET OTSIKKOASETUKSET ===== */ h1, h2, h3, h4, h5, h6, .c27-title, .elementor-heading-title { font-family: "Be Vietnam Pro", sans-serif !important; letter-spacing: -0.7px; } /* ===== FONT WEIGHT HIERARKIA ===== */ h1 { font-weight: 700; } h2, h3, h4, h5, h6 { font-weight: 600; } /* ====================================================== DESKTOP FONT SIZE CONTROL ====================================================== */ h1 { font-size: 35px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 25px; } h5 { font-size: 18px; } h6 { font-size: 16px; } /* ====================================================== TABLET BREAKPOINT ====================================================== */ @media (max-width: 1024px) { h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 23px; } h4 { font-size: 20px; } h5 { font-size: 17px; } h6 { font-size: 15px; } } /* ====================================================== MOBILE BREAKPOINT ====================================================== */ @media (max-width: 768px) { h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } } /* Mitä tämä tekee: - Lisää 15px paddingin kaikkiin otsikoihin */ .single-post .c27-content-wrapper h1, .single-post .c27-content-wrapper h2, .single-post .c27-content-wrapper h3, .single-post .c27-content-wrapper h4, .single-post .c27-content-wrapper h5, .single-post .c27-content-wrapper h6 { padding-top: 15px !important; padding-bottom: 5px !important; } /* Mitä tämä tekee: - Kohdistaa artikkelin varsinaisen leipätekstin (<p>) - Asettaa fontiksi Manrope - Fonttikoko 17px - Font weight 400 (regular) - Koskee vain blogiartikkeleita (single-post) */ .single-post .c27-content-wrapper p { font-family: "Manrope", sans-serif !important; font-size: 17px !important; font-weight: 400 !important; } /* Mitä tämä tekee: - TESTI: pakottaa artikkelin sisäisen Gutenberg-H1:n koon ja line-heightin - Ei media querya, jotta näet heti desktopissakin muuttuuko - Jos tämä EI muuta mitään, selector ei osu tai jokin muu rule voittaa !importantilla */ body.single-post .c27-content-wrapper h1.wp-block-heading { font-size: 33px !important; line-height: 1.25 !important; } /* Mitä tämä tekee: - Mobiilissa (<= 768px) pienentää ja tiivistää: 1) MyListingin cover-otsikon (h1.case27-primary-text) 2) Artikkelin sisäisen Gutenberg-H1:n (h1.wp-block-heading) - Käyttää korkeaa spesifisyyttä + !important, jotta teeman säännöt eivät voita */ @media (max-width: 768px) { body.single-post h1.case27-primary-text { font-size: 24px !important; line-height: 1.25 !important; } body.single-post .c27-content-wrapper h1.wp-block-heading { font-size: 30px !important; line-height: 1.25 !important; } } /* Mitä tämä tekee: - Kohdistaa MyListingin blogiartikkelin OIKEAN otsikon - class = case27-primary-text - Asettaa fonttikooksi 45px - Koskee vain single blog post -sivuja */ .single-post h1.case27-primary-text { font-size: 45px !important; } /* Mitä tämä tekee: - Pienentää artikkelin otsikon fonttikoon mobiilissa - Säilyttää typografisen tasapainon */ @media (max-width: 768px) { .single-post h1.case27-primary-text { font-size: 19px !important; } } /* Mitä tämä tekee: - Asettaa KAIKKIEN otsikoiden (h1–h6) rivivälin samaksi - Kohdistuu vain blogiartikkelien sisältöön - Koskee Gutenberg- ja perinteisiä h-tageja - !important ohittaa MyListingin ja WP:n omat tyylit */ .single-post .c27-content-wrapper h1, .single-post .c27-content-wrapper h2, .single-post .c27-content-wrapper h3, .single-post .c27-content-wrapper h4, .single-post .c27-content-wrapper h5, .single-post .c27-content-wrapper h6 { line-height: 1.3 !important; } /* Mitä tämä tekee: - Kohdistaa artikkelin varsinaisen leipätekstin (<p>) - Asettaa fontiksi Manrope - Fonttikoko 17px - Font weight 400 (regular) - Koskee vain blogiartikkeleita (single-post) */ .single-post .c27-content-wrapper p { font-family: "Manrope", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; color: #3a3a3a !important; } /* Mitä tämä tekee: - Lisää 20px paddingin vasemmalle ja oikealle KAIKELLE artikkelin sisällölle - Sisältää otsikot (h1–h6), kappaleet, listat, kuvat, muut blokit - Kohdistuu vain blogiartikkeleihin (.single-post) - !important ohittaa MyListingin ja Gutenbergin omat tyylit */ .single-post .c27-content-wrapper { padding-left: 20px !important; padding-right: 20px !important; } /* Mitä tämä tekee: - Asettaa tekstivärin #3a3a3a VAIN blogiartikkeleiden sisältöön - Kohdistuu MyListingin artikkelisisältöwrapiin (.c27-content-wrapper) - Ei vaikuta headeriin, hero-alueeseen, footeriin tai muihin sivuihin */ .single-post .c27-content-wrapper { color: #3a3a3a !important; }