:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
} .skip-link.screen-reader-text:focus {
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
} .is-sticky {
position: sticky;
top: 0;
z-index: 50;
}
.admin-bar .is-sticky {
top: var(--wp-admin--admin-bar--height, 32px);
} .wp-block-group.is-style-card {
background: var(--wp--preset--color--base);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--medium);
box-shadow: var(--wp--custom--shadow--card);
padding: var(--wp--preset--spacing--50);
height: 100%;
} .wp-block-image.is-style-rounded-soft img {
border-radius: var(--wp--custom--radius--medium);
} .wp-block-list.is-style-checks {
list-style: none;
padding-left: 0;
}
.wp-block-list.is-style-checks li {
position: relative;
padding-left: 1.75em;
margin-block: 0.4em;
}
.wp-block-list.is-style-checks li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1.1em;
height: 1.1em;
background: var(--wp--preset--color--primary);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} .kanava-case-facts p:first-child {
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--contrast-2);
margin: 0;
}
.kanava-case-facts p:last-child {
font-size: var(--wp--preset--font-size--large);
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-top: var(--wp--preset--spacing--10);
} .wp-block-tag-cloud.is-style-pills {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--20);
}
.wp-block-tag-cloud.is-style-pills a {
margin: 0 !important;
padding: 0.35em 0.9em;
border: 1px solid var(--wp--preset--color--border);
border-radius: 999px;
text-decoration: none;
color: var(--wp--preset--color--contrast);
transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.wp-block-tag-cloud.is-style-pills a:hover,
.wp-block-tag-cloud.is-style-pills a[aria-current] {
border-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--primary);
} .wp-block-group.is-style-card > p:empty {
display: none;
} .kanava-logos__grid.wp-block-gallery {
align-items: center;
gap: var(--wp--preset--spacing--50) !important;
}
.kanava-logos__grid.wp-block-gallery img {
max-height: 48px;
width: auto !important;
margin-inline: auto;
object-fit: contain !important;
filter: grayscale(1);
opacity: 0.75;
transition: filter var(--wp--custom--transition), opacity var(--wp--custom--transition);
}
.kanava-logos__grid.wp-block-gallery img:hover {
filter: none;
opacity: 1;
} .wp-block-group.is-style-frosted {
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-radius: var(--wp--custom--radius--medium);
color: var(--wp--preset--color--contrast);
} .kanava-video-toggle {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 2;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.kanava-video-toggle::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 12px;
height: 14px;
border-left: 4px solid var(--wp--preset--color--contrast);
border-right: 4px solid var(--wp--preset--color--contrast);
box-sizing: border-box;
}
.kanava-video-toggle[data-state="paused"]::before {
width: 0;
height: 0;
border-right: 0;
border-left: 12px solid var(--wp--preset--color--contrast);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
margin-left: 15px;
}.wp-site-blocks > header:has(.kanava-header) {
position: relative;
z-index: 60;
height: 0;
}
.kanava-header {
height: 0;
}
.kanava-header__logo {
position: absolute;
top: 26px;
left: 40px;
margin: 0;
line-height: 0;
}
.kanava-header__logo img {
display: block;
width: 150px;
height: auto;
} nav.kanava-nav {
margin: 0 !important;
position: fixed;
top: 20px;
right: 28px;
z-index: 100;
}
.admin-bar nav.kanava-nav {
top: calc(var(--wp-admin--admin-bar--height, 32px) + 20px);
}
.kanava-nav .wp-block-navigation__responsive-container-open,
.kanava-nav .wp-block-navigation__responsive-container-close {
display: flex !important;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base-2);
box-shadow: 0 6px 20px rgba(14, 17, 22, 0.18);
transition: background-color var(--wp--custom--transition);
}
.kanava-nav .wp-block-navigation__responsive-container-open:hover,
.kanava-nav .wp-block-navigation__responsive-container-close:hover {
background: var(--wp--preset--color--primary);
}
.kanava-nav .wp-block-navigation__responsive-container-open svg,
.kanava-nav .wp-block-navigation__responsive-container-close svg {
width: 26px;
height: 26px;
fill: currentColor;
} .kanava-nav .wp-block-navigation__responsive-container-close {
position: fixed;
top: 20px;
right: 28px;
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast);
}
.admin-bar .kanava-nav .wp-block-navigation__responsive-container-close {
top: calc(var(--wp-admin--admin-bar--height, 32px) + 20px);
} .kanava-nav .wp-block-navigation__responsive-container.is-menu-open {
padding: clamp(24px, 6vw, 80px) !important;
}
.kanava-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-top: 72px;
align-items: flex-start;
}
.kanava-nav .is-menu-open .wp-block-navigation__container {
gap: 0.15em !important;
align-items: flex-start !important;
}
.kanava-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.kanava-nav .is-menu-open .wp-block-navigation-item {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left;
}
.kanava-nav .is-menu-open .wp-block-navigation__responsive-dialog {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
.kanava-nav .is-menu-open .wp-block-navigation-item__content {
font-size: clamp(2.25rem, 6vw, 4.5rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.03em;
text-decoration: none;
}
.kanava-nav .is-menu-open .wp-block-navigation-item__content:hover,
.kanava-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--tile-blue) !important;
} .kanava-header__cta {
position: fixed;
top: 20px;
right: 96px;
z-index: 99;
margin: 0 !important;
}
.admin-bar .kanava-header__cta {
top: calc(var(--wp--admin--admin-bar--height, 32px) + 20px);
}
.kanava-header__cta .wp-block-button__link {
display: flex;
align-items: center;
height: 56px;
padding: 0 26px;
box-shadow: 0 6px 20px rgba(14, 17, 22, 0.18);
} .kanava-palvelukortti {
min-height: 0;
}
.kanava-tiimi .wp-block-image img {
aspect-ratio: 1;
object-fit: cover;
width: 100%;
} nav.kanava-nav .kanava-nav__logo {
position: fixed;
top: 26px;
left: 40px;
margin: 0;
line-height: 0;
}
.admin-bar nav.kanava-nav .kanava-nav__logo {
top: calc(var(--wp--admin--admin-bar--height, 32px) + 26px);
}
nav.kanava-nav .kanava-nav__logo img {
width: 150px;
height: auto;
filter: invert(1);
} .kanava-nav .kanava-nav__cta {
margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.kanava-nav .kanava-nav__cta .wp-block-button__link {
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast) !important;
font-size: 1.125rem;
padding: 1em 1.8em;
}
.kanava-nav .kanava-nav__cta .wp-block-button__link:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary) !important;
} .wp-block-button.is-style-outline .wp-block-button__link {
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast);
border: 0;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--on-primary);
} .wp-site-blocks > main {
padding-top: max(7rem, var(--wp--preset--spacing--60)) !important; margin-top: 0 !important;
}
.wp-site-blocks > main:has(.kanava-hero:first-child) {
padding-top: 0 !important;
} .kanava-inset {
padding: 16px !important;
}
.kanava-hero__title {
max-width: 900px;
} .wp-block-post-content h1.has-huge-font-size:not(.kanava-hero__title) {
font-size: clamp(2.5rem, 4.6vw, 4.5rem) !important;
}
h1 {
overflow-wrap: break-word;
hyphens: none;
} .kanava-hero > .wp-block-cover {
min-height: min(780px, calc(100svh - 32px)) !important;
}
.kanava-inset > .wp-block-cover,
.kanava-inset > .wp-block-group {
border-radius: var(--wp--custom--radius--large);
overflow: hidden;
} .wp-block-group.is-style-card {
border: 0;
box-shadow: none;
border-radius: var(--wp--custom--radius--medium);
background: var(--wp--preset--color--base-2);
}
.kanava-tile {
position: relative;
border-radius: var(--wp--custom--radius--medium);
min-height: 280px;
transition: transform var(--wp--custom--transition);
}
.wp-block-cover.kanava-tile {
overflow: hidden;
align-items: flex-end;
}
.kanava-tile:hover {
box-shadow: 0 16px 40px rgba(14, 17, 22, 0.14);
}  .wp-block-post-content > .alignwide {
padding-top: clamp(4rem, 8vw, 7.5rem) !important;
padding-bottom: clamp(4rem, 8vw, 7.5rem) !important;
} .wp-block-post-content > .alignwide:first-child {
padding-top: clamp(1rem, 3vw, 2.5rem) !important;
}
.home .wp-block-post-content > #palvelut {
padding-top: clamp(5rem, 10vw, 9rem) !important;
}
.wp-block-post-content > .alignwide > * + * {
margin-block-start: clamp(2rem, 4vw, 3.5rem);
}
.wp-block-post-content > .alignwide > .wp-block-columns {
gap: clamp(3rem, 7vw, 7rem) !important;
}
.wp-block-post-content > .kanava-inset:not(.kanava-hero):not(:first-child) {
margin-top: clamp(2rem, 4vw, 3rem);
}
.kanava-rows .wp-block-post > .wp-block-group {
padding-top: 30px !important;
padding-bottom: 30px !important;
} .wp-block-post-content > :is(p, ul, ol) {
line-height: 1.75;
}
.wp-block-post-content > p + p {
margin-block-start: 1.4em;
}
.wp-block-post-content > :is(ul, ol) li + li {
margin-top: 0.4em;
}
.wp-block-post-content > :is(h2, h3, h4):not(:first-child) {
margin-block-start: clamp(3rem, 6vw, 5rem);
}
.wp-block-post-content > :is(h2, h3, h4) + * {
margin-block-start: 1.25rem;
}
.wp-block-post-content > :is(.wp-block-image, .wp-block-embed, .wp-block-html, .wp-block-video, .wp-block-gallery, .wp-block-quote, .wp-block-buttons):not(:first-child) {
margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
.wp-block-post-content > :is(.wp-block-image, .wp-block-embed, .wp-block-html, .wp-block-video, .wp-block-gallery, .wp-block-quote, .wp-block-buttons) + :not(.alignwide):not(.alignfull) {
margin-block-start: clamp(2.5rem, 5vw, 4rem);
} .wp-block-post-featured-image + .wp-block-post-content {
margin-block-start: clamp(3rem, 6vw, 5rem) !important;
} .wp-block-post-content > :not(.alignwide):not(.alignfull) + .alignwide,
.wp-block-post-content > .alignwide + :not(.alignwide):not(.alignfull) {
margin-block-start: clamp(1rem, 3vw, 2.5rem);
} @keyframes kanava-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -14px, 0); }
}
.kanava-float {
gap: 24px !important;
}
.kanava-float > * {
min-height: 300px;
padding: 40px !important;
animation: kanava-float 7s ease-in-out infinite;
will-change: transform;
}
.kanava-float > :nth-child(2) { animation-duration: 8.5s; animation-delay: -2s; }
.kanava-float > :nth-child(3) { animation-duration: 9s; animation-delay: -4.5s; }
.kanava-float > :nth-child(4) { animation-duration: 7.5s; animation-delay: -1s; } .kanava-float > :nth-child(even) {
margin-top: 72px;
margin-bottom: -72px;
} .kanava-float:hover > *,
.kanava-float:focus-within > * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.kanava-float > * {
animation: none;
}
}
.kanava-tile a {
text-decoration: none;
}
.kanava-tile a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
} .kanava-tile {
transition: translate 0.35s ease, box-shadow 0.35s ease;
}
.kanava-tile:hover,
.kanava-tile:focus-within {
translate: 0 -6px;
box-shadow: 0 18px 44px rgba(14, 17, 22, 0.16);
}
.kanava-tile h3::after,
.kanava-case-card .wp-block-post-title::after {
content: "→";
display: inline-block;
margin-left: 0.35em;
opacity: 0.45;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.kanava-tile:hover h3::after,
.kanava-tile:focus-within h3::after,
.kanava-case-card:hover .wp-block-post-title::after {
transform: translateX(6px);
opacity: 1;
}
.kanava-case-card .wp-block-post-featured-image {
overflow: hidden;
border-radius: var(--wp--custom--radius--medium);
}
.kanava-case-card .wp-block-post-featured-image img {
transition: transform 0.5s ease;
}
.kanava-case-card:hover .wp-block-post-featured-image img {
transform: scale(1.04);
}
.kanava-case-card:hover .wp-block-post-title a {
color: var(--wp--preset--color--primary);
}
@media (prefers-reduced-motion: reduce) {
.kanava-tile,
.kanava-case-card .wp-block-post-featured-image img {
transition: none;
}
.kanava-tile:hover,
.kanava-tile:focus-within {
translate: none;
}
} .wp-block-post-featured-image img,
.wp-block-image.is-style-rounded-soft img {
border-radius: var(--wp--custom--radius--medium);
}
.kanava-image-large img {
border-radius: var(--wp--custom--radius--large) !important;
} .wp-block-post-content .wp-block-image img,
.wp-block-post-content .wp-block-embed iframe,
.wp-block-post-content .wp-block-html iframe {
border-radius: var(--wp--custom--radius--medium);
} .kanava-chip,
.kanava-chips a {
display: inline-block;
background: var(--wp--preset--color--base-2);
border-radius: var(--wp--custom--radius--pill);
padding: 4px 14px;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
text-decoration: none;
line-height: 1.6;
}
.kanava-chip:empty {
display: none;
}
.kanava-chips .wp-block-post-terms__separator {
display: none;
}
.kanava-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kanava-chips--center {
justify-content: center;
}
.kanava-chips--mint a {
background: var(--wp--preset--color--tile-mint);
} .kanava-rows .wp-block-post-title a {
text-decoration: none;
}
.kanava-rows .wp-block-post-title a::after {
content: " →";
color: var(--wp--preset--color--contrast-2);
} .kanava-rows .wp-block-post {
position: relative;
}
.kanava-rows .wp-block-post > .wp-block-group {
padding-left: 20px !important;
padding-right: 20px !important;
border-radius: var(--wp--custom--radius--small);
transition: background-color 0.25s ease;
}
.kanava-rows .wp-block-post:hover > .wp-block-group,
.kanava-rows .wp-block-post:focus-within > .wp-block-group {
background: var(--wp--preset--color--base-2);
}
.kanava-rows .wp-block-post-title a::before {
content: "";
position: absolute;
inset: 0;
}
.kanava-rows .wp-block-post-terms a {
position: relative;
z-index: 1;
}
.kanava-rows .wp-block-post-title a::after {
content: "→";
display: inline-block;
margin-left: 0.35em;
transition: transform 0.25s ease;
}
.kanava-rows .wp-block-post-excerpt {
margin-top: 6px !important;
}
.kanava-tile a:hover,
.kanava-tile a:focus {
color: inherit;
}
.kanava-rows .wp-block-post:hover .wp-block-post-title a {
color: var(--wp--preset--color--primary);
}
.kanava-rows .wp-block-post:hover .wp-block-post-title a::after {
transform: translateX(6px);
}
.kanava-rows .wp-block-post-excerpt {
margin: 0;
}
.kanava-rows .wp-block-post-excerpt__excerpt {
margin: 0;
}
.kanava-paivitetty::before {
content: "Päivitetty ";
} .kanava-search {
max-width: 560px;
}
.kanava-search .wp-block-search__inside-wrapper {
background: var(--wp--preset--color--base-2);
border: 0 !important;
border-radius: var(--wp--custom--radius--pill);
padding: 6px 6px 6px 22px !important;
}
.kanava-search .wp-block-search__input {
border: 0;
background: transparent;
font-size: 1.0625rem;
padding: 12px 0;
font-family: inherit;
}
.kanava-search .wp-block-search__input:focus {
outline: none;
}
.kanava-search .wp-block-search__inside-wrapper:focus-within {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
.kanava-search .wp-block-search__button {
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base-2);
}
.kanava-search .wp-block-search__button:hover {
background: var(--wp--preset--color--primary);
}
.kanava-search .wp-block-search__button svg {
width: 24px;
height: 24px;
fill: currentColor;
} .wp-block-query-pagination {
gap: 8px;
font-weight: 500;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
display: inline-block;
padding: 8px 16px;
border-radius: var(--wp--custom--radius--pill);
text-decoration: none;
}
.wp-block-query-pagination a:hover {
background: var(--wp--preset--color--base-2);
}
.wp-block-query-pagination .page-numbers.current {
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base-2);
} .kanava-suodatin {
margin-top: 40px !important;
}
.kanava-suodatin p,
.kanava-kategoriat {
margin: 0;
} .kanava-kategoriat {
display: contents;
list-style: none;
}
.kanava-kategoriat li {
list-style: none;
}
.kanava-kaikki a,
.kanava-kategoriat a {
display: inline-block;
padding: 7px 16px;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--base-2);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, translate 0.2s ease;
}
.kanava-kaikki a:hover,
.kanava-kategoriat a:hover {
background: var(--wp--preset--color--tile-blue);
color: var(--wp--preset--color--contrast);
translate: 0 -2px;
}
.blog .kanava-kaikki a,
.kanava-kategoriat .current-cat a {
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base-2);
} body {
position: relative;
}
.kanava-kuplat {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.kanava-kuplat span {
--s: 200px;
--c1: #e2eafd;
--c2: #a9bdf1;
--p: -40vh;
position: absolute;
width: var(--s);
height: var(--s);
border-radius: 50%;
opacity: 0.6;
filter: blur(10px);
background:
radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0.35) 16%, transparent 38%),
radial-gradient(circle at 45% 40%, var(--c1) 0%, var(--c2) 78%);
box-shadow:
inset -14px -20px 44px rgba(46, 64, 140, 0.12),
0 40px 70px -30px rgba(59, 98, 226, 0.15);
animation: kanava-kupla 14s ease-in-out infinite;
}
.kanava-kuplat .k1 { --s: 260px; top: 5%; right: -70px; }
.kanava-kuplat .k2 { --s: 190px; top: 15%; left: -80px; --c1: #e6f8f0; --c2: #b2e2d0; --p: -60vh; animation-duration: 16s; animation-delay: -6s; }
.kanava-kuplat .k3 { --s: 64px; top: 27%; right: 7%; --c1: #f3eefd; --c2: #cdc3f0; --p: -90vh; animation-duration: 12s; animation-delay: -3s; }
.kanava-kuplat .k4 { --s: 110px; top: 39%; left: 3%; --p: -70vh; filter: blur(16px); opacity: 0.5; animation-duration: 15s; animation-delay: -11s; }
.kanava-kuplat .k5 { --s: 340px; top: 50%; right: -130px; --c1: #f3eefd; --c2: #cdc3f0; --p: -30vh; animation-duration: 19s; animation-delay: -8s; }
.kanava-kuplat .k6 { --s: 230px; top: 64%; left: -90px; --c1: #e6f8f0; --c2: #b2e2d0; --p: -50vh; animation-duration: 17s; animation-delay: -15s; }
.kanava-kuplat .k7 { --s: 84px; top: 77%; right: 9%; --c1: #e6f8f0; --c2: #b2e2d0; --p: -80vh; filter: blur(14px); animation-duration: 13s; animation-delay: -5s; }
.kanava-kuplat .k8 { --s: 150px; top: 88%; left: 7%; --p: -45vh; animation-duration: 16s; animation-delay: -12s; }
@keyframes kanava-kupla {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
25% { transform: translate3d(40px, -60px, 0) scale(1.06); }
50% { transform: translate3d(-20px, -110px, 0) scale(0.97); }
75% { transform: translate3d(-50px, -40px, 0) scale(1.04); }
}
@keyframes kanava-kupla-parallaksi {
from { translate: 0 0; }
to { translate: 0 var(--p); }
}
@supports (animation-timeline: scroll()) {
.kanava-kuplat span {
animation:
kanava-kupla 14s ease-in-out infinite,
kanava-kupla-parallaksi linear both;
animation-timeline: auto, scroll(root);
}
.kanava-kuplat .k2 { animation-duration: 16s, auto; }
.kanava-kuplat .k3 { animation-duration: 12s, auto; }
.kanava-kuplat .k4 { animation-duration: 15s, auto; }
.kanava-kuplat .k5 { animation-duration: 19s, auto; }
.kanava-kuplat .k6 { animation-duration: 17s, auto; }
.kanava-kuplat .k7 { animation-duration: 13s, auto; }
.kanava-kuplat .k8 { animation-duration: 16s, auto; }
}
@media (max-width: 781px) {
.kanava-kuplat span {
width: calc(var(--s) * 0.6);
height: calc(var(--s) * 0.6);
}
.kanava-kuplat .k3,
.kanava-kuplat .k7 {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.kanava-kuplat span {
animation: none !important;
}
} .kanava-case-card .wp-block-post-title a {
text-decoration: none;
} .kanava-faq .wp-block-details:first-of-type {
border-top: 1px solid var(--wp--preset--color--border);
}
.kanava-faq .wp-block-details summary {
font-weight: 500;
font-size: var(--wp--preset--font-size--large);
} .kanava-steps .wp-block-column {
border-top: 2px solid var(--wp--preset--color--contrast);
padding-top: 16px;
} .kanava-footer__links {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.kanava-footer__links a {
color: inherit;
} @media (max-width: 600px) {
.kanava-float {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 781px) {
.kanava-header__logo {
top: 27px;
left: 32px;
}
.kanava-header__logo img {
width: 116px;
}
nav.kanava-nav .kanava-nav__logo {
top: 27px;
left: 32px;
}
.kanava-header__cta {
top: 18px;
right: 80px;
}
.admin-bar .kanava-header__cta {
top: calc(var(--wp--admin--admin-bar--height, 46px) + 18px);
}
.kanava-header__cta .wp-block-button__link {
height: 52px;
padding: 0 18px;
font-size: 0.9375rem;
}
nav.kanava-nav .kanava-nav__logo img {
width: 116px;
}
nav.kanava-nav,
.kanava-nav .wp-block-navigation__responsive-container-close {
top: 18px;
right: 18px;
}
.admin-bar nav.kanava-nav,
.admin-bar .kanava-nav .wp-block-navigation__responsive-container-close {
top: calc(var(--wp-admin--admin-bar--height, 46px) + 18px);
}
.kanava-nav .wp-block-navigation__responsive-container-open,
.kanava-nav .wp-block-navigation__responsive-container-close {
width: 52px;
height: 52px;
}
.kanava-hero .wp-block-cover__inner-container > .wp-block-group {
flex-direction: column;
align-items: stretch !important;
}
.kanava-hero .wp-block-cover__inner-container > .wp-block-group > * {
flex: 0 0 auto !important;
width: auto !important;
max-width: 100%;
}
.kanava-hero > .wp-block-cover {
padding: 96px 20px 20px !important;
}
h2, h3 {
hyphens: auto;
overflow-wrap: break-word;
}
.kanava-inset .is-style-frosted {
padding: 28px 20px !important;
}
.kanava-float > :nth-child(even) {
margin-top: 0;
margin-bottom: 0;
}
} @keyframes kanava-morph {
0%, 100% { border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
50% { border-radius: 40% 60% 58% 42% / 45% 58% 42% 55%; }
}
.home .kanava-hero {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 0 0 calc(50% - 50vw) !important;
padding: 0 !important;
overflow-x: clip;
}
.home .kanava-hero > .wp-block-cover {
min-height: 100svh !important;
background: none !important;
overflow: visible;
border-radius: 0 !important;
padding-left: max(48px, 6vw) !important;
align-items: center !important;
}
.home .kanava-hero .wp-block-cover__background {
display: none !important;
}
.home .kanava-hero .wp-block-cover__inner-container {
z-index: 2 !important;
max-width: 50vw;
}
.home .kanava-hero__title {
hyphens: none;
}
.home .kanava-hero video.wp-block-cover__video-background {
left: auto !important;
right: -30vw !important;
top: -22vh !important;
width: 100vw !important;
height: 122vh !important;
border-radius: 62% 38% 46% 54% / 55% 45% 55% 45% !important;
-webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent);
mask-image: radial-gradient(closest-side, #000 70%, transparent);
animation: kanava-morph 14s ease-in-out infinite;
}
@media (max-width: 781px) {
.home .kanava-hero > .wp-block-cover {
align-items: flex-end !important;
padding: 0 24px 56px !important;
}
.home .kanava-hero .wp-block-cover__inner-container {
max-width: none;
}
.home .kanava-hero video.wp-block-cover__video-background {
right: -12vw !important;
top: -12vh !important;
width: 124vw !important;
height: 82vh !important;
}
}
@media (prefers-reduced-motion: reduce) {
.home .kanava-hero video.wp-block-cover__video-background {
animation: none !important;
}
} .kanava-header__logo,
nav.kanava-nav .kanava-nav__logo {
top: 18px;
}
.admin-bar nav.kanava-nav .kanava-nav__logo {
top: calc(var(--wp--admin--admin-bar--height, 32px) + 18px);
}
.kanava-header__logo img,
nav.kanava-nav .kanava-nav__logo img {
width: 200px;
}
@media (max-width: 781px) {
.kanava-header__logo,
nav.kanava-nav .kanava-nav__logo {
top: 23px;
}
.kanava-header__logo img,
nav.kanava-nav .kanava-nav__logo img {
width: 140px;
}
} .kanava-ristiin .is-layout-grid {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) !important;
} .wp-block-post-content > iframe,
.wp-block-html > iframe { display: block; margin-left: auto; margin-right: auto; } @media (max-width: 781px) {
#stcm-icon { display: none !important; }
} .kanava-palstat { list-style: none; padding-left: 0; display: grid; gap: 1.75rem 3rem; }
.is-layout-constrained > .kanava-palstat { max-width: 1040px !important; }
@media (min-width: 782px) { .kanava-palstat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kanava-palstat > li { position: relative; margin: 0; padding-left: 3.75rem; min-height: 2.75rem; }
.kanava-palstat > li strong { display: inline-block; margin-bottom: .2rem; font-size: 1.1em; }
.kanava-palstat > li[class*="kanava-ik-"]::before { content: ""; position: absolute; left: 0; top: .1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 1.35rem; }
.kanava-palstat > li.kanava-ik-digimainonta::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6l-5 4H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 9a3 3 0 0 1 0 6'/%3E%3Cpath d='M18 6a7 7 0 0 1 0 12'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-some::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-verkkosivut::before { background-color: var(--wp--preset--color--tile-sand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-video::before { background-color: var(--wp--preset--color--tile-mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-animaatio::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7 4.7 1.8-4.7 1.8L12 16l-1.8-4.7-4.7-1.8 4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2 2.2.8-2.2.8L19 21l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-printti::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-automaatio::before { background-color: var(--wp--preset--color--tile-sand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.3L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.3L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-tiedottaminen::before { background-color: var(--wp--preset--color--tile-mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='15' height='16' rx='2'/%3E%3Cpath d='M18 8h3v10a2 2 0 0 1-2 2'/%3E%3Cpath d='M7 8h7M7 12h7M7 16h4'/%3E%3C/svg%3E"); }
.kanava-palstat > li + li { margin-top: 0 !important; } .kanava-palstat > li.kanava-ik-luova::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-konsepti::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-strategia::before { background-color: var(--wp--preset--color--tile-sand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-brandi::before { background-color: var(--wp--preset--color--tile-mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3l-5.5 2.9 1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-viestinta::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 8h8M8 12h5'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-videostrategia::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M3 8l2-5h14l2 5'/%3E%3Cpath d='M8 3 6 8M13 3l-2 5M18 3l-2 5'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-mainonta-opt::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-seo::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-konversio::before { background-color: var(--wp--preset--color--tile-sand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-youtube::before { background-color: var(--wp--preset--color--tile-mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='4'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E"); } .kanava-palstat > li.kanava-ik-mittaristo::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14l4-4'/%3E%3Cpath d='M3.3 19a10 10 0 1 1 17.4 0'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-analytiikka::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6l-6 6 6 6'/%3E%3Cpath d='M16 6l6 6-6 6'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-raportointi::before { background-color: var(--wp--preset--color--tile-sand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 17v-4M12 17V7M17 17v-7'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-ostopolku::before { background-color: var(--wp--preset--color--tile-mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M8 19h8.5a3.5 3.5 0 0 0 0-7h-9a3.5 3.5 0 0 1 0-7H16'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-kampanjaseuranta::before { background-color: var(--wp--preset--color--tile-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.kanava-palstat > li.kanava-ik-kavijaseuranta::before { background-color: var(--wp--preset--color--tile-lilac); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314141a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .kanava-video-toggle { right: auto; left: 16px; bottom: 16px; }
@media (min-width: 782px) { .kanava-video-toggle { left: 88px; bottom: 20px; } }