*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–bg: #0c0b09;
–bg2: #111008;
–surface: #161410;
–surface2: #1e1b14;
–gold: #c9a84c;
–gold-lt: #e2c06a;
–gold-dim: rgba(201,168,76,.18);
–paper: #f0ead8;
–muted: rgba(240,234,216,.45);
–border: rgba(201,168,76,.2);
–border2: rgba(240,234,216,.08);
–serif: ‘Playfair Display’, Georgia, serif;
–sans: ‘DM Sans’, sans-serif;
–pad-x: clamp(1.5rem, 6vw, 5rem);
–container: min(1160px, 100% – 3rem);
–section-pad: clamp(4rem, 8vw, 8rem);
}
html { scroll-behavior: smooth; }
body { font-family: var(–sans); background: var(–bg); color: var(–paper); line-height: 1.7; overflow-x: hidden; }
/* ── UTILS ── */
.container { width: var(–container); margin-inline: auto; }
.section-label { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(–gold); margin-bottom:1rem; }
em { font-style:italic; color:var(–gold); }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.8rem; border-radius:3px; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:all .25s; cursor:pointer; border:none; }
.btn-gold { background:var(–gold); color:#0c0b09; }
.btn-gold:hover { background:var(–gold-lt); transform:translateY(-1px); }
.btn-ghost { background:transparent !important; color:var(–paper) !important; border:1px solid rgba(240,234,216,.25) !important; text-decoration:none !important; }
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active, a.btn-ghost:hover, a.btn-ghost:focus, a.btn-ghost:active, a.btn-ghost:visited { border-color:var(–gold) !important; color:var(–gold) !important; background:transparent !important; text-decoration:none !important; }
.btn-gold { background:var(–gold) !important; color:#0c0b09 !important; border-color:var(–gold) !important; text-decoration:none !important; }
.btn-gold:hover, a.btn-gold:hover { background:var(–gold-lt) !important; color:#0c0b09 !important; text-decoration:none !important; }
/* ── NAV (idêntico à home) ── */
nav#nav {
position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 101 !important;
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important;
padding: 1rem var(–pad-x) !important;
background: rgba(12,11,9,.88) !important; backdrop-filter: blur(20px) !important;
border-bottom: 1px solid var(–border2) !important; transition: box-shadow .3s !important;
box-sizing: border-box !important; margin: 0 !important; width: 100% !important;
}
nav#nav .nav-logo { font-family: var(–serif) !important; font-size: 1.2rem !important; font-weight: 700 !important; color: var(–paper) !important; text-decoration: none !important; flex-shrink: 0 !important; }
nav#nav .nav-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 2rem !important; list-style: none !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
nav#nav .nav-links a, nav#nav .nav-links a:link, nav#nav .nav-links a:visited { font-size:.78rem !important; font-weight:500 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(–muted) !important; text-decoration:none !important; transition:color .2s !important; display:inline-block !important; position:relative !important; }
nav#nav .nav-links a::after { content:””; position:absolute; bottom:-4px; left:0; right:0; height:1px; background:var(–gold); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
nav#nav .nav-links a:hover, nav#nav .nav-links a:focus, nav#nav .nav-links a.active { color:var(–gold) !important; text-decoration:none !important; }
nav#nav .nav-links a:hover::after, nav#nav .nav-links a.active::after { transform:scaleX(1); }
nav#nav .nav-links a:hover, nav#nav .nav-links a.active { color:var(–gold) !important; }
.nav-logo-img { height: 44px !important; width: auto !important; max-height: 44px !important; display: block !important; transition: opacity .2s !important; }
.nav-logo-img:hover { opacity: .85; }
.nav-search-wrap { position:relative; display:flex; align-items:center; gap:.5rem; }
.search-wrapper { position:relative; display:flex; align-items:center; }
.search-toggle { background:none; border:none; cursor:pointer; color:var(–muted); padding:6px; display:flex; align-items:center; justify-content:center; transition:color .2s; flex-shrink:0; }
.search-toggle:hover { color:var(–gold); }
.search-toggle svg { width:18px; height:18px; }
.search-bar { position:absolute; right:36px; top:50%; transform:translateY(-50%); width:0; overflow:hidden; transition:width .35s cubic-bezier(.4,0,.2,1), opacity .25s; opacity:0; pointer-events:none; }
.search-bar.open { width:260px; opacity:1; pointer-events:all; }
@media (max-width:768px) { .search-bar.open { width:180px; } }
.search-input { width:100%; padding:.45rem 1rem; background:var(–surface2); border:1px solid var(–border); border-radius:99px; color:var(–paper); font-family:var(–sans); font-size:.85rem; outline:none; transition:border-color .2s; }
.search-input::placeholder { color:var(–muted); }
.search-input:focus { border-color:var(–gold); }
.search-results { position:absolute; top:calc(100% + .8rem); right:0; width:320px; background:var(–surface2); border:1px solid var(–border); border-radius:12px; box-shadow:0 20px 48px rgba(0,0,0,.5); overflow:hidden; z-index:200; display:none; }
.search-results.show { display:block; }
.search-results-header { padding:.6rem 1rem; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(–muted); border-bottom:1px solid var(–border2); }
.search-result-item { display:flex; align-items:flex-start; gap:.8rem; padding:.85rem 1rem; text-decoration:none; transition:background .15s; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
.search-result-item:hover { background:rgba(201,168,76,.07); }
.search-result-item + .search-result-item { border-top:1px solid var(–border2); }
.result-icon { width:32px; height:32px; border-radius:8px; background:var(–gold-dim); border:1px solid var(–border); display:flex; align-items:center; justify-content:center; color:var(–gold); flex-shrink:0; }
.result-icon svg { width:15px; height:15px; }
.result-text strong { display:block; font-size:.85rem; font-weight:600; color:var(–paper); margin-bottom:.1rem; }
.result-text span { font-size:.75rem; color:var(–muted); line-height:1.4; }
.search-empty { padding:1.2rem 1rem; text-align:center; font-size:.85rem; color:var(–muted); }
.search-highlight { color:var(–gold); font-weight:700; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:var(–paper); border-radius:2px; transition:all .3s; }
.translate-btn { background:none; border:none; cursor:pointer; color:var(–muted); padding:4px; display:flex; align-items:center; justify-content:center; transition:opacity .2s; }
.translate-btn:hover { opacity:.8; }
.translate-menu { display:none; position:absolute; top:calc(100% + 10px); right:0; background:var(–surface); border:1px solid var(–border2); border-radius:8px; padding:.4rem 0; min-width:140px; z-index:200; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.translate-menu.open { display:block; }
.translate-menu a { display:block; padding:.5rem 1rem; font-size:.8rem; color:var(–muted); text-decoration:none; transition:color .2s; text-transform:none; letter-spacing:0; }
.translate-menu a:hover { color:var(–gold); }
.mobile-menu { display:none; position:fixed; top:52px; left:0; right:0; background:rgba(12,11,9,.97); backdrop-filter:blur(20px); z-index:100; border-bottom:1px solid var(–border2); padding:1.5rem var(–pad-x); }
.mobile-menu.open { display:block; }
.mobile-menu-links { display:flex; flex-direction:column; gap:1.2rem; }
.mobile-menu-links a { font-size:1.25rem; font-weight:500; color:var(–paper); text-decoration:none; }
.mobile-menu-links a:hover { color:var(–gold); }
@media (max-width:768px) { nav#nav .nav-links{display:none !important;} .hamburger{display:flex;} }
/* ── HERO SOBRE ── */
.sobre-hero {
min-height: 60vh;
display: flex;
align-items: flex-end;
padding: calc(var(–section-pad) + 5rem) var(–pad-x) 4rem;
position: relative;
overflow: hidden;
}
.sobre-hero-bg {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(201,168,76,.08) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 10% 80%, rgba(201,168,76,.05) 0%, transparent 60%);
}
.sobre-hero-inner { position:relative; z-index:1; width: var(–container); margin-inline:auto; }
.sobre-hero-tag { font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(–gold); margin-bottom:1.2rem; display:flex; align-items:center; gap:.8rem; }
.sobre-hero-tag span { display:block; width:24px; height:1px; background:var(–gold); }
.sobre-hero h1 { font-family:var(–serif) !important; font-size:clamp(2.8rem,7vw,5.5rem) !important; font-weight:900 !important; line-height:1.05 !important; margin-bottom:1.2rem !important; color:var(–paper) !important; }
.sobre-hero-sub { font-size:clamp(.9rem,1.5vw,1.05rem); color:var(–muted); max-width:520px; line-height:1.75; }
/* ── O OFÍCIO ── */
.oficio { padding: var(–section-pad) var(–pad-x); border-top:1px solid var(–border2); }
.oficio-inner { width: var(–container); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.oficio-left h2 { font-family:var(–serif) !important; font-size:clamp(1.8rem,3.5vw,2.8rem) !important; font-weight:700 !important; line-height:1.2 !important; margin-bottom:1.5rem !important; color:var(–paper) !important; }
.oficio-left p { font-size:.95rem; color:var(–muted); line-height:1.85; margin-bottom:1rem; }
.oficio-left p strong { color:var(–paper); }
.oficio-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.oficio-tag { font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(–gold); border:1px solid var(–border); padding:.3rem .75rem; border-radius:2px; }
.oficio-quote { background:var(–surface); border-left:3px solid var(–gold); border-radius:0 8px 8px 0; padding:2rem; font-family:var(–serif); font-size:1.15rem; font-style:italic; color:var(–paper); line-height:1.65; position:relative; }
.oficio-quote::before { content:'”‘; font-size:5rem; color:var(–gold-dim); position:absolute; top:-.5rem; left:1rem; font-family:var(–serif); line-height:1; }
.oficio-quote-author { font-family:var(–sans); font-size:.78rem; font-style:normal; color:var(–gold); letter-spacing:.1em; text-transform:uppercase; margin-top:1.2rem; display:block; }
/* ── FACETAS ── */
.facetas { padding: var(–section-pad) var(–pad-x); background:var(–bg2); }
.facetas-inner { width: var(–container); margin-inline:auto; }
.facetas-header { margin-bottom:3.5rem; }
.facetas-header h2 { font-family:var(–serif) !important; font-size:clamp(2rem,4vw,3.2rem) !important; font-weight:900 !important; line-height:1.1 !important; color:var(–paper) !important; }
.facetas-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; }
.faceta-card { background:var(–surface); border:1px solid var(–border2); border-radius:10px; padding:2.2rem; transition:border-color .25s, transform .25s; position:relative; overflow:hidden; }
.faceta-card:hover { border-color:var(–border); transform:translateY(-3px); }
.faceta-num { font-family:var(–serif); font-size:3.5rem; font-weight:900; color:var(–gold-dim); line-height:1; margin-bottom:1rem; }
.faceta-icon { width:36px; height:36px; color:var(–gold); margin-bottom:1.2rem; }
.faceta-icon svg { width:100%; height:100%; }
.faceta-title { font-family:var(–serif) !important; font-size:1.3rem !important; font-weight:700 !important; color:var(–paper) !important; margin-bottom:.8rem !important; }
.faceta-text { font-size:.88rem; color:var(–muted); line-height:1.8; }
/* ── LINHA DO TEMPO ── */
.timeline { padding: var(–section-pad) var(–pad-x); }
.timeline-inner { width: var(–container); margin-inline:auto; }
.timeline-header { margin-bottom:3.5rem; }
.timeline-header h2 { font-family:var(–serif) !important; font-size:clamp(2rem,4vw,3.2rem) !important; font-weight:900 !important; line-height:1.1 !important; color:var(–paper) !important; }
.timeline-header p { font-size:.95rem; color:var(–muted); max-width:520px; margin-top:1rem; line-height:1.75; }
.timeline-list { position:relative; padding-left:2rem; }
.timeline-list::before { content:”; position:absolute; left:0; top:.5rem; bottom:.5rem; width:1px; background:linear-gradient(to bottom, var(–gold) 0%, rgba(201,168,76,.1) 100%); }
.tl-item { position:relative; padding:0 0 3rem 2.5rem; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-2rem; top:.35rem; width:12px; height:12px; border-radius:50%; background:var(–gold); border:2px solid var(–bg); box-shadow:0 0 0 3px rgba(201,168,76,.25); transform:translateX(-50%); }
.tl-item.highlight .tl-dot { background:var(–gold-lt); box-shadow:0 0 0 4px rgba(201,168,76,.35); width:16px; height:16px; top:.2rem; }
.tl-year { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(–gold); margin-bottom:.4rem; }
.tl-item.highlight .tl-year { color:var(–gold-lt); font-size:.78rem; }
.tl-title { font-family:var(–serif) !important; font-size:1.25rem !important; font-weight:700 !important; color:var(–paper) !important; margin-bottom:.4rem !important; }
.tl-desc { font-size:.88rem; color:var(–muted); line-height:1.75; }
/* ── CTA FINAL ── */
.sobre-cta { padding: var(–section-pad) var(–pad-x); background:var(–bg2); border-top:1px solid var(–border2); text-align:center; }
.sobre-cta-inner { width: var(–container); margin-inline:auto; }
.sobre-cta h2 { font-family:var(–serif) !important; font-size:clamp(2rem,5vw,3.8rem) !important; font-weight:900 !important; line-height:1.1 !important; margin-bottom:1rem !important; color:var(–paper) !important; }
.sobre-cta p { font-size:.95rem; color:var(–muted); max-width:480px; margin:0 auto 2.5rem; line-height:1.75; }
.sobre-cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
/* ── FOTO REPÓRTER ── */
.oficio-photo {
width: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
margin-bottom: 2rem;
}
.oficio-photo img {
width: 100%;
height: 340px;
object-fit: cover;
object-position: center top;
display: block;
filter: brightness(.92);
transition: filter .4s;
}
.oficio-photo:hover img { filter: brightness(1); }
.oficio-photo-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(12,11,9,.9) 0%, transparent 100%);
padding: 1.5rem 1.2rem .8rem;
font-size: .72rem;
color: rgba(240,234,216,.55);
letter-spacing: .05em;
}
.oficio-photo-caption strong { color: var(–gold); }
/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
/* ── BACK TO TOP ── */
.back-top { position:fixed; bottom:2rem; right:2rem; width:42px; height:42px; background:var(–gold); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; opacity:0; pointer-events:none; transition:opacity .3s; z-index:99; }
.back-top.visible { opacity:1; pointer-events:all; }
.back-top svg { width:18px; height:18px; stroke:#0c0b09; }
/* ── RESPONSIVE ── */
@media (max-width:900px) {
.oficio-inner { grid-template-columns:1fr; gap:3rem; }
.facetas-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
.facetas-grid { grid-template-columns:1fr; }
.sobre-cta-btns { flex-direction:column; align-items:center; }
}
Início
Sobre Mim
Serviços
Atuação
Portfólio
Pelo Mundo
Contato
Entre a palavra,
o tempo e o código.
Um perfil sobre o ofício de contar histórias — da tela à sala de aula, da historiografia à linha do código.
Jornalismo
História
Tecnologia
Um perfil sobre entender o mundo.
É uma palavra que atravessa as três áreas em que atuei: trabalhar — narrar. Comecei como jornalista, tomando cada decisão editorial com a noção e a exigência da língua durante anos, formando-me para entender o trabalho e o mundo.
Na televisão sem ir tempos atrás, fui historiar que ficam longe. Foi essa inquietação que me fez buscar as próprias, as quais me trouxe ao longo de décadas, quais memórias inativas, quais silêncios, e o que isto nos conta sobre o presente.
A História, Avançar, o dia e o ponto de olhar a narrativa foge do padrão. Aprendi a descrição das narrativas digitais e o jornalismo, onde a notícia e a exigência, a linguagem nunca leva muito lento, e nunca será improvável. É uma das últimas áreas mais improvável.
Vivo no Espírito Santo, é o espaço que penso o Brasil. Acredito que territórios fora dos grandes centros oferecem perspectivas que o eixo Rio-São Paulo raramente apura. Aqui, a pergunta muda a história que se conta.
TV Tribuna · Cobertura na Polícia Federal · Espírito Santo
Jornalismo, história e código são três formas de fazer a mesma pergunta: o que está, de fato, acontecendo aqui?
— Geilson Ferreira
As facetas do trabalho.
I
O Jornalista
Quase 20 anos de televisão me ensinaram que a notícia é um pacto: com a fonte, com a audiência, com a verdade possível. Cada reportagem é uma decisão editorial — sobre o que mostrar, o que cortar, como nomear. Levo essa responsabilidade a sério.
II
O Historiador
Pós-graduado em História do Brasil, busco entender como as narrativas oficiais se constroem — e como podem ser desconstruídas. Memória, identidade e cultura capixaba são territórios que pesquiso com atenção e método.
III
O Tecnólogo
Em Ciência da Computação, foco em dados e automações. Construo ferramentas que apoiam apuração, organizam pesquisa e libertam tempo do operacional para o que importa: pensar, escrever, descobrir. Tecnologia como meio, nunca como fim.
Uma trajetória em movimento.
Não há linha reta. Há, sim, escolhas que vão se costurando umas às outras — quase sempre em diagonal, raramente em paralelo. Aqui está um mapa simplificado de como cheguei até aqui.
2006
Primeiros passos no jornalismo de TV
Início da carreira em redações de televisão no Espírito Santo. O começo de uma trajetória que atravessaria quase duas décadas.
2014
Graduação em História
Aprofundamento na pesquisa e na crítica de fontes. A História passou a informar o olhar jornalístico — e vice-versa.
2019
Pós-graduação em História do Brasil
Foco em memória, identidade e narrativas culturais. Pesquisa sobre como o passado é contado — e por quem.
2023
Início em Ciência da Computação
Encontro com dados, automações e desenvolvimento. A tecnologia como extensão natural do trabalho jornalístico e histórico.
Hoje
A síntese das três linguagens
Projetos que cruzam jornalismo, história e tecnologia. Editor de telejornalismo na Rede Tribuna, com foco em narrativas que fazem diferença.
Toda boa história
começa com uma
boa conversa.
Se algo aqui ressoou com você — um projeto, uma pesquisa, uma ideia em comum — escreva. As melhores colaborações nascem assim.
Entrar em contato →
Ver o portfólio
Espírito Santo · Brasil
/* ── FOOTER ── */
footer { background: #0a0907; border-top: 1px solid rgba(240,234,216,.08); margin-top: 0; }
.footer-wrap { width: min(1160px, 100% – 3rem); margin-inline: auto; padding: 3rem 0 1.5rem; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(240,234,216,.08); }
.footer-brand p { font-size: .82rem; color: rgba(240,234,216,.45); margin-top: .6rem; line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c9a84c; margin-bottom: 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col ul li a { font-size: .82rem; color: rgba(240,234,216,.45); text-decoration: none; transition: color .2s; }
.footer-col ul li a:hover { color: #c9a84c; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: .75rem; color: rgba(240,234,216,.3); }
.footer-socials { display: flex; gap: .2rem; align-items: center; }
.f-social { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: rgba(240,234,216,.45); transition: color .2s, background .2s; text-decoration: none; }
.f-social:hover { color: #c9a84c; background: rgba(201,168,76,.1); }
.nav-logo-img–footer { height: 40px !important; max-height: 40px !important; width: auto !important; display: block !important; }
@media (max-width: 700px) {
.footer-top { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}