@import url("./colorpalette.css");

.contact-page {
    background: color-mix(in srgb, var(--primary-color) 4%, var(--white-color));
    overflow-x: hidden;
    .contact-skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; border-radius: 10px; color: var(--white-color); background: var(--black-color); transform: translateY(-150%); &:focus { transform: translateY(0); } }
    .contact-navigation { position: absolute; inset: 0 0 auto; background: transparent; box-shadow: none; }
    .contact-eyebrow { margin: 0 0 18px; color: var(--secondary-color); font-size: .73rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
}

.contact-hero {
    min-height: 810px;
    padding: 190px max(6vw, 24px) 80px;
    position: relative;
    display: grid;
    align-items: center;
    color: var(--white-color);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 96%, var(--black-color)) 0%, color-mix(in srgb, var(--primary-color) 68%, transparent) 45%, transparent 74%), linear-gradient(0deg, color-mix(in srgb, var(--black-color) 55%, transparent), transparent 52%), url("../Assets/contact-hero.png");
    background-position: center;
    background-size: cover;
    overflow: hidden;
    isolation: isolate;
    &::after { position: absolute; content: ""; inset: auto 0 0; height: 130px; z-index: -1; background: linear-gradient(transparent, color-mix(in srgb, var(--primary-color) 4%, var(--white-color))); }
    .contact-hero__content { width: min(700px, 58vw); position: relative; z-index: 2; animation: contact-arrive 900ms cubic-bezier(.2,.8,.2,1) both; .contact-eyebrow { color: var(--fifth-color); span { width: 30px; height: 2px; margin-right: 10px; display: inline-block; vertical-align: middle; background: currentColor; } } h1 { margin: 0; font: clamp(3.2rem, 7vw, 7rem)/.93 "Archivo Black", sans-serif; letter-spacing: -.06em; text-shadow: 0 20px 55px color-mix(in srgb, var(--black-color) 35%, transparent); em { color: var(--fifth-color); font-style: normal; } } > p:not(.contact-eyebrow) { max-width: 590px; margin: 27px 0 34px; color: color-mix(in srgb, var(--white-color) 80%, transparent); font-size: 1.08rem; line-height: 1.75; } > a { min-height: 53px; padding: 0 20px; display: inline-flex; align-items: center; gap: 14px; border-radius: 15px; color: var(--black-color); background: linear-gradient(135deg, var(--fifth-color), var(--secondary-color)); font-weight: 800; text-decoration: none; box-shadow: 0 15px 30px color-mix(in srgb, var(--black-color) 20%, transparent); } }
    .contact-hero__signals { width: 420px; height: 420px; position: absolute; right: 9%; top: 24%; border: 1px solid color-mix(in srgb, var(--fifth-color) 25%, transparent); border-radius: 50%; animation: contact-signal-spin 20s linear infinite; i { width: 9px; height: 9px; position: absolute; border-radius: 50%; background: var(--fifth-color); box-shadow: 0 0 18px var(--fifth-color); &:nth-child(1) { left: 18%; top: 10%; } &:nth-child(2) { right: -1%; top: 48%; } &:nth-child(3) { left: 28%; bottom: 3%; } } }
}

.contact-options { width: min(1180px, calc(100% - 40px)); margin: 100px auto 120px; .contact-options__heading { max-width: 700px; margin-bottom: 50px; h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 56%, var(--black-color)); font: clamp(2.6rem, 5vw, 4.8rem)/1 "Archivo Black", sans-serif; letter-spacing: -.055em; } } }
.contact-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; .contact-method { min-height: 245px; padding: 28px; position: relative; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent); border-radius: 23px; color: var(--black-color); background: var(--white-color); box-shadow: 0 20px 45px color-mix(in srgb, var(--primary-color) 9%, transparent); text-decoration: none; overflow: hidden; transition: transform 240ms ease, box-shadow 240ms ease; &:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: 0 30px 60px color-mix(in srgb, var(--primary-color) 16%, transparent); } .contact-method__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; color: var(--white-color); background: linear-gradient(145deg, var(--primary-color), var(--fourth-color)); font-size: 1.4rem; } small { margin-top: 38px; color: var(--secondary-color); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } strong { margin-top: 9px; color: var(--primary-color); line-height: 1.45; } > i { position: absolute; right: 24px; bottom: 20px; color: var(--secondary-color); font-size: 1.3rem; font-style: normal; } &.contact-method--whatsapp .contact-method__icon { background: var(--third-color); } &.contact-method--placeholder { opacity: .72; } &::after { position: absolute; content: ""; width: 80px; height: 80px; right: -45px; top: -45px; border-radius: 50%; background: var(--fifth-color); opacity: .6; } } }

.contact-forms { padding: 110px max(5vw, 24px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: color-mix(in srgb, var(--primary-color) 54%, var(--black-color)); .contact-form-card { padding: clamp(35px, 5vw, 65px); border-radius: 28px; background: var(--white-color); box-shadow: 0 28px 60px color-mix(in srgb, var(--black-color) 20%, transparent); h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 58%, var(--black-color)); font: clamp(2rem, 3.8vw, 3.6rem)/1.05 "Archivo Black", sans-serif; letter-spacing: -.05em; } .contact-form-card__intro { color: color-mix(in srgb, var(--black-color) 58%, transparent); line-height: 1.7; } &.contact-form-card--whatsapp { color: var(--white-color); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--fifth-color) 24%, transparent), transparent 35%), linear-gradient(145deg, var(--third-color), color-mix(in srgb, var(--primary-color) 60%, var(--third-color))); .contact-eyebrow { color: var(--fifth-color); } h2 { color: var(--white-color); } .contact-form-card__intro, form > small { color: color-mix(in srgb, var(--white-color) 70%, transparent); } label { color: var(--white-color); } input, select, textarea { border-color: color-mix(in srgb, var(--white-color) 18%, transparent); color: var(--white-color); background: color-mix(in srgb, var(--black-color) 14%, transparent); &::placeholder { color: color-mix(in srgb, var(--white-color) 45%, transparent); } } button { color: var(--black-color); background: var(--fifth-color); } } }
    .contact-email-card { display: flex; flex-direction: column; justify-content: center; small { margin-top: 18px; color: color-mix(in srgb, var(--black-color) 50%, transparent); } }
    .contact-email-link { min-height: 70px; margin-top: 26px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 15px; color: var(--white-color); background: var(--primary-color); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; transition: transform 220ms ease, background 220ms ease; &:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--primary-color) 82%, var(--secondary-color)); } i { color: var(--fifth-color); font-size: 1.35rem; font-style: normal; } }
    form { margin-top: 32px; display: grid; gap: 17px; .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } label { display: grid; gap: 8px; color: color-mix(in srgb, var(--black-color) 72%, transparent); font-size: .8rem; font-weight: 800; } input, select, textarea { width: 100%; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent); border-radius: 12px; outline: 0; color: var(--black-color); background: color-mix(in srgb, var(--primary-color) 3%, var(--white-color)); font: 400 .95rem "DM Sans", sans-serif; &:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-color) 15%, transparent); } } textarea { resize: vertical; } button { min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; border: 0; border-radius: 14px; color: var(--white-color); background: var(--primary-color); font: 800 .9rem "DM Sans", sans-serif; cursor: pointer; &:disabled { cursor: wait; opacity: .65; } } .contact-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin: 0; font-size: .84rem; font-weight: 700; line-height: 1.55; &.form-status--success { color: var(--third-color); } &.form-status--error { color: #a51d1d; } } }
}

.contact-social { width: min(1180px, calc(100% - 40px)); margin: 110px auto; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(45px, 8vw, 110px); h2 { margin: 0; color: color-mix(in srgb, var(--primary-color) 56%, var(--black-color)); font: clamp(2.4rem, 4.6vw, 4.4rem)/1 "Archivo Black", sans-serif; letter-spacing: -.055em; } .contact-social__links { display: grid; gap: 12px; a { min-height: 90px; padding: 20px 24px; display: grid; grid-template-columns: 46px .7fr 1.3fr auto; align-items: center; gap: 15px; border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent); border-radius: 18px; color: var(--black-color); background: var(--white-color); text-decoration: none; transition: transform 220ms ease, background 220ms ease; > svg { width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 13px; color: var(--white-color); background: var(--primary-color); fill: currentColor; } > svg.contact-social__instagram { fill: none; stroke: currentColor; stroke-width: 1.8; .social-dot { fill: currentColor; stroke: none; } } > svg .social-play { fill: var(--primary-color); } &:hover { transform: translateX(8px); background: color-mix(in srgb, var(--fifth-color) 25%, var(--white-color)); } span { color: var(--secondary-color); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } b { color: var(--primary-color); } i { color: var(--secondary-color); font-style: normal; } } } }

@keyframes contact-arrive { from { opacity: 0; transform: translate3d(-40px,25px,-70px); } to { opacity: 1; transform: none; } }
@keyframes contact-signal-spin { to { transform: rotate(360deg); } }

@media (max-width: 950px) { .contact-hero { min-height: 750px; background-position: 60% center; .contact-hero__content { width: min(680px, 84vw); } } .contact-methods { grid-template-columns: 1fr 1fr; } .contact-forms, .contact-social { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .contact-hero { min-height: 710px; padding: 150px 20px 60px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 90%, var(--black-color)), color-mix(in srgb, var(--primary-color) 38%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--black-color) 55%, transparent), transparent), url("../Assets/contact-hero.png"); background-position: 66% center; .contact-hero__content { width: 100%; } .contact-hero__signals { display: none; } } .contact-options { width: min(100% - 28px, 1180px); } .contact-methods { grid-template-columns: 1fr; } .contact-forms { padding: 80px 14px; .contact-form-card { padding: 35px 22px; } form .form-row { grid-template-columns: 1fr; } } .contact-social { width: min(100% - 28px, 1180px); .contact-social__links a { grid-template-columns: 46px 1fr auto; b { grid-column: 2 / -1; grid-row: 2; } } } }

@media (prefers-reduced-motion: reduce) { .contact-page *, .contact-page *::before, .contact-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }