/* ========================================================================== iak-faq.css — IAK Help Center / FAQ page Loaded from controller/information/faq.php via addStyle(). Mirrors the Help Center design at iakwholesale.netlify.app/#faq. Dark mode via [data-theme="dark"] on (see dark-mode.css). ========================================================================== */ [data-theme="dark"] .iak-faq { --dm-text: #fff !important; } .iak-faq { /* ---- design tokens (light) ---- */ --accent: #c13538; --accent-soft: #fddcc3; --brand-red-deep: #a1282b; --bg-soft: #fff8f0; --bg-card: #ffffff; --ink: #18181a; --ink-3: #5a5a5e; --line: rgba(20, 20, 23, 0.08); --line-2: rgba(20, 20, 23, 0.14); --r-xl: 20px; background: var(--iak-cream); color: var(--ink); /* clip (not hidden) avoids horizontal scroll without breaking sticky descendants */ overflow-x: clip; } /* shared centred column */ .iak-faq-shell { max-width: 1000px; margin: 0 auto; padding: 0 32px; } /* ---- hero ------------------------------------------------------------------ */ .iak-faq-hero { position: relative; background: rgb(20, 20, 22); overflow: hidden; padding: 64px 0; } .iak-faq-hero__glow { position: absolute; inset: 0; pointer-events: none; } .iak-faq-hero__glow--red { background: radial-gradient(120% 120% at 85% -10%, rgba(193, 53, 56, 0.55), transparent 55%); } .iak-faq-hero__glow--orange { background: radial-gradient(90% 90% at 0% 110%, rgba(246, 141, 80, 0.18), transparent 60%); } .iak-faq-hero__inner { position: relative; z-index: 1; padding: 64px 32px; } .iak-faq-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(250, 179, 114); margin-bottom: 16px; } .iak-faq-hero__title { margin: 0; max-width: 820px; font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; font-weight: 800; color: #fff; } .iak-faq-hero__sub { margin: 18px 0 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); } /* ---- filter pills ---------------------------------------------------------- */ .iak-faq-shell.iak-faq-groups { padding-top: 28px; } .iak-faq-filters { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 40px; } .iak-faq-pill { height: 38px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line-2); background: var(--bg-card); color: var(--ink-3); transition: background 0.15s, color 0.15s, border-color 0.15s; } .iak-faq-pill:hover { border-color: var(--accent); color: var(--accent); } .iak-faq-pill.is-active { border-color: var(--accent); background: var(--accent); color: #fff; } /* ---- groups ---------------------------------------------------------------- */ .iak-faq-group { margin-bottom: 32px; } .iak-faq-group.is-hidden { display: none; } .iak-faq-group__label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .iak-faq-list { display: flex; flex-direction: column; gap: 12px; } /* ---- accordion item -------------------------------------------------------- */ .iak-faq-item { overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; } .iak-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; } .iak-faq-q__text { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.4; } .iak-faq-q__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--brand-red-deep); transform: rotate(0deg); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s, color 0.2s; } .iak-faq-item.is-open .iak-faq-q__icon { background: var(--accent); color: #fff; transform: rotate(180deg); } .iak-faq-a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s; } .iak-faq-item.is-open .iak-faq-a { opacity: 1; } .iak-faq-a__inner { padding: 0 22px 22px; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--ink-3); } .iak-faq-a__inner :first-child { margin-top: 0; } .iak-faq-a__inner :last-child { margin-bottom: 0; } .iak-faq-a__inner a { color: var(--accent); } .iak-faq-empty { text-align: center; padding: 48px 0; color: var(--ink-3); } /* ---- CTA ------------------------------------------------------------------- */ .iak-faq-shell:last-child { padding-bottom: 56px; } .iak-faq-cta { margin-top: 16px; border-radius: var(--r-xl); background: var(--bg-soft); border: 1px solid var(--line); padding: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .iak-faq-cta__copy h3 { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--ink); } .iak-faq-cta__copy p { font-size: 15px; color: var(--ink-3); margin: 0; } .iak-faq-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* buttons — -based, so colour must beat style.css `a{color:inherit!important}` */ .iak-faq-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .iak-faq-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff !important; } .iak-faq-btn--primary:hover { background: var(--brand-red-deep); border-color: var(--brand-red-deep); color: #fff !important; } .iak-faq-btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink) !important; } .iak-faq-btn--ghost:hover { border-color: var(--accent); color: var(--accent) !important; } /* ---- responsive ------------------------------------------------------------ */ @media (max-width: 640px) { .iak-faq-shell { padding: 0 18px; } .iak-faq-hero__inner { padding: 48px 18px; } .iak-faq-hero__title { font-size: 26px; } .iak-faq-hero__sub { font-size: 16px; } .iak-faq-filters { padding-top: 28px; } .iak-faq-cta { padding: 24px; } .iak-faq-cta__actions { width: 100%; flex-direction: column;} } /* ========================================================================== DARK MODE — remap tokens to the shared --dm-* palette. Hero keeps its fixed dark surface; brand accents are kept (slightly brightened for contrast on dark). ========================================================================== */ [data-theme="dark"] .iak-faq { --accent: #e0524f; --accent-soft: rgba(193, 53, 56, 0.22); --brand-red-deep: #f26b5f; --bg-soft: var(--dm-surface-2); --bg-card: var(--dm-card); --ink: var(--dm-text); --ink-3: var(--dm-text-secondary); --line: var(--dm-border-light); --line-2: var(--dm-border); } [data-theme="dark"] .iak-faq { background: var(--dm-bg); } [data-theme="dark"] .iak-faq .iak-faq-pill.is-active { color: #fff; } [data-theme="dark"] .iak-faq .iak-faq-item.is-open .iak-faq-q__icon { color: #fff; } [data-theme="dark"] .iak-faq-pill:hover { border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.20); color: #e4e4e7 !important; } [data-theme="dark"] .iak-faq-btn--primary, [data-theme="dark"] .iak-faq-btn--ghost:hover { background: #fff !important; color: #18181a !important; border: 1px solid #fff !important; } [data-theme="dark"] .iak-faq-btn--primary:hover, [data-theme="dark"] .iak-faq-btn--ghost { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-color: rgba(255, 255, 255, .28) !important; }