#site-navigation {
position: -webkit-sticky;
position: sticky;
top: 0;
/* top of screen */
}
body{line-height:1.65}
.entry-content p,.entry-content li{line-height:1.65}
.entry-content h1{font-size:2.25rem;line-height:1.2}
.entry-content h2{font-size:1.75rem;line-height:1.25}
.entry-content h3{font-size:1.35rem;line-height:1.3}
.wp-block-button__link,.wp-block-button .wp-block-button__link{background-color:#0B5D63;color:#fff;border-radius:6px}
.wp-block-button__link:hover{background-color:#084A4F;color:#fff}
.entry-content>.wp-block-group:not(.alignfull),.entry-content>.wp-block-columns:not(.alignfull),.entry-content>.wp-block-media-text:not(.alignfull){margin-top:60px;margin-bottom:60px}
.home .entry-content .wp-block-columns{border:1px solid #E3ECEC;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:32px;align-items:center}
/* =============================================================================
Harmony Coaching — Front page redesign (APPEND to Additional CSS)
Scope: body.home only. Does not remove or override site-wide chrome except
where needed for polish on the front page. Keep existing custom CSS above.
Palette: primary #0B5D63 | secondary #084A4F | card #E3ECEC | wash #F3F8F8
Fonts: Source Sans Pro (headings) / Source Serif Pro (body) — theme-provided
============================================================================= */
/* ---------------------------------------------------------------------------
1) Base: front-page shell — clip horizontal overflow, calm page background
--------------------------------------------------------------------------- */
body.home {
overflow-x: clip;
background-color: #ffffff;
}
html:has(body.home),
body.home .site,
body.home .site-content,
body.home .entry-content,
body.home .wp-block-cover,
body.home .wp-block-group,
body.home .wp-block-media-text {
overflow-x: clip;
max-width: 100%;
}
body.home .entry-content {
/* Consistent vertical rhythm between top-level blocks */
--hc-section-gap: clamp(2.5rem, 5vw, 4.5rem);
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-max: 720px;
}
/* ---------------------------------------------------------------------------
2) Typography hierarchy (front page content only)
--------------------------------------------------------------------------- */
body.home .entry-content h1,
body.home .entry-content h2,
body.home .entry-content h3,
body.home .entry-content .wp-block-heading {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
letter-spacing: -0.01em;
font-weight: 700;
}
body.home .entry-content p,
body.home .entry-content li,
body.home .entry-content blockquote {
font-family: "Source Serif Pro", var(--font-base, serif);
}
body.home .entry-content > .wp-block-paragraph {
max-width: var(--hc-max);
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
color: #222;
font-size: 1.0625rem;
line-height: 1.7;
}
body.home .entry-content > .wp-block-paragraph:first-of-type {
margin-top: var(--hc-section-gap);
}
/* ---------------------------------------------------------------------------
3) Hero / cover — refined type, breathing room, subtle extra gradient
--------------------------------------------------------------------------- */
body.home .entry-content > .wp-block-cover.alignfull {
min-height: clamp(420px, 62vh, 640px);
padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
isolation: isolate;
}
/* Soft teal-tinted gradient on top of the existing 60% black dim */
body.home .entry-content > .wp-block-cover.alignfull::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
165deg,
rgba(8, 74, 79, 0.18) 0%,
rgba(11, 93, 99, 0.05) 40%,
rgba(0, 0, 0, 0.12) 100%
);
}
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container {
position: relative;
z-index: 2;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > p {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
margin-top: 0.35em;
margin-bottom: 0.35em;
letter-spacing: 0.02em;
}
/* Heading scale refinement without changing the text */
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > p:first-child {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
line-height: 1.15 !important;
font-size: clamp(1.6rem, 3.6vw, 2.375rem) !important;
}
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > p:nth-child(2) {
font-family: "Source Serif Pro", var(--font-base, serif);
font-weight: 400;
line-height: 1.35 !important;
font-size: clamp(1.15rem, 2.4vw, 1.75rem) !important;
opacity: 0.95;
}
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > p:nth-child(2) strong {
font-weight: 600;
}
/* ---------------------------------------------------------------------------
4) Programs card (columns) — unified card, image polish, alignment
--------------------------------------------------------------------------- */
body.home .entry-content > .wp-block-group:has(.wp-block-columns) {
margin-top: var(--hc-section-gap);
margin-bottom: var(--hc-section-gap);
background-color: #F3F8F8 !important;
padding-top: clamp(2rem, 4vw, 3.25rem);
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
body.home .entry-content .wp-block-columns {
border: 1px solid #E3ECEC;
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
padding: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
background-color: #ffffff;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
gap: 1.75rem;
}
body.home .entry-content .wp-block-columns .wp-block-image img,
body.home .entry-content .wp-block-columns .wp-image-179 {
border-radius: 10px;
box-shadow: var(--hc-shadow-soft);
width: 100% !important;
max-width: 420px;
height: auto !important;
display: block;
}
body.home .entry-content .wp-block-columns .wp-block-heading {
margin-top: 0;
margin-bottom: 0.75rem;
color: #0B5D63;
}
body.home .entry-content .wp-block-columns .wp-block-paragraph {
margin-bottom: 1.25rem;
line-height: 1.65;
color: #333;
}
/* ---------------------------------------------------------------------------
5) Buttons — consistent, professional CTAs
--------------------------------------------------------------------------- */
body.home .entry-content .wp-block-button__link,
body.home .entry-content .wp-block-button .wp-block-button__link {
background-color: #0B5D63;
color: #fff;
border-radius: 8px;
padding: 0.75em 1.6em;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 2px 8px rgba(11, 93, 99, 0.25);
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
text-decoration: none;
}
body.home .entry-content .wp-block-button__link:hover,
body.home .entry-content .wp-block-button .wp-block-button__link:hover {
background-color: #084A4F;
color: #fff;
box-shadow: 0 4px 14px rgba(8, 74, 79, 0.3);
transform: translateY(-1px);
}
body.home .entry-content .wp-block-button__link:focus-visible {
outline: 2px solid #084A4F;
outline-offset: 3px;
}
/* ---------------------------------------------------------------------------
6) Testimonials (media-text, primary teal) — spacing, quotes, image
--------------------------------------------------------------------------- */
body.home .entry-content > .wp-block-media-text.has-primary-background-color {
margin-top: var(--hc-section-gap);
margin-bottom: var(--hc-section-gap);
padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.home .entry-content > .wp-block-media-text .wp-block-media-text__media img,
body.home .entry-content > .wp-block-media-text .wp-image-27 {
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
display: block;
}
body.home .entry-content > .wp-block-media-text .wp-block-media-text__content {
padding: clamp(0.5rem, 2vw, 1.25rem) clamp(0.75rem, 2.5vw, 1.75rem);
}
body.home .entry-content > .wp-block-media-text .wp-block-heading {
color: #ffffff;
margin-top: 0;
margin-bottom: 1rem;
font-size: clamp(1.4rem, 2.5vw, 1.85rem);
}
body.home .entry-content > .wp-block-media-text .wp-block-quote {
border-left: 3px solid rgba(255, 255, 255, 0.45);
padding-left: 1.15rem;
margin: 0;
}
body.home .entry-content > .wp-block-media-text .wp-block-quote p {
color: #ffffff;
font-size: clamp(1rem, 1.6vw, 1.2rem);
line-height: 1.65;
margin-bottom: 1.1rem;
opacity: 0.96;
}
body.home .entry-content > .wp-block-media-text .wp-block-quote p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
7) CTA section — calm, centered, clear hierarchy
--------------------------------------------------------------------------- */
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) {
margin-top: calc(var(--hc-section-gap) * 0.5);
margin-bottom: var(--hc-section-gap);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
}
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) .wp-block-heading {
color: #0B5D63;
margin-bottom: 0.5rem;
font-size: clamp(1.5rem, 2.8vw, 1.9rem);
}
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) p {
font-size: 1.125rem;
color: #084A4F;
}
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) p a {
color: #0B5D63;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(11, 93, 99, 0.35);
}
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) p a:hover {
border-bottom-color: #0B5D63;
}
/* Tighten default spacers slightly for cleaner rhythm */
body.home .entry-content .wp-block-spacer {
max-height: 48px;
}
/* ---------------------------------------------------------------------------
8) Images — global soft treatment inside entry content (not cover bg)
--------------------------------------------------------------------------- */
body.home .entry-content .wp-block-image:not(.wp-block-cover *) img {
border-radius: 10px;
}
/* ---------------------------------------------------------------------------
9) Mobile sanity (< 782px — WP columns breakpoint)
--------------------------------------------------------------------------- */
@media (max-width: 781px) {
body.home .entry-content {
--hc-section-gap: 2rem;
}
body.home .entry-content .wp-block-columns {
padding: 1.25rem;
gap: 1.25rem;
}
body.home .entry-content .wp-block-columns .wp-block-image img,
body.home .entry-content .wp-block-columns .wp-image-179 {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
body.home .entry-content > .wp-block-media-text.has-primary-background-color {
padding: 1.5rem 1rem;
}
body.home .entry-content > .wp-block-cover.alignfull {
min-height: 360px;
padding: 2rem 1rem;
}
}
/* ---------------------------------------------------------------------------
Overflow / alignfull containment (prevents mobile horizontal scroll)
--------------------------------------------------------------------------- */
body.home .entry-content > .alignfull {
max-width: 100vw;
}
body.home .entry-content .wp-block-columns {
box-sizing: border-box;
width: 100%;
}
body.home .entry-content > .wp-block-media-text {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
@media (max-width: 781px) {
body.home .entry-content > .wp-block-group:has(.wp-block-columns) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.home .entry-content .wp-block-columns {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =============================================================================
10) Scroll-driven animations (Chrome/Edge; Safari/Firefox keep static layout)
Content is NEVER opacity:0 outside this @supports block.
Header / nav are intentionally excluded.
============================================================================= */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* ---- Keyframes ---- */
@keyframes hc-fade-up {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hc-fade-up-sm {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hc-slide-from-left {
from {
opacity: 0;
transform: translateX(-32px) scale(0.97);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes hc-slide-from-right {
from {
opacity: 0;
transform: translateX(32px) scale(0.97);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes hc-hero-parallax {
from {
transform: scale(1.08) translateY(-4%);
}
to {
transform: scale(1.08) translateY(6%);
}
}
@keyframes hc-bg-wash {
from {
background-color: #ffffff;
}
to {
background-color: #F3F8F8;
}
}
/* ---- Sections / columns: fade + slide up ---- */
body.home .entry-content > .wp-block-paragraph,
body.home .entry-content > .wp-block-group:has(.wp-block-columns) .wp-block-columns,
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) .wp-block-group__inner-container,
body.home .entry-content > .wp-block-media-text .wp-block-media-text__content {
animation: hc-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
/* ---- Images: alternate left / right + slight scale ---- */
body.home .entry-content .wp-block-columns .wp-block-image,
body.home .entry-content .wp-block-columns .wp-block-image img {
animation: hc-slide-from-left linear both;
animation-timeline: view();
animation-range: entry 0% cover 35%;
}
body.home .entry-content > .wp-block-media-text .wp-block-media-text__media,
body.home .entry-content > .wp-block-media-text .wp-block-media-text__media img {
animation: hc-slide-from-right linear both;
animation-timeline: view();
animation-range: entry 0% cover 35%;
}
/* Programs text column from the right for balance */
body.home .entry-content .wp-block-columns .wp-block-column:last-child {
animation: hc-slide-from-right linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
/* ---- Cover background subtle parallax ---- */
body.home .entry-content > .wp-block-cover .wp-block-cover__image-background {
animation: hc-hero-parallax linear both;
animation-timeline: view();
animation-range: contain 0% contain 100%;
will-change: transform;
}
/* Hero text gently fades in (not the whole cover — avoids blank hero) */
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container {
animation: hc-fade-up-sm linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
/* ---- Section background color transition (programs wash) ---- */
body.home .entry-content > .wp-block-group:has(.wp-block-columns) {
animation: hc-bg-wash linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
/* ---- Mobile: reduce translate distances ---- */
@media (max-width: 781px) {
@keyframes hc-fade-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hc-slide-from-left {
from {
opacity: 0;
transform: translateX(-20px) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes hc-slide-from-right {
from {
opacity: 0;
transform: translateX(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
/* Parallax can feel janky on small screens — keep gentle */
@keyframes hc-hero-parallax {
from {
transform: scale(1.04) translateY(-2%);
}
to {
transform: scale(1.04) translateY(3%);
}
}
}
} /* prefers-reduced-motion: no-preference */
/* Explicit disable for reduced-motion users even if browser supports timelines */
@media (prefers-reduced-motion: reduce) {
body.home .entry-content > .wp-block-paragraph,
body.home .entry-content > .wp-block-group:has(.wp-block-columns) .wp-block-columns,
body.home .entry-content > .wp-block-group:has(#varaa-ilmainen-konsultaatio) .wp-block-group__inner-container,
body.home .entry-content > .wp-block-media-text .wp-block-media-text__content,
body.home .entry-content .wp-block-columns .wp-block-image,
body.home .entry-content .wp-block-columns .wp-block-image img,
body.home .entry-content > .wp-block-media-text .wp-block-media-text__media,
body.home .entry-content > .wp-block-media-text .wp-block-media-text__media img,
body.home .entry-content .wp-block-columns .wp-block-column:last-child,
body.home .entry-content > .wp-block-cover .wp-block-cover__image-background,
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container,
body.home .entry-content > .wp-block-group:has(.wp-block-columns) {
animation: none !important;
}
}
} /* @supports animation-timeline: view() */
/* =============================================================================
Harmony Coaching — Palveluni (page 88) redesign (APPEND to Additional CSS)
Scope: body.page-id-88 only. Text, images and block order are untouched.
Palette: primary #0B5D63 | secondary #084A4F | border #E3ECEC | wash #F3F8F8
Same design language as the front-page CSS (body.home).
============================================================================= */
/* ---------------------------------------------------------------------------
0) Shell + shared tokens
--------------------------------------------------------------------------- */
body.page-id-88 {
overflow-x: clip;
--hc-teal: #0B5D63;
--hc-teal-dark: #084A4F;
--hc-border: #E3ECEC;
--hc-wash: #F3F8F8;
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-card-pad: clamp(1.25rem, 3vw, 2.25rem);
}
body.page-id-88 .site,
body.page-id-88 .site-content {
overflow-x: clip;
}
/* Page title "Palveluni" — centred with a short teal accent line */
body.page-id-88 .entry-header {
text-align: center;
margin-bottom: 0;
}
body.page-id-88 .entry-header .entry-title {
color: var(--hc-teal);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
letter-spacing: -0.01em;
}
body.page-id-88 .entry-header .entry-title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0.6em auto 0;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
1) Main section: calm wash background, consistent vertical rhythm
--------------------------------------------------------------------------- */
body.page-id-88 .entry-content > .wp-block-group:has([id^="uusi-alku"]) {
background-color: var(--hc-wash) !important;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: 0;
padding-top: clamp(2rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
body.page-id-88 .wp-block-jetpack-layout-grid:has([id^="uusi-alku"]) {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
align-items: start;
}
/* ---------------------------------------------------------------------------
2) Image column (pink dahlia #169 + Terhi / vegetable tray #950)
Both images stay in place; only their framing changes.
--------------------------------------------------------------------------- */
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) .wp-block-image {
margin: 0;
width: 100%;
max-width: 300px;
}
body.page-id-88 .wp-image-169,
body.page-id-88 .wp-image-950 {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--hc-radius) !important;
-webkit-mask-image: none !important;
mask-image: none !important;
box-shadow: var(--hc-shadow);
border: 6px solid #fff;
box-sizing: border-box;
background: #fff;
}
body.page-id-88 .wp-image-169 { object-position: 50% 45%; }
body.page-id-88 .wp-image-950 { object-position: 50% 20%; }
/* Desktop / tablet: wider image column, images stay visible while reading */
@media (min-width: 1024px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
grid-column: 1 / span 4 !important;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column:has([id^="uusi-alku"]) {
grid-column: 5 / span 8 !important;
}
}
@media (min-width: 1024px) and (min-height: 820px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
position: sticky;
top: 5.5rem; /* clears the sticky nav */
align-self: start;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) .wp-block-image {
max-width: 260px;
}
}
/* Phone: two images side by side instead of a long stack */
@media (max-width: 599px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 0.875rem;
margin-bottom: 1.75rem;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) .wp-block-image {
flex: 1 1 0;
max-width: 170px;
}
body.page-id-88 .wp-image-169,
body.page-id-88 .wp-image-950 {
border-width: 4px;
}
}
/* ---------------------------------------------------------------------------
3) Text column: heading hierarchy + intro
--------------------------------------------------------------------------- */
body.page-id-88 .wp-block-jetpack-layout-grid-column:has([id^="uusi-alku"]) {
--hc-col: 1;
}
body.page-id-88 .entry-content h2,
body.page-id-88 .entry-content h3,
body.page-id-88 .entry-content h4 {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
letter-spacing: -0.01em;
}
body.page-id-88 .entry-content p,
body.page-id-88 .entry-content li {
font-family: "Source Serif Pro", var(--font-base, serif);
}
/* Level 1 inside content: the intro heading */
body.page-id-88 .wp-block-jetpack-layout-grid-column > h2:first-child {
color: var(--hc-teal);
font-size: clamp(1.6rem, 2.8vw, 2.125rem) !important;
line-height: 1.2;
font-weight: 700;
margin-top: 0;
margin-bottom: 1rem;
text-wrap: balance;
}
/* Intro / lead paragraph */
body.page-id-88 .wp-block-jetpack-layout-grid-column > h2:first-child + p {
font-size: 1.125rem;
line-height: 1.7;
color: #333;
margin-top: 0;
margin-bottom: 0;
}
/* ---------------------------------------------------------------------------
4) Service cards. Each programme = heading … "Varaa ilmainen konsultaatio".
The blocks are siblings (no wrapper), so each element becomes a slice
of one continuous white card: top slice = heading, bottom slice = the
"Varaa…" line. Shadows are clipped per slice so the card looks seamless.
--------------------------------------------------------------------------- */
/* All slices: every element after the first programme heading except the
very last paragraph (the general "Kaikki valmennukset…" note) */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"],
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :not(:last-child) {
background: #fff;
border-left: 1px solid var(--hc-border);
border-right: 1px solid var(--hc-border);
box-shadow: var(--hc-shadow);
clip-path: inset(0 -40px -1px -40px);
margin-top: 0 !important;
margin-bottom: -1px !important;
padding-bottom: calc(0.4rem + 1px);
padding: 0.4rem var(--hc-card-pad);
box-sizing: border-box;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ p:not(:last-child) {
color: #333;
line-height: 1.7;
}
/* Paragraph directly after a list = small sub-heading inside the card
("Ohjelma on sinulle, joka haluat:") — a little air above it */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ ul + p:not(:last-child) {
padding-top: 0.9rem;
}
/* Top slice: the programme headings (one h4, one h2 with inline 23px,
one h4 → unified as the same visual level) */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"],
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvinvoiva-aiti"],
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvastit-stressille"] {
position: relative;
margin-top: clamp(1.75rem, 3vw, 2.5rem) !important;
padding-top: calc(var(--hc-card-pad) + 0.6rem);
padding-bottom: 0.6rem;
border-top: 1px solid var(--hc-border);
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
clip-path: inset(-40px -40px 0 -40px);
color: var(--hc-teal) !important;
font-size: clamp(1.3rem, 2.2vw, 1.5rem) !important;
line-height: 1.25;
font-weight: 700;
}
/* Teal accent bar on top of each card */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"]::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvinvoiva-aiti"]::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvastit-stressille"]::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
/* Bottom slice: the "Varaa ilmainen konsultaatio" line closing each card */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :has(+ [id^="hyvinvoiva-aiti"]),
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :has(+ [id^="hyvastit-stressille"]),
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :nth-last-child(2) {
border-bottom: 1px solid var(--hc-border);
border-radius: 0 0 var(--hc-radius) var(--hc-radius);
clip-path: inset(0 -40px -40px -40px);
padding-bottom: var(--hc-card-pad);
color: var(--hc-teal) !important;
font-family: "Source Sans Pro", var(--font-headings, sans-serif) !important;
font-weight: 700;
letter-spacing: 0.01em;
position: relative;
}
/* thin divider above the closing line */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :has(+ [id^="hyvinvoiva-aiti"])::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :has(+ [id^="hyvastit-stressille"])::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :nth-last-child(2)::before {
content: "";
display: block;
height: 1px;
background: var(--hc-border);
margin: 0.5rem 0 1rem;
}
/* Lists inside cards: teal markers, comfortable spacing */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ ul:not(:last-child) {
padding-left: calc(var(--hc-card-pad) + 1.35em);
padding-top: 0.25rem;
padding-bottom: 0.5rem;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ ul li {
margin: 0.3em 0;
line-height: 1.55;
color: #333;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ ul li::marker {
color: var(--hc-teal);
font-size: 1.1em;
}
/* Final general note → soft callout under the cards */
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(> [id^="uusi-alku"]) > p:last-child {
margin-top: clamp(1.75rem, 3vw, 2.5rem);
margin-bottom: 0;
padding: 1.1rem 1.4rem;
background: #fff;
border-left: 4px solid var(--hc-teal);
border-radius: 0 var(--hc-radius) var(--hc-radius) 0;
box-shadow: var(--hc-shadow-soft);
color: #2b3b3c;
font-style: italic;
line-height: 1.65;
}
/* ---------------------------------------------------------------------------
5) Closing quote band ("Kaikki, mitä tarvitset, on jo Sinussa")
--------------------------------------------------------------------------- */
body.page-id-88 .entry-content > .wp-block-group.has-background-light-background-color {
background-color: var(--hc-teal) !important;
margin-top: 0;
padding-top: clamp(2.5rem, 6vw, 4.5rem);
padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
body.page-id-88 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-separator {
width: 64px;
max-width: 64px;
margin-left: auto;
margin-right: auto;
border: 0;
border-top: 2px solid rgba(255, 255, 255, 0.55);
background: none;
opacity: 1;
}
body.page-id-88 .entry-content > .wp-block-group.has-background-light-background-color p {
color: #fff;
font-size: clamp(1.4rem, 3.2vw, 1.875rem) !important;
line-height: 1.35;
margin: 1.25rem auto;
max-width: 720px;
text-wrap: balance;
}
/* ---------------------------------------------------------------------------
6) Mobile spacing
--------------------------------------------------------------------------- */
@media (max-width: 599px) {
body.page-id-88 .wp-block-jetpack-layout-grid:has([id^="uusi-alku"]) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.page-id-88 {
--hc-card-pad: 1.15rem;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ ul:not(:last-child) {
padding-left: calc(var(--hc-card-pad) + 1.2em);
}
}
/* =============================================================================
7) Scroll-driven reveal (Chromium; other browsers keep the static layout).
Card boxes never move — only their text fades in, so the cards stay
seamless. Nothing is hidden outside this @supports block.
============================================================================= */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes hc88-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc88-slide-left {
from { opacity: 0; transform: translateX(-28px) scale(0.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hc88-text-in {
from { color: transparent; }
}
@keyframes hc88-bar-grow {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
/* Intro heading + lead */
body.page-id-88 .wp-block-jetpack-layout-grid-column > h2:first-child,
body.page-id-88 .wp-block-jetpack-layout-grid-column > h2:first-child + p,
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(> [id^="uusi-alku"]) > p:last-child,
body.page-id-88 .entry-content > .wp-block-group.has-background-light-background-color p {
animation: hc88-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
/* Images */
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) .wp-block-image {
animation: hc88-slide-left linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%; /* completes before the column turns sticky */
}
/* Card text fades in slice by slice (box stays put) */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"],
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ :not(:last-child) {
animation: hc88-text-in linear both;
animation-timeline: view();
animation-range: entry 10% cover 22%;
}
/* Accent bar on top of each card sweeps open */
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"]::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvinvoiva-aiti"]::before,
body.page-id-88 .wp-block-jetpack-layout-grid-column > [id^="uusi-alku"] ~ [id^="hyvastit-stressille"]::before {
transform-origin: left center;
animation: hc88-bar-grow linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@media (max-width: 781px) {
@keyframes hc88-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc88-slide-left {
from { opacity: 0; transform: translateX(-14px) scale(0.98); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
}
}
}
/* Palveluni: kuvat kauemmas toisistaan (2026-10-28) */
@media (min-width: 1024px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
position: static !important;
align-self: stretch !important;
justify-content: flex-start;
}
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) .wp-block-image:has(.wp-image-950) {
margin-top: auto;
margin-bottom: auto;
}
}
@media (min-width: 600px) and (max-width: 1023px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
gap: 4rem;
}
}
@media (max-width: 599px) {
body.page-id-88 .wp-block-jetpack-layout-grid-column:has(.wp-image-169) {
gap: 2rem;
}
}
/* =============================================================================
Harmony Coaching — Tietoa minusta (page 57) redesign (APPEND to Additional CSS)
Scope: body.page-id-57 only. Text, image and block order are untouched.
Palette: primary #0B5D63 | secondary #084A4F | border #E3ECEC | wash #F3F8F8
Same design language as the front page (body.home) and Palveluni (page 88).
============================================================================= */
/* ---------------------------------------------------------------------------
0) Shell + shared tokens
--------------------------------------------------------------------------- */
body.page-id-57 {
overflow-x: clip;
--hc-teal: #0B5D63;
--hc-teal-dark: #084A4F;
--hc-border: #E3ECEC;
--hc-wash: #F3F8F8;
--hc-text: #1F2A2B; /* body text: near-black with a teal undertone */
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-card-pad: clamp(1.25rem, 3vw, 2.25rem);
}
body.page-id-57 .site,
body.page-id-57 .site-content {
overflow-x: clip;
}
/* Page title "Tietoa minusta" — centred with a short teal accent line */
body.page-id-57 .entry-header {
text-align: center;
margin-bottom: 0;
}
body.page-id-57 .entry-header .entry-title {
color: var(--hc-teal);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
letter-spacing: -0.01em;
}
body.page-id-57 .entry-header .entry-title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0.6em auto 0;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
1) Main section: calm wash background, centred 1180px grid
--------------------------------------------------------------------------- */
body.page-id-57 .entry-content > .wp-block-group:has(.wp-image-945) {
background-color: var(--hc-wash) !important;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: 0;
padding-top: clamp(2rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
body.page-id-57 .wp-block-jetpack-layout-grid:has(.wp-image-945) {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
align-items: start;
}
@media (min-width: 1024px) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) {
grid-column: 1 / span 4 !important;
}
body.page-id-57 .wp-block-jetpack-layout-grid:has(.wp-image-945) > .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) {
grid-column: 5 / span 8 !important;
}
}
/* Tablet (8-col grid): narrower photo column, wider reading column */
@media (min-width: 600px) and (max-width: 1023px) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) {
grid-column: 1 / span 3 !important;
}
body.page-id-57 .wp-block-jetpack-layout-grid:has(.wp-image-945) > .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) {
grid-column: 4 / span 5 !important;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image::before {
inset: 10px -10px -10px 10px;
}
}
/* ---------------------------------------------------------------------------
2) Portrait — kuva-5 (#945) stays in the left column; only its framing
changes: rounded arch-top portrait with white frame + soft teal halo.
--------------------------------------------------------------------------- */
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) {
display: flex;
justify-content: center;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image {
position: relative;
margin: 0;
width: 100%;
max-width: 300px;
}
/* offset teal outline behind the photo */
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image::before {
content: "";
position: absolute;
inset: 14px -14px -14px 14px;
border: 2px solid rgba(11, 93, 99, 0.28);
border-radius: 999px 999px var(--hc-radius) var(--hc-radius);
pointer-events: none;
}
body.page-id-57 .wp-image-945 {
position: relative;
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 30%;
border-radius: 999px 999px var(--hc-radius) var(--hc-radius) !important;
-webkit-mask-image: none !important;
mask-image: none !important;
border: 6px solid #fff;
box-sizing: border-box;
background: #fff;
box-shadow: var(--hc-shadow);
}
@media (min-width: 1024px) and (min-height: 820px) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) {
position: sticky;
top: 5.5rem; /* clears the sticky nav */
align-self: start;
}
}
@media (max-width: 599px) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) {
margin-bottom: 2.25rem;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image {
max-width: 240px;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image::before {
inset: 10px -10px -10px 10px;
}
body.page-id-57 .wp-image-945 {
border-width: 4px;
}
}
/* ---------------------------------------------------------------------------
3) Text column: lead, body copy, closing line
--------------------------------------------------------------------------- */
body.page-id-57 .wp-block-jetpack-layout-grid:has(.wp-image-945) > .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) {
max-width: 46rem;
}
body.page-id-57 .entry-content p {
font-family: "Source Serif Pro", var(--font-base, serif);
color: var(--hc-text);
line-height: 1.75;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p {
margin-top: 0;
margin-bottom: 1.15rem;
}
/* Lead 1: "Olen Terhi, …" — acts as the section heading */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:first-child {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-teal);
font-size: clamp(1.45rem, 2.6vw, 1.875rem);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
margin-bottom: 0.9rem;
}
/* Lead 2: "Olen erityisherkkä, …" — larger intro text with an accent line below */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-child(2) {
font-size: 1.2rem;
line-height: 1.65;
color: #1A2526;
padding-bottom: 1.5rem;
margin-bottom: 1.75rem;
position: relative;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-child(2)::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* Closing line "Haluan olla auttamassa Sinua …" — highlighted note */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(3) {
margin-top: 1.75rem;
margin-bottom: 0;
padding: 1.1rem 1.4rem;
background: #fff;
border-left: 4px solid var(--hc-teal);
border-radius: 0 var(--hc-radius) var(--hc-radius) 0;
box-shadow: var(--hc-shadow-soft);
color: var(--hc-teal-dark);
font-style: italic;
font-size: 1.1rem;
line-height: 1.65;
}
/* ---------------------------------------------------------------------------
4) Education card: "Koulutukseni mm." (label) + the year list paragraph.
Two sibling paragraphs become one white card with a teal top bar.
--------------------------------------------------------------------------- */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(2),
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:last-child {
background: #fff;
border: 1px solid var(--hc-border);
box-shadow: var(--hc-shadow);
box-sizing: border-box;
padding-left: var(--hc-card-pad);
padding-right: var(--hc-card-pad);
}
/* top slice: label */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(2) {
position: relative;
margin-top: clamp(2.25rem, 4vw, 3rem);
margin-bottom: 0;
padding-top: calc(var(--hc-card-pad) + 0.35rem);
padding-bottom: 0.85rem;
border-bottom: 0;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
clip-path: inset(-40px -40px 0 -40px);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-teal);
font-size: clamp(1.3rem, 2.2vw, 1.5rem);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
}
/* teal accent bar */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(2)::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
/* thin divider under the label */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(2)::after {
content: "";
display: block;
height: 1px;
background: var(--hc-border);
margin-top: 0.85rem;
}
/* bottom slice: the year lines (one paragraph with
line breaks).
Hanging indent keeps wrapped lines aligned under the text, not the year. */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:last-child {
margin-top: -1px;
margin-bottom: 0;
padding-top: 0.2rem;
padding-bottom: var(--hc-card-pad);
border-top: 0;
border-radius: 0 0 var(--hc-radius) var(--hc-radius);
clip-path: inset(0 -40px -40px -40px);
font-size: 1.02rem;
line-height: 2.05;
color: var(--hc-text);
font-variant-numeric: tabular-nums lining-nums;
padding-left: calc(var(--hc-card-pad) + 2.35em);
text-indent: -2.35em;
}
/* the same hanging indent for every
line, where supported */
@supports (text-indent: 1em each-line) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:last-child {
text-indent: -2.35em each-line;
}
}
/* ---------------------------------------------------------------------------
5) Mobile spacing
--------------------------------------------------------------------------- */
@media (max-width: 599px) {
body.page-id-57 .wp-block-jetpack-layout-grid:has(.wp-image-945) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.page-id-57 {
--hc-card-pad: 1.15rem;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-child(2) {
font-size: 1.1rem;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:last-child {
line-height: 1.6;
padding-top: 0.5rem;
}
/* on phones wrapped lines need a little air between entries */
@supports (text-indent: 1em each-line) {
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:last-child {
line-height: 1.85;
}
}
}
/* =============================================================================
6) Scroll-driven reveal (Chromium; other browsers keep the static layout).
Card boxes never move — only their text fades in, so the card stays
seamless. Nothing is hidden outside this @supports block.
============================================================================= */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes hc57-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc57-slide-left {
from { opacity: 0; transform: translateX(-28px) scale(0.97); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hc57-text-in {
from { color: transparent; }
}
@keyframes hc57-bar-grow {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
/* Story paragraphs (everything except the two card slices) */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:not(:nth-last-child(-n+2)) {
animation: hc57-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
/* Portrait */
body.page-id-57 .wp-block-jetpack-layout-grid-column:has(.wp-image-945) .wp-block-image {
animation: hc57-slide-left linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%; /* completes before the column turns sticky */
}
/* Education card: text fades in, box stays put */
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(-n+2) {
animation: hc57-text-in linear both;
animation-timeline: view();
animation-range: entry 10% cover 22%;
}
body.page-id-57 .wp-block-jetpack-layout-grid-column:not(:has(.wp-image-945)) > p:nth-last-child(2)::before {
transform-origin: left center;
animation: hc57-bar-grow linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@media (max-width: 781px) {
@keyframes hc57-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc57-slide-left {
from { opacity: 0; transform: translateX(-14px) scale(0.98); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
}
}
}
/* #############################################################################
YHTEYSTIEDOT (page-id-9, /contact/) — source: yhteystiedot/yhteystiedot.css
############################################################################# */
/* =============================================================================
Harmony Coaching — Yhteystiedot (page 9, /contact/) redesign (APPEND to Additional CSS)
Scope: body.page-id-9 only. Text, links and block order are untouched.
Palette: primary #0B5D63 | secondary #084A4F | border #E3ECEC | wash #F3F8F8
Same design language as body.home, page-id-88 (Palveluni) and page-id-57.
============================================================================= */
/* 0) Shell + shared tokens ------------------------------------------------- */
body.page-id-9 {
overflow-x: clip;
--hc-teal: #0B5D63;
--hc-teal-dark: #084A4F;
--hc-border: #E3ECEC;
--hc-wash: #F3F8F8;
--hc-text: #1F2A2B;
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-card-pad: clamp(1.25rem, 3vw, 2.25rem);
}
body.page-id-9 .site,
body.page-id-9 .site-content {
overflow-x: clip;
}
/* Page title "Yhteystiedot" — centred, teal, short accent line */
body.page-id-9 .entry-header {
text-align: center;
margin-bottom: 0;
}
body.page-id-9 .entry-header .entry-title {
color: var(--hc-teal);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
letter-spacing: -0.01em;
}
body.page-id-9 .entry-header .entry-title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0.6em auto 0;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* 1) Calm wash band behind the whole content area ------------------------- */
body.page-id-9 .entry-content {
background: var(--hc-wash);
margin-top: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(2rem, 5vw, 4rem) 1rem clamp(2.5rem, 6vw, 5rem);
max-width: none;
/* full-bleed band at every width */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
body.page-id-9 .entry-content p {
font-family: "Source Serif Pro", var(--font-base, serif);
color: var(--hc-text);
line-height: 1.75;
}
/* Intro "Autan mielelläni juuri Sinua …" — centred lead */
body.page-id-9 .entry-content > p:first-child {
max-width: 36rem;
margin: 0 auto;
text-align: center !important;
font-size: clamp(1.1rem, 1.9vw, 1.25rem);
line-height: 1.65;
color: #1A2526;
text-wrap: balance;
}
body.page-id-9 .entry-content > .wp-block-spacer {
height: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}
body.page-id-9 .entry-content > .wp-block-spacer.desktop-only {
display: block !important; /* same breathing room on phones */
}
/* 2) Contact card: name + e-mail + phone ---------------------------------- */
body.page-id-9 .entry-content > .wp-block-columns {
position: relative;
box-sizing: border-box;
max-width: 30rem;
margin: 0 auto !important;
padding: calc(var(--hc-card-pad) + 0.35rem) var(--hc-card-pad) var(--hc-card-pad);
background: #fff;
border: 1px solid var(--hc-border);
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
display: block;
}
/* teal accent bar */
body.page-id-9 .entry-content > .wp-block-columns::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
body.page-id-9 .entry-content > .wp-block-columns > .wp-block-column {
margin: 0;
width: 100%;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p {
margin: 0;
}
/* Name — card heading, divider below */
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p:first-child {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-teal);
font-size: clamp(1.3rem, 2.2vw, 1.5rem);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
padding-bottom: 0.9rem;
margin-bottom: 0.6rem;
border-bottom: 1px solid var(--hc-border);
}
/* E-mail + phone rows, each with a round teal icon (decorative, CSS only) */
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p:has(> a[href^="mailto:"]),
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p:has(> a[href^="tel:"]) {
padding: 0.55rem 0;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="mailto:"],
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="tel:"] {
display: inline-flex;
align-items: center;
gap: 0.85rem;
color: var(--hc-text);
text-decoration: none;
font-size: 1.1rem;
overflow-wrap: anywhere;
transition: color 0.2s ease;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="mailto:"]::before,
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="tel:"]::before {
content: "";
flex: 0 0 2.5rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--hc-wash);
background-repeat: no-repeat;
background-position: center;
background-size: 1.2rem;
box-shadow: inset 0 0 0 1px var(--hc-border);
transition: background-color 0.2s ease;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="mailto:"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="tel:"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a:hover,
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a:focus-visible {
color: var(--hc-teal);
text-decoration: underline;
text-underline-offset: 3px;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a:hover::before,
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a:focus-visible::before {
background-color: #E2F0F0;
}
/* 3) Mobile ---------------------------------------------------------------- */
@media (max-width: 599px) {
body.page-id-9 {
--hc-card-pad: 1.25rem;
}
body.page-id-9 .entry-content {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="mailto:"],
body.page-id-9 .entry-content > .wp-block-columns .wp-block-column > p > a[href^="tel:"] {
font-size: 1.02rem;
}
}
/* 4) Scroll-driven reveal (Chromium; static elsewhere; off for reduced motion) */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes hc9-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc9-bar-grow {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
body.page-id-9 .entry-content > p:first-child,
body.page-id-9 .entry-content > .wp-block-columns {
animation: hc9-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 20%;
}
body.page-id-9 .entry-content > .wp-block-columns::before {
transform-origin: left center;
animation: hc9-bar-grow linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
}
}
/* #############################################################################
BLOGI (page-id-82 listing + single-post) — source: blogi/blogi.css
############################################################################# */
/* =============================================================================
Harmony Coaching — Blogi (page 82, /blogi/) + single blog posts (APPEND to Additional CSS)
Scope: body.page-id-82 (the Blogi page is a normal page whose content is a
Newspack "Homepage Posts" block + a sidebar column) and body.single-post.
Text, links, blocks and the newsletter form markup are untouched.
The Social Icons block in the sidebar is intentionally NOT styled (it is
being removed in the editor).
Palette: primary #0B5D63 | secondary #084A4F | border #E3ECEC | wash #F3F8F8
============================================================================= */
/* 0) Shell + shared tokens (both templates) -------------------------------- */
body.page-id-82,
body.single-post {
overflow-x: clip;
--hc-teal: #0B5D63;
--hc-teal-dark: #084A4F;
--hc-border: #E3ECEC;
--hc-wash: #F3F8F8;
--hc-text: #1F2A2B;
--hc-muted: #5B6B6C;
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-hover: 0 10px 32px rgba(11, 93, 99, 0.14);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-card-pad: clamp(1.25rem, 3vw, 2rem);
}
body.page-id-82 .site,
body.page-id-82 .site-content,
body.single-post .site,
body.single-post .site-content {
overflow-x: clip;
}
/* Page / post title — centred teal with a short accent line */
body.page-id-82 .entry-header,
body.single-post .entry-header {
text-align: center;
margin-bottom: 0;
}
body.page-id-82 .entry-header .entry-title,
body.single-post .entry-header .entry-title {
color: var(--hc-teal);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
body.page-id-82 .entry-header .entry-title::after,
body.single-post .entry-header .entry-title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0.6em auto 0;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* =============================================================================
A) BLOG LISTING (body.page-id-82)
============================================================================= */
/* A1) Section: wash band, centred 1180px grid */
body.page-id-82 .entry-content > .wp-block-group:has(.wpnbha) {
background-color: var(--hc-wash) !important;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: 0;
padding-top: clamp(2rem, 5vw, 4rem);
padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
body.page-id-82 .wp-block-jetpack-layout-grid:has(.wpnbha) {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
align-items: start;
}
/* desktop: posts 9/12, newsletter 3/12 */
@media (min-width: 1024px) {
body.page-id-82 .wp-block-jetpack-layout-grid-column:has(.wpnbha) {
grid-column: 1 / span 9 !important;
}
body.page-id-82 .wp-block-jetpack-layout-grid:has(.wpnbha) > .wp-block-jetpack-layout-grid-column:not(:has(.wpnbha)) {
grid-column: 10 / span 3 !important;
--hc-card-pad: 1.4rem;
position: sticky;
top: 5.5rem; /* clears the sticky nav */
}
}
/* tablet: posts full width, newsletter card below them */
@media (min-width: 600px) and (max-width: 1023px) {
body.page-id-82 .wp-block-jetpack-layout-grid-column:has(.wpnbha) {
grid-column: 1 / span 8 !important;
grid-row: 1 !important;
}
body.page-id-82 .wp-block-jetpack-layout-grid:has(.wpnbha) > .wp-block-jetpack-layout-grid-column:not(:has(.wpnbha)) {
grid-column: 2 / span 6 !important;
grid-row: 2 !important;
margin-top: 2.5rem;
}
}
/* A2) Post cards */
body.page-id-82 .wpnbha [data-posts] {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.75rem, 3vw, 2.25rem);
}
@media (min-width: 600px) {
body.page-id-82 .wpnbha [data-posts] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body.page-id-82 .wpnbha article {
display: flex;
flex-direction: column;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
background: #fff;
border: 1px solid var(--hc-border);
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.page-id-82 .wpnbha article:hover,
body.page-id-82 .wpnbha article:focus-within {
transform: translateY(-3px);
box-shadow: var(--hc-shadow-hover);
}
/* featured image: rounded top (card clips it), uniform 3:2 crop */
body.page-id-82 .wpnbha article .post-thumbnail {
margin: 0 !important;
width: 100%;
overflow: hidden;
background: var(--hc-wash);
}
body.page-id-82 .wpnbha article .post-thumbnail a {
display: block;
}
body.page-id-82 .wpnbha article .post-thumbnail img {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: 50% 45%;
border-radius: 0;
transition: transform 0.6s ease;
}
body.page-id-82 .wpnbha article:hover .post-thumbnail img {
transform: scale(1.04);
}
/* text area with teal top bar */
body.page-id-82 .wpnbha article .entry-wrapper {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: calc(var(--hc-card-pad) * 0.9) var(--hc-card-pad) var(--hc-card-pad);
border-top: 4px solid var(--hc-teal);
}
/* date first, above the title */
body.page-id-82 .wpnbha article .entry-meta {
order: -1;
margin: 0 0 0.6rem;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--hc-muted);
display: flex;
align-items: center;
gap: 0.45rem;
}
body.page-id-82 .wpnbha article .entry-meta::before {
content: "";
width: 0.95rem;
height: 0.95rem;
flex: 0 0 auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.page-id-82 .wpnbha article .entry-title {
margin: 0 0 0.75rem !important;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: clamp(1.25rem, 1.9vw, 1.4rem) !important;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
body.page-id-82 .wpnbha article .entry-title a {
color: var(--hc-teal);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease, color 0.2s ease;
}
body.page-id-82 .wpnbha article .entry-title a:hover,
body.page-id-82 .wpnbha article .entry-title a:focus-visible {
color: var(--hc-teal-dark);
background-size: 100% 2px;
}
body.page-id-82 .wpnbha article .entry-wrapper > p {
margin: 0;
font-family: "Source Serif Pro", var(--font-base, serif);
font-size: 0.98rem;
line-height: 1.75;
color: var(--hc-text);
overflow-wrap: break-word;
hyphens: auto;
}
/* A3) Pagination / "load more" — only appears if enabled in the block settings */
body.page-id-82 .wpnbha button[data-next],
body.page-id-82 .wpnbha .button,
body.page-id-82 .navigation.pagination .page-numbers {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
border-radius: 6px;
border: 2px solid var(--hc-teal);
background: #fff;
color: var(--hc-teal);
padding: 0.65rem 1.5rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
body.page-id-82 .wpnbha button[data-next]:hover,
body.page-id-82 .wpnbha .button:hover,
body.page-id-82 .navigation.pagination .page-numbers:hover,
body.page-id-82 .navigation.pagination .page-numbers.current {
background: var(--hc-teal);
color: #fff;
}
body.page-id-82 .wpnbha button[data-next] {
display: block;
margin: 2.5rem auto 0;
}
/* A4) Newsletter card ("Tilaa blogi" + text + Jetpack subscribe form).
Three sibling blocks become one white card with a teal top bar. */
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi,
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi + p,
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi + p + .wp-block-jetpack-subscriptions {
background: #fff;
border: 1px solid var(--hc-border);
box-shadow: var(--hc-shadow);
box-sizing: border-box;
padding-left: var(--hc-card-pad);
padding-right: var(--hc-card-pad);
margin-top: 0;
margin-bottom: 0;
}
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi {
position: relative;
padding-top: calc(var(--hc-card-pad) + 0.35rem);
padding-bottom: 0.4rem;
border-bottom: 0;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
clip-path: inset(-40px -40px 0 -40px);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-teal);
font-size: clamp(1.3rem, 2.2vw, 1.5rem);
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
}
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi + p {
margin-top: -1px;
padding-top: 0.2rem;
padding-bottom: 0.9rem;
border-top: 0;
border-bottom: 0;
clip-path: inset(0 -40px 0 -40px);
font-family: "Source Serif Pro", var(--font-base, serif);
color: var(--hc-text);
font-size: 1rem !important;
line-height: 1.65;
}
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi + p + .wp-block-jetpack-subscriptions {
margin-top: -1px;
padding-top: 0.2rem;
padding-bottom: var(--hc-card-pad);
border-top: 0;
border-radius: 0 0 var(--hc-radius) var(--hc-radius);
clip-path: inset(0 -40px -40px -40px);
}
body.page-id-82 .wp-block-jetpack-subscriptions form,
body.page-id-82 .wp-block-jetpack-subscriptions .wp-block-jetpack-subscriptions__form-elements {
display: flex !important;
flex-direction: column !important;
gap: 0.7rem;
margin: 0;
}
body.page-id-82 .wp-block-jetpack-subscriptions .wp-block-jetpack-subscriptions__form-elements p {
margin: 0 !important;
width: 100%;
}
body.page-id-82 .wp-block-jetpack-subscriptions input[type="email"] {
box-sizing: border-box;
width: 100% !important;
margin: 0 !important;
padding: 0.7rem 0.8rem !important;
font-size: 0.95rem !important;
line-height: 1.4 !important;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-text);
background: var(--hc-wash);
border: 1px solid #CFE0E0 !important;
border-radius: 8px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.page-id-82 .wp-block-jetpack-subscriptions input[type="email"]::placeholder {
color: #7A8B8C;
}
body.page-id-82 .wp-block-jetpack-subscriptions input[type="email"]:focus {
outline: none;
background: #fff;
border-color: var(--hc-teal) !important;
box-shadow: 0 0 0 3px rgba(11, 93, 99, 0.18);
}
body.page-id-82 .wp-block-jetpack-subscriptions button[type="submit"] {
box-sizing: border-box;
width: 100% !important;
margin: 0 !important;
padding: 0.7rem 1.25rem !important;
line-height: 1.4 !important;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 1.05rem !important;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff !important;
background-color: var(--hc-teal) !important;
border: 0 !important;
border-radius: 6px !important;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
body.page-id-82 .wp-block-jetpack-subscriptions button[type="submit"]:hover,
body.page-id-82 .wp-block-jetpack-subscriptions button[type="submit"]:focus-visible {
background-color: var(--hc-teal-dark) !important;
transform: translateY(-1px);
}
/* A5) Mobile */
@media (max-width: 599px) {
body.page-id-82 .wp-block-jetpack-layout-grid:has(.wpnbha) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.page-id-82 .wp-block-jetpack-layout-grid:has(.wpnbha) > .wp-block-jetpack-layout-grid-column:not(:has(.wpnbha)) {
margin-top: 2.5rem;
}
body.page-id-82 {
--hc-card-pad: 1.2rem;
}
}
/* =============================================================================
B) SINGLE BLOG POST (body.single-post)
============================================================================= */
/* B1) Header meta (author, date, category, tags) — small, calm, centred */
body.single-post .entry-header .entry-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem 1.1rem;
margin-top: 1.1rem;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 0.9rem;
color: var(--hc-muted);
}
body.single-post .entry-header .entry-meta > span {
margin: 0 !important;
}
body.single-post .entry-header .entry-meta a,
body.single-post .entry-footer a {
color: var(--hc-muted);
text-decoration: none;
}
body.single-post .entry-header .entry-meta a:hover,
body.single-post .entry-footer a:hover {
color: var(--hc-teal);
text-decoration: underline;
}
body.single-post .entry-header .entry-meta svg,
body.single-post .entry-footer svg {
fill: var(--hc-teal);
}
/* B2) Featured image — framed, rounded, not edge to edge */
body.single-post figure.post-thumbnail {
box-sizing: border-box;
max-width: 900px;
margin: clamp(1.75rem, 4vw, 2.75rem) auto clamp(2rem, 4vw, 3rem);
padding: 0 1rem;
}
body.single-post figure.post-thumbnail img {
display: block;
width: 100%;
height: auto;
max-height: 560px;
object-fit: cover;
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
}
/* B3) Reading column ~700px with an even rhythm */
body.single-post .entry-content > *:not(.alignwide):not(.alignfull) {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol {
font-family: "Source Serif Pro", var(--font-base, serif);
font-size: 1.1rem;
line-height: 1.75;
color: var(--hc-text);
margin-top: 0;
margin-bottom: 1.35rem;
}
/* first paragraph = gentle lead */
body.single-post .entry-content > p:first-child {
font-size: 1.22rem;
line-height: 1.7;
color: #1A2526;
}
/* paragraphs that are only a bold line act as sub-headings in these posts */
body.single-post .entry-content > p:has(> strong:only-child) {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-teal);
font-size: 1.25rem;
line-height: 1.35;
margin-top: 2.25rem;
margin-bottom: 0.75rem;
}
body.single-post .entry-content a {
color: var(--hc-teal);
text-underline-offset: 3px;
}
/* lists: soft card with teal markers */
body.single-post .entry-content > ul,
body.single-post .entry-content > ol {
box-sizing: border-box;
padding: 1.1rem 1.4rem 1.1rem 2.6rem;
background: var(--hc-wash);
border-left: 4px solid var(--hc-teal);
border-radius: 0 var(--hc-radius) var(--hc-radius) 0;
}
body.single-post .entry-content > ul li,
body.single-post .entry-content > ol li {
margin: 0.3rem 0;
padding-left: 0.2rem;
}
body.single-post .entry-content > ul li::marker,
body.single-post .entry-content > ol li::marker {
color: var(--hc-teal);
font-weight: 700;
}
/* B4) Footer meta, prev/next navigation */
body.single-post .entry-footer {
max-width: 700px;
box-sizing: border-box;
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--hc-border);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
color: var(--hc-muted);
font-size: 0.9rem;
}
body.single-post .post-navigation {
max-width: 760px;
margin-top: clamp(2.5rem, 5vw, 4rem);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
body.single-post .post-navigation .nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
body.single-post .post-navigation .nav-previous,
body.single-post .post-navigation .nav-next {
margin: 0 !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
body.single-post .post-navigation .nav-links a br {
display: none;
}
body.single-post .post-navigation .nav-next {
grid-column: 2;
}
body.single-post .post-navigation .nav-links a {
display: block;
height: 100%;
box-sizing: border-box;
padding: 1.1rem 1.3rem 1.2rem;
background: #fff;
border: 1px solid var(--hc-border);
border-top: 4px solid var(--hc-teal);
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow-soft);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.single-post .post-navigation .nav-links a:hover,
body.single-post .post-navigation .nav-links a:focus-visible {
transform: translateY(-2px);
box-shadow: var(--hc-shadow-hover);
}
body.single-post .post-navigation .meta-nav {
display: block;
line-height: 1.4;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hc-muted);
}
body.single-post .post-navigation .post-title {
display: block;
margin-top: 0.35rem;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 1.15rem;
line-height: 1.3;
font-weight: 700;
color: var(--hc-teal);
}
body.single-post .comments-area .comment-reply-title {
color: var(--hc-teal);
}
@media (max-width: 599px) {
body.single-post figure.post-thumbnail {
padding: 0 0.75rem;
}
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol {
font-size: 1.05rem;
}
body.single-post .entry-content > p:first-child {
font-size: 1.12rem;
}
body.single-post .entry-content > ul,
body.single-post .entry-content > ol {
padding: 0.9rem 1rem 0.9rem 2.1rem;
}
body.single-post .post-navigation .nav-links {
grid-template-columns: 1fr;
}
body.single-post .post-navigation .nav-next {
grid-column: 1;
}
}
/* =============================================================================
C) Scroll-driven reveal (Chromium; static elsewhere; off for reduced motion)
============================================================================= */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes hc82-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc82-zoom-in {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hc82-text-in {
from { color: transparent; }
}
@keyframes hc82-bar-grow {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
/* listing: cards rise in as they enter */
body.page-id-82 .wpnbha article {
animation: hc82-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 22%;
}
/* newsletter card: text fades, box stays put */
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi,
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi + p {
animation: hc82-text-in linear both;
animation-timeline: view();
animation-range: entry 10% cover 22%;
}
body.page-id-82 .wp-block-jetpack-layout-grid-column > #tilaa-blogi::before {
transform-origin: left center;
animation: hc82-bar-grow linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
/* single post: image settles, lists and nav cards rise in */
body.single-post figure.post-thumbnail img {
animation: hc82-zoom-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 20%;
}
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > p:has(> strong:only-child),
body.single-post .post-navigation .nav-links > div {
animation: hc82-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 20%;
}
@media (max-width: 781px) {
@keyframes hc82-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
}
}
}
/* #############################################################################
HEALTH COACHING (page-id-192, /health-coaching-2/) — source: health-coaching/health-coaching.css
############################################################################# */
/* =============================================================================
Harmony Coaching — Health Coaching (page 192, /health-coaching-2/) redesign
APPEND to Additional CSS. Scope: body.page-id-192 only.
Text, images and block order are untouched. Social Icons block is
intentionally NOT styled (it is scheduled for removal in the editor).
Palette: primary #0B5D63 | dark #084A4F | border #E3ECEC | wash #F3F8F8
============================================================================= */
/* 0) Shell + tokens ---------------------------------------------------------- */
body.page-id-192 {
overflow-x: clip;
--hc-teal: #0B5D63;
--hc-teal-dark: #084A4F;
--hc-border: #E3ECEC;
--hc-wash: #F3F8F8;
--hc-text: #1F2A2B;
--hc-radius: 12px;
--hc-shadow: 0 4px 24px rgba(11, 93, 99, 0.08);
--hc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
--hc-card-pad: clamp(1.25rem, 3vw, 2.5rem);
}
body.page-id-192 .site,
body.page-id-192 .site-content {
overflow-x: clip;
}
body.page-id-192 .entry-content p {
font-family: "Source Serif Pro", var(--font-base, serif);
color: var(--hc-text);
line-height: 1.75;
}
body.page-id-192 .entry-content h4 {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
letter-spacing: -0.01em;
}
/* Page title — centred teal with a short accent line */
body.page-id-192 .entry-header {
text-align: center;
margin-bottom: 0;
}
body.page-id-192 .entry-header .entry-title {
color: var(--hc-teal);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-weight: 700;
letter-spacing: -0.01em;
}
body.page-id-192 .entry-header .entry-title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin: 0.6em auto 0;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* Empty layout-grid columns (and an empty Jetpack contact-info block)
take no space. Nothing with content is hidden. */
body.page-id-192 .wp-block-jetpack-layout-grid-column:empty,
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> .wp-block-jetpack-contact-info:only-child:not(:has(*))) {
display: none !important;
}
/* 1) Intro line "Oletko valmis säteilemään? …" — teal lead ------------------ */
body.page-id-192 .entry-content > .wp-block-columns:first-child {
max-width: 40rem;
margin: clamp(1.75rem, 4vw, 2.75rem) auto clamp(1.5rem, 3vw, 2.25rem) !important;
padding: 0 1.25rem;
box-sizing: border-box;
}
body.page-id-192 .entry-content > .wp-block-columns:first-child p {
margin: 0;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important;
line-height: 1.45;
font-weight: 600;
color: var(--hc-teal);
text-wrap: balance;
}
/* 2) Hero image (#212) — framed, a little larger -------------------------- */
body.page-id-192 .entry-content > .wp-block-image:has(.wp-image-212) {
margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
padding: 0 1.25rem;
box-sizing: border-box;
}
body.page-id-192 .entry-content > .wp-block-image:has(.wp-image-212) figure {
margin: 0 auto;
max-width: 440px;
width: 100%;
}
body.page-id-192 .wp-image-212 {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3;
object-fit: cover;
box-sizing: border-box;
border: 6px solid #fff;
border-radius: var(--hc-radius);
background: #fff;
box-shadow: var(--hc-shadow);
}
/* 3) "Mitä on health coaching?" — wash band, heading + white text card ---- */
body.page-id-192 .entry-content > .wp-block-group:has(#mita-on-health-coaching) {
background: var(--hc-wash);
margin-top: 0;
margin-bottom: 0;
padding-top: clamp(2.5rem, 5vw, 4.5rem);
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#mita-on-health-coaching) {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
align-items: start;
}
body.page-id-192 #mita-on-health-coaching {
margin: 0 0 1.25rem;
color: var(--hc-teal);
font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
line-height: 1.2;
font-weight: 700;
text-wrap: balance;
}
body.page-id-192 #mita-on-health-coaching::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: 0.7rem;
border-radius: 3px;
background: var(--hc-teal);
opacity: 0.85;
}
/* The text column itself becomes the card */
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) {
position: relative;
background: #fff;
border: 1px solid var(--hc-border);
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
padding: calc(var(--hc-card-pad) + 0.35rem) var(--hc-card-pad) var(--hc-card-pad) !important;
box-sizing: border-box;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5)::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p {
margin: 0 0 1.15rem;
font-size: 1.06rem;
}
/* First paragraph = lead */
body.page-id-192 #block-b16b98e3-833a-4810-96af-f4ee79c921d5 {
font-size: 1.16rem !important;
line-height: 1.7 !important;
}
/* Warm closing lines ("Toivotan sinut…", "Tervetuloa mukaan…") */
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p:nth-last-child(2),
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p:nth-last-child(3) {
font-style: italic;
color: #2b3b3c;
}
/* CTA: "Varaa ilmainen konsultaatio…" (plain paragraph, not a link) */
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p:last-child {
margin: 1.75rem 0 0;
padding: 1.1rem 1.35rem 1.1rem 3.6rem;
background-color: var(--hc-wash);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 1.2rem 50%;
background-size: 1.5rem;
border-left: 4px solid var(--hc-teal);
border-radius: 0 var(--hc-radius) var(--hc-radius) 0;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.5;
color: var(--hc-teal);
}
/* Desktop: heading column sticky on the left, wider card */
@media (min-width: 1024px) {
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #mita-on-health-coaching) {
grid-column: 1 / span 4 !important;
position: sticky;
top: 5.5rem;
align-self: start;
padding-top: 1.75rem;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) {
grid-column: 5 / span 8 !important;
}
}
/* Tablet: heading above the card */
@media (min-width: 600px) and (max-width: 1023px) {
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #mita-on-health-coaching) {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
text-align: center;
}
body.page-id-192 #mita-on-health-coaching {
text-align: center !important;
}
body.page-id-192 #mita-on-health-coaching::after {
margin-left: auto;
margin-right: auto;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
max-width: 720px;
width: 100%;
margin: 0 auto;
}
}
/* Spacer between the text band and the quote band → bands meet cleanly */
body.page-id-192 .entry-content > .wp-block-group:has(#mita-on-health-coaching) + .wp-block-spacer {
height: 0 !important;
}
/* 4) Quote band "Be the change you want to see." — teal, as on Palveluni -- */
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color {
background-color: var(--hc-teal) !important;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-spacer[style*="64px"] {
height: clamp(2.5rem, 6vw, 4rem) !important;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-separator {
width: 64px;
max-width: 64px;
margin-left: auto;
margin-right: auto;
border: 0;
border-top: 2px solid rgba(255, 255, 255, 0.55);
background: none;
opacity: 1;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote {
border: 0;
margin: 0 auto;
padding: 0 1rem;
max-width: 760px;
text-align: center;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote p {
color: #fff;
font-size: clamp(1.5rem, 3.4vw, 2.1rem) !important;
line-height: 1.35;
font-style: italic;
margin: 0.5rem auto 1rem;
text-wrap: balance;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote cite {
display: block;
text-align: center !important;
color: rgba(255, 255, 255, 0.82) !important;
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 0.9rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote cite::before {
content: "— ";
}
/* 5) "Ota yhteyttä" — contact card -------------------------------------- */
body.page-id-192 .entry-content > .wp-block-group:has(#ota-yhteytta) {
background: var(--hc-wash);
margin-top: 0;
margin-bottom: 0;
padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
body.page-id-192 .entry-content > .wp-block-group:has(#ota-yhteytta) > .wp-block-group__inner-container > .wp-block-spacer {
height: clamp(2.5rem, 6vw, 4.5rem) !important;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) {
position: relative;
display: block !important;
width: calc(100% - 2.5rem);
max-width: 34rem;
margin: 0 auto !important;
padding: calc(var(--hc-card-pad) + 0.35rem) var(--hc-card-pad) var(--hc-card-pad) !important;
box-sizing: border-box;
background: #fff;
border: 1px solid var(--hc-border);
border-radius: var(--hc-radius);
box-shadow: var(--hc-shadow);
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta)::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 5px;
border-radius: var(--hc-radius) var(--hc-radius) 0 0;
background: linear-gradient(90deg, var(--hc-teal), #2E8A8F);
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) > .wp-block-jetpack-layout-grid-column {
margin: 0;
padding: 0 !important;
}
body.page-id-192 #ota-yhteytta {
margin: 0 0 1.1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--hc-border);
color: var(--hc-teal);
font-size: clamp(1.4rem, 2.4vw, 1.75rem) !important;
line-height: 1.2;
font-weight: 700;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-contact-info {
margin: 0 0 0.5rem;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone {
padding: 0.45rem 0;
margin: 0;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a {
display: inline-flex;
align-items: center;
gap: 0.85rem;
color: var(--hc-text);
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
font-size: 1.1rem;
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.2s ease;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a::before,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a::before {
content: "";
flex: 0 0 2.5rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--hc-wash);
background-repeat: no-repeat;
background-position: center;
background-size: 1.2rem;
box-shadow: inset 0 0 0 1px var(--hc-border);
transition: background-color 0.2s ease;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a:hover,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a:focus-visible,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a:hover,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a:focus-visible {
color: var(--hc-teal);
text-decoration: underline;
text-underline-offset: 3px;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-email a:hover::before,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) .wp-block-jetpack-phone a:hover::before {
background-color: #E2F0F0;
}
/* Social-links column: placement only (block itself is left unstyled) */
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) > .wp-block-jetpack-layout-grid-column:has(> .wp-block-social-links) {
margin-top: 1rem;
}
/* 6) Mobile ---------------------------------------------------------------- */
@media (max-width: 599px) {
body.page-id-192 {
--hc-card-pad: 1.2rem;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#mita-on-health-coaching) {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.page-id-192 #mita-on-health-coaching {
text-align: center !important;
}
body.page-id-192 #mita-on-health-coaching::after {
margin-left: auto;
margin-right: auto;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p {
font-size: 1.02rem;
}
body.page-id-192 #block-b16b98e3-833a-4810-96af-f4ee79c921d5 {
font-size: 1.08rem !important;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p:last-child {
padding: 1rem 1rem 1rem 3.1rem;
background-position: 0.9rem 50%;
background-size: 1.35rem;
font-size: 1.04rem;
}
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) {
width: calc(100% - 1.5rem);
}
}
/* =============================================================================
7) Scroll-driven reveal (Chromium; others keep the static layout)
============================================================================= */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes hc192-fade-up {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hc192-zoom-in {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hc192-bar-grow {
from { transform: scaleX(0.1); }
to { transform: scaleX(1); }
}
body.page-id-192 .entry-content > .wp-block-columns:first-child,
body.page-id-192 #mita-on-health-coaching,
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5) > p,
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta) {
animation: hc192-fade-up linear both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
body.page-id-192 .wp-image-212 {
animation: hc192-zoom-in linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
body.page-id-192 .wp-block-jetpack-layout-grid-column:has(> #block-b16b98e3-833a-4810-96af-f4ee79c921d5)::before,
body.page-id-192 .wp-block-jetpack-layout-grid:has(#ota-yhteytta)::before,
body.page-id-192 #mita-on-health-coaching::after {
transform-origin: left center;
animation: hc192-bar-grow linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
@media (max-width: 781px) {
@keyframes hc192-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
}
}
}
/* Health Coaching: lainauksen viiva (korjaus) */
body.page-id-192 .entry-content > .wp-block-group.has-background-light-background-color .wp-block-quote cite::before {
content: "\2014\00a0";
}
/* ===== Alapalkki (footer), kaikki sivut (2026-10-28) ===== */
#colophon.site-footer {
max-width: none !important;
width: 100%;
margin: 0 !important;
padding: 2.75rem 1.5rem 2.25rem !important;
background: #0B5D63;
color: #fff;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1.25rem;
text-align: center;
box-sizing: border-box;
}
#colophon .footer-navigation {
width: 100%;
margin: 0 !important;
padding: 0 !important;
float: none !important;
order: 1;
}
#colophon .footer-menu {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
align-items: center;
gap: 0.5rem 2rem;
margin: 0 auto !important;
padding: 0 !important;
list-style: none;
}
#colophon .footer-menu > li {
margin: 0 !important;
padding: 0 !important;
display: block;
}
#colophon .footer-menu a {
color: #fff !important;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
padding: 0.25rem 0;
border-bottom: 1px solid transparent;
transition: border-color .2s ease, opacity .2s ease;
}
#colophon .footer-menu a:hover,
#colophon .footer-menu a:focus,
#colophon .footer-menu .current-menu-item > a {
border-bottom-color: rgba(255,255,255,.75);
}
#colophon .site-info {
order: 2;
width: 100%;
max-width: 640px;
margin: 0 auto !important;
padding-top: 1.25rem !important;
border-top: 1px solid rgba(255,255,255,.2);
float: none !important;
color: rgba(255,255,255,.8) !important;
font-size: 0.85rem;
text-align: center !important;
}
#colophon .site-info a,
#colophon .site-info .comma {
color: rgba(255,255,255,.85) !important;
text-decoration: none;
}
#colophon .site-info a:hover { color: #fff !important; }
@media (max-width: 599px) {
#colophon .footer-menu { gap: 0.35rem 1.25rem; }
#colophon .footer-menu a { font-size: 0.9rem; }
}/* =============================================================================
SEO structural compat (append at the END of Additional CSS)
Keeps the look identical when block heading levels change (no text changes).
Every selector matches BOTH the old and the new markup, so this can be
pasted before the editor changes and left in place afterwards.
Verified 2026-10-28 with headless Chromium at 1280 and 390 px.
============================================================================= */
/* --- 1) Front page (body.home): hero paragraph -> H1 ------------------------
Old rules in homepage.css use "> p" and "> p:first-child"; an H1 would drop
out of them and pick up theme h1 styles (weight 700, clear, margins, and
letter-spacing -0.01em from homepage.css). Re-state them for :is(p,h1). */
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > :is(p, h1) {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
margin-top: 0.35em;
margin-bottom: 0.35em;
letter-spacing: 0.02em;
}
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > :is(p, h1):first-child {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
line-height: 1.15 !important;
font-size: clamp(1.6rem, 3.6vw, 2.375rem) !important;
}
/* h1-only resets back to what the paragraph had (no effect while it is a ) */
body.home .entry-content > .wp-block-cover .wp-block-cover__inner-container > h1:first-child {
font-weight: 400; /* the inside makes it bold, as before */
clear: none;
overflow-wrap: break-word;
color: #fff; /* same white as before even if the editor drops the text colour */
text-align: center; /* same as before even if alignment is dropped */
}
/* --- 2) Health Coaching (page-id-192): H4 -> H2 -----------------------------
remaining_combined.css sets font-family + letter-spacing on ".entry-content h4"
only; the theme gives h2 letter-spacing:normal. Everything else is already
keyed to the ids (#mita-on-health-coaching, #ota-yhteytta). */
body.page-id-192 .entry-content :is(h2, h4):is(#mita-on-health-coaching, #ota-yhteytta) {
font-family: "Source Sans Pro", var(--font-headings, sans-serif);
letter-spacing: -0.01em;
}
/* --- 3) Palveluni (page-id-88): programme H4/H2/H4 -> H2 --------------------
No CSS needed: palveluni.css keys the cards to [id^="uusi-alku"],
[id^="hyvinvoiva-aiti"], [id^="hyvastit-stressille"] and already styles
h2 + h4 identically; "> h2:first-child" (intro) cannot match the programme
headings because they are never the first child. Zero computed-style diffs. */
/* Koulutukset-lista (Tietoa minusta) */
.koulutukset{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid rgba(11,93,99,.15)}
.koulutukset li{margin:0;padding:.65rem 0 .65rem 3.6em;text-indent:-3.6em;border-bottom:1px solid rgba(11,93,99,.15);line-height:1.5;font-variant-numeric:tabular-nums}
@media (max-width:600px){.koulutukset li{padding-left:3.3em;text-indent:-3.3em;font-size:.95em}}