.contact-main {
padding-block: 5rem 6rem;
}
.contact-main__inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-x);
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.contact-main__title {
font-family: var(--f-heading);
font-size: var(--text-4xl);
color: var(--blk-text, var(--light-text));
margin: 0;
}
.contact-info__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.contact-info__card {
position: relative;
height: 100%;
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.75rem;
background-color: var(--blk-surface, var(--light-bg));
border: 1px solid var(--blk-border, var(--c-border));
border-radius: var(--r-md, 1rem);
color: var(--blk-text, var(--light-text));
text-decoration: none;
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
a.contact-info__card:hover,
a.contact-info__card:focus-visible {
transform: translateY(-3px);
border-color: var(--blk-accent, var(--light-accent));
box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.25);
}
a.contact-info__card:focus-visible {
outline: 2px solid var(--blk-accent, var(--light-accent));
outline-offset: 2px;
}
.contact-info__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
color: var(--blk-accent, var(--light-accent));
background-color: color-mix(in srgb, var(--blk-accent, var(--light-accent)) 12%, transparent);
transition: background-color var(--t), color var(--t);
}
.contact-info__icon svg {
width: 1.5rem;
height: 1.5rem;
}
a.contact-info__card:hover .contact-info__icon {
background-color: var(--blk-accent, var(--light-accent));
color: var(--blk-bg, var(--light-bg));
}
.contact-info__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.contact-info__label {
font-family: var(--f-ui);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.6;
}
.contact-info__value {
font-family: var(--f-body);
font-size: var(--text-lg, var(--text-base));
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.contact-info__arrow {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
opacity: 0;
transform: translate(-4px, 4px);
transition: opacity var(--t), transform var(--t);
}
a.contact-info__card:hover .contact-info__arrow,
a.contact-info__card:focus-visible .contact-info__arrow {
opacity: 1;
transform: none;
color: var(--blk-accent, var(--light-accent));
} .contact-main.is-style-dark .contact-info__card {
background-color: #1A1A1A;
border-color: #2E2E2E;
} @media (max-width: 768px) {
.contact-main {
padding-block: 3.5rem 4.5rem;
}
.contact-info__card {
padding: 1.25rem;
}
}