159 lines
4.6 KiB
HTML
159 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>FAQ — Biohazard VFX</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
#faq.content-block {
|
|
max-width: 2000px;
|
|
margin: 0 auto;
|
|
padding: 12vh var(--gutter-x) 8vh;
|
|
font-family: "SpaceMono", monospace;
|
|
color: var(--acid);
|
|
text-shadow: 0 0 2px var(--acid);
|
|
border-bottom: 1px solid var(--graphite);
|
|
background: none;
|
|
}
|
|
.faq-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.2rem;
|
|
margin-top: 3.5rem;
|
|
}
|
|
.faq-list details {
|
|
background: var(--graphite);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.38);
|
|
padding: 1.5rem 1.5rem 1.2rem;
|
|
font-size: 1.08rem;
|
|
transition: box-shadow .25s, background .25s;
|
|
border: 1px solid rgba(80,80,80,0.18);
|
|
position: relative;
|
|
color: var(--acid);
|
|
}
|
|
.faq-list details[open] {
|
|
box-shadow: 0 10px 28px rgba(0,0,0,0.5);
|
|
background: var(--slate);
|
|
}
|
|
.faq-list summary {
|
|
font-family: "ArchiveCond", sans-serif;
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--hot);
|
|
cursor: pointer;
|
|
outline: none;
|
|
margin-bottom: 0.7rem;
|
|
transition: color .2s;
|
|
padding: 0.2em 0;
|
|
}
|
|
.faq-list details[open] summary {
|
|
color: var(--acid);
|
|
}
|
|
.faq-list p {
|
|
font-family: "SpaceMono", monospace;
|
|
font-size: 1rem;
|
|
color: var(--acid);
|
|
opacity: 0.88;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
padding-left: 0.2em;
|
|
}
|
|
.faq-list details[open] > .faq-anim {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
transition: max-height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s;
|
|
}
|
|
.faq-anim {
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
opacity: 0;
|
|
transition: max-height 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s;
|
|
will-change: max-height, opacity;
|
|
}
|
|
@media (max-width: 767px) {
|
|
#faq.content-block {
|
|
padding: 7vh var(--gutter-x) 3vh;
|
|
}
|
|
.faq-list {
|
|
gap: 1.1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.faq-list details {
|
|
padding: 1rem 0.7rem 0.7rem;
|
|
font-size: 1em;
|
|
}
|
|
.faq-list summary {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
(function(){
|
|
const overlay=document.createElement('div');
|
|
overlay.id='loader-overlay';
|
|
overlay.innerHTML='<div class="spinner"></div>';
|
|
document.body.appendChild(overlay);
|
|
window.addEventListener('load',()=>{overlay.classList.add('hide');setTimeout(()=>overlay.remove(),700);});
|
|
})();
|
|
</script>
|
|
<div id="nav-placeholder"></div>
|
|
<section id="faq" class="content-block">
|
|
<h2>Frequently Asked Questions</h2>
|
|
<div class="faq-list" id="faq-list"></div>
|
|
</section>
|
|
<div id="socials-placeholder"></div>
|
|
<footer>
|
|
<p>© 2025 Biohazard VFX. All Rights Reserved.</p>
|
|
</footer>
|
|
<script src="js/ui.js" defer></script>
|
|
<script>
|
|
// Inject nav fragment
|
|
fetch('fragments/nav.html')
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
document.getElementById('nav-placeholder').outerHTML = html;
|
|
});
|
|
// Inject socials fragment
|
|
fetch('fragments/socials.html')
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
document.getElementById('socials-placeholder').outerHTML = html;
|
|
});
|
|
// Load FAQ from JSON
|
|
fetch('written/faq.json')
|
|
.then(r => r.json())
|
|
.then(faqs => {
|
|
const list = document.getElementById('faq-list');
|
|
list.innerHTML = faqs.map(faq => `
|
|
<details>
|
|
<summary>${faq.question}</summary>
|
|
<div class="faq-anim"><p>${faq.answer}</p></div>
|
|
</details>
|
|
`).join('');
|
|
// Only one FAQ open at a time, and animate dropdowns smoothly
|
|
document.querySelectorAll('.faq-list details').forEach((d) => {
|
|
d.addEventListener('toggle', function(e) {
|
|
if (d.open) {
|
|
document.querySelectorAll('.faq-list details').forEach((other) => {
|
|
if (other !== d && other.open) other.removeAttribute('open');
|
|
});
|
|
setTimeout(() => {
|
|
const newRect = d.getBoundingClientRect();
|
|
const isFullyVisible = newRect.top >= 0 && newRect.bottom <= window.innerHeight;
|
|
if (!isFullyVisible) {
|
|
d.scrollIntoView({behavior: 'smooth', block: 'start'});
|
|
}
|
|
}, 520);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|