*, *::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(5rem, 10vw, 9rem);
}
html { scroll-behavior: smooth; }
body { font-family: var(–sans); background: var(–bg); color: var(–paper); line-height: 1.65; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(–bg2); }
::-webkit-scrollbar-thumb { background: var(–gold); border-radius: 99px; }
/* LOGO IMAGE */
.nav-logo-img {
height: 44px !important;
width: auto !important;
max-height: 44px !important;
display: block !important;
filter: drop-shadow(0 0 8px rgba(201,168,76,.15)) !important;
transition: opacity .2s !important;
}
.nav-logo-img:hover { opacity: .85; }
/* ── SEARCH ── */
.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); }
/* Results dropdown */
.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; }
/* NAV */
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.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,.5); }
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-logo em { font-style: italic; color: var(–gold); }
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 {
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; position: relative !important;
display: inline-block !important;
}
.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-links a:hover { color: var(–gold); }
.nav-links a:hover::after { transform: scaleX(1); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(–paper); border-radius:2px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
display:none; position:fixed; top:52px; left:0; right:0; bottom:0;
background:var(–bg); z-index:98;
flex-direction:column; align-items:center; justify-content:flex-start;
gap:0; overflow-y:auto;
padding-top:2rem; padding-bottom:2rem;
}
.mobile-menu.open { display:flex; }
.mobile-menu-links {
display:flex; flex-direction:column; align-items:stretch;
width:100%; max-width:320px;
}
.mobile-menu a {
font-family:var(–serif); font-size:1.25rem; font-weight:700;
color:var(–paper); text-decoration:none;
padding:.65rem 0; text-align:center;
border-bottom:1px solid var(–border2);
transition:color .2s, letter-spacing .2s;
display:block;
}
.mobile-menu a:first-child { border-top:1px solid var(–border2); }
.mobile-menu a:hover { color:var(–gold); letter-spacing:.04em; }
.mobile-menu-tag {
margin-top:2rem; font-size:.68rem; letter-spacing:.2em;
text-transform:uppercase; color:rgba(201,168,76,.3);
text-align:center;
}
@media (max-width:768px) { nav#nav .nav-links{display:none !important;} .hamburger{display:flex;} }
/* HERO */
.hero {
min-height: 100svh; display:grid; grid-template-columns:1fr 1fr;
align-items:center; gap:3rem; padding:8rem var(–pad-x) 5rem;
position:relative; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 55% 70% at 72% 40%, rgba(201,168,76,.09) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at 5% 85%, rgba(201,168,76,.05) 0%, transparent 55%); }
.hero-content { position:relative; z-index:1; }
.hero-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(–gold); font-weight:600; margin-bottom:1.5rem; }
.hero-eyebrow span { display:block; width:30px; height:1px; background:var(–gold); }
h1 { font-family:var(–serif); font-size:clamp(3.2rem,6vw,5.8rem); line-height:1.0; font-weight:900; letter-spacing:-.03em; color:var(–paper); margin-bottom:1.6rem; }
h1 em { font-style:italic; color:var(–gold); }
.hero-desc { font-size:1rem; color:var(–muted); max-width:430px; margin-bottom:1.4rem; line-height:1.75; }
.hero-desc strong { color:var(–paper); font-weight:600; }
.hero-social { display:flex; gap:.6rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.social-pill {
display:inline-flex; align-items:center; gap:.45rem;
padding:.35rem .9rem; border-radius:99px; border:1px solid var(–border2);
color:var(–muted); font-size:.75rem; font-weight:500; text-decoration:none; transition:all .22s;
}
.social-pill:hover { border-color:var(–gold); color:var(–gold); }
.social-pill svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }
.cta-group { display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:600px) { .cta-group { flex-direction:row !important; flex-wrap:nowrap !important; } .cta-group .btn { flex:1; text-align:center; justify-content:center; padding:.75rem .8rem; font-size:.78rem; } }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.8rem; border-radius:4px; font-family:var(–sans); font-size:.85rem; font-weight:600; letter-spacing:.04em; text-decoration:none; transition:all .25s; cursor:pointer; border:1.5px solid transparent; }
.btn-gold { background:var(–gold); color:var(–bg); border-color:var(–gold); }
.btn-gold:hover { background:var(–gold-lt); border-color:var(–gold-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(201,168,76,.3); }
.btn-ghost { background:transparent !important; color:var(–paper) !important; border-color:var(–border2) !important; }
.btn-ghost:hover { background:transparent !important; color:var(–paper) !important; border-color:rgba(240,234,216,.4) !important; transform:translateY(-2px) !important; }
.hero-visual { position:relative; z-index:1; display:flex; justify-content:center; }
.photo-frame {
width:clamp(260px,34vw,400px); aspect-ratio:3/4;
border-radius:14px 160px 14px 14px; overflow:hidden; position:relative;
box-shadow:0 40px 80px rgba(0,0,0,.65), 0 0 0 1px var(–border);
}
.photo-frame::after { content:”; position:absolute; inset:0; background:linear-gradient(160deg,rgba(201,168,76,.08) 0%,rgba(0,0,0,.4) 100%); }
.photo-placeholder { width:100%; height:100%; background:linear-gradient(160deg,#1e1a10 0%,#0a0906 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; }
.photo-placeholder-icon { font-size:6rem; opacity:.18; }
.photo-placeholder-text { font-family:var(–serif); font-size:1.4rem; font-weight:700; color:rgba(201,168,76,.3); letter-spacing:.1em; }
.photo-accent { position:absolute; top:-1.5rem; right:-1.5rem; width:80px; height:80px; border-top:2px solid var(–gold); border-right:2px solid var(–gold); border-radius:0 14px 0 0; opacity:.4; }
@media (max-width:900px) {
.hero { grid-template-columns:1fr; text-align:center; padding-top:7rem; }
.hero-visual { order:-1; }
.hero-content { display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow { justify-content:center; }
.hero-desc { text-align:center; }
.hero-social { justify-content:center; }
}
/* SECTION COMMONS */
section { padding:var(–section-pad) 0; }
.container { width:var(–container); margin:0 auto; }
.section-label { display:flex; align-items:center; gap:.6rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(–gold); font-weight:700; margin-bottom:.9rem; }
.section-label::after { content:”; width:40px; height:1px; background:var(–border); }
h2 { font-family:var(–serif); font-size:clamp(2.1rem,4.5vw,3.4rem); line-height:1.1; font-weight:900; letter-spacing:-.025em; color:var(–paper); margin-bottom:1rem; }
h2 em { font-style:italic; color:var(–gold); }
.section-sub { color:var(–muted); font-size:.97rem; max-width:500px; margin-bottom:3.5rem; }
/* NARRATIVE BANNER */
.narrative { background:var(–surface); border-top:1px solid var(–border2); border-bottom:1px solid var(–border2); padding:5rem var(–pad-x); }
.narrative-inner { max-width:var(–container); margin:0 auto; }
.narrative h2 { max-width:700px; font-size:clamp(2rem,4.5vw,3rem); }
.narrative p { color:var(–muted); max-width:620px; font-size:1rem; margin-top:1.2rem; line-height:1.8; }
.narrative p strong { color:var(–paper); }
/* ABOUT */
.about { background:var(–bg2); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-text p { color:var(–muted); margin-bottom:1.25rem; font-size:1rem; }
.about-text p strong { color:var(–paper); }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.stat { background:var(–surface2); border:1px solid var(–border2); border-radius:10px; padding:1.3rem; }
.stat-num { font-family:var(–serif); font-size:2.2rem; font-weight:900; color:var(–gold); line-height:1; }
.stat-label { font-size:.75rem; color:var(–muted); margin-top:.3rem; }
.about-visual { border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:var(–surface); border:1px solid var(–border2); position:relative; display:block; font-size:7rem; color:rgba(201,168,76,.1); }
.about-visual img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:60% center !important; display:block !important; }
@media (max-width:768px) { .about-grid{grid-template-columns:1fr;} .about-visual{display:none;} }
/* SERVICES */
.services { background:var(–bg); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; }
.service-card { background:var(–surface); border:1px solid var(–border2); border-radius:12px; padding:2rem; transition:all .3s; position:relative; overflow:hidden; }
.service-card::before { content:”; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(–gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.service-card:hover { border-color:var(–border); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.3); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { width:46px; height:46px; border-radius:10px; background:var(–gold-dim); border:1px solid var(–border); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; }
.service-card h3 { font-size:1rem; font-weight:700; color:var(–paper); margin-bottom:.5rem; }
.service-card p { font-size:.87rem; color:var(–muted); line-height:1.65; }
/* EXPERIENCE */
.experience { background:var(–bg2); }
.exp-list { display:flex; flex-direction:column; }
.exp-item { display:grid; grid-template-columns:180px 1fr; gap:2.5rem; padding:2rem 0; border-bottom:1px solid var(–border2); transition:background .2s; border-radius:8px; }
.exp-item:last-child { border-bottom:none; }
.exp-item:hover { background:rgba(201,168,76,.03); }
.exp-meta { text-align:right; padding-top:.15rem; }
.exp-year { font-size:.78rem; color:var(–gold); font-weight:600; letter-spacing:.06em; }
.exp-company { font-size:.76rem; color:var(–muted); margin-top:.2rem; }
.exp-body h3 { font-size:1.05rem; font-weight:700; color:var(–paper); margin-bottom:.4rem; }
.exp-body p { font-size:.87rem; color:var(–muted); max-width:520px; }
.exp-tag { display:inline-flex; margin-top:.7rem; padding:.2rem .7rem; border-radius:99px; background:var(–gold-dim); border:1px solid var(–border); font-size:.7rem; color:var(–gold); font-weight:600; letter-spacing:.04em; }
@media (max-width:600px) { .exp-item{grid-template-columns:1fr; gap:.5rem;} .exp-meta{text-align:left;} }
/* PORTFOLIO */
.portfolio { background:var(–bg); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px) { .portfolio-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px) { .portfolio-grid{grid-template-columns:1fr;} }
.portfolio-card { background:var(–surface); border:1px solid var(–border2); border-radius:12px; overflow:hidden; transition:all .3s; cursor:pointer; }
.portfolio-card:hover { border-color:var(–border); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.p-thumb { aspect-ratio:16/9; background:var(–surface2); display:flex; align-items:center; justify-content:center; font-size:2.2rem; position:relative; overflow:hidden; }
.p-thumb-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.45; transition:opacity .3s; }
.portfolio-card:hover .p-thumb-bg { opacity:.6; }
.p-thumb::before { content:”; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,.06) 0%,transparent 70%); }
.p-icon { position:absolute; top:.8rem; left:.9rem; width:22px; height:22px; color:var(–gold); opacity:.8; }
.p-overlay { position:absolute; inset:0; background:rgba(201,168,76,.88); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; color:var(–bg); font-size:1rem; font-weight:700; letter-spacing:.05em; }
.portfolio-card:hover .p-overlay { opacity:1; }
.p-info { padding:1.1rem 1.3rem; }
.p-cat { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(–gold); font-weight:600; margin-bottom:.3rem; }
.p-info h3 { font-size:.92rem; font-weight:700; color:var(–paper); margin-bottom:.35rem; }
.p-desc { font-size:.78rem; color:var(–muted); line-height:1.55; }
/* TRAVEL */
.travel { background:var(–bg2); }
.travel-mosaic { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,180px); gap:1rem; }
.t-card { background:var(–surface); border:1px solid var(–border2); border-radius:10px; display:flex; align-items:flex-end; padding:1.2rem 1.4rem; position:relative; overflow:hidden; transition:transform .3s, border-color .3s; }
.t-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.75; transition:opacity .3s; }
.t-card:hover .t-card-bg { opacity:.9; }
.t-card::after { content:””; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); pointer-events:none; z-index:0; }
.t-card:hover { transform:translateY(-4px); border-color:var(–border); box-shadow:0 16px 40px rgba(0,0,0,.3); }
.t-card-info { display:flex; flex-direction:column; gap:.2rem; position:relative; z-index:2; }
.t-label { font-size:.9rem; font-weight:700; color:#fff; line-height:1; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.t-desc { font-size:.72rem; color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,0,0,.9); }
.t-emoji { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); }
.t-card-bg ~ .t-emoji { display:none !important; }
.t-flag {
display:inline-block;
width:24px; height:16px;
border-radius:2px; overflow:hidden;
opacity:.9; flex-shrink:0;
box-shadow:0 1px 3px rgba(0,0,0,.5);
vertical-align:middle;
}
.t-flag svg { width:100%; height:100%; display:block; }
.t-card:hover .t-flag { opacity:1; }
.t-label-row { display:flex; align-items:center; gap:.5rem; }
@media (max-width:700px) { .travel-mosaic{grid-template-columns:1fr 1fr; grid-template-rows:auto;} .t-card{min-height:140px;} }
@media (max-width:420px) { .travel-mosaic{grid-template-columns:1fr;} }
/* TESTIMONIALS */
.testimonials { background:var(–bg); }
.test-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.2rem; }
.test-card { background:var(–surface); border:1px solid var(–border2); border-radius:12px; padding:2rem; transition:border-color .25s; }
.test-card:hover { border-color:var(–border); }
.test-quote { font-family:var(–serif); font-size:3.5rem; color:var(–gold); line-height:.7; margin-bottom:.8rem; opacity:.55; }
.test-text { font-size:.9rem; color:var(–muted); line-height:1.75; margin-bottom:1.5rem; }
.test-author { display:flex; align-items:center; gap:.8rem; }
.test-avatar { width:42px; height:42px; border-radius:50%; background:var(–gold-dim); border:1px solid var(–border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:var(–gold); flex-shrink:0; overflow:hidden; }
.test-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.test-name { font-size:.88rem; font-weight:700; color:var(–paper); }
.test-role { font-size:.74rem; color:var(–muted); }
/* CONTACT */
.contact-section { background:var(–bg2); }
.contact-inner { max-width:640px; margin:0 auto; text-align:center; }
.contact-inner h2 { margin-bottom:1rem; }
.contact-inner > p { color:var(–muted); font-size:1rem; margin-bottom:2.8rem; line-height:1.7; }
.contact-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-wa { background:#25D366; color:#fff; border-color:#25D366; }
.btn-wa:hover { background:#1ebe58; border-color:#1ebe58; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.3); }
.btn-email { background:transparent; color:var(–paper); border-color:var(–border2); }
.btn-email:hover { border-color:var(–gold); color:var(–gold); transform:translateY(-2px); }
/* NEWSLETTER */
.newsletter { background:var(–surface); border-top:1px solid var(–border2); border-bottom:1px solid var(–border2); padding:3.5rem var(–pad-x); }
.newsletter-inner { max-width:var(–container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.newsletter-text h3 { font-family:var(–serif); font-size:1.4rem; font-weight:700; margin-bottom:.3rem; }
.newsletter-text p { font-size:.88rem; color:var(–muted); }
.newsletter-form { display:flex; gap:.6rem; }
.newsletter-form input { padding:.75rem 1.1rem; background:var(–bg); border:1px solid var(–border2); border-radius:6px; color:var(–paper); font-family:var(–sans); font-size:.9rem; outline:none; width:240px; transition:border-color .2s; }
.newsletter-form input:focus { border-color:var(–gold); }
.newsletter-form input::placeholder { color:var(–muted); }
.newsletter-form button { padding:.75rem 1.4rem; background:var(–gold); color:var(–bg); border:none; border-radius:6px; font-family:var(–sans); font-size:.83rem; font-weight:700; cursor:pointer; transition:background .2s; white-space:nowrap; }
.newsletter-form button:hover { background:var(–gold-lt); }
@media (max-width:640px) { .newsletter-inner{flex-direction:column;} .newsletter-form{flex-direction:column;width:100%;} .newsletter-form input{width:100%;} }
/* FOOTER */
footer { background:var(–bg); padding:4rem var(–pad-x) 2rem; }
.footer-wrap { max-width:var(–container); margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; padding-bottom:2.5rem; border-bottom:1px solid var(–border2); margin-bottom:2rem; }
.footer-brand .nav-logo { font-size:1.4rem; }
.footer-brand p { margin-top:.5rem; color:var(–muted); font-size:.83rem; max-width:220px; }
.footer-links { display:flex; gap:3rem; flex-wrap:wrap; }
.footer-col h4 { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,234,216,.28); margin-bottom:.9rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-col a { font-size:.84rem; color:var(–muted); text-decoration:none; transition:color .2s; }
.footer-col a:hover { color:var(–gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.76rem; color:rgba(240,234,216,.25); }
.footer-socials { display:flex; gap:.8rem; }
.f-social { width:34px; height:34px; border-radius:50%; border:1px solid var(–border2); display:flex; align-items:center; justify-content:center; color:var(–muted); text-decoration:none; font-size:.78rem; transition:all .2s; }
.f-social:hover { border-color:var(–gold); color:var(–gold); }
.nav-logo-img–footer { height: 48px !important; max-height: 48px !important; }
/* LOGO SLIDER */
.logo-slider-section {
background: var(–bg);
padding: 5rem 0 4rem;
border-top: 1px solid var(–border2);
border-bottom: 1px solid var(–border2);
}
.logo-slider-header {
text-align: center;
margin-bottom: 2.5rem;
}
.logo-slider-header .section-label {
justify-content: center;
margin-bottom: .5rem;
}
.logo-slider-sub {
font-size: .88rem;
color: var(–muted);
}
.slider-track-wrapper {
display: flex;
align-items: center;
gap: 1rem;
max-width: var(–container);
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 3rem);
}
.slider-viewport {
overflow: hidden;
flex: 1;
/* fade edges */
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.slider-track {
display: flex;
gap: 1.2rem;
transition: transform .45s cubic-bezier(.4,0,.2,1);
will-change: transform;
}
.logo-img {
max-height: 80px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .7;
transition: opacity .3s;
display: block;
margin: 0 auto;
}
.logo-card:hover .logo-img { opacity: 1; }
.logo-slide {
/* 3 visible at once: (100% – 2 gaps) / 3 */
flex: 0 0 calc((100% – 2 * 1.2rem) / 3);
min-width: 0;
}
@media (max-width: 700px) {
.logo-img {
max-height: 80px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .7;
transition: opacity .3s;
display: block;
margin: 0 auto;
}
.logo-card:hover .logo-img { opacity: 1; }
.logo-slide { flex: 0 0 calc((100% – 1.2rem) / 2); }
}
@media (max-width: 420px) {
.logo-img {
max-height: 80px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .7;
transition: opacity .3s;
display: block;
margin: 0 auto;
}
.logo-card:hover .logo-img { opacity: 1; }
.logo-slide { flex: 0 0 100%; }
}
.logo-card {
background: var(–surface);
border: 1px solid var(–border2);
border-radius: 12px;
padding: 2.2rem 1.5rem;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 2/1;
transition: border-color .3s, transform .3s, box-shadow .3s;
cursor: default;
position: relative;
overflow: hidden;
}
.logo-card::before {
content: ”;
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 50%, var(–gold-dim) 0%, transparent 70%);
opacity: 0; transition: opacity .35s;
}
.logo-card:hover {
border-color: var(–border);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.logo-card:hover::before { opacity: 1; }
/* placeholder style — replace with when you have real logos */
.logo-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
position: relative;
z-index: 1;
}
.logo-abbr {
font-family: var(–serif);
font-size: 1.8rem;
font-weight: 900;
color: var(–gold);
letter-spacing: .04em;
line-height: 1;
}
.logo-name {
font-size: .72rem;
color: var(–muted);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
/* real logo img inside .logo-card */
.logo-card img {
max-width: 100%;
max-height: 70px;
object-fit: contain;
filter: grayscale(1) brightness(1.8);
opacity: .55;
transition: filter .3s, opacity .3s;
position: relative; z-index: 1;
}
.logo-card:hover img {
filter: grayscale(0) brightness(1);
opacity: 1;
}
/* REVEAL */
/* Translate button */
.translate-btn {
background: none; border: none; cursor: pointer;
color: var(–muted); padding: 4px; display: flex;
align-items: center; justify-content: center;
transition: color .2s; position: relative;
}
.translate-btn:hover { opacity: .8; }
.translate-btn svg { width: 22px; height: 15px; }
.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); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
/* BACK TOP */
.back-top { position:fixed; bottom:2rem; right:2rem; z-index:99; width:42px; height:42px; border-radius:50%; background:var(–gold); color:var(–bg); border:none; cursor:pointer; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; box-shadow:0 4px 20px rgba(201,168,76,.4); }
.back-top.show { opacity:1; pointer-events:all; }
.back-top:hover { transform:translateY(-3px); }
Sobre Mim
Serviços
Atuação
Portfólio
Pelo Mundo
Blog
Contato
Jornalista · Historiador · Dev
Geilson
Ferreira
Jornalista profissional com quase duas décadas de atuação em televisão. Também é historiador, especialista em História do Brasil, e cientista da computação com foco em dados e automações.
LinkedIn
Instagram
YouTube
GitHub
Ver Portfólio
Entre em Contato
Sobre o trabalho
Narrativa, memória e tecnologia.
São quase duas décadas de trajetória na construção de narrativas que informam, emocionam e transformam. Do telejornalismo à análise de dados e automações, cada projeto carrega a mesma essência: contar histórias com profundidade e impacto.
Inquieto em busca de novos horizontes
Jornalista profissional com quase duas décadas de atuação em televisão, apaixonado por contar histórias com profundidade e contexto. A formação em História do Brasil e Ciência da Computação me permite unir storytelling jornalístico com rigor analítico.
Especializado em análise de dados, automações e marketing digital, aplico tecnologia a favor da comunicação — tornando informações complexas acessíveis e significativas.
20+Anos em jornalismo
3Áreas de formação
6Países visitados
Pelo Mundo
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUrWRqS0jwjPzj1NZprNKeeSWgz7c_-0yDcl7uT6wd0FO03pqtqdHvD80WEzljC_2MXP6JrkoR4gJS8upM490iy3u23_SPMSpBEX6x5eiWnYlJ7qkyDKAvXMa2VtLTf6r4UsAyQAdjfPuHtHcV1wkJcQlbH-9PeNh9Xu1xqUowkCw7Iw/s1600/caravana-jn_39861868044_o.jpg"
alt="Geilson Ferreira"
style="position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:60% center !important; display:block !important;"
onerror="this.style.display='none'; this.parentElement.style.color='rgba(201,168,76,.15)'; this.parentElement.innerHTML += '‘;”
/>
O que eu faço.
Quatro pilares que resumem minha atuação profissional multidisciplinar.
Jornalismo
Quase duas décadas em televisão: reportagem, edição, coordenação e produção de telejornalismo com alto padrão editorial.
História
Historiador especialista em História do Brasil — pesquisa acadêmica e contexto histórico aplicado ao jornalismo e à comunicação.
Dados & Automação
Análise de dados, dashboards e automações que transformam grandes volumes de informação em insights acionáveis.
Tecnologia
Desenvolvimento web, marketing digital e soluções tecnológicas alinhadas a estratégias de comunicação eficientes.
Empresas
Organizações onde construí minha trajetória profissional
Atuação profissional.
Uma carreira construída cargo a cargo, com dedicação e evolução constante no telejornalismo.
2025 – Atual
Rede Tribuna · Vitória, ES
Editor / Coordenador de Telejornal
Atuação como editor em ambiente de produção jornalística de televisão, com foco em organização de fluxos, tomada de decisão editorial e otimização de processos.
Atual
2017 – 2025
Telejornalismo
Editor de Telejornalismo
Responsável pela curadoria, edição e finalização de reportagens, garantindo coerência narrativa e rigor editorial no produto final.
Edição
2010 – 2016
Telejornalismo
Repórter
Cobertura de pautas de relevância local e nacional, com apuração em campo, entrevistas e produção de reportagens especiais.
Reportagem
2009 – 2010
Telejornalismo
Estagiário / Produtor de Telejornalismo
Levantamento e desenvolvimento de pautas, organização de escalas e suporte à equipe de reportagem no dia a dia da redação.
Produção
2008 – 2009
Comunicação
Assistente de Comunicação
Apoio às áreas de comunicação institucional, assessoria de imprensa e produção de conteúdo para diferentes plataformas.
Comunicação
Portfólio selecionado.
Projetos que condensam minha trajetória multidisciplinar.
Ver Reportagens →
Telejornalismo & Impresso
Reportagens
Acervo de reportagens em TV e jornal impresso ao longo da carreira
Ver Séries →
Jornalismo de Dados
Séries de Reportagens
Séries especiais executadas como repórter e produtor
Acessar Site →
História & Turismo
Viagem Capixaba
Turismo, história e dados do Espírito Santo em um único portal
Ver Revista →
Dados & Análise
ES em Números
90+ indicadores socioeconômicos do ES em 11 temas — Revista ES Brasil
Ver Participações →
Mídia & Conversas
Podcasts & Lives
Participações em podcasts e transmissões ao vivo
Ver Projetos →
Tecnologia & Inovação
Automações Audiovisuais
Projetos experimentais de automação com foco em audiovisual
Onde já estive.
Países da América Latina que já explorei — cada um com sua história, cultura e ensinamentos únicos.
Brasil
O país que me formou
Argentina
Cultura e pampas infinitos
Chile
Do Atacama à Patagônia
Peru
Machu Picchu e o Império Inca
Colômbia
Biodiversidade e história viva
México
Civilizações e cores intensas
O que dizem sobre o trabalho.
Relatos de quem trabalhou e colaborou comigo ao longo da carreira.
”
Profissional íntegro e criativo. A junção de jornalismo e precisão acadêmica é rara — o Geilson entrega as duas coisas com maestria.
John DoeEditor-Chefe
”
Qualidade rara de transformar dados complexos em narrativas acessíveis e impactantes para o grande público.
Jenna SmithProdutora
”
Olhar criativo e rigoroso. Entrega qualidade editorial em cada projeto com comprometimento e originalidade acima da média.
Samuel StevensProdutor de Conteúdo
Vamos conversar?
Tem um projeto, pauta ou colaboração em mente? Entre em contato pelo canal de sua preferência.
Fique por dentro
Conteúdo sobre jornalismo, dados, história e viagens no seu e-mail.