.dogclay-contact {
--dogclay-beige: #F5F1E9;
--dogclay-white: #FFFFFF;
--dogclay-blue: #5C8082;
--dogclay-black: #111111;
--dogclay-line: #E7E3DC;
background:
var(--dogclay-beige);
color:
var(--dogclay-black);
font-family:
Helvetica,
Arial,
sans-serif;
padding:
80px 24px;
width: 100%;
}
.dogclay-contact *,
.dogclay-contact *::before,
.dogclay-contact *::after {
box-sizing:
border-box;
}
.dogclay-contact__inner {
max-width:
1080px;
margin:
0 auto;
background:
var(--dogclay-white);
padding:
85px 90px;
}
/* HEADER */
.dogclay-contact__header {
max-width:
780px;
}
.dogclay-contact__eyebrow {
color:
var(--dogclay-blue);
font-size:
11px;
font-weight:
600;
letter-spacing:
2.8px;
line-height:
1;
margin-bottom:
28px;
text-transform:
uppercase;
}
.dogclay-contact__title {
color:
var(--dogclay-black);
font-family:
Helvetica,
Arial,
sans-serif;
font-size:
clamp(48px, 6vw, 76px);
font-weight:
400;
letter-spacing:
-3px;
line-height:
.95;
margin:
0;
}
.dogclay-contact__intro {
max-width:
700px;
margin-top:
36px;
}
.dogclay-contact__intro p {
font-size:
19px;
line-height:
1.65;
margin:
0;
}
/* DIVIDER */
.dogclay-contact__divider {
width:
100%;
height:
1px;
background:
var(--dogclay-blue);
opacity:
.5;
margin:
65px 0 0;
}
/* SECTIONS */
.dogclay-contact__section {
display:
grid;
grid-template-columns:
70px minmax(0, 1fr);
gap:
30px;
padding:
58px 0;
border-bottom:
1px solid var(--dogclay-line);
}
.dogclay-contact__number {
color:
var(--dogclay-blue);
font-size:
11px;
font-weight:
600;
letter-spacing:
1.5px;
padding-top:
7px;
}
.dogclay-contact__content {
max-width:
750px;
}
.dogclay-contact h2 {
color:
var(--dogclay-black);
font-family:
Helvetica,
Arial,
sans-serif;
font-size:
26px;
font-weight:
400;
letter-spacing:
-.6px;
line-height:
1.2;
margin:
0 0 23px;
}
.dogclay-contact p {
font-size:
15px;
line-height:
1.8;
margin:
0 0 17px;
}
.dogclay-contact strong {
font-weight:
600;
}
.dogclay-contact a {
color:
var(--dogclay-blue);
text-decoration:
none;
}
/* EMAIL */
.dogclay-contact__email {
background:
var(--dogclay-beige);
padding:
30px;
}
.dogclay-contact__email span {
display:
block;
color:
var(--dogclay-blue);
font-size:
9px;
font-weight:
600;
letter-spacing:
1.7px;
margin-bottom:
10px;
}
.dogclay-contact__email a {
display:
inline-block;
font-size:
24px;
border-bottom:
1px solid rgba(92,128,130,.45);
margin-bottom:
18px;
}
.dogclay-contact__email p {
font-size:
13px;
margin:
0;
}
/* COMPANY */
.dogclay-contact__company {
border-top:
1px solid var(--dogclay-line);
}
.dogclay-contact__company-row {
display:
grid;
grid-template-columns:
180px minmax(0,1fr);
gap:
25px;
padding:
22px 0;
border-bottom:
1px solid var(--dogclay-line);
}
.dogclay-contact__company-row span {
color:
var(--dogclay-blue);
font-size:
9px;
font-weight:
600;
letter-spacing:
1.5px;
}
.dogclay-contact__company-row strong {
font-size:
14px;
line-height:
1.6;
}
/* RESPONSE */
.dogclay-contact__response,
.dogclay-contact__order {
background:
var(--dogclay-beige);
margin:
30px 0;
padding:
28px;
}
.dogclay-contact__response span,
.dogclay-contact__order span {
display:
block;
color:
var(--dogclay-blue);
font-size:
9px;
font-weight:
600;
letter-spacing:
1.7px;
margin-bottom:
10px;
}
.dogclay-contact__response strong {
display:
block;
font-size:
20px;
font-weight:
400;
margin-bottom:
10px;
}
.dogclay-contact__response p,
.dogclay-contact__order p {
font-size:
13px;
margin:
0;
}
.dogclay-contact__order strong {
display:
block;
font-size:
15px;
font-weight:
400;
}
/* LEGAL LINKS */
.dogclay-contact__legal {
border-top:
1px solid var(--dogclay-line);
}
.dogclay-contact__legal a {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
color:
var(--dogclay-black);
border-bottom:
1px solid var(--dogclay-line);
padding:
19px 0;
font-size:
14px;
}
.dogclay-contact__legal a strong {
color:
var(--dogclay-blue);
font-size:
17px;
font-weight:
400;
}
.dogclay-contact__legal a:hover {
color:
var(--dogclay-blue);
}
/* FINAL */
.dogclay-contact__final {
text-align:
center;
padding:
90px 20px;
border-bottom:
1px solid var(--dogclay-line);
}
.dogclay-contact__final-mark {
color:
var(--dogclay-blue);
font-size:
10px;
font-weight:
600;
letter-spacing:
2.5px;
margin-bottom:
25px;
}
.dogclay-contact__final h2 {
font-size:
42px;
line-height:
1.05;
letter-spacing:
-1.5px;
margin-bottom:
20px;
}
.dogclay-contact__final p {
font-size:
15px;
margin-bottom:
20px;
}
.dogclay-contact__final-email {
display:
inline-block;
color:
var(--dogclay-blue);
font-size:
17px;
border-bottom:
1px solid rgba(92,128,130,.45);
padding-bottom:
4px;
}
/* LINKS */
.dogclay-contact__links {
display:
flex;
flex-wrap:
wrap;
gap:
28px;
border-top:
0;
padding:
35px 0;
}
.dogclay-contact__links a {
color:
var(--dogclay-black);
font-size:
12px;
font-weight:
500;
}
.dogclay-contact__links a:hover {
color:
var(--dogclay-blue);
}
/* FOOTER */
.dogclay-contact__footer {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
border-top:
1px solid var(--dogclay-line);
color:
var(--dogclay-blue);
font-size:
10px;
font-weight:
600;
letter-spacing:
1.7px;
padding-top:
30px;
text-transform:
uppercase;
}
/* MOBILE */
@media screen and (max-width: 749px) {
.dogclay-contact {
padding:
25px 12px;
}
.dogclay-contact__inner {
padding:
48px 24px;
}
.dogclay-contact__eyebrow {
font-size:
10px;
letter-spacing:
2.3px;
margin-bottom:
23px;
}
.dogclay-contact__title {
font-size:
48px;
letter-spacing:
-2px;
}
.dogclay-contact__intro {
margin-top:
28px;
}
.dogclay-contact__intro p {
font-size:
17px;
}
.dogclay-contact__divider {
margin-top:
45px;
}
.dogclay-contact__section {
grid-template-columns:
1fr;
gap:
12px;
padding:
40px 0;
}
.dogclay-contact__number {
padding-top:
0;
}
.dogclay-contact h2 {
font-size:
23px;
margin-bottom:
18px;
}
.dogclay-contact p {
font-size:
14px;
line-height:
1.75;
}
.dogclay-contact__company-row {
grid-template-columns:
1fr;
gap:
7px;
}
.dogclay-contact__email a {
font-size:
19px;
word-break:
break-word;
}
.dogclay-contact__final {
padding:
65px 10px;
}
.dogclay-contact__final h2 {
font-size:
34px;
}
.dogclay-contact__links {
align-items:
flex-start;
flex-direction:
column;
gap:
18px;
padding:
30px 0;
}
.dogclay-contact__footer {
align-items:
flex-start;
flex-direction:
column;
gap:
12px;
}
}
