<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<title data-text="page-title">STORYLAB | Histórias mudam o mundo</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link

href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"

rel="stylesheet"

>

<style>

:root {

--primary: #00B8D9;

--dark: #000000;

--light: #F5F5F5;

--alt-bg: #1A1A1A;

--maxw: 360px; /* protótipo 9:16 */

}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body {

display:flex;

justify-content:center;

background:var(--dark);

font-family:'Montserrat',sans-serif;

color:var(--light);

min-height:100vh;

}

a{color:inherit;text-decoration:none;}

.viewport {

width:100%; max-width:var(--maxw);

aspect-ratio:9/16;

background:var(--dark);

overflow-y:auto;

border-left:1px solid #222;

border-right:1px solid #222;

}

/* HEADER */

header{position:sticky;top:0;background:var(--dark);border-bottom:1px solid var(--alt-bg);z-index:10;}

header nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;}

.logo{font-weight:700;font-size:1.25rem;letter-spacing:1px;color:var(--light);}

.lang-switcher button {

background:none;border:none;margin-left:.5rem;

color:var(--light);opacity:.6;font-weight:700;

cursor:pointer;transition:opacity .2s,color .2s;padding:.2rem;

}

.lang-switcher .active,

.lang-switcher button:hover {color:var(--primary);opacity:1;}

/* LINE-UP */

#line-up{background:var(--alt-bg);padding:1rem;}

.grid{display:grid;grid-auto-rows:auto;gap:1rem;}

.project-card {

display:block;padding:1rem;border-radius:6px;

transition:transform .2s,box-shadow .2s;

}

.project-card:nth-child(odd) {background:var(--light);color:var(--dark);}

.project-card:nth-child(even){background:var(--alt-bg);color:var(--light);}

.project-card:hover{transform:translateY(-3px);box-shadow:0 6px 15px rgba(0,184,217,0.2);}

.project-card .status {

display:block;font-size:.75rem;font-weight:700;

text-transform:uppercase;letter-spacing:1px;

margin-bottom:.5rem;color:var(--primary);

}

.project-card h3{font-size:1rem;margin-bottom:.5rem;}

.project-card .production-info{font-size:.8rem;opacity:.8;margin-bottom:.75rem;}

.project-card p{font-size:.85rem;line-height:1.4;}

/* ABOUT */

#about{padding:1rem;background:var(--dark);}

.about-content{max-width:300px;margin:auto;text-align:center;}

.about-content p{font-size:.9rem;color:#ddd;margin-bottom:1rem;}

.about-highlights span{

display:block;font-size:.8rem;color:#bbb;margin-bottom:.5rem;

}

.about-highlights strong{color:var(--primary);}

/* FOOTER */

footer{background:var(--alt-bg);padding:1rem;text-align:center;border-top:1px solid #222;}

footer p{font-size:.8rem;color:#aaa;}

footer a{color:var(--light);font-weight:600;}

footer a:hover{color:var(--primary);}

/* Scrollbar */

.viewport::-webkit-scrollbar{width:6px;}

.viewport::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px;}

</style>

</head>

<body>

<div class="viewport">

<header>

<nav>

<div class="logo">STORYLAB</div>

<div class="lang-switcher">

<button data-lang="pt" class="active">PT</button>

<button data-lang="en">EN</button>

<button data-lang="es">ES</button>

<button data-lang="fr">FR</button>

</div>

</nav>

</header>

<section id="line-up">

<div class="grid">

<a href="autoficcao.html" class="project-card">

<span class="status" data-text="status-producao">Em Produção</span>

<h3 data-text="autoficcao-title">AUTOFICÇÃO</h3>

<div class="production-info" data-text="autoficcao-prod">

Produção: CATRUMANA DE CINEMA. Documentário.

</div>

<p data-text="autoficcao-synopsis">

Um mergulho na alma mestiça do Brasil, a partir da experiência pessoal do cineasta…

</p>

</a>

<a href="ehumans.html" class="project-card">

<span class="status" data-text="status-desenvolvimento">Em Desenvolvimento</span>

<h3 data-text="ehumans-title">eHumans</h3>

<div class="production-info" data-text="ehumans-prod">

Coprodução: STORYLAB, Filmegraph, Mosaico Filmes, D2R Studios. Animação, Aventura, Kids & Family.

</div>

<p data-text="ehumans-synopsis">

No ano de 2075, Ayrá, uma gamer indígena, sonha em se tornar a primeira campeã mundial…

</p>

</a>

<a href="kuarahyteerehe.html" class="project-card">

<span class="status" data-text="status-desenvolvimento">Em Desenvolvimento</span>

<h3 data-text="kuarahyteehere-title">

KUARAHYTEEREHE: O REINADO DA MULHER-SOL

</h3>

<div class="production-info" data-text="kuarahyteehere-prod">

Produção: STORYLAB. Aventura, Ficção Histórica.

</div>

<p data-text="kuarahyteehere-synopsis">

No século XVIII, Tereza, uma rainha negra, lidera um quilombo no Vale do Guaporé…

</p>

</a>

<a href="mandu.html" class="project-card">

<span class="status" data-text="status-desenvolvimento">Em Desenvolvimento</span>

<h3 data-text="mandu-title">MANDU</h3>

<div class="production-info" data-text="mandu-prod">

Produção: Bananeira Filmes. Épico de Ação e Aventura.

</div>

<p data-text="mandu-synopsis">

No início do século XVIII, Mandu, uma criança indígena, cresce em harmonia com a natureza…

</p>

</a>

</div>

</section>

<section id="about">

<div class="about-content">

<p data-text="about-descr">

Produtora audiovisual fundada em 2011, a STORYLAB narra histórias que movem a vida e mudam o mundo…

</p>

<div class="about-highlights">

<span data-text="about-highlight1">

Longa <strong>QUASE SAMBA</strong> (2015) – premiado no Festival do Rio.

</span>

<span data-text="about-highlight2">

Curta <strong>ENSOLARADO</strong> – exibido em 50+ países e premiado em Berlim, Locarno, Guadalajara e Toulouse.

</span>

</div>

</div>

</section>

<footer>

<p>STORYLAB – <a href="mailto:info@storylab.cc">info@storylab.cc</a></p>

</footer>

</div>

<script>

const texts = {

pt: {

"page-title":"STORYLAB | Histórias mudam o mundo",

"status-producao":"Em Produção",

"status-desenvolvimento":"Em Desenvolvimento",

"autoficcao-title":"AUTOFICÇÃO",

"autoficcao-prod":"Produção: CATRUMANA DE CINEMA. Documentário.",

"autoficcao-synopsis":"Um mergulho na alma mestiça do Brasil, a partir da experiência pessoal do cineasta…",

"ehumans-title":"eHumans",

"ehumans-prod":"Coprodução: STORYLAB, Filmegraph, Mosaico Filmes, D2R Studios. Animação, Aventura, Kids & Family.",

"ehumans-synopsis":"No ano de 2075, Ayrá, uma gamer indígena, sonha em se tornar a primeira campeã mundial…",

"kuarahyteehere-title":"KUARAHYTEEREHE: O REINADO DA MULHER-SOL",

"kuarahyteehere-prod":"Produção: STORYLAB. Aventura, Ficção Histórica.",

"kuarahyteehere-synopsis":"No século XVIII, Tereza, uma rainha negra, lidera um quilombo no Vale do Guaporé…",

"mandu-title":"MANDU",

"mandu-prod":"Produção: Bananeira Filmes. Épico de Ação e Aventura.",

"mandu-synopsis":"No início do século XVIII, Mandu, uma criança indígena, cresce em harmonia com a natureza…",

"about-descr":"Produtora audiovisual fundada em 2011, a STORYLAB narra histórias que movem a vida e mudam o mundo…",

"about-highlight1":"Longa QUASE SAMBA (2015) – premiado no Festival do Rio.",

"about-highlight2":"Curta ENSOLARADO – exibido em 50+ países e premiado em Berlim, Locarno, Guadalajara e Toulouse."

},

/* en, es, fr seguem a mesma estrutura do index anterior */

};

function setLang(lang) {

document.documentElement.lang = lang;

document.querySelector('title[data-text]')

.textContent = texts[lang]?.["page-title"] || texts.pt["page-title"];

document.querySelectorAll('[data-text]').forEach(el => {

const key = el.getAttribute('data-text');

el.textContent = texts[lang]?.[key] || texts.pt[key] || el.textContent;

});

document.querySelectorAll('.lang-switcher button')

.forEach(btn => btn.classList.toggle('active', btn.dataset.lang===lang));

}

document.querySelectorAll('.lang-switcher button')

.forEach(btn => btn.addEventListener('click', ()=>setLang(btn.dataset.lang)));

setLang('pt');

</script>

</body>

</html>