:root { --ink:#17221e; --paper:#f4f3ed; --lime:#c6ef5b; --coral:#ff755a; --line:#cfd2ca; --muted:#68706b; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; }
.page-grid { position:fixed; z-index:-1; inset:0; background-image:linear-gradient(rgba(23,34,30,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,30,.035) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
a { color:inherit; text-decoration:none; } .eyebrow,.year,.role-period { font:500 11px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.sidebar { position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; width:260px; padding:34px 32px 28px; border-right:1px solid var(--line); background:rgba(244,243,237,.9); backdrop-filter:blur(12px); }
.wordmark { font:800 29px/1 var(--sans); letter-spacing:-2px; } .wordmark span { color:var(--coral); }
.sidebar-intro { margin:74px 0 46px; font-size:13px; line-height:1.6; } .sidebar-intro .eyebrow { color:var(--muted); margin:0 0 10px; }
nav { display:grid; gap:5px; } nav a { padding:7px 0; font-size:14px; color:var(--muted); transition:color .2s,transform .2s; } nav a:hover,nav a.active { color:var(--ink); transform:translateX(4px); } nav a.active::before { content:"/"; margin-right:7px; color:var(--coral); }
.sidebar-footer { margin-top:auto; display:grid; gap:7px; font-size:12px; } .sidebar-footer a { display:flex; justify-content:space-between; } .sidebar-footer a span { color:var(--coral); } .sidebar-footer p { color:var(--muted); margin:13px 0 0; font-size:10px; }
main { margin-left:260px; max-width:1440px; } .hero { min-height:720px; display:grid; grid-template-columns:1fr; align-items:end; padding:80px clamp(30px,7vw,112px) 70px; }
.hero-copy { padding-bottom:12px; }.hero-copy .eyebrow { color:var(--coral); }.hero h1 { margin:14px 0 22px; font-size:clamp(66px,9vw,146px); line-height:.84; letter-spacing:-.08em; }.hero h1 em { font-style:normal; color:var(--coral); }.hero-description { max-width:500px; margin:0; font-size:20px; line-height:1.45; letter-spacing:-.03em; }.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }.button { display:inline-flex; align-items:center; gap:22px; padding:12px 16px; border:1px solid var(--ink); font-size:12px; font-weight:700; }.button-primary { background:var(--ink); color:var(--paper); }.button-secondary:hover { background:var(--lime); }.button span { font-size:17px; line-height:1; }
.signal-panel { position:relative; min-height:370px; overflow:hidden; padding:22px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); }.signal-top,.signal-caption { position:relative; z-index:2; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; }.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(198,239,91,.15); }.signal-lines { position:absolute; inset:70px -20px 75px; display:flex; align-items:center; gap:14px; transform:rotate(-8deg); opacity:.92; }.signal-lines i { flex:1; height:100%; border-left:1px solid rgba(244,243,237,.21); position:relative; }.signal-lines i::after { content:""; position:absolute; width:15px; height:15px; top:var(--point); left:-8px; border-radius:50%; background:var(--coral); }.signal-lines i:nth-child(1){--point:23%}.signal-lines i:nth-child(2){--point:60%}.signal-lines i:nth-child(3){--point:37%}.signal-lines i:nth-child(4){--point:74%}.signal-lines i:nth-child(5){--point:48%}.signal-metric { position:absolute; left:22px; bottom:57px; display:flex; align-items:flex-end; gap:13px; }.signal-metric strong { font-size:82px; line-height:.82; letter-spacing:-.08em; color:var(--lime); }.signal-metric span { font:500 10px/1.45 var(--mono); text-transform:uppercase; }.signal-caption { position:absolute; bottom:22px; color:rgba(244,243,237,.64); }
.section-rule { border-top:1px solid var(--line); }.statement { padding:78px clamp(30px,7vw,112px) 90px; }.statement .eyebrow { color:var(--muted); }.statement h2 { max-width:1000px; margin:17px 0 0; font-size:clamp(30px,4.4vw,58px); line-height:1.12; letter-spacing:-.055em; font-weight:600; }.section { padding:76px clamp(30px,7vw,112px); }.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:baseline; margin-bottom:45px; }.section-heading .eyebrow { color:var(--coral); margin:0; }.section-heading h2 { margin:0; font-size:clamp(29px,4vw,50px); letter-spacing:-.06em; line-height:1; }
.fighter { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; padding:76px clamp(30px,7vw,112px); background:#dfe4de; }.fighter-label .eyebrow { color:var(--coral); }.fighter-label span { display:block; margin-top:11px; color:var(--muted); font-size:13px; }.fighter-copy { max-width:700px; }.fighter-copy h2 { margin:0; font-size:clamp(28px,3.8vw,49px); line-height:1.1; letter-spacing:-.06em; }.fighter-copy > p { max-width:590px; margin:23px 0 0; color:#424b45; font-size:15px; }.fighter-values { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }.fighter-values span { padding:5px 8px; border:1px solid rgba(23,34,30,.35); font:10px var(--mono); text-transform:uppercase; }.fighter-gallery { display:grid; grid-template-columns:1.35fr .9fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; margin-top:32px; }.fighter-photo { min-height:0; margin:0; overflow:hidden; background:#c8d0c6; }.fighter-photo-main { grid-row:span 2; }.fighter-photo img { display:block; width:100%; height:100%; min-height:148px; object-fit:cover; }.fighter-photo-main img { min-height:306px; object-position:center; }
.timeline { border-top:1px solid var(--ink); }.role { display:grid; grid-template-columns:165px 1fr; gap:20px; padding:25px 0 27px; border-bottom:1px solid var(--line); }.role-period { padding-top:7px; color:var(--muted); }.role h3,.project-card h3,.education-grid h3,.skills-grid h3 { margin:0; font-size:20px; letter-spacing:-.04em; }.role h3 span { color:var(--muted); font-weight:500; }.role p { max-width:750px; margin:10px 0 0; font-size:14px; color:#404944; }.featured-role { background:rgba(198,239,91,.25); margin-inline:-16px; padding-inline:16px; }.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }.tags span { padding:3px 7px; border:1px solid rgba(23,34,30,.3); border-radius:2px; font:10px var(--mono); }
.projects { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; }.project-card { min-height:330px; display:flex; flex-direction:column; padding:27px; background:#e2e7df; border:1px solid #c7cec5; }.project-main { background:var(--coral); border-color:var(--coral); }.project-index { margin-bottom:auto; font:11px var(--mono); }.project-card .eyebrow { margin:44px 0 8px; }.project-card h3 { font-size:36px; }.project-card > p:not(.eyebrow) { max-width:500px; margin:10px 0 24px; font-size:14px; }.project-footer { display:flex; justify-content:space-between; align-items:end; margin-top:auto; font:10px var(--mono); text-transform:uppercase; }.arrow { font-size:23px; }
.community { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; padding:76px clamp(30px,7vw,112px); background:var(--lime); }.community .eyebrow { color:#536520; }.community h2 { margin:8px 0 0; font-size:clamp(40px,6vw,76px); letter-spacing:-.07em; }.community-content { max-width:560px; }.community-lead { margin:0 0 22px; font-size:27px; line-height:1.2; letter-spacing:-.05em; }.community-content > p:not(.community-lead) { font-size:14px; }.text-link { display:inline-block; margin-top:13px; padding-bottom:3px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:700; }
.community-points { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }.community-points span { padding:5px 8px; border:1px solid rgba(23,34,30,.38); font:10px var(--mono); text-transform:uppercase; }
.community-carousel { margin-top:40px; }.carousel-viewport { overflow:hidden; margin-right:calc(clamp(30px, 7vw, 112px) * -1); padding-right:clamp(30px, 7vw, 112px); }.carousel-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px, 82%); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:58px; scrollbar-width:none; }.carousel-track::-webkit-scrollbar { display:none; }.carousel-track article { scroll-snap-align:start; scroll-margin-left:58px; min-height:267px; display:flex; flex-direction:column; justify-content:space-between; padding:22px; border:1px solid rgba(23,34,30,.35); background:rgba(244,243,237,.4); }.carousel-track article:nth-child(3n + 2) { background:var(--paper); }.carousel-track article:nth-child(3n) { background:rgba(23,34,30,.08); }.carousel-track time { color:#536520; font:500 11px var(--mono); letter-spacing:.06em; }.event-type { margin:25px 0 7px; color:var(--coral); font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.carousel-track h3 { margin:0; font-size:22px; line-height:1.08; letter-spacing:-.05em; }.carousel-track p:not(.event-type) { margin:9px 0 0; color:#35402f; font-size:12px; line-height:1.55; }.carousel-track a { display:inline-block; margin-top:14px; padding-bottom:2px; border-bottom:1px solid rgba(23,34,30,.45); font:500 10px var(--mono); text-transform:uppercase; }.carousel-track a span { margin-left:5px; }.carousel-controls { display:flex; align-items:center; gap:10px; margin-top:15px; }.carousel-button { width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); font-size:18px; cursor:pointer; transition:background .2s,color .2s; }.carousel-button:hover:not(:disabled) { background:var(--ink); color:var(--paper); }.carousel-button:disabled { border-color:rgba(23,34,30,.22); color:rgba(23,34,30,.3); cursor:not-allowed; }.carousel-progress { min-width:64px; color:#536520; font:500 10px var(--mono); letter-spacing:.06em; text-align:center; }
.carousel-track article.event-photo { position:relative; overflow:hidden; color:var(--paper); background-position:center; background-size:cover; }.carousel-track article.event-photo::before { content:""; position:absolute; inset:0; background:rgba(23,34,30,.68); }.carousel-track article.event-photo > * { position:relative; z-index:1; }.carousel-track article.event-photo time { color:var(--lime); }.carousel-track article.event-photo .event-type { color:var(--lime); }.carousel-track article.event-photo h3 { color:var(--paper); }.carousel-track article.event-photo p:not(.event-type) { color:rgba(244,243,237,.86); }.carousel-track article.event-photo a { border-color:rgba(244,243,237,.7); }.event-photo-first-meetup { background-image:url("assets/devjr-first-meetup.webp") !important; }.event-photo-school { background-image:url("assets/devjr-school-2024.webp") !important; }.event-photo-cursor { background-image:url("assets/devjr-cafe-cursor-2026.jpeg") !important; }
.event-photo-tour { background-image:url("assets/devjr-tour-vale-2023.webp") !important; }
.event-photo-react-native { background-image:url("assets/devjr-react-native-2022.jpg") !important; }
.event-photo-meetup-2-2020 { background-image:url("assets/devjr-meetup-2-2020.jpg") !important; }
.event-photo-world-creativity-2021 { background-image:url("assets/devjr-world-creativity-2021.jpg") !important; }
.event-photo-taubatech-2022 { background-image:url("assets/devjr-taubatech-2022.jpg") !important; }
.event-photo-projeto-ampliar-2022 { background-image:url("assets/devjr-projeto-ampliar-2022.jpg") !important; }
.event-photo-meetup-4-2022 { background-image:url("assets/devjr-meetup-4-2022.jpg") !important; }
.event-photo-front-in-vale-2023 { background-image:url("assets/devjr-front-in-vale-2023.jpg") !important; }
.event-photo-tour-aparecida { background-image:url("assets/devjr-tour-aparecida-2023.jpg") !important; }
.event-photo-tour-caraguatatuba { background-image:url("assets/devjr-tour-caraguatatuba-2023.jpg") !important; }
.event-photo-tour-lorena { background-image:url("assets/devjr-tour-lorena-2023.jpg") !important; }
.event-photo-devfest-sjc-2025 { background-image:url("assets/devjr-devfest-sjc-2025.jpg") !important; }
.event-photo-microservices-2026 { background-image:url("assets/devjr-microservices-2026.jpg") !important; }
.event-photo-escola-programadores-2023 { background-image:url("assets/devjr-escola-programadores-2023.jpg") !important; }
.event-photo-carreira-tech-2026 { background-image:url("assets/devjr-carreira-tech-2026.jpg") !important; }
.event-photo-engenharia-reversa-2026 { background-image:url("assets/devjr-engenharia-reversa-2026.jpg") !important; }
.event-photo-academy-2023 { background-image:url("assets/devjr-academy-2023.jpg") !important; }
.event-photo-schooltech-2023 { background-image:url("assets/devjr-schooltech-2023.jpg") !important; }
.education-grid,.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }.education-grid article { padding:21px 22px 20px 0; min-height:156px; border-right:1px solid var(--line); }.education-grid article+article { padding-left:22px; }.education-grid article:last-child { border-right:0; }.education-grid .year { color:var(--coral); margin:0 0 38px; }.education-grid h3 { font-size:16px; }.education-grid article p:last-child { margin:7px 0 0; color:var(--muted); font-size:12px; }.skills-grid { grid-template-columns:repeat(2,1fr); }.skills-grid div { min-height:147px; padding:20px 28px 20px 0; border-bottom:1px solid var(--line); }.skills-grid div:nth-child(even) { padding-left:28px; border-left:1px solid var(--line); }.skills-grid h3 { font-size:16px; }.skills-grid p { margin:9px 0 0; max-width:420px; font-size:13px; color:var(--muted); }
.contact { padding:85px clamp(30px,7vw,112px); background:var(--ink); color:var(--paper); }.contact .eyebrow { color:var(--lime); }.contact h2 { margin:14px 0 27px; font-size:clamp(35px,5vw,69px); line-height:1; letter-spacing:-.065em; }.contact a { display:inline-flex; padding-bottom:4px; border-bottom:1px solid var(--lime); color:var(--lime); font-size:14px; font-weight:700; }.contact a span { margin-left:14px; } footer { display:flex; justify-content:space-between; gap:20px; margin-left:260px; padding:20px clamp(30px,7vw,112px); background:var(--ink); color:rgba(244,243,237,.55); border-top:1px solid rgba(244,243,237,.2); font:10px var(--mono); text-transform:uppercase; }
.mobile-header { display:none; }
@media (max-width:880px) { .sidebar { display:none; }.mobile-header { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; padding:19px 24px; background:rgba(244,243,237,.93); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }.menu-button { border:0; padding:0; background:transparent; color:var(--ink); font:500 11px var(--mono); text-transform:uppercase; }.mobile-header:has(.menu-button[aria-expanded="true"]) + .sidebar { position:fixed; z-index:4; inset:62px 0 0; display:flex; width:auto; background:var(--paper); }.mobile-header:has(.menu-button[aria-expanded="true"]) + .sidebar .sidebar-intro { margin-top:45px; } main,footer { margin-left:0; }.hero { min-height:0; grid-template-columns:1fr; padding:70px 26px 48px; }.signal-panel { min-height:290px; }.statement,.fighter,.section,.community,.contact { padding-left:26px; padding-right:26px; }.sidebar-footer { display:none; } }
@media (max-width:600px) { .hero h1 { font-size:72px; }.hero-description { font-size:18px; }.statement { padding-top:62px; padding-bottom:66px; }.fighter { grid-template-columns:1fr; gap:26px; padding-top:60px; padding-bottom:60px; }.fighter-gallery { grid-template-columns:1fr 1fr; }.fighter-photo-main { grid-column:span 2; grid-row:auto; }.fighter-photo-main img { min-height:250px; }.fighter-photo img { min-height:150px; }.section { padding-top:60px; padding-bottom:60px; }.section-heading { display:block; margin-bottom:30px; }.section-heading h2 { margin-top:9px; }.role { grid-template-columns:1fr; gap:4px; }.role-period { padding-top:0; }.role h3 { font-size:18px; }.projects,.community { grid-template-columns:1fr; }.project-card { min-height:280px; }.community { gap:28px; }.carousel-viewport { margin-right:-26px; padding-right:26px; }.carousel-track { grid-auto-columns:88%; scroll-padding-left:24px; }.carousel-track article { scroll-margin-left:24px; min-height:286px; }.education-grid,.skills-grid { grid-template-columns:1fr; }.education-grid article,.education-grid article+article { min-height:0; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }.education-grid .year { margin-bottom:15px; }.skills-grid div,.skills-grid div:nth-child(even) { min-height:0; padding:20px 0; border-left:0; }.contact h2 br { display:none; } footer { padding:17px 26px; flex-direction:column; } }