.lexer-yhteys {
--lexer-yhteys-bg: #e39a50;
--lexer-yhteys-fg: #1a1a1a;
--lexer-yhteys-phone-bg: #1a1a1a;
--lexer-yhteys-phone-bg-hover: #000;
--lexer-yhteys-wa-bg: #075e54;
--lexer-yhteys-wa-bg-hover: #054a42;
--lexer-yhteys-btn-fg: #fff;
--lexer-yhteys-divider: rgb(26 26 26 / 25%);
--lexer-yhteys-max: 1140px;
--lexer-yhteys-radius: 8px;
background: var(--lexer-yhteys-bg);
color: var(--lexer-yhteys-fg);
padding-block: clamp(3.5rem, 7vw, 5.5rem);
padding-inline: 1.5rem;
font-family: inherit;
}
.lexer-yhteys *,
.lexer-yhteys *::before,
.lexer-yhteys *::after {
box-sizing: border-box;
}
.lexer-yhteys__inner {
max-width: var(--lexer-yhteys-max);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 4rem);
} .lexer-yhteys__cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.lexer-yhteys__title {
margin: 0;
color: inherit;
font-size: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
.lexer-yhteys__lead {
margin: 0;
max-width: 38rem;
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
line-height: 1.5;
}
.lexer-yhteys__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 1.25rem;
}
.lexer-yhteys__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 3.5rem;
padding: 1rem 2rem;
border-radius: var(--lexer-yhteys-radius);
color: var(--lexer-yhteys-btn-fg);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.lexer-yhteys__btn:hover,
.lexer-yhteys__btn:focus-visible {
color: var(--lexer-yhteys-btn-fg);
text-decoration: none;
}
.lexer-yhteys__btn:active {
transform: translateY(1px);
}
.lexer-yhteys__btn--phone {
background: var(--lexer-yhteys-phone-bg);
}
.lexer-yhteys__btn--phone:hover {
background: var(--lexer-yhteys-phone-bg-hover);
}
.lexer-yhteys__btn--whatsapp {
background: var(--lexer-yhteys-wa-bg);
}
.lexer-yhteys__btn--whatsapp:hover {
background: var(--lexer-yhteys-wa-bg-hover);
}
.lexer-yhteys__btn-icon,
.lexer-yhteys__item-icon {
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lexer-yhteys__btn-icon {
width: 1.375rem;
height: 1.375rem;
} .lexer-yhteys__info {
list-style: none;
margin: 0;
padding: 3rem 0 0;
border-top: 1px solid var(--lexer-yhteys-divider);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
}
.lexer-yhteys__item {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.875rem;
margin: 0;
}
.lexer-yhteys__item-icon {
width: 1.625rem;
height: 1.625rem;
}
.lexer-yhteys__item-body {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.lexer-yhteys__label {
font-size: 0.9375rem;
font-weight: 700;
}
.lexer-yhteys__value {
color: inherit;
font-size: 1.125rem;
line-height: 1.5;
text-decoration: none;
}
.lexer-yhteys__value:hover {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
} .lexer-yhteys a:focus-visible {
outline: 3px solid var(--lexer-yhteys-fg);
outline-offset: 3px;
}
.lexer-yhteys .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.lexer-yhteys__btn {
transition: none;
}
} @media (max-width: 767px) {
.lexer-yhteys__cta {
align-items: stretch;
text-align: left;
}
.lexer-yhteys__actions {
flex-direction: column;
gap: 0.75rem;
margin-top: 0.875rem;
}
.lexer-yhteys__btn {
width: 100%;
}
.lexer-yhteys__info {
grid-template-columns: 1fr;
gap: 1.5rem;
padding-top: 2rem;
}
.lexer-yhteys__item {
justify-content: flex-start;
}
}