/* ========================================================= CHAVO CONTACT PAGE SECTION 01 — CONTACT HERO ========================================================= */ /* ========================================================= COLOR VARIABLES ========================================================= */ :root { --chv-contact-bg: #0a0a0a; --chv-contact-surface: #111111; --chv-contact-surface-alt: #151515; --chv-contact-text: #ffffff; --chv-contact-text-soft: #b8b8b8; --chv-contact-text-muted: #707070; --chv-contact-accent: #F4B548; --chv-contact-accent-soft: rgba(200, 164, 93, 0.18); --chv-contact-border: rgba(255, 255, 255, 0.10); --chv-contact-border-accent: rgba(200, 164, 93, 0.35); --chv-contact-shadow: rgba(0, 0, 0, 0.45); --chv-contact-transition: 0.6s ease; } /* ========================================================= HERO ========================================================= */ .chv-contact-hero-main { position: relative; min-height: 88vh; display: flex; align-items: center; padding: 150px 0 70px; overflow: hidden; background: var(--chv-contact-bg); } /* ========================================================= SUBTLE BACKGROUND DETAIL ========================================================= */ .chv-contact-hero-main::before { content: ""; position: absolute; width: 700px; height: 700px; right: -350px; top: -300px; border: 1px solid var(--chv-contact-border-accent); border-radius: 50%; opacity: 0.16; pointer-events: none; } .chv-contact-hero-main::after { content: ""; position: absolute; width: 1px; height: 100%; top: 0; right: 8%; background: var(--chv-contact-border); opacity: 0.35; pointer-events: none; } /* ========================================================= INNER ========================================================= */ .chv-contact-hero-inner { position: relative; z-index: 2; width: 100%; } /* ========================================================= EYEBROW ========================================================= */ .chv-contact-hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 35px; color: var(--chv-contact-accent); font-size: 10px; font-weight: 700; letter-spacing: 3px; } .chv-contact-hero-eyebrow-line { width: 42px; height: 1px; background: var(--chv-contact-accent); } /* ========================================================= MAIN HEADING ========================================================= */ .chv-contact-hero-heading { max-width: 1100px; margin: 0; color: var(--chv-contact-text); font-size: clamp(65px, 10vw, 150px); line-height: 0.86; font-weight: 700; letter-spacing: -8px; text-transform: uppercase; } .chv-contact-hero-heading span { display: block; color: var(--chv-contact-accent); } /* ========================================================= DIVIDER ========================================================= */ .chv-contact-hero-divider { width: 100%; height: 1px; margin-top: 55px; background: var(--chv-contact-border); } /* ========================================================= BOTTOM CONTENT ========================================================= */ .chv-contact-hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; padding-top: 30px; } /* ========================================================= DESCRIPTION ========================================================= */ .chv-contact-hero-description { max-width: 520px; } .chv-contact-hero-description p { margin: 0; color: var(--chv-contact-text-soft); font-size: 14px; line-height: 26px; } /* ========================================================= CTA ========================================================= */ .chv-contact-hero-button { display: inline-flex; align-items: center; gap: 22px; padding: 7px 8px 7px 20px; border: 1px solid var(--chv-contact-border-accent); border-radius: 50px; background: transparent; color: var(--chv-contact-text); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; transition: background var(--chv-contact-transition), color var(--chv-contact-transition), transform var(--chv-contact-transition), border-color var(--chv-contact-transition); } .chv-contact-hero-button i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--chv-contact-accent); color: var(--chv-contact-bg); transition: transform var(--chv-contact-transition); } .chv-contact-hero-button:hover { background: var(--chv-contact-accent-soft); border-color: var(--chv-contact-accent); transform: translateY(-4px); } .chv-contact-hero-button:hover i { transform: translateX(5px); } /* ========================================================= META ========================================================= */ .chv-contact-hero-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 80px; padding-top: 18px; border-top: 1px solid var(--chv-contact-border); } .chv-contact-hero-meta span { color: var(--chv-contact-text-muted); font-size: 8px; font-weight: 700; letter-spacing: 2px; } .chv-contact-hero-meta span:last-child { color: var(--chv-contact-accent); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .chv-contact-hero-main { min-height: auto; padding: 130px 0 65px; } .chv-contact-hero-heading { font-size: clamp(65px, 11vw, 110px); letter-spacing: -5px; } .chv-contact-hero-main::after { right: 5%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .chv-contact-hero-main { padding: 105px 15px 55px; } .chv-contact-hero-main::after { display: none; } .chv-contact-hero-eyebrow { margin-bottom: 25px; font-size: 8px; letter-spacing: 2.5px; } .chv-contact-hero-eyebrow-line { width: 28px; } .chv-contact-hero-heading { font-size: clamp(50px, 15vw, 80px); line-height: 0.88; letter-spacing: -4px; } .chv-contact-hero-divider { margin-top: 40px; } .chv-contact-hero-bottom { grid-template-columns: 1fr; gap: 28px; padding-top: 25px; } .chv-contact-hero-description p { max-width: 430px; font-size: 13px; line-height: 23px; } .chv-contact-hero-button { width: fit-content; } .chv-contact-hero-meta { margin-top: 55px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .chv-contact-hero-main { padding-top: 95px; } .chv-contact-hero-heading { font-size: 47px; letter-spacing: -3px; } .chv-contact-hero-divider { margin-top: 32px; } .chv-contact-hero-meta { margin-top: 45px; } .chv-contact-hero-meta span { font-size: 7px; letter-spacing: 1.5px; } } /* ========================================================= CHAVO CONTACT PAGE SECTION 02 — CONTACT INFORMATION CARDS ========================================================= */ /* ========================================================= SECTION ========================================================= */ .chv-contact-info-section { position: relative; padding: 110px 0 120px; overflow: hidden; background: var(--chv-contact-bg); } /* ========================================================= CARDS GRID ========================================================= */ .chv-contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; } /* ========================================================= CARD ========================================================= */ .chv-contact-info-card { position: relative; min-height: 450px; display: flex; flex-direction: column; align-items: center; padding: 40px 28px 32px; overflow: hidden; border: 1px solid var(--chv-contact-border); border-radius: 24px; background: var(--chv-contact-surface); text-align: center; transition: background var(--chv-contact-transition), border-color var(--chv-contact-transition), transform var(--chv-contact-transition), box-shadow var(--chv-contact-transition); } /* ========================================================= CARD GLOW ========================================================= */ .chv-contact-info-card::before { content: ""; position: absolute; width: 230px; height: 230px; top: -135px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: var(--chv-contact-accent-soft); opacity: 0.45; transition: background var(--chv-contact-transition), opacity var(--chv-contact-transition), transform var(--chv-contact-transition); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .chv-contact-info-card:hover { background: var(--chv-contact-accent); border-color: var(--chv-contact-accent); transform: translateY(-10px); box-shadow: 0 25px 60px var(--chv-contact-shadow); } .chv-contact-info-card:hover::before { background: var(--chv-contact-bg); opacity: 0.08; transform: translateX(-50%) scale(1.35); } /* ========================================================= ICON ========================================================= */ .chv-contact-info-icon { position: relative; z-index: 2; width: 106px; height: 106px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 30px; border-radius: 50%; background: var(--chv-contact-accent-soft); color: var(--chv-contact-accent); font-size: 34px; transition: background var(--chv-contact-transition), color var(--chv-contact-transition), transform var(--chv-contact-transition); } .chv-contact-info-card:hover .chv-contact-info-icon { background: var(--chv-contact-bg); color: var(--chv-contact-accent); transform: scale(1.05); } /* ========================================================= CONTENT ========================================================= */ .chv-contact-info-content { position: relative; z-index: 2; flex: 1; width: 100%; } /* ========================================================= LABEL ========================================================= */ .chv-contact-info-label { display: block; margin-bottom: 12px; color: var(--chv-contact-accent); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; transition: color var(--chv-contact-transition); } .chv-contact-info-card:hover .chv-contact-info-label { color: var(--chv-contact-bg); } /* ========================================================= HEADING ========================================================= */ .chv-contact-info-content h3 { margin: 0 0 20px; color: var(--chv-contact-text); font-size: 25px; line-height: 1.25; font-weight: 700; transition: color var(--chv-contact-transition); } .chv-contact-info-card:hover .chv-contact-info-content h3 { color: var(--chv-contact-bg); } /* ========================================================= DESCRIPTION ========================================================= */ .chv-contact-info-content p { max-width: 310px; margin: 0 auto; color: var(--chv-contact-text-soft); font-size: 16px; line-height: 1.75; font-weight: 400; transition: color var(--chv-contact-transition); } .chv-contact-info-card:hover .chv-contact-info-content p { color: var(--chv-contact-bg); } /* ========================================================= ADDRESS ========================================================= */ .chv-contact-info-card:first-child .chv-contact-info-content p { max-width: 300px; font-size: 15px; line-height: 1.75; } /* ========================================================= ACTION BUTTON ========================================================= */ .chv-contact-info-action { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 175px; min-height: 54px; padding: 0 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.8px; margin-top: 25px; border: 1px solid var(--chv-contact-accent); border-radius: 50px; background: var(--chv-contact-accent); color: var(--chv-contact-bg); text-decoration: none; transition: background var(--chv-contact-transition), color var(--chv-contact-transition), border-color var(--chv-contact-transition), transform var(--chv-contact-transition); } .chv-contact-info-action i { font-size: 11px; transition: transform 0.4s ease; } /* ========================================================= ACTION HOVER ========================================================= */ .chv-contact-info-card:hover .chv-contact-info-action { background: var(--chv-contact-bg); border-color: var(--chv-contact-bg); color: var(--chv-contact-accent); } .chv-contact-info-card:hover .chv-contact-info-action i { transform: translateX(4px); } /* ========================================================= WORKING HOURS ========================================================= */ .chv-contact-info-hours { cursor: default; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .chv-contact-info-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .chv-contact-info-card { min-height: 420px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .chv-contact-info-section { padding: 80px 15px 90px; } .chv-contact-info-grid { grid-template-columns: 1fr; gap: 18px; } .chv-contact-info-card { min-height: 380px; padding: 35px 25px 28px; border-radius: 20px; } .chv-contact-info-icon { width: 90px; height: 90px; margin-bottom: 25px; font-size: 30px; } .chv-contact-info-label { font-size: 10px; } .chv-contact-info-content h3 { font-size: 23px; } .chv-contact-info-content p { max-width: 320px; font-size: 15px; line-height: 1.7; } .chv-contact-info-card:first-child .chv-contact-info-content p { font-size: 14px; } .chv-contact-info-action { min-width: 165px; min-height: 52px; font-size: 13px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .chv-contact-info-card { min-height: 360px; padding: 30px 20px 25px; } .chv-contact-info-icon { width: 82px; height: 82px; font-size: 27px; } .chv-contact-info-label { font-size: 9px; letter-spacing: 2px; } .chv-contact-info-content h3 { font-size: 20px; } .chv-contact-info-content p { font-size: 14px; line-height: 1.75; } .chv-contact-info-card:first-child .chv-contact-info-content p { font-size: 13px; } .chv-contact-info-action { min-width: 155px; min-height: 50px; font-size: 12px; } }