/* ========================================================================= Cenários do site (space, hiking, fantasy, renaissance, journal, minimalist, gruvbox) O atributo data-site-theme fica no (aplicado por um script inline no , para não piscar). As variáveis são declaradas em `body` para que a variante escura — `body.dark`, de especificidade maior — vença. ========================================================================= */ /* ===================== Space (padrão) ===================== */ html[data-site-theme="space"] body { --accent: #6d00a3; --accent-soft: rgba(109, 0, 163, 0.09); --background-color: #ffffff; --sub-title-color: rgb(51, 51, 51); --sub2-text-color: #cccccc; --muted: rgba(51, 51, 51, 0.72); --card-bg: rgba(255, 255, 255, 0.72); --card-bg-hover: #ffffff; --card-border: rgba(51, 51, 51, 0.12); --card-shadow: rgba(31, 0, 48, 0.18); --line-color: rgba(51, 51, 51, 0.15); } html[data-site-theme="space"] body.dark { --accent: #c77dff; --accent-soft: rgba(199, 125, 255, 0.16); --background-color: #333333; --sub-title-color: #ffffff; --sub2-text-color: #cccccc; --muted: rgba(255, 255, 255, 0.68); --card-bg: rgba(255, 255, 255, 0.055); --card-bg-hover: rgba(255, 255, 255, 0.09); --card-border: rgba(255, 255, 255, 0.12); --card-shadow: rgba(0, 0, 0, 0.55); --line-color: rgba(255, 255, 255, 0.18); } /* ===================== Hiking ===================== */ /* A primeira tela é o céu: branco. As variáveis --montanha-* descrevem as camadas do cenário, e a camada da frente (--montanha-frente) é a cor que o resto da página assume ao rolar. */ html[data-site-theme="hiking"] body { --accent: #2e7d4f; --accent-soft: rgba(46, 125, 79, 0.10); --background-color: #ffffff; --sub-title-color: #22312a; --sub2-text-color: #9db3a5; --muted: rgba(34, 49, 42, 0.72); --card-bg: rgba(255, 255, 255, 0.8); --card-bg-hover: #ffffff; --card-border: rgba(34, 49, 42, 0.13); --card-shadow: rgba(10, 45, 25, 0.22); --line-color: rgba(34, 49, 42, 0.16); /* camadas do cenário, da mais distante para a mais próxima; cada -sombra é a face direita do pico, um tom abaixo da própria camada */ --montanha-horizonte: #e1ede6; --montanha-longe: #cfe3d7; --montanha-longe-sombra: #bad6c8; --montanha-meio: #a4c8b3; --montanha-meio-sombra: #8ab69f; --montanha-perto: #5f9a7c; --montanha-perto-sombra: #4e876a; --montanha-frente: #1f4a3a; --montanha-fundo-pagina: #163529; /* não é branco puro de propósito: com o céu branco, a neve do cume desapareceria no fundo e o pico pareceria cortado */ --montanha-neve: #e4ede8; /* de dia só o sol pinta (três tons quentes, do claro ao laranja do canto sombreado); lua e estrelas ficam transparentes */ --montanha-sol: #f8dda2; --montanha-sol-meio: #f0bf6a; --montanha-sol-borda: #e0913f; --montanha-lua: transparent; --montanha-lua-sombra: transparent; --montanha-lua-cratera: transparent; --montanha-estrela: transparent; --montanha-arvore: #143026; --montanha-arvore-perto: #3d7a5f; --montanha-passaro: #7ba58f; /* acampamento: de dia o hiker passeia com o cão, a janela da cabana está apagada e a fogueira também */ --montanha-dia: 1; --montanha-noite: 0; --montanha-janela: #4b3b33; } html[data-site-theme="hiking"] body.dark { --accent: #7fd8a2; --accent-soft: rgba(127, 216, 162, 0.14); --background-color: #1e2a24; --sub-title-color: #eef7f1; --sub2-text-color: #6f8a7c; --muted: rgba(238, 247, 241, 0.68); --card-bg: rgba(255, 255, 255, 0.05); --card-bg-hover: rgba(255, 255, 255, 0.085); --card-border: rgba(255, 255, 255, 0.12); --card-shadow: rgba(0, 0, 0, 0.6); --line-color: rgba(255, 255, 255, 0.16); /* no escuro as camadas distantes clareiam (perspectiva atmosférica) e as próximas escurecem, então a página continua a mais escura de todas */ --montanha-horizonte: #405f52; --montanha-longe: #3a5a4d; --montanha-longe-sombra: #315044; --montanha-meio: #2f4a3f; --montanha-meio-sombra: #274036; --montanha-perto: #24382f; --montanha-perto-sombra: #1d2f27; --montanha-frente: #16241e; --montanha-fundo-pagina: #101a16; --montanha-neve: #cde3d6; /* de noite os três tons do sol somem e entram a lua (também em três tons, para as crateras aparecerem) e as estrelas */ --montanha-sol: transparent; --montanha-sol-meio: transparent; --montanha-sol-borda: transparent; --montanha-lua: #e8f1ec; --montanha-lua-sombra: #b5cbc0; --montanha-lua-cratera: #93aa9d; --montanha-estrela: #d3e2d9; --montanha-arvore: #0d1611; --montanha-arvore-perto: #1b2f26; --montanha-passaro: #6f8d7e; /* de noite o hiker recolhe (dormindo na barraca), o cão fica enrodilhado ao lado da fogueira acesa, e a janela da cabana acende */ --montanha-dia: 0; --montanha-noite: 1; --montanha-janela: #f6d98f; } /* --- o resto da página segue a cor da montanha da frente ---------------- */ /* só no index: as páginas internas (blog) continuam na variante clara */ html[data-site-theme="hiking"] body:not(.body_interna), html[data-site-theme="fantasy"] body:not(.body_interna) { background-color: var(--montanha-fundo-pagina); } html[data-site-theme="hiking"] body:not(.body_interna) .body-2, html[data-site-theme="fantasy"] body:not(.body_interna) .body-2 { background-image: linear-gradient(to bottom, var(--montanha-frente) 0, var(--montanha-frente) 130vh, var(--montanha-fundo-pagina) 340vh); background-repeat: no-repeat; } /* seções depois do herói (e o header quando fixa) invertem a paleta para ficarem legíveis sobre a montanha; o herói fica de fora e segue branco */ html[data-site-theme="hiking"] body:not(.body_interna) main > section:not(#section-home), html[data-site-theme="hiking"] body:not(.body_interna) .body-2 > footer, html[data-site-theme="hiking"] body:not(.body_interna) .body-2 > header.sticky, html[data-site-theme="fantasy"] body:not(.body_interna) main > section:not(#section-home), html[data-site-theme="fantasy"] body:not(.body_interna) .body-2 > footer, html[data-site-theme="fantasy"] body:not(.body_interna) .body-2 > header.sticky { --background-color: var(--montanha-frente); --sub-title-color: #f1f8f3; --sub2-text-color: rgba(241, 248, 243, 0.42); --muted: rgba(241, 248, 243, 0.72); --accent: #8fd8ab; --accent-soft: rgba(143, 216, 171, 0.16); --card-bg: rgba(255, 255, 255, 0.06); --card-bg-hover: rgba(255, 255, 255, 0.1); --card-border: rgba(255, 255, 255, 0.18); --card-shadow: rgba(0, 0, 0, 0.5); --line-color: rgba(255, 255, 255, 0.22); } /* a sombra padrão da header fixa usa a cor do texto — no escuro viraria brilho */ html[data-site-theme="hiking"] body:not(.body_interna) .body-2 > header.sticky, html[data-site-theme="fantasy"] body:not(.body_interna) .body-2 > header.sticky { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } /* ===================== Fantasy ===================== */ /* Mesma engenharia do hiking — mesmas variáveis, mesmas classes de arte, mesmo sol e mesma lua. O que muda é a paleta e o que a cena mostra: de dia o Gandalf chegando de carroça e o dragão dormindo no cume; de noite a runa na porta do hobbit, a Sociedade a caminho da montanha e o dragão levando ouro. */ html[data-site-theme="fantasy"] body { --accent: #6d4fa6; --accent-soft: rgba(109, 79, 166, 0.10); --background-color: #ffffff; --sub-title-color: #2c2438; --sub2-text-color: #b3aac4; --muted: rgba(44, 36, 56, 0.72); --card-bg: rgba(255, 255, 255, 0.8); --card-bg-hover: #ffffff; --card-border: rgba(44, 36, 56, 0.13); --card-shadow: rgba(30, 20, 50, 0.22); --line-color: rgba(44, 36, 56, 0.16); /* as camadas distantes puxam para o lilás (perspectiva atmosférica) e as próximas para o verde do Condado */ --montanha-horizonte: #e6e3f0; --montanha-longe: #cdc7e0; --montanha-longe-sombra: #b9b2d2; --montanha-meio: #9d95c0; --montanha-meio-sombra: #8880ac; --montanha-perto: #6f9a55; --montanha-perto-sombra: #5d8546; --montanha-frente: #33472a; --montanha-fundo-pagina: #24331d; --montanha-neve: #eceef7; --montanha-sol: #f8dda2; --montanha-sol-meio: #f0bf6a; --montanha-sol-borda: #e0913f; --montanha-lua: transparent; --montanha-lua-sombra: transparent; --montanha-lua-cratera: transparent; --montanha-estrela: transparent; --montanha-arvore: #2f5a2a; --montanha-arvore-perto: #4a7a3a; --montanha-passaro: #8a86a8; --montanha-dia: 1; --montanha-noite: 0; --montanha-janela: #4a3b33; } html[data-site-theme="fantasy"] body.dark { --accent: #d9b45a; --accent-soft: rgba(217, 180, 90, 0.14); --background-color: #1a1730; --sub-title-color: #efeaf8; --sub2-text-color: #6a6288; --muted: rgba(239, 234, 248, 0.68); --card-bg: rgba(255, 255, 255, 0.05); --card-bg-hover: rgba(255, 255, 255, 0.085); --card-border: rgba(255, 255, 255, 0.12); --card-shadow: rgba(0, 0, 0, 0.6); --line-color: rgba(255, 255, 255, 0.16); --montanha-horizonte: #3c3860; --montanha-longe: #322e52; --montanha-longe-sombra: #2a2746; --montanha-meio: #292545; --montanha-meio-sombra: #221f3b; --montanha-perto: #22301f; --montanha-perto-sombra: #1b2719; --montanha-frente: #141c12; --montanha-fundo-pagina: #0e140d; /* a neve à noite fica no tom da lua, não branca, senão o cume vira um borrão */ --montanha-neve: #8f93b0; --montanha-sol: transparent; --montanha-sol-meio: transparent; --montanha-sol-borda: transparent; --montanha-lua: #e8f1ec; --montanha-lua-sombra: #b5cbc0; --montanha-lua-cratera: #93aa9d; --montanha-estrela: #d6cff0; --montanha-arvore: #0f1a0d; --montanha-arvore-perto: #162413; --montanha-passaro: #6f6a90; --montanha-dia: 0; --montanha-noite: 1; --montanha-janela: #f6d98f; } /* ===================== Renaissance ===================== */ html[data-site-theme="renaissance"] body { --accent: #9a6b1f; --accent-soft: rgba(154, 107, 31, 0.11); --background-color: #faf4e8; --sub-title-color: #3b2f1d; --sub2-text-color: #c1ab84; --muted: rgba(59, 47, 29, 0.75); --card-bg: rgba(255, 251, 243, 0.85); --card-bg-hover: #fffdf8; --card-border: rgba(59, 47, 29, 0.16); --card-shadow: rgba(80, 55, 15, 0.24); --line-color: rgba(59, 47, 29, 0.2); --font-family-principal: Georgia, "Times New Roman", "Palatino Linotype", serif; } html[data-site-theme="renaissance"] body.dark { --accent: #e2b45c; --accent-soft: rgba(226, 180, 92, 0.14); --background-color: #241d14; --sub-title-color: #f6ecd9; --sub2-text-color: #8a7550; --muted: rgba(246, 236, 217, 0.7); --card-bg: rgba(255, 255, 255, 0.05); --card-bg-hover: rgba(255, 255, 255, 0.085); --card-border: rgba(226, 180, 92, 0.22); --card-shadow: rgba(0, 0, 0, 0.6); --line-color: rgba(226, 180, 92, 0.24); } /* toque tipográfico: títulos em versalete */ html[data-site-theme="renaissance"] .section-header--title, html[data-site-theme="renaissance"] .home--title h1, html[data-site-theme="renaissance"] .home--title h2 { font-variant: small-caps; letter-spacing: 2px; } /* ===================== Journal ===================== */ html[data-site-theme="journal"] body { --accent: #3d4f63; --accent-soft: rgba(61, 79, 99, 0.09); --background-color: #f5f2ea; --sub-title-color: #23282e; --sub2-text-color: #b3ada0; --muted: rgba(35, 40, 46, 0.72); --card-bg: rgba(255, 253, 247, 0.85); --card-bg-hover: #fffdf7; --card-border: rgba(35, 40, 46, 0.15); --card-shadow: rgba(40, 35, 25, 0.2); --line-color: rgba(35, 40, 46, 0.18); --font-family-principal: Georgia, "Iowan Old Style", "Times New Roman", serif; } html[data-site-theme="journal"] body.dark { --accent: #a9c2dd; --accent-soft: rgba(169, 194, 221, 0.13); --background-color: #22242a; --sub-title-color: #eef1f5; --sub2-text-color: #6d7480; --muted: rgba(238, 241, 245, 0.68); --card-bg: rgba(255, 255, 255, 0.045); --card-bg-hover: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.12); --card-shadow: rgba(0, 0, 0, 0.6); --line-color: rgba(255, 255, 255, 0.16); } /* cartões com cara de papel pautado */ html[data-site-theme="journal"] .timeline--card, html[data-site-theme="journal"] .stack--card, html[data-site-theme="journal"] .education--card { border-radius: 4px; border-left: 3px solid var(--accent); } /* ===================== Minimalist ===================== */ html[data-site-theme="minimalist"] body { --accent: #111111; --accent-soft: rgba(17, 17, 17, 0.055); --background-color: #ffffff; --sub-title-color: #111111; --sub2-text-color: #c9c9c9; --muted: rgba(17, 17, 17, 0.58); --card-bg: transparent; --card-bg-hover: rgba(17, 17, 17, 0.03); --card-border: rgba(17, 17, 17, 0.14); --card-shadow: transparent; --line-color: rgba(17, 17, 17, 0.14); } html[data-site-theme="minimalist"] body.dark { --accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.07); --background-color: #0d0d0d; --sub-title-color: #ffffff; --sub2-text-color: #4a4a4a; --muted: rgba(255, 255, 255, 0.6); --card-bg: transparent; --card-bg-hover: rgba(255, 255, 255, 0.045); --card-border: rgba(255, 255, 255, 0.16); --card-shadow: transparent; --line-color: rgba(255, 255, 255, 0.16); } /* sem sombras, cantos retos, tudo respirando */ html[data-site-theme="minimalist"] .timeline--card, html[data-site-theme="minimalist"] .stack--card, html[data-site-theme="minimalist"] .education--card, html[data-site-theme="minimalist"] .stats--item, html[data-site-theme="minimalist"] .container-pro-xp .about-me--block { border-radius: 0; box-shadow: none; } html[data-site-theme="minimalist"] .my-skills .skill-bar, html[data-site-theme="minimalist"] .contact--links a, html[data-site-theme="minimalist"] .home--cta-ghost { border-radius: 0; } html[data-site-theme="minimalist"] .stack--tags li, html[data-site-theme="minimalist"] .timeline--tags li { border-radius: 0; } html[data-site-theme="minimalist"] .timeline--tags li { border: 1px solid var(--card-border); background-color: transparent; } html[data-site-theme="minimalist"] .section-header--title::after { width: 32px; height: 1px; } /* ===================== Gruvbox ===================== */ /* paleta retrô-terrosa clássica (Pavel Pertsev): bg escuro/claro quebrado em "hard/soft", acentos saturados de baixo contraste. Os tokens --gruvbox-* são fixos (não trocam entre claro/escuro) porque servem só para a arte do herói mostrar a paleta em si, não para acompanhar o tema. */ html[data-site-theme="gruvbox"] body { --accent: #af3a03; --accent-soft: rgba(175, 58, 3, 0.12); --background-color: #fbf1c7; --sub-title-color: #3c3836; --sub2-text-color: #bdae93; --muted: rgba(60, 56, 54, 0.75); /* bg2/bg3 oficiais do Gruvbox claro: um tom abaixo do fundo (#fbf1c7), não uma transparência dele — por isso o card se destaca em vez de sumir */ --card-bg: #ebdbb2; --card-bg-hover: #d5c4a1; --card-border: rgba(60, 56, 54, 0.18); --card-shadow: rgba(60, 56, 54, 0.22); --line-color: rgba(60, 56, 54, 0.2); --font-family-principal: "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace; --gruvbox-vermelho: #cc241d; --gruvbox-verde: #98971a; --gruvbox-amarelo: #d79921; --gruvbox-aqua: #689d6a; --gruvbox-roxo: #b16286; --gruvbox-laranja: #d65d0e; } html[data-site-theme="gruvbox"] body.dark { --accent: #fe8019; --accent-soft: rgba(254, 128, 25, 0.14); --background-color: #282828; --sub-title-color: #ebdbb2; --sub2-text-color: #7c6f64; --muted: rgba(235, 219, 178, 0.72); /* bg1/bg2 oficiais do Gruvbox escuro: mesma lógica, um tom acima do fundo #282828 */ --card-bg: #3c3836; --card-bg-hover: #504945; --card-border: rgba(235, 219, 178, 0.16); --card-shadow: rgba(0, 0, 0, 0.55); --line-color: rgba(235, 219, 178, 0.16); --gruvbox-vermelho: #fb4934; --gruvbox-verde: #b8bb26; --gruvbox-amarelo: #fabd2f; --gruvbox-aqua: #8ec07c; --gruvbox-roxo: #d3869b; --gruvbox-laranja: #fe8019; } /* fonte monoespaçada nos títulos: reforça o clima de terminal/editor */ html[data-site-theme="gruvbox"] .section-header--title, html[data-site-theme="gruvbox"] .home--title h1, html[data-site-theme="gruvbox"] .home--title h2 { font-family: var(--font-family-principal); letter-spacing: -0.5px; } /* o card "Sobre Mim" é o único ponto em que a continuação da faixa passa por baixo de um elemento com fundo opaco — mas o .reveal padrão faz esse fundo entrar em fade de opacity 0→1 ao longo de 0.7s, e durante esse fade a faixa fica visível "através" do card por instantes. Aqui ele pula reto pro estado final (sem opacity/transform de transição): a faixa já não aparece por baixo em nenhum momento, nem durante o reveal. */ html[data-site-theme="gruvbox"] #section-about-me .about-me--block.reveal { opacity: 1; transform: none; transition: none; } /* o card em si é position:static (sem z-index próprio), então mesmo com a faixa em z-index:0 ele ainda perde a disputa de camadas — um elemento position:absolute sempre fica acima de um elemento static, com ou sem z-index. position:relative + z-index aqui garante que o card entre no mesmo contexto de empilhamento e vença a faixa por cima dela. */ html[data-site-theme="gruvbox"] #section-about-me .about-me--block { position: relative; z-index: 1; } /* "Ver currículo" (.home--cta-ghost) por padrão é arredondado e de borda fina — aqui ele troca para o mesmo desenho retangular e de borda grossa do "Sobre mim" (.saiba-mais-buttom) ao lado, incluindo o preenchimento que desliza no hover, para os dois botões lerem como um par no mesmo estilo */ html[data-site-theme="gruvbox"] .home--cta-ghost { position: relative; overflow: hidden; border: 3px solid var(--sub-title-color); border-radius: 0; background-color: transparent; font-weight: bold; font-family: var(--font-family-principal); transition: transform 0.25s ease; } html[data-site-theme="gruvbox"] .home--cta-ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--sub-title-color); transform: translateX(-105%); transition: transform 0.3s ease-in-out; } html[data-site-theme="gruvbox"] .home--cta-ghost:hover::before { transform: translateX(0); } html[data-site-theme="gruvbox"] .home--cta-ghost, html[data-site-theme="gruvbox"] .home--cta-ghost i { color: var(--sub-title-color); transition: color 0.4s ease; } html[data-site-theme="gruvbox"] .home--cta-ghost:hover, html[data-site-theme="gruvbox"] .home--cta-ghost:hover i { color: var(--background-color); transform: none; } html[data-site-theme="gruvbox"] .timeline--card, html[data-site-theme="gruvbox"] .stack--card, html[data-site-theme="gruvbox"] .education--card { border-radius: 6px; border-left: 3px solid var(--accent); } /* cada card do stack pega uma cor diferente da paleta na borda esquerda e no hover — o resto do site já usa --accent sozinho; aqui é onde o Gruvbox mostra a paleta inteira, não só o par accent/accent-soft */ html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+1) { border-left-color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+2) { border-left-color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+3) { border-left-color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+4) { border-left-color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+5) { border-left-color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+6) { border-left-color: var(--gruvbox-laranja); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+1):hover { border-color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+2):hover { border-color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+3):hover { border-color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+4):hover { border-color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+5):hover { border-color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+6):hover { border-color: var(--gruvbox-laranja); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+1) .stack--tags li:hover { border-color: var(--gruvbox-vermelho); color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+2) .stack--tags li:hover { border-color: var(--gruvbox-amarelo); color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+3) .stack--tags li:hover { border-color: var(--gruvbox-verde); color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+4) .stack--tags li:hover { border-color: var(--gruvbox-aqua); color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+5) .stack--tags li:hover { border-color: var(--gruvbox-roxo); color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+6) .stack--tags li:hover { border-color: var(--gruvbox-laranja); color: var(--gruvbox-laranja); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+1) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-vermelho) 16%, transparent); color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+2) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-amarelo) 16%, transparent); color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+3) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-verde) 16%, transparent); color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+4) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-aqua) 16%, transparent); color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+5) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-roxo) 16%, transparent); color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .stack--card:nth-child(6n+6) .stack--card-title i { background-color: color-mix(in srgb, var(--gruvbox-laranja) 16%, transparent); color: var(--gruvbox-laranja); } /* timeline: a bolinha (dot) da linha do tempo também cicla pela paleta */ html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+1) .timeline--dot { background-color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+2) .timeline--dot { background-color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+3) .timeline--dot { background-color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+4) .timeline--dot { background-color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+5) .timeline--dot { background-color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .timeline--item:nth-child(6n+6) .timeline--dot { background-color: var(--gruvbox-laranja); } /* header: os links do menu, ao passar o mouse, também ciclam pela paleta — dá vida ao nav sem tirar a leitura (a linha por baixo já indica "hover") */ html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+1) a:hover { color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+2) a:hover { color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+3) a:hover { color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+4) a:hover { color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+5) a:hover { color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+6) a:hover { color: var(--gruvbox-laranja); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+1) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+1) a:hover::after { background-color: var(--gruvbox-vermelho); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+2) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+2) a:hover::after { background-color: var(--gruvbox-amarelo); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+3) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+3) a:hover::after { background-color: var(--gruvbox-verde); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+4) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+4) a:hover::after { background-color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+5) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+5) a:hover::after { background-color: var(--gruvbox-roxo); } html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+6) a:hover::before, html[data-site-theme="gruvbox"] .navbar--links li:nth-child(6n+6) a:hover::after { background-color: var(--gruvbox-laranja); } html[data-site-theme="gruvbox"] .clickable--icons:hover { color: var(--gruvbox-aqua); } html[data-site-theme="gruvbox"] .navbar--site-logo:hover { border-color: var(--gruvbox-laranja); } /* ========================================================================= Arte do herói por cenário ========================================================================= */ .arte-tema { display: none; } html[data-site-theme="space"] .arte-tema_space { display: block; } /* o display fica aqui, e não na regra de moldura abaixo, senão as artes venceriam o `display: none` e apareceriam todas de uma vez */ html[data-site-theme="renaissance"] .arte-tema_renaissance, html[data-site-theme="journal"] .arte-tema_journal, html[data-site-theme="minimalist"] .arte-tema_minimalist { display: flex; } /* o blob do tema space passa a seguir a cor de destaque */ .blob-3 { color: var(--accent); } /* moldura comum das artes que não são o tema space (hiking/fantasy/gruvbox têm a sua, abaixo, porque ocupam a largura toda) */ .arte-tema_renaissance, .arte-tema_journal, .arte-tema_minimalist { position: absolute; top: 0; right: 0; align-items: center; justify-content: center; width: min(54vw, 760px); height: 100vh; color: var(--accent); pointer-events: none; z-index: 0; } .arte-tema_renaissance svg, .arte-tema_journal svg, .arte-tema_minimalist svg { width: 100%; height: 100%; max-height: 88vh; } /* --- Gruvbox: faixa diagonal na largura toda, computador antigo no meio --- */ html[data-site-theme="gruvbox"] .arte-tema_gruvbox { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--background-color); overflow: hidden; pointer-events: none; z-index: 0; } /* uma faixa só, reta, cortando o teto e a lateral direita — é uma tira apoiada no canto superior direito (não um gradiente do fundo inteiro). Dentro dela, 5 listras PARALELAS às bordas longas da tira: o gradiente vai "to right", ou seja, ao longo da LARGURA (90px → 150px), não do comprimento — por isso as 5 cores aparecem como faixas finas lado a lado, todas correndo na mesma diagonal que a tira. top/right em vw/vh (não %) de propósito: a faixa se repete em .arte-gruvbox-faixas_continuacao dentro de um container de largura diferente (o conteúdo da section, não a viewport inteira) — em %, o mesmo valor resultaria em pixels diferentes e desalinharia a diagonal na emenda entre as duas sections. Em vw/vh o pixel final é sempre o mesmo. */ .arte-gruvbox-faixas { position: absolute; top: -6vh; right: -20vw; width: 220px; height: 190vh; background: repeating-linear-gradient(to right, var(--gruvbox-aqua) 0 44px, var(--gruvbox-verde) 44px 88px, var(--gruvbox-amarelo) 88px 132px, var(--gruvbox-laranja) 132px 176px, var(--gruvbox-vermelho) 176px 220px); transform: rotate(34deg); transform-origin: top right; } .arte-gruvbox-pc { position: absolute; top: 70%; right: 8%; width: min(32vw, 420px); height: auto; transform: translateY(-50%); filter: drop-shadow(0 24px 40px var(--card-shadow)); } /* continuação da faixa: dois wrappers de overflow:hidden cortando a MESMA diagonal em pontos diferentes não bastam para alinhar — cada um revela um trecho da rotação relativo à SUA PRÓPRIA caixa (0 a height dele), então mesmo com a faixa interna idêntica o recorte final sai diferente e a diagonal parece pular na emenda. A correção: este wrapper visível mede só 30vh e começa em top:100vh (onde a section "Sobre mim" de fato começa) — mas por DENTRO dele a faixa não usa mais a regra base (que assume top:0 do próprio wrapper); ela é deslocada 100vh para cima do que a base diria, com margin-top: -100vh no PRÓPRIO wrapper substituído por um segundo nível: um "canvas" interno de 100vh (igual ao do herói) posicionado com top: -100vh dentro do wrapper de 30vh, para que a faixa, ao ser posicionada como se seu container tivesse 100vh, aterrisse exatamente na continuação certa quando só os 30vh finais desse canvas ficam visíveis. */ .arte-gruvbox-faixas-continuacao_wrapper { display: none; } html[data-site-theme="gruvbox"] .arte-gruvbox-faixas-continuacao_wrapper { display: block; position: absolute; top: 100vh; left: 0; width: 100%; height: 30vh; overflow: hidden; pointer-events: none; z-index: 0; } html[data-site-theme="gruvbox"] .arte-gruvbox-faixas-continuacao_canvas { position: absolute; top: -100vh; left: 0; width: 100%; height: 100vh; } /* cursor de terminal piscando na tela, no lugar das fatias coloridas — mesmo ritmo de um cursor de linha de comando (500ms aceso/apagado) */ @keyframes arte-gruvbox-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .arte-gruvbox-cursor { animation: arte-gruvbox-cursor 1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .arte-gruvbox-cursor { animation: none; } } /* --- Hiking: montanhas em camadas na largura toda --- */ html[data-site-theme="hiking"] .arte-tema_hiking, html[data-site-theme="fantasy"] .arte-tema_fantasy { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; /* o céu é opaco de propósito: ele cobre a cor de montanha que pinta o resto da página, mantendo a primeira tela branca */ background-color: var(--background-color); overflow: hidden; pointer-events: none; z-index: 0; } .arte-tema_hiking svg, .arte-tema_fantasy svg { position: absolute; bottom: 0; /* ancorado à direita: quando a cena é maior que a tela, o que sai de quadro é o lado esquerdo, e a montanha grande continua sendo o assunto */ right: 0; /* A largura vem da altura pela proporção do viewBox (43.06vw ≈ 100 / (1440/620)), então a cena nunca distorce. A altura é o maior entre 30vh e a proporção: no desktop manda a proporção (a cena ocupa a largura exata da tela); no celular manda o 30vh, a cena fica maior que a tela e sobra para os lados — o container recorta. Em qualquer caso a largura fica >= 100%, que é o que a emenda com a cor da página exige. */ width: auto; height: max(30vh, 43.06vw); } /* Sol de dia, lua em pixel art de noite, no mesmo lugar. Nenhuma regra abaixo distingue os temas: cada peça puxa uma variável que fica `transparent` no tema em que ela não deve aparecer (as duas paletas estão no começo do arquivo). É de propósito — assim a troca depende do mesmo mecanismo que já escurece a página inteira, e não de um seletor próprio de cada peça. */ .arte-sol-corpo { fill: var(--montanha-sol); transition: fill 0.5s ease; } .arte-sol-meio { fill: var(--montanha-sol-meio); transition: fill 0.5s ease; } .arte-sol-borda { fill: var(--montanha-sol-borda); transition: fill 0.5s ease; } .arte-lua-corpo { fill: var(--montanha-lua); transition: fill 0.5s ease; } .arte-lua-sombra { fill: var(--montanha-lua-sombra); transition: fill 0.5s ease; } .arte-lua-cratera { fill: var(--montanha-lua-cratera); transition: fill 0.5s ease; } .arte-estrelas { fill: var(--montanha-estrela); transition: fill 0.5s ease; } .arte-passaros { fill: none; stroke: var(--montanha-passaro); stroke-width: 3; stroke-linecap: round; } /* O acampamento é o mesmo de dia e de noite, com três exceções: o hiker e o cão acordado só saem de dia, o cão dormindo e a chama só de noite, e o vidro da janela troca de cor. Como no sol e na lua, quem manda é a variável — o fill-opacity é herdado pelos de dentro do grupo, que continuam com as cores literais deles. */ .arte-acampamento-dia, .arte-cena-dia { fill-opacity: var(--montanha-dia); transition: fill-opacity 0.5s ease; } .arte-acampamento-noite, .arte-cena-noite { fill-opacity: var(--montanha-noite); transition: fill-opacity 0.5s ease; } .arte-janela { fill: var(--montanha-janela); transition: fill 0.5s ease; } .arte-camada_horizonte { fill: var(--montanha-horizonte); } .arte-camada_longe { fill: var(--montanha-longe); } .arte-camada_meio { fill: var(--montanha-meio); } .arte-camada_perto { fill: var(--montanha-perto); } .arte-camada_frente { fill: var(--montanha-frente); } /* regras nos próprios elementos: vencem o fill herdado do grupo da camada */ .arte-sombra_longe { fill: var(--montanha-longe-sombra); } .arte-sombra_meio { fill: var(--montanha-meio-sombra); } .arte-sombra_perto { fill: var(--montanha-perto-sombra); } .arte-neve { fill: var(--montanha-neve); } .arte-pinheiros { fill: var(--montanha-arvore); } .arte-pinheiros_perto { fill: var(--montanha-arvore-perto); } /* --- Renaissance --- */ .arte-traco { opacity: 0.55; } .arte-rosacea { opacity: 0.75; transform-origin: center; } /* --- Journal --- */ .arte-folha rect, .arte-folha-tras rect { fill: var(--card-bg-hover); stroke: var(--card-border); stroke-width: 2; } .arte-folha-tras rect { opacity: 0.55; } .arte-linhas path { stroke: var(--accent); stroke-width: 2; opacity: 0.25; } .arte-pena-corpo { fill: var(--accent); opacity: 0.55; } .arte-pena-haste { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; opacity: 0.75; } .arte-tinta { fill: var(--accent); opacity: 0.45; } .arte-tinta_pequena { opacity: 0.3; } /* --- Minimalist --- */ .arte-tema_minimalist { opacity: 0.85; } /* ========================================================================= Seletor de cenário (nuvem de ícones) ========================================================================= */ .theme--buttom { z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; position: fixed; right: 0; bottom: 0; margin: 0 20px 20px 0; } .theme-cloud { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; pointer-events: none; } .theme--buttom_open .theme-cloud { pointer-events: auto; } .theme-cloud--option { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(16px) scale(0.6); transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme--buttom_open .theme-cloud--option { opacity: 1; transform: none; } /* abre de baixo para cima, uma atrás da outra */ .theme--buttom_open li:nth-child(6) .theme-cloud--option { transition-delay: 0.03s; } .theme--buttom_open li:nth-child(5) .theme-cloud--option { transition-delay: 0.07s; } .theme--buttom_open li:nth-child(4) .theme-cloud--option { transition-delay: 0.11s; } .theme--buttom_open li:nth-child(3) .theme-cloud--option { transition-delay: 0.15s; } .theme--buttom_open li:nth-child(2) .theme-cloud--option { transition-delay: 0.19s; } .theme--buttom_open li:nth-child(1) .theme-cloud--option { transition-delay: 0.23s; } .theme-cloud--label { padding: 6px 13px; border: 1px solid var(--card-border); border-radius: 999px; background-color: var(--background-color); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: var(--muted); box-shadow: 0 10px 24px -18px var(--card-shadow); transition: color 0.25s ease, border-color 0.25s ease; } .theme-cloud--icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--card-border); border-radius: 50%; background-color: var(--background-color); color: var(--sub-title-color); font-size: 1.05rem; box-shadow: 0 12px 26px -16px var(--card-shadow); transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; } .theme-cloud--option:hover .theme-cloud--icon { transform: scale(1.12); border-color: var(--accent); color: var(--accent); } .theme-cloud--option:hover .theme-cloud--label { border-color: var(--accent); color: var(--accent); } .theme-cloud--option[aria-pressed="true"] .theme-cloud--icon { border-color: var(--accent); background-color: var(--accent); color: var(--background-color); } .theme-cloud--option[aria-pressed="true"] .theme-cloud--label { border-color: var(--accent); color: var(--accent); } .theme--buttom-toggle { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--card-border); border-radius: 50%; background-color: var(--background-color); color: var(--accent); font-size: 1.25rem; cursor: pointer; box-shadow: 0 14px 30px -16px var(--card-shadow); transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .theme--buttom-toggle:hover { transform: scale(1.08); border-color: var(--accent); } .theme--buttom_open .theme--buttom-toggle { border-color: var(--accent); background-color: var(--accent); color: var(--background-color); } .theme-cloud--option:focus-visible .theme-cloud--icon, .theme--buttom-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ===================== Responsivo ===================== */ @media screen and (max-width: 1024px) { /* véu atrás da nuvem para os rótulos não competirem com o texto do herói */ .theme--buttom_open::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: var(--background-color); opacity: 0.82; } .arte-tema_renaissance, .arte-tema_journal, .arte-tema_minimalist { top: auto; bottom: 0; width: 100%; height: 55vh; opacity: 0.5; } /* o texto do herói é alto no mobile: sobe um pouco para não cair sobre a crista das montanhas (hiking/fantasy) ou o monitor (gruvbox) */ html[data-site-theme="hiking"] .text-block-home, html[data-site-theme="fantasy"] .text-block-home, html[data-site-theme="gruvbox"] .text-block-home { margin-top: 150px; } /* no mobile o PC não cabe ao lado do texto — some do herói. A faixa encolhe e recua para o canto extremo, fora da coluna de texto (que ocupa a largura toda nesse breakpoint), do mesmo jeito que renaissance/ journal/minimalist escondem sua arte quando não há espaço */ .arte-gruvbox-pc { display: none; } .arte-gruvbox-faixas { display: none; } html[data-site-theme="gruvbox"] .arte-gruvbox-faixas-continuacao_wrapper { top: 100vh; height: 10px; overflow: visible; background: repeating-linear-gradient(to right, var(--gruvbox-aqua) 0 44px, var(--gruvbox-verde) 44px 88px, var(--gruvbox-amarelo) 88px 132px, var(--gruvbox-laranja) 132px 176px, var(--gruvbox-vermelho) 176px 220px); } html[data-site-theme="gruvbox"] .arte-gruvbox-faixas-continuacao_canvas { top: 0; height: 10px; } .theme-cloud--icon { width: 52px; height: 52px; font-size: 1.2rem; } .theme--buttom-toggle { width: 62px; height: 62px; font-size: 1.4rem; } } /* Em tela estreita a cena é ampliada e o céu sobra pouco. O astro sai de trás do texto, encolhe e encaixa na faixa de céu à esquerda do cume (sem o scale a lua ficaria escondida atrás da montanha). Pássaros e estrelas, miúdos demais nesse tamanho, saem de cena — no botão eles pareciam sujeira. */ @media screen and (max-width: 700px) { .arte-sol-pos { transform: translate(582px, -19px) scale(0.65); } .arte-passaros, .arte-estrelas { display: none; } } @media (prefers-reduced-motion: reduce) { .theme-cloud--option { transition: opacity 0.2s ease; transform: none; } }