Martinaverse

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { –orange: #F4873A; –teal: #2BBFB0; –red: #E63946; –yellow: #FFD166; –ink: #1a1a2e; –cream: #FFF8EF; –pb: 3px solid #1a1a2e; } body { font-family: ‘Nunito’, sans-serif; background: var(–cream); color: var(–ink); overflow-x: hidden; } /* LANG TOGGLE */ .lang-bar { background: var(–ink); display: flex; justify-content: flex-end; padding: 8px 20px; gap: 8px; position: sticky; top: 0; z-index: 100; } .lang-btn { background: none; border: 2px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); font-family: ‘Bangers’, cursive; font-size: 0.95rem; letter-spacing: 2px; padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s; } .lang-btn.active { border-color: var(–orange); color: var(–orange); } .lang-btn:hover { border-color: var(–yellow); color: var(–yellow); } /* Hide/show by lang */ [data-lang=”en”] .es { display: none; } [data-lang=”es”] .en { display: none; } /* HERO */ .hero { background: linear-gradient(135deg,#FFD166 0%,#F4873A 50%,#E63946 100%); border-bottom: 4px solid var(–ink); position: relative; overflow: hidden; padding: 60px 40px 80px; display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap; } .hero::before { content:”; position:absolute; inset:0; background-image: repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,0.06) 30px,rgba(255,255,255,0.06) 32px); } .hero-text { position:relative; z-index:2; max-width:520px; } .hero-eyebrow { font-family:’Bangers’,cursive; font-size:1.1rem; letter-spacing:4px; color:rgba(255,255,255,0.85); text-transform:uppercase; margin-bottom:10px; } .hero-title { font-family:’Bangers’,cursive; font-size:clamp(3.5rem,8vw,6.5rem); line-height:0.95; margin-bottom:20px; } .title-martina { color:#fff; text-shadow:4px 4px 0 var(–ink),-2px -2px 0 var(–ink),2px -2px 0 var(–ink),-2px 2px 0 var(–ink); } .title-verse { color:var(–ink); text-shadow:3px 3px 0 var(–orange); } .hero-desc { font-size:1.15rem; font-weight:700; color:var(–ink); background:rgba(255,255,255,0.75); border:3px solid var(–ink); border-radius:6px; padding:18px 22px; line-height:1.6; max-width:460px; } .hero-image { position:relative; z-index:2; flex-shrink:0; } .hero-image img { width:220px; filter:drop-shadow(6px 8px 0 rgba(0,0,0,0.35)); transform:rotate(3deg); } /* SHARED */ .section { max-width:1100px; margin:0 auto; padding:70px 30px; } .section-label { font-family:’Bangers’,cursive; font-size:0.95rem; letter-spacing:5px; color:var(–orange); text-transform:uppercase; margin-bottom:8px; } .section-title { font-family:’Bangers’,cursive; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; color:var(–ink); margin-bottom:30px; } .section-title::after { content:”; display:block; width:70px; height:5px; background:var(–orange); margin-top:12px; border-radius:3px; } /* BOOK PANEL */ .book-panel { background:white; border:var(–pb); border-radius:8px; box-shadow:6px 6px 0 var(–ink); display:grid; grid-template-columns:auto 1fr; overflow:hidden; } .book-cover-wrap { background:var(–yellow); border-right:var(–pb); padding:30px 25px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; } .book-cover-wrap img { width:260px; border:3px solid var(–ink); box-shadow:4px 4px 0 var(–ink); border-radius:4px; } .book-badge { background:var(–red); color:white; font-family:’Bangers’,cursive; font-size:1rem; letter-spacing:2px; padding:6px 16px; border:2px solid var(–ink); border-radius:30px; transform:rotate(-2deg); display:inline-block; } .book-content { padding:40px; display:flex; flex-direction:column; justify-content:center; gap:18px; } .book-content p { font-size:1.05rem; line-height:1.75; color:#333; } .stat-row { display:flex; gap:20px; flex-wrap:wrap; margin:8px 0; } .stat-chip { background:var(–teal); color:white; font-weight:800; font-size:0.9rem; padding:8px 16px; border:2px solid var(–ink); border-radius:30px; box-shadow:3px 3px 0 var(–ink); } .cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(–orange); color:white; font-family:’Bangers’,cursive; font-size:1.3rem; letter-spacing:2px; padding:14px 28px; border:3px solid var(–ink); border-radius:6px; box-shadow:4px 4px 0 var(–ink); text-decoration:none; transition:transform 0.15s,box-shadow 0.15s; align-self:flex-start; } .cta-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(–ink); color:white; text-decoration:none; } .cta-btn.secondary { background:white; color:var(–ink); } .btn-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } /* GALLERY */ .gallery-outer { margin-top:44px; border:var(–pb); border-radius:8px; overflow:hidden; box-shadow:6px 6px 0 var(–ink); background:var(–ink); } .gallery-header { background:var(–ink); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; } .gallery-header span { font-family:’Bangers’,cursive; font-size:1.1rem; letter-spacing:3px; color:var(–yellow); } .gallery-nav { display:flex; gap:10px; } .gnav-btn { background:none; border:2px solid rgba(255,255,255,0.3); color:white; width:36px; height:36px; border-radius:4px; font-size:1.1rem; cursor:pointer; transition:background 0.15s; display:flex; align-items:center; justify-content:center; } .gnav-btn:hover { background:var(–orange); border-color:var(–orange); } .gallery-track-wrap { overflow:hidden; } .gallery-track { display:flex; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); } .gslide { flex:0 0 100%; } .gslide img { width:100%; display:block; max-height:480px; object-fit:cover; object-position:center top; } .gallery-dots { display:flex; gap:8px; justify-content:center; padding:14px; background:var(–ink); } .gdot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.25); border:none; cursor:pointer; transition:background 0.2s; padding:0; } .gdot.active { background:var(–orange); } /* DIVIDER */ .divider { height:8px; background:repeating-linear-gradient(90deg,var(–ink) 0,var(–ink) 18px,var(–orange) 18px,var(–orange) 36px,var(–ink) 36px,var(–ink) 54px,var(–teal) 54px,var(–teal) 72px); } /* MAKING OF */ .making-bg { background:#F0F4FF; border-top:4px solid var(–ink); border-bottom:4px solid var(–ink); } .making-bg .section-title { color:var(–ink); } .making-lead { font-size:1.05rem; line-height:1.75; color:#444; max-width:700px; margin-bottom:40px; } .making-hero { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; margin-bottom:40px; } .making-photo { border:var(–pb); border-radius:8px; box-shadow:6px 6px 0 var(–ink); overflow:hidden; } .making-photo img { width:100%; display:block; } .making-photo-cap { background:var(–ink); color:rgba(255,255,255,0.7); font-size:0.82rem; font-weight:700; padding:10px 16px; } .making-quote { background:white; border:var(–pb); border-radius:8px; box-shadow:6px 6px 0 var(–ink); padding:30px; display:flex; flex-direction:column; gap:14px; } .making-quote p { font-size:1rem; line-height:1.75; color:#444; } .making-quote .q-label { font-family:’Bangers’,cursive; font-size:0.9rem; letter-spacing:3px; color:var(–teal); } .proc-scroll-wrap { overflow-x:auto; padding-bottom:8px; } .proc-scroll { display:flex; gap:20px; padding:4px 4px 8px; } .proc-item { flex:0 0 280px; border:var(–pb); border-radius:8px; box-shadow:4px 4px 0 var(–ink); overflow:hidden; background:white; } .proc-item img { width:100%; display:block; height:200px; object-fit:cover; object-position:top; } .proc-cap { background:white; padding:10px 14px; font-size:0.82rem; font-weight:700; color:#444; border-top:2px solid #eee; } /* SHORTS */ .shorts-bg { background:var(–ink); } .shorts-bg .section-title { color:var(–yellow); } .shorts-bg .section-label { color:var(–teal); } .shorts-intro { color:rgba(255,255,255,0.85); font-size:1.05rem; line-height:1.75; max-width:680px; margin-bottom:40px; } .shorts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-bottom:40px; } .short-card { background:white; border:3px solid rgba(255,255,255,0.3); border-radius:8px; overflow:hidden; transition:transform 0.15s,box-shadow 0.15s; box-shadow:4px 4px 0 rgba(255,255,255,0.15); } .short-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(–orange); border-color:var(–orange); } .short-card-thumb { padding:28px 20px 20px; text-align:center; border-bottom:3px solid var(–ink); } .ep-num { font-family:’Bangers’,cursive; font-size:2.8rem; color:white; text-shadow:2px 2px 0 var(–ink); line-height:1; } .ep-icon { font-size:2rem; margin-top:6px; display:block; } .short-card-body { padding:14px 16px; background:white; } .short-card-body h4 { font-family:’Bangers’,cursive; font-size:1.2rem; letter-spacing:1px; color:var(–ink); margin-bottom:4px; } .short-card-body .en-desc,.short-card-body .es-desc { font-size:0.82rem; color:#666; line-height:1.4; } .c1{background:#E63946;} .c2{background:#2BBFB0;} .c3{background:#F4873A;} .c4{background:#8338EC;} .c5{background:#06D6A0;} .c6{background:#118AB2;} .c7{background:#FFD166;} .c8{background:#EF476F;} .shorts-character { display:flex; align-items:flex-end; gap:30px; margin-top:20px; } .shorts-character img { width:160px; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } .shorts-note { background:rgba(255,255,255,0.08); border-left:4px solid var(–teal); padding:16px 20px; border-radius:0 6px 6px 0; color:rgba(255,255,255,0.8); font-size:0.95rem; line-height:1.6; max-width:500px; align-self:center; } /* NEW BOOKS */ .new-books-bg { background:#FFF0DC; border-top:4px solid var(–ink); border-bottom:4px solid var(–ink); } .books-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; } .new-book-card { background:white; border:var(–pb); border-radius:8px; box-shadow:6px 6px 0 var(–ink); overflow:hidden; display:flex; flex-direction:column; } .new-book-header { padding:24px 28px 18px; border-bottom:var(–pb); } .new-book-header.h1 { background:var(–orange); } .new-book-header.h2 { background:#6B7280; } .new-book-header h3 { font-family:’Bangers’,cursive; font-size:1.6rem; letter-spacing:1px; color:white; text-shadow:2px 2px 0 var(–ink); line-height:1.2; } .new-book-header .publisher { font-size:0.8rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-top:4px; } .new-book-body { padding:24px 28px; flex:1; font-size:0.98rem; line-height:1.7; color:#444; } .status-badge { display:inline-block; font-family:’Bangers’,cursive; font-size:1rem; letter-spacing:2px; padding:6px 16px; border:2px solid var(–ink); border-radius:4px; margin-top:14px; } .status-badge.active { background:var(–yellow); color:var(–ink); } .status-badge.early { background:#e5e7eb; color:#6B7280; } /* EVENTS */ .events-panel { background:white; border:var(–pb); border-radius:8px; box-shadow:6px 6px 0 var(–ink); overflow:hidden; } .events-header { background:var(–red); padding:20px 30px; border-bottom:var(–pb); } .events-header h3 { font-family:’Bangers’,cursive; font-size:1.8rem; color:white; text-shadow:2px 2px 0 var(–ink); } .events-body { padding:30px; } .event-item { display:flex; gap:20px; padding:18px 0; border-bottom:2px dashed #e0e0e0; align-items:flex-start; } .event-item:last-child { border-bottom:none; } .event-icon { font-size:1.8rem; flex-shrink:0; margin-top:2px; } .event-text h4 { font-weight:800; font-size:1.05rem; color:var(–ink); margin-bottom:4px; } .event-text p { font-size:0.92rem; color:#666; line-height:1.6; } /* FOOTER */ .martinaverse-footer { background:var(–ink); color:rgba(255,255,255,0.6); text-align:center; padding:40px 30px; font-size:0.88rem; line-height:1.8; } .martinaverse-footer a { color:var(–yellow); text-decoration:none; } .martinaverse-footer .footer-title { font-family:’Bangers’,cursive; font-size:2rem; color:white; letter-spacing:3px; margin-bottom:10px; } @media(max-width:720px){ .hero { padding:50px 24px 60px; gap:30px; } .book-panel,.making-hero,.books-grid { grid-template-columns:1fr; } .book-cover-wrap { border-right:none; border-bottom:var(–pb); } .book-cover-wrap img { width:200px; } .section { padding:50px 20px; } .proc-item { flex:0 0 220px; } }
Welcome to the Bienvenidos al

MARTINAVERSE

Meet Martina — a stubborn, brilliant, mildly tonta Panamanian girl who builds a time machine to explore the extraordinary science of her homeland. A graphic novel, animated shorts, live readings, and new books. This is her world. Conoce a Martina — una niña panameña terca, brillante y un poco tonta, que construye una máquina del tiempo para explorar la extraordinaria ciencia de su tierra. Una novela gráfica, cortometrajes animados, lecturas en vivo y nuevos libros. Este es su mundo.

The Original Graphic NovelLa Novela Gráfica Original

FREE TO READLECTURA LIBRE

Martina and the Bridge of Time is the story of a young Panamanian girl who builds a makeshift time machine and uses it to travel through her homeland’s extraordinary geological, biological and human history. Written by paleobiologist Aaron O’Dea and illustrated by Panamanian artist Ian Cooke-Tapia, the book was born from a simple question: what if science could be as gripping as any adventure story?

Martina y el Puente del Tiempo es la historia de una joven panameña que construye una máquina del tiempo improvisada para viajar por la extraordinaria historia geológica, biológica y humana de su tierra. Escrita por el paleobiólogo Aaron O’Dea e ilustrada por el artista panameño Ian Cooke-Tapia, el libro nació de una pregunta sencilla: ¿y si la ciencia pudiera ser tan apasionante como cualquier aventura?

Since its first printing, the book has been given away freely — not through bookshops or postal services, but carried by bus to classrooms in mountains and along coasts, distributed through a network of dedicated teachers across Panama, Costa Rica, Colombia and Cuba.

Desde su primera edición, el libro se ha distribuido de forma gratuita — no a través de librerías ni servicios postales, sino llevado en autobús a salones de clase en montañas y costas, a través de una red de maestros dedicados en Panamá, Costa Rica, Colombia y Cuba.

7,000+ copies distributed 3 print runs English & Spanish +7.000 ejemplares distribuidos 3 ediciones Inglés y Español

Making the BookHaciendo el Libro

The book grew from a conversation between a scientist with stories to tell and an artist who could bring them to life. Aaron O’Dea provided the science — deep time, ancient seas, Panama’s geological improbability — and Ian Cooke-Tapia did the rest: designing a world, a girl, and a machine that could contain all of it. The time machine itself is built from icons of Panamanian life: a Diablo Rojo bus, a panga engine, a Bucyrus crane from the Canal. Nothing in Martina’s world is invented that isn’t already real.

El libro creció de una conversación entre un científico con historias que contar y un artista capaz de darles vida. Aaron O’Dea aportó la ciencia — el tiempo profundo, los mares antiguos, la improbabilidad geológica de Panamá — y Ian Cooke-Tapia hizo el resto: diseñando un mundo, una niña y una máquina que pudiera contenerlo todo. La máquina del tiempo está construida con iconos de la vida panameña: un Diablo Rojo, el motor de una panga, una grúa Bucyrus del Canal. Nada en el mundo de Martina está inventado que no sea ya real.

Ian Cooke-Tapia at work on the original bookIan Cooke-Tapia trabajando en el libro original
THE PROCESS
EL PROCESO

Science graphic novels live or die on whether the world feels real. Martina’s time machine had to be Panamanian to its bones — assembled from a panga outboard, a Diablo Rojo grille, a Bucyrus Canal crane engine. Every detail was a deliberate argument that Panama itself is the adventure.

Las novelas gráficas científicas dependen de si el mundo se siente real. La máquina del tiempo de Martina tenía que ser panameña hasta los huesos — ensamblada con un motor de panga, una parrilla de Diablo Rojo, una grúa Bucyrus del Canal. Cada detalle era un argumento deliberado de que Panamá en sí mismo es la aventura.

From first sketches to final print took over two years of back-and-forth — science notes becoming storyboards, storyboards becoming panel roughs, roughs becoming the vivid coloured pages you see today.

Desde los primeros bocetos hasta la impresión final pasaron más de dos años de ida y vuelta — notas científicas convirtiéndose en storyboards, storyboards en bocetos de paneles, y bocetos en las vívidas páginas a color que ves hoy.

Ian Cooke-Tapia at work on the original book
Character designs: the supporting cast
Character designs: the supporting cast
Designing the time machine
Designing the time machine
The time machine — built from Panamanian icons
The time machine — built from Panamanian icons
Early character development
Early character development
Storyboard draft
Storyboard draft
Storyboard draft
Storyboard draft

Martina Shorts

The Martina Shorts project extends Martina’s world into eight one-minute animated videos for social media. Each short features the research of a STRI scientist, told through Martina’s adventures — combining character-driven storytelling with rigorous science. Produced in English and Spanish, with professional voiceover, distributed across YouTube Shorts, Instagram and Facebook.

El proyecto Martina Shorts amplía el mundo de Martina con ocho videos animados de un minuto para redes sociales. Cada episodio presenta la investigación de un científico del STRI, narrada a través de las aventuras de Martina — combinando narrativa de personajes con ciencia rigurosa. Producido en inglés y español, con locución profesional, distribuido en YouTube Shorts, Instagram y Facebook.

EP 01
🦈

Megalodon

The largest shark that ever lived — and what its teeth tell us about Panama’s ancient seas

El tiburón más grande que jamás existió — y qué nos dicen sus dientes sobre los mares antiguos de Panamá

EP 02
🦇

Vampire BatsMurciélagos Vampiro

The strange and misunderstood lives of Panama’s most notorious night creatures

La extraña y malentendida vida de las criaturas nocturnas más célebres de Panamá

EP 03
🪸

Coral BabiesBebés de Coral

How corals reproduce — and why reef recovery depends on getting this exactly right

Cómo se reproducen los corales — y por qué la recuperación del arrecife depende de hacerlo bien

EP 04
🐝

BeesAbejas

Panama’s extraordinary diversity of bees and their role in keeping the forest alive

La extraordinaria diversidad de abejas en Panamá y su papel en mantener vivo el bosque

EP 05
🐟

Pepita the Parrotfish

Meet the fish that makes the sand — and why losing parrotfish changes everything

El pez que hace la arena — y por qué perder los peces loro lo cambia todo

EP 06
🐆

Jaguar

Following Panama’s great cat through forest and science with Ricardo

Siguiendo al gran felino de Panamá por el bosque y la ciencia con Ricardo

EP 07
🦪

Las Perlas

The history of pearl fishing in the Pearl Islands — a story of sea, trade and time

La historia de la pesca de perlas en las Islas de las Perlas — una historia de mar, comercio y tiempo

EP 08
🎣

The MarlinEl Marlín

Ocean giants, ocean mysteries — what a single fish can tell you about an entire sea

Gigantes del océano, misterios del océano — lo que un solo pez puede decirte sobre todo un mar

Coming September 2026. Supported by the Smithsonian Women’s Committee and produced with Cooked Illustrations. Each episode pairs Martina’s storytelling with the voice of a real STRI scientist. Videos are bilingual — English and Spanish — and freely available across social media and YouTube. Disponibles en septiembre de 2026. Con el apoyo del Comité de Mujeres del Smithsonian y producido con Cooked Illustrations. Cada episodio combina la narración de Martina con la voz de un científico real del STRI. Los videos son bilingües — inglés y español — y están disponibles gratuitamente en redes sociales y YouTube.

New BooksNuevos Libros

Martina’s world is expanding. Lee & Low Books — one of the world’s leading independent publishers of children’s literature — has signed two new full-length hardbound Martina volumes for global distribution, released simultaneously in English and Spanish. El mundo de Martina se expande. Lee & Low Books — una de las editoriales independientes de literatura infantil más importantes del mundo — ha firmado dos nuevos volúmenes completos de Martina en tapa dura para distribución global, publicados simultáneamente en inglés y español.

Martina and the
Bridge of Time
Martina y el
Puente del Tiempo

Lee & Low Books · Book 1Libro 1
Martina’s original adventure — reworked and expanded as a full hardbound middle-grade graphic novel for global readers. The story of Panama’s extraordinary geological past, told through the eyes of one brilliant, relentless girl and her time machine. La aventura original de Martina — reelaborada y ampliada como una novela gráfica completa en tapa dura para lectores de todo el mundo. La historia del extraordinario pasado geológico de Panamá, contada a través de los ojos de una niña brillante e incansable y su máquina del tiempo.
✏️ Being inked right nowEn proceso de entintado ahora mismo

Martina Faces
Climate Change
Martina Frente al
Cambio Climático

Lee & Low Books · Book 2Libro 2
Martina turns her time machine toward the future — and confronts what is happening to the reefs, forests and coasts of her beloved Panama. A science adventure story rooted in real research, for readers ready to think hard about the world they’re inheriting. Martina dirige su máquina del tiempo hacia el futuro — y se enfrenta a lo que le está pasando a los arrecifes, bosques y costas de su querida Panamá. Una historia de aventura científica basada en investigación real, para lectores listos para pensar en serio sobre el mundo que heredarán.
🌱 Early developmentEn desarrollo temprano

Readings & EventsLecturas y Eventos

Martina Goes to SchoolMartina Va a la Escuela

📚

School ReadingsLecturas Escolares

Martina has visited classrooms across Panama — from Bocas del Toro to the Azuero Peninsula — with live readings, Q&A sessions with scientists, and take-home copies of the book.

Martina ha visitado salones de clase en todo Panamá — desde Bocas del Toro hasta la Península de Azuero — con lecturas en vivo, sesiones de preguntas con científicos y ejemplares del libro para llevar a casa.

🏛️

ExhibitionsExposiciones

Martina has appeared in exhibitions at the Biomuseo and science fairs in Panama City, with a life-size Martina standee that has become a favourite photo spot for visitors young and old.

Martina ha aparecido en exposiciones en el Biomuseo y ferias de ciencia en Ciudad de Panamá, con un cartel de Martina a tamaño real que se ha convertido en el lugar favorito para fotos de visitantes de todas las edades.

🌎

International Science FestivalsFestivales Internacionales de Ciencia

The book has been presented at international events including the Dubai Book Fair and science communication conferences in the Americas.

El libro ha sido presentado en eventos internacionales como la Feria del Libro de Dubái y conferencias de comunicación científica en las Américas.

📧

Bring Martina to YouTrae a Martina a Tu Comunidad

Interested in hosting a reading, an exhibition, or a Martina Shorts screening? Get in touch with the lab.

¿Te interesa organizar una lectura, una exposición o una proyección de Martina Shorts? Ponte en contacto con el laboratorio.

function setLang(l) { document.documentElement.dataset.lang = l; document.getElementById(‘btn-en’).classList.toggle(‘active’, l===’en’); document.getElementById(‘btn-es’).classList.toggle(‘active’, l===’es’); } // Gallery (function() { const track = document.getElementById(‘gtrack’); const dots = document.querySelectorAll(‘.gdot’); const total = 5; let cur = 0; function go(n) { cur = (n + total) % total; track.style.transform = ‘translateX(-‘ + (cur*100) + ‘%)’; dots.forEach((d,i) => d.classList.toggle(‘active’, i===cur)); } document.getElementById(‘gnext’).addEventListener(‘click’, () => go(cur+1)); document.getElementById(‘gprev’).addEventListener(‘click’, () => go(cur-1)); dots.forEach(d => d.addEventListener(‘click’, () => go(+d.dataset.i))); setInterval(() => go(cur+1), 5000); })(); function setLang(l) { document.documentElement.dataset.lang = l; document.getElementById(‘btn-en’).classList.toggle(‘active’, l===’en’); document.getElementById(‘btn-es’).classList.toggle(‘active’, l===’es’); } // Gallery (function() { const track = document.getElementById(‘gtrack’); const dots = document.querySelectorAll(‘.gdot’); const total = 5; let cur = 0; function go(n) { cur = (n + total) % total; track.style.transform = ‘translateX(-‘ + (cur*100) + ‘%)’; dots.forEach((d,i) => d.classList.toggle(‘active’, i===cur)); } document.getElementById(‘gnext’).addEventListener(‘click’, () => go(cur+1)); document.getElementById(‘gprev’).addEventListener(‘click’, () => go(cur-1)); dots.forEach(d => d.addEventListener(‘click’, () => go(+d.dataset.i))); setInterval(() => go(cur+1), 5000); })();