/* ================================================ Space Vanta Theme 1.0 Module: Product Details FAQ File: faq.css Version: 1.0 Phase: PDR-DV-001 Purpose: Space Vanta FAQ Expansion System Responsibilities: - FAQ group panel - FAQ trigger - FAQ item - FAQ item trigger - FAQ answer - Expansion visual language Does NOT handle: - Description - Policies - Accordion JavaScript - Product Information ================================================ */ /* ================================================= FAQ GROUP ================================================= */ .sv-product-details-faq { width: 100%; min-width: 0; position: relative; margin-bottom: 18px; background: linear-gradient(135deg, rgba(235, 235, 235, 0.46), rgba(255, 255, 255, 0.30)); border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70); } /* ================================================= FAQ TRIGGER ================================================= */ .sv-product-details-faq__trigger { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; width: 100%; min-height: 112px; padding: 24px 26px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; } /* ================================================= FAQ NUMBER ================================================= */ .sv-product-details-faq__trigger::before { content: "02"; grid-column: 1 / -1; display: block; margin-bottom: 18px; font-size: 10px; line-height: 1; letter-spacing: 0.18em; opacity: 0.42; } /* ================================================= FAQ TITLE ================================================= */ .sv-product-details-faq__title { align-self: end; font-size: 13px; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; } /* ================================================= FAQ ICON ================================================= */ .sv-product-details-faq__icon { align-self: end; justify-self: end; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; font-size: 14px; line-height: 1; transition: transform 320ms ease, background-color 320ms ease, color 320ms ease, border-color 320ms ease; } /* ================================================= FAQ OPEN ================================================= */ .sv-product-details-faq__trigger.is-open .sv-product-details-faq__icon { transform: rotate(45deg); background: rgba(0, 0, 0, 0.88); color: #fff; border-color: rgba(0, 0, 0, 0.88); } /* ================================================= FAQ CONTENT ================================================= */ .sv-product-details-faq__content { width: 100%; overflow: hidden; border-top: 1px solid transparent; } .sv-product-details-faq__content:not([hidden]) { border-top-color: rgba(0, 0, 0, 0.08); } /* ================================================= FAQ ITEMS ================================================= */ .sv-product-details-faq__items { width: 100%; padding: 8px clamp(14px, 2vw, 26px) 18px; } /* ================================================= FAQ ITEM ================================================= */ .sv-product-details-faq-item { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.10); } .sv-product-details-faq-item:last-child { border-bottom: 0; } /* ================================================= QUESTION ================================================= */ .sv-product-details-faq-item__trigger { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; width: 100%; min-height: 64px; padding: 18px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; } /* ================================================= QUESTION ================================================= */ .sv-product-details-faq-item__question { font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; } /* ================================================= ITEM ICON ================================================= */ .sv-product-details-faq-item__icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; opacity: 0.58; transition: transform 280ms ease, opacity 280ms ease; } /* ================================================= ITEM OPEN ================================================= */ .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__icon { transform: rotate(45deg); opacity: 1; } /* ================================================= FAQ ITEM OPEN SIGNAL ================================================= */ .sv-product-details-faq-item { position: relative; } .sv-product-details-faq-item::before { content: ""; position: absolute; top: 18px; left: 0; width: 2px; height: 0; background: rgba(0, 0, 0, 0.72); transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1); } .sv-product-details-faq-item:has(.sv-product-details-faq-item__trigger.is-open)::before { height: 28px; } /* ================================================= ANSWER ================================================= */ .sv-product-details-faq-item__answer { width: 100%; overflow: hidden; } /* ================================================= ANSWER CONTENT ================================================= */ .sv-product-details-faq-item__answer-content { max-width: 720px; padding: 0 54px 28px 12px; font-size: 13px; line-height: 1.75; color: rgba(0, 0, 0, 0.66); } /* ================================================= FAQ ANSWER REVEAL ================================================= */ .sv-product-details-faq-item__answer-content { opacity: 0; transform: translateY(5px); transition: opacity 300ms ease 120ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } .sv-product-details-faq-item__trigger.is-open+.sv-product-details-faq-item__answer .sv-product-details-faq-item__answer-content { opacity: 1; transform: translateY(0); } /* ================================================= FOCUS ================================================= */ .sv-product-details-faq__trigger:focus-visible, .sv-product-details-faq-item__trigger:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.30); outline-offset: -4px; } /* ================================================= FAQ ITEM REVEAL ================================================= */ .sv-product-details-faq-item { opacity: 0; transform: translateY(8px); } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item { opacity: 1; transform: translateY(0); transition: opacity 360ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item:nth-child(1) { transition-delay: 40ms; } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item:nth-child(2) { transition-delay: 80ms; } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item:nth-child(3) { transition-delay: 120ms; } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item:nth-child(4) { transition-delay: 160ms; } .sv-product-details-faq__content:not([hidden]) .sv-product-details-faq-item:nth-child(5) { transition-delay: 200ms; } /* ================================================= FAQ QUESTION TYPOGRAPHY ================================================= */ .sv-product-details-faq-item__question { letter-spacing: 0.025em; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease; } .sv-product-details-faq-item__trigger.is-open .sv-product-details-faq-item__question { transform: translateX(5px); } /* ================================================= MOBILE ================================================= */ @media (max-width: 749px) { .sv-product-details-faq { margin-bottom: 12px; } .sv-product-details-faq__trigger { min-height: 94px; padding: 20px; } .sv-product-details-faq__trigger::before { margin-bottom: 15px; } .sv-product-details-faq__items { padding: 6px 12px 12px; } .sv-product-details-faq-item__trigger { min-height: 58px; padding: 16px 8px; } .sv-product-details-faq-item__question { font-size: 12px; } .sv-product-details-faq-item__answer-content { padding: 0 34px 24px 8px; font-size: 12px; } }