/* V7-HEADER File: faq.css Path: /assets/css/faq/faq.css Version: v3.8.2 Issued: 2026-03-18 Author: Buktika Webdesk (Binka) Purpose: FAQ page token consumer. PIL-09 v1.0.0 + DOC-02 + DOC-03 + ai.md HARD RULES. page-bg:#f0f7f7 | page-primary:lunar-teal #0d4a4a | page-secondary:teal-deep #2f5c68 page-accent:moon-glow #e8f5f0 | vignette: top-corners rgba(13,74,74,0.25) ChangeLog: v3.8.2 (2026-07-18): Dark-theme accordion readability repair. ADDED - --faq-control-color semantic alias so question text, chevrons, answer links, pin states, and keyboard focus remain readable on the universal walnut dark surface. CHANGED - Dark FAQ control colour from light-theme lunar teal to moon-glow. v3.6.0 (2026-06-13): MamaDEX FAQ border aligned to Colour Map v3.15.0. CHANGED - Mamadex card border from coral to mama-violet. v3.5.0 (2026-03-18): global.css v3.16.0 compliance — section heading border-bottom. V1 REMOVED: padding-bottom: 0.75rem from .sdx-card-section h2 — owned by global.css. V2 REMOVED: border-bottom: 2px solid var(--page-primary) from .sdx-card-section h2 — global.css v3.16.0 now owns this canonically. V3 REMOVED: [data-theme="dark"] border-bottom-color: rgba(from var(--page-primary) r g b / 0.30) — global.css v3.16.0 owns dark mode rule at 0.40 opacity. Per-page override was redundant AND used wrong opacity (0.30 vs canonical 0.40). v3.0.0 (2026-03-18): Full rebuild. 32 violations resolved. C1 HARD: token bindings corrected: green/purple hex -> lunar-teal/teal-deep/moon-glow tokens per PIL-09 §2. C2: --page-bg:#f0f7f7 added per PIL-09 §2. C3: hero image path corrected to /assets/images/faq/faq-hero.webp per PIL-09 §11. C4 HARD: green-purple diagonal overlay removed. Top-corners vignette per PIL-09 §3 special rule. C5 HARD: 18 responsive px breakpoints removed. var(--hero-min) + single 480px mobile override. C6: max-width/margin removed from .hero; belongs on .container. C7 HARD: .headline font-family/font-weight/line-height removed per DOC-02 §3.3.1 HARD RULE. C8 HARD: .intro forbidden overrides removed per DOC-02 §3.3.3. background:none!/padding:0! removed. C9: hero-actions gap 1.5rem->1rem; margin-top:2.5rem added per DOC-02 §3.3.5. C10: btn-hero-primary flat fill -> gradient + inset ring per PIL-09 §5.1 + DOC-03 §4.1. C11 HARD: btn-hero-primary:hover bare hex -> filter:brightness(1.08). C12 HARD: btn-hero-secondary -> canonical glass per DOC-03 §4.2. Hover bare hex removed. C13: .faq-card bg -> var(--card); border -> 1.5px solid var(--page-primary) per PIL-09 §6; border-radius px->rem. C14 HARD: all card pillar border hex -> canonical tokens. C15 HARD: faq-card-header h2 hex -> var(--fg); font-family string -> var(--headline-font). C16 HARD: all bare hex throughout components -> var(--page-primary)/var(--fg)/var(--muted). C17 HARD: @media prefers-color-scheme:dark removed. [data-theme="dark"] only per PIL-09 §8. C18: dark mode scoped to [data-theme="dark"] .page-faq throughout. v2.3.0 (2025-12-27): Previous version. */ /* 0) depends on: global.css, themes.css, partials/footer.css header.css lifted by includes.js, MUST NOT be linked in */ /* 1) Page variable binding — PIL-09 §2 (LOCKED). page-bg: PIL-09 §2 permits exception. #f0f7f7 spec value reads as baby blue on screen. Owner-approved: --sdx-color-viridians-bg (#f8f7fa) is a cool near-white with purple whisper — correct night-register character. */ .page-faq { --page-bg: var(--sdx-color-viridians-bg); --page-primary: var(--sdx-color-lunar-teal); --page-secondary: var(--sdx-color-teal-deep); --page-accent: var(--sdx-color-moon-glow); --page-dark-base: var(--sdx-color-livingtower-dark-base); --page-dark-surface: var(--sdx-color-livingtower-dark-surface); --faq-control-color: var(--page-primary); --hero-image: url('/assets/images/faq/faq-hero.webp'); --hero-vignette-from: rgba(13, 74, 74, 0.25); --hero-vignette-to: rgba(13, 74, 74, 0); background: var(--page-bg); color: var(--fg); } /* 2) Base surfaces — page-bg on body element ensures it beats global.css body rule */ body.page-faq { background-color: var(--page-bg); } .page-faq .container { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; } /* 3) Hero — top-corners vignette only. No overlay. PIL-09 §3 special rule. */ .page-faq .hero-wrap { background-image: var(--hero-image); background-size: cover; background-position: center; min-height: var(--hero-min); } /* Top-corners vignette: radial from top-left and top-right. Moon must breathe. */ .page-faq .hero-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top left, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 50%), radial-gradient(ellipse at top right, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 50%); } .page-faq .hero { display: flex; align-items: center; justify-content: center; min-height: var(--hero-min); padding: 6rem 2rem; } .page-faq .hero-content { max-width: 52rem; margin: 0 auto; text-align: center; } /* font-size only per DOC-02 §3.3.1. All other .headline properties owned by global.css. */ .page-faq .headline { font-size: clamp(2.5rem, 5vw, 4rem); margin: 0 0 1.5rem; color: #ffffff; } /* tagline: PIL-09 §4 + BKT-DOC-01 §4 HARD RULE: universal amber, no per-pillar exceptions. --page-secondary is teal-deep on this page -- must reference mama-amber directly. */ .page-faq .tagline { color: var(--sdx-color-mama-amber); } /* max-width + margin only per DOC-02 §3.3.3. */ .page-faq .hero .intro { max-width: 700px; margin: 0 auto; color: #ffffff; } .page-faq .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 2.5rem; } /* Shared hero button geometry */ .page-faq .btn-hero-primary, .page-faq .btn-hero-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; font-family: var(--text-font); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 6px; min-height: 3rem; cursor: pointer; transition: filter 0.28s ease, box-shadow 0.28s ease; } /* Hero primary: PIL-09 §5.1 + DOC-03 §4.1. body prefix beats global a{color}. */ body.page-faq .btn-hero-primary { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.80), 0 4px 14px rgba(13,74,74,0.40); } body.page-faq .btn-hero-primary:hover { filter: brightness(1.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.80), 0 8px 24px rgba(13,74,74,0.50); } /* Hero secondary: canonical glass per DOC-03 §4.2 */ body.page-faq .btn-hero-secondary { background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; border: 1.5px solid rgba(255,255,255,0.60); box-shadow: 0 2px 12px rgba(0,0,0,0.15); } /* 4) Typography */ .page-faq .sdx-card-section h2 { font-family: var(--headline-font); font-size: clamp(1.75rem, 3vw, 2rem); font-weight: 700; color: var(--fg); margin: 0 0 1.5rem; /* border-bottom + padding-bottom owned by global.css v3.16.0 — var(--page-primary). MUST NOT override. */ } /* 5) Sections: none -- .sdx-card-section in global.css handles all section surfaces */ /* 6) FAQ cards — PIL-09 §6: card background, 1.5px solid var(--page-primary) border. No grid layout specified in PIL-09. .faq-cards layout is owner-determined. */ .page-faq .faq-cards { margin-top: 2rem; } .page-faq .faq-card { background: var(--card); border-radius: 0.75rem; border: 1.5px solid var(--page-primary); border-left-width: 4px; padding: 2rem; box-shadow: var(--card-shadow); margin-bottom: 2rem; transition: transform 0.28s ease, box-shadow 0.28s ease; } .page-faq .faq-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); } /* Pillar colour-coded border-left overrides */ .page-faq .faq-card-basics { border-left-color: var(--sdx-color-stone); } .page-faq .faq-card-hekto { border-left-color: var(--sdx-color-teal-deep); } .page-faq .faq-card-iso { border-left-color: var(--sdx-color-stone); } .page-faq .faq-card-mamadex { border-left-color: var(--sdx-color-mama-violet); } .page-faq .faq-card-farmers { border-left-color: var(--sdx-color-green-deep); } .page-faq .faq-card-viridians{ border-left-color: var(--sdx-color-purple-deep); } .page-faq .faq-card-legal { border-left-color: var(--sdx-color-stone); } .page-faq .faq-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid rgba(from var(--page-primary) r g b / 0.12); } .page-faq .faq-icon { width: 4rem; height: 4rem; object-fit: contain; flex: 0 0 4rem; filter: drop-shadow(0 2px 2px rgba(17, 24, 39, 0.12)); } .page-faq .faq-icon-hekto { transform: scale(0.84); transform-origin: center; } .page-faq .faq-card-header h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--fg); font-family: var(--headline-font); } /* 7) FAQ items (details/summary accordion) */ .page-faq .faq-items { display: flex; flex-direction: column; gap: 0.75rem; } .page-faq .faq-item { border-radius: 0.5rem; background: rgba(from var(--page-primary) r g b / 0.02); overflow: hidden; transition: background 0.25s ease; } .page-faq .faq-item:hover { background: rgba(from var(--page-primary) r g b / 0.05); } .page-faq .faq-item[open] { background: rgba(from var(--page-primary) r g b / 0.06); border: 1px solid rgba(from var(--page-primary) r g b / 0.15); } .page-faq .faq-item summary { padding: 1.25rem; cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--faq-control-color); line-height: 1.5; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; user-select: none; transition: color 0.25s ease; } .page-faq .faq-item summary::-webkit-details-marker { display: none; } .page-faq .faq-item summary::marker { display: none; } .page-faq .faq-question-text { flex: 1; min-width: 0; } .page-faq .faq-icons { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; } /* Chevron indicator */ .page-faq .faq-item summary::after { content: ''; width: 0; height: 0; flex-shrink: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--faq-control-color); transition: transform 0.25s ease; opacity: 0.7; } .page-faq .faq-item[open] summary::after { transform: rotate(180deg); opacity: 1; } .page-faq .faq-item summary:hover { color: var(--fg); } .page-faq .faq-item summary:hover::after { opacity: 1; border-top-color: var(--fg); } .page-faq .faq-answer { padding: 0 1.25rem 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.7; animation: faqFadeIn 0.25s ease-out; } @keyframes faqFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .page-faq .faq-answer a { color: var(--faq-control-color); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(from var(--faq-control-color) r g b / 0.30); transition: filter 0.22s ease; } .page-faq .faq-answer a:hover { filter: brightness(0.85); } /* Pin button */ .page-faq .faq-pin-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0.125rem; border-radius: 0.25rem; color: var(--muted); opacity: 0; flex-shrink: 0; transition: filter 0.25s ease, opacity 0.25s ease; } .page-faq .faq-item[open] .faq-pin-btn { opacity: 0.6; } .page-faq .faq-pin-btn:hover { color: var(--faq-control-color); background: rgba(from var(--faq-control-color) r g b / 0.08); opacity: 1 !important; } .page-faq .faq-pin-btn.pinned { opacity: 1 !important; color: var(--faq-control-color); } .page-faq .faq-pin-btn.pinned:hover { background: rgba(from var(--page-primary) r g b / 0.12); } .page-faq .faq-pin-btn.pinned svg { animation: pinPulse 0.4s ease-out; } .page-faq .faq-item.faq-pinned { border-left: 3px solid var(--page-primary); background: rgba(from var(--page-primary) r g b / 0.04); } .page-faq .faq-item.faq-pinned[open] { background: rgba(from var(--page-primary) r g b / 0.08); } @keyframes pinPulse { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.3) rotate(-10deg); } 100% { transform: scale(1) rotate(0deg); } } /* Focus states */ .page-faq .faq-item summary:focus { outline: 2px solid var(--faq-control-color); outline-offset: 2px; border-radius: 0.5rem; } .page-faq .faq-item summary:focus:not(:focus-visible) { outline: none; } .page-faq .faq-pin-btn:focus { outline: 2px solid var(--page-primary); outline-offset: 2px; opacity: 1 !important; } .page-faq .faq-pin-btn:focus:not(:focus-visible) { outline: none; } /* 8) CTA band primary */ .page-faq .sdx-btn-primary { background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(13,74,74,0.25); } /* 9) Media queries */ @media (max-width: 480px) { .page-faq .hero { padding: 3rem 1.25rem; } .page-faq .hero-actions { flex-direction: column; width: 100%; } .page-faq .btn-hero-primary, .page-faq .btn-hero-secondary { width: 100%; justify-content: center; } .page-faq .faq-card { padding: 1.5rem; } .page-faq .faq-item summary { font-size: 1rem; } .page-faq .faq-answer { font-size: var(--body); } } @media (min-width: 768px) { /* faq-cards layout: owner-specified only — no grid imposed */ } @media (prefers-reduced-motion: reduce) { .page-faq .faq-card, .page-faq .faq-item, .page-faq .faq-item summary, .page-faq .faq-item summary::after, .page-faq .faq-answer { animation: none; transition: none; } .page-faq .faq-card:hover { transform: none; } } @media print { .page-faq .faq-card { break-inside: avoid; box-shadow: none; } .page-faq .faq-item summary::after { display: none; } } /* 10) Dark mode: [data-theme="dark"] ONLY. @media prefers-color-scheme MUST NOT appear. PIL-09 §8. */ [data-theme="dark"] .page-faq { --faq-control-color: var(--sdx-color-moon-glow); background: var(--page-dark-base); color: var(--sdx-color-ui-dark-text); } /* border-bottom-color on .sdx-card-section h2 owned by global.css v3.16.0 — rgba(from var(--page-primary) r g b / 0.40). */ [data-theme="dark"] .page-faq .faq-card { background: var(--card); border-color: rgba(from var(--page-primary) r g b / 0.40); } [data-theme="dark"] .page-faq .faq-icon { padding: 0.4rem; border: 1px solid rgba(from var(--page-primary) r g b / 0.28); border-radius: 50%; background: var(--sdx-color-moon-glow); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28); filter: none; } [data-theme="dark"] .page-faq .faq-icon-hekto { padding: 0.65rem; transform: none; } [data-theme="dark"] .page-faq .faq-item { background: rgba(255,255,255,0.02); } [data-theme="dark"] .page-faq .faq-item:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .page-faq .faq-item[open] { background: rgba(255,255,255,0.07); } [data-theme="dark"] .page-faq .faq-item.faq-pinned { background: rgba(from var(--page-primary) r g b / 0.10); }