.contacts-page {
overflow: hidden ;
color: #f7f4ee;
}
.contacts-container {
width: min(1320px, calc(100% - 80px));
margin: 0 auto;
}
.contacts-label {
position: relative;
width: fit-content;
margin: 0 0 30px;
padding-bottom: 14px;
font-size: 11px;
line-height: 1;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(191, 164, 106, 0.82);
}
.contacts-label::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 140px;
height: 1px;
background: linear-gradient(
90deg,
rgba(191, 164, 106, 0.95),
rgba(191, 164, 106, 0.18),
transparent
);
}
.contacts-hero {
position: relative;
min-height: 100vh;
padding: 160px 0 110px;
overflow: hidden; background:
linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url(//harmoniya-smaku.com/wp-content/themes/imperia-appetita/assets/images/fone.png) center/cover no-repeat;
}
.contacts-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image:
linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
background-size: 86px 86px;
opacity: 0.12;
pointer-events: none;
}
.contacts-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
90deg,
rgba(5, 5, 5, 0.92),
rgba(5, 5, 5, 0.5) 42%,
rgba(5, 5, 5, 0.18) 72%
),
linear-gradient(
180deg,
rgba(5, 5, 5, 0.1),
transparent 58%,
#050505
);
pointer-events: none;
}
.contacts-hero__container {
position: relative;
z-index: 3;
min-height: calc(100vh - 270px);
display: grid;
grid-template-columns: 0.82fr 1fr;
gap: 70px;
align-items: center;
}
.contacts-hero__content {
position: relative;
z-index: 5;
} .contacts-hero__title-wrap {
width: fit-content;
}
.contacts-hero__title-line {
position: relative;
width: fit-content;
overflow: hidden;
}
.contacts-hero__title {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 112px;
font-weight: 500;
line-height: 0.86;
letter-spacing: -0.065em;
}
.contacts-hero__title--outline {
color: transparent;
-webkit-text-stroke: 1px rgba(247, 244, 238, 0.38);
}
.contacts-hero__title--fill {
position: absolute;
inset: 0;
color: #f7f4ee;
clip-path: inset(0 100% 0 0);
}
.contacts-hero__title-line:nth-child(1) .contacts-hero__title--fill {
animation: contactsTitleFill 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.contacts-hero__title-line:nth-child(2) .contacts-hero__title--fill {
animation: contactsTitleFill 1.55s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
@keyframes contactsTitleFill {
to {
clip-path: inset(0 0 0 0);
}
}
.contacts-hero__text {
max-width: 520px;
margin: 38px 0 0;
font-size: 16px;
line-height: 1.8;
color: rgba(247, 244, 238, 0.62);
opacity: 0;
transform: translateY(16px);
animation: contactsTextIn 0.8s ease 1.75s forwards;
}
@keyframes contactsTextIn {
to {
opacity: 1;
transform: translateY(0);
}
} .contacts-hero__map {
position: relative;
z-index: 4;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(18px) scale(0.98);
animation: contactsMapIn 1.3s ease 0.75s forwards;
}
@keyframes contactsMapIn {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.contacts-hero__map-glow {
position: absolute;
width: 78%;
height: 78%;
background:
radial-gradient(
circle at 50% 50%,
rgba(215, 193, 138, 0.16),
rgba(191, 164, 106, 0.08) 34%,
transparent 68%
);
filter: blur(34px);
opacity: 0.9;
}
.contacts-hero__map-img {
position: absolute;
width: 92%;
height: 92%;
object-fit: contain;
pointer-events: none;
}
.contacts-hero__map-img--base {
opacity: 0.1;
filter:
brightness(0)
sepia(1)
saturate(0.45)
hue-rotate(4deg)
brightness(0.32);
}
.contacts-hero__map-img--glow {
opacity: 0.46;
filter:
brightness(0)
sepia(1)
saturate(1.65)
hue-rotate(5deg)
brightness(1.03)
drop-shadow(0 0 1px rgba(215, 193, 138, 0.72))
drop-shadow(0 0 16px rgba(191, 164, 106, 0.38))
drop-shadow(0 0 70px rgba(191, 164, 106, 0.14));
mix-blend-mode: screen;
animation: contactsMapPulse 5.8s ease-in-out 2s infinite;
}
@keyframes contactsMapPulse {
0%,
100% {
opacity: 0.38;
}
50% {
opacity: 0.58;
}
} .contacts-hero__logo-mark {
position: absolute;
left: 52%;
top: 36%;
width: 92px;
transform: translate(-50%, -50%);
z-index: 6;
}
.contacts-hero__logo-mark img {
position: relative;
z-index: 2;
width: 100%;
height: auto;
opacity: 0.28;
filter:
brightness(1.25)
drop-shadow(0 0 18px rgba(191,164,106,.22));
}
.contacts-hero__city {
position: absolute;
text-align:center;
line-height:1.5;
left: 50%;
top: calc(100% + 18px);
white-space: nowrap;
transform: translateX(-50%);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(215, 193, 138, 0.72);
}
.contacts-hero__city small {
display: block;
margin-top: 8px;
font-size: 9px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.16em;
text-transform: none;
color: rgba(247, 244, 238, 0.7);
}
.contacts-hero__logo-mark::before{
content:"";
position:absolute;
top:-10px;
left:50%;
width:8px;
height:8px;
transform:translateX(-50%);
border-radius:50%;
background:#d7c18a;
box-shadow:
0 0 10px rgba(215,193,138,.7),
0 0 25px rgba(191,164,106,.45);
} @media (max-width: 1200px) {
.contacts-hero__container {
grid-template-columns: 0.9fr 1fr;
gap: 40px;
}
.contacts-hero__title {
font-size: 92px;
}
.contacts-hero__map {
height: 540px;
}
} @media (max-width: 900px) {
.contacts-container {
width: calc(100% - 40px);
}
.contacts-hero {
min-height: 100svh;
padding: 126px 0 54px;
}
.contacts-hero::after {
background:
linear-gradient(
180deg,
rgba(5, 5, 5, 0.2),
rgba(5, 5, 5, 0.42) 46%,
#050505 100%
);
}
.contacts-hero__container {
min-height: calc(100svh - 180px);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 42px;
}
.contacts-hero__content {
padding-top: 22px;
}
.contacts-hero__title {
font-size: 66px;
line-height: 0.9;
}
.contacts-hero__text {
max-width: 440px;
margin-top: 30px;
font-size: 15px;
line-height: 1.75;
}
.contacts-hero__map {
width: 100%;
height: 340px;
margin-top: 10px;
}
.contacts-hero__map-img {
width: 115%;
height: 115%;
}
.contacts-hero__map-img--base {
opacity: 0.16;
}
.contacts-hero__map-img--glow {
opacity: 0.68;
}
.contacts-hero__map-glow {
width: 96%;
height: 96%;
opacity: 1;
}
.contacts-hero__logo-mark {
left: 52%;
top: 35%;
width: 74px;
}
.contacts-hero__logo-pulse {
width: 96px;
height: 96px;
}
.contacts-hero__city {
top: calc(100% + 14px);
font-size: 9px;
}
} @media (max-width: 480px) {
.contacts-hero {
padding: 112px 0 42px;
}
.contacts-hero__container {
min-height: calc(100svh - 154px);
gap: 34px;
}
.contacts-label {
margin-bottom: 26px;
}
.contacts-hero__title {
font-size: 54px;
letter-spacing: -0.055em;
}
.contacts-hero__text {
margin-top: 28px;
font-size: 14px;
}
.contacts-hero__map {
height: 300px;
}
.contacts-hero__map-img {
width: 128%;
height: 128%;
}
.contacts-hero__logo-mark {
left: 52%;
top: 36%;
width: 62px;
}
.contacts-hero__logo-pulse {
width: 82px;
height: 82px;
}
.contacts-hero__city {
font-size: 8px;
letter-spacing: 0.18em;
}
}  .contacts-form-section {
position: relative;
min-height: 100vh;
padding: 40px 0 40px;
overflow: hidden;
display: flex;
align-items: center; }
.contacts-form-section::before {
content: "";
position: absolute;
inset: 0; background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.10) 40%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
z-index: 0;
}
.contacts-form-section::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 760px;
height: 760px;
border: 1px solid rgba(191, 164, 106, 0.08);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.contacts-form-section__bg-word {
position: absolute;
left: -20px;
bottom: 30px;
z-index: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 210px;
font-weight: 500;
line-height: 0.8;
letter-spacing: -0.07em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(191, 164, 106, 0.075);
opacity: 0.8;
pointer-events: none;
}
.contacts-form-section__container {
position: relative;
z-index: 3; max-width: 1320px;
padding: 0 40px;
display: grid;
grid-template-columns: 0.82fr 1fr;
gap: 96px;
align-items: center;
}
.contacts-form-section__content {
position: relative;
z-index: 3;
}
.contacts-form-section__content h2 {
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 78px;
font-weight: 500;
line-height: 0.88;
letter-spacing: -0.06em;
color: #f7f4ee;
}
.contacts-form-section__content > p:not(.contacts-label) {
max-width: 480px;
margin: 34px 0 0;
font-size: 15px;
line-height: 1.85;
color: rgba(247, 244, 238, 0.58);
} .contacts-form-info {
max-width: 500px;
margin-top: 54px;
border-top: 1px solid rgba(191, 164, 106, 0.16);
}
.contacts-form-info__item {
display: grid;
grid-template-columns: 58px 1fr;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid rgba(191, 164, 106, 0.1);
}
.contacts-form-info__item span {
font-size: 11px;
line-height: 1;
letter-spacing: 0.22em;
color: rgba(191, 164, 106, 0.72);
}
.contacts-form-info__item p {
margin: 0;
font-size: 14px;
line-height: 1.45;
letter-spacing: 0.04em;
color: rgba(247, 244, 238, 0.72);
} .contacts-form {
position: relative;
max-width: 640px;
width: 100%;
margin-left: auto;
padding: 66px 68px 58px;
border: 1px solid rgba(191, 164, 106, 0.18);
border-radius: 2px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)),
rgba(7, 7, 7, 0.78);
backdrop-filter: blur(18px);
box-shadow:
0 38px 110px rgba(0, 0, 0, 0.52),
0 0 90px rgba(191, 164, 106, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.contacts-form::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(191, 164, 106, 0.075);
pointer-events: none;
}
.contacts-form::after {
content: "";
position: absolute;
right: 34px;
top: 34px;
width: 70px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(191, 164, 106, 0.62));
pointer-events: none;
}
.contacts-field {
position: relative;
z-index: 2;
display: block;
margin-bottom: 26px;
}
.contacts-field span {
display: block;
margin-bottom: 12px;
font-size: 10px;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(191, 164, 106, 0.78);
transition: color 0.35s ease;
}
.contacts-field:focus-within span {
color: rgba(215, 193, 138, 0.98);
}
.contacts-field input,
.contacts-field textarea {
width: 100%;
padding: 16px 18px;
border: 1px solid rgba(191, 164, 106, 0.16);
border-radius: 3px;
outline: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.006)),
rgba(255, 255, 255, 0.014);
color: #f7f4ee;
font-family: "Manrope", Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
transition:
border-color 0.35s ease,
background 0.35s ease,
box-shadow 0.35s ease;
}
.contacts-field input::placeholder,
.contacts-field textarea::placeholder {
color: rgba(247, 244, 238, 0.28);
}
.contacts-field input:hover,
.contacts-field textarea:hover {
border-color: rgba(191, 164, 106, 0.3);
}
.contacts-field input:focus,
.contacts-field textarea:focus {
border-color: rgba(191, 164, 106, 0.85);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
rgba(255, 255, 255, 0.02);
box-shadow:
0 0 0 3px rgba(191, 164, 106, 0.09),
0 10px 26px rgba(0, 0, 0, 0.28);
}
.contacts-field textarea {
min-height: 126px;
padding-top: 14px;
resize: vertical;
}
.contacts-submit {
position: relative;
z-index: 2;
width: 100%;
height: 60px;
margin-top: 10px;
overflow: hidden;
border: 1px solid rgba(191, 164, 106, 0.38);
background:
linear-gradient(90deg, rgba(191, 164, 106, 0.08), rgba(215, 193, 138, 0.02));
color: #f7f4ee;
font-size: 11px;
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition:
border-color 0.35s ease,
color 0.35s ease,
background 0.35s ease;
}
.contacts-submit::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent,
rgba(191, 164, 106, 0.16),
transparent
);
transform: translateX(-105%);
transition: transform 0.7s ease;
}
.contacts-submit__text {
position: relative;
z-index: 2;
}
.contacts-submit:hover {
border-color: rgba(191, 164, 106, 0.74);
color: #d7c18a;
background:
linear-gradient(90deg, rgba(191, 164, 106, 0.12), rgba(215, 193, 138, 0.04));
}
.contacts-submit:hover::before {
transform: translateX(105%);
} @media (max-width: 1200px) {
.contacts-form-section__container {
grid-template-columns: 0.9fr 1fr;
gap: 60px;
}
.contacts-form-section__content h2 {
font-size: 66px;
}
.contacts-form {
padding: 58px 54px 52px;
}
} @media (max-width: 900px) {
.contacts-form-section {
min-height: auto;
padding: 100px 0 110px;
align-items: flex-start;
}
.contacts-form-section::after {
width: 520px;
height: 520px;
opacity: 0.8;
}
.contacts-form-section__bg-word {
left: -12px;
bottom: 34px;
font-size: 128px;
}
.contacts-form-section__container {
grid-template-columns: 1fr;
gap: 58px;
padding-left: 20px;
padding-right: 20px;
}
.contacts-form-section__content h2 {
font-size: 56px;
line-height: 0.92;
}
.contacts-form-section__content > p:not(.contacts-label) {
max-width: 560px;
margin-top: 28px;
}
.contacts-form-info {
margin-top: 42px;
}
.contacts-form {
max-width: none;
margin-left: 0;
}
} @media (max-width: 560px) {
.contacts-form-section {
padding: 86px 0 96px;
}
.contacts-form-section__bg-word {
display: none;
}
.contacts-form-section::after {
width: 360px;
height: 360px;
}
.contacts-form-section__container {
gap: 46px;
}
.contacts-form-section__content h2 {
font-size: 44px;
}
.contacts-form-section__content > p:not(.contacts-label) {
font-size: 14px;
line-height: 1.75;
}
.contacts-form-info {
margin-top: 36px;
}
.contacts-form-info__item {
grid-template-columns: 46px 1fr;
gap: 16px;
padding: 18px 0;
}
.contacts-form-info__item p {
font-size: 13px;
}
.contacts-form {
padding: 40px 26px 34px;
}
.contacts-form::before {
inset: 12px;
}
.contacts-form::after {
right: 24px;
top: 24px;
width: 48px;
}
.contacts-field {
margin-bottom: 30px;
}
.contacts-field input,
.contacts-field textarea {
padding: 14px 16px;
font-size: 15px;
}
.contacts-submit {
height: 54px;
}
}  .wpcf7 {
width: 100%;
}
.wpcf7 form {
width: 100%;
margin: 0;
} .wpcf7 .contacts-form p {
margin: 0;
padding: 0;
}
.wpcf7 .contacts-form br {
display: none;
} .wpcf7 .contacts-field {
display: block;
margin: 0 0 26px;
} .wpcf7 .contacts-field .wpcf7-form-control-wrap {
display: block;
width: 100%;
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
letter-spacing: normal;
text-transform: none;
color: inherit;
} .wpcf7 .contacts-field > span:not(.wpcf7-form-control-wrap) {
display: block;
margin-bottom: 12px;
font-size: 10px;
line-height: 1;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(191, 164, 106, 0.78);
}
.wpcf7 .contacts-field:focus-within > span:not(.wpcf7-form-control-wrap) {
color: rgba(215, 193, 138, 0.98);
} .wpcf7 .contacts-field input,
.wpcf7 .contacts-field textarea {
display: block;
width: 100%;
margin: 0;
} .wpcf7 .contacts-submit {
display: block;
width: 100%;
margin: 10px 0 0;
} .wpcf7-spinner {
position: absolute;
margin: 0;
}
@media (max-width: 560px) {
.contacts-field input,
.contacts-field textarea,
.wpcf7 .contacts-field input,
.wpcf7 .contacts-field textarea {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 14px 16px;
font-size: 16px; }
}