/* ============================================================================= faq-contact.css Styles for: contact page body + FAQ section + FAQ scroll button Import in your main stylesheet or link in on the contact route. e.g. ============================================================================= */ /* ── Contact Body ─────────────────────────────────────────────────────────── */ .contact-page { background: #fff; } .contact-body { max-width: 700px; margin: 0 auto; padding: 2px 24px 0; } .contact-intro { text-align: center; margin-bottom: 32px; } .contact-name { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; margin: 0 0 4px; color: #1a1a1a; } .contact-role { color: #888; font-size: .92rem; margin: 0; } /* ── Contact Items ────────────────────────────────────────────────────────── */ .contact-details { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; } .contact-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; } .contact-item:hover { background: #f5f1eb; } .ci-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; color: #c9a84c; } .contact-item--whatsapp .ci-icon { color: #25D366; } .ci-content { display: flex; flex-direction: column; gap: 2px; } .ci-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #999; } .ci-value { font-size: .93rem; color: #1a1a1a; font-weight: 500; } /* ── Map ──────────────────────────────────────────────────────────────────── */ .contact-map { border-radius: 12px; overflow: hidden; margin-bottom: 28px; } .contact-map iframe { display: block; } /* ── Social + Catalogue ───────────────────────────────────────────────────── */ .contact-social { text-align: center; padding-bottom: 40px; } .contact-social-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #999; font-weight: 500; margin: 0 0 16px; } .contact-social-icons { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; } .contact-catalogue-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; background: #1a1a1a; color: #fff; border-radius: 6px; text-decoration: none; font-size: .88rem; font-weight: 500; transition: background .2s; } .contact-catalogue-btn:hover { background: #c9a84c; } .contact-catalogue-btn svg { width: 16px; height: 16px; } /* ── FAQ Section ──────────────────────────────────────────────────────────── */ .faq-section { background: #f9f7f4; padding: 72px 0 80px; border-top: 1px solid #e8e2d9; } .faq-container { max-width: 860px; margin: 0 auto; padding: 0 24px; } .faq-header { text-align: center; margin-bottom: 40px; } .faq-heading { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: #1a1a1a; margin: 0 0 12px; letter-spacing: -.02em; } .faq-subtitle { color: #666; font-size: .97rem; margin: 0; line-height: 1.6; } /* ── FAQ Tabs ─────────────────────────────────────────────────────────────── */ .faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; } .faq-tab { padding: 7px 20px; border: 1.5px solid #d4c9b8; border-radius: 20px; background: #fff; color: #555; font-size: .85rem; cursor: pointer; transition: all .2s; font-weight: 500; white-space: nowrap; } .faq-tab:hover { border-color: #c9a84c; color: #c9a84c; } .faq-tab.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } /* ── FAQ Accordion ────────────────────────────────────────────────────────── */ .faq-item { border-bottom: 1px solid #e8e2d9; overflow: hidden; } .faq-item:first-child { border-top: 1px solid #e8e2d9; } .faq-item[data-hidden] { display: none; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; background: none; border: none; cursor: pointer; text-align: left; color: #1a1a1a; font-size: .97rem; font-weight: 500; line-height: 1.45; } [dir="rtl"] .faq-question { text-align: right; } .faq-q-text { flex: 1; } .faq-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform .28s cubic-bezier(.4, 0, .2, 1); color: #aaa; } .faq-item.open .faq-chevron { transform: rotate(180deg); color: #c9a84c; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4, 0, .2, 1); } .faq-item.open .faq-answer { max-height: 900px; } .faq-answer-inner { padding: 2px 4px 22px; color: #444; font-size: .93rem; line-height: 1.75; } .faq-answer-inner a { color: #c9a84c; text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, .3); transition: border-color .15s; } .faq-answer-inner a:hover { border-color: #c9a84c; } /* ── FAQ Scroll Button ────────────────────────────────────────────────────── */ .faq-scroll-btn { position: fixed; bottom: 96px; right: 20px; z-index: 400; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 14px; background: #1a1a1a; color: #fff; border: none; border-radius: 24px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 0, .22); transition: opacity .25s, transform .25s, background .2s; } .faq-scroll-btn:hover { background: #c9a84c; transform: translateY(-2px); } .faq-scroll-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .faq-scroll-btn.faq-btn-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .contact-body { padding: 24px 16px 0; } .contact-item { padding: 12px; } .faq-tab { padding: 6px 14px; font-size: .8rem; } .faq-question { font-size: .9rem; padding: 16px 2px; } .faq-answer-inner { font-size: .88rem; } .faq-scroll-btn { bottom: 120px; right: 14px; padding: 9px 13px 9px 11px; font-size: .72rem; } }