.tk-hero__shape--green {
z-index: 1;
top: 0;
right: -7%;
width: 78%;
height: 88%;
border-radius: 44px;
background: var(--tk-green);
opacity: .30;
transform: rotate(3deg);
}
.tk-hero__shape--blue {
z-index: 2;
right: 10%;
bottom: 0;
width: 54%;
height: 38%;
border-radius: 38px;
background: var(--tk-blue);
opacity: .28;
transform: rotate(-4deg);
}
.tk-hero__shape--orange {
z-index: 4;
right: -1%;
bottom: 13%;
width: 54px;
height: 54px;
border: 10px solid var(--tk-orange);
border-radius: 50%;
opacity: .78;
}
.tk-hero__line {
position: absolute;
z-index: 4;
top: 9%;
left: -9%;
width: 150px;
height: 88px;
border-top: 2px solid #8a6756;
border-radius: 50%;
opacity: .75;
transform: rotate(-23deg);
pointer-events: none;
}
@media (max-width: 1040px) {
.tk-hero__inner {
width: min(100% - 48px, 1040px);
}
.tk-hero__title {
font-size: clamp(28px, 3.5vw, 33px);
}
.tk-hero__actions {
max-width: 460px;
}
.tk-hero__card {
min-height: 82px;
}
}
@media (max-width: 860px) {
.tk-hero {
min-height: auto;
background: linear-gradient(125deg, var(--tk-paper) 0%, var(--tk-cream) 100%);
}
.tk-hero::before,
.tk-hero::after {
display: none;
}
.tk-hero__inner {
display: flex;
width: min(100% - 34px, 620px);
min-height: auto;
padding: 42px 0 46px;
flex-direction: column;
align-items: stretch;
gap: 30px;
}
.tk-hero__content {
display: contents;
}
.tk-hero__identity {
order: 1;
margin: 0;
}
.tk-hero__name {
font-size: 20px;
letter-spacing: .055em;
}
.tk-hero__roles {
font-size: 12px;
line-height: 1.6;
}
.tk-hero__title {
order: 2;
font-size: clamp(27px, 7.6vw, 32px);
line-height: 1.2;
}
.tk-hero__lead {
order: 3;
margin: -6px 0 0;
font-size: 17px;
}
.tk-hero__visual {
position: relative;
z-index: 1;
display: block;
order: 4;
min-height: 0;
height: auto;
aspect-ratio: 1 / 1;
margin-top: 2px;
}
.tk-hero__photo-wrap {
top: 50%;
right: 0;
width: 100%;
height: 100%;
border-radius: 28px;
box-shadow: 0 20px 50px rgba(45, 65, 58, .16);
}
.tk-hero__photo {
background-position: center top;
background-size: contain;
}
.tk-hero__shape--green {
display: none;
}
.tk-hero__shape--blue {
display: none;
}
.tk-hero__shape--orange {
display: none;
}
.tk-hero__line {
display: none;
}
.tk-hero__actions {
order: 5;
grid-template-columns: 1fr;
max-width: none;
margin: 2px 0 0;
}
.tk-hero__card {
width: 100%;
min-height: 76px;
}
.tk-hero__facts {
order: 6;
margin: -3px 0 0;
font-size: 15px;
text-align: center;
}
.tk-hero__quote {
order: 7;
margin: -3px 0 0;
font-size: 15px;
}
}
@media (max-width: 390px) {
.tk-hero__inner {
width: calc(100% - 28px);
}
.tk-hero__title {
font-size: 28px;
}
.tk-hero__visual {
height: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.tk-hero__card {
transition: none;
}
.tk-hero__card::after {
animation: none;
transition: none;
}
}
