/* =========================================
T SPORT — CONTACT INFORMATION
========================================= */
.ts-contact {
--ts-text: #202020;
--ts-muted: #666;
--ts-border: #dedede;
--ts-soft-bg: #f7f7f7;
--ts-highlight-bg: #f3f8fc;
--ts-highlight-border: #8ab8d8;
max-width: 900px;
margin: 0 auto;
color: var(--ts-text);
font-size: 15px;
line-height: 1.7;
}
.ts-contact * {
box-sizing: border-box;
}
/* =========================================
HEADER
========================================= */
.ts-contact__header {
margin-bottom: 32px;
}
.ts-contact__title {
margin: 0 0 12px;
font-size: 30px;
line-height: 1.25;
font-weight: 700;
}
.ts-contact__intro {
margin: 0;
color: var(--ts-muted);
}
/* =========================================
CONTACT GRID
========================================= */
.ts-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin: 28px 0;
}
.ts-contact__card {
padding: 22px;
border: 1px solid var(--ts-border);
border-radius: 6px;
}
.ts-contact__label {
display: block;
margin-bottom: 5px;
color: var(--ts-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ts-contact__value {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.ts-contact__value a {
color: inherit;
text-decoration: none;
}
.ts-contact__value a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================
STORE ADDRESS
========================================= */
.ts-contact__address {
margin: 28px 0;
padding: 22px;
background: var(--ts-soft-bg);
border: 1px solid var(--ts-border);
border-left: 4px solid var(--ts-text);
border-radius: 5px;
}
.ts-contact__address-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
}
.ts-contact__address p {
margin: 0;
}
.ts-contact__address-link {
display: inline-block;
margin-top: 12px;
font-weight: 600;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================
CONTACT NOTICE
========================================= */
.ts-contact__notice {
margin-top: 28px;
padding: 20px;
background: var(--ts-highlight-bg);
border: 1px solid var(--ts-highlight-border);
border-left: 4px solid var(--ts-highlight-border);
border-radius: 5px;
}
.ts-contact__notice-title {
display: block;
margin-bottom: 6px;
font-size: 16px;
font-weight: 700;
}
.ts-contact__notice p {
margin: 0;
}
/* =========================================
SECTION
========================================= */
.ts-contact__section {
padding: 28px 0;
border-top: 1px solid var(--ts-border);
}
.ts-contact__section-title {
margin: 0 0 14px;
font-size: 21px;
line-height: 1.35;
font-weight: 700;
}
.ts-contact__section p {
margin: 0 0 12px;
}
.ts-contact__section p:last-child {
margin-bottom: 0;
}
/* =========================================
MOBILE
========================================= */
@media screen and (max-width: 749px) {
.ts-contact {
font-size: 14px;
}
.ts-contact__title {
font-size: 25px;
}
.ts-contact__grid {
grid-template-columns: 1fr;
}
.ts-contact__card,
.ts-contact__address,
.ts-contact__notice {
padding: 17px;
}
.ts-contact__section {
padding: 24px 0;
}
.ts-contact__section-title {
font-size: 19px;
}
}
